/* ===== MADROOM — Premium Cinematic Refinement ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --dark: #141f28;
    --dark-deep: #0c1620;
    --gold: #ffb950;
    --gold-soft: rgba(255,185,80,.15);
    --gold-glow: rgba(255,185,80,.08);
    --light: #f6f8ff;
    --white: #ffffff;
    --gray: #8a8f9d;
    --border-light: rgba(20,31,40,.07);
    --border-dark: rgba(246,248,255,.07);
    --shape-size: clamp(130px,20vw,200px);
    --logo-size: clamp(70px,12vw,120px);
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Inter',sans-serif;
    background: var(--light);
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

/* ── LOADER ── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    overflow: hidden
}

.loader__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.025) 1px,transparent 1px);
    background-size: 52px 52px;
    pointer-events: none
}

.loader__svg-ring {
    position: absolute;
    width: calc(var(--shape-size)*1.55);
    height: calc(var(--shape-size)*1.55);
    overflow: visible;
    pointer-events: none
}

.loader__dot-ring {
    fill: none;
    stroke: rgba(246,248,255,.15);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 4 12;
    stroke-dashoffset: 1680;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center
}

.loader__dot-arc {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 8;
    stroke-dashoffset: 200;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center
}

.loader__shapes {
    position: absolute;
    width: var(--shape-size);
    height: var(--shape-size);
    pointer-events: none
}

.loader__shape {
    position: absolute;
    inset: 0;
    border-radius: 30%;
    transform-origin: center;
    will-change: transform
}

.loader__shape--back {
    background: var(--gold);
    opacity: 0;
    transform: rotate(12deg) scale(0.6)
}

.loader__shape--front {
    background: var(--dark-deep);
    opacity: 0;
    transform: rotate(-10deg) scale(0.6);
    border: 1px solid rgba(255,185,80,.2);
    box-shadow: inset 0 0 60px rgba(255,185,80,.06),0 24px 64px rgba(20,31,40,.4)
}

.loader-logo-wrap {
    position: absolute;
    width: var(--logo-size);
    height: var(--logo-size);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: scale(0.85)
}

    .loader-logo-wrap svg {
        width: 100%;
        height: 100%;
        overflow: visible
    }

.loader__logo-fallback {
    display: none
}

.loader__progress {
    position: absolute;
    bottom: clamp(28px,6vh,52px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px,18vw,120px);
    height: 1px;
    background: rgba(246,248,255,.08);
    overflow: hidden;
    border-radius: 4px
}

.loader__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--gold);
    transform-origin: left
}

/* ── SITE ── */
.site-content {
    opacity: 0;
    pointer-events: none;
    min-height: 100vh
}

    .site-content.is-visible {
        opacity: 1;
        pointer-events: auto
    }

/* ── NAVBAR —  soft pill style ── */
.nav-wrap {
    position: fixed;
    top: clamp(14px,2.2vh,20px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - clamp(24px,4vw,64px));
    max-width: 1080px;
    z-index: 100;
    opacity: 0;
    pointer-events: none
}

    .nav-wrap.nav-visible {
        opacity: 1;
        pointer-events: auto
    }
    /* ambient glow behind navbar */
    .nav-wrap::before {
        content: '';
        position: absolute;
        inset: -20px -40px;
        background: radial-gradient(ellipse,rgba(255,185,80,.04) 0%,transparent 70%);
        pointer-events: none;
        border-radius: 100px;
        z-index: -1
    }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(246,248,255,.88);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 0.5px solid rgba(20,31,40,.055);
    border-radius: 100px;
    padding: 7px 7px 7px 20px;
    box-shadow: 0 2px 16px rgba(20,31,40,.06),0 0 0 0.5px rgba(255,255,255,.9) inset,0 1px 0 rgba(255,255,255,.95) inset;
    transition: box-shadow .4s,background .4s
}

    .nav.scrolled {
        box-shadow: 0 8px 40px rgba(20,31,40,.1),0 0 0 0.5px rgba(255,255,255,.9) inset;
        background: rgba(246,248,255,.96)
    }

.nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0
}

.nav__logo-mark {
    width: 34px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible
}

    .nav__logo-mark svg {
        width: 34px;
        height: 28px;
        overflow: visible
    }

.nav__logo-text {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--dark);
    text-transform: uppercase
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(14px,2vw,30px);
    list-style: none;
    margin: 0 auto
}

.nav__link {
    font-size: 12.5px;
    font-weight: 450;
    letter-spacing: .01em;
    color: var(--dark);
    opacity: .5;
    text-decoration: none;
    transition: opacity .2s;
    white-space: nowrap
}

    .nav__link:hover {
        opacity: .9
    }

.nav__cta {
    flex-shrink: 0;
    background: var(--dark);
    color: var(--light);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 100px;
    white-space: nowrap;
    transition: background .25s,transform .2s,box-shadow .25s;
    box-shadow: 0 2px 10px rgba(20,31,40,.18)
}

    .nav__cta:hover {
        background: var(--gold);
        color: var(--dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 22px rgba(255,185,80,.3)
    }

.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px
}

    .nav__burger span {
        display: block;
        width: 18px;
        height: 1.5px;
        background: var(--dark);
        border-radius: 2px;
        transition: transform .3s,opacity .3s
    }

/* ── HERO — Cinematic Dark ── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(100px,15vh,140px) clamp(20px,5vw,60px) clamp(60px,10vh,100px);
    background: #141f28
}

.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

/* Cinematic vignette — edge darkening like a film frame */
.hero__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,transparent 28%,rgba(7,10,14,.55) 65%,rgba(4,7,11,.85) 100%);
    z-index: 3;
    pointer-events: none
}

/* Subtle film grain texture overlay */
.hero__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px
}

/* Atmospheric film-like orbs — muted, cinematic */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
    animation: orbFloat 10s ease-in-out infinite alternate
}

.orb--gold {
    width: clamp(380px,55vw,720px);
    height: clamp(380px,55vw,720px);
    background: radial-gradient(ellipse,rgba(255,185,80,.065) 0%,transparent 65%);
    top: -15%;
    right: -8%;
    animation-delay: 0s;
    animation-duration: 13s
}

.orb--navy {
    width: clamp(300px,44vw,600px);
    height: clamp(300px,44vw,600px);
    background: radial-gradient(ellipse,rgba(8,14,22,.9) 0%,transparent 68%);
    top: 5%;
    left: -10%;
    animation-delay: 2s;
    animation-duration: 15s
}

.orb--warm {
    width: clamp(260px,38vw,520px);
    height: clamp(260px,38vw,520px);
    background: radial-gradient(ellipse,rgba(180,120,40,.04) 0%,transparent 65%);
    bottom: 5%;
    left: 12%;
    animation-delay: 1.5s;
    animation-duration: 17s
}

.orb--blue {
    width: clamp(220px,30vw,420px);
    height: clamp(220px,30vw,420px);
    background: radial-gradient(ellipse,rgba(60,100,160,.05) 0%,transparent 65%);
    bottom: 0%;
    right: 8%;
    animation-delay: 5s;
    animation-duration: 19s
}
/* Film-like horizontal light streak */
.orb--streak {
    position: absolute;
    width: 100%;
    height: clamp(180px,25vw,300px);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at 50% 50%,rgba(255,185,80,.028) 0%,rgba(30,45,60,.015) 40%,transparent 70%);
    filter: blur(40px);
    border-radius: 0;
    animation: none
}

@keyframes orbFloat {
    0% {
        transform: translate(0,0) scale(1)
    }

    100% {
        transform: translate(14px,-18px) scale(1.04)
    }
}

/* Grid — deeply muted, barely visible, integrated into dark atmosphere */
.hero__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.012) 1px,transparent 1px);
    background-size: 60px 60px;
    z-index: 1
}

/* Decorative SVG art for hero */
.hero__deco {
    position: absolute;
    pointer-events: none;
    z-index: 4
}

.hero__deco--1 {
    top: 22%;
    left: 7%;
    animation: decoFloat1 8s ease-in-out infinite
}

.hero__deco--2 {
    top: 30%;
    right: 9%;
    animation: decoFloat2 10s ease-in-out infinite
}

.hero__deco--3 {
    bottom: 28%;
    left: 10%;
    animation: decoFloat1 12s ease-in-out infinite;
    animation-delay: 2s
}

@keyframes decoFloat1 {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-10px) rotate(3deg)
    }
}

@keyframes decoFloat2 {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(8px) rotate(-2deg)
    }
}

.hero__inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 900px;
    width: 100%
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(10px,1vw,11.5px);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(246,248,255,.38);
    margin-bottom: clamp(20px,3vh,32px);
    opacity: 0;
    transform: translateY(16px)
}

.hero__eyebrow-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: dotPulse 2.6s ease-in-out infinite
}

@keyframes dotPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .35;
        transform: scale(0.6)
    }
}

.hero__headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(51px,8.5vw,108px);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -.03em;
    color: var(--light);
    margin-bottom: clamp(24px,4vh,40px);
    opacity: 0;
    transform: translateY(24px)
}

    .hero__headline .word {
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom
    }

    .hero__headline .word-inner {
        display: inline-block;
        transform: translateY(110%)
    }
/* Solid orange on key words — gradient breaks inside overflow:hidden word spans */
.hero__headline-em {
    color: #ffb950;
    font-weight: 800
}

    .hero__headline-em .word-inner {
        color: #ffb950
    }

.hero__headline-light {
    font-weight: 700;
    color: rgba(246,248,255,.45)
}

    .hero__headline-light .word-inner {
        color: rgba(246,248,255,.45)
    }

.hero__sub {
    font-size: clamp(11px,1.6vw,18px);
    font-weight: 400;
    line-height: 1.78;
    color: rgba(246,248,255,.42);
    max-width: 800px;
    margin: 0 auto clamp(32px,5vh,52px);
    opacity: 0;
    transform: translateY(20px)
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px,1.5vw,16px);
    flex-wrap: wrap;
    margin-bottom: clamp(20px,3vh,28px);
    opacity: 0;
    transform: translateY(20px)
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .04em;
    border-radius: 100px;
    transition: background .28s,color .28s,transform .22s,box-shadow .28s;
    white-space: nowrap
}

.btn--primary {
    background: var(--gold);
    color: var(--dark);
    padding: 14px 32px;
    box-shadow: 0 6px 28px rgba(255,185,80,.28)
}

    .btn--primary:hover {
        background: var(--light);
        color: var(--dark);
        transform: translateY(-2px);
        box-shadow: 0 10px 36px rgba(255,185,80,.32)
    }

.btn--ghost {
    color: rgba(246,248,255,.65);
    border: 1px solid rgba(246,248,255,.16);
    padding: 13px 26px
}

    .btn--ghost:hover {
        background: rgba(246,248,255,.06);
        border-color: rgba(246,248,255,.28);
        transform: translateY(-1px);
        color: var(--light)
    }

.hero__trust {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .05em;
    color: rgba(246,248,255,.22);
    opacity: 0;
    transform: translateY(12px)
}

.hero__proof {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px,4vw,48px);
    margin-top: clamp(48px,7vh,72px);
    padding: clamp(16px,2.2vw,24px) clamp(24px,4vw,48px);
    background: rgba(20,31,40,.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 0.5px solid rgba(255,185,80,.1);
    border-radius: 20px;
    max-width: 580px;
    width: 100%;
    box-shadow: 0 4px 32px rgba(0,0,0,.3),0 1px 0 rgba(255,185,80,.06) inset;
    opacity: 0;
    transform: translateY(20px)
}

.proof__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center
}

    .proof__item strong {
        font-size: clamp(11px,1.2vw,13px);
        font-weight: 600;
        letter-spacing: .02em;
        color: rgba(246,248,255,.75)
    }

    .proof__item span {
        font-size: clamp(10px,1vw,11px);
        font-weight: 400;
        color: rgba(246,248,255,.3)
    }

