:root{
  --void:#02040A;
  --navy:#0B1221;
  --cyan:#00CCFF;
  --green:#10B981;
  --white:#FFFFFF;
  --muted:#94A3B8;
  --glass:rgba(11,18,33,.72);
  --glass-border:rgba(255,255,255,.10);
  --gold:#F59E0B;
  --danger:#EF4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--void);color:var(--muted);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
strong{color:var(--white)}
code{color:var(--cyan)}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.section{padding:3.5rem 0}
.section-alt{background:linear-gradient(180deg, rgba(11,18,33,.25), rgba(11,18,33,.55))}
.section-header{margin-bottom:1.25rem}
.section-title{font-family:Rajdhani,system-ui,sans-serif;font-weight:700;letter-spacing:.08em;color:var(--white);text-transform:uppercase;margin:0}
.section-title.small{font-size:1.2rem}
.section-subtitle{margin:.55rem 0 0;max-width:70ch;line-height:1.6}

.glass{
  background:var(--glass);
  backdrop-filter: blur(10px);
  border:1px solid var(--glass-border);
  border-radius:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.82rem 1.25rem;
  border-radius:12px;
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  gap:.55rem;
  user-select:none;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--cyan);
  color:#000;
  box-shadow:0 0 15px rgba(0,204,255,.40);
}
.btn-primary:hover{box-shadow:0 0 18px rgba(0,204,255,.55)}
.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(0,204,255,.35);
}
.btn-ghost:hover{border-color:rgba(0,204,255,.7); box-shadow:0 0 14px rgba(0,204,255,.18)}
.btn.full{width:100%}

.muted{color:var(--muted)}

/* Preloader */
.preloader-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--void);
  opacity:1; visibility:visible;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader-overlay.hidden{opacity:0; visibility:hidden}
.preloader-inner{position:relative; text-align:center}
.preloader-logo{
  width:min(180px, 46vw);
  filter: drop-shadow(0 0 16px rgba(0,204,255,.35));
  animation:prePulse 1.2s ease-in-out infinite;
}
.preloader-text{
  margin:.9rem 0 0;
  font-family:Rajdhani,system-ui,sans-serif;
  letter-spacing:.18em;
  font-size:.78rem;
  color:rgba(148,163,184,.9);
  text-transform:uppercase;
}
.preloader-scanline{
  position:absolute; left:-15%; top:0;
  width:130%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,204,255,.9), transparent);
  animation:scan 1.1s linear infinite;
  opacity:.55;
}
@keyframes prePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes scan{0%{transform:translateY(20px)}100%{transform:translateY(170px)}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(2,4,10,.85);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}
.brand{display:flex; align-items:center}
.brand-logo{height:34px; width:auto}
.main-nav{display:flex; align-items:center; gap:1.5rem}
.nav-links{list-style:none; display:flex; align-items:center; gap:1.25rem; margin:0; padding:0}
.nav-link{
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--white);
  background:none; border:none; cursor:pointer;
}
.nav-link:hover{color:var(--cyan)}
.nav-actions{display:flex; align-items:center; gap:1rem}
.nav-login{
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color:rgba(148,163,184,.95);
}
.nav-login:hover{color:var(--cyan)}

.nav-dropdown{position:relative}
.nav-dropdown-menu{
  position:absolute;
  top:140%;
  left:0;
  min-width:280px;
  display:none;
  flex-direction:column;
  gap:.15rem;
  padding:.55rem;
  background:rgba(11,18,33,.96);
  backdrop-filter: blur(12px);
  border:1px solid rgba(0,204,255,.22);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.nav-dropdown-menu.open{display:flex}
.dropdown-item{padding:.65rem .7rem; border-radius:10px}
.dropdown-item:hover{background:rgba(2,4,10,.55)}
.dropdown-title{display:block; color:var(--white); font-family:Rajdhani,system-ui,sans-serif; font-weight:700; letter-spacing:.06em}
.dropdown-sub{display:block; color:var(--muted); font-size:.82rem; margin-top:.15rem}

/* Hamburger (mobile) */
.hamburger{display:none; background:none; border:none; cursor:pointer; padding:.35rem}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:999px;margin:4px 0;opacity:.9}

