:root{
  --bg:#060c17;
  --panel:#0f1728;
  --panel-2:#111d33;
  --line:#233452;
  --text:#edf3ff;
  --muted:#9caecc;
  --red:#ca2127;
  --red-dark:#7b0506;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%,rgba(202,33,39,.16),transparent 36%),
    radial-gradient(circle at 80% 18%,rgba(43,82,146,.18),transparent 40%),
    var(--bg);
}
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1400;
  background:linear-gradient(90deg,var(--red-dark),var(--red),#ff5a62);
}
.grid-bg{
  position:fixed;inset:0;pointer-events:none;opacity:.25;
  background-image:
    linear-gradient(rgba(132,155,194,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(132,155,194,.16) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at center,black 45%,transparent 95%);
}

.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.85rem min(20px,2vw);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  background:rgba(6,12,23,.86);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text)}
.brand img{height:31px}
.brand strong{display:block;font:800 .86rem/1 Rubik,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.brand small{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.top-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;text-decoration:none;
  border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:.4rem .65rem;font:700 .69rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(15,23,40,.8);
}
.pill:hover{color:var(--text);border-color:#30476f}
.pill-primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--red-dark),var(--red))}

.shell{width:min(1720px,98vw);margin:.45rem auto 2.2rem}
.hero,.panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(17,29,51,.96),rgba(12,20,36,.94));
  box-shadow:0 24px 52px rgba(0,0,0,.35);
}
.hero{padding:1rem 1.5rem 1.25rem;margin-bottom:1rem;position:relative;overflow:hidden;min-height:clamp(360px,44vh,560px)}
.hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(202,33,39,.25),transparent 70%);
  animation:floatPulse 10s ease-in-out infinite;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 28%, rgba(202,33,39,.11), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(43,82,146,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
}
.hero-content{
  position:absolute;
  left:1.1rem;
  right:1.1rem;
  bottom:1rem;
  z-index:4;
  max-width:min(980px,100%);
}
.hero-visual{
  position:absolute;
  inset:.7rem 1rem .7rem 1rem;
  min-height:180px;
  border-radius:14px;
  border:1px solid rgba(82,110,156,.34);
  background:
    linear-gradient(180deg,rgba(7,13,24,.28),rgba(7,13,24,.64)),
    radial-gradient(circle at 52% 44%,rgba(202,33,39,.2),transparent 46%);
  overflow:hidden;
  z-index:2;
  box-shadow:inset 0 0 55px rgba(7,14,26,.78), 0 18px 35px rgba(0,0,0,.25);
}
.hero-grid-sweep{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(151,178,220,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151,178,220,.14) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.36;
  mask-image:radial-gradient(circle at 52% 54%, black 30%, transparent 90%);
}
.hero-beam{
  position:absolute;
  top:-30%;
  left:-10%;
  width:58%;
  height:220%;
  transform:rotate(16deg);
  background:linear-gradient(90deg, transparent, rgba(202,33,39,.3), transparent);
  filter:blur(2px);
  animation:beamSweep 6.4s ease-in-out infinite;
}
.hero-orbit{
  position:absolute;
  left:50%;
  top:52%;
  border:1px solid rgba(202,33,39,.28);
  border-radius:999px;
  transform:translate(-50%,-50%);
}
.hero-orbit::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff7a80;
  box-shadow:0 0 14px rgba(255,122,128,.8);
  top:50%;
  right:-5px;
  transform:translateY(-50%);
}
.hero-orbit-a{width:38%;height:52%;animation:spinOrbit 13s linear infinite}
.hero-orbit-b{width:53%;height:70%;border-color:rgba(96,142,214,.26);animation:spinOrbitReverse 17s linear infinite}
.hero-orbit-c{width:68%;height:88%;border-color:rgba(202,33,39,.22);animation:spinOrbit 22s linear infinite}
.eyebrow{margin:0 0 .4rem;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#f37b82;font-weight:700}
.hero h1{
  margin:.15rem 0 .5rem;
  font:800 clamp(2rem,4.6vw,4rem)/1 Rubik,sans-serif;
  max-width:14ch;
}
.hero h1 span{color:var(--red)}
.intro{margin:0;max-width:80ch;color:var(--muted);line-height:1.8}
.hero-chips{display:flex;gap:.44rem;flex-wrap:wrap;margin-top:.9rem}
.hero-chips span{
  border:1px solid #314a75;background:rgba(11,18,33,.56);backdrop-filter:blur(7px);
  border-radius:999px;padding:.32rem .56rem;font:700 .68rem/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#e8efff;
}
.hero-cta{display:flex;gap:.56rem;flex-wrap:wrap;margin-top:1rem}
.vault-mark{position:absolute;pointer-events:none;opacity:.14;filter:drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.vault-mark-hero{right:2.4rem;bottom:1.2rem;width:min(220px,22vw);animation:markFloat 8s ease-in-out infinite}
.vault-mark-panel{right:1rem;top:1rem;width:110px;opacity:.1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;
  text-decoration:none;border:1px solid var(--line);color:var(--text);
  padding:.52rem .8rem;border-radius:999px;font:700 .72rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(11,18,32,.8);
}
.btn:hover{border-color:#2f476f}
.btn-primary{border-color:transparent;background:linear-gradient(135deg,var(--red-dark),var(--red));color:#fff}

.panel{padding:1.05rem;margin-bottom:1rem;position:relative;overflow:hidden}
.vault-strip{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:1rem;
  background:linear-gradient(145deg,rgba(17,29,51,.96),rgba(12,20,36,.94));
}
.vault-track{
  display:flex;gap:2rem;white-space:nowrap;padding:.72rem .8rem;
  text-transform:uppercase;letter-spacing:.07em;font:700 .73rem/1 Inter,sans-serif;color:#b8c7df;
  animation:vaultTicker 24s linear infinite;
}
.vault-track span{opacity:.9}
.section-head h2{margin:.05rem 0 .34rem;font:700 clamp(1.2rem,2.2vw,1.7rem) Rubik,sans-serif}
.section-head p{margin:0;color:var(--muted);line-height:1.7;font-size:.9rem}

.site-cards{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:.72rem;
}
.site-card{
  border:1px solid var(--line);
  border-radius:13px;
  padding:.8rem;
  background:linear-gradient(145deg,rgba(15,23,40,.95),rgba(10,16,29,.9));
  transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease,background .25s ease;
  transform-style:preserve-3d;
}
.site-card:hover{transform:translateY(-3px);border-color:#33507f;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.site-thumb{
  position:relative;
  margin:-.15rem -.15rem .68rem;
  height:140px;
  border-radius:10px;
  border:1px solid #2d446c;
  overflow:hidden;
  background:linear-gradient(160deg,#0e1a2f,#0a1222);
}
.site-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,10,18,.05),rgba(6,10,18,.36) 82%,rgba(6,10,18,.65)),
    linear-gradient(90deg,rgba(9,14,24,.2),transparent 14%,transparent 86%,rgba(9,14,24,.2));
}
.site-thumb-frame{
  width:100%;
  height:360px;
  border:0;
  display:block;
  background:#fff;
  transform:translateY(0) scale(1);
  transform-origin:top center;
  pointer-events:none;
}
.site-card:hover .site-thumb-frame{
  transform:translateY(-16px) scale(1.01);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.site-card b{
  display:inline-block;
  font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:#9fb0cd;
  padding:.2rem .42rem;border:1px solid #2a3f64;border-radius:999px;
}
.site-card h3{margin:.48rem 0 .38rem;font-size:1.02rem}
.site-card p{margin:0;color:var(--muted);line-height:1.62;font-size:.84rem}
.site-card .actions{display:flex;gap:.44rem;flex-wrap:wrap;margin-top:.7rem}
.site-card .actions .pick-on{border-color:#ff7f87;background:linear-gradient(135deg,#7b0506,#ca2127);color:#fff}

.pick-toolbar{
  margin-top:.75rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  padding:.6rem .7rem;
  border:1px dashed #2b446e;
  border-radius:11px;
  background:rgba(11,18,32,.45);
}
.pick-toolbar p{margin:0;color:#b9c9e2;font-size:.8rem}
.pick-summary{margin-top:.55rem}
.pick-empty{margin:0;color:var(--muted);font-size:.82rem}
.pick-chips{display:flex;gap:.45rem;flex-wrap:wrap}
.pick-chip{
  display:inline-flex;align-items:center;
  padding:.34rem .56rem;border-radius:999px;
  border:1px solid #3a5483;background:rgba(12,20,35,.78);
  color:#e8f0ff;font:700 .68rem/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;
}

.preview-toolbar{
  margin-top:.9rem;
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
}
.preview-toolbar label{font-size:.77rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.preview-toolbar select{
  min-width:min(380px,100%);
  border:1px solid var(--line);border-radius:10px;background:#0b1424;color:var(--text);
  padding:.5rem .55rem;font:600 .84rem/1.3 Inter,sans-serif;
}

.device-grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns:2.1fr 1.2fr .95fr;
  gap:.75rem;
}
.device{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(9,16,29,.95),rgba(12,19,34,.92));
  padding:.62rem;
  display:flex;flex-direction:column;gap:.45rem;
}
.device header{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#92a4c2;font-weight:700}
.device-shell{position:relative}
.device .screen{position:relative}
.device .viewport{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
  border:1px solid #2d446b;
}
.device .viewport iframe{border:0;width:100%;height:100%;display:block;background:#fff}

/* Desktop monitor frame */
.desktop .screen{
  border-radius:14px;
  padding:.55rem;
  background:linear-gradient(180deg,#0f1c33,#0a1426);
  border:1px solid #385685;
  box-shadow:0 16px 28px rgba(0,0,0,.35);
}
.desktop .screen::before{
  content:"";
  position:absolute;left:50%;top:.28rem;transform:translateX(-50%);
  width:74px;height:5px;border-radius:999px;background:rgba(182,201,230,.4);
}
.desktop .viewport{aspect-ratio:16/10;border-radius:8px}
.desktop-stand{
  width:32%;height:10px;margin:.5rem auto 0;border-radius:999px;
  background:linear-gradient(180deg,#213759,#152743);
  border:1px solid #35537f;
}

/* Tablet bezel */
.tablet .screen{
  border-radius:18px;
  padding:.5rem;
  background:linear-gradient(180deg,#0f1d35,#0b1629);
  border:1px solid #35527d;
  box-shadow:0 14px 24px rgba(0,0,0,.32);
}
.tablet .screen::before{
  content:"";
  position:absolute;left:50%;top:.24rem;transform:translateX(-50%);
  width:44px;height:4px;border-radius:999px;background:rgba(182,201,230,.36);
}
.tablet .viewport{aspect-ratio:4/3;border-radius:12px}

/* Phone frame + notch */
.mobile .screen{
  border-radius:28px;
  padding:.42rem;
  background:linear-gradient(180deg,#0f1e38,#0b172b);
  border:1px solid #375786;
  box-shadow:0 15px 26px rgba(0,0,0,.35);
}
.mobile .screen::before{
  content:"";
  position:absolute;left:50%;top:.25rem;transform:translateX(-50%);
  width:44%;height:14px;border-radius:0 0 10px 10px;background:#0a1425;z-index:2;
}
.mobile .screen::after{
  content:"";
  position:absolute;left:50%;bottom:.24rem;transform:translateX(-50%);
  width:34%;height:4px;border-radius:999px;background:rgba(198,214,236,.42);z-index:2;
}
.mobile .viewport{aspect-ratio:9/19;border-radius:22px}

.compare-toolbar{
  margin-top:.95rem;
  display:flex;justify-content:space-between;gap:.6rem;align-items:center;flex-wrap:wrap;
  color:var(--muted);font-size:.84rem;
}
.compare-toolbar strong{color:var(--text)}
.compare-toolbar select{
  border:1px solid var(--line);border-radius:10px;background:#0b1424;color:var(--text);
  padding:.42rem .52rem;font:600 .78rem/1.2 Inter,sans-serif;
}
.compare-box{
  margin-top:.9rem;
  height:min(68vh,680px);
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  background:#fff;
  touch-action:none;
}
.pane{position:absolute;inset:0}
.pane iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.compare-box.is-dragging .pane iframe{pointer-events:none}
.old{z-index:2;clip-path:inset(0 62% 0 0)}
.new{z-index:1}
.chip{
  position:absolute;left:.62rem;bottom:.62rem;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.32rem .56rem;
  background:rgba(10,14,22,.52);color:#fff;font:700 .66rem/1 Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.chip-new{background:rgba(202,33,39,.75)}
.slider-handle{
  position:absolute;left:38%;top:0;bottom:0;transform:translateX(-50%);
  width:4px;background:linear-gradient(180deg,#fff,#dce6f4);
  border:0;z-index:8;cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(148,167,196,.4),0 0 22px rgba(14,26,44,.28);
  touch-action:none;
}
.slider-handle::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 28% 30%,#fff,#edf2f8 54%,#dae5f3);
  border:1px solid #d1dde9;
}
.slider-handle i{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--red-dark),var(--red));font-size:.88rem;
  box-shadow:0 7px 18px rgba(123,5,6,.4);
}

.reveal{opacity:0;transform:translateY(18px);transition:.65s cubic-bezier(.22,1,.36,1)}
.reveal.show{opacity:1;transform:none}

@keyframes floatPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes markFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes vaultTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-40%)}
}
@keyframes spinOrbit{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes spinOrbitReverse{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0deg)}
}
@keyframes beamSweep{
  0%,100%{transform:translateX(-24%) rotate(16deg);opacity:.2}
  50%{transform:translateX(98%) rotate(16deg);opacity:.46}
}

@media(max-width:1080px){
  .device-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .top-actions{display:none}
  .hero{padding:.8rem .86rem 1rem;min-height:340px}
  .hero-visual{inset:.55rem .55rem .55rem .55rem}
  .hero-content{left:.78rem;right:.78rem;bottom:.72rem}
  .compare-box{height:420px}
  .preview-toolbar select{min-width:100%}
  .site-thumb{height:126px}
  .site-thumb-frame{height:320px}
  .pick-toolbar{padding:.52rem .56rem}
}