/* ============================================================
   DESIGN TOKENS  (LiveSkills brand: deep purple + magenta)
   ============================================================ */
:root {
    --purple-deep: #5E1A9E;
    --purple: #7B2CBF;
    --magenta: #D63384;
    --magenta-deep: #B0276A;
    --grad: linear-gradient(120deg,var(--purple) 0%,var(--magenta) 100%);
    --ink: #221436; /* headings / strong text */
    --ink-soft: #554270; /* body text — AA on white */
    --mute: #63527A; /* de-emphasised small text — AA on white */

    --bg: #FFFFFF;
    --tint: #FBF5FF; /* soft section wash */
    --wash: #F6EDFC;
    --line: #EBDEF6; /* hairline borders */
    --line-2: #DBC7EE;
    --green: #0E8F62; /* success / ticks */
    --green-bg: #E6F6EF;
    --shadow: 0 10px 30px -12px rgba(94,26,158,.18);
    --shadow-sm: 0 4px 14px -6px rgba(94,26,158,.16);
    --shadow-lg: 0 26px 60px -22px rgba(94,26,158,.28);
    --r: 14px;
    --r-lg: 22px;
    --pill: 100px;
    --wrap: 1200px;
    --pad: clamp(16px,5vw,56px); /* fluid horizontal gutter */
    --band: clamp(56px,8vw,35px); /* fluid vertical rhythm — one source of truth */
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Plus Jakarta Sans',system-ui,sans-serif;
    background: var(--bg);
    color: var(--ink-soft);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit
}

button {
    font: inherit;
    cursor: pointer
}

svg {
    flex-shrink: 0
}

:focus {
    outline: none
}
/* Visible keyboard focus everywhere (mouse users don't see it) */
:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    border-radius: 6px
}

/* Screen-reader only + skip link */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    transition: top .2s
}

    .skip:focus {
        top: 12px
    }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad)
}

.band {
    padding-block: var(--band)
}
/* single vertical-rhythm rule */
.band--tint {
    background: var(--tint)
}

.band--wash {
    background: linear-gradient(180deg,var(--bg),var(--tint))
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 14px;
}

    .eyebrow::before {
        content: "";
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--grad)
    }

.eyebrow--center {
    justify-content: center
}

.h2 {
    font-size: clamp(26px,3.4vw,38px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--purple-deep);
    margin-bottom: 12px;
}

    .h2 .accent {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.lede {
    font-size: clamp(15px,1.6vw,17px);
    color: var(--ink-soft);
    max-width: 60ch;
    margin-bottom: clamp(28px,4vw,44px)
}

.center {
    text-align: center
}

    .center .lede {
        margin-inline: auto
    }

/* Buttons -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    padding: 14px 26px;
    border-radius: 12px;
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
}

    .btn svg {
        transition: transform .2s ease
    }

.btn--primary {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 14px 30px -12px rgba(123,44,191,.55)
}

    .btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -14px rgba(123,44,191,.6)
    }

        .btn--primary:hover svg {
            transform: translateX(4px)
        }

.btn--ghost {
    background: #fff;
    color: var(--purple-deep);
    border: 2px solid var(--line-2)
}

    .btn--ghost:hover {
        border-color: var(--purple);
        background: var(--tint);
        transform: translateY(-2px)
    }

.btn--block {
    width: 100%
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s
}

    .header.is-scrolled {
        box-shadow: 0 6px 20px -12px rgba(94,26,158,.25)
    }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.02em;
    color: var(--purple-deep)
}

    .logo .mark {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--grad);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 17px;
        box-shadow: var(--shadow-sm)
    }

    .logo .lms {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
        color: var(--mute);
        text-transform: uppercase;
        background: var(--tint);
        border: 1px solid var(--line);
        border-radius: var(--pill);
        padding: 2px 8px;
        margin-left: 2px
    }

    .logo .k {
        color: var(--ink)
    }

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

    .nav-links a.link {
        color: var(--ink-soft);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        padding: 9px 14px;
        border-radius: 9px;
        transition: .18s
    }

        .nav-links a.link:hover {
            color: var(--purple);
            background: var(--wash)
        }

.nav-cta {
    padding: 10px 20px;
    font-size: 14px
}

/* mobile menu button + panel */
.menu-btn {
    display: none;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ink)
}

.mobile-panel {
    display: none
}

/* ============================================================
   HERO  — the signature: message + conversion, above the fold
   ============================================================ */
