/* ===== Ayumi — marketing site CSS =====
   Visual system mirrors the app (src/theme, src/components/ui.js):
   system font, 14px card radius, subtle 0.06 hairlines, belt avatars. */
:root{
  --bg:#0A0A0B;
  --surface:#131316;        /* bgElev  */
  --surface-2:#1A1A1F;      /* bgElev2 */
  --silhouette:#2E2E38;
  --pri:#F4F4F5;            /* text    */
  --dim:#A1A1AA;            /* textDim */
  --mute:#6B6B74;          /* textMute */
  --violet:#6D28D9;        /* accent  */
  --violet-soft:#A78BFA;   /* accentSoft */
  --accent-bg:rgba(109,40,217,0.14);
  --win:#34D399;
  --loss:#F87171;
  --hair:rgba(255,255,255,0.06);
  --hair-strong:rgba(255,255,255,0.12);
}

/* The app uses no embedded font — match it with the platform system stack. */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--pri);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,sans-serif;
  overflow-x:hidden;
}
::selection{ background:rgba(109,40,217,.45); color:#fff; }

.font-mono{ font-family:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",monospace; }
.tnum{ font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }

/* Display headline — echoes app largeTitle (700, tight negative tracking) */
.display{ letter-spacing:-0.035em; line-height:0.99; font-weight:700; }
.display-tight{ letter-spacing:-0.045em; }

/* Caption / eyebrow — app uses uppercase system caption (NOT mono) */
.eyebrow{
  font-size:0.69rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--violet-soft);
}
.sec-num{
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--mute);
}

/* Wordmark — echoes the splash wordmark (wide tracking, uppercase) */
.wordmark{ font-weight:700; letter-spacing:0.18em; text-transform:uppercase; }

/* Hairline helpers */
.hair{ border:1px solid var(--hair); }
.hair-t{ border-top:1px solid var(--hair); }
.hair-b{ border-bottom:1px solid var(--hair); }

/* Gradient text + surfaces */
.text-violet-grad{
  background:linear-gradient(180deg,#F4F4F5 0%, #C9B8FF 70%, #A78BFA 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-grad{
  background:linear-gradient(135deg,#7C3AED 0%, #6D28D9 55%, #5B21B6 100%);
  box-shadow:0 0 0 1px rgba(167,139,250,.35), 0 12px 40px -12px rgba(109,40,217,.7);
}
.cta-grad:hover{ box-shadow:0 0 0 1px rgba(167,139,250,.55), 0 16px 48px -10px rgba(109,40,217,.85); }

/* Diagonal motif */
.diag-cut{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 44px)); }
.diag-line{
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, rgba(167,139,250,.08) 9px 10px);
}

/* Radial violet glow */
.glow-violet{
  background:radial-gradient(60% 60% at 50% 40%, rgba(109,40,217,.45) 0%, rgba(109,40,217,.12) 38%, transparent 72%);
}

/* ===== iPhone frame ===== */
.phone{
  position:relative;
  width:300px;
  border-radius:46px;
  background:linear-gradient(160deg,#202028,#0d0d10);
  padding:11px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.07),
    0 2px 2px rgba(255,255,255,.05) inset,
    0 50px 90px -30px rgba(0,0,0,.9);
}
.phone-screen{
  position:relative;
  border-radius:36px;
  background:var(--bg);
  overflow:hidden;
  aspect-ratio:9/19.5;
  border:1px solid rgba(255,255,255,.05);
}
.phone .island{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:88px; height:26px; background:#000; border-radius:16px; z-index:30;
}
.statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 22px 4px; font-size:13px; font-weight:600; color:var(--pri);
  position:relative; z-index:20;
}
.statusbar .dots{ display:flex; gap:5px; align-items:center; }

/* App screen scroll content */
.app-scroll{ padding:6px 16px 18px; }

/* Bottom tab bar */
.tabbar{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-around; align-items:center;
  padding:11px 18px 20px;
  background:var(--surface);          /* opaque bgElev, like the app */
  border-top:1px solid var(--hair); z-index:15;
}
.tabbar svg{ width:22px; height:22px; }

/* In-app cards — app bgElev card: radius 14, 0.06 hairline */
.app-card{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:14px;
}

/* ===== Belt avatar — the app's signature identity element =====
   Rounded-square silhouette tile with a belt-colour strip + stripes (grados)
   pinned to the bottom. Mirrors BeltAvatar in src/components/ui.js. */
