/* ============================================================
   Ryku.Ai — Trades. Electric violet/indigo on cool ink.
   Fresh design system (DESIGN.md). Plumbing class contracts
   (reveal / kb-consent / lead-form / audio-sample
   / carousel / nav mega-menu) preserved for the shared JS.
   ============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=general-sans@400,500,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");

:root{
  /* palette */
  --ink:#0E0F1C; --ink-2:#181B2E; --ink-3:#22243B;
  --paper:#FFFFFF; --surface:#F5F4FB; --surface-violet:#EFEBFF;
  --accent:#6A4DFF; --accent-bright:#8E72FF; --accent-deep:#4B2EE0;
  /* Same violet hue, lifted for small text on the ink surfaces (WCAG AA). Text only. */
  --accent-on-dark:#9A83FF;
  --coral:#FF6A3D;
  --text:#14152A; --muted:#585A77;
  --on-dark:#ECEBFF; --on-dark-muted:#A6A4C9;
  --line:#E6E3F3; --line-2:#D9D5EC; --line-dark:rgba(255,255,255,.12);
  /* --ok is only ever used as text on light surfaces, so it carries a darkened green. */
  --ok:#0F6B45; --hot:var(--accent); --err:#E5484D;

  /* type */
  --font-display:"Clash Display","General Sans",system-ui,sans-serif;
  --font-body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace;

  /* spacing scale */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px; --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px;

  /* shape + elevation */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --shadow-card:0 10px 40px -22px rgba(20,21,42,.30);
  --shadow-accent:0 18px 50px -22px rgba(74,46,224,.55);

  /* motion */
  --dur-feedback:140ms; --dur-state:280ms; --dur-reveal:560ms;
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
p{ margin:0; }
button{ font:inherit; }

