/* ═══════════════════════════════════════════════════════════════
   COTIGO FLOW V5.0 — GLOBAL CSS
   Tipografías: Michroma (display/nav) + Orbitron (números/tech)
   Dominios: odml.cl · cotigoflow.cl · cotigo.cl
═══════════════════════════════════════════════════════════════ */

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

/* ── VARIABLES ── */
:root {
  --font-display: 'Michroma', sans-serif;
  --font-num:     'Orbitron', sans-serif;
  --font-body:    'Orbitron', sans-serif;
  --font-retro:   'VT323', monospace;
  --ease:         cubic-bezier(.16,1,.3,1);
  --ease-fast:    cubic-bezier(.4,0,.2,1);

  /* DARK (default) */
  --bg:      #080f1e;
  --bg2:     #0d1a35;
  --card:    #111f3d;
  --card2:   #162848;
  --bdr:     rgba(255,255,255,0.07);
  --bdr2:    rgba(37,99,235,0.35);
  --txt:     #e2e8f0;
  --sub:     #94a3b8;
  --mut:     #475569;
  --navy:    #1a2744;
  --blue:    #3b82f6;
  --blue2:   #2563eb;
  --teal:    #14b8a6;
  --amber:   #f59e0b;
  --rose:    #f43f5e;
  --sage:    #22c55e;
  --purple:  #8b5cf6;
  --glow:    rgba(59,130,246,0.18);
  --glow2:   rgba(59,130,246,0.08);
  --strip-bg:     rgba(255,255,255,0.04);
  --strip-txt:    #e2e8f0;
  --strip-weight: 800;
  --strip-size:   15px;
  --strip-letter: 1.5px;
}
[data-theme="light"] {
  --bg:      #f0f4ff;
  --bg2:     #e4ecff;
  --card:    #ffffff;
  --card2:   #f4f8ff;
  --bdr:     rgba(0,0,0,0.08);
  --bdr2:    rgba(37,99,235,0.25);
  --txt:     #0f172a;
  --sub:     #334155;
  --mut:     #64748b;
  --blue:    #2563eb;
  --blue2:   #1d4ed8;
  --teal:    #0d9488;
  --amber:   #d97706;
  --rose:    #e11d48;
  --sage:    #15803d;
  --purple:  #7c3aed;
  --glow:    rgba(37,99,235,0.12);
  --glow2:   rgba(37,99,235,0.05);
  --strip-bg:     rgba(0,0,0,0.06);
  --strip-txt:    #0f172a;
  --strip-weight: 900;
  --strip-size:   15px;
  --strip-letter: 1.5px;
}
[data-theme="retro"] {
  --bg:      #000800;
  --bg2:     #000400;
  --card:    #001200;
  --card2:   #001800;
  --bdr:     rgba(0,255,65,0.14);
  --bdr2:    rgba(0,255,65,0.45);
  --txt:     #00ff41;
  --sub:     #00cc33;
  --mut:     #00882b;
  --blue:    #00ff41;
  --blue2:   #00cc33;
  --teal:    #00ff41;
  --amber:   #00ff41;
  --rose:    #00cc33;
  --sage:    #00ff41;
  --purple:  #00cc33;
  --glow:    rgba(0,255,65,0.12);
  --glow2:   rgba(0,255,65,0.05);
  --font-body: 'VT323', monospace;
  --font-display: 'VT323', monospace;
  --font-num: 'VT323', monospace;
  --strip-bg:     rgba(0,255,65,0.08);
  --strip-txt:    #00ff41;
  --strip-weight: 700;
  --strip-size:   18px;
  --strip-letter: 3px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
[data-theme="retro"] body {
  text-shadow: 0 0 8px rgba(0,255,65,0.4);
  letter-spacing: .5px;
}
[data-theme="retro"] body::after {
  content:'';
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
}
[data-theme="retro"] { cursor:crosshair; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue2);border-radius:3px; }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:100px 0; }
.section-sm { padding:60px 0; }

/* ── TYPOGRAPHY ── */
.font-display { font-family:var(--font-display); }
.font-num     { font-family:var(--font-num); }

