/* ---- Brand fonts ---- */
@font-face{font-family:'Wesker';src:url('/fonts/Wesker-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'WeskerExp';src:url('/fonts/Wesker-BoldExpanded.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#06070B; --panel:#0C0E16; --line:#1E2233;
  --txt:#EEF1FF; --muted:#8A91B4;
  --magenta:#DF3677; --magenta2:#9B1870; --cyan:#00BFFF; --cyan2:#006794;
  --neon:linear-gradient(100deg,var(--magenta),#F04E8C 40%,var(--cyan));
  --display:'WeskerExp','Wesker','Montserrat',sans-serif;
  --wesker:'Wesker','Montserrat',sans-serif;
  --body:'Montserrat','Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
img,svg,canvas{max-width:100%}
body{
  background:var(--bg); color:var(--txt); overflow-x:hidden;
  font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:none}
:focus:not(:focus-visible){outline:none}
.hero-title:focus,.hero-title{outline:none}
.only-mobile{display:none}
.wrap{max-width:1160px; margin:0 auto; padding-inline:24px}
.muted{color:var(--muted)}
.hu{display:block; font-size:.82em; color:#646b8f; margin-top:4px; font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--body); line-height:1.1; margin:0; letter-spacing:-.01em; font-weight:700}
.grad{background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:grad 6s ease infinite}
.glow{filter:drop-shadow(0 0 26px rgba(223,54,119,.45))}
@keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- Motion background layers ---- */
.fx{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 40% at 15% 10%, rgba(223,54,119,.22), transparent 60%),
    radial-gradient(45% 45% at 85% 15%, rgba(0,191,255,.20), transparent 60%),
    radial-gradient(50% 40% at 60% 95%, rgba(155,24,112,.18), transparent 60%);
  animation:drift 18s ease-in-out infinite alternate}
.fx::after{content:''; position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:58px 58px;
  mask:radial-gradient(circle at 50% 30%,#000,transparent 82%);
  animation:gridpan 22s linear infinite}
.fx-canvas{position:fixed; inset:0; z-index:-1; pointer-events:none}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-26px,0) scale(1.07)}}
@keyframes gridpan{0%{background-position:0 0}100%{background-position:58px 116px}}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(6,7,11,.55); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; gap:18px; height:70px; position:relative}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px}
.hamburger span{display:block; width:24px; height:2px; background:var(--txt); border-radius:2px; transition:.25s}
.nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{display:flex; gap:20px; margin-right:auto; flex-wrap:wrap}
.nav a{color:var(--muted); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; position:relative; white-space:nowrap}
.nav a:hover{color:var(--txt)}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--neon); transition:right .25s}
.nav a:hover::after{right:0}

/* Glowing icon badge (top-right) */
.icon-badge{position:relative; width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:#090b12; overflow:hidden; isolation:isolate; flex:none}
.icon-badge::before{content:''; position:absolute; inset:-60%; z-index:-1;
  background:conic-gradient(from 0deg,var(--magenta),var(--cyan),var(--magenta)); animation:spin 4s linear infinite}
.icon-badge::after{content:''; position:absolute; inset:2px; border-radius:12px; background:#090b12; z-index:-1}
.icon-badge img{width:26px; height:26px; filter:drop-shadow(0 0 8px rgba(0,191,255,.6))}
.icon-badge:hover{box-shadow:0 0 26px rgba(223,54,119,.6)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:700; font-size:13px;
  letter-spacing:1px; text-transform:uppercase; padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s, box-shadow .25s, background .25s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--neon); background-size:200% auto; color:#fff;
  box-shadow:0 10px 34px -8px rgba(223,54,119,.75); animation:pulseM 3.6s ease-in-out infinite}
.btn-primary:hover{box-shadow:0 16px 44px -8px rgba(0,191,255,.7); color:#fff; background-position:100%}
.btn-ghost{background:rgba(255,255,255,.03); color:var(--txt); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan); color:#fff}
.btn-login{padding:9px 18px; font-size:12.5px; flex:none}
@keyframes pulseM{0%,100%{box-shadow:0 10px 34px -8px rgba(223,54,119,.55)}50%{box-shadow:0 14px 42px -6px rgba(223,54,119,.95)}}

/* Hero */
.hero{position:relative; padding:120px 0 90px; text-align:center; overflow:hidden}
.ghost42{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--display); font-weight:700; font-size:min(46vw,620px);
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.05); z-index:0; user-select:none;
  animation:ghostpulse 7s ease-in-out infinite}
