/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/css/landing.css ***!
  \*********************************************************************************************************************************************/
/* ============================================================
   CSS VARIABLES & RESET
   ============================================================ */
:root {
  --primary:       #173597;
  --primary-mid:   #1f4bc1;
  --accent:        #30880c;
  --accent-light:  #3fa80f;
  --white:         #ffffff;
  --off-white:     #f4f6fb;
  --surface:       #eef1f9;
  --border:        #d0d8ee;
  --text-primary:  #0e1a3d;
  --text-secondary:#3a4872;
  --text-muted:    #7a85a8;
  --error:         #c0392b;
  --error-bg:      #fdf0ef;
  --success:       #30880c;
  --success-bg:    #f0faf0;
  --warn:          #c07a00;
  --warn-bg:       #fffbf0;
  --shadow-sm: 0 2px 8px rgba(23,53,151,.08);
  --shadow-md: 0 6px 24px rgba(23,53,151,.13);
  --shadow-lg: 0 16px 48px rgba(23,53,151,.18);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --font: 'Plus Jakarta Sans', sans-serif;
  --nav-h: 68px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --white:         #0f1629;
  --off-white:     #151e38;
  --surface:       #1a2444;
  --border:        #2a3660;
  --text-primary:  #e8edff;
  --text-secondary:#9aaad4;
  --text-muted:    #5a6b9a;
  --shadow-sm: 0 2px 8px rgba(0,0,20,.25);
  --shadow-md: 0 6px 24px rgba(0,0,20,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,20,.45);
}

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

/* ============================================================
   UTILITY
   ============================================================ */
.container{width:min(1160px,92vw);margin:0 auto}
.section{padding:96px 0}
.section-label{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(48,136,12,.1);
  border:1px solid rgba(48,136,12,.25);
  padding:6px 14px;border-radius:100px;
  margin-bottom:20px;
}
.section-title{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;
  color:var(--text-primary);
  line-height:1.18;
  margin-bottom:16px;
}
.section-subtitle{
  font-size:1.05rem;
  color:var(--text-secondary);
  max-width:560px;
  line-height:1.7;
}
.text-center{text-align:center}
.text-center .section-subtitle{margin:0 auto}

/* ============================================================
   FIX 1 — NAVBAR (light-mode scroll visibility + mobile overflow)
   ============================================================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  /* FIX: overflow:visible so nothing gets clipped on mobile */
  overflow:visible;
  background:rgba(255,255,255,0);
  -webkit-transition:background var(--transition),backdrop-filter var(--transition),-webkit-box-shadow var(--transition);
  transition:background var(--transition),backdrop-filter var(--transition),-webkit-box-shadow var(--transition);
  transition:background var(--transition),box-shadow var(--transition),backdrop-filter var(--transition);
  transition:background var(--transition),box-shadow var(--transition),backdrop-filter var(--transition),-webkit-box-shadow var(--transition);
}
[data-theme="dark"] #navbar{background:rgba(15,22,41,0)}
#navbar.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
  -webkit-box-shadow:var(--shadow-sm);
          box-shadow:var(--shadow-sm);
}
[data-theme="dark"] #navbar.scrolled{background:rgba(15,22,41,.95)}
.nav-inner{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  width:min(1160px,92vw);margin:0 auto;
}

/* ── LOGO ─────────────────────────────────────────────────── */
.nav-logo{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;
  font-size:1.2rem;font-weight:800;letter-spacing:-.02em;
  color:#fff;
  text-decoration:none;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
}
/* FIX: scrolled state → dark blue for light mode, blue for dark mode */
#navbar.scrolled .nav-logo{color:var(--primary)}
[data-theme="dark"] #navbar.scrolled .nav-logo{color:#5d85f0}

.nav-logo-img{
  height:38px;
  width:auto;
  display:block;
  -webkit-transition:-webkit-filter var(--transition);
  transition:-webkit-filter var(--transition);
  transition:filter var(--transition);
  transition:filter var(--transition), -webkit-filter var(--transition);
}
#navbar.scrolled .nav-logo-img{
  border-radius:8px;
  background:#fff;
}
[data-theme="dark"] #navbar.scrolled .nav-logo-img{
  background:transparent;
  -webkit-filter:brightness(1.15);
          filter:brightness(1.15);
}

/* Footer brand logo */
.footer-logo-img{
  height:48px;
  width:auto;
  display:block;
  margin-bottom:16px;
  border-radius:8px;
}

/* ── NAV LINKS ─────────────────────────────────────────────── */
.nav-links{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:32px}
.nav-links a{
  font-size:.875rem;font-weight:600;
  /* Default (hero/dark bg): white text */
  color:rgba(255,255,255,.85);
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;
  background:var(--primary-mid);border-radius:2px;
  -webkit-transform:scaleX(0);
          transform:scaleX(0);-webkit-transform-origin:center;transform-origin:center;
  -webkit-transition:-webkit-transform var(--transition);
  transition:-webkit-transform var(--transition);
  transition:transform var(--transition);
  transition:transform var(--transition), -webkit-transform var(--transition);
}
/* FIX: scrolled light mode → dark navy, readable on white bg */
#navbar.scrolled .nav-links a{color:var(--text-primary)}
[data-theme="dark"] #navbar.scrolled .nav-links a{color:var(--text-secondary)}
/* Hover states */
.nav-links a:hover{color:rgba(255,255,255,1)}
#navbar.scrolled .nav-links a:hover{color:var(--primary)}
[data-theme="dark"] #navbar.scrolled .nav-links a:hover{color:#5d85f0}
.nav-links a:hover::after{-webkit-transform:scaleX(1);transform:scaleX(1)}

