/* Shared custom styles for all SAS Digital Agency pages (data-terminal system).
   Theme tokens: :root = dark (default), @media (prefers-color-scheme: light) = light.
   Tailwind tokens (assets/tailwind-config.js) read the same variables, so the whole
   site follows the user's device theme automatically. */

:root {
  color-scheme: dark;
  /* RGB channels (for Tailwind alpha modifiers like text-body/80) */
  --c-bg:       11 10 8;
  --c-bg2:      16 14 10;
  --c-surface:  22 19 13;
  --c-surface2: 29 25 18;
  --c-cream:    239 233 220;
  --c-body:     198 190 174;
  --c-muted:    148 140 124;
  --c-gold:     255 122 46;
  --c-goldSoft: 255 138 61;
  --c-orange:   255 93 0;
  --c-orange2:  255 122 46;
  --c-ink:      255 255 255;   /* "white" washes: white on dark, ink on light */
  /* Composite values */
  --c-line:     rgba(232,214,178,.12);
  --line-strong:rgba(232,214,178,.22);
  --rule-from:  rgba(232,214,178,.35);
  --card-top:   rgba(255,246,232,.035);
  --card-btm:   rgba(255,246,232,.008);
  --card-shadow:0 30px 70px -40px rgba(255,93,0,.5);
  --pill-bg:    rgba(255,246,232,.03);
  --panel:      rgba(18,15,10,.86);   /* hero ROAS terminal */
  --modal:      rgba(18,15,10,.98);   /* call modal card */
  --grid-line:  rgba(232,214,178,.5); /* hero decorative grid */
  --glow-a: .32;                       /* .glow strength */
  --glow-b: .20;                       /* .glow-gold strength */
  --grain-o: .055;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --c-bg:       246 242 233;
    --c-bg2:      240 234 222;
    --c-surface:  252 250 244;
    --c-surface2: 241 234 220;
    --c-cream:    32 25 16;
    --c-body:     76 68 54;
    --c-muted:    107 98 80;
    --c-gold:     214 82 0;   /* крупные акценты: ~3.6:1 — ок для large text */
    --c-goldSoft: 190 74 0;   /* eyebrow-теги (11px): ~4.5:1 — держим AA */
    --c-orange:   245 90 0;
    --c-orange2:  214 82 0;
    --c-ink:      28 22 14;
    --c-line:     rgba(70,52,30,.15);
    --line-strong:rgba(70,52,30,.28);
    --rule-from:  rgba(70,52,30,.35);
    --card-top:   rgba(255,255,255,.78);
    --card-btm:   rgba(255,255,255,.40);
    --card-shadow:0 24px 48px -28px rgba(178,64,0,.28);
    --pill-bg:    rgba(255,255,255,.55);
    --panel:      rgba(252,250,244,.90);
    --modal:      rgba(252,250,244,.98);
    --grid-line:  rgba(70,52,30,.5);
    --glow-a: .18;
    --glow-b: .12;
    --grain-o: .04;
  }
  /* WebGL hero shader renders dark; invert+rotate brings it to warm paper with orange flow */
  :root:not([data-theme="dark"]) #shaderHero canvas { filter: invert(1) hue-rotate(190deg) saturate(1.15); }
}

/* Ручной выбор светлой темы (кнопка-переключатель) — переопределяет медиа-запрос */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: 246 242 233; --c-bg2: 240 234 222; --c-surface: 252 250 244; --c-surface2: 241 234 220;
  --c-cream: 32 25 16; --c-body: 76 68 54; --c-muted: 107 98 80;
  --c-gold: 214 82 0; --c-goldSoft: 190 74 0; --c-orange: 245 90 0; --c-orange2: 214 82 0; --c-ink: 28 22 14;
  --c-line: rgba(70,52,30,.15); --line-strong: rgba(70,52,30,.28); --rule-from: rgba(70,52,30,.35);
  --card-top: rgba(255,255,255,.78); --card-btm: rgba(255,255,255,.40); --card-shadow: 0 24px 48px -28px rgba(178,64,0,.28);
  --pill-bg: rgba(255,255,255,.55); --panel: rgba(252,250,244,.90); --modal: rgba(252,250,244,.98);
  --grid-line: rgba(70,52,30,.5); --glow-a: .18; --glow-b: .12; --grain-o: .04;
}
:root[data-theme="light"] #shaderHero canvas { filter: invert(1) hue-rotate(190deg) saturate(1.15); }

html { scroll-behavior:smooth; }
body { background:rgb(var(--c-bg)); color:rgb(var(--c-body)); font-family:'Onest',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:#FF5D00; color:#160A02; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid rgb(var(--c-gold)); outline-offset:3px; border-radius:6px;
}