/* skip link + focus */
.skip-link{
  position:absolute; left:var(--s-12); top:-3rem; z-index:2000;
  background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm);
  font-weight:600; transition:top var(--dur-state) var(--ease-out-quart);
}
.skip-link:focus{ top:var(--s-12); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.panel-hero :focus-visible,.panel-accent :focus-visible,.panel-ink :focus-visible{ outline-color:#fff; }

/* ---- layout primitives ---- */
.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--s-24); }
.panel{ position:relative; padding-block:var(--s-96); overflow:clip; }
.panel-tight{ padding-block:var(--s-64); }
.panel-paper{ background:var(--paper); }
.panel-surface{ background:var(--surface); }
.panel-violet{ background:var(--surface-violet); }
.panel-ink{ background:var(--ink); color:var(--on-dark); }
.panel-accent{ background:linear-gradient(150deg,var(--accent-deep),var(--accent) 60%,var(--accent-bright)); color:#fff; }
.panel-ink h1,.panel-ink h2,.panel-ink h3,.panel-accent h1,.panel-accent h2,.panel-accent h3{ color:#fff; }

.eyebrow{ font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 var(--s-16); }
.panel-ink .eyebrow,.panel-accent .eyebrow{ color:var(--accent-bright); }
.panel-accent .eyebrow{ color:rgba(255,255,255,.85); }
/* The use-case/article hero sits on ink without carrying .panel-ink, so its eyebrow
   kept the deep violet meant for light surfaces. Put it on the text-safe violet. */
.uc-hero .eyebrow{ color:var(--accent-on-dark); }
.headline{ font-size:clamp(2rem,4vw,3.1rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted); max-width:62ch; line-height:1.5; }
.panel-ink .lead,.panel-accent .lead{ color:var(--on-dark-muted); }
.panel-accent .lead{ color:rgba(255,255,255,.9); }
.section-head{ max-width:64ch; margin-bottom:var(--s-48); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur-feedback) var(--ease-out-quart), background var(--dur-state) var(--ease-out-quart), box-shadow var(--dur-state) var(--ease-out-quart); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent); }
.btn-primary:hover{ background:var(--accent-bright); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.panel-ink .btn-ghost,.panel-accent .btn-ghost,.panel-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.panel-ink .btn-ghost:hover,.panel-accent .btn-ghost:hover,.panel-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.panel-accent .btn-primary{ background:#fff; color:var(--accent-deep); box-shadow:0 14px 40px -18px rgba(0,0,0,.5); }
.panel-accent .btn-primary:hover{ background:#fff; transform:translateY(-2px); }
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s-16); align-items:center; }
.hook-line{ font-size:.95rem; color:var(--muted); margin-top:var(--s-16); max-width:52ch; }
.panel-hero .hook-line,.panel-accent .hook-line{ color:rgba(255,255,255,.78); }

/* ============================================================ NAV ============================================================ */
.site-nav{ position:relative; z-index:5; }
.panel-hero>.site-nav,.panel-hero .site-nav{ z-index:30; }
.nav-row{ display:flex; align-items:center; gap:var(--s-24); padding-block:var(--s-16); }
.brand-mark{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.brand-logo{ height:28px; width:auto; }
.brand-name{ letter-spacing:-.01em; }
.brand-dot{ color:var(--coral); }
.panel-hero .brand-name,.panel-ink .brand-name{ color:#fff; }
.nav-links{ display:flex; align-items:center; gap:var(--s-24); margin-left:auto; }
.nav-link{ font-weight:500; color:var(--text); opacity:.85; transition:opacity var(--dur-feedback) var(--ease-out-quart); }
.nav-link:hover{ opacity:1; color:var(--accent); }
.panel-hero .nav-link,.panel-ink .nav-link{ color:#fff; }
.panel-hero .nav-link:hover,.panel-ink .nav-link:hover{ color:var(--accent-bright); }
.cta-nav{ background:var(--accent); color:#fff; padding:.55rem 1.1rem; border-radius:var(--r-pill); font-weight:600; }
.cta-nav:hover{ background:var(--accent-bright); color:#fff; }

/* mega-menu */
.nav-uc{ display:inline-flex; }
.nav-uc-trigger{ background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:var(--s-4); font-weight:500; color:inherit; opacity:.85; }
.nav-uc-trigger:hover{ opacity:1; }
.nav-uc-caret{ font-size:.7em; transition:transform var(--dur-state) var(--ease-out-quart); }
.nav-uc:hover .nav-uc-caret,.nav-uc:focus-within .nav-uc-caret{ transform:rotate(180deg); }
.uc-megamenu{ position:absolute; top:100%; left:var(--s-24); right:var(--s-24); padding-top:var(--s-12);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity var(--dur-state) var(--ease-out-quart), transform var(--dur-state) var(--ease-out-quart); z-index:60; }
.nav-uc:hover .uc-megamenu,.nav-uc:focus-within .uc-megamenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.uc-megamenu-inner{ max-width:880px; margin-inline:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-24);
  box-shadow:0 30px 70px -30px rgba(20,21,42,.45); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-24) var(--s-32); }
@media (min-width:1100px){ .uc-megamenu-inner{ grid-template-columns:repeat(4,1fr); } }
.uc-group-title{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-8); }
.uc-row{ display:flex; align-items:center; gap:var(--s-12); padding:var(--s-8) var(--s-12); border-radius:var(--r-sm); color:var(--text); transition:background var(--dur-feedback) var(--ease-out-quart); }
.uc-row:hover,.uc-row:focus-visible{ background:var(--surface-violet); }
.uc-row-marker{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.uc-row-text{ display:flex; flex-direction:column; }
.uc-row-title{ font-weight:600; font-size:.95rem; }
.uc-row-sub{ font-size:.8rem; color:var(--muted); }
.uc-row-arrow{ margin-left:auto; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity var(--dur-feedback) var(--ease-out-quart), transform var(--dur-feedback) var(--ease-out-quart); }
.uc-row:hover .uc-row-arrow,.uc-row:focus-visible .uc-row-arrow{ opacity:1; transform:none; }

.nav-toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.nav-burger{ display:none; }
@media (max-width:900px){
  .nav-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px; margin-left:auto; cursor:pointer; border:1px solid var(--line-2); border-radius:var(--r-sm); }
  .panel-hero .nav-burger,.panel-ink .nav-burger{ border-color:rgba(255,255,255,.3); }
  .nav-burger span{ display:block; height:2px; width:100%; background:var(--text); transition:transform var(--dur-state) var(--ease-out-quart), opacity var(--dur-feedback) var(--ease-out-quart); }
  .panel-hero .nav-burger span,.panel-ink .nav-burger span{ background:#fff; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:var(--s-8);
    background:var(--ink-2); border-top:1px solid var(--line-dark); padding:var(--s-24); margin-left:0;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height var(--dur-state) var(--ease-out-quart), opacity var(--dur-state) var(--ease-out-quart); z-index:60; }
  .nav-toggle:checked ~ .nav-links{ max-height:calc(100vh - 64px); overflow:auto; opacity:1; pointer-events:auto; }
  .nav-links .nav-link{ color:#fff; display:inline-flex; padding-block:var(--s-8); }
  .nav-links .cta-nav{ width:100%; justify-content:center; margin-top:var(--s-8); }
  .nav-uc{ display:block; width:100%; }
  .nav-uc-trigger{ width:100%; justify-content:space-between; color:#fff; padding-block:var(--s-8); }
  .uc-megamenu{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; left:0; right:0; }
  .uc-megamenu-inner{ grid-template-columns:1fr; border:none; box-shadow:none; padding:0; gap:var(--s-12); background:transparent; }
  .uc-group-title,.uc-row-title{ color:#fff; }
  .uc-row:hover{ background:rgba(255,255,255,.06); }
  .uc-row-arrow{ opacity:1; transform:none; }
}

/* ============================================================ HERO ============================================================ */
.panel-hero{ background:var(--ink); color:var(--on-dark); padding-bottom:var(--s-96); overflow:clip; }
/* Poster (z-index 0) is a fallback shown before the video paints / on mobile / reduced-motion.
   The video (z-index 1) is opaque and sits on top of it, so the two never ghost together. */
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; z-index:1; }
.hero-bg{ position:absolute; inset:0; background:url("/videos/hero-poster.jpg") center/cover no-repeat; opacity:1; z-index:0; will-change:transform; }
@media (prefers-reduced-motion:no-preference){ .hero-bg{ animation:heroKen 24s ease-in-out infinite alternate; } }
@keyframes heroKen{ from{ transform:scale(1.001); } to{ transform:scale(1.09); } }
.panel-hero::after{ content:""; position:absolute; inset:0; z-index:2;
  background:radial-gradient(120% 90% at 80% 0%,rgba(106,77,255,.30),transparent 55%),linear-gradient(180deg,rgba(14,15,28,.30) 0%,rgba(14,15,28,.42) 45%,rgba(14,15,28,.82) 100%); }
.hero-inner{ position:relative; z-index:10; }
.hero-inner{ max-width:880px; padding-top:var(--s-64); }
.hero-h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:700; color:#fff; margin-bottom:var(--s-24); }
.hero-h1 .hl{ color:var(--accent-bright); }
.hero-lead{ font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--on-dark-muted); max-width:54ch; margin-bottom:var(--s-32); }
.hero-proof{ display:flex; flex-wrap:wrap; gap:var(--s-24) var(--s-32); margin-top:var(--s-32); padding-top:var(--s-24); border-top:1px solid var(--line-dark); }
.hero-proof-item{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--on-dark); }
.hero-proof-item::before{ content:"✓"; color:var(--accent-bright); font-weight:700; }

/* ============================================================ SOLUTION (six-card band) ============================================================ */
.solution-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-24); }
.sol-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:var(--s-32);
  transition:transform var(--dur-state) var(--ease-out-quart), background var(--dur-state) var(--ease-out-quart), border-color var(--dur-state) var(--ease-out-quart); }
