/* =====================================================
DESIGN SYSTEM
GTE Construction Industrial ThemeV1 · Confident · Trustworthy
===================================================== */
:root {
--blue:        #0B5EA8;
--blue-dark:   #073D70;
--blue-light:  #1A7FD4;
--gold:        #F5A623;
--gold-dark:   #D4881A;
--dark:        #0A0E1A;
--dark-2:      #10172A;
--dark-3:      #1B2540;
--body:        #4A5568;
--muted:       #718096;
--border:      #E2E8F0;
--smoke:       #F7F8FC;
--white:       #FFFFFF;
--green-wa:    #25D366;

--font-head:   'Barlow Condensed', sans-serif;
--font-body:   'DM Sans', sans-serif;
--font-accent: 'Barlow', sans-serif;

--radius:      4px;
--radius-lg:   8px;
--shadow-sm:   0 2px 12px rgba(11,94,168,.10);
--shadow-md:   0 8px 40px rgba(11,94,168,.16);
--shadow-lg:   0 20px 60px rgba(0,0,0,.22);
--transition:  all .35s cubic-bezier(.4,0,.2,1);
--max-w:       1280px;
}

/* ── Reset ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; font-size:16px; }
body {
font-family: var(--font-body);
color: var(--body);
background: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
a { text-decoration:none; color:inherit; transition:var(--transition); }
img { display:block; max-width:100%; height:auto; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }
input, textarea, select { font-family:inherit; outline:none; }

/* ── Container ────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.container--wide { max-width:1400px; margin:0 auto; padding:0 24px; }

/* ── Typography ───────────────────── */
h1,h2,h3,h4,h5,h6 {
font-family:var(--font-head);
font-weight:700;
line-height:1.1;
color:var(--dark);
letter-spacing:-.01em;
}
h1 { font-size:clamp(48px, 7vw, 90px); font-weight:800; line-height:1.0; }
h2 { font-size:clamp(36px, 5vw, 58px); font-weight:700; }
h3 { font-size:clamp(22px, 3vw, 32px); }
h4 { font-size:22px; }
h5 { font-size:18px; }
p { font-family:var(--font-body); line-height:1.75; color:var(--body); }

/* ── Section spacing ──────────────── */
.section { padding: 100px 0; }
.section--sm { padding: 60px 0; }
.section--dark { background:var(--dark); }
.section--dark-2 { background:var(--dark-2); }
.section--smoke { background:var(--smoke); }

/* ── Label / Tag ──────────────────── */
.label {
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-accent);
font-size:13px; font-weight:600;
letter-spacing:2px; text-transform:uppercase;
color:var(--blue);
margin-bottom:18px;
}
.label::before {
content:'';
width:28px; height:2px;
background:var(--gold);
display:block;
flex-shrink:0;
}
.label--white { color:rgba(255,255,255,.75); }
.label--white::before { background:var(--gold); }
.label--gold { color:var(--gold); }

