/* Nuvora Hub — design system from DESIGN.md: cool snow canvas, midnight ink, one royal-blue accent,
   Inter with tight tracking, pill buttons, two-tier rounding (8px inner, 16-40px outer). */
:root {
  --canvas: #fcfdfe; --wash: #eef4fc; --ink: #141a4f; --body: #14141e; --caption: #374151; --helper: #6b7280;
  --line: #e2e8f0; --fog: #f1f5f9; --card: #ffffff; --royal: #2b348c; --cobalt: #6a95ff; --teal: #00c2b8;
  --mint: #16ca2e; --coral: #f26052; --amber: #ffa64d; --focus: #00c2b8;
  --shadow-sm: rgba(0,0,0,.1) 0 0 4px -2px;
  --shadow-float: rgba(0,0,0,.082) 0 .36px 1.8px -1.4px, rgba(0,0,0,.07) 0 1.37px 6.87px -2.8px, rgba(0,0,0,.016) 0 6px 30px -4.25px;
  --glow: rgba(43,52,140,.14) 0 0 100px -28px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--font); font-size: 16px; line-height: 1.63; font-weight: 400; }
a { color: var(--royal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,194,184,.5); border-radius: 8px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 600; }
h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }
p { margin: 0 0 12px; }
.blue { color: var(--royal); }
.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.center { text-align: center; }
.lead { font-size: 18px; color: var(--caption); max-width: 560px; }
.center .lead { margin-inline: auto; }
.muted { color: var(--helper); }
.small { font-size: 14px; line-height: 1.43; }

/* Nav */
.nav-bar { position: sticky; top: 0; z-index: 20; background: rgba(252,252,252,.85); backdrop-filter: blur(15px); border-bottom: 1px solid var(--line); }
.nav-bar .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--royal); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 19px; line-height: 1; padding-bottom: 2px; }
.nav-links { display: flex; gap: 20px; margin-inline: auto; }
.nav-links a { color: var(--body); font-size: 15px; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--royal); text-decoration: none; }
.nav-cta { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .nav-bar .wrap { flex-wrap: wrap; gap: 4px 16px; padding: 10px 0; }
  .nav-links { order: 3; width: 100%; margin: 0; overflow-x: auto; gap: 18px; padding-bottom: 4px; }
  .nav-links a { white-space: nowrap; font-size: 14px; }
  .nav-cta { margin-inline-start: auto; }
}