/* ── TOPBAR ── */
#topbar {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:68px;
  background:rgba(8,15,30,0.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
[data-theme="light"] #topbar  { background:rgba(240,244,255,0.92); }
[data-theme="retro"] #topbar  { background:#000200;border-color:var(--bdr2);backdrop-filter:none; }
#topbar .container { display:flex;align-items:center;justify-content:space-between;height:100%; }
.tb-logo { display:flex;align-items:center;gap:12px;text-decoration:none; }
.tb-logo img { height:38px;object-fit:contain; }
.tb-logo-text {
  font-family:var(--font-display);
  font-size:19px;letter-spacing:2px;
  color:var(--txt);
}
.tb-logo-text span { color:var(--blue); }
.tb-nav { display:flex;align-items:center;gap:4px;list-style:none; }
.tb-nav a {
  font-family:var(--font-body);
  font-size:13px;font-weight:500;letter-spacing:.3px;
  color:var(--sub);text-decoration:none;
  padding:6px 14px;border-radius:7px;
  transition:color .2s,background .2s;
}
.tb-nav a:hover { color:var(--txt);background:var(--bdr); }
.tb-actions { display:flex;align-items:center;gap:8px; }
.theme-btns { display:flex;gap:4px; }
.theme-btn {
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--bdr);background:transparent;
  cursor:pointer;font-size:14px;
  color:var(--sub);transition:all .2s;
}
.theme-btn:hover,.theme-btn.active { background:var(--card);color:var(--txt);border-color:var(--blue2); }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:10px;
  background:var(--blue2);color:#fff;
  font-family:var(--font-body);font-size:15px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .25s var(--ease);
  box-shadow:0 4px 20px rgba(37,99,235,0.3);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 32px rgba(37,99,235,0.45); }
[data-theme="retro"] .btn-primary {
  background:transparent;color:var(--sage);
  border:2px solid var(--sage);border-radius:0;
  box-shadow:none;letter-spacing:2px;font-family:var(--font-retro);
}
[data-theme="retro"] .btn-primary:hover { background:rgba(0,255,65,0.1);transform:none;box-shadow:0 0 16px rgba(0,255,65,0.3); }

.btn-secondary {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:10px;
  background:transparent;color:var(--txt);
  font-family:var(--font-body);font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid var(--bdr2);
  cursor:pointer;transition:all .25s var(--ease);
}
.btn-secondary:hover { background:var(--card);border-color:var(--blue); }
[data-theme="retro"] .btn-secondary { border-radius:0;border-color:var(--mut);letter-spacing:2px;font-family:var(--font-retro); }

.btn-cta {
  padding:8px 20px;border-radius:8px;
  background:var(--blue2);color:#fff;
  font-family:var(--font-body);font-size:13px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .2s;white-space:nowrap;letter-spacing:.3px;
}
.btn-cta:hover { background:var(--blue);transform:translateY(-1px); }

/* ── SECTION HEADERS ── */
.section-header { text-align:center;margin-bottom:64px; }
.section-eyebrow {
  display:inline-block;
  font-family:var(--font-display);
  font-size:11px;font-weight:400;letter-spacing:3px;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
[data-theme="retro"] .section-eyebrow { color:var(--sage); }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(26px,3.5vw,44px);
  letter-spacing:-0.5px;line-height:1.15;
  margin-bottom:16px;
}
[data-theme="retro"] .section-title { letter-spacing:3px; }
.section-desc { font-size:17px;color:var(--sub);max-width:560px;margin:0 auto;line-height:1.7; }

/* ── CARDS ── */
.feat-card {
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:16px;padding:32px;
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.feat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue2),transparent);
  opacity:0;transition:opacity .3s;
}
.feat-card:hover { transform:translateY(-4px);border-color:var(--bdr2);box-shadow:0 16px 48px rgba(0,0,0,0.3); }
.feat-card:hover::before { opacity:1; }
[data-theme="retro"] .feat-card { border-radius:0;border-color:var(--bdr2); }
[data-theme="retro"] .feat-card:hover { transform:none;box-shadow:0 0 20px rgba(0,255,65,0.1); }
.feat-icon {
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue2),var(--teal));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:20px;flex-shrink:0;
}
[data-theme="retro"] .feat-icon { border-radius:0;background:transparent;border:1px solid var(--sage); }
.feat-title {
  font-family:var(--font-display);
  font-size:17px;letter-spacing:.5px;
  margin-bottom:10px;
}
.feat-desc { font-size:13px;color:var(--sub);line-height:1.7; }

