/* ═══════════════════════════════════════════════════════════════════════
   Smart Post Studio — shared site theme  ("v9 two-routes" dark)
   Created 2026-08-03. Replaces the per-page duplicated CSS.

   WHY THIS FILE EXISTS
   Every page used to carry its own copy of the same ~11 KB of tokens and
   chrome — about 134 KB duplicated across 12 pages, and a theme change
   meant editing 19 files. This is now the single place.

   HOW THE CONVERSION WORKS
   The pages were already token-driven (50-ish var(--…) references each),
   and the token NAMES are unchanged from the old cream theme. So flipping
   the site dark is mostly a matter of redefining the values here and
   deleting each page's local :root. Page-specific rules keep working.

   NOT DARK: the blog. Long-form reading on a dark background measurably
   slows people down, so /blog keeps assets/blog-styles.css (cream). Do
   not link this file there.

   COLOUR SYSTEM
     pink / yellow   brand + typography (gradient headlines, accents)
     orange          the web-app route — via our cloud
     blue            the desktop route — direct to the platform
     yellow          the eight platforms
     green           data in flight, and success states
   Pink is deliberately absent from the product diagram so it can carry
   the brand voice without colliding with the four functional colours.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ─────────────────────────────────────────────── */
  --bg:        #07070A;
  --bg-2:      #0E0E13;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --surface-3: rgba(255,255,255,.028);
  --border:    rgba(255,255,255,.09);
  --border-h:  rgba(255,61,138,.42);

  /* ── ink ──────────────────────────────────────────────────── */
  --text:      #F4F3F7;
  --headline:  #FFFFFF;
  --sub:       rgba(244,243,247,.68);
  --dim:       rgba(244,243,247,.42);

  /* ── brand (unchanged from the original concept) ──────────── */
  --pink:      #ff3d8a;
  --yellow:    #ffd640;
  --orange:    #ff8a3c;
  /* Stops are biased so the sweep reads PINK, not orange. A plain
     #ff3d8a -> #ffd640 ramp spends only 43% of its length in the pink
     band and 58% in orange/red — and orange now means "the web route"
     in the product diagram, so the brand was competing with a colour
     that carries meaning. Holding pink to 72% puts it at 83% pink and
     keeps the yellow as a tip. Same two brand colours, different pacing. */
  --grad:      linear-gradient(135deg,#ff3d8a 0%,#ff5c9a 72%,#ffa262 88%,#ffd640 100%);
  --grad-soft: linear-gradient(135deg,rgba(255,61,138,.16) 0%,rgba(255,92,154,.13) 72%,rgba(255,214,64,.10) 100%);

  /* ── functional (the product diagram) ─────────────────────── */
  --web:  #FF7A18;
  --desk: #2E9BFF;
  --plat: #FFD640;
  --data: #37F58F;
  --green:#31D07E;
  /* error / required-field. The old light theme used #dc2626, which manages
     only 4.17:1 on #07070A and fails AA. Lightened to 7.25:1. */
  --red:  #ff6b6b;

  --ease-out: cubic-bezier(.23,1,.32,1);
  --radius: 16px;
}

/* ═══════════════ base ═══════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  line-height:1.55;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  color:var(--headline);letter-spacing:-.025em;line-height:1.12}
a{color:var(--text)}
::selection{background:rgba(255,61,138,.32);color:#fff}
img{max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* gradient type — the payoff half of a headline */
.grad-text{background:var(--grad);background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
@supports not (background-clip:text){
  .grad-text{color:var(--pink);-webkit-text-fill-color:var(--pink)}
}

/* ═══════════════ ambient blobs ═══════════════
   On cream these were near-white bloom. On #07070A they have to be far
   dimmer or they wash the whole page grey. */
.blobs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;width:720px;height:720px;border-radius:50%;
  filter:blur(80px);will-change:transform;opacity:.5}
.blob.pink  {top:-14%;left:-12%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,61,138,.20) 0%,transparent 70%)}
.blob.orange{top:18%;right:-16%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,122,24,.16) 0%,transparent 70%)}
.blob.yellow{bottom:-12%;left:24%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,214,64,.11) 0%,transparent 70%)}

