:root { --ink:#26324a; --muted:#67728a; --cream:#fffaf0; --orange:#ff8a1f; --orange-dark:#e8680b; --yellow:#ffc93d; --teal:#18a8a1; --purple:#7667ca; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Avenir Next","Trebuchet MS",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.site-header { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:11px; line-height:1; }
.brand-mark { width:47px; height:47px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,var(--orange),#ffab2f); color:white; font-weight:900; box-shadow:0 8px 20px #ef7f2450; transform:rotate(-4deg); }
.brand span:last-child { display:grid; gap:4px; }
.brand strong { font-size:11px; color:#79727a; text-transform:uppercase; letter-spacing:.08em; }
.brand b { color:var(--orange-dark); font-size:20px; }
nav { display:flex; align-items:center; gap:30px; color:#505b70; font-weight:700; font-size:14px; }
nav a:hover { color:var(--orange-dark); }
.header-button,.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; font-weight:800; transition:transform .2s,box-shadow .2s; }
.header-button { padding:12px 19px; color:white; background:var(--teal); font-size:13px; box-shadow:0 8px 20px #15938d35; }
.header-button:hover,.primary-button:hover,.secondary-button:hover { transform:translateY(-2px); }

.hero { min-height:660px; padding:64px max(28px,calc((100% - 1180px)/2)) 90px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:60px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; width:550px; height:550px; right:-80px; top:-70px; border-radius:50%; background:#ffe6aa; opacity:.72; }
.hero::after { content:""; position:absolute; width:110px; height:110px; left:-45px; bottom:60px; border:22px solid #8fd9d2; border-radius:50%; opacity:.45; }
.hero-copy,.hero-art { position:relative; z-index:2; }
.eyebrow { width:fit-content; display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; color:#a7530e; background:#fff0c8; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.eyebrow span { color:var(--orange); }
.hero h1 { max-width:650px; margin:22px 0 20px; font-size:clamp(48px,6vw,78px); line-height:.98; letter-spacing:-.055em; }
.hero h1 em { color:var(--orange); font-style:normal; position:relative; }
.hero h1 em::after { content:""; position:absolute; left:4%; bottom:-7px; width:90%; height:7px; border-radius:50%; background:var(--yellow); transform:rotate(-2deg); opacity:.8; }
.hero-copy>p { max-width:585px; margin:0; font-size:19px; line-height:1.7; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }
.primary-button { min-height:55px; padding:0 26px; color:white; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); box-shadow:0 14px 26px #e36c2038; }
.text-button { display:inline-flex; align-items:center; gap:9px; font-weight:800; color:#46526a; }
.text-button span { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:var(--teal); background:white; box-shadow:0 5px 15px #34485c1c; font-size:11px; }
.trust-row { display:flex; flex-wrap:wrap; gap:19px; margin-top:31px; color:#667083; font-size:12px; font-weight:700; }

.hero-art { min-height:500px; display:grid; place-items:center; }
.image-frame { width:min(430px,88%); aspect-ratio:1/1.08; border:13px solid white; border-radius:48% 52% 46% 54%/40% 44% 56% 60%; overflow:hidden; box-shadow:0 28px 60px #8d5b2e31; background:#ffe1a1; transform:rotate(2deg); }
.image-frame img { width:100%; height:100%; object-fit:cover; object-position:center 65%; transform:scale(1.08); }
.floating-card { position:absolute; left:0; bottom:46px; display:flex; align-items:center; gap:12px; padding:14px 19px; border-radius:20px; background:white; box-shadow:0 18px 40px #38465d2b; }
.floating-card>span { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; background:#fff2cf; }
.floating-card div { display:grid; gap:3px; }
.floating-card strong { font-size:13px; }
.floating-card small { color:#7c8494; font-size:11px; }
.spark { position:absolute; color:var(--orange); font-size:34px; z-index:3; }
.spark-one { top:30px; left:8px; transform:rotate(12deg); }
.spark-two { right:10px; bottom:80px; color:var(--teal); font-size:26px; }

.feature-strip { padding:76px max(28px,calc((100% - 1180px)/2)); background:white; }
.section-heading.compact { text-align:center; }
.section-heading span,.card-tag { color:var(--orange-dark); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.section-heading h2 { margin:8px 0 0; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.035em; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; }
.feature-card { display:flex; gap:17px; padding:25px; border:1px solid #eee8dc; border-radius:24px; background:#fffdf9; }
.feature-icon { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:#fff0ce; font-size:23px; }
.feature-card:nth-child(2) .feature-icon { background:#dff7f3; }
.feature-card:nth-child(3) .feature-icon { background:#ece8ff; }
.feature-card h3 { margin:2px 0 7px; font-size:17px; }
.feature-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

.catalog { padding:95px max(28px,calc((100% - 1180px)/2)); background:#fff8ea; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; }
.section-heading>p { max-width:430px; margin:0; color:var(--muted); line-height:1.6; }
.catalog-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-top:42px; }
.content-card { min-height:270px; display:grid; grid-template-columns:45% 55%; overflow:hidden; border-radius:28px; background:white; box-shadow:0 12px 30px #5b4d3920; }
.content-card img { width:100%; height:100%; object-fit:cover; }
.content-card-body { align-self:center; padding:27px; }
.content-card h3,.resources-card h3 { margin:9px 0 10px; font-size:24px; line-height:1.1; }
.content-card p,.resources-card p { margin:0 0 17px; color:var(--muted); font-size:14px; line-height:1.55; }
.content-card a,.resources-card a { display:inline-flex; align-items:center; gap:8px; color:var(--orange-dark); font-size:13px; font-weight:900; }
.card-tag.teal { color:var(--teal); }
.card-tag.purple { color:var(--purple); }
.resources-card { min-height:238px; grid-column:1/-1; display:grid; grid-template-columns:250px 1fr; align-items:center; gap:35px; padding:30px 55px 0; overflow:hidden; border-radius:28px; background:linear-gradient(120deg,#efeaff,#e6f4ff); }
.resource-character { align-self:end; height:220px; display:flex; justify-content:center; overflow:hidden; }
.resource-character img { height:280px; width:auto; object-fit:contain; object-position:top; }

.family-banner { padding:76px max(28px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:60px; color:white; background:linear-gradient(135deg,#158f8a,#0b7778); position:relative; overflow:hidden; }
.family-banner::after { content:""; position:absolute; right:-50px; top:-90px; width:260px; height:260px; border:45px solid #ffffff14; border-radius:50%; }
.family-banner>div,.family-banner>a { position:relative; z-index:2; }
.eyebrow.light { color:white; background:#ffffff1c; }
.family-banner h2 { max-width:730px; margin:17px 0 13px; font-size:clamp(30px,4.5vw,51px); line-height:1.05; letter-spacing:-.04em; }
.family-banner p { max-width:690px; margin:0; color:#d9ffff; line-height:1.65; }
.secondary-button { flex:0 0 auto; min-height:50px; padding:0 23px; color:#126f70; background:white; }
footer { min-height:180px; padding:45px max(28px,calc((100% - 1180px)/2)); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:35px; background:#252e42; color:#cfd4df; }
.footer-brand strong { color:#aeb5c5; }
.footer-brand b { color:#ffae45; }
footer p,footer small { margin:0; font-size:12px; }

.inner-header { background:var(--cream); }
.page-hero { min-height:460px; padding:55px max(28px,calc((100% - 1180px)/2)); display:grid; grid-template-columns:1fr 430px; align-items:center; gap:60px; overflow:hidden; position:relative; }
.page-hero>div { position:relative; z-index:2; }
.page-hero h1,.simple-page-hero h1 { margin:17px 0 16px; font-size:clamp(48px,6vw,74px); line-height:1; letter-spacing:-.055em; }
.page-hero p,.simple-page-hero p { max-width:640px; margin:0; color:var(--muted); font-size:18px; line-height:1.7; }
.page-hero img { width:430px; height:350px; object-fit:cover; border:10px solid white; border-radius:40px; box-shadow:0 24px 55px #93542028; transform:rotate(2deg); }
.orange-page { background:linear-gradient(135deg,#fff7e5,#ffedc2); }
.library-section,.animation-library,.resource-library { padding:85px max(28px,calc((100% - 1180px)/2)); background:white; }
.library-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:38px; }
.library-heading>div>span { color:var(--orange-dark); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.library-heading h2 { margin:7px 0 0; font-size:clamp(31px,4vw,45px); letter-spacing:-.035em; line-height:1.08; }
.library-heading>p { max-width:390px; margin:0; color:var(--muted); line-height:1.6; }
.games-grid { display:grid; grid-template-columns:1fr 330px; gap:25px; }
.games-grid.two-games { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.games-grid.two-games .big-game-card { min-width:0; display:flex; flex-direction:column; }
.games-grid.two-games .game-cover { flex:0 0 auto; width:100%; height:auto; min-height:0; aspect-ratio:16/9; }
.games-grid.two-games .big-game-card>div:last-child { align-self:stretch; flex:1; display:flex; flex-direction:column; }
.games-grid.two-games .primary-button { align-self:flex-start; margin-top:auto; }
.noe-cover { position:relative; overflow:hidden; background:linear-gradient(160deg,#c9f0ee 0 55%,#78ad62 55%); }
.noe-cover::after { content:""; position:absolute; left:-8%; right:-8%; bottom:-90px; height:190px; border-radius:50%; background:#79b8d4; }
.noe-cover-art { position:absolute; z-index:2; inset:0; display:grid; place-items:end center; overflow:hidden; }
.noe-cover-art>span { position:absolute; right:25px; top:25px; font-size:62px; }
.noe-cover-art>b { position:relative; z-index:2; margin-bottom:2px; font-size:145px; line-height:1; filter:drop-shadow(0 9px 5px #31554642); transform:scaleX(1.16); }
.noe-cover-art>i { position:absolute; z-index:3; left:50%; bottom:71px; width:max-content; padding:7px 12px; border-radius:18px; background:#fffde0e8; font-style:normal; font-size:22px; transform:translateX(-50%); }
.big-game-card { min-height:410px; display:grid; grid-template-columns:43% 57%; overflow:hidden; border-radius:30px; background:#fffaf0; border:1px solid #eee5d5; }
.big-game-card>.game-cover { position:relative; overflow:hidden; }
.game-cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.game-cover>span { position:absolute; left:20px; top:20px; padding:8px 11px; border-radius:10px; color:white; background:var(--orange); font-size:10px; font-weight:900; letter-spacing:.1em; }
.big-game-card>div:last-child { align-self:center; padding:38px; }
.big-game-card h3 { margin:10px 0 13px; font-size:34px; line-height:1.08; }
.big-game-card p { color:var(--muted); line-height:1.65; }
.card-meta { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 25px; }
.card-meta span { padding:7px 10px; border-radius:999px; background:white; color:#5a667b; font-size:11px; font-weight:700; }
.coming-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; border:2px dashed #dcd4c5; border-radius:30px; background:#fbfaf7; }
.coming-card>span { font-size:52px; }
.coming-card small { margin-top:18px; color:var(--teal); font-weight:900; letter-spacing:.1em; }
.coming-card h3 { margin:11px 0 8px; font-size:24px; }
.coming-card p { color:var(--muted); line-height:1.55; }
.coming-card b { margin-top:12px; padding:8px 15px; border-radius:999px; color:#7b8494; background:#ebedf1; font-size:12px; }

.game-page { background:#fff7e8; }
.game-intro { padding:45px max(28px,calc((100% - 1180px)/2)) 30px; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.game-intro h1 { margin:12px 0 8px; font-size:clamp(35px,5vw,57px); letter-spacing:-.045em; line-height:1; }
.game-intro p { margin:0; color:var(--muted); }
.game-intro>a { flex:0 0 auto; padding:12px 17px; border-radius:12px; color:#656f80; background:white; border:1px solid #e6ddcd; font-size:13px; font-weight:800; }
.game-stage { width:min(1180px,calc(100% - 40px)); height:min(780px,78vh); min-height:600px; margin:0 auto 30px; padding:10px; border-radius:28px; background:white; box-shadow:0 24px 60px #5a40231f; overflow:hidden; }
.game-stage iframe { width:100%; height:100%; border:0; border-radius:20px; background:#f7efd9; }
.game-help { width:min(1180px,calc(100% - 40px)); margin:0 auto 75px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.game-help article { display:flex; gap:13px; padding:18px; border-radius:18px; background:white; }
.game-help article>span { font-size:24px; }
.game-help h2 { margin:1px 0 5px; font-size:14px; }
.game-help p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }

.simple-page-hero { min-height:390px; padding:75px max(28px,calc((100% - 1180px)/2)); text-align:center; display:grid; justify-items:center; align-content:center; }
.simple-page-hero p { max-width:710px; }
.teal-page { background:linear-gradient(135deg,#e3fbf6,#d9f4f5); }
.purple-page { background:linear-gradient(135deg,#f1edff,#e9f2ff); }
.animation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.animation-tile { padding:15px 15px 23px; border-radius:26px; background:#fff3e4; text-align:center; border:1px solid #eee6da; }
.animation-tile.blue { background:#e7f1ff; }
.animation-tile.mint { background:#e4f8ef; }
.animation-tile.pink { background:#fff0f4; }
.sprite-stage { height:285px; display:grid; place-items:center; border-radius:19px; background:#ffffffb8; overflow:hidden; }
.animated-sprite { display:block; height:250px; background-repeat:no-repeat; background-size:400% 100%; animation:spriteLoop .9s linear infinite; }
.tio-animation { width:111px; background-image:url('/animations/tio-calvino-talk-v2.png'); }
.joao-animation { width:188px; background-image:url('/animations/joao-walk-v2.png'); }
.sara-animation { width:125px; background-image:url('/animations/sara-celebrate-v2.png'); }
.olivia-animation { width:125px; background-image:url('/animations/olivia-celebrate-v2.png'); }
.tio-animation,.sara-animation,.olivia-animation { clip-path:inset(0 8px); }
.animation-tile small { display:block; margin-top:18px; color:var(--orange-dark); font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.animation-tile h3 { margin:5px 0 13px; font-size:17px; }
.loop-label { color:#69758a; font-size:11px; font-weight:700; }
@keyframes spriteLoop { 0%,24.99%{background-position:0% 0} 25%,49.99%{background-position:33.333% 0} 50%,74.99%{background-position:66.666% 0} 75%,100%{background-position:100% 0} }
.wide-cta { padding:65px max(28px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:30px; background:#fff1d3; }
.wide-cta>div>span { color:var(--orange-dark); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.wide-cta h2 { margin:7px 0 0; font-size:clamp(28px,4vw,43px); }

.resource-library { background:white; }
.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.learning-card { min-height:260px; display:flex; gap:20px; padding:31px; border-radius:25px; background:#fffaf0; border:1px solid #eee5d6; }
.learning-card.featured-resource { grid-row:span 2; min-height:542px; background:linear-gradient(145deg,#fff0d4,#fff9ed); }
.learning-icon { flex:0 0 auto; width:55px; height:55px; display:grid; place-items:center; border-radius:17px; background:#ffe3aa; font-size:27px; }
.teal-bg { background:#d9f5ee; }.purple-bg { background:#e9e3ff; }.orange-bg { background:#ffe3c7; }
.learning-card small { color:var(--orange-dark); font-size:10px; font-weight:900; letter-spacing:.1em; }
.learning-card h2 { margin:8px 0 10px; font-size:25px; }
.learning-card p,.learning-card li { color:var(--muted); line-height:1.65; }
.learning-card ul { margin:20px 0 0; padding:0; list-style:none; }
.learning-card li { margin:10px 0; padding:13px; border-radius:12px; background:white; font-size:13px; }
.learning-card li::before { content:"♥"; color:var(--orange); margin-right:8px; }
.download-resource { background:linear-gradient(145deg,#e7f8f4,#eefaf8); }
.download-resource a { display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:11px 15px; border-radius:12px; color:white; background:var(--teal); font-size:12px; font-weight:900; }
.verse-banner { padding:62px 25px; display:grid; justify-items:center; gap:9px; color:white; background:var(--purple); text-align:center; }
.verse-banner span { font-size:clamp(27px,4vw,47px); font-weight:800; letter-spacing:-.035em; }
.verse-banner strong { color:#eae6ff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

@media(max-width:900px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:45px; text-align:center; }
  .hero-copy { display:grid; justify-items:center; }
  .hero-art { min-height:440px; }
  .features-grid,.catalog-grid { grid-template-columns:1fr; }
  .section-heading,.family-banner { align-items:flex-start; flex-direction:column; gap:18px; }
  footer { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .page-hero { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .games-grid { grid-template-columns:1fr; }
  .games-grid.two-games { grid-template-columns:1fr; }
  .animation-grid { grid-template-columns:repeat(2,1fr); }
  .game-help { grid-template-columns:1fr; }
  .resource-grid { grid-template-columns:1fr; }
  .learning-card.featured-resource { grid-row:auto; min-height:0; }
}
@media(max-width:620px) {
  .site-header { width:min(100% - 28px,1180px); min-height:74px; }
  .brand-mark { width:41px; height:41px; }
  .brand b { font-size:16px; }
  .brand strong { font-size:9px; }
  .header-button { width:43px; height:43px; padding:0; font-size:0; }
  .header-button span { font-size:18px; }
  .hero { padding:45px 20px 68px; gap:25px; }
  .hero h1 { font-size:49px; }
  .hero-copy>p { font-size:16px; }
  .hero-actions { flex-direction:column; gap:19px; }
  .trust-row { justify-content:center; gap:10px 16px; }
  .hero-art { min-height:370px; }
  .image-frame { width:92%; border-width:9px; }
  .floating-card { left:5px; bottom:15px; }
  .feature-strip,.catalog { padding:65px 20px; }
  .content-card { grid-template-columns:1fr; }
  .content-card img { height:220px; }
  .resources-card { grid-template-columns:1fr; gap:12px; padding:28px 28px 0; }
  .resource-character { order:2; }
  .family-banner { padding:65px 24px; }
  .page-hero { padding:45px 20px 55px; }
  .page-hero img { width:100%; height:270px; }
  .library-section,.animation-library,.resource-library { padding:65px 20px; }
  .library-heading,.wide-cta,.game-intro { align-items:flex-start; flex-direction:column; }
  .big-game-card { grid-template-columns:1fr; }
  .game-cover { height:310px; }
  .big-game-card>div:last-child { padding:28px; }
  .game-stage { width:100%; height:78vh; min-height:560px; padding:5px; border-radius:0; }
  .game-stage iframe { border-radius:0; }
  .animation-grid { grid-template-columns:1fr; }
  .sprite-stage { height:300px; }
  .wide-cta { padding:55px 22px; }
  .learning-card { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} }