/* =====================================================================
   CYCLONE GAMING UI  (v1)
   Loaded LAST on index.html and dashboard.html – it re-skins the site
   without touching the markup.  body.gx-home = landing, body.gx-dash = dashboard.
   Palette: neon cyan + violet + hot pink on deep void, glass panels,
   HUD corner brackets, animated neon borders, scanlines, perspective grid.
   ===================================================================== */
@property --gx-ang{syntax:"<angle>";initial-value:0deg;inherits:false}

:root{
  --gx-cyan:#22e4ff;--gx-violet:#8b5cf6;--gx-pink:#ff3d8b;--gx-lime:#b6ff3b;--gx-amber:#ffc23d;
  --gx-void:#04050c;
  --gx-glass:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 60%,rgba(34,228,255,.03));
  --gx-glass-line:rgba(255,255,255,.14);
  --gx-neon:linear-gradient(90deg,var(--gx-cyan),var(--gx-violet) 55%,var(--gx-pink));
  --gx-blur:blur(16px) saturate(165%);
  --gx-font:"Orbitron","Rajdhani",Vazirmatn,"Segoe UI",sans-serif;
  /* re-point the old palettes at the new neon one */
  --cyan:var(--gx-cyan);--gold:var(--gx-cyan);--gold-deep:#14b8d4;--gold-alt:#0b8fa6;--gold-bright:#9af3ff;
  --cyan-soft:rgba(34,228,255,.14);--gold-soft:rgba(34,228,255,.1);
  --border-soft:rgba(255,255,255,.12);--border-strong:rgba(34,228,255,.45);
  --text-hi:#f4f8ff;--text-mid:#aebfd4;--text-low:#7488a1;
  --red:#ff4d79;--green:#3dffa0;
  /* landing */
  --gold2:#b9f4ff;--goldline:rgba(34,228,255,.3);--line:rgba(255,255,255,.12);
}

::selection{background:var(--gx-pink);color:#fff}
html{scrollbar-color:var(--gx-violet) #080a14;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#080a14}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gx-cyan),var(--gx-violet));border-radius:9px;border:2px solid #080a14}

@keyframes gxSpin{to{--gx-ang:360deg}}
@keyframes gxScan{from{background-position:0 0}to{background-position:0 6px}}
@keyframes gxGrid{from{background-position:0 0,0 0}to{background-position:0 56px,0 0}}
@keyframes gxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gxSweep{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(230%) skewX(-18deg)}}
@keyframes gxPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,228,255,.45)}70%{box-shadow:0 0 0 12px rgba(34,228,255,0)}}
@keyframes gxFlick{0%,92%,100%{opacity:1}94%{opacity:.55}96%{opacity:1}98%{opacity:.7}}

/* ---------- full-page atmosphere (both pages) ---------- */
html{background:var(--gx-void)!important}
/* body must stay transparent: the fixed video sits at a negative z-index and a painted body would cover it */
body.gx-home,body.gx-dash{background:transparent!important;color:var(--text-hi)}
body.gx-home::before,body.gx-dash::before{display:none!important}
/* perspective neon grid floor + glow orbs, sits above the video, below the content */
body.gx-home::after,body.gx-dash::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;
  background:
    radial-gradient(700px 420px at 8% 0%,rgba(139,92,246,.22),transparent 65%),
    radial-gradient(640px 420px at 100% 12%,rgba(34,228,255,.16),transparent 62%),
    radial-gradient(700px 480px at 60% 118%,rgba(255,61,139,.16),transparent 62%);
  mix-blend-mode:screen;
}
.gx-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gx-fx i{position:absolute;inset:0}
.gx-fx .gx-grid{top:auto;height:46vh;bottom:0;opacity:.34;
  background-image:linear-gradient(rgba(34,228,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(34,228,255,.5) 1px,transparent 1px);
  background-size:56px 56px,56px 56px;
  transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 85%);mask-image:linear-gradient(to top,#000 5%,transparent 85%);
  animation:gxGrid 3.2s linear infinite}
.gx-fx .gx-scan{opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);animation:gxScan .5s linear infinite}
.gx-fx .gx-vig{background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(2,3,10,.72) 100%)}