/* ═══════════════ nav ═══════════════ */
nav.top{position:sticky;top:0;z-index:50;
  background:rgba(7,7,10,.66);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color 200ms var(--ease-out)}
nav.top.scrolled{border-bottom-color:var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--headline)}
.logo-mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo-text{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--headline)}
.nav-links{display:none;align-items:center;gap:28px}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{color:var(--sub);text-decoration:none;font-size:14.5px;font-weight:500;
  transition:color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--headline)}}

/* ═══════════════ buttons ═══════════════ */
/* position + overflow are REQUIRED: the hover sheen below is an ::after that
   would otherwise position against a distant ancestor and streak across the
   page instead of crossing the button. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;
  text-decoration:none;white-space:nowrap;
  transition:transform 120ms var(--ease-out),background 180ms var(--ease-out),
             border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.btn:active{transform:scale(.97)}

/* ── hover sheen ──────────────────────────────────────────────────────
   Animates TRANSFORM, not `left`. The original used `left:-100% -> 120%`,
   which forces layout on every frame — that was the stutter. transform
   runs on the compositor and stays smooth on a phone. */
.btn::after{content:"";position:absolute;top:0;left:0;width:70%;height:100%;
  pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-160%);
  transition:transform 620ms var(--ease-out)}
/* dimmer on dark buttons — .38 white blows out against a near-black fill */
.btn-secondary::after,.btn-ghost::after{
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:translateX(240%)}
}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(255,61,138,.30)}
.btn-secondary{background:var(--surface);color:var(--headline);border-color:var(--border)}
.btn-sm{padding:10px 18px;font-size:13.5px}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{box-shadow:0 10px 38px rgba(255,61,138,.44)}
  .btn-secondary:hover{background:var(--surface-2);border-color:var(--border-h)}
}

/* ═══════════════ eyebrow / pill ═══════════════ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);
  font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.02em}

/* ═══════════════ footer ═══════════════ */
footer{border-top:1px solid var(--border);background:var(--bg-2);
  color:var(--dim);font-size:13.5px;padding:34px 0 56px}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:var(--dim);text-decoration:none;transition:color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.footer-links a:hover{color:var(--text)}}

/* ═══════════════ accessibility ═══════════════ */
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  *{scroll-behavior:auto}
  .btn{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  nav.top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .blobs{display:none}
}
@media (prefers-contrast:more){
  :root{--border:rgba(255,255,255,.30);--sub:rgba(244,243,247,.92);--dim:rgba(244,243,247,.75)}
  .blobs{display:none}
}

/* ═══════════════ v3 glass pass — 2026-08-14 ═══════════════
   Gentle glow + glassy surfaces, matching the app's own UI.
   Cards become translucent with backdrop blur so the ambient
   blobs glow through them; a 1px top highlight sells the glass
   edge; hover adds a soft pink bloom. Guarded three ways:
   @supports (fallback = current solid surfaces), width ≥760px
   (blur is a GPU cost phones don't need to pay), and the
   prefers-reduced-transparency block below. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 760px) {
    .door, .bene-card, .bene-card, .s-points li, .s-price,
    .tier, .promise, .faq-item, .prodshot-frame {
      background: rgba(255, 255, 255, 0.032);
      backdrop-filter: blur(14px) saturate(1.15);
      -webkit-backdrop-filter: blur(14px) saturate(1.15);
      border-color: rgba(255, 255, 255, 0.09);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055),
                  0 10px 34px rgba(0, 0, 0, 0.35);
    }
    .prodshot-frame {
      /* keep its deeper base + pink halo, add the glass edge */
      background: rgba(11, 11, 17, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055),
                  0 30px 80px rgba(0, 0, 0, 0.55),
                  0 0 56px rgba(255, 61, 138, 0.11);
    }
  }
}
@media (hover:hover) and (pointer:fine) {
  .door:hover, .bene-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075),
                0 14px 40px rgba(0, 0, 0, 0.4),
                0 0 44px rgba(255, 61, 138, 0.10);
  }
}
@media (prefers-reduced-transparency:reduce) {
  .door, .bene-card, .s-points li, .s-price, .tier, .promise, .faq-item {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}