:root{--c:#22d3ee;--f:#d946ef;--e:#10b981;--bg:#05060a;--mut:rgba(255,255,255,.72)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial;background:var(--bg);color:#fff;overflow-x:hidden}
#grid{position:fixed;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;opacity:.35}
#glow{position:fixed;inset:0;pointer-events:none}
#glowDot{position:absolute;width:320px;height:320px;border-radius:999px;filter:blur(90px);background:radial-gradient(circle,rgba(34,211,238,.22),transparent 62%)}
nav{position:sticky;top:0;z-index:50;background:rgba(5,6,10,.72);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
nav .wrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:10px}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px;position:relative}
.brand::after{content:"";position:absolute;inset:-8px -10px;border-radius:14px;background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(217,70,239,.12));filter:blur(12px);opacity:.7;z-index:-1}
.navLinks{display:flex;flex-wrap:wrap;gap:6px}
.navLinks a{color:rgba(255,255,255,.72);text-decoration:none;padding:8px 10px;border-radius:12px;border:1px solid transparent;transition:all .2s ease}
.navLinks a:hover{color:#fff;border-color:rgba(34,211,238,.25);box-shadow:0 0 18px rgba(34,211,238,.10)}
.navLinks a.active{color:#fff;border-color:rgba(34,211,238,.28);background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(217,70,239,.10));text-shadow:0 0 12px rgba(34,211,238,.45)}
.progress{height:2px;background:rgba(255,255,255,.05)}
#progressBar{height:2px;width:0;background:linear-gradient(90deg,var(--c),var(--f),var(--e))}
.hero{max-width:1100px;margin:54px auto 0;padding:0 16px}
.heroInner{animation:fadeUp .6s ease both}
.badge{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;color:rgba(34,211,238,.75)}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(34,211,238,.95);box-shadow:0 0 18px rgba(34,211,238,.6)}
.hero h1{margin:12px 0 0;font-size:clamp(30px,4.3vw,56px);line-height:1.06;background:linear-gradient(90deg,rgba(34,211,238,.95),#fff,rgba(217,70,239,.95));-webkit-background-clip:text;color:transparent}
.sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;color:rgba(255,255,255,.70)}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;border:1px solid rgba(34,211,238,.25);background:rgba(5,6,10,.35);font-size:12px;color:rgba(240,253,255,.9);box-shadow:0 0 18px rgba(34,211,238,.07)}
.lead{max-width:760px;margin:16px 0 0;color:var(--mut);line-height:1.65}
.ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btnPrimary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 14px;border-radius:14px;background:linear-gradient(90deg,var(--c),var(--f));color:#061016;font-weight:800;box-shadow:0 0 36px rgba(34,211,238,.18);transition:filter .2s ease, transform .2s ease;border:0;cursor:pointer}
.btnPrimary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btnGhost{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,18,.55);color:rgba(255,255,255,.90);transition:all .2s ease;cursor:pointer}
.btnGhost:hover{border-color:rgba(34,211,238,.25);box-shadow:0 0 18px rgba(34,211,238,.10);transform:translateY(-1px)}
.btnIcon{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,18,.45);color:rgba(255,255,255,.86)}
.viz{position:relative;margin-top:20px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,18,.48);overflow:hidden}
.vizGrid{position:absolute;inset:0;background:linear-gradient(to right,rgba(34,211,238,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(217,70,239,.06) 1px,transparent 1px);background-size:18px 18px;opacity:.9}
.bars{position:relative;display:flex;align-items:flex-end;gap:4px;padding:14px}
.bar{width:10px;border-radius:6px;background:linear-gradient(to top,rgba(16,185,129,.25),rgba(34,211,238,.55),rgba(217,70,239,.65));opacity:.9;transform-origin:bottom}
.vizLabel{position:relative;padding:0 14px 12px;font-size:12px;color:rgba(255,255,255,.62)}
main{max-width:1100px;margin:0 auto;padding:0 16px 80px}
.section{margin-top:78px;scroll-margin-top:110px}
.sectionHeader{display:flex;align-items:flex-end;gap:14px;margin-bottom:14px}
.kicker{font-size:11px;letter-spacing:.14em;color:rgba(34,211,238,.60);font-weight:700}
.sectionHeader h2{margin:4px 0 0;font-size:22px}
.rule{height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(34,211,238,.25),transparent)}
.card{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,18,.60);box-shadow:0 10px 45px rgba(0,0,0,.55);padding:16px;overflow:hidden}
.cardTitle{font-weight:800}
.cardHint{margin-top:6px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.5}
.skillsLayout{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.skillsLayout{grid-template-columns:360px 1fr}}
#spotlight{margin-top:12px;display:grid;gap:10px}
.spot{border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.35);padding:12px}
.spot .t{font-weight:800}
.spot .d{margin-top:6px;color:rgba(255,255,255,.68);font-size:13px}
.group{margin-bottom:14px}
.groupHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.groupHead .gTitle{font-weight:800}
.groupHead .gPill{font-size:12px;border:1px solid rgba(34,211,238,.25);border-radius:999px;padding:6px 10px;background:rgba(5,6,10,.35);color:rgba(240,253,255,.9)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;border-radius:14px;padding:8px 12px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.28);color:rgba(255,255,255,.78)}
.filters{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.filters{grid-template-columns:1fr 320px}}
.fieldLabel{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.58);font-weight:700}
.searchRow{margin-top:8px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.35);padding:10px 12px}
.searchRow input{width:100%;border:0;outline:none;background:transparent;color:#fff;font-size:14px}
select{width:100%;margin-top:8px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.35);padding:10px 12px;color:#fff;outline:none}
.tip{margin-top:10px;color:rgba(255,255,255,.52);font-size:12px}
.projectGrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.projectGrid{grid-template-columns:1fr 1fr}}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill2{font-size:12px;border-radius:999px;border:1px solid rgba(34,211,238,.25);background:rgba(5,6,10,.35);padding:6px 10px;color:rgba(240,253,255,.9)}
.hlist{margin-top:12px;display:grid;gap:8px}
.hitem{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.26);color:rgba(255,255,255,.74);font-size:13px}
.hdot{margin-top:6px;width:9px;height:9px;border-radius:50%;background:rgba(34,211,238,.95);box-shadow:0 0 18px rgba(34,211,238,.6)}
.mediaHead{margin-top:16px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.12em}
.mediaGrid{margin-top:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.mediaGrid{grid-template-columns:repeat(2,1fr)}}
.mThumb{border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.32);overflow:hidden;cursor:pointer;position:relative;padding:0}
.mThumb img{width:100%;height:120px;object-fit:cover;display:block;opacity:.9}
.mBadge{position:absolute;left:10px;top:10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.55);padding:6px 8px;font-size:11px;color:rgba(255,255,255,.82)}
.mPlay{position:absolute;inset:0;display:grid;place-items:center}
.mPlay span{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(5,6,10,.55);display:grid;place-items:center}
.noResults{margin-top:14px;padding:26px;border-radius:18px;border:1px dashed rgba(255,255,255,.20);background:rgba(5,6,10,.40);text-align:center;color:rgba(255,255,255,.72)}
.svcGrid{margin-top:14px;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.svcGrid{grid-template-columns:1fr 1fr}}
.svc{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.30);padding:14px}
.svcTop{display:flex;align-items:center;gap:10px}
.svcIcon{width:38px;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,18,.55);display:grid;place-items:center}
.svcTitle{font-weight:900}
.svcDesc{margin-top:8px;color:rgba(255,255,255,.72);line-height:1.55}
.svcBullets{margin-top:10px;display:grid;gap:8px}
.svcBullets .b{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.75);font-size:13px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.22)}
.svcFoot{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.svcSteps{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:900px){.svcSteps{grid-template-columns:1fr 1fr}}
.step{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.26)}
.step .n{width:28px;height:28px;border-radius:12px;background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.22);display:grid;place-items:center;font-weight:900}
.step .d{margin-top:6px;color:rgba(255,255,255,.62);font-size:12px;line-height:1.45}
.timeline{display:grid;gap:12px}
.tItem{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,18,.55);padding:14px}
.tTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.tCompany{font-weight:900}
.tMeta{color:rgba(255,255,255,.62);font-size:12px}
.tRole{margin-top:6px;color:rgba(255,255,255,.80)}
.tBullets{margin-top:10px;display:grid;gap:8px}
.tBullets .li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.74);font-size:13px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(5,6,10,.22)}
.tBullets .dot2{margin-top:6px;width:9px;height:9px;border-radius:50%;background:rgba(34,211,238,.95);box-shadow:0 0 18px rgba(34,211,238,.6)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.lbCard{width:min(1100px,100%);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,18,.85);box-shadow:0 18px 90px rgba(0,0,0,.75)}
.lbTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.lbTitle{font-size:13px;font-weight:800}
.lbCaption{margin-top:4px;color:rgba(255,255,255,.62);font-size:12px}
.lbClose{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(5,6,10,.35);color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer}
.lbBody{background:#000}
.lbBody img{width:100%;height:auto;display:block;max-height:80vh;object-fit:contain}
.lbBody iframe{width:100%;height:min(80vh,700px);border:0;display:block}
.footer{margin-top:60px;padding:20px 0;text-align:center;color:rgba(255,255,255,.45);font-size:12px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* export hardening (prevents Hostinger/theme CSS from overriding our step layout) */
#services .svcFoot{margin-top:14px !important;display:flex !important;flex-direction:column !important;gap:12px !important}
#services .svcSteps{display:grid !important;gap:10px !important;grid-template-columns:1fr !important}
@media(min-width:900px){#services .svcSteps{grid-template-columns:1fr 1fr !important}}
#services .svcSteps .step{display:flex !important;gap:10px !important;align-items:flex-start !important;padding:12px !important;border-radius:16px !important;border:1px solid rgba(255,255,255,.10) !important;background:rgba(5,6,10,.26) !important}
#services .svcSteps .step .n{width:28px !important;height:28px !important;border-radius:12px !important;background:rgba(34,211,238,.16) !important;border:1px solid rgba(34,211,238,.22) !important;display:grid !important;place-items:center !important;font-weight:900 !important;flex:0 0 auto !important}
#services .svcSteps .step .d{margin-top:6px !important;color:rgba(255,255,255,.62) !important;font-size:12px !important;line-height:1.45 !important}