:root{--navy:#06152f;--navy2:#0b2451;--blue:#08a9e6;--orange:#ff8a00;--white:#fff;--muted:#a9b8d3;--card:#0b1d3c;--line:#20385f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#030b19;color:#fff}
a{color:inherit;text-decoration:none}.wrap{max-width:1220px;margin:auto;padding:0 24px}
.top{background:#020817;border-bottom:1px solid #17294a;font-size:13px}.top .wrap{display:flex;gap:22px;justify-content:flex-end;padding-top:9px;padding-bottom:9px;color:#c9d6ed;flex-wrap:wrap}
header{position:sticky;top:0;z-index:20;background:rgba(5,18,42,.92);backdrop-filter:blur(16px);border-bottom:1px solid #18335d}
nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;object-fit:contain;border-radius:10px;background:white}.brand b{font-size:21px;letter-spacing:.08em}.brand small{display:block;color:#a7bad8;letter-spacing:.18em;font-size:9px}
.links{display:flex;gap:26px;align-items:center}.links a:hover{color:#35c4ff}.lang{display:flex;gap:6px}.lang button,.btn{border:1px solid #2d5283;background:transparent;color:white;border-radius:10px;padding:10px 13px;cursor:pointer}.lang button.active{background:#0d6efd;border-color:#0d6efd}
.hero{position:relative;overflow:hidden;min-height:690px;background:radial-gradient(circle at 75% 35%,#0a62a9 0,#08224d 25%,#040c1d 62%)}.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(38,110,180,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(38,110,180,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:690px;gap:45px}.eyebrow{color:#41c8ff;text-transform:uppercase;letter-spacing:.16em;font-weight:700}.hero h1{font-size:62px;line-height:1.02;margin:18px 0}.hero h1 span{background:linear-gradient(90deg,#35c7ff,#ff9d22);-webkit-background-clip:text;color:transparent}.hero p{font-size:19px;line-height:1.7;color:#c8d7ee;max-width:690px}.actions{display:flex;gap:12px;margin-top:30px}.primary{background:linear-gradient(90deg,#087df1,#03b4e8);border:0;padding:14px 20px;font-weight:700}.secondary{padding:14px 20px}
.code-orb{height:460px;border-radius:50%;position:relative;background:radial-gradient(circle,#0d86d7 0,#062b5a 34%,#04142d 65%);box-shadow:0 0 90px #087dd055,inset 0 0 80px #00baff33;display:grid;place-items:center}.code-orb:before{content:"</>";font:800 100px ui-monospace;color:#fff;text-shadow:0 0 30px #20baff}.ring{position:absolute;border:1px solid #28bafc66;border-radius:50%;inset:35px;transform:rotate(25deg)}.ring.r2{inset:80px;transform:rotate(-35deg);border-color:#ff9d2255}
.metrics{margin-top:-50px;position:relative;z-index:4}.metricgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.metric{background:#081a38eF;border:1px solid #214d7e;border-radius:18px;padding:24px;box-shadow:0 20px 60px #0006}.metric strong{display:block;font-size:28px;color:#35c7ff}.metric span{color:#c6d5eb}
section{padding:88px 0}.light{background:#f5f8fc;color:#07152d}.title{text-align:center;max-width:850px;margin:0 auto 45px}.title h2{font-size:42px;margin:8px 0 14px}.title p{color:#6d7c92;line-height:1.7}.dark .title p{color:#aebed6}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service{border:1px solid #dbe4f0;background:white;border-radius:18px;padding:25px;min-height:180px;transition:.2s}.service:hover{transform:translateY(-5px);box-shadow:0 15px 35px #1232}.service i{font-style:normal;font-size:30px}.service h3{margin:15px 0 8px}.service p{font-size:14px;color:#6c7890;line-height:1.55}
.dark{background:#06142d}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project{background:linear-gradient(145deg,#0b2148,#07162f);border:1px solid #204a79;border-radius:18px;padding:26px;min-height:185px}.project small{color:#39c3ff}.project p{color:#aebed6;line-height:1.6}
.aboutgrid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.visual{min-height:390px;border-radius:24px;background:radial-gradient(circle at 30% 30%,#0ba8dd,#08234e 45%,#051226);display:grid;place-items:center;box-shadow:inset 0 0 60px #0005}.visual pre{font-size:25px;color:#8fe8ff;line-height:1.7}.aboutgrid h2{font-size:42px}.aboutgrid p{color:#687990;line-height:1.8}
.contact{background:linear-gradient(110deg,#07172f,#0a4381);border-radius:25px;padding:45px;display:grid;grid-template-columns:1fr 1fr;gap:35px}.contact h2{font-size:38px;margin-top:0}.contact p{color:#bed0e9;line-height:1.7}.form{display:grid;gap:12px}.form input,.form textarea{width:100%;background:#071a38;border:1px solid #31577f;color:white;border-radius:10px;padding:14px}.form textarea{min-height:110px}.check{font-size:12px;color:#b7c7dc}
footer{background:#020817;border-top:1px solid #17294a;padding:50px 0 25px}.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:35px}.foot p,.foot a{color:#9eafc8;line-height:1.8}.legalbar{border-top:1px solid #17294a;margin-top:30px;padding-top:20px;color:#7f91ad;font-size:12px}
.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:99;background:#fff;color:#14213a;border-radius:16px;padding:18px;box-shadow:0 20px 80px #0008;display:none}.cookie.show{display:block}.cookiein{max-width:1100px;margin:auto;display:flex;align-items:center;gap:18px}.cookie p{margin:0;flex:1;font-size:13px;line-height:1.5}.cookie-actions{display:flex;gap:8px}.cookie button{padding:11px 15px;border-radius:9px;border:1px solid #183a68;background:white;cursor:pointer}.cookie .accept{background:#0a65d8;color:#fff}
.legal{max-width:900px;margin:auto;padding:80px 24px}.legal h1{font-size:42px}.legal h2{margin-top:35px}.legal p,.legal li{color:#b8c7dc;line-height:1.75}
@media(max-width:900px){.links{display:none}.hero .wrap,.aboutgrid,.contact{grid-template-columns:1fr}.hero h1{font-size:43px}.code-orb{height:330px;margin-bottom:50px}.metricgrid{grid-template-columns:1fr 1fr}.services{grid-template-columns:1fr 1fr}.projects{grid-template-columns:1fr}.foot{grid-template-columns:1fr}.cookiein{display:block}.cookie-actions{margin-top:12px;flex-wrap:wrap}}
@media(max-width:520px){.services,.metricgrid{grid-template-columns:1fr}.hero h1{font-size:37px}.top .wrap{justify-content:flex-start}.brand b{font-size:17px}.brand img{width:48px;height:48px}.title h2,.aboutgrid h2{font-size:34px}}


/* ===== RESOLVIA FINAL PREMIUM GLASS TECHNOLOGY THEME ===== */
:root{
 --glass:rgba(8,28,62,.52);
 --glass2:rgba(255,255,255,.08);
 --cyan:#26d5ff;
 --electric:#1677ff;
 --amber:#ff9d18;
}
body{
 background:
 radial-gradient(circle at 15% 10%,rgba(0,170,255,.12),transparent 28%),
 radial-gradient(circle at 90% 20%,rgba(255,140,0,.08),transparent 22%),
 #020817;
}
header{background:rgba(3,13,32,.62)!important;box-shadow:0 12px 45px rgba(0,0,0,.28)}
.hero{
 min-height:760px;
 background:
 radial-gradient(circle at 78% 35%,rgba(21,151,255,.45),transparent 19%),
 radial-gradient(circle at 76% 35%,#0a315f 0,#061b3c 28%,#020817 68%);
}
.hero:before{
 content:"";position:absolute;inset:-20%;
 background:
 repeating-radial-gradient(circle at 72% 42%,transparent 0 42px,rgba(38,213,255,.12) 43px 44px,transparent 45px 86px);
 animation:spinbg 28s linear infinite;opacity:.7
}
@keyframes spinbg{to{transform:rotate(360deg)}}
.code-orb{
 background:radial-gradient(circle at 45% 38%,rgba(42,219,255,.8),rgba(7,64,125,.65) 27%,rgba(2,13,32,.65) 67%);
 border:1px solid rgba(91,219,255,.48);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 box-shadow:0 0 100px rgba(0,159,255,.3),inset 0 0 90px rgba(31,207,255,.18);
 animation:floatOrb 5s ease-in-out infinite;
}
@keyframes floatOrb{50%{transform:translateY(-12px) scale(1.015)}}
.metric,.project,.contact{
 background:linear-gradient(145deg,rgba(10,37,79,.68),rgba(4,17,40,.54))!important;
 border:1px solid rgba(83,188,255,.30)!important;
 backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 22px 65px rgba(0,0,0,.28);
}
.metric:hover,.project:hover{
 transform:translateY(-6px);
 border-color:rgba(38,213,255,.65)!important;
 box-shadow:0 25px 70px rgba(0,124,255,.16),inset 0 1px 0 rgba(255,255,255,.18);
}
.service{
 background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(241,248,255,.68))!important;
 border:1px solid rgba(255,255,255,.85)!important;
 backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
 box-shadow:0 18px 45px rgba(6,31,73,.09),inset 0 1px 0 #fff;
}
.service:hover{
 transform:translateY(-8px) scale(1.015);
 box-shadow:0 25px 55px rgba(0,107,220,.16),0 0 0 1px rgba(20,160,255,.18);
}
.btn{transition:.25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,135,255,.25)}
.primary{background:linear-gradient(110deg,#0d6efd,#14c6f4)!important}
.eyebrow{filter:drop-shadow(0 0 12px rgba(38,213,255,.28))}
.visual{
 border:1px solid rgba(80,201,255,.3);
 backdrop-filter:blur(18px);
 box-shadow:0 28px 80px rgba(0,56,135,.18),inset 0 1px 0 rgba(255,255,255,.15);
}
.form input,.form textarea{
 background:rgba(3,18,43,.55)!important;
 backdrop-filter:blur(12px);
 border-color:rgba(78,167,230,.38)!important;
}
.lang button{backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ===== V1 ADVANCED INTERACTION LAYER ===== */
.noise{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(28,177,255,.09),transparent 66%);transform:translate(-50%,-50%);transition:opacity .3s}
.hero-tech{position:relative;min-height:540px;display:grid;place-items:center}
.live-badge{position:absolute;top:20px;right:10px;padding:9px 13px;border:1px solid rgba(72,203,255,.32);border-radius:999px;background:rgba(4,25,55,.45);backdrop-filter:blur(14px);font-size:10px;letter-spacing:.14em;color:#bfeeff}
.live-badge span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#25e8a7;box-shadow:0 0 12px #25e8a7;margin-right:7px}
.glass-float{position:absolute;min-width:170px;padding:13px 16px;border-radius:14px;background:linear-gradient(145deg,rgba(11,42,83,.54),rgba(5,18,42,.38));border:1px solid rgba(100,210,255,.25);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(0,0,0,.25);font-size:9px;letter-spacing:.12em;color:#82cfee;animation:drift 6s ease-in-out infinite}
.glass-float b{display:block;color:white;font-size:11px;margin-top:5px}.f1{left:-5px;top:110px}.f2{right:-10px;top:260px;animation-delay:-2s}.f3{left:25px;bottom:45px;animation-delay:-4s}
@keyframes drift{50%{transform:translateY(-10px) translateX(5px)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}
.service,.project,.metric{position:relative;overflow:hidden}
.service:after,.project:after,.metric:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.12) 48%,transparent 68%);transform:translateX(-130%);transition:.7s;pointer-events:none}
.service:hover:after,.project:hover:after,.metric:hover:after{transform:translateX(130%)}
header.scrolled{background:rgba(2,10,25,.78)!important;box-shadow:0 15px 55px rgba(0,0,0,.35)}
@media(max-width:900px){.cursor-glow{display:none}.glass-float{display:none}.hero-tech{min-height:390px}.live-badge{right:50%;transform:translateX(50%)}}