/* ── Buttons ──────────────────────── */
.btn {
display:inline-flex; align-items:center; gap:10px;
font-family:var(--font-head);
font-size:16px; font-weight:700;
letter-spacing:.5px; text-transform:uppercase;
padding:16px 36px;
transition:var(--transition);
border:2px solid transparent;
position:relative;
overflow:hidden;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.btn::before {
content:''; position:absolute;
inset:0; background:rgba(255,255,255,.08);
transform:translateX(-110%) skewX(-15deg);
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.btn:hover::before { transform:translateX(110%) skewX(-15deg); }
.btn-primary {
background:var(--blue); color:var(--white);
border-color:var(--blue);
}
.btn-primary:hover {
background:var(--blue-dark); border-color:var(--blue-dark);
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(11,94,168,.4);
color:var(--white);
}
.btn-outline {
background:transparent; color:var(--white);
border-color:rgba(255,255,255,.5);
}
.btn-outline:hover {
background:var(--white); color:var(--dark);
border-color:var(--white);
transform:translateY(-2px);
}
.btn-gold {
background:var(--gold); color:var(--dark);
border-color:var(--gold);
}
.btn-gold:hover {
background:var(--gold-dark); border-color:var(--gold-dark);
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(245,166,35,.4);
}
.btn-sm { padding:12px 24px; font-size:14px; }
.btn-wa {
background:var(--green-wa); color:white; border-color:var(--green-wa);
}
.btn-wa:hover { background:#1da851; border-color:#1da851; color:white; }

/* ── Animated underline links ─────── */
.link-underline {
position:relative;
display:inline-flex; align-items:center; gap:6px;
font-weight:600; font-family:var(--font-head);
font-size:15px; text-transform:uppercase; letter-spacing:1px;
}
.link-underline::after {
content:''; position:absolute; bottom:-2px; left:0;
width:0; height:2px; background:currentColor;
transition:width .35s ease;
}
.link-underline:hover::after { width:100%; }

/* ======================================================
PRELOADER
====================================================== */
/*#preloader {
position:fixed; inset:0;
background:var(--dark);
z-index:100000;
display:flex; align-items:center; justify-content:center;
transition:opacity .6s ease, visibility .6s ease;
}
#preloader.hidden { opacity:0; visibility:hidden; }

*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0a0a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;}
#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;}
.preloader-inner {
display:flex; flex-direction:column; align-items:center; gap:24px;
}
.preloader-logo {
height:52px; filter:brightness(0) invert(1);
animation: pulse 1.5s ease infinite;
}
@keyframes pulse { 0%,100% { opacity:.6; transform:scale(.97); } 50% { opacity:1; transform:scale(1); } }
.preloader-bar {
width:200px; height:3px;
background:rgba(255,255,255,.1);
border-radius:3px;
overflow:hidden;
}
.preloader-progress {
height:100%; width:0;
background:linear-gradient(90deg, var(--blue), var(--gold));
border-radius:3px;
animation:load 1.8s ease forwards;
}
@keyframes load { to { width:100%; } }

/* ======================================================
NAVBAR
====================================================== */
.navbar {
position:sticky; top:0; left:0; right:0;
z-index:1000;
transition:var(--transition);
}
.navbar-topbar {
background:var(--dark);
padding:9px 0;
border-bottom:1px solid rgba(255,255,255,.05);
transition:var(--transition);
}
.navbar-topbar .inner {
display:flex; align-items:center;
justify-content:space-between; gap:20px;
flex-wrap:wrap;
}
.topbar-contacts {
display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.topbar-contacts a, .topbar-contacts span {
font-size:13px; color:rgba(255,255,255,.65);
display:flex; align-items:center; gap:7px;
transition:color .3s;
}
.topbar-contacts a:hover { color:var(--gold); }
.topbar-contacts i {
color:var(--gold); font-size:12px;
}
.topbar-socials {
display:flex; align-items:center; gap:6px;
}
.topbar-socials span {
font-size:12px; color:rgba(255,255,255,.4);
margin-right:4px; font-family:var(--font-accent);
letter-spacing:1px; text-transform:uppercase;
}
.topbar-socials a {
width:28px; height:28px;
display:flex; align-items:center; justify-content:center;
border-radius:4px;
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.6);
font-size:12px;
transition:var(--transition);
}
.topbar-socials a:hover { background:var(--blue); color:white; }

.navbar-main {
background:var(--white);
box-shadow:0 1px 0 rgba(0,0,0,.07);
transition:var(--transition);
}
.navbar-inner {
display:flex; align-items:center;
justify-content:space-between;
height:78px;
gap:24px;
}
.navbar-logo img { height:56px; width:auto; }
.navbar-logo:hover { opacity:.85; }

.nav-links {
display:flex; align-items:center; gap:2px;
}
.nav-links a {
padding:8px 16px;
font-family:var(--font-head);
font-size:17px; font-weight:600;
letter-spacing:.3px;
color:var(--dark);
position:relative;
transition:color .3s;
}
.nav-links a::after {
content:''; position:absolute;
bottom:2px; left:16px; right:16px;
height:2px; background:var(--blue);
transform:scaleX(0); transform-origin:center;
transition:transform .3s ease;
}
.nav-links a:hover { color:var(--blue); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:var(--blue); }
.nav-links a.active::after { transform:scaleX(1); }

.navbar-actions {
display:flex; align-items:center; gap:12px;
}
.nav-search-btn {
width:40px; height:40px;
border-radius:var(--radius);
background:var(--smoke);
display:flex; align-items:center; justify-content:center;
color:var(--dark); font-size:15px;
transition:var(--transition);
}
.nav-search-btn:hover { background:var(--blue); color:white; }

/* Scrolled state */
.navbar.scrolled .navbar-topbar { padding:0; max-height:0; overflow:hidden; }
.navbar.scrolled .navbar-main { box-shadow:0 4px 30px rgba(0,0,0,.12); }

/* Mobile menu toggle */
.nav-toggle {
display:none;
flex-direction:column; gap:5px;
width:36px; height:36px;
align-items:center; justify-content:center;
background:var(--smoke);
border-radius:var(--radius);
padding:8px;
transition:var(--transition);
}
.nav-toggle span {
display:block; width:18px; height:2px;
background:var(--dark);
transition:var(--transition);
border-radius:2px;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; width:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
position:fixed; inset:0;
background:var(--dark);
z-index:9999;
transform:translateX(-100%);
transition:transform .4s cubic-bezier(.4,0,.2,1);
overflow-y:auto;
padding:30px 24px;
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:40px;
}
.mobile-nav-header img { height:40px; filter:brightness(0) invert(1); }
.mobile-close {
width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
color:white; font-size:20px;
background:rgba(255,255,255,.08); border-radius:var(--radius);
}
.mobile-nav-links { display:flex; flex-direction:column; gap:4px; }
.mobile-nav-links a {
display:block; padding:16px 20px;
font-family:var(--font-head); font-size:20px; font-weight:700;
color:rgba(255,255,255,.8);
border-bottom:1px solid rgba(255,255,255,.06);
letter-spacing:.3px;
transition:color .3s, padding-left .3s;
}
.mobile-nav-links a:hover { color:var(--gold); padding-left:28px; }
.mobile-nav-cta { margin-top:32px; }
.mobile-nav-contacts {
margin-top:40px; display:flex; flex-direction:column; gap:14px;
}
.mobile-nav-contacts a {
display:flex; align-items:center; gap:12px;
color:rgba(255,255,255,.55); font-size:14px;
}
.mobile-nav-contacts i { color:var(--gold); width:16px; }

/* ======================================================
SEARCH OVERLAY
====================================================== */
.search-overlay {
position:fixed; inset:0;
background:rgba(10,14,26,.97);
z-index:20000;
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden;
transition:opacity .35s ease, visibility .35s ease;
}
.search-overlay.show { opacity:1; visibility:visible; }
.search-box {
width:min(700px, 90vw);
position:relative;
}
.search-box label {
display:block; font-family:var(--font-head);
font-size:13px; letter-spacing:2px; text-transform:uppercase;
color:rgba(255,255,255,.4); margin-bottom:16px;
}
.search-box form {
display:flex; align-items:center;
border-bottom:2px solid rgba(255,255,255,.2);
padding-bottom:12px;
}
.search-box input {
flex:1; background:transparent; border:none;
font-family:var(--font-head); font-size:clamp(24px,4vw,40px);
font-weight:700; color:white; caret-color:var(--gold);
}
.search-box input::placeholder { color:rgba(255,255,255,.2); }
.search-box button {
background:none; color:rgba(255,255,255,.5);
font-size:22px; padding:4px 8px;
transition:color .3s;
}
.search-box button:hover { color:var(--gold); }
.search-close {
position:absolute; top:-60px; right:0;
color:rgba(255,255,255,.4); font-size:22px;
transition:color .3s;
}
.search-close:hover { color:white; }

/* ======================================================
HERO
====================================================== 
.hero {
position:relative; overflow:hidden;
height:100vh; min-height:600px; max-height:980px;
}
.hero-slides-wrapper {
position:relative; height:100%;
}
.hero-slide {
position:absolute; inset:0;
opacity:0; transition:opacity 1s ease;
z-index:1;
}
.hero-slide.active { opacity:1; z-index:2; }
.hero-slide-bg {
position:absolute; inset:0;
background-size:cover;
background-position:center;
transform:scale(1.06);
transition:transform 7s ease;
}
.hero-slide.active .hero-slide-bg { transform:scale(1); }
.hero-slide-overlay {
position:absolute; inset:0;
background:linear-gradient(
105deg,
rgba(10,14,26,.88) 0%,
rgba(10,14,26,.55) 55%,
rgba(10,14,26,.25) 100%
);
}
.hero-slide-content {
position:absolute; inset:0;
display:flex; align-items:center;
z-index:5;
}
.hero-text-block {
max-width:720px;
padding: 0 0 60px;
}
.hero-eyebrow {
display:inline-flex; align-items:center; gap:12px;
background:rgba(245,166,35,.12);
border:1px solid rgba(245,166,35,.3);
border-radius:2px;
padding:8px 16px;
font-family:var(--font-accent);
font-size:13px; font-weight:600;
letter-spacing:2px; text-transform:uppercase;
color:var(--gold);
margin-bottom:24px;
opacity:0; transform:translateY(20px);
transition:opacity .6s ease .2s, transform .6s ease .2s;
}
.hero-eyebrow i { font-size:10px; }
.hero-slide.active .hero-eyebrow { opacity:1; transform:translateY(0); }
.hero-h1 {
font-family:var(--font-head);
font-size:clamp(52px, 8vw, 96px);
font-weight:800;
color:white;
line-height:1.0;
margin-bottom:24px;
text-transform:uppercase;
letter-spacing:-.02em;
opacity:0; transform:translateY(30px);
transition:opacity .7s ease .4s, transform .7s ease .4s;
}
.hero-slide.active .hero-h1 { opacity:1; transform:translateY(0); }
.hero-p {
font-size:clamp(15px, 1.8vw, 18px);
color:rgba(255,255,255,.78);
line-height:1.7;
max-width:560px;
margin-bottom:40px;
opacity:0; transform:translateY(20px);
transition:opacity .7s ease .55s, transform .7s ease .55s;
}
.hero-slide.active .hero-p { opacity:1; transform:translateY(0); }
.hero-actions {
display:flex; flex-wrap:wrap; gap:14px;
opacity:0; transform:translateY(20px);
transition:opacity .7s ease .7s, transform .7s ease .7s;
}
.hero-slide.active .hero-actions { opacity:1; transform:translateY(0); }
*/
/* Hero nav arrows */
.hero-arrow {
position:absolute; top:50%; transform:translateY(-50%);
z-index:10;
width:56px; height:56px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.2);
color:white; font-size:16px;
display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(8px);
transition:var(--transition);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hero-arrow:hover { background:var(--blue); border-color:var(--blue); }
.hero-prev { left:30px; }
.hero-next { right:30px; }

/* Hero dots */
.hero-dots {
position:absolute; bottom:36px; left:50%;
transform:translateX(-50%);
display:flex; gap:8px; z-index:10;
}
.hero-dot {
width:8px; height:8px;
border-radius:50%;
background:rgba(255,255,255,.35);
transition:var(--transition);
cursor:pointer;
}
.hero-dot.active {
background:var(--gold);
width:28px; border-radius:4px;
}

/* Hero scroll indicator */
.hero-scroll {
position:absolute; bottom:40px; right:40px;
z-index:10;
display:flex; flex-direction:column; align-items:center; gap:8px;
opacity:.6;
}
.hero-scroll span {
font-family:var(--font-accent);
font-size:11px; letter-spacing:2px;
text-transform:uppercase; color:white;
writing-mode:vertical-rl;
}
.hero-scroll-line {
width:1px; height:50px;
background:linear-gradient(to bottom, white, transparent);
animation: scrollLine 1.5s ease infinite;
}
@keyframes scrollLine {
0% { transform:scaleY(0); transform-origin:top; }
50% { transform:scaleY(1); transform-origin:top; }
51% { transform:scaleY(1); transform-origin:bottom; }
100% { transform:scaleY(0); transform-origin:bottom; }
}

/* Hero progress bar */
.hero-progress {
position:absolute; bottom:0; left:0; right:0;
height:3px; z-index:10;
background:rgba(255,255,255,.1);
}
.hero-progress-fill {
height:100%;
background:var(--gold);
transform-origin:left;
animation:heroProgress 6s linear infinite;
}
@keyframes heroProgress { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ======================================================
SERVICES STRIP (below hero)
====================================================== */
.services-strip {
background:var(--dark-3);
padding:0;
position:relative;
z-index:3;
}
.services-strip-inner {
display:grid;
grid-template-columns:repeat(5, 1fr);
border-left:1px solid rgba(255,255,255,.06);
}
.service-strip-item {
padding:28px 24px;
border-right:1px solid rgba(255,255,255,.06);
display:flex; align-items:center; gap:14px;
transition:var(--transition);
cursor:pointer;
position:relative;
overflow:hidden;
}
.service-strip-item::before {
content:''; position:absolute; bottom:0; left:0; right:0;
height:3px; background:var(--gold);
transform:scaleX(0); transform-origin:left;
transition:transform .4s ease;
}
.service-strip-item:hover::before { transform:scaleX(1); }
.service-strip-item:hover { background:rgba(255,255,255,.04); }
.service-strip-icon {
width:40px; height:40px;
background:rgba(11,94,168,.25);
border-radius:var(--radius);
display:flex; align-items:center; justify-content:center;
font-size:16px; color:var(--gold);
flex-shrink:0;
transition:var(--transition);
}
.service-strip-item:hover .service-strip-icon {
background:var(--blue); color:white;
}
.service-strip-text h5 {
font-family:var(--font-head);
font-size:14px; font-weight:700;
color:rgba(255,255,255,.85);
letter-spacing:.3px;
text-transform:uppercase;
margin-bottom:2px;
}
.service-strip-text p {
font-size:12px; color:rgba(255,255,255,.4);
margin:0;
}

/* ======================================================
STATS BAR
====================================================== */
.stats-bar {
background:var(--blue);
padding:48px 0;
position:relative;
overflow:hidden;
}
.stats-bar::before {
content:''; position:absolute; inset:0;
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.stats-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
}
.stat-item {
text-align:center; padding:16px 24px;
border-right:1px solid rgba(255,255,255,.15);
position:relative;
}
.stat-item:last-child { border-right:none; }
.stat-number {
font-family:var(--font-head);
font-size:clamp(44px, 5vw, 64px);
font-weight:800; color:white;
line-height:1; margin-bottom:4px;
display:flex; align-items:flex-start;
justify-content:center; gap:2px;
}
.stat-number sup {
font-size:.45em; margin-top:8px;
color:var(--gold); font-weight:800;
}
.stat-label {
font-family:var(--font-accent);
font-size:13px; font-weight:500;
color:rgba(255,255,255,.65);
letter-spacing:1.5px; text-transform:uppercase;
margin:0;
}

/* ======================================================
ABOUT
====================================================== */
.about-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:80px; align-items:center;
}
.about-img-block {
position:relative;
}
.about-img-main {
border-radius:var(--radius);
overflow:hidden;
position:relative;
aspect-ratio:4/5;
}
.about-img-main img {
width:100%; height:100%;
object-fit:cover;
transition:transform .8s ease;
}
.about-img-main:hover img { transform:scale(1.04); }
.about-img-accent {
position:absolute;
bottom:-32px; right:-32px;
width:220px;
border-radius:var(--radius);
overflow:hidden;
border:5px solid white;
box-shadow:var(--shadow-lg);
z-index:3;
}
.about-img-accent img { width:100%; height:150px; object-fit:cover; }
.about-badge {
position:absolute;
top:-20px; left:-20px;
background:var(--gold);
color:var(--dark);
padding:22px 20px;
text-align:center;
z-index:4;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
animation:floatBadge 4s ease-in-out infinite;
}
@keyframes floatBadge { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-8px)} }
.about-badge-num {
font-family:var(--font-head);
font-size:48px; font-weight:800;
line-height:1; display:block;
}
.about-badge-text {
font-family:var(--font-accent);
font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:1px;
display:block; margin-top:2px;
}
.about-img-tag {
position:absolute; bottom:28px; left:-24px;
background:var(--dark);
padding:14px 20px;
display:flex; align-items:center; gap:12px;
border-left:3px solid var(--blue);
z-index:4;
min-width:200px;
}
.about-img-tag i {
color:var(--blue); font-size:22px;
}
.about-img-tag-text strong {
display:block; color:white;
font-family:var(--font-head); font-size:16px; font-weight:700;
}
.about-img-tag-text span {
color:rgba(255,255,255,.5); font-size:12px;
}
.about-img-pattern {
position:absolute; top:20px; left:20px;
width:120px; height:120px;
background-image:radial-gradient(var(--blue) 1.5px, transparent 1.5px);
background-size:14px 14px;
opacity:.25;
z-index:0;
}

.about-text-block h2 { margin-bottom:20px; }
.about-text-block p { margin-bottom:20px; line-height:1.8; }
.about-checklist {
display:grid; grid-template-columns:1fr 1fr;
gap:12px; margin:28px 0 36px;
}
.about-check-item {
display:flex; align-items:center; gap:10px;
font-family:var(--font-accent);
font-size:14px; font-weight:600;
color:var(--dark);
}
.about-check-item::before {
content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
width:24px; height:24px;
background:rgba(11,94,168,.1);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--blue); font-size:11px;
flex-shrink:0;
}