/* Buttons: ghost and frosted pills, never heavy filled blocks */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 24px; border-radius: 9999px; font-size: 15px; font-weight: 500; border: 1px solid var(--royal); background: var(--canvas); color: var(--royal); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:hover { text-decoration: none; background: var(--wash); }
.btn-strong { background: var(--royal); color: #fff; }
.btn-strong:hover { background: #1f2770; color: #fff; }
.btn-ink { border-color: var(--ink); color: var(--ink); }
.btn-ink:hover { background: var(--fog); }
.btn-sm { min-height: 36px; padding: 6px 16px; font-size: 14px; }
.btn-frost { background: rgba(255,255,255,.85); border-color: #fff; color: var(--royal); }
.btn-frost:hover { background: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.center .actions { justify-content: center; }

/* Hero with the blue band */
.hero { position: relative; padding: 72px 0 0; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 560px; background: linear-gradient(160deg, rgba(42,255,252,.16), rgba(106,149,255,.26)); border-radius: 0 0 48px 48px; z-index: -1; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,.75); border: 1px solid var(--line); font-size: 14px; color: var(--body); margin-bottom: 24px; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--royal); display: inline-block; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .lead { margin-top: 20px; }
.hero-shot { margin-top: 56px; }

/* Floating containers */
.float { background: var(--canvas); border-radius: 32px; box-shadow: var(--shadow-float), var(--glow); padding: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 12px; }

/* Product UI: board */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.col { background: var(--fog); border-radius: 16px; padding: 12px; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--body); margin-bottom: 10px; }
.col-head .count { margin-inline-start: auto; color: var(--royal); font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.d-blue { background: var(--cobalt); } .d-green { background: var(--mint); } .d-red { background: var(--coral); } .d-orange { background: var(--amber); }
.ticket { background: var(--card); border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow-sm); margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
.ticket b { display: block; font-size: 14px; font-weight: 600; color: var(--body); }
.ticket .meta { display: flex; justify-content: space-between; gap: 8px; color: var(--helper); font-size: 12px; margin-top: 6px; }
.av { width: 22px; height: 22px; border-radius: 50%; background: var(--wash); color: var(--royal); font-size: 10px; font-weight: 600; display: inline-grid; place-items: center; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .board { grid-template-columns: 1fr; } }

/* Product UI: conversation + intelligence */
.convo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .convo { grid-template-columns: 1fr; } }
.chat { display: grid; gap: 10px; align-content: start; }
.bubble { max-width: 90%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.bubble small { display: block; font-size: 12px; color: var(--helper); margin-bottom: 2px; }
.from-student { background: var(--fog); border-bottom-left-radius: 4px; }
.from-ai { background: var(--royal); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.from-ai small { color: rgba(255,255,255,.75); }
.intel h4 { font-size: 14px; margin-bottom: 8px; }
.intel dl { margin: 0; display: grid; gap: 8px; font-size: 13px; }
.intel .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--fog); border-radius: 8px; }
.intel dt { color: var(--helper); }
.intel dd { margin: 0; font-weight: 500; color: var(--body); text-align: end; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 500; background: var(--card); border: 1px solid var(--line); color: var(--body); white-space: nowrap; }

/* Sections */
.section { padding: 80px 0; }
.section-head { margin-bottom: 40px; }
.section-head .lead { margin-top: 16px; }
.wash { background: var(--wash); }

/* Feature containers */
.feature { background: var(--canvas); border-radius: 40px; box-shadow: var(--shadow-float); padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 72px); }
.feature + .feature { margin-top: 24px; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
.feature h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em; }
.feature .lead { margin-top: 14px; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; color: var(--caption); }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%232b348c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* Product cards on home */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .products { grid-template-columns: 1fr; } }
.product { background: var(--canvas); border-radius: 32px; box-shadow: var(--shadow-float), var(--glow); padding: 32px; display: flex; flex-direction: column; }
.product .status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--royal); background: var(--wash); border-radius: 100px; padding: 4px 12px; align-self: flex-start; }
.product h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; margin: 16px 0 10px; }
.product .checks { margin-bottom: 24px; }
.price-row { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.price-row .per { color: var(--caption); }
.price-row .note { width: 100%; font-size: 14px; color: var(--helper); }
.product .actions { margin-top: 20px; }

/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--card); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--wash); color: var(--royal); font-weight: 600; font-size: 14px; display: grid; place-items: center; margin-bottom: 12px; }
.steps b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.steps span { font-size: 14px; color: var(--caption); line-height: 1.5; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Tile grid */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.tile h3 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.tile p { font-size: 15px; color: var(--caption); margin: 0; }
.soon { font-size: 12px; font-weight: 500; color: #b45309; background: #fff4e6; border-radius: 100px; padding: 2px 8px; }

/* Services list */
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin-inline: auto; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-float); }
.plan.featured { border-color: var(--royal); box-shadow: var(--shadow-float), var(--glow); }
.plan h3 { font-size: 18px; }
.plan .price { display: block; margin: 12px 0 0; }
.plan .founding { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--royal); background: var(--wash); border-radius: 100px; padding: 3px 10px; }
.plan .checks { margin-bottom: 24px; }
.fine { font-size: 14px; color: var(--helper); max-width: 680px; margin: 24px auto 0; text-align: center; }

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 8px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--royal); font-size: 20px; line-height: 1.2; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; color: var(--caption); }

/* CTA band */
.cta-band { border-radius: 40px; padding: clamp(40px, 6vw, 64px) 24px; text-align: center; background: linear-gradient(160deg, rgba(42,255,252,.16), rgba(106,149,255,.26)); }
.cta-band .lead { margin: 14px auto 0; }