.proof__divider {
    width: 1px;
    height: 30px;
    background: rgba(246,248,255,.08);
    flex-shrink: 0
}

/* ── REUSABLE DECORATIVE ACCENTS ── */
/* Editorial annotation marks — used across all sections */
.accent {
    position: absolute;
    pointer-events: none;
    z-index: 3
}

/* Orbit accent — scribbled oval circle like reference image */
.accent--orbit {
    opacity: .55;
    animation: decoFloat1 9s ease-in-out infinite
}

.accent--orbit-2 {
    opacity: .42;
    animation: decoFloat2 11s ease-in-out infinite
}

/* Star burst / sparkle like in reference */
.accent--spark {
    opacity: .6;
    animation: sparkSpin 14s linear infinite
}

@keyframes sparkSpin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Diagonal line mark */
.accent--slash {
    opacity: .3;
    animation: decoFloat2 13s ease-in-out infinite
}

/* Underline scribble */
.accent--underline {
    opacity: .45;
    animation: decoFloat1 10s ease-in-out infinite;
    animation-delay: 1s
}

/* Section-specific placements */
/* Services section accents */
.sv-accent--1 {
    top: 8%;
    right: 3%;
    width: 60px;
    height: 60px
}

.sv-accent--2 {
    bottom: 15%;
    left: 4%
}

/* Testimonials accents */
.testi-accent--1 {
    top: 6%;
    right: 6%;
    opacity: .6
}

.testi-accent--2 {
    bottom: 8%;
    left: 5%;
    opacity: .45
}

.testi-accent--3 {
    top: 40%;
    right: 3%;
    opacity: .35
}

/* Process accents */
.proc-accent--1 {
    top: 10%;
    left: 4%
}

.proc-accent--2 {
    bottom: 15%;
    right: 5%
}

/* FAQ accents */
.faq-accent--1 {
    top: 12%;
    right: 6%;
    opacity: .35
}

.faq-accent--2 {
    bottom: 10%;
    left: 5%;
    opacity: .28
}

/* Contact accents */
.contact-accent--1 {
    top: 8%;
    right: 4%
}

.contact-accent--2 {
    bottom: 20%;
    left: 3%
}

/* Footer accents */
.footer-accent--1 {
    top: 20%;
    left: 5%;
    opacity: .2
}

/* ── CONTENT PRODUCTION ── */
.section-cp {
    position: relative;
    padding: clamp(80px,11vw,150px) clamp(20px,5vw,80px);
    background: var(--light);
    overflow: hidden
}

.section-cp__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.cp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px)
}

.cp-orb--1 {
    width: clamp(450px,60vw,780px);
    height: clamp(450px,60vw,780px);
    background: radial-gradient(ellipse,rgba(255,185,80,.06) 0%,transparent 65%);
    top: -20%;
    right: -12%
}

.cp-orb--2 {
    width: clamp(350px,45vw,600px);
    height: clamp(350px,45vw,600px);
    background: radial-gradient(ellipse,rgba(20,31,40,.045) 0%,transparent 65%);
    bottom: -5%;
    left: -8%
}

.cp-orb--3 {
    width: clamp(260px,36vw,500px);
    height: clamp(260px,36vw,500px);
    background: radial-gradient(ellipse,rgba(140,185,250,.05) 0%,transparent 65%);
    top: 40%;
    left: 18%
}
/* Decorative art for CP section */
.cp-deco {
    position: absolute;
    pointer-events: none;
    opacity: .45;
    z-index: 1
}

.cp-deco--1 {
    top: 15%;
    left: 4%;
    animation: decoFloat1 9s ease-in-out infinite
}

.cp-deco--2 {
    bottom: 20%;
    right: 5%;
    animation: decoFloat2 11s ease-in-out infinite
}

.cp-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.cp-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,5vw,80px);
    align-items: end;
    margin-bottom: clamp(60px,8vw,96px)
}

.cp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(14px,2vh,22px);
    opacity: 0;
    transform: translateY(12px)
}

    .cp-eyebrow::before {
        content: '';
        display: block;
        width: 18px;
        height: 1px;
        background: var(--gold);
        flex-shrink: 0
    }

.cp-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(40px,5.5vw,76px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -.025em;
    color: var(--dark);
    opacity: 0;
    transform: translateY(20px)
}

    .cp-headline em {
        font-style: normal;
        color: var(--gold);
        font-weight: 300
    }

.cp-desc {
    font-size: clamp(15px,1.5vw,17px);
    font-weight: 400;
    line-height: 1.78;
    color: rgba(20,31,40,.5);
    max-width: 420px;
    opacity: 0;
    transform: translateY(20px)
}

.cp-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(10px,1.4vw,18px);
    margin-bottom: clamp(60px,8vw,100px)
}

.cp-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 9/16;
    background: var(--dark);
    border: 0.5px solid rgba(20,31,40,.08);
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;
    cursor: pointer
}

    .cp-card:hover {
        transform: translateY(-10px) scale(1.015);
        box-shadow: 0 30px 80px rgba(20,31,40,.18)
    }

.cp-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.cp-card:nth-child(1) .cp-card__bg {
    background: linear-gradient(155deg,#0e1820 0%,#141f28 55%,#0c1a22 100%)
}

.cp-card:nth-child(2) .cp-card__bg {
    background: linear-gradient(155deg,#0a0f1a 0%,#141f28 55%,#0c1018 100%)
}

.cp-card:nth-child(3) .cp-card__bg {
    background: linear-gradient(155deg,#fdf9f0 0%,#fef6e4 60%,#fffaf0 100%)
}

.cp-card:nth-child(4) .cp-card__bg {
    background: linear-gradient(155deg,#f0f4ff 0%,#e8f2ff 55%,#f2f5ff 100%)
}

.cp-card__glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none
}

.cp-card:nth-child(1) .cp-card__glow {
    background: radial-gradient(circle,rgba(255,185,80,.22) 0%,transparent 70%);
    top: 20%;
    left: 10%
}

.cp-card:nth-child(2) .cp-card__glow {
    background: radial-gradient(circle,rgba(140,185,245,.22) 0%,transparent 70%);
    top: 15%;
    right: 10%
}

.cp-card:nth-child(3) .cp-card__glow {
    background: radial-gradient(circle,rgba(255,185,80,.3) 0%,transparent 70%);
    bottom: 20%;
    right: 0
}

.cp-card:nth-child(4) .cp-card__glow {
    background: radial-gradient(circle,rgba(140,185,245,.28) 0%,transparent 70%);
    bottom: 15%;
    left: 0
}

.cp-card__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: clamp(18px,2vw,28px)
}

.cp-card__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: auto;
    align-self: flex-start
}

.cp-card:nth-child(1) .cp-card__tag, .cp-card:nth-child(2) .cp-card__tag {
    background: rgba(255,185,80,.08);
    color: rgba(255,185,80,.65);
    border: 0.5px solid rgba(255,185,80,.15)
}

.cp-card:nth-child(3) .cp-card__tag, .cp-card:nth-child(4) .cp-card__tag {
    background: rgba(20,31,40,.05);
    color: rgba(20,31,40,.5);
    border: 0.5px solid rgba(20,31,40,.09)
}

.cp-card__visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0
}

.cp-card__icon {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cp-card:nth-child(1) .cp-card__icon::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(255,185,80,.1);
    border: 1px solid rgba(255,185,80,.2)
}

.cp-card:nth-child(1) .cp-card__icon::after {
    content: '◎';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 28px;
    color: rgba(255,185,80,.9)
}

.cp-card:nth-child(2) .cp-card__icon::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(140,185,245,.12);
    border: 1px solid rgba(140,185,245,.18)
}

.cp-card:nth-child(2) .cp-card__icon::after {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
    color: rgba(140,185,245,.9)
}

.cp-card:nth-child(3) .cp-card__icon::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,185,80,.2) 0%,transparent 70%)
}

.cp-card:nth-child(3) .cp-card__icon::after {
    content: '◈';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 32px;
    color: rgba(255,150,60,.8)
}

.cp-card:nth-child(4) .cp-card__icon::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(140,185,245,.16);
    border: 1px solid rgba(140,185,245,.22)
}

.cp-card:nth-child(4) .cp-card__icon::after {
    content: '⬡';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 28px;
    color: rgba(100,150,220,.85)
}

.cp-card__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(16px,1.7vw,22px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 7px;
    letter-spacing: -.01em
}

.cp-card:nth-child(1) .cp-card__title, .cp-card:nth-child(2) .cp-card__title {
    color: var(--light)
}

.cp-card:nth-child(3) .cp-card__title, .cp-card:nth-child(4) .cp-card__title {
    color: var(--dark)
}

.cp-card__subtitle {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .01em
}

.cp-card:nth-child(1) .cp-card__subtitle, .cp-card:nth-child(2) .cp-card__subtitle {
    color: rgba(246,248,255,.4)
}

.cp-card:nth-child(3) .cp-card__subtitle, .cp-card:nth-child(4) .cp-card__subtitle {
    color: rgba(20,31,40,.45)
}

/* ── SERVICES ── */
.section-services {
    position: relative;
    padding: clamp(60px,8vw,110px) clamp(20px,5vw,80px) clamp(80px,11vw,150px);
    background: var(--light);
    overflow: hidden
}

.section-services__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.sv-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px)
}

.sv-orb--1 {
    width: clamp(400px,50vw,680px);
    height: clamp(400px,50vw,680px);
    background: radial-gradient(ellipse,rgba(255,185,80,.05) 0%,transparent 65%);
    top: 5%;
    left: -10%
}

.sv-orb--2 {
    width: clamp(350px,45vw,620px);
    height: clamp(350px,45vw,620px);
    background: radial-gradient(ellipse,rgba(20,31,40,.04) 0%,transparent 65%);
    bottom: 0;
    right: -8%
}
/* decorative for services */
.sv-deco {
    position: absolute;
    pointer-events: none;
    opacity: .35;
    z-index: 1
}

.sv-deco--1 {
    top: 12%;
    right: 6%;
    animation: decoFloat2 10s ease-in-out infinite
}

.services-divider {
    max-width: 1240px;
    margin: 0 auto clamp(60px,7vw,90px);
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(20,31,40,.06) 30%,rgba(20,31,40,.06) 70%,transparent);
    position: relative;
    z-index: 2
}

.sv-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.sv-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: clamp(44px,6vw,68px);
    flex-wrap: wrap
}

.sv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: clamp(12px,1.8vh,18px);
    opacity: 0;
    transform: translateY(12px)
}

.sv-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(36px,5vw,68px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -.025em;
    color: var(--dark);
    opacity: 0;
    transform: translateY(20px)
}

    .sv-headline em {
        font-style: normal;
        color: var(--gold);
        font-weight: 300
    }

.sv-header__right {
    max-width: 320px
}

.sv-sub {
    font-size: clamp(14px,1.4vw,16px);
    font-weight: 400;
    line-height: 1.75;
    color: rgba(20,31,40,.48);
    opacity: 0;
    transform: translateY(16px)
}

.sv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px,1.6vw,20px)
}

.sv-card {
    position: relative;
    border-radius: 26px;
    padding: clamp(28px,3.2vw,44px);
    overflow: hidden;
    border: 0.5px solid transparent;
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;
    cursor: pointer
}

    .sv-card:hover {
        transform: translateY(-6px) scale(1.005)
    }

