/* ============================================================
   DedSec Lab — redesign v2 (glass + aurora)
   Inspired by Linear / Raycast / Vercel / Framer glass aesthetics.
   Cool teal→cyan→electric-blue aurora over deep charcoal.
   ============================================================ */
:root{
  --bg:#05070a;
  --bg-2:#0a0e14;
  --surface:rgba(12,18,26,.58);
  --surface-2:rgba(16,24,36,.66);
  --surface-3:rgba(22,32,48,.76);
  --border:rgba(120,200,220,.12);
  --border-strong:rgba(120,200,220,.22);
  --text:#e8f4f8;
  --muted:#9bb0bc;
  --muted-2:#7a8f9c;
  --faint:#5c7080;
  --accent:#22d3ee;
  --accent-2:#67e8f9;
  --accent-hot:#38bdf8;
  --accent-cyan:#22d3ee;
  --accent-soft:rgba(34,211,238,.14);
  --accent-border:rgba(34,211,238,.42);
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
  --radius:16px;
  --radius-lg:22px;
  --maxw:1160px;
  --nav-h:68px;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --shadow-sm:0 10px 28px rgba(0,0,0,.4);
  --glass-blur:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Aurora canvas + faint grid sit behind content */
#aurora{
  position:fixed;inset:-6%;z-index:-3;width:112%;height:112%;
  pointer-events:none;display:block;
  filter:blur(26px) saturate(150%);opacity:.7;
  image-rendering:auto;
}
/* Film grain + vignette over the mesh, makes it read as a real wallpaper */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(2,4,8,.05) 35%, rgba(2,4,8,.6) 100%);
}
.aurora-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(103,232,249,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,232,249,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 20%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%, #000 10%, transparent 72%);
  opacity:.55;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
  background:radial-gradient(1200px 700px at 50% -20%, rgba(34,211,238,.14), transparent 60%),
             radial-gradient(900px 600px at 90% 80%, rgba(56,189,248,.10), transparent 55%),
             var(--bg);
}
/* Network-mesh wallpaper (v3) under a toned-down aurora.
   New filenames (wallpaper-net-*) so CDN/browser caches never serve the old image. */