.sol-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); }
.sol-card.feature{ background:linear-gradient(160deg,rgba(106,77,255,.30),rgba(255,255,255,.04)); border-color:rgba(142,114,255,.4); }
.sol-tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:var(--s-16); }
.sol-head{ font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:600; color:#fff; line-height:1.08; margin-bottom:var(--s-12); }
.sol-body{ font-size:.98rem; color:var(--on-dark-muted); line-height:1.5; }

/* ============================================================ PROOF / sample call ============================================================ */
.callproof{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-48); align-items:stretch; }
.callproof-media{ border-radius:var(--r-lg); overflow:hidden; min-height:340px; background:var(--ink-2); }
.callproof-media img{ width:100%; height:100%; object-fit:cover; }
.callproof-body{ display:flex; flex-direction:column; justify-content:center; }
.callproof-links{ display:flex; flex-wrap:wrap; gap:var(--s-16); margin-top:var(--s-24); }
.callproof-link{ font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem; }
.callproof-link:hover{ color:var(--accent-deep); }

/* audio-sample player (JS contract: .is-playing, --audio-progress, .audio-icon--play/pause) */
.audio-sample{ display:flex; flex-direction:column; gap:var(--s-16); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-24); }
.panel-ink .audio-sample,.panel-accent .audio-sample{ background:var(--ink-2); border-color:var(--line-dark); }
.audio-marker{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.panel-ink .audio-marker{ color:var(--on-dark-muted); }
.audio-marker-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.audio-sample.is-playing .audio-marker-dot{ animation:audio-pulse 1.4s var(--ease-out-quart) infinite; }
@keyframes audio-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.audio-row{ display:flex; align-items:center; gap:var(--s-16); }
.audio-play-button{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; border:none; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--dur-state) var(--ease-out-quart), transform var(--dur-feedback) var(--ease-out-quart); }
.audio-play-button:hover{ background:var(--accent-bright); }
.audio-play-button:active{ transform:translateY(1px); }
.audio-icon--pause{ display:none; }
.audio-sample.is-playing .audio-icon--play{ display:none; }
.audio-sample.is-playing .audio-icon--pause{ display:block; }
.audio-waveform{ position:relative; height:56px; flex:1; --audio-progress:0%; }
.audio-waveform-svg{ position:absolute; inset:0; width:100%; height:100%; }
.audio-waveform-svg--base{ color:var(--line-2); }
.panel-ink .audio-waveform-svg--base{ color:rgba(255,255,255,.18); }
.audio-waveform-svg--heard{ color:var(--accent); clip-path:inset(0 calc(100% - var(--audio-progress)) 0 0); }
.audio-waveform-playhead{ position:absolute; top:-3px; bottom:-3px; left:var(--audio-progress); width:2px; background:var(--accent-bright); box-shadow:0 0 10px rgba(142,114,255,.8); }
.audio-timecode{ font-family:var(--font-mono); font-size:.8125rem; color:var(--muted); display:flex; gap:4px; }
.panel-ink .audio-timecode{ color:var(--on-dark-muted); }
.audio-meta{ font-size:.8rem; color:var(--muted); }
.audio-transcript{ font-size:.92rem; color:var(--muted); line-height:1.55; border-top:1px solid var(--line); padding-top:var(--s-16); }
.panel-ink .audio-transcript{ color:var(--on-dark-muted); border-color:var(--line-dark); }
.audio-transcript .t-agent b{ color:var(--accent); }