.sv-card--gold {
    background: linear-gradient(140deg,#fdf8ee 0%,#fef3d8 45%,#fffbf0 100%);
    border-color: rgba(255,185,80,.18);
    box-shadow: 0 2px 40px rgba(255,185,80,.08)
}

    .sv-card--gold:hover {
        box-shadow: 0 16px 60px rgba(255,185,80,.18)
    }

.sv-card--blue {
    background: linear-gradient(298deg, #eef4ff 0%, #c0dcff 45%, #f0fffe 100%);
    border-color: rgba(140,185,245,.14);
    box-shadow: 0 2px 40px rgba(140,185,245,.1)
}

    .sv-card--blue:hover {
        box-shadow: 0 16px 60px rgba(140,185,245,.18)
    }

.sv-card--dark {
    background: linear-gradient(140deg,#1a2732 0%,#141f28 45%,#1c2a36 100%);
    border-color: rgba(255,185,80,.1);
    box-shadow: 0 2px 40px rgba(20,31,40,.12)
}

    .sv-card--dark:hover {
        box-shadow: 0 16px 60px rgba(20,31,40,.2)
    }

.sv-card--soft {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    border-color: rgba(20,31,40,.07);
    box-shadow: 0 2px 40px rgba(20,31,40,.04)
}

    .sv-card--soft:hover {
        box-shadow: 0 16px 60px rgba(20,31,40,.09)
    }

.sv-card__glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none
}

.sv-card--gold .sv-card__glow {
    background: radial-gradient(circle,rgba(255,185,80,.25) 0%,transparent 70%);
    top: -50px;
    right: -40px
}

.sv-card--blue .sv-card__glow {
    background: radial-gradient(circle,rgba(140,185,245,.22) 0%,transparent 70%);
    bottom: -40px;
    left: -20px
}

.sv-card--dark .sv-card__glow {
    background: radial-gradient(circle,rgba(255,185,80,.12) 0%,transparent 70%);
    top: -30px;
    right: -30px
}

.sv-card--soft .sv-card__glow {
    background: radial-gradient(circle,rgba(255,185,80,.07) 0%,transparent 70%);
    bottom: -20px;
    right: -20px
}

.sv-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: clamp(18px,2.2vw,28px);
    position: relative;
    z-index: 1
}

.sv-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.sv-card--gold .sv-card__icon {
    background: rgba(255,185,80,.16);
    border: 0.5px solid rgba(255,185,80,.25)
}

.sv-card--blue .sv-card__icon {
    background: rgba(140,185,245,.16);
    border: 0.5px solid rgba(140,185,245,.22)
}

.sv-card--dark .sv-card__icon {
    background: rgba(255,185,80,.1);
    border: 0.5px solid rgba(255,185,80,.18)
}

.sv-card--soft .sv-card__icon {
    background: rgba(20,31,40,.05);
    border: 0.5px solid rgba(20,31,40,.09)
}

.sv-card__arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0.5px solid rgba(20,31,40,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s,transform .25s,border-color .25s;
    flex-shrink: 0
}

.sv-card--dark .sv-card__arrow {
    border-color: rgba(246,248,255,.12)
}

    .sv-card--dark .sv-card__arrow svg {
        stroke: rgba(246,248,255,.5)
    }

.sv-card:hover .sv-card__arrow {
    background: var(--gold);
    border-color: var(--gold);
    transform: rotate(-45deg)
}

    .sv-card:hover .sv-card__arrow svg {
        stroke: var(--dark)
    }

.sv-card__body {
    position: relative;
    z-index: 1
}

.sv-card__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(20px,2.2vw,30px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--dark);
    margin-bottom: 12px
}

.sv-card--dark .sv-card__title {
    color: var(--light)
}

.sv-card__desc {
    font-size: clamp(13px,1.2vw,15px);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(20,31,40,.52);
    margin-bottom: clamp(18px,2vw,26px);
    max-width: 300px
}

.sv-card--dark .sv-card__desc {
    color: rgba(246,248,255,.44)
}

.sv-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.sv-card__tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    color: rgba(20,31,40,.46);
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(20,31,40,.05);
    border: 0.5px solid rgba(20,31,40,.07);
    transition: background .2s,color .2s
}

.sv-card--dark .sv-card__tag {
    color: rgba(246,248,255,.4);
    background: rgba(246,248,255,.06);
    border-color: rgba(246,248,255,.1)
}

.sv-card:hover .sv-card__tag {
    background: rgba(20,31,40,.07);
    color: rgba(20,31,40,.65)
}

.sv-card--dark:hover .sv-card__tag {
    background: rgba(255,185,80,.1);
    color: rgba(255,185,80,.8);
    border-color: rgba(255,185,80,.18)
}

/* ── CTA BANNER ── */
.section-cta {
    padding: clamp(40px,7vw,100px) clamp(20px,5vw,80px);
    position: relative;
    z-index: 2
}

.cta-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px,3vw,48px);
    background: var(--dark);
    border-radius: 28px;
    padding: clamp(36px,4.5vw,60px) clamp(36px,4.5vw,68px);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(24px)
}

    .cta-inner::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,185,80,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.02) 1px,transparent 1px);
        background-size: 44px 44px;
        pointer-events: none
    }

.cta-inner__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 50%,rgba(255,185,80,.1) 0%,transparent 58%);
    pointer-events: none
}

.cta-inner__left {
    position: relative;
    z-index: 1
}

.cta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(246,248,255,.3);
    margin-bottom: 14px
}

    .cta-label::before {
        content: '';
        display: block;
        width: 16px;
        height: 1px;
        background: var(--gold);
        opacity: .4
    }

.cta-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(28px,4vw,54px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--light)
}

    .cta-headline em {
        font-style: normal;
        font-weight: 300;
        color: rgba(255,185,80,.6)
    }

.cta-inner__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.btn--cta-primary {
    background: var(--gold);
    color: var(--dark);
    padding: 14px 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: 100px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .25s,color .25s,transform .2s,box-shadow .25s;
    box-shadow: 0 4px 20px rgba(255,185,80,.3)
}

    .btn--cta-primary:hover {
        background: var(--light);
        color: var(--dark);
        transform: translateY(-2px);
        box-shadow: 0 10px 36px rgba(255,185,80,.25)
    }

.btn--cta-ghost {
    color: rgba(246,248,255,.48);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border: 0.5px solid rgba(246,248,255,.13);
    border-radius: 100px;
    transition: color .2s,border-color .2s,transform .2s
}

    .btn--cta-ghost:hover {
        color: var(--light);
        border-color: rgba(246,248,255,.28);
        transform: translateY(-1px)
    }

/* ── TESTIMONIALS ── */
.section-testimonials {
    position: relative;
    background: #0a1018;
    padding: clamp(80px,11vw,150px) clamp(20px,5vw,80px);
    overflow: hidden
}

.testimonials-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.testimonials-bg__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.012) 1px,transparent 1px);
    background-size: 56px 56px
}

.testimonials-bg__orb-1 {
    position: absolute;
    width: clamp(400px,55vw,700px);
    height: clamp(400px,55vw,700px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,185,80,.04) 0%,transparent 70%);
    filter: blur(80px);
    top: -10%;
    left: -5%
}

.testimonials-bg__orb-2 {
    position: absolute;
    width: clamp(350px,45vw,600px);
    height: clamp(350px,45vw,600px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(20,31,40,.3) 0%,transparent 70%);
    filter: blur(80px);
    bottom: 0;
    right: -8%
}
/* Decorative art for testimonials */
.testi-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1
}

.testi-deco--1 {
    top: 8%;
    right: 8%;
    opacity: .5;
    animation: decoFloat1 9s ease-in-out infinite
}

.testi-deco--2 {
    bottom: 10%;
    left: 6%;
    opacity: .4;
    animation: decoFloat2 11s ease-in-out infinite
}

.testimonials-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.testimonials-header {
    margin-bottom: clamp(52px,7vw,88px);
    opacity: 0;
    transform: translateY(20px)
}

.testimonials-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,185,80,.5);
    margin-bottom: clamp(14px,2vh,20px)
}

    .testimonials-eyebrow::before {
        content: '';
        display: block;
        width: 18px;
        height: 1px;
        background: rgba(255,185,80,.3)
    }

.testimonials-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(34px,5vw,66px);
    font-weight: 700;
    line-height: 0.97;
    letter-spacing: -.025em;
    color: var(--light)
}

    .testimonials-headline em {
        font-style: normal;
        font-weight: 300;
        color: rgba(255,185,80,.55)
    }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(12px,1.5vw,20px);
    align-items: start
}

.tcard {
    background: rgba(246,248,255,.028);
    border: 0.5px solid rgba(246,248,255,.075);
    border-radius: 22px;
    padding: clamp(24px,2.8vw,36px);
    opacity: 0;
    transform: translateY(24px);
    transition: background .3s,border-color .3s,transform .35s
}

    .tcard:hover {
        background: rgba(246,248,255,.048);
        border-color: rgba(255,185,80,.12);
        transform: translateY(-5px)
    }

.tcard--tall {
    grid-row: span 2
}

.tcard__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 2px
}

.tcard__quote {
    font-size: clamp(13px,1.25vw,15px);
    font-weight: 400;
    line-height: 1.72;
    color: rgba(246,248,255,.52);
    margin-bottom: clamp(20px,2.5vw,28px)
}

.tcard--tall .tcard__quote {
    font-size: clamp(14px,1.4vw,17px);
    font-weight: 300;
    color: rgba(246,248,255,.65)
}

.tcard__highlight {
    color: var(--gold);
    font-weight: 450
}

.tcard__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 0.5px solid rgba(246,248,255,.055)
}

.tcard__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,185,80,.08);
    border: 0.5px solid rgba(255,185,80,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,185,80,.7);
    flex-shrink: 0
}

.tcard__name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(246,248,255,.7);
    margin-bottom: 2px
}

.tcard__role {
    font-size: 11px;
    font-weight: 400;
    color: rgba(246,248,255,.28);
    letter-spacing: .03em
}

/* ── PROCESS ── */
.section-process {
    position: relative;
    background: #07090d;
    padding: clamp(80px,10vw,140px) clamp(20px,5vw,80px);
    overflow: hidden
}

.process-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.process-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.012) 1px,transparent 1px);
    background-size: 56px 56px
}

.process-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px)
}

.process-glow--left {
    background: radial-gradient(circle,rgba(255,185,80,.06) 0%,transparent 70%);
    top: 0;
    left: -80px
}

.process-glow--right {
    background: radial-gradient(circle,rgba(20,31,40,.5) 0%,transparent 70%);
    bottom: 0;
    right: -80px
}
/* process deco */
.proc-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: .4
}

.proc-deco--1 {
    top: 18%;
    right: 5%;
    animation: decoFloat2 8s ease-in-out infinite
}

.process-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.process-header {
    text-align: center;
    margin-bottom: clamp(60px,8vw,100px);
    opacity: 0;
    transform: translateY(20px)
}

.process-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,185,80,.45);
    margin-bottom: 16px
}

.process-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(34px,5vw,64px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -.025em;
    color: var(--light)
}

    .process-headline em {
        font-style: normal;
        font-weight: 300;
        color: rgba(255,185,80,.6)
    }

.process-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(16px,2.5vw,32px);
    align-items: end
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(32px)
}

#proc-1 {
    padding-bottom: 0
}

#proc-2 {
    padding-bottom: clamp(36px,4.5vw,64px)
}

#proc-3 {
    padding-bottom: clamp(64px,7.5vw,110px)
}

#proc-4 {
    padding-bottom: clamp(90px,11vw,150px)
}

.process-step__number {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(26px,3vw,40px);
    font-weight: 300;
    color: rgba(255,185,80,.4);
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 10px
}

.process-step__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(15px,1.6vw,20px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--light);
    margin-bottom: 10px
}

.process-step__desc {
    font-size: clamp(12px,1.1vw,13.5px);
    font-weight: 400;
    line-height: 1.68;
    color: rgba(246,248,255,.34);
    max-width: 200px;
    margin-bottom: clamp(22px,2.8vw,38px)
}

