/* =====================================================================
   CYBERPUNK / GLITCH THEME — visual override layer (test redesign)
   Neon void, chromatic aberration, chamfers, holographic HUD panels.
   Loaded AFTER the original <style>; markup, text, logos and JS untouched.
   ===================================================================== */

html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-mono); letter-spacing:.02em; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--magenta); color:#000;}

h1,h2,h3,h4{font-family:var(--font-display); text-transform:uppercase; font-weight:900; letter-spacing:.12em; color:#fff;}
h2{letter-spacing:.08em; font-weight:700;}
h3,h4{letter-spacing:.06em; font-weight:600;}
h1#heroTitle{font-size:clamp(30px, 4.6vw, 58px) !important; line-height:1.05;}
h2{font-size:clamp(24px, 3.4vw, 36px) !important; line-height:1.15;}
h3.text-lg{font-size:13px !important;}
p, li, span, a, button, input, label{font-family:inherit;}

/* ---------- void + circuit + scanlines + noise + mesh ---------- */
.bg-field{
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(0,255,136,.08), transparent 70%),
    radial-gradient(600px 500px at 100% 10%, rgba(255,0,255,.08), transparent 70%),
    radial-gradient(600px 500px at 30% 100%, rgba(0,212,255,.07), transparent 70%),
    linear-gradient(rgba(0,255,136,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.03) 1px, transparent 1px);
  background-size:auto, auto, auto, 50px 50px, 50px 50px;
}
.bg-field::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%2300ff88' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M0 30H44M44 30V0M76 120V74M76 74H120M30 120V90M30 90H0M120 44H92M92 44V18'/%3E%3Ccircle cx='44' cy='30' r='2.5' fill='%2300ff88' fill-opacity='0.2'/%3E%3Ccircle cx='76' cy='74' r='2.5' fill='%23ff00ff' fill-opacity='0.2'/%3E%3Ccircle cx='92' cy='18' r='2' fill='%2300d4ff' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
.blob{filter:blur(110px); opacity:.5; mix-blend-mode:screen;}
.blob-1{background:radial-gradient(circle, rgba(0,255,136,.35), transparent 70%);}
.blob-2{background:radial-gradient(circle, rgba(255,0,255,.28), transparent 70%);}
.blob-3{background:radial-gradient(circle, rgba(0,212,255,.28), transparent 70%);}
#particleCanvas{opacity:.5; mix-blend-mode:screen;}
.noise{opacity:.025;}
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px);
}
body::before{
  content:''; position:fixed; left:0; right:0; top:0; height:6px; z-index:9999; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,212,255,.25), rgba(255,0,255,.12), transparent);
  animation:scanSweep 6s linear infinite;
}
@keyframes scanSweep{0%{transform:translateY(-6px);} 100%{transform:translateY(100vh);}}

/* ---------- chamfer ---------- */
.card,.surface,.cab-card,.modal-box,.chip-float,.icon-tile,.cab-kpi,.cab-row,.cab-device,.cab-steps,
.cab-ref-program,.cab-empty-note,.web-pay-plan,.web-pay-info,.web-pay-error,.web-pay-success,
.web-pay-pending,.dash-row,.demo-banner,.cab-toast,.cab-qr-empty{
  border-radius:0 !important;
  clip-path:polygon(
    0 var(--chamfer), var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.btn,.field,.web-pay-input,.cab-copy-row input,.eyebrow,.badge,.plan-badge,.cab-nav-btn,.cab-bottom-btn,
.cab-device-tag,.cab-qr-frame,.glass{border-radius:0 !important;}

/* ---------- brand ---------- */
.brand-lockup{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:.95rem; font-weight:900; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.35);}
.brand-lockup .grad-text{font-weight:900;}
.brand-mark{border-radius:50%; box-shadow:0 0 0 2px rgba(0,255,136,.85), var(--neon-lg); filter:brightness(1.12) saturate(1.15);}

/* ---------- gradient text: green -> cyan -> magenta ---------- */
.grad-text{
  color: var(--magenta);
  background:linear-gradient(100deg, var(--primary) 0%, var(--cyan) 55%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,255,136,.45));
}