@keyframes ghostpulse{0%,100%{-webkit-text-stroke-color:rgba(223,54,119,.10)}50%{-webkit-text-stroke-color:rgba(0,191,255,.16)}}
.hero-inner{position:relative; z-index:2}
.eyebrow{font-family:var(--wesker); text-transform:uppercase; letter-spacing:5px; font-size:13px; color:var(--cyan); margin:0 0 20px}
.hero-title{font-family:var(--display); text-transform:uppercase; font-size:clamp(40px,7.6vw,88px); font-weight:700; letter-spacing:.02em; line-height:1.02}
.hero-sub{max-width:660px; margin:26px auto 0; font-size:clamp(16px,2vw,20px); color:var(--muted)}
.hero-sub .hu{display:block; margin-top:6px}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px}

/* Marquee */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:rgba(255,255,255,.02); padding:16px 0}
.marquee-track{display:inline-flex; gap:26px; white-space:nowrap; align-items:center;
  font-family:var(--wesker); font-weight:700; letter-spacing:4px; font-size:15px;
  color:var(--muted); animation:scroll 26s linear infinite}
.marquee-track i{color:var(--magenta); font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:96px 0}
.section-title{font-size:clamp(28px,4vw,46px); font-weight:700; text-align:center}
.section-lead{max-width:640px; margin:16px auto 0; text-align:center}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.card{position:relative; background:rgba(255,255,255,.03); border:1px solid transparent;
  border-radius:20px; padding:30px; background-clip:padding-box; transition:transform .18s, box-shadow .25s}
.card::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,var(--magenta),var(--cyan)); background-size:200% 200%;
  opacity:.4; animation:borderflow 8s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .25s}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 60px -20px rgba(0,191,255,.35)}
.card:hover::before{opacity:1}
@keyframes borderflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.card-ic{font-size:28px; width:58px; height:58px; display:grid; place-items:center; border-radius:16px;
  background:linear-gradient(140deg,rgba(223,54,119,.18),rgba(0,191,255,.14)); border:1px solid var(--line); margin-bottom:18px}
.card h3{font-size:21px; margin-bottom:8px}
.card-link{display:inline-block; margin-top:16px; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.5px;
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Band */
.band{border-block:1px solid var(--line); background:rgba(255,255,255,.02)}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:52px 24px; text-align:center}
.stat{display:flex; flex-direction:column; gap:6px}
.stat-n{font-family:var(--display); font-size:clamp(30px,4.4vw,50px); font-weight:700}
.stat-l{font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:64px 0 34px; margin-top:24px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
.foot-logo{filter:drop-shadow(0 0 14px rgba(0,191,255,.3))}
.site-footer h4{font-size:12px; text-transform:uppercase; letter-spacing:2px; color:var(--txt); margin-bottom:12px; font-weight:700}
.site-footer .muted{font-size:14.5px}
.copyright{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:13px}

/* Scroll reveal (only when JS on) */
.fx-on [data-reveal]{opacity:0; transform:translateY(28px)}
.fx-on [data-reveal].in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.fx-on .card:nth-child(2){transition-delay:.12s}
.fx-on .card:nth-child(3){transition-delay:.2s}

@media (max-width:900px){
  .hamburger{display:flex; margin-right:auto}
  .nav{position:absolute; left:0; right:0; top:70px; flex-direction:column; gap:0;
    background:rgba(6,7,11,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
    padding:6px 24px 16px; display:none}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav a{padding:15px 2px; font-size:14px; border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .only-mobile{display:block; color:var(--cyan)}
  .btn-login{display:none}
  .cards{grid-template-columns:1fr}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:88px 0 60px}
  .eyebrow{letter-spacing:2px; font-size:11px}
  .hero-title{font-size:clamp(30px,8.4vw,46px); letter-spacing:0; overflow-wrap:break-word}
  .section{padding:64px 0}
  .section-title{font-size:clamp(23px,6.4vw,34px)}
  .marquee-track{letter-spacing:2px; font-size:13px}
  .stat-n{font-size:clamp(26px,8vw,40px)}
}
@media (prefers-reduced-motion:reduce){
  .fx,.fx::after,.grad,.marquee-track,.ghost42,.card::before,.btn-primary,.icon-badge::before{animation:none}
}

/* Blazor error UI */
#blazor-error-ui{background:#DF3677; color:#fff; bottom:0; display:none; left:0;
  padding:12px 18px; position:fixed; width:100%; z-index:1000; box-shadow:0 -1px 12px rgba(0,0,0,.5)}
#blazor-error-ui .dismiss{cursor:pointer; position:absolute; right:14px; top:10px}