/* ============================================================
   Octomatica — Design System  ·  "Свежий" (Fresh / Light)
   Octopus-green brand, warm paper neutrals, modern Russian type.
   Light by default · dark + accent variants for Tweaks.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Onest:wght@300;400;500;600;700;800&family=Golos+Text:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens : LIGHT (default) ---------- */
:root {
  /* surfaces — clean near-white, faint cool-green tint */
  --paper:      #FAFBFA;   /* page canvas */
  --paper-2:    #F1F4F2;   /* deeper bands */
  --surface:    #FFFFFF;   /* cards */
  --surface-2:  #F7F9F8;   /* subtle card */
  --ink:        #0F1613;   /* near-black, green-tinted */
  --ink-2:      #46514B;   /* secondary text */
  --ink-3:      #7E8A83;   /* muted text */
  --line:       #EAEDEB;   /* hairlines */
  --line-2:     #DBDFDC;   /* stronger hairlines */
  --line-strong:#0F1613;   /* ink lines */

  /* brand accent (emerald) */
  --accent:        #0E9F6E;
  --accent-bright: #14B981;
  --accent-deep:   #0A7351;
  --accent-soft:   #DEF3E8;   /* tint panels */
  --accent-softer: #EDF8F1;
  --accent-on:     #FFFFFF;   /* text on accent */
  --glow:          rgba(20,185,129,0.22);
  --glow-2:        rgba(20,185,129,0.10);

  /* sticker accent hues (used sparingly) */
  --c-coral:  #F0714F;
  --c-blue:   #4F84E6;
  --c-amber:  #EBA033;
  --c-purple: #9B7BF0;
  --c-teal:   #1FA8A0;
  --c-pink:   #E867A6;

  /* type */
  --font-display: 'Geologica', system-ui, sans-serif;
  --font-sans:    'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(16,24,15,.05), 0 2px 8px rgba(16,24,15,.04);
  --sh-md: 0 4px 14px rgba(16,24,15,.06), 0 14px 36px -10px rgba(16,24,15,.10);
  --sh-lg: 0 8px 24px rgba(16,24,15,.08), 0 30px 70px -20px rgba(16,24,15,.16);
  --sh-glow: 0 14px 40px -10px var(--glow);

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);

  --maxw: 1160px;
  --nav-h: 62px;
}

/* alt font pairings (Tweak) */
:root[data-fonts="manrope"] {
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, sans-serif;
}
:root[data-fonts="golos"] {
  --font-display: 'Golos Text', system-ui, sans-serif;
  --font-sans:    'Golos Text', system-ui, sans-serif;
}

/* ---------- Accent variants (Tweak) ---------- */
:root[data-accent="ocean"] {
  --accent: #1487C9; --accent-bright:#27A3E0; --accent-deep:#0C6299;
  --accent-soft:#DCEFFA; --accent-softer:#EBF6FC; --glow:rgba(39,163,224,.24); --glow-2:rgba(39,163,224,.10);
}
:root[data-accent="sunset"] {
  --accent: #E5663B; --accent-bright:#F47A4E; --accent-deep:#BC4C28;
  --accent-soft:#FBE6DC; --accent-softer:#FDF0EA; --glow:rgba(244,122,78,.24); --glow-2:rgba(244,122,78,.10);
}
:root[data-accent="grape"] {
  --accent: #7C5CE0; --accent-bright:#946EF2; --accent-deep:#5E40B8;
  --accent-soft:#E8E1FB; --accent-softer:#F2EEFC; --glow:rgba(148,110,242,.24); --glow-2:rgba(148,110,242,.10);
}

/* ---------- Tokens : DARK (Tweak) ---------- */
:root[data-theme="dark"] {
  --paper:      #0B0E0C;
  --paper-2:    #0F1311;
  --surface:    #161B18;
  --surface-2:  #1B201D;
  --ink:        #F1F4F2;
  --ink-2:      #AAB4AE;
  --ink-3:      #6E7A73;
  --line:       #262E29;
  --line-2:     #313A34;
  --line-strong:#F1F4F2;
  --accent-soft:  rgba(20,185,129,.12);
  --accent-softer:rgba(20,185,129,.07);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 10px 30px -8px rgba(0,0,0,.5);
  --sh-lg: 0 20px 60px -20px rgba(0,0,0,.65);
}
:root[data-theme="dark"][data-accent="emerald"], :root[data-theme="dark"]:not([data-accent]) {
  --accent: #16C586; --accent-bright:#34D9A0; --accent-deep:#0E9F6E;
}

/* ============================================================ */
* { box-sizing: border-box; }
html { font-size: 93.75%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .4s var(--ease), color .3s var(--ease);
}
::selection { background: var(--accent-soft); color: var(--accent-deep); }
:root[data-theme="dark"] ::selection { background: rgba(20,185,129,.3); color:#fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1340px; }
.section { padding: 80px 0; position: relative; }
.section-sm { padding: 56px 0; }
/* offset anchored sections so the fixed navbar doesn't cover their heading */
section[id], header[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

@media (max-width: 760px) {
  .section { padding: 54px 0; }
  .wrap { padding: 0 20px; }
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 9px;
}
:root[data-theme="dark"] .eyebrow { color: var(--accent-bright); }
.eyebrow::before {
  content:''; width: 16px; height: 1.5px; background: currentColor; opacity:.6;
}
.eyebrow.no-tick::before { display:none; }

h1,h2,h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
.display {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.0; letter-spacing: -.035em;
}
.h-sec { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.lead { font-size: clamp(1rem, 1.3vw, 1.14rem); color: var(--ink-2); line-height: 1.55; font-weight: 400; }
.muted { color: var(--ink-3); }
.accent-text { color: var(--accent-deep); }
:root[data-theme="dark"] .accent-text { color: var(--accent-bright); }

.section-head { max-width: 760px; }
.section-head .h-sec { margin-top: 14px; }
.section-head .lead { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content:center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
  padding: 12px 22px; border-radius: var(--r-pill);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--sh-glow); }
.btn-primary:hover { background: var(--accent-bright); box-shadow: 0 18px 50px -10px var(--glow); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-soft { background: var(--accent-soft); color: var(--accent-deep); }
.btn-soft:hover { background: var(--accent-softer); transform: translateY(-2px); }
:root[data-theme="dark"] .btn-soft { color: var(--accent-bright); }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); }

/* ---------- Chips / pills ---------- */
.pill {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:600; padding:7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.pill-dot { width:7px; height:7px; border-radius:50%; background: var(--accent); }
.pill-dot.live { animation: pulse 1.8s infinite; box-shadow:0 0 0 0 var(--glow); }

/* ---------- Textures / glows ---------- */
.glow-orb { position:absolute; border-radius:50%; filter: blur(60px); pointer-events:none; z-index:0; }
.dotgrid {
  background-image: radial-gradient(var(--line-2) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
}
.gridlines {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}.reveal[data-d="6"]{transition-delay:.42s}

/* ---------- Animations ---------- */
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--glow)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatX { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(8px,-12px) rotate(3deg)} }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(40px,-30px)} 66%{transform:translate(-20px,24px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-44px,22px)} 66%{transform:translate(30px,-30px)} }
@keyframes blink { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.1)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
@keyframes typedots { 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
@keyframes dash { to { stroke-dashoffset: 0; } }

.float { animation: float 6s var(--ease) infinite; }
.spin-slow { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

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