/* ===================================================
   SYBER ENERGY — HAZIRLANIYOR (Single-screen Hero)
   Corporate dark theme · gold accents · rich animation
   =================================================== */

:root{
    --bg:#050810;
    --bg2:#0a0e1a;
    --gold:#FFB300;
    --gold-2:#FF8A00;
    --gold-lt:#FFE066;
    --txt:#FFFFFF;
    --txt2:#B8C0CC;
    --txt-m:#6B7280;
    --bd:rgba(255,179,0,.16);
    --bd-h:rgba(255,179,0,.45);
    --fd:'Orbitron',sans-serif;
    --hd:'Rajdhani',sans-serif;
    --bd-font:'Inter',sans-serif;
    --t:.3s cubic-bezier(.4,0,.2,1);
    --ts:.6s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:var(--bd-font);
    background:var(--bg);
    color:var(--txt);
    overflow:hidden;                /* no scroll — single screen */
    position:relative;
    -webkit-font-smoothing:antialiased;
}
body::before{                       /* base radial glows */
    content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
    background:
        radial-gradient(ellipse at 20% 20%,rgba(255,138,0,.10),transparent 45%),
        radial-gradient(ellipse at 80% 80%,rgba(255,179,0,.08),transparent 45%),
        linear-gradient(180deg,var(--bg),var(--bg2));
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--t)}
::selection{background:var(--gold);color:var(--bg)}

/* ============ AURORA BLOBS ============ */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora-blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora-1{width:48vw;height:48vw;left:-10vw;top:-10vh;background:radial-gradient(circle,#FF8A00,transparent 70%);animation:float1 18s ease-in-out infinite}
.aurora-2{width:42vw;height:42vw;right:-8vw;top:10vh;background:radial-gradient(circle,#FFB300,transparent 70%);animation:float2 22s ease-in-out infinite}
.aurora-3{width:40vw;height:40vw;left:25vw;bottom:-15vh;background:radial-gradient(circle,#FFE066,transparent 70%);animation:float3 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,8vh) scale(1.1)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(1.2)}}

/* ============ GRID + SCANLINE ============ */
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(255,179,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,179,0,.035) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 75%);
            mask-image:radial-gradient(ellipse at center,#000 10%,transparent 75%);
}
.scanline{position:fixed;left:0;right:0;top:0;height:140px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(255,179,0,.05),transparent);
    animation:scan 6s linear infinite;opacity:.6}
@keyframes scan{0%{transform:translateY(-160px)}100%{transform:translateY(100vh)}}

#particles-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7}

/* ============ LOADER ============ */
.loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at center,#0a0e1a,#050810 70%);transition:opacity .7s ease,visibility .7s}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader-logo{width:140px;height:140px}
.loader-logo .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s ease forwards}
.loader-logo .draw:nth-child(2){animation-delay:.3s}
.loader-logo .draw:nth-child(3){animation-delay:.6s}
@keyframes draw{to{stroke-dashoffset:0}}

.loader-brand{font-family:var(--fd);font-weight:700;font-size:1.4rem;letter-spacing:.25em;display:flex;gap:2px}
.loader-letter{opacity:0;transform:translateY(14px);animation:letterIn .5s ease forwards;color:#fff}
.loader-letter-accent{color:var(--gold)}
.loader-letter:nth-child(1){animation-delay:1.0s}
.loader-letter:nth-child(2){animation-delay:1.1s}
.loader-letter:nth-child(3){animation-delay:1.2s}
.loader-letter:nth-child(4){animation-delay:1.3s}
.loader-letter:nth-child(5){animation-delay:1.4s}
.loader-space{width:.4em}
.loader-letter-accent:nth-child(7){animation-delay:1.6s}
.loader-letter-accent:nth-child(8){animation-delay:1.7s}
.loader-letter-accent:nth-child(9){animation-delay:1.8s}
.loader-letter-accent:nth-child(10){animation-delay:1.9s}
.loader-letter-accent:nth-child(11){animation-delay:2.0s}
.loader-letter-accent:nth-child(12){animation-delay:2.1s}
@keyframes letterIn{to{opacity:1;transform:translateY(0)}}

.loader-bar{width:240px;height:3px;border-radius:3px;background:rgba(255,179,0,.12);overflow:hidden;margin-top:6px}
.loader-progress{height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold-lt));border-radius:3px;box-shadow:0 0 10px var(--gold)}
.loader-percent{font-family:var(--fd);font-size:.85rem;color:var(--gold);letter-spacing:.1em}
.loader-status{font-family:var(--hd);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2)}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    padding:18px 32px;background:rgba(5,8,16,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--bd)}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:700;font-size:1.05rem;letter-spacing:.18em}
.nav-emblem{width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(255,179,0,.5));animation:spinSlow 30s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.nav-word .accent{color:var(--gold);margin-left:3px}
.nav-status{display:flex;align-items:center;gap:8px;font-family:var(--hd);font-size:.78rem;letter-spacing:.18em;color:var(--txt2)}
.dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* ============ HERO (single screen) ============ */
.hero{height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 24px 24px;position:relative}
.hero-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
    width:100%;max-width:760px;
    opacity:0;transform:scale(.96);animation:heroIn 1s ease .2s forwards}
