/* =========================================================
   FORMEDEE™ — Design Tokens
========================================================= */
:root{
  --bg-dark: #04070c;
  --bg-dark-soft: #070c14;
  --card-dark: #12151d;
  --card-dark-border: rgba(255,255,255,0.18);

  --bg-light: #f5f6f8;
  --bg-light-2: #eef0f3;

  --teal: #1fe0c4;
  --teal-2: #29c2d6;
  --teal-deep: #0a5f57;
  --teal-dim: rgba(31,224,196,0.14);

  --text-onlight: #0a121c;
  --text-onlight-muted: #5a6472;
  --text-ondark: #eef2f5;
  --text-ondark-muted: #97a1ae;

  --border-onlight: rgba(10,20,30,0.16);
  --border-ondark: rgba(255,255,255,0.16);

  --font-display: 'Space Grotesk', 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(.22,.85,.32,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto; overflow-x: hidden; width:100%; max-width:100vw;
  overscroll-behavior-x: none; touch-action: pan-y;
}
body{
  margin:0;
  background: var(--bg-light);
  color: var(--text-onlight);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; max-width:100vw;
  overscroll-behavior-x: none; touch-action: pan-y;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
address{ font-style:normal; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
svg{ display:block; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--teal); color:#04140f;
  padding:10px 16px; z-index:999; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Layout helpers
========================================================= */
.section{ position:relative; padding:112px 0; }
.section-inner{ max-width: var(--container); margin:0 auto; padding:0 32px; }
.section-light{ background: var(--bg-light); color: var(--text-onlight); }
.section-dark{ background: var(--bg-dark); color: var(--text-ondark); }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }

.section-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-onlight-muted);
  margin-bottom: 22px;
}
.section-eyebrow.light{ color: var(--text-ondark-muted); }
.section-eyebrow .idx{
  font-size: 26px; font-weight:700; color: var(--teal);
  letter-spacing:0; line-height:1;
}

