/* ==========================================================================
   AURUM — Shared Design System
   Fintech / Crypto premium template
   ========================================================================== */
:root{
  --navy:#0A1628;
  --navy-light:#0F1D32;
  --navy-dark:#070F1A;
  --gold:#FFD700;
  --gold-light:#FFE44D;
  --cyan:#00D4FF;
  --white:#FFFFFF;
  --gray:#8892A0;
  --success:#00FF88;
  --danger:#FF4757;
  --glass-bg:rgba(255,255,255,0.03);
  --glass-border:rgba(255,255,255,0.08);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.3);
  --glass-blur:blur(20px) saturate(180%);
  --font-display:'Inter',sans-serif;
  --font-heading:'Space Grotesk','Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html[lang="ar"]{ --font-display:'Cairo','Inter',sans-serif; --font-heading:'Cairo','Inter',sans-serif; }
html[lang="zh"]{ --font-display:'Noto Sans SC','Inter',sans-serif; --font-heading:'Noto Sans SC','Inter',sans-serif; }
html[lang="hi"]{ --font-display:'Noto Sans Devanagari','Inter',sans-serif; --font-heading:'Noto Sans Devanagari','Inter',sans-serif; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-display);
  overflow-x:hidden;
  line-height:1.6;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
h1, h2, h3, h4, h5, h6{ font-family:var(--font-heading); }
.stat b, .dash-stat-card b, .stats-strip b, .mp-head b, .tier-price b, .story-stat b,
.mp-val, .mp-change, .step-card .step-num, .error-code{ font-variant-numeric:tabular-nums; }
button{ font-family:inherit; cursor:pointer; border:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:var(--navy); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.container{ max-width:1400px; margin:0 auto; padding:0 24px; }

/* ---------- background ---------- */
#bg-stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* subtle film-grain noise across the whole page — a fixed SVG fractal-noise
   texture at very low opacity, sitting above everything else. Purely a
   finishing touch; contributes no layout, no interaction. */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity:0.03;
  pointer-events:none;
  z-index:9999;
}

/* reusable gold→cyan gradient text utility — the same technique already
   used on the hero headline's second line, generalized for reuse anywhere */
.gradient-text{
  background:linear-gradient(135deg, var(--gold), var(--cyan));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.glow-orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:0.35; z-index:0; }
.glow-orb.gold{ background:var(--gold); }
.glow-orb.cyan{ background:var(--cyan); }

/* ---------- navbar ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:rgba(10,22,40,0.55);
  border-bottom:1px solid var(--glass-border);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{
  font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--gold);
  letter-spacing:0.05em; display:flex; align-items:center; gap:8px;
}
.logo::before{ content:"◆"; font-size:1rem; color:var(--cyan); }

.nav-links{ display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links > li > a{
  font-size:0.95rem; font-weight:500; color:var(--white); opacity:0.85;
  position:relative; padding:6px 0; transition:opacity .2s;
  display:inline-flex; align-items:center; gap:5px;
}
.nav-links > li > a:hover{ opacity:1; color:var(--cyan); }
.nav-links > li > a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px; background:var(--cyan);
  transition:width .25s ease;
}
.nav-links > li > a:hover::after{ width:100%; }
.nav-links > li > a.active{ color:var(--gold); opacity:1; }
.nav-links > li > a.active::after{ width:100%; background:var(--gold); }

/* nav "More" dropdown — keeps the bar from getting crowded as pages are added */
.nav-more{ position:relative; }
.nav-more > a svg{ width:13px; height:13px; transition:transform .2s; }
.nav-more.open > a svg{ transform:rotate(180deg); }
.nav-more-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:190px; background:var(--navy-light); border:1px solid var(--glass-border); border-radius:12px;
  padding:6px; opacity:0; visibility:hidden; transition:all .2s ease; box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.nav-more.open .nav-more-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-more-menu a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:0.88rem; color:var(--white); opacity:0.85;
}
.nav-more-menu a:hover{ background:rgba(255,255,255,0.06); opacity:1; }
.nav-more-menu .soon{ margin-inline-start:auto; font-family:var(--font-mono); font-size:0.62rem; color:var(--gray); border:1px solid var(--glass-border); padding:2px 6px; border-radius:6px; }

.nav-right{ display:flex; align-items:center; gap:14px; }