/* ============================================================ IN PRODUCTION (testimonials) ============================================================ */
.testi-carousel{ min-width:0; }
.testimonials{ max-width:1240px; margin:var(--s-48) auto 0; display:grid; grid-template-columns:1fr; gap:var(--s-24); }
@media (min-width:720px){ .testimonials{ grid-template-columns:repeat(3,1fr); } }
.testimonial{ background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--r); padding:var(--s-32);
  transition:transform var(--dur-state) var(--ease-out-quart), box-shadow var(--dur-state) var(--ease-out-quart); }
.testimonial:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.t-tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-16); }
.t-quote{ font-family:var(--font-display); font-weight:500; font-size:1.12rem; line-height:1.4; letter-spacing:-.01em; margin-bottom:var(--s-16); }
.t-cite{ font-weight:600; font-size:.95rem; }
.t-role{ font-size:.85rem; color:var(--muted); }
.carousel-controls{ display:none; }
@media (max-width:640px){
  .testimonials{ grid-template-columns:none; max-width:none; margin-top:var(--s-32); margin-inline:0; }
  .testimonial:hover{ transform:none; box-shadow:none; }
  [data-carousel-track]{ display:flex; flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:var(--s-16); padding-bottom:var(--s-4); }
  [data-carousel-track]::-webkit-scrollbar{ display:none; }
  [data-carousel-track] > *{ flex:0 0 86%; scroll-snap-align:start; opacity:1 !important; transform:none !important; }
  .carousel-controls{ display:flex; align-items:center; justify-content:center; gap:var(--s-16); margin-top:var(--s-24); }
  .carousel-arrow{ width:2.6rem; height:2.6rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); color:var(--text); cursor:pointer; transition:opacity var(--dur-state) var(--ease-out-quart), background var(--dur-state) var(--ease-out-quart); }
  .carousel-arrow:disabled{ opacity:.3; cursor:default; }
  .carousel-dots{ display:flex; align-items:center; gap:var(--s-8); }
  .carousel-dot{ width:7px; height:7px; padding:0; border-radius:50%; border:none; background:var(--muted); opacity:.4; cursor:pointer; transition:background var(--dur-state) var(--ease-out-quart), opacity var(--dur-state) var(--ease-out-quart), transform var(--dur-state) var(--ease-out-quart); }
  .carousel-dot.active{ background:var(--accent); opacity:1; transform:scale(1.3); }
}

