/* ════════════════════════════════════
   ZLAB Studios — Main Stylesheet
════════════════════════════════════ */
body {
    margin: 0;
    padding: 0;
    font-family: "Canva Sans", Arial, Helvetica, sans-serif;
    background: #0e0a1a;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

/* GPU layers for animated/floating elements — prevents repaints on scroll */
.svc-card, .feat-card, .sky-card, .port-card, .hcard, .cloud-layer, .sky-balloon, svg.parallax {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* On mobile — kill float animations that cause jank, slow clouds right down */
@media (max-width: 768px) {
    .svc-card, .feat-card, .sky-card, .port-card, .hcard {
        animation: none !important;
    }
    .cloud-layer {
        animation-duration: 200s !important;
    }
    .svc-card, .feat-card, .sky-card, .port-card, .hcard,
    .contact-right, nav.stuck {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255,255,255,0.92) !important;
    }
}
.wrapper {
    position: relative;
    height: 6000px;
}
svg.parallax {
    display: block;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
}
.scrollElement {
    position: absolute;
    height: 6000px;
    width: 100%;
    top: 0;
    z-index: 4;
}
.btn {
    position: fixed;
    bottom: 5%;
    right: 0px;
    transform: translateX(-50%);
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 0.9rem;
    padding: 0.5rem 0.7em;
    background-color: transparent;
    color: #ffffff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    transition: all .3s;
    z-index: 11;
}
.btn_works { left: 100px; right: unset; text-decoration: none; }
.btn:hover { background: #ffffff; color: #1B1734; }
@media (max-width: 490px) {
    #text, #arrow { transform-origin: 50% 50%; transform: translateY(-120px) scale(0.8); }
    #info2 { transform-origin: 50% 50%; transform: translateY(-120px) scale(0.8); }
}

/* ── CURSOR — simple dot desktop only ── */
body { cursor: none; }
#cursor {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(124,58,237,0.75);
    transform: translate(-50%,-50%);
    transition: width .18s, height .18s, background .18s;
    mix-blend-mode: multiply;
}
#cursor.hover { width: 22px; height: 22px; background: rgba(124,58,237,0.3); }
/* Hide cursor completely on touch/mobile devices */
@media (hover: none), (pointer: coarse) {
    #cursor { display: none !important; }
    body { cursor: auto !important; }
    button, a, [role="button"] { cursor: pointer !important; }
}

/* ── NAV ── */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
    height: 68px; padding: 0 56px;
    display: flex; align-items: center; justify-content: space-between;
    transition: all .5s;
}
nav.stuck {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(80,80,160,0.12), 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 8px rgba(0,0,0,0.06);
}
nav.stuck .nav-links a { color: #3a3a5c; }
nav.stuck .nav-links a:hover { color: #7c3aed; }
nav.stuck .nav-cta { box-shadow: 0 4px 16px rgba(124,58,237,.35); }
.logo img { height: 32px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s, letter-spacing .2s; font-family: var(--font); text-transform: uppercase; letter-spacing: .12em; }
nav.stuck .nav-links a { color: #3a3a5c; }
.nav-links a:hover { color: #fff; letter-spacing: .16em; }
nav.stuck .nav-links a:hover { color: #7c3aed; letter-spacing: .16em; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: var(--grad); color: #fff; padding: 10px 24px; border-radius: 100px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; font-family: var(--font); box-shadow: 0 4px 16px rgba(124,58,237,.3); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.4); }

/* ── HERO OVERLAY ── */
.hero-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 40%; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 80px 24px 0; pointer-events: none;
}
.hero-overlay > * { pointer-events: auto; }
.hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.3); border-radius: 100px;
    padding: 7px 18px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; margin-bottom: 24px; font-family: var(--font);
    animation: fadeUp .8s both;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: dotP 2s ease-in-out infinite; }
@keyframes dotP { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4);opacity:.7} }
.hero-h1 { font-size: clamp(42px,8vw,88px); font-weight: 900; line-height: .94; letter-spacing: -.04em; color: #fff; margin-bottom: 20px; font-family: var(--font); text-shadow: 0 2px 40px rgba(0,0,0,.3); animation: fadeUp .8s .1s both; }
.grad-text { background: linear-gradient(135deg,#c084fc,#60a5fa 40%,#f472b6 80%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradS 5s linear infinite; }
@keyframes gradS { 0%{background-position:0%} 100%{background-position:200%} }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 480px; margin: 0 auto 32px; font-family: var(--font); font-weight: 400; text-shadow: 0 1px 12px rgba(0,0,0,.3); animation: fadeUp .8s .2s both; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fadeUp .8s .3s both; }
.btn-grad { background: var(--grad); color: #fff; padding: 14px 32px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; font-family: var(--font); box-shadow: 0 8px 28px rgba(124,58,237,.35); display: inline-flex; align-items: center; gap: 8px; transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
.btn-grad:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(124,58,237,.45); }
.btn-glass { background: rgba(255,255,255,.15); backdrop-filter: blur(12px); border: 1.5px solid rgba(255,255,255,.4); color: #fff; padding: 14px 32px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; font-family: var(--font); transition: transform .3s, background .3s; }
.btn-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,.25); }

/* Sparks */
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; animation: sparkFly .6s ease-out forwards; }
@keyframes sparkFly { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0} }