/* ---------- glitched hero ---------- */
#heroTitle{
  position:relative; text-shadow:var(--aberration), var(--text-glow);
  animation:glitchSkew 5s steps(1) infinite;
}
#heroTitle .grad-text{animation:rgbPulse 5s steps(1) infinite;}
@keyframes glitchSkew{
  0%,88%,100%{transform:none; clip-path:none;}
  89%{transform:translate(-3px,1px) skewX(-3deg); clip-path:inset(10% 0 60% 0);}
  90%{transform:translate(3px,-2px) skewX(2deg); clip-path:inset(50% 0 20% 0);}
  91%{transform:translate(-2px,0); clip-path:inset(0 0 0 0);}
  92%{transform:translate(2px,1px) skewX(-1deg); clip-path:inset(30% 0 40% 0);}
  93%{transform:none; clip-path:none;}
}
@keyframes rgbPulse{
  0%,88%,100%{filter:drop-shadow(0 0 10px rgba(0,255,136,.45));}
  89%,92%{filter:drop-shadow(-3px 0 #ff00ff) drop-shadow(3px 0 #00d4ff);}
}
#heroSub{color:#e6e8f2 !important; font-weight:500;}
#heroSub::after{
  content:'_'; display:inline-block; margin-left:.2ch; font-weight:700;
  color:var(--cyan); text-shadow:var(--neon-cyan); animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}
#heroTrust span{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:#d8dcea !important;}
#heroTrust span::before{content:'> '; color:var(--magenta); text-shadow:var(--neon-magenta);}

/* ---------- eyebrow: HUD label ---------- */
.eyebrow{
  font-family:var(--font-label); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cyan); background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.4);
  padding:6px 14px; text-shadow:var(--neon-cyan);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
}
.eyebrow .dot{width:6px; height:6px; border-radius:0; background:var(--cyan); box-shadow:var(--neon-cyan); animation:pulseDot 1s steps(2) infinite;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-label); font-weight:700; font-size:14px; line-height:1.2;
  letter-spacing:.16em; text-transform:uppercase;
  transition:all 100ms steps(4);
  clip-path:polygon(
    0 var(--chamfer-sm), var(--chamfer-sm) 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm),
    100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)));
}
.btn:active{transform:translate(1px,1px);}
.btn:focus-visible{outline:2px solid var(--primary); outline-offset:3px; box-shadow:var(--neon);}
/* glitch CTA */
.btn-primary{
  background:var(--primary); color:var(--text-on-primary); border:2px solid var(--primary);
  box-shadow:var(--neon-lg); position:relative;
}
@media (hover:hover){
  .btn-primary:hover{filter:brightness(1.12); transform:none; box-shadow:var(--neon-lg), var(--neon-magenta); text-shadow:-1px 0 rgba(255,0,255,.7), 1px 0 rgba(0,212,255,.7);}
}
/* outline variant */
.btn-ghost{background:rgba(0,255,136,.07); border:2px solid var(--primary); color:#7dffc0; text-shadow:0 0 6px rgba(0,255,136,.8); box-shadow:var(--neon-sm);}
@media (hover:hover){
  .btn-ghost:hover{background:var(--primary); color:var(--bg); box-shadow:var(--neon); text-shadow:none;}
}
/* secondary = magenta */
.btn-soft{background:rgba(255,0,255,.07); border:2px solid var(--magenta); color:#ff7dff; text-shadow:0 0 6px rgba(255,0,255,.8); box-shadow:var(--neon-magenta);}
@media (hover:hover){.btn-soft:hover{background:var(--magenta); color:var(--bg); box-shadow:var(--neon-magenta); text-shadow:none;}}
/* tertiary = cyan */
.btn-tg{background:rgba(0,212,255,.07); border:2px solid var(--cyan); color:#7de9ff; text-shadow:0 0 6px rgba(0,212,255,.8); box-shadow:var(--neon-cyan);}
@media (hover:hover){.btn-tg:hover{background:var(--cyan); color:var(--bg); filter:none; box-shadow:var(--neon-cyan); text-shadow:none;}}
.btn svg{filter:drop-shadow(0 0 4px currentColor); stroke-width:1.5;}

/* ---------- header ---------- */
#siteHeader.scrolled{
  background:rgba(10,10,15,.82); border-bottom-color:var(--border);
  box-shadow:0 1px 0 rgba(0,255,136,.25), 0 0 30px -10px rgba(255,0,255,.3);
}
.nav-link{font-family:var(--font-label); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#e6e8f2; font-weight:700;}
.nav-link:hover{color:var(--primary); text-shadow:var(--text-glow);}
.nav-link::after{height:2px; background:linear-gradient(90deg, var(--primary), var(--magenta)); box-shadow:var(--neon-sm);}
#landingNav{gap:28px;}
.glass{background:rgba(28,28,46,.5); border:1px solid rgba(0,255,136,.4); color:var(--primary);
  clip-path:polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));}
.mobile-nav{background:var(--bg);}
.mobile-nav nav a{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em; font-size:15px; border-bottom-color:var(--border) !important;}
.mobile-nav nav a::before{content:'// '; color:var(--magenta);}

/* ---------- mascot HUD: holographic hex frame ---------- */
.mascot-glow{
  inset:-60px;
  background:conic-gradient(from 0deg, rgba(0,255,136,.35), rgba(0,212,255,.25), rgba(255,0,255,.3), rgba(0,255,136,.35));
  filter:blur(34px); animation:hueSpin 8s linear infinite, breathe 5s ease-in-out infinite;
}
@keyframes hueSpin{to{filter:blur(34px) hue-rotate(360deg);}}
.mascot-img{animation:none; box-shadow:0 0 0 2px rgba(0,255,136,.9), var(--neon-lg), 0 0 60px rgba(255,0,255,.3); filter:brightness(1.12) saturate(1.15) contrast(1.05); transition:transform .15s ease-out;}
.mascot-wrap{animation:float 6s ease-in-out infinite;}
.ring-orbit{border:1px solid rgba(0,212,255,.5); box-shadow:var(--neon-cyan); border-style:dashed;}
.mascot-wrap::before, .mascot-wrap::after{
  content:''; position:absolute; width:34px; height:34px; z-index:3; pointer-events:none;
  border:2px solid var(--magenta); filter:drop-shadow(0 0 6px var(--magenta));
}
.mascot-wrap::before{top:-18px; left:-18px; border-right:none; border-bottom:none;}
.mascot-wrap::after{bottom:-18px; right:-18px; border-left:none; border-top:none;}
.chip-float{
  font-family:var(--font-label); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(18,18,26,.9); backdrop-filter:blur(10px);
  border:1px solid rgba(0,212,255,.45); color:var(--cyan); box-shadow:var(--neon-cyan);
  padding:9px 14px; text-shadow:var(--neon-cyan);
}
.chip-float .dot{border-radius:0; background:var(--cyan); box-shadow:var(--neon-cyan);}
.chip-float svg{stroke:var(--cyan) !important; filter:drop-shadow(0 0 4px var(--cyan));}

/* ---------- signal wave ---------- */
.signal-wave path{stroke-width:2; filter:drop-shadow(0 0 6px rgba(0,255,136,.7)) drop-shadow(0 0 12px rgba(255,0,255,.4));}

/* ---------- cards: holographic + skew ---------- */
#features .grid{transform:skewY(-1deg);}
#features .grid > .card{transform:skewY(1deg);}
.card, .surface{
  background:rgba(28,28,46,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,255,136,.5); position:relative;
  box-shadow:var(--neon-sm); transition:all var(--dur-base) var(--ease);
}
.card p, .card li, .card .text-sm{color:#d8dcea !important;}
.card::after{
  content:''; position:absolute; inset:6px; pointer-events:none;
  background:
    linear-gradient(var(--primary), var(--primary)) top left / 16px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) top left / 2px 16px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) top right / 16px 2px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) top right / 2px 16px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) bottom right / 2px 16px no-repeat;
  opacity:.8;
}
@media (hover:hover){
  .card:hover{border-color:var(--primary); box-shadow:var(--neon); background:rgba(28,28,46,.45); transform:translateY(-1px);}
  #features .grid > .card:hover{transform:skewY(1deg) translateY(-2px);}
}
.icon-tile{
  background:transparent; border:1px solid rgba(0,212,255,.5); color:var(--cyan);
  box-shadow:var(--neon-cyan);
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  width:48px; height:48px;
}
.icon-tile svg{filter:drop-shadow(0 0 4px currentColor); stroke-width:1.5;}