.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px; background:var(--glass-bg);
  border:1px solid var(--glass-border); color:var(--white); padding:9px 14px;
  border-radius:10px; font-size:0.85rem; font-weight:600; letter-spacing:0.03em;
}
.lang-btn svg{ width:14px; height:14px; transition:transform .2s; }
.lang-switch.open .lang-btn svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px;
  background:var(--navy-light); border:1px solid var(--glass-border); border-radius:12px;
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .2s ease; box-shadow:0 20px 50px rgba(0,0,0,0.4); z-index:200;
}
html[dir="rtl"] .lang-menu{ right:auto; left:0; }
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  display:flex; width:100%; align-items:center; gap:10px; background:transparent;
  color:var(--white); padding:10px 12px; border-radius:8px; font-size:0.88rem; text-align:start;
}
.lang-menu button:hover{ background:rgba(255,255,255,0.06); }
.lang-menu button.active{ color:var(--gold); }
.lang-code{ font-family:var(--font-mono); font-size:0.7rem; opacity:0.6; margin-inline-start:auto; }

.btn-wallet{
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--white);
  padding:10px 16px; border-radius:10px; font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:8px;
  transition:border-color .2s;
}
.btn-wallet:hover{ border-color:var(--cyan); }
.btn-wallet .dot{ width:7px; height:7px; border-radius:50%; background:var(--gray); }
.btn-wallet.connected .dot{ background:var(--success); box-shadow:0 0 8px var(--success); }

.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy); padding:11px 22px; border-radius:10px; font-weight:700; font-size:0.9rem;
  box-shadow:0 8px 24px rgba(255,215,0,0.25); transition:transform .2s, box-shadow .2s; display:inline-block;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,215,0,0.35); }

.btn-secondary{
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--white);
  padding:14px 26px; border-radius:10px; font-weight:700; font-size:0.95rem; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  display:inline-flex; align-items:center; gap:8px; transition:background .2s, border-color .2s;
}
.btn-secondary:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.2); }

.menu-toggle{ display:none; background:transparent; width:28px; height:20px; position:relative; }
.menu-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--white); transition:.25s; }
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:9px; }
.menu-toggle span:nth-child(3){ top:18px; }

/* ---------- page header (used on inner pages) ---------- */
.page-header{ position:relative; z-index:1; padding:180px 0 90px; text-align:center; }
.page-header .eyebrow{ justify-content:center; display:flex; }
.page-header h1{ font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-0.02em; }
.page-header p{ color:var(--gray); max-width:600px; margin:18px auto 0; font-size:1.05rem; }
.breadcrumb{ display:flex; justify-content:center; gap:8px; font-size:0.85rem; color:var(--gray); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb .sep{ opacity:0.4; }

/* ---------- hero (index) ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding-top:76px; z-index:1; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; width:100%; }
.badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--glass-bg);
  border:1px solid var(--glass-border); padding:8px 16px; border-radius:100px;
  font-size:0.82rem; font-weight:600; margin-bottom:24px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--cyan); animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,212,255,0.55); }
  70%{ box-shadow:0 0 0 10px rgba(0,212,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,212,255,0); }
}
.hero h1{ font-weight:800; font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.08; letter-spacing:-0.02em; }
.hero h1 .line1{ display:block; color:var(--white); }
.hero h1 .line2{
  display:block; background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* kinetic word reveal — outer clips the slide-up, inner carries the transform.
   Both inline-block so the parent line's gradient text-clip still applies
   correctly across every nested word. */
.hero h1 .kinetic-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .kinetic-word-inner{ display:inline-block; will-change:transform, opacity; }
.hero p.subtitle{ color:var(--gray); font-size:1.1rem; max-width:520px; margin:22px 0 34px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-ctas .btn-primary, .hero-ctas .btn-secondary{ padding:14px 28px; font-size:0.95rem; }
.hero-stats{ display:flex; gap:34px; margin-top:52px; }
.stat b{ display:block; font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--white); }
.stat span{ font-size:0.8rem; color:var(--gray); }

/* ---------- hero visual: dashboard mockup (no photo needed) ---------- */
.hero-visual{ position:relative; height:600px; display:flex; align-items:center; justify-content:center; }

/* globe-wrap clips only the (scaled-up) canvas — kept separate from
   hero-visual so floating badges positioned slightly outside the panel
   are never cut off along with it. */
.globe-wrap{ position:absolute; inset:0; overflow:hidden; border-radius:28px; z-index:0; pointer-events:none; }

/* the globe is pushed behind the panel as soft ambient atmosphere — scaled up,
   dimmed, blurred, and masked into a ring so its nodes never crowd the panel's
   edges. */
#globe-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; filter:blur(0.6px);
  transform:scale(1.15);
  transition:opacity 1s ease;
  -webkit-mask-image:radial-gradient(circle at center, transparent 0%, transparent 34%, rgba(0,0,0,0.9) 48%, rgba(0,0,0,0.9) 74%, transparent 100%);
  mask-image:radial-gradient(circle at center, transparent 0%, transparent 34%, rgba(0,0,0,0.9) 48%, rgba(0,0,0,0.9) 74%, transparent 100%);
}
#globe-canvas.scene-ready{ opacity:0.4; }