.section-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(30px, 4vw, 44px);
  line-height:1.14;
  letter-spacing:-0.01em;
  margin-bottom: 22px;
}
.section-title.dark{ color: var(--text-onlight); }
.section-title.light{ color: var(--text-ondark); }
.section-title.small{ font-size: clamp(26px, 3.2vw, 36px); }
.accent-dark{ color: var(--teal-deep); background: linear-gradient(90deg,#0a5f57,#0e8a7d); -webkit-background-clip:text; background-clip:text; color:transparent; }

.section-desc{ font-size:17.5px; line-height:1.7; max-width: 48ch; }
.section-desc.dark{ color: var(--text-onlight-muted); }
.section-desc.light-muted{ color: var(--text-ondark-muted); }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size:14.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 24px; border-radius:8px;
  transition: transform .35s var(--ease), background .3s ease, border-color .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn svg{ transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
.btn-primary{
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color:#04140f;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(31,224,196,.55); }
.btn-outline{
  border:1px solid var(--teal-deep); color: var(--teal);
  background: transparent;
}
.btn-outline:hover{ background: var(--teal-dim); }
.btn-play{ padding:12px 24px 12px 12px; }
.play-circle{
  width:26px; height:26px; border-radius:50%; border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background .3s ease;
}
.btn-play:hover .play-circle{ background: var(--teal-dim); }
.btn-ghost{ color: var(--text-ondark); }
.btn-ghost svg path{ fill: var(--teal); }
.btn-ghost:hover{ color: var(--teal); }

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 22px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(4,7,12,.5) 0%, rgba(4,7,12,0) 100%);
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(4,7,12,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-ondark);
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand-logo{ height:30px; width:auto; aspect-ratio: 3719 / 640; flex-shrink:0; }
.brand{ flex-shrink:0; }
.nav-group{ display:flex; align-items:center; gap:40px; }
.main-nav ul{ display:flex; gap:30px; }
.main-nav a{
  font-size:14px; font-weight:500; letter-spacing:.03em; text-transform:uppercase;
  color: #c9d0d7;
  position:relative; padding-bottom:4px;
  transition: color .25s ease;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--teal); transition: width .3s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color: var(--text-ondark); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

.nav-cta{ font-size:13px; padding:12px 22px; flex-shrink:0; border-color: var(--teal) !important; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:101; }
.nav-toggle span{ height:1.5px; width:100%; background: var(--text-ondark); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  display:none; position:fixed; inset:0; z-index:99;
  background: rgba(4,7,12,0.98);
  flex-direction:column; align-items:center; justify-content:center; gap:36px;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu ul{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.mobile-menu a{ font-family: var(--font-display); font-size:22px; color: var(--text-ondark); }

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative; min-height:100vh; background: var(--bg-dark);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding-top: 96px;
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:0; background: var(--bg-dark); }
.hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:1; opacity:1; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:none; will-change:opacity; z-index:2;
}
.hero-media.videos-ready .hero-poster{ opacity:0; transition:opacity .6s ease; }
.hero-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: linear-gradient(100deg, rgba(4,7,12,.62) 0%, rgba(4,7,12,.46) 32%, rgba(4,7,12,.18) 52%, transparent 66%),
              linear-gradient(180deg, rgba(4,7,12,0) 0%, rgba(4,7,12,.32) 82%, var(--bg-dark) 100%);
}
.hero-inner{
  position:relative; z-index:5; max-width: var(--container); margin:0 auto; width:100%;
  padding: 40px 32px 0;
}
.hero-copy{ max-width: 620px; }
.eyebrow{
  font-family: var(--font-display); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--teal); margin-bottom:22px; opacity:1;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.hero-title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(38px, 5.4vw, 62px); line-height:1.08; letter-spacing:-0.015em;
  color: #ffffff; margin-bottom:26px;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .accent{ color: var(--teal); background: linear-gradient(90deg,#1fe0c4,#5fe8f0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-desc{ font-size:18.5px; line-height:1.7; color: #d7dee4; max-width:50ch; margin-bottom:36px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.hero-pillars{
  position:relative; z-index:5; max-width: var(--container); margin: 60px auto 0; width:100%;
  padding: 26px 32px; display:grid; grid-template-columns: repeat(4,1fr); gap:28px;
  border-top:1px solid rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(4,7,12,.15) 0%, rgba(4,7,12,.55) 100%);
  backdrop-filter: blur(6px);
}
.hero-pillars li{ display:flex; align-items:center; gap:14px; position:relative; padding-left:28px; }
.hero-pillars li:first-child{ padding-left:0; }
.hero-pillars li::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:34px; background: rgba(255,255,255,.35);
}
.hero-pillars li:first-child::before{ display:none; }
.pillar-icon{ width:42px; height:42px; flex-shrink:0; color: var(--teal); filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.hero-pillars span{ font-size:14px; line-height:1.42; color: #eef2f5; text-shadow: 0 2px 10px rgba(0,0,0,.7); }

.scroll-indicator{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.55); border-radius:20px;
  display:flex; align-items:flex-start; justify-content:center; padding-top:8px; z-index:4;
  background: rgba(4,7,12,.35); backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.scroll-dot{ width:4px; height:4px; border-radius:50%; background: var(--teal); animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(14px); opacity:0;} 100%{ opacity:0; } }

/* =========================================================
   Section 01 Vision
========================================================= */
.vision-grid{ align-items:center; grid-template-columns: 0.85fr 1.15fr; }
.vision-graphic{ position:relative; }
.dome-media{
  position:relative; width:100%; aspect-ratio: 4 / 3; overflow:hidden;
}
.dome-poster, .dome-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter: brightness(2.1) saturate(.3) contrast(.8);
}
.section-dark .dome-poster, .section-dark .dome-video{
  filter: brightness(1.05) saturate(.55) contrast(.95);
}
.dome-video{ opacity:0; will-change:opacity; }
.dome-media.video-ready .dome-poster{ opacity:0; transition:opacity .8s ease; }
/* strong fade at every edge so it dissolves into the section — no visible box */
.dome-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 35%, var(--bg-light) 92%),
    linear-gradient(to right, var(--bg-light), transparent 18%, transparent 82%, var(--bg-light)),
    linear-gradient(to bottom, var(--bg-light), transparent 18%, transparent 82%, var(--bg-light));
}
.section-dark .dome-media::after{
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 35%, var(--bg-dark) 92%),
    linear-gradient(to right, var(--bg-dark), transparent 18%, transparent 82%, var(--bg-dark)),
    linear-gradient(to bottom, var(--bg-dark), transparent 18%, transparent 82%, var(--bg-dark));
}