/* Footer: dark navy */
.footer { background: #1c2266; color: #b7bdd0; margin-top: 80px; padding: 56px 0 40px; font-size: 14px; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer .wrap { grid-template-columns: 1fr; } }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer h4 { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: #dfe4f2; }
.footer p { margin: 0 0 4px; }
.footer .copy { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; margin-top: 8px; color: #8a91a8; }

/* Legal pages */
.legal { padding: 64px 0 0; }
.legal .doc { max-width: 720px; margin-inline: auto; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); }
.legal .updated { color: var(--helper); margin: 12px 0 32px; }
.legal h2 { font-size: 22px; letter-spacing: -0.01em; line-height: 1.3; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--caption); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--body); font-weight: 600; }
.board.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .board.two { grid-template-columns: 1fr; } }
.float, .panel { text-align: left; }
@media (max-width: 480px) { .hero-shot .board .col:nth-child(n+3) { display: none; } }

/* Brand (logo): the highlighted hero words carry the mark's teal-to-periwinkle gradient. */
.blue { background: linear-gradient(90deg, #00b3aa, #4f7cf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .blue { color: CanvasText; background: none; } }
.logo img { height: 36px; width: auto; display: block; }
.footer .logo img { height: 40px; }
.badge i { background: linear-gradient(135deg, #2afffc, #6a95ff); }

/* ================= V2: larger type, product UI as the hero ================= */
h1 { font-size: clamp(44px, 6.6vw, 80px); letter-spacing: -0.042em; line-height: 1.02; }
h2 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.035em; line-height: 1.04; }
.hero h1 { max-width: 17ch; }
.lead { font-size: 19px; max-width: 620px; }
.section { padding: 112px 0; }
.section-head { margin-bottom: 48px; }
.section-head h2 { max-width: 20ch; }
.center .section-head h2, .section-head.center h2 { margin-inline: auto; }
.hero .hero-shot { margin-top: 64px; }
.hero::before { height: 640px; }

/* App window */
.app { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-float), var(--glow); overflow: hidden; text-align: left; font-size: 13px; line-height: 1.45; }
.app-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.lights { display: flex; gap: 6px; } .lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.app-title { font-weight: 500; color: var(--caption); }
.app-tabs { display: flex; gap: 4px; margin-inline-start: auto; }
.app-tabs span { padding: 4px 10px; border-radius: 100px; color: var(--helper); }
.app-tabs span.on { background: var(--wash); color: var(--royal); font-weight: 500; }
.app-body { display: grid; gap: 0; }
.pane { padding: 16px; min-width: 0; }
.pane + .pane { border-inline-start: 1px solid var(--line); }
.pane-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--helper); margin-bottom: 10px; letter-spacing: 0.01em; }
.hc { grid-template-columns: 250px minmax(0, 1fr) 300px; }
.ha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .hc { grid-template-columns: minmax(0, 1fr) 280px; } .hc .pane-pipe { display: none; } }
@media (max-width: 760px) { .hc, .ha { grid-template-columns: 1fr; } .pane + .pane { border-inline-start: 0; border-top: 1px solid var(--line); } .app-tabs { display: none; } }