.mockup-panel{
  position:relative; z-index:2; width:90%; max-width:420px;
  background:linear-gradient(160deg, rgba(16,28,48,0.85), rgba(10,20,36,0.9));
  border:1px solid var(--glass-border); border-radius:22px; padding:26px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2), 0 0 90px rgba(10,22,40,0.9);
}
.mockup-panel .mp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mockup-panel .mp-head span{ font-size:0.78rem; color:var(--gray); }
.mockup-panel .mp-head b{ font-family:var(--font-mono); font-size:1.6rem; color:var(--white); }
.mockup-panel .mp-change{ color:var(--success); font-family:var(--font-mono); font-size:0.85rem; font-weight:700; display:flex; align-items:center; gap:4px; }

.mp-chart{ display:flex; align-items:flex-end; gap:6px; height:90px; margin-bottom:22px; }
.mp-chart i{ flex:1; background:linear-gradient(180deg, var(--cyan), rgba(0,212,255,0.15)); border-radius:4px 4px 0 0; }

.mp-rows{ display:flex; flex-direction:column; gap:12px; }
.mp-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:rgba(255,255,255,0.04); border-radius:10px; }
.mp-row .mp-coin{ display:flex; align-items:center; gap:10px; font-size:0.85rem; font-weight:600; }
.mp-row .mp-coin i{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; font-family:var(--font-mono); }
.mp-row .mp-val{ font-family:var(--font-mono); font-size:0.85rem; }
.mp-row .mp-val.up{ color:var(--success); }
.mp-row .mp-val.down{ color:var(--danger); }

.float-badge{
  position:absolute; z-index:3; display:flex; align-items:center; gap:8px;
  background:rgba(15,29,50,0.75); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);
  padding:10px 16px; border-radius:14px; font-family:var(--font-mono); font-size:0.85rem; font-weight:700;
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.float-badge .icon-dot{ width:8px; height:8px; border-radius:50%; }
/* logical (start/end) positions so these mirror correctly under RTL */
.fb-growth{ top:6%; inset-inline-end:0%; color:var(--success); }
.fb-growth .icon-dot{ background:var(--success); box-shadow:0 0 10px var(--success); }
.fb-ai{ top:46%; inset-inline-start:-2%; color:var(--cyan); }
.fb-ai .icon-dot{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.fb-secure{ bottom:6%; inset-inline-end:0%; color:var(--gold); }
.fb-secure .icon-dot{ background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ---------- sections ---------- */
.section{ position:relative; z-index:1; padding:120px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px; display:block;
}
.section-head h2{ font-weight:700; font-size:clamp(2rem,4vw,3rem); }
.section-head p{ color:var(--gray); margin-top:16px; font-size:1.05rem; }

.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.feature-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px;
  padding:32px 26px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); transition:transform .3s ease, border-color .3s ease, background .3s ease;
  position:relative; overflow:hidden;
}
.feature-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(160deg, rgba(255,215,0,0.08), transparent 60%);
}
.feature-card:hover{ transform:translateY(-8px); border-color:rgba(255,215,0,0.35); background:rgba(255,255,255,0.07); }
.feature-card:hover::before{ opacity:1; }
.feature-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,215,0,0.18), rgba(0,212,255,0.12)); margin-bottom:22px;
}
.feature-icon svg{ width:24px; height:24px; stroke:var(--gold); }
.feature-card h3{ font-size:1.15rem; font-weight:700; margin-bottom:10px; }
.feature-card p{ color:var(--gray); font-size:0.92rem; }

