/* ============================================================
   Electro Team — Dark Glitch Theme v2
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family:'Dana'; src:url('fonts/Dana-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Dana'; src:url('fonts/Dana-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Dana'; src:url('fonts/Dana-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Morabba'; src:url('fonts/Morabba-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Morabba'; src:url('fonts/Morabba-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Morabba'; src:url('fonts/Morabba-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:       #0a0a10;
  --surface:  #101018;
  --purple:   #3e01fc;
  --lime:     #c1fd05;
  --white:    #ffffff;
  --text:     #d8d8e2;
  --muted:    #6a6a7e;
  --glass:    rgba(255,255,255,0.035);
  --glass-b:  rgba(255,255,255,0.06);
  --glass-h:  rgba(255,255,255,0.07);
  --radius:   14px;
  --font-en:  'Dana', 'Space Grotesk', sans-serif;
  --font-fa:  'Dana', Tahoma, sans-serif;
  --font-fa-t:'Morabba', 'Dana', sans-serif;
  --ease:     180ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scrollbar-width:thin;scrollbar-color:rgba(62,1,252,0.4) transparent}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(62,1,252,0.4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(62,1,252,0.6)}
body{font-family:var(--font-en);background:var(--bg);color:var(--text);font-size:21px;line-height:1.6;overflow-x:hidden;min-height:100vh}
body.fa{font-family:var(--font-fa);direction:rtl;text-align:right}
body.fa h1,body.fa h2,body.fa h3,body.fa .section-title,body.fa .hero-title,body.fa .nav-brand,body.fa .auth-title{font-family:var(--font-fa-t)}
img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}ul{list-style:none}button,input{font:inherit;border:none;outline:none;background:none}

/* ── Utility ───────────────────────────────────────────────── */
.container{max-width:1430px;margin:0 auto;padding:0 32px}
.section{padding:130px 0}
.section-title{font-size:47px;font-weight:700;color:var(--white);margin-bottom:16px}
.section-sub{font-size:21px;color:var(--muted);max-width:676px;margin-bottom:62px}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ── Glass ─────────────────────────────────────────────────── */
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--radius);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background var(--ease),border-color var(--ease),transform var(--ease)}
.glass:hover{background:var(--glass-h);border-color:rgba(255,255,255,0.1)}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:18px 42px;border-radius:13px;font-weight:600;font-size:20px;cursor:pointer;transition:all var(--ease)}
.btn-lime{background:var(--lime);color:#0a0a10}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(193,253,5,0.35);background:#a8d904;color:#0a0a10}
.btn-outline{border:1px solid var(--glass-b);color:var(--text);background:var(--glass)}
.btn-outline:hover{border-color:rgba(193,253,5,0.3);color:var(--lime);background:rgba(193,253,5,0.04)}
.btn-ghost{color:var(--muted);padding:10px 18px;cursor:pointer;transition:color var(--ease)}
.btn-ghost:hover{color:var(--white)}

/* ════════════════════════════════════════════════════════════
   MARATHON GRID LOADER
   ════════════════════════════════════════════════════════════ */
.marathon-loader{position:fixed;inset:0;z-index:10000;background:#050508;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity 0.4s ease}
.marathon-loader.done{opacity:0;pointer-events:none}
.marathon-loader.flash .loader-grid{filter:brightness(2) blur(2px)}

.loader-grid{display:grid;grid-template-columns:repeat(21,1fr);gap:4px;width:fit-content}
.loader-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.04);transition:background 0.08s,box-shadow 0.08s,transform 0.08s}
.loader-dot.on.pattern{background:rgba(62,1,252,0.5);box-shadow:0 0 6px rgba(62,1,252,0.3)}
.loader-dot.on.bolt{background:var(--lime);box-shadow:0 0 10px rgba(193,253,5,0.5),0 0 24px rgba(193,253,5,0.2);transform:scale(1.15)}

.loader-label{margin-top:28px;font-family:'Space Grotesk',monospace;font-size:11px;letter-spacing:4px;color:var(--muted);text-transform:uppercase}

/* Scanlines inside loader */
.marathon-loader::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px);pointer-events:none}