/* ── NAV ACTIONS ───────────────────────────────────────────── */
.nav-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px}
.btn-theme{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  font-size:1rem;-webkit-transition:all var(--transition);transition:all var(--transition);
}
/* FIX: scrolled light mode → visible on white bg */
#navbar.scrolled .btn-theme{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-secondary);
}
.btn-theme:hover{border-color:var(--primary-mid);color:var(--primary);-webkit-transform:rotate(20deg);transform:rotate(20deg)}
.btn-nav{
  padding:9px 22px;border-radius:100px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  color:#fff;font-size:.875rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  -webkit-box-shadow:0 4px 14px rgba(31,75,193,.35);
          box-shadow:0 4px 14px rgba(31,75,193,.35);
}
.btn-nav:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 6px 20px rgba(31,75,193,.45);box-shadow:0 6px 20px rgba(31,75,193,.45)}

/* ── HAMBURGER ─────────────────────────────────────────────── */
.hamburger{
  display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;
  /* FIX: ensures tap target is comfortable on mobile */
  min-width:38px;min-height:38px;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}
.hamburger span{
  display:block;width:24px;height:2px;
  border-radius:2px;
  background:#fff;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  -webkit-transform-origin:center;
          transform-origin:center;
}
/* FIX: scrolled → dark bars visible on white background */
#navbar.scrolled .hamburger span{background:var(--text-primary)}
[data-theme="dark"] #navbar.scrolled .hamburger span{background:var(--text-primary)}
.hamburger.open span:nth-child(1){-webkit-transform:translateY(7px) rotate(45deg);transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){-webkit-transform:translateY(-7px) rotate(-45deg);transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU ────────────────────────────────────────────── */
.mobile-menu{
  display:none;
  /* FIX: position correctly so it's never clipped */
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:999;
  background:var(--white);border-bottom:1px solid var(--border);
  padding:20px;
  -webkit-box-shadow:var(--shadow-md);
          box-shadow:var(--shadow-md);
  -webkit-transform:translateY(-10px);
          transform:translateY(-10px);opacity:0;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  pointer-events:none;
  /* FIX: ensure it renders over page content on all mobile browsers */
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;pointer-events:all;display:block}
.mobile-menu a{
  display:block;padding:12px 0;
  font-weight:600;color:var(--text-secondary);
  border-bottom:1px solid var(--border);
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{color:var(--primary)}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100vh;
  background:linear-gradient(160deg,#0b1e5e 0%,#173597 45%,#1a3e90 70%,#122c7a 100%);
  position:relative;overflow:hidden;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:var(--nav-h);
}
.hero-bg-shapes{position:absolute;inset:0;pointer-events:none}
.hero-circle{
  position:absolute;border-radius:50%;
  background:linear-gradient(135deg,rgba(31,75,193,.25),rgba(48,136,12,.12));
  border:1px solid rgba(255,255,255,.08);
}
.hero-circle:nth-child(1){width:600px;height:600px;top:-200px;right:-100px;-webkit-animation:float1 8s ease-in-out infinite;animation:float1 8s ease-in-out infinite}
.hero-circle:nth-child(2){width:400px;height:400px;bottom:-150px;left:-80px;-webkit-animation:float2 10s ease-in-out infinite;animation:float2 10s ease-in-out infinite}
.hero-circle:nth-child(3){width:200px;height:200px;top:20%;right:25%;-webkit-animation:float3 6s ease-in-out infinite;animation:float3 6s ease-in-out infinite}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black,transparent);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black,transparent);
}
@-webkit-keyframes float1{0%,100%{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}50%{-webkit-transform:translate(-30px,20px) scale(1.04);transform:translate(-30px,20px) scale(1.04)}}
@keyframes float1{0%,100%{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}50%{-webkit-transform:translate(-30px,20px) scale(1.04);transform:translate(-30px,20px) scale(1.04)}}
@-webkit-keyframes float2{0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}50%{-webkit-transform:translate(20px,-25px);transform:translate(20px,-25px)}}
@keyframes float2{0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}50%{-webkit-transform:translate(20px,-25px);transform:translate(20px,-25px)}}
@-webkit-keyframes float3{0%,100%{-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}50%{-webkit-transform:translate(-15px,15px) rotate(10deg);transform:translate(-15px,15px) rotate(10deg)}}
@keyframes float3{0%,100%{-webkit-transform:translate(0,0) rotate(0deg);transform:translate(0,0) rotate(0deg)}50%{-webkit-transform:translate(-15px,15px) rotate(10deg);transform:translate(-15px,15px) rotate(10deg)}}

.hero-content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  padding:80px 0;
  width:min(1160px,92vw);margin:0 auto;
}
.hero-eyebrow{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  padding:6px 14px;border-radius:100px;
  margin-bottom:24px;
  backdrop-filter:blur(8px);
}
.hero-eyebrow-dot{width:6px;height:6px;background:#4ded1c;border-radius:50%;-webkit-box-shadow:0 0 8px #4ded1c;box-shadow:0 0 8px #4ded1c;-webkit-animation:blink 2s ease-in-out infinite;animation:blink 2s ease-in-out infinite}
@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{
  font-size:clamp(2.8rem,6vw,5rem);
  font-weight:900;
  color:#fff;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.hero-title span{
  background:-webkit-gradient(linear,left top, right top,from(#5d85f0),to(#7ce846));
  background:linear-gradient(90deg,#5d85f0,#7ce846);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-tagline{
  font-size:1.15rem;font-weight:500;
  color:rgba(255,255,255,.75);
  line-height:1.65;margin-bottom:32px;
  max-width:480px;
}

/* Hero action row (Web AIMS button) */
.hero-actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:14px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0}
.btn-hero-primary{
  padding:14px 32px;border-radius:100px;border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  color:#fff;font-family:var(--font);font-size:.95rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);-webkit-box-shadow:0 4px 18px rgba(23,53,151,.4);box-shadow:0 4px 18px rgba(23,53,151,.4);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
}
.btn-hero-primary:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 8px 24px rgba(23,53,151,.5);box-shadow:0 8px 24px rgba(23,53,151,.5)}
.btn-hero-outline{
  padding:14px 32px;border-radius:100px;
  border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--font);font-size:.95rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);backdrop-filter:blur(8px);
}
.btn-hero-outline:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.65)}