.process-step__platform {
    width: 100%;
    position: relative;
    height: clamp(60px,7vw,90px);
    margin-top: auto;
    overflow: hidden;
    border-radius: 0 0 8px 8px
}
    /* Ground-light: soft upward glow rising from the base */
    .process-step__platform::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: 100%;
        background: radial-gradient(ellipse at 50% 100%,rgba(255,185,80,.55) 0%,rgba(255,185,80,.22) 28%,rgba(255,185,80,.06) 58%,transparent 80%);
        filter: blur(8px);
        border-radius: 50% 50% 0 0 / 30% 30% 0 0
    }
    /* Bright centerline at base */
    .process-step__platform::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 55%;
        height: 3px;
        background: linear-gradient(90deg,transparent,rgba(255,185,80,.75) 30%,rgba(255,220,120,.9) 50%,rgba(255,185,80,.75) 70%,transparent);
        border-radius: 2px 2px 0 0;
        box-shadow: 0 0 18px 4px rgba(255,185,80,.35),0 0 40px 8px rgba(255,185,80,.12)
    }

.platform-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 100%,rgba(255,185,80,.28) 0%,rgba(255,160,40,.08) 40%,transparent 72%);
    animation: groundPulse 3.2s ease-in-out infinite alternate;
    border-radius: 50% 50% 0 0 / 40% 40% 0 0
}
/* Shimmer beam */
.platform-beam {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 100%;
    background: linear-gradient(0deg,rgba(255,220,140,.18) 0%,rgba(255,185,80,.04) 60%,transparent 100%);
    filter: blur(3px);
    animation: beamFlicker 2.8s ease-in-out infinite alternate
}

@keyframes groundPulse {
    0% {
        opacity: .4;
        transform: translateX(-50%) scaleX(.85)
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1)
    }
}

@keyframes beamFlicker {
    0% {
        opacity: .5;
        width: 25%
    }

    50% {
        opacity: .9;
        width: 38%
    }

    100% {
        opacity: .6;
        width: 22%
    }
}

/* ── FAQ ── */
.section-faq {
    position: relative;
    padding: clamp(80px,11vw,150px) clamp(20px,5vw,80px);
    background: var(--light);
    overflow: hidden
}

.faq-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.faq-bg__orb {
    position: absolute;
    width: clamp(500px,65vw,900px);
    height: clamp(500px,65vw,900px);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,185,80,.04) 0%,transparent 65%);
    filter: blur(100px);
    top: -20%;
    left: -10%
}

.faq-container {
    max-width: 840px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.faq-header {
    text-align: center;
    margin-bottom: clamp(52px,7vw,80px);
    opacity: 0;
    transform: translateY(20px)
}

.faq-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: clamp(12px,1.8vh,18px)
}

.faq-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(32px,4.5vw,58px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -.025em;
    color: var(--dark)
}

    .faq-headline em {
        font-style: normal;
        font-weight: 300;
        color: rgba(20,31,40,.3)
    }

.faq-list {
    display: flex;
    flex-direction: column
}

.faq-item {
    border-bottom: 0.5px solid rgba(20,31,40,.065);
    opacity: 0;
    transform: translateY(16px)
}

    .faq-item:first-child {
        border-top: 0.5px solid rgba(20,31,40,.065)
    }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(18px,2.2vw,26px) 0;
    cursor: pointer;
    user-select: none;
    list-style: none
}

    .faq-question::-webkit-details-marker {
        display: none
    }

.faq-q-text {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(15px,1.5vw,18px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dark);
    line-height: 1.3
}

.faq-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0.5px solid rgba(20,31,40,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .25s,border-color .25s,transform .35s
}

.faq-item[open] .faq-toggle {
    background: var(--gold);
    border-color: var(--gold);
    transform: rotate(45deg)
}

    .faq-item[open] .faq-toggle svg {
        stroke: var(--dark)
    }

.faq-answer {
    font-size: clamp(13px,1.25vw,15px);
    font-weight: 400;
    line-height: 1.72;
    color: rgba(20,31,40,.52);
    padding-bottom: clamp(16px,2vw,24px);
    max-width: 680px
}

/* ── CONTACT ── */
.section-contact {
    position: relative;
    padding: clamp(80px,10vw,140px) clamp(20px,5vw,80px);
    background: var(--light);
    overflow: hidden
}

.contact-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.contact-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px)
}

.contact-orb--1 {
    width: clamp(350px,45vw,600px);
    height: clamp(350px,45vw,600px);
    background: radial-gradient(circle,rgba(255,185,80,.06) 0%,transparent 65%);
    top: -10%;
    right: -5%
}

.contact-orb--2 {
    width: clamp(300px,38vw,520px);
    height: clamp(300px,38vw,520px);
    background: radial-gradient(circle,rgba(20,31,40,.04) 0%,transparent 65%);
    bottom: -10%;
    left: -5%
}

.contact-container {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.contact-heading {
    text-align: center;
    margin-bottom: clamp(40px,6vw,64px);
    opacity: 0;
    transform: translateY(20px)
}

.contact-pre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px
}

.contact-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(32px,4.5vw,58px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -.025em;
    color: var(--dark)
}

.contact-card {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 0.5px solid rgba(20,31,40,.065);
    border-radius: 28px;
    padding: clamp(32px,4vw,52px);
    box-shadow: 0 8px 48px rgba(20,31,40,.06),0 1px 0 rgba(255,255,255,.9) inset;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(32px,5vw,60px);
    opacity: 0;
    transform: translateY(24px)
}

.contact-intro {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.contact-intro__avatar {
    width: 100%;
    min-height: 130px;
    background: linear-gradient(135deg,rgba(20,31,40,.06) 0%,rgba(255,185,80,.06) 100%);
    border-radius: 18px;
    border: 0.5px solid rgba(20,31,40,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 1
}

    .contact-intro__avatar svg {
        width: 70%;
        height: 70%
    }

.contact-intro__greeting {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(16px,1.8vw,20px);
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -.01em
}

.contact-intro__role {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px
}

.contact-intro__desc {
    font-size: clamp(13px,1.2vw,14px);
    font-weight: 400;
    line-height: 1.7;
    color: rgba(20,31,40,.5)
}

.contact-form-wrap {
    display: flex;
    flex-direction: column
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: clamp(20px,2.5vw,28px);
    height: 100%
}

.form-row {
    display: grid;
    gap: clamp(16px,2vw,24px)
}

.form-row--2col {
    grid-template-columns: 1fr 1fr
}

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

.form-group--full {
    grid-column: 1/-1
}

.form-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--dark);
    opacity: .65
}

.form-optional {
    color: rgba(255,185,80,.7);
    font-weight: 400
}

.form-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(20,31,40,.1);
    background: transparent;
    padding: 8px 0;
    font-family: 'Inter',sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--dark);
    outline: none;
    transition: border-color .25s;
    resize: none
}

    .form-input::placeholder {
        color: rgba(20,31,40,.24)
    }

    .form-input:focus {
        border-bottom-color: var(--gold)
    }

.form-textarea {
    min-height: 72px
}

.form-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto
}

.form-actions__left {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.btn-attach {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    color: rgba(20,31,40,.45);
    border: 1px solid rgba(20,31,40,.1);
    padding: 9px 16px;
    border-radius: 100px;
    cursor: pointer;
    transition: background .2s,color .2s,border-color .2s
}

    .btn-attach:hover {
        background: rgba(20,31,40,.04);
        color: var(--dark);
        border-color: rgba(20,31,40,.18)
    }

.form-file-input {
    display: none
}

.form-file-note {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .04em;
    color: rgba(20,31,40,.26);
    text-transform: uppercase
}

.form-actions__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px
}

.form-privacy {
    font-size: 11px;
    color: rgba(20,31,40,.26)
}

.form-privacy-link {
    color: rgba(20,31,40,.4);
    text-decoration: underline;
    text-decoration-color: rgba(20,31,40,.14)
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dark);
    color: var(--light);
    font-family: 'Inter',sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    padding: 13px 26px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: background .25s,transform .2s,box-shadow .25s,color .2s;
    box-shadow: 0 5px 22px rgba(20,31,40,.16)
}

    .btn-submit:hover {
        background: var(--gold);
        color: var(--dark);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(255,185,80,.28)
    }

/* ── FOOTER ── */
.site-footer {
    background: var(--dark);
    padding: clamp(36px,5vh,60px) clamp(20px,5vw,80px) clamp(28px,4vh,44px);
    border-top: 0.5px solid rgba(246,248,255,.04);
    position: relative;
    overflow: hidden
}

    .site-footer::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%,rgba(255,185,80,.025) 0%,transparent 55%);
        pointer-events: none
    }

.footer-deco {
    position: absolute;
    bottom: 16px;
    right: clamp(20px,5vw,80px);
    pointer-events: none;
    opacity: .18
}

.footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: clamp(32px,4vh,48px);
    border-bottom: 0.5px solid rgba(246,248,255,.055);
    margin-bottom: clamp(24px,3vh,36px);
    flex-wrap: wrap
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--light);
    margin-bottom: 12px
}

    .footer-logo span {
        color: var(--gold)
    }

.footer-logo-mark {
    width: 36px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible
}

    .footer-logo-mark svg {
        width: 36px;
        height: 30px;
        overflow: visible
    }

.footer-tagline {
    font-size: 13px;
    font-weight: 400;
    color: rgba(246,248,255,.28);
    max-width: 260px;
    line-height: 1.65
}

.footer-cols {
    display: flex;
    gap: clamp(40px,6vw,80px);
    flex-wrap: wrap
}

.footer-col-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(246,248,255,.22);
    margin-bottom: 16px
}

.footer-col-links {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-link {
    font-size: 13px;
    font-weight: 400;
    color: rgba(246,248,255,.32);
    text-decoration: none;
    transition: color .2s
}

    .footer-link:hover {
        color: var(--gold)
    }

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 4px
}

.footer-social {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(246,248,255,.04);
    border: 0.5px solid rgba(246,248,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s,border-color .2s,color .2s;
    color: rgba(246,248,255,.38)
}

    .footer-social:hover {
        background: rgba(255,185,80,.1);
        border-color: rgba(255,185,80,.22);
        color: var(--gold)
    }

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

.footer-copy {
    font-size: 12px;
    color: rgba(246,248,255,.16);
    letter-spacing: .03em
}

.footer-closing {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(246,248,255,.14)
}

/* ══════════════════════════════════════════════════════
        SMM PRICING SECTION — Cinematic Dark · Gold System
        ══════════════════════════════════════════════════════ */

/* ── Section shell ── */
.section-pricing {
    position: relative;
    background: var(--dark-deep);
    padding: clamp(100px,13vw,170px) clamp(20px,5vw,80px);
    overflow: hidden;
}

/* ── Atmospheric background ── */
.pricing-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0
}

.pricing-noise {
    position: absolute;
    inset: 0;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    z-index: 0
}

.pricing-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.012) 1px,transparent 1px);
    background-size: 64px 64px;
    z-index: 2
}

.pricing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    will-change: transform
}

.pricing-orb--1 {
    width: clamp(600px,70vw,1000px);
    height: clamp(600px,70vw,1000px);
    background: radial-gradient(ellipse,rgba(255,185,80,.048) 0%,transparent 60%);
    top: -30%;
    right: -18%;
    animation: orbFloat 14s ease-in-out infinite alternate
}

.pricing-orb--2 {
    width: clamp(400px,50vw,720px);
    height: clamp(400px,50vw,720px);
    background: radial-gradient(ellipse,rgba(28,55,100,.07) 0%,transparent 65%);
    bottom: -18%;
    left: -10%;
    animation: orbFloat 18s ease-in-out infinite alternate-reverse
}

.pricing-orb--3 {
    width: clamp(280px,36vw,520px);
    height: clamp(280px,36vw,520px);
    background: radial-gradient(ellipse,rgba(255,185,80,.022) 0%,transparent 65%);
    bottom: 8%;
    right: 12%;
    animation: orbFloat 22s ease-in-out infinite alternate
}