/* ======================================================
SERVICES SECTION
====================================================== */
.services-grid {
display:grid; grid-template-columns:repeat(3, 1fr);
gap:2px;
margin-top:60px;
}
.service-card {
background:var(--white);
padding:48px 36px;
position:relative;
overflow:hidden;
border:1px solid var(--border);
transition:var(--transition);
group:true;
}
.service-card::before {
content:''; position:absolute;
inset:0;
background:var(--dark);
transform:translateY(100%);
transition:transform .5s cubic-bezier(.4,0,.2,1);
z-index:0;
}
.service-card:hover::before { transform:translateY(0); }
.service-card:hover { border-color:var(--dark); }
.service-card > * { position:relative; z-index:1; }
.service-number {
font-family:var(--font-head);
font-size:72px; font-weight:800;
color:rgba(0,0,0,.05);
line-height:1; position:absolute;
top:20px; right:24px;
transition:color .4s;
}
.service-card:hover .service-number { color:rgba(255,255,255,.06); }
.service-icon {
width:56px; height:56px;
background:rgba(11,94,168,.1);
border-radius:var(--radius);
display:flex; align-items:center; justify-content:center;
font-size:22px; color:var(--blue);
margin-bottom:24px;
transition:var(--transition);
}
.service-card:hover .service-icon {
background:var(--gold); color:var(--dark);
}
.service-card h4 {
font-size:20px; margin-bottom:14px;
transition:color .4s;
}
.service-card:hover h4 { color:white; }
.service-card p {
font-size:14px; line-height:1.7;
transition:color .4s;
margin-bottom:24px;
}
.service-card:hover p { color:rgba(255,255,255,.65); }
.service-link {
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-head); font-size:13px;
font-weight:700; letter-spacing:1px; text-transform:uppercase;
color:var(--blue);
transition:color .4s;
}
.service-link i { transition:transform .3s; }
.service-link:hover i { transform:translateX(4px); }
.service-card:hover .service-link { color:var(--gold); }