/* Heroes */
.hero-command-center{
  padding:3.8rem 0 3.2rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(0,204,255,.18), transparent 55%),
    radial-gradient(circle at 90% 35%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, rgba(11,18,33,.30), rgba(2,4,10,0) 62%),
    var(--void);
  position:relative;
  overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2.5rem; align-items:center}
.hero-eyebrow{
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--cyan);
  text-transform:uppercase;
  font-size:.8rem;
}
.hero-title{
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  font-size:2.8rem;
  line-height:1.08;
  margin:.6rem 0 1rem;
}
.hero-title .accent{color:var(--cyan)}
.hero-subtitle{max-width:62ch; line-height:1.65; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.35rem}
.trust-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.trust-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(2,4,10,.25);
  font-size:.82rem;
}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot.ok{background:var(--green); box-shadow:0 0 10px rgba(16,185,129,.35)}
.dot.cyan{background:var(--cyan); box-shadow:0 0 10px rgba(0,204,255,.35)}
.dot.muted{background:#64748B}

/* Network map */
.network-map{position:relative; padding:1.25rem; min-height:300px; overflow:hidden}
.network-map::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 55% 40%, rgba(0,204,255,.18), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,4,10,.92));
}
.hud-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(transparent 96%, rgba(0,204,255,.08) 96%),
    linear-gradient(90deg, transparent 96%, rgba(0,204,255,.08) 96%);
  background-size:48px 48px;
  opacity:.55;
  mix-blend-mode:screen;
}
.node,.link{position:absolute; z-index:2}
.node{width:14px;height:14px;border-radius:999px;background:rgba(148,163,184,.28); border:1px solid rgba(255,255,255,.08)}
.node.core{width:26px;height:26px;left:50%;top:50%;transform:translate(-50%,-50%); background:radial-gradient(circle at 30% 30%, var(--cyan), rgba(0,204,255,.25)); box-shadow:0 0 26px rgba(0,204,255,.35)}
.node.n1{left:20%;top:25%} .node.n2{left:78%;top:22%} .node.n3{left:18%;top:78%} .node.n4{left:80%;top:72%} .node.n5{left:10%;top:55%}
.link{height:2px;background:linear-gradient(90deg, rgba(0,204,255,.15), rgba(0,204,255,.85), rgba(16,185,129,.45)); opacity:.7}
.link.l1{width:35%; left:50%; top:50%; transform-origin:left; transform:rotate(-18deg)}
.link.l2{width:33%; left:50%; top:50%; transform-origin:left; transform:rotate(22deg)}
.link.l3{width:38%; left:50%; top:50%; transform-origin:left; transform:rotate(155deg)}
.link.l4{width:32%; left:50%; top:50%; transform-origin:left; transform:rotate(205deg)}
.link.l5{width:40%; left:50%; top:50%; transform-origin:left; transform:rotate(238deg)}

/* Page hero */
.page-hero{
  padding:3.2rem 0 1.4rem;
  background:
    radial-gradient(circle at 15% 30%, rgba(0,204,255,.16), transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(16,185,129,.06), transparent 55%),
    linear-gradient(180deg, rgba(11,18,33,.25), rgba(2,4,10,0) 70%);
}

/* VSL */
.vsl-frame{padding:1rem}
.vsl-aspect{position:relative; padding-top:56.25%}
.vsl-aspect iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:10px;
  border:1px solid rgba(0,204,255,.45);
}