/* Pipeline list */
.stage-g { margin-bottom: 12px; }
.stage-h { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--body); margin-bottom: 6px; }
.stage-h .n { margin-inline-start: auto; color: var(--royal); font-weight: 500; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.lrow.on { background: var(--wash); }
.lrow .nm { font-weight: 500; color: var(--body); }
.lrow .sub { color: var(--helper); font-size: 12px; }
.lrow .t { margin-inline-start: auto; color: var(--helper); font-size: 12px; white-space: nowrap; }
.ava { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--royal); background: linear-gradient(135deg, #d9fbfa, #e1e9ff); }

/* Thread */
.thread-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.thread-h b { font-size: 14px; color: var(--body); }
.thread-h .tags { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.thread { display: grid; gap: 10px; }
.bubble { font-size: 13px; }
.sys { justify-self: center; font-size: 12px; color: var(--helper); background: var(--fog); border-radius: 100px; padding: 3px 12px; }
.think { margin-top: 12px; padding: 10px 12px; border: 1px dashed #c9d4ee; border-radius: 12px; color: var(--caption); font-size: 12px; background: #fafcff; }
.think b { color: var(--royal); font-weight: 600; }

/* Insight blocks */
.ins { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); }
.ins h5 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--helper); display: flex; justify-content: space-between; align-items: center; }
.ins .v { font-weight: 600; color: var(--body); font-size: 13px; }
.ins .s { color: var(--helper); font-size: 12px; }
.bar { height: 6px; border-radius: 100px; background: var(--fog); overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #00c2b8, #6a95ff); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.p-ok { background: #e7f9ec; color: #11782a; } .p-warn { background: #fff3e4; color: #9a5b00; } .p-bad { background: #fdeceb; color: #b4372c; }
.p-info { background: var(--wash); color: var(--royal); } .p-mute { background: var(--fog); color: var(--caption); }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 500; border: 1px solid var(--royal); color: var(--royal); background: var(--card); }
.mini-btn.solid { background: var(--royal); color: #fff; }

/* Stage: a wash surface that holds a big product UI */
.stage { background: linear-gradient(160deg, rgba(42,255,252,.10), rgba(106,149,255,.18)); border-radius: 40px; padding: clamp(16px, 4vw, 48px); }
.story + .story { margin-top: 120px; }
.story-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.story-head p { color: var(--caption); font-size: 18px; margin: 0; }
@media (max-width: 860px) { .story-head { grid-template-columns: 1fr; } }

/* Data table UI */
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 760px; }
.dt th { text-align: left; font-size: 12px; font-weight: 600; color: var(--helper); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.dt td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.dt tr:last-child td { border-bottom: 0; }
.dt .why { color: var(--caption); font-size: 12px; margin-top: 4px; }
.scroll-x { overflow-x: auto; }

/* Flow */
.flowline { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px; }
.fstep { flex: 1 0 140px; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-inline-end: 28px; box-shadow: var(--shadow-sm); }
.fstep:last-child { margin-inline-end: 0; border-color: var(--royal); }
.fstep:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -24px; width: 20px; height: 2px; background: linear-gradient(90deg, #00c2b8, #6a95ff); }
.fstep b { display: block; font-size: 14px; color: var(--ink); margin: 8px 0 4px; }
.fstep span { font-size: 12px; color: var(--helper); line-height: 1.4; display: block; }
.fnum { width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--royal); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* Two-up cards for follow-up states etc. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; align-items: center; }
.kv dt { color: var(--helper); font-size: 13px; }
.kv dd { margin: 0; color: var(--body); font-weight: 500; }
.card-ui { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-float); text-align: left; }
.card-ui h4 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

/* Integration diagram */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.hub .node { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.hub .node.core { border-color: var(--royal); box-shadow: var(--shadow-float), var(--glow); }
.hub .node img { height: 26px; margin: 0 auto 8px; display: block; }
.hub .node b { display: block; color: var(--ink); }
.hub .node span { font-size: 12px; color: var(--helper); }
.hub .chans { display: grid; gap: 8px; }
.hub .chans div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.arrow { width: 32px; height: 2px; background: linear-gradient(90deg, #00c2b8, #6a95ff); position: relative; }
.arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: #6a95ff; border-right: 0; }
@media (max-width: 860px) { .hub { grid-template-columns: 1fr; } .arrow { width: 2px; height: 24px; margin: 0 auto; } .arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top-color: #6a95ff; border-bottom: 0; } }

/* Showcase product cards on home */
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }
.show { background: var(--canvas); border-radius: 32px; box-shadow: var(--shadow-float); padding: 32px 32px 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.show h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.1; margin: 14px 0 10px; }
.show .lead { font-size: 16px; }
.show .checks { margin: 16px 0 24px; }
.show .peek { margin-top: auto; background: linear-gradient(160deg, rgba(42,255,252,.12), rgba(106,149,255,.22)); border-radius: 24px 24px 0 0; padding: 20px 20px 0; }
.show .peek .app { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: none; }

/* Services, de-emphasized */
.svc-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px 48px; align-items: start; }
@media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } }
.svc-row h2 { font-size: clamp(26px, 3vw, 34px); }
.svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 560px) { .svc-list { grid-template-columns: 1fr; } }
.svc-list div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.svc-list b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.svc-list span { color: var(--helper); font-size: 14px; }

