/* =====================================================================
   NEXUS-HOST · Deep Obsidian Void Theme
   ===================================================================== */
:root{
  --bg-void:#07080B; --surface:#0D0F14; --surface-2:#141720; --surface-3:#1C202C;
  --border-subtle:rgba(255,255,255,.08); --border-glow:rgba(0,255,135,.28);
  --text-primary:#F3F4F6; --text-secondary:#9CA3AF; --text-muted:#6B7280;
  --emerald:#00FF87; --cyan:#00E5FF; --violet:#8B5CF6; --amber:#FFB800; --red:#FF453A;
}
*{box-shadow:none}
html,body{background:var(--bg-void)}
::selection{background:rgba(0,255,135,.25);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0b0f}
::-webkit-scrollbar-thumb{background:#22262f;border-radius:10px;border:2px solid #0a0b0f}
::-webkit-scrollbar-thumb:hover{background:#2f3542}

/* ---------- ambient background ---------- */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%)}
.bg-glow{position:fixed;top:-25%;left:50%;transform:translateX(-50%);width:1100px;height:700px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 40% 30%,rgba(0,255,135,.10),transparent 55%),
             radial-gradient(circle at 65% 40%,rgba(0,229,255,.10),transparent 55%);
  filter:blur(30px)}
main,section,footer,header,.topbar{position:relative;z-index:1}

/* ---------- top bar ---------- */
.topbar{background:#05060a;border-bottom:1px solid var(--border-subtle);padding:8px 0}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);display:inline-block;
  box-shadow:0 0 0 0 rgba(0,255,135,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,255,135,.55)}70%{box-shadow:0 0 0 9px rgba(0,255,135,0)}100%{box-shadow:0 0 0 0 rgba(0,255,135,0)}}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,8,11,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border-subtle)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-weight:700;color:#04120a;
  background:linear-gradient(135deg,var(--emerald),var(--cyan));box-shadow:0 0 18px rgba(0,255,135,.35)}
.brand-text{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em;color:#fff;font-size:1.15rem}
.nav-item{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;color:var(--text-secondary);
  font-size:.9rem;font-weight:600;background:transparent;border:0;cursor:pointer;transition:color .2s,background .2s}
.nav-trigger:hover,.nav-active{color:#fff;background:rgba(255,255,255,.05)}
.nav-active{color:var(--emerald)}
.nav-dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;padding:8px;border-radius:14px;
  background:rgba(13,15,20,.96);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s cubic-bezier(.4,0,.2,1);
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;transition:background .18s}
.dd-link:hover{background:rgba(0,255,135,.08)}
.dd-title{color:#fff;font-weight:600;font-size:.9rem}
.dd-desc{color:var(--text-muted);font-size:.75rem}
.cur-dropdown{left:auto;right:0;min-width:230px}
.cur-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-subtle);color:#fff;font-size:.82rem;font-weight:600;transition:border-color .2s}
.cur-btn:hover{border-color:var(--border-glow)}
.cur-opt{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;
  background:transparent;border:0;cursor:pointer;color:#fff;font-weight:600;font-size:.85rem;transition:background .18s}
.cur-opt:hover{background:rgba(255,255,255,.05)}
.cur-opt-active{background:rgba(0,255,135,.1);color:var(--emerald)}
.mobile-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border-subtle);cursor:pointer}
.mobile-toggle span{width:18px;height:2px;background:#fff;margin:0 auto;transition:.3s;border-radius:2px}
.mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{max-height:0;overflow:hidden;transition:max-height .4s ease;background:rgba(7,8,11,.98);border-bottom:1px solid var(--border-subtle)}
.mobile-menu.open{max-height:85vh;overflow-y:auto}
.mm-group{padding:14px 20px;border-bottom:1px solid var(--border-subtle)}
.mm-label{color:var(--emerald);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:8px}
.mm-link{display:block;padding:9px 0;color:#d6d9e0;font-weight:600;font-size:.95rem}
.mm-link:hover{color:#fff}

/* ---------- buttons ---------- */
.btn-primary,.btn-ghost,.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;
  font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .2s,box-shadow .3s,background .25s,border-color .2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--emerald),var(--cyan));color:#04120a;
  box-shadow:0 6px 24px rgba(0,255,135,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,255,135,.42)}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--border-subtle)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--border-glow);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--emerald);border:1px solid var(--border-glow)}
.btn-outline:hover{background:rgba(0,255,135,.08);transform:translateY(-2px)}
.btn-lg{padding:15px 28px;font-size:1rem;border-radius:13px}
.btn-block{width:100%;justify-content:center}