/* ---------- split / copilot section (features.html) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; display:flex; justify-content:center; }
.split-media img{ max-height:520px; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }
.split-copy .eyebrow{ margin-bottom:16px; }
.split-copy h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; margin-bottom:18px; }
.split-copy p{ color:var(--gray); font-size:1.02rem; margin-bottom:26px; }
.split-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.split-list li{ display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; }
.split-list li svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; stroke:var(--gold); }

/* ---------- how it works (blockchain.html) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step; }
.step-card{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px; padding:30px 26px; position:relative; }
.step-card .step-num{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--navy); font-weight:800; width:36px; height:36px;
  border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-light)); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.step-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.step-card p{ color:var(--gray); font-size:0.9rem; }

.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats-strip .stat-box{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:28px 16px; }
.stats-strip b{ display:block; font-family:var(--font-mono); font-size:1.8rem; font-weight:700; color:var(--gold); }
.stats-strip span{ font-size:0.82rem; color:var(--gray); margin-top:6px; display:block; }

/* ---------- pricing ---------- */
.price-toggle{
  display:flex; align-items:center; justify-content:center; gap:16px; margin:8px auto 56px;
}
.price-toggle span{ font-size:0.92rem; font-weight:600; color:var(--gray); transition:color .2s; }
.price-toggle span.active{ color:var(--white); }
.price-switch{
  width:52px; height:28px; border-radius:100px; background:var(--glass-bg); border:1px solid var(--glass-border);
  position:relative; cursor:pointer; flex-shrink:0;
}
.price-switch .knob{
  position:absolute; top:2px; inset-inline-start:2px; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); transition:inset-inline-start .25s ease;
}
.price-switch.on .knob{ inset-inline-start:calc(100% - 24px); }
.save-badge{
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700; color:var(--navy);
  background:var(--success); padding:3px 9px; border-radius:100px; margin-inline-start:-4px;
}

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:20px;
  padding:36px 30px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); display:flex; flex-direction:column;
  transition:transform .3s ease, border-color .3s ease;
}
.price-card:hover{ transform:translateY(-6px); }
.price-card.featured{
  border-color:rgba(255,215,0,0.45); background:linear-gradient(160deg, rgba(255,215,0,0.07), rgba(255,255,255,0.04));
  position:relative; transform:scale(1.03);
}
.price-card.featured:hover{ transform:scale(1.03) translateY(-6px); border-color:rgba(255,215,0,0.55); }
.tier-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:0.7rem;
  font-weight:700; color:var(--navy); background:linear-gradient(135deg,var(--gold),var(--gold-light));
  padding:6px 16px; border-radius:100px; white-space:nowrap;
}
.tier-name{ font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.tier-desc{ color:var(--gray); font-size:0.88rem; min-height:42px; margin-bottom:22px; }
.tier-price{ display:flex; align-items:flex-end; gap:6px; margin-bottom:26px; }
.tier-price b{ font-family:var(--font-mono); font-size:2.6rem; font-weight:700; line-height:1; }
.tier-price span{ color:var(--gray); font-size:0.9rem; margin-bottom:5px; }
.tier-feats{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:30px; flex:1; }
.tier-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; }
.tier-feats li svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; stroke:var(--gold); }
.price-card .btn-primary, .price-card .btn-secondary{ text-align:center; width:100%; }

.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
/* ---------- Chart.js custom glassmorphism tooltip (a real DOM element,
   positioned over the canvas — see glassTooltip() in dashboard.html) ---------- */
.chart-tooltip{
  position:absolute; pointer-events:none; z-index:50; opacity:0; transition:opacity .15s ease;
  transform:translate(-50%, -115%);
  background:rgba(15,29,50,0.85); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:10px; padding:8px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  font-size:0.78rem; white-space:nowrap;
}
.chart-tooltip .ct-title{ font-family:var(--font-mono); color:var(--gray); font-size:0.68rem; margin-bottom:3px; }
.chart-tooltip .ct-body{ font-family:var(--font-mono); color:var(--white); font-weight:700; }

/* ---------- professional glassmorphism (applied to every card/overlay) ----------
   Matches the brief's .glass-card recipe exactly: soft ambient shadow + inset
   top highlight at rest, escalating to a deeper shadow + soft gold glow +
   gold border on hover. Targets every card-like surface in the template by
   its existing class — no HTML changes needed, and doesn't touch each card's
   own transform (feature-card/team-card/etc. keep their individual lift
   values; tilt-card's JS-driven transform on desktop takes over from there). */
.feature-card, .price-card, .team-card, .step-card, .dash-stat-card, .stat-box,
.blog-card, .gallery-tile, .contact-info-card,
.form-card, .dash-panel, .dash-table-wrap, .faq-item{
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .4s cubic-bezier(0.4,0,0.2,1), box-shadow .4s cubic-bezier(0.4,0,0.2,1),
        border-color .4s cubic-bezier(0.4,0,0.2,1), background .4s cubic-bezier(0.4,0,0.2,1);
}
.feature-card:hover, .price-card:hover, .team-card:hover, .step-card:hover,
.dash-stat-card:hover, .stat-box:hover, .blog-card:hover, .gallery-tile:hover,
.contact-info-card:hover, .form-card:hover,
.dash-panel:hover, .dash-table-wrap:hover{
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(255,215,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}
/* border-color glow only for cards that don't already define their own
   hover border-color (feature-card/blog-card/gallery-tile keep their
   existing distinct values, set elsewhere) */
.price-card:hover, .team-card:hover, .step-card:hover, .dash-stat-card:hover,
.stat-box:hover, .contact-info-card:hover, .form-card:hover,
.dash-panel:hover, .dash-table-wrap:hover{
  border-color: rgba(255,215,0,0.2);
}

.faq-item{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:transparent; color:var(--white); font-size:0.98rem; font-weight:600; text-align:start;
}
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition:transform .25s ease; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 24px 20px; color:var(--gray); font-size:0.9rem; }
.faq-item.open .faq-a{ max-height:200px; }

