/* =============================================================
   Hocamdan promotional site — styles.css
   Vanilla CSS only. Custom properties at :root + dark-mode override.
   Mobile-first; breakpoints at 600 / 900 / 1100.
   ============================================================= */

/* ---- Local font ----
   Drop a real Inter-Variable.woff2 into assets/fonts/ to enable.
   Until then, the font-face fails silently and the stack falls back to
   system fonts (-apple-system, Segoe UI, Roboto). No 404 in console
   because the URL is absent here — see Asset checklist for instructions. */
/* @font-face{
  font-family:'Inter';
  src: url('assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+20A0-20CF, U+2100-214F;
} */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Brand */
  --primary:        #E14B4B;
  --primary-tint:   #FBE9E9;
  --primary-strong: #C73A3A;

  /* Surfaces / ink */
  --ink:        #15171A;
  --ink-soft:   #2A2E37;
  --muted:      #6B7280;
  --surface-1:  #FFFFFF;
  --surface-2:  #F4F5F7;
  --surface-3:  #ECEEF2;
  --border:     #E5E7EB;
  --success:    #15803D;

  /* Type scale — 1.250 (minor third) */
  --fs-12:   12px;
  --fs-15:   15px;
  --fs-19:   18.75px;
  --fs-23:   23.44px;
  --fs-29:   29.30px;
  --fs-37:   36.62px;
  --fs-46:   45.78px;
  --fs-57:   57.22px;

  /* Spacing scale — 4/8/12/16/24/32/48/64 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radius scale */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 24px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15,17,21,.05);
  --sh-md: 0 4px 12px -2px rgba(15,17,21,.08), 0 2px 4px rgba(15,17,21,.04);
  --sh-lg: 0 24px 48px -16px rgba(15,17,21,.18), 0 8px 24px -6px rgba(15,17,21,.10);
  --sh-red: 0 12px 32px -10px rgba(225,75,75,.45);

  /* Motion */
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 400ms;
  --ease:   cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --container: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-h: 60px;
}

/* ---- Dark mode override ---- */
:root[data-theme="dark"]{
  --ink:        #F4F5F7;
  --ink-soft:   #C7CBD3;
  --muted:      #9AA1AD;
  --surface-1:  #0F1115;
  --surface-2:  #181B22;
  --surface-3:  #20242D;
  --border:     #2A2E37;
  --primary-tint: #2A1A1C;

  --sh-sm: 0 1px 2px rgba(0,0,0,.5);
  --sh-md: 0 6px 16px -3px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);
  --sh-lg: 0 30px 60px -20px rgba(0,0,0,.7), 0 12px 28px -8px rgba(0,0,0,.45);
  --sh-red: 0 16px 40px -12px rgba(225,75,75,.55);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; padding:0 }