/* ============================================================ HOW IT WORKS (stepper) ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-16); margin-top:var(--s-48); }
.step{ position:relative; padding:var(--s-24); border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.panel-ink .step{ background:var(--ink-2); border-color:var(--line-dark); }
.step-idx{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); margin-bottom:var(--s-12); }
.step-title{ font-size:1.15rem; font-weight:600; margin-bottom:var(--s-8); }
.step-body{ font-size:.92rem; color:var(--muted); line-height:1.5; }
.panel-ink .step-body{ color:var(--on-dark-muted); }
.step:not(:last-child)::after{ content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:700; z-index:2; }
.hiw-note{ margin-top:var(--s-24); font-weight:600; color:var(--accent-deep); }

/* ============================================================ KNOWLEDGE BASE (compact cards) ============================================================ */
.kb-foundation{ display:flex; align-items:center; justify-content:center; gap:var(--s-16); flex-wrap:wrap; margin-bottom:var(--s-48); font-family:var(--font-mono); font-size:.85rem; color:var(--muted); }
.kb-foundation .kb-core{ background:var(--accent); color:#fff; padding:.5rem 1rem; border-radius:var(--r-pill); font-weight:600; }
.kb-foundation .kb-arm{ padding:.4rem .9rem; border:1px solid var(--line-2); border-radius:var(--r-pill); }
.kb-phase{ margin-bottom:var(--s-48); }
.kb-phase:last-child{ margin-bottom:0; }
.kb-phase-title{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-16); }
.kb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-16); }
.kb-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform var(--dur-state) var(--ease-out-quart), box-shadow var(--dur-state) var(--ease-out-quart); }
.kb-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.kb-card-img{ height:clamp(132px,13vw,164px); background:var(--surface-violet) var(--kb-img) center/cover no-repeat; }
.kb-card-body{ padding:var(--s-16) var(--s-24) var(--s-24); }
.kb-card-title{ font-weight:600; font-size:1.05rem; margin-bottom:var(--s-4); }
.kb-card-text{ font-size:.9rem; color:var(--muted); line-height:1.45; }

/* ============================================================ FOUR CHANNELS ============================================================ */
.channels{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:var(--s-48); }
.channel{ padding:var(--s-24); border-top:1px solid var(--line); }
.panel-ink .channel{ border-color:var(--line-dark); }
.channel-no{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--accent-bright); margin-bottom:var(--s-12); }
.channel-name{ font-size:1.2rem; font-weight:600; margin-bottom:var(--s-8); }
.channel-body{ font-size:.92rem; color:var(--muted); line-height:1.5; }
.panel-ink .channel-body{ color:var(--on-dark-muted); }

