/* =========================================================
   RingMate — Marketing Site Styles
   Design language: Modern Claymorphism + Material 3 Expressive
   Source of truth: RingMate PRD v1.0
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand color tokens (from PRD) ---- */
  --c-indigo: #5B5FEF;      /* Primary — Royal Indigo */
  --c-indigo-soft: #7C83FD; /* Secondary — Soft Indigo */
  --c-purple: #8B5CF6;      /* Accent — Soft Purple */
  --c-bg: #F5F7FB;          /* Background — Cloud White */
  --c-surface: #FFFFFF;     /* Surface — Pure White */
  --c-card: #EEF2F8;        /* Card Surface — Soft Frost */
  --c-text: #1F2937;        /* Primary Text — Charcoal */
  --c-text-2: #6B7280;      /* Secondary Text — Slate Gray */
  --c-success: #22C55E;     /* Emerald Green */
  --c-warning: #F59E0B;     /* Amber */
  --c-error: #EF4444;       /* Coral Red */

  --gradient-brand: linear-gradient(135deg, #5B5FEF 0%, #8B5CF6 100%);
  --gradient-soft: linear-gradient(160deg, rgba(91,95,239,0.10) 0%, rgba(139,92,246,0.06) 100%);

  /* ---- Radius (dp ≈ px) ---- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-card: 24px;
  --r-sheet: 32px;
  --r-dialog: 28px;
  --r-fab: 28px;

  /* ---- Spacing (8dp grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Claymorphism shadows ---- */
  --shadow-clay: -8px -8px 18px rgba(255,255,255,0.9),
                  10px 10px 24px rgba(31,41,55,0.10);
  --shadow-clay-sm: -5px -5px 12px rgba(255,255,255,0.9),
                      6px 6px 16px rgba(31,41,55,0.08);
  --shadow-clay-inset: inset -4px -4px 10px rgba(255,255,255,0.6),
                         inset 4px 4px 10px rgba(31,41,55,0.06);
  --border-soft: 1px solid rgba(255,255,255,0.6);

  /* ---- Motion ---- */
  --dur: 300ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: var(--s-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-indigo);
}
.eyebrow::before{
  content:'';
  width: 18px; height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
}

h1, .h1{
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--c-text);
}
h2, .h2{
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3, .h3{ font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
p{ color: var(--c-text-2); line-height: 1.65; font-size: 1.02rem; }
.lede{ font-size: 1.15rem; color: var(--c-text-2); max-width: 46ch; }

.section{ padding: var(--s-8) 0; position: relative; }
.section-head{ max-width: 640px; margin-bottom: var(--s-7); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: var(--s-2);
  padding: 15px 28px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.98rem;
  border: none;
  cursor: pointer;
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91,95,239,0.35), var(--shadow-clay-sm);
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px rgba(91,95,239,0.42); }
.btn-primary:active{ transform: scale(0.98); }

.btn-secondary{
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid rgba(31,41,55,0.08);
  box-shadow: var(--shadow-clay-sm);
}
.btn-secondary:hover{ transform: translateY(-2px); background: #fff; }
.btn-secondary:active{ transform: scale(0.98); }

.btn-ghost{
  background: transparent;
  color: var(--c-indigo);
  padding: 15px 8px;
}
.btn-ghost:hover{ color: var(--c-purple); }

.btn-lg{ padding: 18px 34px; font-size: 1.05rem; border-radius: var(--r-dialog); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 100;
  background: rgba(245,247,251,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31,41,55,0.06);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.scrolled{ box-shadow: 0 8px 24px rgba(31,41,55,0.06); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--s-4) 0;
}
.brand{ display:flex; align-items:center; gap: var(--s-3); font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; }
.brand-mark{
  width: 40px; height:40px; border-radius: var(--r-sm);
  background: var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(91,95,239,0.35);
  overflow:hidden;
  flex-shrink:0;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-mark svg{ width:22px; height:22px; }

.nav-links{ display:flex; align-items:center; gap: var(--s-6); }
.nav-links a{ font-size:0.92rem; font-weight:600; color: var(--c-text-2); transition: color var(--dur) var(--ease); position:relative; }
.nav-links a:hover{ color: var(--c-indigo); }
.nav-cta{ display:flex; align-items:center; gap: var(--s-4); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--c-text); margin:5px 0; border-radius:2px; transition: all var(--dur) var(--ease); }

/* ---------- Hero ---------- */
.hero{ padding: var(--s-8) 0 var(--s-7); position:relative; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-8); align-items:center;
}
.hero-copy p.lede{ margin: var(--s-4) 0 var(--s-6); }
.hero-cta-row{ display:flex; align-items:center; gap: var(--s-4); flex-wrap:wrap; }
.hero-trust{ display:flex; flex-wrap:wrap; gap: var(--s-2); margin-top: var(--s-6); }
.trust-chip{
  font-size:0.78rem; font-weight:600; color: var(--c-text-2);
  background: var(--c-card); padding: 8px 14px; border-radius: 100px;
  border: var(--border-soft);
}

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background: var(--gradient-soft);
  filter: blur(6px);
  top:50%; left:50%; transform: translate(-50%,-50%);
  animation: blobFloat 8s ease-in-out infinite;
  z-index:0;
}
@keyframes blobFloat{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-48%) scale(1.06); }
}