/* ======================================================
   PORTFOLIO SECTION — kgblgte
   Add to the bottom of style.css
   ====================================================== */

/* ── Section ─────────────────────────────────────────── */
.portfolio-section {
    background: var(--white);
    padding: 100px 0 80px;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────── */
.portfolio-section-header {
    text-align: center;
    margin-bottom: 52px;
}
.portfolio-section-header h2 {
    margin-bottom: 14px;
}
.portfolio-subtext {
    max-width: 560px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

/* ── Tab bar ─────────────────────────────────────────── */
.portfolio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

/* ── Tab button ──────────────────────────────────────── */
.ptab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--body);
    background: var(--smoke);
    border: 1.5px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
}

/* shimmer sweep */
.ptab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.15);
    transform: translateX(-110%) skewX(-15deg);
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.ptab:hover::after { transform: translateX(110%) skewX(-15deg); }

.ptab:hover {
    background: var(--dark-3);
    color: white;
    border-color: var(--dark-3);
}
.ptab:hover .ptab-icon i { color: var(--gold); }

/* active state */
.ptab.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(11,94,168,.3);
}
.ptab.active .ptab-icon i { color: var(--gold); }
.ptab.active .ptab-count  { background: rgba(255,255,255,.2); color: white; }

/* icon */
.ptab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
}
.ptab-icon i {
    font-size: 13px;
    color: var(--blue);
    transition: color .3s;
}
.ptab:hover .ptab-icon i { color: var(--gold); }