ul{ list-style:none; padding:0; margin:0 }
code{
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

h1,h2,h3,h4{ margin:0; letter-spacing:-0.02em; line-height:1.1; color:var(--ink) }
h1{ font-size: clamp(var(--fs-37), 5.5vw, var(--fs-57)); font-weight:800; letter-spacing:-0.03em }
h2{ font-size: clamp(var(--fs-29), 3.4vw, var(--fs-46)); font-weight:700 }
h3{ font-size: var(--fs-19); font-weight:600; letter-spacing:-0.01em; line-height:1.25 }
p{ margin:0; text-wrap:pretty }

/* ---- Focus rings (visible per rubric ethical/inclusive) ---- */
:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip link ---- */
.skip{
  position:fixed; top:8px; left:8px;
  background: var(--ink); color: var(--surface-1);
  padding: 8px 14px; border-radius: 8px;
  transform: translateY(-200%);
  transition: transform var(--t-med) var(--ease);
  z-index: 100;
  font-weight: 600; font-size: 13px;
}
.skip:focus{ transform: translateY(0) }

/* ---- Layout ---- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
section{ padding: clamp(56px, 8vw, 96px) 0; position:relative }
section.alt{ background: var(--surface-2) }

/* ---- Utilities ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--s-4);
}
.eyebrow .dot{
  width: 24px; height: 1.5px; background: currentColor; display: inline-block;
}
.lead{
  font-size: var(--fs-19);
  color: var(--muted);
  max-width: 56ch;
  margin-top: var(--s-4);
}
.section-head{ max-width: 700px; margin-bottom: var(--s-7) }
.section-head .lead{ margin-top: var(--s-4) }

/* ---- Reveal-on-scroll ----
   Kept as visual no-op: elements render fully visible by default so
   nothing flashes during smooth-scroll. The .in class is still added
   by IO for any future styling hooks, but doesn't change appearance. */
.reveal{ opacity: 1; transform: none }
.reveal.in{ opacity: 1; transform: none }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-15);
  border: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Diagonal sheen that sweeps across on hover. */
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
  z-index: -1;
}
.btn:hover::after{ transform: translateX(130%) }
.btn-ghost::after{
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--primary) 22%, transparent) 50%, transparent 70%);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn .ico{ width:18px; height:18px; flex:0 0 auto; fill:currentColor; transition: transform var(--t-med) var(--ease) }
.btn:hover .ico{ transform: translateX(2px) }
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: var(--sh-red);
}
.btn-primary:hover{ background: var(--primary-strong); box-shadow: 0 18px 40px -12px rgba(225,75,75,.55) }
.btn-ghost{
  background: var(--surface-1);
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--ink); background: var(--surface-2) }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.nav.scrolled{
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
}
.nav-inner{
  height: 100%;
  display:flex; align-items:center; justify-content: space-between;
  gap: var(--s-5);
}
.brand{
  display:flex; align-items:center; gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--fs-15);
}
.brand img{ width: 28px; height: 28px }
.nav-links{
  position: relative;
  display:flex; align-items:center; gap: var(--s-5);
}
.nav-links a{
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 4px;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::before{
  /* Hover-draw underline that grows from the centre. */
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -2px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: left var(--t-med) var(--ease), right var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  opacity: 0;
}
.nav-links a:hover{ color: var(--ink) }
.nav-links a:hover::before{ left: 0; right: 0; opacity: .35 }
.nav-links a[aria-current="true"]{ color: var(--ink) }
.nav-links a[aria-current="true"]::before{ opacity: 0 } /* let the indicator handle it */
.nav-indicator{
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: left var(--t-med) var(--ease),
              width var(--t-med) var(--ease),
              opacity var(--t-med) var(--ease);
  opacity: 0;
  left: 0;
  width: 0;
  pointer-events: none;
}
.nav-cta{ display:flex; align-items:center; gap: var(--s-3) }
.nav-cta .btn{ padding: 8px 14px; font-size: 13px }

.theme-toggle{
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--ink);
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.theme-toggle:hover{ background: var(--surface-2); border-color: var(--ink) }
.theme-toggle .ico{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .theme-toggle .sun{ display: none }
:root[data-theme="dark"] .theme-toggle .moon{ display: block }
:root[data-theme="light"] .theme-toggle .sun{ display: block }
:root[data-theme="light"] .theme-toggle .moon{ display: none }

.menu-toggle{ display: none; width: 36px; height: 36px; border-radius: var(--r-1); border: 1px solid var(--border); padding: 0 8px; gap: 4px; flex-direction: column; align-items: stretch; justify-content: center }
.menu-toggle span{ display:block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease) }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0 }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