.pricing-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%,transparent 25%,rgba(8,13,20,.55) 72%,rgba(5,9,15,.9) 100%);
    z-index: 3
}

/* ── Container ── */
.pricing-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 6
}

/* ── Section header ── */
.pricing-header {
    text-align: center;
    margin-bottom: clamp(48px,7vw,80px)
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(14px,2vh,22px);
    opacity: .88
}

    .pricing-eyebrow::before, .pricing-eyebrow::after {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--gold));
        opacity: .45;
        flex-shrink: 0
    }

    .pricing-eyebrow::after {
        transform: scaleX(-1)
    }

.pricing-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(40px,5.5vw,82px);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.032em;
    color: var(--light);
    margin-bottom: clamp(14px,2.2vh,22px)
}

    .pricing-headline em {
        font-style: normal;
        background: linear-gradient(125deg,#ffb950 0%,#ff9a30 45%,#ffcc70 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 300
    }

.pricing-sub {
    font-size: clamp(14px,1.45vw,17px);
    font-weight: 400;
    line-height: 1.82;
    color: rgba(246,248,255,.36);
    max-width: 520px;
    margin: 0 auto
}

/* ── Currency toggle ── */
.pricing-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: clamp(28px,4vw,44px) auto clamp(44px,6vw,72px);
    background: rgba(246,248,255,.04);
    border: 0.5px solid rgba(246,248,255,.09);
    border-radius: 100px;
    padding: 5px;
    width: fit-content;
    position: relative
}

    .pricing-toggle-wrap::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 100px;
        background: linear-gradient(135deg,rgba(255,185,80,.12),rgba(255,185,80,.04));
        pointer-events: none
    }

.ptoggle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(246,248,255,.38);
    padding: 10px 22px;
    border-radius: 100px;
    cursor: pointer;
    transition: color .28s;
    border: none;
    background: transparent;
    font-family: 'Inter',sans-serif;
    white-space: nowrap
}

    .ptoggle.active {
        color: var(--dark);
        background: var(--gold);
        box-shadow: 0 4px 20px rgba(255,185,80,.32)
    }

    .ptoggle:not(.active):hover {
        color: rgba(246,248,255,.68)
    }

.ptoggle__flag {
    font-size: 15px;
    line-height: 1
}

.ptoggle__badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(255,255,255,.22);
    color: inherit;
    padding: 2px 7px;
    border-radius: 100px;
    text-transform: uppercase
}

.ptoggle.active .ptoggle__badge {
    background: rgba(20,31,40,.18)
}

/* ── Plans group visibility ── */
.pricing-panel {
    display: none
}

    .pricing-panel.active {
        display: block
    }

/* ── Plans grid ── */
.pricing-plans {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(14px,1.8vw,20px);
    margin-bottom: clamp(44px,6vw,72px);
    align-items: start
}

/* ── Plan card — base ── */
.plan {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .38s cubic-bezier(0.34,1.4,0.64,1),box-shadow .38s;
    cursor: default;
}

    .plan:hover {
        transform: translateY(-10px)
    }

/* Variants */
.plan--basic {
    background: linear-gradient(168deg,rgba(20,31,40,.95) 0%,rgba(14,22,32,.98) 100%);
    border: 0.5px solid rgba(246,248,255,.08);
    box-shadow: 0 6px 36px rgba(0,0,0,.32)
}

    .plan--basic:hover {
        box-shadow: 0 22px 60px rgba(0,0,0,.42),0 0 0 1px rgba(246,248,255,.1)
    }

.plan--growth {
    background: linear-gradient(168deg,rgba(22,34,46,.98) 0%,rgba(12,20,30,1) 100%);
    border: 0.5px solid rgba(255,185,80,.32);
    box-shadow: 0 14px 56px rgba(255,185,80,.12),0 4px 24px rgba(0,0,0,.45);
    transform: translateY(-8px) scale(1.018);
}

    .plan--growth:hover {
        transform: translateY(-18px) scale(1.018);
        box-shadow: 0 28px 90px rgba(255,185,80,.2),0 4px 28px rgba(0,0,0,.55)
    }

.plan--pro {
    background: linear-gradient(168deg,rgba(20,31,40,.95) 0%,rgba(14,22,32,.98) 100%);
    border: 0.5px solid rgba(246,248,255,.08);
    box-shadow: 0 6px 36px rgba(0,0,0,.32)
}

    .plan--pro:hover {
        box-shadow: 0 22px 60px rgba(0,0,0,.42),0 0 0 1px rgba(246,248,255,.1)
    }

/* Glow top edge for featured card */
.plan__topglow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,transparent 0%,rgba(255,185,80,.45) 50%,transparent 100%);
    opacity: 0
}

.plan--growth .plan__topglow {
    opacity: 1
}

.plan__innerglow {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.plan--growth .plan__innerglow {
    background: radial-gradient(ellipse at 50% -10%,rgba(255,185,80,.065) 0%,transparent 55%)
}

/* Badge */
.plan__badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(125deg,#ffb950,#ff9030);
    color: var(--dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    z-index: 8;
    box-shadow: 0 4px 16px rgba(255,185,80,.35);
}

/* Plan inner padding */
.plan__inner {
    padding: clamp(26px,3.2vw,38px);
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 3
}

/* Plan header area */
.plan__tier {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(246,248,255,.28);
    margin-bottom: 6px
}

.plan--growth .plan__tier {
    color: rgba(255,185,80,.55)
}

.plan__name {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(22px,2.6vw,32px);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--light);
    margin-bottom: 5px;
    line-height: 1
}

.plan__tagline {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(246,248,255,.36);
    line-height: 1.62;
    margin-bottom: clamp(20px,2.8vw,28px);
    min-height: 38px
}

.plan--growth .plan__tagline {
    color: rgba(246,248,255,.5)
}

/* Price block */
.plan__price-block {
    margin-bottom: clamp(20px,2.8vw,28px);
    padding-bottom: clamp(20px,2.8vw,28px);
    border-bottom: 0.5px solid rgba(246,248,255,.07)
}

.plan--growth .plan__price-block {
    border-bottom-color: rgba(255,185,80,.14)
}

.plan__price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 5px
}

.plan__currency {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(18px,2vw,24px);
    font-weight: 600;
    color: rgba(246,248,255,.45);
    margin-top: 8px;
    align-self: flex-start
}

.plan--growth .plan__currency {
    color: rgba(255,185,80,.65)
}

.plan__amount {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(42px,5vw,64px);
    font-weight: 800;
    letter-spacing: -.05em;
    color: var(--light);
    line-height: .95
}

.plan--growth .plan__amount {
    background: linear-gradient(125deg,#ffb950 0%,#ff8820 55%,#ffd070 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.plan__period {
    font-size: 12px;
    font-weight: 400;
    color: rgba(246,248,255,.3);
    align-self: flex-end;
    margin-bottom: 6px;
    letter-spacing: .02em
}

.plan__price-note {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(246,248,255,.3);
    margin-bottom: 8px
}

.plan__contract {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(246,248,255,.45);
    background: rgba(246,248,255,.05);
    border: 0.5px solid rgba(246,248,255,.08);
    border-radius: 100px;
    padding: 4px 12px
}

.plan--growth .plan__contract {
    color: rgba(255,185,80,.7);
    background: rgba(255,185,80,.07);
    border-color: rgba(255,185,80,.16)
}

/* Features list */
.plan__features {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: clamp(24px,3.5vw,34px);
    flex: 1
}

.plan__section-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(246,248,255,.2);
    margin-top: 14px;
    margin-bottom: 3px;
    padding-left: 2px
}

.plan--growth .plan__section-label {
    color: rgba(255,185,80,.32)
}

.feat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(12px,1.18vw,13.5px);
    font-weight: 400;
    color: rgba(246,248,255,.52);
    line-height: 1.52
}

.feat--hi {
    color: rgba(246,248,255,.84)
}

.feat--dim {
    color: rgba(246,248,255,.28)
}

.plan--growth .feat--hi {
    color: #fff
}

.feat__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.feat__dot--yes {
    background: rgba(80,200,110,.1);
    border: 0.5px solid rgba(80,200,110,.22)
}

    .feat__dot--yes svg {
        color: rgba(110,220,130,.9)
    }

.feat__dot--no {
    background: rgba(246,248,255,.04);
    border: 0.5px solid rgba(246,248,255,.06)
}

    .feat__dot--no svg {
        color: rgba(246,248,255,.2)
    }

.feat__dot--gold {
    background: rgba(255,185,80,.1);
    border: 0.5px solid rgba(255,185,80,.22)
}

    .feat__dot--gold svg {
        color: var(--gold)
    }

.feat__dot--info {
    background: rgba(100,160,255,.08);
    border: 0.5px solid rgba(100,160,255,.16)
}

    .feat__dot--info svg {
        color: rgba(120,175,255,.7)
    }

/* Budget pill inside feature */
.feat__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,185,80,.08);
    border: 0.5px solid rgba(255,185,80,.18);
    border-radius: 100px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    margin-left: 4px
}

/* Plan CTA */
.plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px 26px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .28s cubic-bezier(0.34,1.4,0.64,1);
    cursor: pointer;
    border: none;
    font-family: 'Inter',sans-serif;
}

.plan__cta--outline {
    background: transparent;
    color: rgba(246,248,255,.55);
    border: 0.5px solid rgba(246,248,255,.13);
}

    .plan__cta--outline:hover {
        background: rgba(246,248,255,.06);
        color: var(--light);
        border-color: rgba(246,248,255,.25);
        transform: translateY(-2px);
    }

.plan__cta--gold {
    background: linear-gradient(125deg,#ffb950,#ff8820);
    color: var(--dark-deep);
    box-shadow: 0 8px 32px rgba(255,185,80,.3);
}

    .plan__cta--gold:hover {
        background: linear-gradient(125deg,#ffd070,#ffb950);
        transform: translateY(-3px);
        box-shadow: 0 14px 44px rgba(255,185,80,.42);
    }

.plan__cta svg {
    transition: transform .22s
}

.plan__cta:hover svg {
    transform: translateX(3px)
}

/* ── Website plans (3-col, always shown) ── */
.pricing-web-title {
    text-align: center;
    margin-bottom: clamp(36px,5vw,56px);
}

    .pricing-web-title h3 {
        font-family: 'Bricolage Grotesque',sans-serif;
        font-size: clamp(28px,3.5vw,48px);
        font-weight: 700;
        letter-spacing: -.025em;
        color: var(--light);
        margin-bottom: 6px;
    }

    .pricing-web-title p {
        font-size: 13.5px;
        font-weight: 400;
        color: rgba(246,248,255,.35);
        max-width: 440px;
        margin: 0 auto
    }

/* ── What's Included strip ── */
.pricing-included {
    background: rgba(255,185,80,.04);
    border: 0.5px solid rgba(255,185,80,.12);
    border-radius: 20px;
    padding: clamp(22px,3vw,32px) clamp(24px,3.5vw,44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(44px,6vw,72px);
}

.pricing-included__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,185,80,.55);
    margin-bottom: 3px;
}

.pricing-included__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(14px,1.7vw,18px);
    font-weight: 700;
    color: var(--light);
}

.pricing-included__items {
    display: flex;
    gap: clamp(12px,2vw,28px);
    flex-wrap: wrap
}

.pricing-included__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(246,248,255,.48);
}

    .pricing-included__item svg {
        color: var(--gold);
        flex-shrink: 0
    }

    .pricing-included__item strong {
        color: rgba(246,248,255,.8);
        font-weight: 600
    }

/* ── Bottom assurance row ── */
.pricing-assurance {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(12px,1.8vw,20px);
    margin-top: clamp(44px,6vw,72px);
}

