:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --blue: #0071e3;
  --blue-2: #0077ed;
  --indigo: #5e5ce6;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 28px;
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.5; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .35em; letter-spacing: -.03em; line-height: 1.05; font-weight: 700; }
button { font: inherit; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.grad { background: linear-gradient(90deg, #5e5ce6, #0a84ff 45%, #30d0c6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { margin: 0 0 12px; font-weight: 600; font-size: 1.05rem; color: #bf4800; }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--indigo), #0a84ff, #30d0c6); }

/* Nav */
.nav-bar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav-bar.scrolled { border-color: rgba(0,0,0,.08); }
.nav { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.logo { width: 26px; height: 26px; transition: transform .6s var(--ease); }
.brand:hover .logo { transform: rotate(180deg); }
.links { display: flex; gap: 30px; }
.links a { color: var(--ink); opacity: .8; font-size: .9rem; transition: opacity .2s; }
.links a:hover { opacity: 1; }

/* Buttons */
.pill-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 12px 24px; border-radius: 980px; background: var(--blue); color: #fff; font-weight: 500; font-size: 1.05rem; transition: background .25s, transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; }
.pill-btn:hover { background: var(--blue-2); transform: scale(1.03); box-shadow: 0 10px 30px rgba(0,113,227,.28); }
.pill-btn.small { padding: 7px 15px; font-size: .85rem; }
.pill-btn.big { padding: 17px 34px; font-size: 1.2rem; }
.text-link { font-size: 1.05rem; font-weight: 500; }
.text-link span { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(4px); }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(0,113,227,.5); outline-offset: 3px; border-radius: 8px; }

/* Reveal */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Hero */
.hero { padding: 88px 0 40px; text-align: center; overflow: hidden; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 6.4rem); font-weight: 800; letter-spacing: -.045em; }
.sub { font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--muted); max-width: 34em; margin: 0 auto 30px; line-height: 1.4; }
.ctas { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }

.stage { height: clamp(380px, 52vw, 600px); margin-top: 40px; perspective: 1600px; display: grid; place-items: center; }
.deck { position: relative; width: min(860px, 94vw); height: 100%; transform-style: preserve-3d; transform: rotateX(var(--tx, 14deg)) rotateY(var(--ty, 0deg)) scale(var(--s, .92)); transition: transform .2s ease-out; }
.mock { position: absolute; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -12px rgba(0,0,0,.22), 0 18px 36px -18px rgba(0,0,0,.25); overflow: hidden; transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.m-sheet { width: 47%; height: 64%; left: 25%; top: 14%; transform: translate3d(0, calc(var(--spread, 0) * -20px), 80px); z-index: 4; }
.m-planner { width: 30%; height: 58%; left: 2%; top: 22%; transform: translate3d(calc(var(--spread, 0) * -40px), 0, 0) rotateY(18deg); background: linear-gradient(160deg, #fff7ef, #ffe9d6); }
.m-party { width: 28%; height: 54%; right: 2%; top: 8%; transform: translate3d(calc(var(--spread, 0) * 40px), calc(var(--spread, 0) * -30px), 20px) rotateY(-18deg); background: radial-gradient(circle at 30% 20%, #3a2a5c, #120b22); color: #fff; }
.m-slides { width: 34%; height: 36%; right: 8%; bottom: 0; transform: translate3d(calc(var(--spread, 0) * 30px), calc(var(--spread, 0) * 30px), 120px) rotateY(-10deg); background: #f5f5f7; padding: 12px; z-index: 5; }

.mock-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #f5f5f7; border-bottom: 1px solid #e8e8ed; font-size: .75rem; color: var(--muted); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mock-bar i:nth-child(2) { background: #febc2e; }
.mock-bar i:nth-child(3) { background: #28c840; }
.mock-bar span { margin-left: 8px; font-weight: 500; }
.sheet { padding: 12px 14px; font-size: clamp(.6rem, 1.1vw, .82rem); text-align: left; }
.row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 7px 4px; border-bottom: 1px solid #f0f0f3; }
.row.head { font-weight: 600; color: var(--muted); }
.ok { color: #248a3d; font-weight: 600; }
.bad { color: #d70015; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 8%; height: clamp(40px, 9vw, 90px); padding: 12px 6px 0; }
.bars b { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #0a84ff, #5e5ce6); transform-origin: 50% 100%; animation: grow 1.6s var(--ease) both; }
.bars b:nth-child(2) { animation-delay: .1s; } .bars b:nth-child(3) { animation-delay: .2s; } .bars b:nth-child(4) { animation-delay: .3s; } .bars b:nth-child(5) { animation-delay: .4s; } .bars b:nth-child(6) { animation-delay: .5s; }
@keyframes grow { from { transform: scaleY(0); } }
.planner-tabs { display: flex; gap: 4px; padding: 12px 12px 0; }
.planner-tabs span { font-size: .62rem; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: rgba(191,72,0,.08); color: #bf4800; }
.planner-tabs .on { background: #bf4800; color: #fff; }
.planner-title { margin: 10px 14px 6px; font-size: clamp(1rem, 2vw, 1.6rem); font-weight: 700; text-align: left; letter-spacing: -.03em; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 12px; }
.cal i { aspect-ratio: 1; border-radius: 5px; background: rgba(0,0,0,.05); }
.cal i.x { background: #ff9f0a; }
.cal i.d { background: #bf4800; }
.m-party { padding: 18px; text-align: left; }
.party-k { margin: 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #ffd60a; font-weight: 600; }
.party-t { margin: 8px 0 6px; font-size: clamp(1rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.05; font-family: Georgia, serif; letter-spacing: -.01em; }
.party-s { margin: 0; font-size: .7rem; opacity: .7; }
.party-cards { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 34%; }
.party-cards i { position: absolute; bottom: 0; width: 46%; height: 100%; border-radius: 10px; background: linear-gradient(160deg, #f2e6c9, #c9b07a); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.party-cards i:nth-child(1) { left: 4%; transform: rotate(-12deg); }
.party-cards i:nth-child(2) { left: 27%; transform: rotate(0deg); background: linear-gradient(160deg, #ffd7d7, #c96060); }
.party-cards i:nth-child(3) { left: 50%; transform: rotate(12deg); }
.slide-main { height: 68%; border-radius: 10px; background: linear-gradient(135deg, #1d1d1f, #3a3a3c); padding: 12% 10%; display: flex; flex-direction: column; gap: 8%; }
.slide-main b { width: 60%; height: 16%; border-radius: 4px; background: #fff; }
.slide-main span { width: 80%; height: 7%; border-radius: 4px; background: rgba(255,255,255,.4); }
.slide-main span + span { width: 50%; }
.slide-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 26%; margin-top: 6%; }
.slide-thumbs i { border-radius: 6px; background: #e3e3e8; }
.slide-thumbs i:first-child { box-shadow: 0 0 0 2px var(--blue); background: #3a3a3c; }

/* Statement with scroll-lit words */
.statement { padding: 120px 0; }
.big-words { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; max-width: 18em; }
.big-words .wd { color: #d2d2d7; transition: color .4s; }
.big-words .wd.lit { color: var(--ink); }
.big-words .wd.lit.hot { background: linear-gradient(90deg, #5e5ce6, #0a84ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Section heads */
section { padding: 100px 0; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.head h2, .made h2, .custom h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; }
.head h2 { margin: 0; }
.head p { margin: 0; }

/* Bento */
.shop { background: var(--bg-2); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tile { position: relative; display: block; overflow: hidden; min-height: 300px; padding: 32px; border-radius: var(--radius); background: #fff; color: var(--ink); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.js .tile[data-reveal].in:hover, .tile:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 30px 60px -20px rgba(0,0,0,.18); }
.tile h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tile p { color: var(--muted); margin: 0; max-width: 24em; position: relative; z-index: 1; }
.t-k { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.t-sheets { grid-column: span 4; min-height: 380px; background: linear-gradient(160deg, #fff, #eef6ff); }
.t-planners { grid-column: span 2; min-height: 380px; background: linear-gradient(160deg, #fff7ef, #ffe8d1); }
.t-party { grid-column: span 2; background: radial-gradient(circle at 70% 120%, #3a2a5c, #120b22 70%); color: #fff; }
.t-party p, .t-party .t-k { color: rgba(255,255,255,.72); }
.t-learn { grid-column: span 2; background: linear-gradient(160deg, #f2fff4, #d8f5de); }
.t-slides { grid-column: span 2; background: linear-gradient(160deg, #1d1d1f, #3a3a3c); color: #fff; }
.t-slides p, .t-slides .t-k { color: rgba(255,255,255,.7); }
.t-web { grid-column: span 6; min-height: 220px; background: linear-gradient(110deg, #f5f3ff, #e8f4ff 60%, #e3fbf8); }
.t-art { position: absolute; pointer-events: none; transition: transform .8s var(--ease); }
.grid-art { right: 32px; bottom: 32px; width: 46%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-art i { height: 36px; border-radius: 8px; background: rgba(10,132,255,.12); }
.grid-art i:nth-child(3n) { background: rgba(94,92,230,.22); }
.grid-art i:nth-child(5) { background: #0a84ff; }
.tile:hover .grid-art { transform: translateY(-8px) rotate(-2deg); }
.rings { right: -30px; bottom: -30px; width: 200px; height: 200px; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 18px solid rgba(191,72,0,.16); }
.rings i:nth-child(2) { inset: 34px; border-color: rgba(255,159,10,.3); }
.rings i:nth-child(3) { inset: 68px; background: #bf4800; border: 0; }
.tile:hover .rings { transform: rotate(40deg) scale(1.08); }
.cards-art { right: 24px; bottom: 16px; width: 140px; height: 110px; }
.cards-art i { position: absolute; bottom: 0; width: 70px; height: 100px; border-radius: 10px; background: linear-gradient(160deg, #f2e6c9, #c9b07a); box-shadow: 0 10px 20px rgba(0,0,0,.4); transition: transform .6s var(--ease); }
.cards-art i:nth-child(1) { left: 0; transform: rotate(-14deg); }
.cards-art i:nth-child(2) { left: 34px; background: linear-gradient(160deg, #ffd7d7, #c96060); }
.cards-art i:nth-child(3) { left: 68px; transform: rotate(14deg); }
.tile:hover .cards-art i:nth-child(1) { transform: rotate(-26deg) translateX(-10px); }
.tile:hover .cards-art i:nth-child(3) { transform: rotate(26deg) translateX(10px); }

/* How it's made: sticky visual + steps */
.made-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.made-visual { position: sticky; top: 18vh; height: 64vh; display: grid; place-items: center; perspective: 1200px; }
.mv-card { position: relative; width: min(400px, 100%); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(20deg) rotateZ(-8deg); }
.mv-layer { position: absolute; inset: 12%; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); transform: translateZ(calc(var(--i) * 34px)) translateY(calc(var(--i) * -18px)); opacity: .25; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s; filter: saturate(.3); }
.mv-layer b { font-size: 1.5rem; letter-spacing: -.02em; }
.mv-layer em { font-style: normal; opacity: .8; font-size: .9rem; }
.mv-icon { position: absolute; top: 24px; left: 26px; font-size: 1.8rem; }
.l0 { --i: 0; background: linear-gradient(135deg, #5e5ce6, #7d7aff); }
.l1 { --i: 1; background: linear-gradient(135deg, #0a84ff, #5ac8fa); }
.l2 { --i: 2; background: linear-gradient(135deg, #30b0c7, #30d0c6); }
.l3 { --i: 3; background: linear-gradient(135deg, #1d1d1f, #48484a); }
.mv-layer.on { opacity: 1; filter: none; transform: translateZ(calc(var(--i) * 34px + 40px)) translateY(calc(var(--i) * -18px - 10px)); }
.made-steps h2.left { margin-bottom: 30px; }
.step { min-height: 46vh; padding: 28px 0; border-top: 1px solid var(--line); opacity: .3; transition: opacity .6s var(--ease); }
.step.on { opacity: 1; }
.step span { font-weight: 600; color: var(--blue); }
.step h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 8px; }
.step p { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 26em; }

/* Formats */
.formats { padding: 30px 0 90px; }
.format-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.format-row li { padding: 22px 12px; border-radius: 20px; background: var(--bg-2); text-align: center; transition: transform .4s var(--ease), background .4s; }
.format-row li:hover { transform: translateY(-4px); background: #ebebf0; }
.format-row b { display: block; font-size: 1.4rem; letter-spacing: -.02em; }
.format-row span { color: var(--muted); font-size: .85rem; }
.formats-note { text-align: center; color: var(--muted); margin: 20px 0 0; }

/* Apps rail */
.apps { background: var(--bg-2); overflow: hidden; }
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(16px, calc((100% - 1080px) / 2)) 30px; scroll-padding-inline: max(16px, calc((100% - 1080px) / 2)); scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.app-card { flex: none; width: min(340px, 80vw); min-height: 420px; scroll-snap-align: start; padding: 30px; border-radius: var(--radius); color: #fff; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); user-select: none; -webkit-user-drag: none; }
.app-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.35); }
.app-card h3 { font-size: 1.7rem; margin-top: auto; }
.app-card p { margin: 0 0 18px; opacity: .85; }
.chip { align-self: flex-start; font-size: .75rem; font-weight: 600; padding: 5px 11px; border-radius: 980px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.app-emoji { font-size: 4.6rem; margin: 34px 0 20px; transition: transform .6s var(--ease); }
.app-card:hover .app-emoji { transform: scale(1.12) rotate(-8deg); }
.get { font-weight: 600; }
.a-academy { background: linear-gradient(160deg, #5e5ce6, #0a84ff); }
.a-flag { background: linear-gradient(160deg, #ff375f, #ff9f0a); }
.a-trivia { background: linear-gradient(160deg, #3634a3, #bf5af2); }
.a-football { background: linear-gradient(160deg, #248a3d, #a4d65e); }
.a-ring { background: linear-gradient(160deg, #d70015, #6e1a0a); }
.rail-nav { display: flex; justify-content: flex-end; gap: 12px; }
.circle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.08); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .25s, transform .3s var(--ease); }
.circle:hover { background: rgba(0,0,0,.14); transform: scale(1.06); }

/* Custom + finale */
.custom-box { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 56px; border-radius: 36px; background: linear-gradient(120deg, #f5f3ff, #eaf4ff 55%, #e6fbf8); }
.custom-box h2 { margin-bottom: 10px; }
.custom-box p { margin: 0; font-size: 1.1rem; }
.finale { text-align: center; padding: 140px 0 160px; }
.finale-title { font-size: clamp(2.8rem, 7.5vw, 5.6rem); font-weight: 800; letter-spacing: -.045em; margin-bottom: 36px; }

/* Footer */
.site-footer { background: var(--bg-2); color: var(--muted); font-size: .85rem; padding: 26px 0 18px; border-top: 1px solid #e8e8ed; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }
.site-footer .sps-row { border-top-color: #e3e3e8; color: var(--ink); opacity: .85; }

/* Responsive */
@media (max-width: 900px) {
  .links { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-sheets, .t-web { grid-column: span 2; }
  .t-planners, .t-party, .t-learn, .t-slides { grid-column: span 1; }
  .made-grid { grid-template-columns: 1fr; gap: 0; }
  .made-visual { top: 56px; height: 44vh; z-index: 1; background: linear-gradient(#fff 85%, rgba(255,255,255,0)); }
  .mv-card { width: min(260px, 70vw); }
  .step { min-height: 40vh; }
  .format-row { grid-template-columns: repeat(3, 1fr); }
  .custom-box { flex-direction: column; text-align: center; padding: 40px 24px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 56px; }
  section { padding: 72px 0; }
  .bento { grid-template-columns: 1fr; }
  .t-sheets, .t-web, .t-planners, .t-party, .t-learn, .t-slides { grid-column: span 1; min-height: 260px; }
  .t-sheets { min-height: 340px; }
  .grid-art { width: 70%; left: 32px; right: auto; }
  .stage { height: 320px; margin-top: 24px; }
  .deck { width: 100vw; }
  .m-sheet { width: 64%; left: 18%; }
  .format-row { grid-template-columns: repeat(2, 1fr); }
  .statement { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .big-words .wd { color: var(--ink); }
}