.site-wallpaper{
  position:fixed;inset:0;z-index:-4;pointer-events:none;
  --wp-shade:linear-gradient(180deg, rgba(3,5,8,.50) 0%, rgba(3,5,8,.34) 38%, rgba(3,5,8,.48) 70%, rgba(3,5,8,.72) 100%);
  background:var(--wp-shade), url("/static/images/site-wallpaper-v2.jpg") center / cover no-repeat;
  background:var(--wp-shade), image-set(url("/static/img/wallpaper-net-1920.webp?v=2") type("image/webp"), url("/static/images/site-wallpaper-v2.jpg") type("image/jpeg")) center / cover no-repeat;
  background-color:var(--bg);
}
/* Large / high-DPI screens get the 2560 render */
@media (min-width:1921px), (min-width:1280px) and (min-resolution:1.5dppx){
  .site-wallpaper{
    background:var(--wp-shade), url("/static/images/site-wallpaper-v2.jpg") center / cover no-repeat;
    background:var(--wp-shade), image-set(url("/static/img/wallpaper-net-2560.webp?v=2") type("image/webp"), url("/static/images/site-wallpaper-v2.jpg") type("image/jpeg")) center / cover no-repeat;
    background-color:var(--bg);
  }
}
/* Phones: content sits over the busiest part of the mesh, so shade a little more */
@media (max-width:860px){
  .site-wallpaper{--wp-shade:linear-gradient(180deg, rgba(3,5,8,.58) 0%, rgba(3,5,8,.50) 50%, rgba(3,5,8,.72) 100%)}
}
/* Aurora stays animated but softer so the mesh reads through */
.aurora-on #aurora{opacity:.34}
.aurora-on .aurora-grid{opacity:.22}
@media (prefers-reduced-motion: reduce){
  #aurora{display:none}
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1}
code,kbd{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:16px;top:-48px;z-index:200;background:var(--accent);color:#0a0c11;font-weight:700;padding:10px 14px;border-radius:10px}
.skip-link:focus{top:16px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.kicker{display:inline-block;font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin-top:14px;margin-bottom:0}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;color:var(--muted);border:1px solid var(--border);background:var(--surface);padding:5px 10px;border-radius:999px;margin-top:16px;margin-bottom:0}
.eyebrow .dot{width:5.5px;height:5.5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px rgba(63,185,80,.18)}
.lead{color:var(--muted);font-size:1.08rem;line-height:1.7;max-width:60ch}
.accent{color:var(--accent-2)}
.sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.02rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 20px;border-radius:11px;border:1px solid transparent;
  font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-lg{height:52px;padding:0 26px;font-size:1rem}
.btn-sm{height:38px;padding:0 15px;font-size:.88rem}
.btn-primary{background:var(--accent);color:#0a0c11;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent-2)}
.btn-block{width:100%}
.btn-danger{background:rgba(240,97,109,.12);border-color:rgba(240,97,109,.3);color:var(--danger)}
.btn-danger:hover{background:rgba(240,97,109,.2)}

/* ---------- top nav ---------- */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(10,12,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;height:var(--nav-h);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.brand img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.brand b{color:var(--accent-2);font-weight:700}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{display:inline-block;padding:8px 13px;border-radius:9px;color:var(--muted);font-size:.92rem;font-weight:500;transition:.15s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a.active{color:var(--text);background:var(--surface-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-weight:600;cursor:pointer}
@media(max-width:860px){
  .nav-links{position:absolute;left:16px;right:16px;top:calc(var(--nav-h) + 6px);flex-direction:column;align-items:stretch;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow);display:none}
  .site-nav.open .nav-links{display:flex}
  .nav-links a{padding:11px 14px}
  .btn-login{display:inline-flex;height:38px;padding:0 14px;font-size:.88rem}
  .menu-btn{display:inline-flex;align-items:center}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);background:var(--bg-2);margin-top:80px}
.footer-grid{max-width:var(--maxw);margin:0 auto;padding:56px 24px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{color:var(--muted);font-size:.92rem;max-width:30ch}
.footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:14px;font-family:var(--font-sans);font-weight:700}
.footer-col a{display:block;color:var(--muted);font-size:.92rem;padding:6px 0;transition:.15s}
.footer-col a:hover{color:var(--accent-2)}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:20px 24px 40px;border-top:1px solid var(--border);color:var(--faint);font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- generic card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px}
.card-hover{transition:border-color .2s ease,transform .2s ease}
.card-hover:hover{border-color:var(--border-strong);transform:translateY(-3px)}

/* ---------- home hero ---------- */
.hero{padding:72px 0 36px;text-align:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.03em}
/* Homepage hero: bigger, more prominent */
.hero-full h1{font-size:clamp(3.1rem,8.2vw,6.6rem);line-height:1.02;letter-spacing:-.035em}
.hero-full .eyebrow{font-size:.74rem;padding:6px 12px;margin-top:18px;margin-bottom:0}
.hero-full .lead{font-size:clamp(1.08rem,1.6vw,1.32rem);max-width:64ch;margin-top:18px}
.hero-full .hero-ctas{margin-top:40px;gap:14px}
.hero-full .hero-ctas .btn-lg{height:58px;padding:0 32px;font-size:1.06rem}
.hero-full .chip{font-size:.92rem;padding:8px 16px}
/* ---- hero polish: layered glow, gradient headline, shimmer accent ---- */
.hero-full{position:relative;isolation:isolate}
.hero-full::before{ /* soft spotlight behind the headline */
  content:"";position:absolute;z-index:-1;left:50%;top:44%;
  width:min(1100px,100%);height:min(620px,80vh);transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(34,211,238,.16), rgba(37,99,235,.08) 55%, transparent 100%);
  filter:blur(10px);pointer-events:none;
}
.hero-full::after{ /* horizon beam under the CTAs */
  content:"";position:absolute;z-index:-1;left:50%;bottom:22%;
  width:min(760px,90vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.55),transparent);
  box-shadow:0 0 24px 2px rgba(34,211,238,.25);pointer-events:none;opacity:.7;
}
.hero-full h1{
  background:linear-gradient(180deg,#ffffff 0%,#e6f7fb 45%,#9fc6d4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 36px rgba(34,211,238,.22));
  text-shadow:none;
}
.hero-full h1 .accent{
  background:linear-gradient(100deg,#22d3ee 0%,#67e8f9 25%,#e0fbff 40%,#38bdf8 55%,#2563eb 80%,#22d3ee 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hero-shimmer 7s ease-in-out infinite;
}
@keyframes hero-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* kicker badge with gradient border + pulsing dot */
.hero-full .eyebrow{
  position:relative;color:#cfeff7;letter-spacing:.02em;
  background:linear-gradient(rgba(8,14,22,.85),rgba(8,14,22,.85)) padding-box,
             linear-gradient(90deg,rgba(34,211,238,.7),rgba(37,99,235,.5),rgba(34,211,238,.15)) border-box !important;
  border:1px solid transparent;
  box-shadow:0 0 0 4px rgba(34,211,238,.05),0 8px 30px rgba(34,211,238,.12);
}
.hero-full .eyebrow .dot{animation:hero-pulse 2.4s ease-out infinite}
@keyframes hero-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}80%,100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
.hero-full .lead{color:#a9bfcb}
.hero-full .hero-ctas .btn-primary{box-shadow:0 10px 34px rgba(34,211,238,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.hero-full .hero-ctas .btn-ghost{background:rgba(8,14,22,.6);border-color:rgba(103,232,249,.25);backdrop-filter:blur(10px)}
.hero-full .hero-ctas .btn-ghost:hover{border-color:rgba(103,232,249,.55)}
.hero-full .chip{border-color:rgba(103,232,249,.16);color:#b9d3dd}
.hero-full .chip svg{color:var(--accent-2)}

.hero .lead{margin:22px auto 0;text-align:center}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* Homepage: hero fills the first screen (below the sticky nav); everything else on scroll */
.hero-full{
  display:flex;flex-direction:column;align-items:center;
  min-height:calc(100vh - var(--nav-h) - 2px);
  min-height:calc(100svh - var(--nav-h) - 2px);
  padding:40px 0 44px;
}
.hero-full > :first-child{margin-top:auto}
.hero-full .hero-chips{margin-top:auto;padding-top:40px}
@media(max-width:600px){
  .hero-full{padding:28px 0 32px}
  .hero-full h1{font-size:min(13.6vw,3.6rem)}
  .hero-full .lead{padding:0 10px}
  .hero-full .hero-ctas .btn-lg{height:54px;padding:0 22px;font-size:1rem}
  .hero-full .chip{font-size:.85rem;padding:7px 13px}
  .hero-full .hero-chips{padding-top:28px}
}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted);border:1px solid var(--border);background:var(--surface);padding:7px 14px;border-radius:999px}
.chip svg{color:var(--accent-2)}

/* ---------- product showcase (window chrome gallery) ---------- */
.showcase{max-width:min(1240px,100%);margin:8px auto 0;padding:0 8px}
.showcase-label{text-align:center;margin:0 0 18px;font-family:var(--font-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hot);font-weight:600}
.window{
  border:1px solid var(--border-strong);border-radius:20px;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--shadow),0 0 100px rgba(34,211,238,.16);
  transform:scale(1);
}
.window-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--surface-3);border-bottom:1px solid var(--border)}
.window-bar .wdot{width:12px;height:12px;border-radius:50%;background:#3a4150}
.window-bar .wtitle{margin-left:14px;font-size:.9rem;color:var(--muted);font-family:var(--font-display)}
.window-view{position:relative;background:#05070c;aspect-ratio:16/9.4;min-height:380px}
.window-view img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.showcase-nav{display:flex;align-items:center;gap:12px;margin-top:18px}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:6px 2px;flex:1;scrollbar-width:thin}
.thumbs button{flex:none;width:120px;height:74px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#05070c;cursor:pointer;padding:0;opacity:.65;transition:.15s}
.thumbs button:hover{opacity:.95}
.thumbs button.active{border-color:var(--accent);opacity:1;box-shadow:0 0 0 1px var(--accent-border)}
.thumbs img{width:100%;height:100%;object-fit:cover}
/* Tall app shots (app-main / app-login): contain + centre on a soft glass backdrop */
.window-view.is-portrait{background:radial-gradient(60% 80% at 50% 40%, rgba(34,211,238,.14), transparent 70%),linear-gradient(180deg,#07101a,#04070c);padding:18px 0}
.window-view.is-portrait img{filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(34,211,238,.12))}
.thumbs button.is-portrait{background:radial-gradient(circle at 50% 40%, rgba(34,211,238,.16), #05070c 75%)}
.thumbs button.is-portrait img{object-fit:contain;padding:3px 0}
.nav-arrow{flex:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:1.5rem;cursor:pointer;line-height:1}
.nav-arrow:hover{border-color:var(--accent-border);color:var(--accent-2)}
@media(max-width:900px){
  .showcase{padding:0}
  .window{border-radius:14px}
  .window-view{min-height:220px;aspect-ratio:16/10}
  .thumbs button{width:88px;height:56px}
  .nav-arrow{width:42px;height:42px;font-size:1.3rem}
}
@media(max-width:480px){
  .window-view{min-height:180px}
  .thumbs button{width:72px;height:46px;border-radius:8px}
  .window-bar{padding:10px 12px}
}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,6,10,.92);display:none;align-items:center;justify-content:center;padding:28px}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:10px;border:1px solid var(--border-strong)}
.lightbox .lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid var(--border-strong);color:#fff;width:50px;height:50px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lightbox .lb-prev{left:22px}.lightbox .lb-next{right:22px}

/* ---------- stat strip ---------- */
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 16px;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--text)}
.stat span{color:var(--muted);font-size:.85rem;margin-top:4px;display:block}
@media(max-width:860px){.stats-row{grid-template-columns:repeat(2,1fr)}}

