@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');
/* FDERA Brand Style Guide v1.0 — design tokens (section 18). Text-muted lightened from #71717A for WCAG AA. */
:root{
  --fdera-black:#0A0A0B;--fdera-white:#FFFFFF;--fdera-lime:#C7FF3D;
  --bg-primary:#0A0A0B;--bg-secondary:#111113;--surface-primary:#18181B;--surface-elevated:#202024;
  --border-subtle:#27272A;--border-default:#3F3F46;
  --text-primary:#FFFFFF;--text-secondary:#A1A1AA;--text-muted:#8B8B95;
  --accent-primary:#C7FF3D;--accent-hover:#D7FF80;--accent-dark:#9AC92A;
  --font-heading:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --container-max:1280px;--pad:max(6%,calc((100% - var(--container-max))/2));
  --transition-fast:150ms ease;--transition-normal:250ms ease;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text-primary);background:var(--bg-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
:focus-visible{outline:2px solid var(--accent-primary)}

/* Header / logo */
header{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);border-bottom:1px solid var(--border-subtle);gap:22px}
.logo{display:inline-flex;align-items:center}
.logo img{display:block;height:30px;width:auto}
footer .logo img{height:26px}
nav{display:flex;gap:27px;font-size:13px;font-weight:500;color:var(--text-secondary)}
nav a{transition:color var(--transition-fast)}
nav a:hover{color:var(--text-primary)}

/* Buttons: lime primary, outlined secondary */
.button,button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--accent-primary);background:var(--accent-primary);color:var(--fdera-black);padding:16px 24px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}
.button:hover,button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.light{background:var(--accent-primary);color:var(--fdera-black)}
.button.ghost,button.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-default)}
.button.ghost:hover,button.ghost:hover{background:var(--surface-primary);border-color:var(--text-secondary)}
.small{font-size:12px;padding:12px 16px}

/* Hero */
.hero{padding:88px var(--pad) 80px;display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-family:var(--font-mono)}
.eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-primary)}
h1,h2,h3{font-family:var(--font-heading)}
h1{font-size:clamp(42px,5.6vw,80px);line-height:1.04;letter-spacing:-2.5px;margin:26px 0;font-weight:700}
h1 em{font-style:normal;color:var(--accent-primary)}
p{line-height:1.7;color:var(--text-secondary)}
.lead{font-size:17px;max-width:540px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.caption{font-size:12px;margin-top:25px;color:var(--text-muted)}

/* Ecosystem graphic — flat, geometric, no glow */
.visual{background-color:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);min-height:435px;color:var(--text-primary);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px}
.orbit{width:280px;height:280px;border:1px solid var(--border-default);border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.orbit:before,.orbit:after{content:'';position:absolute;border-radius:50%;border:1px solid var(--border-subtle)}
.orbit:before{inset:-45px}.orbit:after{inset:-90px}
.core{border:1px solid var(--accent-primary);background:var(--surface-primary);border-radius:var(--radius-lg);width:140px;height:140px;display:grid;place-content:center;justify-items:center;text-align:center}
.core img{width:58px;height:58px;display:block}
.core small{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;margin-top:12px;color:var(--text-secondary)}
.node{position:absolute;background:var(--surface-primary);padding:11px 15px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;white-space:nowrap}
.n1{top:15px;left:-30px}.n2{right:-65px;top:115px}.n3{bottom:20px;left:-30px}
.visual-label{position:absolute;left:25px;top:23px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--text-secondary)}
.visual-bottom{position:absolute;bottom:20px;left:25px;right:25px;font-family:var(--font-mono);font-size:10px;display:flex;justify-content:space-between;color:var(--text-muted)}

/* Sections */
.strip{border-block:1px solid var(--border-subtle);background:var(--bg-secondary);padding:22px var(--pad);display:flex;justify-content:space-between;gap:15px;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.section{padding:96px var(--pad)}
h2{font-size:clamp(29px,3.4vw,48px);letter-spacing:-1.2px;line-height:1.12;margin:20px 0 28px;font-weight:700}
.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:32px}
.section-head p{max-width:400px}
.journeys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid var(--border-subtle);padding:30px;background:var(--surface-primary);border-radius:var(--radius-md);transition:transform var(--transition-normal),border-color var(--transition-normal),background var(--transition-normal)}
a.card:hover{transform:translateY(-3px);border-color:var(--border-default);background:var(--surface-elevated)}
.card .number{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.card h3{font-size:23px;letter-spacing:-.6px}
.card p{font-size:14px}
.card .link{display:block;margin-top:27px;font-size:13px;font-weight:600;color:var(--accent-primary)}
.card:last-child:nth-child(3n + 2){grid-column:span 2}
.dark{background:var(--bg-secondary);border-block:1px solid var(--border-subtle)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:75px}
.steps{border-top:1px solid var(--border-subtle)}
.step{padding:23px 0;border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:45px 1fr;gap:20px}
.step>span{font-family:var(--font-mono);font-size:12px;color:var(--accent-primary);padding-top:5px}
.step h3{margin:0;font-size:19px}
.step p{margin-bottom:0;font-size:13px}
.feature-list{padding-left:20px;line-height:2.2;color:var(--text-secondary)}
.banner{padding:50px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-primary);display:flex;justify-content:space-between;align-items:center;gap:30px}
.banner h2{margin:10px 0}

