:root { --black: #353434; --white: #f4f3ef; --yellow: #D8E600; --grey: #d8d8d3; --font-display: "Anton", Impact, sans-serif; --font-body: "Barlow Condensed", Arial, sans-serif; --max-width: 1400px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 18px; line-height: 1.3; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.section-black { background: var(--black); color: var(--white); }
.section-yellow { background: var(--yellow); }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 2px; margin-bottom: 30px; }
.hero { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 140px 8vw 70px; background: var(--white); overflow: hidden; }
.hero-small { font-weight: 800; letter-spacing: 2px; font-size: 15px; margin-bottom: 30px; }
.hero h1 { position: relative; z-index: 2; font-family: var(--font-display); line-height: .83; letter-spacing: -3px; text-transform: uppercase; max-width: 1200px; }
.hero h1 span { color: var(--yellow); -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; }
.hero-bottom { display: flex; align-items: center; gap: 40px; margin-top: 70px; position: relative; z-index: 3; }
.hero-bottom p { max-width: 420px; font-size: 20px; font-weight: 500; }
.sticker { width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--yellow); border: 4px solid var(--black); border-radius: 50%; font-family: var(--font-display); font-size: 38px; line-height: .8; transform: rotate(-8deg); box-shadow: 7px 7px 0 var(--black); }
.sticker small { font-family: var(--font-body); font-weight: 800; margin-top: 8px; letter-spacing: 1px; }
.hero-shape { position: absolute; right: 5vw; bottom: 12vh; width: 150px; height: 150px; background: var(--yellow); display: flex; justify-content: center; align-items: center; font-size: 70px; transform: rotate(12deg); border: 3px solid var(--black); z-index: 1; }
.halftone { position: absolute; width: 300px; height: 300px; opacity: .2; background-image:
    radial-gradient(var(--black) 1.5px, transparent 1.5px); background-size: 12px 12px; pointer-events: none; }
.halftone-top { top: 0; right: 0; transform: rotate(12deg); }
.halftone-bottom { bottom: -100px; left: -50px; background-image:
    radial-gradient(var(--yellow) 1.5px, transparent 1.5px); }
