/* ===== Stretch Cat - warm, rounded, lively, a little extra ===== */
:root{
  --cream:#FFF8EE; --cream-2:#FCEEDB; --card:#FFFFFF;
  --ink:#241F1A; --ink-2:#2C2620; --ink-soft:#7A6E61;
  --accent:#F26419; --accent-press:#D8530D; --accent-tint:#FDE7D3;
  --calico:#E8A24B;
  --ring:rgba(242,100,25,.35);
  --shadow:0 26px 60px -26px rgba(120,72,28,.5);
  --shadow-sm:0 12px 30px -18px rgba(120,72,28,.42);
  --r-lg:30px; --r-md:20px; --r-sm:14px; --r-pill:999px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink-2);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,.brand span,.btn,.ring-label b{font-family:"Fredoka",system-ui,sans-serif;}
h1,h2{letter-spacing:-.01em; line-height:1.04; margin:0;}
img,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}

/* texture + paws */
.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.paws{position:fixed; inset:0; z-index:0; pointer-events:none;}
.paws i{position:absolute; color:var(--calico); opacity:.16; animation:drift linear infinite;}
@keyframes drift{0%{transform:translateY(20vh) rotate(0deg); opacity:0}
  10%{opacity:.16} 90%{opacity:.16} 100%{transform:translateY(-110vh) rotate(220deg); opacity:0}}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:19px; line-height:1;
  padding:.85rem 1.5rem; border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease;}
.btn i{font-size:1.15em;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 14px 26px -12px var(--ring);}
.btn-primary:hover{background:var(--accent-press); transform:translateY(-2px) scale(1.02);}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:rgba(44,38,32,.2);}
.btn-ghost:hover{border-color:var(--ink-2); transform:translateY(-2px);}
.btn-sm{font-size:15px; padding:.55rem 1.05rem;}
.btn-lg{font-size:21px; padding:1.05rem 2rem;}

/* nav */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:.85rem 1.4rem; height:68px;}
.nav::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,248,238,.78);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(120,72,28,.08);}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:19px;}
.brand img{border-radius:9px;}
.nav-links{display:flex; align-items:center; gap:1.6rem; font-weight:500;}
.nav-links a:not(.btn){color:var(--ink-soft);}
.nav-links a:not(.btn):hover{color:var(--ink-2);}

/* hero */
.hero{position:relative; max-width:var(--maxw); margin:0 auto; padding:1.2rem 1.4rem 3rem; z-index:1;}
.hero-bar{display:inline-flex; align-items:center; gap:.6rem; margin:1.2rem auto 2.4rem; padding:.4rem 1rem .4rem .8rem;
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); font-size:.86rem; color:var(--ink-soft);}
.hb-dot{width:8px; height:8px; border-radius:50%; background:#46c46a;}
.hb-cat{color:var(--accent); font-size:1.15rem;}
.hb-time{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2);}
.hero-inner{display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:3rem; min-height:64vh;}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.6rem); font-weight:700;}
.hl{position:relative; color:var(--accent); white-space:nowrap;}
.squiggle{position:absolute; left:0; right:0; bottom:-.18em; width:100%; height:.36em; color:var(--calico);
  stroke-dasharray:340; stroke-dashoffset:340;}
.hl.drawn .squiggle{transition:stroke-dashoffset 1s ease .3s; stroke-dashoffset:0;}
.lede{font-size:clamp(1.1rem,1.6vw,1.34rem); color:var(--ink-soft); max-width:30ch; margin:1.3rem 0 2rem;}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem;}

.hero-stage{position:relative; display:flex; justify-content:center; perspective:1000px;}
.stage-card{position:relative; z-index:2; width:100%; max-width:540px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--cream-2); box-shadow:var(--shadow); border:7px solid #fff; transform:rotate(1.6deg);
  transform-style:preserve-3d; transition:transform .15s ease;}
.stage-card video{width:100%; aspect-ratio:16/9; object-fit:cover;}
.stage-pill{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(36,31,26,.82); color:#fff; font-size:.78rem; font-weight:600; padding:.35rem .7rem; border-radius:var(--r-pill);
  backdrop-filter:blur(6px);}
.stage-pill i{color:var(--calico);}
.blob{position:absolute; border-radius:50%; filter:blur(10px); z-index:1; opacity:.6;}
.blob-a{width:240px; height:240px; background:radial-gradient(circle,var(--calico),transparent 68%); top:-34px; right:-24px;}
.blob-b{width:300px; height:300px; background:radial-gradient(circle,var(--accent-tint),transparent 70%); bottom:-54px; left:-46px;}

