* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --bg: #ffffff;
     --bg2: #f7f7f5;
     --bg3: #efefec;
     --ink: #080808;
     --ink2: #1a1a1a;
     --muted: #666666;
     --faint: #999999;
     --lime: #b8e000;
     --lime-dk: #94b800;
     --cobalt: #1a4fff;
     --rose: #ff2d55;
     --border: #e0e0db;
     --border-dk: #c8c8c2;
     --r: 0px;
     /* SQUARE — no border radius */
     --shadow: 0 2px 20px rgba(0, 0, 0, .08);
     --shadow-lg: 0 8px 48px rgba(0, 0, 0, .14);
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Manrope', 'Outfit', sans-serif;
     background: var(--bg);
     color: var(--ink);
     overflow-x: hidden;
 }

 #prog {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--lime), var(--cobalt));
     z-index: 9999;
     width: 0;
     transition: width .08s;
 }

/* ══════════════════════════════
   PREMIUM ECOSYSTEM SECTION
══════════════════════════════ */
/* ══════════════════════════════
   FIXED CLEAN RESPONSIVE LAYOUT
══════════════════════════════ */

/* SECTION */

.nx-eco-section{
    position:relative;
    overflow:hidden;

    min-height:920px;

    padding:120px 20px;

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

    background:
    radial-gradient(circle at top,
    #ffffff 0%,
    #f7f7f5 58%,
    #ecece8 100%);
}


/* CENTER CONTENT */

.nx-eco-content{
    position:relative;
    z-index:20;

    width:100%;
    max-width:540px;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
}


/* BADGE */

.nx-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    background:#b8e000;

    border:2px solid #080808;

    font-size:10px;
    font-weight:900;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#080808;

    margin-bottom:22px;
}


/* HEADING */

.nx-heading{
    width:100%;

    font-family:'Outfit',sans-serif;

    font-size:clamp(34px,4vw,58px);

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:900;

    color:#080808;

    margin:0 0 18px;

    text-wrap:balance;
}

/* REMOVE OVERFLOW */

.nx-heading br{
    display:none;
}

.nx-heading span{
    color:#1a4fff;
}


/* DESCRIPTION */

.nx-description{
    width:100%;
    max-width:460px;

    margin:0 auto;

    font-size:15px;

    line-height:1.8;

    color:#666666;
}


/* BUTTON WRAP */

.nx-actions{
    width:100%;

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

    gap:14px;

    margin-top:34px;

    flex-wrap:wrap;
}


/* BUTTONS */

.nx-btn-dark,
.nx-btn-light{
    flex:1 1 220px;

    max-width:240px;

    height:52px;

    padding:0 22px;

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

    text-decoration:none;

    font-size:12px;
    font-weight:900;

    letter-spacing:.05em;

    text-transform:uppercase;

    white-space:nowrap;

    transition:.25s ease;
}

.nx-btn-dark{
    background:#080808;
    color:#fff;
}

.nx-btn-light{
    background:#fff;

    border:1.5px solid #d7d7d0;

    color:#080808;
}

.nx-btn-dark:hover,
.nx-btn-light:hover{
    transform:translateY(-4px);
}


/* ══════════════════════════════
   ORBITS
══════════════════════════════ */

.nx-orbit{
    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;
}

.nx-orbit-1{
    width:420px;
    height:420px;

    border:
    3px dashed
    rgba(26,79,255,.42);
}

.nx-orbit-2{
    width:700px;
    height:700px;

    border:
    3px dashed
    rgba(26,79,255,.24);
}

.nx-orbit-3{
    width:980px;
    height:980px;

    border:
    3px dashed
    rgba(26,79,255,.14);
}


/* LOGOS */

.nx-tech{
    position:absolute;

    width:92px;
    height:92px;

    background:#fff;

    border:
    1px solid rgba(0,0,0,.05);

    box-shadow:
    0 12px 40px rgba(0,0,0,.08);

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

    z-index:10;
}

.nx-tech img{
    width:34px;
    height:34px;

    object-fit:contain;
}


/* PERFECT ALIGNMENT */

.nx-t1{
    top:18%;
    left:22%;
}

.nx-t2{
    top:50%;
    left:14%;

    transform:translateY(-50%);
}

.nx-t3{
    bottom:18%;
    left:22%;
}

.nx-t4{
    top:18%;
    right:22%;
}

.nx-t5{
    top:50%;
    right:14%;

    transform:translateY(-50%);
}

.nx-t6{
    bottom:18%;
    right:22%;
}


/* ══════════════════════════════
   TABLET
══════════════════════════════ */

@media(max-width:1024px){

    .nx-eco-section{
        min-height:820px;
    }

    .nx-orbit-1{
        width:340px;
        height:340px;
    }

    .nx-orbit-2{
        width:540px;
        height:540px;
    }

    .nx-orbit-3{
        width:760px;
        height:760px;
    }

    .nx-tech{
        width:74px;
        height:74px;
    }

    .nx-tech img{
        width:26px;
        height:26px;
    }

}


/* ══════════════════════════════
   MOBILE
══════════════════════════════ */

@media(max-width:768px){

    .nx-eco-section{
        min-height:760px;

        padding:80px 16px;
    }

    .nx-eco-content{
        max-width:280px;
    }

    /* FIX OVERFLOW */

    .nx-heading{
        font-size:26px;

        line-height:1.12;

        letter-spacing:-1px;
    }

    .nx-description{
        font-size:14px;

        line-height:1.75;
    }

    /* STACK BUTTONS */

    .nx-actions{
        flex-direction:column;

        gap:12px;
    }

    .nx-btn-dark,
    .nx-btn-light{
        width:100%;
        max-width:100%;
    }

    /* MOBILE SPHERES */

    .nx-orbit-1{
        width:240px;
        height:240px;
    }

    .nx-orbit-2{
        width:360px;
        height:360px;
    }

    .nx-orbit-3{
        width:500px;
        height:500px;
    }

    /* SMALL LOGOS */

    .nx-tech{
        width:50px;
        height:50px;
    }

    .nx-tech img{
        width:18px;
        height:18px;
    }

    /* ALIGN */

    .nx-t1{
        top:20%;
        left:8%;
    }

    .nx-t2{
        top:50%;
        left:0%;

        transform:translateY(-50%);
    }

    .nx-t3{
        bottom:20%;
        left:8%;
    }

    .nx-t4{
        top:20%;
        right:8%;
    }

    .nx-t5{
        top:50%;
        right:0%;

        transform:translateY(-50%);
    }

    .nx-t6{
        bottom:20%;
        right:8%;
    }

}


/* SMALL DEVICES */

@media(max-width:480px){

    .nx-heading{
        font-size:23px;
    }

    .nx-description{
        font-size:13px;
    }

    .nx-orbit-1{
        width:220px;
        height:220px;
    }

    .nx-orbit-2{
        width:320px;
        height:320px;
    }

    .nx-orbit-3{
        width:430px;
        height:430px;
    }

}
/* ═══════════════════════════════
   ULTRA ENTERPRISE HERO
═══════════════════════════════ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Inter,sans-serif;
    background:#0b1020;
}

/* ═════════ HERO ═════════ */

.ultra-hero{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    background:#0b1020;
    color:#fff;
}

/* BG */

.ultra-hero-bg{
    position:absolute;
    inset:0;
}

.ultra-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.45) saturate(.9);
    transform:scale(1.04);
}

/* DARK */

.ultra-dark{
    position:absolute;
    inset:0;
    z-index:1;

    background:
    linear-gradient(
        90deg,
        rgba(7,10,20,.96) 0%,
        rgba(7,10,20,.88) 28%,
        rgba(7,10,20,.40) 58%,
        rgba(7,10,20,.70) 100%
    );
}

/* LEFT GLOW */

.ultra-left-glow{
    position:absolute;
    left:-300px;
    top:50%;
    transform:translateY(-50%);

    width:800px;
    height:800px;

    background:radial-gradient(circle,#2952ff55 0%,transparent 70%);
    z-index:2;
}

/* GRID */

.ultra-grid{
    position:absolute;
    inset:0;
    z-index:2;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:80px 80px;
}

/* TOP SHAPE */

.ultra-shape{
    position:absolute;
    top:0;
    right:0;
    width:42%;
    height:250px;

    background:#2952ff;

    clip-path:polygon(15% 0,100% 0,100% 100%);

    z-index:3;
}

/* ═════════ NAVBAR ═════════ */

.ultra-nav{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:88px;

    z-index:50;

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

    padding:0 56px;
}

/* LOGO */

.ultra-logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:#fff;
    flex-shrink:0;
}

.ultra-logo-icon{
    width:46px;
    height:46px;

    background:#fff;
    color:#111;

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

    font-size:24px;
    font-weight:900;
}

.ultra-logo-text strong{
    display:block;
    font-size:20px;
    line-height:1;
    font-weight:900;
}

.ultra-logo-text span{
    display:block;
    margin-top:4px;

    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;

    opacity:.7;
}

/* LINKS */

.ultra-links{
    display:flex;
    align-items:center;
    gap:42px;
}

.ultra-links a{
    position:relative;

    color:rgba(255,255,255,.82);
    text-decoration:none;

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

    transition:.3s;
}

.ultra-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#2952ff;

    transition:.3s;
}

.ultra-links a:hover{
    color:#fff;
}

.ultra-links a:hover::after{
    width:100%;
}

/* RIGHT */

.ultra-right{
    display:flex;
    align-items:center;
    gap:14px;
}

/* NAV BUTTON */

.ultra-nav-btn{
    height:54px;
    padding:0 28px;

    border:none;

    background:#fff;
    color:#111;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.ultra-nav-btn:hover{
    transform:translateY(-2px);
}

/* HAMBURGER */

.ultra-ham{
    display:none;

    width:48px;
    height:48px;

    border:none;

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

    backdrop-filter:blur(10px);

    cursor:pointer;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;
}

.ultra-ham span{
    width:22px;
    height:2px;
    background:#fff;
}

/* ═════════ CONTENT ═════════ */

.ultra-content{
    position:relative;
    z-index:10;

    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:
    150px
    6%
    190px;
}

/* LEFT */

.ultra-left{
    max-width:780px;
}

/* MINI */

.ultra-mini{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 16px;

    background:rgba(255,255,255,.07);

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

    backdrop-filter:blur(12px);

    margin-bottom:28px;

    font-size:11px;
    font-weight:800;

    letter-spacing:.18em;
    text-transform:uppercase;
}

.ultra-mini::before{
    content:"";

    width:8px;
    height:8px;

    background:#2952ff;
}

/* TITLE */

.ultra-left h1{
    font-size:clamp(60px,7vw,122px);

    line-height:.92;
    letter-spacing:-5px;

    font-weight:900;

    margin-bottom:30px;
}

/* DESC */

.ultra-left p{
    max-width:650px;

    font-size:21px;
    line-height:1.8;

    color:rgba(255,255,255,.74);

    margin-bottom:42px;
}

/* BUTTONS */

.ultra-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.ultra-btn-main{
    height:64px;
    padding:0 36px;

    background:#2952ff;
    color:#fff;

    text-decoration:none;

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

    font-size:15px;
    font-weight:800;

    transition:.3s;
}

.ultra-btn-main:hover{
    transform:translateY(-3px);
}