.intro { min-height: 800px; position: relative; padding: 140px 8vw; display: flex; justify-content: center; align-items: center; }
.intro-content { width: min(100%, 1100px); }
.intro h2, .values h2, .membership h2 { font-family: var(--font-display); font-size: clamp(65px, 9vw, 140px); line-height: .85; letter-spacing: -2px; }
.intro h2 span, .values h2 span, .membership h2 span { color: var(--yellow); }
.intro-text { max-width: 600px; margin-left: auto; margin-top: 70px; font-size: 22px; }
.intro-text p + p { margin-top: 25px; }
.intro-text strong { color: var(--yellow); }
.values { position: relative; padding: 150px 8vw; }
.values-header { max-width: 1100px; margin: 0 auto 100px; }
.cards { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { min-height: 440px; padding: 35px; border: 3px solid var(--black); position: relative; display: flex; flex-direction: column; transition: .25s ease; }
.card:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: 10px 10px 0 var(--black); }
.card-yellow { background: var(--yellow); }
.card-number { font-weight: 800; letter-spacing: 2px; }
.card-icon { margin: auto 0 30px; font-family: var(--font-display); font-size: 70px; line-height: 1; }
.card h3 { font-family: var(--font-display); margin-bottom: 20px; }
.card p { font-size: 19px; }
.big-number { min-height: 800px; position: relative; display: flex; align-items: center; padding: 120px 8vw; overflow: hidden; }
.big-number-bg { position: absolute; right: -50px; bottom: -180px; font-family: var(--font-display); font-size: min(65vw, 900px); line-height: .7; color: transparent; -webkit-text-stroke: 2px #333; opacity: .6; }
.big-number-content { position: relative; z-index: 2; max-width: 900px; }
.number { font-family: var(--font-display); font-size: clamp(150px, 25vw, 360px); line-height: .7; color: var(--yellow); -webkit-text-stroke: 3px var(--white); }
.number span { font-size: .4em; }
.big-number h2 { font-family: var(--font-display); font-size: clamp(55px, 8vw, 120px); line-height: .85; margin-top: 50px; }
.big-number h2 span { color: var(--yellow); }
.big-number-text { max-width: 450px; margin-top: 40px; font-size: 21px; }
.membership { min-height: 900px; position: relative; padding: 150px 8vw; overflow: hidden; }
.membership-content { max-width: 900px; margin: auto; position: relative; z-index: 2; }
.membership h2 { margin-bottom: 50px; }
.price { display: flex; align-items: baseline; gap: 20px; border-top: 4px solid var(--black); border-bottom: 4px solid var(--black); padding: 20px 0; margin-bottom: 35px; }
.price-number { font-family: var(--font-display); font-size: clamp(130px, 20vw, 260px); line-height: .7; }
.price-unit { font-family: var(--font-display); font-size: 38px; }
.membership-text { max-width: 500px; font-size: 23px; margin-bottom: 45px; }
.membership-list { list-style: none; font-size: 19px; font-weight: 700; line-height: 2; }
.membership-decoration { position: absolute; right: -100px; bottom: -200px; font-family: var(--font-display); font-size: 500px; line-height: .7; opacity: .08; transform: rotate(-10deg); }
.final { min-height: 850px; background: var(--black); color: var(--white); position: relative; padding: 150px 8vw; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.final .eyebrow { position: relative; z-index: 2; }
.final h2 { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(80px, 12vw, 180px); line-height: .78; letter-spacing: -3px; margin-bottom: 50px; }
.final h3 { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(40px, 6vw, 80px); line-height: .85; }
.final h3 span { color: var(--yellow); }
.cta { width: fit-content; margin-top: 60px; background: var(--yellow); color: var(--black); padding: 18px 28px; font-weight: 800; font-size: 18px; border: 3px solid var(--yellow); transition: .2s ease; }
.cta span { margin-left: 30px; font-size: 25px; }
.cta:hover { background: transparent; color: var(--yellow); transform: translateX(8px); }
@media (max-width: 900px) {
.hero { padding: 130px 25px 60px; min-height: 850px; }
.hero h1 { font-size: clamp(65px, 17vw, 120px); letter-spacing: -2px; }
.hero h1 span { -webkit-text-stroke: 2px var(--black); }
.hero-bottom { align-items: flex-start; gap: 25px; margin-top: 60px; }
.sticker { width: 90px; height: 90px; font-size: 28px; flex-shrink: 0; }
.hero-bottom p { font-size: 17px; }
.hero-shape { width: 90px; height: 90px; font-size: 45px; right: 15px; bottom: 30px; }
.intro, .values, .membership, .final { padding: 100px 25px; }
.intro { min-height: auto; }
.intro h2, .values h2, .membership h2 { font-size: clamp(60px, 16vw, 100px); }
.intro-text { margin-top: 50px; font-size: 19px; }
.cards { grid-template-columns: 1fr; gap: 25px; }
.card { min-height: 380px; }
.big-number { min-height: 700px; padding: 100px 25px; }
.number { font-size: 45vw; }
.big-number-bg { font-size: 100vw; }
.membership { min-height: 750px; }
.price-number { font-size: 38vw; }
.price-unit { font-size: 25px; }
.membership-list { font-size: 16px; }
.final { min-height: 750px; }
.final h2 { font-size: 18vw; }
}
@media (max-width: 500px) {
body { font-size: 16px; }
.hero h1 { font-size: 19vw; }
.hero-bottom { flex-direction: column; }
.hero-bottom p { max-width: 300px; }
.card h3 { font-size: 45px; }
.big-number { min-height: 600px; }
.big-number h2 { font-size: 15vw; }
.membership h2 { font-size: 19vw; }
.price { gap: 10px; }
.price-unit { font-size: 20px; }
.final h2 { font-size: 20vw; }
.final h3 { font-size: 11vw; }
}
.membership h2 span { color: var(--black); }
.values h2 span { color: var(--black); }
.hero h1, .intro h2, .values h2, .membership h2, .big-number h2, .final h2, .final h3 { line-height: 1.05; letter-spacing: -.015em; }
.hero h1 { font-size: clamp(60px, 10vw, 150px); }
.card h3 { font-size: clamp(28px, 3.1vw, 45px); line-height: 1.1; overflow-wrap: anywhere; }
.cards > * { min-width: 0; }
.sticker small { font-size: 14px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
@media (max-width: 900px) {
.hero h1 { font-size: clamp(48px, 13vw, 105px); }
.card h3 { font-size: 40px; }
.hero-shape { display: none; }
}
@media (max-width: 500px) {
.hero h1 { font-size: 12.5vw; }
.final h2 { font-size: 17vw; }
.membership-list { line-height: 1.5; }
.membership-list > li + li { margin-top: 12px; }
.final { padding-bottom: 190px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; }
}

.card-icon svg { display: block; color: var(--black); }