.assurance-card {
    background: rgba(246,248,255,.02);
    border: 0.5px solid rgba(246,248,255,.06);
    border-radius: 20px;
    padding: clamp(20px,2.5vw,28px);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background .28s,border-color .28s;
}

    .assurance-card:hover {
        background: rgba(255,185,80,.03);
        border-color: rgba(255,185,80,.1)
    }

.assurance-card__icon {
    width: 38px;
    height: 38px;
    background: rgba(255,185,80,.07);
    border: 0.5px solid rgba(255,185,80,.16);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.assurance-card__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(14px,1.5vw,16px);
    font-weight: 700;
    color: var(--light);
    margin-bottom: 4px;
    letter-spacing: -.01em;
}

.assurance-card__desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(246,248,255,.33);
    line-height: 1.68
}

/* ── Responsive ── */
@media(max-width:1060px) {
    .pricing-plans {
        grid-template-columns: repeat(3,1fr);
        gap: 10px
    }

    .plan--growth {
        transform: translateY(-4px) scale(1.01)
    }
}

@media(max-width:820px) {
    .pricing-plans {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto
    }

    .plan--growth {
        transform: none
    }

    .pricing-assurance {
        grid-template-columns: 1fr 1fr
    }

    .pricing-included {
        flex-direction: column;
        align-items: flex-start
    }
}
/* ══════════════════════════════════════════════════
        BRAND POSITIONING STATEMENT SECTION
        ══════════════════════════════════════════════════ */
.section-positioning {
    position: relative;
    background: #0c1218;
    overflow: hidden;
    padding: clamp(80px,11vw,140px) clamp(24px,6vw,100px);
}

.pos-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.pos-bg__grain {
    position: absolute;
    inset: 0;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px
}

.pos-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px)
}

.pos-bg__orb--1 {
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(ellipse,rgba(255,185,80,.04) 0%,transparent 60%);
    top: -20%;
    left: -10%
}

.pos-bg__orb--2 {
    width: 50vw;
    height: 50vw;
    max-width: 650px;
    max-height: 650px;
    background: radial-gradient(ellipse,rgba(20,40,80,.08) 0%,transparent 65%);
    bottom: -15%;
    right: -8%
}

.pos-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

/* The giant italic quote */
.pos-quote-wrap {
    margin-bottom: clamp(32px,5vw,56px)
}

.pos-quote {
    font-family: 'Cormorant Garamond','Cormorant',Georgia,serif;
    font-size: clamp(28px,4.2vw,64px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: rgba(246,248,255,.82);
    max-width: 1100px;
}

.pos-quote__mark {
    color: rgba(246,248,255,.18);
    font-size: 1.1em
}

.pos-quote em {
    font-style: italic;
    color: var(--gold);
    font-weight: 400
}

.pos-source {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(246,248,255,.28);
    margin-bottom: clamp(36px,5vw,52px);
}

    .pos-source::before {
        content: '—';
        color: rgba(246,248,255,.2)
    }

/* Brand DNA pills */
.pos-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.pos-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(246,248,255,.55);
    background: rgba(246,248,255,.04);
    border: 0.5px solid rgba(246,248,255,.1);
    border-radius: 100px;
    padding: 8px 16px;
    transition: background .25s,border-color .25s,color .25s;
}

    .pos-pill:hover {
        background: rgba(255,185,80,.07);
        border-color: rgba(255,185,80,.2);
        color: rgba(246,248,255,.82)
    }

.pos-pill__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .6;
    flex-shrink: 0
}

/* ══════════════════════════════════════════════════
        CLIENTS SECTION — Dark water aquarium with fish
        ══════════════════════════════════════════════════ */
.section-clients {
    position: relative;
    background: #070d14;
    overflow: hidden;
    padding: clamp(80px,11vw,130px) clamp(24px,6vw,100px);
    min-height: 420px;
}
/* Canvas water background */
#clients-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.clients-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(7,13,20,.6) 0%,rgba(7,13,20,.2) 40%,rgba(7,13,20,.2) 60%,rgba(7,13,20,.7) 100%);
    z-index: 1;
    pointer-events: none
}

.clients-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.clients-header {
    text-align: center;
    margin-bottom: clamp(44px,6vw,72px)
}

.clients-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,185,80,.7);
    margin-bottom: 14px
}

    .clients-eyebrow::before, .clients-eyebrow::after {
        content: '';
        display: block;
        width: 22px;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(255,185,80,.4));
        flex-shrink: 0
    }

    .clients-eyebrow::after {
        transform: scaleX(-1)
    }

.clients-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(28px,3.5vw,48px);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--light);
    margin-bottom: 8px
}

.clients-sub {
    font-size: 14px;
    color: rgba(246,248,255,.35);
    font-weight: 400
}

/* ══════════════════════════════════════════════════
        CLIENTS LOGO — Sealed gold energy orb
        Toei-inspired ki aura, fully contained, gold/amber only.
        Everything is clipped to a perfect circle so no stray
        particles or background colour can leak around the mark.
        ══════════════════════════════════════════════════ */
.clients-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(48px,7vw,80px);
    position: relative;
}

.clients-logo-stage {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ambient halo — soft gold bleed, sits OUTSIDE the sealed orb */
.clients-logo-aura {
    position: absolute;
    inset: -46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,176,70,.22) 0%, rgba(255,140,30,.09) 45%, transparent 72%);
    filter: blur(4px);
    animation: auraPulse 4.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes auraPulse {
    0%,100% {
        opacity: .6;
        transform: scale(1)
    }

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

/* Energy rings — a constant thin gold band with a brighter comet sweeping it */
.clients-logo-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255,185,80,.14) 0deg, rgba(255,185,80,.14) 250deg, rgba(255,200,90,.85) 300deg, rgba(255,228,160,.95) 322deg, rgba(255,200,90,.85) 344deg, rgba(255,185,80,.14) 360deg);
    -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
    animation: ringSpin 7s linear infinite;
    pointer-events: none;
    z-index: 3;
}

.clients-logo-ring--outer {
    inset: -23px;
    opacity: .4;
    animation: ringSpin 13s linear infinite reverse;
    background: conic-gradient(from 110deg, rgba(255,180,80,.08) 0deg, rgba(255,180,80,.08) 270deg, rgba(255,180,80,.6) 320deg, rgba(255,214,140,.85) 345deg, rgba(255,180,80,.08) 360deg);
    -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg)
    }
}

/* The sealed sphere — every effect inside is clipped to a circle */
.clients-logo-sphere {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255,185,80,.14), inset 0 0 38px rgba(255,140,30,.14), 0 0 0 1px rgba(255,185,80,.06);
}

/* Dark void base */
.clients-logo-orb {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 42% 36%, rgba(255,175,70,.10) 0%, rgba(13,23,33,.97) 55%, rgba(6,11,18,1) 100%);
}

/* Ember canvas — confined to the sphere, drawn by JS */
#logo-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

/* The M logo itself */
.clients-logo-m {
    position: relative;
    z-index: 4;
    width: 128px;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mPulse 2.8s ease-in-out infinite;
}

    .clients-logo-m svg {
        width: 100%;
        height: 100%;
        overflow: visible
    }

/* M breathes — Toei style ki pulse */
@keyframes mPulse {
    0%,100% {
        filter: drop-shadow(0 0 8px rgba(255,185,80,.55)) drop-shadow(0 0 22px rgba(255,140,30,.25));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(255,185,80,.9)) drop-shadow(0 0 42px rgba(255,120,20,.45)) drop-shadow(0 0 70px rgba(200,100,10,.18));
        transform: scale(1.025);
    }
}

/* Client logos row */
.clients-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(24px,4vw,56px)
}

.client-item {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .38;
    transition: opacity .35s,transform .35s,filter .35s;
    filter: grayscale(1) brightness(1.2);
    cursor: default;
}

    .client-item:hover {
        opacity: .85;
        filter: grayscale(0) brightness(1.4);
        transform: translateY(-3px)
    }

.client-name {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(13px,1.5vw,18px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(246,248,255,.75);
    white-space: nowrap;
}

.client-name--styled {
    font-style: italic;
    letter-spacing: .02em
}

/* ══════════════════════════════════════════════════
        SEO HIDDEN KEYWORDS (visually hidden, SEO readable)
        ══════════════════════════════════════════════════ */
.seo-keywords {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── RESPONSIVE additions ── */
@media(max-width:768px) {
    .pos-quote {
        font-size: clamp(22px,6vw,34px)
    }

    .clients-logos {
        gap: 24px 32px
    }

    .clients-logo-stage {
        width: 180px;
        height: 180px
    }

    .clients-logo-m {
        width: 96px;
        height: 80px
    }

    .pricing-toggle-wrap {
        width: 100%;
        max-width: 320px
    }

    .ptoggle {
        flex: 1;
        justify-content: center
    }

    .process-steps {
        grid-template-columns: 1fr
    }

    .form-row--2col {
        grid-template-columns: 1fr
    }

    .form-actions {
        flex-direction: column;
        align-items: flex-start
    }

    .form-actions__right {
        align-items: flex-start
    }

    .footer-top {
        flex-direction: column
    }

    .contact-intro {
        flex-direction: column
    }
}

@media(max-width:960px) {
    .cp-header {
        grid-template-columns: 1fr;
        gap: clamp(24px,4vh,36px)
    }

    .cp-desc {
        max-width: 100%
    }

    .cp-cards {
        grid-template-columns: repeat(2,1fr)
    }

    .cp-card {
        aspect-ratio: 3/4
    }

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

    .tcard--tall {
        grid-row: span 1
    }
}

@media(max-width:768px) {
    .nav__menu {
        display: none
    }

    .nav__cta {
        display: none
    }

    .nav__burger {
        display: flex
    }

    .nav {
        padding: 9px 14px;
        border-radius: 18px
    }

        .nav.nav--open .nav__menu {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            right: 0;
            background: rgba(246,248,255,.97);
            backdrop-filter: blur(20px);
            border: 0.5px solid rgba(20,31,40,.06);
            border-radius: 18px;
            padding: 18px;
            gap: 6px
        }

        .nav.nav--open .nav__link {
            font-size: 15px;
            padding: 10px 0;
            opacity: 1;
            border-bottom: 0.5px solid rgba(20,31,40,.05)
        }

            .nav.nav--open .nav__link:last-child {
                border-bottom: none
            }

    .nav__burger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg)
    }

    .nav__burger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0
    }

    .nav__burger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg)
    }

    .hero__deco, .cp-deco, .sv-deco, .testi-deco, .proc-deco, .accent {
        display: none
    }

    .hero__grain {
        opacity: .035
    }

    .hero__headline {
        font-size: clamp(44px,11.5vw,72px);
        letter-spacing: -.025em
    }

    .hero__proof {
        flex-direction: column;
        gap: 14px
    }

    .proof__divider {
        width: 32px;
        height: 1px
    }

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

    .sv-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px
    }

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

    .process-steps {
        grid-template-columns: repeat(2,1fr)
    }

    #proc-1, #proc-2, #proc-3, #proc-4 {
        padding-bottom: 0
    }

    .contact-card {
        grid-template-columns: 1fr
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    :root {
        --shape-size: 150px;
        --logo-size: 85px
    }
}

@media(max-width:480px) {
    .cp-cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .cp-cards {
        grid-template-columns: 1fr 1fr
    }
}



/* ══════════════════════════════════════════
   PRICING SECTION — Dark cinematic, gold accents
   ══════════════════════════════════════════ */
.section-pricing {
    position: relative;
    background: var(--dark);
    padding: clamp(90px,12vw,160px) clamp(20px,5vw,80px);
    overflow: hidden;
}

/* Background layers */
.pricing-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.pricing-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,185,80,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,185,80,.014) 1px,transparent 1px);
    background-size: 56px 56px;
    z-index: 1
}