.mobile-menu{
  display:none;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--gutter) var(--s-5);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a{
  padding: 12px 4px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child{ border-bottom: 0 }

@media (max-width: 900px){
  .nav-links{ display:none }
  .nav-cta .btn{ display:none }
  .menu-toggle{ display: flex }
  .mobile-menu[data-open="true"]{ display: flex }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding: clamp(48px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); overflow: hidden }
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8);
  align-items: center;
}
.hero h1 .accent{ color: var(--primary) }
.hero .cta-row{ display:flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap }
.hero-stats{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s-5);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  max-width: 560px;
}
.hero-stats > div{ display:flex; flex-direction: column; gap: 2px }
.hero-stats dt{
  font-size: var(--fs-23);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-stats dd{ margin: 0; font-size: 13px; color: var(--muted) }

.hero-visual{ position: relative; justify-self: end; }
.hero-ornament{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
  /* Spotlight mask follows the cursor via --mx / --my, updated by JS.
     Defaults to top-right so the ornament still looks intentional on
     load and on touch devices. The mask radius is tight so the dots
     only "light up" near the pointer and fade out everywhere else. */
  --mx: 80%;
  --my: 20%;
  -webkit-mask-image: radial-gradient(circle 280px at var(--mx) var(--my), black 0%, rgba(0,0,0,.4) 40%, transparent 75%);
          mask-image: radial-gradient(circle 280px at var(--mx) var(--my), black 0%, rgba(0,0,0,.4) 40%, transparent 75%);
  transition: -webkit-mask-position var(--t-med) var(--ease), mask-position var(--t-med) var(--ease);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .hero-ornament{
  background-image: radial-gradient(rgba(225,75,75,.35) 1.4px, transparent 1.6px);
}
.hero-inner > *{ position: relative; z-index: 1 }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; gap: var(--s-7) }
  .hero-visual{ justify-self: center; }
  .hero-stats{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 520px){
  .hero-stats{ grid-template-columns: 1fr 1fr; gap: var(--s-4) }
  .hero-stats > div:last-child{ grid-column: span 2 }
}

/* ---- Phone frame ---- */
.phone{
  position: relative;
  container-type: inline-size;
  width: 280px;
  aspect-ratio: 9 / 17.5;
  background: var(--ink);
  padding: 3% 3% 12% 3%;
  box-sizing: border-box;
  border-radius: 38px;
  overflow: hidden;
  border: 1.5px solid var(--primary);
  box-shadow: var(--sh-lg);
  transition: box-shadow var(--t-med) var(--ease);
}
.phone-lg{ width: 300px }
.phone-screen{
  position: relative;
  width: 100%; height: 100%;
  background: var(--surface-2);
  border-radius: 30px;
  overflow: hidden;
}
.phone::before{
  content: "";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 5px; border-radius: 3px;
  background: rgba(0,0,0,.5);
  z-index: 2;
}
.ph-img{ width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface-2) }
.demo-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; cursor: pointer }
.ph-fallback{
  position: absolute; inset: 0;
  display:flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary) 6%, transparent) 0 10px, transparent 10px 20px),
    var(--surface-2);
  color: var(--muted);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
}
.ph-fallback::before{
  content: attr(data-asset-label);
  padding: 4px 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 600;
}
.ph-fallback::after{
  content: attr(data-asset-desc);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  max-width: 200px;
}
/* When the real image has loaded, hide the fallback (set by JS) */
.ph-img.loaded + .ph-fallback{ display: none }

/* ---- Hero two-phone layout ----
   Primary phone tilts slightly left, secondary tilts right and sits
   behind+below. A pulsing dot anchored to the primary phone keeps the
   "live recommender" cue without obscuring the screen. */
.phone-primary{
  position: relative;
  z-index: 2;
  transform: rotate(-3deg);
  transition: transform var(--t-slow) var(--ease);
}
.phone-secondary{
  position: absolute;
  right: -130px;
  bottom: -65px;
  width: 230px;
  z-index: 1;
  transform: rotate(9deg);
  opacity: .98;
  transition: transform var(--t-slow) var(--ease);
}
.phone-primary::after{
  content: "";
  position: absolute;
  top: 18px; right: -10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
  animation: pulse 2s var(--ease) infinite;
  z-index: 3;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent) }
  70%{ box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent) }
  100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent) }
}
.hero-visual:hover .phone-primary{ transform: rotate(-4deg) translateY(-4px) translateX(-6px) }
.hero-visual:hover .phone-secondary{ transform: rotate(11deg) translateY(2px) translateX(4px) }