/* ---------- dashboard ---------- */
.dash-wrap{ display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
.dash-sidebar{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px; padding:20px 14px;
  display:flex; flex-direction:column; gap:6px; position:sticky; top:96px;
}
.dash-nav-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; font-size:0.9rem; font-weight:600;
  color:var(--gray); transition:background .2s, color .2s;
}
.dash-nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.dash-nav-item:hover{ background:rgba(255,255,255,0.05); color:var(--white); }
.dash-nav-item.active{ background:rgba(255,215,0,0.12); color:var(--gold); }

.dash-main{ display:flex; flex-direction:column; gap:24px; }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-search{
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:12px; padding:12px 16px;
}
.dash-search svg{ width:17px; height:17px; stroke:var(--gray); flex-shrink:0; }
.dash-search input{ background:transparent; border:none; color:var(--white); font-size:0.9rem; width:100%; outline:none; }
.dash-search input::placeholder{ color:var(--gray); }
.dash-bell{
  width:44px; height:44px; border-radius:12px; background:var(--glass-bg); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
}
.dash-bell svg{ width:19px; height:19px; stroke:var(--white); }
.dash-bell .ping{ position:absolute; top:9px; inset-inline-end:9px; width:7px; height:7px; border-radius:50%; background:var(--danger); }

.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dash-stat-card{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:22px; }
.dash-stat-card .ds-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dash-stat-card .ds-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,215,0,0.18), rgba(0,212,255,0.12));
}
.dash-stat-card .ds-icon svg{ width:18px; height:18px; stroke:var(--gold); }
.dash-stat-card .ds-change{ font-family:var(--font-mono); font-size:0.75rem; font-weight:700; }
.dash-stat-card .ds-change.up{ color:var(--success); }
.dash-stat-card .ds-change.down{ color:var(--danger); }
.dash-stat-card b{ display:block; font-family:var(--font-mono); font-size:1.5rem; font-weight:700; margin-bottom:4px; }
.dash-stat-card span{ font-size:0.8rem; color:var(--gray); }
.dash-stat-card{ overflow:hidden; }
.ds-sparkline{ display:block; width:100%; height:28px; margin-top:14px; opacity:0.9; }

.dash-charts{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
.dash-panel{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:22px; }
.dash-panel h3{ font-size:1rem; font-weight:700; margin-bottom:16px; }
.dash-panel canvas{ max-height:240px; transition:opacity .3s ease; }
.dash-panel.loading canvas{ opacity:0; }
.dash-panel.loading{ position:relative; min-height:280px; }
.dash-panel.loading::after{
  content:''; position:absolute; inset:20px; top:56px; border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.dash-table-wrap{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:22px; overflow-x:auto; }
.dash-table-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dash-table-head h3{ font-size:1rem; font-weight:700; }
.dash-table-head a{ font-size:0.85rem; color:var(--cyan); font-weight:600; }
table.dash-table{ width:100%; border-collapse:collapse; min-width:560px; }
table.dash-table th{ text-align:start; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gray); padding:10px 12px; font-weight:600; }
table.dash-table td{ padding:14px 12px; font-size:0.88rem; border-top:1px solid var(--glass-border); }
.tx-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:100px; font-size:0.75rem; font-weight:700; }
.tx-pill.completed{ background:rgba(0,255,136,0.12); color:var(--success); }
.tx-pill.pending{ background:rgba(255,215,0,0.12); color:var(--gold); }
.tx-pill.failed{ background:rgba(255,71,87,0.12); color:var(--danger); }

@media (max-width:992px){
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .price-card.featured{ transform:none; }
  .price-card.featured:hover{ transform:translateY(-6px); }
  .dash-wrap{ grid-template-columns:1fr; }
  .dash-sidebar{ position:static; flex-direction:row; overflow-x:auto; }
  .dash-stats{ grid-template-columns:repeat(2,1fr); }
  .dash-charts{ grid-template-columns:1fr; }
}
@media (max-width:576px){
  .dash-stats{ grid-template-columns:1fr; }
}

