:root{
  --blue:#1E9FE0;--bld:#1680B8;--blg:rgba(30,159,224,.14);
  --red:#E03030;--rdg:rgba(224,48,48,.12);
  --ink:#080D12;--ink2:#0E1820;--ink3:#152030;
  --muted:#4A6880;--soft:#7A9AB0;--lt:#EDF4F8;
  --white:#fff;
  --fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--ink);color:var(--white);overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ink2)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}


.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.tag{font-family:var(--fb);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
.h1{font-family:var(--fd);font-size:clamp(2.8rem,7vw,5.5rem);font-weight:900;line-height:.96;letter-spacing:.01em;margin-bottom:22px}
.h2{font-family:var(--fd);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1;letter-spacing:.01em;margin-bottom:16px}
.h3{font-family:var(--fd);font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:700;line-height:1.1;margin-bottom:10px}
.accent{color:var(--blue)}
.accent-r{color:var(--red)}
.lead{font-size:1.05rem;line-height:1.75;color:var(--soft);max-width:580px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;font-family:var(--fb);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:3px;cursor:pointer;border:none;transition:.25s var(--ease)}
.btn-p{background:var(--blue);color:var(--white)}
.btn-p:hover{background:#3DB8F0;box-shadow:0 6px 28px rgba(30,159,224,.4);transform:translateY(-2px)}
.btn-r{background:var(--red);color:var(--white)}
.btn-r:hover{background:#F04040;box-shadow:0 6px 28px rgba(224,48,48,.4);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.25)}
.btn-o:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1cb956;box-shadow:0 6px 28px rgba(37,211,102,.4);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-ghost:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}
.divider{width:48px;height:3px;background:var(--red);margin-bottom:28px}
.section{padding:100px 0}
.section-alt{background:var(--ink2)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:999;height:68px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(8,13,18,.96);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,159,224,.1);transition:.3s}
.nav-logo-btn{background:none;border:none;cursor:pointer;padding:4px 0;display:flex;align-items:center}
.nav-logo-btn img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;flex:1;justify-content:center}
.nav-links button,.nav-links a{background:none;border:none;font-family:var(--fb);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);cursor:pointer;transition:.2s;padding:4px 0;position:relative;text-decoration:none;display:inline-block}
.nav-links button::after,.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--red);transition:.25s}
.nav-links button:hover,.nav-links button.active,.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links button.active::after,.nav-links button:hover::after,.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{display:block;width:22px;height:2px;background:var(--white);transition:.3s}
.mob-nav{display:none;position:fixed;top:68px;left:0;right:0;z-index:998;background:var(--ink2);border-bottom:1px solid rgba(30,159,224,.12);flex-direction:column;padding:24px;gap:4px}
.mob-nav.open{display:flex}
.mob-nav button,.mob-nav a{background:none;border:none;font-family:var(--fb);font-size:.95rem;font-weight:500;color:var(--soft);cursor:pointer;text-align:left;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);transition:.2s;display:block;text-decoration:none}
.mob-nav button:hover,.mob-nav button.active,.mob-nav a:hover,.mob-nav a.active{color:var(--blue)}