.hero {
    padding-block: clamp(28px,5vw,60px) clamp(48px,7vw,80px)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px,5vw,60px);
    align-items: center
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--purple-deep);
    background: linear-gradient(90deg,rgba(123,44,191,.08),rgba(214,51,132,.08));
    border: 1px solid var(--line-2);
    padding: 7px 14px;
    border-radius: var(--pill);
    margin-bottom: 20px
}

    .hero-eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 3px rgba(14,143,98,.22);
        animation: pulse 1.8s ease-in-out infinite
    }

h1.hero-title {
    font-size: clamp(32px,5vw,54px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: var(--purple-deep);
    margin-bottom: 16px
}

h1 .accent {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero-sub {
    font-size: clamp(15px,1.7vw,18px);
    color: var(--ink-soft);
    max-width: 52ch;
    margin-bottom: 26px
}

    .hero-sub strong {
        color: var(--ink);
        font-weight: 700
    }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px
}

/* real trust markers, moved up from the footer */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px
}

    .trust-row .t {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink)
    }

        .trust-row .t svg {
            color: var(--magenta)
        }

    .trust-row .sep {
        width: 1px;
        height: 16px;
        background: var(--line-2)
    }

/* --- Start card (the conversion surface) --- */
.start-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(20px,2.4vw,28px)
}

.start-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 20px
}

.start-tab {
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 11px 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-soft);
    transition: .18s
}

    .start-tab[aria-selected="true"] {
        background: #fff;
        color: var(--purple-deep);
        box-shadow: var(--shadow-sm)
    }

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

.field {
    margin-bottom: 14px;
    text-align: left
}

    .field label {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 6px
    }

    .field .req {
        color: var(--magenta)
    }

    .field input, .field select {
        width: 100%;
        font: inherit;
        font-size: 14.5px;
        color: var(--ink);
        background: #fff;
        border: 1.5px solid var(--line-2);
        border-radius: 11px;
        padding: 12px 13px;
        transition: border-color .15s,box-shadow .15s;
    }

        .field input::placeholder {
            color: #a596b8
        }

        .field input:focus, .field select:focus {
            border-color: var(--purple);
            box-shadow: 0 0 0 4px rgba(123,44,191,.12)
        }

/* accessible radio pills (native inputs, styled labels) */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.pill-cap {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px
}

.pills .pill {
    position: relative
}

.pills input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.pills label {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-soft);
    border: 1.5px solid var(--line-2);
    border-radius: var(--pill);
    padding: 9px 16px;
    transition: .15s;
    cursor: pointer
}

.pills input:hover + label {
    border-color: var(--purple)
}

.pills input:checked + label {
    background: var(--grad);
    color: #fff;
    border-color: transparent
}

.pills input:focus-visible + label {
    outline: 3px solid var(--purple);
    outline-offset: 2px
}

.form-note {
    font-size: 12px;
    color: var(--mute);
    margin-top: 12px;
    text-align: center
}

    .form-note a {
        color: var(--purple);
        font-weight: 700
    }

/* inline success message (no user input echoed back → XSS-safe) */
.form-ok {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--green-bg);
    color: var(--green);
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 4px
}

    .form-ok.show {
        display: flex
    }

.form-panel[hidden] {
    display: none
}

/* ============================================================
   HOW IT WORKS — one slim row (4 steps)
   ============================================================ */
.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(14px,2vw,22px);
    counter-reset: s
}

.step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px 20px
}

    .step .num {
        counter-increment: s;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--wash);
        color: var(--purple-deep);
        display: grid;
        place-items: center;
        font-weight: 800;
        margin-bottom: 14px
    }

        .step .num::before {
            content: counter(s)
        }

    .step h3 {
        font-size: 15.5px;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 5px
    }

    .step p {
        font-size: 13.5px;
        color: var(--mute);
        line-height: 1.5
    }

.how-note {
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--ink-soft);
    background: var(--tint);
    border: 1px dashed var(--line-2);
    border-radius: 12px;
    padding: 14px 18px
}

    .how-note strong {
        color: var(--purple-deep)
    }

/* ============================================================
   CATEGORIES — compact tiles (icon + title + one line)
   ============================================================ */
.cats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.cat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px;
    transition: transform .2s,box-shadow .2s,border-color .2s;
    text-decoration: none;
    display: block
}

    .cat:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
        border-color: var(--line-2)
    }

    .cat .ci {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        background: var(--tint);
        color: var(--purple);
        display: grid;
        place-items: center;
        margin-bottom: 14px
    }

    .cat h3 {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.25;
        margin-bottom: 4px
    }

    .cat p {
        font-size: 12.5px;
        color: var(--mute);
        line-height: 1.45
    }

