:root {
  --navy: #0b1019;
  --navy2: #121a28;
  --sky: #79f1ff;
  --sky2: #d9fbff;
  --coral: #ff6d5c;
  --cream: #eef1f4;
  --paper: #151e2c;
  --ink: #f4f7fb;
  --muted: #aab5c3;
  --line: #334154;
  --lime: #d6ff69;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

body { background: #0b1019; color: var(--ink); line-height: 1.6; }
header { height: 76px; padding-inline: clamp(20px, 5vw, 72px); background: rgba(11, 16, 25, .84); border-bottom-color: var(--line); backdrop-filter: blur(18px); }
.brand { color: var(--ink); letter-spacing: .12em; }
.brand span { color: var(--sky); }
.brand strong { letter-spacing: .08em; }
header nav a { color: #c4ccd7; font-size: 12px; letter-spacing: .02em; }
header nav a:hover { color: var(--sky); text-decoration: none; }
.nav-toggle { border-color: var(--line); color: var(--ink); background: var(--navy2); }
main { background: #0b1019; }

body.home .hero {
  min-height: 720px;
  max-width: none;
  padding: clamp(86px, 9vw, 140px) clamp(24px, 8vw, 132px);
  background: linear-gradient(112deg, rgba(11, 16, 25, .97), rgba(11, 16, 25, .84) 47%, rgba(11, 16, 25, .58)), url('/assets/embodied-interface.jpg') center right / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
body.home .hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 64%, rgba(121, 241, 255, .09)); pointer-events: none; }
body.home .hero:after { width: 620px; height: 620px; border-color: rgba(121, 241, 255, .19); right: -280px; top: -350px; }
.eyebrow, .label { color: var(--sky); font-size: 10px; letter-spacing: .18em; }
.hero-copy h1, .page-hero h1, .article-hero h1, .section-head h2, .visual-story h2, .newsletter h2, .method h2 { font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif; letter-spacing: -.075em; }
.hero-copy h1 { font-size: clamp(58px, 7.2vw, 116px); max-width: 800px; }
.hero-copy h1 em { color: var(--sky); }
.lede { color: #cad3df; max-width: 690px; }
.button { border-radius: 99px; padding: 14px 21px; transition: transform .18s, background .18s, box-shadow .18s; }
.button.primary { background: var(--sky); color: #09111a; box-shadow: 0 0 0 5px rgba(121, 241, 255, .09); }
.button.primary:hover { background: var(--lime); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(121, 241, 255, .22); }
.button.ghost { border-color: #607185; color: var(--ink); }
.button.ghost:hover { border-color: var(--sky); color: var(--sky); text-decoration: none; }
.hero-stats { gap: 24px; }
.hero-stats div { border-left-color: #516175; }
.hero-stats dt { color: var(--ink); font-size: 31px; }
.hero-stats dd { color: var(--muted); }
.conversation-demo { border: 1px solid #708097; border-radius: 18px; padding: 27px; background: rgba(245, 249, 255, .96); box-shadow: 0 30px 90px rgba(0, 0, 0, .4), 0 0 0 9px rgba(121, 241, 255, .09); transform: rotate(1.6deg); }
.bubble { border-radius: 14px !important; }
.bubble.user { background: #152c48; }
.bubble.bot { background: #dffbff; }
.bubble.coral { background: #ffe1dc; }
.demo-actions button { border-radius: 99px; padding: 9px 14px; cursor: pointer; }
.demo-actions button:hover { background: var(--sky2); }

.principles, .map, .library, .research-grid, .method, .coverage, .source-library, .about-grid { padding-block: clamp(78px, 9vw, 132px); padding-inline: clamp(24px, 8vw, 132px); }
.principles { background: #111927; }
.principles > h2 { color: var(--ink); font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif; font-size: clamp(44px, 6vw, 88px); letter-spacing: -.07em; margin-bottom: 60px; }
.principle-grid { border-color: var(--line); }
.principle-grid article { border-color: var(--line); padding-top: 30px; }
.principle-grid h3, .map-grid h3 { color: var(--ink); font-size: 25px; }
.principle-grid p, .map-grid p { color: var(--muted); }
.featured { background: linear-gradient(135deg, #c9f8ff, #e3edff 55%, #d7d3ff); color: #0c1728; }
.featured .eyebrow, .featured .section-head > a { color: #2547a5; }
.featured .section-head h2 { color: #101c30; }
.card-grid { gap: 14px; }
.guide-card { background: rgba(255, 255, 255, .72); border: 1px solid rgba(12, 23, 40, .18); border-radius: 16px; min-height: 355px; box-shadow: 0 10px 30px rgba(25, 50, 80, .08); }
.guide-card:hover { transform: translateY(-8px) rotate(-.3deg); box-shadow: 0 25px 50px rgba(25, 50, 80, .2); }
.guide-card h3 { color: #12223a; font-size: 29px; }
.guide-card p { color: #5a6b7e; }
.card-link { color: #1e5b94; }
.map { background: #0e1521; }
.map .section-head h2 { color: var(--ink); }
.map-grid { border-color: var(--line); }
.map-grid a { border-color: var(--line); background: #111a28; transition: background .18s, transform .18s; }
.map-grid a:hover { background: #1c2b3d; transform: translateY(-3px); }
.map-grid span { color: var(--sky); }
.visual-story { background: linear-gradient(100deg, #ff735d, #ffb45a); color: #101926; }
.visual-story figure { background: #08111d; }
.visual-story img { filter: saturate(.72) contrast(1.12); min-height: 500px; }
.visual-story figcaption { background: #08111d; color: #c9d5e3; }
.visual-story h2 { font-size: clamp(40px, 5vw, 74px); }
.newsletter { padding: 86px clamp(24px, 8vw, 132px); background: #0b1019; border-top: 1px solid var(--line); }
.newsletter h2 { font-size: clamp(42px, 5vw, 72px); }
.newsletter p { color: var(--muted); }
.newsletter input { border-radius: 99px 0 0 99px; padding-left: 18px; }
.newsletter button { border-radius: 0 99px 99px 0; background: var(--sky); color: #08111d; }
footer { padding: 46px clamp(24px, 8vw, 132px); background: #070b12; border-top-color: var(--line); }
footer p { color: var(--muted); }

.page-hero { padding: clamp(86px, 10vw, 160px) clamp(24px, 8vw, 132px); background: linear-gradient(120deg, #101a2a, #192a42 60%, #162846); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(56px, 7vw, 110px); }
.page-hero > p:last-child { color: #c6d2df; }
.library, .coverage, .article, .source-library { background: #0b1019; }
.library-tools input { border-color: var(--line); border-radius: 99px; background: #111a28; color: var(--ink); padding: 14px 18px; }
.filters button { border-color: var(--line); border-radius: 99px; color: var(--ink); background: #111a28; }
.filters button[aria-pressed="true"] { background: var(--sky); color: #08111d; border-color: var(--sky); }
.library .guide-card { background: #111a28; border-color: var(--line); }
.library .guide-card h3 { color: var(--ink); }
.library .guide-card p { color: var(--muted); }
.article-hero { background: linear-gradient(120deg, #101a2a, #1d2b40); border-bottom: 1px solid var(--line); }
.article-hero .back { color: var(--sky); }
.article-meta { color: #9eafc2; }
.article-layout { background: #0b1019; }
.brief { border-top-color: var(--sky); background: #111a28; border-color: var(--line); border-top-width: 4px; border-radius: 12px; }
.brief > div { border-color: var(--line); }
.brief p, .prose p { color: #b7c3d0; }
.brief .risk { background: #2b2025; }
.prose h2 { font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif; color: var(--ink); }
.prose .section-number { color: var(--sky); }
.source-block { border-color: var(--line); }
.next-guide { background: linear-gradient(110deg, #c9f8ff, #d5d3ff); color: #101b2b; }
.next-guide a { color: #153b7a; }
.research-grid { background: var(--line); gap: 1px; }
.research-grid article { background: #111a28; color: var(--ink); }
.research-grid p, .method-list p { color: var(--muted); }
.research-grid h2, .about-grid h2 { color: var(--ink); }
.method { background: #151d2a; }
.method-list article { border-color: var(--line); }
.coverage-stats div, .coverage td { border-color: var(--line); }
.coverage th { border-color: var(--sky); }
.coverage td { color: #c1ccda; }
.status { background: #173b48; color: var(--sky); }
.about-grid { background: #111927; }
.about-grid article { background: #182335; border-color: var(--sky); border-radius: 14px; }
.about-grid article:nth-child(2) { border-color: var(--coral); }
.about-grid article:nth-child(3) { border-color: var(--lime); }
.contact-note { background: linear-gradient(110deg, #c9f8ff, #ddd8ff); color: #0f1a2b; }
.product-library { background: #0b1019; }
.comparison-note { background: #122f3a; border-left-color: var(--sky); color: var(--ink); }
.comparison-note p, .product-grid p, .budget-section > p { color: var(--muted); }
.product-grid article { background: #111a28; border-color: var(--line); border-radius: 14px; }
.product-grid h2, .budget-section h2 { font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif; color: var(--ink); }
.product-grid a { color: var(--sky); }
.budget-section th, .budget-section td { border-color: var(--line); color: #c5d0dc; }

@media(max-width:680px){
  header { background: rgba(11, 16, 25, .97); }
  header nav { background: #111a28; border-color: var(--line); }
  body.home .hero { padding-top: 70px; background-position: 63% center; }
  .hero-copy h1 { font-size: 56px; }
  .principles > h2 { font-size: 49px; }
  .visual-story img { min-height: 300px; }
  .newsletter input { border-radius: 99px; margin-bottom: 8px; }
  .newsletter button { border-radius: 99px; }
  .section-head h2 { font-size: 48px; }
}