/* ============================================================================
   Vaios brand theme — premium dark. Layered on top of style.css + tokens.css
   by the public marketing pages (index, demo, faq). Link order MUST be
   style.css → tokens.css → theme.css so these vars win the cascade.

   setup.html deliberately links ONLY style.css and stays on the barbershop-red
   default — do NOT fold this palette into style.css or it will repaint setup.
   ========================================================================== */

/* ---- Map brand tokens onto the component variables style.css already uses.
   This single block flips the whole site (buttons, cards, borders, benefits,
   faq, footer …) to dark — every component reads these names. --------------- */
:root{
  --bg:        var(--c-bg);
  --ink:       var(--c-ink);
  --muted:     var(--c-muted);
  --line:      var(--c-border);
  --card:      var(--c-surface);
  --accent:    var(--c-blue);     /* bright interactive accent */
  --accent-dk: var(--c-link);     /* readable links / secondary on dark */
}

body{ background:var(--c-bg); color:var(--c-ink); }
a{ color:var(--c-link); transition:var(--transition); }
a:hover{ color:var(--c-blue); }

/* generous whitespace on dark */
section{ padding:var(--sp-16) 0; }
h1,h2,h3{ font-family:var(--font-serif); }

/* wordmark doubles as the home link */
a.wordmark{ text-decoration:none; color:var(--c-blue); }
a.wordmark:hover{ opacity:.82; color:var(--c-blue); }

/* logo brand mark — the gradient V glyph + the AIOS wordmark, read as one word
   (V·AIOS), centred above the hero. font-size drives both halves: the mark is
   sized in em to the font's cap height and baseline-aligned, so the V sits on
   the same baseline as the letters. */
.brandmark{
  display:flex; align-items:baseline; justify-content:center;
  font-size:clamp(48px,8.5vw,76px); line-height:1;
  text-decoration:none; margin-bottom:var(--sp-6);
}
.brandmark img{
  height:.75em; width:auto; display:block;   /* ≈ cap height of the wordmark */
  filter:drop-shadow(0 6px 22px rgba(115,87,255,.30));
  transition:var(--transition);
}
.brandmark .word{
  font-family:var(--font-sans); font-weight:600; letter-spacing:.15em;
  color:var(--c-ink); transition:var(--transition);
  margin-left:.02em;    /* V/A gap — matches the letter tracking */
  margin-right:-.15em;  /* cancel the trailing letter-space so it stays centred */
}
/* the AI inside the wordmark carries the brand gradient — v·AI·os */
.brandmark .ai{
  background:linear-gradient(95deg,#1677FF 0%,#7357FF 62%,#A64BFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.brandmark:hover img{ transform:translateY(-1px); }
.brandmark:hover .word{ opacity:.9; }

/* ---- Thin gradient rule at the very top (decorative brand gradient) ------ */
.topbar{ height:3px; background:var(--grad-brand); }

/* ---- Highlighted word — the only place the full gradient touches type ---- */
.hl{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* =============================== Buttons ================================== */
.btn{
  border-radius:var(--r-md);
  border:1px solid var(--c-border);
  transition:var(--transition);
  will-change:transform;
}
.btn-lg{ font-size:1.05rem; padding:16px 30px; }

.btn-primary{
  background:var(--grad-cta);
  color:#fff;
  border:none;
  font-weight:800;
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{
  background:var(--grad-cta);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--shadow-cta-hover);
  filter:brightness(1.05);
}

.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--c-ink);
  border:1px solid var(--c-border);
}
.btn-ghost:hover{
  background:rgba(0,200,255,.06);
  border-color:var(--c-blue);
  color:var(--c-ink);
}

/* =============================== Feature list ============================= */
/* minimal line icons, white titles, muted descriptions, thin dividers */
.benefits li{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  padding:var(--sp-5) 0; border-top:1px solid var(--c-border);
}
.benefits li::before{ display:none; }           /* drop the old square bullet */
.benefits .ic{
  flex:none; width:34px; height:34px; color:var(--c-blue);
  display:flex; align-items:center; justify-content:center;
}
.benefits .ic svg{ width:26px; height:26px; }
.benefits strong{ color:var(--c-ink); }
.benefits span{ color:var(--c-muted); }

/* =============================== Emphasis callout ======================== */
/* stronger visual weight for the "Call it. Try to trip it up." section */
.callout{
  position:relative; overflow:hidden;
  background:var(--c-bg-elev);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-6);
  box-shadow:var(--shadow-md);
}
.callout::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--grad-brand);
}
.callout .eyebrow{ margin-top:0; }