/* ---------- feature / tool grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
.tool h3{font-size:1.15rem;margin-bottom:10px}
.tool p{color:var(--muted);font-size:.93rem}
.tool .ico,.feature .ico,.topic .topic-ico,.doc .doc-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-2);margin-bottom:16px}
.feature h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feature p{color:var(--muted);font-size:.92rem}
.badge-new,.pill.new,.pill.imp,.pill.fix{display:inline-block;font-family:var(--font-sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-transform:uppercase}
.badge-new{background:var(--accent-soft);color:var(--accent-2)}
.note{font-size:.9rem;color:var(--faint)}

/* ---------- CTA band ---------- */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,var(--accent-soft),var(--surface));border:1px solid var(--accent-border);border-radius:var(--radius-lg);padding:40px}
.cta-band h2{font-size:1.6rem}
.cta-band p{color:var(--muted);margin-top:8px;max-width:52ch}

/* ---------- pricing (cards left as-is, only surroundings restyled) ---------- */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.pricing .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px;position:relative}
.pricing .card.featured{border-color:var(--accent-border);box-shadow:0 0 0 1px var(--accent-border)}
.pricing .card .badge{position:absolute;top:22px;right:22px;background:var(--accent-soft);color:var(--accent-2);font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px}
.pricing .card h2{font-size:1.4rem;margin-bottom:6px}
.pricing .card .price{font-family:var(--font-display);font-size:2.6rem;font-weight:600;color:var(--text);margin:16px 0 6px}
.pricing .card .price span{font-size:1rem;color:var(--muted);font-weight:400}
.pricing .card .desc{color:var(--muted);font-size:.94rem;margin-bottom:22px}
.pricing .card ul{list-style:none;margin-bottom:26px}
.pricing .card ul li{padding:9px 0;color:var(--text);font-size:.9rem;border-bottom:1px solid var(--border);opacity:.92}
.pricing .card ul li:last-child{border-bottom:none}
.pricing .card ul li span{color:var(--accent-2);margin-right:9px}
.pricing .btn,.pricing .card>a{display:block;text-align:center;height:auto;padding:14px;border-radius:11px;font-weight:600;font-size:.95rem;transition:.15s;border:1px solid transparent}
.pricing .btn-primary{background:var(--accent);color:#0a0c11}
.pricing .btn-primary:hover{background:var(--accent-2)}
.pricing .btn-secondary{background:transparent;border-color:var(--border-strong);color:var(--text)}
.pricing .btn-secondary:hover{border-color:var(--accent-border);color:var(--accent-2)}
.pricing .btn-cyan{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-2)}
@media(max-width:780px){.pricing{grid-template-columns:1fr}}
.panel-box{max-width:820px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px}
.panel-box h3{color:var(--text);font-size:1.3rem;margin-bottom:12px}
.panel-box p{color:var(--muted);font-size:.96rem;max-width:62ch;margin:0 auto}

