/* ==========================================================================
   API EXPRESS — PREMIUM DESIGN SYSTEM
   File: assets/css/style.css
   Version 3.0 · Production
   ========================================================================== */

/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Colors */
  --bg:#ffffff;
  --bg2:#f7f8fa;
  --bg3:#eef0f5;
  --border:#e4e7ed;
  --border2:#cdd0db;
  --accent:#0f4fff;
  --accent-h:#0039d6;
  --accent2:#00b87c;
  --accent3:#ff4d2e;
  --text:#0a0e1a;
  --text2:#3d4459;
  --muted:#7a839e;

  /* Typography */
  --font-head:'Fraunces', Georgia, serif;
  --font-body:'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radius */
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:20px;

  /* Premium layered shadows */
  --shadow-sm:0 1px 2px rgba(10,14,26,0.04);
  --shadow:0 1px 3px rgba(10,14,26,0.05), 0 4px 16px rgba(10,14,26,0.06);
  --shadow-md:0 2px 6px rgba(10,14,26,0.06), 0 8px 24px rgba(10,14,26,0.08);
  --shadow-lg:0 4px 12px rgba(10,14,26,0.06), 0 16px 48px rgba(10,14,26,0.10);
  --shadow-xl:0 8px 24px rgba(10,14,26,0.08), 0 24px 64px rgba(10,14,26,0.12);

  /* Easing curves — premium feel */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --max:1200px;
  --nav-h:68px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv01','cv11';
}

a{text-decoration:none;color:inherit}
img,svg{max-width:100%;display:block;height:auto}
button{font-family:inherit}

::selection{background:rgba(15,79,255,0.15);color:var(--text)}

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

/* Scrollbar polish */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── LAYOUT ── */
.mx{max-width:var(--max);margin:0 auto}
section{padding:5rem 5%}
.container{max-width:var(--max);margin:0 auto;padding:0 5%}

/* ── TOPBAR ── */
.topbar{
  background:linear-gradient(90deg,#0a1a5c 0%, #0f4fff 50%, #1a55ff 100%);
  color:#fff;
  text-align:center;
  font-size:0.88rem;
  padding:0.55rem 5%;
  font-weight:500;
  letter-spacing:0.005em;
  position:relative;
  overflow:hidden;
}
.topbar::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  animation:topbarShine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes topbarShine{
  0%,100%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
}
.topbar a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  margin-left:0.4rem;
  font-weight:600;
  transition:opacity 0.15s var(--ease-out);
}
.topbar a:hover{opacity:0.85}

/* ── NAVIGATION ── */
.nav{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:1.5rem;
  transition:box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
/* Shadow appears when user scrolls (JS adds .scrolled class) */
.nav.scrolled{
  box-shadow:0 1px 3px rgba(10,14,26,0.04), 0 8px 24px rgba(10,14,26,0.06);
  border-color:transparent;
}

.nav-logo{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.4rem;
  color:var(--text);
  letter-spacing:-0.025em;
  flex-shrink:0;
  transition:opacity 0.2s var(--ease-out);
}
.nav-logo:hover{opacity:0.8}
.nav-logo span{color:var(--accent)}

.nav-center{
  display:flex;
  align-items:center;
  flex:1;
  margin-left:1rem;
  gap:0.2rem;
}

/* Nav items — with premium underline animation */
.nav-item{position:relative}

.nav-item>a,
.nav-item>button,
a.nav-item{
  display:flex;
  align-items:center;
  gap:0.3rem;
  padding:0.55rem 1rem;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text2);
  background:none;
  border:none;
  cursor:pointer;
  border-radius:8px;
  transition:color 0.2s var(--ease-out), background 0.2s var(--ease-out);
  white-space:nowrap;
  font-family:inherit;
  line-height:1.4;
  letter-spacing:-0.005em;
  position:relative;
}

/* Underline animation element */
.nav-item>a::after,
a.nav-item::after{
  content:'';
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:0.35rem;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 0.3s var(--ease-out);
}
.nav-item>a:hover::after,
a.nav-item:hover::after{transform:scaleX(1)}