/* Hero right stat cards */
.hero-visual{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}
.stats-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  padding:24px;
  backdrop-filter:blur(12px);
  -webkit-animation:fadeUp .6s ease both;
          animation:fadeUp .6s ease both;
}
.stats-card:nth-child(1){-webkit-animation-delay:.1s;animation-delay:.1s}
.stats-card:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}
.stats-card:nth-child(3){-webkit-animation-delay:.3s;animation-delay:.3s}
@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat-item{text-align:center}
.stat-num{font-size:1.8rem;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1}
.stat-label{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:4px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.module-pills{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px}
.module-pill{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:6px 14px;
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.8);
}
.pill-icon{font-size:.9rem}
.uptime-bar{background:rgba(255,255,255,.08);border-radius:100px;height:6px;margin-top:12px;overflow:hidden}
.uptime-fill{
  height:100%;background:-webkit-gradient(linear,left top, right top,from(#7ce846),to(#4ded1c));background:linear-gradient(90deg,#7ce846,#4ded1c);
  border-radius:100px;width:99.7%;
  -webkit-animation:barFill 1.2s ease .5s both;
          animation:barFill 1.2s ease .5s both;
}
@-webkit-keyframes barFill{from{width:0}to{width:99.7%}}
@keyframes barFill{from{width:0}to{width:99.7%}}
.uptime-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:6px;font-size:.75rem;color:rgba(255,255,255,.5)}

/* ============================================================
   DOWNLOAD SECTION — redesigned to differ from hero
   Light surface background + centered card layout
   ============================================================ */
#download{
  background:var(--off-white);
  position:relative;overflow:hidden;
  padding:96px 0;
  /* subtle top/bottom border to frame the section */
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* Decorative accent strip at the very top of the section */
#download::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:4px;
  background:-webkit-gradient(linear,left top, right top,from(var(--primary)),color-stop(var(--primary-mid)),color-stop(var(--accent)),to(#7ce846));
  background:linear-gradient(90deg,var(--primary),var(--primary-mid),var(--accent),#7ce846);
  pointer-events:none;
}
/* Soft radial glow behind the card */
#download::after{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,75,193,.06) 0%,transparent 70%);
  top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  pointer-events:none;
}
.download-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:72px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
}
/* Left: copy / headline — dark text on light bg */
.download-copy{}
.download-eyebrow{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(48,136,12,.08);
  border:1px solid rgba(48,136,12,.22);
  padding:6px 14px;border-radius:100px;
  margin-bottom:22px;
}
.download-eyebrow-dot{
  width:6px;height:6px;background:var(--accent);border-radius:50%;
  -webkit-box-shadow:0 0 6px var(--accent);
          box-shadow:0 0 6px var(--accent);
  -webkit-animation:blink 2s ease-in-out infinite;
          animation:blink 2s ease-in-out infinite;
}
.download-title{
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:900;color:var(--text-primary);
  line-height:1.1;letter-spacing:-.025em;
  margin-bottom:14px;
}
.download-title span{
  background:-webkit-gradient(linear,left top, right top,from(var(--primary)),to(var(--primary-mid)));
  background:linear-gradient(90deg,var(--primary),var(--primary-mid));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.download-subtitle{
  font-size:1rem;color:var(--text-secondary);
  line-height:1.7;margin-bottom:28px;max-width:420px;
}
.download-meta{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0}
.download-meta-item{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:7px;
  font-size:.8rem;font-weight:600;color:var(--text-muted);
}
.download-meta-item span:first-child{font-size:1rem}

/* Right: the gate card — now styled for the light section */
.download-gate-wrap{
  position:relative;
}
/* Subtle glow halo behind the card */
.download-gate-wrap::before{
  content:'';position:absolute;
  inset:-12px;border-radius:calc(var(--radius-lg) + 12px);
  background:linear-gradient(135deg,rgba(23,53,151,.07),rgba(48,136,12,.05));
  border:1px solid rgba(23,53,151,.08);
  pointer-events:none;
}

/* ── Download gate card: adapts to light AND dark mode ──────── */
/* Uses CSS variables so both themes work automatically           */
#download .hero-cta{
  background:var(--white);            /* #fff in light, #0f1629 in dark */
  border:1.5px solid var(--border);   /* adapts per theme               */
  border-left:3px solid var(--primary-mid);
  border-radius:var(--radius-lg);
  padding:32px;
  backdrop-filter:none;
  -webkit-box-shadow:var(--shadow-md);
          box-shadow:var(--shadow-md);
}
/* Inputs — always use theme-aware tokens */
#download .email-input,
#download .password-input{
  border-color:var(--border);
  background:var(--off-white);
  color:var(--text-primary);
}
#download .email-input::-webkit-input-placeholder, #download .password-input::-webkit-input-placeholder{color:var(--text-muted)}
#download .email-input::-moz-placeholder, #download .password-input::-moz-placeholder{color:var(--text-muted)}
#download .email-input:-ms-input-placeholder, #download .password-input:-ms-input-placeholder{color:var(--text-muted)}
#download .email-input::-ms-input-placeholder, #download .password-input::-ms-input-placeholder{color:var(--text-muted)}
#download .email-input::placeholder,
#download .password-input::placeholder{color:var(--text-muted)}
#download .email-input:focus,
#download .password-input:focus{
  border-color:var(--primary-mid);
  background:var(--white);
  -webkit-box-shadow:0 0 0 3px rgba(31,75,193,.12);
          box-shadow:0 0 0 3px rgba(31,75,193,.12);
}
/* CTA label */
#download .hero-cta-label{color:var(--text-muted)}
/* Back button */
#download .password-step-back{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-secondary);
}
#download .password-step-back:hover{background:var(--off-white)}
/* Email display */
#download .password-step-email-display{color:var(--text-secondary)}
/* Eye toggle */
#download .toggle-pw{color:var(--text-muted)}
#download .toggle-pw:hover{color:var(--primary-mid)}
/* Attempt dots */
#download .hero-attempts{color:var(--text-muted)}
#download .attempt-dot{background:var(--border)}
#download .attempt-dot.used{background:var(--error)}
/* Feedback messages */
#download .feedback-msg.error{background:rgba(192,57,43,.08);color:var(--error);border-color:rgba(192,57,43,.2)}
#download .feedback-msg.success{background:rgba(48,136,12,.08);color:var(--accent);border-color:rgba(48,136,12,.2)}
#download .feedback-msg.warn{background:rgba(192,122,0,.08);color:var(--warn);border-color:rgba(192,122,0,.2)}
/* Token bar */
#download .token-timer-label{color:var(--text-muted)}
#download .token-timer-bar{background:var(--border)}