/* =========================================================
   Section 02 Why cards
========================================================= */
.why-layout{ display:flex; gap:40px; align-items:flex-start; }
.why-label{ width:190px; flex-shrink:0; }
.why-eyebrow{ display:block; margin-bottom:22px; }
.why-eyebrow .idx{ display:block; margin-bottom:8px; }
.dot-grid svg{ width:100%; max-width:90px; height:auto; color: var(--teal); opacity:.55; }
.corner-scatter{
  position:absolute; right:0; bottom:0; width:340px; height:100%; max-height:520px;
  color: var(--teal); pointer-events:none; opacity:.65; z-index:0;
}
.corner-scatter--top{ bottom:auto; top:0; color: var(--teal-deep); opacity:.55; }

.why-grid{
  flex:1; min-width:0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:1px;
  background: var(--border-ondark);
  border:1px solid var(--border-ondark); border-radius:14px; overflow:hidden;
}
.why-card{
  background: var(--card-dark); padding:32px 24px; position:relative;
  transition: transform .4s var(--ease), background .4s ease, border-color .4s ease;
}
.why-num{ font-family: var(--font-display); font-size:13px; color: var(--text-ondark-muted); }
.why-icon{ width:50px; height:50px; margin:18px 0 22px; color: var(--teal); transition: filter .3s ease, transform .3s ease; }
.why-card h3{ font-family: var(--font-display); font-size:18px; font-weight:600; margin-bottom:10px; color: var(--text-ondark); }
.why-card p{ font-size:15.5px; line-height:1.6; color: var(--text-ondark-muted); }
.why-card:hover{ transform: translateY(-4px); background: #171a23; }
.why-card:hover .why-icon{ filter: drop-shadow(0 0 8px rgba(31,224,196,.55)); transform: scale(1.06); }

/* =========================================================
   Section 03 Ecosystem
========================================================= */
.ecosystem-grid{ align-items:center; grid-template-columns: 0.82fr 1.18fr; }
.ecosystem-diagram{ position:relative; padding: 8px; }
#ecosystemSvg{ width:100%; height:auto; }
.ecosystem-labels{ position:absolute; inset:0; font-size:16px; }
.lbl{
  position:absolute; display:flex; align-items:center; gap:8px; max-width:132px;
  color: var(--text-onlight); font-weight:500; line-height:1.3;
}
.lbl-ico{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:#fff; border:1px solid var(--border-onlight); box-shadow: 0 4px 14px rgba(10,20,30,.06);
}
.lbl-tl{ top:4%; left:0; }
.lbl-bl{ bottom:6%; left:0; }
.lbl-tr{ top:2%; right:0; flex-direction: row-reverse; text-align:right; }
.lbl-mr{ top:42%; right:0; flex-direction: row-reverse; text-align:right; }
.lbl-br{ bottom:4%; right:0; flex-direction: row-reverse; text-align:right; }

/* =========================================================
   Section 04 FIRCV cards
========================================================= */
.fircv-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:52px;
}
.fircv-card{
  background: var(--card-dark); border:1px solid var(--card-dark-border); border-radius:14px;
  padding:30px 24px; transition: transform .4s var(--ease), border-color .4s ease;
}
.fircv-icon{ width:54px; height:54px; color: var(--teal); margin-bottom:22px; }
.fircv-card h3{ font-family: var(--font-display); font-size:18px; font-weight:600; margin-bottom:10px; color: var(--text-ondark); }
.fircv-card p{ font-size:15.5px; line-height:1.6; color: var(--text-ondark-muted); }
.fircv-card:hover{ transform: translateY(-4px); border-color: rgba(31,224,196,.4); }
.draw{ stroke-dasharray: 120; stroke-dashoffset: 120; }
.draw-circle{ stroke-dasharray: 90; stroke-dashoffset: 90; }
.fircv-card.in-view .draw, .fircv-card.in-view .draw-circle{ stroke-dashoffset:0; transition: stroke-dashoffset 1s var(--ease); }

/* =========================================================
   Sections 05/06 — FIRCV detail (text + diagram, expandable panel)
========================================================= */
.fircv-detail-grid{ grid-template-columns: 0.85fr 1.15fr; align-items:center; }
.fircv-detail .btn{ margin-top:8px; }