/* ---------- typography helpers ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--emerald);font-weight:700}
.kicker::before{content:"";width:20px;height:1px;background:var(--emerald)}
.grad-text{background:linear-gradient(120deg,var(--emerald),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-v{background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3,.font-display{font-family:Syne,sans-serif}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:18px;padding:26px;transition:transform .3s,border-color .3s,background .3s}
.card:hover{transform:translateY(-5px);border-color:var(--border-glow);background:var(--surface-2)}
.glass{background:rgba(13,15,20,.6);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:18px}
.feature-ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;
  background:rgba(0,255,135,.1);border:1px solid rgba(0,255,135,.2);color:var(--emerald);margin-bottom:16px}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:24px}
.price-card{position:relative;background:var(--surface);border:1px solid var(--border-subtle);border-radius:20px;padding:30px;transition:transform .3s,border-color .3s}
.price-card:hover{transform:translateY(-6px);border-color:var(--border-glow)}
.price-card.popular{border-color:var(--border-glow);background:linear-gradient(180deg,rgba(0,255,135,.06),var(--surface))}
.price-card.popular::before{content:"MOST POPULAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--emerald),var(--cyan));color:#04120a;font-size:.64rem;font-weight:800;
  letter-spacing:.1em;padding:5px 14px;border-radius:20px}
.price-amt{font-family:"JetBrains Mono",monospace;font-size:2.6rem;font-weight:700;color:#fff;line-height:1}
.feat-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:var(--text-secondary);font-size:.9rem}
.feat-list li::before{content:"✓";color:var(--emerald);font-weight:800;flex-shrink:0}
.feat-list li.no::before{content:"✕";color:var(--text-muted)}

/* ---------- stats / badges ---------- */
.stat-num{font-family:"JetBrains Mono",monospace;font-size:2.4rem;font-weight:700;color:#fff}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;font-size:.78rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-secondary)}

/* ---------- domain search ---------- */
.domain-box{display:flex;gap:0;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:14px;padding:6px;flex-wrap:wrap}
.domain-box input{flex:1;min-width:200px;background:transparent;border:0;outline:none;color:#fff;padding:12px 16px;font-size:1rem;font-family:"JetBrains Mono",monospace}
.tld{display:inline-flex;padding:6px 12px;border-radius:8px;font-family:"JetBrains Mono",monospace;font-size:.8rem;
  background:var(--surface-3);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.tld.on{color:var(--emerald);border-color:var(--border-glow)}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid rgba(255,255,255,.12);
  color:#fff;padding:12px 15px;border-radius:11px;font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(0,255,135,.12)}
.auth-wrap{max-width:460px;margin:0 auto}
.hp{position:absolute;left:-9999px}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--border-subtle);border-radius:14px;margin-bottom:12px;overflow:hidden;background:var(--surface)}
.acc-q{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:18px 22px;
  background:transparent;border:0;cursor:pointer;color:#fff;font-weight:600;font-size:1rem}
.acc-q .ic{transition:transform .3s;color:var(--emerald)}
.acc.open .acc-q .ic{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--text-secondary);font-size:.92rem;line-height:1.7}
.acc-a-inner{padding:0 22px 20px}

/* ---------- CTA strip & footer ---------- */
.cta-strip{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--border-glow);background:var(--surface)}
.cta-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(0,255,135,.22),transparent 60%)}
.site-footer{border-top:1px solid var(--border-subtle);background:#05060a}
.foot-h{color:#fff;font-weight:700;font-size:.9rem;margin-bottom:14px}
.foot-l{display:block;color:var(--text-muted);font-size:.86rem;margin-top:9px;transition:color .18s}
.foot-l:hover{color:var(--emerald)}
.social-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;
  font-weight:700;background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-secondary);transition:.2s}
.social-ico:hover{color:var(--emerald);border-color:var(--border-glow);transform:translateY(-2px)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--border-subtle)}

/* ---------- terminal ---------- */
.term{background:#05060a;border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden;font-family:"JetBrains Mono",monospace;font-size:.82rem}
.term-bar{display:flex;gap:7px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border-subtle);background:var(--surface-2)}
.term-dot{width:11px;height:11px;border-radius:50%}
.term-body{padding:18px;line-height:1.9;color:#cfd3da}
.term-body .c1{color:var(--emerald)}.term-body .c2{color:var(--cyan)}.term-body .c3{color:var(--text-muted)}.term-body .c4{color:var(--amber)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- misc ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scrollx 26s linear infinite;align-items:center}
@keyframes scrollx{to{transform:translateX(-50%)}}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.trace{position:relative}
.trace::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,transparent,var(--emerald),var(--cyan),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s}
.trace:hover::after{opacity:.7}
.page-hero{padding:70px 0 40px}
.section{padding:64px 0}
@media(min-width:1024px){.section{padding:88px 0}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:22px;background:var(--surface-2);
  border:1px solid var(--border-subtle);font-size:.8rem;color:var(--text-secondary)}