/* ---------- pricing ---------- */
#pricing .grid{align-items:center;}
.plan-card .text-4xl{font-family:var(--font-display); letter-spacing:.04em; text-shadow:var(--text-glow);}
.plan-card.popular{
  border:1px solid var(--magenta); box-shadow:var(--neon-magenta), var(--neon-sm);
  transform:scale(1.04); z-index:2;
}
@media (hover:hover){#pricing .plan-card.popular:hover{transform:scale(1.04) translateY(-1px);}}
.plan-badge{
  top:16px; right:16px; left:auto;
  font-family:var(--font-label); letter-spacing:.24em; text-transform:uppercase;
  background:var(--magenta); color:#000; box-shadow:var(--neon-magenta);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%); padding:5px 14px;
}
.plan-card li svg{stroke:var(--cyan) !important; filter:drop-shadow(0 0 3px var(--cyan));}

/* ---------- FAQ: terminal variant ---------- */
#faqList{
  background:var(--bg); border:1px solid var(--border); padding:44px 20px 10px; position:relative;
  clip-path:polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}
#faqList::before{
  content:''; position:absolute; top:0; left:0; right:0; height:32px; background:var(--surface); border-bottom:1px solid var(--border);
}
#faqList::after{
  content:''; position:absolute; top:11px; left:14px; width:10px; height:10px; border-radius:50%;
  background:#ff3366; box-shadow:18px 0 0 #ffb000, 36px 0 0 #00ff88, 0 0 6px #ff3366, 18px 0 6px #ffb000, 36px 0 6px #00ff88;
}
.faq-item{border-bottom:1px dashed var(--border);}
.faq-q{font-family:var(--font-mono); font-weight:600; font-size:14px;}
.faq-q::before{content:'> '; color:var(--primary); text-shadow:var(--text-glow); flex-shrink:0;}
.faq-icon{color:var(--text-muted);}
.faq-item.open .faq-icon{color:var(--magenta); filter:drop-shadow(0 0 4px var(--magenta));}
.faq-a{color:#d8dcea; font-size:14px;}
.faq-q{color:#fff;}

/* ---------- CTA / support ---------- */
.surface{box-shadow:inset 0 0 60px rgba(0,255,136,.05), var(--neon-sm);}
main section:last-of-type > div[style*="linear-gradient"]{
  background:
    linear-gradient(rgba(0,255,136,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.05) 1px, transparent 1px),
    linear-gradient(120deg, rgba(0,255,136,.14), rgba(0,212,255,.08) 50%, rgba(255,0,255,.14)) !important;
  background-size:24px 24px, 24px 24px, auto !important;
  border:1px solid rgba(0,255,136,.5) !important; border-radius:0 !important;
  box-shadow:var(--neon), 0 0 60px -20px rgba(255,0,255,.5);
  clip-path:polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
  transform:rotate(-.4deg);
}
main section:last-of-type > div[style*="linear-gradient"] h2{text-shadow:var(--aberration), var(--text-glow);}

/* ---------- footer ---------- */
.divider-fade{height:1px; background:linear-gradient(90deg, transparent, var(--primary), var(--magenta), var(--cyan), transparent); opacity:.6; box-shadow:var(--neon-sm);}
footer{border-top:1px solid var(--border) !important;}
footer .font-semibold{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.26em; color:var(--cyan); text-shadow:var(--neon-cyan);}
footer ul a:hover, footer ul button:hover{color:var(--magenta) !important; text-shadow:var(--neon-magenta);}

/* ---------- inputs ---------- */
.field, .web-pay-input, .cab-copy-row input{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  color:var(--primary) !important; font-family:var(--font-mono) !important; caret-color:var(--primary);
  clip-path:polygon(0 var(--chamfer-sm), var(--chamfer-sm) 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)));
}
.field:focus, .web-pay-input:focus{outline:none; border-color:var(--primary) !important; box-shadow:var(--neon) !important;}
.field::placeholder, .web-pay-input::placeholder{color:var(--text-muted); opacity:1;}
.field-code{letter-spacing:.4em; text-shadow:var(--text-glow);}
.web-pay-label{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--cyan); text-shadow:var(--neon-cyan);}
.web-pay-label::before{content:'> ';}
.web-pay-plan{background:var(--surface); border:1px solid var(--border);}
.web-pay-plan.selected{border-color:var(--magenta); background:rgba(255,0,255,.06); box-shadow:var(--neon-magenta);}
.web-pay-plan-price{font-family:var(--font-display); text-shadow:var(--text-glow);}
.web-pay-info{background:rgba(0,212,255,.05); border:1px solid rgba(0,212,255,.35);}
.web-pay-info strong{color:var(--cyan); text-shadow:var(--neon-cyan);}
.web-pay-error{border:1px solid var(--danger); box-shadow:0 0 10px rgba(255,51,102,.4);}
.web-pay-success{border:1px solid var(--primary); box-shadow:var(--neon);}

