/* ============================================================
   Skedly landing — design tokens & component styles
   Ported from the Claude Design prototype (Skedly.dc.html).
   ============================================================ */

:root{
  --bg:#FAFAF8; --bg2:#F1F1FA; --surface:#FFFFFF; --surface2:#FBFBFE;
  --text:#1A1A2E; --muted:#65657A; --faint:#9A9AAE;
  --brand:#4F46E5; --brand2:#6366F1; --brand-soft:#ECECFB; --brand-shadow:rgba(79,70,229,.26);
  --cta:#FF6B4A; --cta-shadow:rgba(255,107,74,.34);
  --success:#10B981; --success-soft:#E6F8F1;
  --border:rgba(20,20,46,.09); --border2:rgba(20,20,46,.05);
  --tg:#2AABEE; --tg-bubble:#EAF4FF;
  --shadow:0 4px 22px rgba(20,20,46,.07); --shadow-lg:0 24px 60px rgba(20,20,46,.13);
  --radius:24px; --radius-sm:16px;
}
[data-cta="green"]{ --cta:#16A34A; --cta-shadow:rgba(22,163,74,.30); }
[data-cta="indigo"]{ --cta:#4F46E5; --cta-shadow:rgba(79,70,229,.32); }
[data-cta="violet"]{ --cta:#7C3AED; --cta-shadow:rgba(124,58,237,.32); }
[data-cta="telegram"]{ --cta:#229ED9; --cta-shadow:rgba(42,171,238,.36); }

[data-theme="dark"]{
  --bg:#100F1C; --bg2:#181630; --surface:#1D1B33; --surface2:#231F40;
  --text:#F1F0FA; --muted:#A8A6C0; --faint:#7A788F;
  --brand:#8B86FF; --brand2:#A29CFF; --brand-soft:#262348; --brand-shadow:rgba(139,134,255,.28);
  --cta:#FF7A5C; --cta-shadow:rgba(255,122,92,.32);
  --success:#34D399; --success-soft:#13322A;
  --border:rgba(255,255,255,.11); --border2:rgba(255,255,255,.06);
  --tg-bubble:#23314A;
  --shadow:0 4px 26px rgba(0,0,0,.42); --shadow-lg:0 28px 64px rgba(0,0,0,.55);
}
[data-theme="dark"][data-cta="green"]{ --cta:#22C55E; --cta-shadow:rgba(34,197,94,.3); }
[data-theme="dark"][data-cta="indigo"]{ --cta:#8B86FF; --cta-shadow:rgba(139,134,255,.32); }
[data-theme="dark"][data-cta="violet"]{ --cta:#A78BFA; --cta-shadow:rgba(167,139,250,.32); }
[data-theme="dark"][data-cta="telegram"]{ --cta:#3AA9E0; --cta-shadow:rgba(58,169,224,.34); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); }
::selection{ background:var(--brand); color:#fff; }
[hidden]{ display:none !important; }

/* ── keyframes used by the page ─────────────────────────── */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(-3deg); } }
@keyframes arrowNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }

/* ── CTA buttons ────────────────────────────────────────── */
.btn-cta{ transition:transform .16s ease, box-shadow .16s ease; }
.btn-cta-lift:hover{ transform:translateY(-2px); box-shadow:0 16px 36px var(--cta-shadow); }
.btn-cta-final:hover{ transform:translateY(-2px) scale(1.01); }
.hdr-cta{ display:none; }

/* ── theme toggle icons ─────────────────────────────────── */
.ic-sun{ display:none; }
.ic-moon{ display:block; }
[data-theme="dark"] .ic-sun{ display:block; }
[data-theme="dark"] .ic-moon{ display:none; }

/* ── language dropdown ──────────────────────────────────── */
.lang-caret{ transition:transform .2s ease; }
[data-action="toggle-lang"][aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }
.lang-opt{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:9px; padding:9px 11px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text);
}
.lang-opt.active{ background:var(--brand-soft); color:var(--brand); }
.lang-check{ display:none; }
.lang-opt.active .lang-check{ display:block; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-q[aria-expanded="true"] .faq-caret{ transform:rotate(180deg); }

/* ── footer links ───────────────────────────────────────── */
.foot-link{ transition:color .15s ease; }
.foot-link:hover{ color:var(--text); }

/* ── legal pages (privacy / terms) ──────────────────────── */
.legal h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,6vw,42px); letter-spacing:-.025em; margin:0 0 4px; color:var(--text); }
.legal .legal-meta{ color:var(--faint); font-size:13.5px; margin:0 0 26px; }
.legal h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.01em; margin:30px 0 10px; color:var(--text); }
.legal p{ font-size:15px; color:var(--muted); line-height:1.7; margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.legal li{ font-size:15px; color:var(--muted); line-height:1.6; }
.legal b{ color:var(--text); }
.legal a{ color:var(--brand); text-decoration:none; word-break:break-word; }
.legal a:hover{ text-decoration:underline; }
.legal code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:var(--brand-soft); color:var(--brand); padding:1px 6px; border-radius:6px; word-break:break-word; }

/* ── responsive (desktop) ───────────────────────────────── */
@media (min-width:760px){
  .hero-grid{ grid-template-columns:1.05fr .95fr !important; gap:48px !important; }
  .three-col{ grid-template-columns:repeat(3,1fr) !important; }
  .priv-grid{ grid-template-columns:.85fr 1.15fr !important; padding:40px 44px !important; }
  .ba-grid{ grid-template-columns:1fr auto 1fr !important; }
  .ba-arrow{ transform:none; }
  .hdr-cta{ display:inline-flex !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
}