/* Display face: Unbounded (class name kept as .font-serif) */
.font-serif { font-family:'Unbounded',sans-serif; letter-spacing:-0.02em; }
/* Data voice: monospace + tabular figures (data-terminal identity) */
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; }

/* Monospace section tag */
.eyebrow { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgb(var(--c-goldSoft)); font-weight:500; }
.rule { height:1px; background:linear-gradient(90deg,var(--rule-from),transparent); }

.gold-text { color:rgb(var(--c-gold)); }
.serif-italic { font-style:normal; }

/* Warm ambient glow (restrained) */
.glow { background:radial-gradient(closest-side,rgba(255,93,0,var(--glow-a)),rgba(255,93,0,0)); }
.glow-gold { background:radial-gradient(closest-side,rgba(255,122,46,var(--glow-b)),rgba(255,122,46,0)); }

.card {
  background:linear-gradient(180deg,var(--card-top),var(--card-btm));
  border:1px solid var(--c-line);
  border-radius:20px;
}
.card-hover { transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; }
.card-hover:hover { transform:translateY(-5px); border-color:rgba(255,122,46,.45); box-shadow:var(--card-shadow); }

.btn-primary {
  position:relative; background:linear-gradient(180deg,#FF7A2E,#FF5D00); color:#160A02; font-weight:700;
  box-shadow:0 16px 42px -14px rgba(255,93,0,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease, box-shadow .35s, filter .2s;
}
.btn-primary:hover { filter:brightness(1.05); box-shadow:0 24px 58px -16px rgba(255,93,0,.9), inset 0 1px 0 rgba(255,255,255,.4); }

.btn-ghost { border:1px solid var(--line-strong); color:rgb(var(--c-cream)); font-weight:600; transition:border-color .3s, background .3s, transform .25s; }
.btn-ghost:hover { border-color:rgba(255,122,46,.6); background:rgba(255,122,46,.06); }

.pill { border:1px solid var(--c-line); background:var(--pill-bg); }

/* Funnel bars: width from --w (home.js animates; static fallback for pages without it) */
.funbar { width: var(--w, 100%); }

/* Client logo wall — прозрачные плитки, приглушены, полный цвет по наведению */
.logo-tile img { opacity: .82; transition: opacity .3s ease, transform .3s ease; }
.logo-tile:hover img { opacity: 1; transform: scale(1.04); }

/* film grain */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--grain-o); mix-blend-mode:overlay; z-index:1;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.marquee { display:flex; gap:3rem; width:max-content; animation:scroll 40s linear infinite; }
@keyframes scroll { to { transform:translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state:paused; }

/* Motion primitives (JS-driven; safe defaults if no JS/motion) */
.anim { opacity:0; }
.anim-up { opacity:0; transform:translateY(28px); }
.line-mask { display:block; overflow:hidden; }
.line-mask > span { display:block; will-change:transform; }

.ring { animation:spin 44s linear infinite; transform-origin:center; }
@keyframes spin { to { transform:rotate(360deg); } }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .faq-plus { transform:rotate(45deg); }

/* Mobile snap carousel */
.snap-x { scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.snap-x > * { scroll-snap-align:center; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .anim, .anim-up { opacity:1 !important; transform:none !important; }
  .line-mask > span { transform:none !important; }
}

/* Print (media-plan «Скачать PDF» → печать в PDF браузером). Тема принудительно светлая. */
@media print {
  :root {
    --c-bg:255 255 255; --c-bg2:255 255 255; --c-surface:255 255 255; --c-surface2:255 255 255;
    --c-cream:17 17 17; --c-body:34 34 34; --c-muted:90 90 90; --c-ink:0 0 0;
    --c-gold:190 74 0; --c-goldSoft:190 74 0; --c-orange:210 78 0; --c-orange2:190 74 0;
    --c-line:rgba(0,0,0,.2); --line-strong:rgba(0,0,0,.3); --rule-from:rgba(0,0,0,.3);
    --card-top:#fff; --card-btm:#fff; --card-shadow:none; --pill-bg:#fff;
    --glow-a:0; --glow-b:0; --grain-o:0;
  }
  #site-header, #site-footer, [data-noprint], .grain::before { display:none !important; }
  body { background:#fff !important; }
  .card { box-shadow:none !important; border:1px solid rgba(0,0,0,.2) !important; }
  .mp-input { border-color:transparent !important; background:transparent !important; padding-left:0 !important; padding-right:0 !important; }
  main { padding-top:0 !important; }
  a[href]::after { content:""; }
}

/* Calculator (/calc/) helpers */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { opacity:.35; }
.seg-btn { transition:background .2s, color .2s, border-color .2s; }
.seg-btn[aria-pressed="true"], .seg-btn.is-active { background:#FF5D00; color:#160A02; border-color:transparent; font-weight:600; }
.field-in { font-variant-numeric:tabular-nums; }