/* ============================================================ WHY IT HOLDS UP (trust) ============================================================ */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-24); margin-top:var(--s-48); }
.trust-item{ padding:var(--s-24); border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.panel-paper .trust-item,.panel-surface .trust-item{ background:var(--paper); border-color:var(--line); }
.trust-name{ font-size:1.1rem; font-weight:600; margin-bottom:var(--s-8); color:#fff; }
.panel-paper .trust-name,.panel-surface .trust-name{ color:var(--text); }
.trust-desc{ font-size:.92rem; color:var(--on-dark-muted); line-height:1.5; }
.panel-paper .trust-desc,.panel-surface .trust-desc{ color:var(--muted); }

/* ============================================================ FINAL CTA ============================================================ */
.final-cta{ text-align:center; max-width:680px; margin-inline:auto; }
.final-cta .cta-row{ justify-content:center; margin-top:var(--s-24); }

/* ============================================================ FOOTER ============================================================ */
.site-footer{ background:var(--ink); color:var(--on-dark); padding-block:var(--s-64) var(--s-32); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--s-32); padding-bottom:var(--s-48); border-bottom:1px solid var(--line-dark); }
.footer-brand .brand-name{ color:#fff; }
.footer-blurb{ font-size:.9rem; color:var(--on-dark-muted); margin-top:var(--s-12); max-width:30ch; }
.footer-col h2{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:var(--s-16); }
.footer-col a{ display:block; font-size:.92rem; color:var(--on-dark); opacity:.82; margin-bottom:var(--s-8); }
.footer-col a:hover{ opacity:1; color:var(--accent-bright); }
.footer-strip{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-16); padding-top:var(--s-24); font-size:.85rem; color:var(--on-dark-muted); flex-wrap:wrap; }
.footer-quote{ font-style:italic; color:var(--on-dark); }
.footer-strip a{ color:var(--accent-bright); font-weight:600; }

/* KB consent: markup + styling owned by js/analytics.js (.kb-consent-ask on <html>) */
.kb-consent{ display:none; }

/* ============================================================ LEAD FORM (get-started) ============================================================ */
.lead-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-64); align-items:start; }
.lead-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-48); box-shadow:var(--shadow-card); }
.price-lead{ background:var(--surface-violet); border-radius:var(--r); padding:var(--s-24); margin-bottom:var(--s-32); }
.price-lead-figure{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--accent-deep); }
.price-lead-sub{ font-size:.92rem; color:var(--muted); margin-top:var(--s-8); }
.price-lead-badge{ display:inline-block; margin-top:var(--s-12); background:var(--accent); color:#fff; font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:var(--r-pill); }
.form-field{ margin-bottom:var(--s-16); }
.form-field label{ display:block; font-size:.88rem; font-weight:600; margin-bottom:var(--s-8); }
.lead-form .form-control,.lead-form .form-select{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:var(--s-12) var(--s-16); background:var(--paper); font:inherit; transition:border-color var(--dur-feedback) var(--ease-out-quart), box-shadow var(--dur-feedback) var(--ease-out-quart); }
.lead-form .form-control:focus,.lead-form .form-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(106,77,255,.16); }
.lead-form .form-control.is-invalid,.lead-form .form-select.is-invalid{ border-color:var(--err); box-shadow:0 0 0 3px rgba(229,72,77,.14); }
.validation-error{ font-size:.875rem; line-height:1.5; color:var(--err); margin-top:var(--s-8); }
.validation-summary{ margin-top:var(--s-16); padding:var(--s-12) var(--s-16); border:1px solid rgba(229,72,77,.3); border-radius:var(--r-sm); background:rgba(229,72,77,.06); color:var(--err); font-size:.9rem; }
.lead-card-success{ animation:wizard-step-in var(--dur-state) var(--ease-out-quint); }
@keyframes wizard-step-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
[data-intent="pricing"] [data-for="get-started"],[data-intent="get-started"] [data-for="pricing"]{ display:none; }