/* ---------- modal ---------- */
.modal-overlay{background:rgba(10,10,15,.88); backdrop-filter:blur(8px);}
.modal-box{
  background:var(--surface); border:1px solid rgba(0,255,136,.55);
  box-shadow:var(--neon), 0 0 80px -20px rgba(255,0,255,.5), 0 30px 80px -30px #000;
}
.modal-box h2, .modal-box h3{text-shadow:var(--aberration);}
.steps-dots span{border-radius:0; background:var(--border);}
.steps-dots span.on{background:linear-gradient(90deg, var(--primary), var(--cyan)); box-shadow:var(--neon-sm);}

/* ---------- badges ---------- */
.badge{font-family:var(--font-label); letter-spacing:.2em; text-transform:uppercase; font-size:10.5px;
  background:rgba(0,255,136,.06); border:1px solid var(--primary); color:var(--primary); text-shadow:var(--text-glow);
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 100%, 6px 100%);}
.badge::before{border-radius:0; box-shadow:0 0 6px currentColor;}
.badge.warn{border-color:var(--amber); color:var(--amber); background:rgba(255,176,0,.06);}
.badge.bad{border-color:var(--danger); color:var(--danger); background:rgba(255,51,102,.08);}
.cab-device-tag{font-family:var(--font-label); background:transparent; border:1px solid var(--cyan); color:var(--cyan);}