/* ---------- docs / support ---------- */
.line{width:60px;height:3px;border-radius:3px;background:var(--accent);margin:20px auto}
.topic,.doc{display:flex;gap:16px;align-items:flex-start}
.doc h3,.topic h3{font-size:1.05rem;margin-bottom:6px}
.doc p,.topic p{color:var(--muted);font-size:.9rem}
.badge{display:inline-block;margin-top:8px;font-size:.68rem;letter-spacing:.08em;color:var(--accent-2);background:var(--accent-soft);padding:3px 9px;border-radius:999px;font-weight:700}
.support-list{margin:16px 0;display:grid;gap:8px;color:var(--muted);font-size:.9rem}

/* ---------- auth (login + 2fa) ---------- */
.auth-page{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px 34px}
.auth-card.wide{max-width:900px;display:grid;grid-template-columns:1.05fr .95fr;padding:0;overflow:hidden}
.auth-left{padding:40px 36px}
.auth-right{background:linear-gradient(160deg,var(--accent-soft),var(--surface-2));border-left:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px}
.auth-card h1{font-size:1.7rem;margin-bottom:8px}
.auth-sub{color:var(--muted);font-size:.95rem;margin-bottom:26px}
.auth-card label{display:block;margin:0 0 7px;color:var(--text);font-size:.88rem;font-weight:500}
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[name=username],.auth-card input[name=password]{width:100%;height:46px;padding:0 15px;margin-bottom:16px;border-radius:11px;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text);font-size:.95rem;font-family:inherit}
.auth-card input:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}
.turnstile-wrap{margin:4px 0 18px}
.auth-msg,.auth-err{font-size:.86rem;padding:10px 14px;border-radius:10px;margin-bottom:16px}
.auth-err{color:var(--danger);background:rgba(240,97,109,.1);border:1px solid rgba(240,97,109,.22)}
.auth-msg{color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.auth-back{display:block;margin-top:18px;text-align:center;color:var(--faint);font-size:.86rem}
.auth-back:hover{color:var(--accent-2)}
.auth-brand{font-family:var(--font-display);font-size:2rem;font-weight:700}
.auth-brand b{color:var(--accent-2)}
.auth-mark{width:60px;height:60px;border-radius:14px;overflow:hidden;margin-bottom:14px;border:1px solid var(--border-strong)}
.otp-input{text-align:center;letter-spacing:.5em;font-size:1.3rem !important}
.qr{background:#fff;padding:14px;border-radius:12px;display:inline-block;margin:6px 0 16px}
.qr img{width:180px;height:180px}
.secret{color:var(--faint);font-size:.78rem;margin-top:14px;word-break:break-all}
.status-ok{color:var(--ok);font-size:.95rem;margin-bottom:18px}
@media(max-width:780px){.auth-card.wide{grid-template-columns:1fr}.auth-right{display:none}}

/* ---------- app shell (dashboard / vpn access) ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.app-side{background:var(--bg-2);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column}
.app-side .brand{margin:4px 6px 28px}
.app-nav{display:flex;flex-direction:column;gap:3px}
.app-nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;color:var(--muted);font-size:.92rem;font-weight:500;transition:.15s}
.app-nav a:hover{color:var(--text);background:var(--surface-2)}
.app-nav a.active{color:var(--text);background:var(--accent-soft);border:1px solid var(--accent-border)}
.app-logout{margin-top:auto;padding-top:18px}
.app-logout button{width:100%;padding:11px 14px;border-radius:10px;background:transparent;border:1px solid rgba(240,97,109,.25);color:var(--danger);font-size:.9rem;cursor:pointer}
.app-logout button:hover{background:rgba(240,97,109,.1)}
.app-main{padding:34px 40px}
.app-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.app-head h1{font-size:2rem}
.app-head p{color:var(--muted);font-size:.96rem;margin-top:4px}
.pill-status{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:14px 18px;text-align:right}
.pill-status h3{font-size:.95rem;color:var(--ok);margin-bottom:3px}
.pill-status.warning h3{color:var(--warn)}
.pill-status.danger h3{color:var(--danger)}
.pill-status p{color:var(--muted);font-size:.82rem}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.stat-cards .card h2{font-size:1.7rem;color:var(--accent-2);margin-bottom:8px;word-break:break-word}
.stat-cards .card p{color:var(--muted);font-size:.84rem;line-height:1.6}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.info-item{background:var(--bg-2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
.info-item span{display:block;color:var(--faint);font-size:.74rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.info-item strong{color:var(--text);font-size:.92rem;font-weight:600;word-break:break-word}
@media(max-width:1000px){.stat-cards,.info-grid{grid-template-columns:1fr}}
@media(max-width:860px){.app{grid-template-columns:1fr}.app-side{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--border)}.app-side .brand{margin:0 16px 0 6px}.app-nav{flex-direction:row;flex-wrap:wrap;flex:1}.app-logout{margin:0;padding:0}.app-main{padding:24px 20px}}

/* vpn access specifics */
.ip-wrap{margin:18px 0 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.ip-label{color:var(--faint);font-size:.72rem;letter-spacing:.06em;margin-bottom:8px;font-weight:700;text-transform:uppercase}
.ip-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ip-value{font-family:"JetBrains Mono",monospace;font-size:1.3rem;font-weight:600;color:var(--text);filter:blur(9px);user-select:none;letter-spacing:1px;min-width:170px}
.ip-value.revealed{filter:none;user-select:text}
.reveal{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);border-radius:10px;padding:9px 13px;font-weight:600;cursor:pointer;font-size:.88rem}
.reveal:hover{border-color:var(--accent-border);color:var(--accent-2)}
.field{display:block;margin:14px 0 6px;color:var(--muted);font-size:.85rem}
.app-main input[type=text],.app-main select{width:100%;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--text);border-radius:11px;padding:12px 14px;font-size:.95rem;font-family:inherit}
.app-main input:focus,.app-main select:focus{outline:none;border-color:var(--accent-border)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notice{margin-top:14px;background:rgba(214,164,41,.1);border:1px solid rgba(214,164,41,.28);color:var(--warn);border-radius:11px;padding:12px 14px;font-size:.85rem;line-height:1.5}
.ok{color:var(--ok);margin-top:12px;font-size:.9rem}
.err{color:var(--danger);margin-top:12px;font-size:.9rem}
.faq-side h3{font-size:.92rem;color:var(--accent-2);margin:14px 0 6px}
.faq-side p{color:var(--muted);font-size:.88rem}

/* ---------- cctv extras ---------- */
.stats-row.stats-4{grid-template-columns:repeat(4,minmax(0,1fr));list-style:none}
@media(max-width:860px){.stats-row.stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cctv-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:60px 24px}
.cctv-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem)}
/* Framed 16:10 window — native sources are ~1600x950–1000; never stretch */
.shot-frame{
  position:relative;border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);background:#05070c;aspect-ratio:16/10;width:100%;
}
.shot-frame img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block;
}
.shot-frame .tag{position:absolute;top:12px;left:12px;z-index:2;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--accent-2);background:rgba(5,7,10,.82);padding:5px 11px;border-radius:999px;border:1px solid var(--border-strong)}
.meta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;color:var(--faint);font-size:.85rem}
.meta-row a{color:var(--accent-2)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.gallery{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gallery .wide{grid-column:1/-1}
.gallery figure{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);margin:0;padding:0}
/* Native ratio (~1.69:1) — width-driven, height follows; no stretching */
.gallery .shot-media{display:block;background:#05070c;overflow:hidden}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:12px 16px;color:var(--muted);font-size:.86rem}
.changelog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.changelog ul{list-style:none;margin-top:10px;display:grid;gap:8px}
.changelog li{color:var(--muted);font-size:.9rem;padding-left:16px;position:relative}
.changelog li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rel-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rel-head h3{font-size:1.2rem}
.rel-head time{color:var(--faint);font-size:.88rem}
.rel-head a{color:var(--accent-2);font-size:.88rem}
.pill.new{background:rgba(63,185,80,.14);color:var(--ok)}
.pill.imp{background:var(--accent-soft);color:var(--accent-2)}
.pill.fix{background:rgba(214,164,41,.14);color:var(--warn)}
.dl{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.hash{margin-top:20px}
.hash label{display:block;color:var(--faint);font-size:.78rem;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.hash-box{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.hash-box code{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:.8rem;word-break:break-all;color:var(--muted)}
.copy{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);border-radius:10px;padding:0 16px;font-weight:600;cursor:pointer}
.copy:hover{border-color:var(--accent-border);color:var(--accent-2)}
.verify{margin-top:12px;color:var(--faint);font-size:.82rem}
.verify code{color:var(--muted)}
.req ul{list-style:none;display:grid;gap:12px;margin-top:8px}
.req li{color:var(--muted);font-size:.9rem}
.req a{color:var(--accent-2)}
.faq details{border:1px solid var(--border);border-radius:12px;padding:4px 18px;margin-bottom:10px;background:var(--surface)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-2)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:.9rem;padding:0 0 14px}
.faq details a{color:var(--accent-2)}
.warn-card{border-color:rgba(214,164,41,.3)}
.community{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.community p{color:var(--muted);margin-top:6px}
kbd{background:var(--surface-3);border:1px solid var(--border-strong);border-radius:6px;padding:1px 6px;font-size:.82em}
code{background:var(--surface-3);border-radius:5px;padding:1px 6px;font-size:.86em;color:var(--accent-2)}
@media(max-width:860px){.cctv-hero{grid-template-columns:1fr}.changelog{grid-template-columns:1fr}.dl{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}}

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


/* ---------- glassmorphism ---------- */
.glass{
  background:var(--surface) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}
.site-nav.glass{
  background:rgba(6,10,16,.62) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.site-footer{
  background:rgba(5,8,12,.62) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.card{
  background:var(--surface);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card-hover:hover{
  border-color:var(--accent-border);
  box-shadow:0 18px 50px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary{
  background:linear-gradient(135deg,#0891b2,#22d3ee 55%,#38bdf8 100%);
  color:#031018;
  border-color:transparent;
  box-shadow:0 8px 28px rgba(34,211,238,.32);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#06b6d4,#67e8f9 60%,#7dd3fc 100%);
  box-shadow:0 12px 36px rgba(56,189,248,.35);
}
.accent{color:var(--accent-2);background:linear-gradient(120deg,var(--accent-2),var(--accent-hot));-webkit-background-clip:text;background-clip:text;color:transparent}
.window{background:rgba(10,16,24,.6);backdrop-filter:blur(20px)}
.window-bar{background:rgba(16,24,36,.78)}
.stat,.panel-box,.pill-status,.auth-card,.app-side,.ip-wrap,.info-item{
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
.cta-band{
  background:linear-gradient(120deg,rgba(34,211,238,.18),rgba(56,189,248,.10) 45%,rgba(12,18,26,.55));
  border:1px solid var(--accent-border);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 20px 60px rgba(34,211,238,.14);
}
.pricing .card.featured{
  border-color:var(--accent-border);
  box-shadow:0 0 0 1px var(--accent-border), 0 20px 60px rgba(34,211,238,.16);
}
.pricing .btn-primary,.pricing .card>a.btn-primary{
  background:linear-gradient(135deg,#0891b2,#22d3ee 55%,#38bdf8 100%);
  color:#031018;
}
.hero h1{text-shadow:0 0 60px rgba(34,211,238,.22)}
.kicker{color:var(--accent-hot)}
.chip{background:rgba(12,18,26,.55);backdrop-filter:blur(12px)}
.eyebrow{background:rgba(12,18,26,.55);backdrop-filter:blur(12px)}


/* ---------- click FX (ripples / sparks) ---------- */
#click-fx{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.cfx-ripple{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:2px solid rgba(103,232,249,.85);
  box-shadow:0 0 12px rgba(34,211,238,.45);
  animation:cfx-ripple .55s ease-out forwards;
}
.cfx-spark{
  position:absolute;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;
  background:radial-gradient(circle,#e0f7ff 0%,#22d3ee 45%,transparent 70%);
  box-shadow:0 0 8px rgba(56,189,248,.7);
  animation:cfx-spark .55s ease-out forwards;
  animation-delay:var(--delay,0ms);
}
@keyframes cfx-ripple{
  0%{transform:scale(.4);opacity:.9}
  100%{transform:scale(6.5);opacity:0}
}
@keyframes cfx-spark{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #click-fx,.cfx-ripple,.cfx-spark{display:none!important}
}

/* ---------- DedSec VPN app page (/dedsec-vpn/) ---------- */
.btn-soon{cursor:default;opacity:.85;pointer-events:none}
.badge-soon{display:inline-block;font-family:var(--font-sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-transform:uppercase;background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.3);vertical-align:middle}
.vpn-hero .shot-frame a{display:block}
.vpn-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.vpn-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted);background:rgba(12,18,26,.55);border:1px solid rgba(103,232,249,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.vpn-tag-soon{color:var(--accent-2);background:var(--accent-soft);border-color:rgba(34,211,238,.4)}
.vpn-tag-soon .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px rgba(34,211,238,.8)}
.nav-badge{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;vertical-align:middle;background:var(--accent-soft);color:var(--accent-2);border:1px solid rgba(34,211,238,.35)}

.vpn-gallery .shot-media{aspect-ratio:59/36;display:flex;align-items:center;justify-content:center}
.vpn-gallery .shot-media img{width:100%;height:100%;object-fit:contain}
.vpn-gallery li:last-child:nth-child(even){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
@media(max-width:860px){.vpn-gallery li:last-child:nth-child(even){width:100%}}
.vpn-steps{list-style:none;counter-reset:none}
.vpn-steps .step-n{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);font-weight:700;margin-bottom:12px;font-family:var(--font-mono,monospace)}
.vpn-legal{color:var(--muted);font-size:.8rem;margin-top:22px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
/* Nav: keep "VPN App NEW SOON" on one line; tighten links on mid-width screens */
.nav-links a,.brand{white-space:nowrap}
@media (min-width:861px) and (max-width:1100px){
  .nav-links{gap:0}
  .nav-links a{padding:8px 8px;font-size:.88rem}
  .nav-links .nav-badge{margin-left:3px;padding:1px 5px}
}
@media (max-width:860px){
  .nav-links{background:rgba(9,13,19,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
}

/* Login inside the mobile menu (hidden on desktop, where the nav-cta button shows) */
.nav-menu-login{display:none}
@media (max-width:860px){
  .nav-menu-login{display:block;margin-top:6px;padding-top:10px;border-top:1px solid var(--border)}
  .nav-links .nav-menu-login a.btn,.nav-links .nav-menu-login a.btn:hover{display:flex;justify-content:center;width:100%;color:#0a0c11;background:var(--accent);font-weight:600}
  .nav-cta{gap:8px}
}
@media (max-width:380px){
  .nav-inner{padding:0 14px;gap:10px}
  .nav-inner .brand span{font-size:.95rem}
  .btn-login,.menu-btn{height:36px;padding:0 11px}
}

/* Home: "Coming soon" pill in hero + corner ribbon on the showcase window */
.soon-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 22px rgba(34,211,238,.18)}
.soon-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px rgba(34,211,238,.9)}
.window.has-ribbon{position:relative}
.soon-ribbon{position:absolute;top:28px;right:-52px;z-index:5;width:180px;transform:rotate(45deg);text-align:center;padding:6px 0;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#04121a;background:linear-gradient(90deg,#22d3ee,#38bdf8);box-shadow:0 4px 16px rgba(34,211,238,.35);pointer-events:none}
@media (max-width:480px){
  .soon-pill{font-size:.72rem;padding:6px 12px}
  .soon-ribbon{top:26px;right:-54px;width:170px;font-size:.58rem;letter-spacing:.1em;padding:4px 0}
}

/* Hero: eyebrow centred on top; "Coming soon" pill centred directly above the CTAs */
.hero-full .hero-soon{margin-top:34px}
.hero-full .hero-soon + .hero-ctas{margin-top:16px}
@media (max-width:860px){.hero-full .hero-soon{margin-top:26px}.hero-full .hero-soon + .hero-ctas{margin-top:14px}}

/* ---------- Mobile scroll performance ----------
   1) Fixed background layers are sized to the LARGE viewport (100lvh) and promoted to their own
      compositor layer, so they don't resize/rescale when the mobile address bar shows/hides.
   2) Aurora canvas (blurred, animated, full-screen) is off on small/touch screens (see aurora.js).
   3) backdrop-filter blurs are replaced by slightly more opaque tints on small screens. */
.site-wallpaper,body::before,body::after,.aurora-grid{
  top:0;bottom:auto;height:100vh;height:100lvh;
  transform:translateZ(0);will-change:transform;backface-visibility:hidden;
}
@media (max-width:760px), (hover:none) and (pointer:coarse){
  #aurora{display:none!important}
  .hero-full h1 .accent{animation:none}
  .site-nav.glass{background:rgba(6,10,16,.94)!important}
  .site-nav,.site-footer,.glass:not(.pricing .card),.card:not(.pricing .card),.window,.stat,.panel-box,.pill-status,
  .auth-card,.app-side,.ip-wrap,.info-item,.cta-band,.chip,.eyebrow,.soon-pill,.vpn-tag,
  .hero-full .hero-ctas .btn-ghost,.nav-links{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .glass:not(.pricing .card):not(.site-nav),.card:not(.pricing .card),.window,.stat{background:rgba(10,15,22,.84)!important}
  .chip,.eyebrow,.vpn-tag{background:rgba(10,15,22,.82)}
  .soon-pill{background:rgba(8,40,52,.9)}
}

/* ---------- "Coming soon" glow (GPU-friendly: only opacity/transform are animated) ---------- */
.hero-soon{position:relative;isolation:isolate}
.hero-soon::after{ /* soft halo: static blur, animated opacity + scale */
  content:"";position:absolute;inset:-12px -16px;z-index:-1;border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(34,211,238,.75),rgba(56,189,248,.35) 55%,transparent);
  filter:blur(10px);opacity:.6;transform:scale(1);will-change:opacity,transform;
  animation:soon-halo 2.6s ease-in-out infinite;
}
@keyframes soon-halo{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.1)}}
.hero-soon{box-shadow:0 0 18px rgba(34,211,238,.35),inset 0 0 12px rgba(34,211,238,.12)}
.soon-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.soon-shine::after,.soon-ribbon::after,.vpn-tag-soon::after{ /* light sweep */
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-120%) skewX(-18deg);will-change:transform;
  animation:soon-sweep 3.2s ease-in-out infinite;
}
@keyframes soon-sweep{0%,55%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.soon-pill::before,.vpn-tag-soon .dot{animation:soon-dot 1.6s ease-in-out infinite;will-change:transform,opacity}
@keyframes soon-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
.soon-ribbon{overflow:hidden}
.soon-ribbon::after{width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation-duration:4s}
.vpn-tag-soon{position:relative;overflow:hidden}
.vpn-tag-soon::after{animation-duration:3.6s}
@media (prefers-reduced-motion:reduce){
  .hero-soon::after{animation:none;opacity:.7;transform:none}
  .soon-shine::after,.soon-ribbon::after,.vpn-tag-soon::after{display:none}
}

/* ---------- Full-width header (tools update) ----------
   Brand far left, links spread across the middle, CTA buttons far right. */
@media (min-width:861px){
  .site-nav .nav-inner{max-width:none;padding:0 clamp(24px,2.6vw,40px);gap:24px}
  .site-nav .nav-links{flex:1;justify-content:center;gap:clamp(4px,1vw,14px)}
}
@media (min-width:861px) and (max-width:1100px){
  .site-nav .nav-links{gap:0}
}

/* ---------- Full-width header (tools update) ----------
   Brand far left, links spread across the middle, CTA buttons far right. */
@media (min-width:861px){
  .site-nav .nav-inner{max-width:none;padding:0 clamp(24px,2.6vw,40px);gap:24px}
  .site-nav .nav-links{flex:1;justify-content:center;gap:clamp(4px,1vw,14px)}
}
@media (min-width:861px) and (max-width:1100px){
  .site-nav .nav-links{gap:0}
}

/* ---------- Event status badge (TryHackMe, not live) ---------- */
.nav-badge-event{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;vertical-align:middle;background:rgba(251,191,36,.10);color:#e8b65a;border:1px dashed rgba(251,191,36,.45)}
.event-status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e8b65a;background:rgba(251,191,36,.08);border:1px dashed rgba(251,191,36,.5);margin-bottom:22px}
.event-status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#a3824a;box-shadow:0 0 0 3px rgba(251,191,36,.15)}
.btn.is-unavailable{opacity:.5;cursor:not-allowed;filter:grayscale(.6);pointer-events:none}
.event-unavailable-note{margin-top:10px;color:var(--muted);font-size:.88rem;text-align:center;width:100%}

/* Hero badge under title */
.vpn-tags.vpn-tags--under{margin-top:16px;margin-bottom:0}
.event-status-pill.under-title{margin-top:14px;margin-bottom:0;display:inline-flex;font-size:.72em}