.cat-more {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-soft)
}

    .cat-more a {
        color: var(--purple);
        font-weight: 800;
        text-decoration: none
    }

        .cat-more a:hover {
            text-decoration: underline
        }

/* ============================================================
   WHY LIVESKILLS  (reasons + deliverables + testimonials merged)
   ============================================================ */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px,4vw,52px);
    align-items: start
}

.reasons {
    display: grid;
    gap: 14px;
    margin-bottom: 26px
}

.reason {
    display: flex;
    gap: 13px;
    align-items: flex-start
}

    .reason .ri {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: var(--grad);
        color: #fff;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm)
    }

    .reason p {
        font-size: 15px;
        color: var(--ink);
        font-weight: 600;
        padding-top: 7px
    }

.deliver {
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(22px,2.6vw,30px)
}

    .deliver h3 {
        font-size: 15px;
        font-weight: 800;
        color: var(--purple-deep);
        letter-spacing: -.01em;
        margin-bottom: 16px
    }

    .deliver ul {
        list-style: none;
        display: grid;
        gap: 13px
    }

    .deliver li {
        display: flex;
        gap: 11px;
        align-items: flex-start
    }

    .deliver .ok {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--green-bg);
        color: var(--green);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 1px
    }

    .deliver .dt {
        font-size: 14px;
        font-weight: 700;
        color: var(--ink)
    }

    .deliver .ds {
        font-size: 12.5px;
        color: var(--mute)
    }

.quotes {
    display: grid;
    gap: 16px
}

.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow-sm)
}

    .quote .stars {
        display: flex;
        gap: 2px;
        color: #E8A200;
        margin-bottom: 10px
    }

    .quote p {
        font-size: 14.5px;
        color: var(--ink);
        line-height: 1.55;
        margin-bottom: 14px
    }

    .quote .who {
        display: flex;
        align-items: center;
        gap: 11px
    }

    .quote .av {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--grad);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 14px
    }

    .quote .nm {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--ink)
    }

    .quote .rl {
        font-size: 12px;
        color: var(--mute)
    }

/* ============================================================
   ENGAGEMENT MODELS — 3 slim cards
   ============================================================ */
.models {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    align-items: start
}

.model {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    position: relative
}

    .model.feat {
        border-color: transparent;
        box-shadow: var(--shadow-lg);
        outline: 2px solid var(--purple)
    }

    .model .tag {
        position: absolute;
        top: -11px;
        left: 26px;
        background: var(--grad);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .04em;
        padding: 5px 12px;
        border-radius: var(--pill)
    }

    .model .mi {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--tint);
        color: var(--purple);
        display: grid;
        place-items: center;
        margin-bottom: 16px
    }

    .model h3 {
        font-size: 18px;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 3px
    }

    .model .sub {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--magenta);
        margin-bottom: 16px
    }

    .model ul {
        list-style: none;
        display: grid;
        gap: 9px;
        margin-bottom: 20px
    }

    .model li {
        display: flex;
        gap: 9px;
        align-items: center;
        font-size: 13.5px;
        color: var(--ink-soft);
        font-weight: 600
    }

        .model li svg {
            color: var(--green)
        }

    .model .mcta {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 14px;
        font-weight: 800;
        color: var(--purple-deep);
        text-decoration: none
    }

        .model .mcta:hover {
            text-decoration: underline
        }

/* ============================================================
   BECOME A TRAINER — compact band (moved up from the bottom)
   ============================================================ */
.trainer-band {
    background: linear-gradient(135deg,var(--purple-deep),var(--magenta-deep));
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(28px,4vw,48px);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(28px,4vw,48px);
    align-items: center
}

    .trainer-band .eyebrow {
        color: #fff
    }

        .trainer-band .eyebrow::before {
            background: #fff
        }

    .trainer-band h2 {
        font-size: clamp(24px,3vw,34px);
        font-weight: 800;
        line-height: 1.14;
        letter-spacing: -.02em;
        margin-bottom: 12px
    }

    .trainer-band .lede {
        color: rgba(255,255,255,.9);
        margin-bottom: 22px
    }

.benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 18px
}

    .benefits li {
        display: flex;
        gap: 9px;
        align-items: center;
        font-size: 14px;
        font-weight: 600
    }

    .benefits svg {
        color: #fff;
        opacity: .9
    }

.trainer-cta-box {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-lg);
    padding: clamp(22px,3vw,32px);
    text-align: center;
    backdrop-filter: blur(2px)
}

    .trainer-cta-box .big {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 6px
    }

    .trainer-cta-box p {
        font-size: 13.5px;
        color: rgba(255,255,255,.85);
        margin-bottom: 18px
    }