/* Split doctrine */
.split-graphic{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.doctrine-card{padding:1.2rem}
.card-title{font-family:Rajdhani,system-ui,sans-serif;color:var(--white);letter-spacing:.06em;text-transform:uppercase;margin:.75rem 0 .35rem}
.doctrine-visual{height:160px; display:flex; align-items:center; justify-content:center; position:relative}
.revolver{width:150px; height:110px; position:relative; opacity:.92}
.cylinder{width:84px;height:84px;border-radius:999px; border:2px solid rgba(148,163,184,.35); position:absolute; left:0; top:10px; box-shadow:0 0 18px rgba(239,68,68,.12) inset}
.cylinder::after{content:""; position:absolute; inset:12px; border-radius:999px; border:1px dashed rgba(239,68,68,.45)}
.bullet-tag{
  position:absolute; right:-8px; top:40px;
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  font-size:.72rem;
  color:#000;
  background:rgba(239,68,68,.95);
  padding:.35rem .55rem;
  border-radius:999px;
  box-shadow:0 0 18px rgba(239,68,68,.25);
}
.shield{width:170px;height:170px;position:relative}
.shield-glow{position:absolute; inset:18px; border-radius:28px; background:radial-gradient(circle at 35% 30%, rgba(0,204,255,.35), transparent 70%); filter:blur(10px)}
.shield-logo{position:absolute; inset:38px; width:94px; height:94px; margin:auto; filter:drop-shadow(0 0 18px rgba(0,204,255,.35))}

/* Trucking row */
.icon-row{display:flex; align-items:center; justify-content:space-between; padding:1.25rem; gap:.75rem}
.icon-step{display:flex; align-items:center; gap:.9rem; min-width:220px}
.iso-icon{
  width:58px;height:58px;border-radius:14px;border:1px solid rgba(0,204,255,.22);
  background:linear-gradient(180deg, rgba(0,204,255,.14), rgba(2,4,10,.35));
  position:relative;
  box-shadow:0 0 18px rgba(0,0,0,.35);
}
.iso-icon::after{content:""; position:absolute; inset:10px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.iso-icon.truck::before{content:""; position:absolute; left:14px; top:18px; width:30px; height:18px; border-radius:6px; background:rgba(148,163,184,.22)}
.iso-icon.plate::before{content:""; position:absolute; left:12px; top:18px; width:34px; height:20px; border-radius:6px; background:rgba(0,204,255,.20)}
.iso-icon.ai::before{content:""; position:absolute; left:16px; top:16px; width:26px; height:26px; border-radius:999px; background:rgba(16,185,129,.16)}
.icon-name{font-family:Rajdhani,system-ui,sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.icon-sub{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.arrow{flex:1; height:2px; background:linear-gradient(90deg, transparent, rgba(0,204,255,.9), transparent); opacity:.7}

/* Social */
.social-box{padding:1.25rem}
.social-placeholder{padding:1rem;border:1px dashed rgba(0,204,255,.25); border-radius:12px; background:rgba(2,4,10,.25)}
.social-placeholder p{margin:.35rem 0}

/* Architecture block */
.architecture-wrap{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:1.25rem; padding:1.25rem; align-items:center}
.arch-graphic{min-height:320px; position:relative; overflow:hidden; border-radius:12px; background:linear-gradient(180deg, rgba(2,4,10,.25), rgba(2,4,10,.55))}
.arch-graphic::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(circle at 50% 45%, rgba(0,204,255,.22), transparent 55%);
  transform:rotate(12deg);
}
.arch-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%, var(--cyan), rgba(0,204,255,.22));
  box-shadow:0 0 26px rgba(0,204,255,.45);
}
.arch-ring{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:999px; border:1px solid rgba(0,204,255,.14)}
.arch-ring.r1{width:110px;height:110px}
.arch-ring.r2{width:190px;height:190px}
.arch-ring.r3{width:270px;height:270px}
.arch-node{
  position:absolute; width:12px;height:12px;border-radius:999px; background:rgba(148,163,184,.25); border:1px solid rgba(255,255,255,.08)
}
.arch-node::after{content:""; position:absolute; inset:-10px; border-radius:999px; border:1px solid rgba(0,204,255,.10)}
/* positions */
.arch-node.a1{left:20%;top:25%} .arch-node.a2{left:78%;top:22%} .arch-node.a3{left:18%;top:78%} .arch-node.a4{left:80%;top:72%} .arch-node.a5{left:10%;top:55%}
.arch-node.b1{left:35%;top:18%} .arch-node.b2{left:62%;top:32%} .arch-node.b3{left:42%;top:80%} .arch-node.b4{left:70%;top:64%} .arch-node.b5{left:30%;top:62%}

.pulse{animation:pulse 1.5s ease-in-out infinite}
.pulse-slow{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}

.arch-copy{padding:.25rem .25rem .25rem .4rem}
.bullet-list{list-style:none; padding:0; margin:.8rem 0 0}
.bullet-list li{display:flex; gap:.65rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06)}
.bullet-list li:last-child{border-bottom:none}
.check{
  width:18px;height:18px;border-radius:999px;
  background:rgba(16,185,129,.18);
  border:1px solid rgba(16,185,129,.35);
  box-shadow:0 0 12px rgba(16,185,129,.15);
  position:relative; margin-top:.2rem; flex:none
}
.check:after{content:""; position:absolute; left:5px; top:4px; width:6px; height:9px; border-right:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(40deg)}
.inline-cta{margin-top:1rem}