/* label */
.ptab-label { flex: 1; }

/* count bubble */
.ptab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--border);
    color: var(--muted);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    transition: background .3s, color .3s;
    flex-shrink: 0;
}
/* hide count on "All" tab — JS sets display:none, this is the fallback */
#ptab-all .ptab-count { display: none !important; }

/* ── Count label ─────────────────────────────────────── */
.portfolio-count {
    font-family: var(--font-accent);
    font-size: 13px;
    color: var(--muted);
    letter-spacing: .5px;
    margin-bottom: 32px;
    text-align: center;
    min-height: 20px;
}

/* ── Grid ────────────────────────────────────────────── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    min-height: 300px;
    position: relative;
}

/* ── Card base ───────────────────────────────────────── */
.pcard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.pcard:hover {
    border-color: transparent;
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

/* hidden by JS filter */
.pcard.pcard--hidden {
    display: none;
}

/* entrance animation triggered by JS */
.pcard.pcard--entering {
    animation: pcardIn .38s cubic-bezier(.4,0,.2,1) both;
}
@keyframes pcardIn {
    from { opacity: 0; transform: scale(.95) translateY(16px); }
    to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* ── Card image wrap ─────────────────────────────────── */
.pcard-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--smoke);
    flex-shrink: 0;
}

.pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.pcard:hover .pcard-img { transform: scale(1.07); }

/* ── No-thumbnail placeholder ───────────────────────── */
.pcard-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-2) 100%);
}
.pcard-img-placeholder i {
    font-size: 52px;
    color: rgba(255,255,255,.15);
}

/* ── Hover overlay ───────────────────────────────────── */
.pcard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10,14,26,.85) 0%,
        rgba(10,14,26,.2)  55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity .4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pcard:hover .pcard-overlay { opacity: 1; }

.pcard-view-btn {
    width: 52px;
    height: 52px;
    background: white;
    color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.7);
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.pcard:hover .pcard-view-btn { transform: scale(1); }
.pcard-view-btn:hover { background: var(--gold); }

/* ── Category badge ──────────────────────────────────── */
.pcard-cat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--gold);
    color: var(--dark);
    font-family: var(--font-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1.5;
    pointer-events: none;
}
.pcard-cat-badge i { font-size: 9px; }

/* ── Card body ───────────────────────────────────────── */
.pcard-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pcard-subtitle {
    font-family: var(--font-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--blue);
    display: block;
    margin-bottom: 8px;
}
.pcard-title {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark);
    margin-bottom: 10px;
}
.pcard-title a { color: inherit; transition: color .3s; }
.pcard-title a:hover { color: var(--blue); }

.pcard-excerpt {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 18px;
    flex: 1;
}
.pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
    transition: var(--transition);
    align-self: flex-start;
    margin-top: auto;
}
.pcard-link svg { transition: transform .3s; flex-shrink: 0; }
.pcard-link:hover { color: var(--blue-dark); gap: 10px; }
.pcard-link:hover svg { transform: translateX(3px); }
.pcard-link--muted { color: var(--muted); }
.pcard-link--muted:hover { color: var(--blue); }

/* ── Coming Soon card ────────────────────────────────── */
.pcard--coming-soon {
    border-style: dashed;
    border-color: var(--border);
    background: var(--smoke);
}
.pcard--coming-soon:hover {
    border-style: dashed;
    border-color: var(--blue-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.pcard-img-wrap--soon {
    background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pcard-soon-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 100%;
    opacity: .18;
}
.pcard-soon-inner i {
    font-size: 64px;
    color: white;
}

/* "Coming Soon" ribbon badge */
.pcard-soon-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    font-family: var(--font-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
    backdrop-filter: blur(4px);
}
.pcard-soon-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: soonPulse 1.8s ease infinite;
    flex-shrink: 0;
}
@keyframes soonPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.7); }
}

/* ── No-results fallback (JS) ────────────────────────── */
.portfolio-no-results {
    grid-column: 1 / -1;
    padding: 80px 24px;
    text-align: center;
    color: var(--muted);
}
.portfolio-no-results i {
    font-size: 40px;
    display: block;
    margin-bottom: 16px;
    opacity: .3;
}
.portfolio-no-results h3 { font-size: 22px; margin-bottom: 10px; color: var(--dark); }
.portfolio-no-results p  { font-size: 15px; }
.portfolio-no-results a  { color: var(--blue); font-weight: 600; }

/* ── CTA row ─────────────────────────────────────────── */
.portfolio-cta {
    margin-top: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
}
.portfolio-cta p {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1199px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .portfolio-tabs { justify-content: flex-start; }
    .ptab { padding: 10px 16px; font-size: 12px; gap: 6px; }
    .ptab-icon i { font-size: 12px; }
}

@media (max-width: 767px) {
    .portfolio-section { padding: 70px 0 60px; }
    .portfolio-grid    { grid-template-columns: 1fr; gap: 20px; }
    .ptab { padding: 9px 14px; font-size: 11px; gap: 5px; }
    .ptab-label { font-size: 11px; }
    .ptab-count { display: none; }    /* save horizontal space on mobile */
    .pcard-title { font-size: 18px; }
}

