/* SK TECH LABS FINAL CSS */
:root{--bg:#080a12;--bg-soft:#0a0d16;--white:#fff;--text:#c7cbd5;--muted:#858c9d;--muted-dark:#60697c;--blue:#5d8cff;--blue-light:#91aaff;--blue-soft:#3a4974;--border:rgba(255,255,255,.08);--font-main:"Inter",sans-serif;--font-heading:"Space Grotesk",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font-main);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit}
button{cursor:pointer}
::selection{background:var(--blue);color:#fff}
.container,.nav-container,.hero-container{width:min(100% - 48px,1240px);margin:auto}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:22px 0;background:transparent;transition:.3s}
.site-header.scrolled{padding:14px 0;background:rgba(8,10,18,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.nav-container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{position:relative;width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(145,170,255,.35);border-radius:12px;background:linear-gradient(135deg,rgba(93,140,255,.35),rgba(58,73,116,.12));box-shadow:0 10px 35px rgba(0,0,0,.25)}
.brand-mark::after{content:"";position:absolute;width:70px;height:1px;background:rgba(255,255,255,.3);transform:rotate(-45deg)}
.brand-mark span{position:relative;z-index:2;font-family:var(--font-heading);font-size:13px;font-weight:700}
.brand-text,.footer-brand-text{display:flex;flex-direction:column;gap:4px}
.brand-text strong,.footer-brand-text strong{font-family:var(--font-heading);font-size:15px;line-height:1;letter-spacing:1px}
.brand-text span,.footer-brand-text span{color:#7c8497;font-size:7px;line-height:1;letter-spacing:1.5px;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:34px}
.main-nav a{position:relative;color:#aeb4c4;font-size:13px;transition:color .25s}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--blue);transition:width .25s}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid rgba(255,255,255,.15);border-radius:100px;color:#fff;font-size:12px;transition:.3s}
.nav-cta:hover{background:#fff;color:var(--bg)}
.nav-cta span{font-size:16px}
.mobile-menu-btn{display:none;width:35px;background:transparent;border:0}
.mobile-menu-btn span{display:block;width:100%;height:1px;margin:7px 0;background:#fff;transition:.3s}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.section-padding{padding:150px 0}
.section-label{display:flex;align-items:center;gap:9px;color:#9ca5bb;font-size:10px;font-weight:600;letter-spacing:2.5px}
.section-label::before{content:"";width:25px;height:1px;background:var(--blue);box-shadow:0 0 12px rgba(93,140,255,.6)}
.section-heading{margin-bottom:70px}
.section-heading h2{max-width:750px;margin-top:18px;font-family:var(--font-heading);font-size:clamp(48px,6vw,85px);line-height:.95;letter-spacing:-4px}
.section-heading h2 span{color:#70788c}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:var(--bg)}
.hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:90px 90px;mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%)}
.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.25}
.hero-glow-one{top:20%;right:15%;background:var(--blue-soft);animation:glowMoveOne 8s ease-in-out infinite}
.hero-glow-two{bottom:-15%;left:15%;background:#4c3a91;opacity:.12;animation:glowMoveTwo 10s ease-in-out infinite}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,rgba(58,73,116,.25),transparent 28%),radial-gradient(circle at 20% 70%,rgba(90,70,180,.08),transparent 30%);z-index:-1}
@keyframes glowMoveOne{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}}
@keyframes glowMoveTwo{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}
.hero-container{position:relative;z-index:5}
.hero-content{width:62%;padding-top:70px}
.eyebrow{display:flex;align-items:center;gap:12px;color:#9ca5bb;font-size:9px;font-weight:600;letter-spacing:2.8px;opacity:0;animation:heroFadeUp .8s ease forwards;animation-delay:.2s}
.eyebrow-line{width:30px;height:1px;background:var(--blue);box-shadow:0 0 12px rgba(93,140,255,.8)}
.hero h1{margin-top:28px;font-family:var(--font-heading);font-size:clamp(72px,9vw,138px);font-weight:700;line-height:.82;letter-spacing:-7px;opacity:0;animation:heroTitle 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.35s}
.hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.hero-description{width:440px;max-width:100%;margin-top:38px;color:#8d94a7;font-size:14px;line-height:1.85;opacity:0;animation:heroFadeUp .8s ease forwards;animation-delay:.7s}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:35px;opacity:0;animation:heroFadeUp .8s ease forwards;animation-delay:.9s}
.btn-primary,.btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:0 21px;border-radius:100px;font-size:11px;font-weight:600;overflow:hidden;transition:.3s}
.btn-primary{background:#fff;color:var(--bg)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 45px rgba(255,255,255,.12)}
.btn-secondary{border:1px solid rgba(255,255,255,.12);color:#c7cbd5;background:rgba(255,255,255,.02)}
.btn-secondary:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);color:#fff}
.hero-ai{position:absolute;width:650px;height:650px;right:2%;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;animation:heroOrbEntrance 1.4s cubic-bezier(.16,1,.3,1) forwards}
@keyframes heroOrbEntrance{from{opacity:0;transform:translate(60px,-50%) scale(.8)}to{opacity:1;transform:translate(0,-50%) scale(1)}}
.ai-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.halo-one{width:260px;height:260px;background:radial-gradient(circle,rgba(93,140,255,.2),transparent 70%);filter:blur(15px);animation:haloPulse 4s ease-in-out infinite}
.halo-two{width:420px;height:420px;border:1px solid rgba(93,140,255,.09);animation:haloRotate 20s linear infinite}
.halo-three{width:560px;height:560px;border:1px solid rgba(255,255,255,.035);animation:haloRotateReverse 28s linear infinite}
@keyframes haloPulse{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
@keyframes haloRotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes haloRotateReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
.hero-ai .ai-core{position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,#b4c4ff,#6c86d9 20%,#3a4974 45%,#151b2e 70%,#080a12 100%);box-shadow:0 0 35px rgba(93,140,255,.45),0 0 100px rgba(93,140,255,.2),inset -20px -20px 45px rgba(0,0,0,.4);animation:coreFloat 5s ease-in-out infinite}
.ai-core-inner{position:absolute;width:70px;height:70px;left:30px;top:22px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(160,190,255,.15) 60%,transparent 70%);filter:blur(5px)}
@keyframes coreFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.ai-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(120,150,220,.25);border-radius:50%}
.ai-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:#8aabff;box-shadow:0 0 15px #6c91ff,0 0 30px rgba(93,140,255,.5)}
.orbit-one{width:280px;height:280px;transform:translate(-50%,-50%) rotate(20deg);animation:orbitOne 14s linear infinite}
.orbit-one span{top:20px;left:50%}
.orbit-two{width:420px;height:180px;transform:translate(-50%,-50%) rotate(-35deg);animation:orbitTwo 18s linear infinite}
.orbit-two span{top:50%;right:10px}
.orbit-three{width:520px;height:280px;transform:translate(-50%,-50%) rotate(65deg);animation:orbitThree 24s linear infinite}
.orbit-three span{bottom:20px;left:50%}
@keyframes orbitOne{from{transform:translate(-50%,-50%) rotate(20deg)}to{transform:translate(-50%,-50%) rotate(380deg)}}
@keyframes orbitTwo{from{transform:translate(-50%,-50%) rotate(-35deg)}to{transform:translate(-50%,-50%) rotate(-395deg)}}
@keyframes orbitThree{from{transform:translate(-50%,-50%) rotate(65deg)}to{transform:translate(-50%,-50%) rotate(425deg)}}
.ai-node{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 10px var(--blue-light),0 0 25px rgba(93,140,255,.7);animation:nodePulse 3s ease-in-out infinite}
.ai-node-1{top:22%;left:28%}.ai-node-2{top:27%;right:22%;animation-delay:.5s}.ai-node-3{right:16%;bottom:32%;animation-delay:1s}.ai-node-4{left:22%;bottom:25%;animation-delay:1.5s}.ai-node-5{left:8%;top:48%;animation-delay:2s}
@keyframes nodePulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.5);opacity:1}}
.hero-bottom{position:absolute;left:0;right:0;bottom:38px;display:flex;align-items:center;justify-content:space-between}
.hero-scroll{display:flex;align-items:center;gap:12px;color:#62697a;font-size:8px;letter-spacing:2px}
.scroll-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue);animation:scrollPulse 2s ease-in-out infinite}
.hero-location{display:flex;align-items:center;gap:12px;color:#454c5d;font-size:8px;letter-spacing:1.8px}
.location-line{width:30px;height:1px;background:#343a4a}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroTitle{from{opacity:0;transform:translateY(45px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* BUILD */
.build-section{position:relative;padding:150px 0;background:var(--bg-soft);overflow:hidden}
.build-intro{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;margin-bottom:90px}
.build-heading{display:flex;justify-content:space-between;gap:50px}
.build-heading h2{max-width:600px;font-family:var(--font-heading);font-size:clamp(48px,6vw,82px);line-height:.92;letter-spacing:-4px}
.build-heading h2 span{display:block;color:#687188}
.build-heading p{max-width:300px;align-self:flex-end;color:#858c9d;font-size:13px;line-height:1.8}
.build-services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.build-service{position:relative;min-height:390px;padding:30px;display:flex;flex-direction:column;border-right:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;transition:.4s}
.build-service:hover{background:rgba(58,73,116,.08)}
.service-top{display:flex;justify-content:space-between;color:#525a6d;font-size:10px}
.service-arrow{font-size:18px;transition:.3s}
.build-service:hover .service-arrow{color:#fff;transform:translate(4px,-4px)}
.service-icon{margin-top:55px;width:55px;height:55px;display:grid;place-items:center;border:1px solid rgba(120,145,210,.2);border-radius:14px;color:#91a8e8;font-size:23px;background:rgba(58,73,116,.08);transition:.4s}
.build-service:hover .service-icon{transform:rotate(8deg) scale(1.08);background:rgba(58,73,116,.2)}
.build-service h3{margin-top:28px;font-family:var(--font-heading);font-size:27px;line-height:.95;letter-spacing:-1px}
.build-service p{max-width:230px;margin-top:18px;color:#777f92;font-size:12px;line-height:1.7}
.service-line{position:absolute;left:30px;right:30px;bottom:25px;height:1px;background:linear-gradient(90deg,var(--blue-soft),transparent);opacity:.5}

/* AI */
.ai-section{position:relative;padding:160px 0;background:var(--bg);overflow:hidden}
.ai-main{position:relative;min-height:650px;display:flex;align-items:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ai-content{position:relative;z-index:5;width:55%}
.ai-content h2{margin-top:40px;font-family:var(--font-heading);font-size:clamp(60px,7vw,105px);line-height:.82;letter-spacing:-6px}
.ai-subtitle{margin-top:30px;color:#737b8f;font-family:var(--font-heading);font-size:28px;line-height:1}
.ai-subtitle span{color:#fff}
.ai-content>p{max-width:450px;margin-top:30px;color:#858c9d;font-size:14px;line-height:1.9}
.ai-link{display:inline-flex;align-items:center;gap:15px;margin-top:35px;padding-bottom:8px;border-bottom:1px solid var(--blue-soft);font-size:12px;transition:.3s}
.ai-link:hover{color:var(--blue-light);gap:22px}
.ai-visual-new{position:absolute;width:600px;height:600px;right:-40px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}
.ai-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(93,140,255,.22),transparent 70%);filter:blur(20px);animation:aiGlowPulse 4s ease-in-out infinite}
@keyframes aiGlowPulse{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.ai-network{position:relative;width:500px;height:500px}
.ai-core-new{position:absolute;width:120px;height:120px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 25%,#d0dbff,#7692eb 20%,#3a4974 45%,#151b2e 72%,#080a12 100%);box-shadow:0 0 35px rgba(93,140,255,.6),0 0 100px rgba(93,140,255,.3);z-index:5;animation:aiCoreFloat 5s ease-in-out infinite}
.ai-core-new span{position:absolute;width:45px;height:45px;left:22px;top:17px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);filter:blur(5px)}
@keyframes aiCoreFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.network-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(120,150,220,.2)}
.ring-1{width:220px;height:220px;transform:translate(-50%,-50%);animation:networkRotate1 12s linear infinite}
.ring-2{width:360px;height:170px;transform:translate(-50%,-50%) rotate(55deg);animation:networkRotate2 17s linear infinite}
.ring-3{width:470px;height:260px;transform:translate(-50%,-50%) rotate(-30deg);animation:networkRotate3 23s linear infinite}
@keyframes networkRotate1{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes networkRotate2{from{transform:translate(-50%,-50%) rotate(55deg)}to{transform:translate(-50%,-50%) rotate(415deg)}}
@keyframes networkRotate3{from{transform:translate(-50%,-50%) rotate(-30deg)}to{transform:translate(-50%,-50%) rotate(330deg)}}
.network-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(100,140,230,.35),transparent);transform-origin:center}
.line-1{width:360px;left:70px;top:180px;transform:rotate(25deg)}.line-2{width:400px;left:50px;top:280px;transform:rotate(-20deg)}.line-3{width:300px;left:100px;top:330px;transform:rotate(45deg)}.line-4{width:350px;left:75px;top:230px;transform:rotate(-55deg)}
.network-node{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 12px #6f92ff,0 0 25px rgba(93,140,255,.5);animation:networkNodePulse 3s ease-in-out infinite}
.n1{top:92px;left:180px}.n2{top:120px;right:120px;animation-delay:.5s}.n3{top:235px;right:45px;animation-delay:1s}.n4{bottom:110px;right:130px;animation-delay:1.5s}.n5{bottom:80px;left:170px;animation-delay:2s}.n6{bottom:180px;left:50px;animation-delay:.7s}.n7{top:210px;left:75px;animation-delay:1.2s}.n8{top:50px;right:210px;animation-delay:1.8s}
@keyframes networkNodePulse{0%,100%{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1.5)}}
.ai-capabilities{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--border);border-bottom:1px solid var(--border)}
.ai-capability{min-height:190px;padding:28px;display:grid;grid-template-columns:35px 1fr 20px;gap:15px;border-right:1px solid var(--border);border-top:1px solid var(--border);transition:.4s}
.ai-capability:hover{background:rgba(58,73,116,.1)}
.ai-capability>span{color:#51596c;font-size:9px}
.ai-capability h3{font-family:var(--font-heading);font-size:17px}
.ai-capability p{margin-top:10px;color:#747d90;font-size:11px;line-height:1.7}
.ai-capability b{color:#555f75;font-size:17px;transition:.3s}
.ai-capability:hover b{color:#fff;transform:translate(3px,-3px)}

/* PROCESS */
.process-section{background:var(--bg-soft)}
.process-line{display:flex;align-items:center}
.process-item{flex:1}
.process-item span{display:block;color:#51596c;font-size:10px;margin-bottom:20px}
.process-item strong{display:block;font-family:var(--font-heading);font-size:18px}
.process-item small{display:block;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.6}
.process-connector{width:50px;height:1px;background:#343a4a}
/* =========================================================
   WORK / CASE STUDIES — PREMIUM DESIGN
========================================================= */

.work-section {
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

/* Soft background atmosphere */

.work-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    top: 5%;
    left: -250px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(70, 100, 210, .10),
        transparent 68%
    );
    pointer-events: none;
}


/* Grid */

/* =========================================================
   WORK — 3 CARDS IN ONE ROW
========================================================= */

.work-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* All cards same size */

.work-card {
    min-width: 0;
}


/* Remove old large-card behavior */

.work-large {
    grid-row: auto;
}


/* Visual */

.work-image,
.work-large .work-image {
    min-height: 360px;
}


/* Information */

.work-info {
    padding: 20px 2px 10px;
}

.work-info h3 {
    font-size: 20px;
}


/* Tablet */

@media (max-width: 1000px) {

    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */

@media (max-width: 650px) {

    .work-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .work-image,
    .work-large .work-image {
        min-height: 320px;
    }

}


/* Cards */

.work-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}


/* Large card */

.work-large {
    grid-row: span 2;
}


/* Visual */

.work-image {
    position: relative;
    min-height: 300px;

    display: flex;
    align-items: flex-end;

    padding: 28px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 2px;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .6s ease;
}


/* Large visual */

.work-large .work-image {
    min-height: 620px;
}


/* Inner frame */

.work-image::before {
    content: "";
    position: absolute;

    width: 72%;
    height: 72%;

    left: 14%;
    top: 14%;

    border: 1px solid rgba(140,165,220,.13);

    transform: rotate(22deg);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        width .8s ease,
        height .8s ease;
}


/* Glow */

.work-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(93,140,255,.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            transparent 30%,
            rgba(255,255,255,.025),
            transparent 70%
        );

    opacity: .8;

    transition: opacity .5s ease;
}


/* Category */

.work-image span {
    position: relative;
    z-index: 4;

    padding: 7px 11px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;

    background: rgba(7,10,18,.55);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #aeb8d2;

    font-size: 8px;
    letter-spacing: 2.5px;
}


/* Card number */

.work-card::before {
    content: "01";

    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 5;

    font-family: var(--font-heading);

    font-size: 10px;
    letter-spacing: 1px;

    color: rgba(255,255,255,.45);
}


/* Different numbers */

.work-card:nth-child(2)::before {
    content: "02";
}

.work-card:nth-child(3)::before {
    content: "03";
}


/* Arrow */

.work-card::after {
    content: "↗";

    position: absolute;

    top: 17px;
    right: 18px;

    z-index: 5;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;

    background: rgba(8,10,18,.45);

    backdrop-filter: blur(10px);

    color: #fff;

    font-size: 15px;

    opacity: .65;

    transition:
        transform .4s ease,
        background .4s ease,
        opacity .4s ease;
}


/* Hover */

.work-card:hover .work-image {
    transform: translateY(-5px);

    border-color: rgba(110,145,230,.35);

    box-shadow:
        0 25px 70px rgba(0,0,0,.25),
        0 0 50px rgba(70,100,200,.08);
}


.work-card:hover .work-image::before {
    width: 80%;
    height: 80%;

    left: 10%;
    top: 10%;

    transform: rotate(38deg) scale(1.05);
}


.work-card:hover .work-image::after {
    opacity: 1;
}


.work-card:hover::after {
    opacity: 1;

    transform:
        translate(3px,-3px)
        rotate(3deg);

    background: rgba(93,140,255,.15);
}


/* =========================================================
   PROJECT BACKGROUNDS
========================================================= */

.work-education {
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(66,110,230,.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 25%,
            rgba(100,140,255,.08),
            transparent 30%
        ),
        #0a101e;
}


.work-healthcare {
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(55,170,165,.22),
            transparent 30%
        ),
        #091516;
}


.work-business {
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(145,80,210,.22),
            transparent 30%
        ),
        #100b17;
}


/* =========================================================
   PROJECT INFORMATION
========================================================= */

.work-info {
    position: relative;

    padding: 20px 4px 35px;
}


.work-info h3 {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: var(--font-heading);

    font-size: 22px;
    line-height: 1.1;

    letter-spacing: -.7px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.work-info h3::after {
    content: "→";

    color: #68799d;

    font-size: 16px;

    transition:
        transform .3s ease,
        color .3s ease;
}


.work-info p {
    max-width: 520px;

    margin-top: 9px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.7;
}


.work-card:hover .work-info h3 {
    color: var(--blue-light);

    transform: translateX(4px);
}


.work-card:hover .work-info h3::after {
    color: var(--blue-light);

    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .work-large {
        grid-row: span 2;
    }

    .work-large .work-image {
        min-height: 520px;
    }

}


@media (max-width: 700px) {

    .work-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .work-large {
        grid-row: auto;
    }

    .work-large .work-image,
    .work-image {
        min-height: 320px;
    }

    .work-info {
        padding-bottom: 15px;
    }

}

/* ABOUT */
.about-section{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}
.about-content h2{font-family:var(--font-heading);font-size:clamp(50px,6vw,85px);line-height:.9;letter-spacing:-4px}
.about-content h2 span{display:block;color:#687188}
.about-content>p{max-width:620px;color:#858c9d;font-size:15px;line-height:1.9;margin-top:30px}
.about-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.about-stat-grid div{padding:25px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.about-stat-grid strong{display:block;font-family:var(--font-heading);font-size:22px}
.about-stat-grid span{display:block;margin-top:8px;color:#60697c;font-size:8px;letter-spacing:1px}

/* CONTACT */
.contact-section{padding:120px 0 160px;background:var(--bg)}
.contact-box{position:relative;padding:120px 20px;text-align:center;overflow:hidden;border:1px solid var(--border);background:radial-gradient(circle at 50% 40%,rgba(58,73,116,.3),transparent 35%)}
.contact-box .section-label{justify-content:center}
.contact-box h2{margin-top:25px;font-family:var(--font-heading);font-size:clamp(70px,10vw,140px);line-height:.8;letter-spacing:-7px}
.contact-box h2 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.contact-box p{color:var(--muted);margin-top:30px}
.btn-primary.large{margin-top:35px;padding:17px 25px}

/* FOOTER */
.site-footer{border-top:1px solid var(--border);padding:40px 0;background:var(--bg)}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-tagline{color:#596071;font-size:9px;letter-spacing:2px}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
.footer-bottom p,.footer-bottom a{color:#606778;font-size:10px}
.footer-bottom a:hover{color:#fff}

/* REVEAL */
.build-service,.ai-capability,.process-item,.work-card,.about-content,.about-stat-grid,.contact-box{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.build-service.is-visible,.ai-capability.is-visible,.process-item.is-visible,.work-card.is-visible,.about-content.is-visible,.about-stat-grid.is-visible,.contact-box.is-visible{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:1100px){
.hero-ai{right:-8%;opacity:.7}.hero-content{width:68%}
.build-services{grid-template-columns:repeat(2,1fr)}
.ai-content{width:62%}.ai-visual-new{right:-120px;opacity:.55}
}
@media(max-width:900px){
.main-nav{gap:18px}.hero-content{width:75%}.hero-ai{right:-15%;opacity:.45}
.build-intro{grid-template-columns:1fr;gap:30px}.build-heading{flex-direction:column;gap:25px}.build-heading p{align-self:flex-start}
.ai-main{min-height:850px}.ai-content{width:65%}.ai-visual-new{right:-150px;opacity:.45}
.ai-capabilities{grid-template-columns:repeat(2,1fr)}
.about-grid{grid-template-columns:1fr;gap:40px}.about-stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
.container,.nav-container,.hero-container{width:calc(100% - 32px)}
.site-header{padding:14px 0}.brand{gap:9px}.brand-mark{width:38px;height:38px;border-radius:10px}.brand-text strong{font-size:13px}.brand-text span{font-size:5.5px;letter-spacing:1px}
.main-nav{display:none;position:absolute;top:70px;left:16px;right:16px;flex-direction:column;align-items:flex-start;gap:22px;padding:25px;background:rgba(10,13,22,.97);border:1px solid var(--border);border-radius:15px;backdrop-filter:blur(18px)}
.main-nav.mobile-open{display:flex}.nav-cta{display:none}.mobile-menu-btn{display:block}
.hero{min-height:800px}.hero-content{width:100%;padding-top:70px}.eyebrow{font-size:8px;letter-spacing:2px}.hero h1{margin-top:22px;font-size:clamp(52px,16vw,76px);line-height:.86;letter-spacing:-4px}.hero-description{margin-top:28px;max-width:340px;font-size:12px;line-height:1.8}.hero-actions{margin-top:28px;flex-direction:column;align-items:flex-start}
.hero-ai{width:420px;height:420px;right:-185px;top:67%;opacity:.28}.hero-ai .ai-core{width:130px;height:130px}.orbit-one{width:220px;height:220px}.orbit-two{width:330px;height:145px}.orbit-three{width:410px;height:220px}.halo-two{width:330px;height:330px}.halo-three{width:420px;height:420px}
.hero-location{display:none}.section-padding{padding:80px 0}.build-section,.ai-section{padding:90px 0}.section-heading{margin-bottom:45px}.section-heading h2{font-size:46px;letter-spacing:-3px}
.build-heading h2{font-size:46px;letter-spacing:-3px}.build-heading p{max-width:100%;font-size:12px}.build-services{grid-template-columns:1fr}.build-service{min-height:300px;padding:25px}.service-icon{margin-top:40px}.build-service h3{font-size:25px}
.ai-main{min-height:760px;padding-top:60px}.ai-content{width:100%}.ai-content h2{margin-top:30px;font-size:54px;letter-spacing:-4px}.ai-subtitle{margin-top:22px;font-size:19px}.ai-content>p{max-width:340px;font-size:12px;line-height:1.8}
.ai-visual-new{width:380px;height:380px;right:-165px;bottom:-55px;top:auto;transform:none;opacity:.28}.ai-network{width:350px;height:350px}.ai-core-new{width:95px;height:95px}.ring-1{width:175px;height:175px}.ring-2{width:290px;height:140px}.ring-3{width:360px;height:200px}
.ai-capabilities{grid-template-columns:1fr}.ai-capability{min-height:145px;padding:22px;grid-template-columns:25px 1fr 15px}
.process-line{flex-direction:column;align-items:flex-start;gap:20px}.process-item{width:100%}.process-connector{width:1px;height:25px;margin-left:3px}
.work-grid{grid-template-columns:1fr;gap:35px}.work-large{grid-row:auto}.work-large .work-image,.work-image{min-height:280px}.work-info h3{font-size:19px}.work-info p{font-size:11px}
.about-content h2{font-size:46px;letter-spacing:-3px}.about-content>p{font-size:12px}.about-stat-grid{margin-top:40px}.about-stat-grid div{padding:20px 15px}.about-stat-grid strong{font-size:18px}
.contact-section{padding:80px 0 90px}.contact-box{padding:75px 18px}.contact-box h2{font-size:62px;letter-spacing:-4px}.contact-box p{font-size:12px}.btn-primary.large{max-width:100%;font-size:10px;padding:15px 18px}
.site-footer{padding:35px 0}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start;gap:25px}.footer-tagline{font-size:7px;letter-spacing:1.5px}
}
@media(max-width:380px){
.hero h1{font-size:50px}.hero-ai{right:-210px}.build-heading h2,.section-heading h2{font-size:42px}.ai-content h2{font-size:49px}.contact-box h2{font-size:54px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* =========================================================
   MULTI-PAGE NAVIGATION / INNER PAGES
========================================================= */
.inner-hero{padding:170px 0 100px;background:var(--bg);position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.inner-hero::after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:80px;background:radial-gradient(circle,rgba(70,110,210,.16),transparent 68%);pointer-events:none}
.inner-hero h1{position:relative;z-index:1;margin-top:28px;font-family:var(--font-heading);font-size:clamp(58px,8vw,120px);line-height:.86;letter-spacing:-6px;max-width:950px}.inner-hero h1 span{display:block;color:#687188}.inner-hero p{position:relative;z-index:1;max-width:650px;margin-top:32px;color:var(--muted);font-size:15px;line-height:1.9}.inner-section{padding:120px 0;background:var(--bg)}
.service-page-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:60px}.service-page-grid article{min-height:280px;padding:30px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .3s ease,transform .3s ease}.service-page-grid article:hover{background:rgba(255,255,255,.025);transform:translateY(-4px)}.service-page-grid article>span{display:block;color:#5d9cff;font-size:10px;letter-spacing:2px}.service-page-grid h2{margin-top:60px;font-family:var(--font-heading);font-size:26px;letter-spacing:-1px}.service-page-grid p{margin-top:15px;color:var(--muted);font-size:12px;line-height:1.8;max-width:340px}
.page-cta{padding:110px 0;background:#090c15;border-top:1px solid var(--border)}.page-cta h2{font-family:var(--font-heading);font-size:clamp(50px,7vw,95px);line-height:.9;letter-spacing:-5px}.page-cta h2 span{color:#687188}.page-cta .btn-primary{margin-top:35px}
.work-page-grid .work-image-photo{position:relative;padding:0;overflow:hidden}.work-image-photo img{display:block;width:100%;height:100%;min-height:245px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.work-large .work-image-photo img{min-height:480px}.work-image-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,18,.72),rgba(5,8,18,.08) 60%,rgba(5,8,18,.12));pointer-events:none}.work-card:hover .work-image-photo img{transform:scale(1.045)}.work-image-photo .work-category{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-size:9px;letter-spacing:3px}
@media(max-width:900px){.service-page-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.inner-hero{padding:125px 0 75px}.inner-hero h1{font-size:52px;letter-spacing:-3px}.inner-hero p{font-size:12px}.inner-section{padding:80px 0}.service-page-grid{grid-template-columns:1fr;margin-top:40px}.service-page-grid article{min-height:240px}.service-page-grid h2{margin-top:45px}.page-cta{padding:80px 0}.page-cta h2{font-size:52px}.work-large .work-image-photo img,.work-image-photo img{min-height:280px}}

/* =========================================================
   HOW WE WORK — PROCESS ICONS
========================================================= */

.process-item {
    position: relative;
}

.process-number {
    position: absolute;
    top: -34px;
    left: 0;

    font-size: 11px;
    letter-spacing: 1px;
    color: var(--muted);
}

.process-icon {
    width: 54px;
    height: 54px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(93, 156, 255, 0.28);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(93, 156, 255, 0.08),
            rgba(138, 102, 255, 0.03)
        );

    box-shadow:
        0 0 30px rgba(93, 156, 255, 0.06);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.process-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: #6fa3ff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-item:hover .process-icon {
    transform: translateY(-4px);

    border-color: rgba(93, 156, 255, 0.7);

    box-shadow:
        0 0 30px rgba(93, 156, 255, 0.18);
}

.process-item strong {
    display: block;

    margin-bottom: 8px;

    font-size: 16px;
    letter-spacing: -0.2px;
}

.process-item small {
    display: block;

    max-width: 240px;

    font-size: 12px;
    line-height: 1.7;

    color: var(--muted);
}


/* Connector */

.process-connector {
    height: 1px;
    flex: 1;

    margin: 26px 25px 0;

    background:
        linear-gradient(
            90deg,
            rgba(93, 156, 255, 0.35),
            rgba(93, 156, 255, 0.05)
        );
}


/* Mobile */

@media (max-width: 768px) {

    .process-connector {
        display: none;
    }

    .process-item {
        margin-bottom: 50px;
    }

    .process-number {
        top: -25px;
    }

}

/* =========================================================
   HERO — AI NEURAL NETWORK
========================================================= */

.neural-hero {
    position: relative;
    width: min(600px, 42vw);
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(72, 111, 220, .12),
            rgba(8, 10, 18, 0) 65%
        );
}


/* Ambient glow */

.neural-glow {
    position: absolute;
    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(70, 105, 255, .15);

    filter: blur(80px);

    animation: neuralGlow 5s ease-in-out infinite;
}


/* Subtle technical grid */

.neural-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(100, 130, 190, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100, 130, 190, .045) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            circle,
            black 15%,
            transparent 75%
        );
}


/* SVG connections */

.neural-connections {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.neural-connections line {
    stroke: rgba(100, 145, 230, .25);
    stroke-width: 1;
}

.data-pulse {
    fill: #7da7ff;

    filter:
        drop-shadow(
            0 0 7px rgba(100, 150, 255, .9)
        );
}


/* Central AI core */

.neural-core {
    position: relative;
    z-index: 5;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 35% 30%,
            #dbe7ff 0%,
            #789cff 12%,
            #263e86 42%,
            #090d1d 72%
        );

    box-shadow:
        0 0 35px rgba(75, 110, 255, .35),
        0 0 90px rgba(75, 110, 255, .12);

    animation: coreFloat 4s ease-in-out infinite;
}


/* Core rings */

.core-ring {
    position: absolute;

    border: 1px solid rgba(110, 150, 255, .35);

    border-radius: 50%;
}

.ring-one {
    width: 155px;
    height: 155px;

    animation: ringPulse 4s ease-in-out infinite;
}

.ring-two {
    width: 190px;
    height: 190px;

    border-color: rgba(110, 150, 255, .14);

    animation: ringPulse 5s ease-in-out infinite reverse;
}


/* AI symbol */

.core-symbol {
    display: flex;
    align-items: center;
    gap: 7px;
}

.core-symbol span {
    width: 5px;
    height: 30px;

    border-radius: 5px;

    background: #ffffff;

    box-shadow:
        0 0 10px rgba(255,255,255,.6);
}

.core-symbol span:nth-child(1) {
    height: 18px;
}

.core-symbol span:nth-child(2) {
    height: 35px;
}

.core-symbol span:nth-child(3) {
    height: 24px;
}


/* Nodes */

.neural-node {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #83aaff;

    box-shadow:
        0 0 12px rgba(100, 150, 255, .9);

    animation: nodePulse 2.8s ease-in-out infinite;
}

.node-a {
    left: 23%;
    top: 23%;
}

.node-b {
    right: 23%;
    top: 23%;

    animation-delay: .7s;
}

.node-c {
    right: 15%;
    top: 50%;

    animation-delay: 1.3s;
}

.node-d {
    right: 23%;
    bottom: 23%;

    animation-delay: .4s;
}

.node-e {
    left: 23%;
    bottom: 23%;

    animation-delay: 1.8s;
}

.node-f {
    left: 15%;
    top: 50%;

    animation-delay: 1s;
}


/* Animations */

@keyframes neuralGlow {

    0%,
    100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.15);
        opacity: .9;
    }

}


@keyframes coreFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes ringPulse {

    0%,
    100% {
        transform: scale(.96);
        opacity: .5;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

}


@keyframes nodePulse {

    0%,
    100% {
        transform: scale(.75);
        opacity: .45;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

}


/* Mobile */

@media (max-width: 900px) {

    .neural-hero {
        width: min(500px, 80vw);
        margin: 40px auto 0;
    }

}

/* =========================================================
   SK TECH LABS LOGO
========================================================= */

.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-logo-image {
    display: block;
    width: 190px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}


/* Footer */

.footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-logo img {
    display: block;
    width: 180px;
    height: auto;
    max-height: 55px;
    object-fit: contain;
}


/* Mobile */

@media (max-width: 768px) {

    .site-logo-image {
        width: 155px;
        max-height: 48px;
    }

    .footer-logo img {
        width: 155px;
    }

}

/* =========================================================
   HERO — ANIMATION BELOW CONTENT
========================================================= */

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    width: 100%;
    max-width: 900px;
    text-align: left;
}

.hero-ai.neural-hero {
    position: relative;

    width: min(760px, 85vw);
    height: 300px;

    margin: 35px auto 0;

    flex-shrink: 0;
}


/* Make the animation wider and shorter */

.hero-ai.neural-hero .neural-core {
    transform: scale(.72);
}

.hero-ai.neural-hero .core-ring {
    transform: scale(.72);
}

.hero-ai.neural-hero .neural-glow {
    width: 220px;
    height: 220px;
}


/* Move nodes inward */

.hero-ai.neural-hero .node-a {
    left: 30%;
    top: 20%;
}

.hero-ai.neural-hero .node-b {
    right: 30%;
    top: 20%;
}

.hero-ai.neural-hero .node-c {
    right: 20%;
    top: 50%;
}

.hero-ai.neural-hero .node-d {
    right: 30%;
    bottom: 20%;
}

.hero-ai.neural-hero .node-e {
    left: 30%;
    bottom: 20%;
}

.hero-ai.neural-hero .node-f {
    left: 20%;
    top: 50%;
}


/* Hide technical grid if it feels too busy */

.hero-ai.neural-hero .neural-grid {
    opacity: .45;
}


/* Hero bottom */

.hero-bottom {
    width: 100%;
    margin-top: 20px;
}


/* Mobile */

@media (max-width: 768px) {

    .hero-ai.neural-hero {
        width: 100%;
        height: 240px;
        margin-top: 20px;
    }

    .hero-content {
        text-align: left;
    }

}


/* =========================================================
   HERO ANIMATION — REMOVE DEBUG / BOX BORDER
   ========================================================= */

.hero-ai.neural-hero {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hero-ai.neural-hero::before,
.hero-ai.neural-hero::after {
    border: none !important;
    outline: none !important;
}

.hero-ai.neural-hero > .neural-grid,
.hero-ai.neural-hero > .neural-glow,
.hero-ai.neural-hero > .neural-connections,
.hero-ai.neural-hero > .neural-core,
.hero-ai.neural-hero > .neural-node {
    border: none !important;
    outline: none !important;
}

/* =========================================================
   WORK — ANIMATED TECHNOLOGY VISUALS
========================================================= */

.tech-visual {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   EDUCATION — AI NETWORK
========================================================= */

.education-visual {
    background:
        radial-gradient(
            circle at center,
            rgba(65, 105, 220, .20),
            transparent 30%
        );
}


/* Core */

.education-visual .visual-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 86px;
    height: 86px;

    transform: translate(-50%, -50%);

    display: grid;
    place-items: center;

    border: 1px solid rgba(120,160,255,.45);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #b9ceff,
            #4167c5 25%,
            #10182e 70%
        );

    box-shadow:
        0 0 35px rgba(70,110,255,.30);

    animation: educationCore 4s ease-in-out infinite;
}

.education-visual .visual-core span {
    color: white;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 2px;
}


/* Nodes */

.data-node {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #83aaff;

    box-shadow:
        0 0 15px rgba(100,150,255,.9);

    animation: dataNode 3s ease-in-out infinite;
}

.data-node.node-1 {
    left: 20%;
    top: 28%;
}

.data-node.node-2 {
    right: 22%;
    top: 23%;
    animation-delay: .6s;
}

.data-node.node-3 {
    right: 17%;
    bottom: 25%;
    animation-delay: 1.2s;
}

.data-node.node-4 {
    left: 22%;
    bottom: 22%;
    animation-delay: 1.8s;
}

.data-node.node-5 {
    left: 12%;
    top: 52%;
    animation-delay: 2.3s;
}


/* Network lines */

.data-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100,145,240,.55),
            transparent
        );

    animation: dataLine 3s ease-in-out infinite;
}

.line-1 {
    width: 43%;

    left: 22%;
    top: 30%;

    transform: rotate(19deg);
}

.line-2 {
    width: 42%;

    left: 22%;
    top: 52%;

    transform: rotate(-28deg);

    animation-delay: .8s;
}

.line-3 {
    width: 40%;

    left: 50%;
    top: 50%;

    transform: rotate(34deg);

    animation-delay: 1.5s;
}


/* =========================================================
   HEALTHCARE — DATA / PULSE
========================================================= */

.healthcare-visual {
    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle,
            rgba(70,190,175,.18),
            transparent 42%
        );
}


.health-ring {
    position: absolute;

    border: 1px solid rgba(100,220,210,.25);

    border-radius: 50%;

    animation: healthRing 5s ease-in-out infinite;
}

.ring-1 {
    width: 120px;
    height: 120px;
}

.ring-2 {
    width: 190px;
    height: 190px;

    animation-delay: .7s;
}

.ring-3 {
    width: 280px;
    height: 280px;

    animation-delay: 1.4s;
}


/* Pulse */

.health-pulse {
    position: absolute;

    width: 260px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(90,230,215,.8),
            transparent
        );

    animation: healthPulse 2.5s ease-in-out infinite;
}


.health-core {
    position: relative;
    z-index: 3;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #d8fffb,
            #4fc9bc 25%,
            #102522 70%
        );

    color: white;

    font-size: 28px;

    box-shadow:
        0 0 40px rgba(70,210,195,.35);

    animation: healthCore 3s ease-in-out infinite;
}


/* =========================================================
   BUSINESS — WORKFLOW
========================================================= */

.workflow-visual {
    background:
        radial-gradient(
            circle at center,
            rgba(150,80,210,.18),
            transparent 42%
        );
}


.workflow-node {
    position: absolute;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(180,120,240,.35);

    border-radius: 12px;

    background: rgba(18,10,28,.8);

    box-shadow:
        0 0 25px rgba(150,80,210,.12);

    animation: workflowNode 3.5s ease-in-out infinite;
}


.workflow-node span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #b58aff;

    box-shadow:
        0 0 12px rgba(180,120,255,.9);
}


.node-a {
    left: 18%;
    top: 25%;
}

.node-b {
    left: 47%;
    top: 42%;

    animation-delay: .7s;
}

.node-c {
    right: 18%;
    top: 25%;

    animation-delay: 1.4s;
}

.node-d {
    right: 28%;
    bottom: 20%;

    animation-delay: 2s;
}


/* Workflow connections */

.workflow-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(175,120,240,.55),
            transparent
        );

    transform-origin: left center;

    animation: workflowFlow 2.5s linear infinite;
}


.workflow-1 {
    width: 31%;

    left: 25%;
    top: 34%;

    transform: rotate(24deg);
}

.workflow-2 {
    width: 28%;

    left: 52%;
    top: 46%;

    transform: rotate(-20deg);

    animation-delay: .8s;
}

.workflow-3 {
    width: 25%;

    left: 53%;
    top: 58%;

    transform: rotate(28deg);

    animation-delay: 1.5s;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes educationCore {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.95);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}


@keyframes dataNode {

    0%,
    100% {
        transform: scale(.65);
        opacity: .45;
    }

    50% {
        transform: scale(1.45);
        opacity: 1;
    }
}


@keyframes dataLine {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: .8;
    }
}


@keyframes healthRing {

    0%,
    100% {
        transform: scale(.92);
        opacity: .25;
    }

    50% {
        transform: scale(1.08);
        opacity: .75;
    }
}


@keyframes healthPulse {

    0% {
        transform: translateX(-80px);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: translateX(80px);
        opacity: 0;
    }
}


@keyframes healthCore {

    0%,
    100% {
        transform: scale(.95);
    }

    50% {
        transform: scale(1.08);
    }
}


@keyframes workflowNode {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


@keyframes workflowFlow {

    0% {
        opacity: .15;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .15;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tech-visual *,
    .tech-visual {
        animation: none !important;
    }

}

/* =========================================================
   FIX — REMOVE EXCESSIVE SPACE AFTER DOMAIN SECTION
========================================================= */

/* Remove unwanted fixed height from domain section */
#domains {
    min-height: 0 !important;
    height: auto !important;
}


/* Domain grid should only use the space it needs */
#domains .domain-feature-grid {
    height: auto !important;
    min-height: 0 !important;
}


/* Remove excessive space after the cards */
#domains .domain-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* Prevent empty visual/container blocks */
#domains .domain-card {
    min-height: 0 !important;
}


/* Tighten the transition into About */
#domains {
    padding-bottom: 45px !important;
}

.about-section {
    padding-top: 70px !important;
}


/* If an empty visual element is creating the large block */
#domains .domain-visual:empty {
    display: none !important;
}


/* Mobile */
@media (max-width: 650px) {

    #domains {
        padding-bottom: 35px !important;
    }

    .about-section {
        padding-top: 50px !important;
    }

}

/* =========================================================
   SK TECH LABS — PREMIUM CURSOR EFFECT
========================================================= */

.sk-cursor-glow {

    position: fixed;

    width: 120px;
    height: 120px;

    pointer-events: none;

    z-index: 99999;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(70,120,255,.16) 0%,
            rgba(70,120,255,.07) 35%,
            transparent 70%
        );

    filter: blur(5px);

    opacity: 0;

    transition:
        opacity .3s ease;

}


.sk-cursor-glow.active {

    opacity: 1;

}


/* =========================================================
   CURSOR RING
========================================================= */

.sk-cursor-ring {

    position: fixed;

    width: 34px;
    height: 34px;

    pointer-events: none;

    z-index: 100000;

    border-radius: 50%;

    border:
        1px solid
        rgba(120,160,255,.45);

    background:
        rgba(70,110,255,.025);

    box-shadow:
        0 0 20px
        rgba(70,120,255,.12);

    opacity: 0;

    transition:
        width .3s cubic-bezier(.16,1,.3,1),
        height .3s cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        background .3s ease,
        opacity .3s ease;

}


.sk-cursor-ring.active {

    opacity: 1;

}


/* =========================================================
   HOVERING LINKS / BUTTONS
========================================================= */

.sk-cursor-ring.hover {

    width: 58px;

    height: 58px;

    border-color:
        rgba(120,170,255,.7);

    background:
        rgba(80,130,255,.08);

    box-shadow:
        0 0 30px
        rgba(70,120,255,.18);

}


/* =========================================================
   PARTICLES
========================================================= */

.sk-cursor-particle {

    position: fixed;

    width: 4px;
    height: 4px;

    pointer-events: none;

    z-index: 99998;

    border-radius: 50%;

    background:
        #7fa8ff;

    box-shadow:
        0 0 10px
        rgba(100,150,255,.9);

    transform:
        translate(-50%, -50%);

    animation:
        cursorParticle .7s ease-out forwards;

}


@keyframes cursorParticle {

    0% {

        opacity: .9;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

    100% {

        opacity: 0;

        transform:
            translate(
                calc(-50% + var(--particle-x, 0px)),
                calc(-50% + var(--particle-y, -18px))
            )
            scale(0);

    }

}


/* =========================================================
   DON'T SHOW ON TOUCH DEVICES
========================================================= */

@media (pointer: coarse) {

    .sk-cursor-glow,
    .sk-cursor-ring,
    .sk-cursor-particle {

        display: none !important;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sk-cursor-glow,
    .sk-cursor-ring,
    .sk-cursor-particle {

        display: none !important;

    }

}