:root {
    --tl-green-deep: #0a3d2e;
    --tl-green-court: #1b6b4a;
    --tl-green: #2d8f5f;
    --tl-green-bright: #3fa86e;
    --tl-green-light: #74c69d;
    --tl-green-pale: #d8f3dc;
    --tl-green-mist: #ecf5ee;
    --tl-bg: #f7fbf8;
    --tl-bg-white: #ffffff;
    --tl-yellow: #e8c547;
    --tl-yellow-soft: #f5e6a3;
    --tl-yellow-glow: rgba(232, 197, 71, 0.35);
    --tl-clay: #d4734a;
    --tl-clay-dark: #b85c38;
    --tl-navy: #1a2b3c;
    --tl-charcoal: #2c3e50;
    --tl-text: #1a2b3c;
    --tl-text-muted: #4a6b5d;
    --tl-border: #b7e4c7;
    --tl-border-soft: #d4ead9;
    --tl-shadow-sm: 0 8px 24px rgba(10, 61, 46, 0.08);
    --tl-shadow-md: 0 16px 40px rgba(10, 61, 46, 0.12);
    --tl-shadow-lg: 0 24px 56px rgba(10, 61, 46, 0.16);
    --tl-radius-sm: 12px;
    --tl-radius-md: 18px;
    --tl-radius-lg: 24px;
    --tl-radius-pill: 999px;
    --tl-transition: 0.25s ease;
    --tl-court-line: rgba(232, 197, 71, 0.22);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--tl-bg);
    background-image:
            linear-gradient(90deg, transparent 49.85%, var(--tl-court-line) 49.85%, var(--tl-court-line) 50.15%, transparent 50.15%),
            linear-gradient(0deg, transparent 49.85%, var(--tl-court-line) 49.85%, var(--tl-court-line) 50.15%, transparent 50.15%),
            radial-gradient(circle at 12% 8%, rgba(45, 143, 95, 0.06) 0, transparent 42%),
            radial-gradient(circle at 88% 92%, rgba(232, 197, 71, 0.05) 0, transparent 38%);
    background-size: 120px 120px, 120px 120px, 100% 100%, 100% 100%;
    color: var(--tl-text);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-btn {
    display: block;
    max-width: 400px;
    width: 100%;
    border: 2px solid var(--tl-yellow);
    color: var(--tl-navy);
    font-weight: 700;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: var(--tl-radius-pill);
    text-decoration: none;
    text-align: center;
    background: linear-gradient(135deg, var(--tl-yellow) 0%, var(--tl-yellow-soft) 100%);
    box-shadow: var(--tl-shadow-sm);
    transition: background var(--tl-transition), color var(--tl-transition), transform var(--tl-transition), box-shadow var(--tl-transition), border-color var(--tl-transition);
}

.hero-btn:hover {
    background: linear-gradient(135deg, var(--tl-green) 0%, var(--tl-green-court) 100%);
    border-color: var(--tl-green-deep);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: var(--tl-shadow-md);
}