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

        :root {
            --blue: #6aabf0;
            --blue2: #9ec8f5;
            --blue3: #cfe4f9;
            --blue4: #e8f3fc;
            --blue5: #f2f8fd;
            --ink: #111;
            --ink2: #222;
            --muted: #5c5c5c;
            --muted2: #909090;
            --white: #fff;
            --border: #dde8f0;
            --bg: #f8fbfe;
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--white);
            color: var(--ink);
            font-family: "DM Sans", sans-serif;
            font-weight: 300;
            overflow-x: hidden
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 200;
            padding: 18px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid transparent;
            transition: border-color .3s
        }

        nav.scrolled {
            border-color: var(--border)
        }

        .nav-logo {
            font-family: "Syne", sans-serif;
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--ink);
            text-decoration: none
        }

        .nav-logo span {
            color: var(--blue)
        }

        .nav-links {
            display: flex;
            gap: 32px;
            list-style: none
        }

        .nav-links a {
            font-size: 13px;
            color: var(--muted);
            text-decoration: none;
            transition: color .2s
        }

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

        .nav-cta {
            font-size: 13px;
            font-weight: 500;
            background: var(--blue);
            color: var(--white);
            padding: 10px 22px;
            border-radius: 100px;
            text-decoration: none;
            transition: background .2s;
            white-space: nowrap
        }

        .nav-cta:hover {
            background: var(--blue2);
            color: var(--ink)
        }

        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none
        }

        .nav-hamburger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--ink);
            border-radius: 2px;
            transition: all .3s
        }

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

        .nav-hamburger.open span:nth-child(2) {
            opacity: 0
        }

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

        .mobile-menu {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--white);
            z-index: 199;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px
        }

        .mobile-menu.open {
            display: flex
        }

        .mobile-menu-links {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            list-style: none
        }

        .mobile-menu-links a {
            font-family: "Syne", sans-serif;
            font-size: 26px;
            font-weight: 800;
            color: var(--ink);
            text-decoration: none
        }

        .mobile-cta {
            font-size: 15px;
            font-weight: 500;
            background: var(--blue);
            color: var(--white);
            padding: 14px 36px;
            border-radius: 100px;
            text-decoration: none;
            margin-top: 8px
        }

        /* HERO */
        .hero {
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 120px 60px 140px;
            position: relative;
            overflow: hidden
        }

        .hero-blob {
            position: absolute;
            right: -8%;
            top: 5%;
            width: 52%;
            aspect-ratio: 1;
            background: radial-gradient(ellipse, var(--blue4) 0%, var(--blue5) 45%, transparent 72%);
            border-radius: 50%;
            pointer-events: none;
            animation: pulse 7s ease-in-out infinite
        }

        .hero-blob2 {
            position: absolute;
            left: -4%;
            bottom: -8%;
            width: 28%;
            aspect-ratio: 1;
            background: radial-gradient(ellipse, var(--blue4) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: pulse 9s ease-in-out infinite reverse
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.04) translateY(-10px)
            }
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue5);
            border: 1px solid var(--blue3);
            border-radius: 100px;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 500;
            color: var(--muted);
            margin-bottom: 28px;
            width: fit-content;
            opacity: 0;
            animation: up .7s .1s forwards
        }

        .hero-badge::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--blue);
            flex-shrink: 0;
            animation: blink 2s ease-in-out infinite
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .3
            }
        }

        h1 {
            font-family: "Syne", sans-serif;
            font-size: clamp(52px, 8vw, 120px);
            font-weight: 800;
            line-height: .92;
            letter-spacing: -0.04em;
            margin-bottom: 28px;
            opacity: 0;
            animation: up .7s .2s forwards
        }

        h1 em {
            font-family: "Instrument Serif", serif;
            font-style: italic;
            font-weight: 400;
            color: var(--blue)
        }

        .hero-sub {
            max-width: 440px;
            font-size: 16px;
            line-height: 1.85;
            color: var(--muted);
            margin-bottom: 40px;
            opacity: 0;
            animation: up .7s .35s forwards
        }

        .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            opacity: 0;
            animation: up .7s .5s forwards
        }

        .btn-blue {
            font-size: 14px;
            font-weight: 500;
            background: var(--blue);
            color: var(--white);
            padding: 15px 32px;
            border-radius: 100px;
            text-decoration: none;
            transition: background .2s;
            display: inline-block;
            white-space: nowrap
        }

        .btn-blue:hover {
            background: var(--blue2);
            color: var(--ink)
        }

        .btn-dark {
            font-size: 14px;
            font-weight: 500;
            background: var(--ink);
            color: var(--white);
            padding: 15px 30px;
            border-radius: 100px;
            text-decoration: none;
            transition: background .2s;
            display: inline-block;
            white-space: nowrap
        }

        .btn-dark:hover {
            background: var(--ink2)
        }

        .btn-outline {
            font-size: 14px;
            color: var(--muted);
            text-decoration: none;
            padding: 15px 22px;
            border-radius: 100px;
            border: 1.5px solid var(--border);
            transition: border-color .2s, color .2s;
            white-space: nowrap
        }

        .btn-outline:hover {
            border-color: var(--ink);
            color: var(--ink)
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            margin-top: 48px;
            padding-top: 36px;
            border-top: 1px solid var(--border);
            opacity: 0;
            animation: up .7s .7s forwards
        }

        .hero-stat-num {
            font-family: "Syne", sans-serif;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--ink)
        }

        .hero-stat-label {
            font-size: 12px;
            color: var(--muted2);
            margin-top: 2px
        }

        /* MARQUEE */
        .marquee-bar {
            background: var(--ink);
            padding: 14px 0;
            overflow: hidden
        }

        .marquee {
            display: flex;
            animation: scroll 22s linear infinite;
            white-space: nowrap
        }

        .marquee-item {
            font-family: "Syne", sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            padding: 0 28px;
            flex-shrink: 0
        }

        .marquee-item.accent {
            color: var(--blue)
        }

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

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

        /* SECTIONS */
        section {
            padding: 100px 60px
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 500;
            color: var(--blue);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        .section-tag::before {
            content: "";
            width: 20px;
            height: 1.5px;
            background: var(--blue)
        }

        h2 {
            font-family: "Syne", sans-serif;
            font-size: clamp(30px, 3.8vw, 52px);
            font-weight: 800;
            line-height: 1.06;
            letter-spacing: -0.03em;
            margin-bottom: 14px
        }

        h2 em {
            font-family: "Instrument Serif", serif;
            font-style: italic;
            font-weight: 400;
            color: var(--blue)
        }

        /* ===== QUIZ FUNNEL ===== */
        .quiz-section {
            background: var(--ink);
            padding: 100px 60px;
            position: relative;
            overflow: hidden
        }

        .quiz-section .section-tag {
            color: var(--blue)
        }

        .quiz-section h2 {
            color: var(--white)
        }

        .quiz-section h2 em {
            color: var(--blue)
        }

        .quiz-section .quiz-sub {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.8;
            margin-bottom: 56px;
            max-width: 480px
        }

        .quiz-wrap {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 52px;
            max-width: 700px
        }

        .quiz-progress {
            display: flex;
            gap: 6px;
            margin-bottom: 40px
        }

        .quiz-pip {
            height: 4px;
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            transition: background .4s
        }

        .quiz-pip.done {
            background: var(--blue)
        }

        .quiz-step {
            display: none
        }

        .quiz-step.active {
            display: block
        }

        .quiz-q {
            font-family: "Syne", sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.02em;
            margin-bottom: 8px
        }

        .quiz-hint {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.38);
            margin-bottom: 28px
        }

        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .quiz-opt {
            background: rgba(255, 255, 255, 0.05);
            border: 1.5px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 16px 20px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.72);
            cursor: pointer;
            text-align: left;
            transition: all .2s;
            width: 100%;
            font-family: "DM Sans", sans-serif
        }

        .quiz-opt:hover,
        .quiz-opt.selected {
            background: rgba(106, 171, 240, 0.12);
            border-color: var(--blue);
            color: var(--white)
        }

        .quiz-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 28px
        }

        .quiz-back {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.35);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-family: "DM Sans", sans-serif;
            transition: color .2s
        }

        .quiz-back:hover {
            color: rgba(255, 255, 255, 0.7)
        }

        .quiz-next {
            font-family: "Syne", sans-serif;
            font-size: 13px;
            font-weight: 700;
            background: var(--blue);
            color: var(--white);
            border: none;
            padding: 12px 28px;
            border-radius: 100px;
            cursor: pointer;
            transition: background .2s;
            opacity: 0.4;
            pointer-events: none
        }

        .quiz-next.ready {
            opacity: 1;
            pointer-events: all
        }

        .quiz-next:hover.ready {
            background: var(--blue2);
            color: var(--ink)
        }

        .quiz-step-counter {
            font-family: "Syne", sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.25);
            letter-spacing: 0.1em
        }

        /* Quiz final step — contact fields */
        .quiz-fields {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 24px
        }

        .quiz-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.06);
            border: 1.5px solid rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            padding: 13px 16px;
            font-family: "DM Sans", sans-serif;
            font-size: 14px;
            color: var(--white);
            outline: none;
            transition: border-color .2s
        }

        .quiz-input:focus {
            border-color: var(--blue)
        }

        .quiz-input::placeholder {
            color: rgba(255, 255, 255, 0.28)
        }

        .quiz-submit {
            width: 100%;
            background: var(--blue);
            color: var(--white);
            border: none;
            padding: 17px;
            border-radius: 12px;
            font-family: "Syne", sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s
        }

        .quiz-submit:hover {
            background: var(--blue2);
            color: var(--ink)
        }

        .quiz-success {
            text-align: center;
            padding: 20px 0;
            display: none
        }

        .quiz-success-icon {
            font-size: 48px;
            margin-bottom: 16px
        }

        .quiz-success h3 {
            font-family: "Syne", sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 10px
        }

        .quiz-success p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.7
        }

        /* PROBLEM / SOLUTION */
        .ps-section {
            background: var(--bg)
        }

        .ps-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 48px
        }

        .ps-col {
            background: var(--white);
            border-radius: 20px;
            padding: 36px;
            border: 1.5px solid var(--border)
        }

        .ps-col.solution {
            background: var(--ink);
            border-color: var(--ink)
        }

        .ps-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 18px;
            padding: 7px 14px;
            border-radius: 100px;
            display: inline-block
        }

        .ps-label.problem {
            background: var(--blue5);
            color: var(--muted)
        }

        .ps-label.sol-lbl {
            background: rgba(106, 171, 240, 0.18);
            color: var(--blue2)
        }

        .ps-title {
            font-family: "Syne", sans-serif;
            font-size: 19px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 18px;
            color: var(--ink)
        }

        .ps-col.solution .ps-title {
            color: var(--white)
        }

        .ps-items {
            display: flex;
            flex-direction: column;
            gap: 11px
        }

        .ps-item {
            font-size: 14px;
            line-height: 1.65;
            display: flex;
            gap: 10px;
            align-items: flex-start
        }

        .ps-item.prob {
            color: var(--muted)
        }

        .ps-item.sol {
            color: rgba(255, 255, 255, 0.7)
        }

        .ps-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            margin-top: 2px;
            font-weight: 700
        }

        .ps-icon.x {
            background: rgba(200, 60, 60, 0.1);
            color: #c83c3c
        }

        .ps-icon.chk {
            background: rgba(106, 171, 240, 0.22);
            color: var(--blue2)
        }

        /* ABOUT */
        .about-section {
            background: var(--white)
        }

        .about-wrap {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 60px;
            align-items: center
        }

        .about-visual {
            position: relative
        }

        .about-photo {
            width: 100%;
            aspect-ratio: 3/4;
            border-radius: 22px;
            overflow: hidden;
            background: var(--blue5)
        }

        .about-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top
        }

        .about-badge {
            position: absolute;
            bottom: 20px;
            left: 16px;
            right: 16px;
            background: var(--white);
            border-radius: 14px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 8px 40px rgba(106, 171, 240, 0.15)
        }

        .about-badge-text {
            font-family: "Syne", sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink)
        }

        .about-badge-sub {
            font-size: 11px;
            color: var(--muted);
            margin-top: 2px
        }

        .about-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--blue);
            flex-shrink: 0;
            animation: blink 2s ease-in-out infinite
        }

        .about-text p {
            font-size: 15px;
            line-height: 1.9;
            color: var(--muted);
            margin-bottom: 14px
        }

        .about-text p strong {
            color: var(--ink);
            font-weight: 500
        }

        .about-skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 24px
        }

        .skill-chip {
            font-size: 12px;
            font-weight: 500;
            background: var(--blue5);
            color: var(--muted);
            padding: 7px 14px;
            border-radius: 100px;
            border: 1px solid var(--blue3)
        }

        /* SERVICES */
        .services-section {
            padding: 0 60px 100px
        }

        .services-wrap {
            background: var(--ink);
            border-radius: 24px;
            padding: 60px
        }

        .services-wrap .section-tag {
            color: var(--blue)
        }

        .services-wrap h2 {
            color: var(--white)
        }

        .services-wrap h2 em {
            color: var(--blue)
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            margin-top: 44px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 14px;
            overflow: hidden
        }

        .service-card {
            background: var(--ink);
            padding: 30px 26px;
            transition: background .3s
        }

        .service-card:hover {
            background: #161616
        }

        .service-num {
            font-family: "Syne", sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.16);
            letter-spacing: 0.15em;
            margin-bottom: 18px
        }

        .service-name {
            font-family: "Syne", sans-serif;
            font-size: 18px;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.02em;
            margin-bottom: 10px
        }

        .service-desc {
            font-size: 13px;
            line-height: 1.75;
            color: rgba(255, 255, 255, 0.4)
        }

        .service-items {
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .service-item {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.26);
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5
        }

        .service-item::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--blue);
            flex-shrink: 0;
            margin-top: 5px
        }

        /* PROCESS */
        .process-section {
            background: var(--blue5)
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            margin-top: 52px;
            position: relative
        }

        .steps::before {
            content: "";
            position: absolute;
            top: 24px;
            left: 0;
            right: 0;
            height: 1.5px;
            background: linear-gradient(to right, var(--blue3), var(--blue));
            z-index: 0
        }

        .step {
            position: relative;
            z-index: 1;
            padding-top: 52px
        }

        .step-dot {
            position: absolute;
            top: 16px;
            left: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--blue);
            border: 3px solid var(--blue5)
        }

        .step-num {
            font-family: "Syne", sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: var(--blue);
            letter-spacing: 0.1em;
            margin-bottom: 12px
        }

        .step-title {
            font-family: "Syne", sans-serif;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 8px;
            color: var(--ink)
        }

        .step-desc {
            font-size: 13px;
            line-height: 1.7;
            color: var(--muted);
            padding-right: 12px
        }

        /* WHO I HELP */
        .who-section {
            background: var(--white)
        }

        .who-intro {
            font-size: 15px;
            line-height: 1.85;
            color: var(--muted);
            max-width: 500px;
            margin-bottom: 40px
        }

        .who-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px
        }

        .who-card {
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 18px;
            padding: 30px;
            transition: border-color .3s, transform .3s, background .3s
        }

        .who-card:hover {
            border-color: var(--blue2);
            transform: translateY(-3px);
            background: var(--blue5)
        }

        .who-icon {
            font-size: 26px;
            margin-bottom: 12px;
            display: block
        }

        .who-title {
            font-family: "Syne", sans-serif;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 7px;
            color: var(--ink)
        }

        .who-desc {
            font-size: 13px;
            line-height: 1.7;
            color: var(--muted)
        }

        /* PRICING */
        .pricing-section {
            background: var(--bg)
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin-top: 48px;
            max-width: 760px
        }

        .pricing-card {
            background: var(--white);
            border: 1.5px solid var(--border);
            border-radius: 20px;
            padding: 38px;
            transition: border-color .3s, transform .3s
        }

        .pricing-card:hover {
            border-color: var(--blue2);
            transform: translateY(-3px)
        }

        .pricing-card.featured {
            border-color: var(--blue);
            background: var(--ink)
        }

        .pricing-tag-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 16px;
            display: block
        }

        .pricing-card.featured .pricing-tag-label {
            color: var(--blue)
        }

        .pricing-price {
            font-family: "Syne", sans-serif;
            font-size: 46px;
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1;
            color: var(--ink);
            margin-bottom: 4px
        }

        .pricing-card.featured .pricing-price {
            color: var(--white)
        }

        .pricing-range {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 18px
        }

        .pricing-card.featured .pricing-range {
            color: rgba(255, 255, 255, 0.38)
        }

        .pricing-div {
            height: 1px;
            background: var(--border);
            margin: 18px 0
        }

        .pricing-card.featured .pricing-div {
            background: rgba(255, 255, 255, 0.08)
        }

        .pricing-items {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-bottom: 22px
        }

        .pricing-item {
            font-size: 13px;
            color: var(--muted);
            display: flex;
            gap: 9px;
            align-items: flex-start;
            line-height: 1.5
        }

        .pricing-card.featured .pricing-item {
            color: rgba(255, 255, 255, 0.55)
        }

        .p-chk {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--blue5);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px
        }

        .pricing-card.featured .p-chk {
            background: rgba(106, 171, 240, 0.18)
        }

        .p-chk::after {
            content: "";
            width: 5px;
            height: 3px;
            border-left: 1.5px solid var(--blue);
            border-bottom: 1.5px solid var(--blue);
            transform: rotate(-45deg) translateY(-1px);
            display: block
        }

        .pricing-note {
            font-size: 11px;
            color: var(--muted2);
            line-height: 1.65;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border)
        }

        .pricing-card.featured .pricing-note {
            border-top-color: rgba(255, 255, 255, 0.07);
            color: rgba(255, 255, 255, 0.25)
        }

        .pricing-cta {
            display: block;
            text-align: center;
            background: var(--ink);
            color: var(--white);
            padding: 14px;
            border-radius: 11px;
            font-family: "Syne", sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            transition: background .2s
        }

        .pricing-cta:hover {
            background: var(--ink2)
        }

        .pricing-card.featured .pricing-cta {
            background: var(--blue);
            color: var(--white)
        }

        .pricing-card.featured .pricing-cta:hover {
            background: var(--blue2);
            color: var(--ink)
        }

        /* CONTACT */
        .contact-section {
            background: var(--blue5)
        }

        .contact-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start
        }

        .contact-sub {
            font-size: 15px;
            line-height: 1.85;
            color: var(--muted);
            margin-bottom: 30px;
            max-width: 340px
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .cd {
            display: flex;
            gap: 12px;
            align-items: flex-start
        }

        .cd-label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--muted2);
            min-width: 64px;
            margin-top: 2px
        }

        .cd-val {
            font-size: 14px;
            color: var(--ink)
        }

        .form-wrap {
            background: var(--white);
            border-radius: 20px;
            padding: 38px;
            box-shadow: 0 12px 48px rgba(106, 171, 240, 0.1)
        }

        .f-group {
            margin-bottom: 14px
        }

        .f-label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
            display: block;
            margin-bottom: 7px
        }

        .f-input {
            width: 100%;
            background: var(--blue5);
            border: 1.5px solid var(--blue3);
            border-radius: 10px;
            padding: 12px 14px;
            font-family: "DM Sans", sans-serif;
            font-size: 14px;
            color: var(--ink);
            outline: none;
            transition: border-color .2s;
            appearance: none
        }

        .f-input:focus {
            border-color: var(--blue)
        }

        .f-input::placeholder {
            color: var(--muted2)
        }

        textarea.f-input {
            resize: none;
            height: 100px
        }

        select.f-input {
            cursor: pointer
        }

        .f-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .f-submit {
            width: 100%;
            background: var(--blue);
            color: var(--white);
            border: none;
            padding: 16px;
            border-radius: 10px;
            font-family: "Syne", sans-serif;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s;
            margin-top: 4px
        }

        .f-submit:hover {
            background: var(--blue2);
            color: var(--ink)
        }

        .form-success {
            display: none;
            text-align: center;
            padding: 32px 0
        }

        .form-success h3 {
            font-family: "Syne", sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: var(--ink);
            margin-bottom: 8px
        }

        .form-success p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7
        }

        .form-success .success-icon {
            font-size: 40px;
            margin-bottom: 12px
        }

        /* FOOTER */
        footer {
            background: var(--ink);
            padding: 40px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px
        }

        .footer-logo {
            font-family: "Syne", sans-serif;
            font-size: 16px;
            font-weight: 800;
            color: var(--white);
            letter-spacing: -0.02em
        }

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

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

        .footer-links {
            display: flex;
            gap: 22px
        }

        .footer-links a {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            transition: color .2s
        }

        .footer-links a:hover {
            color: var(--blue)
        }

        /* REVEAL */
        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .7s, transform .7s
        }

        .reveal.visible {
            opacity: 1;
            transform: none
        }

        @keyframes up {
            from {
                opacity: 0;
                transform: translateY(16px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        /* ============ TABLET ============ */
        @media(max-width:1024px) {
            nav {
                padding: 16px 32px
            }

            .nav-links {
                gap: 22px
            }

            section {
                padding: 80px 32px
            }

            .hero {
                padding: 110px 32px 120px
            }

            .services-section {
                padding: 0 32px 80px
            }

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

            .about-wrap {
                grid-template-columns: 1fr;
                gap: 36px
            }

            .about-photo {
                aspect-ratio: 4/3;
                max-width: 480px
            }

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

            .steps {
                grid-template-columns: 1fr 1fr;
                gap: 36px
            }

            .steps::before {
                display: none
            }

            .step {
                padding-top: 0;
                padding-left: 28px
            }

            .step-dot {
                top: 2px;
                left: 0
            }

            .contact-inner {
                grid-template-columns: 1fr;
                gap: 36px
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                max-width: 440px
            }

            .services-wrap {
                padding: 44px 36px
            }

            .quiz-section {
                padding: 80px 32px
            }

            .quiz-wrap {
                padding: 40px 36px
            }

            footer {
                padding: 32px
            }
        }

        /* ============ MOBILE ============ */
        @media(max-width:768px) {
            nav {
                padding: 14px 20px
            }

            .nav-links,
            .nav-cta {
                display: none
            }

            .nav-hamburger {
                display: flex
            }

            .hero {
                padding: 100px 20px 110px
            }

            .hero-sub {
                font-size: 15px
            }

            .hero-stats {
                gap: 20px;
                margin-top: 32px;
                padding-top: 24px
            }

            section {
                padding: 64px 20px
            }

            .services-section {
                padding: 0 20px 64px
            }

            .services-wrap {
                padding: 32px 22px;
                border-radius: 18px
            }

            .services-grid {
                gap: 0;
                background: none;
                border-radius: 0
            }

            .service-card {
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 0;
                padding: 26px 0
            }

            .service-card:last-child {
                border-bottom: none
            }

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

            .ps-col {
                padding: 26px 22px
            }

            .steps {
                grid-template-columns: 1fr;
                gap: 24px
            }

            .step {
                padding-left: 28px
            }

            .about-wrap {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .about-photo {
                aspect-ratio: 4/3;
                border-radius: 18px
            }

            .about-badge {
                left: 12px;
                right: 12px;
                bottom: 12px
            }

            .who-grid {
                grid-template-columns: 1fr;
                gap: 12px
            }

            .who-card {
                padding: 22px
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                max-width: 100%;
                gap: 14px
            }

            .pricing-card {
                padding: 28px 22px
            }

            .contact-inner {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .form-wrap {
                padding: 26px 18px
            }

            .f-row {
                grid-template-columns: 1fr
            }

            footer {
                padding: 28px 20px;
                flex-direction: column;
                align-items: flex-start;
                gap: 12px
            }

            h2 {
                font-size: clamp(28px, 8vw, 40px)
            }

            .quiz-section {
                padding: 64px 20px
            }

            .quiz-wrap {
                padding: 32px 22px;
                border-radius: 18px
            }

            .quiz-q {
                font-size: 18px
            }
        }

        @media(max-width:420px) {
            h1 {
                font-size: clamp(42px, 13vw, 62px)
            }

            section {
                padding: 52px 16px
            }

            .services-section {
                padding: 0 16px 52px
            }

            .quiz-section {
                padding: 52px 16px
            }
        }

        /* CUSTOM CURSOR */
        @media(pointer:fine) {
            body {
                cursor: none
            }

            a,
            button,
            .who-card,
            .service-card,
            .pricing-card,
            .quiz-opt {
                cursor: none
            }
        }

        .cur-dot {
            position: fixed;
            width: 8px;
            height: 8px;
            background: var(--blue);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%);
            transition: width .25s, height .25s, background .25s
        }

        .cur-ring {
            position: fixed;
            width: 34px;
            height: 34px;
            border: 1.5px solid var(--blue);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99998;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, border-color .3s
        }

        /* ── ANIMATION ENHANCEMENTS ── */
        .scroll-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--blue), var(--blue2));
            z-index: 10000;
            width: 0%;
            border-radius: 0 2px 2px 0;
            pointer-events: none
        }

        /* light sweep strobes */
        .hero-strobe {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .hero-strobe::before,
        .hero-strobe::after {
            content: "";
            position: absolute;
            top: -20%;
            height: 140%;
        }

        .hero-strobe::before {
            left: -40%;
            width: 32%;
            background: linear-gradient(to right, transparent 0%, rgba(106, 171, 240, 0.55) 50%, transparent 100%);
            animation: strobe-r 11s linear infinite;
        }

        .hero-strobe::after {
            left: -40%;
            width: 15%;
            background: linear-gradient(to right, transparent 0%, rgba(106, 171, 240, 0.32) 50%, transparent 100%);
            animation: strobe-r 11s linear 4.5s infinite;
        }

        @keyframes strobe-r {
            0% {
                left: -45%;
                transform: skewX(-8deg);
                opacity: 0;
            }

            5% {
                opacity: 1;
            }

            25% {
                opacity: 1;
            }

            32% {
                left: 130%;
                transform: skewX(-8deg);
                opacity: 0;
            }

            100% {
                left: 130%;
                transform: skewX(-8deg);
                opacity: 0;
            }
        }

        @keyframes shimmer-glide {
            0% {
                background-position: 200% center
            }

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

        .pricing-card.featured {
            position: relative;
            overflow: hidden
        }

        .pricing-card.featured::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 35%, rgba(106, 171, 240, .28) 50%, transparent 65%);
            background-size: 200% 100%;
            animation: shimmer-glide 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 0
        }

        .pricing-card.featured>* {
            position: relative;
            z-index: 1
        }

        @keyframes dot-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(106, 171, 240, .9)
            }

            60% {
                box-shadow: 0 0 0 10px rgba(106, 171, 240, 0)
            }
        }

        .step.step-lit .step-dot {
            animation: dot-pulse 2s ease-in-out infinite
        }

        .btn-blue:active,
        .btn-dark:active,
        .btn-outline:active,
        .nav-cta:active,
        .mobile-cta:active,
        .quiz-next:active,
        .f-submit:active,
        .quiz-submit:active {
            transform: scale(.97) !important
        }

        .btn-blue:hover {
            box-shadow: 0 4px 24px rgba(106, 171, 240, .3)
        }

        .nav-cta:hover {
            box-shadow: 0 4px 20px rgba(106, 171, 240, .25)
        }

        .marquee-bar:hover .marquee {
            animation-play-state: paused
        }

        /* ── INTRO OVERLAY ── */
        .intro-overlay {
            position: fixed;
            inset: 0;
            background: var(--ink);
            z-index: 100000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1)
        }

        .intro-overlay.gone {
            transform: translateY(-100%)
        }

        .intro-name {
            font-family: "Syne", sans-serif;
            font-size: clamp(28px, 5vw, 72px);
            font-weight: 800;
            letter-spacing: -0.04em;
            color: var(--white);
            opacity: 0;
            transform: translateY(20px);
            animation: intro-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards
        }

        .intro-name span {
            color: var(--blue)
        }

        .intro-bar {
            width: 0;
            height: 2px;
            background: var(--blue);
            border-radius: 2px;
            animation: intro-bar 1s ease 0.6s forwards
        }

        @keyframes intro-rise {
            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes intro-bar {
            to {
                width: 120px
            }
        }

        /* ── QUIZ DARK BACKGROUND ANIMATION ── */
        .quiz-section::before {
            content: "";
            position: absolute;
            width: 65%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(106, 171, 240, 0.18) 0%, transparent 68%);
            top: -25%;
            right: -12%;
            pointer-events: none;
            animation: orb-drift 9s ease-in-out infinite
        }

        .quiz-section::after {
            content: "";
            position: absolute;
            width: 42%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(106, 171, 240, 0.12) 0%, transparent 68%);
            bottom: -18%;
            left: -8%;
            pointer-events: none;
            animation: orb-drift 11s ease-in-out infinite reverse
        }

        @keyframes orb-drift {

            0%,
            100% {
                transform: translate(0, 0) scale(1)
            }

            50% {
                transform: translate(20px, -24px) scale(1.07)
            }
        }

        .quiz-dot {
            position: absolute;
            border-radius: 50%;
            background: var(--blue);
            pointer-events: none;
            opacity: 0;
            filter: blur(0.5px);
            animation: qdot-rise var(--d, 9s) var(--dl, 0s) ease-in-out infinite
        }

        @keyframes qdot-rise {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0)
            }

            20% {
                opacity: 0.65
            }

            80% {
                opacity: 0.2
            }

            100% {
                opacity: 0;
                transform: translateY(-160px) scale(1.4)
            }
        }