/* Ghost timeline */
.ghost-timeline{padding:1.25rem}
.timeline-bar{display:flex; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.07)}
.segment{flex:1; padding:1rem}
.segment.locked{background:rgba(245,158,11,.12); border-right:1px solid rgba(255,255,255,.06)}
.segment.live{background:rgba(16,185,129,.12)}
.seg-label{font-family:Rajdhani,system-ui,sans-serif;color:var(--white);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.seg-sub{margin-top:.25rem;color:var(--muted)}

/* Comparison cards */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare-grid{display:grid; grid-template-columns:repeat(2, minmax(360px,1fr)); gap:1rem; min-width:760px}
.mobile-scroll-hint{position:relative}
.mobile-scroll-hint::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:60px;
  background:linear-gradient(90deg, transparent, rgba(2,4,10,.7));
  pointer-events:none; opacity:0
}
.pricing-card{padding:1.1rem; position:relative}
.card-head{padding-bottom:.65rem; border-bottom:1px solid rgba(255,255,255,.06)}
.card-kicker{font-family:Rajdhani,system-ui,sans-serif;color:rgba(148,163,184,.95);letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-size:.82rem}
.card-price{font-family:Rajdhani,system-ui,sans-serif;color:var(--white);font-weight:700;font-size:2.2rem;margin:.3rem 0 .1rem}
.card-price.glow{color:var(--white); text-shadow:0 0 18px rgba(0,204,255,.25)}
.per{font-size:1rem;color:var(--muted);letter-spacing:.08em}
.card-meta{color:var(--muted); margin-top:.35rem}
.card-table{padding-top:.6rem}
.card-table .row{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.06)}
.card-table .row:last-child{border-bottom:none}
.recommended{border:1px solid rgba(0,204,255,.35); box-shadow:0 0 30px rgba(0,204,255,.10)}
.ribbon{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(90deg, rgba(0,204,255,.9), rgba(16,185,129,.75));
  color:#000;
  font-family:Rajdhani,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.68rem;
  padding:.35rem .55rem;
  border-radius:999px;
}
.incentive-banner{margin-top:1rem; padding:1rem}
.gold-border{border:1px solid rgba(245,158,11,.55); padding:.9rem; border-radius:12px; background:rgba(245,158,11,.08)}

/* Verification pricing table */
.pricing-table-wrap{padding:1rem; min-width:760px}
.pricing-table{width:100%}
.pt-head, .pt-row{display:grid; grid-template-columns: 1.1fr .9fr 1fr 1.4fr; gap:1rem; align-items:center}
.pt-head{padding:.6rem .4rem; color:var(--white); font-family:Rajdhani,system-ui,sans-serif; letter-spacing:.10em; text-transform:uppercase; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08)}
.pt-row{padding:.75rem .4rem; border-bottom:1px solid rgba(255,255,255,.06)}
.pt-row:last-child{border-bottom:none}
.mono{font-variant-numeric: tabular-nums}
.price-cyan{color:var(--cyan); font-weight:700}
.savings{color:var(--green); font-weight:700}
.bar{height:10px; border-radius:999px; background:rgba(148,163,184,.18); overflow:hidden; border:1px solid rgba(255,255,255,.06)}
.bar-fill{height:100%; background:linear-gradient(90deg, rgba(0,204,255,.85), rgba(16,185,129,.75))}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem}