@media (max-width: 900px){
  .hero-visual{ margin: 0 auto }
}
@media (max-width: 520px){
  .phone-secondary{ right: -40px; bottom: -50px; width: 170px }
}

/* ============================================================
   ABOUT / PROBLEM
   ============================================================ */
.about-grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8);
  align-items: center;
}
.about-grid h2{ margin-top: var(--s-3) }
.checks{
  margin-top: var(--s-5);
  display: flex; flex-direction: column; gap: 10px;
}
.checks li{
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px;
}
.checks svg{
  width: 18px; height: 18px;
  fill: none; stroke: var(--success); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-radius: 6px;
  padding: 2px;
  flex: 0 0 auto;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; gap: var(--s-6) }
}

/* Before / after vignette */
.before-after{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-5);
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.before-after:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg) }
.ba-label{
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.ba-pings{
  display: flex; flex-direction: column; gap: 6px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--muted);
  max-height: 160px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
          mask-image: linear-gradient(to bottom, black 50%, transparent);
}
.ba-pings span{
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.before-after:hover .ba-pings span:nth-child(odd){ transform: translateX(3px) }
.before-after:hover .ba-pings span:nth-child(even){ transform: translateX(-3px) }
.ba-pings b{ color: var(--ink); margin-right: 6px }
.ba-arrow{
  width: 36px; height: 36px;
  margin: 0 auto;
  display: grid; place-items: center;
  background: var(--primary-tint);
  color: var(--primary);
  border-radius: 50%;
}
.ba-arrow svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.ba-listing{
  display: flex; gap: 12px; align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--primary);
  border-radius: var(--r-2);
  background: var(--primary-tint);
}
.ba-thumb{
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}
.ba-meta{ display:flex; flex-direction:column; gap: 2px; min-width: 0 }
.ba-meta b{ font-size: 14px; color: var(--ink) }
.ba-meta span{ font-size: 12px; color: var(--ink-soft) }
.ba-pill{
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px !important;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--success);
  color: #fff !important;
}