@media (max-width: 479px) {
    .portfolio-tabs { gap: 6px; }
    .ptab { padding: 8px 10px; gap: 4px; }
    .ptab-icon i { font-size: 11px; }
}


/* ======================================================
PROJECTS
====================================================== */
.projects-header {
display:flex; align-items:flex-end;
justify-content:space-between; gap:24px;
flex-wrap:wrap;
margin-bottom:48px;
}
.projects-filter {
display:flex; gap:8px; flex-wrap:wrap;
}
.filter-btn {
padding:8px 20px;
font-family:var(--font-head); font-size:13px;
font-weight:700; letter-spacing:1px; text-transform:uppercase;
border:1.5px solid var(--border);
border-radius:2px;
color:var(--body);
transition:var(--transition);
background:transparent;
}
.filter-btn:hover,
.filter-btn.active {
background:var(--dark); color:white; border-color:var(--dark);
}

.projects-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:2px;
margin-bottom:20px;
}
.project-card {
position:relative; overflow:hidden;
aspect-ratio:4/3;
cursor:pointer;
}
.project-card img {
width:100%; height:100%;
object-fit:cover;
transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.project-card:hover img { transform:scale(1.08); }
.project-card-overlay {
position:absolute; inset:0;
background:linear-gradient(to top, rgba(10,14,26,.92) 0%, rgba(10,14,26,.3) 50%, transparent 100%);
opacity:0; transition:opacity .4s ease;
}
.project-card:hover .project-card-overlay { opacity:1; }
.project-card-content {
position:absolute;
bottom:0; left:0; right:0;
padding:28px;
transform:translateY(20px);
opacity:0;
transition:transform .4s ease, opacity .4s ease;
}
.project-card:hover .project-card-content { transform:translateY(0); opacity:1; }
.project-tag {
display:inline-block;
padding:4px 12px;
background:var(--gold);
color:var(--dark);
font-family:var(--font-accent); font-size:11px;
font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
border-radius:2px; margin-bottom:10px;
}
.project-card h4 {
color:white; font-size:20px;
margin:0 0 6px;
}
.project-card p {
color:rgba(255,255,255,.65); font-size:13px; margin:0;
}
.project-card-btn {
position:absolute; top:20px; right:20px;
width:40px; height:40px;
background:white; color:var(--dark);
display:flex; align-items:center; justify-content:center;
border-radius:50%; font-size:14px;
transform:scale(0) rotate(-90deg);
transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.project-card:hover .project-card-btn {
transform:scale(1) rotate(0);
}

/* Featured project (wide) */
.project-card--wide {
grid-column:span 2;
}

/* ======================================================
CTA BANNER
====================================================== */
.cta-banner {
background:var(--dark);
padding:80px 0;
position:relative;
overflow:hidden;
}
.cta-banner::before {
content:'BUILD'; font-family:var(--font-head);
font-size:clamp(80px,14vw,200px);
font-weight:800; letter-spacing:-4px;
color:rgba(255,255,255,.03);
position:absolute;
right:-20px; top:50%; transform:translateY(-50%);
line-height:1; pointer-events:none;
white-space:nowrap;
}
.cta-grid {
display:grid; grid-template-columns:1fr auto;
gap:60px; align-items:center;
}
.cta-grid h2 {
color:white;
font-size:clamp(32px, 4.5vw, 56px);
}
.cta-grid h2 span { color:var(--gold); }
.cta-grid p {
color:rgba(255,255,255,.55);
font-size:16px; margin-top:12px;
}
.cta-actions {
display:flex; flex-direction:column; gap:12px;
align-items:flex-start;
}

/* ======================================================
TESTIMONIALS
====================================================== */
.testi-layout {
display:grid;
grid-template-columns:400px 1fr;
gap:60px; align-items:start;
}
.testi-sidebar {
position:sticky; top:120px;
}
.testi-sidebar h2 { margin-bottom:16px; }
.testi-sidebar p { margin-bottom:32px; }
.testi-metrics {
display:grid; grid-template-columns:1fr 1fr;
gap:16px; margin-top:32px;
}
.testi-metric {
background:var(--smoke); padding:20px;
border-left:3px solid var(--blue);
}
.testi-metric-num {
font-family:var(--font-head); font-size:36px;
font-weight:800; color:var(--dark); display:block;
}
.testi-metric-label {
font-size:12px; color:var(--muted);
text-transform:uppercase; letter-spacing:1px;
font-family:var(--font-accent);
}
.testi-cards {
display:flex; flex-direction:column; gap:20px;
}
.testi-card {
background:white;
border:1.5px solid var(--border);
padding:32px;
position:relative;
transition:var(--transition);
}
.testi-card:hover {
border-color:var(--blue);
transform:translateX(8px);
box-shadow:var(--shadow-md);
}
.testi-stars {
display:flex; gap:3px; margin-bottom:16px;
}
.testi-stars i { color:var(--gold); font-size:14px; }
.testi-text {
font-size:15px; line-height:1.75;
color:var(--body); margin-bottom:24px;
font-style:italic;
}
.testi-text::before { content:'\201C'; color:var(--blue); font-size:24px; font-family:Georgia; }
.testi-text::after { content:'\201D'; color:var(--blue); font-size:24px; font-family:Georgia; }
.testi-author {
display:flex; align-items:center; gap:14px;
}
.testi-author img {
height:44px; max-width:80px;
object-fit:contain; filter:grayscale(30%);
transition:filter .3s;
}
.testi-card:hover .testi-author img { filter:none; }
.testi-author-info strong {
display:block; font-family:var(--font-head);
font-size:16px; font-weight:700; color:var(--dark);
}
.testi-author-info span {
font-size:12px; color:var(--muted);
}
.testi-quote-mark {
position:absolute; top:24px; right:28px;
font-family:Georgia; font-size:80px;
color:rgba(11,94,168,.07); line-height:1;
pointer-events:none;
}

/* ======================================================
WHY US
====================================================== */
.why-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:0; align-items:stretch;
}
.why-image {
position:relative; overflow:hidden;
min-height:500px;
}
.why-image img {
width:100%; height:100%;
object-fit:cover;
position:absolute; inset:0;
}
.why-image::after {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, transparent 60%, var(--white) 100%);
}
.why-content {
background:var(--white);
padding:80px 60px;
}
.why-features {
display:flex; flex-direction:column; gap:32px;
margin-top:40px;
}
.why-feature {
display:flex; gap:20px;
padding-bottom:32px;
border-bottom:1px solid var(--border);
}
.why-feature:last-child { border-bottom:none; padding-bottom:0; }
.why-feature-icon {
width:52px; height:52px;
flex-shrink:0;
background:rgba(11,94,168,.08);
border-radius:var(--radius);
display:flex; align-items:center; justify-content:center;
font-size:20px; color:var(--blue);
transition:var(--transition);
}
.why-feature:hover .why-feature-icon {
background:var(--blue); color:white;
transform:scale(1.05);
}
.why-feature-text h5 {
font-family:var(--font-head); font-size:17px;
margin-bottom:6px;
}
.why-feature-text p { font-size:14px; margin:0; }