.nav-item>a:hover,
.nav-item>button:hover,
a.nav-item:hover{
  color:var(--accent);
  background:rgba(15,79,255,0.04);
}

/* Active state */
.nav-item>a.active,
a.nav-item.active{
  color:var(--accent);
  font-weight:600;
  background:rgba(15,79,255,0.06);
}
.nav-item>a.active::after,
a.nav-item.active::after{transform:scaleX(1)}

.chevron{
  font-size:0.55rem;
  opacity:0.5;
  transition:transform 0.25s var(--ease-out);
  display:inline-block;
  margin-top:1px;
}
.nav-item:hover .chevron{transform:rotate(180deg);opacity:0.7}

/* Dropdown — premium reveal */
.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:0.65rem;
  box-shadow:var(--shadow-xl);
  min-width:480px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(0.98);
  transform-origin:top left;
  transition:opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.15rem;
  z-index:201;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.dropdown-item{
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  padding:0.7rem 0.8rem;
  border-radius:10px;
  transition:background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.dropdown-item:hover{
  background:var(--bg2);
  transform:translateX(2px);
}

.di-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
  transition:transform 0.25s var(--ease-spring);
}
.dropdown-item:hover .di-icon{transform:scale(1.08)}

.di-title{
  font-size:0.94rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.15rem;
  letter-spacing:-0.005em;
}
.di-desc{
  font-size:0.82rem;
  color:var(--muted);
  line-height:1.45;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:0.65rem;
  margin-left:auto;
  flex-shrink:0;
}

/* Mobile hamburger */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  transition:border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.nav-toggle:hover{border-color:var(--accent);background:rgba(15,79,255,0.03)}
.nav-toggle span{
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── BUTTONS ── */
.btn-nav-ghost{
  padding:0.5rem 1.1rem;
  border-radius:8px;
  font-size:0.92rem;
  font-weight:600;
  color:var(--text2);
  border:1px solid var(--border);
  transition:all 0.2s var(--ease-out);
  font-family:inherit;
  letter-spacing:-0.005em;
}
.btn-nav-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(15,79,255,0.03);
  transform:translateY(-1px);
}

.btn-nav-fill{
  padding:0.5rem 1.2rem;
  border-radius:8px;
  font-size:0.92rem;
  font-weight:700;
  background:var(--accent);
  color:#fff;
  transition:all 0.25s var(--ease-out);
  font-family:inherit;
  border:none;
  cursor:pointer;
  letter-spacing:-0.005em;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,79,255,0.15), 0 4px 12px rgba(15,79,255,0.15);
}
.btn-nav-fill::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s var(--ease-out);
}
.btn-nav-fill:hover::before{left:100%}
.btn-nav-fill:hover{
  background:var(--accent-h);
  box-shadow:0 2px 6px rgba(15,79,255,0.2), 0 8px 20px rgba(15,79,255,0.3);
  transform:translateY(-1px);
}

/* Primary button — premium */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  background:var(--accent);
  color:#fff;
  font-family:inherit;
  font-weight:700;
  font-size:1rem;
  padding:0.9rem 1.9rem;
  border-radius:10px;
  transition:all 0.25s var(--ease-out);
  box-shadow:0 1px 3px rgba(15,79,255,0.15), 0 4px 14px rgba(15,79,255,0.25);
  border:none;
  cursor:pointer;
  letter-spacing:-0.008em;
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition:left 0.7s var(--ease-out);
}
.btn-primary:hover::before{left:100%}
.btn-primary:hover{
  background:var(--accent-h);
  box-shadow:0 2px 6px rgba(15,79,255,0.2), 0 10px 28px rgba(15,79,255,0.35);
  transform:translateY(-2px);
}
.btn-primary:active{transform:translateY(0)}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  background:#fff;
  color:var(--text);
  font-family:inherit;
  font-weight:600;
  font-size:1rem;
  padding:0.9rem 1.9rem;
  border-radius:10px;
  border:1px solid var(--border2);
  transition:all 0.25s var(--ease-out);
  cursor:pointer;
  letter-spacing:-0.008em;
}
.btn-secondary:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(15,79,255,0.03);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,79,255,0.08);
}

