:root {
    --ink: oklch(20% 0.04 243);
    --muted: oklch(41% 0.035 238);
    --paper: oklch(98% 0.015 95);
    --surface: oklch(99% 0.01 96);
    --line: oklch(85% 0.03 220);
    --sky: oklch(80% 0.11 229);
    --pond: oklch(70% 0.14 234);
    --grass: oklch(71% 0.12 145);
    --grass-deep: oklch(58% 0.09 148);
    --sand: oklch(90% 0.05 91);
    --stone: oklch(57% 0.03 244);
    --coral: oklch(70% 0.18 30);
    --sun: oklch(89% 0.09 95);
    --shadow: 0 28px 72px oklch(25% 0.03 240 / 0.17);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 8%, oklch(90% 0.08 223 / 0.82), transparent 26rem),
        radial-gradient(circle at 90% 22%, oklch(92% 0.06 95 / 0.9), transparent 24rem),
        linear-gradient(180deg, oklch(98% 0.01 96), oklch(95% 0.03 140));
    line-height: 1.6;
}

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

a {
    color: inherit;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    background: oklch(99% 0.01 95 / 0.9);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}

.nav-left,
.brand,
.app-logo {
    display: inline-flex;
    align-items: center;
}

.nav-left {
    gap: 1rem;
    min-width: 0;
}

.brand,
.app-logo,
.nav-links a {
    text-decoration: none;
    font-weight: 850;
}

.brand {
    gap: 0.55rem;
    color: var(--muted);
}

.brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.app-logo {
    gap: 0.65rem;
}

.app-logo img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    box-shadow: 0 10px 22px oklch(30% 0.04 225 / 0.14);
}

.nav-links {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.94rem;
}

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

.hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: calc(100vh - 76px);
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: oklch(97% 0.02 95);
    border: 1px solid oklch(84% 0.05 90);
    color: oklch(42% 0.1 88);
    font-size: 0.82rem;
    font-weight: 900;
}

.kicker::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: var(--pond);
    box-shadow: 0.9rem 0 0 var(--grass), 1.8rem 0 0 var(--coral);
}

h1 {
    max-width: 6ch;
    margin: 0;
    font-size: clamp(4rem, 10vw, 8.5rem);
    line-height: 0.86;
}

.tagline {
    margin: 1.35rem 0 0;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    line-height: 1.08;
    font-weight: 900;
    color: oklch(39% 0.1 216);
}

.intro {
    max-width: 38rem;
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1rem + 0.55vw, 1.28rem);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: 0.85rem 1.25rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 12px 0 oklch(20% 0.04 235 / 0.12);
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 0 oklch(20% 0.04 235 / 0.1);
}

.button.secondary {
    background: var(--surface);
    color: var(--ink);
}

.hero-stage {
    position: relative;
    min-height: clamp(24rem, 52vw, 43rem);
    border: 5px solid var(--surface);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--sky) 0 48%, oklch(88% 0.05 102) 48% 54%, var(--grass) 54% 72%, var(--grass-deep) 72% 100%);
    box-shadow: var(--shadow);
    transform: rotate(1deg);
}

.course-scene {
    position: absolute;
    inset: 0;
}

.course-scene::before,
.course-scene::after {
    content: "";
    position: absolute;
    inset: 11% 11% 26%;
    border-radius: 44%;
    pointer-events: none;
}

.course-scene::before {
    background: radial-gradient(circle, oklch(99% 0.01 220 / 0.2), transparent 70%);
    transform: scale(1.25, 1.02);
}

.course-scene::after {
    background:
        linear-gradient(90deg, transparent 0 26%, oklch(95% 0.02 95 / 0.48) 26% 31%, transparent 31% 53%, oklch(95% 0.02 95 / 0.42) 53% 58%, transparent 58% 100%),
        linear-gradient(180deg, oklch(92% 0.05 92), oklch(85% 0.05 86));
    clip-path: polygon(63% 4%, 84% 12%, 97% 29%, 74% 49%, 83% 74%, 63% 97%, 40% 88%, 47% 65%, 22% 53%, 38% 28%, 44% 8%);
    box-shadow: inset 0 0 0 10px oklch(76% 0.04 86 / 0.6);
}

.path-route {
    position: absolute;
    background: oklch(69% 0.05 142 / 0.35);
    border-radius: 999px;
}

.path-route-a {
    width: 34%;
    height: 5%;
    left: 30%;
    top: 50%;
    transform: rotate(-38deg);
}

.path-route-b {
    width: 26%;
    height: 5%;
    left: 50%;
    top: 30%;
    transform: rotate(52deg);
}

.waterfall {
    position: absolute;
    inset: auto 0 0;
    height: 26%;
    background:
        repeating-linear-gradient(90deg, oklch(89% 0.04 106 / 0.72) 0 0.8rem, transparent 0.8rem 1.65rem),
        linear-gradient(180deg, oklch(63% 0.15 237), oklch(58% 0.11 223));
}

