/* ============================================
   SYSRIX — Standalone dark cyberpunk site
   Monospace. Cyan. Always on.
   ============================================ */

:root {
    --bg: #060b18;
    --bg2: #0c1527;
    --bg3: #0d1628;
    --accent: #0ea5a5;
    --accent2: #14d4d4;
    --cyan: #06f5f5;
    --text: #e0e7ff;
    --muted: #6b7fa0;
    --border: rgba(14,165,165,0.12);
    --card: #0d1628;
    --card-shadow: 0 2px 24px rgba(0,0,0,.3);
    --red: #d33631;

    --font: 'JetBrains Mono', 'Fira Code', monospace;
    --nav-h: 80px;
    --max-w: 1200px;
    --ease: cubic-bezier(.4,0,.2,1);
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
    font-family:var(--font);color:var(--text);background:var(--bg);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    font-size:15px;line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.container{max-width:var(--max-w);margin:0 auto;padding:0 40px}


/* ===================== SHARED TYPE ===================== */
.label{
    font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
    color:var(--accent2);margin-bottom:20px;
}
.label--red{color:var(--red)}
.h2{font-size:clamp(40px,7vw,80px);font-weight:700;line-height:1;letter-spacing:-2px;margin-bottom:36px;color:var(--text)}
.h2 strong{
    background:linear-gradient(135deg,var(--accent),var(--cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}


/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;transition:background .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(6,11,24,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.nav__inner{max-width:var(--max-w);margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav__logo{font-size:22px;font-weight:700;color:var(--cyan);letter-spacing:2px;transition:opacity .3s}
.nav__logo:hover{opacity:.8}
.nav__links{display:flex;gap:32px}
.nav__link{font-size:14px;font-weight:500;color:var(--muted);transition:color .3s;letter-spacing:.5px}
.nav__link:hover{color:var(--text)}
.nav__right{display:flex;align-items:center;gap:12px}
.nav__cta{
    font-size:12px;font-weight:600;padding:10px 20px;border-radius:100px;
    transition:all .3s;background:var(--red);color:#fff;
    display:flex;align-items:center;gap:8px;letter-spacing:.5px;
}
.nav__cta:hover{box-shadow:0 6px 20px rgba(211,54,49,.4);color:#fff;transform:translateY(-1px)}
.nav__cta--main{background:var(--accent)}
.nav__cta--main:hover{box-shadow:0 6px 20px rgba(14,165,165,.3)}


/* ===================== BURGER ===================== */
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:6px;z-index:101}
.burger span{display:block;width:24px;height:1.5px;background:var(--text);transition:all .3s}
.burger.open span:first-child{transform:translateY(7.5px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-7.5px) rotate(-45deg)}


/* ===================== MOBILE MENU ===================== */
.mmenu{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .4s}
.mmenu.open{opacity:1;pointer-events:auto}
.mmenu__link{font-size:28px;font-weight:700;transition:color .3s}
.mmenu__link:hover{color:var(--cyan)}


/* ===================== PULSE ===================== */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}


/* ===================== HERO ===================== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) 0 0;position:relative;overflow:hidden}
.hero .container{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}

.hero__grid{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:
        linear-gradient(rgba(14,165,165,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,165,.12) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse at 60% 40%, black 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at 60% 40%, black 30%, transparent 75%);
}

.hero__glow{
    position:absolute;top:-15%;left:50%;transform:translateX(-50%);
    width:900px;height:900px;border-radius:50%;
    background:radial-gradient(circle,rgba(6,245,245,.15),rgba(14,165,165,.05) 40%,transparent 65%);
    pointer-events:none;z-index:1;
    animation:glowPulse 6s ease-in-out infinite alternate;
}
@keyframes glowPulse{0%{opacity:.7;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.12)}}

.hero__tag{
    font-size:13px;font-weight:600;letter-spacing:4px;text-transform:uppercase;
    color:var(--cyan);margin-bottom:32px;
    display:flex;align-items:center;gap:10px;
    animation:fadeUp .8s ease both;
}
.hero__h1{
    font-size:clamp(44px,8vw,96px);font-weight:700;line-height:1.05;letter-spacing:-3px;
    color:var(--text);margin-bottom:32px;
    animation:fadeUp .8s ease .15s both;
}
.hero__prompt{color:var(--cyan);font-weight:400}
.hero__blink{color:var(--cyan);animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero__p{
    font-size:clamp(14px,1.4vw,17px);color:var(--muted);
    max-width:640px;line-height:1.8;margin-bottom:40px;
    animation:fadeUp .8s ease .3s both;
}
.hero__ctas{display:flex;gap:16px;flex-wrap:wrap;animation:fadeUp .8s ease .45s both}

.hero__stats{
    display:flex;gap:48px;margin-top:64px;padding-top:40px;padding-bottom:80px;
    border-top:1px solid var(--border);
    animation:fadeUp .8s ease .6s both;
}
.hero__stat{display:flex;flex-direction:column}
.hero__stat-n{font-size:28px;font-weight:800;color:var(--cyan)}
.hero__stat-l{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}


/* ===================== MARQUEE ===================== */
.hero__marquee{padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;margin-top:auto}
.marquee__track{display:flex;gap:48px;white-space:nowrap;animation:marquee 25s linear infinite;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--accent);opacity:.35}
.marquee__track span{flex-shrink:0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ===================== BUTTONS ===================== */
.btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:16px 36px;font-size:14px;font-weight:600;
    background:var(--accent);color:#fff;border:none;border-radius:100px;
    cursor:pointer;font-family:var(--font);transition:all .4s var(--ease);
    text-decoration:none;letter-spacing:.5px;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(14,165,165,.3);color:#fff}
.arr{transition:transform .3s;display:inline-block}
.btn:hover .arr{transform:translateX(6px)}
.btn--red{background:var(--red)}
.btn--red:hover{box-shadow:0 12px 40px rgba(211,54,49,.3);color:#fff}
.btn--lg{padding:20px 48px;font-size:16px}
.btn--full{
    width:100%;justify-content:center;font-size:16px;padding:20px 36px;
    position:relative;overflow:visible;z-index:0;isolation:isolate;
    box-shadow:0 0 30px rgba(14,165,165,.2);
}
.btn--full::before{
    content:'';position:absolute;inset:-4px;border-radius:100px;
    background:var(--accent);opacity:0;z-index:-1;
    animation:pulseRing 2s ease-out infinite;
}
.btn--full:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 0 50px rgba(14,165,165,.5);
}
.btn--full:hover::before{animation:none;opacity:0}
@keyframes pulseRing{
    0%{transform:scale(.95);opacity:.7}
    100%{transform:scale(1.35);opacity:0}
}
.btn--o{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn--o:hover{background:var(--accent);color:#fff;box-shadow:none;border-color:var(--accent)}


/* ===================== INTRO ===================== */
.intro{padding:120px 0 140px}
.intro__txt{font-size:clamp(17px,2.2vw,28px);font-weight:400;line-height:1.6;max-width:800px;color:var(--muted)}
.intro__txt strong{color:var(--cyan);font-weight:600}


/* ===================== SERVICES ===================== */
.svc{padding:140px 0;background:var(--bg2)}
.svc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:20px}
.svc__card{
    padding:48px 40px;border-radius:20px;
    background:var(--card);border:1px solid var(--border);
    box-shadow:var(--card-shadow);
    transition:all .5s var(--ease);position:relative;overflow:hidden;
}
.svc__card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--cyan));
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.svc__card:hover{transform:translateY(-6px);border-color:rgba(14,165,165,.25)}
.svc__card:hover::before{transform:scaleX(1)}
.svc__card:last-child{grid-column:1 / -1}

.svc__icon{
    width:56px;height:56px;border-radius:14px;
    background:rgba(14,165,165,.1);border:1px solid rgba(14,165,165,.15);
    display:flex;align-items:center;justify-content:center;
    color:var(--cyan);margin-bottom:24px;
    transition:all .4s;
}
.svc__card:hover .svc__icon{background:rgba(14,165,165,.2);border-color:rgba(14,165,165,.3)}

.svc__num{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:2px;display:block;margin-bottom:16px}
.svc__card h3{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text)}
.svc__card p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.svc__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc__tags li{
    font-size:11px;font-weight:600;letter-spacing:1px;
    padding:6px 14px;border-radius:100px;
    background:rgba(14,165,165,.08);border:1px solid rgba(14,165,165,.12);
    color:var(--accent2);
    transition:all .3s;
}
.svc__card:hover .svc__tags li{border-color:rgba(14,165,165,.25)}


/* ===================== WHY ===================== */
.why{padding:140px 0}
.why__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.why__card{
    padding:48px;border-radius:20px;
    border:1px solid var(--border);background:var(--card);
    box-shadow:var(--card-shadow);
    transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.why__card:hover{transform:translateY(-6px);border-color:rgba(14,165,165,.25)}
.why__card--big{grid-row:span 2}
.why__card--big .why__n{font-size:80px}
.why__card--big h3{font-size:22px}
.why__n{
    font-size:56px;font-weight:800;
    background:linear-gradient(135deg,var(--accent),var(--cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    opacity:.15;display:block;margin-bottom:20px;line-height:1;
}
.why__card--accent{
    border-color:var(--accent);
    background:linear-gradient(135deg,rgba(14,165,165,.08),var(--card));
}
.why__card h3{font-size:18px;font-weight:700;margin-bottom:12px;line-height:1.3;color:var(--text)}
.why__card p{font-size:14px;color:var(--muted);line-height:1.7}


/* ===================== SOS ===================== */
.sos{padding:140px 0;background:var(--bg2)}
.sos__box{
    max-width:760px;margin:0 auto;text-align:center;
    padding:72px 56px;border-radius:24px;
    border:2px solid rgba(211,54,49,.25);
    background:linear-gradient(135deg,rgba(211,54,49,.06),var(--card));
    box-shadow:0 4px 60px rgba(211,54,49,.08);
    position:relative;overflow:hidden;
}
.sos__beacon{width:16px;height:16px;background:var(--red);border-radius:50%;margin:0 auto 24px;animation:beacon 2s infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(211,54,49,.6)}70%{box-shadow:0 0 0 24px rgba(211,54,49,0)}100%{box-shadow:0 0 0 0 rgba(211,54,49,0)}}
.sos__p{font-size:16px;color:var(--muted);margin-bottom:40px;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto}
.sos__fine{font-size:13px;color:var(--muted);opacity:.5;margin-top:20px}


/* ===================== CONTACT ===================== */
.contact{padding:140px 0}
.contact__header{margin-bottom:60px}
.contact__big{
    font-size:clamp(52px,10vw,120px);font-weight:800;line-height:.9;letter-spacing:-4px;
    margin-bottom:20px;
    background:linear-gradient(135deg,var(--accent),var(--cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.contact__sub{font-size:18px;color:var(--muted);max-width:400px}
.contact__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:start}
.form{background:var(--card);border:1px solid rgba(14,165,165,.2);border-radius:20px;padding:48px;box-shadow:0 4px 60px rgba(14,165,165,.08)}
.field{margin-bottom:24px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text);letter-spacing:.5px}
.field input,.field textarea{
    width:100%;padding:16px 20px;font-size:14px;font-family:var(--font);
    border:1px solid rgba(14,165,165,.2);border-radius:12px;
    background:rgba(6,11,24,.8);color:var(--text);outline:none;
    transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(14,165,165,.15)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.4}
.contact__info{display:flex;flex-direction:column;gap:40px;padding-top:16px}
.contact__lbl{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact__val{font-size:17px;font-weight:500;transition:color .3s;display:block;color:var(--text)}
.contact__val:hover{color:var(--cyan)}
.contact__val--red{color:var(--red)}
.contact__val--red:hover{color:var(--red);opacity:.8}


/* ===================== FLOAT SOS ===================== */
.float-sos{
    position:fixed;bottom:28px;right:28px;z-index:90;
    display:flex;align-items:center;gap:8px;
    padding:12px 24px;background:var(--red);color:#fff;
    border-radius:100px;font-size:13px;font-weight:700;letter-spacing:2px;
    box-shadow:0 4px 24px rgba(211,54,49,.4);transition:all .3s;
}
.float-sos:hover{transform:scale(1.06);box-shadow:0 8px 32px rgba(211,54,49,.5);color:#fff}


/* ===================== FOOTER ===================== */
.foot{padding:60px 0 28px;border-top:1px solid var(--border)}
.foot__top{display:flex;justify-content:space-between;align-items:start;gap:60px;margin-bottom:48px}
.foot__logo{font-size:20px;font-weight:700;color:var(--cyan);letter-spacing:2px;display:block}
.foot__tag{font-size:13px;color:var(--muted);margin-top:12px;max-width:300px}
.foot__cols{display:flex;gap:60px}
.foot__col{display:flex;flex-direction:column;gap:10px}
.foot__col a{font-size:13px;color:var(--muted);transition:color .3s;display:inline-block}
.foot__col a:hover{color:var(--text)}
.foot__bot{padding-top:24px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);opacity:.3}


/* ===================== COOKIE BAR ===================== */
.cookie{
    position:fixed;bottom:0;left:0;right:0;z-index:95;
    background:var(--bg2);border-top:1px solid var(--border);
    padding:20px 0;
    transform:translateY(100%);transition:transform .5s var(--ease);
}
.cookie.show{transform:translateY(0)}
.cookie__inner{
    max-width:var(--max-w);margin:0 auto;padding:0 40px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.cookie__txt{font-size:13px;color:var(--muted);max-width:600px;line-height:1.5}
.cookie__btns{display:flex;gap:8px;flex-shrink:0}
.cookie__btn{
    padding:10px 24px;border-radius:100px;font-size:13px;font-weight:600;
    font-family:var(--font);cursor:pointer;border:none;transition:all .3s;
}
.cookie__btn--accept{background:var(--accent);color:#fff}
.cookie__btn--accept:hover{box-shadow:0 4px 16px rgba(14,165,165,.3)}
.cookie__btn--decline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.cookie__btn--decline:hover{color:var(--text);border-color:var(--muted)}
@media(max-width:768px){
    .cookie__inner{flex-direction:column;text-align:center}
}


/* ===================== SCROLL ANIM ===================== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}


/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px){
    .svc__grid{grid-template-columns:1fr}
    .svc__card:last-child{grid-column:auto}
    .why__grid{grid-template-columns:1fr}
    .why__card--big{grid-row:auto}
    .contact__grid{grid-template-columns:1fr;gap:48px}
    .foot__cols{gap:40px}
    .hero__stats{gap:32px}
}
@media(max-width:768px){
    :root{--nav-h:64px}
    .container{padding:0 24px}
    .nav__links,.nav__right{display:none}
    .burger{display:flex}
    .svc,.why,.contact,.sos{padding:100px 0}
    .intro{padding:80px 0 100px}
    .hero__stats{flex-direction:column;gap:16px}
    .float-sos{bottom:16px;right:16px;padding:10px 20px}
    .foot__top{flex-direction:column;gap:32px}
    .foot__cols{flex-wrap:wrap;gap:24px}
    .sos__box{padding:48px 28px}
    .hero__glow{width:400px;height:400px}
}
@media(max-width:480px){
    .hero{min-height:auto;padding-bottom:60px}
    .h2{letter-spacing:-1px}
    .form{padding:28px}
    .hero__ctas{flex-direction:column}
    .hero__h1{letter-spacing:-2px}
    .why__grid{gap:16px}
    .contact__big{letter-spacing:-2px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
}