.btn-cw{
  background:#fff;
  color:var(--accent);
  font-weight:700;
  font-size:1rem;
  padding:0.9rem 2rem;
  border-radius:10px;
  transition:all 0.25s var(--ease-out);
  box-shadow:0 4px 16px rgba(0,0,0,0.15), 0 8px 32px rgba(0,0,0,0.12);
  font-family:inherit;
  border:none;
  cursor:pointer;
  letter-spacing:-0.008em;
}
.btn-cw:hover{
  box-shadow:0 8px 28px rgba(0,0,0,0.2), 0 16px 48px rgba(0,0,0,0.16);
  transform:translateY(-2px);
}

.btn-cg{
  border:1.5px solid rgba(255,255,255,0.35);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  padding:0.9rem 2rem;
  border-radius:10px;
  transition:all 0.25s var(--ease-out);
  font-family:inherit;
  background:transparent;
  cursor:pointer;
  letter-spacing:-0.008em;
}
.btn-cg:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.1);
  transform:translateY(-2px);
}

/* ── BREADCRUMB ── */
.breadcrumb{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0.85rem 5%;
  font-size:0.82rem;
  color:var(--muted);
  letter-spacing:-0.005em;
}
.breadcrumb a{
  color:var(--muted);
  transition:color 0.15s var(--ease-out);
}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 0.5rem;opacity:0.6}

/* ── TYPOGRAPHY ── */
.eyebrow{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.7rem;
  display:block;
}

h1{
  font-family:var(--font-head);
  font-size:clamp(2.2rem, 4vw, 3.6rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.03em;
  color:var(--text);
  margin-bottom:1.25rem;
  font-variation-settings:'opsz' 144;
}
h1 em{font-style:italic;color:var(--accent);font-weight:600}

h2{
  font-family:var(--font-head);
  font-size:clamp(1.8rem, 3vw, 2.7rem);
  font-weight:700;
  letter-spacing:-0.028em;
  line-height:1.12;
  margin-bottom:0.85rem;
  color:var(--text);
  font-variation-settings:'opsz' 144;
}

h3{
  font-family:var(--font-head);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-0.018em;
  color:var(--text);
  margin-bottom:0.55rem;
}

.sec-sub{
  color:var(--text2);
  font-size:1rem;
  line-height:1.75;
  max-width:600px;
  margin-bottom:2.5rem;
  letter-spacing:-0.003em;
}

.body-p{
  color:var(--text2);
  font-size:1rem;
  line-height:1.85;
  margin-bottom:1.1rem;
  letter-spacing:-0.003em;
}
.body-p:last-child{margin-bottom:0}
.body-p strong{color:var(--text);font-weight:700}

/* ── HERO ── */
.hero{
  padding:80px 5% 0;
  background:linear-gradient(175deg, #eef3ff 0%, #f7f8fa 50%, #fff 100%);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(15,79,255,0.2), transparent);
}

.hero-glow{
  position:absolute;
  top:-80px;
  right:-80px;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(15,79,255,0.09) 0%, transparent 65%);
  pointer-events:none;
  animation:heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{transform:scale(1);opacity:0.8}
  100%{transform:scale(1.1);opacity:1}
}

.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
  max-width:var(--max);
  margin:0 auto;
  padding-bottom:72px;
  position:relative;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:100px;
  padding:0.32rem 1rem 0.32rem 0.4rem;
  font-size:0.86rem;
  font-weight:600;
  color:var(--text2);
  margin-bottom:1.5rem;
  box-shadow:0 1px 3px rgba(10,14,26,0.05), 0 4px 12px rgba(10,14,26,0.04);
  transition:box-shadow 0.25s var(--ease-out);
}
.hero-badge:hover{box-shadow:0 2px 6px rgba(10,14,26,0.06), 0 8px 20px rgba(10,14,26,0.06)}

.badge-pip{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:0.65rem;
  font-weight:700;
  position:relative;
}
.badge-pip::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid var(--accent2);
  opacity:0.4;
  animation:pipPulse 2s ease-in-out infinite;
}
@keyframes pipPulse{
  0%,100%{transform:scale(1);opacity:0.4}
  50%{transform:scale(1.15);opacity:0}
}

