/* ==========================================================================
   VN Codes — Design tokens, reset & primitives
   ========================================================================== */

:root{
  /* --- surface ramp: warm cream, not stark white --- */
  --bg:#faf6ef;
  --bg-2:#f3ecdf;
  --bg-3:#f1eae1;
  --card-a:#ffffff;
  --card-b:#fbf5eb;
  --panel:rgba(124,92,255,.055);
  --panel-2:rgba(124,92,255,.1);
  --line:rgba(51,38,84,.1);
  --line-2:rgba(51,38,84,.18);

  /* --- ink: near-black with a purple cast --- */
  --ink:#221a35;
  --ink-2:#5d5573;
  --ink-3:#8b83a0;

  /* --- brand --- */
  --violet:#7c5cff;
  --pink:#ff4d94;
  --cyan:#0ea5b7;
  --amber:#e2960f;
  --grad:var(--violet);
  --grad-soft:rgba(124,92,255,.12);
  --grad-tri:var(--violet);

  /* --- geometry --- */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --r-pill:999px;
  --pad:clamp(18px,4.5vw,44px);
  --shell:1240px;

  /* --- depth: soft, warm-tinted shadows for a paper-and-ink feel --- */
  --lift-1:0 1px 0 #fff inset, 0 2px 6px rgba(56,32,90,.08);
  --lift-2:0 1px 0 #fff inset, 0 14px 30px -10px rgba(56,32,90,.14);
  --lift-3:0 1px 0 #fff inset, 0 32px 64px -20px rgba(56,32,90,.22), 0 8px 20px -10px rgba(56,32,90,.12);
  --glow-v:0 16px 38px -12px rgba(124,92,255,.5);
  --glow-p:0 16px 38px -12px rgba(124,92,255,.42);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur:.45s;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  min-height:100svh;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.65; color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
::selection{background:rgba(124,92,255,.25)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.028em;font-weight:800}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.85rem,4.2vw,3rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.6rem)}
p{text-wrap:pretty}

.grad-text{
  background:var(--grad-tri);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.6vw,1.18rem);max-width:60ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad)}

/* ---------- layout ---------- */
.shell{width:min(100% - var(--pad)*2,var(--shell));margin-inline:auto}
.section{padding-block:clamp(56px,9vw,116px);position:relative}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,46px);
}
.section-head .lede{margin-top:.6rem}
/* forces the description onto its own full-width line while the heading
   and the "See all" button stay paired on one line, even on narrow screens */
.section-head__desc{flex:1 1 100%;margin-top:.3rem}

/* ---------- glass surface ---------- */
.glass{
  background:linear-gradient(160deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

/* ---------- buttons: pressable, 3D ---------- */
.btn{
  --btn-bg:var(--panel);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.86rem 1.5rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;
  background:var(--btn-bg);border:1px solid var(--line-2);
  box-shadow:var(--lift-2);
  transform:translateZ(0);
  transition:transform .2s var(--ease-back),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:var(--lift-1)}
/* icons have no intrinsic size, so an inline-flex button with no rule here
   lets them balloon to a flex-basis:auto default instead of sitting small
   next to the label — always pin them down */
.btn svg{width:18px;height:18px;flex:none}

.btn--primary{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:var(--glow-v),0 1px 0 rgba(255,255,255,.35) inset;
}
.btn--primary:hover{box-shadow:0 24px 60px -18px rgba(124,92,255,.95),0 1px 0 rgba(255,255,255,.4) inset}
/* travelling sheen */
.btn--primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  background-size:250% 100%;background-position:180% 0;
  transition:background-position .8s var(--ease);
}
.btn--primary:hover::after{background-position:-60% 0}

.btn--ghost{background:transparent;border-color:var(--line-2)}
.btn--ghost:hover{background:var(--panel);border-color:rgba(124,92,255,.4)}
.btn--sm{padding:.58rem 1.05rem;font-size:.85rem}
.btn--lg{padding:1.05rem 2rem;font-size:1.02rem}
.btn--block{width:100%}

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.42rem .95rem;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:600;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line);
  transition:color .25s,background .25s,border-color .25s,transform .25s var(--ease-back);
}
.chip svg{width:14px;height:14px;flex:none}
.chip:hover{color:var(--ink);background:var(--panel-2);border-color:var(--line-2);transform:translateY(-2px)}
.chip[aria-pressed="true"],.chip.is-active{
  color:#fff;background:var(--grad);border-color:transparent;box-shadow:var(--glow-v)
}
.badge{
  display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;
  padding:.15rem .4rem;border-radius:var(--r-pill);
  font-size:.52rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(20,15,32,.6);border:1px solid rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(10px);
}
.badge--free{background:linear-gradient(135deg,#10b981,#22d3ee);border-color:transparent;color:#04120e}
.badge--hot{background:linear-gradient(135deg,#ff6a3d,#ff4d94);border-color:transparent;color:#fff}
.badge--new{background:linear-gradient(135deg,#7c5cff,#22d3ee);border-color:transparent;color:#fff}

/* ---------- page loader: inline in the HTML so it appears with zero JS
   delay, hidden by app.js once the first real render is actually on
   screen (see boot() in app.js) — a safety timeout there also force-hides
   it if something ever throws before reaching that point. ---------- */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--bg);
  transition:opacity .4s var(--ease),visibility .4s;
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-loader__mark img{width:44px;height:44px;border-radius:12px;display:block;animation:pageLoaderPulse 1.1s ease-in-out infinite}
@keyframes pageLoaderPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.55}}
.page-loader__bars{display:flex;gap:6px}
.page-loader__bars span{
  width:7px;height:7px;border-radius:50%;background:var(--violet);
  animation:pageLoaderDot 1s ease-in-out infinite;
}
.page-loader__bars span:nth-child(2){animation-delay:.15s}
.page-loader__bars span:nth-child(3){animation-delay:.3s}
@keyframes pageLoaderDot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-6px);opacity:1}}

/* ---------- ambience: soft pastel aurora + a whisper of paper grain ---------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.ambient__blob{
  position:absolute;border-radius:50%;filter:blur(130px);
  animation:drift 26s var(--ease) infinite alternate;
}
.ambient__blob--1{width:52vw;height:52vw;left:-16vw;top:-18vw;background:var(--violet);opacity:.24}
.ambient__blob--2{width:46vw;height:46vw;right:-14vw;top:4vh;background:var(--violet);opacity:.14;animation-delay:-9s}
.ambient__blob--3{width:42vw;height:42vw;left:20vw;top:64vh;background:var(--amber);opacity:.13;animation-delay:-17s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(6vw,-5vh,0) scale(1.18)}
}
.ambient__grain{
  position:absolute;inset:-200%;opacity:.02;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,4%)} 40%{transform:translate(4%,-2%)}
  60%{transform:translate(-2%,-4%)} 80%{transform:translate(3%,3%)}
}

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px) rotateX(7deg);
  transform-origin:50% 100%;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  background:var(--grad);color:#fff;font-weight:700;transition:top .25s var(--ease);
}
.skip-link:focus{top:16px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.muted{color:var(--ink-3)}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}