/* Dark mode: download section and card both shift to dark surface */
[data-theme="dark"] #download{
  background:var(--off-white);        /* dark off-white: #151e38       */
  border-top-color:var(--border);
  border-bottom-color:var(--border);
}
[data-theme="dark"] #download .hero-cta{
  background:var(--surface);          /* dark surface: #1a2444          */
  border-color:var(--border);         /* dark border: #2a3660           */
  -webkit-box-shadow:0 8px 32px rgba(0,0,20,.35);
          box-shadow:0 8px 32px rgba(0,0,20,.35);
}
[data-theme="dark"] #download .download-gate-wrap::before{
  background:linear-gradient(135deg,rgba(93,133,240,.08),rgba(48,136,12,.05));
  border-color:rgba(255,255,255,.04);
}

/* ── Download gate base card (on dark hero bg, white-alpha is correct) ── */
.hero-cta{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-lg);
  padding:32px;
  backdrop-filter:blur(14px);
  position:relative;z-index:1;
  -webkit-box-shadow:0 8px 32px rgba(0,0,20,.22);
          box-shadow:0 8px 32px rgba(0,0,20,.22);
}
.hero-cta::before{display:none}
.hero-cta-label{
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:16px;
}
/* Step panels */
.step-panel{-webkit-transition:all .3s ease;transition:all .3s ease}
.step-panel.hidden{display:none}
/* Inputs */
.input-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.email-input,
.password-input{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;min-width:200px;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:var(--font);font-size:.95rem;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  outline:none;
}
.email-input::-webkit-input-placeholder, .password-input::-webkit-input-placeholder{color:rgba(255,255,255,.38)}
.email-input::-moz-placeholder, .password-input::-moz-placeholder{color:rgba(255,255,255,.38)}
.email-input:-ms-input-placeholder, .password-input:-ms-input-placeholder{color:rgba(255,255,255,.38)}
.email-input::-ms-input-placeholder, .password-input::-ms-input-placeholder{color:rgba(255,255,255,.38)}
.email-input::placeholder,.password-input::placeholder{color:rgba(255,255,255,.38)}
.email-input:focus,.password-input:focus{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.12)}
/* Password extras */
.password-step-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;margin-bottom:14px}
.password-step-back{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);border-radius:6px;
  padding:5px 10px;font-size:.78rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);cursor:pointer;
}
.password-step-back:hover{background:rgba(255,255,255,.18)}
.password-step-email-display{
  font-size:.82rem;color:rgba(255,255,255,.6);
  font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;
}
.password-row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:200px}
.password-input{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-right:48px}
.toggle-pw{
  position:absolute;right:14px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
  background:none;border:none;color:rgba(255,255,255,.5);
  font-size:1rem;padding:0;line-height:1;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);cursor:pointer;
}
.toggle-pw:hover{color:rgba(255,255,255,.9)}
/* Download button */
.btn-download{
  padding:14px 28px;border-radius:var(--radius-sm);border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;font-family:var(--font);font-size:.95rem;font-weight:700;
  white-space:nowrap;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  -webkit-box-shadow:0 4px 18px rgba(48,136,12,.4);
          box-shadow:0 4px 18px rgba(48,136,12,.4);
  position:relative;overflow:hidden;
}
.btn-download::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#ffffff22,transparent);
  opacity:0;-webkit-transition:opacity var(--transition);transition:opacity var(--transition);
}
.btn-download:hover:not(:disabled)::before{opacity:1}
.btn-download:hover:not(:disabled){-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 8px 24px rgba(48,136,12,.5);box-shadow:0 8px 24px rgba(48,136,12,.5)}
.btn-download:disabled{opacity:.6;cursor:not-allowed;-webkit-transform:none;transform:none}
/* Spinner */
.spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  -webkit-animation:spin .7s linear infinite;
          animation:spin .7s linear infinite;display:none;
}
.spinner.show{display:block}
@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
/* Feedback */
.feedback-msg{
  margin-top:14px;padding:12px 16px;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:600;
  display:none;-webkit-animation:fadeSlide .3s ease;animation:fadeSlide .3s ease;
}
.feedback-msg.show{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}
.feedback-msg.error{background:rgba(192,57,43,.15);color:#ff7b6e;border:1px solid rgba(192,57,43,.3)}
.feedback-msg.success{background:rgba(48,136,12,.15);color:#7ce846;border:1px solid rgba(48,136,12,.3)}
.feedback-msg.warn{background:rgba(192,122,0,.15);color:#ffd166;border:1px solid rgba(192,122,0,.3)}
@-webkit-keyframes fadeSlide{from{opacity:0;-webkit-transform:translateY(6px);transform:translateY(6px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeSlide{from{opacity:0;-webkit-transform:translateY(6px);transform:translateY(6px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
/* Attempt dots */
.hero-attempts{margin-top:10px;font-size:.78rem;color:rgba(255,255,255,.4)}
.attempt-dots{display:-webkit-box;display:-ms-flexbox;display:flex;gap:5px;margin-top:6px}
.attempt-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);-webkit-transition:background var(--transition);transition:background var(--transition)}
.attempt-dot.used{background:#ff7b6e}
/* Token countdown bar */
.token-timer{display:none;margin-top:12px}
.token-timer.show{display:block}
.token-timer-label{font-size:.72rem;color:rgba(255,255,255,.45);margin-bottom:5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.token-timer-bar{height:4px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden}
.token-timer-fill{height:100%;border-radius:100px;background:-webkit-gradient(linear,left top, right top,from(#7ce846),to(#4ded1c));background:linear-gradient(90deg,#7ce846,#4ded1c);-webkit-transition:width 1s linear;transition:width 1s linear}

/* ============================================================
   OVERVIEW
   ============================================================ */
#overview{background:var(--white)}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.overview-visual{position:relative}
.overview-card{
  background:var(--off-white);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;overflow:hidden;
}
.overview-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:-webkit-gradient(linear,left top, right top,from(var(--primary)),color-stop(var(--primary-mid)),to(var(--accent)));
  background:linear-gradient(90deg,var(--primary),var(--primary-mid),var(--accent));
}
.flow-steps{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0}
.flow-step{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--border);position:relative;
}
.flow-step:last-child{border-bottom:none}
.step-num{
  width:36px;height:36px;min-width:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.8rem;
  -webkit-box-shadow:0 4px 12px rgba(23,53,151,.3);
          box-shadow:0 4px 12px rgba(23,53,151,.3);
}
.step-title{font-weight:700;font-size:.9rem;color:var(--text-primary);margin-bottom:4px}
.step-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.connector{position:absolute;left:17px;top:52px;bottom:-16px;width:2px;background:-webkit-gradient(linear,left top, left bottom,from(var(--border)),to(transparent));background:linear-gradient(180deg,var(--border),transparent)}
.flow-step:last-child .connector{display:none}
.overview-badge{
  position:absolute;bottom:-16px;right:24px;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;padding:10px 20px;border-radius:100px;
  font-size:.8rem;font-weight:700;
  -webkit-box-shadow:0 6px 20px rgba(48,136,12,.35);
          box-shadow:0 6px 20px rgba(48,136,12,.35);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;
}

/* ============================================================
   FEATURES
   ============================================================ */
#features{background:var(--off-white)}
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;margin-top:56px;
}
/* ── Feature card: gradient border on hover ─────────────────────
   Technique: card sits on top of a ::before pseudo that holds the
   gradient. At rest the pseudo is hidden; on hover it glows through.
   Using background-image gradient border (padding-box / border-box)
   ─────────────────────────────────────────────────────────────── */
.feature-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:32px;
  /* Transparent border so gradient border pseudo shows through on hover */
  border:2px solid transparent;
  /* Gradient border via background-origin trick */
  background-image:none;
  background-clip:padding-box;
  /* Stacking context */
  position:relative;
  cursor:default;
  -webkit-transition:border-color var(--transition), -webkit-transform var(--transition), -webkit-box-shadow var(--transition);
  transition:border-color var(--transition), -webkit-transform var(--transition), -webkit-box-shadow var(--transition);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), -webkit-transform var(--transition), -webkit-box-shadow var(--transition);
}
/* Resting border — subtle, visible */
.feature-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius-md);
  padding:2px;                           /* border thickness               */
  background:linear-gradient(135deg,var(--primary),var(--primary-mid),var(--accent));
  /* Clip: show only the 2px ring, not the fill */
  -webkit-mask:
    -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box,
    -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
  opacity:0;                             /* invisible at rest               */
  -webkit-transition:opacity .3s ease, -webkit-box-shadow .3s ease;
  transition:opacity .3s ease, -webkit-box-shadow .3s ease;
  transition:opacity .3s ease, box-shadow .3s ease;
  transition:opacity .3s ease, box-shadow .3s ease, -webkit-box-shadow .3s ease;
  z-index:0;pointer-events:none;
}
/* Hover tint overlay */
.feature-card::after{
  content:'';position:absolute;inset:0;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(23,53,151,.04),rgba(48,136,12,.02));
  opacity:0;-webkit-transition:opacity var(--transition);transition:opacity var(--transition);
  z-index:0;pointer-events:none;
}
.feature-card:hover{
  -webkit-transform:translateY(-5px);
          transform:translateY(-5px);
  /* Glowing shadow in brand gradient colors for extra visibility */
  -webkit-box-shadow:
    0 8px 32px rgba(23,53,151,.18),
    0 0 0 2px transparent;
          box-shadow:
    0 8px 32px rgba(23,53,151,.18),
    0 0 0 2px transparent;
}
/* Make gradient border fully visible + add glow on hover */
.feature-card:hover::before{
  opacity:1;
  -webkit-box-shadow:0 0 18px 2px rgba(31,75,193,.25), 0 0 8px 1px rgba(48,136,12,.15);
          box-shadow:0 0 18px 2px rgba(31,75,193,.25), 0 0 8px 1px rgba(48,136,12,.15);
}
.feature-card:hover::after{opacity:1}
/* Ensure card content sits above both pseudo-elements */
.feature-card > *{position:relative;z-index:1}
.feature-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,rgba(23,53,151,.1),rgba(31,75,193,.06));
  border:1.5px solid rgba(23,53,151,.15);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  font-size:1.5rem;margin-bottom:20px;-webkit-transition:all var(--transition);transition:all var(--transition);
}
.feature-card:hover .feature-icon{
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  border-color:transparent;-webkit-box-shadow:0 8px 24px rgba(23,53,151,.35);box-shadow:0 8px 24px rgba(23,53,151,.35);-webkit-filter:brightness(1.1);filter:brightness(1.1);
}
.feature-card:hover .feature-icon .icon-emoji{-webkit-filter:brightness(10);filter:brightness(10)}
.feature-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:10px}
.feature-desc{font-size:.875rem;color:var(--text-secondary);line-height:1.65}
.feature-tag{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:5px;margin-top:16px;
  font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);background:rgba(48,136,12,.08);border:1px solid rgba(48,136,12,.2);
  padding:4px 10px;border-radius:100px;
}