.hero-sub{
  font-size:1.05rem;
  color:var(--text2);
  max-width:520px;
  margin-bottom:2rem;
  line-height:1.75;
  letter-spacing:-0.003em;
}

.hero-actions{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-bottom:1.75rem;
}

.hero-trust{
  display:flex;
  align-items:center;
  gap:0.9rem;
  font-size:0.86rem;
  color:var(--muted);
  flex-wrap:wrap;
}
.trust-div{
  width:1px;
  height:14px;
  background:var(--border);
  flex-shrink:0;
}
.trust-item{display:flex;align-items:center;gap:0.3rem}
.ti-check{color:var(--accent2);font-weight:700}

/* ── STATS BAR ── */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-bottom:1px solid var(--border);
  background:#fff;
}
.stats-bar.five{grid-template-columns:repeat(5, 1fr)}

.stat-box{
  padding:2.25rem 1.5rem;
  text-align:center;
  border-right:1px solid var(--border);
  transition:background 0.25s var(--ease-out);
}
.stat-box:hover{background:var(--bg2)}
.stat-box:last-child{border-right:none}

.stat-n{
  font-family:var(--font-head);
  font-size:2.3rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.035em;
  line-height:1;
  font-variation-settings:'opsz' 144;
}
.stat-n sup{font-size:1rem;color:var(--accent);font-weight:600}
.stat-l{
  font-size:0.82rem;
  color:var(--muted);
  margin-top:0.35rem;
  letter-spacing:-0.003em;
}

/* ── CARDS ── */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.85rem;
  transition:all 0.3s var(--ease-out);
  position:relative;
}
.card:hover{
  box-shadow:var(--shadow-lg);
  border-color:rgba(15,79,255,0.3);
  transform:translateY(-3px);
}
.card-title{
  font-weight:700;
  font-size:1rem;
  color:var(--text);
  margin-bottom:0.5rem;
  letter-spacing:-0.01em;
}
.card-desc{
  font-size:0.88rem;
  color:var(--muted);
  line-height:1.7;
  letter-spacing:-0.003em;
}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1.1rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:1rem}

/* ── ICON BOX ── */
.icon-box{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:1rem;
  flex-shrink:0;
  transition:transform 0.3s var(--ease-spring);
}
.card:hover .icon-box,
.feat-card:hover .icon-box{transform:scale(1.08) rotate(-3deg)}
.icon-box.sm{width:40px;height:40px;font-size:1.05rem}

/* ── API CARD ── */
.api-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.85rem;
  transition:all 0.3s var(--ease-out);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.api-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--card-color, var(--accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s var(--ease-out);
}
.api-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--card-color, var(--accent));
}
.api-card:hover::before{transform:scaleX(1)}

.api-card-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:1rem;
  transition:transform 0.3s var(--ease-spring);
}
.api-card:hover .api-card-icon{transform:scale(1.1) rotate(-4deg)}

.api-card-title{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.45rem;
  letter-spacing:-0.02em;
}
.api-card-desc{
  font-size:0.9rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:1.1rem;
  flex-grow:1;
  letter-spacing:-0.003em;
}
.api-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.api-card-tag{
  font-size:0.7rem;
  font-weight:700;
  padding:0.2rem 0.6rem;
  border-radius:5px;
  letter-spacing:0.02em;
}
.api-card-link{
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:0.25rem;
  transition:gap 0.25s var(--ease-out);
}
.api-card:hover .api-card-link{gap:0.5rem}

/* ── FEATURE CARD ── */
.feat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.85rem;
  transition:all 0.3s var(--ease-out);
}
.feat-card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(15,79,255,0.3);
  transform:translateY(-2px);
}
.feat-title{
  font-weight:700;
  font-size:1rem;
  color:var(--text);
  margin-bottom:0.45rem;
  letter-spacing:-0.01em;
}
.feat-desc{
  font-size:0.88rem;
  color:var(--muted);
  line-height:1.7;
  letter-spacing:-0.003em;
}