/* ---------- reusable neon pieces ---------- */
.gx-neon-text,.hero h1 .accent,.hero h1 strong,.section h2 span,.section-head h2 span,.dash-copy h2 span,.cta h2 span{
  background:var(--gx-neon);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-shadow:none;filter:drop-shadow(0 0 14px rgba(34,228,255,.28))}

/* =====================================================================
   DASHBOARD  –  glass UI over the Cyclone video
   ===================================================================== */
/* video background: ON (it was hidden before) */
html body.gx-dash #cyclone-global-video{
  display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
  object-fit:cover!important;z-index:-2!important;opacity:1;filter:saturate(1.25) contrast(1.06) brightness(.82);transform:none}
html body.gx-dash #cyclone-global-video-overlay{
  display:block!important;position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 35%,rgba(4,5,12,.05) 0%,rgba(4,5,12,.38) 70%,rgba(4,5,12,.7) 100%),
    linear-gradient(180deg,rgba(4,5,12,.28),rgba(4,5,12,.5))}
html body.gx-dash #particles{display:block!important;position:fixed;inset:0;z-index:0;pointer-events:none}
body.gx-dash #app{position:relative;z-index:2}
body.gx-dash .gx-fx{z-index:0}
body.gx-dash .gx-fx .gx-grid{opacity:.22}

/* every surface = frosted glass, NO solid background */
body.gx-dash #topbar,
body.gx-dash #sidebar,
body.gx-dash .panel,body.gx-dash .stat-card,body.gx-dash .project-card,body.gx-dash .team-card,body.gx-dash .svc-card,
body.gx-dash .ticket-list-card,body.gx-dash .ticket-create-card,body.gx-dash .ticket-inbox,body.gx-dash .ticket-workspace,
body.gx-dash .profile-hero,body.gx-dash .success-box,body.gx-dash .settings-card,body.gx-dash .card,body.gx-dash .hero,
body.gx-dash .dropdown,body.gx-dash .search-box,body.gx-dash .modal-box,body.gx-dash .gal-banner,body.gx-dash .gal-hero{
  background:var(--gx-glass)!important;
  -webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);
  border:1px solid var(--gx-glass-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 40px rgba(255,255,255,.015),0 14px 44px rgba(0,0,0,.35)!important;
  animation:none}