/* ======================================================
CLIENTS STRIP
====================================================== */
.clients-strip {
background:var(--smoke); padding:48px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.clients-label {
text-align:center;
font-family:var(--font-accent);
font-size:12px; letter-spacing:2px; text-transform:uppercase;
color:var(--muted); margin-bottom:32px;
}
.clients-logos {
display:flex; align-items:center;
justify-content:center;
gap:60px; flex-wrap:wrap;
}
.client-logo {
height:36px; max-width:120px;
object-fit:contain;
filter:grayscale(100%); opacity:.45;
transition:var(--transition);
}
.client-logo:hover {
filter:none; opacity:1;
transform:scale(1.05);
}

/* ======================================================
CONTACT / CTA
====================================================== */
.contact-section {
background:var(--dark-2);
padding:100px 0;
position:relative;
overflow:hidden;
}
.contact-section::before {
content:'';
position:absolute;
top:-200px; right:-200px;
width:600px; height:600px;
background:radial-gradient(circle, rgba(11,94,168,.2) 0%, transparent 70%);
border-radius:50%;
pointer-events:none;
}
.contact-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:80px; align-items:start;
}
.contact-left h2 { color:white; margin-bottom:16px; }
.contact-left p { color:rgba(255,255,255,.55); margin-bottom:40px; }
.contact-items {
display:flex; flex-direction:column; gap:24px;
}
.contact-item {
display:flex; align-items:flex-start; gap:16px;
}
.contact-item-icon {
width:48px; height:48px; flex-shrink:0;
background:rgba(11,94,168,.2);
border:1px solid rgba(11,94,168,.3);
display:flex; align-items:center; justify-content:center;
color:var(--gold); font-size:18px;
border-radius:var(--radius);
transition:var(--transition);
}
.contact-item:hover .contact-item-icon {
background:var(--blue); border-color:var(--blue);
}
.contact-item-text strong {
display:block; color:white;
font-family:var(--font-head); font-size:15px;
letter-spacing:.3px; margin-bottom:4px;
}
.contact-item-text a, .contact-item-text span {
color:rgba(255,255,255,.55); font-size:14px;
transition:color .3s;
}
.contact-item-text a:hover { color:var(--gold); }
.contact-form-wrap {
background:white;
padding:48px 40px;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:20px; }
.form-group label {
display:block; font-family:var(--font-head);
font-size:12px; font-weight:700; letter-spacing:1.5px;
text-transform:uppercase; color:var(--dark);
margin-bottom:8px;
}
.form-group input,
.form-group textarea,
.form-group select {
width:100%; padding:14px 16px;
border:1.5px solid var(--border);
border-radius:var(--radius);
font-family:var(--font-body); font-size:14px;
color:var(--dark);
transition:border-color .3s, box-shadow .3s;
background:white;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color:var(--blue);
box-shadow:0 0 0 3px rgba(11,94,168,.1);
}
.form-group textarea { min-height:120px; resize:vertical; }
.form-success {
display:none; padding:14px 16px;
background:rgba(40,167,69,.1); border:1px solid rgba(40,167,69,.3);
border-radius:var(--radius); color:#28a745;
font-size:14px; margin-bottom:16px;
}