/* =============================== Hero ==================================== */
.hero{ position:relative; overflow:hidden; padding-top:var(--sp-16); padding-bottom:var(--sp-16); }
/* The hero is centred as a block. The brand lockup is centred, and a centred
   lockup sitting over left-aligned copy reads as skewed even when it is
   geometrically dead-centre — so the headline, lead, and buttons share its axis.
   .lead carries a max-width, hence the auto margins. */
.hero .wrap{ position:relative; z-index:1; text-align:center; }
.hero .lead{ margin-left:auto; margin-right:auto; }
.hero .cta{ justify-content:center; }
.hero-glow{
  position:absolute; inset:-25% -10% auto -10%; height:75%;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(22,119,255,.22), rgba(115,87,255,.10) 45%, transparent 70%);
  pointer-events:none;
}
/* abstract audio waveform — bars injected by site.js, purely decorative */
.hero-wave{
  position:absolute; left:0; right:0; bottom:0; height:110px;
  display:flex; align-items:flex-end; justify-content:center; gap:4px;
  padding:0 14px; opacity:.13; pointer-events:none; overflow:hidden;
}
.hero-wave i{
  flex:1 1 6px; min-width:3px; max-width:8px; height:20%;
  border-radius:3px 3px 0 0; background:var(--grad-brand);
  transform-origin:bottom; animation:wave 1.8s var(--ease) infinite;
}
@keyframes wave{ 0%,100%{ transform:scaleY(.28); } 50%{ transform:scaleY(1); } }

/* =============================== Media grids ============================= */
/* shared by the demo library (Hear) and Instagram (See) sections */
.demo-grid,.ig-grid{ display:grid; gap:var(--sp-4); margin-top:var(--sp-6); }
@media (min-width:560px){
  .demo-grid{ grid-template-columns:repeat(2,1fr); }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
}

.media-card,.ig-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); overflow:hidden; transition:var(--transition);
}
.media-card:hover,.ig-card:hover{
  transform:translateY(-3px); border-color:var(--c-purple);
  box-shadow:var(--shadow-md);
}

/* demo card — poster thumbnail with a play glyph */
.media-thumb{
  position:relative; aspect-ratio:16/10; background-size:cover;
  background-position:center; background-color:var(--c-bg-elev);
}
.media-thumb .play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--grad-cta); color:#fff;
  font-size:18px; box-shadow:var(--shadow-cta);
}
.media-meta{ padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.media-meta strong{ display:block; color:var(--c-ink); font-weight:700; }
.media-meta span{ display:block; color:var(--c-muted); font-size:.95rem; margin-top:4px; }

/* instagram card — square image with a restrained placeholder, caption below.
   When the image 404s (not yet uploaded) a subtle dark tile + brand ring shows
   instead of a loud gradient block, so a pre-image deploy still looks intentional. */
.ig-img{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#141b30 0%,#0b1020 100%);
}
.ig-img::after{                                    /* placeholder mark (covered by a loaded photo) */
  content:""; position:absolute; inset:0; margin:auto; width:40px; height:40px;
  border-radius:12px; border:2px solid rgba(157,176,255,.22);
}
.ig-img img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.ig-img img.missing{ display:none; }
.ig-cap{
  color:var(--c-muted); font-size:.92rem; line-height:1.5;
  padding:var(--sp-3) var(--sp-4) var(--sp-4); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =============================== Footer ================================== */
.foot-nav a[rel~="me"]{ color:var(--c-link); }
.foot-nav a[rel~="me"]:hover{ color:var(--c-blue); }

/* =============================== Focus states =========================== */
/* visible, brand-coloured keyboard focus everywhere interactive */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-sm);
}

/* =============================== Reduced motion ========================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-wave i{ animation:none; height:42%; transform:none; }
  .btn-primary:hover,.media-card:hover,.ig-card:hover{ transform:none; }
}