body.gx-dash #topbar{border-radius:0 0 18px 18px;border-top:0!important}
body.gx-dash #sidebar{border-radius:20px}
body.gx-dash .dropdown,body.gx-dash .search-box,body.gx-dash .modal-box{background:linear-gradient(135deg,rgba(18,22,40,.72),rgba(8,10,22,.62))!important;-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
body.gx-dash .modal-overlay,body.gx-dash .search-overlay{background:rgba(2,3,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* HUD corner brackets on glass cards */
body.gx-dash .panel,body.gx-dash .stat-card,body.gx-dash .svc-card,body.gx-dash .project-card,body.gx-dash .team-card,body.gx-dash .hero,body.gx-dash .gal-banner{position:relative;border-radius:16px}
body.gx-dash .panel::before,body.gx-dash .stat-card::before,body.gx-dash .svc-card::before,body.gx-dash .project-card::before,body.gx-dash .team-card::before,body.gx-dash .hero::before,body.gx-dash .gal-banner::before{
  content:"";display:block!important;position:absolute;inset:-1px;width:auto;height:auto;border-radius:inherit;pointer-events:none;z-index:2;opacity:.95;
  background:
    linear-gradient(var(--gx-cyan),var(--gx-cyan)) top left/16px 2px no-repeat,
    linear-gradient(var(--gx-cyan),var(--gx-cyan)) top left/2px 16px no-repeat,
    linear-gradient(var(--gx-pink),var(--gx-pink)) bottom right/16px 2px no-repeat,
    linear-gradient(var(--gx-pink),var(--gx-pink)) bottom right/2px 16px no-repeat;
  filter:drop-shadow(0 0 5px var(--gx-cyan));transition:.25s}
body.gx-dash .panel::after,body.gx-dash .stat-card::after,body.gx-dash .svc-card::after,body.gx-dash .project-card::after,body.gx-dash .team-card::after{display:none!important}
body.gx-dash .panel:hover,body.gx-dash .stat-card:hover,body.gx-dash .svc-card:hover,body.gx-dash .project-card:hover,body.gx-dash .team-card:hover{
  transform:translateY(-3px);border-color:rgba(34,228,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(34,228,255,.16),0 0 34px rgba(34,228,255,.2),0 22px 60px rgba(0,0,0,.45)!important}
body.gx-dash .panel:hover::before,body.gx-dash .stat-card:hover::before,body.gx-dash .svc-card:hover::before{filter:drop-shadow(0 0 9px var(--gx-cyan)) brightness(1.3)}

/* hero banner: transparent glass + animated neon border */
body.gx-dash .hero{overflow:hidden;min-height:260px;border-color:transparent!important}
body.gx-dash .hero::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gx-ang),var(--gx-cyan),var(--gx-violet),var(--gx-pink),transparent 55%,var(--gx-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:gxSpin 6s linear infinite}
body.gx-dash .hero-grid,body.gx-dash .hero-city{display:none}
body.gx-dash .hero h1{font-family:var(--gx-font);font-weight:900;letter-spacing:.02em;text-transform:uppercase;filter:drop-shadow(0 0 18px rgba(34,228,255,.25))}
body.gx-dash .hero h1 .accent{background:var(--gx-neon);-webkit-background-clip:text;background-clip:text;color:transparent}
body.gx-dash .hero-badge,body.gx-dash .gal-badge{background:rgba(34,228,255,.09);border:1px solid rgba(34,228,255,.4);color:var(--gx-cyan);font-family:var(--gx-font);letter-spacing:.12em;box-shadow:0 0 18px rgba(34,228,255,.16);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:0;padding-inline:18px}

/* top bar / sidebar bits */
body.gx-dash .tb-title{font-family:var(--gx-font);font-weight:800;letter-spacing:.18em;background:var(--gx-neon);-webkit-background-clip:text;background-clip:text;color:transparent;animation:gxFlick 6s infinite}
body.gx-dash .tb-sub i{background:var(--gx-lime);box-shadow:0 0 10px var(--gx-lime);animation:gxPulse 1.8s infinite}
body.gx-dash .searchbar,body.gx-dash .icon-btn,body.gx-dash .profile-chip,body.gx-dash .tb-gal{background:rgba(255,255,255,.05)!important;border:1px solid var(--gx-glass-line)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.gx-dash .searchbar:hover,body.gx-dash .icon-btn:hover,body.gx-dash .profile-chip:hover{border-color:var(--gx-cyan)!important;box-shadow:0 0 18px rgba(34,228,255,.25)}
body.gx-dash .side-item{position:relative;background:transparent!important;border:1px solid transparent!important;border-radius:12px;transition:.2s}
body.gx-dash .side-item:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;transform:translateX(-3px)}
body.gx-dash .side-item.active{color:#fff;background:linear-gradient(90deg,rgba(34,228,255,.22),rgba(139,92,246,.12))!important;border-color:rgba(34,228,255,.6)!important;box-shadow:0 0 22px rgba(34,228,255,.22),inset 0 0 18px rgba(34,228,255,.1)!important}
body.gx-dash .side-item.active::before{background:var(--gx-cyan);box-shadow:0 0 14px var(--gx-cyan);width:3px}
body.gx-dash .side-group-head{font-family:var(--gx-font);letter-spacing:.2em;color:var(--gx-violet)}
body.gx-dash .topnav-link.active{background:var(--gx-neon)!important;color:#05060e!important;box-shadow:0 0 22px rgba(139,92,246,.45)!important}
body.gx-dash .badge-dot{background:var(--gx-pink)!important;box-shadow:0 0 12px var(--gx-pink)}

/* headings + numbers get the arcade feel */
body.gx-dash h1,body.gx-dash h2,body.gx-dash h3,body.gx-dash .page-title{font-family:var(--gx-font);letter-spacing:.03em}
body.gx-dash .stat-card b,body.gx-dash .stat-value,body.gx-dash [class*="stat-"] strong{font-family:var(--gx-font)}
body.gx-dash .stat-card .stat-icon,body.gx-dash .svc-icon{background:rgba(34,228,255,.1)!important;box-shadow:0 0 18px rgba(34,228,255,.25),inset 0 0 12px rgba(34,228,255,.12);color:var(--gx-cyan)!important}

/* ---------- buttons (both pages): angular, neon, light sweep ---------- */
body.gx-dash .btn,body.gx-home .btn{position:relative;overflow:hidden;border-radius:0!important;font-family:var(--gx-font);font-weight:700;letter-spacing:.06em;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s,filter .2s,box-shadow .2s}
body.gx-dash .btn::after,body.gx-home .btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);mix-blend-mode:soft-light;transform:translateX(-130%) skewX(-18deg);animation:gxSweep 3.8s ease-in-out infinite}
body.gx-dash .btn-primary,body.gx-home .btn.gold{background:linear-gradient(120deg,var(--gx-cyan),var(--gx-violet) 60%,var(--gx-pink))!important;color:#05060e!important;border:0!important;
  box-shadow:0 0 28px rgba(34,228,255,.35)!important;filter:drop-shadow(0 0 10px rgba(34,228,255,.35))}
body.gx-dash .btn-primary:hover,body.gx-home .btn.gold:hover{transform:translateY(-3px) scale(1.03);filter:drop-shadow(0 0 18px rgba(255,61,139,.55)) brightness(1.08)}
body.gx-dash .btn-ghost,body.gx-dash .btn:not(.btn-primary),body.gx-home .btn.dark{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.gx-dash .btn-ghost:hover,body.gx-dash .btn:not(.btn-primary):hover,body.gx-home .btn.dark:hover{background:rgba(34,228,255,.12)!important;border-color:var(--gx-cyan)!important;box-shadow:0 0 22px rgba(34,228,255,.3);transform:translateY(-2px)}
body.gx-dash .btn:disabled{filter:grayscale(.7);opacity:.6}

/* ---------- gallery (dashboard) ---------- */
body.gx-dash .gal-tab,body.gx-dash .gal-chip,body.gx-dash .gal-sort{background:rgba(255,255,255,.05);border:1px solid var(--gx-glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-mid);font-family:var(--gx-font);font-size:12px;letter-spacing:.04em}
body.gx-dash .gal-tab:hover,body.gx-dash .gal-chip:hover{border-color:var(--gx-cyan);color:#fff;box-shadow:0 0 16px rgba(34,228,255,.22)}
body.gx-dash .gal-tab.active,body.gx-dash .gal-chip.active{background:linear-gradient(120deg,rgba(34,228,255,.28),rgba(139,92,246,.28));border-color:var(--gx-cyan);color:#fff;box-shadow:0 0 22px rgba(34,228,255,.3),inset 0 0 14px rgba(34,228,255,.15)}
body.gx-dash .gal-card{background:rgba(255,255,255,.04)!important;border:1px solid var(--gx-glass-line);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
body.gx-dash .gal-card:hover{transform:translateY(-6px) scale(1.015);border-color:var(--gx-cyan);box-shadow:0 0 0 1px rgba(34,228,255,.35),0 0 38px rgba(34,228,255,.3),0 24px 50px rgba(0,0,0,.5)}
body.gx-dash .gal-watermark{color:rgba(34,228,255,.06);-webkit-text-stroke:1px rgba(34,228,255,.12)}
body.gx-dash .gal-drop{border:2px dashed rgba(34,228,255,.5);background:rgba(34,228,255,.05);transition:.2s}
body.gx-dash .gal-drop:hover{background:rgba(34,228,255,.1);box-shadow:0 0 28px rgba(34,228,255,.25) inset}
body.gx-dash .gal-prog i{background:var(--gx-neon);box-shadow:0 0 14px var(--gx-cyan)}
body.gx-dash .gal-star-badge{filter:drop-shadow(0 0 8px var(--gx-amber))}
body.gx-dash .gal-up input[type=text]{background:rgba(255,255,255,.06);border-color:var(--gx-glass-line)}
body.gx-dash .gal-up input[type=text]:focus{outline:0;border-color:var(--gx-cyan);box-shadow:0 0 18px rgba(34,228,255,.3)}

/* forms */
body.gx-dash input[type=text],body.gx-dash input[type=email],body.gx-dash input[type=password],body.gx-dash textarea,body.gx-dash select{background:rgba(255,255,255,.05)!important;border:1px solid var(--gx-glass-line)!important;color:var(--text-hi);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.gx-dash input:focus,body.gx-dash textarea:focus,body.gx-dash select:focus{border-color:var(--gx-cyan)!important;box-shadow:0 0 18px rgba(34,228,255,.28);outline:0}
body.gx-dash .toast{background:rgba(10,14,28,.78)!important;border:1px solid var(--gx-cyan)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 26px rgba(34,228,255,.3)}

/* =====================================================================
   LANDING  –  neon HUD over the full-page Cyclone video
   ===================================================================== */
body.gx-home{font-family:Vazirmatn,Inter,system-ui,sans-serif}
body.gx-home .logo-motion.landing-logo-motion{z-index:-3;background:var(--gx-void)}
body.gx-home .logo-motion-video{filter:saturate(1.3) contrast(1.08) brightness(.9)}
body.gx-home .logo-motion.landing-logo-motion::after{background:
  radial-gradient(ellipse at 50% 30%,rgba(4,5,12,.05),rgba(4,5,12,.55) 80%),linear-gradient(180deg,rgba(4,5,12,.28),rgba(4,5,12,.62))}
body.gx-home .hero,body.gx-home main,body.gx-home .footer,body.gx-home .ticker,body.gx-home .section{position:relative;z-index:2}

/* header */
body.gx-home .topbar{background:linear-gradient(180deg,rgba(6,8,18,.72),rgba(6,8,18,.4))!important;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid transparent!important;border-image:linear-gradient(90deg,transparent,var(--gx-cyan),var(--gx-violet),var(--gx-pink),transparent) 1;z-index:50}
body.gx-home .brand b{font-family:var(--gx-font);letter-spacing:.2em;color:#fff;text-shadow:0 0 14px rgba(34,228,255,.55)}
body.gx-home .brand em{color:var(--gx-pink);font-style:normal;text-shadow:0 0 14px rgba(255,61,139,.7)}
body.gx-home .navlinks a{position:relative;font-family:var(--gx-font);font-size:12px;letter-spacing:.06em;color:var(--text-mid);transition:.2s}
body.gx-home .navlinks a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:var(--gx-neon);box-shadow:0 0 10px var(--gx-cyan);transition:.25s;transform:translateX(-50%)}
body.gx-home .navlinks a:hover{color:#fff;text-shadow:0 0 12px rgba(34,228,255,.8)}
body.gx-home .navlinks a:hover::after{width:100%}
body.gx-home .nav-gallery{color:var(--gx-pink)!important;text-shadow:0 0 14px rgba(255,61,139,.6)}
body.gx-home .lang{background:rgba(255,255,255,.06);border:1px solid var(--gx-glass-line);color:#fff;font-family:var(--gx-font)}

/* hero */
body.gx-home .hero{background:transparent!important;min-height:calc(100vh - 70px)}
body.gx-home .hero .eyebrow{font-family:var(--gx-font);letter-spacing:.2em;color:var(--gx-cyan);text-shadow:0 0 12px rgba(34,228,255,.7)}
body.gx-home .hero .eyebrow .dot,body.gx-home .eyebrow .dot{background:var(--gx-lime)!important;box-shadow:0 0 14px var(--gx-lime)!important;animation:gxPulse 1.8s infinite}
body.gx-home h1{font-family:var(--gx-font),Vazirmatn;font-weight:900;color:#fff;text-shadow:0 0 30px rgba(139,92,246,.45),0 2px 0 rgba(0,0,0,.5);letter-spacing:0}
body.gx-home h1 strong{background:var(--gx-neon);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 22px rgba(34,228,255,.4))}
body.gx-home .hero p{color:#dbe6f5}
body.gx-home .hero p b{color:var(--gx-cyan);text-shadow:0 0 12px rgba(34,228,255,.5)}
body.gx-home .proof{background:var(--gx-glass);border:1px solid var(--gx-glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:10px 14px;transition:.25s}
body.gx-home .proof:hover{border-color:var(--gx-cyan);transform:translateY(-3px);box-shadow:0 0 24px rgba(34,228,255,.25)}
body.gx-home .proof b{font-family:var(--gx-font);background:var(--gx-neon);-webkit-background-clip:text;background-clip:text;color:transparent}

/* logo orb + floating cards */
body.gx-home .orb{border:0!important;position:relative;filter:drop-shadow(0 0 40px rgba(139,92,246,.55))}
body.gx-home .orb::before{border:2px solid transparent!important;background:conic-gradient(from var(--gx-ang),var(--gx-cyan),var(--gx-violet),var(--gx-pink),var(--gx-cyan)) border-box!important;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);animation:gxSpin 7s linear infinite!important;opacity:.95}
body.gx-home .orb img{filter:drop-shadow(0 0 28px rgba(34,228,255,.55))}
body.gx-home .float-card{background:var(--gx-glass)!important;border:1px solid var(--gx-glass-line)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;
  box-shadow:0 0 24px rgba(34,228,255,.18),0 12px 34px rgba(0,0,0,.45);animation:gxFloat 5s ease-in-out infinite}
body.gx-home .float-card.two{animation-delay:-1.6s}body.gx-home .float-card.three{animation-delay:-3.2s}
body.gx-home .float-card small{color:var(--gx-cyan);font-family:var(--gx-font);letter-spacing:.18em}

/* ticker */
body.gx-home .ticker{background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(34,228,255,.12),rgba(255,61,139,.18))!important;border-block:1px solid rgba(34,228,255,.3)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.gx-home .ticker span{font-family:var(--gx-font);letter-spacing:.2em;color:#fff;text-shadow:0 0 12px rgba(34,228,255,.7)}
body.gx-home .ticker i{color:var(--gx-pink)!important;text-shadow:0 0 12px var(--gx-pink)}

/* section headings */
body.gx-home .label{display:inline-block;font-family:var(--gx-font);font-size:11px;letter-spacing:.24em;color:var(--gx-cyan)!important;
  padding:5px 14px;border:1px solid rgba(34,228,255,.4);background:rgba(34,228,255,.07);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);text-shadow:0 0 10px rgba(34,228,255,.6)}
body.gx-home .section h2{font-family:var(--gx-font),Vazirmatn;font-weight:900;text-shadow:0 0 26px rgba(139,92,246,.4)}
body.gx-home .section-head>p{color:var(--text-mid)}

/* cards / panels: glass + neon corners + tilt (JS sets --rx/--ry/--mx/--my) */
body.gx-home .card,body.gx-home .skill,body.gx-home .glass-panel,body.gx-home .project,body.gx-home .dashboard,body.gx-home .cta,body.gx-home .faq-list details,body.gx-home .link-card,body.gx-home .shop-panel,body.gx-home .lvl,body.gx-home .disc-main,body.gx-home .disc-side{
  background:var(--gx-glass)!important;border:1px solid var(--gx-glass-line)!important;-webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);
  border-radius:16px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 46px rgba(0,0,0,.4)!important;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,border-color .25s,box-shadow .25s}
body.gx-home .card::before,body.gx-home .skill::before,body.gx-home .glass-panel::before,body.gx-home .project::before,body.gx-home .shop-panel::before,body.gx-home .dashboard::before,body.gx-home .cta::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--gx-cyan),var(--gx-cyan)) top left/18px 2px no-repeat,
    linear-gradient(var(--gx-cyan),var(--gx-cyan)) top left/2px 18px no-repeat,
    linear-gradient(var(--gx-pink),var(--gx-pink)) bottom right/18px 2px no-repeat,
    linear-gradient(var(--gx-pink),var(--gx-pink)) bottom right/2px 18px no-repeat;
  filter:drop-shadow(0 0 5px var(--gx-cyan))}
/* cursor-follow glare */
body.gx-home .card::after,body.gx-home .skill::after,body.gx-home .glass-panel::after,body.gx-home .project::after,body.gx-home .shop-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .25s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(34,228,255,.2),transparent 65%)}
body.gx-home .card:hover::after,body.gx-home .skill:hover::after,body.gx-home .glass-panel:hover::after,body.gx-home .project:hover::after,body.gx-home .shop-panel:hover::after{opacity:1}
body.gx-home .card:hover,body.gx-home .skill:hover,body.gx-home .project:hover,body.gx-home .shop-panel:hover,body.gx-home .glass-panel:hover,body.gx-home .link-card:hover{
  border-color:rgba(34,228,255,.6)!important;box-shadow:0 0 0 1px rgba(34,228,255,.18),0 0 40px rgba(34,228,255,.22),0 24px 60px rgba(0,0,0,.5)!important}
body.gx-home .card .num,body.gx-home .shop-icon,body.gx-home .icon{font-family:var(--gx-font);color:var(--gx-cyan)!important;background:rgba(34,228,255,.09)!important;border-color:rgba(34,228,255,.4)!important;box-shadow:0 0 18px rgba(34,228,255,.25)}
body.gx-home .tick li::before{color:var(--gx-lime)!important;text-shadow:0 0 10px var(--gx-lime)}
body.gx-home .lvl i{background:var(--gx-neon)!important;box-shadow:0 0 14px var(--gx-cyan)}
body.gx-home .cta{border-color:transparent!important}
body.gx-home .cta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--gx-ang),var(--gx-cyan),var(--gx-violet),var(--gx-pink),transparent 55%,var(--gx-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:gxSpin 6s linear infinite}
body.gx-home .footer{background:linear-gradient(180deg,rgba(6,8,18,.5),rgba(6,8,18,.85))!important;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--gx-violet),var(--gx-cyan),transparent) 1}
body.gx-home .footer-brand{font-family:var(--gx-font);letter-spacing:.2em}
body.gx-home .footer-brand span{color:var(--gx-pink)}

/* scroll-in reveal (JS adds .gx-in) */
body.gx-home .gx-rev{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .7s}
body.gx-home .gx-rev.gx-in{opacity:1;transform:none;filter:none}
/* scroll progress bar */
.gx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:var(--gx-neon);box-shadow:0 0 14px var(--gx-cyan),0 0 24px var(--gx-pink);pointer-events:none}

/* ---------- small screens / accessibility ---------- */
@media(max-width:820px){
  :root{--gx-blur:blur(10px) saturate(150%)}
  .gx-fx .gx-grid{height:30vh;opacity:.22}
  body.gx-home .card,body.gx-home .skill,body.gx-home .project{transform:none!important}
  body.gx-dash #sidebar{border-radius:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  body.gx-home .gx-rev{opacity:1;transform:none;filter:none}
  .gx-fx .gx-scan{display:none}
}

/* readable labels on the neon gradient buttons (landing .gal-cta / header CTA etc.) */
body.gx-home .btn.gold,body.gx-home .btn.gold *,body.gx-home .gal-cta,body.gx-dash .btn-primary,body.gx-dash .btn-primary *{color:#05060e!important;opacity:1}
body.gx-home .btn.gold{font-weight:800}

body.gx-home .skill strong,body.gx-home .project-copy h3,body.gx-home .card h3{font-family:var(--gx-font),Vazirmatn}
@media(max-width:520px){body.gx-dash .tb-title{letter-spacing:.08em;font-size:15px}}