/* Trust, presented as principles */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.principles > div { padding: 24px 24px 0 0; }
.principles > div + div { padding-inline-start: 24px; border-inline-start: 1px solid var(--line); }
.principles h3 { font-size: 17px; margin: 12px 0 6px; }
.principles p { font-size: 15px; color: var(--caption); margin: 0; }
.pi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #d9fbfa, #e1e9ff); color: var(--royal); }
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .principles > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } .principles > div + div { border-inline-start: 0; padding-inline-start: 0; } }

/* Final CTA */
.final { border-radius: 40px; padding: clamp(48px, 7vw, 88px) 24px; text-align: center; background: #1c2266; color: #fff; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(42,255,252,.35), rgba(106,149,255,0) 70%); }
.final h2 { color: #fff; max-width: 18ch; margin: 0 auto; position: relative; }
.final .lead { color: #c9d0ea; margin: 16px auto 0; position: relative; }
.final .actions { justify-content: center; position: relative; }
.final .btn { background: #fff; color: var(--royal); border-color: #fff; }
.final .btn:hover { background: #e9fffe; }
.final .btn.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.final .btn.btn-line:hover { background: rgba(255,255,255,.1); }
.final .contact { margin-top: 20px; font-size: 14px; color: #aab3d6; position: relative; }
.final .contact a { color: #fff; }

/* Coming soon block */
.soonlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .soonlist { grid-template-columns: 1fr; } }
.soonlist div { border: 1px dashed #c9d4ee; border-radius: 16px; padding: 18px; background: #fbfcff; }
.soonlist b { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.soonlist span.d { display: block; color: var(--helper); font-size: 14px; margin-top: 6px; }

/* Phone frame (student portal) */
.phone { width: 280px; max-width: 100%; margin: 0 auto; border-radius: 36px; border: 8px solid #1c2266; background: var(--card); overflow: hidden; box-shadow: var(--shadow-float), var(--glow); font-size: 13px; text-align: left; }
.phone .ph-top { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.phone .ph-body { padding: 14px 16px 18px; display: grid; gap: 8px; }
.prog { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.prog .box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #c3cbe0; margin-top: 2px; }
.prog .box.on { background: var(--royal); border-color: var(--royal); }
.prog b { display: block; font-size: 13px; color: var(--body); }
.prog small { color: var(--helper); }
@media (max-width: 760px) { .app-body { grid-template-columns: 1fr !important; } }
.hero h1 { max-width: 20ch; }
.hero::before { height: auto; bottom: 300px; }
@media (max-width: 760px) { .hero::before { bottom: 55%; } }
.story-head h2 { max-width: none; font-size: clamp(32px, 4vw, 52px); }

/* ================= V3: deeper product UI ================= */
.app { font-size: 13.5px; }
.app-bar .flag { margin-inline-start: 8px; }
.app-tabs + .flag, .flag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }
.flag-dev { background: #fff3e4; color: #9a5b00; }
.flag-soon { background: #f1ecff; color: #5b3fc4; }
.flag-concept { background: var(--fog); color: var(--caption); border: 1px dashed #c3cbe0; }
.caption-note { font-size: 13px; color: var(--helper); margin-top: 14px; text-align: center; }
.stage .caption-note { margin-bottom: 0; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.kpi small { display: block; color: var(--helper); font-size: 12px; }
.kpi b { display: block; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-top: 2px; }
.kpi .delta { font-size: 12px; color: var(--helper); }

/* Bar chart */
.chart { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); }
.chart h5 { margin: 0 0 12px; font-size: 13px; color: var(--body); display: flex; justify-content: space-between; gap: 8px; }
.hbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 60px; gap: 10px; align-items: center; font-size: 12.5px; margin-bottom: 9px; }
.hbar .track { height: 10px; border-radius: 100px; background: var(--fog); overflow: hidden; display: flex; }
.hbar .track i { display: block; height: 100%; }
.c1 { background: #c3cbe0; } .c2 { background: #6a95ff; } .c3 { background: #00c2b8; } .c4 { background: #2b348c; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--helper); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Funnel chain */
.chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chain span { padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; background: var(--card); border: 1px solid var(--line); color: var(--body); }
.chain span.ad { background: #f3f5fa; color: var(--caption); }
.chain span.out { background: linear-gradient(135deg, #d9fbfa, #e1e9ff); color: var(--royal); border-color: #c9d8ff; }
.chain em { color: #8c96b5; font-style: normal; }
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* Insight card */
.insight { border-radius: 20px; padding: 20px; background: var(--card); border: 1px solid #c9d8ff; box-shadow: var(--shadow-float), var(--glow); }
.insight .ih { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.insight .ih img { height: 24px; }
.insight .ih b { color: var(--ink); }
.insight dl { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
.insight dt { color: var(--helper); font-size: 12px; font-weight: 600; padding-top: 2px; }
.insight dd { margin: 0; color: var(--body); }
.approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--caption); }

/* Toggle rows (product direction) */
.toggles { display: grid; gap: 8px; }
.tg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tg b { color: var(--body); font-weight: 600; font-size: 14px; display: block; }
.tg small { color: var(--helper); font-size: 12px; }
.sw { margin-inline-start: auto; width: 38px; height: 22px; border-radius: 100px; background: #d5dbe8; position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw.on { background: linear-gradient(90deg, #00c2b8, #4f7cf0); } .sw.on::after { left: 19px; }

/* Timeline */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl li { position: relative; padding: 0 0 14px 34px; font-size: 13px; }
.tl li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 3px solid #6a95ff; }
.tl li.now::before { border-color: #00c2b8; }
.tl b { color: var(--body); display: block; }
.tl span { color: var(--helper); font-size: 12px; }

/* Student 360 */
.s360 { grid-template-columns: 260px minmax(0, 1fr) 300px; }
@media (max-width: 1080px) { .s360 { grid-template-columns: minmax(0, 1fr) 280px; } .s360 .pane:first-child { display: none; } }
.idcard { text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.idcard .ava { width: 52px; height: 52px; font-size: 16px; margin: 0 auto 8px; }
.idcard b { display: block; color: var(--ink); font-size: 15px; }
.facts { display: grid; gap: 6px; font-size: 12.5px; }
.facts div { display: flex; justify-content: space-between; gap: 8px; } .facts span { color: var(--helper); }
.mtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.mtabs span { padding: 5px 11px; border-radius: 100px; font-size: 12px; color: var(--helper); border: 1px solid var(--line); }
.mtabs span.on { background: var(--royal); color: #fff; border-color: var(--royal); }

/* Queue table */
.queue-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 760px) { .queue-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Requirement matrix */
.req-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .req-grid { grid-template-columns: 1fr; } }
.req { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); }
.req b { display: block; color: var(--body); font-size: 14px; margin-bottom: 4px; }
.req p { font-size: 12.5px; color: var(--helper); margin: 6px 0 0; }

/* Next question spotlight */
.spot { border-radius: 16px; padding: 16px; background: linear-gradient(135deg, #e9fffd, #eaf0ff); border: 1px solid #c9e9f2; }
.spot small { color: var(--royal); font-weight: 600; font-size: 12px; }
.spot p { margin: 6px 0 0; font-size: 16px; color: var(--ink); font-weight: 500; }

/* Core diagram */
.core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 900px) { .core { grid-template-columns: 1fr; } }
.core .side { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow-sm); }
.core .side h3 { font-size: 20px; margin-bottom: 6px; }
.core .side p { color: var(--caption); font-size: 15px; margin: 0 0 12px; }
.core .mid { background: #1c2266; color: #fff; border-radius: 28px; padding: 26px; box-shadow: var(--shadow-float), var(--glow); text-align: center; }
.core .mid img { height: 44px; margin: 0 auto 10px; display: block; }
.core .mid h3 { color: #fff; font-size: 22px; }
.core .mid .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.core .mid .chips span { font-size: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(255,255,255,.12); color: #e5e9f8; }
.core .mid .chips span.soon2 { border: 1px dashed rgba(255,255,255,.45); background: transparent; }

/* Founding program */
.founding-box { max-width: 980px; margin: 0 auto; border-radius: 32px; background: #1c2266; color: #dfe4f6; padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; position: relative; overflow: hidden; }
.founding-box::before { content: ""; position: absolute; width: 420px; height: 420px; left: -160px; bottom: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(42,255,252,.28), rgba(106,149,255,0) 70%); }
@media (max-width: 860px) { .founding-box { grid-template-columns: 1fr; } }
.founding-box h2 { color: #fff; font-size: clamp(30px, 3.4vw, 42px); position: relative; }
.founding-box > div { position: relative; }
.founding-box .terms { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: 15px; }
.founding-box .terms li::before { content: "✓"; color: #2afffc; margin-inline-end: 8px; }
.fplans { display: grid; gap: 12px; }
.fplan { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.fplan b { color: #fff; font-size: 17px; }
.fplan small { color: #aab3d6; font-size: 13px; grid-column: 1; }
.fplan .fp { grid-row: 1 / span 2; grid-column: 2; text-align: end; }
.fplan .fp strong { display: block; color: #fff; font-size: 30px; letter-spacing: -0.03em; }
.fplan .fp span { font-size: 12px; color: #aab3d6; }
.founding-box .btn { background: #fff; color: var(--royal); border-color: #fff; }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ins-grid .ins { margin: 0; }
.ins-grid .wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .ins-grid { grid-template-columns: 1fr; } }
.dark-stage { background: #141a4f; border-radius: 40px; padding: clamp(20px, 4vw, 48px); color: #dfe4f6; }
.dark-stage .story-head h2 { color: #fff; }
.dark-stage .story-head p { color: #b9c1e2; }
.mi-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .mi-wrap { grid-template-columns: 1fr; } }
.qlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.qlist div { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e6eaf8; font-size: 15px; }
.sample { font-size: 11px; font-weight: 600; color: #9a5b00; background: #fff3e4; border-radius: 100px; padding: 2px 8px; }
.principles.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .principles.two { grid-template-columns: 1fr; } .principles.two > div { padding: 16px 0 0 !important; border: 0 !important; } }
.dark-stage .app, .dark-stage .insight { color: var(--body); }
.dark-stage .actions a:not(.btn) { color: #fff; text-decoration: underline; }

/* ================= Final polish ================= */
/* Architecture: AI core branching into two products */
.arch { position: relative; }
.arch-core { max-width: 760px; margin: 0 auto; background: #1c2266; border-radius: 28px; padding: 28px; color: #dfe4f6; box-shadow: var(--shadow-float), var(--glow); position: relative; overflow: hidden; }
.arch-core::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(42,255,252,.28), rgba(106,149,255,0) 70%); }
.arch-core .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; position: relative; }
.arch-core .hd img { width: 40px; height: 40px; }
.arch-core .hd b { display: block; color: #fff; font-size: 20px; letter-spacing: -0.02em; }
.arch-core .hd span { font-size: 13px; color: #aab3d6; }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; }
@media (max-width: 760px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px; font-size: 13.5px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; }
.cap i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #2afffc, #6a95ff); flex: none; }
.branch { position: relative; height: 64px; max-width: 760px; margin: 0 auto; }
.branch::before { content: ""; position: absolute; left: 50%; top: 0; height: 32px; width: 2px; background: linear-gradient(#6a95ff, #00c2b8); transform: translateX(-1px); }
.branch::after { content: ""; position: absolute; left: 25%; right: 25%; top: 32px; height: 32px; border: 2px solid #8fb0ff; border-bottom: 0; border-radius: 16px 16px 0 0; }
@media (max-width: 760px) { .branch::after { left: 22%; right: 22%; } }
.arch-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .arch-products { grid-template-columns: 1fr; } .branch { height: 40px; } .branch::after { display: none; } .branch::before { height: 40px; } }
.ap { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-float); }
.ap h3 { font-size: 22px; letter-spacing: -0.02em; margin: 10px 0 6px; }
.ap p { color: var(--caption); margin: 0 0 14px; }
.ap .row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ap .row span { font-size: 12.5px; padding: 4px 10px; border-radius: 100px; background: var(--fog); color: var(--caption); }
.ap .row span.ai { background: linear-gradient(135deg, #d9fbfa, #e1e9ff); color: var(--royal); font-weight: 500; }

/* AI + human journey */
.journey { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 14px; align-items: stretch; }
@media (max-width: 960px) { .journey { grid-template-columns: 1fr; } }
.jgroup { border-radius: 24px; padding: 18px; }
.jgroup.ai { background: linear-gradient(160deg, rgba(42,255,252,.12), rgba(106,149,255,.2)); }
.jgroup.human { background: #1c2266; color: #dfe4f6; }
.jgroup h4 { font-size: 13px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.jgroup.human h4 { color: #fff; }
.jsteps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.jgroup.human .jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.js { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--shadow-sm); }
.js b { display: block; font-size: 14px; color: var(--ink); }
.js span { font-size: 12px; color: var(--helper); line-height: 1.4; display: block; margin-top: 4px; }
.jgroup.human .js { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(255,255,255,.14); }
.jgroup.human .js b { color: #fff; } .jgroup.human .js span { color: #b9c1e2; }
.jturn { border-radius: 24px; border: 2px dashed #8fb0ff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 18px; gap: 8px; background: var(--card); }
.jturn b { color: var(--ink); font-size: 15px; } .jturn span { color: var(--helper); font-size: 13px; }

/* Split trust */
.trust2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .trust2 { grid-template-columns: 1fr; } }
.tpanel { border-radius: 32px; padding: clamp(24px, 3.5vw, 36px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.tpanel h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 8px; }
.tpanel > p { color: var(--caption); margin-bottom: 20px; }
.trow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.trow b { display: block; color: var(--body); font-size: 15px; }
.trow span { color: var(--helper); font-size: 14px; }

/* Founding offer */
.offer { max-width: 1040px; margin: 0 auto; border-radius: 40px; background: #1c2266; color: #dfe4f6; padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; text-align: center; }
.offer::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -360px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(42,255,252,.3), rgba(106,149,255,0) 70%); }
.offer > * { position: relative; }
.offer h2 { color: #fff; }
.offer .sub { color: #c9d0ea; max-width: 560px; margin: 14px auto 0; font-size: 18px; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 32px 0; text-align: left; }
@media (max-width: 760px) { .perks { grid-template-columns: 1fr; } }
.perk { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 18px; }
.perk b { color: #fff; display: block; font-size: 16px; margin: 10px 0 4px; }
.perk span { color: #b9c1e2; font-size: 14px; }
.perk .pi { background: rgba(255,255,255,.12); color: #fff; }
.offer-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 0 auto; }
@media (max-width: 560px) { .offer-prices { grid-template-columns: 1fr; } }
.op { background: #fff; color: var(--body); border-radius: 20px; padding: 18px 20px; text-align: left; }
.op small { color: var(--helper); font-size: 13px; }
.op b { display: block; color: var(--ink); font-size: 16px; }
.op strong { display: block; font-size: 34px; color: var(--ink); letter-spacing: -0.03em; margin-top: 6px; }
.op strong span { font-size: 14px; color: var(--helper); font-weight: 400; letter-spacing: 0; }
.offer .btn-apply { margin-top: 28px; background: #fff; color: var(--royal); border-color: #fff; min-height: 52px; padding: 12px 32px; font-size: 16px; }
.offer .btn-apply:hover { background: #e9fffe; }
.offer .fine2 { color: #9aa3c7; font-size: 13px; max-width: 620px; margin: 18px auto 0; }
.offer .fine2 a { color: #fff; }

/* AI layer inside OS */
.oslayer { border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float), var(--glow); overflow: hidden; }
.oslayer .ai-band { background: #1c2266; padding: 20px; color: #fff; }
.oslayer .ai-band .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 600; }
.oslayer .ai-band .hd img { width: 28px; height: 28px; }
.oslayer .ai-band .caps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 960px) { .oslayer .ai-band .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oslayer .ctrl { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 760px) { .oslayer .ctrl { grid-template-columns: 1fr; } }
.oslayer .mods { padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oslayer .mods div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13.5px; font-weight: 500; color: var(--body); background: var(--canvas); }
.oslayer .human { padding: 20px; border-inline-start: 1px solid var(--line); }
@media (max-width: 760px) { .oslayer .human { border-inline-start: 0; border-top: 1px solid var(--line); } }
:focus-visible, .btn:focus-visible { outline: 3px solid #00b3aa; outline-offset: 3px; box-shadow: none; }
.journey { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.journey .jgroup.ai { grid-column: 1 / -1; }
@media (max-width: 760px) { .journey { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .mi-wrap .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .mi-wrap .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }