/* ══════════════════════════════════════════════════════════════════
   Calculator Hub — Premium Landing Page CSS
   2026 Design System · Indigo/Violet & Cyan Brand Theme
   Full Dark + Light Theme Support · THERABApps
══════════════════════════════════════════════════════════════════ */

/* ─── DARK TOKENS ───────────────────────────────────────────────── */
:root {
  --bg-primary:      #06060f;
  --bg-secondary:    #0d0d1a;
  --bg-card:         rgba(99,102,241,0.05);
  --bg-card-solid:   #0f0f20;
  --bg-glass:        rgba(6,6,15,0.88);
  --bg-icon:         rgba(99,102,241,0.12);
  --bg-icon-neutral: rgba(255,255,255,0.06);
  --bg-input:        rgba(255,255,255,0.05);

  --border:          rgba(99,102,241,0.15);
  --border-glow:     rgba(99,102,241,0.50);
  --border-subtle:   rgba(255,255,255,0.07);
  --border-icon:     rgba(99,102,241,0.20);

  --text-primary:    #f0f0ff;
  --text-secondary:  #a8a8d0;
  --text-muted:      #555580;
  --text-on-accent:  #ffffff;

  --accent:          #6366f1;
  --accent2:         #818cf8;
  --accent3:         #a5b4fc;
  --accent-cyan:     #06b6d4;
  --accent-green:    #10b981;
  --accent-amber:    #f59e0b;
  --accent-rose:     #ef4444;
  --accent-violet:   #8b5cf6;
  --accent-pink:     #ec4899;

  --grad-primary:    linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #06b6d4 100%);
  --grad-hero:       linear-gradient(160deg, #06060f 0%, #0d0d1a 50%, #080820 100%);
  --grad-download:   linear-gradient(160deg, #080818 0%, #06060f 60%, #0a0818 100%);
  --grad-card:       linear-gradient(135deg, rgba(99,102,241,0.08), rgba(6,182,212,0.04));

  --shadow-glow:     0 0 60px rgba(99,102,241,0.22);
  --shadow-card:     0 8px 32px rgba(0,0,0,0.55);
  --shadow-float:    0 8px 24px rgba(0,0,0,0.40);
  --shadow-nav:      0 4px 24px rgba(0,0,0,0.40);
  --shadow-phone:    0 40px 80px rgba(99,102,241,0.25);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.07);

  --phone-notch-bg:  rgba(255,255,255,0.09);
  --phone-track:     rgba(255,255,255,0.08);

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --transition:        all 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: all 0.4s cubic-bezier(0.34,1.56,0.64,1);

  --font-display: 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --nav-h: 72px;
}

/* ─── LIGHT TOKENS ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:      #f5f5ff;
  --bg-secondary:    #ffffff;
  --bg-card:         rgba(99,102,241,0.04);
  --bg-card-solid:   #f0f0ff;
  --bg-glass:        rgba(245,245,255,0.93);
  --bg-icon:         rgba(99,102,241,0.10);
  --bg-icon-neutral: rgba(0,0,0,0.05);
  --bg-input:        rgba(0,0,0,0.04);

  --border:          rgba(0,0,0,0.09);
  --border-glow:     rgba(99,102,241,0.40);
  --border-subtle:   rgba(0,0,0,0.07);
  --border-icon:     rgba(99,102,241,0.18);

  --text-primary:    #0a0a1a;
  --text-secondary:  #2a2a4a;
  --text-muted:      #6a6a9a;
  --text-on-accent:  #ffffff;

  --accent:          #4f46e5;
  --accent2:         #6366f1;
  --accent3:         #818cf8;
  --accent-cyan:     #0891b2;
  --accent-green:    #059669;
  --accent-amber:    #d97706;
  --accent-rose:     #dc2626;
  --accent-violet:   #7c3aed;
  --accent-pink:     #db2777;

  --grad-primary:    linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #0891b2 100%);
  --grad-hero:       linear-gradient(160deg, #eef2ff 0%, #e0e7ff 50%, #f0f9ff 100%);
  --grad-download:   linear-gradient(160deg, #e0e7ff 0%, #ede9fe 60%, #f5f3ff 100%);
  --grad-card:       linear-gradient(135deg, rgba(99,102,241,0.06), rgba(14,165,233,0.04));

  --shadow-glow:     0 0 60px rgba(99,102,241,0.15);
  --shadow-card:     0 4px 20px rgba(0,0,0,0.10);
  --shadow-float:    0 6px 20px rgba(0,0,0,0.12);
  --shadow-nav:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-phone:    0 24px 60px rgba(99,102,241,0.20);
  --shadow-inset:    inset 0 1px 0 rgba(0,0,0,0.04);

  --phone-notch-bg:  rgba(0,0,0,0.09);
  --phone-track:     rgba(0,0,0,0.08);
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary);
  overflow-x:hidden; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
img { max-width:100%; display:block; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent2); }

::selection { background:rgba(99,102,241,0.28); color:var(--text-primary); }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-sm); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }

.gradient-text {
  background:var(--grad-primary);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ══════════════════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════════════════ */
.ch-preloader {
  position:fixed; inset:0; z-index:9999; background:var(--bg-primary);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.ch-preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner { display:flex; flex-direction:column; align-items:center; gap:16px; }
.preloader-icon {
  width:72px; height:72px; border-radius:var(--radius-lg); background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff;
  animation:preloaderPulse 1.5s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(99,102,241,0.5);}
  50%{transform:scale(1.08);box-shadow:0 0 0 20px rgba(99,102,241,0);}
}
.preloader-bar-wrap { width:200px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.preloader-bar { height:100%; background:var(--grad-primary); animation:preloaderFill 1.8s ease-out forwards; }
@keyframes preloaderFill{0%{width:0%}100%{width:100%}}
.preloader-text { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text-primary); }
.preloader-sub  { font-size:12px; color:var(--text-muted); letter-spacing:1px; }

/* ══════════════════════════════════════════════════════════════════
   SCROLL PROGRESS + CURSOR
══════════════════════════════════════════════════════════════════ */
.ch-scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--grad-primary); z-index:9998; transition:width 0.1s linear; }
.cursor-dot,.cursor-ring { pointer-events:none; position:fixed; z-index:9997; border-radius:50%; transform:translate(-50%,-50%); transition:opacity 0.3s; }
.cursor-dot  { width:8px; height:8px; background:var(--accent); }
.cursor-ring { width:36px; height:36px; border:1.5px solid rgba(99,102,241,0.5); background:transparent; }
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}

/* ══════════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════════ */
.ch-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); transition:var(--transition); }
.ch-nav.scrolled {
  background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-nav);
}
.nav-container { max-width:1280px; margin:0 auto; padding:0 32px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-logo-icon { width:40px; height:40px; background:var(--grad-primary); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; flex-shrink:0; }
.nav-logo-text-wrap { display:flex; flex-direction:column; }
.nav-logo-name { font-family:var(--font-display); font-size:16px; font-weight:800; line-height:1.1; }
.nav-logo-by   { font-size:10px; color:var(--text-muted); letter-spacing:0.5px; }
.nav-links     { display:flex; align-items:center; gap:4px; }
.nav-link { font-size:14px; font-weight:500; color:var(--text-secondary); padding:8px 14px; border-radius:var(--radius-full); transition:var(--transition); }
.nav-link:hover, .nav-link.active { color:var(--accent); background:var(--bg-icon); }
.nav-right { display:flex; align-items:center; gap:12px; }
.theme-toggle { width:38px; height:38px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:15px; transition:var(--transition); }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
.nav-cta { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; background:var(--grad-primary); color:var(--text-on-accent); border-radius:var(--radius-full); font-size:13px; font-weight:700; transition:var(--transition-bounce); box-shadow:0 4px 20px rgba(99,102,241,0.35); }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,0.55); }
.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:38px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 8px; }
.hamburger span { display:block; width:18px; height:2px; background:var(--text-primary); border-radius:1px; transition:var(--transition); }

.mobile-drawer { position:fixed; inset:0; z-index:1001; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; transform:translateX(100%); transition:transform 0.45s cubic-bezier(0.4,0,0.2,1); }
.mobile-drawer.open { transform:translateX(0); }
.drawer-inner { display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; padding:40px; }
.drawer-close { position:absolute; top:20px; right:24px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:18px; transition:var(--transition); }
.drawer-close:hover { background:var(--bg-icon); }
.drawer-links { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.drawer-link { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--text-primary); padding:8px 0; display:block; text-align:center; transform:translateX(40px); opacity:0; transition:var(--transition); }
.mobile-drawer.open .drawer-link { transform:translateX(0); opacity:1; }
.mobile-drawer.open .drawer-link:nth-child(1){transition-delay:0.06s;}
.mobile-drawer.open .drawer-link:nth-child(2){transition-delay:0.10s;}
.mobile-drawer.open .drawer-link:nth-child(3){transition-delay:0.14s;}
.mobile-drawer.open .drawer-link:nth-child(4){transition-delay:0.18s;}
.mobile-drawer.open .drawer-link:nth-child(5){transition-delay:0.22s;}
.mobile-drawer.open .drawer-link:nth-child(6){transition-delay:0.26s;}
.mobile-drawer.open .drawer-link:nth-child(7){transition-delay:0.30s;}
.drawer-link:hover { color:var(--accent); }
.drawer-cta { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; background:var(--grad-primary); color:var(--text-on-accent); border-radius:var(--radius-full); font-weight:700; font-size:15px; }

/* ══════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════ */
.hero-section { position:relative; min-height:100vh; background:var(--grad-hero); overflow:hidden; display:flex; align-items:center; }
.hero-blobs { position:absolute; inset:0; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.45; }
.blob-1 { width:600px;height:600px;top:-150px;left:-100px; background:radial-gradient(circle,rgba(99,102,241,0.45),transparent 70%); animation:blobFloat 14s ease-in-out infinite; }
.blob-2 { width:500px;height:500px;bottom:-100px;right:-80px; background:radial-gradient(circle,rgba(6,182,212,0.30),transparent 70%); animation:blobFloat 16s ease-in-out infinite reverse; }
.blob-3 { width:350px;height:350px;top:20%;right:8%; background:radial-gradient(circle,rgba(139,92,246,0.20),transparent 70%); animation:blobFloat 11s ease-in-out infinite 2s; }
.blob-4 { width:300px;height:300px;bottom:15%;left:5%; background:radial-gradient(circle,rgba(16,185,129,0.12),transparent 70%); animation:blobFloat 18s ease-in-out infinite 1s; }
@keyframes blobFloat{0%,100%{transform:translate(0,0)scale(1);}33%{transform:translate(30px,-20px)scale(1.05);}66%{transform:translate(-20px,20px)scale(0.95);}}
.hero-grid-bg { position:absolute;inset:0; background-image:linear-gradient(rgba(99,102,241,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,0.06) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; z-index:0; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%); }
.particles-canvas { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1; }
.hero-container { position:relative;z-index:2;max-width:1280px;margin:0 auto; padding:calc(var(--nav-h)+60px) 32px 80px; display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;width:100%; }
.hero-content { display:flex;flex-direction:column;gap:24px; }
.ch-eyebrow { display:inline-flex;align-items:center;gap:8px; padding:6px 16px; background:var(--bg-icon); border:1px solid var(--border-icon); border-radius:var(--radius-full); font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--accent2); width:fit-content; }
.hero-title { font-family:var(--font-display); font-size:clamp(38px,5.5vw,70px); font-weight:900; line-height:1.08; letter-spacing:-2px; color:var(--text-primary); }
.hero-sub { font-size:clamp(14px,1.6vw,17px); color:var(--text-secondary); max-width:480px; line-height:1.8; }
.hero-ctas { display:flex;flex-wrap:wrap;gap:14px; }
.ch-btn-primary { display:inline-flex;align-items:center;gap:10px; padding:16px 36px;background:var(--grad-primary);color:var(--text-on-accent); border-radius:var(--radius-full);font-weight:700;font-size:16px;font-family:var(--font-body); transition:var(--transition-bounce);box-shadow:0 8px 32px rgba(99,102,241,0.40);white-space:nowrap; }
.ch-btn-primary:hover { transform:translateY(-3px);box-shadow:0 16px 48px rgba(99,102,241,0.55); }
.ch-btn-secondary { display:inline-flex;align-items:center;gap:10px; padding:16px 36px;background:var(--bg-card);color:var(--text-primary); border:1px solid var(--border);border-radius:var(--radius-full); font-weight:600;font-size:16px;font-family:var(--font-body); backdrop-filter:blur(10px);transition:var(--transition-bounce);white-space:nowrap; }
.ch-btn-secondary:hover { border-color:var(--accent);color:var(--accent);transform:translateY(-3px); }
.hero-stats { display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px; }
.stat-item  { display:flex;flex-direction:column;gap:2px; }
.stat-value { font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text-primary);display:flex;align-items:center; }
.stat-label { font-size:12px;color:var(--text-muted);font-weight:500; }
.stat-divider { width:1px;height:36px;background:var(--border);flex-shrink:0; }

/* Phone Mockup */
.hero-visual { position:relative;display:flex;align-items:center;justify-content:center;padding:50px 30px; }
.ch-phone-wrap { animation:phoneFloat 4s ease-in-out infinite;position:relative;z-index:3; }
@keyframes phoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.ch-phone { width:280px;height:580px;background:var(--bg-secondary);border-radius:44px;border:2px solid var(--border-glow);box-shadow:var(--shadow-phone),var(--shadow-inset);overflow:hidden;display:flex;flex-direction:column;align-items:center; }
.phone-status-bar { width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 18px 6px;flex-shrink:0; }
.phone-notch       { width:80px;height:6px;background:var(--phone-notch-bg);border-radius:3px; }
.phone-status-icons { display:flex;gap:6px;font-size:9px;color:var(--text-muted); }
.phone-app-header  { width:100%;display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px;flex-shrink:0; }
.phone-app-title   { font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--accent2); }
.phone-header-icons { display:flex;gap:10px;font-size:13px;color:var(--text-muted); }
.phone-search-bar  { width:calc(100% - 24px);margin:0 12px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-muted);flex-shrink:0; }
.phone-search-bar i { font-size:11px;color:var(--accent); }
.phone-cats        { display:flex;gap:6px;padding:8px 12px;overflow:hidden;flex-shrink:0; }
.phone-cat-pill    { padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:9px;font-weight:600;color:var(--text-secondary);flex-shrink:0; }
.phone-cat-pill.active { background:var(--bg-icon);border-color:var(--accent);color:var(--accent2); }
.phone-grid        { width:calc(100% - 24px);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 12px;flex-shrink:0; }
.phone-grid-item   { display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;font-size:8px;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);transition:var(--transition); }
.phone-grid-item i { font-size:16px; }
.pg-blue   { background:rgba(99,102,241,0.10);color:var(--accent2); }
.pg-violet { background:rgba(139,92,246,0.10);color:var(--accent-violet); }
.pg-green  { background:rgba(16,185,129,0.10);color:var(--accent-green); }
.pg-orange { background:rgba(245,158,11,0.10);color:var(--accent-amber); }
.pg-teal   { background:rgba(6,182,212,0.10);color:var(--accent-cyan); }
.pg-pink   { background:rgba(236,72,153,0.10);color:var(--accent-pink); }
.phone-recent { width:calc(100% - 24px);margin:8px 12px 0;flex-shrink:0; }
.phone-recent-header { display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-bottom:6px; }
.phone-recent-item { display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px; }
.pri-icon  { width:28px;height:28px;border-radius:8px;background:var(--bg-icon);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--accent2);flex-shrink:0; }
.pri-info  { flex:1; }
.pri-name  { font-size:10px;font-weight:600;color:var(--text-primary); }
.pri-result { font-size:9px;color:var(--text-muted);font-family:var(--font-mono); }
.phone-bottom-nav { width:100%;display:flex;justify-content:space-around;padding:10px 8px 14px;margin-top:auto;border-top:1px solid var(--border);flex-shrink:0; }
.phone-nav-btn { display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-muted);transition:var(--transition);flex:1; }
.phone-nav-btn.active { color:var(--accent2); }
.phone-nav-btn i { font-size:14px; }
.phone-nav-btn span { font-size:8px;font-weight:500; }

/* Floating cards */
.float-card { position:absolute;display:flex;align-items:center;gap:10px; padding:10px 14px;background:var(--bg-glass);border:1px solid var(--border); backdrop-filter:blur(12px);border-radius:var(--radius-md); font-size:11px;font-weight:600;color:var(--text-primary);white-space:nowrap; z-index:4;box-shadow:var(--shadow-float);animation:floatCard 4s ease-in-out infinite; }
.float-card i  { font-size:16px;color:var(--accent2);flex-shrink:0; }
.fc-label      { display:block;font-size:9px;color:var(--text-muted);font-weight:500; }
.fc-value      { display:block;font-size:11px;font-weight:700;color:var(--text-primary); }
.float-card-1 { top:20px;left:-5px;animation-delay:0s; }
.float-card-2 { top:20px;right:-5px;animation-delay:0.7s; }
.float-card-3 { bottom:120px;left:-15px;animation-delay:1.4s; }
.float-card-4 { bottom:120px;right:-15px;animation-delay:2.1s; }
.float-card-5 { bottom:50px;left:50%;transform:translateX(-50%);animation-delay:2.8s; }
@keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.float-card-5 { animation:floatCard5 4s ease-in-out 2.8s infinite; }
@keyframes floatCard5{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-10px);}}

/* ══════════════════════════════════════════════════════════════════
   COUNTER STRIP
══════════════════════════════════════════════════════════════════ */
.counter-strip { background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:24px 32px;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap; }
.cs-item  { display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 40px; }
.cs-value { font-family:var(--font-display);font-size:26px;font-weight:900; }
.cs-label { font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:0.5px; }
.cs-div   { width:1px;height:48px;background:var(--border);flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════════════════════════════ */
.section-container { max-width:1280px;margin:0 auto;padding:0 32px;width:100%; }
.section-header { text-align:center;margin-bottom:64px; }
.section-eyebrow { display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--accent2);background:var(--bg-icon);border:1px solid var(--border-icon); padding:5px 14px;border-radius:var(--radius-full);margin-bottom:16px; }
.section-title { font-family:var(--font-display);font-size:clamp(28px,4vw,52px);font-weight:900;line-height:1.1;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:16px; }
.section-sub { font-size:17px;color:var(--text-secondary);max-width:520px;margin:0 auto; }

/* ══════════════════════════════════════════════════════════════════
   CATEGORIES
══════════════════════════════════════════════════════════════════ */
.section-categories { padding:100px 0;background:var(--bg-primary); }
.category-cloud { display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:56px; }
.cat-chip { padding:8px 18px;border-radius:var(--radius-full);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-secondary);background:var(--bg-card);transition:var(--transition);cursor:pointer; }
.cat-chip:hover { border-color:var(--accent);color:var(--accent);background:var(--bg-icon);transform:translateY(-2px); }
.cat-panels { display:flex;flex-direction:column;gap:12px; }
.cat-panel  { border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition); }
.cat-panel:hover { border-color:var(--border-glow); }
.cat-panel-header { width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;background:var(--bg-card);transition:var(--transition); }
.cat-panel-header:hover { background:var(--bg-icon); }
.cat-panel-header[aria-expanded="true"] { background:var(--bg-icon); }
.cph-left  { display:flex;align-items:center;gap:14px; }
.cph-icon  { font-size:24px;flex-shrink:0; }
.cph-title { font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-primary);display:block; }
.cph-count { font-size:12px;color:var(--text-muted); }
.cph-arrow { font-size:14px;color:var(--text-muted);transition:transform 0.3s ease; }
.cat-panel-header[aria-expanded="true"] .cph-arrow { transform:rotate(180deg); }
.cat-panel-body { max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.cat-panel-body.open { max-height:600px; }
.cpb-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:20px 24px; }
.cpb-grid span { padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);transition:var(--transition);cursor:default; }
.cpb-grid span:hover { border-color:var(--accent);color:var(--accent2);background:var(--bg-icon); }
.cpb-disclaimer { padding:0 24px 16px;font-size:12px;color:var(--text-muted);display:flex;align-items:flex-start;gap:6px;line-height:1.6; }
.cpb-disclaimer i { color:var(--accent-cyan);font-size:12px;flex-shrink:0;margin-top:2px; }

/* ══════════════════════════════════════════════════════════════════
   FINANCE
══════════════════════════════════════════════════════════════════ */
.section-finance { padding:100px 0;background:var(--bg-secondary); }
.finance-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px; }
.finance-card { background:var(--grad-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;transition:var(--transition); }
.finance-card:hover { transform:translateY(-6px);border-color:var(--border-glow);box-shadow:var(--shadow-glow); }
.fc-header { display:flex;align-items:flex-start;gap:14px; }
.fc-icon-wrap { width:52px;height:52px;border-radius:var(--radius-md);background:var(--bg-icon);border:1px solid var(--border-icon);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--fc-color,var(--accent2));flex-shrink:0; }
.fc-header h3 { font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text-primary);margin-bottom:4px; }
.fc-header p  { font-size:12px;color:var(--text-muted); }
.fc-flow { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.fc-flow-step { display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex:1;min-width:90px; }
.ffs-label { font-size:10px;color:var(--text-muted); }
.ffs-val   { font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text-primary); }
.ffs-arrow { color:var(--accent);font-size:12px;flex-shrink:0; }
.fc-disclaimer { font-size:11px;color:var(--text-muted);display:flex;align-items:flex-start;gap:6px;padding:10px;background:rgba(99,102,241,0.04);border-radius:var(--radius-sm);border:1px solid var(--border);line-height:1.5; }
.fc-disclaimer i { color:var(--accent-cyan);flex-shrink:0;font-size:11px;margin-top:1px; }
.fc-chart-bars { display:flex;align-items:flex-end;gap:8px;height:80px; }
.fcb-bar { flex:1;border-radius:6px 6px 0 0;background:var(--bg-icon);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font-size:9px;color:var(--text-muted);transition:var(--transition); }
.fcb-bar:hover { background:var(--grad-primary);color:#fff; }
.fcb-bar--accent { background:var(--grad-primary);color:#fff; }
div[style*="--h"] { height:var(--h); }
.fc-result-row { display:flex;align-items:center;gap:8px;font-size:14px; }
.fcr-label { color:var(--text-secondary); }
.fcr-value { font-family:var(--font-mono);font-size:18px;font-weight:800; }
.fcr-rate  { font-size:12px;color:var(--text-muted);padding:3px 8px;background:var(--bg-card);border-radius:var(--radius-full); }
.fc-timeline { display:flex;align-items:center;gap:0; }
.fct-point { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0; }
.fct-point span:first-child { font-size:10px;color:var(--text-muted); }
.fct-point span:last-child { font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-primary); }
.fct-retire span:last-child { font-size:15px; }
.fct-line { flex:1;height:2px;background:var(--border);margin:0 4px;margin-top:-12px; }
.fc-breakdown { display:flex;flex-direction:column;gap:8px; }
.fbd-row { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-card);border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary); }
.fbd-deduct { color:var(--accent-rose); }
.fbd-net    { background:var(--bg-icon);font-weight:700;color:var(--text-primary); }
.fc-debt-vis { display:flex;flex-direction:column;gap:8px; }
.fdv-item { display:flex;align-items:center;gap:10px; }
.fdv-bar { height:8px;border-radius:4px;background:var(--grad-primary);width:var(--w);transition:width 0.6s ease; }
.fdv-interest { background:linear-gradient(90deg,var(--accent-rose),#ff8080); }
.fdv-payoff   { background:linear-gradient(90deg,var(--accent-green),#6ee7b7); }
.fdv-item span { font-size:12px;color:var(--text-muted);white-space:nowrap; }
.fc-util-pills { display:flex;flex-wrap:wrap;gap:8px; }
.fc-util-pills span { padding:5px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:12px;color:var(--text-secondary);transition:var(--transition); }
.fc-util-pills span:hover { border-color:var(--accent);color:var(--accent2); }

/* ══════════════════════════════════════════════════════════════════
   HEALTH
══════════════════════════════════════════════════════════════════ */
.section-health { padding:100px 0;background:var(--bg-primary); }
.health-grid    { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px; }
.health-card    { background:var(--grad-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;transition:var(--transition); }
.health-card:hover { transform:translateY(-6px);border-color:var(--border-glow);box-shadow:var(--shadow-glow); }
.hc-header { display:flex;align-items:flex-start;gap:14px; }
.hc-icon { width:52px;height:52px;border-radius:var(--radius-md);background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.20);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--hc-color,var(--accent-green));flex-shrink:0; }
.hc-header h3 { font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text-primary);margin-bottom:4px; }
.hc-header p  { font-size:12px;color:var(--text-muted); }
.hc-bmi-visual { padding:12px;background:var(--bg-card);border-radius:var(--radius-md); }
.bmi-scale { display:flex;gap:3px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:8px; }
.bmi-zone  { flex:1;padding:6px 4px;font-size:9px;font-weight:600;text-align:center;color:rgba(255,255,255,0.7);background:var(--bg-icon); }
.bmi-under { background:rgba(59,130,246,0.4); }
.bmi-normal { background:rgba(16,185,129,0.4); }
.bmi-over   { background:rgba(245,158,11,0.4); }
.bmi-obese  { background:rgba(239,68,68,0.4); }
.bmi-active { outline:2px solid var(--accent-green);outline-offset:2px; }
.bmi-value  { font-size:13px;font-weight:600;color:var(--text-secondary);text-align:center; }
.hc-chips   { display:flex;flex-wrap:wrap;gap:6px; }
.hc-chips span { padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:11px;color:var(--text-secondary); }
.hc-disclaimer { font-size:11px;color:var(--text-muted);display:flex;align-items:flex-start;gap:6px;padding:10px;background:rgba(99,102,241,0.04);border-radius:var(--radius-sm);border:1px solid var(--border);line-height:1.5; }
.hc-disclaimer i { color:var(--accent-cyan);flex-shrink:0;font-size:11px;margin-top:1px; }
.hc-pregnancy-timeline { display:flex;align-items:center; }
.hpt-item { display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0; }
.hpt-week  { font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-primary); }
.hpt-label { font-size:9px;color:var(--text-muted); }
.hpt-active .hpt-label { color:var(--accent-pink); }
.hpt-line  { flex:1;height:2px;background:var(--border);margin:0 4px;margin-top:-10px; }
.hc-macro-bars { display:flex;flex-direction:column;gap:8px; }
.hmb-item  { display:flex;align-items:center;gap:10px;font-size:12px; }
.hmb-item span:first-child { width:60px;color:var(--text-secondary); }
.hmb-bar   { flex:1;height:6px;background:var(--phone-track);border-radius:3px;overflow:hidden; }
.hmb-fill  { height:100%;border-radius:3px; }
.hmb-protein { background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.hmb-carbs   { background:linear-gradient(90deg,var(--accent-amber),#fbbf24); }
.hmb-fats    { background:linear-gradient(90deg,var(--accent-rose),#ff8080); }
.hmb-item span:last-child { width:32px;text-align:right;font-weight:600;color:var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════
   SCIENCE / MATH
══════════════════════════════════════════════════════════════════ */
.section-science { padding:100px 0;background:var(--bg-secondary); }
.science-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:80px; }
.sci-calc-visual { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:16px; }
.sci-display { padding:16px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md); }
.sci-expr   { font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);word-break:break-all; }
.sci-result { font-family:var(--font-mono);font-size:28px;font-weight:700;margin-top:8px; }
.sci-buttons { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.sci-btn { padding:10px 6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-primary);text-align:center;transition:var(--transition);cursor:pointer; }
.sci-btn:hover { background:var(--bg-icon);border-color:var(--accent); }
.sci-fn     { background:var(--bg-icon);color:var(--accent2);border-color:var(--border-icon); }
.sci-op     { color:var(--accent-amber); }
.sci-accent { background:var(--grad-primary);color:#fff;border:none; }
.sci-mode-row { display:flex;gap:8px; }
.sci-mode-pill { flex:1;text-align:center;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:var(--transition); }
.sci-mode-pill.active { background:var(--bg-icon);border-color:var(--accent);color:var(--accent2); }
.sci-cards { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.sci-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:10px;transition:var(--transition); }
.sci-card:hover { border-color:var(--border-glow);transform:translateY(-4px);box-shadow:var(--shadow-glow); }
.scc-icon { width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-icon);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--sc-color,var(--accent2)); }
.sci-card h4 { font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text-primary); }
.sci-card p  { font-size:12px;color:var(--text-secondary);line-height:1.6; }
/* Step-by-step */
.step-by-step { background:var(--grad-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; }
.sbs-header h3 { font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--text-primary);margin:10px 0 8px; }
.sbs-header p  { font-size:15px;color:var(--text-secondary); }
.sbs-demo  { display:flex;flex-direction:column;gap:10px; }
.sbs-input { display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md); }
.sbs-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);flex-shrink:0; }
.sbs-expr  { font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent2); }
.sbs-step  { display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md); }
.sbs-step-num  { font-size:10px;font-weight:700;color:var(--accent);background:var(--bg-icon);padding:3px 8px;border-radius:var(--radius-full);white-space:nowrap; }
.sbs-step-text { font-family:var(--font-mono);font-size:14px;color:var(--text-secondary); }
.sbs-step-text strong { color:var(--text-primary); }
.sbs-result { display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--bg-icon);border:1px solid var(--border-icon);border-radius:var(--radius-md); }
.sbs-res-label { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted); }
.sbs-res-val   { font-family:var(--font-mono);font-size:24px;font-weight:900; }

/* ══════════════════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════════════════ */
.section-utility { padding:100px 0;background:var(--bg-primary); }
.utility-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px; }
.util-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:12px;transition:var(--transition); }
.util-card:hover { transform:translateY(-6px);border-color:var(--border-glow);box-shadow:var(--shadow-glow); }
.uc-icon { width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-icon);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--uc-color,var(--accent2)); }
.util-card h4 { font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--text-primary); }
.util-card p  { font-size:13px;color:var(--text-secondary);line-height:1.7; }
.uc-convert   { display:flex;flex-direction:column;gap:6px; }
.uc-convert span { font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm); }

/* ══════════════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════════════ */
.section-features { padding:100px 0;background:var(--bg-secondary); }
.features-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-bottom:80px; }
.feat-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:12px;transition:var(--transition); }
.feat-card:hover { transform:translateY(-6px);border-color:var(--border-glow);box-shadow:var(--shadow-glow); }
.feat-icon { width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-icon);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--fi,var(--accent2));border:1px solid var(--border-icon); }
.feat-card h4 { font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text-primary); }
.feat-card p  { font-size:13px;color:var(--text-secondary);line-height:1.7; }
/* Smart Assistant */
.assistant-showcase { background:var(--grad-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start; }
.as-header h3 { font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--text-primary);margin:10px 0 8px; }
.as-header p  { font-size:14px;color:var(--text-secondary);line-height:1.7; }
.as-chat { display:flex;flex-direction:column;gap:10px; }
.as-msg   { display:flex;align-items:flex-start;gap:10px; }
.as-msg i { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
.as-user i { background:var(--bg-icon);color:var(--accent2); }
.as-bot i  { background:var(--grad-primary);color:#fff; }
.as-user span { font-size:13px;color:var(--text-secondary);padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);line-height:1.6; }
.as-bot-body  { padding:12px 14px;background:var(--bg-icon);border:1px solid var(--border-icon);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:6px; }
.as-formula  { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent2);padding:6px 10px;background:var(--bg-card);border-radius:var(--radius-sm); }
.as-steps    { font-family:var(--font-mono);font-size:11px;color:var(--text-muted);display:flex;flex-direction:column;gap:3px; }
.as-answer   { font-size:14px;font-weight:600;color:var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════
   ANDROID
══════════════════════════════════════════════════════════════════ */
.section-android { padding:100px 0;background:var(--bg-primary); }
.device-showcase { display:flex;align-items:flex-end;justify-content:center;gap:40px;flex-wrap:wrap;margin-bottom:64px; }
.device-wrap   { display:flex;flex-direction:column;align-items:center;gap:12px; }
.device-label  { font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase; }
.device-phone  { width:180px;height:360px;background:var(--bg-secondary);border-radius:28px;border:2px solid var(--border-glow);box-shadow:var(--shadow-phone);overflow:hidden; }
.device-tablet { width:340px;height:220px;background:var(--bg-secondary);border-radius:18px;border:2px solid var(--border-glow);box-shadow:var(--shadow-phone);overflow:hidden; }
.dev-screen    { width:100%;height:100%;display:flex;flex-direction:column;padding:14px;gap:10px;background:var(--bg-secondary); }
.dev-header    { font-family:var(--font-display);font-size:12px;font-weight:800;display:flex;align-items:center;gap:6px; }
.dev-calc-display { padding:10px;background:var(--bg-primary);border-radius:8px;text-align:right; }
.dev-expr   { font-family:var(--font-mono);font-size:10px;color:var(--text-muted); }
.dev-result { font-family:var(--font-mono);font-size:22px;font-weight:800;color:var(--text-primary); }
.dev-btn-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1; }
.dev-btn-grid span { display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;font-size:10px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:var(--transition); }
.db-fn     { background:var(--bg-icon);color:var(--accent2); }
.db-op     { color:var(--accent-amber); }
.db-accent { background:var(--grad-primary);color:#fff;border:none; }
.dev-screen--tablet { flex-direction:row;padding:10px;gap:10px; }
.dev-tab-sidebar { width:40px;background:var(--bg-primary);border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0;font-size:13px;color:var(--text-muted); }
.dev-tab-sidebar i:first-child { color:var(--accent2); }
.dev-tab-main { flex:1;display:flex;flex-direction:column;gap:8px; }
.dev-tab-fields { display:flex;flex-direction:column;gap:6px; }
.dtf-row { display:flex;justify-content:space-between;font-size:11px;padding:6px 10px;background:var(--bg-card);border-radius:6px;color:var(--text-secondary); }
.dtf-result { background:var(--bg-icon);font-weight:700;color:var(--text-primary); }
/* Theme showcase */
.theme-showcase { display:flex;flex-direction:column;align-items:center;gap:16px; }
.theme-toggle-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border:1px solid var(--border);border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--text-secondary);background:var(--bg-card);cursor:pointer;transition:var(--transition);margin:0 4px; }
.theme-toggle-btn.active { border-color:var(--accent);color:var(--accent2);background:var(--bg-icon); }
.ts-preview { border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;max-width:380px;width:100%; }
.tsp-screen { padding:20px;display:flex;flex-direction:column;gap:12px; }
.tsp-screen.hidden { display:none; }
.tsp-dark  { background:#06060f; }
.tsp-header { font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--accent2); }
.tsp-display { font-family:var(--font-mono);font-size:28px;font-weight:800;color:#f0f0ff;text-align:right; }
.tsp-expr    { font-family:var(--font-mono);font-size:11px;color:#555580;text-align:right; }
.tsp-buttons { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.tsp-buttons span { display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.15);color:#a8a8d0;cursor:pointer; }
.tsb-fn   { background:rgba(99,102,241,0.15);color:#818cf8; }
.tsb-op   { color:#f59e0b; }
.tsb-accent { background:linear-gradient(135deg,#6366f1,#06b6d4);color:#fff;border:none; }
/* Light theme preview */
.tsp-light { background:#f5f5ff; }
.tsp-lh    { color:#4f46e5; }
.tsp-ld    { color:#0a0a1a; }
.tsp-le    { color:#6a6a9a; }
.tsp-lb span { background:rgba(99,102,241,0.06);border-color:rgba(99,102,241,0.12);color:#2a2a4a; }
.tsb-fn-l  { background:rgba(99,102,241,0.10);color:#4f46e5; }
.tsb-op-l  { color:#d97706; }
.tsb-digit { color:#0a0a1a; }
.tsb-accent-l { background:linear-gradient(135deg,#4f46e5,#0891b2);color:#fff;border:none; }

/* ══════════════════════════════════════════════════════════════════
   DOWNLOAD
══════════════════════════════════════════════════════════════════ */
.section-download { position:relative;padding:120px 0;overflow:hidden;background:var(--grad-download); }
.dl-blobs { position:absolute;inset:0;pointer-events:none;z-index:0; }
.dl-blob  { position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35; }
.dl-blob-1 { width:500px;height:500px;top:-100px;left:-100px;background:radial-gradient(circle,rgba(99,102,241,0.5),transparent 70%);animation:blobFloat 12s ease-in-out infinite; }
.dl-blob-2 { width:400px;height:400px;bottom:-100px;right:-100px;background:radial-gradient(circle,rgba(6,182,212,0.4),transparent 70%);animation:blobFloat 15s ease-in-out infinite reverse; }
.download-content { position:relative;z-index:2;text-align:center;max-width:700px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px; }
.download-desc { font-size:17px;color:var(--text-secondary);line-height:1.8; }
.download-stats { display:flex;flex-wrap:wrap;gap:10px;justify-content:center; }
.ds-pill { display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:var(--bg-icon);border:1px solid var(--border-icon);border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--accent2); }
.download-ctas { display:flex;flex-wrap:wrap;gap:16px;justify-content:center; }
.download-btn-primary { padding:18px 44px;font-size:18px; }
.download-btn-primary span { display:flex;flex-direction:column;align-items:flex-start;gap:1px; }
.download-btn-primary small { font-size:11px;opacity:0.85;font-weight:400; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
.ch-footer { padding:80px 0 0;background:var(--bg-secondary);border-top:1px solid var(--border); }
.footer-container { max-width:1280px;margin:0 auto;padding:0 32px 60px;display:grid;grid-template-columns:1.4fr 1.4fr 1fr;gap:48px; }
.footer-brand { display:flex;flex-direction:column;gap:16px; }
.footer-logo  { display:flex;align-items:center;gap:12px; }
.footer-logo-icon { width:40px;height:40px;border-radius:12px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0; }
.footer-logo-name { font-family:var(--font-display);font-size:18px;font-weight:900; }
.footer-tagline { font-size:13px;color:var(--text-muted);font-style:italic; }
.footer-play-btn { display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);width:fit-content; }
.footer-play-btn:hover { border-color:var(--accent); }
.footer-play-btn i { font-size:20px;color:var(--accent2); }
.footer-play-btn span { display:flex;flex-direction:column;gap:1px; }
.footer-play-btn small { font-size:10px;color:var(--text-muted); }
.footer-play-btn span:last-child { font-size:14px;font-weight:700;color:var(--text-primary); }
.footer-col-title { font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--text-primary);margin-bottom:16px;letter-spacing:0.5px;text-transform:uppercase; }
.footer-links { display:flex;flex-direction:column;gap:8px; }
.footer-links a { font-size:13px;color:var(--text-secondary);transition:var(--transition);display:inline-flex;align-items:center;gap:6px; }
.footer-links a:hover { color:var(--accent2); }
.footer-links i { font-size:11px; }
.footer-bottom { border-top:1px solid var(--border);padding:20px 32px;max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
.footer-copyright { font-size:13px;color:var(--text-muted); }
.footer-disclaimer { font-size:11px;color:var(--text-muted);max-width:500px;text-align:right;line-height:1.5; }

/* Sticky Play */
.sticky-play-wrap { position:fixed;bottom:24px;right:24px;z-index:900;transform:translateY(100px);opacity:0;transition:var(--transition-bounce); }
.sticky-play-wrap.visible { transform:translateY(0);opacity:1; }
.sticky-play-btn { display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--grad-primary);color:var(--text-on-accent);border-radius:var(--radius-full);font-weight:700;font-size:14px;box-shadow:0 8px 32px rgba(99,102,241,0.45);transition:var(--transition-bounce); }
.sticky-play-btn:hover { transform:scale(1.05); }
.sticky-play-btn i { font-size:16px; }

/* ══════════════════════════════════════════════════════════════════
   SEARCH
══════════════════════════════════════════════════════════════════ */
.section-search { padding:100px 0; background:var(--bg-secondary); }
.search-showcase { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.search-demo    { display:flex; flex-direction:column; gap:12px; }
.sd-bar {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:var(--bg-primary); border:1px solid var(--border-glow);
  border-radius:var(--radius-full); font-family:var(--font-mono); font-size:15px; font-weight:600;
  color:var(--text-primary); box-shadow:var(--shadow-glow);
}
.sd-icon   { color:var(--accent2); font-size:15px; flex-shrink:0; }
.sd-text   { flex:1; }
.sd-cursor { color:var(--accent); animation:cursorBlink 1s ease-in-out infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.sd-results { background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.sd-section-label { padding:8px 16px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); background:var(--bg-card); border-bottom:1px solid var(--border); }
.sd-result-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); transition:var(--transition); cursor:pointer; }
.sd-result-item:last-child { border-bottom:none; }
.sd-result-item:hover { background:var(--bg-icon); }
.sdr-active { background:var(--bg-icon); }
.sdr-icon  { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.sdr-info  { flex:1; display:flex; flex-direction:column; gap:2px; }
.sdr-name  { font-size:14px; font-weight:600; color:var(--text-primary); }
.sdr-cat   { font-size:11px; color:var(--text-muted); }
.sdr-arrow { font-size:12px; color:var(--text-muted); }
.sd-popular { padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.sdp-label  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; }
.sdp-chips  { display:flex; flex-wrap:wrap; gap:8px; }
.sdp-chips span { padding:5px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-full); font-size:12px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); }
.sdp-chips span:hover { border-color:var(--accent); color:var(--accent2); background:var(--bg-icon); }
.search-features { display:flex; flex-direction:column; gap:16px; padding-top:8px; }
.sf-item { display:flex; align-items:flex-start; gap:14px; padding:18px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); transition:var(--transition); }
.sf-item:hover { border-color:var(--border-glow); transform:translateX(4px); }
.sf-icon { width:44px; height:44px; border-radius:var(--radius-md); background:var(--bg-icon); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--sf-c, var(--accent2)); flex-shrink:0; }
.sf-item h4 { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.sf-item p  { font-size:13px; color:var(--text-secondary); line-height:1.6; }

/* ══════════════════════════════════════════════════════════════════
   FAVORITES & HISTORY
══════════════════════════════════════════════════════════════════ */
.section-favorites { padding:100px 0; background:var(--bg-primary); }
.favhist-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fh-panel { background:var(--grad-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px; display:flex; flex-direction:column; gap:20px; }
.fhp-header { display:flex; align-items:flex-start; gap:14px; }
.fhp-icon { width:52px; height:52px; border-radius:var(--radius-md); background:var(--bg-icon); border:1px solid var(--border-icon); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--fhp-c, var(--accent2)); flex-shrink:0; }
.fhp-header h3 { font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--text-primary); margin-bottom:3px; }
.fhp-header p  { font-size:12px; color:var(--text-muted); }
.fhp-fav-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ffg-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); font-size:11px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); text-align:center; }
.ffg-item i { font-size:18px; }
.ffg-active { border-color:var(--accent); color:var(--accent2); background:var(--bg-icon); }
.ffg-add    { border-style:dashed; color:var(--text-muted); }
.ffg-add:hover { border-color:var(--accent); color:var(--accent2); }
.fhp-recent   { display:flex; flex-direction:column; gap:8px; }
.fhr-label    { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:4px; }
.fhr-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); font-size:13px; color:var(--text-secondary); transition:var(--transition); }
.fhr-item:hover { border-color:var(--accent); color:var(--text-primary); }
.fhr-icon { color:var(--accent2); font-size:14px; flex-shrink:0; }
.fhr-time { margin-left:auto; font-size:11px; color:var(--text-muted); flex-shrink:0; }
.history-list  { display:flex; flex-direction:column; gap:8px; }
.hl-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:var(--transition); }
.hl-item:hover { border-color:var(--border-glow); }
.hl-expr { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.hl-calc { font-size:11px; font-weight:600; color:var(--text-muted); }
.hl-eq   { font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-result { font-family:var(--font-mono); font-size:14px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.hl-actions { display:flex; gap:6px; flex-shrink:0; }
.hla-btn { width:30px; height:30px; border-radius:var(--radius-sm); background:var(--bg-icon); border:1px solid var(--border-icon); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--accent2); cursor:pointer; transition:var(--transition); }
.hla-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.hl-footer { display:flex; justify-content:flex-end; padding-top:4px; }
.hl-clear-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.20); border-radius:var(--radius-full); font-size:12px; font-weight:600; color:var(--accent-rose); cursor:pointer; transition:var(--transition); }
.hl-clear-btn:hover { background:rgba(239,68,68,0.15); border-color:var(--accent-rose); }

/* ══════════════════════════════════════════════════════════════════
   FORMULA LIBRARY
══════════════════════════════════════════════════════════════════ */
.section-formulas { padding:100px 0; background:var(--bg-secondary); }
.fl-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; }
.fl-tab  { padding:8px 20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-full); font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); }
.fl-tab:hover    { border-color:var(--accent); color:var(--accent2); background:var(--bg-icon); }
.fl-tab-active   { background:var(--bg-icon); border-color:var(--accent); color:var(--accent2); }
.formula-cards   { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
.formula-card    { background:var(--grad-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:14px; transition:var(--transition); }
.formula-card:hover { transform:translateY(-6px); border-color:var(--border-glow); box-shadow:var(--shadow-glow); }
.fmc-top        { display:flex; flex-direction:column; gap:8px; }
.fmc-category   { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); }
.fmc-formula    { font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--accent2); padding:10px 14px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md); }
.fmc-vars       { display:flex; flex-direction:column; gap:6px; }
.fmv-item       { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-secondary); }
.fmv-sym        { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--accent2); width:28px; flex-shrink:0; }
.fmc-example    { display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.fmce-label     { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.fmce-val       { font-family:var(--font-mono); font-size:12px; color:var(--accent-green); }

/* ══════════════════════════════════════════════════════════════════
   PERFORMANCE & ACCURACY
══════════════════════════════════════════════════════════════════ */
.section-performance { padding:100px 0; background:var(--bg-primary); }
.perf-grid   { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.perf-col    { display:flex; flex-direction:column; gap:24px; }
.perf-items  { display:flex; flex-direction:column; gap:12px; }
.perf-item   { display:flex; align-items:flex-start; gap:14px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:var(--transition); }
.perf-item:hover { border-color:var(--border-glow); transform:translateX(4px); }
.pi-icon { width:44px; height:44px; border-radius:var(--radius-md); background:var(--bg-icon); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--pi-c, var(--accent2)); flex-shrink:0; }
.perf-item h4 { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.perf-item p  { font-size:12px; color:var(--text-secondary); line-height:1.6; }
.trust-cards  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.trust-card   { display:flex; align-items:flex-start; gap:12px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:var(--transition); }
.trust-card:hover { border-color:var(--border-glow); }
.tc-icon      { font-size:20px; color:var(--accent2); flex-shrink:0; margin-top:2px; }
.trust-card h4 { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.trust-card p  { font-size:12px; color:var(--text-secondary); line-height:1.5; }
.trust-disclaimer { display:flex; align-items:flex-start; gap:10px; padding:16px; background:var(--bg-icon); border:1px solid var(--border-icon); border-radius:var(--radius-md); font-size:12px; color:var(--text-secondary); line-height:1.6; margin-top:8px; }
.trust-disclaimer i { color:var(--accent-cyan); flex-shrink:0; font-size:14px; margin-top:1px; }

/* ══════════════════════════════════════════════════════════════════
   CALCULATOR SHOWCASE
══════════════════════════════════════════════════════════════════ */
.section-calculators { padding:100px 0; background:var(--bg-secondary); }

/* Mode switcher */
.calc-mode-switcher { display:flex; justify-content:center; gap:0; margin-bottom:48px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; width:fit-content; margin-left:auto; margin-right:auto; }
.cms-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 28px; border-radius:var(--radius-full); font-size:14px; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:var(--transition); border:none; background:none; font-family:var(--font-display); }
.cms-btn:hover { color:var(--accent2); }
.cms-active { background:var(--grad-primary); color:#fff; box-shadow:0 4px 16px rgba(99,102,241,0.35); }

/* Demo grid */
.calc-demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:56px; }

/* Phone shell */
.calc-phone-wrap { display:flex; justify-content:center; animation:phoneFloat 4s ease-in-out infinite; }
.calc-phone {
  width:300px; background:var(--bg-primary); border-radius:44px;
  border:2px solid var(--border-glow); box-shadow:var(--shadow-phone), var(--shadow-inset);
  overflow:hidden; display:flex; flex-direction:column;
}
.calc-phone--sci { width:320px; }
.calc-phone-status { display:flex; justify-content:space-between; align-items:center; padding:10px 18px 4px; font-size:9px; color:var(--text-muted); }
.calc-status-icons { display:flex; gap:4px; }
.calc-app-bar { display:flex; align-items:center; gap:8px; padding:4px 14px 8px; border-bottom:1px solid var(--border); }
.calc-app-name { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--accent2); flex:1; }
.calc-icon-btn { width:28px; height:28px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.calc-icon-btn:hover { border-color:var(--accent); color:var(--accent2); }

/* Angle mode group */
.angle-mode-group { display:flex; gap:2px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-full); padding:2px; }
.am-btn { padding:3px 8px; border-radius:var(--radius-full); font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:var(--transition); border:none; background:none; }
.am-active { background:var(--accent); color:#fff; }

/* Display area */
.calc-display { padding:12px 16px 8px; min-height:80px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; position:relative; }
.calc-display--sci { min-height:96px; }
.calc-memory-indicator { position:absolute; top:8px; left:16px; font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--accent2); opacity:0; transition:var(--transition); }
.calc-memory-indicator.visible { opacity:1; }
.sci-steps-preview { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); line-height:1.5; min-height:0; max-height:48px; overflow:hidden; transition:var(--transition); }
.calc-expr { font-family:var(--font-mono); font-size:14px; color:var(--text-secondary); text-align:right; word-break:break-all; line-height:1.4; min-height:18px; }
.calc-result { font-family:var(--font-mono); font-size:26px; font-weight:800; color:var(--text-primary); text-align:right; line-height:1.2; min-height:32px; }
.calc-error { font-family:var(--font-mono); font-size:11px; color:var(--accent-rose); text-align:right; min-height:0; transition:var(--transition); }

/* Memory row */
.calc-mem-row { display:flex; gap:4px; padding:4px 10px; border-top:1px solid var(--border); }
.calc-mem-btn { flex:1; padding:6px 2px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:var(--transition); text-align:center; }
.calc-mem-btn:hover { border-color:var(--accent); color:var(--accent2); background:var(--bg-icon); }
.calc-mem-btn:active { transform:scale(0.95); }

/* Keypad — Basic (4-col) */
.calc-keypad { display:grid; gap:5px; padding:8px 10px 16px; }
.basic-keypad { grid-template-columns:repeat(4,1fr); }

/* Keypad — Scientific (5-col) */
.sci-keypad { grid-template-columns:repeat(5,1fr); }

/* Calculator keys */
.ck {
  display:flex; align-items:center; justify-content:center;
  padding:0; height:42px; border-radius:var(--radius-md);
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  cursor:pointer; transition:var(--transition); border:1px solid var(--border);
  user-select:none; -webkit-user-select:none;
}
.ck:active { transform:scale(0.92); }
.ck-num    { background:var(--bg-card); color:var(--text-primary); }
.ck-num:hover { background:var(--bg-icon); border-color:var(--accent); }
.ck-op     { background:rgba(245,158,11,0.10); color:var(--accent-amber); border-color:rgba(245,158,11,0.20); font-size:15px; }
.ck-op:hover { background:rgba(245,158,11,0.18); }
.ck-util   { background:var(--bg-icon); color:var(--accent2); border-color:var(--border-icon); }
.ck-util:hover { background:rgba(99,102,241,0.20); }
.ck-fn     { background:rgba(99,102,241,0.08); color:var(--accent3); border-color:rgba(99,102,241,0.15); font-size:11px; }
.ck-fn:hover { background:rgba(99,102,241,0.18); border-color:var(--accent); }
.ck-const  { background:rgba(16,185,129,0.10); color:var(--accent-green); border-color:rgba(16,185,129,0.20); }
.ck-const:hover { background:rgba(16,185,129,0.20); }
.ck-del    { background:rgba(239,68,68,0.08); color:var(--accent-rose); border-color:rgba(239,68,68,0.15); }
.ck-del:hover { background:rgba(239,68,68,0.18); }
.ck-eq     { background:var(--grad-primary); color:#fff; border:none; font-size:18px; box-shadow:0 4px 16px rgba(99,102,241,0.40); }
.ck-eq:hover { box-shadow:0 6px 24px rgba(99,102,241,0.55); }
.ck-span2  { grid-column:span 2; }

/* History drawer */
.calc-history-drawer { position:absolute; bottom:0; left:0; right:0; background:var(--bg-secondary); border-top:2px solid var(--border-glow); border-radius:0 0 42px 42px; max-height:65%; overflow:hidden; display:flex; flex-direction:column; z-index:10; transition:var(--transition); }
.calc-history-drawer[hidden] { display:none; }
.chd-header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--text-primary); }
.chd-clear  { font-size:11px; font-weight:600; color:var(--accent-rose); cursor:pointer; border:none; background:none; }
.chd-list   { overflow-y:auto; flex:1; padding:8px 12px; display:flex; flex-direction:column; gap:6px; }
.chd-empty  { font-size:12px; color:var(--text-muted); text-align:center; padding:12px; }
.chd-item   { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.chd-item:hover { border-color:var(--accent); }
.chd-expr   { flex:1; font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chd-res    { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent2); flex-shrink:0; }
.chd-copy   { font-size:11px; color:var(--text-muted); cursor:pointer; flex-shrink:0; transition:var(--transition); }
.chd-copy:hover { color:var(--accent2); }
.calc-phone { position:relative; }

/* Feature list */
.calc-features { padding:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.cf-title { font-family:var(--font-display); font-size:22px; font-weight:900; color:var(--text-primary); }
.cf-sub   { font-size:14px; color:var(--text-muted); }
.cf-list  { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.cf-list li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-secondary); }
.cf-list li i { color:var(--accent2); font-size:13px; flex-shrink:0; }

/* Steps strip */
.calc-steps-strip { background:var(--grad-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:32px 40px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:40px; }
.css-header { display:flex; flex-direction:column; gap:12px; }
.css-icon   { width:52px; height:52px; border-radius:var(--radius-md); background:var(--bg-icon); border:1px solid var(--border-icon); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--accent2); }
.css-header h3 { font-family:var(--font-display); font-size:22px; font-weight:900; color:var(--text-primary); }
.css-header p  { font-size:14px; color:var(--text-secondary); line-height:1.7; }
.css-demo      { display:flex; flex-direction:column; gap:8px; }
.cssd-input  { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md); }
.cssd-label  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); flex-shrink:0; }
.cssd-expr   { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--accent2); }
.cssd-step   { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); font-size:13px; color:var(--text-secondary); }
.cssd-step strong { color:var(--text-primary); }
.cssd-num    { font-size:10px; font-weight:700; color:var(--accent); background:var(--bg-icon); padding:2px 8px; border-radius:var(--radius-full); white-space:nowrap; flex-shrink:0; }
.cssd-result { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-icon); border:1px solid var(--border-icon); border-radius:var(--radius-md); }
.cssd-rlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.cssd-rval   { font-family:var(--font-mono); font-size:22px; font-weight:900; }