/* ── Mini loader (inline bolt grid) ─────────────────────── */
.mini-loader{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}
.mini-loader-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;width:fit-content}
.mini-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.035);transition:background 0.1s ease,box-shadow 0.1s ease,transform 0.1s ease}
.mini-dot.on.pattern{background:rgba(62,1,252,0.55);box-shadow:0 0 6px rgba(62,1,252,0.35)}
.mini-dot.on.bolt{background:var(--lime);box-shadow:0 0 8px rgba(193,253,5,0.5),0 0 20px rgba(193,253,5,0.2);transform:scale(1.15)}
.mini-dot.on.flash{background:var(--white);box-shadow:0 0 12px rgba(255,255,255,0.6);transform:scale(1.3)}
.mini-loader-text{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;animation:miniTextPulse 1.5s ease-in-out infinite}
@keyframes miniTextPulse{0%,100%{opacity:0.5}50%{opacity:1}}

/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:900;padding:0 24px;border-bottom:1px solid transparent;transition:background var(--ease),border-color var(--ease)}
.navbar.scrolled{background:rgba(10,10,16,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--glass-b)}
.nav-inner{max-width:1430px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:88px}
.nav-brand{display:flex;align-items:center;gap:13px;font-size:26px;font-weight:700;color:var(--white);direction:ltr}
.nav-brand svg{width:31px;height:31px}
.brand-logo{width:31px;height:31px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a,.nav-links button{padding:10px 18px;border-radius:10px;font-size:17px;font-weight:500;color:var(--muted);transition:color var(--ease);cursor:pointer}
.nav-links a:hover,.nav-links button:hover{color:var(--white)}
.nav-links .btn-lime,.nav-links .btn-lime:hover{color:#0a0a10 !important}

/* Language toggle — no border, just a flag */
.lang-toggle{padding:4px;border:none;border-radius:6px;cursor:pointer;background:transparent;display:flex;align-items:center;font-size:20px;line-height:1;transition:opacity var(--ease)}
.lang-toggle:hover{opacity:0.7}
.flag-icon{width:29px;height:18px;object-fit:cover;border-radius:2px;display:block}

.nav-auth{display:flex;align-items:center;gap:6px}

/* Logged-in user badge */
.user-badge{display:flex;align-items:center;gap:0;border-radius:10px;border:1px solid var(--glass-b);background:var(--glass);overflow:hidden;transition:border-color var(--ease)}
.user-badge:hover{border-color:rgba(255,255,255,0.12)}
.user-badge-info{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px}
.user-avatar{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--purple),#6e3aff);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--white);text-transform:uppercase;flex-shrink:0}
.user-name{font-size:13px;font-weight:500;color:var(--lime);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-logout{display:flex;align-items:center;justify-content:center;width:38px;padding:8px 0;color:var(--muted);cursor:pointer;transition:color 0.15s ease;background:transparent;border:none;flex-shrink:0}
.user-logout:hover{color:#ff6b6b}
.user-logout svg{width:18px;height:18px}
body.fa .user-badge-info{padding:5px 5px 5px 14px}

/* Hamburger */
.menu-toggle{display:none;width:36px;height:36px;cursor:pointer;padding:6px;border-radius:8px;border:1px solid var(--glass-b);background:var(--glass);align-items:center;justify-content:center;position:relative;transition:border-color var(--ease)}
.menu-toggle:hover{border-color:rgba(255,255,255,0.14)}
.menu-toggle-bar{position:absolute;left:8px;right:8px;height:2px;background:var(--lime);border-radius:1px;transition:transform 0.25s ease,opacity 0.25s ease}
.menu-toggle-bar:nth-child(1){top:10px}
.menu-toggle-bar:nth-child(2){top:17px}
.menu-toggle-bar:nth-child(3){top:24px}
.menu-toggle.open .menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open .menu-toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle.open .menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-toggle-bar{animation:barGlitch 5s steps(1,end) infinite}
.menu-toggle-bar:nth-child(2){animation-delay:1.5s}
.menu-toggle-bar:nth-child(3){animation-delay:3s}
@keyframes barGlitch{0%,100%{transform:none;opacity:1}42%{transform:none}43%{transform:translateX(3px);opacity:0.5}44%{transform:translateX(-2px);opacity:0.8}45%{transform:none;opacity:1}78%{transform:none}79%{opacity:0.4}80%{opacity:1}}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:68px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:'';position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(62,1,252,0.18) 0%,transparent 65%);animation:glow 8s ease-in-out infinite}
.hero-bg::after{content:'';position:absolute;bottom:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(62,1,252,0.08) 0%,transparent 70%);animation:glow 12s ease-in-out 3s infinite}
@keyframes glow{0%,100%{opacity:0.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:73px;align-items:center}
.hero-text{max-width:480px}
.hero-logo{display:flex;align-items:center;gap:18px;margin-bottom:31px;direction:ltr}
.hero-logo svg{width:62px;height:62px;filter:drop-shadow(0 0 20px rgba(193,253,5,0.35))}
.hero-logo-img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(193,253,5,0.35))}
.hero-title{font-size:68px;font-weight:700;color:var(--white);letter-spacing:-1px}
.hero-tagline{font-size:23px;color:var(--muted);margin-bottom:47px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Mockup */
.hero-mockup{padding:24px;min-height:300px;position:relative;overflow:hidden;width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.hero-mockup::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(193,253,5,0.15),transparent);animation:mockupScan 3s linear infinite}
@keyframes mockupScan{0%{top:0}100%{top:100%}}
.mockup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--glass-b)}
.mockup-title{font-size:17px;font-weight:600;color:var(--white)}
.mockup-status{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--lime)}
.mockup-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(193,253,5,0.5);animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(193,253,5,0.5)}50%{opacity:0.5;box-shadow:0 0 4px rgba(193,253,5,0.2)}}
.mockup-player{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;margin-bottom:6px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);transition:background var(--ease),border-color var(--ease);min-width:0;text-align:left;direction:ltr}
.mockup-player:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06)}
.mockup-player-info{display:flex;align-items:center;gap:10px;text-align:left}
body.fa .mockup-player{direction:rtl;text-align:right}
body.fa .mockup-player-info{text-align:right}
.mockup-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.mockup-name{font-size:17px;color:var(--white);font-weight:500}
.mockup-ip{font-size:14px;color:var(--muted);font-family:'Space Grotesk',monospace}
.mockup-ping{font-size:16px;font-weight:600;font-family:'Space Grotesk',monospace}
.ping-good{color:var(--lime)}.ping-mid{color:#f5c842}

/* ════════════════════════════════════════════════════════════
   SERVICES
   ════════════════════════════════════════════════════════════ */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.service-card{padding:47px 36px;text-align:center;position:relative;overflow:hidden;height:100%}
.service-card:not(.blurred):hover{transform:translateY(-4px);border-color:rgba(62,1,252,0.25)}
.service-card.blurred{filter:blur(4px) saturate(0.6);pointer-events:none;user-select:none}
.service-card.blurred::after{content:'';position:absolute;inset:0;background:rgba(10,10,16,0.4);border-radius:var(--radius)}
.service-icon{width:73px;height:73px;margin:0 auto 23px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(62,1,252,0.1);border:1px solid rgba(62,1,252,0.18);transition:box-shadow 0.3s ease}
.service-card:hover .service-icon{box-shadow:0 0 26px rgba(62,1,252,0.2)}
.service-icon svg{width:34px;height:34px;stroke:#8b5cf6}
.service-name{font-size:26px;font-weight:700;color:var(--white);margin-bottom:10px}
.service-desc{font-size:18px;color:var(--muted);line-height:1.6}
.service-card-wrap{position:relative;border-radius:var(--radius);overflow:visible;height:100%}
.coming-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;font-size:13px;font-weight:700;color:var(--lime);background:rgba(10,10,16,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 24px;border-radius:10px;border:1px solid rgba(193,253,5,0.25);letter-spacing:2.5px;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 24px rgba(193,253,5,0.15),0 0 48px rgba(193,253,5,0.05);pointer-events:none}

/* ════════════════════════════════════════════════════════════
   ELECTRO SHOP
   ════════════════════════════════════════════════════════════ */
.shop-section{background:var(--bg)}
.shop-games{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.game-icon{width:94px;height:94px;display:flex;align-items:center;justify-content:center;border-radius:21px;color:var(--muted);transition:all 0.25s ease;cursor:default}
.game-icon svg{width:42px;height:42px}
.game-icon:hover{color:var(--lime);border-color:rgba(193,253,5,0.2);background:rgba(193,253,5,0.04);box-shadow:0 0 20px rgba(193,253,5,0.1);transform:translateY(-4px)}

/* ════════════════════════════════════════════════════════════
   ELECTRO LAN
   ════════════════════════════════════════════════════════════ */
.lan-section{background:var(--surface)}
.lan-content{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lan-download{margin-top:32px}
.lan-features{display:flex;flex-direction:column;gap:20px}
.lan-feature{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:12px;transition:background 0.2s ease}
.lan-feature:hover{background:rgba(255,255,255,0.02)}
.lan-feature-icon{width:52px;height:52px;min-width:52px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:rgba(62,1,252,0.1);border:1px solid rgba(62,1,252,0.15);transition:box-shadow 0.3s ease}
.lan-feature:hover .lan-feature-icon{box-shadow:0 0 21px rgba(62,1,252,0.15)}
.lan-feature-icon svg{width:26px;height:26px;stroke:#8b5cf6}
.lan-feature h4{font-size:20px;font-weight:600;color:var(--white);margin-bottom:5px}
.lan-feature p{font-size:17px;color:var(--muted);line-height:1.5}

/* ════════════════════════════════════════════════════════════
   TROUBLESHOOTING
   ════════════════════════════════════════════════════════════ */
.troubleshoot-card{padding:0;overflow:hidden}
.troubleshoot-header{display:flex;align-items:center;justify-content:space-between;padding:23px 31px;border-bottom:1px solid var(--glass-b)}
.troubleshoot-status{font-size:17px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:10px}
.troubleshoot-status::before{content:'';width:9px;height:9px;border-radius:50%;background:#f5c842;box-shadow:0 0 8px rgba(245,200,66,0.4)}
.troubleshoot-count{font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,0.05);padding:4px 13px;border-radius:6px;font-family:'Space Grotesk',monospace}

.troubleshoot-item{border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:background var(--ease)}
.troubleshoot-item:last-child{border-bottom:none}
.troubleshoot-item:hover{background:rgba(255,255,255,0.015)}

.troubleshoot-row{display:flex;align-items:center;gap:16px;padding:18px 31px}
.troubleshoot-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.troubleshoot-dot.err{background:#ff6b6b;box-shadow:0 0 6px rgba(255,107,107,0.3)}
.troubleshoot-dot.warn{background:#f5c842;box-shadow:0 0 6px rgba(245,200,66,0.3)}
.troubleshoot-title{flex:1;font-size:19px;font-weight:500;color:var(--text)}
.troubleshoot-chevron{width:21px;height:21px;flex-shrink:0;position:relative;transition:transform 0.2s ease}
.troubleshoot-chevron::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translate(-50%,-65%) rotate(45deg);transition:transform 0.2s ease}
.troubleshoot-item.open .troubleshoot-chevron::before{transform:translate(-50%,-35%) rotate(-135deg)}

.troubleshoot-fix{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}
.troubleshoot-item.open .troubleshoot-fix{max-height:400px;padding:0 31px 21px 57px}
body.fa .troubleshoot-item.open .troubleshoot-fix{padding:0 57px 21px 31px}
.troubleshoot-fix p{font-size:18px;color:var(--lime);line-height:1.6;font-family:'Space Grotesk',monospace;opacity:0.85}
.troubleshoot-copypath{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-family:'Space Grotesk',monospace;color:var(--lime);background:rgba(193,253,5,0.06);border:1px solid rgba(193,253,5,0.12);padding:7px 16px;border-radius:8px;cursor:pointer;direction:ltr;unicode-bidi:isolate;margin-top:10px;transition:background var(--ease),border-color var(--ease)}
.troubleshoot-copypath:hover{background:rgba(193,253,5,0.1);border-color:rgba(193,253,5,0.25)}
.troubleshoot-copypath svg{width:18px;height:18px;flex-shrink:0;opacity:0.6;transition:opacity 0.15s}
.troubleshoot-copypath:hover svg{opacity:1}

.troubleshoot-footer{display:flex;align-items:flex-start;gap:18px;padding:23px 31px;border-top:1px solid var(--glass-b);background:rgba(255,255,255,0.01)}
.troubleshoot-footer-icon{width:42px;height:42px;min-width:42px;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0.6}
.troubleshoot-footer-icon svg{width:26px;height:26px}
.troubleshoot-footer-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:5px}
.troubleshoot-footer-desc{font-size:16px;color:var(--muted);margin-bottom:10px}
.troubleshoot-footer .troubleshoot-copypath{font-size:14px;padding:5px 13px}

/* ════════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════════ */
.about-text{font-size:20px;color:var(--muted);line-height:1.85}
.about-text p{margin-bottom:20px}
.about-text p:last-child{margin-bottom:0}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer{border-top:1px solid var(--glass-b);padding:57px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--white);direction:ltr}
.footer-brand svg{width:20px;height:20px}
.footer-logo{width:26px;height:26px;object-fit:contain}
.footer-copy{font-size:16px;color:var(--muted)}
/* ── Social Bubble (fixed bottom-left, always) ── */
.social-bubble{position:fixed;bottom:24px;left:24px;z-index:850}

.social-bubble-trigger{width:48px;height:48px;border-radius:50%;background:var(--purple);border:1px solid rgba(255,255,255,0.1);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s ease;box-shadow:0 0 20px rgba(62,1,252,0.3)}
.social-bubble-trigger svg{width:20px;height:20px}
.social-bubble:hover .social-bubble-trigger,.social-bubble.open .social-bubble-trigger{background:#5a2aff;box-shadow:0 0 28px rgba(62,1,252,0.5);transform:scale(1.08)}

.social-bubble-items{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:8px;padding-bottom:60px;pointer-events:none}
.social-bubble:hover .social-bubble-items,.social-bubble.open .social-bubble-items{pointer-events:auto}

.social-bubble-item{width:40px;height:40px;border-radius:50%;background:rgba(16,16,24,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-b);color:var(--muted);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px) scale(0.5);transition:all 0.2s ease;transition-delay:calc(var(--i) * 0.05s)}
.social-bubble-item svg{width:16px;height:16px}
.social-bubble:hover .social-bubble-item,.social-bubble.open .social-bubble-item{opacity:1;transform:translateY(0) scale(1);animation:bubblePop 0.3s steps(4,end);animation-delay:calc(var(--i) * 0.05s)}
.social-bubble-item:hover{color:var(--lime);border-color:rgba(193,253,5,0.25);background:rgba(193,253,5,0.06);box-shadow:0 0 14px rgba(193,253,5,0.15)}

@keyframes bubblePop{
  0%{opacity:0;transform:translateY(12px) scale(0.4) translateX(-3px)}
  25%{opacity:0.7;transform:translateY(-3px) scale(1.1) translateX(3px)}
  50%{opacity:0.8;transform:translateY(2px) scale(0.95) translateX(-2px)}
  75%{opacity:1;transform:translateY(-1px) scale(1.02)}
  100%{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════
   AUTH OVERLAY — opens on top of main page
   ════════════════════════════════════════════════════════════ */
.auth-overlay{position:fixed;inset:0;z-index:950;display:none;align-items:center;justify-content:center;padding:24px}
.auth-overlay.open{display:flex}
.auth-overlay-bg{position:absolute;inset:0;background:rgba(5,5,8,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.auth-card-wrap{position:relative;z-index:1;width:100%;max-width:400px;opacity:0;transform:scale(0.92) translateY(12px);transition:opacity 0.35s ease,transform 0.35s ease}
.auth-overlay.loaded .auth-card-wrap{opacity:1;transform:scale(1) translateY(0);animation:glitchIn 0.35s steps(4,end)}

.auth-card{width:100%;padding:40px 32px}
.auth-close{position:absolute;top:16px;right:16px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:rgba(255,255,255,0.05);color:var(--muted);cursor:pointer;transition:color var(--ease),background var(--ease);font-size:18px}
.auth-close:hover{color:var(--white);background:rgba(255,255,255,0.1)}
body.fa .auth-close{right:auto;left:16px}

.auth-header{text-align:center;margin-bottom:28px}
.auth-header .nav-brand{justify-content:center;margin-bottom:16px}
.auth-title{font-size:22px;font-weight:700;color:var(--white);margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--muted)}

/* Auth tabs */
.auth-tabs{display:flex;gap:0;margin-bottom:24px;border-radius:10px;overflow:hidden;border:1px solid var(--glass-b);background:rgba(255,255,255,0.02)}
.auth-tab{flex:1;padding:10px 0;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color var(--ease),background var(--ease);text-align:center;border:none;background:transparent}
.auth-tab:hover{color:var(--white)}
.auth-tab.active{color:var(--lime);background:rgba(193,253,5,0.06)}

.auth-form{display:none}
.auth-form.active{display:block;animation:glitchIn 0.3s steps(4,end)}

.form-group{margin-bottom:18px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px}
.form-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--glass-b);background:rgba(255,255,255,0.025);color:var(--white);font-size:14px;transition:border-color var(--ease),background var(--ease),box-shadow var(--ease)}
.form-input::placeholder{color:rgba(255,255,255,0.18)}
.form-input:focus{border-color:rgba(62,1,252,0.45);background:rgba(255,255,255,0.04);box-shadow:0 0 12px rgba(62,1,252,0.1)}
.form-error{display:none;font-size:12px;color:#ff6b6b;margin-top:5px}
.form-error.visible{display:block}
.auth-error{display:none;padding:10px 14px;border-radius:10px;background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.18);color:#ff6b6b;font-size:13px;margin-bottom:18px;text-align:center}
.auth-error.visible{display:block}
.auth-success{display:none;padding:10px 14px;border-radius:10px;background:rgba(193,253,5,0.06);border:1px solid rgba(193,253,5,0.18);color:var(--lime);font-size:13px;margin-bottom:18px;text-align:center}
.auth-success.visible{display:block}
.auth-submit{width:100%;margin-top:6px}
.auth-submit:disabled{opacity:0.7;cursor:not-allowed}

/* Button spinner */
.btn-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(10,10,16,0.2);border-top-color:#0a0a10;border-radius:50%;animation:btnSpin 0.5s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════
   GLITCH EFFECTS — ambient
   ════════════════════════════════════════════════════════════ */
.scanlines{position:fixed;inset:0;z-index:8000;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);opacity:0;transition:opacity 0.5s}
body.loaded .scanlines{opacity:1}

.lazy{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.lazy.in{opacity:1;transform:translateY(0);animation:glitchIn 0.4s steps(4,end)}
@keyframes glitchIn{
  0%{opacity:0;transform:translateX(-6px) skewX(-2deg)}
  25%{opacity:0.7;transform:translateX(4px) skewX(1deg)}
  50%{opacity:0.4;transform:translateX(-2px)}
  75%{opacity:0.9;transform:translateX(1px)}
  100%{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  .hero{display:block}
  .hero-content{display:block;text-align:center}
  .hero-text{max-width:100%;margin-bottom:32px}
  .hero-actions{justify-content:center}
  .hero-logo{justify-content:center}
  .hero-mockup{width:100%;max-width:100%;box-sizing:border-box}
  .services-grid{grid-template-columns:1fr}
  .lan-content{grid-template-columns:1fr;gap:28px}
  .lan-download{display:none}
  .lan-download-mobile{display:block !important;margin-top:8px}
  .text-center .section-sub{margin-left:auto;margin-right:auto}
  .mockup-header{justify-content:center;gap:16px}
}

@media(max-width:768px){
  .container{padding:0 18px}
  .nav-inner{height:60px}
  .nav-links{display:none;position:fixed;top:60px;left:0;width:100%;background:rgba(10,10,16,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--glass-b);gap:4px;z-index:899}
  .nav-links.open{display:flex}
  .nav-links a,.nav-links button{width:100%;text-align:left;padding:12px 14px;font-size:14px}
  .nav-links .lang-toggle{padding:12px 14px;font-size:22px;width:auto;justify-content:flex-start}
  .nav-links .btn{text-align:center}
  body.fa .nav-links a,body.fa .nav-links button{text-align:right}
  .menu-toggle{display:flex}
  .hero{min-height:auto;padding:100px 0 60px}
  .hero-title{font-size:47px}
  .hero-tagline{font-size:21px}
  .hero-mockup{padding:16px}
  .mockup-player{padding:10px 12px}
  .mockup-name{font-size:13px}
  .mockup-ip{font-size:10px}
  .mockup-ping{font-size:12px}
  .section-title{font-size:34px}
  .section{padding:78px 0}
  .section-sub{font-size:18px}
  .service-card{padding:36px 26px}
  .service-name{font-size:23px}
  .service-desc{font-size:17px}
  .lan-feature h4{font-size:18px}
  .lan-feature p{font-size:16px}
  .about-text{font-size:18px;line-height:1.75}
  .footer{padding:32px 0}
  .footer-inner{flex-direction:column;text-align:center;gap:16px}
  .social-links{justify-content:center}
  .auth-card{padding:28px 20px}
  .auth-title{font-size:20px}
  .loader-dot{width:7px;height:7px}
  .loader-grid{gap:3px}
  .loader-label{font-size:10px;letter-spacing:3px}
}

@media(max-width:480px){
  .hero{padding:80px 0 40px}
  .hero-title{font-size:39px}
  .hero-logo svg{width:47px;height:47px}
  .hero-logo{gap:13px}
  .hero-tagline{font-size:20px;margin-bottom:36px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;text-align:center}
  .hero-mockup{padding:12px}
  .mockup-player{padding:9px 10px}
  .mockup-avatar{width:24px;height:24px}
  .mockup-player-info{gap:8px}
  .section{padding:48px 0}
  .section-title{font-size:29px}
  .service-card{padding:24px 16px}
  .coming-badge{font-size:10px;padding:8px 16px;letter-spacing:1.5px}
  .lan-feature{gap:10px;padding:10px}
  .lan-feature-icon{width:34px;height:34px;min-width:34px}
  .lan-feature-icon svg{width:16px;height:16px}
  .about-text{font-size:13px}
  .footer-copy{font-size:11px}
  .social-link{width:34px;height:34px;border-radius:8px}
  .social-link svg{width:14px;height:14px}
  .auth-card{padding:24px 16px}
  .form-input{padding:11px 12px;font-size:13px}
  .btn{padding:16px 31px;font-size:18px}
  .loader-dot{width:5px;height:5px}
  .loader-grid{gap:2px}
  .loader-label{font-size:9px;letter-spacing:2px;margin-top:20px}
}

/* ── Tickets: force Dana regardless of body language ─── */
.ticket-item,
.ticket-item .tkt-badge,
.ticket-chat-user,
.tchat-msg,
.tchat-msg .tmsg-sender,
.tchat-msg .tmsg-time,
#ticketContent,
#ticketContent h3,
#ticketContent input,
#ticketContent textarea,
#ticketContent button,
#ticketContent .form-input,
#ticketContent .btn {
  font-family: 'Dana', Tahoma, sans-serif !important;
}

/* ── Ticket fonts: +4px (overrides inline styles) ──────── */
.ticket-item                  { font-size: 18px !important; }
.ticket-item .tkt-badge       { font-size: 14px !important; }
.ticket-item span             { font-size: 18px !important; }   /* subject */
.ticket-chat-user             { font-size: 17px !important; }
.tchat-msg                    { font-size: 17px !important; }
.tchat-msg .tmsg-sender       { font-size: 14px !important; }
.tchat-msg .tmsg-time         { font-size: 13px !important; }
#ticketContent h3             { font-size: 20px !important; }
#ticketContent .form-input    { font-size: 17px !important; }
#ticketContent textarea       { font-size: 17px !important; }
#ticketContent .btn           { font-size: 17px !important; }

/* ── Ticket fonts: another +4px on user side ─────────── */
.ticket-item                  { font-size: 22px !important; }
.ticket-item .tkt-badge       { font-size: 18px !important; }
.ticket-item span             { font-size: 22px !important; }
.ticket-chat-user             { font-size: 21px !important; }
.tchat-msg                    { font-size: 21px !important; }
.tchat-msg .tmsg-sender       { font-size: 18px !important; }
.tchat-msg .tmsg-time         { font-size: 17px !important; }
#ticketContent h3             { font-size: 24px !important; }
#ticketContent .form-input    { font-size: 21px !important; }
#ticketContent textarea       { font-size: 21px !important; }
#ticketContent .btn           { font-size: 21px !important; }

/* ── Avatar inside ticket sender labels — undo global img{display:block} ── */
.tmsg-sender img { display: inline-block !important; vertical-align: middle; width: 40px !important; height: 40px !important; margin-left: 10px !important; margin-right: 4px !important; margin-top: 2px !important; margin-bottom: 4px !important;}