/* Hero stat cards */
.hero-cards { position: fixed; bottom: 32px; left: 0; right: 0; z-index: 6; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 0 24px; animation: fadeUp .8s .4s both; pointer-events: none; }
.hcard { background: rgba(255,255,255,.12); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.25); border-radius: 16px; padding: 16px 20px; min-width: 160px; text-align: left; position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.2,1,.2,1); pointer-events: auto; }
.hcard:nth-child(1){animation:hF 7s ease-in-out infinite}.hcard:nth-child(2){animation:hF 7s 2.3s ease-in-out infinite}.hcard:nth-child(3){animation:hF 7s 4.6s ease-in-out infinite}
@keyframes hF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hcard:hover { transform: translateY(-10px)!important; }
.hcard-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; }
.hcard-ic img { width: 22px; height: 22px; object-fit: contain; }
.hcard-n { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1; margin-bottom: 3px; font-family: var(--font); }
.hcard-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 2px; font-family: var(--font); }
.hcard-desc { font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.4; font-family: var(--font); }

@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }

/* ── MAIN SITE ── */
:root {
    --font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ink: #0f0f14; --mid: #64647a; --soft: #9898ab;
    --purple: #7c3aed; --blue: #3b82f6; --pink: #ec4899;
    --grad: linear-gradient(135deg,#7c3aed,#3b82f6);
}
#mainSite { position: relative; z-index: 10; margin-top: 0; font-family: var(--font); }
#mainSite > .marquee { position: relative; z-index: 11; }

.marquee { background: #0f0f14; overflow: hidden; padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: mq 30s linear infinite; }
@keyframes mq { to{transform:translateX(-50%)} }
.mqi { display: flex; align-items: center; gap: 20px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); white-space: nowrap; font-family: var(--font); }
.mqdot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); }

/* Sections */
.sec { padding: 120px 56px; text-align: center; position: relative; overflow: hidden; }
.container { max-width: 1160px; margin: 0 auto; }
.sec-label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sec-label::before,.sec-label::after { content:''; width:26px; height:2px; border-radius:1px; background:var(--purple); }
.sec-title { font-size: clamp(36px,5vw,62px); font-weight: 900; letter-spacing: -.035em; line-height: 1.0; color: var(--ink); margin-bottom: 18px; }
.sec-title em { font-style: italic; font-weight: 300; color: var(--mid); }
.sec-sub { font-size: 17px; color: var(--mid); line-height: 1.7; max-width: 540px; margin: 0 auto 64px; }