.ultra-btn-ghost{
    height:64px;
    padding:0 36px;

    border:1px solid rgba(255,255,255,.16);

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(12px);

    color:#fff;
    text-decoration:none;

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

    font-size:15px;
    font-weight:700;

    transition:.3s;
}

.ultra-btn-ghost:hover{
    background:rgba(255,255,255,.12);
}

/* ═════════ BOTTOM BAR ═════════ */

.ultra-bottom{
    position:absolute;
    left:0;
    bottom:0;

    width:100%;

    z-index:30;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    background:rgba(10,12,22,.76);

    backdrop-filter:blur(12px);

    border-top:1px solid rgba(255,255,255,.08);
}

.ultra-stat{
    padding:34px;

    border-right:1px solid rgba(255,255,255,.08);
}

.ultra-stat:last-child{
    border-right:none;
}

.ultra-stat strong{
    display:block;

    font-size:58px;
    line-height:1;

    font-weight:900;

    margin-bottom:12px;
}

.ultra-stat span{
    color:rgba(255,255,255,.68);

    font-size:12px;
    font-weight:700;

    letter-spacing:.16em;
    text-transform:uppercase;

    line-height:1.8;
}

/* ═══════════════════════════════
   TABLET
═══════════════════════════════ */

@media(max-width:1200px){

    .ultra-links{
        gap:24px;
    }

    .ultra-left h1{
        font-size:84px;
    }

}

/* ═══════════════════════════════
   MOBILE
═══════════════════════════════ */

@media(max-width:900px){

    .ultra-nav{
        height:74px;
        padding:0 20px;
    }

    .ultra-links,
    .ultra-nav-btn{
        display:none;
    }

    .ultra-ham{
        display:flex;
    }

    .ultra-content{
        padding:
        120px
        20px
        40px;

        align-items:flex-start;
    }

    .ultra-left{
        max-width:100%;
    }

    .ultra-left h1{
        font-size:54px;
        line-height:.96;
        letter-spacing:-2px;
    }

    .ultra-left p{
        font-size:16px;
        line-height:1.9;
    }

    .ultra-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .ultra-btn-main,
    .ultra-btn-ghost{
        width:100%;
        height:58px;
    }

    .ultra-bottom{
        position:relative;
        grid-template-columns:1fr;
    }

    .ultra-stat{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
        padding:24px 20px;
    }

    .ultra-stat strong{
        font-size:42px;
    }

    .ultra-shape{
        width:72%;
        height:150px;
    }

}

/* SMALL MOBILE */

