/* ─── skubo theme tokens ─── */
:root{
  --amber:#F5A623;
  --amber-deep:#E89512;
  --amber-soft:#FFD27A;
  --cream:#FFFBF3;
  --cream-2:#FFF6E4;
  --ink:#1F1A17;
  --ink-soft:#5B5048;

  --mint:#D4F1DC;
  --peach:#FFE0CC;
  --lavender:#E5DBF5;
  --sky:#D6ECF7;
  --butter:#FFF3C7;
  --rose:#FFD9DE;

  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --shadow-soft:0 12px 30px rgba(245,166,35,.10),0 2px 8px rgba(31,26,23,.05);
  --shadow-pop:0 18px 40px rgba(245,166,35,.18),0 4px 12px rgba(31,26,23,.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand-word{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.01em;}
a{color:var(--amber-deep);text-decoration:none;}
a:hover{color:var(--amber);}
img{max-width:100%;display:block;}

/* ─── floating doodle background ─── */
.doodle-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, #FFF1D4 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #FFE9C2 0%, transparent 55%),
    var(--cream);
}
.doodle{
  position:absolute;opacity:.55;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.doodle svg{width:100%;height:100%;display:block;}

/* ─── header ─── */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(255,251,243,.78);
  border-bottom:1px solid rgba(245,166,35,.12);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mascot{width:38px;height:38px;border-radius:10px;}
.brand-word{font-size:26px;color:var(--amber);}
.nav{display:flex;gap:8px;align-items:center;}
.nav a{
  padding:10px 16px;border-radius:999px;font-weight:700;color:var(--ink-soft);
  transition:background .2s,color .2s,transform .2s;
}
.nav a:hover{background:var(--cream-2);color:var(--amber-deep);}
.nav .nav-cta{
  background:var(--amber);color:#fff;box-shadow:var(--shadow-soft);
}
.nav .nav-cta:hover{background:var(--amber-deep);color:#fff;transform:translateY(-1px);}

/* ─── sections common ─── */
section{position:relative;z-index:1;padding:90px 24px;}
.section-title{
  text-align:center;font-size:clamp(28px,4vw,44px);margin:0 0 10px;color:var(--ink);
}
.section-sub{
  text-align:center;color:var(--ink-soft);max-width:640px;margin:0 auto 50px;font-size:18px;
}

/* ─── hero ─── */
.hero{padding:60px 24px 80px;}
.hero-inner{max-width:900px;margin:0 auto;text-align:center;}
.hero-logo{
  width:min(78%,520px);margin:30px auto 10px;
  filter:drop-shadow(0 18px 30px rgba(245,166,35,.25));
}
.float-anim{animation:floaty 6s ease-in-out infinite;}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-10px) rotate(-1deg);}
}
.coming-soon{
  display:inline-block;background:var(--amber);color:#fff;
  padding:8px 22px;border-radius:999px;font-weight:700;font-size:16px;
  letter-spacing:.05em;text-transform:lowercase;box-shadow:var(--shadow-soft);
  margin-top:8px;
}
.hero-tag{
  font-family:'Fredoka',sans-serif;font-size:clamp(20px,2.6vw,28px);
  color:var(--ink-soft);margin:22px auto 24px;
}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px;}
.pill{
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.pill-mint{background:var(--mint);}
.pill-peach{background:var(--peach);}
.pill-lavender{background:var(--lavender);}
.pill-sky{background:var(--sky);}

/* ─── about ─── */
.about-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.about-card{
  border-radius:var(--radius-lg);padding:32px 28px;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.about-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop);}
.about-icon{font-size:42px;margin-bottom:10px;}
.about-card h3{margin:6px 0 10px;font-size:22px;}
.about-card p{margin:0;color:var(--ink-soft);}

/* pastel utility */
.card-mint{background:var(--mint);}
.card-peach{background:var(--peach);}
.card-lavender{background:var(--lavender);}
.card-sky{background:var(--sky);}
.card-butter{background:var(--butter);}
.card-rose{background:var(--rose);}