/* Floating peek card behind phone */
.peek-card{
  position:absolute;
  bottom: 38px; left: -10px;
  width: 190px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-clay);
  border: var(--border-soft);
  padding: var(--s-4);
  z-index:1;
  transform: rotate(-8deg);
  animation: peekSway 6s ease-in-out infinite;
}
@keyframes peekSway{
  0%,100%{ transform: rotate(-8deg) translateY(0); }
  50%{ transform: rotate(-6deg) translateY(-6px); }
}
.peek-card .wave{ display:flex; align-items:flex-end; gap:3px; height:28px; margin-bottom:8px; }
.peek-card .wave span{
  width:3px; background: var(--gradient-brand); border-radius:2px;
  animation: waveBounce 1.1s ease-in-out infinite;
}
@keyframes waveBounce{ 0%,100%{ height:20%; } 50%{ height:100%; } }
.peek-card .peek-label{ font-size:0.72rem; font-weight:700; color: var(--c-text); }
.peek-card .peek-sub{ font-size:0.68rem; color: var(--c-text-2); margin-top:2px; }

/* ---------- Phone mockup (shared) ---------- */
.phone{
  position:relative; z-index:2;
  width: 300px; height: 610px;
  background: #10131c;
  border-radius: 46px;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(31,41,55,0.28), 0 8px 20px rgba(31,41,55,0.15);
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius: 34px;
  overflow:hidden;
  background: var(--c-bg);
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width: 120px; height: 22px; background:#10131c; border-radius: 0 0 16px 16px; z-index:5;
}