/* Footer */
footer{padding:55px var(--pad) 28px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px;border-top:1px solid var(--border-subtle);background:var(--bg-primary)}
footer p{margin:14px 0 0;font-size:13px}
footer a:not(.logo){display:block;font-size:13px;margin-bottom:15px;color:var(--text-secondary);transition:color var(--transition-fast)}
footer a:not(.logo):hover{color:var(--text-primary)}
footer small{grid-column:1/-1;border-top:1px solid var(--border-subtle);padding-top:25px;color:var(--text-muted);font-size:12px}

/* Forms & utility pages */
.narrow{max-width:850px;margin:auto}
.section.narrow{padding-inline:6%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:block;font-size:13px;font-weight:600}
input,select,textarea{width:100%;margin-top:9px;padding:13px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-primary);color:var(--text-primary)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-primary);outline-offset:0;border-color:var(--accent-primary)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
textarea{min-height:110px}
.full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button:disabled{opacity:.6;cursor:wait}
.check{display:flex;align-items:start;gap:10px;font-weight:400;line-height:1.6;color:var(--text-secondary)}
.check input{width:auto;margin-top:5px;accent-color:var(--accent-primary)}
.check a{color:var(--text-primary)}
.notice{padding:17px 20px;background:var(--surface-primary);border:1px solid var(--border-subtle);border-left:3px solid var(--accent-primary);border-radius:var(--radius-sm);font-size:13px;line-height:1.7;margin-bottom:25px;color:var(--text-secondary)}
.notice strong{color:var(--text-primary)}
.success{border:1px solid var(--border-subtle);background:var(--surface-primary);padding:30px;border-radius:var(--radius-md)}
.status-row{display:grid;grid-template-columns:1fr 2fr;padding:19px 0;border-bottom:1px solid var(--border-subtle);gap:25px}
.status-row span{color:var(--text-secondary)}
.badge{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--accent-primary);color:var(--accent-primary);padding:4px 8px;border-radius:var(--radius-sm);display:inline-block}
details{padding:20px 0;border-bottom:1px solid var(--border-subtle)}
summary{cursor:pointer;font-weight:600}
.skip{position:absolute;top:-60px}
.skip:focus{top:0;background:var(--accent-primary);color:var(--fdera-black);padding:15px;z-index:9}
.error{color:#FF7A70}
code{overflow-wrap:anywhere;font-family:var(--font-mono)}
.task{padding:20px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin:15px 0;color:var(--text-primary)}
.task input{width:auto}
.menu-note{font-size:12px;color:var(--text-muted)}

@media(max-width:900px){
  header{flex-wrap:wrap}
  nav{order:3;width:100%;overflow:auto;gap:22px;padding-top:10px;white-space:nowrap}
  .hero{grid-template-columns:1fr;padding-top:45px;gap:35px}
  h1{letter-spacing:-1.5px}
  .visual{min-height:365px}
  .journeys{grid-template-columns:1fr 1fr}
  .card:last-child:nth-child(3n + 2){grid-column:auto}
  .split{gap:35px}
  .section-head{display:block}
}
@media(max-width:600px){
  .section{padding:56px var(--pad)}
  .journeys,.split,.form-grid{grid-template-columns:1fr}
  .split{display:block}.split>*+*{margin-top:35px}
  .full{grid-column:auto}
  .strip{flex-wrap:wrap}.strip span{width:45%}
  .banner{padding:25px;display:block}.banner .button{margin-top:20px}
  footer{grid-template-columns:1fr 1fr}footer>div:first-child{grid-column:1/-1}
  .status-row{grid-template-columns:1fr}
  .visual{min-height:340px}
  .orbit{transform:scale(.85)}
  .button{padding:15px 18px}
  .section-head{margin-bottom:25px}
  h1{font-size:46px}
  .hero{padding-top:35px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