.pricing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px)
}

.pricing-orb--1 {
    width: clamp(500px,65vw,900px);
    height: clamp(500px,65vw,900px);
    background: radial-gradient(ellipse,rgba(255,185,80,.055) 0%,transparent 62%);
    top: -25%;
    right: -15%
}

.pricing-orb--2 {
    width: clamp(350px,45vw,650px);
    height: clamp(350px,45vw,650px);
    background: radial-gradient(ellipse,rgba(30,60,100,.08) 0%,transparent 65%);
    bottom: -15%;
    left: -8%
}

.pricing-orb--3 {
    width: clamp(250px,32vw,480px);
    height: clamp(250px,32vw,480px);
    background: radial-gradient(ellipse,rgba(255,185,80,.025) 0%,transparent 65%);
    bottom: 10%;
    right: 5%
}

/* Vignette overlay */
.pricing-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(10,16,22,.6) 80%,rgba(7,11,17,.88) 100%);
    z-index: 2
}

/* Container */
.pricing-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 5
}

/* Header */
.pricing-header {
    text-align: center;
    margin-bottom: clamp(56px,8vw,96px)
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: clamp(16px,2vh,24px)
}

    .pricing-eyebrow::before, .pricing-eyebrow::after {
        content: '';
        display: block;
        width: 24px;
        height: 1px;
        background: var(--gold);
        opacity: .5;
        flex-shrink: 0
    }

.pricing-headline {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(38px,5.2vw,78px);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--light);
    margin-bottom: clamp(16px,2.5vh,24px)
}

    .pricing-headline em {
        font-style: normal;
        background: linear-gradient(130deg,#ffb950 0%,#ff8c42 55%,#ffb950 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 300
    }

.pricing-sub {
    font-size: clamp(14px,1.4vw,17px);
    font-weight: 350;
    line-height: 1.78;
    color: rgba(246,248,255,.38);
    max-width: 500px;
    margin: 0 auto clamp(24px,3.5vh,36px)
}

/* Offer badge */
.pricing-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,185,80,.08);
    border: 0.5px solid rgba(255,185,80,.25);
    border-radius: 100px;
    padding: 9px 18px;
    margin-bottom: clamp(40px,6vw,72px)
}

.pricing-offer-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: dotPulse 2.2s ease-in-out infinite;
    flex-shrink: 0
}

.pricing-offer-badge__text {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(255,185,80,.85);
    text-transform: uppercase
}

.pricing-offer-badge__tag {
    background: var(--gold);
    color: var(--dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    white-space: nowrap
}

/* Plans grid */
.pricing-plans {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(14px,1.8vw,22px);
    margin-bottom: clamp(48px,7vw,80px);
    align-items: start
}

/* Plan card base */
.plan {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(0.34,1.56,0.64,1),box-shadow .35s
}

    .plan:hover {
        transform: translateY(-8px)
    }

/* Plan variants */
.plan--starter {
    background: rgba(246,248,255,.03);
    border: 0.5px solid rgba(246,248,255,.08);
    box-shadow: 0 8px 40px rgba(0,0,0,.25)
}

    .plan--starter:hover {
        box-shadow: 0 20px 60px rgba(0,0,0,.35),0 0 0 1px rgba(246,248,255,.1)
    }

.plan--pro {
    background: linear-gradient(160deg,rgba(20,31,40,1) 0%,rgba(12,22,32,.98) 100%);
    border: 0.5px solid rgba(255,185,80,.3);
    box-shadow: 0 12px 50px rgba(255,185,80,.1),0 4px 20px rgba(0,0,0,.4);
    transform: translateY(-6px) scale(1.015)
}

    .plan--pro:hover {
        transform: translateY(-14px) scale(1.015);
        box-shadow: 0 24px 80px rgba(255,185,80,.18),0 4px 24px rgba(0,0,0,.5)
    }

.plan--enterprise {
    background: rgba(246,248,255,.03);
    border: 0.5px solid rgba(246,248,255,.08);
    box-shadow: 0 8px 40px rgba(0,0,0,.25)
}

    .plan--enterprise:hover {
        box-shadow: 0 20px 60px rgba(0,0,0,.35),0 0 0 1px rgba(246,248,255,.1)
    }

/* Pro glow ring */
.plan__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s
}

.plan--pro .plan__glow {
    background: radial-gradient(ellipse at 50% 0%,rgba(255,185,80,.07) 0%,transparent 60%);
    opacity: 1
}

.plan--pro:hover .plan__glow {
    opacity: 1.6
}

/* Popular badge */
.plan__badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--gold);
    color: var(--dark);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    z-index: 5
}

/* Plan inner */
.plan__inner {
    padding: clamp(24px,3.2vw,36px);
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2
}

/* Plan top */
.plan__tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(246,248,255,.3);
    margin-bottom: 8px
}

.plan--pro .plan__tag {
    color: rgba(255,185,80,.6)
}

.plan__name {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(22px,2.5vw,30px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--light);
    margin-bottom: 4px
}

.plan__tagline {
    font-size: 12.5px;
    font-weight: 350;
    color: rgba(246,248,255,.35);
    line-height: 1.6;
    margin-bottom: clamp(18px,2.5vw,26px);
    min-height: 40px
}

.plan--pro .plan__tagline {
    color: rgba(246,248,255,.48)
}

/* Pricing numbers */
.plan__price-wrap {
    margin-bottom: clamp(20px,3vw,28px);
    padding-bottom: clamp(20px,3vw,28px);
    border-bottom: 0.5px solid rgba(246,248,255,.07)
}

.plan--pro .plan__price-wrap {
    border-bottom-color: rgba(255,185,80,.12)
}

.plan__price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px
}

.plan__price-old {
    font-size: clamp(14px,1.5vw,17px);
    font-weight: 400;
    color: rgba(246,248,255,.22);
    text-decoration: line-through;
    text-decoration-color: rgba(255,185,80,.4)
}

.plan__price-curr {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(34px,4vw,54px);
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--light);
    line-height: 1
}

.plan--pro .plan__price-curr {
    background: linear-gradient(130deg,#ffb950 0%,#ff8c42 60%,#ffb950 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.plan__price-note {
    font-size: 11px;
    font-weight: 400;
    color: rgba(246,248,255,.28);
    letter-spacing: .02em
}

.plan__savings {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(100,220,120,.8);
    background: rgba(80,200,100,.08);
    border: 0.5px solid rgba(80,200,120,.18);
    border-radius: 100px;
    padding: 3px 10px
}

.plan--pro .plan__savings {
    color: var(--gold);
    background: rgba(255,185,80,.08);
    border-color: rgba(255,185,80,.2)
}

/* Features */
.plan__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: clamp(24px,3.5vw,34px);
    flex: 1
}

.plan__section-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(246,248,255,.2);
    margin-top: 14px;
    margin-bottom: 2px
}

.plan--pro .plan__section-title {
    color: rgba(255,185,80,.3)
}

.plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(12.5px,1.2vw,13.5px);
    font-weight: 350;
    color: rgba(246,248,255,.55);
    line-height: 1.5
}

.plan__feature--highlight {
    color: rgba(246,248,255,.82)
}

.plan--pro .plan__feature--highlight {
    color: var(--light)
}

.plan__feature-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.plan__feature-icon--check {
    background: rgba(80,200,100,.12);
    border: 0.5px solid rgba(80,200,120,.2)
}

    .plan__feature-icon--check svg {
        color: rgba(100,220,120,.85)
    }

.plan--pro .plan__feature-icon--check {
    background: rgba(255,185,80,.1);
    border-color: rgba(255,185,80,.22)
}

    .plan--pro .plan__feature-icon--check svg {
        color: var(--gold)
    }

.plan__feature-icon--cross {
    background: rgba(246,248,255,.04);
    border: 0.5px solid rgba(246,248,255,.06)
}

    .plan__feature-icon--cross svg {
        color: rgba(246,248,255,.2)
    }

/* CTA button */
.plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .28s,color .28s,transform .22s,box-shadow .28s;
    cursor: pointer;
    border: none;
    font-family: 'Inter',sans-serif
}

.plan__cta--outline {
    background: transparent;
    color: rgba(246,248,255,.6);
    border: 0.5px solid rgba(246,248,255,.12)
}

    .plan__cta--outline:hover {
        background: rgba(246,248,255,.05);
        color: var(--light);
        border-color: rgba(246,248,255,.22);
        transform: translateY(-1px)
    }

.plan__cta--gold {
    background: var(--gold);
    color: var(--dark);
    box-shadow: 0 6px 28px rgba(255,185,80,.28)
}

    .plan__cta--gold:hover {
        background: var(--light);
        transform: translateY(-2px);
        box-shadow: 0 10px 40px rgba(255,185,80,.35)
    }

/* Addons row */
.pricing-addons {
    margin-bottom: clamp(48px,7vw,80px)
}

.pricing-addons__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(18px,2.2vw,26px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--light);
    margin-bottom: 6px;
    text-align: center
}

.pricing-addons__sub {
    font-size: 13px;
    font-weight: 350;
    color: rgba(246,248,255,.3);
    text-align: center;
    margin-bottom: clamp(28px,4vw,44px)
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(10px,1.4vw,16px)
}

.addon {
    background: rgba(246,248,255,.025);
    border: 0.5px solid rgba(246,248,255,.07);
    border-radius: 18px;
    padding: clamp(18px,2.4vw,26px);
    transition: background .28s,border-color .28s,transform .3s
}

    .addon:hover {
        background: rgba(255,185,80,.04);
        border-color: rgba(255,185,80,.15);
        transform: translateY(-4px)
    }

.addon__icon {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1
}

.addon__name {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(14px,1.5vw,16px);
    font-weight: 700;
    color: var(--light);
    letter-spacing: -.01em;
    margin-bottom: 5px
}

.addon__desc {
    font-size: 12px;
    font-weight: 350;
    color: rgba(246,248,255,.35);
    line-height: 1.6;
    margin-bottom: 12px
}

.addon__price {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: .02em
}

/* Hosting note strip */
.pricing-hosting {
    background: rgba(255,185,80,.05);
    border: 0.5px solid rgba(255,185,80,.14);
    border-radius: 18px;
    padding: clamp(20px,2.8vw,30px) clamp(24px,3.5vw,40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(40px,6vw,64px)
}

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

.pricing-hosting__icon {
    width: 40px;
    height: 40px;
    background: rgba(255,185,80,.08);
    border: 0.5px solid rgba(255,185,80,.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.pricing-hosting__text {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.pricing-hosting__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,185,80,.6)
}

.pricing-hosting__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(15px,1.7vw,19px);
    font-weight: 700;
    color: var(--light);
    letter-spacing: -.01em
}

.pricing-hosting__items {
    display: flex;
    gap: clamp(16px,2.5vw,32px);
    flex-wrap: wrap
}

.pricing-hosting__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(246,248,255,.5)
}

    .pricing-hosting__item svg {
        color: var(--gold);
        flex-shrink: 0
    }

    .pricing-hosting__item strong {
        color: rgba(246,248,255,.82);
        font-weight: 600
    }

/* Assurance cards */
.pricing-assurance {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(14px,2vw,22px)
}