/* ============================================================
   BENEFITS
   ============================================================ */
#benefits{background:var(--white)}
.benefits-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:56px}
.benefit-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}
.benefit-item{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:18px;padding:22px;
  background:var(--off-white);border:1.5px solid var(--border);
  border-radius:var(--radius-md);-webkit-transition:all var(--transition);transition:all var(--transition);cursor:default;
}
.benefit-item:hover{border-color:var(--primary-mid);-webkit-box-shadow:var(--shadow-sm);box-shadow:var(--shadow-sm);-webkit-transform:translateX(4px);transform:translateX(4px)}
.benefit-icon-wrap{
  width:46px;height:46px;min-width:46px;border-radius:12px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.3rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  -webkit-box-shadow:0 4px 14px rgba(23,53,151,.3);
          box-shadow:0 4px 14px rgba(23,53,151,.3);
}
.benefit-title{font-weight:700;font-size:.95rem;color:var(--text-primary);margin-bottom:5px}
.benefit-desc{font-size:.845rem;color:var(--text-secondary);line-height:1.6}
.benefits-visual{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}
.metric-card{
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  border-radius:var(--radius-md);padding:28px;color:#fff;position:relative;overflow:hidden;
}
.metric-card::before{
  content:'';position:absolute;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.06);top:-40px;right:-40px;
}
.metric-value{font-size:2.5rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.metric-unit{font-size:1.2rem;font-weight:700;opacity:.7;margin-left:2px}
.metric-label{font-size:.85rem;opacity:.75;margin-top:6px;font-weight:500}
.metric-sub{font-size:.75rem;opacity:.55;margin-top:2px}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-metric{background:var(--off-white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:20px}
.mini-metric-val{font-size:1.6rem;font-weight:900;color:var(--primary);letter-spacing:-.02em}
[data-theme="dark"] .mini-metric-val{color:#5d85f0}
.mini-metric-label{font-size:.78rem;color:var(--text-muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   USE CASES
   ============================================================ */
#usecases{background:var(--off-white)}
.usecases-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;margin-top:56px;
}
.usecase-card{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:28px;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);position:relative;overflow:hidden;
}
.usecase-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;bottom:0;
  background:-webkit-gradient(linear,left top, left bottom,from(var(--primary)),to(var(--primary-mid)));
  background:linear-gradient(180deg,var(--primary),var(--primary-mid));
  opacity:0;-webkit-transition:opacity var(--transition);transition:opacity var(--transition);
}
.usecase-card:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-box-shadow:var(--shadow-md);box-shadow:var(--shadow-md)}
.usecase-card:hover::before{opacity:1}
.usecase-icon{font-size:2rem;margin-bottom:16px}
.usecase-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.usecase-desc{font-size:.845rem;color:var(--text-secondary);line-height:1.65}
.usecase-modules{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px;margin-top:14px}
.usecase-module{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--primary-mid);background:rgba(31,75,193,.08);border:1px solid rgba(31,75,193,.18);
  padding:3px 9px;border-radius:100px;
}
[data-theme="dark"] .usecase-module{color:#7da4ff;background:rgba(93,133,240,.12);border-color:rgba(93,133,240,.2)}

/* ============================================================
   CTA BANNER
   ============================================================ */
#cta{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 60%,#1a3e90 100%);
  position:relative;overflow:hidden;padding:80px 0;
}
#cta::before{
  content:'';position:absolute;width:500px;height:500px;border-radius:50%;
  background:rgba(255,255,255,.04);top:-200px;right:-100px;
}
#cta::after{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(48,136,12,.12);bottom:-100px;left:-50px;
}
.cta-content{position:relative;z-index:2;text-align:center}
.cta-title{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.cta-sub{font-size:1.05rem;color:rgba(255,255,255,.7);margin-bottom:40px;max-width:520px;margin-left:auto;margin-right:auto}
.cta-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:14px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.btn-cta-primary{
  padding:16px 36px;border-radius:100px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;font-family:var(--font);font-size:1rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);-webkit-box-shadow:0 6px 24px rgba(48,136,12,.5);box-shadow:0 6px 24px rgba(48,136,12,.5);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
}
.btn-cta-primary:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 10px 32px rgba(48,136,12,.6);box-shadow:0 10px 32px rgba(48,136,12,.6)}
.btn-cta-outline{
  padding:16px 36px;border-radius:100px;
  border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--font);font-size:1rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);backdrop-filter:blur(8px);
}
.btn-cta-outline:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6)}

