/* CybrSecAI 17.0 NEON COMMAND — immersive production UX */
:root{
  --v17-neon:#58f0c1;--v17-cyan:#5ad6ff;--v17-blue:#2d9cff;--v17-red:#ff5e72;
  --v17-panel:rgba(5,20,28,.92);--v17-line:rgba(94,238,205,.15);--v17-glow:rgba(68,239,196,.16);
}
body{background:#02070b!important}
body:before{opacity:.31!important;background-size:58px 58px!important}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:
  radial-gradient(circle at 72% 4%,rgba(18,170,196,.10),transparent 25%),
  radial-gradient(circle at 45% 55%,rgba(14,97,131,.06),transparent 35%),
  linear-gradient(180deg,rgba(1,9,14,.02),rgba(1,6,10,.5));}
.topbar{background:linear-gradient(90deg,rgba(3,10,14,.95),rgba(3,13,19,.86),rgba(3,9,14,.95))!important;box-shadow:0 12px 44px rgba(0,0,0,.18)!important}
.topbar:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(86,230,217,.13) 55px,transparent 56px)}
.sidebar{box-shadow:22px 0 70px rgba(0,0,0,.28)!important}
.new-chat{background:linear-gradient(105deg,#61efc2,#55ddd9)!important;color:#031711!important;box-shadow:0 0 0 1px rgba(104,255,222,.23),0 10px 30px rgba(74,235,198,.12)!important}
.nav-btn{transition:background .18s ease,border-color .18s ease,transform .18s ease!important}.nav-btn:hover{transform:translateX(2px)!important}
.content{perspective:1400px}
.hero{background:
  radial-gradient(circle at 76% 31%,rgba(54,236,200,.10),transparent 19%),
  radial-gradient(circle at 91% 8%,rgba(63,170,255,.08),transparent 22%),
  linear-gradient(145deg,rgba(6,23,32,.985),rgba(3,14,20,.99))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.28),0 0 0 1px rgba(91,238,205,.035),inset 0 1px rgba(255,255,255,.025)!important}
.hero:before{content:""!important;position:absolute!important;inset:0!important;background:
  linear-gradient(rgba(92,237,209,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(92,237,209,.028) 1px,transparent 1px)!important;
  background-size:32px 32px!important;mask-image:linear-gradient(90deg,transparent 35%,#000 70%,transparent 100%)!important;animation:gridDrift 18s linear infinite!important;opacity:.55!important}
.hero:after{content:"";position:absolute;left:0;right:0;top:-15%;height:3px;background:linear-gradient(90deg,transparent,rgba(94,240,202,.8),transparent);box-shadow:0 0 22px rgba(94,240,202,.6);animation:heroScan 8s linear infinite;opacity:.42;pointer-events:none}
.hero-copy h1{text-shadow:0 0 1px rgba(255,255,255,.2)}
.hero-copy h1 span{filter:drop-shadow(0 0 18px rgba(74,239,202,.10))}
.hero-visual{transform-style:preserve-3d;transition:transform .24s ease-out!important}
.hero-visual-halo{background:radial-gradient(circle,rgba(64,240,197,.22),rgba(42,158,247,.07) 42%,transparent 70%)!important;filter:blur(17px)!important;animation:haloBreath 5.2s ease-in-out infinite}
.cyber-globe{background:
 radial-gradient(circle at 34% 26%,rgba(174,255,225,.21),transparent 16%),
 radial-gradient(circle at 50% 50%,rgba(26,207,159,.15),rgba(4,46,54,.32) 47%,rgba(1,13,19,.96) 73%),
 repeating-radial-gradient(circle at 50% 50%,rgba(94,244,204,.12) 0 1px,transparent 1px 8px)!important;
 border-color:rgba(93,247,207,.38)!important;box-shadow:0 0 0 1px rgba(99,247,209,.06),0 0 36px rgba(69,240,194,.19),0 0 115px rgba(33,168,224,.17),inset -40px -20px 62px rgba(0,0,0,.46)!important;animation:globeBreath 5.6s ease-in-out infinite!important}
.cyber-globe:before{animation:globeSweep 9s linear infinite}
.orbit{z-index:0!important;border-color:rgba(100,236,209,.20)!important;box-shadow:inset 0 0 18px rgba(89,239,197,.035),0 0 22px rgba(76,194,255,.035)}
.orbit-a{animation:orbitA 16s linear infinite!important}.orbit-b{animation:orbitB 11s linear infinite!important}.orbit-c{animation:orbitC 22s linear infinite!important}
.orbit:after,.orbit>i{content:"";position:absolute;border-radius:50%;background:#b6ffeb;box-shadow:0 0 8px #75f4d0,0 0 19px rgba(83,222,255,.85);width:6px;height:6px;right:14%;top:7%;animation:starPulse 1.8s ease-in-out infinite}
.orbit>i{right:auto;left:7%;top:64%;width:4px;height:4px;animation-delay:-.8s}
.hero-starfield span{animation:starFloat 5.5s ease-in-out infinite!important}
.intel-float{border-color:rgba(100,242,208,.24)!important;background:linear-gradient(135deg,rgba(5,29,36,.94),rgba(5,19,27,.97))!important;box-shadow:0 14px 42px rgba(0,0,0,.26),0 0 28px rgba(71,227,197,.05)!important;animation:floatChip 4.5s ease-in-out infinite!important}
.intel-float-b{animation-delay:-1.1s!important}.intel-float-c{animation-delay:-2.4s!important}.intel-float-d{animation-delay:-3.2s!important}
.quick-card{overflow:hidden!important;isolation:isolate}.quick-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(110,255,221,.04),transparent 62%);transform:translateX(-110%);transition:transform .7s ease;z-index:-1}.quick-card:hover:before{transform:translateX(115%)}
.quick-card:after{content:"";position:absolute;right:12px;bottom:11px;width:75px;height:34px;opacity:.23;background:
 linear-gradient(90deg,transparent 0 8%,rgba(81,224,255,.42) 9% 10%,transparent 11% 22%,rgba(81,224,255,.38) 23% 24%,transparent 25%),
 linear-gradient(155deg,transparent 45%,rgba(77,238,196,.55) 46% 49%,transparent 50%);clip-path:polygon(0 75%,12% 56%,23% 65%,35% 31%,48% 48%,59% 20%,74% 43%,88% 10%,100% 27%,100% 100%,0 100%)}
.quick-card:nth-child(2):after{background:repeating-linear-gradient(90deg,rgba(75,213,255,.55) 0 4px,transparent 4px 10px);clip-path:none;height:29px;mask-image:linear-gradient(180deg,transparent,#000)}
.quick-card:nth-child(3):after{border:1px solid rgba(70,225,206,.6);border-radius:50%;background:radial-gradient(circle at 20% 70%,#63efc0 0 3px,transparent 4px),radial-gradient(circle at 50% 35%,#58d9ff 0 3px,transparent 4px),radial-gradient(circle at 82% 62%,#63efc0 0 3px,transparent 4px);clip-path:none}
.quick-card:nth-child(4):after{background:linear-gradient(30deg,transparent 46%,rgba(80,198,255,.4) 47% 50%,transparent 51%),linear-gradient(150deg,transparent 46%,rgba(80,198,255,.4) 47% 50%,transparent 51%);clip-path:none}
.command-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px}
.command-deck button{display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:10px;align-items:center;min-height:66px;padding:10px 11px;border:1px solid rgba(115,191,199,.09);border-radius:13px;background:linear-gradient(145deg,rgba(8,26,34,.90),rgba(5,17,23,.96));color:#e9f6f4;text-align:left;cursor:pointer;transition:.18s ease;overflow:hidden}
.command-deck button:hover{transform:translateY(-2px);border-color:rgba(96,239,198,.22);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.command-deck button>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(91,238,200,.07);color:#6aefc4;border:1px solid rgba(91,238,200,.12)}
.command-deck b,.command-deck small{display:block}.command-deck b{font-size:10.5px}.command-deck small{margin-top:3px;font-size:8.4px;color:#718892;line-height:1.35}.command-deck i{font-style:normal;color:#66818a}.command-deck .command-pro{border-color:rgba(92,238,199,.18);background:radial-gradient(circle at 90% 20%,rgba(91,238,200,.11),transparent 35%),linear-gradient(145deg,rgba(8,32,38,.95),rgba(5,18,24,.98))}
.composer{box-shadow:0 24px 62px rgba(0,0,0,.32),0 0 0 1px rgba(83,235,198,.04)!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}.composer:focus-within{transform:translateY(-1px);border-color:rgba(91,239,198,.35)!important;box-shadow:0 24px 62px rgba(0,0,0,.32),0 0 28px rgba(63,230,192,.08)!important}
/* Billing becomes a premium product surface */
.billing-modal{max-width:1180px!important;background:linear-gradient(180deg,rgba(4,18,25,.995),rgba(3,12,18,.998))!important;border-color:rgba(91,239,203,.18)!important;box-shadow:0 35px 110px rgba(0,0,0,.52),0 0 55px rgba(74,231,202,.055)!important}
.billing-hero{position:relative;overflow:hidden;padding:22px!important;border-radius:20px!important;background:radial-gradient(circle at 85% 12%,rgba(73,239,199,.16),transparent 27%),linear-gradient(145deg,rgba(9,38,46,.98),rgba(5,19,27,.99))!important;border:1px solid rgba(91,239,203,.18)!important}
.billing-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(132,255,228,.05),transparent);transform:translateX(-100%);animation:billingSweep 5.8s linear infinite}
.billing-mode{background:rgba(8,29,35,.88)!important;border-color:rgba(91,239,203,.25)!important;box-shadow:0 0 26px rgba(73,234,197,.10)!important}
.billing-trust-strip{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.billing-trust-strip span,.billing-spotlight-badges span{display:inline-flex;align-items:center;min-height:31px;padding:0 11px;border:1px solid rgba(113,214,204,.10);border-radius:999px;background:rgba(255,255,255,.025);color:#9fc5c5;font-size:10px}
.billing-spotlight{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:12px;padding:17px 18px;border-radius:16px;border:1px solid rgba(92,239,204,.13);background:radial-gradient(circle at 96% 50%,rgba(79,229,210,.12),transparent 30%),linear-gradient(135deg,rgba(8,30,39,.96),rgba(5,18,25,.99))}
.billing-spotlight small{color:#67efc0;letter-spacing:.15em;font-size:8px}.billing-spotlight h3{margin:5px 0 6px;font-size:20px}.billing-spotlight p{margin:0;color:#8ca4ad}.pricing-grid{gap:11px!important}.price-card{position:relative;overflow:hidden!important;transition:.2s ease!important;background:linear-gradient(165deg,rgba(8,27,35,.96),rgba(5,17,23,.99))!important}.price-card:hover{transform:translateY(-5px);border-color:rgba(91,239,203,.26)!important;box-shadow:0 20px 45px rgba(0,0,0,.28)!important}.price-card.featured{border-color:rgba(91,239,203,.27)!important;box-shadow:0 20px 50px rgba(0,0,0,.29),0 0 32px rgba(73,235,197,.07)!important}.price-card.featured:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,rgba(100,247,216,.10),transparent 25%);animation:priceAura 8s linear infinite;pointer-events:none}.billing-checkout{border-radius:18px!important;background:linear-gradient(160deg,rgba(7,26,34,.98),rgba(4,15,21,.995))!important;border-color:rgba(91,239,203,.14)!important}
@keyframes gridDrift{from{background-position:0 0}to{background-position:64px 32px}}
@keyframes heroScan{0%{top:-8%}100%{top:110%}}
@keyframes haloBreath{0%,100%{opacity:.58;transform:scale(.97)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes globeBreath{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-2deg) scale(1.025)}}
@keyframes globeSweep{from{transform:translateX(-18%) rotate(0)}to{transform:translateX(18%) rotate(360deg)}}
@keyframes orbitA{from{transform:rotate(13deg)}to{transform:rotate(373deg)}}
@keyframes orbitB{from{transform:rotate(73deg)}to{transform:rotate(-287deg)}}
@keyframes orbitC{from{transform:rotate(-46deg)}to{transform:rotate(314deg)}}
@keyframes starPulse{0%,100%{opacity:.55;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}
@keyframes starFloat{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-10px);opacity:1}}
@keyframes floatChip{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes billingSweep{from{transform:translateX(-100%)}to{transform:translateX(120%)}}
@keyframes priceAura{to{transform:rotate(360deg)}}
@media(max-height:920px) and (min-width:1024px){.command-deck{display:none}}
@media(max-width:760px){
  .hero:after,.hero-starfield{display:none!important}.hero{background:linear-gradient(145deg,rgba(6,23,31,.99),rgba(3,13,19,.995))!important}
  .command-deck{grid-template-columns:1fr 1fr;gap:7px}.command-deck button{min-height:62px;grid-template-columns:32px minmax(0,1fr);padding:9px}.command-deck button>span{width:31px;height:31px}.command-deck i{display:none}.command-deck small{font-size:8px}.command-deck b{font-size:10px}
  .billing-spotlight{grid-template-columns:1fr;padding:13px!important}.billing-spotlight h3{font-size:17px}.billing-trust-strip span,.billing-spotlight-badges span{font-size:9px;min-height:28px;padding:0 9px}
}
@media(max-width:380px){.command-deck{grid-template-columns:1fr}.command-deck button:nth-child(n+3){display:none}}
@media(prefers-reduced-motion:reduce){.hero:after,.hero-visual-halo,.cyber-globe,.orbit,.intel-float,.price-card.featured:before,.billing-hero:before{animation:none!important}.hero-visual{transform:none!important}}