.neon-shadow{text-shadow:0 0 28px rgba(0,255,135,.4)}

/* =====================================================================
   THEME SWITCHER · dark/light modes + accent demos
   ===================================================================== */
.theme-btn{padding:8px 11px}
.mode-opt{flex:1;padding:9px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-subtle);
  color:var(--text-primary);font-size:.82rem;font-weight:600;cursor:pointer;transition:.18s}
.mode-opt:hover,.mode-opt.on{border-color:var(--border-glow);color:var(--emerald)}
.acc-swatch{width:30px;height:30px;border-radius:9px;background:var(--sw);border:2px solid transparent;cursor:pointer;transition:.18s;position:relative}
.acc-swatch:hover{transform:scale(1.12)}
.acc-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--sw)}

/* ---- ACCENT PRESETS (remap primary/secondary accents) ---- */
html[data-accent=violet]{--emerald:#8B5CF6;--cyan:#22D3EE;--border-glow:rgba(139,92,246,.32)}
html[data-accent=cyan]{--emerald:#00E5FF;--cyan:#3B82F6;--border-glow:rgba(0,229,255,.32)}
html[data-accent=amber]{--emerald:#FFB800;--cyan:#FF7A00;--border-glow:rgba(255,184,0,.32)}
html[data-accent=rose]{--emerald:#FF4D8D;--cyan:#B24BFF;--border-glow:rgba(255,77,141,.32)}
html[data-accent=violet] .text-emerald2{color:#8B5CF6!important}
html[data-accent=cyan] .text-emerald2{color:#00E5FF!important}
html[data-accent=amber] .text-emerald2{color:#FFB800!important}
html[data-accent=rose] .text-emerald2{color:#FF4D8D!important}
html[data-accent=violet] .grad-text,html[data-accent=cyan] .grad-text,html[data-accent=amber] .grad-text,html[data-accent=rose] .grad-text{background:linear-gradient(120deg,var(--emerald),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- LIGHT MODE ---- */
html[data-theme=light]{
  --bg-void:#F3F5FB;--surface:#FFFFFF;--surface-2:#F0F2F8;--surface-3:#E4E8F2;
  --border-subtle:rgba(12,18,36,.10);--text-primary:#0B0F18;--text-secondary:#4A5364;--text-muted:#8A93A3;
}
html[data-theme=light] body{background:#F3F5FB;color:#242a38}
html[data-theme=light] .bg-grid{background-image:linear-gradient(rgba(12,18,36,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,36,.05) 1px,transparent 1px)}
html[data-theme=light] .bg-glow{opacity:.55}
html[data-theme=light] .topbar{background:#eef1f8;border-bottom-color:var(--border-subtle)}
html[data-theme=light] .site-header{background:rgba(255,255,255,.78)}
html[data-theme=light] .site-footer{background:#eef1f8;border-top-color:var(--border-subtle)}
html[data-theme=light] .nav-dropdown{background:rgba(255,255,255,.98);box-shadow:0 24px 60px rgba(20,30,60,.15)}
html[data-theme=light] .mobile-menu{background:rgba(255,255,255,.99)}
html[data-theme=light] .mobile-toggle span{background:#0B0F18}
html[data-theme=light] .brand-text{color:#0B0F18}
html[data-theme=light] .glass{background:rgba(255,255,255,.7)}
html[data-theme=light] .btn-ghost{background:rgba(12,18,36,.05);color:#0B0F18}
html[data-theme=light] .btn-ghost:hover{background:rgba(12,18,36,.09)}
html[data-theme=light] .btn-primary{color:#04120a}
/* flip fixed tailwind text utilities */
html[data-theme=light] .text-white{color:#0B0F18!important}
html[data-theme=light] .text-slate-200{color:#242a38!important}
html[data-theme=light] .text-slate-300{color:#333b4a!important}
html[data-theme=light] .text-slate-400{color:#4A5364!important}
html[data-theme=light] .text-slate-500{color:#6b7280!important}
html[data-theme=light] .text-slate-600{color:#9aa3b2!important}
html[data-theme=light] .border-white\/10{border-color:rgba(12,18,36,.10)!important}
html[data-theme=light] .border-white\/5{border-color:rgba(12,18,36,.06)!important}
html[data-theme=light] .bg-surface-2,html[data-theme=light] .bg-surface-3{background:var(--surface-2)!important}
html[data-theme=light] .hover\:bg-white\/5:hover{background:rgba(12,18,36,.04)!important}
/* keep terminal + CTA strip dark for contrast even in light mode */
html[data-theme=light] .term{background:#0b0d12;border-color:rgba(12,18,36,.15)}
html[data-theme=light] .cta-strip{background:#0b0d12}
html[data-theme=light] .cta-strip .text-white{color:#fff!important}
html[data-theme=light] .cta-strip .text-slate-400{color:#9CA3AF!important}
html[data-theme=light] .mode-opt{color:#0B0F18}

/* =====================================================================
   BUY CONTROLS · billing term + server location per plan
   ===================================================================== */
.buy-controls{margin-top:18px;display:grid;gap:10px}
.buy-controls label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:700;display:block;margin-bottom:4px}
.buy-controls select{width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-primary);
  padding:10px 12px;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;outline:none;transition:border-color .2s;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300FF87' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.buy-controls select:focus{border-color:var(--emerald)}
.plan-save{display:inline-block;margin-left:6px;font-size:.62rem;font-weight:800;letter-spacing:.06em;color:var(--emerald)}

/* =====================================================================
   RESPONSIVE / MOBILE POLISH
   ===================================================================== */
@media(max-width:520px){
  .page-hero{padding:44px 0 28px}
  .section{padding:48px 0}
  h1.font-display,.page-hero h1{font-size:2.05rem!important;line-height:1.08!important;overflow-wrap:break-word}
  .font-display.text-4xl,.font-display.text-5xl,.font-display.text-6xl,.font-display.text-7xl{font-size:2.05rem!important;line-height:1.1!important}
  .stat-num{font-size:1.9rem}
  .price-amt{font-size:2.1rem}
  .btn-lg{padding:13px 22px;font-size:.95rem}
  .term-body{font-size:.72rem;padding:14px}
  .cta-strip .py-14{padding-top:44px;padding-bottom:44px}
  .brand-text{font-size:1rem}
  .topbar{padding:6px 0}
}
@media(max-width:400px){
  h1.font-display,.page-hero h1,.font-display.text-4xl,.font-display.text-5xl,.font-display.text-6xl,.font-display.text-7xl{font-size:1.8rem!important}
}
/* prevent any horizontal overflow on small screens */
html,body{overflow-x:hidden;max-width:100vw}
img,svg,.term{max-width:100%}
.grad-text,.neon-title{overflow-wrap:break-word;word-break:normal}

/* mobile header + dropdown usability */
@media(max-width:640px){
  .cur-btn{padding:7px 9px;font-size:.76rem;gap:5px}
  .theme-btn{padding:7px 10px}
  .brand-mark{width:30px;height:30px;font-size:.9rem}
  .site-header .flex.gap-2{gap:6px}
  .nav-dropdown{position:fixed;left:10px;right:10px;top:118px;min-width:auto;width:auto}
  .topbar .text-xs{font-size:.66rem}
  .buy-controls{gap:8px}
}
@media(max-width:360px){
  .brand-text{font-size:.9rem}
  .cur-btn #cur-flag{display:none}
}
/* bento grid (startup home) */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento>*{grid-column:span 6}
@media(min-width:768px){
  .b-2{grid-column:span 2}.b-3{grid-column:span 3}.b-4{grid-column:span 4}.b-6{grid-column:span 6}
  .b-tall{grid-row:span 2}
}

/* =====================================================================
   PAGE LOADER + SCROLL PROGRESS
   ===================================================================== */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg-void);
  transition:opacity .5s ease,visibility .5s ease}
#preloader.hide{opacity:0;visibility:hidden}
.pl-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.pl-mark{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;
  font-weight:700;font-size:1.6rem;color:#04120a;background:linear-gradient(135deg,var(--emerald),var(--cyan));
  box-shadow:0 0 30px rgba(0,255,135,.4);animation:plpulse 1.4s ease-in-out infinite}
@keyframes plpulse{50%{transform:scale(1.08);box-shadow:0 0 46px rgba(0,255,135,.6)}}
.pl-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--emerald);animation:plspin .8s linear infinite}
@keyframes plspin{to{transform:rotate(360deg)}}
.pl-text{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.3em;color:var(--text-muted)}
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9998;
  background:linear-gradient(90deg,var(--emerald),var(--cyan));box-shadow:0 0 10px rgba(0,255,135,.6);transition:width .1s linear}

/* =====================================================================
   SOURCE / COPY PROTECTION  (deterrents)
   ===================================================================== */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;pointer-events:none}
img.allow-drag,a img{pointer-events:auto}
#devtools-warn{position:fixed;inset:0;z-index:100000;display:none;place-items:center;background:var(--bg-void);text-align:center;padding:24px}
#devtools-warn.show{display:grid}