/* Glazed global styles — mobile-first */
:root{--yellow:#FFB40D;--purple:#602697;--text:#1a1a1a;--white:#ffffff}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{font-size:clamp(16px, 1.8vw, 19px);font-family:'Nunito',sans-serif;line-height:1.6}
.container{width:100%;max-width:clamp(320px,92vw,1064px);margin:0 auto;padding-inline:clamp(16px,4vw,64px)}
.site-header{position:sticky;top:0;background:var(--yellow);padding:10px 16px;z-index:10}
.brand .logo{max-width:160px;height:auto;display:block;animation:logoFloat 6s ease-in-out infinite}
.menu-toggle{display:none}

/* Visually hidden utility, visible on keyboard focus */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;margin:0;padding:8px 12px;border-radius:8px;background:var(--purple);color:#fff;z-index:1000}

/* Navigation */
.primary-nav ul{gap:16px}
.primary-nav a{padding:8px 10px;border-radius:8px;font-weight:800;font-family:'Nunito',sans-serif}
.primary-nav a.active,.primary-nav a[aria-current="page"]{background:color-mix(in oklab,var(--purple) 20%, var(--yellow));color:#170a2b}
.primary-nav a:hover{text-decoration:underline}

/* Mobile nav & spacing */
@media (max-width:768px){
  .primary-nav{display:block}
  .primary-nav ul{flex-direction:row;gap:12px;margin-top:0}
  .container{padding-inline:16px}
  .site-header{display:flex;justify-content:center;gap:12px}
}

/* Typography */
h1{font-size:clamp(1.6rem,4.8vw,2.4rem);margin:12px 0;color:#170a2b;animation:fadeSlide 600ms ease-out both;font-family:'Nunito',sans-serif;font-weight:800}
h1 + .mochi-copy{margin-top:0}
.mochi-copy{font-family:'Nunito',sans-serif;font-weight:600;margin:10px 0}
h2{font-size:clamp(1.1rem,3.4vw,1.5rem);margin:12px 0 6px}
p,li{max-width:72ch}

/* Hero and CTA */
.hero p{animation:fadeIn 800ms ease-out both}
.hero p:nth-of-type(2){animation-delay:80ms}
.hero p:nth-of-type(3){animation-delay:160ms}
.hero p:nth-of-type(4){animation-delay:240ms}
.hero p:nth-of-type(5){animation-delay:320ms}
.cta-row{margin:16px 0 6px}
.btn{display:inline-block;border-radius:999px;padding:14px 26px;font-weight:800}
.btn-primary{background:linear-gradient(135deg,var(--purple),#7c39c5);color:var(--white);box-shadow:0 8px 20px rgba(96,38,151,.25)}
.btn-primary:hover{transform:translateY(-1px) scale(1.02);filter:saturate(1.1)}
.btn-primary:active{transform:translateY(0)}

/* Footer */
.site-footer{padding-bottom:56px}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;margin:24px 0}
.footer-bar{position:fixed;bottom:0;left:0;right:0;background:var(--purple);color:#fff;text-align:center;padding:12px 16px;z-index:2;font-family:'Nunito',sans-serif;font-size:clamp(0.85rem,2.4vw,0.95rem);line-height:1.2}
.footer-bar a{color:#fff}
.footer-bar .pipe{margin:0 10px;color:#d9c4f3}
/* Allow footer links to wrap naturally when space is tight */
.footer-bar{white-space:normal}

/* Image placement refined */
.mochi{filter:saturate(.95) drop-shadow(0 10px 12px rgba(0,0,0,.25));animation:mochiFloat 8s ease-in-out infinite;z-index:0;opacity:.88;transition:width .3s ease, opacity .3s ease, transform .3s ease}
@media (max-width:768px){
  .mochi{opacity:.95;width:85vw;max-width:320px}
}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mochiFloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes logoFloat{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Breakpoints */
@media (min-width:768px){
  .brand .logo{max-width:180px}
  .site-header{padding:12px 24px}
}
@media (min-width:1024px){
  .brand .logo{max-width:200px}
  /* Edge-to-edge content with comfortable margins */
  .container{max-width:none;width:100%;padding-inline:clamp(24px,4vw,64px)}
}

/* Footer space optimization on small screens */
@media (max-width:768px){
  .site-footer{padding-bottom:48px}
  .footer-links{margin:12px 0}
  /* Keep footer items in one line; allow horizontal scroll if needed */
  .footer-bar{font-size:0.85rem;padding:10px 8px;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .footer-bar .pipe{margin:0 6px}
}