@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;600;700&family=Savate:ital,wght@0,400;0,600;0,700;1,600&display=swap");

:root { --ink:#333333; --muted:#596472; --paper:#f8fafc; --blue:#3ca9ff; --pale-blue:#d9eefd; --orange:#ff6f3c; --yellow:#ffd921; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Alegreya Sans", Arial, sans-serif; }
a { color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
.shell { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); border-bottom:1px solid #e7eef4; backdrop-filter:blur(16px); }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { text-decoration:none; font:700 24px/1 "Savate", sans-serif; letter-spacing:-.035em; display:inline-flex; align-items:center; gap:10px; }
.brand img { height:38px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:27px; }
.nav-links > a { text-decoration:none; font-weight:700; }
.nav-cta { padding:12px 18px; border-radius:10px; background:var(--blue); color:white; }

.hero { min-height:720px; display:grid; grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr); align-items:center; gap:54px; padding-block:55px; }
.hero-copy { max-width:560px; }
.eyebrow-pill { display:inline-flex; padding:7px 13px; border-radius:999px; background:var(--pale-blue); color:#0d6faa; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
h1, h2, h3, p { margin-top:0; }
h1 { margin:22px 0 15px; font:600 clamp(58px,6vw,86px)/.92 "Savate", sans-serif; letter-spacing:-.06em; }
.made-line { margin-bottom:23px; font:600 clamp(25px,2.5vw,32px)/1.1 "Savate", sans-serif; letter-spacing:-.035em; }
.made-line span, .hero-description, .product-swap { animation:reveal .38s ease both; }
.hero-description { min-height:112px; max-width:520px; color:var(--muted); font-size:20px; font-weight:500; line-height:1.42; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }
.button { min-height:51px; display:inline-flex; align-items:center; justify-content:center; padding:0 23px; border-radius:12px; text-decoration:none; font-size:16px; font-weight:700; transition:transform .2s ease, box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(34,110,159,.12); }
.button-primary { background:var(--blue); color:white; border:1px solid var(--blue); }
.button-secondary { background:white; color:#167ab8; border:1px solid var(--blue); }
.button-secondary span { margin-left:8px; }
.proof-list { margin:27px 0 0; padding:0; display:grid; gap:9px; list-style:none; color:var(--muted); font-size:15px; font-weight:500; }
.proof-list li { display:flex; align-items:center; gap:10px; }
.proof-list li > span { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:#2d2b26; font-weight:900; font-size:12px; }
.hero-product { min-width:0; }
.product-stage { height:520px; position:relative; isolation:isolate; }
.stage-glow { position:absolute; inset:8% 1% 8% 4%; z-index:-2; border-radius:50%; background:radial-gradient(circle, #fff 0 45%, rgba(255,255,255,0) 72%); }
.photo-card, .prompt-card { position:absolute; overflow:hidden; border:8px solid #fff; background:#fff; border-radius:20px; box-shadow:0 24px 55px rgba(44,80,105,.16); }
.photo-card { left:1%; top:8%; width:205px; height:270px; transform:rotate(-6deg); }
.photo-card img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.photo-card span { position:absolute; left:11px; right:11px; bottom:11px; padding:9px; border-radius:9px; background:rgba(255,255,255,.92); color:#333; font-size:13px; font-weight:700; text-align:center; }
.game-box { position:absolute; right:3%; top:15%; width:232px; height:304px; overflow:hidden; padding:25px; display:flex; flex-direction:column; color:white; border-radius:27px; background:var(--accent); transform:rotate(5deg); box-shadow:0 30px 70px rgba(44,80,105,.18); }
.game-box::after { content:""; position:absolute; width:190px; height:190px; left:-70px; bottom:-70px; border:1px solid rgba(255,255,255,.34); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.1),0 0 0 68px rgba(255,255,255,.08); }
.game-box small { position:relative; z-index:1; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.game-box strong { position:relative; z-index:1; margin-top:58px; max-width:170px; font:600 34px/.95 "Savate",sans-serif; letter-spacing:-.045em; }
.game-box span { position:absolute; z-index:1; bottom:25px; left:25px; font-weight:600; }
.prompt-card { left:24%; bottom:4%; width:260px; min-height:190px; padding:22px 20px; transform:rotate(4deg); }
.prompt-card small { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.prompt-card strong { display:block; margin-top:24px; font:600 25px/1.08 "Savate",sans-serif; letter-spacing:-.03em; }
.player-badge { position:absolute; right:8%; bottom:7%; width:86px; height:86px; display:grid; place-items:center; text-align:center; border-radius:50%; background:var(--yellow); transform:rotate(-7deg); box-shadow:0 16px 32px rgba(44,80,105,.13); font-size:14px; font-weight:700; line-height:1.05; }
.game-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:-2px; }
.game-tabs button { padding:9px 13px; cursor:pointer; border:1px solid #dbe5ec; border-radius:999px; background:white; color:#697582; font:600 13px/1 "Alegreya Sans",sans-serif; }
.game-tabs button[aria-pressed="true"] { color:#27333b; border-color:var(--tab-accent); box-shadow:inset 0 0 0 1px var(--tab-accent); }

.games-section { padding:80px 64px 72px; background:white; border:1px solid #e4eef6; border-radius:36px; scroll-margin-top:100px; }
.section-heading h2 { margin:0; font:600 clamp(43px,5vw,58px)/.98 "Savate",sans-serif; letter-spacing:-.05em; }
.section-heading > p, .section-heading div + p { margin:0; color:var(--muted); font-size:18px; font-weight:500; line-height:1.4; }
.split-heading { display:grid; grid-template-columns:1fr 320px; align-items:end; gap:48px; }
.kicker { margin-bottom:13px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.game-grid { margin-top:43px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.game-card { padding:22px; border:1px solid #d9eefd; border-radius:25px; background:white; }
.game-card-art { position:relative; height:238px; overflow:hidden; border-radius:18px; background:var(--pale); }
.mini-photo, .mini-box { position:absolute; top:20px; height:198px; border-radius:15px; box-shadow:0 13px 28px rgba(44,80,105,.12); }
.mini-photo { left:23px; width:172px; overflow:hidden; transform:rotate(-4deg); }
.mini-photo img { width:100%; height:100%; object-fit:cover; }
.mini-box { right:24px; width:152px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; color:white; background:var(--accent); transform:rotate(6deg); }
.mini-box small { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.mini-box strong { font:600 29px/.95 "Savate",sans-serif; letter-spacing:-.04em; }
.game-card h3 { margin:20px 0 7px; font:600 34px/1 "Savate",sans-serif; letter-spacing:-.035em; }
.game-card > p { margin:0; color:var(--muted); font-size:17px; font-weight:500; line-height:1.35; }
.game-card .availability { margin:20px 0 7px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.game-card .availability + h3 { margin-top:0; }
.text-link { display:inline-flex; margin-top:18px; color:#126fa8; font-size:16px; font-weight:700; text-decoration:none; }
.text-link span { margin-left:7px; }

.occasion-section { padding:88px 0 112px; scroll-margin-top:80px; }
.occasion-grid { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.occasion-card { min-height:190px; padding:25px; border:1px solid #dfe9f0; border-radius:21px; background:white; transition:transform .2s ease,box-shadow .2s ease; }
.occasion-card:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(44,80,105,.1); }
.occasion-card > span { display:block; color:var(--blue); font:700 24px/1 "Savate",sans-serif; }
.occasion-card h3 { margin:28px 0 8px; font:600 29px/1 "Savate",sans-serif; letter-spacing:-.035em; }
.occasion-card p { margin:0; color:var(--muted); font-size:16px; font-weight:500; line-height:1.34; }

.how-section { padding:112px 64px; scroll-margin-top:80px; }
.centered-heading { max-width:730px; margin-inline:auto; text-align:center; }
.centered-heading > p:last-child { margin:17px auto 0; max-width:650px; }
.steps-grid { margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-card { min-height:248px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #e2ebf1; border-radius:22px; background:white; }
.step-card > span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); font:700 20px/1 "Savate",sans-serif; }
.step-card h3 { margin:0 0 7px; font:600 26px/1 "Savate",sans-serif; letter-spacing:-.03em; }
.step-card p { margin:0; color:var(--muted); font-size:17px; line-height:1.35; }

.examples-section { padding:0 0 112px; scroll-margin-top:85px; }
.example-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:43px; }
.example-card { padding:15px 15px 24px; border-radius:22px; background:white; border:1px solid #e2ebf1; }
.example-photo { height:240px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(140deg,#d9eefd,#f5fbff 68%); color:#427a9d; font-weight:700; font-size:13px; }
.example-1 { background:linear-gradient(140deg,#fff0c6,#fffaf0 68%); color:#9c6525; }
.example-2 { background:linear-gradient(140deg,#ffe1d7,#fff7f3 68%); color:#a54d35; }
.example-photo span { padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.74); }
.example-card h3 { margin:20px 7px 8px; font:600 28px/1 "Savate",sans-serif; letter-spacing:-.035em; }
.example-card p { margin:0 7px; color:var(--muted); font-size:16px; font-weight:500; line-height:1.35; }

.materials-section { padding:74px; display:grid; grid-template-columns:1fr minmax(330px,.85fr); align-items:center; gap:70px; border-radius:36px; background:#eaf6fb; }
.materials-copy h2 { margin:0; max-width:560px; font:600 clamp(43px,5vw,58px)/.98 "Savate",sans-serif; letter-spacing:-.05em; }
.materials-copy > p:last-child { margin:20px 0 0; max-width:540px; color:var(--muted); font-size:18px; font-weight:500; line-height:1.42; }
.materials-list { margin:0; padding:0; display:grid; gap:12px; list-style:none; }
.materials-list li { padding:16px; display:flex; align-items:center; gap:12px; border:1px solid #d5e5ed; border-radius:14px; background:white; color:#43515c; font-size:17px; font-weight:700; }
.materials-list span { color:var(--blue); font:700 19px/1 "Savate",sans-serif; }
.closing { min-height:400px; padding:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:36px; background:var(--blue); color:white; }
.dark-kicker { color:#0b4f7a; }
.closing h2 { margin:0; max-width:800px; font:600 clamp(46px,5.5vw,64px)/.96 "Savate",sans-serif; letter-spacing:-.05em; }
.closing > p:not(.kicker) { margin:22px 0; color:#eaf7ff; font-size:20px; }
.closing-button { background:var(--orange); color:white; }
.closing-secondary { background:white; color:#126fa8; }
.footer { height:150px; display:flex; align-items:center; justify-content:space-between; }
.footer p { margin:0; color:#66727e; }

@keyframes reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:70px; gap:34px; }
  .hero-copy { max-width:680px; }
  .hero-product { width:min(650px,100%); margin-inline:auto; }
  .split-heading { grid-template-columns:1fr; align-items:start; gap:20px; }
  .split-heading > p { max-width:600px; }
  .occasion-grid { grid-template-columns:repeat(2,1fr); }
  .game-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .step-card { min-height:210px; }
  .example-grid { grid-template-columns:1fr; }
  .materials-section { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:600px) {
  .shell { width:min(100% - 32px,1120px); }
  .nav { height:70px; }
  .nav-links > a:not(.nav-cta) { display:none; }
  .nav-cta { padding:10px 14px; }
  .hero { min-height:auto; padding:38px 0 64px; gap:25px; }
  h1 { font-size:clamp(49px,14.4vw,64px); }
  .made-line { font-size:26px; }
  .hero-description { min-height:112px; font-size:18px; }
  .hero-actions { display:grid; }
  .button { width:100%; }
  .product-stage { height:420px; transform:scale(.9); transform-origin:top center; margin-bottom:-38px; }
  .photo-card { width:170px; height:225px; left:-1%; }
  .game-box { width:195px; height:260px; right:0; }
  .game-box strong { margin-top:45px; font-size:29px; }
  .prompt-card { width:220px; min-height:165px; left:16%; }
  .prompt-card strong { font-size:21px; }
  .player-badge { right:1%; }
  .game-tabs { gap:6px; }
  .game-tabs button { padding:9px 10px; }
  .games-section { width:100%; padding:62px 20px; border-left:0; border-right:0; border-radius:0; }
  .section-heading h2 { font-size:40px; }
  .game-card { padding:18px; }
  .game-card-art { height:225px; }
  .mini-photo { left:14px; width:155px; height:188px; }
  .mini-box { right:14px; width:142px; height:188px; }
  .mini-box strong { font-size:26px; }
  .game-card h3 { font-size:31px; }
  .occasion-section { padding:68px 0 80px; }
  .occasion-grid { grid-template-columns:1fr; margin-top:38px; }
  .occasion-card { min-height:165px; }
  .how-section { padding:80px 0; }
  .steps-grid { margin-top:38px; }
  .examples-section { padding-bottom:80px; }
  .example-photo { height:210px; }
  .materials-section { width:100%; padding:56px 20px; border-radius:0; }
  .closing { min-height:480px; padding:44px 24px; border-radius:26px; }
  .closing h2 { font-size:42px; }
  .footer { height:110px; }
  .footer p { display:none; }
}