/* ---------- cabinet ---------- */
.cab-header h1, .cab-panel-head h2, .cab-until, .cab-kpi .v, .cab-ref-program h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;}
.cab-header h1{text-shadow:var(--aberration), var(--text-glow);}
.cab-until{text-shadow:var(--text-glow);}
.cab-card{background:rgba(28,28,46,.75); backdrop-filter:blur(10px); border:1px solid rgba(0,255,136,.3); box-shadow:var(--neon-sm);}
.cab-hero{
  background:
    linear-gradient(rgba(0,255,136,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.04) 1px, transparent 1px),
    radial-gradient(520px 180px at 0% 0%, rgba(0,255,136,.16), transparent 70%),
    radial-gradient(400px 180px at 100% 100%, rgba(255,0,255,.12), transparent 70%);
  background-size:20px 20px, 20px 20px, auto, auto;
  border-bottom:1px solid var(--border);
}
.cab-kpi .k, .cab-row .k{font-family:var(--font-label); letter-spacing:.2em; color:var(--text-muted);}
.cab-kpi .k::before, .cab-row .k::before{content:'> '; color:var(--magenta);}
.cab-kpi, .cab-row, .cab-device, .cab-steps, .cab-ref-program, .dash-row{background:rgba(10,10,15,.5); border:1px solid var(--border);}
@media (hover:hover){.cab-kpi:hover{border-color:var(--cyan); box-shadow:var(--neon-cyan); background:rgba(0,212,255,.05);}}
.progress{height:10px; background:var(--bg); border:1px solid var(--border); padding:1px;}
.progress-fill{background:linear-gradient(90deg, var(--primary), var(--cyan), var(--magenta)); box-shadow:var(--neon); animation:hueRotate 4s linear infinite;}
@keyframes hueRotate{to{filter:hue-rotate(360deg);}}
.cab-nav-btn{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; border:1px solid transparent;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);}
.cab-nav-btn.active{background:rgba(0,255,136,.08); border-color:var(--primary); color:var(--primary); text-shadow:var(--text-glow); box-shadow:inset 3px 0 0 var(--magenta), var(--neon-sm);}
.cab-nav-btn.active svg{color:var(--primary); filter:drop-shadow(0 0 3px var(--primary));}
.cab-bottom-nav{background:rgba(10,10,15,.95); border-top:1px solid rgba(0,255,136,.3); box-shadow:0 -1px 0 rgba(255,0,255,.2);}
.cab-bottom-btn{font-family:var(--font-label); letter-spacing:.12em; text-transform:uppercase;}
.cab-bottom-btn.active{color:var(--primary); background:rgba(0,255,136,.08); text-shadow:var(--text-glow);}
.cab-qr-frame{border:1px solid var(--primary); box-shadow:var(--neon), 0 0 40px -10px var(--magenta); background:#fff;}
.cab-qr-frame img{border-radius:0;}
.demo-banner{background:rgba(255,176,0,.06); border:1px solid rgba(255,176,0,.5); color:var(--amber); box-shadow:0 0 10px rgba(255,176,0,.3);}
.demo-banner::before{content:'[SYS] '; font-weight:700;}
.cab-toast{background:var(--surface); border:1px solid var(--cyan); box-shadow:var(--neon-cyan);}
.cab-loading::before{border-radius:0; border:2px solid var(--border); border-top-color:var(--magenta);}
.cab-empty-note{border:1px dashed rgba(0,212,255,.4); color:var(--text-secondary);}

/* ---------- section separators: skewed accents ---------- */
#pricing > div:first-child, #pay > div:first-child, #faq > div:first-child{position:relative;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #heroTitle, #heroTitle .grad-text, body::before, #heroSub::after, .mascot-glow, .progress-fill{animation:none !important;}
  #heroTitle{text-shadow:var(--aberration);}
}