/* Funnel */
.funnel{display:grid; grid-template-columns:1fr .9fr 1fr; gap:1rem; padding:1.25rem; align-items:stretch}
.funnel-col{padding:1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(2,4,10,.25)}
.funnel-label{font-family:Rajdhani,system-ui,sans-serif; color:var(--white); letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.8rem}
.chip{font-size:.78rem; padding:.28rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.08)}
.chip.bad{background:rgba(239,68,68,.12); color:#fecaca; border-color:rgba(239,68,68,.22)}
.chip.ok{background:rgba(16,185,129,.12); color:#bbf7d0; border-color:rgba(16,185,129,.25)}
.funnel-col.filter{position:relative; display:flex; align-items:center; justify-content:center}
.filter-core{
  width:110px;height:110px;border-radius:28px;
  background:radial-gradient(circle at 30% 30%, rgba(0,204,255,.85), rgba(0,204,255,.12));
  box-shadow:0 0 26px rgba(0,204,255,.35);
  border:1px solid rgba(0,204,255,.25);
}
.funnel-col.filter:before,.funnel-col.filter:after{
  content:""; position:absolute; left:-12px; right:-12px; height:2px;
  background:linear-gradient(90deg, rgba(239,68,68,.35), rgba(0,204,255,.85), rgba(16,185,129,.55));
  opacity:.6;
}
.funnel-col.filter:before{top:46%}
.funnel-col.filter:after{top:54%}

/* BIMI proof */
.bimi-proof{display:grid; grid-template-columns: 1.1fr .5fr 1fr; gap:1rem; padding:1.25rem; align-items:center}
.phone{
  width:280px; max-width:100%;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,4,10,.35);
  overflow:hidden;
}
.phone-top{height:20px; background:rgba(255,255,255,.06)}
.inbox{padding:12px}
.email-row{display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:10px}
.email-row.highlight{border-color:rgba(0,204,255,.28); background:rgba(0,204,255,.06)}
.avatar{width:38px;height:38px;border-radius:999px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.avatar.grey{background:rgba(148,163,184,.20)}
.avatar.logo{background:rgba(0,204,255,.12); border-color:rgba(0,204,255,.25)}
.avatar.logo img{width:28px;height:28px}
.sender{color:var(--white); font-weight:700}
.subject{color:var(--muted); font-size:.85rem; margin-top:.15rem}
.bimi-arrow{position:relative; height:140px}
.arrow-line{position:absolute; left:10px; right:10px; top:50%; height:2px; background:linear-gradient(90deg, rgba(0,204,255,.12), rgba(0,204,255,.9))}
.arrow-head{position:absolute; right:10px; top:50%; width:0;height:0; border-left:10px solid rgba(0,204,255,.9); border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateY(-50%)}
.arrow-text{position:absolute; top:calc(50% + 14px); left:10px; font-family:Rajdhani,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); font-weight:700}

/* Protocol */
.protocol-card{padding:1.25rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start}

/* Assets */
.asset-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem}
.asset-card{padding:1rem; display:flex; gap:1rem; align-items:center}
.asset-thumb{width:82px;height:82px;border-radius:16px;border:1px solid rgba(255,255,255,.08); background:rgba(2,4,10,.35); position:relative; overflow:hidden}
.thumb-video::before{content:""; position:absolute; inset:18px; border-radius:14px; border:2px solid rgba(0,204,255,.35)}
.thumb-pdf::before{content:""; position:absolute; inset:18px; border-radius:10px; border:2px dashed rgba(148,163,184,.35)}
.thumb-audio::before{content:""; position:absolute; left:14px; right:14px; top:50%; height:18px; transform:translateY(-50%); background:linear-gradient(90deg, rgba(0,204,255,.25), rgba(16,185,129,.25)); opacity:.8; border-radius:10px}
.asset-type{font-family:Rajdhani,system-ui,sans-serif; color:var(--cyan); letter-spacing:.18em; font-weight:700; font-size:.75rem}
.asset-title{font-family:Rajdhani,system-ui,sans-serif; color:var(--white); letter-spacing:.06em; font-weight:700; text-transform:uppercase; margin-top:.2rem}
.asset-sub{margin-top:.25rem; font-size:.92rem}

