/* =================================================================
   3D BRANDING — LANDING
   Aesthetic: dark premium + industrial/tech (3D printing)
   Palette: midnight blue / electric blue / cream / warm grey
   ================================================================= */
    :root {
        --bg: #0B1E3F;
        --bg-2: #0E2449;
        --bg-3: #081833;
        --ink: #F4F1EC;
        --ink-dim: #B8C2D4;
        --mute: #7B8699;
        --line: rgba(244, 241, 236, .10);
        --line-2: rgba(244, 241, 236, .18);
        --accent: #2B6BE8;
        --accent-2: #4D8BFF;
        --glow: rgba(43, 107, 232, .35);
        --success: #7DD3A8;

        --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
        --f-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
        --f-mono: 'JetBrains Mono', ui-monospace, monospace;

        --r-s: 10px;
        --r-m: 14px;
        --r-l: 22px;
        --r-xl: 32px;
        --maxw: 1200px;
    }

    * {
        box-sizing: border-box
    }

    html,
    body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--f-body);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    body {
        background:
            radial-gradient(1200px 700px at 85% -10%, rgba(43, 107, 232, .22), transparent 60%),
            radial-gradient(900px 600px at -10% 20%, rgba(43, 107, 232, .10), transparent 60%),
            var(--bg);
    }

    a {
        color: inherit;
        text-decoration: none
    }

    button {
        font: inherit;
        cursor: pointer
    }

    img,
    svg {
        display: block;
        max-width: 100%
    }

    .wrap {
        margin: 0 auto;
        padding: 0 28px
    }

    /* ---------- technical grid backdrop ---------- */
    .grid-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .35;
        background-image:
            linear-gradient(to right, var(--line) 1px, transparent 1px),
            linear-gradient(to bottom, var(--line) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
    }

    /* ---------- typography ---------- */
    h1,
    h2,
    h3,
    h4 {
        font-family: var(--f-display);
        font-weight: 600;
        letter-spacing: -.02em;
        margin: 0;
        color: var(--ink)
    }

    .display-title {
        font-size: clamp(48px, 6.8vw, 130px);
        line-height: .98;
        letter-spacing: -.035em;
        font-weight: 600
    }

    .seo-h1 {
        font-family: var(--f-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        color: var(--accent);
        margin-bottom: 24px;
        display: block;
        opacity: 0.8;
    }

    h2 {
        font-size: clamp(32px, 4vw, 56px);
        line-height: 1.02;
        letter-spacing: -.03em
    }

    h3 {
        font-size: 22px;
        line-height: 1.2
    }

    p {
        margin: 0;
        line-height: 1.55;
        color: var(--ink-dim)
    }

    .mono {
        font-family: var(--f-mono);
        letter-spacing: .02em;
        text-transform: uppercase;
        font-size: 12px;
        color: var(--mute)
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--f-mono);
        font-size: 11px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: .18em;
    }

    .eyebrow::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--accent)
    }

    /* ---------- nav ---------- */
    nav.top {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: saturate(130%) blur(16px);
        background: rgba(11, 30, 63, .55);
        border-bottom: 1px solid var(--line);
    }

    .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 28px;
        margin: 0 auto
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        color: var(--ink);
    }

    .brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .brand-name {
        font-family: var(--f-display);
        font-weight: 700;
        font-size: 20px;
        letter-spacing: -.02em;
    }

    .brand-tagline {
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--accent-2);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-top: 2px;
    }

    .logo-mark {
        width: 50px;
        height: 50px;
        border-radius: 9px;
        position: relative;
        background: linear-gradient(135deg, var(--accent) 0%, #7AA9FF 100%);
        box-shadow: 0 6px 18px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .14);
        display: grid;
        place-items: center;
    }

    .logo-mark::before,
    .logo-mark::after {
        content: "";
        position: absolute;
        background: rgba(255, 255, 255, .28)
    }

    .logo-mark::before {
        left: 8px;
        right: 8px;
        top: 50%;
        height: 1px
    }

    .logo-mark::after {
        top: 8px;
        bottom: 8px;
        left: 50%;
        width: 1px
    }

    .logo-mark svg {
        position: relative;
        z-index: 1
    }

    .nav-links {
        display: flex;
        gap: 28px;
        align-items: center
    }

    .nav-links a {
        font-size: 14px;
        transition: color .2s
    }

    .nav-links a:hover {
        color: var(--ink)
    }

    .nav-cta {
        padding: 10px 18px;
        background: var(--ink);
        color: var(--bg);
        border-radius: 999px;
        font-weight: 600;
        font-size: 14px;
        border: none;
        transition: transform .2s
    }

    .nav-cta:hover {
        transform: translateY(-1px);
        color: black;
    }

    .menu-toggle {
        display: none;
        flex-direction: column;
        gap: 6px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 100;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--ink);
        transition: transform .3s, opacity .3s;
        border-radius: 2px;
    }

    @media(max-width:820px) {
        .menu-toggle {
            display: flex;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        .nav-links {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100vh;
            background: rgba(8, 20, 48, 0.95);
            backdrop-filter: blur(20px);
            flex-direction: column;
            justify-content: center;
            gap: 40px;
            padding: 40px;
            transform: translateX(100%);
            transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 90;
        }

        .nav-links.active {
            transform: translateX(0);
        }

        .nav-links a {
            font-size: 24px;
            font-weight: 500;
            color: var(--ink-dim);
        }

        .nav-links a:hover {
            color: var(--ink);
        }

        .nav-links a.nav-cta {
            font-size: 20px;
            width: 100%;
            max-width: 250px;
            text-align: center;
            padding: 16px;
        }
    }

    /* ---------- buttons ---------- */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 22px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 15px;
        border: 1px solid transparent;
        transition: transform .2s, background .2s, border-color .2s;
        font-family: var(--f-body)
    }

    .btn-primary {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 10px 24px -8px var(--glow)
    }

    .btn-primary:hover {
        background: var(--accent-2);
        transform: translateY(-1px)
    }

    .btn-ghost {
        background: transparent;
        color: var(--ink);
        border-color: var(--line-2)
    }

    .btn-ghost:hover {
        border-color: var(--ink);
        background: rgba(255, 255, 255, .03)
    }

    .btn svg {
        width: 16px;
        height: 16px
    }

    /* =================================================================
   HERO (3 variantes)
   ================================================================= */
    .hero {
        position: relative;
        padding: 72px 0 120px;
        overflow: hidden
    }

    .hero-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 48px;
        flex-wrap: wrap;
        gap: 16px
    }

    .hero-stage {
        position: relative;
        min-height: 560px
    }

    /* ---------- Hero Editorial split ---------- */
    .vA {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 60px;
        align-items: center
    }

    @media(max-width:900px) {
        .vA {
            grid-template-columns: 1fr
        }
    }

    .vA h1 span.accent, .vA .display-title span.accent {
        background: linear-gradient(100deg, var(--accent-2) 0%, #9EC1FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .vA .hero-lead {
        max-width: 480px;
        margin-top: 28px;
        font-size: 17px;
        color: var(--ink-dim)
    }

    .vA .hero-ctas {
        display: flex;
        gap: 12px;
        margin-top: 36px;
        margin-bottom: 20px;
        flex-wrap: wrap
    }

    .vA .hero-meta {
        display: flex;
        gap: 32px;
        margin-top: 48px;
        padding-top: 30px;
    }

    .vA .hero-meta .cell {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .vA .hero-meta .num {
        font-family: var(--f-display);
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -.02em
    }

    .vA .hero-meta .lbl {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--mute);
        text-transform: uppercase;
        letter-spacing: .14em
    }

    /* Render card for variant A */
    .render-card {
        position: relative;
        aspect-ratio: 1/1;
        border-radius: var(--r-xl);
        overflow: hidden;
        background:
            radial-gradient(circle at 30% 20%, rgba(77, 139, 255, .30), transparent 55%),
            linear-gradient(160deg, #10295A 0%, #081430 100%);
        border: 1px solid var(--line-2);
        box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .render-card .ticker {
        position: absolute;
        top: 16px;
        left: 16px;
        right: 16px;
        display: flex;
        justify-content: space-between;
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--ink-dim);
        letter-spacing: .15em;
        text-transform: uppercase;
        z-index: 3;
    }

    .render-card .corner {
        position: absolute;
        width: 14px;
        height: 14px;
        border: 1px solid var(--accent);
        z-index: 3;
    }

    .render-card .corner.tl {
        top: 12px;
        left: 12px;
        border-right: none;
        border-bottom: none
    }

    .render-card .corner.tr {
        top: 12px;
        right: 12px;
        border-left: none;
        border-bottom: none
    }

    .render-card .corner.bl {
        bottom: 12px;
        left: 12px;
        border-right: none;
        border-top: none
    }

    .render-card .corner.br {
        bottom: 12px;
        right: 12px;
        border-left: none;
        border-top: none
    }

    /* Hero Image Slider */
    .slider-stage {
        position: absolute;
        inset: 0;
        display: grid;
        z-index: 1;
    }

    .slider-stage .slide {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1.2s ease, transform 6s ease-out;
        transform: scale(1.05);
    }

    .slider-stage .slide.active {
        opacity: 1;
        transform: scale(1);
    }

    .slider-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(8, 20, 48, 0.95) 0%, rgba(8, 20, 48, 0.2) 50%, rgba(8, 20, 48, 0.4) 100%);
        pointer-events: none;
        z-index: 2;
    }

    .render-card .caption {
        position: absolute;
        bottom: 32px;
        left: 32px;
        right: 32px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 3;
    }

    .render-card .caption .t1 {
        font-family: var(--f-display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -.01em
    }

    .render-card .caption .t2 {
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--ink-dim);
        letter-spacing: .15em;
        text-transform: uppercase
    }

    .render-card .nfc-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(43, 107, 232, .18);
        border: 1px solid rgba(43, 107, 232, .4);
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #CDD9FF;
    }

    .nfc-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-2);
        box-shadow: 0 0 8px var(--accent-2)
    }

    .blueprint {
        position: relative;
        border-radius: var(--r-xl);
        overflow: hidden;
        background:
            linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0/24px 24px,
            linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0/24px 24px,
            linear-gradient(160deg, #08193A, #050E25);
        border: 1px solid var(--line-2);
        min-height: 480px;
    }

    .blueprint::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 45%, transparent 50%, rgba(8, 16, 38, .9) 100%)
    }

    .blueprint .bp-label {
        position: absolute;
        top: 18px;
        left: 18px;
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--ink-dim);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .blueprint .bp-dim {
        position: absolute;
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--accent-2);
        letter-spacing: .1em
    }

    .blueprint .bp-dim.d1 {
        top: 40px;
        right: 18px
    }

    .blueprint .bp-dim.d2 {
        bottom: 18px;
        left: 18px
    }

    .blueprint .bp-dim.d3 {
        bottom: 18px;
        right: 18px
    }

    .blueprint .obj {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        z-index: 2
    }

    .blueprint .obj svg {
        width: 55%
    }

    .blueprint .bp-photo {
        padding: 40px
    }

    .blueprint .bp-photo img {
        max-width: 70%;
        max-height: 90%;
        object-fit: contain;
        filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6))
    }

    .blueprint .cross {
        position: absolute;
        background: var(--accent);
        opacity: .4
    }

    .blueprint .cross.h {
        left: 20%;
        right: 20%;
        top: 50%;
        height: 1px
    }

    .blueprint .cross.v {
        top: 20%;
        bottom: 20%;
        left: 50%;
        width: 1px
    }

    /* =================================================================
   PRODUCTS
   ================================================================= */
    .section {
        padding: 20px 0;
        position: relative
    }

    .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 32px;
        margin-bottom: 56px;
        flex-wrap: wrap
    }

    .section-head .left {
        max-width: 640px
    }

    .section-head p {
        margin-top: 14px;
        font-size: 17px
    }

    .section-head .right {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--mute);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .products {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px
    }

    .product {
        grid-column: span 6;
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
        padding: 52px 28px 28px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        transition: border-color .3s, transform .3s;
        position: relative;
        overflow: hidden;
    }

    .product:hover {
        border-color: var(--line-2);
        transform: translateY(-2px)
    }

    .product .num {
        position: absolute;
        top: 20px;
        right: 24px;
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--mute);
        letter-spacing: .14em
    }

    .product .visual {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: var(--r-l);
        background:
            radial-gradient(circle at 70% 30%, rgba(77, 139, 255, .25), transparent 55%),
            linear-gradient(160deg, #10295A 0%, #081430 100%);
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
    }

    .product .visual::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .4;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    .product .visual svg {
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5))
    }

    .product .visual.photo {
        padding: 0
    }

    .product .visual.photo img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit
    }

    .product .visual.photo::before {
        display: none
    }

    .product h3 {
        font-size: 26px;
        letter-spacing: -.02em
    }

    .product p {
        font-size: 15px
    }

    .product .tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 4px
    }

    .product .tag {
        padding: 5px 10px;
        border-radius: 999px;
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-dim);
        border: 1px solid var(--line-2);
        background: rgba(255, 255, 255, .02);
    }

    .product.wide {
        grid-column: span 12
    }

    .product.wide {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        align-items: center
    }

    .product.wide .visual {
        aspect-ratio: auto;
        min-height: 280px
    }

    @media(max-width:900px) {
        .product {
            grid-column: span 12
        }

        .product.wide {
            grid-template-columns: 1fr
        }
    }

    /* =================================================================
   PROCESS
   ================================================================= */
    .process {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 20px
    }

    @media(max-width:900px) {
        .process {
            grid-template-columns: 1fr
        }
    }

    .step {
        position: relative;
        padding: 32px 28px;
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
        min-height: 260px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .step .step-num {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent-2);
    }

    .step .step-num .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent)
    }

    .step h3 {
        font-size: 24px;
        margin-top: 8px
    }

    .step .step-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: rgba(43, 107, 232, .12);
        border: 1px solid rgba(43, 107, 232, .35);
        display: grid;
        place-items: center;
        margin-bottom: 4px;
    }

    .step .step-icon svg {
        width: 26px;
        height: 26px;
        stroke: var(--accent-2);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .step .bar {
        height: 4px;
        border-radius: 2px;
        margin-top: auto;
        background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill, 33%), rgba(255, 255, 255, .08) var(--fill, 33%));
    }

    .step p {
        font-size: 15px
    }

    /* =================================================================
   BENEFITS
   ================================================================= */
    .benefits {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 60px 40px;
        margin-top: 20px;
    }

    .benefit {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
    }

    .benefit-flex {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .benefit::before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
        margin-bottom: 8px;
        opacity: 0.6;
    }

    .benefit .big {
        font-family: var(--f-display);
        font-size: 64px;
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: 1;
        color: var(--ink);
    }

    .benefit .big .unit {
        font-size: 20px;
        color: var(--accent-2);
        font-weight: 500;
        margin-left: 4px
    }

    .benefit h4 {
        font-family: var(--f-display);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -.01em;
        margin: 0;
        color: var(--ink);
    }

    .benefit p {
        font-size: 14px
    }

    .benefit:nth-child(1) {
        grid-column: span 4
    }

    .benefit:nth-child(2) {
        grid-column: span 4
    }

    .benefit:nth-child(3) {
        grid-column: span 4
    }

    .benefit:nth-child(4) {
        grid-column: span 6
    }

    .benefit:nth-child(5) {
        grid-column: span 6
    }

    @media(max-width:900px) {
        .benefit {
            grid-column: span 12 !important
        }
    }

    /* =================================================================
   FAQ
   ================================================================= */
    .faq {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--line)
    }

    .faq-item {
        border-bottom: 1px solid var(--line);
        padding: 24px 0;
        cursor: pointer
    }

    .faq-q {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px
    }

    .faq-q h4 {
        font-family: var(--f-display);
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -.01em;
        color: var(--ink)
    }

    .faq-toggle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--line-2);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        transition: transform .3s, background .3s, border-color .3s
    }

    .faq-toggle::before,
    .faq-toggle::after {
        content: "";
        position: absolute;
        background: var(--ink-dim)
    }

    .faq-toggle {
        position: relative
    }

    .faq-toggle::before {
        width: 10px;
        height: 1.5px
    }

    .faq-toggle::after {
        width: 1.5px;
        height: 10px;
        transition: transform .3s
    }

    .faq-item.open .faq-toggle {
        background: var(--accent);
        border-color: var(--accent)
    }

    .faq-item.open .faq-toggle::before,
    .faq-item.open .faq-toggle::after {
        background: #fff
    }

    .faq-item.open .faq-toggle::after {
        transform: rotate(90deg)
    }

    .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease, margin .3s;
        color: var(--ink-dim);
        font-size: 15px;
        line-height: 1.6;
        max-width: 720px
    }

    .faq-item.open .faq-a {
        max-height: 240px;
        margin-top: 14px
    }

    /* =================================================================
   CONTACT
   ================================================================= */
    .contact {
        margin: 80px auto 80px;
        max-width: var(--maxw);
        padding: 64px;
        border-radius: var(--r-xl);
        background:
            radial-gradient(600px 300px at 80% 20%, rgba(77, 139, 255, .18), transparent 60%),
            linear-gradient(160deg, #0F2555, #081531);
        border: 1px solid var(--line-2);
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 48px;
        position: relative;
        overflow: hidden;
    }

    .contact::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
        background-size: 32px 32px;
        mask-image: radial-gradient(ellipse at 70% 30%, transparent 20%, #000 80%);
        opacity: .6;
    }

    .contact>* {
        position: relative;
        z-index: 1
    }

    .contact h2 {
        font-size: clamp(32px, 4vw, 52px)
    }

    .contact .intro-p {
        margin-top: 18px;
        font-size: 16px;
        max-width: 380px
    }

    .contact .inline-meta {
        margin-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-family: var(--f-mono);
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-dim)
    }

    .contact .inline-meta span {
        display: inline-flex;
        align-items: center;
        gap: 10px
    }

    .contact .inline-meta span::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-2)
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .field.full {
        grid-column: span 2
    }

    .field label {
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--mute)
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--line-2);
        border-radius: 10px;
        padding: 12px 14px;
        color: var(--ink);
        font-family: var(--f-body);
        font-size: 15px;
        transition: border-color .2s;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--accent-2);
        background: rgba(77, 139, 255, .06)
    }

    .field textarea {
        resize: vertical;
        min-height: 96px
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    .chip {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--line-2);
        background: rgba(255, 255, 255, .03);
        font-size: 13px;
        color: var(--ink-dim);
        cursor: pointer;
        transition: all .2s;
        font-family: var(--f-body)
    }

    .chip.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
    }

    .submit-row {
        grid-column: span 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        gap: 16px;
        flex-wrap: wrap
    }

    .submit-row .fine {
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--mute);
        letter-spacing: .1em;
        text-transform: uppercase
    }

    .success-msg {
        display: none;
        padding: 14px 18px;
        background: rgba(125, 211, 168, .1);
        border: 1px solid rgba(125, 211, 168, .4);
        border-radius: 10px;
        color: var(--success);
        font-size: 14px;
        grid-column: span 2
    }

    .success-msg.on {
        display: block
    }

    @media(max-width:900px) {
        .contact {
            grid-template-columns: 1fr;
            padding: 40px 28px
        }

        .form-grid {
            grid-template-columns: 1fr
        }

        .field.full,
        .submit-row,
        .success-msg {
            grid-column: span 1
        }
    }

    /* =================================================================
   FOOTER
   ================================================================= */
    footer {
        padding: 48px 0 40px;
        border-top: 1px solid var(--line);
        margin-top: 40px
    }

    .foot-inner {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        align-items: center
    }

    .foot-inner .mono {
        color: var(--mute)
    }

    .foot-links {
        display: flex;
        gap: 24px;
        flex-wrap: wrap
    }

    .foot-links a {
        font-size: 13px;
        color: var(--ink-dim)
    }

    .foot-links a:hover {
        color: var(--ink)
    }

    /* =================================================================
   ANIMATIONS
   ================================================================= */
    .fade-in {
        opacity: 0;
        transition: opacity 1.2s ease-in-out;
        will-change: opacity;
    }

    .fade-in.is-visible {
        opacity: 1;
    }

    /* =================================================================
   DIVIDERS (OPTIONS)
   ================================================================= */

    /* Option 1: Glowing Full Line */
    .divider-glow {
        height: 1px;
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        opacity: 0.8;
        box-shadow: 0 0 15px var(--glow);
    }

    /* Option 2: Alt Background */
    .section.bg-alt {
        background: radial-gradient(ellipse at 50% 0%, rgba(43, 107, 232, 0.08), transparent 70%), var(--bg-2);
        border-top: 1px solid rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    /* Option 3: Tech/Blueprint Slicer Marker */
    .divider-tech {
        width: 100%;
        height: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 8px 100%;
        position: relative;
        opacity: 0.6;
        margin: 60px 0;
    }

    .divider-tech::before,
    .divider-tech::after {
        content: "";
        position: absolute;
        width: 15%;
        height: 1px;
        background: var(--line-2);
    }

    .divider-tech::before {
        left: 0;
    }

    .divider-tech::after {
        right: 0;
    }

    .divider-tech .cross {
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--accent-2);
        letter-spacing: .2em;
        padding: 0 16px;
        background: var(--bg);
    }

    /* =================================================================
   WHATSAPP & RESPONSIVE POLISH
   ================================================================= */

    .btn-wsp {
        background: #25D366;
        color: #fff;
        border: none;
        box-shadow: 0 10px 20px -5px rgba(37, 211, 102, 0.3);
    }

    .btn-wsp:hover {
        background: #20BA5A;
        transform: translateY(-2px);
    }

    .wsp-float {
        position: fixed;
        bottom: 100px;
        left: 30px;
        width: 60px;
        height: 60px;
        background: #25D366;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .wsp-float:hover {
        transform: scale(1.1);
    }

    .back-to-top {
        position: fixed;
        bottom: 100px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid var(--line-2);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        z-index: 1000;
        transition: all 0.3s ease;
        opacity: 0.7;
    }

    .back-to-top:hover {
        background: var(--accent);
        opacity: 1;
        transform: translateY(-5px);
    }

    .wsp-float svg {
        width: 32px;
        height: 32px;
        fill: currentColor;
    }

    @media (max-width: 768px) {
        :root {
            --maxw: 100%;
        }

        .wrap {
            padding: 0 20px;
        }

        /* Nav */
        .nav-inner {
            padding: 12px 20px;
        }

        .brand-tagline {
            display: none;
        }

        /* Hero */
        .hero {
            padding: 40px 0 80px;
        }

        .vA {
            grid-template-columns: 1fr;
            gap: 40px;
            text-align: center;
        }

        .vA .hero-lead {
            margin: 20px auto 0;
        }

        .vA .hero-ctas {
            justify-content: center;
        }

        .vA .hero-meta {
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .render-card {
            width: 100%;
            max-width: 380px;
            margin: 40px auto 0;
            display: block !important;
        }

        /* Sections */
        .section-head {
            flex-direction: column;
            gap: 12px;
            text-align: center;
        }

        .section-head .left {
            max-width: 100%;
        }

        .section-head .right {
            display: none;
        }

        /* Products */
        .products {
            grid-template-columns: 1fr;
        }

        .product.wide {
            grid-template-columns: 1fr;
        }

        /* Benefits */
        .benefits {
            display: flex !important;
            flex-direction: column !important;
            gap: 64px !important;
            padding: 0;
            margin: 0;
        }

        .benefit {
            width: 100% !important;
            grid-column: auto !important;
            text-align: center !important;
            padding: 0 !important;
            align-items: center !important;
        }

        .benefit::before {
            margin: 0 auto 16px;
            width: 80% !important;
        }

        .benefit .big {
            font-size: 56px !important;
            line-height: .9;
        }

        .benefit h4 {
            font-size: 20px !important;
            line-height: 1.2;
            margin: 0 auto;
        }

        .benefit-flex {
            flex-direction: column !important;
            gap: 12px !important;
            align-items: center !important;
            text-align: center !important;
        }

        .benefit p {
            max-width: 100% !important;
            margin: 8px auto 0 !important;
        }

        /* Process */
        .process {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        /* FAQ */
        .faq-q {
            padding: 20px 0;
        }

        .faq-q h4 {
            font-size: 16px;
        }

        /* Footer Mobile Refinement */
        .foot-inner {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center;
            gap: 32px !important;
        }

        .foot-links {
            flex-direction: row !important;
            flex-wrap: wrap;
            justify-content: center !important;
            gap: 20px !important;
        }

        .foot-inner .logo {
            justify-content: center !important;
            margin-bottom: 8px;
        }

        .foot-inner .mono {
            order: 3;
            margin-top: 10px;
        }
    }