/* Incoming call screen (signature element) */
.call-screen{
  position:absolute; inset:0;
  background: linear-gradient(200deg, #5B5FEF 0%, #8B5CF6 60%, #7C83FD 100%);
  display:flex; flex-direction:column; align-items:center;
  padding: 56px 24px 34px;
  color:#fff;
  transition: opacity var(--dur) var(--ease);
}
.call-status{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.85; font-weight:600; }
.call-avatar-wrap{ position:relative; margin-top: 34px; width:112px; height:112px; }
.call-avatar-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid rgba(255,255,255,0.55);
  animation: ringPulse 1.8s ease-out infinite;
}
.call-avatar-ring.r2{ animation-delay: .6s; }
.call-avatar-ring.r3{ animation-delay: 1.2s; }
@keyframes ringPulse{
  0%{ transform: scale(1); opacity:0.8; }
  100%{ transform: scale(1.55); opacity:0; }
}
.call-avatar{
  position:relative; width:112px; height:112px; border-radius:50%;
  background: linear-gradient(135deg,#EEF2F8,#fff);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 2rem; font-weight:700; color: var(--c-indigo);
}
.call-name{ margin-top: var(--s-5); font-size:1.3rem; font-weight:700; }
.call-sub{ margin-top:4px; font-size:0.85rem; opacity:0.85; }
.call-actions{ margin-top:auto; display:flex; justify-content:space-between; width:100%; align-items:center; }
.call-btn{
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
}
.call-btn svg{ width:24px; height:24px; }
.call-btn.decline{ background: var(--c-error); color:#fff; }
.call-btn.accept{ background: var(--c-success); color:#fff; animation: acceptGlow 1.6s ease-in-out infinite; }
@keyframes acceptGlow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  50%{ box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}
.call-hint{ font-size:0.68rem; opacity:0.75; }
.call-hint-row{ display:flex; justify-content:space-between; width:100%; margin-top:10px; }

/* Voice-playing state */
.voice-screen{
  position:absolute; inset:0;
  background: var(--c-bg);
  display:flex; flex-direction:column; align-items:center;
  padding: 56px 24px 34px;
  opacity:0; pointer-events:none;
  transition: opacity var(--dur) var(--ease);
}
.voice-avatar{
  width:76px; height:76px; border-radius:50%;
  background: var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.4rem;
  box-shadow: var(--shadow-clay-sm);
}
.voice-title{ margin-top: var(--s-4); font-weight:700; color:var(--c-text); }
.voice-sub{ font-size:0.8rem; color:var(--c-text-2); margin-top:2px; }
.voice-card{
  margin-top: var(--s-6); width:100%; background:#fff; border-radius:var(--r-card);
  box-shadow: var(--shadow-clay); border: var(--border-soft); padding: var(--s-5);
}
.voice-wave{ display:flex; align-items:flex-end; gap:4px; height:44px; }
.voice-wave span{ flex:1; background: var(--gradient-brand); border-radius:3px; animation: waveBounce 1s ease-in-out infinite; }
.voice-progress-label{ display:flex; justify-content:space-between; font-size:0.7rem; color:var(--c-text-2); margin-top:10px; }
.voice-complete{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  background: rgba(34,197,94,0.12); color:#16803c; font-weight:700; font-size:0.85rem;
  padding: 12px 16px; border-radius: 100px; opacity:0; transition: opacity var(--dur) var(--ease);
}
.mock.state-voice .call-screen{ opacity:0; }
.mock.state-voice .voice-screen{ opacity:1; pointer-events:auto; }
.mock.state-complete .voice-complete{ opacity:1; }

/* ---------- Compare (alarm vs call) ---------- */
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items:center; }
.compare-card{
  background: var(--c-card); border-radius: var(--r-card); padding: var(--s-6);
  border: var(--border-soft);
}
.compare-card.old{ opacity:0.75; }
.compare-card h4{ font-size:0.95rem; font-weight:700; margin-bottom: var(--s-3); }
.compare-card ul{ display:flex; flex-direction:column; gap: var(--s-3); }
.compare-card li{ font-size:0.92rem; color: var(--c-text-2); display:flex; gap:10px; align-items:flex-start; }
.compare-card.new{ background:#fff; box-shadow: var(--shadow-clay); }
.compare-card.new li{ color: var(--c-text); }
.compare-mark{ flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.compare-card.old .compare-mark{ background: rgba(239,68,68,0.12); color: var(--c-error); }
.compare-card.new .compare-mark{ background: rgba(34,197,94,0.14); color: var(--c-success); }
.compare-mark svg{ width:12px; height:12px; }

/* ---------- Feature cards ---------- */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.card{
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: var(--s-6) var(--s-5);
  border: var(--border-soft);
  box-shadow: var(--shadow-clay-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-clay); background:#fff; }
.card:active{ transform: scale(0.98); }
.card-icon{
  width:52px; height:52px; border-radius: var(--r-sm);
  background: var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--s-4);
  box-shadow: 0 8px 18px rgba(91,95,239,0.3);
}
.card-icon svg{ width:24px; height:24px; }
.card h3{ margin-bottom: var(--s-2); }
.card p{ font-size:0.92rem; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-5); position:relative; }
.steps::before{
  content:''; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background: repeating-linear-gradient(90deg, rgba(91,95,239,0.25) 0 10px, transparent 10px 18px);
  z-index:0;
}
.step{ position:relative; z-index:1; text-align:left; }
.step-num{
  width:52px; height:52px; border-radius:50%;
  background:#fff; border: 2px solid var(--c-indigo); color: var(--c-indigo);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; box-shadow: var(--shadow-clay-sm);
  margin-bottom: var(--s-4);
}
.step h3{ font-size:1.02rem; margin-bottom:6px; }
.step p{ font-size:0.88rem; }

/* ---------- Screens showcase ---------- */
.screens-scroll{
  display:flex; gap: var(--s-6); overflow-x:auto; padding: var(--s-4) var(--s-1) var(--s-6);
  scroll-snap-type: x mandatory;
  -ms-overflow-style:none; scrollbar-width:none;
}
.screens-scroll::-webkit-scrollbar{ display:none; }
.screen-item{ flex: 0 0 auto; scroll-snap-align:center; text-align:center; }
.screen-item .phone{ width:230px; height:468px; border-radius:36px; }
.screen-item .phone-screen{ border-radius:26px; }
.screen-item .phone-notch{ width:90px; height:18px; }
.screen-caption{ margin-top: var(--s-4); font-weight:700; font-size:0.9rem; }
.screen-caption span{ display:block; font-weight:500; font-size:0.78rem; color: var(--c-text-2); margin-top:2px; }

/* mini mock screens */
.mini-screen{ position:absolute; inset:0; padding:18px 14px; overflow:hidden; }
.mini-topbar{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; margin-bottom:14px; }
.mini-title{ font-weight:800; font-size:0.95rem; color: var(--c-text); }
.mini-avatar-sm{ width:26px; height:26px; border-radius:50%; background: var(--gradient-brand); }
.mini-card{
  background:#fff; border-radius:16px; padding:12px; margin-bottom:10px;
  box-shadow: var(--shadow-clay-sm); display:flex; align-items:center; gap:10px;
}
.mini-card .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mini-card .txt{ flex:1; }
.mini-card .time{ font-weight:700; font-size:0.8rem; color:var(--c-text); }
.mini-card .lbl{ font-size:0.68rem; color:var(--c-text-2); }
.mini-card .badge{ font-size:0.6rem; font-weight:700; padding:3px 8px; border-radius:100px; }

.mini-fab{
  position:absolute; bottom:20px; right:18px; width:46px; height:46px; border-radius:16px;
  background: var(--gradient-brand); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(91,95,239,0.4); color:#fff;
}
.mini-fab svg{ width:20px; height:20px; }

.mini-caller-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.mini-caller{ background:#fff; border-radius:14px; padding:10px 6px; text-align:center; box-shadow: var(--shadow-clay-sm); }
.mini-caller .av{ width:38px; height:38px; margin:0 auto 6px; border-radius:50%; background: var(--gradient-brand); }
.mini-caller .nm{ font-size:0.62rem; font-weight:700; color:var(--c-text); }

.mini-field{ background:#fff; border-radius:16px; padding:12px 14px; margin-bottom:10px; box-shadow: var(--shadow-clay-sm); }
.mini-field .k{ font-size:0.62rem; color:var(--c-text-2); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.mini-field .v{ font-size:0.92rem; font-weight:700; color:var(--c-text); margin-top:2px; }
.mini-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.mini-chip{ font-size:0.65rem; font-weight:700; padding:6px 10px; border-radius:100px; background: var(--c-card); color:var(--c-text-2); }
.mini-chip.active{ background: var(--gradient-brand); color:#fff; }

/* ---------- Categories ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.cat-pill{
  background: var(--c-card); border-radius: var(--r-card); padding: var(--s-5) var(--s-4);
  text-align:center; border: var(--border-soft); box-shadow: var(--shadow-clay-sm);
  transition: transform var(--dur) var(--spring), background var(--dur) var(--ease);
}
.cat-pill:hover{ transform: translateY(-4px) scale(1.03); background:#fff; }
.cat-pill .cat-icon{
  width:44px; height:44px; border-radius:50%; margin:0 auto var(--s-3);
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-clay-sm); color: var(--c-indigo);
}
.cat-pill .cat-icon svg{ width:20px; height:20px; }
.cat-pill span{ font-size:0.82rem; font-weight:700; }

/* ---------- Trust row ---------- */
.trust-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
.trust-item{ display:flex; align-items:flex-start; gap: var(--s-4); }
.trust-item .ic{
  width:48px; height:48px; border-radius: var(--r-sm); flex-shrink:0;
  background: #fff; box-shadow: var(--shadow-clay-sm);
  display:flex; align-items:center; justify-content:center; color: var(--c-purple);
}
.trust-item .ic svg{ width:22px; height:22px; }
.trust-item h4{ font-size:0.98rem; font-weight:700; margin-bottom:4px; }
.trust-item p{ font-size:0.86rem; }

/* ---------- Final CTA ---------- */
.cta-band{
  background: var(--gradient-brand);
  border-radius: var(--r-sheet);
  padding: var(--s-8) var(--s-6);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,0.85); margin: var(--s-4) auto var(--s-6); max-width:46ch; }
.cta-band .btn-primary{ background:#fff; color: var(--c-indigo); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.cta-band .btn-primary:hover{ background:#fff; }
.cta-glow{ position:absolute; width:340px; height:340px; border-radius:50%; background: rgba(255,255,255,0.12); filter:blur(20px); }
.cta-glow.a{ top:-120px; left:-80px; }
.cta-glow.b{ bottom:-140px; right:-60px; }

/* ---------- Play badge ---------- */
.play-badge{ display:flex; align-items:center; gap:10px; }
.play-badge svg{ width:22px; height:22px; }
.play-badge .lbl{ text-align:left; line-height:1.1; }
.play-badge .lbl small{ display:block; font-size:0.62rem; font-weight:500; opacity:0.85; }
.play-badge .lbl strong{ font-size:1.02rem; }

/* ---------- Footer ---------- */
.footer{ padding: var(--s-8) 0 var(--s-6); border-top: 1px solid rgba(31,41,55,0.08); margin-top: var(--s-7); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-7); }
.footer-brand p{ margin-top: var(--s-4); font-size:0.88rem; max-width: 30ch; }
.footer-col h5{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--c-text); font-weight:700; margin-bottom: var(--s-4); }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--s-3); }
.footer-col a{ font-size:0.9rem; color: var(--c-text-2); transition: color var(--dur) var(--ease); }
.footer-col a:hover{ color: var(--c-indigo); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid rgba(31,41,55,0.06); }
.footer-bottom p{ font-size:0.8rem; }
.footer-social{ display:flex; gap: var(--s-3); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay: 70ms; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay: 140ms; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay: 210ms; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay: 280ms; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay: 350ms; }
.reveal-stagger.in-view > *:nth-child(7){ transition-delay: 420ms; }
.reveal-stagger.in-view > *:nth-child(8){ transition-delay: 490ms; }

/* ---------- Legal pages ---------- */
.legal-hero{ padding: var(--s-7) 0 var(--s-6); }
.legal-hero p.updated{ font-size:0.82rem; color: var(--c-text-2); margin-top: var(--s-3); }
.legal-note{
  background: var(--c-card); border-radius: var(--r-card); padding: var(--s-5);
  border: var(--border-soft); font-size:0.88rem; color: var(--c-text-2); margin-bottom: var(--s-7);
}
.legal-body{ max-width: 760px; }
.legal-body h2{ font-size:1.3rem; margin-top: var(--s-7); margin-bottom: var(--s-3); }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:1.02rem; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal-body p{ margin-bottom: var(--s-4); }
.legal-body ul{ margin: 0 0 var(--s-4); display:flex; flex-direction:column; gap: var(--s-2); }
.legal-body li{ font-size:0.98rem; color: var(--c-text-2); padding-left: var(--s-4); position:relative; line-height:1.6; }
.legal-body li::before{ content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background: var(--c-indigo); }
.legal-body a{ color: var(--c-indigo); font-weight:600; }
.legal-toc{ background:#fff; border-radius: var(--r-card); box-shadow: var(--shadow-clay-sm); border: var(--border-soft); padding: var(--s-5); margin-bottom: var(--s-7); }
.legal-toc h5{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom: var(--s-3); color:var(--c-text-2); font-weight:700; }
.legal-toc ol{ margin:0; padding-left: 1.1em; display:flex; flex-direction:column; gap:6px; }
.legal-toc li{ font-size:0.9rem; }
.legal-toc a{ color: var(--c-text); font-weight:600; }
.legal-toc a:hover{ color: var(--c-indigo); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ margin-top: var(--s-6); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); row-gap: var(--s-6); }
  .steps::before{ display:none; }
  .cat-grid{ grid-template-columns: repeat(3,1fr); }
  .trust-row{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .nav-links, .nav-cta .btn-secondary{ display:none; }
  .nav-toggle{ display:block; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr; }
}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed; inset:0; background: rgba(31,41,55,0.4); z-index:200;
  opacity:0; pointer-events:none; transition: opacity var(--dur) var(--ease);
}
.mobile-drawer.open{ opacity:1; pointer-events:auto; }
.mobile-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:78%; max-width:320px;
  background:#fff; padding: var(--s-6) var(--s-5); box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  display:flex; flex-direction:column; gap: var(--s-5);
}
.mobile-drawer.open .mobile-drawer-panel{ transform: translateX(0); }
.mobile-drawer-panel a{ font-weight:700; font-size:1.05rem; }
.mobile-close{ align-self:flex-end; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--c-text-2); }