/* ---------- story panel (about.html) — richer than a lone icon in a box ---------- */
.story-panel{
  width:100%; max-width:440px; background:linear-gradient(160deg, rgba(16,28,48,0.85), rgba(10,20,36,0.9));
  border:1px solid var(--glass-border); border-radius:22px; padding:32px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
.story-panel-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.story-badge{ font-family:var(--font-mono); font-size:0.72rem; font-weight:700; color:var(--gold); background:rgba(255,215,0,0.1); padding:5px 12px; border-radius:100px; }
.story-panel-top svg{ width:26px; height:26px; stroke:var(--cyan); opacity:0.8; }
.story-stat b{ display:block; font-family:var(--font-mono); font-size:2.4rem; font-weight:700; background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.story-stat span{ font-size:0.85rem; color:var(--gray); }
.story-milestones{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.story-milestones li{ display:flex; gap:14px; align-items:flex-start; font-size:0.86rem; }
.story-milestones .m-year{ font-family:var(--font-mono); font-weight:700; color:var(--gold); flex-shrink:0; width:44px; }
.story-milestones .m-dot-line{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.story-milestones .m-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.story-milestones .m-line{ width:1px; flex:1; background:var(--glass-border); margin-top:4px; }
.story-milestones li:last-child .m-line{ display:none; }
.story-milestones .m-text{ color:var(--gray); padding-top:1px; }

/* ---------- team (about.html) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px; padding:28px 22px; text-align:center; transition:transform .3s ease; }
.team-card:hover{ transform:translateY(-6px); }
.team-avatar{
  width:76px; height:76px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold), var(--cyan)); font-family:var(--font-mono); font-weight:700; font-size:1.3rem; color:var(--navy);
}
.team-card h3{ font-size:1rem; font-weight:700; margin-bottom:4px; }
.team-card span{ font-size:0.82rem; color:var(--gray); }

/* ---------- blog ---------- */
.blog-featured{
  display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:22px; overflow:hidden; margin-bottom:56px;
}
.blog-featured .bf-media{
  background:
    radial-gradient(circle at 22% 25%, rgba(255,215,0,0.28), transparent 42%),
    radial-gradient(circle at 78% 75%, rgba(0,212,255,0.26), transparent 42%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 22px),
    linear-gradient(135deg, rgba(255,215,0,0.1), rgba(0,212,255,0.1));
  min-height:280px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.blog-featured .bf-media::before, .blog-featured .bf-media::after{
  content:""; position:absolute; width:120px; height:120px; border:1px solid rgba(255,255,255,0.08); border-radius:50%;
}
.blog-featured .bf-media::before{ top:-30px; inset-inline-start:-30px; }
.blog-featured .bf-media::after{ bottom:-40px; inset-inline-end:-20px; width:160px; height:160px; }
.blog-featured .bf-media svg{ width:64px; height:64px; stroke:var(--gold); opacity:0.85; position:relative; z-index:1; filter:drop-shadow(0 8px 24px rgba(255,215,0,0.25)); }
.blog-featured .bf-copy{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
.tag-pill{
  display:inline-flex; align-self:flex-start; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;
  color:var(--gold); background:rgba(255,215,0,0.12); padding:5px 12px; border-radius:100px; margin-bottom:16px;
}
.blog-featured h2{ font-size:1.6rem; font-weight:800; margin-bottom:12px; }
.blog-featured p{ color:var(--gray); margin-bottom:20px; }
.blog-meta{ display:flex; gap:16px; font-size:0.8rem; color:var(--gray); font-family:var(--font-mono); }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:18px; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.blog-card:hover{ transform:translateY(-6px); border-color:rgba(255,215,0,0.3); }
.blog-card .bc-media{
  height:150px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, var(--bc-accent-a, rgba(0,212,255,0.24)), transparent 45%),
    radial-gradient(circle at 75% 80%, var(--bc-accent-b, rgba(255,215,0,0.18)), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 18px),
    rgba(255,255,255,0.02);
}
.blog-card .bc-media::before{ content:""; position:absolute; width:90px; height:90px; border:1px solid rgba(255,255,255,0.07); border-radius:50%; top:-25px; inset-inline-end:-25px; }
.blog-card .bc-media svg{ width:34px; height:34px; stroke:var(--cyan); opacity:0.85; position:relative; z-index:1; filter:drop-shadow(0 6px 16px rgba(0,212,255,0.2)); }
.blog-card .bc-copy{ padding:24px; }
.blog-card h3{ font-size:1rem; font-weight:700; margin:12px 0 10px; line-height:1.4; }
.blog-card p{ color:var(--gray); font-size:0.88rem; margin-bottom:16px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.contact-info-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:22px;
  display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;
}
.contact-info-card .ci-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,215,0,0.18), rgba(0,212,255,0.12));
}
.contact-info-card .ci-icon svg{ width:20px; height:20px; stroke:var(--gold); }
.contact-info-card h4{ font-size:0.95rem; font-weight:700; margin-bottom:4px; }
.contact-info-card p{ color:var(--gray); font-size:0.86rem; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:40px; height:40px; border-radius:10px; background:var(--glass-bg); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s;
}
.social-row a:hover{ border-color:var(--cyan); }
.social-row a svg{ width:17px; height:17px; stroke:var(--white); }

.form-card{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:20px; padding:36px; backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:8px; color:var(--white); }
.form-group input, .form-group textarea, .form-group select{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-radius:10px;
  padding:13px 14px; color:var(--white); font-family:inherit; font-size:0.92rem; outline:none; transition:border-color .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color:var(--cyan); }
.form-group textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:0.8rem; color:var(--gray); margin-top:14px; text-align:center; }

/* ---------- auth (login.html) ---------- */
.auth-wrap{ max-width:440px; margin:0 auto; }
.auth-tabs{ display:flex; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:4px; margin-bottom:28px; }
.auth-tab{
  flex:1; text-align:center; padding:11px; border-radius:9px; font-size:0.9rem; font-weight:700; color:var(--gray);
  background:transparent; transition:background .2s, color .2s;
}
.auth-tab.active{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy); }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--gray); font-size:0.8rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--glass-border); }
.social-auth{ display:flex; flex-direction:column; gap:12px; }
.btn-social{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); color:var(--white);
  padding:12px; border-radius:10px; font-size:0.88rem; font-weight:600; transition:border-color .2s, background .2s;
}
.btn-social:hover{ border-color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.07); }
.btn-social svg{ width:18px; height:18px; }
.auth-foot{ text-align:center; font-size:0.85rem; color:var(--gray); margin-top:22px; }
.auth-foot a{ color:var(--cyan); font-weight:600; }
.form-check{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--gray); margin-bottom:22px; }
.form-check input{ width:16px; height:16px; accent-color:var(--gold); }
.forgot-link{ font-size:0.85rem; color:var(--cyan); float:inline-end; }