/* marquee */
.marquee{overflow:hidden; background:var(--ink); color:var(--cream); padding:.75rem 0; transform:rotate(-1.6deg);
  margin:2.4rem 0 3.4rem; width:106%; margin-left:-3%; position:relative; z-index:1;}
.marquee-track{display:flex; width:max-content; animation:scroll 24s linear infinite;}
.marquee-track span{font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.55rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:1.1rem; padding-right:1.1rem;}
.marquee-track i{color:var(--accent); font-size:.95rem;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* loop */
.loop{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:2rem 1.4rem 5rem; text-align:center;}
.ring-wrap{position:relative; width:170px; height:170px; margin:0 auto 1.4rem;}
.ring{width:100%; height:100%; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:var(--accent-tint); stroke-width:14;}
.ring-fg{fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:603; stroke-dashoffset:603;}
.ring-wrap.go .ring-fg{transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1); stroke-dashoffset:150;}
.ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-label b{font-size:2.2rem; line-height:1; color:var(--ink-2);}
.ring-label span{font-size:.8rem; color:var(--ink-soft);}
.loop h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:2.6rem;}
.loop-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.loop-flow li{display:flex; flex-direction:column; align-items:center; gap:.3rem; position:relative; padding:0 .6rem;}
.loop-flow li:not(:last-child)::after{content:"\2197"; position:absolute; right:-.7rem; top:1.1rem; color:var(--calico); font-size:1.4rem; font-weight:700;}
.loop-ic{display:grid; place-items:center; width:62px; height:62px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent); font-size:1.8rem; margin-bottom:.5rem;}
.loop-flow b{font-size:1.12rem;} .loop-flow em{font-style:normal; color:var(--ink-soft); font-size:.95rem;}

/* action - dark stage (deliberate color block) */
.action{position:relative; z-index:1; background:var(--ink); color:var(--cream); padding:5rem 1.4rem 6rem; overflow:hidden;}
.action-head{max-width:var(--maxw); margin:0 auto 3rem; text-align:center;}
.action-head h2{font-size:clamp(2rem,4vw,3rem);}
.action-head p{color:rgba(255,248,238,.62); max-width:46ch; margin:1rem auto 0;}
.scene{position:relative; max-width:880px; margin:0 auto; min-height:480px;}
.osbar{display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.45rem 1rem; font-size:.82rem; color:rgba(255,248,238,.8); backdrop-filter:blur(8px);}
.os-left b{margin:0 .5rem;} .os-left,.os-right{display:inline-flex; align-items:center; gap:.7rem;}
.os-cat{color:var(--accent); font-size:1.1rem;}
.scene-menu{position:absolute; left:max(0px,8%); top:54px; width:min(300px,72%); border-radius:18px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08);}
.scene-pop{position:absolute; right:max(0px,4%); bottom:0; width:min(330px,76%); margin:0; border-radius:22px; overflow:hidden;
  background:#1c1714; box-shadow:0 50px 90px -28px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.08);}
.scene-pop video{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--cream-2);}
.scene-pop figcaption{padding:1rem 1.1rem 1.2rem; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.5rem .6rem;}
.scene-pop b{grid-column:1/-1; font-family:"Fredoka",sans-serif; font-size:1.2rem; color:var(--cream);}
.scene-pop span{grid-column:1/-1; color:rgba(255,248,238,.6); font-size:.86rem; margin-bottom:.5rem;}
.pop-snooze,.pop-done{font-style:normal; font-size:.82rem; font-weight:600; padding:.42rem .9rem; border-radius:var(--r-pill); text-align:center;}
.pop-snooze{background:rgba(255,255,255,.1); color:var(--cream);}
.pop-done{background:var(--accent); color:#fff;}

/* moves bento */
.moves{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:5rem 1.4rem;}
.moves-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.4rem; margin-bottom:2rem;}
.moves-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);} .moves-head p{color:var(--ink-soft); max-width:42ch; margin:0;}
.moves-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:1.1rem;}
.move{margin:0; position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm); transition:transform .2s ease;}
.move:hover{transform:translateY(-5px) rotate(-.6deg);}
.move img,.move video{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10;}
.move-big{grid-column:span 2; grid-row:span 2;} .move-big video{aspect-ratio:auto; height:100%;}
.move figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.5rem .9rem .7rem; font-family:"Fredoka",sans-serif; font-weight:600; color:#fff; font-size:1rem; background:linear-gradient(to top,rgba(28,22,16,.74),transparent);}

