/* ========== Vyron AI — Global Styles ========== */

/* ===== Dotted wave background ===== */
#dottedSurface{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
#dottedSurface canvas{ position:absolute; top:0; left:0; }
header, section, footer{ position:relative; z-index:1; }
.bb-terminal, .clinical-terminal{ position:relative; z-index:1; }

/* ===== Globe city tooltip ===== */
#globeTooltip{
  position:absolute; pointer-events:none; z-index:20;
  background:rgba(4,5,10,0.93); border:1px solid rgba(125,249,255,0.22);
  border-radius:9px; padding:8px 12px; font-family:'JetBrains Mono',monospace;
  font-size:10px; white-space:nowrap; backdrop-filter:blur(14px);
  box-shadow:0 0 20px rgba(125,249,255,0.1),0 8px 28px rgba(0,0,0,0.7);
  opacity:0; transform:translateY(5px) scale(.97);
  transition:opacity .18s,transform .18s;
}
#globeTooltip.visible{ opacity:1; transform:translateY(0) scale(1); }
.gt-flag{ font-size:15px; vertical-align:middle; margin-left:4px; }
.gt-city{ color:#7df9ff; font-weight:700; font-size:11px; letter-spacing:.04em; }
.gt-country{ color:rgba(255,255,255,.45); font-size:8.5px; margin-top:2px; }
.gt-coords{ color:rgba(125,249,255,.35); font-size:8px; margin-top:1px; font-variant-numeric:tabular-nums; }
.gt-status{ display:flex; align-items:center; gap:5px; margin-top:5px;
  padding-top:5px; border-top:1px solid rgba(255,255,255,.06); }
.gt-live-dot{ width:5px;height:5px;border-radius:50%;background:#00e676;
  box-shadow:0 0 6px #00e676; animation:gtpulse 1s ease-in-out infinite; flex-shrink:0; }
@keyframes gtpulse{ 0%,100%{opacity:1}50%{opacity:.25} }
.gt-live-txt{ color:#00e676; font-size:8px; font-weight:700; letter-spacing:.08em; }
.gt-nodes{ color:rgba(255,255,255,.4); font-size:8px; margin-right:auto; }

/* ===== Language toggle ===== */
#langToggle{
  display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  font-size:11px; font-weight:700; color:rgba(255,255,255,.7); cursor:pointer;
  transition:all .2s; user-select:none; white-space:nowrap;
}
#langToggle:hover{ background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); color:#22d3ee; }
#langToggle .lt-flag{ font-size:14px; }

/* ===== i18n show/hide ===== */
html[lang="en"] .fa-only{ display:none!important; }
html[lang="fa"] .en-only{ display:none!important; }


:root{
  --ink-950:#04050a;
  --ink-900:#070912;
  --ink-800:#0b0e1a;
  --ink-700:#10142a;
  --cyber:#22d3ee;
  --iris:#8b5cf6;
  --gold:#e6c07b;
}
*{ -webkit-font-smoothing:antialiased; }
html,body{ background:var(--ink-950); color:#fff; font-family:'Vazirmatn',system-ui,sans-serif; }
body{ background:
  radial-gradient(ellipse at 20% 0%, rgba(124,58,237,0.18), transparent 55%),
  radial-gradient(ellipse at 80% 10%, rgba(34,211,238,0.14), transparent 60%),
  radial-gradient(ellipse at 50% 100%, rgba(124,58,237,0.10), transparent 55%),
  var(--ink-950);
}

/* ===== Grid backdrop ===== */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-bg-fade{
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ===== Glass cards ===== */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-strong{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(18px) saturate(160%);
}
.hairline{ border:1px solid rgba(255,255,255,0.08); }

/* ===== Gradient text ===== */
.text-gradient{
  background: linear-gradient(120deg,#fff 0%,#cbe9ff 30%,#7df9ff 55%,#a78bfa 80%,#fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.text-gradient-cyan{
  background: linear-gradient(90deg,#7df9ff,#a78bfa);
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

/* ===== HUD chip ===== */
.hud-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem; border-radius:9999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(125,249,255,0.18);
  color:#bfeaff; font-size:.75rem; letter-spacing:.02em;
}
.hud-dot{ width:6px; height:6px; border-radius:9999px; background:#22d3ee; box-shadow:0 0 12px #22d3ee; }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.4rem; border-radius:.85rem; font-weight:600; transition: all .25s ease; }
.btn-primary{
  background: linear-gradient(120deg,#22d3ee 0%,#7c3aed 100%);
  color:#04050a; box-shadow: 0 10px 40px -10px rgba(34,211,238,.55), 0 6px 30px -10px rgba(124,58,237,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(34,211,238,.7), 0 10px 40px -10px rgba(124,58,237,.7); }
.btn-ghost{
  background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.12); color:#fff;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.06); border-color: rgba(125,249,255,.4); }

/* ===== Hover glow ===== */
.glow-hover{ position:relative; transition: transform .3s ease, box-shadow .3s ease; }
.glow-hover::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(34,211,238,.0), rgba(34,211,238,.35), rgba(124,58,237,.35), rgba(34,211,238,0));
  opacity:0; transition: opacity .3s ease;
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px;
}
.glow-hover:hover{ transform: translateY(-3px); }
.glow-hover:hover::after{ opacity:1; }

/* ===== Scan line ===== */
.scan-line{
  position:absolute; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  filter: drop-shadow(0 0 12px #22d3ee);
  animation: scanline 3.2s ease-in-out infinite;
}
@keyframes scanline{
  0%{ top:6%; opacity:.0; }
  10%{ opacity:1 }
  50%{ top:94%; opacity:1 }
  60%{ opacity:0 }
  100%{ top:6%; opacity:0 }
}

/* ===== Marquee ===== */
.marquee{ overflow:hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation: marquee 40s linear infinite; }
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* ===== Reveal on scroll ===== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ===== HUD radial mark ===== */
.hud-ring{
  width:100%; aspect-ratio:1/1; border-radius:9999px;
  border:1px dashed rgba(125,249,255,.25);
  position:relative;
}
.hud-ring::before, .hud-ring::after{
  content:""; position:absolute; inset:8%; border-radius:9999px; border:1px solid rgba(125,249,255,.12);
}
.hud-ring::after{ inset:18%; border-style:dashed; }

/* ===== Beauty before/after slider ===== */
.ba-wrap{ position:relative; border-radius:24px; overflow:hidden; user-select:none; touch-action:pan-y; cursor:ew-resize; }
.ba-wrap:active{ cursor:grabbing; }
/* slider-1: before1/after1 → 1024×384 ≈ 8/3 */
#beautyBA  { aspect-ratio: 8/3; }
/* slider-2: before-2/after2 → 1024×511 ≈ 2/1 */
#beautyBA2 { aspect-ratio: 2/1; }
@media (max-width: 768px){
  #beautyBA  { aspect-ratio: 4/3; }
  #beautyBA2 { aspect-ratio: 4/3; }
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after-mask{ position:absolute; inset:0; clip-path: inset(0 0 0 50%); transition: clip-path .15s ease-out; }
.ba-handle{
  position:absolute; top:0; bottom:0; width:2px; background: linear-gradient(180deg, transparent, #7df9ff 20%, #7df9ff 80%, transparent);
  filter: drop-shadow(0 0 12px #7df9ff);
  transform: translateX(-50%); pointer-events:none;
}
.ba-knob{
  position:absolute; top:50%; transform: translate(-50%,-50%);
  width:48px; height:48px; border-radius:9999px;
  background: rgba(7,9,18,.85); border:1px solid #7df9ff;
  display:flex; align-items:center; justify-content:center; color:#7df9ff;
  box-shadow: 0 0 30px rgba(125,249,255,.4); pointer-events:none;
}
.ba-label{ position:absolute; top:14px; padding:.35rem .7rem; border-radius:.5rem; font-size:.7rem; font-weight:600; letter-spacing:.05em; }
.ba-label.before{ left:14px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; }
.ba-label.after{ right:14px; background: linear-gradient(120deg,#22d3ee,#7c3aed); color:#04050a; }

/* HUD points overlay over face */
.hud-overlay{ position:absolute; inset:0; pointer-events:none; }
.hud-point{
  position:absolute; width:14px; height:14px; border-radius:9999px;
  border:1px solid #7df9ff; background: rgba(34,211,238,.18);
  box-shadow: 0 0 12px rgba(125,249,255,.55);
  animation: hudpulse 2.4s ease-in-out infinite;
}
.hud-point::after{
  content:""; position:absolute; inset:-8px; border-radius:9999px; border:1px solid rgba(125,249,255,.35);
  animation: hudring 2.4s ease-out infinite;
}
@keyframes hudpulse{ 0%,100%{ transform: scale(1); opacity:1 } 50%{ transform: scale(1.15); opacity:.7 } }
@keyframes hudring{ 0%{ transform: scale(.6); opacity:.8 } 100%{ transform: scale(1.6); opacity:0 } }

.hud-line{ position:absolute; height:1px; background: linear-gradient(90deg, transparent, rgba(125,249,255,.55), transparent); }

/* Beauty 3D mesh face */
.face-mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.6; mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, rgba(125,249,255,.08) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(125,249,255,.08) 0 1px, transparent 1px 22px);
  mask-image: radial-gradient(ellipse 40% 55% at 50% 48%, black 50%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 40% 55% at 50% 48%, black 50%, transparent 80%);
}

/* ===== Document scan animation ===== */
.doc-stack{ position:relative; aspect-ratio: 4/3; }
.doc-paper{
  position:absolute; inset:8% 12%; background: linear-gradient(180deg, #0e1326, #0a0d1d);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.doc-line{ height:7px; background: rgba(255,255,255,.07); border-radius:4px; margin-bottom:9px; }
.doc-line.short{ width:55% }
.doc-line.shorter{ width:35% }
.doc-line.parsed{ background: linear-gradient(90deg, rgba(34,211,238,.6), rgba(124,58,237,.6)); }

.doc-scanner{
  position:absolute; left:6%; right:6%; height:54px; top:8%;
  background: linear-gradient(180deg, rgba(125,249,255,0), rgba(125,249,255,.18), rgba(125,249,255,0));
  border-top:1px solid rgba(125,249,255,.55); border-bottom:1px solid rgba(125,249,255,.55);
  filter: drop-shadow(0 0 18px rgba(125,249,255,.45));
  animation: docscan 4.5s ease-in-out infinite;
}
@keyframes docscan{
  0%{ top:8% } 50%{ top: calc(92% - 54px) } 100%{ top:8% }
}

/* ===== Number flip / counter ===== */
.metric{ font-feature-settings: "tnum" 1, "lnum" 1; }

/* ===== Footer ===== */
.footer-grid{
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.18), transparent 60%);
}

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#070912 }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#22d3ee,#7c3aed); border-radius:8px }

/* ===== Accordion ===== */
details.faq{ border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px 20px; background: rgba(255,255,255,.02); transition: all .25s ease; }
details.faq[open]{ background: rgba(255,255,255,.035); border-color: rgba(125,249,255,.25); }
details.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; }
details.faq summary::-webkit-details-marker{ display:none }
details.faq .arrow{ transition: transform .25s ease; }
details.faq[open] .arrow{ transform: rotate(180deg); }

/* ===== Marker glow points used for face mapping ===== */
.dot-cyan{ background: rgba(34,211,238,.95); box-shadow: 0 0 12px #22d3ee, 0 0 4px #fff inset; }
.dot-iris{ background: rgba(167,139,250,.95); box-shadow: 0 0 12px #a78bfa, 0 0 4px #fff inset; }
.dot-amber{ background: rgba(230,192,123,.95); box-shadow: 0 0 12px #e6c07b, 0 0 4px #fff inset; }
.dot-emerald{ background: rgba(110,231,183,.95); box-shadow: 0 0 12px #6ee7b7, 0 0 4px #fff inset; }

/* ===== Bento card ===== */
.bento{
  position:relative; padding:1.25rem; border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  overflow:hidden;
}
.bento:hover{ transform: translateY(-3px); border-color: rgba(125,249,255,.35); }
.bento::before{
  content:""; position:absolute; inset:0; background:
    radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(125,249,255,.10), transparent 40%);
  opacity:0; transition: opacity .3s ease; pointer-events:none;
}
.bento:hover::before{ opacity:1; }

/* ===== Misc ===== */
.no-scrollbar::-webkit-scrollbar{ display:none }
.divider-glow{ height:1px; background: linear-gradient(90deg, transparent, rgba(125,249,255,.4), transparent); }

/* ===== Clinical AI Terminal ===== */
.clinical-terminal{
  background:#080b10;
  border:1px solid rgba(16,220,140,.2);
  border-radius:12px;
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
  box-shadow: 0 0 0 1px rgba(16,220,140,.08), 0 0 40px rgba(16,220,140,.06), 0 20px 60px rgba(0,0,0,.7);
}

/* Header */
.clin-header{
  background: linear-gradient(90deg,#0c1a12,#081510);
  border-bottom:1px solid rgba(16,220,140,.15);
  padding:7px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.clin-header-left,.clin-header-right{ display:flex; align-items:center; gap:8px; }
.clin-dot{
  width:8px; height:8px; border-radius:50%;
  background:#10dc8c; box-shadow:0 0 8px #10dc8c;
  animation:clinpulse 1.2s ease-in-out infinite;
}
@keyframes clinpulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
.clin-title{ font-size:10px; font-weight:700; color:#10dc8c; letter-spacing:.1em; }
.clin-sep{ color:rgba(255,255,255,.2); font-size:10px; }
.clin-sub{ font-size:9px; color:rgba(255,255,255,.4); letter-spacing:.06em; }
.clin-badge{
  font-size:8px; font-weight:700; padding:2px 7px; border-radius:3px;
  letter-spacing:.08em;
}
.scanning-badge{ background:rgba(255,200,0,.12); color:#ffc800; border:1px solid rgba(255,200,0,.3); }
.done-badge{     background:rgba(16,220,140,.12); color:#10dc8c;  border:1px solid rgba(16,220,140,.3); }
.clin-time{ font-size:9px; color:rgba(255,255,255,.35); }

/* Image wrap */
.clin-img-wrap{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#000;
}
.clin-img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.75; filter:saturate(.7) contrast(1.1);
}

/* Scan grid */
.clin-scan-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(16,220,140,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,220,140,.06) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:0; transition:opacity .4s;
}
.clin-scan-grid.active{ opacity:1; }

/* Scan bar */
.clin-scan-bar{
  position:absolute; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, #10dc8c, transparent);
  filter: drop-shadow(0 0 8px #10dc8c);
  top:-4px; opacity:0; transition:opacity .3s;
}
.clin-scan-bar.active{
  opacity:1;
  animation: clinScan 1.8s ease-in-out infinite;
}
@keyframes clinScan{
  0%{ top:0%; opacity:.8 }
  50%{ top:96%; opacity:1 }
  100%{ top:0%; opacity:.8 }
}

/* Detection boxes */
.clin-detections{ position:absolute; inset:0; pointer-events:none; }
.clin-box{
  position:absolute;
  border:1.5px solid #10dc8c;
  box-shadow: 0 0 12px rgba(16,220,140,.3), inset 0 0 16px rgba(16,220,140,.04);
  border-radius:3px;
  opacity:0; transform:scale(.95);
  transition:opacity .5s ease, transform .5s ease;
}
.clin-box.visible{ opacity:1; transform:scale(1); }
.clin-box-warn{
  border-color:#ffc800;
  box-shadow: 0 0 12px rgba(255,200,0,.3), inset 0 0 16px rgba(255,200,0,.04);
}
.clin-box-label{
  position:absolute; top:-18px; left:0;
  font-size:7.5px; font-weight:700; letter-spacing:.08em;
  color:#10dc8c; white-space:nowrap;
}
.clin-box-warn .clin-box-label{ color:#ffc800; }

/* Corner HUD */
.clin-corner{
  position:absolute; width:14px; height:14px; pointer-events:none;
}
.clin-corner span{
  position:absolute; background:#10dc8c; border-radius:1px;
}
.clin-corner span:nth-child(1){ width:100%; height:1.5px; top:0; left:0; }
.clin-corner span:nth-child(2){ height:100%; width:1.5px; top:0; left:0; }
.clin-corner.tl{ top:8px; left:8px; }
.clin-corner.tr{ top:8px; right:8px; transform:scaleX(-1); }
.clin-corner.bl{ bottom:8px; left:8px; transform:scaleY(-1); }
.clin-corner.br{ bottom:8px; right:8px; transform:scale(-1); }

/* Progress */
.clin-progress-wrap{
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.06);
}
.clin-progress-bar{
  height:100%; width:0%; background:#10dc8c;
  box-shadow:0 0 8px #10dc8c;
  transition:width .1s linear;
}

/* Diagnostic report */
.clin-report{
  padding:14px; border-top:1px solid rgba(16,220,140,.12);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.clin-report.visible{ opacity:1; transform:translateY(0); pointer-events:all; }

.clin-report-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.clin-report-title{
  font-size:12px; font-weight:700; color:#e8f0eb; letter-spacing:.02em; direction:rtl;
}
.clin-report-sub{ font-size:8.5px; color:rgba(255,255,255,.4); margin-top:2px; letter-spacing:.05em; }

.clin-severity{ text-align:center; flex-shrink:0; }
.clin-sev-label{ font-size:7px; color:rgba(255,255,255,.35); letter-spacing:.1em; margin-bottom:2px; }
.clin-sev-val{
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:3px 8px; border-radius:3px;
}
.clin-sev-val.moderate{ color:#ffc800; background:rgba(255,200,0,.1); border:1px solid rgba(255,200,0,.25); }
.clin-sev-val.severe{   color:#ff4444; background:rgba(255,68,68,.1);  border:1px solid rgba(255,68,68,.25);  }
.clin-sev-val.low{      color:#10dc8c; background:rgba(16,220,140,.1); border:1px solid rgba(16,220,140,.25); }

/* Metrics */
.clin-metrics{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin-bottom:10px;
}
.clin-metric{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:5px; padding:6px 8px;
}
.clin-metric-label{ font-size:7px; color:rgba(255,255,255,.35); letter-spacing:.08em; margin-bottom:3px; }
.clin-metric-val{ font-size:10px; font-weight:700; color:#c8cad8; }
.clin-metric-val.accent{ color:#10dc8c; }
.clin-metric-val.warn{   color:#ffc800; }

/* Tissue composition */
.clin-tissue-section{ margin-bottom:10px; }
.clin-section-title{
  font-size:7px; color:rgba(255,255,255,.3); letter-spacing:.1em;
  margin-bottom:6px; text-transform:uppercase;
}
.clin-tissue-bars{ display:flex; flex-direction:column; gap:4px; }
.clin-tissue-row{ display:flex; align-items:center; gap:7px; }
.clin-tissue-label{ font-size:8px; color:rgba(255,255,255,.5); min-width:70px; }
.clin-tissue-bar-wrap{
  flex:1; height:5px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden;
}
.clin-tissue-bar{
  height:100%; border-radius:3px; width:0%;
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
}
.clin-tissue-bar.green { background:linear-gradient(90deg,#10dc8c,#00a854); }
.clin-tissue-bar.yellow{ background:linear-gradient(90deg,#ffc800,#e68c00); }
.clin-tissue-bar.red   { background:linear-gradient(90deg,#ff4444,#cc0000); }
.clin-tissue-pct{ font-size:8px; font-weight:700; color:rgba(255,255,255,.5); min-width:28px; text-align:right; }

/* Findings */
.clin-findings{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.clin-finding{
  display:flex; align-items:flex-start; gap:6px; font-size:9px;
  padding:5px 8px; border-radius:5px; direction:rtl;
}
.clin-finding.ok{   background:rgba(16,220,140,.06); color:rgba(255,255,255,.75); border:1px solid rgba(16,220,140,.1); }
.clin-finding.warn{ background:rgba(255,200,0,.06);  color:rgba(255,255,255,.75); border:1px solid rgba(255,200,0,.15); }
.clin-finding.ok   i{ color:#10dc8c; flex-shrink:0; margin-top:1px; }
.clin-finding.warn i{ color:#ffc800; flex-shrink:0; margin-top:1px; }

/* Treatment Rx */
.clin-rx{
  background:rgba(16,220,140,.04);
  border:1px solid rgba(16,220,140,.15);
  border-radius:6px; padding:8px 10px;
}
.clin-rx-label{ font-size:7px; color:#10dc8c; letter-spacing:.1em; margin-bottom:4px; }
.clin-rx-val{ font-size:9.5px; color:#c8cad8; font-weight:600; margin-bottom:3px; direction:rtl; }
.clin-rx-followup{ font-size:8px; color:rgba(255,255,255,.4); direction:rtl; }

/* ===== Bloomberg Terminal ===== */
:root {
  --bb-bg:    #08090d;
  --bb-bg2:   #0d0f18;
  --bb-border:#1e2030;
  --bb-orange:#FF6600;
  --bb-orange2:#e85d00;
  --bb-pos:   #00e676;
  --bb-neg:   #ff3d3d;
  --bb-text:  #c8cad8;
  --bb-dim:   #6b7080;
  --bb-mono:  'JetBrains Mono', monospace;
}

.bb-terminal{
  background: var(--bb-bg);
  border: 1px solid var(--bb-orange);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,102,0,.15), 0 0 40px rgba(255,102,0,.08), 0 20px 60px rgba(0,0,0,.7);
  font-family: var(--bb-mono);
}

/* Header */
.bb-header{
  background: var(--bb-orange);
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; gap: 10px;
  min-height: 28px;
}
.bb-header-left, .bb-header-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bb-logo-badge{
  background: #000; color: var(--bb-orange); font-size: 10px; font-weight:800;
  padding: 1px 5px; border-radius:2px; letter-spacing:.12em;
}
.bb-sep{ color:rgba(0,0,0,.5); font-size:11px; }
.bb-symbol{ color:#000; font-size:11px; font-weight:700; letter-spacing:.06em; }
.bb-sym-sep{ opacity:.5; margin:0 1px; }
.bb-price{ color:#000; font-size:13px; font-weight:800; font-family:var(--bb-mono); }
.bb-change{ font-size:11px; font-weight:700; }
.bb-change.pos{ color:#003300; }
.bb-change.neg{ color:#330000; }
.bb-tag{ color:rgba(0,0,0,.65); font-size:9px; letter-spacing:.08em; }
.bb-clock{ color:#000; font-size:10px; font-family:var(--bb-mono); font-weight:700; }
.bb-live-dot{
  width:7px; height:7px; border-radius:50%; background:#003300;
  box-shadow:0 0 5px #003300; animation:bbpulse 1s ease-in-out infinite;
}
@keyframes bbpulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* Body */
.bb-body{
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 0;
  border-top: 1px solid var(--bb-border);
}

/* Panel label */
.bb-panel-label{
  font-size: 8px; letter-spacing:.12em; color: var(--bb-orange);
  padding: 5px 8px 3px; border-bottom:1px solid var(--bb-border);
  text-transform:uppercase;
}
.bb-accent{ color: var(--bb-orange); }
.pos{ color: var(--bb-pos) !important; }
.neg{ color: var(--bb-neg) !important; }

/* Chart column */
.bb-chart-col{
  border-right: 1px solid var(--bb-border);
  display:flex; flex-direction:column;
}
.bb-canvas{ width:100% !important; height:160px !important; display:block; }
.bb-chart-footer{
  padding:6px 8px; border-top:1px solid var(--bb-border);
  background: var(--bb-bg2);
}
.bb-stat-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:5px;
}
.bb-stat{ display:flex; gap:3px; font-size:9px; }
.bb-stat-label{ color: var(--bb-dim); }
.bb-stat-val{ color: var(--bb-text); font-weight:600; }

.bb-signal-row{
  display:flex; align-items:center; gap:6px;
}
.bb-signal-badge{
  font-size:8px; font-weight:700; letter-spacing:.06em;
  padding:1px 5px; border-radius:2px;
}
.bb-signal-badge.pos{ background:rgba(0,230,118,.15); color:var(--bb-pos); border:1px solid var(--bb-pos); }
.bb-signal-badge.neg{ background:rgba(255,61,61,.12); color:var(--bb-neg); border:1px solid var(--bb-neg); }
.bb-signal-bar-wrap{
  flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden;
}
.bb-signal-bar{ height:100%; background: linear-gradient(90deg,var(--bb-pos),#00a854); border-radius:2px; }
.bb-conf{ font-size:9px; color:var(--bb-pos); font-weight:700; }

/* Order book */
.bb-book-col{
  border-right: 1px solid var(--bb-border);
  display:flex; flex-direction:column;
}
.bb-book-header{
  display:flex; justify-content:space-between;
  padding: 3px 6px; font-size:7px; color:var(--bb-dim);
  border-bottom:1px solid var(--bb-border);
  letter-spacing:.06em;
}
.bb-asks, .bb-bids{ flex:1; overflow:hidden; }
.bb-book-row{
  display:flex; justify-content:space-between;
  padding: 1.5px 6px; font-size:8.5px; position:relative; overflow:hidden;
}
.bb-book-row .bb-depth{
  position:absolute; top:0; bottom:0; right:0;
  opacity:.2; pointer-events:none;
}
.bb-book-row.ask .bb-depth{ background:var(--bb-neg); }
.bb-book-row.bid .bb-depth{ background:var(--bb-pos); }
.bb-book-row.ask .bb-book-price{ color:var(--bb-neg); font-weight:600; }
.bb-book-row.bid .bb-book-price{ color:var(--bb-pos); font-weight:600; }
.bb-book-row .bb-book-size{ color:var(--bb-dim); font-size:8px; }

.bb-spread-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 6px; background:rgba(255,102,0,.06);
  border-top:1px solid var(--bb-border); border-bottom:1px solid var(--bb-border);
}
.bb-spread-label{ font-size:7px; color:var(--bb-orange); letter-spacing:.08em; }
.bb-spread-val{ font-size:8px; color:var(--bb-orange); font-weight:700; }

/* Watchlist */
.bb-watch-col{ display:flex; flex-direction:column; }
.bb-watchlist{ flex:1; }
.bb-watch-row{
  display:grid; grid-template-columns:1fr auto auto; gap:4px;
  align-items:center; padding:3px 6px;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .15s;
}
.bb-watch-row:hover{ background:rgba(255,102,0,.05); }
.bb-watch-sym{ font-size:8px; color:var(--bb-dim); letter-spacing:.04em; }
.bb-watch-p{ font-size:8.5px; color:var(--bb-text); font-weight:600; text-align:right; }
.bb-watch-c{ font-size:7.5px; font-weight:700; min-width:40px; text-align:right; }
.bb-watch-c.pos{ color:var(--bb-pos); }
.bb-watch-c.neg{ color:var(--bb-neg); }

.bb-levels{ padding:2px 0; }
.bb-level-row{
  display:flex; justify-content:space-between;
  padding:2px 6px; font-size:8.5px;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.bb-level-name{ color:var(--bb-dim); letter-spacing:.05em; }
.bb-level-val{ font-weight:700; }

/* Ticker tape */
.bb-ticker-wrap{
  overflow:hidden; background:rgba(0,0,0,.4);
  border-top:1px solid var(--bb-border); padding:4px 0;
}
.bb-ticker-track{
  display:flex; gap:16px; width:max-content;
  font-size:9px; color:var(--bb-dim); font-family:var(--bb-mono);
  animation: bbticker 40s linear infinite;
  white-space:nowrap;
}
.bb-ticker-track span{ white-space:nowrap; }
.bb-sep-dot{ color:var(--bb-orange); opacity:.5; }
@keyframes bbticker{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Responsive */
@media(max-width:640px){
  .bb-body{ grid-template-columns:1fr; }
  .bb-book-col, .bb-watch-col{ display:none; }
  .bb-canvas{ height:130px !important; }
}

/* ===== Responsive helpers ===== */
.no-scrollbar::-webkit-scrollbar{ display:none }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.divider-glow{ height:1px; background: linear-gradient(90deg, transparent, rgba(125,249,255,.4), transparent); }

/* ===== Hamburger / Mobile Nav ===== */
.hamburger-line{
  display:block; width:22px; height:2px; border-radius:2px;
  background:#fff; transition: transform .3s ease, opacity .3s ease;
}
#mobileMenuBtn.open .hamburger-line:nth-child(1){ transform: translateY(6px) rotate(45deg); }
#mobileMenuBtn.open .hamburger-line:nth-child(2){ opacity:0; }
#mobileMenuBtn.open .hamburger-line:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  max-height:0; overflow:hidden;
  transition: max-height .26s cubic-bezier(.4,0,.2,1);
  background: rgba(4,5,10,.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(34,211,238,.1);
}
.mobile-nav.open{ max-height:540px; }
.mobile-nav-link{
  display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border-radius:.75rem;
  font-size:.92rem; font-weight:500; color:rgba(255,255,255,.72);
  transition: color .15s, background .15s, border-color .15s;
  border: 1px solid transparent;
}
.mobile-nav-link:hover,
.mobile-nav-link:active{ color:#fff; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.07); }

/* ===== GLOBAL — prevent any horizontal overflow ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px){
  /* BA sliders: use natural image ratios */
  #beautyBA  { aspect-ratio: 8/3; }
  #beautyBA2 { aspect-ratio: 2/1; }
}

/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px){
  .hide-mobile{ display:none }

  /* Prevent decorative blobs from causing overflow */
  .absolute.-top-32, .absolute.-bottom-32,
  .absolute.-top-40, .absolute.-bottom-40 {
    overflow: hidden;
  }

  /* BA sliders on mobile */
  #beautyBA  { aspect-ratio: 4/3; }
  #beautyBA2 { aspect-ratio: 4/3; }

  /* ba-label smaller on mobile */
  .ba-label{ font-size:.6rem; padding:.25rem .5rem; }

  /* Buttons stack nicely */
  .btn{ padding:.7rem 1.1rem; font-size:.85rem; }

  /* Bento cards full-width */
  .bento{ padding:1rem; }

  /* Section spacing */
  section{ padding-top:3rem !important; padding-bottom:3rem !important; }

  /* Glass cards padding */
  .glass-strong.rounded-3xl{ border-radius:1.25rem; }

  /* Doc stack */
  .doc-stack{ aspect-ratio: 5/4; }

  /* HUD points slightly smaller */
  .hud-point{ width:10px; height:10px; }
  .hud-point::after{ inset:-6px; }

  /* Bloomberg terminal — hide heavy columns on mobile */
  .bb-body{ grid-template-columns: 1fr; }
  .bb-book-col, .bb-watch-col{ display:none; }
  .bb-canvas{ height:130px !important; }

  /* Fix hero grid — single column */
  #hero .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }
  /* Hero globe shrinks on mobile */
  #globeCanvas { max-height: 220px; }
  #hero .lg\\:col-span-5 { order: 2; }
  #hero .lg\\:col-span-7 { order: 1; }

  /* About section single column */
  #about .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Finance section single column */
  #finance .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Health section single column */
  #health-panel .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* CTA section single column */
  #cta .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Security section single column */
  #security .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Custom AI section single column */
  #custom .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Docuflow section single column */
  #docuflow .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr;
  }

  /* Services bento grid — 2 columns on mobile, 1 on xs */
  #services .grid.md\\:grid-cols-3{
    grid-template-columns: repeat(2, 1fr);
  }

  /* All section grids that use lg:grid-cols-12 */
  .grid.lg\\:grid-cols-12{
    grid-template-columns: 1fr !important;
  }
  .lg\\:col-span-5, .lg\\:col-span-7, .lg\\:col-span-4,
  .lg\\:col-span-6, .lg\\:col-span-8, .lg\\:col-span-3{
    grid-column: span 1 / span 1 !important;
  }

  /* Lead form - stack the 2-column grid */
  #leadForm .grid.grid-cols-2{
    grid-template-columns: 1fr;
  }

  /* FAQ columns */
  .grid.sm\\:grid-cols-2{
    grid-template-columns: 1fr !important;
  }

  /* ROI metrics - 2 col on mobile */
  .grid.lg\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Floating HUD badges that may overflow */
  .absolute.top-1\\/2.-translate-y-1\\/2.-right-2{
    display: none;
  }

  /* Hero stats 3 col stays on mobile - make text smaller */
  .grid.grid-cols-3 .text-2xl { font-size: 1.25rem; }

  /* Heading sizes */
  h1.text-4xl { font-size: 2rem !important; }
  h2.text-3xl { font-size: 1.75rem !important; }
}

/* ===== EXTRA SMALL (max 480px) ===== */
@media (max-width: 480px){
  /* Extra small screens */
  #beautyBA,
  #beautyBA2{ aspect-ratio: 3/2; }

  .ba-label{ display:none; }

  .hud-chip{ font-size:.65rem; padding:.3rem .6rem; }

  .btn-primary, .btn-ghost{ padding:.6rem .9rem; font-size:.8rem; }

  /* Services bento: single column on very small screens */
  #services .grid.md\\:grid-cols-3{
    grid-template-columns: 1fr;
  }

  /* ROI: 1 col on very small screens */
  .grid.lg\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Hero stats — vertical on xs */
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Typography */
  h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.5rem !important; }
  p  { font-size: .9rem !important; }

  /* Lead form CTA section buttons — full width */
  .btn-primary, .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   MOBILE COMPREHENSIVE FIX — added for full mobile responsiveness
   ================================================================ */

/* ── Hard overflow guard ── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
*, *::before, *::after { box-sizing: border-box !important; }
img, video, canvas, iframe { max-width: 100% !important; }

/* ── 1. NAVBAR — prevent right-side overflow on small phones ── */
@media (max-width: 420px) {
  /* Shrink "Get Demo" button */
  #navbar .btn.btn-primary {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
  }
  /* Shrink lang toggle */
  #langToggle {
    padding: 4px 8px !important;
    font-size: 10px !important;
    gap: 3px !important;
  }
  /* Hide logo subtitle to save space */
  #navbar .text-white\/50.font-mono.tracking-widest {
    display: none !important;
  }
  /* Tighten navbar container */
  #navbar .max-w-7xl { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* ── 2. HERO — stats grid & font fixes ── */
@media (max-width: 640px) {
  /* 3-col stats → still 3-col but smaller text */
  #hero .grid.grid-cols-3 .text-2xl,
  #hero .grid.grid-cols-3 .text-3xl {
    font-size: 1.1rem !important;
  }
  #hero .grid.grid-cols-3 .text-xs { font-size: 0.62rem !important; }

  /* Hero badge chips wrap */
  #hero .flex.flex-wrap.items-center.gap-3 { gap: 0.5rem !important; }

  /* Hero description max-width: full on mobile */
  #hero p.max-w-2xl { max-width: 100% !important; }
}
@media (max-width: 480px) {
  /* Force 1-col stats on tiny phones */
  #hero .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
  /* Hero heading */
  #hero h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
}

/* ── 3. ABOUT SECTION — inner 3-col bento grid ── */
@media (max-width: 768px) {
  /* The 6 service bento cards inside the glass panel */
  #about .lg\:col-span-7 .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Keep the centre VYRON core spanning full width */
  #about .lg\:col-span-7 .grid.grid-cols-3 > .col-span-3 {
    grid-column: 1 / -1 !important;
  }
  /* About feature list: 2-col stays on tablet, 1-col on xs */
  #about .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  #about .sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
  #about .lg\:col-span-7 .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 4. CLINICAL TERMINAL — metrics 4-col → 2-col ── */
@media (max-width: 640px) {
  .clin-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .clin-tissue-label { min-width: 52px !important; font-size: 7.5px !important; }
  .clin-header-left { gap: 5px !important; }
  /* Hide the long subtitle in header to prevent overflow */
  .clin-sub { display: none !important; }
  .clin-report-title { font-size: 11px !important; }
  .clin-metric-val { font-size: 9px !important; }
}

/* ── 5. HEALTH PANEL — sidebar nav wraps on mobile ── */
@media (max-width: 640px) {
  #health-panel .md\:col-span-1 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  /* Dashboard mockup min-height: auto on mobile */
  #health-panel .min-h-\[400px\] { min-height: 0 !important; }
}

/* ── 6. BEAUTY SECTION — bottom HUD bar, wrap on small screens ── */
@media (max-width: 640px) {
  /* Bottom centered HUD bar inside each BA slider */
  #beautyBA .absolute.bottom-4,
  #beautyBA2 .absolute.bottom-4 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px 6px !important;
    font-size: 9px !important;
    padding: 5px 8px !important;
    max-width: 88% !important;
  }
  /* Hide the pipe separators */
  #beautyBA .absolute.bottom-4 > .opacity-30,
  #beautyBA2 .absolute.bottom-4 > .opacity-30 { display: none !important; }

  /* Top HUD chip — smaller text */
  #beautyBA .absolute.top-4,
  #beautyBA2 .absolute.top-4 { font-size: 8px !important; padding: 3px 8px !important; }

  /* Detection list items wrap better */
  #beauty .glass-strong ul li { gap: 0.5rem !important; }
  #beauty .glass-strong ul li .text-\[11px\] { font-size: 10px !important; }
}
@media (max-width: 480px) {
  /* Stack beauty detected proposals list on xs */
  #beauty .lg\:col-span-4 { padding: 0 !important; }
}

/* ── 7. DOCUFLOW — doc stat grid ── */
@media (max-width: 360px) {
  #docuflow .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ── 8. SECURITY — orbit rings: clamp & clip ── */
@media (max-width: 768px) {
  #security .relative.glass-strong.rounded-3xl.aspect-square {
    max-width: 340px !important;
    margin: 0 auto;
  }
  /* Scale down the three orbit rings proportionally */
  #security .w-72.h-72 { width: 180px !important; height: 180px !important; }
  #security .w-56.h-56 { width: 140px !important; height: 140px !important; }
  #security .w-40.h-40 { width: 100px !important; height: 100px !important; }
  #security .w-24.h-24 { width: 56px !important; height: 56px !important; }
  /* Reposition orbiting badges for smaller ring */
  #security .absolute.glass.rounded-lg.w-10.h-10 { width: 32px !important; height: 32px !important; }
}

/* ── 9. ROI — 2-col on mobile, 1-col on xs ── */
@media (max-width: 480px) {
  #roi .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  #roi .text-5xl { font-size: 2.25rem !important; }
}

/* ── 10. CUSTOM AI — service bento grid ── */
@media (max-width: 480px) {
  #custom .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 11. INVESTOR — chart height on mobile ── */
@media (max-width: 480px) {
  #investorChart { height: 180px !important; }
  #investor .grid.grid-cols-3 { gap: 0.5rem !important; }
  #investor .grid.grid-cols-3 .font-mono { font-size: 0.8rem !important; }
}

/* ── 12. COMPETITIVE TABLE — font scale on mobile ── */
@media (max-width: 480px) {
  #competitive table { font-size: 10px !important; }
  #competitive table th,
  #competitive table td { padding: 6px 6px !important; }
  #competitive table td:first-child { font-size: 9.5px !important; }
}

/* ── 13. CASES / TESTIMONIALS — gap tighter on mobile ── */
@media (max-width: 640px) {
  #cases .grid.grid-cols-1.md\:grid-cols-3 { gap: 1rem !important; }
  #cases blockquote { font-size: 0.82rem !important; }
}

/* ── 14. ROADMAP — items ── */
@media (max-width: 768px) {
  #roadmap .space-y-8 > div { grid-template-columns: 1fr !important; }
  /* Centre dot column is already hidden below lg with hidden lg:flex */
}

/* ── 15. CTA SECTION ── */
@media (max-width: 640px) {
  /* Feature checklist: 1 col on mobile */
  #cta .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  /* Form inside CTA */
  #leadForm .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  /* CTA card padding */
  #cta .glass-strong.rounded-3xl { padding: 1.5rem !important; }
}
@media (max-width: 480px) {
  #cta h2 { font-size: 1.5rem !important; }
}

/* ── 16. FOOTER ── */
/* Tablet: 2-column layout */
@media (min-width: 481px) and (max-width: 767px) {
  footer .grid.md\:grid-cols-12 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Brand block spans full width */
  footer .md\:col-span-5 { grid-column: 1 / -1 !important; }
  /* Other columns each take 1 of 2 */
  footer .md\:col-span-2,
  footer .md\:col-span-3 { grid-column: span 1 !important; }
}
/* Mobile: 1 column */
@media (max-width: 480px) {
  footer .grid.md\:grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  footer .md\:col-span-5,
  footer .md\:col-span-2,
  footer .md\:col-span-3 { grid-column: 1 / -1 !important; }
  /* Footer bottom row stacks */
  footer .flex.flex-col.md\:flex-row { flex-direction: column !important; text-align: center; }
  footer .flex.items-center.gap-4 { justify-content: center; }
}

/* ── 17. MARQUEE — prevent overflow ── */
.marquee { overflow: hidden !important; }

/* ── 18. GLOBAL: ensure decorative blobs never cause horizontal scroll ── */
section, header, footer { overflow: hidden !important; position: relative !important; }

/* ── 19. BLOOMBERG TERMINAL — compact on xs ── */
@media (max-width: 420px) {
  .bb-header { padding: 4px 8px !important; flex-wrap: wrap !important; gap: 4px !important; }
  .bb-header-right { gap: 6px !important; }
  .bb-price { font-size: 11px !important; }
  .bb-clock { display: none !important; }
}

/* ── 20. ALL SECTIONS: heading & paragraph scaling ── */
@media (max-width: 768px) {
  h2.text-3xl { font-size: 1.6rem !important; }
  h2.text-5xl { font-size: 1.6rem !important; }
  section p.leading-8 { line-height: 1.85 !important; font-size: 0.9rem !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.45rem !important; line-height: 1.25 !important; }
  section p.leading-8 { font-size: 0.875rem !important; }
}

/* ── 21. MOBILE PERFORMANCE & ANIMATION REDUCTION ── */
html { scroll-padding-top: 80px; }

@media (max-width: 768px) {
  /* Fix hero padding-top — section override (3rem) hides content behind fixed navbar */
  #hero { padding-top: 5.5rem !important; }

  /* Reduce backdrop-filter cost on mobile (GPU expensive on iOS Safari) */
  .glass        { backdrop-filter: blur(6px) saturate(120%) !important; -webkit-backdrop-filter: blur(6px) saturate(120%) !important; }
  .glass-strong { backdrop-filter: blur(8px) saturate(130%) !important; -webkit-backdrop-filter: blur(8px) saturate(130%) !important; }

  /* Stop text-gradient shimmer — stays at a nice static gradient */
  .text-gradient { animation: none !important; background-position: 60% 50%; }

  /* Kill scan-line (drop-shadow filter + animation is expensive) */
  .scan-line { display: none !important; }

  /* HUD pulse/ring: static dots on mobile */
  .hud-point         { animation: none !important; }
  .hud-point::after  { animation: none !important; opacity: 0; }

  /* Bento: skip transform + radial spotlight on touch */
  .bento:hover       { transform: none !important; }
  .bento::before     { display: none !important; }

  /* Glow-hover: skip transform + border animation on touch */
  .glow-hover:hover      { transform: none !important; }
  .glow-hover::after     { display: none !important; }

  /* Button hover: no translateY on touch (fires on tap, causes layout jank) */
  .btn-primary:hover { transform: none !important; box-shadow: 0 10px 40px -10px rgba(34,211,238,.55), 0 6px 30px -10px rgba(124,58,237,.55) !important; }

  /* Marquee: slower on mobile saves paint */
  .marquee__track { animation-duration: 70s !important; }

  /* Reveal: snappier fade on mobile */
  .reveal { transition: opacity .4s ease, transform .4s ease !important; }

  /* Touch scroll: momentum scrolling */
  body { -webkit-overflow-scrolling: touch; }
}