/* HERO */
.hero{height:calc(100vh - 68px);height:calc(100svh - 68px);min-height:560px;display:flex;align-items:center;padding:120px 0 60px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 65% 55% at 75% 50%,rgba(30,159,224,.1) 0,transparent 65%),radial-gradient(ellipse 40% 40% at 10% 80%,rgba(224,48,48,.06) 0,transparent 60%),linear-gradient(150deg,#080D12 0%,#0C1720 100%)}
.hero-lines{position:absolute;inset:0;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cline x1='0' y1='0' x2='72' y2='0' stroke='rgba(30,159,224,.28)' stroke-width='1' stroke-dasharray='3 7'/%3E%3Cline x1='0' y1='0' x2='0' y2='72' stroke='rgba(30,159,224,.28)' stroke-width='1' stroke-dasharray='3 7'/%3E%3C/svg%3E");background-size:72px 72px}
.hero-content{position:relative;z-index:10;max-width:820px}

/* MOOD LIGHT ORBS */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(30,159,224,.2) 0%,transparent 70%);top:-160px;right:-60px;z-index:2;animation:orbBreathe 9s ease-in-out infinite}
.orb-2{width:440px;height:440px;background:radial-gradient(circle,rgba(224,48,48,.14) 0%,transparent 70%);bottom:-80px;left:25%;z-index:2;animation:orbBreathe 13s ease-in-out infinite 3.5s}
.orb-3{width:520px;height:520px;background:radial-gradient(circle,rgba(30,159,224,.11) 0%,transparent 70%);top:30%;right:18%;z-index:2;animation:orbDrift 17s ease-in-out infinite 6s}
@keyframes orbBreathe{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.28);opacity:1}}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1);opacity:.45}33%{transform:translate(50px,-35px) scale(1.18);opacity:.8}66%{transform:translate(-28px,40px) scale(.88);opacity:.55}}