/* ---------- 404 ---------- */
.error-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:76px; position:relative; z-index:1; }
.error-code{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(6rem,18vw,11rem); line-height:1;
  background:linear-gradient(135deg,var(--gold),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px;
}
.error-page h1{ font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; margin-bottom:14px; }
.error-page p{ color:var(--gray); max-width:440px; margin:0 auto 32px; }
.error-search{
  display:flex; align-items:center; gap:10px; max-width:420px; margin:0 auto 28px; background:var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:12px; padding:5px 6px 5px 18px;
}
.error-search svg{ width:18px; height:18px; stroke:var(--gray); flex-shrink:0; }
.error-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--white); font-size:0.9rem; }
.error-search input::placeholder{ color:var(--gray); }
.error-search button{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy); font-weight:700; font-size:0.85rem; padding:10px 18px; border-radius:9px; }

@media (max-width:992px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-featured{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:576px){
  .team-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- sales page ---------- */
.sales-hero{ position:relative; min-height:78vh; display:flex; align-items:center; padding-top:76px; z-index:1; overflow:hidden; text-align:center; }
.sales-hero-inner{ max-width:800px; margin:0 auto; }
.kicker-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3);
  color:var(--gold); padding:8px 18px; border-radius:100px; font-family:var(--font-mono); font-size:0.75rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; margin-bottom:26px;
}
/* ---------- sales page ---------- */
.sales-hero{ position:relative; min-height:92vh; display:flex; align-items:center; padding-top:76px; z-index:1; overflow:hidden; text-align:center; }
.sales-hero-inner{ max-width:780px; margin:0 auto; position:relative; z-index:2; }
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--navy); background:linear-gradient(135deg,var(--gold),var(--gold-light));
  padding:7px 16px; border-radius:100px; margin-bottom:24px;
}
.sales-hero h1{ font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.12; letter-spacing:-0.02em; margin-bottom:20px; }
.sales-hero p.subtitle{ color:var(--gray); font-size:1.1rem; max-width:640px; margin:0 auto 34px; }
.trust-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.trust-row span{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--gray); }
.trust-row svg{ width:16px; height:16px; stroke:var(--success); flex-shrink:0; }

.gallery-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.gallery-tile{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.gallery-tile:hover{ transform:translateY(-6px); border-color:rgba(255,215,0,0.3); }
.gallery-preview{
  height:110px; position:relative; padding:10px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.gallery-preview .gp-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,0.08); }