.belt-avatar{
  position:relative; flex:none;
  width:44px; height:44px; border-radius:11px;
  background:var(--silhouette);
  display:grid; place-items:center; overflow:hidden;
}
.belt-avatar .ba-init{ font-weight:600; font-size:15px; letter-spacing:-0.3px; color:var(--dim); }
.belt-avatar .ba-strip{ position:absolute; left:0; right:0; bottom:0; height:5px; display:flex; }
.belt-avatar .ba-bar{ flex:1; background:var(--belt,#E5E5E5); }
.belt-avatar .ba-stripes{
  width:24%; background:#0A0A0A;
  display:flex; align-items:center; justify-content:center; gap:1.5px;
}
.belt-avatar .ba-stripes i{ width:2px; height:100%; background:#fff; }
.belt-avatar.black .ba-stripes{ background:#DC2626; }     /* red bar for black belt */
/* sizes */
.belt-avatar.ba-sm{ width:30px; height:30px; border-radius:8px; }
.belt-avatar.ba-sm .ba-init{ font-size:11px; }
.belt-avatar.ba-sm .ba-strip{ height:4px; }
.belt-avatar.ba-lg{ width:64px; height:64px; border-radius:18px; }
.belt-avatar.ba-lg .ba-init{ font-size:23px; }
.belt-avatar.ba-lg .ba-strip{ height:8px; }

/* Belt progress bar (study-goal card) */
.belt{ height:6px; border-radius:3px; background:#3b1f6b; position:relative; overflow:hidden; }
.belt > i{ position:absolute; inset:0; width:var(--p,70%); background:linear-gradient(90deg,#7C3AED,#A78BFA); border-radius:3px; }

/* Stat chips / category chips — app Chip: radius 10, 14px/500 */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:10px; background:var(--surface);
  border:1px solid var(--hair); font-size:13.5px; font-weight:500; color:var(--dim);
}

/* Result badge — app ResultBadge (win/loss/tie pill) */
.result-badge{
  display:inline-flex; align-items:center;
  padding:2px 7px; border-radius:6px;
  font-size:10.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
}
.result-badge.win{ background:rgba(52,211,153,0.12); color:var(--win); }
.result-badge.loss{ background:rgba(248,113,113,0.12); color:var(--loss); }
.result-badge.tie{ background:rgba(161,161,170,0.12); color:var(--dim); }

/* App badges (App Store / Google Play) */
.store-badge{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px; border-radius:13px;
  border:1px solid var(--hair-strong); background:#0e0e11;
  transition:border-color .2s, transform .2s, background .2s;
}
.store-badge:hover{ border-color:rgba(167,139,250,.5); transform:translateY(-2px); background:#121216; }
.store-badge.disabled{ opacity:.5; }
.store-badge small{ display:block; font-size:10px; letter-spacing:.04em; color:var(--mute); }
.store-badge strong{ display:block; font-size:16px; font-weight:700; letter-spacing:-.02em; }

/* Logo mark — app arrow (wave-filled) with detached violet chevron tip.
   Paths taken from App.js (ARROW + CHEVRON). */
.logo-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 52 L41 121 L49 128 L84 96 L84 196 L116 196 L116 96 L151 128 L159 121 Z' fill='%23F4F4F5'/%3E%3Cpath d='M78 39 L100 18 L122 39 L100 33 Z' fill='%236D28D9'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* Nav */
#nav.scrolled{ background:rgba(10,10,11,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.nav-link{ color:var(--dim); font-size:14px; transition:color .18s; }
.nav-link:hover{ color:var(--pri); }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--hair); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer; }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.faq-icon{ flex:none; transition:transform .3s; color:var(--violet-soft); }
.faq-item.open .faq-icon{ transform:rotate(45deg); }

/* Pricing */
.price-card{ background:var(--surface); border:1px solid var(--hair); border-radius:18px; }
.price-card.pro{
  background:linear-gradient(180deg, rgba(109,40,217,.16), rgba(19,19,22,.6) 40%);
  border-color:rgba(167,139,250,.4);
  box-shadow:0 30px 80px -40px rgba(109,40,217,.7);
}

/* Partner sync line */
.sync-line{ stroke-dasharray:6 8; animation:dash 1.2s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-28; } }

/* Language switcher */
[data-lang]{ color:var(--mute); border:1px solid transparent; transition:color .18s, border-color .18s, background .18s; cursor:pointer; }
[data-lang]:hover{ color:var(--dim); }
[data-lang].lang-active{ color:var(--pri); background:var(--surface-2); border-color:var(--hair); }

/* Knowledge map */
.km-edge{ stroke:rgba(167,139,250,.35); stroke-width:1.5; fill:none; }
.km-edge.draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.km-node circle{ transition:r .3s; }
</content>