@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --bg: #060a16;
    --surface: #10182a;
    --text: #edf4ff;
    --muted: #a2afc6;
    --line: #26344b;
    --blue: #6a86ff;
    --cyan: #59e7e0
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(ellipse at 80% 0%, #132c5a 0%, transparent 35%), var(--bg);
    color: var(--text);
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.65
}

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

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px
}

.container {
    max-width: 1140px;
    margin: auto;
    padding: 0 24px
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #060a16ed;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px)
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 76px;
    gap: 20px
}

.brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.38rem;
    letter-spacing: -.06em
}

.brand i {
    font-style: normal;
    color: var(--cyan)
}

.links {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap
}

.links a {
    font-size: .91rem;
    color: #d0d9ea
}

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

.lang {
    border: 1px solid var(--line);
    padding: 5px 11px;
    border-radius: 9px
}

.hero {
    padding: 112px 0 100px
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cyan)
}

h1,
h2,
h3 {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.17;
    letter-spacing: -.045em
}

h1 {
    font-size: clamp(2.65rem, 7vw, 5.5rem);
    max-width: 870px;
    margin: 19px 0 26px
}

h2 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    margin: 12px 0 20px
}

h3 {
    font-size: 1.27rem;
    margin: 0 0 8px
}

.gradient {
    background: linear-gradient(100deg, #a5b9ff, #5bebdb);
    background-clip: text;
    color: transparent
}

.lead {
    font-size: 1.14rem;
    color: var(--muted);
    max-width: 750px
}

.actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 32px
}

.btn {
    display: inline-block;
    padding: 13px 21px;
    border-radius: 11px;
    font-weight: 700;
    background: linear-gradient(110deg, #7586ff, #58daca);
    color: #051020
}

.btn.secondary {
    background: transparent;
    border: 1px solid #50617d;
    color: var(--text)
}

.section {
    padding: 78px 0
}

.section.alt {
    background: #0b1221
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px
}

.card {
    border: 1px solid var(--line);
    background: linear-gradient(155deg, #17243b, #0d1626);
    border-radius: 18px;
    padding: 27px
}

.card p,
.muted {
    color: var(--muted)
}

.number {
    font-size: 1.7rem;
    color: var(--cyan);
    font-weight: 700
}

.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center
}

.preview {
    border: 1px solid #344a72;
    background: radial-gradient(circle at 50% 20%, #244078, #111b31 70%);
    border-radius: 25px;
    min-height: 380px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.preview .bar {
    height: 11px;
    border-radius: 8px;
    background: #6477a655;
    margin: 9px 0
}

.preview .bar:nth-child(2) {
    width: 79%
}

.preview .bar:nth-child(3) {
    width: 63%
}

.pill {
    display: inline-block;
    border: 1px solid #417b83;
    color: var(--cyan);
    border-radius: 30px;
    padding: 4px 12px;
    font-size: .82rem
}

.footer {
    border-top: 1px solid var(--line);
    padding: 45px 0;
    color: var(--muted)
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

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

.page-heading {
    padding: 70px 0 28px
}

.prose {
    max-width: 800px;
    padding-bottom: 80px
}

.prose h2 {
    font-size: 1.65rem;
    margin-top: 35px
}

.prose a {
    color: var(--cyan);
    text-decoration: underline
}

.prose li {
    margin: 8px 0
}

.delete-request-action {
  margin-top: 24px;
}

.delete-request-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.delete-request-action .privacy-note {
  margin-top: 12px;
}

.notice {
    border-left: 3px solid var(--cyan);
    padding: 16px 20px;
    background: #132238;
    border-radius: 6px;
    margin: 28px 0
}

.menu-button {
    display: none;
    background: none;
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 8px;
    color: white;
    font-size: 1.2rem
}

@media(max-width:760px) {
    .menu-button {
        display: block
    }

    .links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 76px;
        padding: 22px 24px;
        background: #0a1323;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid var(--line)
    }

    .links.open {
        display: flex
    }

    .hero {
        padding: 75px 0 70px
    }

    .grid,
    .feature {
        grid-template-columns: 1fr
    }

    .section {
        padding: 55px 0
    }

    .preview {
        min-height: 280px
    }
}

/* GYM EXP commercial lead form */
.gym-contact-section {
    margin: 55px 0 80px;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid #29456a;
    border-radius: 24px;
    background: linear-gradient(150deg, #14233e, #0a1428);
    box-shadow: 0 15px 55px #0004
}

.gym-contact-section h2 {
    margin-top: 8px
}

.gym-contact-section .lead {
    margin-bottom: 24px
}

.gym-lead-form {
    display: grid;
    gap: 17px
}

.gym-lead-form .field {
    display: grid;
    gap: 6px
}

.gym-lead-form label,
.gym-lead-form legend {
    font-size: .94rem;
    color: #e3ebf9;
    font-weight: 600
}

.gym-lead-form input,
.gym-lead-form select,
.gym-lead-form textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: #080f20;
    color: #eff5ff;
    border: 1px solid #45607c;
    border-radius: 10px;
    font: inherit
}

.gym-lead-form input:focus,
.gym-lead-form select:focus,
.gym-lead-form textarea:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 1px
}

.gym-lead-form textarea {
    min-height: 110px;
    resize: vertical
}

.gym-lead-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.gym-lead-form button {
    border: 0;
    cursor: pointer;
    width: 100%;
    max-width: 310px;
    font: inherit
}

.gym-lead-form button:disabled {
    opacity: .65;
    cursor: wait
}

.gym-lead-form .privacy-note {
    font-size: .86rem;
    color: var(--muted);
    margin: 0
}

.gym-lead-form .privacy-note a {
    color: var(--cyan)
}

.gym-lead-form .form-status {
    min-height: 1.7em;
    color: #ffbfbb;
    margin: 0
}

.gym-lead-form .form-status.ok {
    color: var(--cyan)
}

@media(max-width:650px) {
    .gym-lead-form .form-grid {
        grid-template-columns: 1fr
    }
}