/* ═══════════════════════════════════════════════════════════════════
  Stockly — Landing Page  (Dark Theme v3)
   Dark background · animated bg effects · crisp readable text
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#e2e8f0; background:#0a0e1a; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font:inherit; }
input, select, textarea {
  font:inherit; color:#e2e8f0; width:100%;
  padding:12px 16px; border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:rgba(255,255,255,.05); transition:border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color:#64748b; }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:#818cf8;
  box-shadow:0 0 0 3px rgba(129,140,248,.2);
}
select option { background:#1e293b; color:#e2e8f0; }
textarea { resize:vertical; }

/* ── Container ────────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:12px; font-weight:600;
  font-size:15px; transition:all .3s cubic-bezier(.4,0,.2,1);
  white-space:nowrap; position:relative;
}
.btn-primary {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; box-shadow:0 4px 20px rgba(99,102,241,.35);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(99,102,241,.5);
}
.btn-primary:active { transform:translateY(0); }
.btn-outline {
  border:2px solid rgba(255,255,255,.15); color:#cbd5e1; background:transparent;
}
.btn-outline:hover {
  border-color:#818cf8; color:#fff;
  box-shadow:0 4px 20px rgba(99,102,241,.15);
}
.btn-lg { padding:16px 36px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* Inline spinner for async buttons */
.spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .6s linear infinite; vertical-align:middle;
  margin-right:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.btn-nav {
  background:#6366f1; color:#fff; padding:10px 24px;
  border-radius:10px; font-size:14px;
}
.btn-nav:hover { background:#818cf8; }

/* ── Navigation ───────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,14,26,.7); backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:all .4s;
}
.navbar.scrolled {
  box-shadow:0 4px 30px rgba(0,0,0,.4);
  background:rgba(10,14,26,.92);
}
.nav-container {
  display:flex; align-items:center; justify-content:space-between;
  height:90px;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon { height:auto; width:220px; flex-shrink:0; object-fit:contain; }
.logo-text { font-family:'Rubik',sans-serif; font-size:22px; font-weight:700; color:#f1f5f9; letter-spacing:1.5px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
  font-size:14px; font-weight:500; color:#94a3b8; transition:color .2s;
}
.nav-links a:hover { color:#fff; }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px; }
.nav-toggle span {
  width:24px; height:2px; background:#94a3b8; border-radius:2px;
  transition:all .3s;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ANIMATED BACKGROUND ELEMENTS (used across sections)             */
/* ═══════════════════════════════════════════════════════════════ */

/* Floating gradient orbs */
.hero-bg {
  position:absolute; top:-200px; right:-200px;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.18) 0%,transparent 70%);
  pointer-events:none; animation:orbFloat1 8s ease-in-out infinite;
}
.hero-bg-2 {
  position:absolute; bottom:-300px; left:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.12) 0%,transparent 70%);
  pointer-events:none; animation:orbFloat2 10s ease-in-out infinite;
}
.hero-bg-3 {
  position:absolute; top:30%; left:50%;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.08) 0%,transparent 70%);
  pointer-events:none; animation:orbFloat3 12s ease-in-out infinite;
}
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-40px,30px) scale(1.1)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(50px,-40px) scale(1.05)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,-50px) scale(1.15)} }