/* ============================================================
   FEATURES
   ============================================================ */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.feature{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.feature:hover{
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.feature-ico{
  width: 44px; height: 44px;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--primary-tint);
  color: var(--primary);
}
.feature-ico svg{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.feature p{ color: var(--muted); font-size: 14.5px }
.feature.accent{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
:root[data-theme="dark"] .feature.accent{
  background: var(--primary);
  border-color: var(--primary);
}
.feature.accent h3{ color: #fff }
.feature.accent p{ color: rgba(255,255,255,.78) }
.feature.accent .feature-ico{ background: rgba(255,255,255,.14); color: #fff }
.feature.accent code{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff }

@media (max-width: 900px){ .feature-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px){ .feature-grid{ grid-template-columns: 1fr } }

/* ============================================================
   ARCHITECTURE
   ============================================================ */
.arch-diagram{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-4);
  align-items: stretch;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  box-shadow: var(--sh-sm);
}
.arch-col{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.arch-col:hover{
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.arch-col.primary{
  background: var(--primary-tint);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.arch-tag{
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.arch-col h3{ font-size: var(--fs-19) }
.arch-col ul{ display: flex; flex-direction: column; gap: 6px }
.arch-col li{
  font-size: 13.5px;
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--ink);
}
.arch-col li::before{
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  margin-top: 8px;
}
.arch-pills{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto }
.arch-pills span{
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}
.arch-link{
  display:flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--primary);
  min-width: 70px;
}
.arch-link svg{
  width: 60px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.arch-link span{
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
}

@media (max-width: 900px){
  .arch-diagram{ grid-template-columns: 1fr; }
  .arch-link{ transform: rotate(90deg); margin: 4px auto }
}

/* ============================================================
   TECH STACK
   ============================================================ */
.tech-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-3);
}
.tech-grid li{
  display:flex; align-items: center; gap: var(--s-3);
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.tech-grid li::before{
  /* Soft red wash that fills from the left on hover. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--primary-tint), transparent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.tech-grid li:hover{ border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--sh-sm) }
.tech-grid li:hover::before{ opacity: 1 }
.tech-grid img{
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 6px;
  background: var(--surface-2);
  padding: 3px;
  transition: transform var(--t-med) var(--ease);
  position: relative;
  z-index: 1;
}
.tech-grid li:hover img{ transform: scale(1.08) rotate(-4deg) }
.tech-grid li span{ position: relative; z-index: 1 }
:root[data-theme="dark"] .tech-grid img{
  background: var(--surface-3);
}

/* ============================================================
   SCREENS — featured demo + 2×2 supporting grid + scroll-snap rail
   ============================================================ */
.screens-stage{
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* Featured demo (left) */
.feature-demo{
  margin: 0;
  display: flex; flex-direction: column; gap: var(--s-4);
  align-items: stretch;
}
.feature-demo .phone{ width: 100%; max-width: 320px; margin: 0 auto }
.feature-demo figcaption{
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.feature-demo figcaption b{ font-size: var(--fs-19); color: var(--ink); font-weight: 600 }
.feature-demo figcaption > span:last-child{ font-size: 14.5px; color: var(--muted); line-height: 1.55 }
.demo-tag{
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* 2×2 grid of supporting demos */
.demo-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.demo-card{
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.demo-card:hover{ border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-md) }
.demo-card:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px }
.feature-demo, .demo-card{
  transition: opacity 160ms var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.feature-demo.swapping, .demo-card.swapping{ opacity: 0.35 }
.demo-card .phone{ width: 110px; aspect-ratio: 9 / 17.5; border-width: 1px; border-radius: 16px; transition: border-color .2s var(--ease) }
.demo-card.active .phone{ border-color: var(--primary) }
.demo-card .phone-screen{ border-radius: 12px }
.demo-card .phone::before{ width: 36px; height: 3px; top: 8px }
.demo-card figcaption{
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px;
}
.demo-card figcaption b{ color: var(--ink); font-weight: 600; line-height: 1.25 }
.demo-card figcaption span{ color: var(--muted); font-size: 12.5px; line-height: 1.45 }

/* Scroll-snap rail for static screens */
.more-screens{
  margin-top: var(--s-8);
}
.more-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.more-head h3{ font-size: var(--fs-19); font-weight: 600 }
.more-head .muted{ color: var(--muted); font-size: 13px; font-family: ui-monospace, monospace }

.rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 215px;
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s-2) 4px var(--s-5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 64px), transparent 100%);
}
.rail::-webkit-scrollbar{ height: 6px }
.rail::-webkit-scrollbar-track{ background: transparent }
.rail::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px }
.rail:hover::-webkit-scrollbar-thumb{ background: var(--ink-soft) }
.rail-card{
  margin: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.rail-card .phone{ width: 100%; aspect-ratio: 9 / 19 }
.rail-card figcaption{ font-size: 13px; color: var(--muted); font-weight: 500 }

@media (max-width: 900px){
  .screens-stage{ grid-template-columns: 1fr; gap: var(--s-6) }
  .feature-demo .phone{ max-width: 260px }
}
@media (max-width: 560px){
  .demo-grid{ grid-template-columns: 1fr }
  .rail{ grid-auto-columns: 150px; gap: var(--s-4) }
}

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
}
.member{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.member h3{ font-size: 16px; font-weight: 600; letter-spacing: -0.01em }
.portrait{ width: 110px; height: 110px }
@media (max-width: 960px){
  .team-grid{ grid-template-columns: repeat(3, 1fr); justify-items: center }
}
@media (max-width: 560px){
  .team-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 380px){
  .team-grid{ grid-template-columns: 1fr }
}
.member{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.portrait{
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.portrait .ph-img{ object-position: center top; transition: transform var(--t-slow) var(--ease) }
.member:hover .portrait{ transform: scale(1.03); border-color: var(--primary); box-shadow: var(--sh-md) }
.member:hover .portrait .ph-img{ transform: scale(1.08) }
.portrait .ph-fallback{ font-size: 10px; padding: 8px }
.portrait .ph-fallback::after{ display: none }
.member h3{ font-size: 16px; font-weight: 600 }
.member .links{
  display: flex;
  gap: 8px;
  margin-top: 2px;
  justify-content: center;
}
.social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.social svg{ width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto }
.social:hover{ transform: translateY(-2px); color: #fff; border-color: var(--ink); background: var(--ink) }
.social.linkedin:hover{ background: #0A66C2; border-color: #0A66C2 }
.social.github:hover{ background: #24292f; border-color: #24292f; color: #fff }
.social.website:hover{ background: var(--primary); border-color: var(--primary) }
.social.website svg{ stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* Advisor card */
.advisor-card{
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  align-items: center;
}
.advisor-portrait{
  position: relative;
  width: 160px; height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.advisor-portrait .ph-img{ width: 100%; height: 100%; object-fit: cover; object-position: center top }
.advisor-card:hover .advisor-portrait{ transform: scale(1.03); border-color: var(--primary); box-shadow: var(--sh-md) }
.advisor-body h3{ font-size: var(--fs-23); margin-top: 6px }
.advisor-body .role{ color: var(--muted); font-size: 14.5px; margin-top: 2px }
.advisor-ack{ color: var(--ink-soft); font-size: 14px; margin-top: var(--s-3); max-width: 60ch }
.advisor-body .links{ margin-top: var(--s-4); gap: 10px; flex-wrap: wrap }
/* Advisor's social pills carry a label, so they widen */
.advisor-body .social{
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
}

@media (max-width: 700px){
  .advisor-card{ grid-template-columns: 1fr; gap: var(--s-5); text-align: left }
  .advisor-portrait{ width: 120px; height: 120px }
}

/* ============================================================
   VIDEO
   ============================================================ */
.video-wrap{
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--r-4);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--sh-lg);
}
.video-wrap iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
    var(--ink);
  color: #fff;
  transition: opacity var(--t-med) var(--ease);
}
.video-poster svg{
  width: 80px; height: 80px;
  fill: rgba(255,255,255,.95);
}
.video-poster svg circle{ fill: var(--primary) }
.video-poster span{ font-weight: 600; font-size: var(--fs-19) }
.video-poster small{ font-size: 12px; color: rgba(255,255,255,.6); font-family: ui-monospace, 'JetBrains Mono', monospace }
.video-poster.hidden{ opacity: 0; pointer-events: none }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  padding: var(--s-7) 0 var(--s-7);
}
.foot-inner{
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.foot-left{ display:flex; flex-direction: column; gap: var(--s-3) }
.foot-left p{ font-size: 13px; color: var(--muted) }
.brand-foot{ font-size: 14px }
.foot-right{
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.foot-right .btn{ padding: 10px 16px; font-size: 13px }
.spd-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
}
.spd-badge::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.updated{ font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace }

@media (max-width: 700px){
  .foot-right{ align-items: flex-start; width: 100% }
}

/* ============================================================
   MOTION / A11Y
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation: none !important;
    transition: none !important;
  }
  html{ scroll-behavior: auto }
  .reveal{ opacity: 1; transform: none }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  @page{ size: A4 portrait; margin: 14mm }
  .nav, .skip, .hero-ornament, .menu-toggle, .theme-toggle, .video-poster, .mobile-menu { display: none !important }
  html,body{ background: #fff !important; color: #15171A !important }
  section{ padding: 24px 0 !important; break-inside: avoid }
  .feature, .gif-card, .shot-card, .member, .arch-col, .video-wrap{ break-inside: avoid }
  .video-wrap iframe{ display: none }
  .reveal{ opacity: 1; transform: none }
  a{ color: inherit }
}