/* ======================================================
FOOTER
====================================================== */
.footer {
background:var(--dark);
padding:80px 0 0;
position:relative;
overflow:hidden;
}
.footer::before {
content:'';
position:absolute; bottom:0; left:0; right:0;
height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr 1.2fr;
gap:60px;
margin-bottom:60px;
}
.footer-brand p {
color:rgba(255,255,255,.45);
font-size:14px; line-height:1.75;
margin:20px 0 28px;
}
.footer-logo { height:44px; filter:brightness(0) invert(1); }
.footer-socials { display:flex; gap:8px; }
.footer-socials a {
width:36px; height:36px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
display:flex; align-items:center; justify-content:center;
color:rgba(255,255,255,.5); font-size:13px;
border-radius:var(--radius);
transition:var(--transition);
}
.footer-socials a:hover { background:var(--blue); border-color:var(--blue); color:white; }
.footer-col h6 {
font-family:var(--font-head); font-size:14px;
font-weight:700; letter-spacing:2px;
text-transform:uppercase; color:white;
margin-bottom:20px;
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a {
color:rgba(255,255,255,.45); font-size:14px;
display:flex; align-items:center; gap:8px;
transition:var(--transition);
}
.footer-links a::before {
content:''; width:16px; height:1.5px;
background:var(--blue); flex-shrink:0;
transform:scaleX(0); transform-origin:left;
transition:transform .3s;
}
.footer-links a:hover { color:var(--gold); padding-left:6px; }
.footer-links a:hover::before { transform:scaleX(1); }
.footer-contact-list { display:flex; flex-direction:column; gap:14px; }
.footer-contact-list li {
display:flex; gap:12px; align-items:flex-start;
color:rgba(255,255,255,.45); font-size:13.5px;
line-height:1.5;
}
.footer-contact-list i { color:var(--gold); font-size:13px; margin-top:3px; flex-shrink:0; }
.footer-contact-list a { color:inherit; }
.footer-contact-list a:hover { color:var(--gold); }
.footer-bottom {
border-top:1px solid rgba(255,255,255,.07);
padding:24px 0;
display:flex;
justify-content:space-between; align-items:center;
flex-wrap:wrap; gap:12px;
}
.footer-bottom p { color:rgba(255,255,255,.3); font-size:13px; margin:0; }
.footer-bottom a { color:rgba(255,255,255,.4); }
.footer-bottom a:hover { color:var(--gold); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { color:rgba(255,255,255,.3); font-size:13px; }
.footer-legal a:hover { color:white; }

/* ======================================================
FLOATING WHATSAPP
====================================================== */
.wa-float {
position:fixed; bottom:32px; right:32px;
z-index:500;
display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.wa-float-btn {
width:58px; height:58px;
background:var(--green-wa);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:white; font-size:26px;
box-shadow:0 8px 32px rgba(37,211,102,.45);
transition:var(--transition);
animation:waPulse 2.5s ease infinite;
}
@keyframes waPulse {
0%,100% { box-shadow:0 8px 32px rgba(37,211,102,.45); }
50% { box-shadow:0 8px 32px rgba(37,211,102,.45), 0 0 0 12px rgba(37,211,102,.12); }
}
.wa-float-btn:hover {
transform:scale(1.12);
box-shadow:0 12px 40px rgba(37,211,102,.6);
}
.wa-tooltip {
background:var(--dark);
color:white; font-size:13px; font-weight:500;
padding:8px 14px; border-radius:4px;
white-space:nowrap;
opacity:0; transform:translateX(10px);
transition:var(--transition);
pointer-events:none;
}
.wa-float:hover .wa-tooltip { opacity:1; transform:translateX(0); }

/* ======================================================
SCROLL TO TOP
====================================================== */
.scroll-top-btn {
position:fixed; bottom:32px; left:32px;
z-index:500;
width:46px; height:46px;
background:var(--dark);
border:1.5px solid rgba(255,255,255,.1);
color:white; font-size:15px;
display:flex; align-items:center; justify-content:center;
opacity:0; transform:translateY(20px);
transition:var(--transition);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.scroll-top-btn.visible { opacity:1; transform:translateY(0); }
.scroll-top-btn:hover { background:var(--blue); border-color:var(--blue); }

/* ======================================================
SCROLL REVEAL ANIMATIONS
====================================================== */
[data-reveal] {
opacity:0; transform:translateY(40px);
transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].revealed {
opacity:1; transform:translateY(0);
}
[data-reveal="left"] {
transform:translateX(-40px);
}
[data-reveal="left"].revealed { transform:translateX(0); }
[data-reveal="right"] {
transform:translateX(40px);
}
[data-reveal="right"].revealed { transform:translateX(0); }
[data-reveal="scale"] {
transform:scale(.92);
}
[data-reveal="scale"].revealed { transform:scale(1); }
[data-delay="1"] { transition-delay:.1s; }
[data-delay="2"] { transition-delay:.2s; }
[data-delay="3"] { transition-delay:.3s; }
[data-delay="4"] { transition-delay:.4s; }
[data-delay="5"] { transition-delay:.5s; }

/* ======================================================
RESPONSIVE
====================================================== */
@media (max-width:1199px) {
.about-grid { gap:50px; }
.footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
.testi-layout { grid-template-columns:1fr; }
.testi-sidebar { position:static; }
.services-strip-inner { grid-template-columns:repeat(3,1fr); }
.service-strip-item:nth-child(4),
.service-strip-item:nth-child(5) { border-top:1px solid rgba(255,255,255,.06); }
.projects-grid { grid-template-columns:repeat(2,1fr); }
.project-card--wide { grid-column:span 1; }
}
@media (max-width:991px) {
.about-grid { grid-template-columns:1fr; }
.about-img-block { max-width:560px; margin:0 auto; }
.stats-grid { grid-template-columns:repeat(2,1fr); }
.stat-item:nth-child(2) { border-right:none; }
.stat-item:nth-child(3),
.stat-item:nth-child(4) { border-top:1px solid rgba(255,255,255,.15); }
.services-grid { grid-template-columns:repeat(2,1fr); }
.contact-grid { grid-template-columns:1fr; gap:48px; }
.nav-links, .navbar-actions .btn { display:none !important; }
.nav-toggle { display:flex; }
.why-grid { grid-template-columns:1fr; }
.why-image { min-height:340px; }
.cta-grid { grid-template-columns:1fr; gap:32px; }
.footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:767px) {
.section { padding:70px 0; }
h1 { font-size:clamp(40px,10vw,60px); }
h2 { font-size:clamp(28px,7vw,44px); }
.services-strip-inner { grid-template-columns:1fr 1fr; }
.projects-grid { grid-template-columns:1fr; }
.about-checklist { grid-template-columns:1fr; }
.topbar-contacts { display:none; }
.about-img-accent { display:none; }
.about-badge { top:-10px; left:-10px; padding:16px; }
.about-badge-num { font-size:36px; }
.footer-grid { grid-template-columns:1fr; gap:32px; }
.form-row { grid-template-columns:1fr; }
.hero-scroll { display:none; }
.testi-metrics { grid-template-columns:1fr; }
.services-grid { grid-template-columns:1fr; }
.stats-grid { grid-template-columns:1fr 1fr; }
.contact-form-wrap { padding:32px 24px; }
.hero-arrow { display:none; }
}
@media (max-width:479px) {
.services-strip-inner { grid-template-columns:1fr; }
.stats-grid { grid-template-columns:1fr; }
.stat-item { border-right:none !important; border-top:1px solid rgba(255,255,255,.15); }
.stat-item:first-child { border-top:none; }
}

/* Print */
@media print {
.navbar, .wa-float, .scroll-top-btn, .cursor-dot, .cursor-ring { display:none; }
}



/* ── Why Slideshow ── */
.why-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
}

.why-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  border-radius: 12px;
}

.why-slide--active {
  opacity: 1;
}

/* Dot indicators */
.why-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.why-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}

.why-dot--active {
  background: #F5A623;
  transform: scale(1.3);
}