/* Floating particles */
.particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%;
  animation:particleFloat linear infinite;
}
@keyframes particleFloat {
  0% { transform:translateY(0) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { transform:translateY(-100vh) rotate(720deg); opacity:0; }
}

/* Animated mesh / grid pattern */
.mesh-bg {
  position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.04;
  background-image:
    linear-gradient(rgba(99,102,241,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.5) 1px, transparent 1px);
  background-size:60px 60px;
  animation:meshDrift 20s linear infinite;
}
@keyframes meshDrift { 0%{transform:translate(0,0)} 100%{transform:translate(60px,60px)} }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position:relative; padding:150px 0 110px; overflow:hidden;
  background:linear-gradient(180deg,#0a0e1a 0%,#0f1629 50%,#0a0e1a 100%);
}
.hero-container {
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center; position:relative; z-index:1;
}
.hero-badge {
  display:inline-block; padding:8px 18px; border-radius:100px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.2);
  color:#4ade80; font-size:13px; font-weight:700;
  margin-bottom:24px; letter-spacing:.3px;
}
.hero h1 {
  font-size:56px; font-weight:900; line-height:1.08;
  letter-spacing:-1.5px; color:#fff;
}
.gradient-text {
  background:linear-gradient(135deg,#818cf8,#a78bfa,#c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:19px; color:#94a3b8; margin:24px 0 36px;
  line-height:1.7; max-width:540px;
}
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats {
  display:flex; align-items:center; gap:32px; margin-top:48px;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.08);
}
.hero-stat-num { display:block; font-size:28px; font-weight:800; color:#fff; }
.hero-stat-label { font-size:13px; color:#64748b; font-weight:500; }
.hero-stat-divider { width:1px; height:40px; background:rgba(255,255,255,.08); }

/* ── Phone Mockup (Premium) ────────────────────────────────────── */
.hero-visual { display:flex; justify-content:center; }
.hero-phone { position:relative; }
.hero-phone::before {
  content:''; position:absolute; inset:-40px; border-radius:50px;
  background:radial-gradient(circle,rgba(99,102,241,.2),rgba(139,92,246,.1),transparent 70%);
  filter:blur(40px); z-index:-1;
  animation:phoneGlow 4s ease-in-out infinite;
}
@keyframes phoneGlow { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

.phone-frame {
  width:290px; background:#1a1a2e;
  border-radius:44px; padding:10px;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:
    0 50px 100px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:phoneFloat 6s ease-in-out infinite;
  position:relative;
}
@keyframes phoneFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Dynamic Island */
.phone-island {
  width:100px; height:28px; background:#000;
  border-radius:20px; margin:4px auto 0; position:relative; z-index:10;
}
.phone-camera {
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1a1a4e,#0a0a2e);
  border:1px solid #2a2a4e;
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
}

/* Status Bar */
.phone-status-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 20px 4px; font-size:12px; font-weight:600; color:#fff;
}
.status-icons { display:flex; align-items:center; gap:6px; }
.status-battery {
  width:22px; height:10px; border:1.5px solid rgba(255,255,255,.5);
  border-radius:2px; position:relative; padding:1px;
}
.status-battery::after {
  content:''; position:absolute; right:-4px; top:2px;
  width:2px; height:4px; background:rgba(255,255,255,.5); border-radius:0 1px 1px 0;
}
.battery-level { width:75%; height:100%; background:#4ade80; border-radius:1px; }

/* Screen */
.phone-screen {
  background:#0c0c1e; border-radius:32px; overflow:hidden;
  height:460px; position:relative;
}
.screen-carousel {
  position:relative; width:100%; height:100%;
}

/* App Screens (shared) */
.app-screen {
  position:absolute; inset:0; padding:16px;
  opacity:0; transform:translateX(40px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none; display:flex; flex-direction:column;
}
.app-screen.active {
  opacity:1; transform:translateX(0); pointer-events:auto;
}
.app-screen.exit-left {
  opacity:0; transform:translateX(-40px);
}

.app-top-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-title { font-size:15px; font-weight:800; color:#f1f5f9; }
.app-subtitle { font-size:11px; color:#64748b; font-weight:500; }

/* Screen 1 — Scanner */
.scanner-viewport {
  flex:1; background:rgba(255,255,255,.02); border-radius:16px;
  border:1.5px solid rgba(129,140,248,.15); position:relative;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:160px;
}
.barcode-svg { width:80%; opacity:.85; }
.scanner-corner {
  position:absolute; width:20px; height:20px;
  border-color:#818cf8; border-style:solid; border-width:0;
}
.scanner-corner.tl { top:10px; left:10px; border-top-width:3px; border-left-width:3px; border-radius:4px 0 0 0; }
.scanner-corner.tr { top:10px; right:10px; border-top-width:3px; border-right-width:3px; border-radius:0 4px 0 0; }
.scanner-corner.bl { bottom:10px; left:10px; border-bottom-width:3px; border-left-width:3px; border-radius:0 0 0 4px; }
.scanner-corner.br { bottom:10px; right:10px; border-bottom-width:3px; border-right-width:3px; border-radius:0 0 4px 0; }
.scan-laser {
  position:absolute; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg,transparent,#818cf8 20%,#a78bfa 80%,transparent);
  box-shadow:0 0 16px rgba(129,140,248,.8), 0 0 40px rgba(129,140,248,.3);
  animation:laserScan 2.2s ease-in-out infinite;
}
@keyframes laserScan { 0%,100%{top:15%} 50%{top:80%} }
.scan-status {
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:12px; font-size:12px; color:#818cf8; font-weight:600;
}
.scan-pulse {
  width:8px; height:8px; border-radius:50%; background:#818cf8;
  animation:pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
.scan-success-badge {
  font-size:11px; color:#4ade80; font-weight:700;
  background:rgba(34,197,94,.12); padding:3px 10px; border-radius:100px;
}

/* Screen 2 — Product */
.product-image-area {
  height:80px; background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.05));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.product-placeholder { font-size:36px; }
.product-info { margin-bottom:10px; }
.product-name { font-size:16px; font-weight:800; color:#f1f5f9; }
.product-sku { font-size:11px; color:#64748b; margin-top:2px; }
.product-tags { display:flex; gap:6px; margin-top:8px; }
.tag {
  padding:3px 10px; border-radius:8px; font-size:10px; font-weight:700;
}
.tag.green { background:rgba(34,197,94,.12); color:#4ade80; }
.tag.blue { background:rgba(99,102,241,.12); color:#a5b4fc; }
.product-details {
  background:rgba(255,255,255,.03); border-radius:10px; padding:10px 12px;
  margin-bottom:12px; border:1px solid rgba(255,255,255,.04);
}
.detail-row {
  display:flex; justify-content:space-between; padding:5px 0;
  font-size:11px; border-bottom:1px solid rgba(255,255,255,.03);
}
.detail-row:last-child { border-bottom:none; }
.detail-label { color:#64748b; }
.detail-val { color:#cbd5e1; font-weight:600; }
.product-actions { display:flex; gap:8px; margin-top:auto; }
.app-btn {
  flex:1; padding:10px; border-radius:10px; font-size:12px;
  font-weight:700; text-align:center; border:none; cursor:default;
}
.app-btn.primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.app-btn.secondary { background:rgba(255,255,255,.06); color:#cbd5e1; border:1px solid rgba(255,255,255,.08); }

/* Screen 3 — Dashboard */
.dash-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.dash-stat {
  background:rgba(255,255,255,.03); border-radius:12px; padding:14px 10px; text-align:center;
  border:1px solid rgba(255,255,255,.04);
}
.dash-stat-num { display:block; font-size:22px; font-weight:900; color:#fff; }
.dash-stat-lbl { font-size:10px; color:#64748b; font-weight:500; }
.dash-chart {
  display:flex; align-items:flex-end; justify-content:center; gap:10px;
  height:100px; background:rgba(255,255,255,.02); border-radius:12px;
  padding:12px; margin-bottom:12px; border:1px solid rgba(255,255,255,.04);
}
.chart-bar {
  flex:1; background:rgba(129,140,248,.2); border-radius:6px 6px 0 0;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
  transition:background .3s;
}
.chart-bar span { font-size:9px; color:#64748b; font-weight:600; }
.chart-bar.active { background:linear-gradient(180deg,#818cf8,#6366f1); }
.chart-bar.active span { color:#fff; }
.dash-activity { display:flex; flex-direction:column; gap:6px; }
.activity-item {
  display:flex; align-items:center; gap:8px; font-size:11px; color:#94a3b8;
  background:rgba(255,255,255,.02); padding:8px 10px; border-radius:8px;
}
.act-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.act-dot.green { background:#4ade80; }
.act-dot.blue { background:#60a5fa; }
.act-dot.purple { background:#a78bfa; }
.act-time { margin-left:auto; font-size:10px; color:#475569; }

/* Screen 4 — Warehouse */
.warehouse-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  margin-bottom:12px; flex:1;
}
.wh-bin {
  aspect-ratio:1; border-radius:8px; display:flex;
  align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.06);
}
.wh-bin.full { background:rgba(34,197,94,.2); color:#4ade80; }
.wh-bin.mid { background:rgba(251,191,36,.15); color:#fbbf24; }
.wh-bin.low { background:rgba(251,113,133,.15); color:#fb7185; }
.wh-bin.empty { background:rgba(255,255,255,.03); color:#334155; }
.wh-legend { display:flex; justify-content:center; gap:12px; }
.legend-item { display:flex; align-items:center; gap:4px; font-size:9px; color:#64748b; }
.legend-dot { width:8px; height:8px; border-radius:3px; }
.legend-dot.full { background:rgba(34,197,94,.4); }
.legend-dot.mid { background:rgba(251,191,36,.4); }
.legend-dot.low { background:rgba(251,113,133,.4); }
.legend-dot.empty { background:rgba(255,255,255,.08); }

/* Screen Dots */
.screen-dots {
  display:flex; justify-content:center; gap:6px; padding:10px 0 4px;
}
.dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.15);
  transition:all .3s;
}
.dot.active { background:#818cf8; width:18px; border-radius:3px; }

/* Home Bar */
.phone-home-bar {
  width:100px; height:4px; background:rgba(255,255,255,.15);
  border-radius:4px; margin:4px auto 6px;
}

/* ── Trusted — Marquee ────────────────────────────────────────── */
.trusted {
  padding:48px 0;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02); overflow:hidden;
}
.trusted-label {
  text-align:center; font-size:13px; font-weight:600;
  color:#475569; text-transform:uppercase; letter-spacing:1.5px;
  margin-bottom:20px;
}
.trusted-marquee { overflow:hidden; position:relative; }
.trusted-marquee::before, .trusted-marquee::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2;
}
.trusted-marquee::before { left:0; background:linear-gradient(90deg,#0a0e1a,transparent); }
.trusted-marquee::after { right:0; background:linear-gradient(270deg,#0a0e1a,transparent); }
.trusted-track {
  display:flex; gap:48px; width:max-content;
  animation:marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trusted-logo {
  font-size:14px; font-weight:600; color:#475569;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color .3s;
}
.trusted-logo:hover { color:#818cf8; }
.trusted-logos { display:flex; justify-content:center; flex-wrap:wrap; gap:40px; }

/* ── Section Header ───────────────────────────────────────────── */
.section-header { text-align:center; max-width:650px; margin:0 auto 60px; }
.section-badge {
  display:inline-block; padding:6px 16px; border-radius:100px;
  background:rgba(129,140,248,.1); border:1px solid rgba(129,140,248,.2);
  color:#a5b4fc; font-size:13px; font-weight:700;
  margin-bottom:16px; letter-spacing:.3px;
}
.section-header h2 {
  font-size:40px; font-weight:800; color:#f1f5f9;
  letter-spacing:-1px; line-height:1.2; margin-bottom:16px;
}
.section-header p { font-size:17px; color:#64748b; line-height:1.7; }

/* ── Features ─────────────────────────────────────────────────── */
.features {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0a0e1a 0%,#0f1629 50%,#0a0e1a 100%);
}
.features-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; position:relative; z-index:1; }
.feature-card {
  padding:32px 28px; border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.feature-card:hover {
  transform:translateY(-6px);
  border-color:rgba(129,140,248,.25);
  box-shadow:0 20px 50px rgba(99,102,241,.15);
  background:rgba(255,255,255,.05);
}
.feature-card.featured {
  grid-column:span 2; grid-row:span 2;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.05));
  border-color:rgba(129,140,248,.15);
}
.feature-icon {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:16px;
  transition:transform .3s;
}
.feature-card:hover .feature-icon { transform:scale(1.1) rotate(-3deg); }
.feature-icon.purple { background:rgba(129,140,248,.12); }
.feature-icon.blue { background:rgba(96,165,250,.12); }
.feature-icon.green { background:rgba(74,222,128,.12); }
.feature-icon.amber { background:rgba(251,191,36,.12); }
.feature-icon.red { background:rgba(251,113,133,.12); }
.feature-icon.cyan { background:rgba(103,232,249,.12); }
.feature-icon.indigo { background:rgba(165,180,252,.12); }
.feature-icon.pink { background:rgba(244,114,182,.12); }
.feature-card h3 { font-size:18px; font-weight:700; margin-bottom:8px; color:#f1f5f9; }
.feature-card p { font-size:14px; color:#94a3b8; line-height:1.7; }
.feature-list {
  list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:10px;
}
.feature-list li { font-size:14px; color:#94a3b8; padding-left:24px; position:relative; }
.feature-list li::before { content:'✓'; position:absolute; left:0; color:#818cf8; font-weight:700; }

/* ── How It Works ─────────────────────────────────────────────── */
.how-it-works {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0f1629 0%,#0a0e1a 100%);
}
.steps { display:flex; align-items:flex-start; justify-content:center; gap:20px; position:relative; z-index:1; }
.step {
  flex:1; max-width:300px; text-align:center; padding:40px 28px;
  background:rgba(255,255,255,.03); border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  transition:all .4s;
}
.step:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  border-color:rgba(129,140,248,.2);
}
.step-num {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; font-size:22px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 8px 24px rgba(99,102,241,.4);
}
.step:hover .step-num { box-shadow:0 12px 30px rgba(99,102,241,.5); }
.step h3 { font-size:18px; font-weight:700; margin-bottom:8px; color:#f1f5f9; }
.step p { font-size:14px; color:#94a3b8; line-height:1.6; }
.step-arrow {
  font-size:28px; color:#334155; margin-top:56px; font-weight:300;
  animation:arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse { 0%,100%{transform:translateX(0);opacity:.4} 50%{transform:translateX(4px);opacity:.8} }

/* ── Pricing ──────────────────────────────────────────────────── */
.pricing {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0a0e1a 0%,#0f1629 100%);
}
.pricing-grid {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;
  align-items:stretch; position:relative; z-index:1;
}
.price-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:20px; padding:36px 28px; text-align:center;
  position:relative; transition:all .4s;
  display:flex; flex-direction:column;
}
.price-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 50px rgba(0,0,0,.4);
  border-color:rgba(255,255,255,.1);
}
.price-card.popular {
  border:2px solid rgba(129,140,248,.4);
  background:linear-gradient(180deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
  transform:scale(1.05);
  box-shadow:0 20px 50px rgba(99,102,241,.2);
}
.price-card.popular:hover { transform:scale(1.05) translateY(-8px); }
.popular-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  padding:6px 20px; border-radius:100px; font-size:12px; font-weight:700;
  white-space:nowrap; box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.price-name { font-size:22px; font-weight:800; color:#f1f5f9; }
.price-desc { font-size:13px; color:#64748b; margin-top:4px; }
.price-amount { margin:24px 0 8px; }
.price-currency { font-size:20px; font-weight:700; color:#94a3b8; vertical-align:super; }
.price-value { font-size:48px; font-weight:900; color:#fff; letter-spacing:-2px; }
.price-period { font-size:15px; color:#64748b; font-weight:500; }
.price-label-free { font-size:13px; color:#4ade80; font-weight:600; margin-bottom:8px; }
.price-features {
  list-style:none; text-align:left; margin:24px 0;
  display:flex; flex-direction:column; gap:12px;
}
.price-features li { font-size:14px; padding-left:28px; position:relative; color:#94a3b8; }
.price-features li.included::before {
  content:'✓'; position:absolute; left:0; color:#818cf8; font-weight:700; font-size:15px;
}
.price-features li.excluded { color:#334155; }
.price-features li.excluded::before { content:'✕'; position:absolute; left:0; color:#334155; font-weight:600; }
.price-features li.included-note { color:#818cf8; font-style:italic; padding-left:28px; position:relative; }
.price-features li.included-note::before { content:'✳'; position:absolute; left:0; color:#818cf8; font-weight:700; font-size:12px; top:2px; }
.price-card > .btn { margin-top:auto; }

/* ── AI Add-on checkboxes (signup form) ───────────────────────── */
.addon-checkboxes { display:flex; flex-direction:column; gap:10px; }
.addon-check {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 14px; transition:all .25s;
}
.addon-check:hover { border-color:rgba(124,58,237,.3); background:rgba(124,58,237,.06); }
.addon-check input[type="checkbox"] {
  width:18px; height:18px; accent-color:#7C3AED; cursor:pointer; flex-shrink:0;
}
.addon-check span { font-size:13px; color:#cbd5e1; }
.addon-check.addon-bundle { border-color:rgba(124,58,237,.25); background:rgba(124,58,237,.05); }
.addon-check.addon-bundle:hover { border-color:rgba(124,58,237,.5); }

/* ── Testimonials ─────────────────────────────────────────────── */
.testimonials {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0f1629 0%,#0a0e1a 100%);
}
.testimonial-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; position:relative; z-index:1; }
.testimonial-card {
  background:rgba(255,255,255,.03); border-radius:20px; padding:36px;
  border:1px solid rgba(255,255,255,.06); transition:all .4s; position:relative;
}
.testimonial-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  border-color:rgba(129,140,248,.15);
}
.testimonial-card::before {
  content:'\201C'; position:absolute; top:16px; right:24px;
  font-size:64px; color:rgba(255,255,255,.04); font-family:Georgia,serif; line-height:1;
}
.testimonial-stars { color:#fbbf24; font-size:16px; margin-bottom:16px; letter-spacing:2px; }
.testimonial-card blockquote {
  font-size:15px; color:#cbd5e1; line-height:1.7;
  margin-bottom:24px; font-style:italic; position:relative; z-index:1;
}
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
}
.testimonial-name { font-size:14px; font-weight:700; color:#f1f5f9; }
.testimonial-role { font-size:12px; color:#64748b; }

/* ── Demo Section ─────────────────────────────────────────────── */
.demo {
  padding:100px 0; position:relative; overflow:hidden;
  background:#0a0e1a;
}
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; position:relative; z-index:1; }
.demo-content .section-badge { margin-bottom:16px; }
.demo-content h2 { font-size:36px; font-weight:800; letter-spacing:-.8px; color:#f1f5f9; margin-bottom:16px; }
.demo-content > p { font-size:16px; color:#94a3b8; line-height:1.7; margin-bottom:32px; }
.demo-benefits { display:flex; flex-direction:column; gap:20px; }
.demo-benefit { display:flex; align-items:flex-start; gap:14px; }
.demo-benefit-icon {
  font-size:24px; flex-shrink:0;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(129,140,248,.1); border-radius:12px; transition:transform .3s;
}
.demo-benefit:hover .demo-benefit-icon { transform:scale(1.1) rotate(-5deg); }
.demo-benefit strong { font-size:15px; color:#f1f5f9; display:block; }
.demo-benefit p { font-size:13px; color:#64748b; margin:0; }
.demo-form-wrap {
  background:rgba(255,255,255,.03); border-radius:24px; padding:44px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.demo-form-wrap:hover { border-color:rgba(129,140,248,.15); }
.demo-form h3 { font-size:22px; font-weight:700; margin-bottom:24px; color:#f1f5f9; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#94a3b8; margin-bottom:6px; }
.form-note { font-size:12px; color:#475569; text-align:center; margin-top:12px; }

/* ── Signup Section ───────────────────────────────────────────── */
.signup {
  padding:100px 0; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0f1629 0%,#1e1b4b 50%,#0f1629 100%);
}
.signup::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at 20% 80%,rgba(99,102,241,.12) 0%,transparent 50%),
             radial-gradient(circle at 80% 20%,rgba(168,85,247,.08) 0%,transparent 50%);
  animation:signupBgShift 15s ease-in-out infinite; pointer-events:none;
}
@keyframes signupBgShift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5%,3%)} }
.signup-box { max-width:800px; margin:0 auto; position:relative; z-index:1; }
.signup-content { text-align:center; margin-bottom:40px; }
.signup-content h2 { font-size:36px; font-weight:800; color:#fff; letter-spacing:-.8px; }
.signup-content p { font-size:17px; color:#94a3b8; margin-top:12px; }
.signup-form {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:44px; backdrop-filter:blur(20px);
}
.signup-form label { color:#94a3b8; }
.signup-form .form-note { color:#475569; }
.form-check { display:flex; align-items:center; gap:10px; margin:20px 0; }
.form-check input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; accent-color:#818cf8; }
.form-check label { font-size:13px; color:#94a3b8; }
.form-check a { color:#a5b4fc; text-decoration:underline; }

/* ── PROVISIONING Progress ────────────────────────────────────── */
.signup-progress {
  text-align:center; padding:48px 44px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:24px; backdrop-filter:blur(20px);
  animation:fadeInUp .4s ease;
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.progress-header { margin-bottom:36px; }
.progress-spinner-ring {
  width:72px; height:72px; margin:0 auto 20px; position:relative;
}
.progress-spinner-ring svg { width:100%; height:100%; animation:spin 2s linear infinite; }
.progress-arc { transition:stroke-dasharray .5s ease; }
.progress-spinner-ring .progress-icon {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:28px; animation:none;
}
.progress-header h3 {
  font-size:22px; font-weight:700; color:#f1f5f9; margin-bottom:8px;
}
.progress-header p {
  font-size:14px; color:#64748b; line-height:1.6;
}
.progress-steps {
  display:flex; flex-direction:column; gap:0;
  max-width:380px; margin:0 auto 24px; text-align:left;
}
.progress-step {
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  opacity:.35; transition:all .4s ease;
}
.progress-step:last-child { border-bottom:none; }
.progress-step.active { opacity:1; }
.progress-step.done { opacity:.7; }
.step-indicator {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:all .4s;
}
.progress-step.active .step-indicator {
  border-color:#818cf8; background:rgba(99,102,241,.15);
}
.progress-step.done .step-indicator {
  border-color:#10b981; background:rgba(16,185,129,.15);
}
.step-check { display:none; color:#10b981; font-size:14px; font-weight:700; }
.progress-step.done .step-check { display:block; }
.step-dot {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2);
}
.progress-step.active .step-dot {
  background:#818cf8; animation:pulseDot 1.2s ease-in-out infinite;
}
.progress-step.done .step-dot { display:none; }
.step-text strong {
  display:block; font-size:14px; color:#e2e8f0; font-weight:600;
}
.step-text span { font-size:12px; color:#64748b; }
.progress-step.active .step-text strong { color:#a5b4fc; }
.progress-step.done .step-text strong { color:#94a3b8; }
.progress-timer {
  font-size:13px; color:#475569;
}
.progress-timer span:last-child { font-weight:700; color:#64748b; font-variant-numeric:tabular-nums; }

/* ── SUCCESS Screen ───────────────────────────────────────────── */
.signup-success {
  text-align:center; padding:48px 44px;
  background:rgba(255,255,255,.04); border:1px solid rgba(16,185,129,.2);
  border-radius:24px; backdrop-filter:blur(20px);
  animation:fadeInUp .5s ease;
}
.success-badge {
  width:72px; height:72px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff; font-size:32px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(16,185,129,.35);
  animation:successPop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes successPop {
  0% { transform:scale(0); } 60% { transform:scale(1.2); } 100% { transform:scale(1); }
}
.signup-success h2 {
  font-size:28px; font-weight:800; color:#fff; margin-bottom:8px;
}
.success-subtitle { font-size:15px; color:#94a3b8; margin-bottom:32px; }
.success-details {
  background:rgba(0,0,0,.2); border-radius:16px; padding:20px 24px;
  margin-bottom:28px; text-align:left;
}
.success-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.success-row:last-child { border-bottom:none; }
.success-label { font-size:13px; color:#94a3b8; font-weight:500; }
.success-value { font-size:14px; color:#e2e8f0; font-weight:600; }
.success-link {
  font-size:14px; color:#818cf8; font-weight:700; text-decoration:none;
  background:rgba(99,102,241,.1); padding:4px 12px; border-radius:8px;
  transition:all .2s; word-break:break-all;
}
.success-link:hover { background:rgba(99,102,241,.2); color:#a5b4fc; }
.success-actions { margin-bottom:24px; }
.success-actions .btn {
  display:inline-flex; min-width:260px;
  box-shadow:0 8px 24px rgba(99,102,241,.3);
  animation:btnPulse 2s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow:0 8px 24px rgba(99,102,241,.3); }
  50% { box-shadow:0 12px 40px rgba(99,102,241,.5); }
}
.success-notice {
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2);
  border-radius:12px; padding:16px 20px; margin-bottom:24px; text-align:left;
  font-size:13px; color:#fbbf24; line-height:1.6;
}
.success-notice strong { color:#fcd34d; font-size:14px; }
.success-notice .notice-icon { font-size:24px; flex-shrink:0; margin-top:2px; }
.success-footer { font-size:13px; color:#475569; line-height:1.8; }
.success-footer p { margin:4px 0; }

/* ── FAILURE Screen ───────────────────────────────────────────── */
.signup-failure {
  text-align:center; padding:48px 44px;
  background:rgba(255,255,255,.04); border:1px solid rgba(239,68,68,.2);
  border-radius:24px; backdrop-filter:blur(20px);
  animation:fadeInUp .5s ease;
}
.failure-badge {
  width:72px; height:72px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff; font-size:32px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(239,68,68,.3);
}
.signup-failure h2 {
  font-size:28px; font-weight:800; color:#fff; margin-bottom:8px;
}
.failure-subtitle { font-size:15px; color:#94a3b8; margin-bottom:28px; }
.failure-actions { display:flex; flex-direction:column; align-items:center; gap:16px; }
.failure-note { font-size:13px; color:#475569; }
.failure-note strong { color:#94a3b8; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  padding:60px 0 40px; background:#070a14; color:#64748b;
  border-top:1px solid rgba(255,255,255,.04);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .logo { margin-bottom:16px; }
.footer-brand .logo-text { color:#e2e8f0; }
.footer-brand p { font-size:14px; line-height:1.7; }
.footer-company { margin-top:16px; font-size:12px; color:#334155; }
.footer-company-logo { display:inline-flex; align-items:center; gap:6px; margin-top:8px; opacity:0.7; transition:opacity .2s; }
.footer-company-logo:hover { opacity:1; }
.footer-company-logo img { width:40px; height:40px; flex-shrink:0; }
.footer-company-logo span { font-size:16px; color:#64748b; font-weight:600; letter-spacing:.3px; }
.footer-col h4 {
  font-size:14px; font-weight:700; color:#e2e8f0;
  margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px;
}
.footer-col a { display:block; font-size:13px; color:#475569; margin-bottom:10px; transition:all .2s; }
.footer-col a:hover { color:#a5b4fc; transform:translateX(3px); }

/* ── Toast ────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:#1e293b; color:#fff; padding:14px 28px; border-radius:12px;
  font-size:14px; font-weight:600; box-shadow:0 12px 40px rgba(0,0,0,.4);
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275);
  z-index:10000; white-space:nowrap; border:1px solid rgba(255,255,255,.08);
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.error { background:linear-gradient(135deg,#dc2626,#b91c1c); border-color:transparent; }
.toast.success { background:linear-gradient(135deg,#16a34a,#15803d); border-color:transparent; }

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                      */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-container { grid-template-columns:1fr; text-align:center; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-visual { margin-top:40px; }
  .features-grid { grid-template-columns:repeat(2, 1fr); }
  .feature-card.featured { grid-column:span 2; grid-row:span 1; }
  .pricing-grid { grid-template-columns:repeat(3, 1fr); }
  .price-card.popular { transform:scale(1.02); }
  .price-card.popular:hover { transform:scale(1.02) translateY(-8px); }
  .testimonial-grid { grid-template-columns:1fr 1fr; }
  .testimonial-grid .testimonial-card:last-child { grid-column:span 2; max-width:500px; margin:0 auto; }
  .demo-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .nav-links {
    display:none; flex-direction:column; gap:0;
    position:absolute; top:72px; left:0; right:0;
    background:rgba(10,14,26,.98); backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 8px 30px rgba(0,0,0,.4);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.04); width:100%; }
  .nav-links .btn-nav { margin:12px 24px; width:auto; text-align:center; }
  .nav-toggle { display:flex; }
  .hero { padding:120px 0 60px; }
  .hero h1 { font-size:36px; }
  .hero-sub { font-size:16px; }
  .hero-bg, .hero-bg-2, .hero-bg-3 { display:none; }
  .features-grid { grid-template-columns:1fr; }
  .feature-card.featured { grid-column:span 1; }
  .steps { flex-direction:column; align-items:center; }
  .step-arrow { transform:rotate(90deg); margin:0; }
  .pricing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .price-card.popular { transform:none; }
  .price-card.popular:hover { transform:translateY(-6px); }
  .testimonial-grid { grid-template-columns:1fr; }
  .testimonial-grid .testimonial-card:last-child { grid-column:span 1; max-width:none; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .section-header h2 { font-size:30px; }
}

@media (max-width:480px) {
  .hero h1 { font-size:30px; }
  .hero-stats { flex-direction:column; gap:16px; }
  .hero-stat-divider { width:40px; height:1px; }
  .btn-lg { padding:14px 24px; font-size:15px; }
  .demo-form-wrap { padding:24px; }
  .signup-form { padding:24px; }
  .signup-progress { padding:28px 20px; }
  .signup-success { padding:28px 20px; }
  .signup-failure { padding:28px 20px; }
  .success-details { padding:16px; }
  .success-row { flex-direction:column; gap:4px; align-items:flex-start; }
  .success-actions .btn { min-width:auto; width:100%; }
  .phone-frame { width:260px; }
  .phone-screen { height:400px; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ABOUT US PAGE                                                   */
/* ═══════════════════════════════════════════════════════════════ */
.page-hero {
  padding:160px 0 80px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0a0e1a 0%,#0f1629 50%,#0a0e1a 100%);
}
.page-hero h1 { font-size:50px; font-weight:900; line-height:1.1; letter-spacing:-1.5px; color:#fff; margin-bottom:16px; }
.page-hero .hero-sub { font-size:19px; color:#94a3b8; max-width:600px; margin:0 auto; line-height:1.7; }

.story { padding:100px 0; background:#0a0e1a; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.story-visual { display:flex; justify-content:center; }
.story-visual-card {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:24px; padding:40px; color:#fff;
  box-shadow:0 30px 60px rgba(99,102,241,.3); width:100%; max-width:400px;
}
.story-visual-card .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.story-visual-card .stat-item { text-align:center; }
.story-visual-card .stat-num { font-size:32px; font-weight:900; display:block; }
.story-visual-card .stat-label { font-size:12px; opacity:.8; font-weight:500; }
.story-content h2 { font-size:36px; font-weight:800; color:#f1f5f9; letter-spacing:-.8px; margin-bottom:20px; }
.story-content p { font-size:16px; color:#94a3b8; line-height:1.8; margin-bottom:16px; }

.values { padding:100px 0; background:#0f1629; }
.values-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.value-card {
  background:rgba(255,255,255,.03); border-radius:20px; padding:40px 32px;
  border:1px solid rgba(255,255,255,.06); text-align:center; transition:all .4s;
}
.value-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.3); border-color:rgba(129,140,248,.15); }
.value-icon { font-size:40px; margin-bottom:16px; }
.value-card h3 { font-size:20px; font-weight:700; color:#f1f5f9; margin-bottom:12px; }
.value-card p { font-size:14px; color:#94a3b8; line-height:1.7; }

.timeline-section { padding:100px 0; background:#0a0e1a; }
.timeline { position:relative; max-width:700px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,#6366f1,#a855f7,#ec4899);
  transform:translateX(-50%);
}
.timeline-item { display:flex; align-items:center; margin-bottom:48px; position:relative; }
.timeline-item:nth-child(odd) { flex-direction:row-reverse; }
.timeline-dot {
  width:16px; height:16px; border-radius:50%;
  background:#818cf8; border:3px solid #0a0e1a;
  box-shadow:0 0 0 4px rgba(129,140,248,.3);
  position:absolute; left:50%; transform:translateX(-50%); z-index:2;
}
.timeline-content {
  width:calc(50% - 40px); background:rgba(255,255,255,.03);
  border-radius:16px; padding:24px; border:1px solid rgba(255,255,255,.06); transition:all .3s;
}
.timeline-content:hover { box-shadow:0 12px 30px rgba(0,0,0,.3); border-color:rgba(129,140,248,.15); }
.timeline-year {
  font-size:13px; font-weight:700; color:#818cf8;
  background:rgba(129,140,248,.1); padding:4px 12px; border-radius:100px;
  display:inline-block; margin-bottom:8px;
}
.timeline-content h3 { font-size:16px; font-weight:700; color:#f1f5f9; margin-bottom:6px; }
.timeline-content p { font-size:13px; color:#94a3b8; line-height:1.6; }

.team { padding:100px 0; background:#0f1629; }
.team-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.team-card {
  background:rgba(255,255,255,.03); border-radius:20px; padding:40px 28px;
  border:1px solid rgba(255,255,255,.06); text-align:center; transition:all .4s;
}
.team-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.3); border-color:rgba(129,140,248,.15); }
.team-avatar {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff; font-weight:800;
  box-shadow:0 8px 24px rgba(99,102,241,.3);
}
.team-card h3 { font-size:18px; font-weight:700; color:#f1f5f9; }
.team-role { font-size:13px; color:#818cf8; font-weight:600; margin:4px 0 12px; }
.team-card p { font-size:13px; color:#94a3b8; line-height:1.6; }

.cta-banner {
  padding:80px 0; text-align:center;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);
  color:#fff; position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.1),transparent 60%);
  pointer-events:none;
}
.cta-banner h2 { font-size:36px; font-weight:800; margin-bottom:16px; position:relative; }
.cta-banner p { font-size:17px; opacity:.85; max-width:500px; margin:0 auto 32px; position:relative; }
.cta-banner .btn {
  background:#fff; color:#6366f1; box-shadow:0 4px 20px rgba(0,0,0,.2); position:relative;
}
.cta-banner .btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.3); }

@media (max-width:768px) {
  .page-hero h1 { font-size:36px; }
  .story-grid { grid-template-columns:1fr; gap:40px; }
  .values-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .timeline::before { left:20px; }
  .timeline-item, .timeline-item:nth-child(odd) { flex-direction:row; padding-left:50px; }
  .timeline-dot { left:20px; }
  .timeline-content { width:100%; }
}