.fircv-expand-btn svg{ transition: transform .3s var(--ease); }
.fircv-expand-btn:hover svg{ transform: translateX(3px) scale(1.03); }
.fircv-expand-btn{ transform: scale(1); transition: transform .25s var(--ease), background .3s ease, border-color .3s ease, color .3s ease; }
.fircv-expand-btn:hover{ transform: scale(1.025); filter: brightness(1.08); }

/* --- 05: process-flow diagram --- */
.process-flow{ position:relative; width:100%; aspect-ratio: 900 / 420; }
#processFlowSvg{ position:absolute; inset:0; width:100%; height:100%; color: var(--teal-deep); }
.process-steps{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.pf-step{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; width:17%; text-align:center;
}
.pf-ico{
  width:76px; height:76px; border-radius:18px; background:#fff; flex-shrink:0;
  border:1px solid var(--border-onlight); box-shadow:0 6px 18px rgba(10,20,30,.08);
  display:flex; align-items:center; justify-content:center; color: var(--teal-deep); margin-bottom:14px;
}
.pf-ico svg{ width:34px; height:34px; }
.pf-label{ font-size:13px; line-height:1.4; color: var(--text-onlight-muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.pf-loop{
  position:absolute; left:50%; top:82%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:14px; padding:14px 26px; border-radius:14px;
  background:#fff; border:1px solid var(--border-onlight); box-shadow:0 6px 18px rgba(10,20,30,.08);
  white-space:nowrap;
}
.pf-loop .pf-ico{ width:44px; height:44px; margin-bottom:0; border-radius:12px; }
.pf-loop .pf-ico svg{ width:22px; height:22px; }
.pf-loop .pf-label{ font-size:14px; }
.pf-flow-path{ stroke-dasharray:6 5; opacity:0; }
.process-flow.in-view .pf-flow-path{ opacity:.55; transition:opacity 1s ease; }
.process-flow.in-view .pf-step, .process-flow.in-view .pf-loop{ opacity:1; transform:translate(-50%,-50%) translateY(0); }
.pf-step, .pf-loop{ opacity:0; transform:translate(-50%,-50%) translateY(10px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.pf-step[data-pf="0"]{ left:8%; top:20%; transition-delay:.05s; }
.pf-step[data-pf="1"]{ left:29%; top:20%; transition-delay:.15s; }
.pf-step[data-pf="2"]{ left:50%; top:20%; transition-delay:.25s; }
.pf-step[data-pf="3"]{ left:71%; top:20%; transition-delay:.35s; }
.pf-step[data-pf="4"]{ left:92%; top:20%; transition-delay:.45s; }
.pf-loop{ transition-delay:.55s; }

/* --- 06: hexagon network diagram --- */
.hex-network{ position:relative; width:100%; aspect-ratio: 1 / 1; max-width:620px; margin:0 auto; }
#hexNetworkSvg{ position:absolute; inset:0; width:100%; height:100%; color: var(--teal); }
.hex-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(135deg, rgba(31,224,196,.16), rgba(4,7,12,.5));
  border: 1px solid var(--teal); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2px; z-index:2;
}
.hex-center-title{ font-family: var(--font-display); font-weight:700; font-size:18px; color:#fff; }
.hex-center-sub{ font-size:11px; font-weight:700; color: #e6ebee; text-transform:uppercase; letter-spacing:.04em; max-width:90px; }
.hex-nodes{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.hex-node{
  position:absolute; left:var(--hx); top:var(--hy); transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px; z-index:2;
  opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hex-node[data-hex="1"], .hex-node[data-hex="3"], .hex-node[data-hex="5"]{ flex-direction:row-reverse; text-align:right; }
.hex-node[data-hex="6"]{ flex-direction:column; text-align:center; }
.hex-node[data-hex="6"] .hex-label{ margin-top:2px; }
.hex-node[data-hex="0"]{ transition-delay:.1s; } .hex-node[data-hex="1"]{ transition-delay:.18s; }
.hex-node[data-hex="2"]{ transition-delay:.26s; } .hex-node[data-hex="3"]{ transition-delay:.34s; }
.hex-node[data-hex="4"]{ transition-delay:.42s; } .hex-node[data-hex="5"]{ transition-delay:.5s; }
.hex-node[data-hex="6"]{ transition-delay:.58s; }
.hex-network.in-view .hex-node{ opacity:1; }
.hex-ico{
  width:70px; height:70px; flex-shrink:0; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--card-dark); border:1px solid var(--card-dark-border);
  display:flex; align-items:center; justify-content:center; color: var(--teal);
}
.hex-ico svg{ width:30px; height:30px; }
.hex-label{ font-size:13.5px; line-height:1.35; color: #dbe1e6; font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.hex-link{ stroke-dasharray:5 4; opacity:0; }
.hex-network.in-view .hex-link{ opacity:.5; transition:opacity 1s ease; }

.expand-backdrop{
  position:fixed; inset:0; background: rgba(4,7,12,.55); z-index:200;
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.expand-backdrop.open{ opacity:1; pointer-events:auto; }

.expand-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(480px, 92vw); z-index:201;
  background:
    radial-gradient(ellipse 480px 320px at 100% 0%, rgba(31,224,196,.14), transparent 60%),
    var(--bg-light);
  color: var(--text-onlight);
  transform: translateX(100%); transition: transform .45s var(--ease);
  overflow-y:auto; overflow-x:hidden; box-shadow: -24px 0 60px rgba(4,7,12,.3);
  pointer-events:none;
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--teal), transparent 40%) 1;
}
.expand-panel.open{ transform: translateX(0); pointer-events:auto; }
.expand-panel--dark{
  background:
    radial-gradient(ellipse 480px 320px at 100% 0%, rgba(31,224,196,.18), transparent 60%),
    var(--bg-dark);
  color: var(--text-ondark);
}
.expand-scatter{
  position:absolute; top:0; right:0; width:260px; height:340px;
  color: var(--teal); opacity:.5; pointer-events:none; z-index:0;
}
.expand-panel-inner{ padding: 64px 40px 48px; position:relative; z-index:1; }
.expand-sheet-handle{ display:none; }
.expand-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:7px 14px 7px 10px; border-radius:20px; color: var(--teal);
  background: var(--teal-dim); border:1px solid rgba(31,224,196,.3);
  font-family: var(--font-display); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.expand-close{
  position:absolute; top:28px; right:28px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-onlight); display:flex; align-items:center; justify-content:center;
  color: inherit; transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.expand-panel--dark .expand-close{ border-color: var(--border-ondark); }
.expand-close:hover{ border-color: var(--teal); color: var(--teal); transform: rotate(90deg); }
.expand-content h3{
  font-family: var(--font-display); font-weight:600; font-size:22px; line-height:1.3;
  margin-bottom:22px; padding-right:20px;
}
.expand-content p{ font-size:15px; line-height:1.75; margin-bottom:18px; opacity:.88; }
.expand-showless{ display:none; margin-top:8px; font-family: var(--font-display); font-weight:600; font-size:14px; color: var(--teal); text-decoration:underline; text-underline-offset:4px; }

@media (max-width: 1080px){
  .fircv-detail-grid{ grid-template-columns:1fr; }
  .hex-network{ max-width:460px; }
}

@media (max-width: 640px){
  .pf-label{ font-size:8.5px; }
  .pf-ico{ width:40px; height:40px; }
  .hex-label{ font-size:10.5px; }
  .hex-ico{ width:44px; height:44px; }
  .hex-center{ width:104px; height:104px; }
  .hex-center-title{ font-size:14px; }
  .hex-node{ max-width:118px; }
  .hex-node[data-hex="0"]{ --hx: 24% !important; --hy: 6% !important; }
  .hex-node[data-hex="1"]{ --hx: 76% !important; --hy: 6% !important; }
  .hex-node[data-hex="2"]{ --hx: 16% !important; --hy: 42% !important; }
  .hex-node[data-hex="3"]{ --hx: 84% !important; --hy: 42% !important; }
  .hex-node[data-hex="4"]{ --hx: 24% !important; --hy: 78% !important; }
  .hex-node[data-hex="5"]{ --hx: 76% !important; --hy: 78% !important; }
  .hex-node[data-hex="6"]{ --hx: 50% !important; --hy: 97% !important; }
}

@media (max-width: 860px){
  .expand-panel{
    position:fixed; top:auto; left:0; right:0; bottom:0; height:auto;
    max-height:82vh; width:100%;
    transform: translateY(100%); transition: transform .4s var(--ease);
    box-shadow: 0 -16px 50px rgba(4,7,12,.35);
    border-radius: 22px 22px 0 0;
    overflow-y:auto; pointer-events:none;
  }
  .expand-panel.open{ transform: translateY(0); pointer-events:auto; }
  .expand-panel-inner{ padding: 30px 24px 40px; }
  .expand-sheet-handle{
    display:block; width:40px; height:4px; border-radius:3px;
    background: var(--border-onlight); margin:0 auto 18px;
  }
  .expand-panel--dark .expand-sheet-handle{ background: var(--border-ondark); }
  .expand-sheet-handle{ display:block; }
  .expand-close{ display:flex; top:18px; right:18px; }
  .expand-showless{ display:none; }
}

/* =========================================================
   Section 07 Stats
========================================================= */
.advantage-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center; }
.stats-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:36px 28px;
  padding-left:40px; border-left:1px solid var(--border-onlight);
}
.stat{ position:relative; text-align:center; padding:0; border-left:none; }
.stat:first-child{ border-left:none; }
.stat-media{
  position:relative; width:110px; height:110px; margin:16px auto 0;
  border-radius:50%; overflow:hidden; background: var(--bg-light-2);
}
.stat-poster, .stat-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.stat-video{ opacity:0; }
.stat-media.video-ready .stat-video{ opacity:1; transition:opacity .6s ease; }
.stat-media.video-ready .stat-poster{ opacity:0; transition:opacity .6s ease; }
.stat-value{ position:relative; z-index:1; font-family: var(--font-display); font-size: clamp(28px,3.4vw,38px); font-weight:700; color: var(--text-onlight); }
.stat-word{ letter-spacing:.02em; }
.stat-label{ position:relative; z-index:1; font-size:13.5px; color: var(--text-onlight-muted); margin-top:8px; text-transform:uppercase; letter-spacing:.05em; }

/* =========================================================
   Section 06 Scientific Excellence
========================================================= */
.excellence-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap:0; margin-top:56px;
}
.excellence-item{
  padding: 0 20px; border-left:1px solid var(--border-ondark);
  transition: opacity .3s ease;
}
.excellence-item:first-child{ border-left:none; padding-left:0; }
.excellence-item svg{ width:44px; height:44px; color: var(--teal); margin-bottom:20px; }
.excellence-item h4{ font-family: var(--font-display); font-size:16.5px; font-weight:600; color: var(--text-ondark); margin-bottom:10px; }
.excellence-item p{ font-size:14.5px; line-height:1.55; color: var(--text-ondark-muted); }
.excellence-item:hover svg{ filter: drop-shadow(0 0 8px rgba(31,224,196,.5)); }

/* =========================================================
   Section 07 Global Collaboration
========================================================= */
.collab-grid{ align-items:center; grid-template-columns: 1.15fr 0.85fr; }
.collab-list{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.collab-list li{
  display:flex; align-items:center; gap:16px; font-family: var(--font-display);
  font-size:15.5px; font-weight:600; letter-spacing:.02em; color: var(--text-onlight);
  padding-bottom:14px; border-bottom:1px solid var(--border-onlight);
}
.collab-list li span{ color: var(--teal-deep); font-size:14px; }

/* =========================================================
   Section wave divider (light -> dark transition)
========================================================= */
.section-wave{ display:block; line-height:0; background: var(--bg-light); margin-bottom:-1px; }
.section-wave svg{ width:100%; height:64px; display:block; }
@media (max-width:860px){ .section-wave svg{ height:40px; } }

/* =========================================================
   Legal pages (Privacy Policy, Terms, Cookie Policy, Imprint)
========================================================= */
.legal-page{ background: var(--bg-light); min-height:100vh; }
.legal-header{
  position:sticky; top:0; z-index:50; background: rgba(4,7,12,.92); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border-ondark); padding:18px 0;
}
.legal-header-inner{ max-width:820px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }
.legal-back{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color: var(--text-ondark-muted); transition:color .25s ease; }
.legal-back:hover{ color: var(--teal); }
.legal-main{ max-width:820px; margin:0 auto; padding:64px 32px 100px; }
.legal-eyebrow{ font-family: var(--font-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--teal-deep); margin-bottom:14px; }
.legal-title{ font-family: var(--font-display); font-weight:700; font-size: clamp(30px,4vw,42px); line-height:1.15; color: var(--text-onlight); margin-bottom:14px; }
.legal-updated{ font-size:13px; color: var(--text-onlight-muted); margin-bottom:36px; }
.legal-notice{
  display:flex; gap:14px; background: var(--card-dark); color: var(--text-ondark);
  border:1px solid var(--card-dark-border); border-radius:14px; padding:20px 22px; margin-bottom:44px;
}
.legal-notice svg{ flex-shrink:0; color: var(--teal); margin-top:2px; }
.legal-notice p{ font-size:13.5px; line-height:1.65; color: var(--text-ondark-muted); margin:0; }
.legal-notice strong{ color: var(--text-ondark); }
.legal-body h2{
  font-family: var(--font-display); font-weight:600; font-size:22px; color: var(--text-onlight);
  margin: 42px 0 14px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--text-onlight); margin:26px 0 10px; }
.legal-body p{ font-size:15px; line-height:1.75; color: var(--text-onlight-muted); margin-bottom:16px; }
.legal-body ul{ margin:0 0 16px; padding-left:22px; }
.legal-body li{ font-size:15px; line-height:1.75; color: var(--text-onlight-muted); margin-bottom:8px; list-style:disc; }
.legal-body a{ color: var(--teal-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-body strong{ color: var(--text-onlight); }
.legal-table{ width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:14px; }
.legal-table th, .legal-table td{ text-align:left; padding:10px 14px; border:1px solid var(--border-onlight); color: var(--text-onlight-muted); }
.legal-table th{ background: var(--bg-light-2); color: var(--text-onlight); font-family: var(--font-display); font-weight:600; }
.legal-contact-box{
  background: var(--bg-light-2); border:1px solid var(--border-onlight); border-radius:14px;
  padding:24px 26px; margin-top:8px;
}
.legal-contact-box p{ margin-bottom:6px; }

@media (max-width:640px){
  .legal-main{ padding:44px 20px 70px; }
  .legal-header-inner{ padding:0 20px; }
}

/* =========================================================
   Footer
========================================================= */
.site-footer{
  position:relative; background: var(--bg-dark); color: var(--text-ondark);
  overflow:hidden; padding: 48px 0 28px;
}
.footer-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; }
.footer-inner{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; padding:0 32px; }

.footer-row{
  display:flex; align-items:flex-start; gap:56px; flex-wrap:wrap;
  padding-bottom:30px; border-bottom:1px solid var(--border-ondark);
}
.footer-brand-block{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex-shrink:0; max-width:260px; }
.footer-cta-title{
  font-family: var(--font-display); font-weight:500;
  font-size: 14.5px; line-height:1.5; color: var(--text-ondark-muted); margin:0;
}
.footer-cta-btn{ font-size:12px; padding:10px 18px; }

.footer-mid{ display:flex; align-items:flex-start; gap:40px; margin-left:auto; flex-wrap:wrap; }

.footer-contact{ display:flex; flex-direction:column; gap:9px; flex-shrink:0; padding-top:2px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color: var(--text-ondark-muted); line-height:1.4; }
.footer-contact svg{ margin-top:2px; flex-shrink:0; color: var(--teal); }
.footer-contact a:hover{ color: var(--teal); }

.footer-offices{ display:flex; gap:26px; flex-wrap:wrap; padding-left:26px; border-left:1px solid var(--border-ondark); }
.footer-office{ display:flex; align-items:flex-start; gap:9px; }
.office-dot{
  width:7px; height:7px; border-radius:50%; background: var(--teal); margin-top:6px; flex-shrink:0;
  box-shadow: 0 0 8px rgba(31,224,196,.7);
}
.office-dot--soon{ background: var(--text-ondark-muted); box-shadow:none; }
.office-entity{ display:block; font-family: var(--font-display); font-size:13.5px; font-weight:600; color: var(--text-ondark); white-space:nowrap; }
.office-city{ display:block; font-size:12px; color: var(--text-ondark-muted); white-space:nowrap; margin-top:1px; }
.office-tag{
  display:inline-block; margin-top:6px; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color: var(--text-ondark-muted); padding:2px 8px; border:1px solid var(--border-ondark); border-radius:20px;
}
.office-tag--hq{ color: var(--teal); border-color: rgba(31,224,196,.35); }

.footer-social{ display:flex; gap:10px; flex-shrink:0; }
.footer-social a{
  width:32px; height:32px; border:1px solid var(--border-ondark); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--text-ondark-muted);
  transition: border-color .3s ease, color .3s ease;
}
.footer-social a:hover{ border-color: var(--teal); color: var(--teal); }

.footer-legal-address{
  display:flex; align-items:flex-start; gap:8px; padding-top:22px;
  font-size:12px; color: var(--text-ondark-muted); opacity:.75;
}
.footer-legal-address svg{ margin-top:1px; flex-shrink:0; }

.footer-legal{ padding-top:16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-legal-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal-links a{ font-size:12px; color: var(--text-ondark-muted); transition: color .25s ease; }
.footer-legal-links a:hover{ color: var(--teal); }
.footer-copy{ font-size:13px; color: var(--text-ondark-muted); }

.back-to-top{
  position: fixed; right:24px; bottom:24px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  background: rgba(18,21,29,.9); border:1px solid var(--border-ondark); color: var(--teal);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, border-color .3s ease;
  backdrop-filter: blur(8px);
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color: var(--teal); }

@media (max-width: 1080px){
  .footer-row{ flex-direction:column; align-items:flex-start; gap:24px; }
  .footer-mid{ margin-left:0; flex-direction:column; gap:20px; }
  .footer-offices{ padding-left:0; border-left:none; padding-top:16px; border-top:1px solid var(--border-ondark); }
  .footer-social{ align-self:flex-start; }
}

/* =========================================================
   Reveal animation base state
========================================================= */
[data-reveal]{ opacity:0; transform: translateY(22px); }
.reveal-ready [data-reveal]{ transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].revealed{ opacity:1; transform:none; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1080px){
  .why-layout{ flex-direction:column; gap:28px; }
  .why-label{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .dot-grid svg{ max-width:70px; }
  .why-grid{ grid-template-columns: repeat(3,1fr); }
  .why-card:nth-child(4), .why-card:nth-child(5){ border-top:1px solid var(--border-ondark); }
  .fircv-grid{ grid-template-columns: repeat(2,1fr); }
  .excellence-grid{ grid-template-columns: repeat(3,1fr); }
  .excellence-item:nth-child(4){ border-left:none; padding-left:0; }
  .excellence-item{ margin-top:36px; }
  .excellence-item:nth-child(1),.excellence-item:nth-child(2),.excellence-item:nth-child(3){ margin-top:0; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:36px 20px; }
  .advantage-grid{ grid-template-columns:1fr; gap:40px; }
  .stats-grid{ padding-left:0; border-left:none; padding-top:36px; border-top:1px solid var(--border-onlight); }
}

@media (max-width: 860px){
  .nav-group{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{ display:flex; }

  .grid-2{ grid-template-columns:1fr; gap:44px; }
  .hero-pillars{ grid-template-columns: repeat(2,1fr); }
  .hero-pillars li{ padding-left:0; }
  .hero-pillars li::before{ display:none; }
  .lbl{ max-width:130px; font-size:13px; }
  .lbl-tl{ left:0; top:0; } .lbl-bl{ left:0; bottom:0; } .lbl-tr{ right:0; top:0; } .lbl-mr{ right:0; top:40%; } .lbl-br{ right:0; bottom:0; }

  .why-grid{ grid-template-columns: 1fr 1fr; }
  .fircv-grid{ grid-template-columns:1fr; }
  .excellence-grid{ grid-template-columns: 1fr 1fr; }
  .excellence-item{ border-left:none !important; padding-left:0 !important; margin-top:30px; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .scroll-indicator{ display:none; }
}

@media (max-width: 540px){
  .section{ padding:80px 0; }
  .section-inner{ padding:0 22px; }
  .hero-inner{ padding:32px 22px 0; }
  .hero-pillars{ padding:22px; grid-template-columns:1fr 1fr; gap:22px 16px; }
  .why-grid{ grid-template-columns: 1fr; }
  .excellence-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .header-inner{ padding: 0 20px; }
  .brand-logo{ height:24px; }
}