/* ===== Luthen shared design system ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --navy:#0A1628;
  --navy2:#0d1e35;
  --navy3:#112240;
  --cyan:#00B4D8;
  --cyan-2:#0dcfef;
  --cyan-dim:rgba(0,180,216,0.12);
  --teal:#1D9E75;
  --teal-2:#22b886;
  --teal-lt:#E1F5EE;
  --grey:#8FA8C8;
  --grey-2:#B0C3D6;
  --grey-lt:#EBF0F5;
  --green-bg:#061e14;
  --warm:#F5F4F0;
  --warm-2:#ECEAE5;
  --mid:#7A7975;
  --mid-2:#B4B2A9;
  --border-d:rgba(255,255,255,0.07);
  --border-d2:rgba(255,255,255,0.14);
  --border-l:rgba(10,22,40,0.08);
}

html{scroll-behavior:smooth}
body{
  font-family:'Sora',system-ui,sans-serif;
  font-weight:300;
  background:#fff;
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===== NAV ===== */
nav.topnav{
  position:sticky;top:0;z-index:200;
  background:rgba(10,22,40,0.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:0.5px solid var(--border-d);
  height:62px;display:flex;align-items:center;
  padding:0 2.5rem;justify-content:space-between;
}
.nav-left{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-sub{font-size:11px;color:rgba(255,255,255,0.25);font-weight:300;letter-spacing:.02em;border-left:0.5px solid rgba(255,255,255,0.12);padding-left:14px}
.nav-logo-word{font-family:'Playfair Display',serif;font-size:17px;font-weight:400;color:#fff;letter-spacing:0.08em}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-size:13px;color:rgba(255,255,255,0.4);text-decoration:none;font-weight:300;transition:color .2s}
.nav-links a:hover{color:rgba(255,255,255,.85)}
.nav-links a.active{font-weight:400}
.nav-links a.active-teal{font-weight:500}
.nav-sep{width:0.5px;height:18px;background:var(--border-d)}

.btn-nav{background:var(--cyan);color:var(--navy) !important;border:none;padding:9px 22px;border-radius:50px;font-size:13px;font-family:'Sora',sans-serif;font-weight:500;cursor:pointer;transition:all .2s;letter-spacing:.01em}
.btn-nav:hover{background:var(--cyan-2);transform:translateY(-1px)}
.btn-nav.green{background:var(--teal);color:#fff}
.btn-nav.green:hover{background:var(--teal-2)}

/* ===== BUTTONS ===== */
.btn-primary{background:var(--cyan);color:var(--navy);border:none;padding:14px 30px;border-radius:50px;font-size:14px;font-family:'Sora',sans-serif;font-weight:500;cursor:pointer;transition:all .2s;letter-spacing:.01em}
.btn-primary:hover{background:var(--cyan-2);transform:translateY(-1px)}
.btn-primary.green{background:var(--teal);color:#fff}
.btn-primary.green:hover{background:var(--teal-2)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.55);border:0.5px solid rgba(255,255,255,.18);padding:14px 30px;border-radius:50px;font-size:14px;font-family:'Sora',sans-serif;font-weight:300;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);color:#fff}
.btn-light{background:transparent;color:var(--navy);border:0.5px solid rgba(10,22,40,.2);padding:14px 30px;border-radius:50px;font-size:14px;font-family:'Sora',sans-serif;font-weight:400;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.btn-light:hover{border-color:var(--navy);background:var(--warm)}

/* ===== SECTIONS ===== */
.section{padding:6rem 2.5rem}
.section.tight{padding:4.5rem 2.5rem}
.section-inner{max-width:1040px;margin:0 auto}
.section-inner.wide{max-width:1200px}
.section-inner.narrow{max-width:820px}

.bg-white{background:#fff}
.bg-warm{background:var(--warm)}
.bg-navy{background:var(--navy)}
.bg-navy2{background:var(--navy2)}
.bg-green{background:var(--green-bg)}

/* ===== TYPE ===== */
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:.7rem}
.eyebrow.cyan{color:var(--cyan)}
.eyebrow.teal{color:var(--teal)}
.eyebrow.grey{color:var(--grey)}
.eyebrow.mid{color:var(--mid)}
.eyebrow.white{color:rgba(255,255,255,.4)}

h1.display,h2.display{
  font-family:'Playfair Display',serif;
  font-weight:400;letter-spacing:-1.4px;line-height:1.04;
  text-wrap:balance;
}
h1.display{font-size:clamp(38px,5.4vw,64px);color:var(--navy);margin-bottom:1rem}
h2.display{font-size:clamp(28px,3.8vw,46px);color:var(--navy);margin-bottom:.85rem}
.display em{font-style:italic;color:var(--mid)}
.display.light{color:#fff}
.display.light em{color:rgba(255,255,255,.35)}
.display em.cyan{color:var(--cyan)}
.display em.teal{color:var(--teal)}
.display em.grey{color:var(--grey)}

.section-sub{font-size:15px;color:var(--mid);line-height:1.8;max-width:540px;margin-bottom:2.75rem;font-weight:300;text-wrap:pretty}
.section-sub.light{color:rgba(255,255,255,.42)}
.section-sub.center{margin-left:auto;margin-right:auto;text-align:center}

/* ===== PILLS & BADGES ===== */
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:50px;padding:6px 16px;margin-bottom:2rem}
.pill.cyan{border:0.5px solid rgba(0,180,216,.22);background:rgba(0,180,216,.06)}
.pill.teal{border:0.5px solid rgba(29,158,117,.22);background:rgba(29,158,117,.06)}
.pill.grey{border:0.5px solid rgba(143,168,200,.22);background:rgba(143,168,200,.06)}
.pill.warm{border:0.5px solid var(--border-l);background:var(--warm)}
.pill-dot{width:6px;height:6px;border-radius:50%}
.pill-dot.cyan{background:var(--cyan)}
.pill-dot.teal{background:var(--teal)}
.pill-dot.grey{background:var(--grey)}
.pill-text{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.pill-text.cyan{color:var(--cyan)}
.pill-text.teal{color:var(--teal)}
.pill-text.grey{color:var(--grey)}
.pill-text.mid{color:var(--mid)}

/* ===== CODE BLOCKS ===== */
.code-block{background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden}
.code-bar{display:flex;align-items:center;gap:7px;padding:10px 16px;background:rgba(255,255,255,.04);border-bottom:0.5px solid rgba(255,255,255,.06)}
.code-dot{width:8px;height:8px;border-radius:50%}
.code-dot.r{background:#FF5F57}.code-dot.a{background:#FEBC2E}.code-dot.g{background:#28C840}
.code-filename{font-size:11px;color:rgba(255,255,255,.25);margin-left:auto;font-family:'DM Mono',monospace}
.code-body{padding:1.5rem 1.75rem;text-align:left;font-family:'DM Mono',monospace;font-size:13px;line-height:2;font-weight:300}
.cc{color:rgba(255,255,255,.22)}  /* comment */
.ck{color:#C792EA}                /* keyword */
.cf{color:var(--cyan)}            /* function */
.cf.teal{color:var(--teal)}
.cs{color:#C3E88D}                /* string */
.cv{color:#FFCB6B}                /* variable */
.cn{color:#F78C6C}                /* number */
.cp{color:rgba(255,255,255,.7)}   /* plain */
.code-line{display:block}
.code-output{border-top:0.5px solid rgba(255,255,255,.06);padding:1rem 1.75rem;font-family:'DM Mono',monospace;font-size:12px;display:flex;flex-direction:column;gap:4px}
.out-line{display:flex;gap:10px}
.out-icon.cyan{color:var(--cyan)}
.out-icon.teal{color:var(--teal)}
.out-icon.grey{color:var(--grey)}
.out-text{color:rgba(255,255,255,.38)}

/* ===== TAGS ===== */
.tag{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;padding:3px 9px;border-radius:20px;display:inline-block}
.tag.cyan{background:rgba(0,180,216,.1);color:#0A5A6E}
.tag.teal{background:var(--teal-lt);color:#085041}
.tag.grey{background:var(--grey-lt);color:#3A5068}
.tag.mid{background:var(--warm);color:var(--mid)}
.tag.dark-teal{background:rgba(29,158,117,.15);color:#9FE1CB}
.tag.dark-grey{background:rgba(143,168,200,.15);color:#C8D9E8}
.tag.dark-cyan{background:rgba(0,180,216,.12);color:#7FE0F4}

/* ===== CTA SECTION ===== */
.cta-section{padding:7rem 2.5rem;text-align:center;position:relative;overflow:hidden}
.cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:2rem}

/* ===== FOOTER ===== */
footer.footer{
  background:var(--navy);
  border-top:0.5px solid var(--border-d);
  padding:2.5rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
}
.footer-left{display:flex;flex-direction:column;gap:.4rem}
.footer-tagline{font-size:11px;color:rgba(255,255,255,.2);font-weight:300}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}
.footer-links a{font-size:12px;color:rgba(255,255,255,.28);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.6)}
.footer-links a.teal{color:rgba(29,158,117,.6)}
.footer-links a.teal:hover{color:var(--teal)}
.footer-links a.grey{color:rgba(143,168,200,.6)}
.footer-links a.grey:hover{color:var(--grey)}

/* ===== HERO DOT BACKGROUNDS ===== */
.hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,180,216,0.14) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 40%,transparent 100%)}
.hero-dots.teal{background-image:radial-gradient(rgba(29,158,117,0.16) 1px,transparent 1px)}
.hero-dots.grey{background-image:radial-gradient(rgba(143,168,200,0.14) 1px,transparent 1px)}
.hero-glow{position:absolute;pointer-events:none;width:800px;height:500px;top:-100px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,180,216,.07) 0%,transparent 65%)}
.hero-glow.teal{background:radial-gradient(ellipse,rgba(29,158,117,.08) 0%,transparent 65%)}
.hero-glow.grey{background:radial-gradient(ellipse,rgba(143,168,200,.07) 0%,transparent 65%)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes edgePulse{0%,100%{opacity:.2}50%{opacity:.7}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== FRAMEWORK TABS — grey variant for Agent SDK ===== */
.ftab[aria-selected="true"][data-tab="sdk"] .ftab-name{color:var(--grey)}
.ftab-body.grey li::before{background:var(--grey)}
.ftab-link.grey{color:var(--grey)}

/* ===== UTIL ===== */
.center{text-align:center}
.mono{font-family:'DM Mono',monospace}
.muted{color:var(--mid)}

/* ===== TRUST BAR ===== */
.trust-bar{background:var(--warm);border-top:0.5px solid var(--border-l);border-bottom:0.5px solid var(--border-l);padding:1.4rem 2.5rem;display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px}
.trust-tick{color:var(--teal);font-size:13px}
.trust-val{font-size:13px;font-weight:500;color:var(--navy)}
.trust-lbl{font-size:12px;color:var(--mid);font-weight:300}
.trust-pipe{width:0.5px;height:16px;background:var(--border-l)}

/* ===== SIMPLE GRID CARDS ===== */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);border:0.5px solid var(--border-l);border-radius:16px;overflow:hidden}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.gcell{padding:2rem;border-right:0.5px solid var(--border-l);border-bottom:0.5px solid var(--border-l);transition:background .2s}
.gcell:hover{background:var(--warm)}
.gcell:nth-child(2n){border-right:none}
.gcell:nth-last-child(-n+2){border-bottom:none}
.gcell.dark{background:var(--navy2);border-color:rgba(255,255,255,.06)}
.gcell.dark:hover{background:var(--navy3)}
.gcell h3{font-size:15px;font-weight:500;color:var(--navy);margin-bottom:.4rem}
.gcell.dark h3{color:#fff}
.gcell p{font-size:13px;color:var(--mid);line-height:1.7;font-weight:300}
.gcell.dark p{color:rgba(255,255,255,.4)}

/* Hamburger menu button */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.nav-hamburger span{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(7px,7px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

@media (max-width:760px){
  nav.topnav{padding:0 1.25rem;flex-wrap:wrap}
  .nav-hamburger{display:flex}
  .nav-links{position:fixed;top:62px;left:0;right:0;background:rgba(10,22,40,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;border-bottom:0.5px solid transparent;z-index:100}
  .nav-links.open{max-height:500px;padding:1rem 0;border-bottom-color:var(--border-d)}
  .nav-links a{padding:14px 1.25rem;border-bottom:0.5px solid rgba(255,255,255,.06);display:block !important;color:rgba(255,255,255,.85) !important;font-size:15px}
  .nav-links a.active{color:#fff !important;font-weight:500}
  .nav-links a.cortex{color:var(--teal) !important}
  .nav-links a:last-child{border-bottom:none}
  .nav-links .nav-sep{display:none}
  .nav-links .btn-nav{margin:0.5rem 1.25rem;text-align:center;color:var(--navy) !important}
  .section{padding:4rem 1.25rem}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .trust-bar{gap:1rem;padding:1rem 1.25rem}
}

/* problem grid */
.prob-section{padding:5.5rem 2.5rem}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;border:0.5px solid var(--border-l);border-radius:18px;overflow:hidden;margin-top:2.5rem;background:#fff}
.prob-card{padding:2.25rem 2rem;border-right:0.5px solid var(--border-l);border-bottom:0.5px solid var(--border-l)}
.prob-card:nth-child(2),.prob-card:nth-child(4){border-right:none}
.prob-card:nth-child(3),.prob-card:nth-child(4){border-bottom:none}
.prob-icon{margin-bottom:1.25rem;color:var(--mid)}
.prob-card h3{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;color:var(--navy);margin:0 0 .65rem;letter-spacing:-.3px}
.prob-card p{font-size:15px;color:var(--mid);line-height:1.7;margin:0 0 1rem}
.prob-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:12px;color:var(--mid);background:var(--warm);border:0.5px solid var(--border-l);border-radius:6px;padding:5px 10px}
@media(max-width:640px){.prob-grid{grid-template-columns:1fr}.prob-card{border-right:none}.prob-card:nth-child(3){border-bottom:0.5px solid var(--border-l)}}