/* Final CTA strip */
.calc-final-cta { text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; padding:40px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); }
.cfc-statement  { font-size:17px; color:var(--text-secondary); line-height:1.8; max-width:680px; }
.cfc-ctas       { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* Light theme overrides for calculator keys */
[data-theme="light"] .ck-num  { background:rgba(0,0,0,0.04); color:var(--text-primary); }
[data-theme="light"] .ck-op   { background:rgba(184,130,0,0.08); color:var(--accent-amber); }
[data-theme="light"] .ck-util { background:rgba(79,70,229,0.08); color:var(--accent); }
[data-theme="light"] .ck-fn   { background:rgba(79,70,229,0.06); color:var(--accent); }
[data-theme="light"] .ck-del  { background:rgba(220,38,38,0.06); color:var(--accent-rose); }
[data-theme="light"] .ck-eq   { background:var(--grad-primary); color:#fff; }
[data-theme="light"] .calc-phone { background:var(--bg-secondary); }

/* Responsive */
@media(max-width:1024px){ .calc-demo-grid { grid-template-columns:1fr; } .calc-steps-strip { grid-template-columns:1fr; gap:24px; } }
@media(max-width:768px){
  .section-calculators { padding:72px 0; }
  .calc-phone { width:100%; max-width:320px; }
  .calc-phone--sci { max-width:340px; }
  .ck { height:38px; font-size:12px; }
  .ck-fn { font-size:10px; }
  .calc-steps-strip { padding:24px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
  .ch-phone-wrap,.float-card,.blob{animation:none!important;}
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-container{grid-template-columns:1fr;text-align:center;gap:48px;}
  .hero-content{align-items:center;}
  .hero-sub{text-align:center;}
  .hero-visual{display:none;}
  .hero-stats{justify-content:center;}
  .science-grid{grid-template-columns:1fr;}
  .step-by-step{grid-template-columns:1fr;}
  .assistant-showcase{grid-template-columns:1fr;}
  .search-showcase{grid-template-columns:1fr;}
  .favhist-grid{grid-template-columns:1fr;}
  .perf-grid{grid-template-columns:1fr;gap:48px;}
  .footer-container{grid-template-columns:1fr 1fr;gap:32px;}
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--nav-h:64px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .nav-logo-by{display:none;}
  .section-container{padding:0 20px;}
  .hero-container{padding:calc(var(--nav-h)+40px) 20px 60px;}
  .section-categories,.section-finance,.section-health,.section-science,.section-utility,.section-features,.section-android,.section-search,.section-favorites,.section-formulas,.section-performance,.section-download{padding:72px 0;}
  .section-header{margin-bottom:40px;}
  .finance-grid,.health-grid{grid-template-columns:1fr;}
  .sci-cards{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .utility-grid{grid-template-columns:1fr 1fr;}
  .cpb-grid{grid-template-columns:1fr 1fr;}
  .formula-cards{grid-template-columns:1fr;}
  .trust-cards{grid-template-columns:1fr;}
  .fhp-fav-grid{grid-template-columns:repeat(3,1fr);}
  .counter-strip{gap:0;padding:16px 20px;}
  .cs-item{padding:0 16px;}
  .footer-container{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-disclaimer{text-align:center;}
  .hero-ctas{justify-content:center;}
  .download-ctas{flex-direction:column;align-items:center;}
  .device-showcase{gap:24px;}
  .device-tablet{width:100%;max-width:340px;}
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .features-grid{grid-template-columns:1fr;}
  .utility-grid{grid-template-columns:1fr;}
  .cpb-grid{grid-template-columns:1fr;}
  .cs-div{display:none;}
  .counter-strip{flex-wrap:wrap;}
  .cs-item{padding:12px 20px;}
}