/* features */
.features{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:2rem 1.4rem 5rem;}
.features-head{margin-bottom:2.4rem; max-width:60ch;}
.features-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);} .features-head p{color:var(--ink-soft); margin-top:.8rem;}
.feature-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2.4rem;}
.feature-list li{display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 0; border-top:1px solid rgba(120,72,28,.13);}
.feature-list i{font-size:1.8rem; color:var(--accent); margin-top:.1rem; flex-shrink:0;}
.feature-list b{display:block; font-size:1.08rem; margin-bottom:.15rem;} .feature-list span{color:var(--ink-soft); font-size:.96rem; line-height:1.5;}

/* download */
.download{position:relative; z-index:1; max-width:880px; margin:1rem auto 4rem; padding:4rem 1.4rem; text-align:center;
  background:linear-gradient(160deg,var(--cream-2),#fbe3c7); border-radius:var(--r-lg); overflow:hidden;}
.download h2{font-size:clamp(2.1rem,4.2vw,3.1rem);} .download>p{color:var(--ink-soft); margin:.8rem 0 2rem;}
.dl-cat{position:absolute; right:-26px; bottom:-30px; width:210px; opacity:.18; transform:rotate(-8deg); pointer-events:none;}
.dl-meta{font-size:.92rem; color:var(--ink-soft); margin-top:1.1rem;}
.brew{display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.8rem;
  background:var(--ink); color:var(--cream); padding:.7rem .8rem .7rem 1.1rem; border-radius:var(--r-pill); font-size:.92rem;}
.brew-label{color:var(--calico); font-weight:600;}
.brew code{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.84rem;}
.brew-copy{background:rgba(255,255,255,.14); border:0; color:var(--cream); width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1rem; transition:background .15s;}
.brew-copy:hover{background:rgba(255,255,255,.26);} .brew-copy.copied{background:var(--accent);}

/* footer */
.foot{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:2.4rem 1.4rem 3rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(120,72,28,.12);}
.foot-brand{display:flex; align-items:center; gap:.5rem; font-family:"Fredoka",sans-serif; font-weight:600;}
.foot-brand img{border-radius:7px;}
.foot-links{display:flex; gap:1.4rem; color:var(--ink-soft);} .foot-links a:hover{color:var(--accent);}
.foot-note{width:100%; color:var(--ink-soft); font-size:.9rem; margin:.4rem 0 0;}

/* reveal */
[data-rise]{opacity:0; transform:translateY(22px);}
[data-rise].in{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}

/* responsive */
@media (max-width:900px){
  .hero{text-align:center;}
  .hero-inner{grid-template-columns:1fr; gap:2.4rem; min-height:auto;}
  .lede{margin-left:auto; margin-right:auto;} .hero-cta{justify-content:center;} .hero-stage{order:-1;}
  .stage-card{transform:none;}
  .loop-flow{grid-template-columns:1fr 1fr; gap:1.8rem 1rem;} .loop-flow li:nth-child(2)::after{display:none;}
  .scene{min-height:0; display:flex; flex-direction:column; gap:1.2rem;}
  .osbar{position:relative;}
  .scene-menu,.scene-pop{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; max-width:360px; margin:0 auto;}
  .moves-grid{grid-template-columns:1fr 1fr;} .move-big{grid-column:span 2; grid-row:span 1;} .move-big video{aspect-ratio:16/9;}
  .features-head h2{max-width:none;} .feature-list{grid-template-columns:1fr;}
}
@media (max-width:560px){
  body{font-size:16px;} .nav-links{gap:.8rem;} .nav-links a:not(.btn){display:none;}
  .loop-flow{grid-template-columns:1fr;} .loop-flow li::after{display:none!important;}
  .moves-grid{grid-template-columns:1fr;} .move-big{grid-column:span 1;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-rise]{opacity:1!important; transform:none!important; transition:none!important;}
  .marquee-track{animation:none;} .paws{display:none;}
  .hl .squiggle{stroke-dashoffset:0;} .ring-wrap .ring-fg{stroke-dashoffset:150;}
  .stage-card{transform:none!important;}
  .btn,.move{transition:none;}
}