/* ============================================================
   FOOTER
   ============================================================ */
#footer{background:var(--text-primary);color:rgba(255,255,255,.75);padding:64px 0 32px}
[data-theme="dark"] #footer{background:#080e22}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand .logo-badge{margin-bottom:16px}
.footer-brand-name{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:10px}
.footer-brand-desc{font-size:.845rem;line-height:1.7;color:rgba(255,255,255,.55);max-width:260px}
.footer-col-title{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-col a{display:block;font-size:.875rem;color:rgba(255,255,255,.6);margin-bottom:12px;-webkit-transition:color var(--transition);transition:color var(--transition)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-top:28px;gap:16px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.footer-copyright{font-size:.8rem;color:rgba(255,255,255,.35)}
.footer-legal{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.footer-legal-link{
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.45);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.2);
  cursor:pointer;background:none;border:none;padding:0;
  font-family:var(--font);
  -webkit-transition:color var(--transition),text-decoration-color var(--transition);
  transition:color var(--transition),text-decoration-color var(--transition);
}
.footer-legal-link:hover{color:rgba(255,255,255,.85);text-decoration-color:rgba(255,255,255,.5)}

/* ============================================================
   FIX 2 — MODAL SYSTEM (bottom padding fix + login modal)
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(8,14,34,.72);
  backdrop-filter:blur(6px);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  -webkit-transition:opacity .28s ease;
  transition:opacity .28s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:var(--white);
  border-radius:var(--radius-lg);
  width:min(720px,100%);
  max-height:82vh;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-shadow:0 32px 80px rgba(8,14,34,.5);
          box-shadow:0 32px 80px rgba(8,14,34,.5);
  -webkit-transform:translateY(16px) scale(.98);
          transform:translateY(16px) scale(.98);
  -webkit-transition:-webkit-transform .28s ease;
  transition:-webkit-transform .28s ease;
  transition:transform .28s ease;
  transition:transform .28s ease, -webkit-transform .28s ease;
  /* FIX: remove overflow:hidden — it was clipping the scroll area bottom.
     Let the inner .modal-body handle its own scrolling instead. */
  overflow:visible;
}
.modal-overlay.open .modal-box{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}
.modal-header{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  padding:24px 32px 20px;
  border-bottom:1px solid var(--border);
  -ms-flex-negative:0;
      flex-shrink:0;
  /* Re-apply the border-radius only to the header top corners */
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--white);
}
.modal-title{font-size:1.15rem;font-weight:800;color:var(--text-primary)}
.modal-subtitle{font-size:.78rem;color:var(--text-muted);margin-top:3px}
.modal-close{
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-muted);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  font-size:1.1rem;line-height:1;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);-ms-flex-negative:0;flex-shrink:0;
}
.modal-close:hover{background:var(--primary);border-color:var(--primary);color:#fff;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
/* MODAL BODY: fills remaining space and scrolls internally */
.modal-body{
  overflow-y:auto;
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;                /* grow to fill remaining modal height          */
  padding:28px 32px;
  font-size:.9rem;color:var(--text-secondary);line-height:1.75;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  /* Round the bottom corners of the scrollable area */
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:var(--white);
}
.modal-body::-webkit-scrollbar{width:5px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:100px}
/* Spacer at the bottom of every modal body — adds visual breathing room
   above the rounded corner so text never looks clipped */
.modal-body::after{
  content:'';display:block;height:40px;
}
/* Typography inside modals */
.modal-body h2{
  font-size:1rem;font-weight:800;color:var(--text-primary);
  margin:24px 0 8px;padding-bottom:6px;
  border-bottom:2px solid var(--surface);
}
.modal-body h2:first-child{margin-top:0}
.modal-body p{margin-bottom:12px}
.modal-body ul{margin:8px 0 12px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:6px}
.modal-body ul li{list-style:disc}
.modal-body strong{color:var(--text-primary);font-weight:700}
.modal-body .modal-updated{
  display:inline-block;margin-bottom:20px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:rgba(48,136,12,.08);
  border:1px solid rgba(48,136,12,.2);padding:4px 12px;border-radius:100px;
}

/* ── Login modal specific ─────────────────────────────────── */
/* Compact, centered modal — narrower than T&C modals */
#modalLogin .modal-box{
  width:min(460px,100%);
}
.login-modal-body{
  padding:32px 36px 40px; /* FIX 2: solid bottom padding */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;
}
.login-logo-row{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:24px;
}
.login-logo-img{height:52px;width:auto;border-radius:10px}
.login-form-title{
  font-size:1.25rem;font-weight:800;color:var(--text-primary);
  text-align:center;margin-bottom:6px;
}
.login-form-sub{
  font-size:.84rem;color:var(--text-muted);text-align:center;
  margin-bottom:28px;line-height:1.55;
}
.login-field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:7px;margin-bottom:16px}
.login-field label{
  font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);
}
.login-input{
  width:100%;padding:13px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  background:var(--off-white);
  color:var(--text-primary);
  font-family:var(--font);font-size:.95rem;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);outline:none;
}
.login-input:focus{border-color:var(--primary-mid);background:var(--white);-webkit-box-shadow:0 0 0 3px rgba(31,75,193,.12);box-shadow:0 0 0 3px rgba(31,75,193,.12)}
.login-input::-webkit-input-placeholder{color:var(--text-muted)}
.login-input::-moz-placeholder{color:var(--text-muted)}
.login-input:-ms-input-placeholder{color:var(--text-muted)}
.login-input::-ms-input-placeholder{color:var(--text-muted)}
.login-input::placeholder{color:var(--text-muted)}
.login-pw-wrap{position:relative}
.login-pw-wrap .login-input{padding-right:46px}
.login-toggle-pw{
  position:absolute;right:14px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
  background:none;border:none;color:var(--text-muted);
  font-size:1rem;padding:0;line-height:1;cursor:pointer;
  -webkit-transition:color var(--transition);
  transition:color var(--transition);
}
.login-toggle-pw:hover{color:var(--primary)}
.login-error{
  padding:10px 14px;border-radius:var(--radius-sm);
  background:rgba(192,57,43,.08);color:var(--error);
  border:1px solid rgba(192,57,43,.22);
  font-size:.84rem;font-weight:600;
  display:none;margin-bottom:14px;
  -webkit-animation:fadeSlide .25s ease;
          animation:fadeSlide .25s ease;
}
.login-error.show{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px}
.login-attempts{
  font-size:.75rem;color:var(--text-muted);
  text-align:center;margin-bottom:14px;
}
.login-attempt-dots{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:5px;margin-top:5px}
.login-attempt-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border);-webkit-transition:background var(--transition);transition:background var(--transition);
}
.login-attempt-dot.used{background:var(--error)}
.btn-login{
  width:100%;padding:14px;border-radius:var(--radius-sm);border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  color:#fff;font-family:var(--font);font-size:1rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  -webkit-box-shadow:0 4px 18px rgba(23,53,151,.3);
          box-shadow:0 4px 18px rgba(23,53,151,.3);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px;
  margin-top:4px;
}
.btn-login:hover:not(:disabled){-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 8px 24px rgba(23,53,151,.4);box-shadow:0 8px 24px rgba(23,53,151,.4)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;-webkit-transform:none;transform:none}
.login-spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  -webkit-animation:spin .7s linear infinite;
          animation:spin .7s linear infinite;display:none;
}
.login-spinner.show{display:block}