/* Login */
.login-shell{min-height:calc(100vh - 72px); padding:2rem 0 3rem}
.login-top{display:flex; justify-content:center; padding:1rem 0 1.5rem}
.login-logo{width:150px; filter:drop-shadow(0 0 18px rgba(0,204,255,.35))}
.login-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:1080px; margin:0 auto; padding:0 1.25rem}
.login-panel{border-radius:16px; padding:2rem; border:1px solid rgba(255,255,255,.10); background:rgba(11,18,33,.62); backdrop-filter: blur(10px)}
.login-panel.left{background:linear-gradient(180deg, rgba(0,204,255,.10), rgba(11,18,33,.62))}
.login-panel.right{background:linear-gradient(180deg, rgba(148,163,184,.08), rgba(11,18,33,.62))}
.login-title{font-family:Rajdhani,system-ui,sans-serif; color:var(--white); letter-spacing:.08em; text-transform:uppercase; margin:0}
.login-sub{margin:.5rem 0 1.25rem}

/* About */
.about-card{display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem; padding:1.25rem; align-items:stretch}
.about-visual{display:flex; align-items:stretch}
.server-room{
  flex:1; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 35% 30%, rgba(0,204,255,.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, rgba(2,4,10,.25), rgba(2,4,10,.75));
}

/* Deployment */
.deployment-screen{
  min-height:calc(100vh - 72px);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 1.25rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,204,255,.16), transparent 60%),
    var(--void);
}
.deployment-inner{text-align:center}
.deployment-logo{
  width:min(240px, 60vw);
  filter:drop-shadow(0 0 22px rgba(0,204,255,.40));
  animation:prePulse 1.2s ease-in-out infinite;
}
.deployment-text{
  opacity:0;
  transform:translateY(8px);
  animation:reveal 0.6s ease forwards;
  animation-delay:1.6s;
}
.deployment-text h1{
  margin:1.2rem 0 .4rem;
  font-family:Rajdhani,system-ui,sans-serif;
  color:var(--white);
  letter-spacing:.18em;
  text-transform:uppercase;
}
@keyframes reveal{to{opacity:1; transform:translateY(0)}}

/* Footer */
.site-footer{padding:2.6rem 0 1.1rem; border-top:1px solid rgba(255,255,255,.08); background:rgba(2,6,23,.95)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.25rem}
.footer-logo{height:30px; width:auto}
.footer-tagline{margin:.5rem 0 0; max-width:38ch}
.footer-col h4{margin:0 0 .6rem; font-family:Rajdhani,system-ui,sans-serif; color:var(--white); letter-spacing:.10em; text-transform:uppercase; font-size:.85rem}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin:.45rem 0}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{margin-top:1.6rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.06); text-align:center; font-size:.85rem; color:rgba(148,163,184,.8)}

/* Legal */
.legal-page{background:linear-gradient(180deg, rgba(11,18,33,.40), rgba(2,4,10,0) 75%)}
.legal-container{padding:2rem 1.6rem}
.legal-meta{margin:.4rem 0 1.2rem}
.legal-container h2, .legal-container h3{
  font-family:Rajdhani,system-ui,sans-serif;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.legal-container h2{margin-top:1.6rem; font-size:1.05rem}
.legal-container h3{margin-top:1rem; font-size:.95rem}
.legal-container p, .legal-container li{line-height:1.65}
.legal-divider{border:0; height:1px; background:rgba(255,255,255,.10); margin:2rem 0}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:1.5rem}
  .hero-title{font-size:2.35rem}
  .architecture-wrap{grid-template-columns:1fr}
  .split-graphic{grid-template-columns:1fr}
  .bimi-proof{grid-template-columns:1fr; text-align:left}
  .bimi-arrow{height:80px}
  .icon-row{flex-direction:column; align-items:stretch}
  .arrow{width:100%; height:2px}
  .asset-grid{grid-template-columns:1fr}
  .about-card{grid-template-columns:1fr}
  .login-grid{grid-template-columns:1fr}
}

@media (max-width: 860px){
  .hamburger{display:block}
  .main-nav{
    position:absolute; left:0; right:0; top:72px;
    display:none;
    flex-direction:column;
    gap:1rem;
    padding:1rem 1.25rem;
    background:rgba(2,4,10,.92);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .main-nav.open{display:flex}
  .nav-links{flex-direction:column; align-items:flex-start}
  .nav-actions{width:100%; justify-content:flex-start; flex-wrap:wrap}
  .nav-dropdown-menu{position:static; display:none; box-shadow:none; margin-top:.5rem}
  .nav-dropdown-menu.open{display:flex}
  .mobile-scroll-hint::after{opacity:1}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}