:root {
  --navy: #071426;
  --navy-soft: #10243e;
  --blue: #19a7ff;
  --cyan: #54e3dd;
  --orange: #ffad45;
  --ink: #102035;
  --muted: #5e6d7f;
  --paper: #f4f8fb;
  --white: #ffffff;
  --line: rgba(11, 29, 50, 0.12);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: white; padding: .8rem 1rem; border-radius: 12px; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 82px;
  padding: 0 clamp(1.2rem, 5vw, 5rem);
  color: white;
  background: rgba(7, 20, 38, .82);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font: 700 1.55rem "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--cyan); }
.brand-mark { position: relative; display: flex; align-items: center; gap: 3px; height: 32px; width: 28px; }
.brand-mark i { display: block; width: 3px; border-radius: 8px; background: linear-gradient(var(--cyan), var(--blue)); transform: rotate(24deg); }
.brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 12px; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 23px; }
.brand-mark i:nth-child(3) { height: 31px; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2rem); }
.main-nav a { color: #dce8f5; text-decoration: none; font-size: .86rem; font-weight: 700; }
.main-nav a:hover { color: var(--cyan); }
.language-button { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #8da0b8; border-radius: 999px; padding: .5rem .7rem; font-weight: 800; cursor: pointer; }
.language-button span { margin: 0 .12rem; }
.language-button .active-lang { color: white; }
.menu-button { display: none; margin-left: auto; border: 0; background: transparent; padding: .6rem; }
.menu-button > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: white; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding: 160px clamp(1.2rem, 7vw, 8rem) 64px;
  color: white;
  background:
    linear-gradient(115deg, rgba(7,20,38,.98) 15%, rgba(7,20,38,.82) 55%, rgba(10,35,59,.95)),
    radial-gradient(circle at 70% 35%, #15568c 0, #071426 50%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 4rem;
}
.hero::before { content:""; position:absolute; inset:0; opacity:.14; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent, black); }
.hero-copy, .hero-visual, .hero-stats { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1.1rem; color: var(--cyan); font-size: .74rem; font-weight: 800; letter-spacing: .2em; }
.eyebrow.dark { color: #097abf; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.08; }
h1 { max-width: 880px; margin: 0; font-size: clamp(3rem, 6vw, 6.4rem); letter-spacing: -.065em; }
h1 em { color: var(--cyan); font-style: normal; }
.hero-lead { max-width: 700px; margin: 1.8rem 0 0; color: #c4d2e2; font-size: clamp(1.03rem, 1.5vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; padding: .85rem 1.4rem; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy); background: linear-gradient(120deg, var(--cyan), #89f5dc); box-shadow: 0 12px 35px rgba(84,227,221,.18); }
.button-secondary { color: white; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); }

.hero-visual { min-height: 520px; display: grid; place-items: center; }
.custode-hero-photo { position:relative; z-index:4; width:min(100%,620px); margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:38px; background:#201031; box-shadow:0 35px 75px rgba(0,0,0,.42); animation:float 5s ease-in-out infinite; }
.custode-hero-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 68%,rgba(2,10,18,.68)); }
.custode-hero-photo img { display:block; width:100%; height:auto; }
.custode-hero-photo figcaption { position:absolute; z-index:2; left:1.3rem; bottom:1.1rem; display:flex; align-items:center; gap:.55rem; color:#e6f4fb; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.custode-hero-photo figcaption i { width:8px; height:8px; border-radius:50%; background:#42f3a2; box-shadow:0 0 12px #42f3a2; }
.orbit { position: absolute; border: 1px solid rgba(84,227,221,.24); border-radius: 50%; }
.orbit-one { width: 500px; height: 500px; }
.orbit-two { width: 390px; height: 390px; border-style: dashed; animation: spin 25s linear infinite; }
.floating-chip { position: absolute; z-index: 6; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(84,227,221,.35); border-radius: 22px; background: rgba(11,35,57,.8); box-shadow: 0 15px 30px rgba(0,0,0,.3); backdrop-filter: blur(10px); color: var(--cyan); font: 700 .8rem "Space Grotesk"; }
.chip-one { left: 0; top: 18%; }.chip-two { right: 4%; top: 8%; }.chip-three { right: 0; bottom: 13%; }
.hero-stats { grid-column: 1 / -1; display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero-stats div { flex: 1; display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; border-right: 1px solid rgba(255,255,255,.12); }
.hero-stats strong { color: var(--cyan); font: 700 1.4rem "Space Grotesk"; }
.hero-stats span { color: #a9b9ca; font-size: .82rem; font-weight: 700; }

.section { padding: clamp(5.5rem, 9vw, 9rem) clamp(1.2rem, 7vw, 8rem); }
.section-light { background: #f5f8fa; }
.section-heading { max-width: 820px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .custode-copy h2, .support-content h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -.055em; }
.section-heading > p:last-child { max-width: 700px; margin-top: 1.5rem; color: var(--muted); font-size: 1.05rem; }
.centered > p:last-child { margin-inline: auto; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 4rem; }
.principle-card { position: relative; min-height: 320px; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 20px 50px rgba(17,42,70,.06); }
.card-number { position: absolute; right: 2rem; color: #9aabbb; font: 600 .75rem "Space Grotesk"; }
.line-icon { width: 68px; height: 68px; margin: 2.5rem 0 2rem; border: 1px solid #a4cde5; border-radius: 22px; background: radial-gradient(circle, rgba(25,167,255,.17), transparent 65%); position:relative; }
.line-icon::before, .line-icon::after { content:""; position:absolute; background:#168ed5; }
.line-icon::before { width: 28px; height: 2px; left: 19px; top: 32px; }
.line-icon::after { width: 2px; height: 28px; left: 32px; top: 19px; }
.learning-icon { transform: rotate(45deg); }.learning-icon::before, .learning-icon::after { transform: rotate(-45deg); }
.data-icon::before { height: 28px; width: 5px; left: 20px; top: 25px; box-shadow: 11px -8px #168ed5, 22px -18px #168ed5; }.data-icon::after { display:none; }
.principle-card h3 { font-size: 1.35rem; }.principle-card p { color: var(--muted); }

.custode-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; color: white; background: var(--navy); }
.custode-frame { position: relative; min-height: 620px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 40px; background: radial-gradient(circle at 50% 45%, #174c72, #081827 60%); display:grid; place-items:center; }
.custode-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 95%, rgba(84,227,221,.12) 95%); background-size:100% 7px; opacity:.4; }
.status-pill { position:absolute; z-index:3; left:1.5rem; top:1.5rem; display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius:999px; color:#cce5ee; background:rgba(0,0,0,.28); font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.status-pill i { width:8px; height:8px; border-radius:50%; background:#42f3a2; box-shadow:0 0 10px #42f3a2; }
.wire-robot { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.wire-head { width:170px; height:125px; border:3px solid #bfefff; border-radius:48%; background:#0b1b2a; display:flex; align-items:center; justify-content:center; gap:38px; box-shadow:0 0 40px rgba(84,227,221,.22); }
.wire-head span { width:22px; height:16px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }
.wire-neck { width:38px; height:34px; border-inline:3px solid #bfefff; }
.wire-torso { width:260px; height:230px; display:grid; place-items:center; border:3px solid #bfefff; border-radius:75px 75px 30px 30px; background:linear-gradient(145deg, rgba(255,255,255,.08), transparent); color:var(--cyan); font:700 1.3rem "Space Grotesk"; }
.wire-arm { position:absolute; top:175px; width:140px; height:34px; border:3px solid #bfefff; border-radius:999px; }.wire-arm.left { right:78%; transform:rotate(25deg); }.wire-arm.right { left:78%; transform:rotate(-25deg); }
.custode-copy .large-copy { color:white; font-size:1.25rem; }.custode-copy > p:not(.eyebrow):not(.large-copy) { color:#aabdd1; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.5rem; padding:0; margin:2rem 0; list-style:none; }
.feature-list li { padding-left:1.5rem; color:#d5e4ef; font-size:.9rem; font-weight:700; position:relative; }.feature-list li::before { content:""; position:absolute; left:0; top:.55rem; width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.notice { padding:1rem 1.2rem; border-left:3px solid var(--orange); color:#9fb1c2; background:rgba(255,255,255,.04); font-size:.8rem; }

.modules-section { background:#f8fafc; }
.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:4rem; }
.module-card { min-height:230px; padding:2rem; border:1px solid var(--line); border-radius:24px; background:white; transition:transform .25s, box-shadow .25s; }
.module-card:hover { transform:translateY(-6px); box-shadow:0 20px 45px rgba(18,55,85,.09); }
.module-card > span { color:#0a8acb; font:700 .75rem "Space Grotesk"; }.module-card h3 { margin-top:3rem; font-size:1.35rem; }.module-card p { color:var(--muted); }

.platform-preview { overflow:hidden; background:linear-gradient(180deg,#edf5fb,#fff); }
.platform-image { max-width:1380px; margin:4rem auto 0; padding:.75rem; border:1px solid rgba(14,99,157,.15); border-radius:32px; background:white; box-shadow:0 35px 90px rgba(15,67,105,.14); }
.platform-image img { display:block; width:100%; height:auto; border-radius:22px; }
.platform-image figcaption { padding:.9rem .8rem .25rem; color:#6a7b8d; text-align:center; font-size:.75rem; }

.roadmap-section { color:white; background:linear-gradient(135deg,#071426,#0d2945); }
.roadmap-section .section-heading { max-width:930px; }
.timeline { margin-top:4rem; border-top:1px solid rgba(255,255,255,.15); }
.timeline-item { display:grid; grid-template-columns:80px 1fr; gap:1.3rem; padding:2rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.timeline-item > span { display:grid; place-items:center; width:54px; height:54px; border:1px solid #527089; border-radius:50%; color:#839db2; font:700 .8rem "Space Grotesk"; }
.timeline-item.complete > span, .timeline-item.active > span { color:var(--navy); background:var(--cyan); border-color:var(--cyan); }
.timeline-item small { color:var(--cyan); font-size:.65rem; font-weight:800; letter-spacing:.14em; }.timeline-item h3 { margin:.35rem 0; font-size:1.45rem; }.timeline-item p { margin:0; color:#94a9bc; }

.support-section { position:relative; overflow:hidden; padding:clamp(6rem,10vw,10rem) clamp(1.2rem,10vw,12rem); color:white; background:#0b88cc; }
.support-section::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(3,21,37,.85),rgba(3,21,37,.2)); }
.support-orb { position:absolute; right:-5%; top:-55%; width:700px; height:700px; border-radius:50%; border:120px solid rgba(84,227,221,.16); box-shadow:0 0 0 80px rgba(255,255,255,.04); }
.support-content { position:relative; z-index:2; max-width:900px; }.support-content p:not(.eyebrow) { max-width:700px; color:#d6e9f5; font-size:1.05rem; }.support-content .button { margin-top:1rem; }

footer { display:flex; align-items:center; gap:2rem; padding:2.2rem clamp(1.2rem,7vw,8rem); color:#9eb0c2; background:#050f1d; font-size:.8rem; }
.footer-brand { color:white; }.footer-small { margin-left:auto; }.footer-small a { color:var(--cyan); }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes float { 50% { transform:translateY(-12px); } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 980px) {
  .main-nav { position:absolute; top:82px; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; padding:1.5rem; background:#071426; }
  .main-nav.open { display:flex; }.menu-button { display:block; }.language-button { margin-left:0; }
  .hero { grid-template-columns:1fr; padding-top:140px; }.hero-visual { min-height:480px; }.hero-stats { grid-column:auto; }
  .principles-grid, .module-grid { grid-template-columns:repeat(2,1fr); }.custode-section { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .site-header { gap:.7rem; }.language-button { font-size:.72rem; }
  h1 { font-size:clamp(2.7rem,14vw,4rem); }.hero { gap:2rem; }.hero-visual { min-height:390px; transform:scale(.8); margin:-40px -50px; }
  .hero-stats { flex-direction:column; }.hero-stats div { padding:1rem 0; border-right:0; }
  .principles-grid, .module-grid { grid-template-columns:1fr; }.principle-card { min-height:auto; }
  .custode-frame { min-height:480px; }.wire-robot { transform:scale(.78); }.feature-list { grid-template-columns:1fr; }
  footer { flex-direction:column; align-items:flex-start; gap:.5rem; }.footer-small { margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } *, *::before, *::after { animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}