.waterfall::before,
.waterfall::after {
    content: "";
    position: absolute;
    top: -0.4rem;
    width: 22%;
    height: 100%;
    background:
        repeating-linear-gradient(90deg, oklch(88% 0.04 106 / 0.68) 0 0.65rem, transparent 0.65rem 1.45rem),
        linear-gradient(180deg, oklch(68% 0.14 236), oklch(60% 0.11 223));
}

.waterfall::before {
    left: -4%;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.waterfall::after {
    right: -4%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.flag-ring,
.flag-pole {
    position: absolute;
}

.flag-ring {
    left: 12%;
    top: 18%;
    width: 11%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0.5rem solid oklch(93% 0.08 94);
}

.flag-pole {
    left: 17%;
    top: 20%;
    width: 0.8rem;
    height: 16%;
    border-radius: 999px;
    background: linear-gradient(180deg, oklch(41% 0.03 35), oklch(23% 0.02 35));
}

.flag-pole::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.3rem;
    width: 4rem;
    height: 2.8rem;
    background: var(--coral);
    clip-path: polygon(0 0, 100% 36%, 0 100%);
}

.pond,
.pit {
    position: absolute;
}

.pond {
    border-radius: 48%;
    background: var(--pond);
    border: 5px solid oklch(95% 0.02 210 / 0.9);
    box-shadow: inset 0 0 0 0.5rem oklch(80% 0.07 210 / 0.35);
}

.pond-a {
    width: 22%;
    height: 14%;
    left: 10%;
    top: 48%;
}

.pond-b {
    width: 18%;
    height: 12%;
    right: 14%;
    top: 22%;
}

.pond-c {
    width: 24%;
    height: 14%;
    right: 14%;
    bottom: 10%;
}

.pit {
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: oklch(18% 0.02 26);
    box-shadow: inset 0 0 0 0.45rem oklch(28% 0.02 28);
}

.pit-a {
    left: 42%;
    top: 52%;
}

.pit-b {
    right: 27%;
    bottom: 20%;
}

.hero-icon,
.ball-shadow {
    position: absolute;
}

.ball-shadow {
    width: 32%;
    height: 10%;
    right: 12%;
    bottom: 16%;
    border-radius: 50%;
    background: oklch(19% 0.03 238 / 0.2);
    filter: blur(18px);
}

.hero-icon {
    width: min(17rem, 34%);
    right: 10%;
    bottom: 13%;
    border-radius: 22%;
    box-shadow: 0 26px 40px oklch(24% 0.03 240 / 0.16);
}

.hero-note {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: 22rem;
    padding: 0.8rem 0.9rem;
    border-radius: 8px;
    border: 1px solid oklch(86% 0.04 92);
    background: oklch(99% 0.015 94 / 0.92);
    font-weight: 850;
}

.stripe {
    display: flex;
    gap: 0.75rem;
    overflow: hidden;
    padding: 0.85rem 0;
    background: var(--ink);
    color: var(--paper);
    font-weight: 900;
    white-space: nowrap;
}

.stripe span {
    animation: marquee 18s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.section,
.download,
.content-shell {
    padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem);
}

.section-inner,
.download-content,
.content {
    max-width: 1100px;
    margin: 0 auto;
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.section h2,
.download h2,
.page-title {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 0.95;
}

.section p,
.download p,
.content p,
.content li {
    color: var(--muted);
    font-size: 1.05rem;
}

.course-card,
.feature,
.content {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: oklch(99% 0.01 95 / 0.94);
    box-shadow: 0 18px 40px oklch(28% 0.03 240 / 0.08);
}

.course-card {
    padding: 1.3rem;
}

.course-chip {
    display: inline-flex;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: oklch(97% 0.03 95);
    border: 1px solid oklch(85% 0.05 90);
    font-weight: 900;
}

.course-list,
.content ul {
    padding-left: 1.2rem;
}

.course-list li + li,
.content li + li {
    margin-top: 0.6rem;
}

.features {
    background: oklch(97% 0.018 210 / 0.72);
}

.feature-run {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.feature {
    padding: 1.3rem;
}

.feature h3 {
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
}

.download-content {
    text-align: center;
}

.content-shell {
    max-width: 980px;
    margin: 0 auto;
}

.content {
    margin-top: 1.5rem;
    padding: clamp(1.4rem, 3vw, 2rem);
}

.content h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

.content h2 + p,
.content h2 + ul {
    margin-top: 0.5rem;
}

.content h2:not(:first-child) {
    margin-top: 2rem;
}

footer {
    padding: 1.2rem clamp(1rem, 4vw, 4rem) 2rem;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
}

.footer-links {
    display: flex;
    gap: 1rem;
}

@media (max-width: 900px) {
    .hero,
    .split,
    .feature-run {
        grid-template-columns: 1fr;
    }

    .hero-stage {
        min-height: 28rem;
        transform: none;
    }
}

@media (max-width: 720px) {
    .site-nav,
    .nav-left,
    .nav-links,
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links {
        gap: 0.6rem;
    }

    .hero-icon {
        width: 42%;
        right: 8%;
    }
}