/* ============================================================
   EULA MODAL
   Triggered after successful email+password verification.
   User must check Agree to proceed with download.
   ============================================================ */
#modalEula .modal-box{
  width:min(680px,100%);
  max-height:88vh;
}
/* EULA body: scrollable content area */
#modalEula .modal-body{
  padding:24px 32px;
}
/* Sticky footer inside EULA modal: checkbox + buttons */
.eula-footer{
  -ms-flex-negative:0;
      flex-shrink:0;
  padding:20px 32px 24px;
  border-top:1px solid var(--border);
  background:var(--off-white);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:14px;
}
/* Agree checkbox row */
.eula-agree-row{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:12px;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}
.eula-agree-checkbox{
  width:18px;height:18px;min-width:18px;
  border:2px solid var(--border);
  border-radius:4px;
  background:var(--white);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  margin-top:2px;
  position:relative;
}
.eula-agree-row input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
.eula-agree-row input[type="checkbox"]:checked + .eula-agree-checkbox{
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  border-color:var(--primary);
}
.eula-agree-row input[type="checkbox"]:checked + .eula-agree-checkbox::after{
  content:'✓';
  color:#fff;font-size:.75rem;font-weight:800;line-height:1;
}
.eula-agree-label{
  font-size:.875rem;font-weight:600;color:var(--text-primary);
  line-height:1.5;
}
.eula-agree-label span{color:var(--text-muted);font-weight:400}
/* Action buttons */
.eula-actions{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;gap:12px;-ms-flex-wrap:wrap;flex-wrap:wrap;
}
.btn-eula-agree{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;padding:13px 24px;border-radius:var(--radius-sm);border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  color:#fff;font-family:var(--font);font-size:.95rem;font-weight:700;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);
  -webkit-box-shadow:0 4px 16px rgba(23,53,151,.3);
          box-shadow:0 4px 16px rgba(23,53,151,.3);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px;
  cursor:pointer;
}
.btn-eula-agree:hover:not(:disabled){-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 8px 24px rgba(23,53,151,.4);box-shadow:0 8px 24px rgba(23,53,151,.4)}
.btn-eula-agree:disabled{opacity:.45;cursor:not-allowed;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}
.btn-eula-decline{
  padding:13px 24px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  background:transparent;
  color:var(--text-secondary);font-family:var(--font);font-size:.95rem;font-weight:600;
  -webkit-transition:all var(--transition);
  transition:all var(--transition);cursor:pointer;
  white-space:nowrap;
}
.btn-eula-decline:hover{background:var(--surface);border-color:var(--text-muted);color:var(--text-primary)}
/* Eula spinner */
.eula-spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  -webkit-animation:spin .7s linear infinite;
          animation:spin .7s linear infinite;display:none;
}
.eula-spinner.show{display:block}
@media(max-width:540px){
  .eula-footer{padding:16px 20px 20px}
  .eula-actions{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
  .btn-eula-decline{width:100%;text-align:center}
  #modalEula .modal-body{padding:20px 20px}
}

/* ============================================================
   TOAST
   ============================================================ */
#toast-container{
  position:fixed;top:90px;right:20px;z-index:9999;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px;
}
.toast{
  padding:14px 20px;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:600;
  -webkit-box-shadow:var(--shadow-lg);
          box-shadow:var(--shadow-lg);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;min-width:280px;
  -webkit-animation:toastIn .35s ease;
          animation:toastIn .35s ease;backdrop-filter:blur(12px);
}
.toast.removing{-webkit-animation:toastOut .3s ease forwards;animation:toastOut .3s ease forwards}
@-webkit-keyframes toastIn{from{opacity:0;-webkit-transform:translateX(30px);transform:translateX(30px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes toastIn{from{opacity:0;-webkit-transform:translateX(30px);transform:translateX(30px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@-webkit-keyframes toastOut{from{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(30px);transform:translateX(30px)}}
@keyframes toastOut{from{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(30px);transform:translateX(30px)}}
.toast.success{background:rgba(48,136,12,.92);color:#fff;border:1px solid rgba(100,220,60,.3)}
.toast.error{background:rgba(192,57,43,.92);color:#fff;border:1px solid rgba(240,100,80,.3)}
.toast.warn{background:rgba(170,100,0,.92);color:#fff;border:1px solid rgba(255,190,60,.3)}
.toast.info{background:rgba(23,53,151,.92);color:#fff;border:1px solid rgba(93,133,240,.3)}

/* ============================================================
   DIVIDER + SCROLL ANIMATIONS
   ============================================================ */
.divider{width:64px;height:4px;border-radius:100px;background:-webkit-gradient(linear,left top, right top,from(var(--primary)),to(var(--accent)));background:linear-gradient(90deg,var(--primary),var(--accent));margin-bottom:24px}
.text-center .divider{margin-left:auto;margin-right:auto}
.reveal{opacity:0;-webkit-transform:translateY(28px);transform:translateY(28px);-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,transform .6s ease;transition:opacity .6s ease,transform .6s ease,-webkit-transform .6s ease}
.reveal.visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.reveal-left{opacity:0;-webkit-transform:translateX(-28px);transform:translateX(-28px);-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,transform .6s ease;transition:opacity .6s ease,transform .6s ease,-webkit-transform .6s ease}
.reveal-left.visible{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
.reveal-right{opacity:0;-webkit-transform:translateX(28px);transform:translateX(28px);-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,transform .6s ease;transition:opacity .6s ease,transform .6s ease,-webkit-transform .6s ease}
.reveal-right.visible{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;gap:48px}
  .hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .overview-grid{grid-template-columns:1fr;gap:40px}
  .benefits-layout{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .download-inner{grid-template-columns:1fr;gap:48px}
  .download-gate-wrap::before{display:none}
}
@media(max-width:768px){
  .section{padding:64px 0}
  /* FIX 3: hide desktop nav, show hamburger */
  .nav-links,.btn-nav{display:none}
  .hamburger{display:-webkit-box;display:-ms-flexbox;display:flex}
  .hero-content{padding:40px 0}
  .hero-visual{grid-template-columns:1fr}
  .hero-visual .stats-card:nth-child(3){display:none}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center}
  .footer-legal{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
  .cta-actions{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  .btn-cta-primary,.btn-cta-outline{width:100%;max-width:320px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
  /* FIX 2: modal on mobile — keep header compact */
  .modal-header{padding:20px 20px 16px}
  .modal-body{padding:20px 20px}
  .login-modal-body{padding:24px 24px 40px}
  /* Download section */
  #download{padding:64px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .download-subtitle{max-width:100%}
  .download-meta{gap:14px}
}
@media(max-width:480px){
  .features-grid{grid-template-columns:1fr}
  .usecases-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .input-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
  .email-input,.password-input{min-width:auto}
  .metrics-grid{grid-template-columns:1fr}
  /* FIX 3: prevent hero title overflow */
  .hero-title{font-size:clamp(2rem,10vw,3.5rem)}
}