/* Soulkeep landing — styles from "Soulkeep Site v2" design (verbatim). */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 92px; }
  body { margin: 0; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: rgba(168,85,247,0.28); }
  :root {
    --bg:#0a090e; --bg2:#0e0d13; --elev:#131118; --elev2:#17151e;
    --ink:#eeecf3; --muted:#9c98ab; --faint:#615d70; --line:rgba(255,255,255,0.10); --line2:rgba(255,255,255,0.055);
    --nav:rgba(10,9,14,0.6); --grain:0.05; --glow:0.5; --inv-bg:#f4f2ee; --inv-ink:#141019;
    color-scheme: dark;
  }
  [data-theme="light"] {
    --bg:#f3f1ea; --bg2:#f8f6f0; --elev:#fffdf8; --elev2:#fbf9f3;
    --ink:#171320; --muted:#57516a; --faint:#948da4; --line:rgba(20,16,30,0.14); --line2:rgba(20,16,30,0.07);
    --nav:rgba(246,244,238,0.68); --grain:0.045; --glow:0.34; --inv-bg:#161019; --inv-ink:#f2efe9;
    color-scheme: light;
  }
  [data-reveal]{ transition: opacity 1s cubic-bezier(.2,.7,.15,1), transform 1s cubic-bezier(.2,.7,.15,1); }
  [data-rr] [data-reveal]{ opacity:0; transform:translateY(26px); }
  @keyframes glowbreath { 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:var(--glow) } 50%{ transform:translate(-50%,-50%) scale(1.16); opacity:calc(var(--glow) * 1.35) } }
  @keyframes floatslow { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
  @keyframes linegrow { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  @keyframes spin { to { transform:rotate(360deg) } }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important } }

/* theme-conditional bits (replaces the design's <sc-if isDark/isLight>) */
[data-theme="dark"] .sk-when-light { display: none; }
[data-theme="light"] .sk-when-dark { display: none; }

/* ============================================================
   Landing — responsive breakpoints.
   The design was authored desktop-only: every section uses a fixed
   multi-column grid via inline styles, so on tablet/phone the columns
   were forced to their content's min-width, overflowed the viewport
   and clipped the text. Below we collapse each grid on narrower
   screens. Desktop (>768px) is left exactly as designed.
   Inline styles win over the stylesheet, so overrides use !important.
   ============================================================ */

/* ---- Tablet (<=768px): 4- and 3-column grids drop to 2, 2-col spreads stack ---- */
@media (max-width: 768px) {
  /* Гарантии (3 -> 2) */
  .sk-guard-grid { grid-template-columns: 1fr 1fr !important; }
  /* Тарифы (4 -> 2) */
  .sk-pricing-grid { grid-template-columns: 1fr 1fr !important; }
  /* Принципы (3 -> 2) */
  .sk-principles-grid { grid-template-columns: 1fr 1fr !important; }
  /* Образец: text | chat-card -> stacked */
  .sk-split { grid-template-columns: 1fr !important; }
  /* Footer (4 -> 2, brand block spans the full row) */
  .sk-footer-grid { grid-template-columns: 1fr 1fr !important; }
  .sk-footer-grid > div:first-child { grid-column: 1 / -1 !important; }
}

/* ---- Small tablet / large phone (<=560px) ---- */
@media (max-width: 560px) {
  /* Продукт: 2x2 cards -> single column */
  .sk-product-grid { grid-template-columns: 1fr !important; }
  /* Процесс: title | paragraph -> stacked, tighten the number gutter */
  .sk-steps > div { grid-template-columns: 44px 1fr !important; }
  .sk-steps > div > div:last-child { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ---- Phone (<=480px): everything to a single column ---- */
@media (max-width: 480px) {
  .sk-guard-grid,
  .sk-pricing-grid,
  .sk-principles-grid,
  .sk-footer-grid { grid-template-columns: 1fr !important; }
}

/* ---- Nav: keep the header on one row on phones.
   The centre particle-wave is decorative — hide it and tighten spacing so
   the logo + theme toggle + CTA never overflow (they were clipped <=414px). */
@media (max-width: 560px) {
  .sk-nav-row { padding: 0 16px !important; gap: 12px !important; }
  .sk-nav-wave { display: none !important; }
}
@media (max-width: 380px) {
  .sk-nav-row { padding: 0 14px !important; gap: 10px !important; }
  .sk-nav-cta { padding: 9px 13px !important; font-size: 12.5px !important; }
  .sk-brand-name { font-size: 18px !important; }
}