/* ── CHIPS ── */
.chip {
  display:inline-block;padding:3px 10px;border-radius:100px;
  background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.3);
  font-size:11px;font-weight:600;color:var(--blue);margin:2px;
  font-family:var(--font-body);letter-spacing:.3px;
}
[data-theme="retro"] .chip { border-radius:0;background:rgba(0,255,65,0.08);border-color:var(--mut);color:var(--sage); }
[data-theme="light"] .chip { background:rgba(37,99,235,0.08);color:var(--blue2); }

/* ── LOGOS STRIP (Diseñado para) ── */
#logos-strip {
  padding:48px 0;
  border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);
  overflow:hidden;
  background:var(--strip-bg);
}
[data-theme="light"] #logos-strip { background:rgba(37,99,235,0.04); }
[data-theme="retro"] #logos-strip { background:rgba(0,255,65,0.03);border-color:var(--bdr2); }
.logos-label {
  text-align:center;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--mut);margin-bottom:28px;
}
.logos-track {
  display:flex;gap:64px;align-items:center;
  animation:scroll-logos 24s linear infinite;
  width:max-content;
}
.logos-track:hover { animation-play-state:paused; }
@keyframes scroll-logos { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-chip {
  font-family:var(--font-display);
  font-size:var(--strip-size);
  font-weight:var(--strip-weight);
  color:var(--strip-txt);
  white-space:nowrap;
  display:flex;align-items:center;gap:10px;
  letter-spacing:var(--strip-letter);
  text-shadow:none;
  opacity:1;
}
[data-theme="dark"] .logo-chip,
[data-theme=""] .logo-chip { color:#c7d9f8;font-weight:800; }
[data-theme="light"] .logo-chip { color:#1e3a6e;font-weight:900; }
[data-theme="retro"] .logo-chip { color:#00ff41;text-shadow:0 0 8px rgba(0,255,65,0.5); }
.logo-chip::before { content:'◆';font-size:9px;color:var(--blue);opacity:.8; }
[data-theme="retro"] .logo-chip::before { color:var(--sage); }

/* ── PRICING ── */
.pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start; }
.price-card {
  background:var(--card);border:1px solid var(--bdr);
  border-radius:20px;padding:36px 32px;
  transition:all .3s;position:relative;
}
.price-card.featured {
  border-color:var(--blue2);
  background:linear-gradient(135deg,var(--card2),var(--navy));
  box-shadow:0 0 48px var(--glow);transform:scale(1.04);
}
[data-theme="retro"] .price-card { border-radius:0; }
[data-theme="retro"] .price-card.featured { border-color:var(--sage);box-shadow:0 0 32px rgba(0,255,65,0.15);transform:none; }
.price-badge {
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--blue2);color:#fff;
  font-family:var(--font-display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  padding:4px 18px;border-radius:100px;white-space:nowrap;
}
[data-theme="retro"] .price-badge { border-radius:0;background:var(--sage);color:#000800; }
.price-plan { font-family:var(--font-display);font-size:20px;letter-spacing:2px;margin-bottom:8px; }
.price-desc { font-size:13px;color:var(--sub);margin-bottom:24px; }
.price-amount { margin-bottom:24px;border-bottom:1px solid var(--bdr);padding-bottom:24px; }
.price-num { font-family:var(--font-num);font-size:42px;font-weight:700;line-height:1; }
.price-num small { font-size:16px;font-weight:400;color:var(--sub);font-family:var(--font-body); }
.price-period { font-size:12px;color:var(--mut);margin-top:4px; }
.price-features { list-style:none;margin-bottom:32px; }
.price-features li { display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--sub);margin-bottom:10px; }
.price-features li::before { content:'✓';color:var(--sage);font-weight:700;flex-shrink:0;margin-top:1px; }
.price-features li.dim { color:var(--mut); }
.price-features li.dim::before { content:'—';color:var(--mut); }
.price-btn {
  display:block;width:100%;padding:13px;border-radius:10px;
  text-align:center;font-family:var(--font-display);
  font-size:13px;letter-spacing:1.5px;
  text-decoration:none;border:1px solid var(--blue2);color:var(--blue);
  transition:all .2s;cursor:pointer;background:transparent;
}
.price-btn:hover { background:var(--blue2);color:#fff; }
.price-card.featured .price-btn { background:var(--blue2);color:#fff; }
[data-theme="retro"] .price-btn { border-radius:0;border-color:var(--sage);color:var(--sage);letter-spacing:3px; }
[data-theme="retro"] .price-card.featured .price-btn { background:rgba(0,255,65,0.15); }

/* ── TESTIMONIALS ── */
.test-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.test-card { background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:28px; }
[data-theme="retro"] .test-card { border-radius:0; }
.test-stars { color:var(--amber);font-size:14px;margin-bottom:16px;letter-spacing:3px; }
[data-theme="retro"] .test-stars { color:var(--sage); }
.test-text { font-size:14px;color:var(--sub);line-height:1.75;margin-bottom:20px;font-style:italic; }
.test-author { display:flex;align-items:center;gap:12px; }
.test-avatar {
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue2),var(--teal));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff;flex-shrink:0;
  font-family:var(--font-display);letter-spacing:1px;
}
[data-theme="retro"] .test-avatar { border-radius:0;background:transparent;border:1px solid var(--sage);color:var(--sage); }
.test-name { font-weight:700;font-size:14px;font-family:var(--font-display);letter-spacing:.5px; }
.test-role { font-size:12px;color:var(--mut); }

/* ── HERO STATS ── */
.stat-num {
  font-family:var(--font-num);
  font-size:34px;font-weight:700;line-height:1;
}
.stat-num span { color:var(--blue); }
.stat-label { font-size:12px;color:var(--sub);margin-top:4px;letter-spacing:.3px; }

/* ── CTA SECTION ── */
.cta-box {
  text-align:center;position:relative;z-index:1;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:24px;padding:72px 48px;
}
[data-theme="retro"] .cta-box { border-radius:0;border-color:var(--sage); }
.cta-title {
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,48px);
  letter-spacing:-0.5px;margin-bottom:16px;line-height:1.15;
}
.cta-desc { font-size:17px;color:var(--sub);max-width:480px;margin:0 auto 36px;line-height:1.7; }
.cta-btns { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }

/* ── HOW IT WORKS ── */
.how-grid {
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:32px;position:relative;
}
.how-grid::before {
  content:'';position:absolute;
  top:28px;left:calc(12.5% + 14px);right:calc(12.5% + 14px);height:1px;
  background:linear-gradient(90deg,var(--blue2),var(--teal),var(--blue2));opacity:.4;
}
.step-card { text-align:center;position:relative;z-index:1; }
.step-num {
  width:56px;height:56px;border-radius:50%;
  background:var(--card);border:2px solid var(--blue2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:20px;font-weight:700;
  color:var(--blue);margin:0 auto 20px;
  box-shadow:0 0 24px var(--glow);
}
[data-theme="retro"] .step-num { border-radius:0;border-color:var(--sage);color:var(--sage);box-shadow:0 0 16px rgba(0,255,65,0.2); }
.step-title { font-family:var(--font-display);font-size:15px;letter-spacing:.5px;margin-bottom:8px; }
.step-desc { font-size:13px;color:var(--sub);line-height:1.65; }

/* ── FOOTER ── */
footer { background:var(--bg2);border-top:1px solid var(--bdr);padding:60px 0 32px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; }
.footer-brand img { height:36px;margin-bottom:16px; }
.footer-brand p { font-size:13px;color:var(--sub);line-height:1.7;max-width:260px; }
.footer-col h4 {
  font-family:var(--font-display);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--txt);margin-bottom:16px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { font-size:14px;color:var(--sub);text-decoration:none;transition:color .2s; }
.footer-col a:hover { color:var(--txt); }
.footer-bottom {
  border-top:1px solid var(--bdr);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--mut);flex-wrap:wrap;gap:12px;
}
.footer-bottom a { color:var(--mut);text-decoration:none; }
.footer-bottom a:hover { color:var(--sub); }

/* ── BOTTOM BAR ── */
#bottom-bar {
  background:linear-gradient(90deg,#060e1c 2%,#1a2744 12%,#1a2744 88%,#060e1c 98%);
  border-top:1px solid rgba(37,99,235,0.35);
  height:36px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:10px;letter-spacing:1.5px;
  color:rgba(255,255,255,0.5);gap:12px;flex-shrink:0;
}
[data-theme="retro"] #bottom-bar { background:#000200;border-top-color:var(--bdr2);color:var(--mut);letter-spacing:2px; }
[data-theme="light"] #bottom-bar { background:linear-gradient(90deg,#1a2744 2%,#2563eb 50%,#1a2744 98%); }
.bb-sep { color:rgba(255,255,255,0.2); }
.bb-ver { color:rgba(255,255,255,0.3);font-size:9px; }

/* ── ANIMATIONS ── */
.fade-in { opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease); }
.fade-in.visible { opacity:1;transform:translateY(0); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── RETRO BLINK ── */
[data-theme="retro"] .hero-title::after { content:'█';animation:blink 1s step-end infinite;color:var(--sage); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── HERO BACKGROUND ── */
.hero-bg {
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(37,99,235,0.2) 0%,transparent 70%),
             radial-gradient(ellipse 40% 40% at 85% 60%,rgba(20,184,166,0.08) 0%,transparent 60%),
             linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
}
[data-theme="retro"] .hero-bg { background:radial-gradient(ellipse 60% 40% at 50% 20%,rgba(0,255,65,0.05) 0%,transparent 60%); }
[data-theme="light"] .hero-bg { background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(37,99,235,0.12) 0%,transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); }
.hero-grid {
  position:absolute;inset:0;z-index:0;opacity:.025;
  background-image:linear-gradient(var(--txt) 1px,transparent 1px),linear-gradient(90deg,var(--txt) 1px,transparent 1px);
  background-size:56px 56px;
}

/* ── STORAGE SECTION ── */
.storage-arch {
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:16px;align-items:center;max-width:800px;margin:0 auto 24px;
}
.storage-node {
  text-align:center;background:var(--bg2);
  border:1px solid var(--bdr);border-radius:12px;padding:20px;
}
[data-theme="retro"] .storage-node { border-radius:0;border-color:var(--bdr2); }
.storage-arrow { text-align:center;font-size:22px;color:var(--mut); }

/* ── TABLE GENERIC ── */
.cf-table { width:100%;border-collapse:collapse;font-size:12px; }
.cf-table th {
  background:rgba(37,99,235,0.1);padding:8px 12px;text-align:left;
  font-family:var(--font-display);font-size:10px;letter-spacing:1px;
  color:var(--sub);border-bottom:1px solid var(--bdr);font-weight:400;
}
.cf-table td { padding:7px 12px;border-bottom:1px solid var(--bdr);font-size:12px; }
.cf-table tr:nth-child(even) { background:rgba(255,255,255,0.02); }
[data-theme="light"] .cf-table tr:nth-child(even) { background:rgba(0,0,0,0.02); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .how-grid { grid-template-columns:repeat(2,1fr); }
  .how-grid::before { display:none; }
  .pricing-grid { grid-template-columns:1fr;max-width:400px;margin:0 auto; }
  .price-card.featured { transform:none; }
  .test-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .tb-nav { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr 1fr; }
  .test-grid { grid-template-columns:1fr; }
  .cta-box { padding:40px 24px; }
  .section { padding:64px 0; }
  .storage-arch { grid-template-columns:1fr;gap:8px; }
  .storage-arrow { transform:rotate(90deg); }
}
@media (max-width:480px) {
  .how-grid { grid-template-columns:1fr; }
}

/* ── SHARED JS THEME FUNCTION (included inline in each page) ── */