@keyframes heroIn{to{opacity:1;transform:scale(1)}}

/* logo */
.logo-wrap{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.hero-emblem{width:150px;height:150px;position:relative;z-index:3;filter:drop-shadow(0 0 24px rgba(255,179,0,.55));
    animation:floatY 5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ring{position:absolute;border-radius:50%;border:1px solid var(--gold);opacity:.5}
.ring-1{inset:0;animation:spin 14s linear infinite;border-style:dashed}
.ring-2{inset:-14px;animation:spin 20s linear infinite reverse;border-style:dotted;opacity:.35}
.ring-3{inset:-28px;animation:pulseRing 3.5s ease-in-out infinite;border-color:rgba(255,179,0,.3)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.06);opacity:.6}}

/* badge */
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:100px;
    background:rgba(255,179,0,.08);border:1px solid var(--bd);font-family:var(--hd);font-weight:600;
    font-size:.8rem;letter-spacing:.22em;color:var(--gold);backdrop-filter:blur(10px);
    animation:badgeIn .6s ease .5s both}
.badge-pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:blink 1.4s infinite}
.badge-icon{font-size:1rem}
@keyframes badgeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* wordmark */
.wordmark{font-family:var(--fd);font-weight:900;font-size:clamp(2.4rem,8vw,5rem);line-height:.95;letter-spacing:.04em;
    display:flex;flex-direction:column;align-items:center;animation:fadeUp .8s ease .7s both}
.wm-line{display:block}
.wm-line:first-child{background:linear-gradient(180deg,#fff,#aab2c0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wm-accent{background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(255,179,0,.3)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* tagline */
.tagline{font-family:var(--hd);font-size:clamp(1rem,2.6vw,1.4rem);font-weight:500;letter-spacing:.28em;
    text-transform:uppercase;color:var(--gold);animation:fadeUp .8s ease .9s both;
    display:flex;align-items:center;gap:16px}
.tagline::before,.tagline::after{content:'';width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.tagline::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* countdown */
.countdown{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:4px 0;
    animation:fadeUp .8s ease 1.1s both}
.cd-block{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:14px 10px;
    background:rgba(15,20,25,.55);border:1px solid var(--bd);border-radius:12px;backdrop-filter:blur(14px);
    transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.cd-block:hover{border-color:var(--bd-h);box-shadow:0 0 22px rgba(255,179,0,.25);transform:translateY(-3px)}
.cd-num{font-family:var(--fd);font-size:clamp(1.6rem,4.5vw,2.6rem);font-weight:700;color:var(--gold-lt);
    line-height:1;text-shadow:0 0 18px rgba(255,179,0,.4);transition:transform .3s}
.cd-num.flip{animation:flip .6s ease}
@keyframes flip{0%{transform:translateY(0);opacity:1}50%{transform:translateY(-14px);opacity:0}100%{transform:translateY(0);opacity:1}}
.cd-label{font-family:var(--hd);font-size:.68rem;letter-spacing:.2em;color:var(--txt-m)}
.cd-sep{font-family:var(--fd);font-size:1.8rem;font-weight:700;color:var(--gold);opacity:.5;animation:blink 1s infinite;padding-bottom:18px}

/* ============ RESPONSIVE ============ */
@media (max-width:768px){
    .nav{padding:14px 18px}
    .nav-status{font-size:.68rem}
    .hero{padding:74px 16px 16px}
    .logo-wrap{width:140px;height:140px}
    .hero-emblem{width:120px;height:120px}
    .countdown{gap:5px;flex-wrap:wrap}
    .cd-block{min-width:62px;padding:10px 6px}
    .cd-sep{display:none}
    .tagline{font-size:.95rem;letter-spacing:.18em}
}
@media (max-width:420px){
    .cd-block{min-width:54px}
    .loader-brand{font-size:1.1rem;letter-spacing:.15em}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}