/* ============================================================ USE-CASE PAGE ============================================================ */
.page-mini-hero{ background:var(--ink); color:var(--on-dark); }
.page-mini-hero .site-nav{ z-index:30; }
.page-mini-hero .brand-name,.page-mini-hero .nav-link,.page-mini-hero .nav-uc-trigger{ color:#fff; }
.page-mini-hero .nav-link:hover{ color:var(--accent-bright); }
.page-mini-hero .nav-burger{ border-color:rgba(255,255,255,.3); }
.page-mini-hero .nav-burger span{ background:#fff; }
.page-mini-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.page-mini-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.uc-eyebrow-back{ color:var(--accent-bright); font-weight:500; }
.uc-hero{ max-width:780px; padding-block:var(--s-48) var(--s-32); }
.uc-hero h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); color:#fff; margin-block:var(--s-16); }
.uc-section{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-48); align-items:center; }
.uc-section.reverse{ direction:rtl; } .uc-section.reverse>*{ direction:ltr; }
.uc-media{ border-radius:var(--r-lg); overflow:hidden; min-height:300px; background:var(--surface-violet); }
.uc-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================ REVEAL (JS: .has-reveal + [data-reveal="shown"]) ============================================================ */
[data-reveal]{ opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease-out-quint), transform var(--dur-reveal) var(--ease-out-quint); transition-delay:var(--reveal-delay,0ms); }
.has-reveal [data-reveal]:not([data-reveal="shown"]){ opacity:0; transform:translateY(18px); }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:1000px){
  .solution-grid{ grid-template-columns:repeat(2,1fr); }
  .kb-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .callproof,.lead-wrap,.uc-section{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2)::after,.step:not(:last-child)::after{ content:none; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .channels{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .panel{ padding-block:var(--s-64); }
  .solution-grid{ grid-template-columns:1fr; }
  .kb-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .channels{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:var(--s-24); }
  .hero-inner{ padding-top:var(--s-48); }
  .section-head{ margin-bottom:var(--s-32); }
  .lead-card{ padding:var(--s-32); }
  /* hide decorative secondary copy on phones */
  .hero-proof{ display:none; }
  .callproof-body .audio-transcript,.callproof-body .sol-body{ display:none; }
  .footer-strip{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal],.has-reveal [data-reveal]:not([data-reveal="shown"]){ opacity:1; transform:none; }
  .hero-video{ display:none; }
}

/* a11y: hook-line on dark ink panels must use the on-dark muted token (WCAG 1.4.3) */
.panel-ink .hook-line { color: var(--on-dark-muted); }

/* ============================================================
   FIXED NAV — sticky on every page, matching the Ryku hub.
   Transparent over the hero, solid + blurred once scrolled.
   ============================================================ */
:root{ --nav-h:72px; }
html{ scroll-padding-top:var(--nav-h); }

.site-nav,
.panel-hero>.site-nav,
.page-mini-hero>.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--dur-state) var(--ease-out-quart),
    backdrop-filter var(--dur-state) var(--ease-out-quart),
    border-color var(--dur-state) var(--ease-out-quart);
}
/* solid + blurred once past the top — uses the site's ink token at 90% */
.site-nav.scrolled{
  background:rgba(14,15,28,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--line-dark);
}

/* non-hero pages held the nav in flow → push their first band clear of the fixed bar */
.page-mini-hero,
.lead-section,
.legal-body{ padding-top:calc(var(--nav-h) + var(--s-24)); }

/* One customer quote left: centre it rather than strand it in the first
   column of a three-column rail. */
.testimonials--single { grid-template-columns: minmax(0, 44rem); justify-content: center; }

/* ==========================================================================
   Mobile pass: the Knowledge Base ran 3.5 phone screens, because each card
   stacked a 132px photo on top of its text (9 cards = 2,133px).
   On phones the card becomes a row: a slim photo beside the copy. Nothing is
   hidden and nothing moves sideways.
   PHONE ONLY. Desktop is untouched.
   ========================================================================== */
@media (max-width: 640px) {
    .kb-card { display: flex; flex-direction: row; align-items: stretch; }
    .kb-card-img { height: auto; flex: 0 0 104px; }
    .kb-card-body {
        padding: var(--s-16);
        display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
    }
    .kb-card:hover { transform: none; }
}