/* Scroll animations */
.sa{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.2,1,.2,1),transform .9s cubic-bezier(.2,1,.2,1)}
.sa.on{opacity:1;transform:none}
.sa-l{opacity:0;transform:translateX(-70px);transition:opacity .9s cubic-bezier(.2,1,.2,1),transform .9s cubic-bezier(.2,1,.2,1)}
.sa-l.on{opacity:1;transform:none}
.sa-r{opacity:0;transform:translateX(70px);transition:opacity .9s cubic-bezier(.2,1,.2,1),transform .9s cubic-bezier(.2,1,.2,1)}
.sa-r.on{opacity:1;transform:none}
.sa-sc{opacity:0;transform:scale(.82);transition:opacity .9s cubic-bezier(.2,1,.2,1),transform .9s cubic-bezier(.2,1,.2,1)}
.sa-sc.on{opacity:1;transform:scale(1)}
.sa-3d{opacity:0;transform:perspective(900px) rotateX(25deg) translateY(44px);transition:opacity .9s cubic-bezier(.2,1,.2,1),transform .9s cubic-bezier(.2,1,.2,1)}
.sa-3d.on{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ── SKY SCENE (Section 2) ── */
#skyScene { position: relative; overflow: hidden; padding: 0; margin: 0; }
.sky-bg {
    min-height: 100vh;
    background: linear-gradient(180deg, #b8d4f8 0%, #c4dcff 25%, #cfe4ff 55%, #d8eaff 80%, #ddeeff 100%);
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* Clouds — pure CSS GPU animation */
.cloud-layer {
    position: absolute; top: var(--y, 10%); left: -500px;
    will-change: transform;
    animation: cloudDrift var(--dur, 90s) var(--delay, 0s) linear infinite;
    transform: scale(var(--scale, 1));
    opacity: var(--op, 0.8);
    pointer-events: none; z-index: 1;
}
.cloud-layer img { height: clamp(80px,10vw,160px); width: auto; display: block; filter: drop-shadow(0 6px 18px rgba(80,120,200,0.15)); }
@keyframes cloudDrift {
    from { transform: translateX(0) scale(var(--scale,1)); }
    to   { transform: translateX(calc(100vw + 600px)) scale(var(--scale,1)); }
}

/* ── HOT AIR BALLOON — fixed overlay ── */
.sky-balloon {
    position: fixed;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    top: 0;
    right: 0;
    left: auto;
    transition: opacity 0.3s ease;
}
.sky-balloon img {
    height: clamp(110px, 13vw, 185px);
    width: auto;
    display: block;
    filter: drop-shadow(0 14px 36px rgba(80,120,200,0.28));
}
/* balloon visible on all devices */
@media (max-width: 640px) {
    .sky-balloon img { height: 70px; }
}

/* Sky content */
.sky-content { position: relative; z-index: 20; max-width: 1000px; width: 100%; padding: 100px 56px; text-align: center; }
.sky-title { font-family: var(--font); font-size: clamp(34px,5vw,60px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; color: #1a2a4a; margin-bottom: 18px; }
.sky-title em { font-style: italic; font-weight: 300; color: #4a7ab5; }
.sky-sub { font-size: 17px; color: #3a5070; line-height: 1.75; max-width: 580px; margin: 0 auto 56px; font-weight: 400; }
.sky-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sky-card { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); border: 1.5px solid rgba(255,255,255,0.95); border-radius: 22px; padding: 30px 26px; text-align: left; box-shadow: 0 8px 32px rgba(80,120,200,0.12), inset 0 1px 0 rgba(255,255,255,0.95); transition: transform .4s cubic-bezier(.2,1,.2,1), box-shadow .4s; animation: featF 9s ease-in-out infinite; }
.sky-card:nth-child(2){animation-delay:-3s}.sky-card:nth-child(3){animation-delay:-6s}
.sky-card:hover { transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 60px rgba(80,120,200,0.18); }
.sky-card-icon { font-size: 26px; margin-bottom: 14px; }
.sky-card h4 { font-family: var(--font); font-size: 16px; font-weight: 800; color: #1a2a4a; margin-bottom: 8px; letter-spacing: -.01em; }
.sky-card p { font-size: 13.5px; color: #4a6080; line-height: 1.6; }

/* ── SERVICES (Section 3) — same sky blue ── */
#services { background: linear-gradient(180deg, #cfe4ff 0%, #d4e7ff 40%, #daeaff 70%, #deeeff 100%); position: relative; z-index: 20; }

/* ── ABOUT ── */
#about { background: linear-gradient(180deg, #daeaff 0%, #ddeeff 40%, #e2f0ff 70%, #e8f4ff 100%); position: relative; z-index: 20; }

/* ── SVC CARDS ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:2}
.svc-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,.95);border-radius:24px;padding:36px 30px;text-align:left;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(80,120,200,.1),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .5s cubic-bezier(.2,1,.2,1),box-shadow .5s;animation:svcF 9s ease-in-out infinite}
.svc-card:nth-child(2){animation-delay:-1.5s}.svc-card:nth-child(3){animation-delay:-3s}.svc-card:nth-child(4){animation-delay:-4.5s}.svc-card:nth-child(5){animation-delay:-6s}.svc-card:nth-child(6){animation-delay:-7.5s}
@keyframes svcF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.svc-card:hover{transform:translateY(-18px) scale(1.02)!important;box-shadow:0 32px 80px rgba(80,120,200,.15),0 0 0 1px rgba(124,58,237,.2)}
.svc-card::before{content:'';position:absolute;top:-40%;left:-65%;width:50%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s;pointer-events:none}
.svc-card:hover::before{left:130%}
.svc-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:24px 24px 0 0;opacity:0;transition:opacity .3s}
.svc-card:hover::after{opacity:1}
.svc-card:nth-child(1)::after{background:linear-gradient(90deg,#7c3aed,#3b82f6)}
.svc-card:nth-child(2)::after{background:linear-gradient(90deg,#7c3aed,#ec4899)}
.svc-card:nth-child(3)::after{background:linear-gradient(90deg,#059669,#0891b2)}
.svc-card:nth-child(4)::after{background:linear-gradient(90deg,#f59e0b,#ec4899)}
.svc-card:nth-child(5)::after{background:linear-gradient(90deg,#0891b2,#3b82f6)}
.svc-card:nth-child(6)::after{background:linear-gradient(90deg,#7c3aed,#3b82f6)}
.svc-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 4px 12px rgba(0,0,0,.08);overflow:hidden}
.svc-ic img{width:30px;height:30px;object-fit:contain}
.svc-card:nth-child(1) .svc-ic{background:linear-gradient(135deg,#eef2ff,#dde4ff)}
.svc-card:nth-child(2) .svc-ic{background:linear-gradient(135deg,#f5f0ff,#ede0ff)}
.svc-card:nth-child(3) .svc-ic{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.svc-card:nth-child(4) .svc-ic{background:linear-gradient(135deg,#fffbeb,#fef3c7)}
.svc-card:nth-child(5) .svc-ic{background:linear-gradient(135deg,#ecfeff,#cffafe)}
.svc-card:nth-child(6) .svc-ic{background:linear-gradient(135deg,#fdf4ff,#fae8ff)}
.svc-num{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--soft);margin-bottom:8px}
.svc-card h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}
.svc-card p{font-size:14px;color:var(--mid);line-height:1.65}

/* ── STATS STRIP ── */
.stats-strip{background:#0f0f14;padding:0;position:relative;z-index:10}
.stats-inner{display:grid;grid-template-columns:repeat(6,1fr)}
.stat-box{padding:44px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;transition:background .3s}
.stat-box:last-child{border-right:none}
.stat-box:hover{background:rgba(255,255,255,.04)}
.stat-n{font-size:40px;font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1}
.stat-u{font-size:22px;color:rgba(255,255,255,.35)}
.stat-l{font-size:12px;font-weight:500;color:rgba(255,255,255,.3);margin-top:10px;line-height:1.4}

/* ── ABOUT GRID ── */
.about-text-block{max-width:700px;margin:0 auto 64px;font-size:16.5px;color:var(--mid);line-height:1.8}
.about-text-block strong{color:var(--ink);font-weight:700}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;position:relative;z-index:2}
.feat-card{background:rgba(255,255,255,.68);backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,.96);border-radius:22px;padding:30px 26px;text-align:left;box-shadow:0 8px 28px rgba(80,120,200,.1),inset 0 1px 0 rgba(255,255,255,.95);position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,1,.2,1),box-shadow .45s;animation:featF 10s ease-in-out infinite}
.feat-card:nth-child(2){animation-delay:-2.5s}.feat-card:nth-child(3){animation-delay:-5s}.feat-card:nth-child(4){animation-delay:-7.5s}.feat-card:nth-child(5){animation-delay:-3.3s}.feat-card:nth-child(6){animation-delay:-6.6s}
@keyframes featF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.feat-card:hover{transform:translateY(-14px) scale(1.02)!important;box-shadow:0 28px 64px rgba(124,58,237,.15),0 0 0 1px rgba(124,58,237,.15)}
.feat-card::before{content:'';position:absolute;top:-40%;left:-65%;width:50%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .5s;pointer-events:none}
.feat-card:hover::before{left:120%}
.feat-ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);overflow:hidden}
.feat-ic img{width:28px;height:28px;object-fit:contain}
.feat-card:nth-child(1) .feat-ic{background:linear-gradient(135deg,#eef2ff,#dde4ff)}
.feat-card:nth-child(2) .feat-ic{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}
.feat-card:nth-child(3) .feat-ic{background:linear-gradient(135deg,#fffbeb,#fef3c7)}
.feat-card:nth-child(4) .feat-ic{background:linear-gradient(135deg,#f5f0ff,#ede0ff)}
.feat-card:nth-child(5) .feat-ic{background:linear-gradient(135deg,#ecfeff,#cffafe)}
.feat-card:nth-child(6) .feat-ic{background:linear-gradient(135deg,#fff0f6,#ffe4f0)}
.feat-card h4{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.feat-card p{font-size:13.5px;color:var(--mid);line-height:1.6}

/* ── PORTFOLIO ── */
#portfolio{background:linear-gradient(155deg,#fdf0ff 0%,#f0f5ff 45%,#fff8f0 100%)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:2}
.port-card{border-radius:22px;overflow:hidden;background:rgba(255,255,255,.68);backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.95);text-decoration:none;color:inherit;display:block;box-shadow:0 8px 32px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .5s cubic-bezier(.2,1,.2,1),box-shadow .5s;animation:portF 11s ease-in-out infinite}
.port-card:nth-child(2){animation-delay:-1.8s}.port-card:nth-child(3){animation-delay:-3.6s}.port-card:nth-child(4){animation-delay:-5.5s}.port-card:nth-child(5){animation-delay:-7.3s}.port-card:nth-child(6){animation-delay:-9.1s}
@keyframes portF{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.port-card:hover{transform:translateY(-18px) scale(1.02)!important;box-shadow:0 36px 80px rgba(0,0,0,.13),0 0 0 1px rgba(124,58,237,.2)}
.port-thumb{aspect-ratio:16/10;overflow:hidden;position:relative;background:rgba(240,237,255,.8)}
.port-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,1,.2,1)}
.port-card:hover .port-thumb img{transform:scale(1.08)}
.port-over{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,15,20,.72),transparent 55%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:20px}
.port-card:hover .port-over{opacity:1}
.port-visit{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.port-body{padding:22px 24px 26px}
.port-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);margin-bottom:7px}
.port-body h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.port-body p{font-size:13px;color:var(--mid);line-height:1.55}

/* ── AUDIT ── */
#audit-section{background:linear-gradient(155deg,#fdf0ff 0%,#f0f5ff 100%);padding:100px 56px}
.audit-card{background:linear-gradient(135deg,#0f0f18,#1a0f2e 50%,#0f1a28);border-radius:28px;padding:72px;text-align:center;position:relative;overflow:hidden;max-width:900px;margin:0 auto;box-shadow:0 40px 100px rgba(15,15,20,.25)}
.audit-card::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(124,58,237,.22),transparent 70%)}
.audit-inner{position:relative;z-index:2}
.audit-tag2{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:6px 18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:24px}
.audit-card h2{font-size:clamp(28px,4vw,50px);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1.04;margin-bottom:18px}
.audit-card p{font-size:16px;color:rgba(255,255,255,.45);line-height:1.75;max-width:540px;margin:0 auto 32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:8px 18px;font-size:12.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px}
.chip::before{content:'✓';font-weight:900;font-size:10px;color:#4ade80}
.audit-open-btn{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff;padding:18px 44px;border-radius:100px;font-size:15px;font-weight:700;border:none;font-family:var(--font);cursor:pointer;box-shadow:0 8px 32px rgba(124,58,237,.4);transition:transform .3s,box-shadow .3s;position:relative}
.audit-open-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 48px rgba(124,58,237,.5)}

/* ── CONTACT ── */
#contact{background:linear-gradient(150deg,#f8f6ff 0%,#f0f8ff 50%,#f8fff5 100%)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:960px;margin:0 auto;text-align:left}
.contact-left h3{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:16px;letter-spacing:-.02em}
.contact-left p{font-size:15.5px;color:var(--mid);line-height:1.8;margin-bottom:32px}
.c-links{display:flex;flex-direction:column;gap:14px}
.c-link{display:flex;align-items:center;gap:14px;padding:18px 22px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.96);border-radius:16px;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
.c-link:hover{transform:translateX(6px);box-shadow:0 8px 28px rgba(124,58,237,.12),0 0 0 1px rgba(124,58,237,.2)}
.c-ic{width:42px;height:42px;border-radius:11px;background:rgba(248,246,255,1);border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.contact-right{background:rgba(255,255,255,.6);backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,.96);border-radius:24px;padding:40px;box-shadow:0 8px 32px rgba(0,0,0,.07);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.contact-right h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.contact-right p{font-size:15px;color:var(--mid);line-height:1.65;max-width:280px}
.speak-btn{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff;padding:16px 36px;border-radius:100px;font-size:15px;font-weight:700;border:none;font-family:var(--font);cursor:pointer;box-shadow:0 8px 28px rgba(124,58,237,.35);transition:transform .3s,box-shadow .3s;position:relative}
.speak-btn:hover{transform:translateY(-3px)}

/* ── FOOTER ── */
footer{background:#0f0f14;padding:36px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.f-logo img{height:28px;filter:brightness(0) invert(1);opacity:.65}
.f-copy{font-size:13px;color:rgba(255,255,255,.25);letter-spacing:.03em}
.f-links{display:flex;gap:24px}
.f-links a{font-size:13px;color:rgba(255,255,255,.25);text-decoration:none;transition:color .2s}
.f-links a:hover{color:rgba(255,255,255,.75)}

/* ── POPUP ── */
.popup-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,15,20,.65);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:24px}
.popup-overlay.open{opacity:1;pointer-events:all}
.popup-box{background:linear-gradient(145deg,#fff,#f8f6ff);border:1.5px solid rgba(255,255,255,.96);border-radius:28px;padding:48px 44px;max-width:480px;width:100%;text-align:center;box-shadow:0 32px 100px rgba(15,15,20,.22);transform:scale(.9) translateY(24px);transition:transform .4s cubic-bezier(.2,1,.2,1);position:relative}
.popup-overlay.open .popup-box{transform:scale(1) translateY(0)}
.popup-close{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.06);border:none;cursor:pointer;font-size:16px;color:var(--mid);display:flex;align-items:center;justify-content:center;transition:background .2s}
.popup-close:hover{background:rgba(0,0,0,.12)}
.popup-icon-wrap{width:72px;height:72px;border-radius:20px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;overflow:hidden}
.popup-icon-wrap img{width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1)}
.popup-box h3{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:10px}
.popup-box p{font-size:14.5px;color:var(--mid);line-height:1.65;margin-bottom:28px}
.popup-actions{display:flex;flex-direction:column;gap:12px}
.popup-btn{display:flex;align-items:center;gap:14px;padding:18px 24px;border-radius:16px;font-size:15px;font-weight:700;text-decoration:none;border:none;transition:transform .25s;cursor:pointer;font-family:var(--font)}
.popup-btn:hover{transform:translateY(-2px)}
.popup-email{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(124,58,237,.3)}
.popup-wa{background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.25)}
.popup-btn-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.popup-btn-icon img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.popup-btn-text{text-align:left}
.popup-btn-text strong{display:block;font-size:15px}
.popup-btn-text span{font-size:12px;opacity:.75;font-weight:500}

/* ── QUOTES OVERLAY ── */
#quotesOverlay{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 32px;pointer-events:none;opacity:0;transition:opacity .8s}
#quotesOverlay.visible{opacity:1}
.quote-slide{position:absolute;opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s;max-width:640px;width:100%}
.quote-slide.active{opacity:1;transform:translateY(0)}
.quote-text{font-family:var(--font);font-size:clamp(20px,4vw,40px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.025em;margin-bottom:14px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.quote-text em{font-style:italic;font-weight:300;background:linear-gradient(135deg,#c084fc,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.quote-attr{font-family:var(--font);font-size:14px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:.04em}

/* ── MOBILE CAROUSEL ── */
/* ══════════════════════════════════════
   RESPONSIVE — complete coverage
══════════════════════════════════════ */

/* ── TABLET 980px ── */
@media(max-width:980px){
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .sec { padding: 80px 24px; }
  .svc-grid, .port-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .sky-cards { grid-template-columns: 1fr 1fr; }
  .sky-content { padding: 80px 24px; }
  .sky-title { font-size: clamp(28px,5vw,48px); }
  .stats-inner { grid-template-columns: repeat(3,1fr); }
  .stat-box:nth-child(3) { border-right: none; }
  .stat-box:nth-child(4) { border-top: 1px solid rgba(255,255,255,.06); }
  .contact-grid { grid-template-columns: 1fr; }
  #audit-section { padding: 80px 24px; }
  .audit-card { padding: 40px 24px; }
  .audit-card h2 { font-size: clamp(22px,4vw,38px); }
  footer { padding: 24px; flex-direction: column; text-align: center; }
  .f-links { justify-content: center; }
  .hero-h1 { font-size: clamp(36px,7vw,72px); }
}

/* ── MOBILE 640px ── */
@media(max-width:640px){
  /* Hero cards carousel */
  .hero-cards { position: fixed; bottom: 24px; left: 0; right: 0; z-index: 6; display: block; height: 150px; pointer-events: none; }
  .hcard { position: absolute; left: 50%; min-width: 82vw; max-width: 82vw; transform: translateX(-50%); opacity: 0; transition: opacity .5s ease, transform .5s ease; animation: none !important; pointer-events: auto; background: rgba(15,10,30,0.55) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; }
  .hcard.c-active { opacity: 1; transform: translateX(-50%) translateY(0) !important; animation: hF 7s ease-in-out infinite !important; }
  .hcard .hcard-n { animation: rainbowText 8s ease-in-out infinite !important; }
  .hcard .hcard-label { color: rgba(255,255,255,0.95) !important; }
  .hcard .hcard-desc { color: rgba(255,255,255,0.6) !important; }
  .carousel-dots { position: fixed; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; gap: 7px; pointer-events: none; }
  .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s, transform .3s; }
  .carousel-dot.active { background: #fff; transform: scale(1.3); }

  /* Grids to single column */
  .svc-grid, .port-grid, .about-grid, .sky-cards { grid-template-columns: 1fr; }

  /* Stats 2 col */
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-box:nth-child(2) { border-right: none; }
  .stat-box { padding: 28px 14px; }
  .stat-n { font-size: 30px; }

  /* Typography scale down */
  .sec-title { font-size: clamp(28px,7vw,42px); }
  .sec-sub { font-size: 15px; margin-bottom: 40px; }
  .hero-h1 { font-size: clamp(32px,9vw,52px); }
  .hero-sub { font-size: 14px; }
  .sky-title { font-size: clamp(26px,7vw,38px); }
  .sky-sub { font-size: 15px; }

  /* Sections padding */
  .sec { padding: 60px 20px; }
  .sky-content { padding: 60px 20px; }
  #audit-section { padding: 60px 20px; }
  .audit-card { padding: 32px 20px; }

  /* Portfolio cards */
  .port-body { padding: 16px 18px 20px; }

  /* Contact */
  .contact-right { padding: 28px 20px; }
  .c-link { font-size: 13px; padding: 14px 16px; }

  /* Nav */
  nav { padding: 0 16px; height: 58px; }
  .logo img { height: 26px; }
  .nav-cta { padding: 8px 16px; font-size: 12px; }

  /* Hero buttons */
  .hero-btns { flex-direction: column; align-items: center; gap: 10px; }
  .btn-grad, .btn-glass { padding: 13px 28px; font-size: 13px; width: 100%; max-width: 260px; justify-content: center; }

  /* Popup */
  .popup-box { padding: 32px 20px; }
  .popup-btn { padding: 14px 16px; }

  /* Footer */
  footer { padding: 20px 16px; gap: 12px; }
  .f-copy { font-size: 11px; }
  .f-links { gap: 16px; flex-wrap: wrap; justify-content: center; }
}

/* ── SMALL MOBILE 380px ── */
@media(max-width:380px){
  .hero-h1 { font-size: 28px; }
  .svc-card, .feat-card, .sky-card { padding: 22px 18px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .hcard { min-width: 90vw; max-width: 90vw; }
}

@keyframes rainbowText {
  0%   { color: #c084fc; }
  16%  { color: #60a5fa; }
  33%  { color: #34d399; }
  50%  { color: #fbbf24; }
  66%  { color: #f472b6; }
  83%  { color: #a78bfa; }
  100% { color: #c084fc; }
}


/* ══════════════════════════════════════
   PAPER PLANES + BIRDS — CSS float animations
   Applied to WRAPPER groups (#wpp1 etc) so
   GSAP never fights CSS on the same element.
   Works on ALL screen sizes — PC, tablet, mobile.
══════════════════════════════════════ */
#wpp1 { animation: floatPP1  6s  ease-in-out infinite; }
#wpp2 { animation: floatPP2  8s  ease-in-out infinite 1s; }
#wpp3 { animation: floatPP3  7s  ease-in-out infinite 2s; }
#wpp4 { animation: floatPP4  9s  ease-in-out infinite 0.5s; }
#wpp5 { animation: floatPP5  6.5s ease-in-out infinite 1.5s; }
#wbb1 { animation: floatBB1  7.5s ease-in-out infinite 0.8s; }
#wbb2 { animation: floatBB2  9s  ease-in-out infinite 2.2s; }
#wbb3 { animation: floatBB3  6s  ease-in-out infinite 3s; }
#wbb4 { animation: floatBB4  8.5s ease-in-out infinite 1.2s; }
#wbb5 { animation: floatBB5  7s  ease-in-out infinite 0.3s; }

/* Planes — gentle drift in each direction */
@keyframes floatPP1 {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(18px,-14px); }
  50%     { transform: translate(30px,-5px); }
  75%     { transform: translate(14px,8px); }
}
@keyframes floatPP2 {
  0%,100% { transform: translate(0,0); }
  30%     { transform: translate(-18px,14px); }
  60%     { transform: translate(-8px,28px); }
}
@keyframes floatPP3 {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(12px,-18px); }
  50%     { transform: translate(-8px,-28px); }
  80%     { transform: translate(-14px,-10px); }
}
@keyframes floatPP4 {
  0%,100% { transform: translate(0,0); }
  35%     { transform: translate(20px,-14px); }
  65%     { transform: translate(32px,4px); }
}
@keyframes floatPP5 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(-22px,8px); }
  70%     { transform: translate(-10px,18px); }
}

/* Birds — slower, more graceful sweeping */
@keyframes floatBB1 {
  0%,100% { transform: translate(0,0); }
  30%     { transform: translate(18px,-10px); }
  60%     { transform: translate(28px,4px); }
}
@keyframes floatBB2 {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-14px,-12px); }
  55%     { transform: translate(-24px,0px); }
  80%     { transform: translate(-10px,8px); }
}
@keyframes floatBB3 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(12px,10px); }
  70%     { transform: translate(20px,4px); }
}
@keyframes floatBB4 {
  0%,100% { transform: translate(0,0); }
  30%     { transform: translate(-16px,-8px); }
  60%     { transform: translate(-8px,-16px); }
}
@keyframes floatBB5 {
  0%,100% { transform: translate(0,0); }
  35%     { transform: translate(10px,-14px); }
  65%     { transform: translate(-4px,-22px); }
}

/* Ensure running on all devices — NO media query restriction */
#wpp1, #wpp2, #wpp3, #wpp4, #wpp5,
#wbb1, #wbb2, #wbb3, #wbb4, #wbb5 {
    animation-play-state: running !important;
    will-change: transform;
}