@media(max-width:480px){

    .ultra-left h1{
        font-size:42px;
    }

    .ultra-mini{
        font-size:9px;
        letter-spacing:.14em;
    }

    .ultra-left p{
        font-size:15px;
    }

}
 /* ═══════════════════════════════════
     NAVBAR + MEGA DROPDOWN
  ═══════════════════════════════════ */
   
 .nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 900;
     height: 68px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 48px;
     background: var(--ink);
     border-bottom: 2px solid var(--ink);
     transition: all .3s;
 }

 .nav.scrolled {
     box-shadow: 0 4px 32px rgba(0, 0, 0, .25);
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: #fff;
     flex-shrink: 0;
 }

 .logo-box {
     width: 34px;
     height: 34px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .logo-box svg {
     width: 18px;
     height: 18px;
 }

 .logo-name {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 900;
     letter-spacing: -.3px;
     color: #fff;
     white-space: nowrap;
 }

 .nav-mid {
     display: flex;
     align-items: center;
     gap: 0;
 }

 /* Nav item with dropdown trigger */
 .nav-item {
     position: relative;
 }

 .nav-a {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 10px 16px;
     color: rgba(255, 255, 255, .75);
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .01em;
     transition: color .2s;
     background: none;
     border: none;
     font-family: inherit;
     cursor: pointer;
     white-space: nowrap;
 }

 .nav-a:hover,
 .nav-item.open .nav-a {
     color: #fff;
 }

 .nav-a svg {
     width: 12px;
     height: 12px;
     opacity: .6;
     transition: transform .2s;
     flex-shrink: 0;
 }

 .nav-item.open .nav-a svg {
     transform: rotate(180deg);
 }

 /* ─── MEGA DROPDOWN ─── */
 .mega {
     position: absolute;
     top: calc(100% + 2px);
     left: 50%;
     transform: translateX(-50%);
     background: #fff;
     border: 2px solid var(--ink);
     box-shadow: 6px 6px 0 var(--ink);
     min-width: 680px;
     padding: 32px;
     display: grid;
     gap: 0;
     opacity: 0;
     pointer-events: none;
     visibility: hidden;
     transform: translateX(-50%) translateY(-8px);
     transition: opacity .22s, transform .22s, visibility .22s;
     z-index: 1000;
 }

 .mega.wide {
     min-width: 880px;
     grid-template-columns: 1fr 1fr 1fr;
 }

 .mega.medium {
     min-width: 560px;
     grid-template-columns: 1fr 1fr;
 }

 .mega.narrow {
     min-width: 320px;
     grid-template-columns: 1fr;
 }

 .nav-item.open .mega {
     opacity: 1;
     pointer-events: all;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
 }

 .mega-col-label {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--lime-dk);
     margin-bottom: 14px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--border);
 }

 .mega-col {
     padding: 0 20px 0 0;
 }

 .mega-col:not(:last-child) {
     border-right: 1px solid var(--border);
     margin-right: 20px;
 }

 .mega-link {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 10px;
     text-decoration: none;
     color: var(--ink);
     border: 1px solid transparent;
     transition: all .15s;
     margin-bottom: 2px;
 }

 .mega-link:hover {
     background: var(--bg2);
     border-color: var(--border);
 }

 .mega-link-icon {
     width: 36px;
     height: 36px;
     background: var(--bg2);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 16px;
 }

 .mega-link-icon svg {
     width: 18px;
     height: 18px;
     color: var(--ink2);
 }

 .mega-link-body {}

 .mega-link-title {
     font-size: 13px;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 2px;
 }

 .mega-link-desc {
     font-size: 11.5px;
     color: var(--muted);
     line-height: 1.5;
 }

 .mega-featured {
     grid-column: 1 / -1;
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid var(--border);
     background: var(--ink);
     padding: 16px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
 }

 .mega-featured p {
     font-size: 12.5px;
     color: rgba(255, 255, 255, .75);
 }

 .mega-featured strong {
     color: #fff;
     font-size: 13px;
     display: block;
     margin-bottom: 4px;
 }

 .mega-featured-btn {
     padding: 8px 18px;
     background: var(--lime);
     color: var(--ink);
     font-size: 12px;
     font-weight: 800;
     border: none;
     cursor: pointer;
     font-family: inherit;
     white-space: nowrap;
     flex-shrink: 0;
     transition: background .2s;
 }

 .mega-featured-btn:hover {
     background: var(--lime-dk);
 }

 .nav-right {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
 }

 .btn-ghost-nav {
     padding: 8px 18px;
     border: 1.5px solid rgba(255, 255, 255, .25);
     background: transparent;
     color: rgba(255, 255, 255, .8);
     font-size: 13px;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     transition: all .2s;
 }

 .btn-ghost-nav:hover {
     color: #fff;
     border-color: #fff;
 }

 .btn-lime-nav {
     padding: 8px 20px;
     background: var(--lime);
     color: var(--ink);
     font-size: 13px;
     font-weight: 800;
     font-family: inherit;
     border: none;
     cursor: pointer;
     transition: background .2s, transform .2s;
 }

 .btn-lime-nav:hover {
     background: var(--lime-dk);
     transform: translateY(-1px);
 }

 /* ─── HAMBURGER ─── */
 .ham {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 8px;
     border: none;
     background: transparent;
 }

 .ham span {
     width: 22px;
     height: 2px;
     background: #fff;
     display: block;
     transition: all .3s;
 }

 .ham.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .ham.open span:nth-child(2) {
     opacity: 0;
 }

 .ham.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 /* ─── MOBILE MENU ─── */
 .mob-menu {
     position: fixed;
     inset: 0;
     background: var(--ink);
     z-index: 800;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     transform: translateX(-100%);
     transition: transform .4s cubic-bezier(.77, 0, .175, 1);
     padding: 80px 32px 40px;
 }

 .mob-menu.open {
     transform: translateX(0);
 }

 .mob-nav-item {}

 .mob-nav-trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 16px 0;
     border: none;
     background: transparent;
     color: #fff;
     font-size: 22px;
     font-weight: 800;
     font-family: inherit;
     cursor: pointer;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     text-align: left;
 }

 .mob-nav-trigger svg {
     width: 16px;
     height: 16px;
     opacity: .5;
     transition: transform .25s;
     flex-shrink: 0;
 }

 .mob-nav-item.open .mob-nav-trigger svg {
     transform: rotate(180deg);
 }

 .mob-submenu {
     max-height: 0;
     overflow: hidden;
     transition: max-height .35s ease;
     background: rgba(255, 255, 255, .04);
     margin: 0 -8px;
 }

 .mob-nav-item.open .mob-submenu {
     max-height: 600px;
 }

 .mob-sub-link {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 13px 20px;
     text-decoration: none;
     color: rgba(255, 255, 255, .7);
     font-size: 14px;
     font-weight: 500;
     border-bottom: 1px solid rgba(255, 255, 255, .05);
     transition: color .15s, background .15s;
 }

 .mob-sub-link:hover {
     color: #fff;
     background: rgba(255, 255, 255, .06);
 }

 .mob-sub-icon {
     font-size: 18px;
     flex-shrink: 0;
 }

 .mob-nav-simple {
     display: block;
     padding: 16px 0;
     color: rgba(255, 255, 255, .75);
     font-size: 22px;
     font-weight: 800;
     font-family: inherit;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     transition: color .2s;
 }

 .mob-nav-simple:hover {
     color: var(--lime);
 }

 .mob-cta-row {
     margin-top: 32px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .mob-cta-row .btn-lime-nav {
     padding: 14px 24px;
     font-size: 15px;
     text-align: center;
 }

 .mob-cta-row .btn-ghost-nav {
     padding: 14px 24px;
     font-size: 15px;
     text-align: center;
     color: #fff;
 }

 .nav {
    overflow: visible !important;
}

.nav-item {
    overflow: visible !important;
}


 /* ═══════════════════════════════════
     HERO
  ═══════════════════════════════════ */

 .hero {
     position: relative;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     background: var(--ink);
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
     pointer-events: none;
 }

 .hero-slide.active {
     opacity: 1;
     pointer-events: all;
 }

 .slide-bg {
     position: absolute;
     inset: 0;
 }

 .slide-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.35) saturate(.6);
     transform: scale(1.05);
     transition: transform 8s ease;
 }

 .hero-slide.active .slide-bg img {
     transform: scale(1);
 }

 .slide-tint {
     position: absolute;
     inset: 0;
     mix-blend-mode: color;
 }

 .tint-lime {
     background: rgba(184, 224, 0, .18);
 }

 .tint-cobalt {
     background: rgba(26, 79, 255, .2);
 }

 .tint-rose {
     background: rgba(255, 45, 85, .15);
 }

 .tint-amber {
     background: rgba(245, 166, 35, .14);
 }

 .slide-vignette {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(8, 8, 8, .65) 100%),
         linear-gradient(to bottom, var(--ink) 0%, transparent 18%, transparent 75%, var(--ink) 100%),
         linear-gradient(to right, var(--ink) 0%, transparent 10%, transparent 90%, var(--ink) 100%);
 }

 .slide-grid-overlay {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
     background-size: 80px 80px;
     pointer-events: none;
 }

 .slide-center {
     position: absolute;
     inset: 0;
     z-index: 10;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 .hero-divline {
     width: 50px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--lime), transparent);
     margin: 22px 0;
 }

 .slide-category {
     padding: 8px 22px;
     border: 1.5px solid rgba(184, 224, 0, .4);
     background: rgba(184, 224, 0, .08);
     backdrop-filter: blur(10px);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--lime);
 }

 .hero-dots {
     position: absolute;
     bottom: 90px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 12;
     display: flex;
     gap: 8px;
 }

 .hero-dot {
     width: 28px;
     height: 3px;
     background: rgba(255, 255, 255, .2);
     cursor: pointer;
     transition: background .3s, width .3s;
     overflow: hidden;
     position: relative;
 }

 .hero-dot.active {
     background: rgba(184, 224, 0, .4);
     width: 52px;
 }

 .hero-dot-fill {
     position: absolute;
     inset: 0;
     background: var(--lime);
     transform: scaleX(0);
     transform-origin: left;
 }

 .hero-dot.active .hero-dot-fill {
     animation: dotFill var(--slide-dur, 5s) linear forwards;
 }

 @keyframes dotFill {
     from {
         transform: scaleX(0)
     }

     to {
         transform: scaleX(1)
     }
 }

 .hero-scroll {
     position: absolute;
     bottom: 28px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 12;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     font-size: 9px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .4);
     font-weight: 700;
     animation: fadeUp .9s 2s both;
 }

 .scroll-line {
     width: 1px;
     height: 44px;
     background: linear-gradient(to bottom, transparent, var(--lime));
     animation: sLine 2.2s ease-in-out infinite;
 }

 @keyframes sLine {
     0% {
         transform: scaleY(0);
         transform-origin: top
     }

     50% {
         transform: scaleY(1);
         transform-origin: top
     }

     50.01% {
         transform-origin: bottom
     }

     100% {
         transform: scaleY(0);
         transform-origin: bottom
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateX(-50%) translateY(12px)
     }

     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0)
     }
 }

 /* ═══ TICKER ═══ */
 .ticker {
     background: #fff;
     padding: 11px 0;
     overflow: hidden;
     position: relative;
     z-index: 5;
     border-top: 2px solid var(--ink);
     border-bottom: 2px solid var(--ink);
 }

 .ticker-inner {
     display: flex;
     animation: tickRun 30s linear infinite;
     width: max-content;
 }

 .t-item {
     display: flex;
     align-items: center;
     gap: 24px;
     padding: 0 24px;
     font-family: 'Outfit', sans-serif;
     font-size: 12px;
     font-weight: 900;
     color: var(--ink);
     letter-spacing: .06em;
     text-transform: uppercase;
     white-space: nowrap;
     flex-shrink: 0;
 }

 .t-sep {
     width: 4px;
     height: 4px;
     background: var(--ink);
     opacity: .4;
 }

 @keyframes tickRun {
     0% {
         transform: translateX(0)
     }

     100% {
         transform: translateX(-50%)
     }
 }

 /* ═══════════════════════════════════
     SHARED SECTION
  ═══════════════════════════════════ */
 .sec {
     padding: 100px 6%;
     position: relative;
     z-index: 2;
 }

 .sec-alt {
     background: var(--bg2);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 .chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--ink);
     margin-bottom: 18px;
     border: 1.5px solid var(--ink);
     padding: 5px 14px;
     background: var(--lime);
 }

 .sec-title {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(32px, 4vw, 58px);
     font-weight: 900;
     line-height: 1.03;
     letter-spacing: -2px;
     color: var(--ink);
     max-width: 820px;
 }

 .sec-title em {
     font-style: normal;
     background: var(--ink);
     color: #fff;
     padding: 0 6px;
 }

 /* SQUARE CARDS */
 .glasscard {
     background: var(--bg);
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     transition: border-color .3s, box-shadow .3s, transform .35s;
 }

 .glasscard:hover {
     border-color: var(--ink);
     box-shadow: 4px 4px 0 var(--ink);
     transform: translateY(-2px);
 }

 /* ═══ ABOUT ═══ */
 /* ═══════════════════════════════════════
   FIXED CLEAN 3D BILLBOARD
   NO LEFT CRAMPING
   NO TEXT STACKING
═══════════════════════════════════════ */

 .about-stack-sec {
     padding: 140px 6%;
     overflow: hidden;
     position: relative;
     background: #b8e000;

 }




 /* 3D SPACE */

 .stack-banner-wrap {
     position: relative;
     max-width: 1500px;
     margin: auto;

     height: 760px;

     perspective: 2400px;
     transform-style: preserve-3d;
 }

 /* PANELS */

 .stack-layer,
 .stack-banner {
     position: absolute;
     inset: 0;

     transform-style: preserve-3d;

     transition:
         transform .9s cubic-bezier(.19, 1, .22, 1),
         box-shadow .8s ease;
 }



 /* MID PANEL */

 /* ═══════════════════════════════
   EACH LAYER DIFFERENT COLOR
═══════════════════════════════ */

 /* BACK LAYER */

 .layer-back {
     background:
         linear-gradient(135deg,
             #7a7cff,
             #4f46e5);

     border: 2px solid rgba(255, 255, 255, .08);

     transform:
         translate3d(70px, 70px, -180px);

     box-shadow:
         0 0 80px rgba(79, 70, 229, .32),
         0 80px 120px rgba(0, 0, 0, .28);
 }

 /* MIDDLE LAYER */

 .layer-mid {
     background:
         linear-gradient(135deg,
             #00c2ff,
             #00e1b0);

     border: 2px solid rgba(255, 255, 255, .08);

     transform:
         translate3d(34px, 34px, -90px);

     box-shadow:
         0 0 70px rgba(0, 194, 255, .24),
         0 45px 90px rgba(0, 0, 0, .22);
 }

 /* FRONT BILLBOARD */

 .stack-banner {
     background: #000;

     border: 2px solid rgba(255, 255, 255, .08);

     transform:
         translateZ(40px);

     box-shadow:
         0 90px 140px rgba(0, 0, 0, .30);
 }

 /* MAIN BILLBOARD */

 .stack-banner {
     overflow: hidden;

     background: #000;

     border: 2px solid rgba(255, 255, 255, .08);

     transform:
         translateZ(40px);

     box-shadow:
         0 90px 140px rgba(0, 0, 0, .28);

     isolation: isolate;
 }

 /* HOVER DEPTH */

 .stack-banner-wrap:hover .stack-banner {
     transform:
         translateZ(75px) translateX(-6px) translateY(-6px);
 }

 .stack-banner-wrap:hover .layer-mid {
     transform:
         translate3d(48px, 48px, -110px);
 }

 .stack-banner-wrap:hover .layer-back {
     transform:
         translate3d(92px, 92px, -220px);
 }

 /* IMAGE */

 .stack-media {
     position: absolute;
     inset: 0;
 }

 .stack-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;

     filter:
         brightness(.56) saturate(.92) contrast(1.05);

     transform: scale(1.04);

     transition:
         transform 1.6s ease,
         filter .7s ease;
 }

 .stack-banner-wrap:hover .stack-media img {
     transform: scale(1.1);

     filter:
         brightness(.64) saturate(1);
 }

 /* OVERLAY */

 .stack-overlay {
     position: absolute;
     inset: 0;

     background:
         linear-gradient(to right,
             rgba(0, 0, 0, .93) 0%,
             rgba(0, 0, 0, .72) 38%,
             rgba(0, 0, 0, .20) 100%);
 }

 /* LIGHT SWEEP */

 .stack-banner::before {
     content: "";

     position: absolute;
     inset: 0;

     background:
         linear-gradient(115deg,
             transparent 25%,
             rgba(255, 255, 255, .08) 40%,
             transparent 55%);

     transform: translateX(-120%);

     animation: glassMove 8s linear infinite;

     z-index: 3;
 }

 @keyframes glassMove {
     to {
         transform: translateX(140%);
     }
 }

 /* CONTENT */

 .stack-content {
     position: relative;
     z-index: 5;

     height: 100%;

     display: flex;
     flex-direction: column;
     justify-content: center;

     padding: 90px;

     width: min(720px, 100%);

     transform: translateZ(80px);
 }

 /* CHIP */

 .stack-content .chip {
     width: fit-content;

     background: #dfff38;
     color: #000;

     border: 2px solid #000;

     padding: 8px 18px;

     font-size: 10px;
     font-weight: 900;

     letter-spacing: .22em;
     text-transform: uppercase;

     margin-bottom: 28px;
 }

 /* TITLE */

 .stack-content .sec-title {
     color: #fff;

     font-size: clamp(52px, 6vw, 104px);

     line-height: .92;
     letter-spacing: -5px;

     margin: 0 0 34px;

     max-width: 100%;
 }

 .stack-content .sec-title em {
     background: #dfff38;
     color: #000;

     padding: 0 12px;

     font-style: normal;
 }

 /* TEXT */

 .stack-content p {
     color: rgba(255, 255, 255, .76);

     font-size: 18px;
     line-height: 1.95;

     max-width: 560px;

     margin: 0;
 }

 /* MOBILE */

 @media(max-width:950px) {

     .about-stack-sec {
         padding: 90px 5%;
     }

     .stack-banner-wrap {
         height: auto;
         min-height: 620px;
     }

     .stack-content {
         padding: 60px 30px;
         width: 100%;
     }

     .stack-content .sec-title {
         font-size: 58px;
         letter-spacing: -3px;
     }

     .stack-content p {
         font-size: 16px;
         line-height: 1.85;
     }

     .layer-back {
         transform:
             translate3d(24px, 24px, -120px);
     }

     .layer-mid {
         transform:
             translate3d(12px, 12px, -60px);
     }

     .stack-banner {
         transform:
             translateZ(20px);
     }
 }

 /* ═══ SERVICES ═══ */
 .srv-section {
     padding: 100px 0;
     background: var(--bg2);
     border-top: 1px solid var(--border);
     overflow: hidden;
 }

 .srv-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 0 6%;
     margin-bottom: 48px;
     flex-wrap: wrap;
     gap: 24px;
 }

 .srv-nav {
     display: flex;
     gap: 8px;
 }

 .srv-nav-btn {
     width: 44px;
     height: 44px;
     border: 1.5px solid var(--ink);
     background: var(--bg);
     color: var(--ink);
     font-size: 18px;
     cursor: pointer;
     transition: background .2s, color .2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .srv-nav-btn:hover {
     background: var(--ink);
     color: #fff;
 }

 .srv-track-wrap {
     position: relative;
     padding: 10px 0 36px;
 }

 .srv-track-wrap::before,
 .srv-track-wrap::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 80px;
     z-index: 3;
     pointer-events: none;
 }

 .srv-track-wrap::before {
     left: 0;
     background: linear-gradient(to right, var(--bg2), transparent);
 }

 .srv-track-wrap::after {
     right: 0;
     background: linear-gradient(to left, var(--bg2), transparent);
 }

 .srv-track {
     display: flex;
     gap: 18px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
     padding: 0 6%;
     cursor: grab;
 }

 .srv-track::-webkit-scrollbar {
     display: none;
 }

 .srv-track.dragging {
     cursor: grabbing;
     user-select: none;
 }

 .srv-card {
     flex: 0 0 340px;
     min-height: 480px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     cursor: default;
     border: 1.5px solid var(--border);
     background: var(--bg);
     transition: transform .35s, box-shadow .35s, border-color .3s;
 }

 .srv-card:hover {
     transform: translateY(-4px);
     box-shadow: 5px 5px 0 var(--ink);
     border-color: var(--ink);
 }

 .srv-photo {
     height: 210px;
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
 }

 .srv-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.7) saturate(.7);
     transition: transform .7s, filter .5s;
 }

 .srv-card:hover .srv-photo img {
     transform: scale(1.07);
     filter: brightness(.85) saturate(1);
 }

 .srv-accent {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--lime);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .35s;
 }

 .srv-card:hover .srv-accent {
     transform: scaleX(1);
 }

 .srv-badge {
     position: absolute;
     top: 16px;
     right: 16px;
     z-index: 2;
     width: 30px;
     height: 30px;
     background: rgba(0, 0, 0, .7);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'JetBrains Mono', monospace;
     font-size: 10px;
     color: #fff;
 }

 .srv-body {
     flex: 1;
     padding: 24px 26px 28px;
     border-top: 1.5px solid var(--border);
     display: flex;
     flex-direction: column;
 }

 .srv-cat {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--faint);
     margin-bottom: 8px;
 }

 .srv-name {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: -.4px;
     color: var(--ink);
     margin-bottom: 10px;
 }

 .srv-desc {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.85;
     flex: 1;
 }

 .srv-cta {
     margin-top: 18px;
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 12px;
     font-weight: 800;
     color: var(--ink);
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: .08em;
     transition: gap .2s;
 }

 .srv-card:hover .srv-cta {
     gap: 12px;
 }

 /* ═══ WORK ═══ */
 .work-grid {
     display: grid;
     grid-template-columns: 1.5fr 1fr;
     gap: 18px;
     margin-top: 48px;
 }

 .wcard {
     position: relative;
     overflow: hidden;
     cursor: default;
     border: 1.5px solid var(--border);
     transition: box-shadow .35s, border-color .3s;
 }

 .wcard.tall {
     grid-row: span 2;
 }

 .wcard img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.45) saturate(.6);
     transition: transform .7s, filter .5s;
     min-height: 280px;
     display: block;
 }

 .wcard:hover img {
     transform: scale(1.05);
     filter: brightness(.6) saturate(.9);
 }

 .wcard:hover {
     box-shadow: 5px 5px 0 var(--ink);
     border-color: var(--ink);
 }

 .wcard-ov {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(8, 8, 8, .92) 0%, transparent 55%);
 }

 .wcard-info {
     position: absolute;
     bottom: 28px;
     left: 28px;
     right: 28px;
     z-index: 2;
 }

 .wcard-tag {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--lime);
     margin-bottom: 8px;
     display: block;
 }

 .wcard-info h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 22px;
     font-weight: 900;
     letter-spacing: -.4px;
     line-height: 1.15;
     color: #fff;
 }

 .wcard-info p {
     font-size: 13px;
     color: rgba(255, 255, 255, .65);
     margin-top: 6px;
 }

 .wcard-arrow {
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 3;
     width: 36px;
     height: 36px;
     background: rgba(184, 224, 0, .15);
     border: 1.5px solid rgba(184, 224, 0, .4);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--lime);
     font-size: 14px;
     transition: background .25s, transform .25s, color .25s;
 }

 .wcard:hover .wcard-arrow {
     background: var(--lime);
     color: var(--ink);
     transform: translate(3px, -3px);
 }

 /* ═══ PROCESS ═══ */
 .flow-wrap {
     margin-top: 60px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: relative;
 }

 .flow-line {
     position: absolute;
     left: 28px;
     top: 20px;
     bottom: 20px;
     width: 2px;
     background: linear-gradient(to bottom, transparent, var(--ink), transparent);
 }

 .flow-card {
     position: relative;
     display: grid;
     grid-template-columns: 80px 1fr auto;
     gap: 24px;
     align-items: center;
     padding: 30px 32px;
     overflow: hidden;
     border: 1.5px solid var(--border);
     background: var(--bg);
     transition: transform .3s, border-color .3s, box-shadow .3s;
 }

 .flow-card:hover {
     transform: translateX(6px);
     border-color: var(--ink);
     box-shadow: 4px 4px 0 var(--ink);
 }

 .flow-dot {
     width: 16px;
     height: 16px;
     background: var(--lime);
     border: 2px solid var(--ink);
     margin-bottom: 14px;
     position: relative;
     z-index: 2;
 }

 .flow-index {
     font-size: 48px;
     line-height: 1;
     letter-spacing: -.06em;
     font-family: 'Outfit', sans-serif;
     font-weight: 900;
     color: rgba(0, 0, 0, .08);
 }

 .flow-content h3 {
     font-size: 22px;
     margin-bottom: 8px;
     letter-spacing: -.02em;
     font-weight: 800;
     color: var(--ink);
 }

 .flow-content p {
     font-size: 13.5px;
     line-height: 1.9;
     color: var(--muted);
     max-width: 600px;
 }

 .flow-tag {
     padding: 10px 16px;
     background: var(--bg2);
     border: 1.5px solid var(--border);
     font-size: 10px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--ink);
     white-space: nowrap;
     font-weight: 800;
     transition: background .2s, border-color .2s;
 }

 .flow-card:hover .flow-tag {
     background: var(--lime);
     border-color: var(--ink);
 }

 /* ═══ TECH STACK ═══ */
 .stack-sec {
     padding: 60px 0;
     overflow: hidden;
     background: var(--bg);
     border-top: 1px solid var(--border);
 }

 .stack-label {
     text-align: center;
     font-size: 10px;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--faint);
     font-weight: 800;
     margin-bottom: 32px;
 }

 .stack-track-wrap {
     position: relative;
 }

 .stack-track-wrap::before,
 .stack-track-wrap::after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 120px;
     z-index: 2;
     pointer-events: none;
 }

 .stack-track-wrap::before {
     left: 0;
     background: linear-gradient(to right, var(--bg), transparent);
 }

 .stack-track-wrap::after {
     right: 0;
     background: linear-gradient(to left, var(--bg), transparent);
 }

 .stack-track {
     display: flex;
     animation: stackRun 35s linear infinite;
     width: max-content;
 }

 .st-item {
     padding: 0 30px;
     font-family: 'Outfit', sans-serif;
     font-size: 13px;
     font-weight: 800;
     color: rgba(0, 0, 0, .2);
     white-space: nowrap;
     flex-shrink: 0;
     cursor: default;
     transition: color .25s;
     letter-spacing: .04em;
     text-transform: uppercase;
 }

 .st-item:hover {
     color: var(--ink);
 }

 .stack-sec {
     padding: 90px 0;
     overflow: hidden;
     position: relative;
 }


 .stack-track-wrap {
     overflow: hidden;
     width: 100%;
     position: relative;
 }

 .stack-track {
     display: flex;
     align-items: center;
     gap: 26px;
     width: max-content;
     animation: marquee 30s linear infinite;
 }

 .st-item {
     width: 110px;
     height: 110px;
     flex-shrink: 0;

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

     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);

     border-radius: 28px;

     backdrop-filter: blur(10px);

     transition: .35s ease;
 }

 .st-item:hover {
     transform: translateY(-8px) scale(1.08);
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.18);
 }

 .st-item img {
     width: 52px;
     height: 52px;
     object-fit: contain;
     filter: brightness(1.1);
 }

 @keyframes marquee {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 @keyframes stackRun {
     0% {
         transform: translateX(0)
     }

     100% {
         transform: translateX(-50%)
     }
 }

 /* ═══ AI SHOWCASE ═══ */
 .ai-showcase {
     margin-top: 64px;
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 20px;
 }

 .ai-hero {
     position: relative;
     overflow: hidden;
     min-height: 600px;
     border: 1.5px solid var(--border);
     background: var(--ink);
 }

 .ai-hero img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .3;
     transform: scale(1.04);
 }

 .ai-hero::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(8, 8, 8, .95) 15%, transparent 65%), linear-gradient(to right, rgba(8, 8, 8, .8), rgba(8, 8, 8, .1));
 }

 .ai-overlay {
     position: relative;
     z-index: 3;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 40px;
 }

 .ai-mini-tag {
     width: fit-content;
     padding: 10px 16px;
     border: 1.5px solid rgba(255, 255, 255, .2);
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: .18em;
     color: var(--lime);
     font-weight: 800;
 }

 .ai-bottom h3 {
     font-size: clamp(34px, 3.8vw, 58px);
     line-height: .97;
     letter-spacing: -.05em;
     margin-bottom: 16px;
     max-width: 680px;
     color: #fff;
 }

 .ai-bottom h3 em {
     color: var(--lime);
     font-style: normal;
 }

 .ai-bottom p {
     max-width: 580px;
     font-size: 14px;
     line-height: 2;
     color: rgba(255, 255, 255, .7);
 }

 .ai-side-grid {
     display: grid;
     gap: 20px;
 }

 .ai-ui-card {
     position: relative;
     overflow: hidden;
     min-height: 285px;
     border: 1.5px solid var(--border);
     background: var(--ink2);
 }

 .ai-ui-card img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .22;
 }

 .ai-ui-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(8, 8, 8, .96), transparent 68%);
 }

 .ai-ui-content {
     position: absolute;
     inset: 0;
     z-index: 2;
     padding: 28px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 }

 .ai-ui-content span {
     display: inline-block;
     margin-bottom: 10px;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: .18em;
     color: var(--lime);
     font-weight: 800;
 }

 .ai-ui-content h4 {
     font-size: 22px;
     margin-bottom: 8px;
     letter-spacing: -.03em;
     color: #fff;
     font-weight: 900;
 }

 .ai-ui-content p {
     color: rgba(255, 255, 255, .65);
     line-height: 1.8;
     font-size: 13px;
 }

 /* ═══ CINE AI ═══ */
 .cine-ai {
     margin-top: 68px;
     position: relative;
     overflow: hidden;
     border: 1.5px solid var(--border);
     min-height: 720px;
     background: var(--ink);
 }

 .cine-ai img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.04);
     filter: saturate(1.1);
     opacity: .35;
 }

 .cine-ai::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top right, rgba(184, 224, 0, .14), transparent 24%), linear-gradient(to top, rgba(0, 0, 0, .96) 8%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, .82));
     z-index: 1;
 }

 .cine-grid {
     position: relative;
     z-index: 3;
     min-height: 720px;
     display: grid;
     grid-template-columns: 1.15fr .85fr;
 }

 .cine-left {
     padding: 56px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .cine-tag {
     width: fit-content;
     padding: 12px 16px;
     border: 1.5px solid rgba(255, 255, 255, .15);
     color: var(--lime);
     text-transform: uppercase;
     letter-spacing: .18em;
     font-size: 10px;
     font-weight: 800;
 }

 .cine-headline h2 {
     font-size: clamp(50px, 6.5vw, 104px);
     line-height: .9;
     letter-spacing: -.07em;
     margin-bottom: 26px;
     font-weight: 900;
     color: #fff;
 }

 .cine-headline h2 em {
     color: var(--lime);
     font-style: normal;
 }

 .cine-headline p {
     max-width: 580px;
     font-size: 15px;
     line-height: 2;
     color: rgba(255, 255, 255, .7);
 }

 .cine-floating {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-top: 38px;
     flex-wrap: wrap;
 }

 .cine-float-card {
     min-width: 160px;
     padding: 18px 20px;
     border: 1.5px solid rgba(255, 255, 255, .1);
     background: rgba(255, 255, 255, .04);
 }

 .cine-float-card strong {
     display: block;
     font-size: 32px;
     line-height: 1;
     letter-spacing: -.05em;
     color: var(--lime);
     margin-bottom: 6px;
 }

 .cine-float-card span {
     font-size: 10px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .5);
     font-weight: 700;
 }

 .cine-right {
     padding: 40px;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
 }

 .cine-stack {
     width: 100%;
     max-width: 400px;
     display: grid;
     gap: 16px;
 }

 .cine-card {
     position: relative;
     overflow: hidden;
     padding: 24px;
     border: 1.5px solid rgba(255, 255, 255, .08);
     background: rgba(255, 255, 255, .04);
     transition: transform .3s, border-color .3s;
 }

 .cine-card:hover {
     transform: translateX(-6px);
     border-color: rgba(184, 224, 0, .3);
 }

 .cine-card span {
     position: relative;
     z-index: 2;
     display: inline-block;
     margin-bottom: 12px;
     font-size: 10px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--lime);
     font-weight: 800;
 }

 .cine-card h3 {
     position: relative;
     z-index: 2;
     font-size: 23px;
     line-height: 1.08;
     margin-bottom: 10px;
     letter-spacing: -.03em;
     color: #fff;
     font-weight: 900;
 }

 .cine-card p {
     position: relative;
     z-index: 2;
     color: rgba(255, 255, 255, .65);
     line-height: 1.85;
     font-size: 13px;
 }

 /* ═══ LLM ═══ */
 .llm-experience {
     margin-top: 64px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .llm-panel {
     position: relative;
     overflow: hidden;
     min-height: 500px;
     border: 1.5px solid var(--border);
     background: var(--ink2);
     transition: transform .35s, border-color .3s, box-shadow .3s;
 }

 .llm-panel:hover {
     transform: translateY(-6px);
     border-color: var(--ink);
     box-shadow: 5px 5px 0 var(--ink);
 }

 .llm-panel img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: .22;
     transition: transform .6s;
 }

 .llm-panel:hover img {
     transform: scale(1.05);
 }

 .llm-panel::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(8, 8, 8, .97), transparent 65%);
 }

 .llm-content {
     position: absolute;
     inset: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 32px;
 }

 .llm-no {
     font-size: 64px;
     line-height: 1;
     font-weight: 900;
     letter-spacing: -.07em;
     color: rgba(255, 255, 255, .07);
     margin-bottom: 14px;
 }

 .llm-content span {
     display: inline-block;
     margin-bottom: 10px;
     font-size: 10px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--lime);
     font-weight: 800;
 }

 .llm-content h3 {
     font-size: 26px;
     line-height: 1.08;
     margin-bottom: 12px;
     letter-spacing: -.03em;
     color: #fff;
     font-weight: 900;
 }

 .llm-content p {
     color: rgba(255, 255, 255, .68);
     line-height: 1.9;
     font-size: 13px;
 }

 /* ═══ TESTIMONIALS ═══ */
 .proof-wrap {
     margin-top: 60px;
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: 20px;
 }

 .proof-main {
     position: relative;
     overflow: hidden;
     padding: 40px;
     border: 1.5px solid var(--border);
     background: var(--bg);
 }

 .proof-label {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 10px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--ink);
     margin-bottom: 24px;
     font-weight: 800;
 }

 .proof-label::before {
     content: "";
     width: 36px;
     height: 2px;
     background: var(--ink);
 }

 .proof-quote {
     font-size: clamp(22px, 2.8vw, 38px);
     line-height: 1.22;
     letter-spacing: -.03em;
     max-width: 760px;
     font-weight: 600;
     color: var(--ink);
 }

 .proof-quote em {
     color: var(--cobalt);
     font-style: normal;
     font-weight: 900;
 }

 .proof-bottom {
     margin-top: 40px;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 20px;
 }

 .proof-person {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .proof-person img {
     width: 54px;
     height: 54px;
     object-fit: cover;
     border: 1.5px solid var(--border);
 }

 .proof-person strong {
     display: block;
     font-size: 14px;
     font-weight: 800;
     color: var(--ink);
 }

 .proof-person span {
     font-size: 12px;
     color: var(--faint);
 }

 .proof-metric {
     text-align: right;
 }

 .proof-metric h3 {
     font-size: 50px;
     line-height: 1;
     color: var(--cobalt);
     margin-bottom: 4px;
     letter-spacing: -.04em;
     font-weight: 900;
 }

 .proof-metric p {
     font-size: 11px;
     color: var(--faint);
     text-transform: uppercase;
     letter-spacing: .14em;
     font-weight: 700;
 }

 .proof-side {
     display: grid;
     gap: 20px;
 }

 .proof-mini {
     padding: 28px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     position: relative;
     overflow: hidden;
     transition: border-color .3s, box-shadow .3s;
 }

 .proof-mini:hover {
     border-color: var(--ink);
     box-shadow: 4px 4px 0 var(--ink);
 }

 .proof-mini-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .proof-mini-top img {
     width: 44px;
     height: 44px;
     object-fit: cover;
     border: 1.5px solid var(--border);
 }

 .proof-mini-tag {
     font-size: 10px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--ink);
     font-weight: 800;
     background: var(--lime);
     padding: 4px 10px;
 }

 .proof-mini p {
     color: var(--ink2);
     font-size: 14px;
     line-height: 1.85;
     margin-bottom: 20px;
 }

 .proof-mini strong {
     display: block;
     font-size: 13px;
     font-weight: 800;
     color: var(--ink);
 }

 .proof-mini span {
     font-size: 12px;
     color: var(--faint);
 }

 /* ═══ CTA ═══ */
 .cta-outer {
     padding: 0 6% 100px;
 }

 .cta-box {
     position: relative;
     overflow: hidden;
     min-height: 400px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     border: 1.5px solid var(--ink);
     box-shadow: 6px 6px 0 var(--ink);
 }

 .cta-bg {
     position: absolute;
     inset: 0;
 }

 .cta-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.2) saturate(.4);
 }

 .cta-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .6) 100%);
 }

 .cta-mesh {
     position: absolute;
     inset: 0;
     z-index: 1;
     background-image: linear-gradient(rgba(184, 224, 0, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 224, 0, .04) 1px, transparent 1px);
     background-size: 56px 56px;
     animation: meshMove 22s linear infinite;
 }

 @keyframes meshMove {
     0% {
         background-position: 0 0
     }

     100% {
         background-position: 56px 56px
     }
 }

 .cta-text {
     position: relative;
     z-index: 2;
     padding: 64px;
 }

 .cta-text h2 {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(28px, 3.6vw, 50px);
     font-weight: 900;
     letter-spacing: -2px;
     line-height: 1.05;
     margin: 14px 0 18px;
     color: #fff;
 }

 .cta-text h2 span {
     color: var(--lime);
 }

 .cta-text p {
     font-size: 15px;
     color: rgba(255, 255, 255, .65);
     line-height: 1.85;
     max-width: 400px;
     margin-bottom: 30px;
 }

 .cta-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .btn-lime-lg {
     padding: 13px 30px;
     background: var(--lime);
     color: var(--ink);
     font-size: 13px;
     font-weight: 900;
     font-family: inherit;
     border: none;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
     transition: background .2s, transform .15s;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .btn-lime-lg:hover {
     background: var(--lime-dk);
     transform: translateY(-2px);
 }

 .btn-out-lg {
     padding: 13px 30px;
     border: 1.5px solid rgba(255, 255, 255, .25);
     background: transparent;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
     transition: background .2s, border-color .2s;
 }

 .btn-out-lg:hover {
     background: rgba(255, 255, 255, .07);
     border-color: rgba(255, 255, 255, .4);
 }

 .cta-right {
     position: relative;
     z-index: 2;
     padding: 40px 52px 40px 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .cta-fc {
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .1);
     padding: 14px 18px;
     display: flex;
     align-items: center;
     gap: 14px;
     transition: background .2s;
 }

 .cta-fc:hover {
     background: rgba(255, 255, 255, .09);
 }

 .cta-fc-icon {
     width: 36px;
     height: 36px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .cta-fc-icon svg {
     width: 18px;
     height: 18px;
 }

 .cta-fc strong {
     display: block;
     font-size: 13px;
     font-weight: 800;
     margin-bottom: 2px;
     color: #fff;
 }

 .cta-fc span {
     font-size: 11px;
     color: rgba(255, 255, 255, .5);
 }

 /* ═══════════════════════════════════
     FOOTER + BRAND NAME EFFECT
  ═══════════════════════════════════ */
 footer {
     background: var(--ink);
     border-top: 2px solid var(--lime);
     position: relative;
     z-index: 2;
     overflow: hidden;
 }

 .ft-top {
     padding: 36px 6%;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 28px;
     flex-wrap: wrap;
 }

 .ft-top-left strong {
     font-family: 'Outfit', sans-serif;
     font-size: 18px;
     font-weight: 900;
     letter-spacing: -.3px;
     display: block;
     margin-bottom: 4px;
     color: #fff;
 }

 .ft-top-left span {
     font-size: 13px;
     color: rgba(255, 255, 255, .5);
 }

 .ft-subscribe {
     display: flex;
     max-width: 420px;
     width: 100%;
 }

 .ft-sub-input {
     flex: 1;
     padding: 11px 16px;
     background: rgba(255, 255, 255, .06);
     border: 1.5px solid rgba(255, 255, 255, .12);
     border-right: none;
     color: #fff;
     font-size: 13px;
     font-family: inherit;
     outline: none;
     transition: border-color .2s;
 }

 .ft-sub-input::placeholder {
     color: rgba(255, 255, 255, .3);
 }

 .ft-sub-input:focus {
     border-color: var(--lime);
 }

 .ft-sub-btn {
     padding: 11px 20px;
     background: var(--lime);
     color: var(--ink);
     border: none;
     font-size: 12px;
     font-weight: 900;
     font-family: inherit;
     cursor: pointer;
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: .06em;
     transition: background .2s;
 }

 .ft-sub-btn:hover {
     background: var(--lime-dk);
 }

 .ft-main {
     padding: 56px 6% 48px;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
     gap: 36px;
 }

 .ft-brand .ft-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
 }

 .ft-logo-box {
     width: 30px;
     height: 30px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ft-logo-box svg {
     width: 16px;
     height: 16px;
 }

 .ft-logo-name {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 900;
     color: #fff;
 }

 .ft-brand p {
     font-size: 13px;
     color: rgba(255, 255, 255, .45);
     line-height: 1.9;
     max-width: 260px;
     margin-bottom: 22px;
 }

 .ft-social {
     display: flex;
     gap: 8px;
     margin-bottom: 24px;
 }

 .ft-soc {
     width: 34px;
     height: 34px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: rgba(255, 255, 255, .4);
     font-size: 11px;
     font-weight: 800;
     transition: background .2s, color .2s, border-color .2s;
 }

 .ft-soc:hover {
     background: var(--lime);
     color: var(--ink);
     border-color: var(--lime);
 }

 .ft-badge-row {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .ft-badge {
     padding: 4px 10px;
     border: 1px solid rgba(255, 255, 255, .1);
     font-size: 10px;
     font-weight: 700;
     color: rgba(255, 255, 255, .35);
     letter-spacing: .04em;
     background: rgba(255, 255, 255, .04);
 }

 .ft-col h4 {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: rgba(184, 224, 0, .6);
     margin-bottom: 16px;
 }

 .ft-col a {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 10px;
     text-decoration: none;
     color: rgba(255, 255, 255, .4);
     font-size: 13px;
     font-weight: 500;
     transition: color .2s;
 }

 .ft-col a:hover {
     color: #fff;
 }

 .ft-col a::before {
     content: '';
     width: 3px;
     height: 3px;
     background: currentColor;
     flex-shrink: 0;
     opacity: .4;
 }

 /* ─── BIG BRAND FOOTER ─── */
 .ft-bigname {
     padding: 0 6% 0;
     line-height: 1;
     overflow: hidden;
 }

 .ft-bigname-inner {
     display: flex;
     align-items: flex-end;
     position: relative;
 }

 .ft-big-text {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(72px, 12vw, 200px);
     font-weight: 900;
     letter-spacing: -.06em;
     color: transparent;
     -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12);
     text-transform: uppercase;
     white-space: nowrap;
     position: relative;
     user-select: none;
     transition: color .4s, -webkit-text-stroke .4s;
     line-height: 0.88;
 }

 .ft-big-text:hover {
     color: rgba(255, 255, 255, .05);
     -webkit-text-stroke: 1.5px rgba(184, 224, 0, .5);
 }

 /* Animated fill on hover */
 .ft-big-text .fill {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
     background-size: 200% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     opacity: 0;
     transition: opacity .5s;
     animation: shimmerBrand 6s linear infinite;
     animation-play-state: paused;
 }

 .ft-bigname-inner:hover .fill {
     opacity: 1;
     animation-play-state: running;
 }

 @keyframes shimmerBrand {
     0% {
         background-position: 200% 0
     }

     100% {
         background-position: -200% 0
     }
 }

 .ft-bigname-year {
     font-family: 'JetBrains Mono', monospace;
     font-size: clamp(14px, 1.5vw, 22px);
     color: rgba(255, 255, 255, .18);
     margin-left: auto;
     padding-bottom: 0.3em;
     letter-spacing: .06em;
     white-space: nowrap;
     padding-left: 32px;
 }

 /* ─── offices ─── */
 .ft-offices {
     padding: 28px 6%;
     border-top: 1px solid rgba(255, 255, 255, .07);
     border-bottom: 1px solid rgba(255, 255, 255, .07);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
 }

 .ft-office {
     padding: 20px 22px;
     border-right: 1px solid rgba(255, 255, 255, .07);
 }

 .ft-office:last-child {
     border-right: none;
 }

 .ft-office-city {
     font-family: 'Outfit', sans-serif;
     font-size: 13px;
     font-weight: 900;
     margin-bottom: 3px;
     color: #fff;
 }

 .ft-office-country {
     font-size: 11px;
     color: rgba(255, 255, 255, .35);
     margin-bottom: 6px;
 }

 .ft-office-dot {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 10px;
     color: rgba(255, 255, 255, .4);
 }

 .ft-office-dot::before {
     content: '';
     width: 6px;
     height: 6px;
     background: #4ade80;
     box-shadow: 0 0 6px #4ade80;
     animation: blink 2s infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .3
     }
 }

 .ft-bottom {
     padding: 20px 6%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 14px;
 }

 .ft-copy {
     font-size: 12px;
     color: rgba(255, 255, 255, .2);
 }

 .ft-legal {
     display: flex;
     gap: 22px;
 }

 .ft-legal a {
     font-size: 12px;
     color: rgba(255, 255, 255, .3);
     text-decoration: none;
     transition: color .2s;
 }

 .ft-legal a:hover {
     color: var(--lime);
 }

 /* ═══════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════ */
 @media(max-width:1200px) {
     .ft-main {
         grid-template-columns: 1fr 1fr;
     }

     .ft-brand {
         grid-column: span 2;
     }

     .ft-offices {
         grid-template-columns: repeat(3, 1fr);
     }

     .mega.wide {
         min-width: 720px;
     }
 }

 @media(max-width:1060px) {
     .nav-mid {
         display: none;
     }

     .btn-ghost-nav {
         display: none;
     }

     .ham {
         display: flex;
     }

     .about-wrap,
     .work-grid,
     .ai-showcase {
         grid-template-columns: 1fr;
     }

     .work-grid .wcard.tall {
         grid-row: span 1;
     }

     .cta-right {
         display: none;
     }

     .cta-box {
         grid-template-columns: 1fr;
     }

     .proof-wrap {
         grid-template-columns: 1fr;
     }

     .llm-experience {
         grid-template-columns: 1fr;
     }

     .cine-grid {
         grid-template-columns: 1fr;
     }

     .cine-ai,
     .cine-grid {
         min-height: auto;
     }

     .cine-left,
     .cine-right {
         padding: 28px;
     }

     .cine-right {
         padding-top: 0;
     }

     .cine-stack {
         max-width: 100%;
     }

     .flow-card {
         grid-template-columns: 1fr;
         gap: 16px;
     }

     .flow-line {
         display: none;
     }
 }

 @media(max-width:760px) {
     .sec {
         padding: 72px 5%;
     }

     .srv-section {
         padding: 72px 0;
     }

     .srv-head {
         padding: 0 5%;
     }

     .srv-track {
         padding: 0 5%;
     }

     .srv-card {
         flex: 0 0 300px;
         min-height: 460px;
     }

     .ft-main {
         grid-template-columns: 1fr;
         padding: 40px 5% 36px;
     }

     .ft-brand {
         grid-column: span 1;
     }

     .ft-offices {
         grid-template-columns: 1fr 1fr;
     }

     .ft-bottom {
         flex-direction: column;
         align-items: flex-start;
     }

     .nav {
         padding: 0 20px;
     }

     .cta-text {
         padding: 36px 28px;
     }

     .cta-outer {
         padding: 0 5% 72px;
     }

     .mega {
         min-width: calc(100vw - 32px) !important;
         left: 16px !important;
         transform: none !important;
     }

     .nav-item.open .mega {
         transform: translateY(0) !important;
     }

     .proof-bottom {
         flex-direction: column;
         align-items: flex-start;
     }

     .proof-metric {
         text-align: left;
     }

     .ft-bigname-inner {
         flex-wrap: wrap;
         gap: 8px;
     }

     .ft-bigname-year {
         padding-left: 0;
     }
 }

 @media(max-width:480px) {

     .mega.wide,
     .mega.medium,
     .mega.narrow {
         grid-template-columns: 1fr;
     }

     .mega-col:not(:last-child) {
         border-right: none;
         border-bottom: 1px solid var(--border);
         padding-bottom: 20px;
         margin-bottom: 20px;
         padding-right: 0;
         margin-right: 0;
     }
 }


 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --bg: #fff;
     --bg2: #f5f5f2;
     --bg3: #eeeeea;
     --ink: #080808;
     --ink2: #1a1a1a;
     --muted: #666;
     --faint: #999;
     --lime: #c4f000;
     --lime-dk: #a0c700;
     --lime-lt: #f0ffc0;
     --cobalt: #1a4fff;
     --rose: #ff2d55;
     --amber: #f5a623;
     --violet: #8b5cf6;
     --border: #e2e2dc;
     --border-dk: #c8c8c0;
     --nav-h: 68px;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Manrope', 'Outfit', sans-serif;
     background: var(--bg);
     color: var(--ink);
     overflow-x: hidden;
 }

 #prog {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--lime), var(--cobalt));
     z-index: 9999;
     width: 0;
     transition: width .08s;
 }

 /* ═══ SPA ═══ */


 /* ═══ SHARED ═══ */

 /* btns */
 .btn-blk {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 13px 28px;
     background: var(--ink);
     color: #fff;
     font-size: 13px;
     font-weight: 900;
     font-family: inherit;
     border: none;
     cursor: pointer;
     letter-spacing: .05em;
     text-transform: uppercase;
     transition: background .2s, transform .15s;
 }

 .btn-blk:hover {
     background: var(--ink2);
     transform: translateY(-2px);
 }

 .btn-lime {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 13px 28px;
     background: var(--lime);
     color: var(--ink);
     font-size: 13px;
     font-weight: 900;
     font-family: inherit;
     border: none;
     cursor: pointer;
     letter-spacing: .05em;
     text-transform: uppercase;
     transition: background .2s, transform .15s;
 }

 .btn-lime:hover {
     background: var(--lime-dk);
     transform: translateY(-2px);
 }

 .btn-out {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 13px 28px;
     background: transparent;
     color: var(--ink);
     font-size: 13px;
     font-weight: 700;
     font-family: inherit;
     border: 1.5px solid var(--border-dk);
     cursor: pointer;
     letter-spacing: .05em;
     text-transform: uppercase;
     transition: all .2s;
 }

 .btn-out:hover {
     border-color: var(--ink);
     background: var(--bg2);
 }

 .btn-out-wt {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 13px 28px;
     background: transparent;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     font-family: inherit;
     border: 1.5px solid rgba(255, 255, 255, .2);
     cursor: pointer;
     letter-spacing: .05em;
     text-transform: uppercase;
     transition: all .2s;
 }

 .btn-out-wt:hover {
     border-color: rgba(255, 255, 255, .5);
     background: rgba(255, 255, 255, .05);
 }

 .btn-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 28px;
 }

 /* ═══ LEGAL HERO (shared by Privacy + T&C) ═══ */
 .legal-hero {
     margin-top: var(--nav-h);
     background: var(--ink);
     padding: 80px 6% 64px;
     border-bottom: 2px solid var(--lime);
     position: relative;
     overflow: hidden;
 }

 .legal-hero-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(196, 240, 0, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 240, 0, .03) 1px, transparent 1px);
     background-size: 64px 64px;
     pointer-events: none;
 }

 .legal-hero-eyebrow {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: rgba(196, 240, 0, .55);
     margin-bottom: 16px;
 }

 .legal-hero-title {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(48px, 7vw, 100px);
     font-weight: 900;
     line-height: .9;
     letter-spacing: -.07em;
     color: #fff;
     margin-bottom: 20px;
 }

 .legal-hero-title em {
     color: var(--lime);
     font-style: normal;
 }

 .legal-hero-meta {
     display: flex;
     gap: 24px;
     flex-wrap: wrap;
     margin-top: 28px;
 }

 .legal-meta-item {
     padding: 10px 18px;
     border: 1px solid rgba(255, 255, 255, .1);
     background: rgba(255, 255, 255, .04);
     font-size: 12px;
     color: rgba(255, 255, 255, .55);
     font-weight: 600;
     letter-spacing: .04em;
 }

 .legal-meta-item strong {
     color: #fff;
     display: block;
     font-size: 13px;
     margin-bottom: 2px;
 }

 /* ═══ LEGAL BODY LAYOUT ═══ */
 .legal-body {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 0;
     border-bottom: 2px solid var(--ink);
 }

 /* TOC sidebar */
 .legal-toc {
     padding: 48px 32px;
     border-right: 1.5px solid var(--border);
     position: sticky;
     top: var(--nav-h);
     height: calc(100vh - var(--nav-h));
     overflow-y: auto;
     background: var(--bg2);
 }

 .legal-toc h4 {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--faint);
     margin-bottom: 16px;
 }

 .toc-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .toc-item a {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     font-size: 12.5px;
     font-weight: 600;
     color: var(--muted);
     text-decoration: none;
     border: 1px solid transparent;
     transition: all .2s;
 }

 .toc-item a:hover {
     color: var(--ink);
     background: var(--bg);
     border-color: var(--border);
 }

 .toc-item a.active {
     color: var(--ink);
     background: var(--lime-lt);
     border-color: var(--lime-dk);
     font-weight: 800;
 }

 .toc-item a::before {
     content: '';
     width: 4px;
     height: 4px;
     background: currentColor;
     flex-shrink: 0;
     opacity: .5;
 }

 /* Legal content */
 .legal-content {
     padding: 64px 7%;
 }

 .legal-section {
     margin-bottom: 64px;
     padding-bottom: 64px;
     border-bottom: 1px solid var(--border);
 }

 .legal-section:last-child {
     border-bottom: none;
     margin-bottom: 0;
 }

 .legal-section-num {
     font-family: 'JetBrains Mono', monospace;
     font-size: 10px;
     color: var(--faint);
     margin-bottom: 10px;
     font-weight: 500;
     letter-spacing: .12em;
 }

 .legal-section h2 {
     font-family: 'Outfit', sans-serif;
     font-size: 28px;
     font-weight: 900;
     letter-spacing: -.03em;
     color: var(--ink);
     margin-bottom: 18px;
 }

 .legal-section p {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 2;
     margin-bottom: 14px;
 }

 .legal-section p:last-child {
     margin-bottom: 0;
 }

 .legal-section h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 18px;
     font-weight: 800;
     color: var(--ink);
     margin: 24px 0 10px;
     letter-spacing: -.02em;
 }

 .legal-list {
     list-style: none;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin: 14px 0;
 }

 .legal-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14px;
     color: var(--muted);
     line-height: 1.85;
 }

 .legal-list li::before {
     content: '';
     width: 6px;
     height: 6px;
     background: var(--lime-dk);
     flex-shrink: 0;
     margin-top: 7px;
 }

 .legal-highlight {
     padding: 20px 24px;
     background: var(--lime-lt);
     border: 1.5px solid var(--lime-dk);
     border-left: 4px solid var(--lime-dk);
     margin: 18px 0;
 }

 .legal-highlight p {
     font-size: 14px;
     color: var(--ink2);
     line-height: 1.85;
     margin-bottom: 0;
 }

 .legal-highlight strong {
     font-weight: 800;
 }

 .legal-table {
     width: 100%;
     border-collapse: collapse;
     margin: 18px 0;
     border: 1.5px solid var(--border);
 }

 .legal-table th {
     padding: 12px 16px;
     background: var(--ink);
     color: #fff;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
     text-align: left;
     border-right: 1px solid rgba(255, 255, 255, .1);
 }

 .legal-table th:last-child {
     border-right: none;
 }

 .legal-table td {
     padding: 12px 16px;
     font-size: 13.5px;
     color: var(--muted);
     border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     vertical-align: top;
     line-height: 1.75;
 }

 .legal-table td:last-child {
     border-right: none;
 }

 .legal-table tr:last-child td {
     border-bottom: none;
 }

 .legal-table tr:hover td {
     background: var(--bg2);
 }

 /* Last updated / contact bar */
 .legal-contact-bar {
     margin-top: 48px;
     padding: 28px 32px;
     background: var(--ink);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
 }

 .legal-contact-bar p {
     font-size: 13.5px;
     color: rgba(255, 255, 255, .55);
     line-height: 1.7;
 }

 .legal-contact-bar strong {
     color: #fff;
     display: block;
     margin-bottom: 4px;
 }

 .legal-contact-bar a {
     color: var(--lime);
     text-decoration: none;
     font-weight: 700;
 }

 /* ═══ SUPPORT PAGE ═══ */
 .support-hero {
     margin-top: var(--nav-h);
     background: var(--ink);
     padding: 80px 6% 0;
     border-bottom: 2px solid var(--lime);
     position: relative;
     overflow: hidden;
     min-height: 52vh;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 }

 .support-hero-grid {
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(196, 240, 0, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 240, 0, .03) 1px, transparent 1px);
     background-size: 64px 64px;
     pointer-events: none;
 }

 .support-hero-glow {
     position: absolute;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(196, 240, 0, .09), transparent 65%);
     top: -180px;
     right: -60px;
     pointer-events: none;
 }

 .support-hero-content {
     position: relative;
     z-index: 2;
     padding-bottom: 56px;
 }

 /* Search */
 .support-search-wrap {
     margin-top: 28px;
     display: flex;
     max-width: 560px;
 }

 .support-search-input {
     flex: 1;
     padding: 14px 20px;
     background: rgba(255, 255, 255, .08);
     border: 1.5px solid rgba(255, 255, 255, .15);
     color: #fff;
     font-size: 15px;
     font-family: inherit;
     outline: none;
     transition: border-color .2s;
 }

 .support-search-input::placeholder {
     color: rgba(255, 255, 255, .35);
 }

 .support-search-input:focus {
     border-color: var(--lime);
 }

 .support-search-btn {
     padding: 14px 22px;
     background: var(--lime);
     color: var(--ink);
     border: none;
     font-size: 14px;
     font-weight: 900;
     font-family: inherit;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
 }

 /* Category cards */
 .support-cats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-top: 52px;
 }

 .scat {
     padding: 32px 28px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     transition: border-color .3s, box-shadow .3s, transform .3s;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }

 .scat::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--lime);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .35s;
 }

 .scat:hover::before {
     transform: scaleX(1);
 }

 .scat:hover {
     border-color: var(--ink);
     box-shadow: 4px 4px 0 var(--ink);
     transform: translateY(-3px);
 }

 .scat-icon {
     font-size: 32px;
     margin-bottom: 16px;
     display: block;
 }

 .scat h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 17px;
     font-weight: 900;
     letter-spacing: -.02em;
     color: var(--ink);
     margin-bottom: 6px;
 }

 .scat p {
     font-size: 12.5px;
     color: var(--muted);
     line-height: 1.75;
     margin-bottom: 14px;
 }

 .scat-count {
     font-size: 11px;
     font-weight: 800;
     color: var(--faint);
     text-transform: uppercase;
     letter-spacing: .1em;
 }

 /* FAQ blocks */
 .support-faq-cols {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-top: 48px;
 }

 .faq-group h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: -.02em;
     color: var(--ink);
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .faq-group-icon {
     font-size: 20px;
 }

 .faq-list {
     border: 1.5px solid var(--border);
 }

 .faq-item {
     border-bottom: 1px solid var(--border);
 }

 .faq-item:last-child {
     border-bottom: none;
 }

 .faq-q {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     background: transparent;
     border: none;
     font-size: 13.5px;
     font-weight: 700;
     color: var(--ink);
     cursor: pointer;
     font-family: inherit;
     text-align: left;
     gap: 14px;
     transition: background .2s;
 }

 .faq-q:hover,
 .faq-q.open {
     background: var(--bg2);
 }

 .faq-icon {
     width: 22px;
     height: 22px;
     border: 1.5px solid var(--border);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     font-weight: 300;
     color: var(--faint);
     transition: all .2s;
 }

 .faq-q.open .faq-icon {
     background: var(--lime);
     border-color: var(--lime);
     color: var(--ink);
     transform: rotate(45deg);
 }

 .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height .32s ease;
 }

 .faq-a-inner {
     padding: 0 20px 18px;
     font-size: 13.5px;
     color: var(--muted);
     line-height: 1.9;
 }

 .faq-item.open .faq-a {
     max-height: 300px;
 }

 /* Status board */
 .status-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-top: 48px;
 }

 .status-card {
     padding: 24px 26px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .status-dot {
     width: 12px;
     height: 12px;
     flex-shrink: 0;
 }

 .status-dot.green {
     background: #22c55e;
     box-shadow: 0 0 8px #22c55e;
     animation: blink 2s infinite;
 }

 .status-dot.yellow {
     background: #f59e0b;
     box-shadow: 0 0 8px #f59e0b;
 }

 .status-dot.red {
     background: #ef4444;
     box-shadow: 0 0 8px #ef4444;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .4
     }
 }

 .status-card h4 {
     font-size: 14px;
     font-weight: 800;
     color: var(--ink);
     margin-bottom: 3px;
 }

 .status-card span {
     font-size: 12px;
     color: var(--muted);
 }

 /* Contact options */
 .support-contact-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 48px;
 }

 .sc-card {
     padding: 36px 32px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     transition: border-color .3s, box-shadow .3s, transform .3s;
     text-align: center;
 }

 .sc-card:hover {
     border-color: var(--ink);
     box-shadow: 5px 5px 0 var(--lime);
     transform: translateY(-3px);
 }

 .sc-card-icon {
     font-size: 36px;
     margin-bottom: 16px;
     display: block;
 }

 .sc-card h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: -.02em;
     color: var(--ink);
     margin-bottom: 8px;
 }

 .sc-card p {
     font-size: 13.5px;
     color: var(--muted);
     line-height: 1.85;
     margin-bottom: 20px;
 }

 .sc-card-badge {
     display: inline-block;
     padding: 4px 12px;
     background: var(--lime-lt);
     border: 1px solid var(--lime-dk);
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--ink);
     margin-bottom: 16px;
 }

 /* ═══ CAREERS PAGE ═══ */
 .careers-hero {
     margin-top: var(--nav-h);
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 90vh;
     border-bottom: 2px solid var(--ink);
     overflow: hidden;
 }

 .careers-hero-left {
     padding: 88px 7%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     background: var(--bg);
 }

 .careers-hero-accent {
     width: 3px;
     height: 64px;
     background: var(--lime);
     margin-bottom: 28px;
 }

 .careers-hero-eyebrow {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--faint);
     margin-bottom: 12px;
 }

 .careers-hero-title {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(50px, 6.5vw, 90px);
     font-weight: 900;
     line-height: .92;
     letter-spacing: -.06em;
     color: var(--ink);
     margin-bottom: 22px;
 }

 .careers-hero-title em {
     font-style: normal;
     color: var(--lime-dk);
 }

 .careers-hero-right {
     position: relative;
     overflow: hidden;
     background: var(--ink2);
 }

 .careers-hero-right img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.4) saturate(.6);
     transition: transform 9s ease;
 }

 .careers-hero-right:hover img {
     transform: scale(1.04);
 }

 .careers-hero-right::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(to right, var(--bg) 0%, transparent 12%);
 }

 .careers-hero-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 2;
     padding: 44px;
     background: linear-gradient(to top, rgba(8, 8, 8, .95) 0%, transparent 100%);
 }

 /* Perks */
 .perks-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: var(--border);
     border: 1.5px solid var(--ink);
     margin-top: 52px;
 }

 .perk {
     padding: 32px 28px;
     background: var(--bg);
     transition: background .22s;
 }

 .perk:hover {
     background: var(--lime-lt);
 }

 .perk-icon {
     font-size: 28px;
     margin-bottom: 14px;
     display: block;
 }

 .perk h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 17px;
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 8px;
     color: var(--ink);
 }

 .perk p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.82;
 }

 /* Job listings */
 .jobs-filter {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 48px;
     margin-bottom: 28px;
 }

 .filter-btn {
     padding: 8px 18px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     font-size: 12px;
     font-weight: 800;
     font-family: inherit;
     color: var(--muted);
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: .08em;
     transition: all .2s;
 }

 .filter-btn:hover,
 .filter-btn.active {
     background: var(--ink);
     color: #fff;
     border-color: var(--ink);
 }

 .jobs-list {
     display: flex;
     flex-direction: column;
     gap: 0;
     border: 1.5px solid var(--ink);
 }

 .job-row {
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: 20px;
     padding: 24px 28px;
     border-bottom: 1px solid var(--border);
     transition: background .2s, border-color .2s;
     cursor: pointer;
 }

 .job-row:last-child {
     border-bottom: none;
 }

 .job-row:hover {
     background: var(--bg2);
 }

 .job-row-left {}

 .job-tags {
     display: flex;
     gap: 6px;
     margin-bottom: 8px;
     flex-wrap: wrap;
 }

 .job-tag {
     padding: 3px 10px;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
 }

 .job-tag.dept {
     background: var(--lime-lt);
     border: 1px solid var(--lime-dk);
     color: var(--ink);
 }

 .job-tag.loc {
     background: var(--bg3);
     border: 1px solid var(--border-dk);
     color: var(--muted);
 }

 .job-tag.type {
     background: rgba(26, 79, 255, .08);
     border: 1px solid rgba(26, 79, 255, .25);
     color: var(--cobalt);
 }

 .job-row h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 18px;
     font-weight: 900;
     letter-spacing: -.02em;
     color: var(--ink);
     margin-bottom: 5px;
 }

 .job-row p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.7;
 }

 .job-row-right {}

 .job-apply-btn {
     padding: 10px 20px;
     background: var(--ink);
     color: #fff;
     font-size: 12px;
     font-weight: 900;
     font-family: inherit;
     border: none;
     cursor: pointer;
     letter-spacing: .06em;
     text-transform: uppercase;
     transition: background .2s, transform .15s;
     white-space: nowrap;
 }

 .job-apply-btn:hover {
     background: var(--lime);
     color: var(--ink);
     transform: translateY(-2px);
 }

 /* Culture values */
 .values-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
     margin-top: 48px;
 }

 .value-card {
     padding: 32px;
     border: 1.5px solid var(--border);
     background: var(--bg);
     position: relative;
     overflow: hidden;
     transition: border-color .3s, box-shadow .3s, transform .3s;
 }

 .value-card:hover {
     border-color: var(--ink);
     box-shadow: 5px 5px 0 var(--lime);
     transform: translateY(-3px);
 }

 .value-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 3px;
     height: 100%;
     background: var(--lime);
 }

 .value-num {
     font-family: 'JetBrains Mono', monospace;
     font-size: 11px;
     color: var(--faint);
     margin-bottom: 10px;
     letter-spacing: .1em;
 }

 .value-card h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 10px;
     color: var(--ink);
 }

 .value-card p {
     font-size: 13.5px;
     color: var(--muted);
     line-height: 1.88;
 }

 /* Hiring process */
 .process-track {
     margin-top: 48px;
     display: flex;
     flex-direction: column;
     gap: 0;
     border: 1.5px solid var(--ink);
 }

 .proc-step {
     display: grid;
     grid-template-columns: 72px 1fr auto;
     align-items: stretch;
     border-bottom: 1px solid var(--border);
 }

 .proc-step:last-child {
     border-bottom: none;
 }

 .proc-step:hover {
     background: var(--bg2);
 }

 .proc-num {
     display: flex;
     align-items: center;
     justify-content: center;
     border-right: 1px solid var(--border);
     padding: 22px 0;
 }

 .proc-dot {
     width: 14px;
     height: 14px;
     background: var(--lime);
     border: 2px solid var(--ink);
 }

 .proc-body {
     padding: 24px 28px;
 }

 .proc-body h3 {
     font-family: 'Outfit', sans-serif;
     font-size: 18px;
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 6px;
     color: var(--ink);
 }

 .proc-body p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.82;
 }

 .proc-tag {
     padding: 22px 24px;
     border-left: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .proc-tag span {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--lime-dk);
     text-align: center;
     white-space: nowrap;
 }

 /* ═══ FOOTER ═══ */
 footer {
     background: var(--ink);
     border-top: 2px solid var(--lime);
     overflow: hidden;
 }

 .ft-top {
     padding: 30px 6%;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .ft-top strong {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 900;
     color: #fff;
     display: block;
     margin-bottom: 3px;
 }

 .ft-top span {
     font-size: 12.5px;
     color: rgba(255, 255, 255, .4);
 }

 .ft-subscribe {
     display: flex;
     max-width: 380px;
     width: 100%;
 }

 .ft-sub-input {
     flex: 1;
     padding: 10px 14px;
     background: rgba(255, 255, 255, .06);
     border: 1.5px solid rgba(255, 255, 255, .1);
     border-right: none;
     color: #fff;
     font-size: 13px;
     font-family: inherit;
     outline: none;
 }

 .ft-sub-input::placeholder {
     color: rgba(255, 255, 255, .28);
 }

 .ft-sub-btn {
     padding: 10px 16px;
     background: var(--lime);
     color: var(--ink);
     border: none;
     font-size: 12px;
     font-weight: 900;
     font-family: inherit;
     cursor: pointer;
     text-transform: uppercase;
 }

 .ft-main {
     padding: 44px 6%;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
     gap: 28px;
 }

 .ft-logo-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
 }

 .ft-logo-box {
     width: 28px;
     height: 28px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ft-logo-box svg {
     width: 15px;
     height: 15px;
 }

 .ft-logo-name {
     font-family: 'Outfit', sans-serif;
     font-size: 14px;
     font-weight: 900;
     color: #fff;
 }

 .ft-brand-desc {
     font-size: 12.5px;
     color: rgba(255, 255, 255, .38);
     line-height: 1.9;
     max-width: 240px;
     margin-bottom: 18px;
 }

 .ft-social {
     display: flex;
     gap: 7px;
 }

 .ft-soc {
     width: 30px;
     height: 30px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: rgba(255, 255, 255, .38);
     font-size: 10px;
     font-weight: 800;
     transition: background .2s, color .2s;
 }

 .ft-soc:hover {
     background: var(--lime);
     color: var(--ink);
 }

 .ft-col h4 {
     font-size: 9.5px;
     font-weight: 900;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: rgba(196, 240, 0, .45);
     margin-bottom: 13px;
 }

 .ft-col a {
     display: flex;
     align-items: center;
     gap: 4px;
     margin-bottom: 8px;
     text-decoration: none;
     color: rgba(255, 255, 255, .35);
     font-size: 12.5px;
     font-weight: 500;
     transition: color .2s;
     cursor: pointer;
 }

 .ft-col a:hover {
     color: #fff;
 }

 .ft-col a::before {
     content: '';
     width: 3px;
     height: 3px;
     background: currentColor;
     flex-shrink: 0;
     opacity: .4;
 }

 .ft-bigname {
     padding: 0 6%;
     overflow: hidden;
 }

 .ft-big {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(64px, 12vw, 190px);
     font-weight: 900;
     letter-spacing: -.06em;
     color: transparent;
     -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09);
     text-transform: uppercase;
     white-space: nowrap;
     user-select: none;
     line-height: .88;
     transition: -webkit-text-stroke .4s;
 }

 .ft-big:hover {
     -webkit-text-stroke: 1.5px rgba(196, 240, 0, .38);
 }

 .ft-bottom {
     padding: 16px 6%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
 }

 .ft-copy {
     font-size: 11.5px;
     color: rgba(255, 255, 255, .18);
 }

 .ft-legal {
     display: flex;
     gap: 18px;
 }

 .ft-legal a {
     font-size: 11.5px;
     color: rgba(255, 255, 255, .26);
     text-decoration: none;
     transition: color .2s;
     cursor: pointer;
 }

 .ft-legal a:hover {
     color: var(--lime);
 }

 /* ═══ CTA BAND ═══ */
 .cta-band {
     background: var(--ink);
     padding: 72px 6%;
     border-top: 2px solid var(--lime);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: center;
 }

 .cta-band h2 {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(28px, 3.8vw, 52px);
     font-weight: 900;
     letter-spacing: -.04em;
     color: #fff;
     line-height: 1.02;
 }

 .cta-band h2 em {
     font-style: normal;
     color: var(--lime);
 }

 .cta-band-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     justify-content: flex-end;
 }

 /* ═══ RESPONSIVE ═══ */
 @media(max-width:1100px) {

     .nav-mid,
     .btn-ghost-nav {
         display: none;
     }

     .ham {
         display: flex;
     }

     .legal-body {
         grid-template-columns: 1fr;
     }

     .legal-toc {
         display: none;
     }

     .careers-hero {
         grid-template-columns: 1fr;
     }

     .careers-hero-right {
         min-height: 380px;
     }

     .careers-hero-right::before {
         background: linear-gradient(to bottom, var(--bg) 0%, transparent 12%);
     }

     .support-cats {
         grid-template-columns: 1fr 1fr;
     }

     .support-faq-cols {
         grid-template-columns: 1fr;
     }

     .support-contact-row {
         grid-template-columns: 1fr;
     }

     .perks-grid {
         grid-template-columns: 1fr 1fr;
     }

     .status-grid {
         grid-template-columns: 1fr 1fr;
     }

     .cta-band {
         grid-template-columns: 1fr;
     }

     .cta-band-btns {
         justify-content: flex-start;
     }

     .ft-main {
         grid-template-columns: 1fr 1fr;
     }

     .proc-step {
         grid-template-columns: 56px 1fr;
     }

     .proc-tag {
         display: none;
     }
 }

 @media(max-width:720px) {
     .sec {
         padding: 64px 5%;
     }

     .nav {
         padding: 0 20px;
     }

     .legal-hero,
     .support-hero,
     .careers-hero-left {
         padding: 60px 5%;
     }

     .support-cats {
         grid-template-columns: 1fr;
     }

     .perks-grid {
         grid-template-columns: 1fr;
     }

     .values-grid {
         grid-template-columns: 1fr;
     }

     .status-grid {
         grid-template-columns: 1fr;
     }

     .legal-content {
         padding: 48px 5%;
     }

     .ft-main {
         grid-template-columns: 1fr;
         padding: 32px 5%;
     }

     .jobs-filter {
         flex-wrap: wrap;
     }

     .job-row {
         grid-template-columns: 1fr;
     }

     .support-hero {
         padding: 60px 5% 0;
     }
 }