.gallery-preview .gp-bar.accent{ background:linear-gradient(90deg,var(--gold),var(--cyan)); width:40%; }
.gallery-preview .gp-block{ flex:1; border-radius:6px; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; }
.gallery-preview .gp-block svg{ width:22px; height:22px; opacity:0.5; }
.gallery-copy{ padding:14px 16px; }
.gallery-copy h4{ font-size:0.88rem; font-weight:700; margin-bottom:3px; }
.gallery-copy p{ font-size:0.74rem; color:var(--gray); line-height:1.4; }

.stack-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.stack-badge{
  display:flex; align-items:center; gap:8px; background:var(--glass-bg); border:1px solid var(--glass-border);
  padding:10px 18px; border-radius:100px; font-family:var(--font-mono); font-size:0.82rem; font-weight:700;
}
.stack-badge .sb-dot{ width:7px; height:7px; border-radius:50%; }

@media (max-width:992px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:576px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-row{ gap:16px; }
}

/* ---------- CTA ---------- */
.cta-section{
  background:linear-gradient(135deg, var(--navy-light), var(--navy-dark));
  border-radius:28px; padding:80px 40px; text-align:center;
  border:1px solid var(--glass-border); position:relative; overflow:hidden;
  max-width:1352px; margin-inline:auto;
}
.cta-section h2{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; max-width:680px; margin:0 auto 18px; }
.cta-section p{ color:var(--gray); max-width:520px; margin:0 auto 36px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

footer{ position:relative; z-index:1; padding:60px 0 30px; text-align:center; color:var(--gray); font-size:0.85rem; }
footer .logo{ justify-content:center; margin-bottom:16px; font-size:1.2rem; }
footer .foot-links{ display:flex; justify-content:center; gap:22px; margin-top:16px; flex-wrap:wrap; }
footer .foot-links a{ opacity:0.75; }
footer .foot-links a:hover{ opacity:1; color:var(--cyan); }

/* ---------- Three.js neural hero scene: WebGL fallback (fade-in handled per-canvas above/inline) ---------- */
.webgl-fallback #globe-canvas,
.webgl-fallback #globe-canvas-full{ display:none; }
.webgl-fallback::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,215,0,0.16), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(0,212,255,0.16), transparent 55%);
}

/* ---------- premium micro-interactions ---------- */

/* custom cursor — only active once JS confirms desktop + fine pointer */
html.custom-cursor-active,
html.custom-cursor-active a,
html.custom-cursor-active button,
html.custom-cursor-active .btn-primary,
html.custom-cursor-active .btn-secondary,
html.custom-cursor-active [role="button"]{ cursor:none; }
html.custom-cursor-active .cursor-text-native{ cursor:text; }

.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; opacity:0; transition:opacity .2s ease;
  mix-blend-mode:difference;
}
.cursor-dot{ width:8px; height:8px; background:var(--white); margin:-4px 0 0 -4px; }
.cursor-ring{
  width:36px; height:36px; border:1.5px solid var(--white); margin:-18px 0 0 -18px;
  transition:opacity .2s ease, width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease;
}
.cursor-ring.cursor-hover{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--gold); background:rgba(255,215,0,0.08); }
.cursor-ring.cursor-click{ width:28px; height:28px; margin:-14px 0 0 -14px; }

/* magnetic buttons */
.magnetic{ transition:transform .25s cubic-bezier(0.34, 1.56, 0.64, 1); will-change:transform; }

/* 3D tilt + glare cards */
.tilt-card{ transform-style:preserve-3d; will-change:transform; transition:transform .15s ease-out; position:relative; }
.tilt-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%), rgba(255,255,255,0.14), transparent 55%);
  opacity:0; transition:opacity .3s ease; z-index:2;
}
.tilt-card.tilt-hover::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .cursor-dot, .cursor-ring{ display:none; }
  .tilt-card{ transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:992px){
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-ctas{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero p.subtitle{ margin-inline:auto; }
  .hero-visual{ height:480px; order:-1; }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .split.reverse .split-media{ order:0; }
  .split-list{ text-align:start; }
  .split-list li{ margin-inline:auto; max-width:420px; }
  .steps{ grid-template-columns:1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .float-badge{ font-size:0.72rem; padding:8px 12px; }
}
@media (max-width:576px){
  .features-grid{ grid-template-columns:1fr; }
  .cta-section{ padding:56px 24px; }
  .hero-stats{ gap:22px; flex-wrap:wrap; }
  .stats-strip{ grid-template-columns:1fr; }
}