/* ── CTA SECTION ── */
.cta-section{
  background:linear-gradient(135deg, #0a1a5c 0%, #0f4fff 65%, #1a55ff 100%);
  color:#fff;
  padding:6rem 5%;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-section::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%);
  pointer-events:none;
  animation:ctaGlow 10s ease-in-out infinite alternate;
}
.cta-section::after{
  content:'';
  position:absolute;
  bottom:-50%;
  left:-10%;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(0,184,124,0.06), transparent 60%);
  pointer-events:none;
  animation:ctaGlow 12s ease-in-out infinite alternate-reverse;
}
@keyframes ctaGlow{
  0%{transform:translate(0, 0) scale(1)}
  100%{transform:translate(-40px, 40px) scale(1.15)}
}

.cta-section > *{position:relative;z-index:1}

.cta-eyebrow{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:0.7rem;
}
.cta-section h2{color:#fff;margin-bottom:1rem}
.cta-section p{
  color:rgba(255,255,255,0.75);
  max-width:520px;
  margin:0 auto 2.5rem;
  font-size:1rem;
  line-height:1.8;
}
.cta-btns{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.cta-micro{
  font-size:0.82rem;
  color:rgba(255,255,255,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  flex-wrap:wrap;
}
.cta-micro span::before{content:'✓ '}

/* ── FAQ ACCORDION ── */
.faq-wrap{max-width:820px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.35rem 0;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  transition:color 0.2s var(--ease-out);
  letter-spacing:-0.01em;
}
.faq-q:hover{color:var(--accent)}
.faq-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  flex-shrink:0;
  transition:all 0.3s var(--ease-out);
  color:var(--muted);
  font-weight:400;
}
.faq-item.open .faq-icon{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:rotate(45deg);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s var(--ease-out);
}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{
  font-size:0.95rem;
  color:var(--text2);
  line-height:1.8;
  padding-bottom:1.35rem;
  letter-spacing:-0.003em;
}

/* ── CODE BLOCK ── */
.code-card{
  background:#0a0e1a;
  border-radius:16px;
  padding:1.85rem;
  box-shadow:0 4px 12px rgba(10,14,26,0.15), 0 20px 60px rgba(10,14,26,0.25);
  overflow:hidden;
  position:relative;
}
.code-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.code-header{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:1.35rem;
}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-filename{
  margin-left:auto;
  font-size:0.72rem;
  color:#6b7280;
  font-family:var(--font-mono);
  letter-spacing:0.02em;
}
.code-block{
  font-family:var(--font-mono);
  font-size:0.82rem;
  line-height:1.8;
  color:#e2e8f0;
  overflow-x:auto;
  white-space:pre;
  tab-size:2;
}
.code-block .ck{color:#93c5fd}
.code-block .cs{color:#86efac}
.code-block .cn{color:#fbbf24}
.code-block .cm{color:#6b7280;font-style:italic}
.code-block .cv{color:#c4b5fd}

/* ── TABLES ── */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
}
table.compare{width:100%;border-collapse:collapse;font-size:0.9rem}
table.compare th,
table.compare td{
  padding:0.9rem 1.1rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  letter-spacing:-0.003em;
}
table.compare th{
  background:var(--bg2);
  font-weight:700;
  font-size:0.8rem;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
table.compare tr:last-child td{border-bottom:none}
table.compare tbody tr{transition:background 0.2s var(--ease-out)}
table.compare tbody tr:hover{background:var(--bg2)}
table.compare .yes{color:var(--accent2);font-weight:700}
table.compare .no{color:var(--muted)}

/* ── FORMS ── */
.form-group{display:flex;flex-direction:column;gap:0.45rem;margin-bottom:1.15rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{
  font-size:0.88rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.005em;
}
.req{color:var(--accent3);margin-left:2px}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:0.8rem 1.05rem;
  border:1.5px solid var(--border);
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--text);
  background:#fff;
  outline:none;
  transition:border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  letter-spacing:-0.003em;
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(15,79,255,0.08);
}
input::placeholder,
textarea::placeholder{color:var(--muted)}
textarea{resize:vertical;min-height:130px;line-height:1.65}
.form-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:2.5rem;
  box-shadow:var(--shadow-md);
}

/* ── FOOTER ── */
.footer{
  background:#0a0e1a;
  color:rgba(255,255,255,0.75);
  padding:4.5rem 5% 2rem;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
.ft-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:3rem;
  max-width:var(--max);
  margin:0 auto;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.ft-brand .nav-logo{
  color:#fff;
  font-size:1.3rem;
  display:block;
  margin-bottom:0.85rem;
}
.ft-brand p{
  font-size:0.9rem;
  color:rgba(255,255,255,0.45);
  line-height:1.7;
  max-width:280px;
  margin-bottom:1.25rem;
  letter-spacing:-0.003em;
}
.ft-social{display:flex;gap:0.5rem}
.soc-btn{
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
  cursor:pointer;
  transition:background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  color:#fff;
  border:none;
}
.soc-btn:hover{
  background:rgba(255,255,255,0.14);
  transform:translateY(-2px);
}
.ft-col h4{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin-bottom:1.1rem;
}
.ft-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.ft-col a{
  font-size:0.9rem;
  color:rgba(255,255,255,0.5);
  transition:color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
  letter-spacing:-0.003em;
}
.ft-col a:hover{
  color:#fff;
  padding-left:2px;
}
.ft-bottom{
  max-width:var(--max);
  margin:0 auto;
  padding-top:1.75rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.ft-copy{
  font-size:0.82rem;
  color:rgba(255,255,255,0.3);
  letter-spacing:-0.003em;
}
.ft-legal{display:flex;gap:1.5rem;flex-wrap:wrap}
.ft-legal a{
  font-size:0.82rem;
  color:rgba(255,255,255,0.3);
  transition:color 0.2s var(--ease-out);
}
.ft-legal a:hover{color:rgba(255,255,255,0.7)}

/* ── UTILITIES ── */
.text-center{text-align:center}
.text-center .sec-sub{margin-left:auto;margin-right:auto}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mt-2{margin-top:2rem}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  border:0;
}

/* ── LIVE DOT ── */
.live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent2);
  animation:blink 2s infinite;
  display:inline-block;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── SCROLL FADE-IN (progressive enhancement) ── */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .grid-3{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
}
@media (max-width:900px){
  .nav-center{display:none}
  .nav-toggle{display:flex}
  .stats-bar,
  .stats-bar.five{grid-template-columns:1fr 1fr}
  .stat-box:nth-child(3),
  .stat-box:nth-child(4),
  .stat-box:nth-child(5){border-top:1px solid var(--border)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  section{padding:3.5rem 5%}
  h1{font-size:clamp(2rem, 6vw, 2.8rem)}
}
@media (max-width:600px){
  body{font-size:17px}
  .stats-bar,
  .stats-bar.five{grid-template-columns:1fr}
  .stat-box{
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:1.5rem 1rem;
  }
  .stat-box:last-child{border-bottom:none}
  .ft-grid{grid-template-columns:1fr;gap:2rem}
  .cta-section{padding:4rem 5%}
  .nav-right .btn-nav-ghost{display:none}
  .form-card{padding:1.75rem}
  .code-block{font-size:0.72rem}
  .dropdown{min-width:280px;grid-template-columns:1fr}
}

/* ── MOBILE MENU PANEL ── */
.mobile-menu{
  position:fixed;
  top:var(--nav-h);
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  z-index:199;
  overflow-y:auto;
  padding:1.5rem 5% 3rem;
  transform:translateX(-100%);
  transition:transform 0.3s var(--ease-out);
  display:none;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu h4{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.5rem 0 0.75rem;
}
.mobile-menu h4:first-child{margin-top:0}
.mobile-menu a{
  display:block;
  padding:0.8rem 0.5rem;
  font-size:1rem;
  color:var(--text2);
  border-bottom:1px solid var(--border);
  transition:color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
}
.mobile-menu a:hover{color:var(--accent);padding-left:0.75rem}
.mobile-menu .m-actions{
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  margin-top:1.5rem;
}
@media (max-width:900px){
  .mobile-menu{display:block}
}

/* ── 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;
  }
}