/* ---------- mobile ---------- */
@media (max-width:639px){
  .btn{font-size:12px; letter-spacing:.12em; padding:12px 14px;}
  .nav-link{font-size:10px;}
  .brand-lockup{font-size:.8rem; letter-spacing:.1em;}
  :root{--chamfer:9px; --chamfer-sm:5px;}
  .mascot-wrap::before, .mascot-wrap::after{width:22px; height:22px;}
  .plan-card.popular{transform:none;}
  #features .grid, #features .grid > .card{transform:none;}
  main section:last-of-type > div[style*="linear-gradient"]{transform:none;}
}

/* ---------- safe-area / solid header (fixes status-bar see-through on mobile) ---------- */
:root{ --safe-top: env(safe-area-inset-top, 0px); }
#siteHeader{
  background:rgba(10,10,15,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding-top:var(--safe-top);
  height:calc(var(--header-h) + var(--safe-top));
}
#siteHeader.scrolled{background:rgba(10,10,15,.92); box-shadow:0 1px 0 rgba(0,255,136,.25), 0 0 30px -10px rgba(255,0,255,.3);}

/* ---------- cabinet mobile nav: moved to a horizontal top bar, PC-button style ---------- */
@media (max-width:899px){
  .cab-bottom-nav{
    position:fixed; left:0; right:0; bottom:auto;
    top:calc(var(--header-h) + var(--safe-top));
    display:flex; flex-direction:row; grid-template-columns:none;
    justify-content:flex-start; align-items:center;
    gap:8px; padding:10px 14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    background:rgba(10,10,15,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:none; border-bottom:1px solid var(--border);
    z-index:49;
  }
  .cab-bottom-nav::-webkit-scrollbar{display:none;}
  /* Same look-and-feel as the PC sidebar buttons (.cab-nav-btn): same font,
     same active treatment — row-oriented instead of a column, with the accent
     bar moved from left to bottom. Straight rectangular edges (no diagonal
     chamfer here — reads cleaner as a tab strip than the single-corner cut). */
  .cab-bottom-btn{
    flex-direction:row; flex-shrink:0; white-space:nowrap;
    gap:10px; padding:10px 16px; min-height:40px; height:auto;
    border:1px solid transparent; border-radius:0 !important;
    font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; font-weight:600;
    color:var(--text-secondary);
    clip-path:none;
  }
  .cab-bottom-btn svg{width:18px; height:18px; opacity:.75; flex-shrink:0;}
  .cab-bottom-btn.active{
    background:rgba(0,255,136,.08); border-color:var(--primary); color:var(--primary);
    text-shadow:var(--text-glow); box-shadow:inset 0 -3px 0 var(--magenta), var(--neon-sm);
  }
  .cab-bottom-btn.active svg{opacity:1; color:var(--primary); filter:drop-shadow(0 0 3px var(--primary));}

  .cab-shell{
    padding-top:calc(var(--header-h) + var(--safe-top) + 62px + 20px) !important;
    padding-bottom:24px !important;
  }
}

/* ---------- quick-links: floating VPN-bot / support launcher ---------- */
.quick-links{
  position:fixed; right:22px; bottom:26px; z-index:44;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  pointer-events:none;
}
.quick-link-btn{
  pointer-events:auto;
  display:flex; align-items:center; gap:0;
  height:52px; padding:0 15px;
  font-family:var(--font-label); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; overflow:hidden;
  background:rgba(18,18,26,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  clip-path:polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
  transition:all 150ms cubic-bezier(0.4,0,0.2,1);
}
.quick-link-ic{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0;
}
.quick-link-label{
  max-width:0; opacity:0; margin-left:0;
  overflow:hidden; white-space:nowrap;
  transition:max-width 220ms cubic-bezier(0.4,0,0.2,1), opacity 180ms, margin-left 220ms;
}
@media (hover:hover){
  .quick-link-btn:hover .quick-link-label{max-width:200px; opacity:1; margin-left:10px;}
  .quick-link-btn:hover{transform:translateX(-2px);}
}
.quick-link-bot{color:var(--primary); border-color:rgba(0,255,136,.5);}
.quick-link-bot .quick-link-ic{filter:drop-shadow(0 0 4px var(--primary));}
.quick-link-bot:hover{box-shadow:var(--neon-lg); border-color:var(--primary); background:rgba(0,255,136,.08);}
.quick-link-support{color:var(--magenta); border-color:rgba(255,0,255,.5);}
.quick-link-support .quick-link-ic{filter:drop-shadow(0 0 4px var(--magenta));}
.quick-link-support:hover{box-shadow:var(--neon-magenta); border-color:var(--magenta); background:rgba(255,0,255,.08);}

@media (max-width:639px){
  /* Floating bot/support launcher permanently covered page content on small
     screens with no room to spare — hide it there; desktop/tablet keep it. */
  .quick-links{display:none;}
}

/* ---------- mobile quick-links: in-flow row at the top of the hero ---------- */
.mobile-quick-links{display:none;}
@media (max-width:639px){
  .mobile-quick-links{
    display:flex; gap:10px; margin-bottom:16px;
  }
  .mobile-quick-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    height:40px; padding:0 10px;
    font-family:var(--font-label); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    text-decoration:none; white-space:nowrap;
    background:rgba(18,18,26,.7); border:1px solid var(--border-strong);
    clip-path:polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  }
  .mobile-quick-bot{color:var(--primary); border-color:rgba(0,255,136,.5);}
  .mobile-quick-bot svg{filter:drop-shadow(0 0 3px var(--primary));}
  .mobile-quick-support{color:var(--magenta); border-color:rgba(255,0,255,.5);}
  .mobile-quick-support svg{filter:drop-shadow(0 0 3px var(--magenta));}
  .mobile-quick-btn:active{filter:brightness(1.3);}
}