.btn--white {
    background: #fff;
    color: var(--purple-deep)
}

    .btn--white:hover {
        background: #fff;
        transform: translateY(-2px);
        box-shadow: 0 16px 30px -12px rgba(0,0,0,.4)
    }

/* ============================================================
   FAQ — accessible accordion
   ============================================================ */
.faq {
    max-width: 800px;
    margin-inline: auto
}

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

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink)
}

    .faq-q:hover {
        color: var(--purple)
    }

.faq-ic {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--tint);
    color: var(--purple);
    display: grid;
    place-items: center;
    transition: transform .25s,background .2s
}

.faq-q[aria-expanded="true"] .faq-ic {
    transform: rotate(45deg);
    background: var(--grad);
    color: #fff
}

.faq-a {
    overflow: hidden
}

.faq-a-inner {
    padding: 0 4px 22px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 70ch
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
    background: var(--grad);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(36px,5vw,60px);
    text-align: center
}

    .final h2 {
        font-size: clamp(24px,3.2vw,36px);
        font-weight: 800;
        letter-spacing: -.02em;
        margin-bottom: 10px
    }

    .final p {
        color: rgba(255,255,255,.9);
        font-size: 16px;
        max-width: 52ch;
        margin: 0 auto 26px
    }

    .final .btns {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center
    }

    .final .btn--ghost {
        background: transparent;
        color: #fff;
        border-color: rgba(255,255,255,.5)
    }

        .final .btn--ghost:hover {
            background: rgba(255,255,255,.12);
            border-color: #fff
        }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    border-top: 1px solid var(--line);
    padding-block: 34px
}

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

.footer-info {
    font-size: 13px;
    color: var(--mute)
}

    .footer-info strong {
        color: var(--ink)
    }

.social {
    display: flex;
    gap: 10px
}

    .social a {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        color: var(--ink-soft);
        transition: .18s
    }

        .social a:hover {
            color: #fff;
            background: var(--grad);
            border-color: transparent
        }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1FAE54;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 18px;
    border-radius: var(--pill);
    box-shadow: 0 12px 30px -8px rgba(31,174,84,.6)
}

    .wa:hover {
        transform: translateY(-2px)
    }

    .wa .rng {
        position: absolute;
        inset: 0;
        border-radius: var(--pill);
        border: 2px solid #1FAE54;
        animation: ring 2s ease-out infinite
    }

/* ============================================================
   MOTION  (subtle, once; progressive so no-JS shows everything)
   ============================================================ */
@keyframes pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .45
    }
}

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

    100% {
        opacity: 0;
        transform: scale(1.4)
    }
}

.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)
}

    .js .reveal.in {
        opacity: 1;
        transform: none
    }

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }

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

/* ============================================================
   RESPONSIVE  (mobile-first refinements at breakpoints)
   ============================================================ */
@media(max-width:960px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

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

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

    .why-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

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

    .model.feat {
        outline-offset: 0
    }

    .trainer-band {
        grid-template-columns: 1fr;
        gap: 28px
    }

    /* mobile nav: hide inline links, show menu button */
    .nav-links .link {
        display: none
    }

    .menu-btn {
        display: grid
    }

    .mobile-panel {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: max-height .28s ease;
        border-top: 1px solid var(--line);
        background: #fff
    }

        .mobile-panel.open {
            max-height: 340px
        }

        .mobile-panel .inner {
            padding: 14px var(--pad) 20px;
            display: grid;
            gap: 6px
        }

        .mobile-panel a {
            padding: 12px;
            border-radius: 10px;
            font-weight: 700;
            color: var(--ink-soft);
            text-decoration: none
        }

            .mobile-panel a:hover {
                background: var(--wash);
                color: var(--purple)
            }

        .mobile-panel .btn {
            margin-top: 6px
        }
}

@media(max-width:560px) {
    .form-row {
        grid-template-columns: 1fr
    }

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

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

    .hero-actions .btn {
        flex: 1
    }

    .footer-in {
        flex-direction: column;
        text-align: center
    }

    .wa .txt {
        display: none
    }
    /* icon-only on small screens */
}

.form-panel[hidden] {
    display: none !important;
}

/* Render perf: skip painting offscreen lower sections until near viewport.
   Intrinsic size reserves space so there is no layout shift (CLS). */
@supports (content-visibility:auto) {
    .cv {
        content-visibility: auto;
        contain-intrinsic-size: auto 720px
    }
}

figure {
    margin: 25px 0 1rem!important;
}