/* HackyLabs — stil comun hackylabs.ro + webhost.hackylabs.ro */
:root{
  --bg:#05152b;--bg2:#08203f;--panel:rgba(22,64,110,.38);--panel2:rgba(30,84,140,.5);
  --line:rgba(120,220,255,.22);--line2:rgba(120,230,255,.5);
  --text:#e3f3ff;--head:#ffffff;--muted:#a6c6e0;--dim:#6f93b3;
  --cyan:#22d3ff;--teal:#2bffe4;--violet:#8b7bff;--pink:#ff5c9a;--gold:#ffcf5c;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;
  --r:20px;color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);font:16px/1.6 Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--bg)}
::selection{background:rgba(34,211,255,.4);color:#fff}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%;display:block}
.wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px}
main{display:block;overflow-x:clip}
html,body{max-width:100%}

/* ---------- fundal: aurore, grilă, lumina cursorului ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -20%,#0f3a6b 0%,transparent 70%),linear-gradient(180deg,#071b36 0%,#05152b 45%,#06132a 100%)}
.sky .au{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.sky .a1{width:60vw;height:60vw;left:-15vw;top:-20vw;background:radial-gradient(circle,#00b4ff 0%,transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.sky .a2{width:55vw;height:55vw;right:-20vw;top:10vh;background:radial-gradient(circle,#2bffe4 0%,transparent 65%);opacity:.35;animation:drift2 26s ease-in-out infinite alternate}
.sky .a3{width:50vw;height:50vw;left:20vw;bottom:-30vw;background:radial-gradient(circle,#8b7bff 0%,transparent 65%);opacity:.4;animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,12vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-14vw,20vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vw,-18vh) scale(1.2)}}
.sky .gridl{position:absolute;inset:0;background:linear-gradient(rgba(140,220,255,.06) 1px,transparent 1px) 0 0/52px 52px,linear-gradient(90deg,rgba(140,220,255,.06) 1px,transparent 1px) 0 0/52px 52px;
  -webkit-mask:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 80%);mask:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 80%)}
#net{position:fixed;inset:0;z-index:1;pointer-events:none}
.spot{position:fixed;z-index:1;pointer-events:none;width:700px;height:700px;left:0;top:0;border-radius:50%;
  background:radial-gradient(circle,rgba(120,230,255,.13) 0%,rgba(120,230,255,.05) 35%,transparent 65%);transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
body.mouse .spot{opacity:1}
.progress{position:fixed;left:0;top:0;height:3px;z-index:60;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal),var(--violet));box-shadow:0 0 14px var(--cyan)}

/* ---------- meniul superior (comun) ---------- */
header.hl-top{position:sticky;top:0;z-index:50;background:rgba(8,28,55,.62);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(120,220,255,.22);transition:background .3s,box-shadow .3s}
header.hl-top.scrolled{background:rgba(6,22,44,.82);box-shadow:0 12px 40px rgba(0,0,0,.35)}
header.hl-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan) 25%,var(--teal) 50%,var(--violet) 75%,transparent);background-size:200% 100%;animation:sweep 7s linear infinite}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.hl-nav{display:flex;align-items:center;gap:6px;height:70px}
.hl-brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--head);font-weight:800;font-size:20px;letter-spacing:.2px}
.hl-brand svg{width:36px;height:42px;filter:drop-shadow(0 0 10px rgba(43,255,228,.7));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hl-brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.hl-brand em{font-style:normal;background:linear-gradient(90deg,var(--teal),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hl-brand small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-left:2px}
.hl-nav a.l{position:relative;color:var(--muted);font-weight:600;font-size:14.5px;padding:9px 13px;border-radius:10px;transition:color .2s}
.hl-nav a.l::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--teal));transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px var(--cyan)}
.hl-nav a.l:hover,.hl-nav a.l.on{color:#fff}
.hl-nav a.l:hover::after,.hl-nav a.l.on::after{transform:scaleX(1)}
.hl-menu{display:none;background:rgba(34,211,255,.08);border:1px solid var(--line2);color:var(--cyan);border-radius:12px;width:44px;height:42px;font-size:20px;cursor:pointer}

/* ---------- butoane ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;font:700 15px/1.2 inherit;font-family:inherit;
  border:1px solid var(--line2);color:var(--head);background:rgba(120,220,255,.08);cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .2s,box-shadow .3s,background .3s,border-color .3s,filter .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{border-color:var(--cyan);background:rgba(120,220,255,.18);box-shadow:0 0 28px rgba(34,211,255,.35)}
.btn.pri{color:#032032;background:linear-gradient(135deg,#5ee7ff,var(--cyan) 40%,var(--teal));border-color:rgba(160,255,245,.9);box-shadow:0 10px 30px rgba(34,211,255,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.pri:hover{filter:brightness(1.08) saturate(1.1);box-shadow:0 14px 40px rgba(43,255,228,.55),0 0 0 4px rgba(34,211,255,.18)}
.btn.sm{padding:10px 15px;font-size:14px;border-radius:12px}
.btn.big{padding:16px 28px;font-size:16.5px}

/* ---------- titluri secțiuni ---------- */
section{position:relative;padding:96px 0}
.sh{text-align:center;max-width:760px;margin:0 auto 50px}
.sh small{display:inline-block;font:700 12.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(43,255,228,.07)}
.sh h2{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.03em;line-height:1.08;margin:16px 0 14px;color:var(--head)}
.sh h2 .g,.g{background:linear-gradient(90deg,var(--cyan),var(--teal),#c6fff8,var(--violet),var(--cyan));background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:300% center}}
.sh p{color:var(--muted);margin:0;font-size:17.5px}

/* ---------- carduri sticlă + înclinare 3D ---------- */
.glass{position:relative;border-radius:var(--r);background:linear-gradient(160deg,rgba(40,100,160,.42),rgba(14,44,82,.42));border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,10,30,.45),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(500px circle at var(--mx,50%) var(--my,-20%),rgba(140,240,255,.22),transparent 45%);opacity:0;transition:opacity .35s}
.glass:hover::after{opacity:1}
.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;will-change:transform}
.tilt:hover{border-color:var(--line2);box-shadow:0 34px 80px rgba(0,10,30,.55),0 0 40px rgba(34,211,255,.22),inset 0 1px 0 rgba(255,255,255,.18)}

/* ---------- apariție la derulare ---------- */
.rv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- bandă tehnologii ---------- */
.marquee{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--line);background:rgba(10,36,70,.45);backdrop-filter:blur(8px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:46px;width:max-content;padding:18px 0;animation:mq 38s linear infinite;font:600 14px var(--mono);color:var(--muted);letter-spacing:.06em}
.marquee .track span{display:inline-flex;align-items:center;gap:10px}
.marquee .track span::before{content:"◆";color:var(--teal);font-size:10px;text-shadow:0 0 10px var(--teal)}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- cutie CTA ---------- */
.cta-box{position:relative;text-align:center;padding:64px 26px;border-radius:28px;overflow:hidden;
  background:radial-gradient(600px 300px at 50% 0%,rgba(34,211,255,.3),transparent 70%),linear-gradient(135deg,rgba(34,211,255,.18),rgba(139,123,255,.16));
  border:1px solid var(--line2);box-shadow:0 40px 100px rgba(0,10,30,.5),0 0 80px rgba(34,211,255,.18),inset 0 1px 0 rgba(255,255,255,.2)}
.cta-box::before{content:"";position:absolute;inset:-2px;border-radius:30px;padding:2px;pointer-events:none;background:conic-gradient(from var(--a,0deg),transparent 0 65%,var(--cyan) 75%,var(--teal) 82%,var(--violet) 90%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 6s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes orbit{to{--a:360deg}}
.cta-box h2{position:relative;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em;margin:0 0 14px;color:var(--head)}
.cta-box p{position:relative;color:var(--muted);margin:0 auto 28px;max-width:620px;font-size:17.5px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative}

/* ---------- subsol ---------- */
footer.hl-foot{position:relative;z-index:2;border-top:1px solid var(--line);padding:40px 0 44px;color:var(--muted);font-size:14.5px;background:rgba(4,16,34,.55);backdrop-filter:blur(10px)}
.hl-foot .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hl-foot .hl-brand{font-size:17px}.hl-foot .hl-brand svg{width:28px;height:33px}
.hl-foot nav{display:flex;gap:18px;flex-wrap:wrap}.hl-foot nav a{color:var(--muted);transition:color .2s}.hl-foot nav a:hover{color:var(--teal)}
.hl-foot .copy{font:500 12px var(--mono);letter-spacing:.08em;margin-top:20px;color:var(--dim)}
.hl-foot .mail{color:var(--cyan);font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hl-nav a.l,.hl-nav>.btn{display:none}.hl-menu{display:block}
  .hl-nav.open{flex-wrap:wrap;height:auto;padding:14px 0;gap:6px}
  .hl-nav.open a.l{display:block;width:100%;padding:12px 10px;font-size:16px}
  .hl-nav.open>.btn{display:inline-flex;flex:1 1 45%}
  section{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}