/* ─── features ─── */
.feature-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.feature{
  border-radius:var(--radius-lg);padding:34px 28px;position:relative;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.feature:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-pop);}
.feature-emoji{
  width:64px;height:64px;border-radius:18px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;
  box-shadow:0 6px 14px rgba(31,26,23,.06);margin-bottom:14px;
}
.feature h3{margin:6px 0 8px;font-size:22px;}
.feature p{margin:0;color:var(--ink-soft);}

/* ─── loved by ─── */
.loved{padding-top:30px;}
.loved-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.loved-card{
  margin:0;background:#fff;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-soft);transition:transform .25s ease;
}
.loved-card:hover{transform:translateY(-4px);}
.loved-card img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.loved-card .illus{aspect-ratio:1/1;width:100%;overflow:hidden;position:relative;}
.loved-card .illus svg{width:100%;height:100%;display:block;transition:transform .5s ease;}
.loved-card:hover .illus svg{transform:scale(1.03);}
.loved-card figcaption{padding:14px 16px;font-size:14px;color:var(--ink-soft);}
.loved-card b{color:var(--ink);}

/* ─── waitlist ─── */
.waitlist{padding-top:30px;}
.waitlist-card{
  max-width:780px;margin:0 auto;text-align:center;
  background:linear-gradient(160deg,#FFF6E4,#FFE9C2);
  border-radius:36px;padding:50px 30px;
  box-shadow:var(--shadow-pop);position:relative;overflow:hidden;
}
.waitlist-mascot{width:78px;height:78px;border-radius:18px;margin:0 auto 14px;}
.waitlist h2{font-size:32px;margin:0 0 10px;}
.waitlist p{color:var(--ink-soft);margin:0 auto 22px;max-width:520px;}
.waitlist-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.waitlist-form input{
  padding:14px 20px;border-radius:999px;border:2px solid #fff;
  background:#fff;font:inherit;min-width:280px;outline:none;
  box-shadow:var(--shadow-soft);
}
.waitlist-form input:focus{border-color:var(--amber);}
.waitlist-form button{
  padding:14px 28px;border-radius:999px;border:0;cursor:pointer;
  background:var(--amber);color:#fff;font:inherit;font-weight:700;
  box-shadow:var(--shadow-soft);transition:transform .2s,background .2s;
}
.waitlist-form button:hover{background:var(--amber-deep);transform:translateY(-1px);}
.waitlist-form button:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.waitlist-form .hp-field{
  position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;
}
.waitlist-msg{
  min-height:1.4em;margin:26px auto 0;max-width:520px;font-weight:700;font-size:15px;
}
.waitlist-msg.ok{color:#2E7D32;}
.waitlist-msg.err{color:#C0392B;}

/* ─── footer ─── */
.site-footer{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#FFF6E4 0%,#FFEFCB 100%);
  padding:70px 40px 30px;border-top:1px solid rgba(245,166,35,.18);
}
.foot-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-size:26px;color:var(--amber);}
.foot-brand img{width:38px;height:38px;border-radius:10px;}
.foot-tag{color:var(--ink-soft);margin-top:8px;}
.foot-col h4{margin:0 0 12px;font-size:16px;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;}
.foot-col ul{list-style:none;padding:0;margin:0;}
.foot-col li{margin-bottom:8px;color:var(--ink-soft);font-size:15px;}
.foot-col a{color:var(--ink-soft);}
.foot-col a:hover{color:var(--amber-deep);}
.foot-bottom{
  text-align:center;margin-top:40px;padding-top:20px;
  border-top:1px dashed rgba(31,26,23,.15);color:var(--ink-soft);font-size:14px;
}

/* ─── responsive ─── */
@media (max-width:900px){
  .about-grid,.feature-grid{grid-template-columns:1fr 1fr;}
  .loved-grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav a:not(.nav-cta){display:none;}
  .site-header{padding:14px 20px;}
}
@media (max-width:560px){
  .about-grid,.feature-grid,.loved-grid,.foot-grid{grid-template-columns:1fr;}
  section{padding:70px 18px;}
  .hero-logo{width:86%;}
}