/* FLOATING BACKGROUND ICONS */
.hero-icons{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hico{position:absolute;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 1s ease-in-out,filter 1s ease-in-out;will-change:opacity,filter}
/* ── Edge icons (right side) — sizes only, JS controls position + visibility ── */
.hico-1{width:155px;height:155px;stroke:var(--blue);stroke-width:.45}
.hico-2{width:125px;height:125px;stroke:var(--blue);stroke-width:.45}
.hico-3{width:98px;height:98px;stroke:#fff;stroke-width:.45}
.hico-4{width:135px;height:135px;stroke:var(--blue);stroke-width:.45}
.hico-5{width:90px;height:90px;stroke:var(--red);stroke-width:.45}
.hico-6{width:115px;height:115px;stroke:var(--blue);stroke-width:.45}
.hico-7{width:80px;height:80px;stroke:var(--red);stroke-width:.45}
/* ── Edge icons (left side) ── */
.hico-8{width:112px;height:112px;stroke:var(--blue);stroke-width:.45}
.hico-9{width:95px;height:95px;stroke:#fff;stroke-width:.45}
.hico-10{width:88px;height:88px;stroke:var(--red);stroke-width:.45}
.hico-11{width:130px;height:130px;stroke:var(--blue);stroke-width:.45}
.hico-12{width:82px;height:82px;stroke:#fff;stroke-width:.45}
/* ── Middle icons ── */
.hico-13{width:140px;height:140px;stroke:var(--blue);stroke-width:.35}
.hico-14{width:105px;height:105px;stroke:#fff;stroke-width:.35}
.hico-15{width:90px;height:90px;stroke:var(--red);stroke-width:.35}
.hico-16{width:118px;height:118px;stroke:var(--blue);stroke-width:.35}
.hico-17{width:80px;height:80px;stroke:#fff;stroke-width:.35}
.hico-18{width:110px;height:110px;stroke:var(--blue);stroke-width:.45}
.hico-19{width:150px;height:150px;stroke:var(--red);stroke-width:.45}
@media(max-width:768px){.hico-5,.hico-6,.hico-8,.hico-9,.hico-10,.hico-11,.hico-12,.hico-13,.hico-14,.hico-15,.hico-16,.hico-17,.hico-18,.hico-19{display:none}}

/* NAV LEFT GROUP */
.nav-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* NAV SERVICE TAG */
.nav-svc{display:flex;align-items:center;gap:7px;opacity:0;transition:opacity .6s ease-in-out;pointer-events:none;user-select:none}
.nav-svc.show{opacity:1}
.nav-svc-dot{width:5px;height:5px;border-radius:50%;background:#fff;flex-shrink:0;opacity:.6}
.nav-svc-txt{font-family:var(--fb);font-size:.72rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.06em;white-space:nowrap;min-width:120px}
@media(max-width:768px){.nav-svc{display:none}}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(30,159,224,.08);border:1px solid rgba(30,159,224,.22);border-radius:100px;padding:7px 18px;font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:32px}
.hero-badge i{width:7px;height:7px;background:var(--red);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero .h1{font-size:clamp(3.2rem,8vw,6.8rem)}
.hero-sub{font-size:1.15rem;line-height:1.7;color:var(--soft);max-width:560px;margin-bottom:42px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:64px}
.hero-stats{display:flex;flex-wrap:wrap;gap:40px}
.stat-num{font-family:var(--fd);font-size:2.8rem;font-weight:900;color:var(--white);line-height:1}
.stat-num span{color:var(--blue)}
.stat-label{font-size:.8rem;color:var(--muted);margin-top:4px;font-weight:500;letter-spacing:.05em}
.hero-scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.scroll-arrow{width:18px;height:28px;border:1.5px solid var(--muted);border-radius:10px;position:relative}
.scroll-arrow::after{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:3px;height:6px;background:var(--red);border-radius:2px;animation:scrollDown 1.6s ease infinite}
@keyframes scrollDown{0%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:0;transform:translateX(-50%) translateY(10px)}100%{opacity:0}}

/* MARQUEE STRIP */
.services-strip{background:var(--ink3);border-top:1px solid rgba(30,159,224,.1);border-bottom:1px solid rgba(30,159,224,.1);padding:18px 0;overflow:hidden;height:68px;display:flex;align-items:center}
.strip-inner{display:flex;gap:40px;animation:marquee 32s linear infinite;white-space:nowrap;width:max-content}
.strip-item{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:1.1rem;font-weight:700;letter-spacing:.05em;color:var(--soft)}
.strip-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.strip-dot.bl{background:var(--blue)}
.strip-dot.rd{background:var(--red)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SERVICE CARDS */
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:60px}
.srv-card{background:var(--ink3);padding:40px 32px;position:relative;overflow:hidden;transition:.3s var(--ease);cursor:default}
.srv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;transition:.35s var(--ease)}
.srv-card.blue::before{background:var(--blue)}
.srv-card.red::before{background:var(--red)}
.srv-card:hover{background:#162235;transform:translateY(-4px)}
.srv-card:hover::before{transform:scaleX(1)}
.srv-icon{width:50px;height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.srv-icon.bl{background:var(--blg)}
.srv-icon.rd{background:var(--rdg)}
.srv-icon svg{width:24px;height:24px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srv-icon.bl svg{stroke:var(--blue)}
.srv-icon.rd svg{stroke:var(--red)}
.srv-card p{font-size:.88rem;line-height:1.7;color:var(--soft);margin-bottom:24px}
.srv-link{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:40px;border:1.5px solid;background:transparent;cursor:pointer;transition:background .22s,color .22s,transform .18s,box-shadow .22s;text-decoration:none}
.srv-link.bl{color:var(--blue);border-color:var(--blue)}
.srv-link.rd{color:var(--red);border-color:var(--red)}
.srv-link .arr{display:inline-block;transition:transform .2s}
.srv-link:hover .arr{transform:translateX(4px)}
.srv-link.bl:hover{background:var(--blue);color:#fff;box-shadow:0 4px 18px rgba(30,159,224,.25);transform:translateY(-1px)}
.srv-link.rd:hover{background:var(--red);color:#fff;box-shadow:0 4px 18px rgba(224,48,48,.25);transform:translateY(-1px)}

/* PORTFOLIO */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:56px}
.port-item{position:relative;overflow:hidden;background:var(--ink3);cursor:pointer;border-radius:2px}
.port-item.wide{grid-column:span 2}
.port-img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block;transition:.5s var(--ease);filter:brightness(.85)}
.port-item:hover .port-img{transform:scale(1.04);filter:brightness(1)}
.port-placeholder{width:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,var(--ink3),var(--ink2));color:var(--muted);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;transition:.3s}
.port-item:hover .port-placeholder{background:linear-gradient(135deg,#152030,#1a2d40)}
.port-icon{width:38px;height:38px;stroke:var(--blue);opacity:.45;fill:none;stroke-width:1.5}
.port-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 55%);opacity:0;transition:.3s;display:flex;align-items:flex-end;padding:20px}
.port-item:hover .port-overlay{opacity:1}
.port-label{font-family:var(--fd);font-size:1.1rem;font-weight:700}
.port-cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}

/* WHY US */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:60px}
.why-items{display:flex;flex-direction:column;gap:30px}
.why-item{display:flex;gap:18px}
.why-num{font-family:var(--fd);font-size:3rem;font-weight:900;color:rgba(224,48,48,.15);line-height:1;flex-shrink:0;width:52px}
.why-item h3{font-family:var(--fd);font-size:1.4rem;font-weight:700;margin-bottom:6px}
.why-item p{font-size:.88rem;line-height:1.7;color:var(--soft)}
.why-visual{background:var(--ink3);border-radius:4px;overflow:hidden;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(30,159,224,.1)}
.why-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.why-badge-wrap{position:absolute;bottom:24px;left:24px;right:24px;display:flex;gap:12px;flex-wrap:wrap}
.why-badge{background:rgba(8,13,18,.9);backdrop-filter:blur(12px);border:1px solid rgba(30,159,224,.2);border-radius:3px;padding:12px 18px}
.why-badge-num{font-family:var(--fd);font-size:1.8rem;font-weight:900;color:var(--blue);line-height:1}
.why-badge-txt{font-size:.72rem;color:var(--soft);margin-top:2px}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg,var(--ink3) 0%,rgba(20,60,90,.5) 100%);border:1px solid rgba(30,159,224,.14);border-radius:6px;padding:60px 52px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden;margin-top:80px}
.cta-banner::before{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(30,159,224,.08),transparent 70%)}
.cta-banner h2{font-family:var(--fd);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;max-width:480px;margin-bottom:8px}
.cta-banner p{color:var(--soft);font-size:.93rem}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}

/* SERVICES PAGE */
.page-hero{padding:160px 0 80px;background:linear-gradient(150deg,var(--ink) 0%,var(--ink2) 100%);position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40%;background:radial-gradient(ellipse at right,rgba(30,159,224,.06),transparent 70%)}
.srv-detail{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:80px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.srv-detail:last-child{border-bottom:none}
.srv-detail.flip{direction:rtl}
.srv-detail.flip>*{direction:ltr}
.srv-detail-img{background:var(--ink3);border-radius:4px;min-height:340px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid rgba(30,159,224,.08)}
.srv-detail-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.srv-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:60px}
.srv-placeholder svg{width:48px;height:48px;fill:none;stroke-width:1.3}
.srv-placeholder.bl svg{stroke:var(--blue);opacity:.35}
.srv-placeholder.rd svg{stroke:var(--red);opacity:.35}
.srv-detail-body>ul{margin:16px 0 24px 0;display:flex;flex-direction:column;gap:8px}
.srv-detail-body>ul li{font-size:.88rem;color:var(--soft);line-height:1.6;list-style:none;padding-left:18px;position:relative}
.srv-detail-body>ul li::before{content:'';position:absolute;left:0;top:10px;width:7px;height:1.5px}
.srv-detail-body>ul li.bl::before{background:var(--blue)}
.srv-detail-body>ul li.rd::before{background:var(--red)}

/* SERVICE CATEGORY HEADERS */
.srv-cat-header{padding:60px 0 20px;border-top:1px solid rgba(255,255,255,.06);margin-top:20px}
.srv-cat-header:first-child{border-top:none;margin-top:0}
.srv-cat-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:3px;font-family:var(--fd);font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.srv-cat-badge.bl{background:var(--blg);color:var(--blue)}
.srv-cat-badge.rd{background:var(--rdg);color:var(--red)}
/* Service group backgrounds */
.srv-group{border-radius:8px;padding:0 28px;margin:32px -28px;border:1px solid rgba(255,255,255,.04)}
.srv-group-bl{background:rgba(30,159,224,.025)}
.srv-group-rd{background:rgba(224,48,48,.02)}
.srv-group .srv-cat-header{border-top:none;margin-top:0}
.srv-group .srv-detail:last-child{border-bottom:none}
/* Quick-jump cards */
.srv-jumps{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:40px 0 20px;padding:20px;background:var(--ink3);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.srv-jump{background:none;border:none;cursor:pointer;padding:14px 6px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.2s;color:var(--soft);width:100%}
.srv-jump svg{width:26px;height:26px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.srv-jump span{font-size:.6rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-align:center;line-height:1.3}
.srv-jump:hover{background:rgba(30,159,224,.08);color:var(--blue)}
.srv-jump:hover svg{stroke:var(--blue);filter:drop-shadow(0 0 5px rgba(30,159,224,.4))}
/* How it works */
.srv-process{margin:48px 0;padding:48px 40px;background:var(--ink3);border-radius:8px;border:1px solid rgba(255,255,255,.06);text-align:center}
.srv-process-label{font-family:var(--fb);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:36px}
.srv-process-steps{display:flex;align-items:flex-start;justify-content:center}
.srv-process-step{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;gap:10px}
.srv-process-num{font-family:var(--fb);font-size:2.2rem;font-weight:900;color:var(--blue);opacity:.18;line-height:1;margin-bottom:-4px}
.srv-process-icon{width:52px;height:52px;background:var(--blg);border-radius:50%;display:flex;align-items:center;justify-content:center}
.srv-process-icon svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srv-process-title{font-family:var(--fb);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.srv-process-desc{font-size:.75rem;line-height:1.6;color:var(--soft);max-width:140px}
.srv-process-arrow{color:var(--blue);opacity:.35;font-size:1.6rem;padding:0 4px;margin-top:48px;flex-shrink:0;line-height:1}

/* PORTFOLIO */
.port-page-hero{padding:160px 0 80px;background:linear-gradient(150deg,var(--ink) 0%,var(--ink2) 100%)}
.port-filter{display:flex;flex-wrap:wrap;gap:10px;margin:48px 0 40px}
.filter-btn{background:transparent;border:1.5px solid rgba(255,255,255,.14);color:var(--soft);font-family:var(--fb);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:2px;cursor:pointer;transition:.25s}
.filter-btn:hover,.filter-btn.active{background:var(--blue);border-color:var(--blue);color:var(--white)}
.gallery-grid{columns:3;column-gap:10px}
.gallery-item{break-inside:avoid;margin-bottom:10px;position:relative;overflow:hidden;border-radius:2px;cursor:pointer;background:var(--ink3)}
.gallery-ph{width:100%;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--ink3),var(--ink2));font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:.3s}
.gallery-item:hover .gallery-ph{background:linear-gradient(135deg,#152030,#1a2d40)}
.gallery-ph svg{width:32px;height:32px;fill:none;stroke-width:1.4}
.gallery-ph.bl svg{stroke:var(--blue);opacity:.38}
.gallery-ph.rd svg{stroke:var(--red);opacity:.38}
.gallery-hover{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 55%);opacity:0;transition:.3s;display:flex;align-items:flex-end;padding:18px}
.gallery-item:hover .gallery-hover{opacity:1}
.gallery-lbl{font-family:var(--fd);font-size:1rem;font-weight:700}
.gallery-cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.gallery-img{width:100%;display:block;object-fit:cover;min-height:200px;transition:.5s var(--ease);filter:brightness(.85)}
.gallery-item:hover .gallery-img{transform:scale(1.04);filter:brightness(1)}
.gallery-cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:3px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:80px 0}
.about-logo-display{background:var(--ink3);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:48px;border:1px solid rgba(30,159,224,.1);min-height:420px;flex-direction:column;gap:24px}
.about-logo-display img{max-width:280px;width:100%;height:auto}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0}
.about-stat{background:var(--ink3);padding:24px;border-radius:3px}
.about-stat.bl{border-left:3px solid var(--blue)}
.about-stat.rd{border-left:3px solid var(--red)}
.about-stat-num{font-family:var(--fd);font-size:2.4rem;font-weight:900;color:var(--white);line-height:1}
.about-stat-num span{color:var(--blue)}
.about-stat-num span.r{color:var(--red)}
.about-stat-lbl{font-size:.76rem;color:var(--soft);margin-top:4px;letter-spacing:.04em}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:48px}
.val-card{background:var(--ink3);padding:32px 26px;border-radius:4px}
.val-card.bl{border-top:3px solid var(--blue)}
.val-card.rd{border-top:3px solid var(--red)}
.val-icon{width:46px;height:46px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.val-icon.bl{background:var(--blg)}
.val-icon.rd{background:var(--rdg)}
.val-icon svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.val-icon.bl svg{stroke:var(--blue)}
.val-icon.rd svg{stroke:var(--red)}
.val-card p{font-size:.86rem;line-height:1.7;color:var(--soft);margin-top:8px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding:80px 0}
.contact-info{display:flex;flex-direction:column;gap:28px}
.contact-block{display:flex;gap:16px;align-items:flex-start}
.contact-icon{width:46px;height:46px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon.bl{background:var(--blg)}
.contact-icon.rd{background:var(--rdg)}
.contact-icon svg{width:19px;height:19px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-icon.bl svg{stroke:var(--blue)}
.contact-icon.rd svg{stroke:var(--red)}
.contact-block h4{font-family:var(--fd);font-size:1rem;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.contact-block p,.contact-block a{font-size:.88rem;color:var(--soft);line-height:1.6;text-decoration:none}
.contact-block a:hover{color:var(--blue)}
.map-block{background:var(--ink3);border-radius:4px;overflow:hidden;border:1px solid rgba(30,159,224,.1);min-height:220px}
.map-block iframe{width:100%;height:240px;border:none;filter:invert(.9) hue-rotate(180deg) saturate(1.2) brightness(.85)}
.contact-form-wrap{background:var(--ink3);padding:44px;border-radius:6px;border:1px solid rgba(30,159,224,.08)}
.form-title{font-family:var(--fd);font-size:2rem;font-weight:800;margin-bottom:6px}
.form-sub{font-size:.86rem;color:var(--soft);margin-bottom:30px}
.form-group{margin-bottom:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.09);border-radius:3px;padding:11px 15px;font-family:var(--fb);font-size:.88rem;color:var(--white);transition:.25s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue);background:rgba(30,159,224,.04);box-shadow:0 0 0 3px rgba(30,159,224,.1)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group select option{background:var(--ink2);color:var(--white)}
.form-success{display:none;background:rgba(30,159,224,.08);border:1px solid rgba(30,159,224,.3);border-radius:4px;padding:18px;text-align:center;margin-top:14px;font-size:.88rem;color:var(--blue)}
.form-success.show{display:block}

/* FOOTER */
footer{background:var(--ink2);border-top:1px solid rgba(30,159,224,.08);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo img{height:36px;width:auto;margin-bottom:16px;display:block}
.footer-brand p{font-size:.83rem;line-height:1.7;color:var(--muted);max-width:280px;margin-bottom:22px}
.social-links{display:flex;gap:10px}
.social-link{width:34px;height:34px;background:rgba(255,255,255,.05);border-radius:3px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.2s}
.social-link:hover{background:var(--blue)}
.social-link svg{width:15px;height:15px;stroke:var(--soft);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.social-link:hover svg{stroke:var(--white)}
.footer-col h5{font-family:var(--fd);font-size:.95rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;color:var(--white)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul li button,.footer-col ul li a{background:none;border:none;font-family:var(--fb);font-size:.83rem;color:var(--muted);cursor:pointer;text-align:left;text-decoration:none;transition:.2s;padding:0}
.footer-col ul li button:hover,.footer-col ul li a:hover{color:var(--blue)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.76rem;color:var(--muted)}
.footer-bottom a{color:var(--blue);text-decoration:none}

/* RESPONSIVE */
@media(max-width:1024px){.why-grid,.srv-detail,.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.srv-detail.flip{direction:ltr}.footer-grid{grid-template-columns:1fr 1fr}.gallery-grid{columns:2}.port-grid{grid-template-columns:1fr 1fr}.port-item.wide{grid-column:auto}.srv-jumps{grid-template-columns:repeat(4,1fr)}.srv-process{padding:32px 20px}.srv-process-steps{flex-wrap:wrap;gap:20px 0}.srv-process-arrow{display:none}.srv-group{padding:0 16px;margin:24px -16px}}
@media(max-width:768px){nav{padding:0 16px}.nav-links,.nav-cta{display:none}.burger{display:flex}.section{padding:70px 0}.cta-banner{flex-direction:column;padding:36px 24px}.footer-grid{grid-template-columns:1fr}.gallery-grid{columns:1}.port-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.about-stats{grid-template-columns:1fr}.hero{height:auto;min-height:0;padding:90px 0 44px}.hero .h1{font-size:clamp(2.2rem,10vw,3.2rem)}.hero-sub{font-size:.95rem;margin-bottom:24px}.hero-btns{flex-direction:row;flex-wrap:wrap;gap:10px;margin-bottom:36px}.hero-btns .btn{flex:1;min-width:140px;padding:13px 16px;font-size:.72rem;justify-content:center}.hero-stats{gap:24px}}
@media(max-width:480px){.wrap{padding:0 16px}.contact-form-wrap{padding:24px 18px}}

.fade-up{opacity:0;transform:translateY(28px);transition:.7s var(--ease)}
.fade-up.visible{opacity:1;transform:none}

/* ── HERO ENTRANCE SEQUENCE ── */
.hr-w{display:inline-block;opacity:0;animation:hrReveal .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--hd,0s);cursor:default;transition:text-shadow .35s ease}
.hr-w:hover{text-shadow:0 0 22px rgba(255,255,255,.75),0 0 44px rgba(30,159,224,.45)}
.hr-w.accent:hover{text-shadow:0 0 22px rgba(30,159,224,.95),0 0 46px rgba(30,159,224,.55),0 0 80px rgba(30,159,224,.2)}
.accent-r .hr-w:hover{text-shadow:0 0 22px rgba(224,48,48,1),0 0 46px rgba(224,48,48,.55),0 0 80px rgba(224,48,48,.2)}
.hr-anim{opacity:0;animation:hrReveal .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--hd,0s)}
@keyframes hrReveal{
  from{opacity:0;transform:translateY(22px) scale(.92)}
  to  {opacity:1;transform:none}
}
/* "That Get" — fade up with a red glow burst that fades away */
.hr-glow{animation-name:hrRevealGlow;margin-right:0.18em}
@keyframes hrRevealGlow{
  0%  {opacity:0;transform:translateY(22px) scale(.9)}
  52% {opacity:1;transform:translateY(-3px) scale(1.04);text-shadow:0 0 18px rgba(224,48,48,.95),0 0 38px rgba(224,48,48,.5)}
  80% {transform:none;text-shadow:0 0 5px rgba(224,48,48,.15)}
  100%{opacity:1;transform:none;text-shadow:none}
}
/* "Noticed" — bigger pop + stronger glow */
.hr-pop{animation-name:hrRevealPop}
@keyframes hrRevealPop{
  0%  {opacity:0;transform:translateY(22px) scale(.86)}
  50% {opacity:1;transform:translateY(-6px) scale(1.1);text-shadow:0 0 28px rgba(224,48,48,1),0 0 56px rgba(224,48,48,.65),0 0 90px rgba(224,48,48,.25)}
  72% {transform:translateY(-2px) scale(1.04);text-shadow:0 0 10px rgba(224,48,48,.35)}
  100%{opacity:1;transform:none;text-shadow:none}
}