.assurance-card {
    background: rgba(246,248,255,.02);
    border: 0.5px solid rgba(246,248,255,.06);
    border-radius: 18px;
    padding: clamp(20px,2.5vw,28px);
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.assurance-card__icon {
    width: 36px;
    height: 36px;
    background: rgba(255,185,80,.07);
    border: 0.5px solid rgba(255,185,80,.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.assurance-card__body {
}

.assurance-card__title {
    font-family: 'Bricolage Grotesque',sans-serif;
    font-size: clamp(14px,1.5vw,16px);
    font-weight: 700;
    color: var(--light);
    margin-bottom: 4px;
    letter-spacing: -.01em
}

.assurance-card__desc {
    font-size: 12px;
    font-weight: 350;
    color: rgba(246,248,255,.35);
    line-height: 1.65
}

/* dotPulse keyframe — used by .pricing-offer-badge__dot */
@keyframes dotPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .35;
        transform: scale(0.6)
    }
}

/* Responsive pricing */
@media(max-width:1024px) {
    .pricing-plans {
        grid-template-columns: repeat(3,1fr);
        gap: 12px
    }

    .plan--pro {
        transform: translateY(-4px) scale(1.01)
    }

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

@media(max-width:768px) {
    .pricing-plans {
        grid-template-columns: 1fr
    }

    .plan--pro {
        transform: none
    }

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

    .pricing-assurance {
        grid-template-columns: 1fr
    }

    .pricing-hosting {
        flex-direction: column;
        align-items: flex-start
    }
}

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



/* ── scoped reset ── */
.mrc *, .mrc *::before, .mrc *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
/* ── tokens ── */
.mrc {
  --dark:      #141f28;
  --deep:      #0c1620;
  --mid:       rgba(20,31,40,.75);
  --gold:      #ffb950;
  --gold-dim:  rgba(255,185,80,.15);
  --gold-glow: rgba(255,185,80,.07);
  --light:     #f6f8ff;
  --gray:      rgba(246,248,255,.42);
  --gray-dim:  rgba(246,248,255,.22);
  --border:    rgba(246,248,255,.08);
  --border-g:  rgba(255,185,80,.2);
  --green-c:   rgba(100,220,130,.85);
  --green-bg:  rgba(80,200,100,.09);
  --green-bd:  rgba(80,200,120,.2);
  font-family: 'Inter', sans-serif;
  background: var(--deep);
  color: var(--light);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
 
/* ── atmosphere ── */
.mrc__bg {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.mrc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,185,80,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,185,80,.012) 1px, transparent 1px);
  background-size: 56px 56px;
}
.mrc-orb {
  position: absolute; border-radius: 50%; filter: blur(110px);
}
.mrc-orb--1 {
  width: clamp(380px,52vw,700px); height: clamp(380px,52vw,700px);
  background: radial-gradient(ellipse, rgba(255,185,80,.048) 0%, transparent 62%);
  top: -20%; right: -12%;
}
.mrc-orb--2 {
  width: clamp(300px,40vw,560px); height: clamp(300px,40vw,560px);
  background: radial-gradient(ellipse, rgba(28,55,100,.07) 0%, transparent 65%);
  bottom: -18%; left: -8%;
}
.mrc-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(8,13,20,.52) 75%, rgba(5,9,15,.88) 100%);
}
 
/* ── layout ── */
.mrc__inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: clamp(72px,10vw,130px) clamp(20px,5vw,72px);
}
 
/* heading block */
.mrc__heading {
  text-align: center;
  margin-bottom: clamp(36px,5vw,60px);
}
.mrc__pre {
  font-size: 10.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(12px,1.8vh,18px); opacity: .9;
}
.mrc__pre::before, .mrc__pre::after {
  content: ''; display: block;
  width: 22px; height: 1px;
  background: var(--gold); opacity: .4; flex-shrink: 0;
}
.mrc__pre::after { transform: scaleX(-1); }
.mrc__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(34px,4.8vw,66px); font-weight: 700;
  line-height: .96; letter-spacing: -.03em; color: var(--light);
}
.mrc__title em {
  font-style: normal; font-weight: 300; color: rgba(255,185,80,.68);
}
 
/* card */
.mrc__card {
  background: rgba(20,31,40,.68);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: .5px solid var(--border);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 300px 1fr;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(255,255,255,.04) inset,
              0 20px 72px rgba(0,0,0,.44),
              0 0 0 .5px rgba(255,185,80,.06);
  position: relative;
}
/* gold top line */
.mrc__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,185,80,.45) 50%, transparent);
  z-index: 3;
}
 
/* ── LEFT: intro panel ── */
.mrc__intro {
  background: linear-gradient(168deg, rgba(14,22,32,.95) 0%, rgba(10,16,24,.98) 100%);
  border-right: .5px solid var(--border);
  padding: clamp(28px,3.5vw,44px);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
/* subtle inner glow */
.mrc__intro::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,185,80,.06) 0%, transparent 55%);
  pointer-events: none;
}
 
/* avatar */
.mrc__avatar-wrap {
  width: 100%; aspect-ratio: 1;
  max-width: 200px; margin: 0 auto clamp(20px,3vw,28px);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(20,31,40,.9) 0%, rgba(255,185,80,.06) 100%);
  border: .5px solid rgba(255,185,80,.12);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  flex-shrink: 0;
}
.mrc__avatar-wrap svg { width: 68%; height: 68%; opacity: .45; }
/* ambient glow behind avatar */
.mrc__avatar-wrap::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,185,80,.1) 0%, transparent 60%);
  pointer-events: none;
}
 
.mrc__intro-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(17px,1.9vw,22px); font-weight: 700;
  letter-spacing: -.015em; color: var(--light);
  margin-bottom: 4px; position: relative;
}
.mrc__intro-role {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); opacity: .8;
  margin-bottom: clamp(12px,2vw,18px); position: relative;
}
.mrc__intro-desc {
  font-size: 13px; font-weight: 400; line-height: 1.72;
  color: var(--gray); position: relative;
  margin-bottom: clamp(20px,3vw,28px);
}
 
/* trust pills */
.mrc__trust {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: auto; position: relative;
}
.mrc__trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 400; color: rgba(246,248,255,.46);
}
.mrc__trust-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-bg); border: .5px solid var(--green-bd);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mrc__trust-dot svg { color: var(--green-c); }
 
/* scarcity */
.mrc__scarcity {
  display: flex; align-items: center; gap: 7px;
  margin-top: clamp(16px,2vw,22px);
  padding: 9px 13px;
  background: rgba(255,185,80,.05);
  border: .5px solid rgba(255,185,80,.14);
  border-radius: 10px;
  font-size: 11px; font-weight: 500;
  color: rgba(246,248,255,.4);
  position: relative;
}
.mrc__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  animation: mrcPulse 2.2s ease-in-out infinite;
}
@keyframes mrcPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(.65); }
}
 
/* ── RIGHT: form ── */
.mrc__form-wrap {
  padding: clamp(28px,3.5vw,44px);
  display: flex; flex-direction: column;
}
.mrc__form {
  display: flex; flex-direction: column;
  gap: clamp(18px,2.4vw,24px); flex: 1;
}
 
.mrc__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px,2vw,20px);
}
.mrc__row--full { grid-template-columns: 1fr; }
 
.mrc__field { display: flex; flex-direction: column; gap: 6px; }
 
.mrc__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(246,248,255,.35);
}
.mrc__label span {
  color: rgba(255,185,80,.55); font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 10px;
}
 
.mrc__input,
.mrc__select,
.mrc__textarea {
  width: 100%;
  background: rgba(246,248,255,.04);
  border: none;
  border-bottom: 1px solid rgba(246,248,255,.1);
  padding: 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 400;
  color: var(--light);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.mrc__input::placeholder,
.mrc__textarea::placeholder { color: rgba(246,248,255,.2); }
.mrc__input:focus,
.mrc__select:focus,
.mrc__textarea:focus {
  border-bottom-color: var(--gold);
}
.mrc__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='rgba(246,248,255,.28)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 22px;
  cursor: pointer;
}
.mrc__select option { background: #141f28; color: var(--light); }
 
.mrc__textarea {
  resize: vertical; min-height: 82px; line-height: 1.65;
}
 
/* inline error */
.mrc__err {
  font-size: 10.5px; font-weight: 500;
  color: rgba(255,100,100,.75);
  display: none; margin-top: 2px;
}
.mrc__err.on { display: block; }
 
/* form footer */
.mrc__footer {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px;
  margin-top: clamp(6px,1vw,10px);
  flex-wrap: wrap;
}
.mrc__footer-left {
  display: flex; flex-direction: column; gap: 5px;
}
 
/* attach */
.mrc__attach-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: rgba(246,248,255,.38);
  border: .5px solid rgba(246,248,255,.1);
  padding: 8px 15px; border-radius: 100px;
  cursor: pointer; transition: all .22s;
}
.mrc__attach-label:hover {
  border-color: rgba(246,248,255,.22);
  color: rgba(246,248,255,.65);
  background: rgba(246,248,255,.03);
}
input[type="file"].mrc__file { display: none; }
.mrc__file-note {
  font-size: 10px; font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(246,248,255,.2);
}
.mrc__footer-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.mrc__privacy {
  font-size: 10.5px; color: rgba(246,248,255,.22);
}
.mrc__privacy a { color: rgba(246,248,255,.38); }
 
/* submit */
.mrc__submit {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dark);
  color: var(--light);
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  padding: 13px 28px; border-radius: 100px;
  border: none; cursor: pointer;
  transition: all .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 5px 22px rgba(20,31,40,.25);
  white-space: nowrap;
}
.mrc__submit:hover {
  background: var(--gold);
  color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255,185,80,.3);
}
.mrc__submit svg { transition: transform .22s; }
.mrc__submit:hover svg { transform: translateX(3px); }
.mrc__submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
/* ── SUCCESS ── */
.mrc__success {
  display: none;
  padding: clamp(44px,8vw,72px) clamp(24px,3.5vw,44px);
  text-align: center;
  animation: mrcFadeUp .45s cubic-bezier(.16,1,.3,1) both;
}
.mrc__success.on { display: flex; flex-direction: column; align-items: center; }
@keyframes mrcFadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.mrc__success-orb {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,185,80,.08); border: .5px solid rgba(255,185,80,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  animation: mrcGlow 3s ease-in-out infinite;
}
@keyframes mrcGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,185,80,.18); }
  50% { box-shadow: 0 0 0 14px rgba(255,185,80,0); }
}
.mrc__success-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,185,80,.07); border: .5px solid rgba(255,185,80,.2);
  border-radius: 100px; padding: 6px 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,185,80,.75);
  margin-bottom: 18px;
}
.mrc__success-h {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(20px,2.6vw,28px); font-weight: 700;
  letter-spacing: -.02em; color: var(--light);
  margin-bottom: 10px;
}
.mrc__success-p {
  font-size: 13.5px; font-weight: 400; line-height: 1.72;
  color: var(--gray); max-width: 360px; margin: 0 auto 28px;
}
.mrc__success-cal {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold); color: var(--dark);
  font-family: 'Inter', sans-serif; font-size: 12.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 30px; border-radius: 100px;
  text-decoration: none; border: none; cursor: pointer;
  transition: all .28s; box-shadow: 0 8px 28px rgba(255,185,80,.28);
}
.mrc__success-cal:hover {
  background: #ffd070; transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255,185,80,.4);
}
.mrc__success-note {
  margin-top: 12px; font-size: 11px;
  color: rgba(246,248,255,.22);
}
 
/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .mrc__card { grid-template-columns: 1fr; }
  .mrc__intro {
    border-right: none; border-bottom: .5px solid var(--border);
    flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  }
  .mrc__avatar-wrap { width: 80px; aspect-ratio: 1; max-width: 80px; margin: 0; border-radius: 14px; }
  .mrc__intro-text { flex: 1; min-width: 160px; }
  .mrc__trust { display: none; }
  .mrc__scarcity { display: none; }
}
@media (max-width: 560px) {
  .mrc__row { grid-template-columns: 1fr; }
  .mrc__footer { flex-direction: column; align-items: flex-start; }
  .mrc__footer-right { align-items: flex-start; width: 100%; }
  .mrc__submit { width: 100%; justify-content: center; }
  .mrc__intro { flex-direction: column; }
  .mrc__avatar-wrap { width: 100%; max-width: 100%; }
}