:root{
  --cream:#FBF6F0; --cream2:#FFFDFA; --peach:#F6E2CF; --peach-soft:#FBEEDF;
  --accent:#F4853A; --accent-2:#FF9E54; --grad-1:#FFD9AE; --grad-2:#FF9E54;
  --brown:#6E4B2A; --brown-soft:#9A7A58; --ink:#5A3E22;
  --dog:#E0A458; --cat:#9C89B8; --line:#EFE4D6; --white:#fff;
  --radius:22px; --radius-lg:30px;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'M PLUS Rounded 1c',sans-serif; color:var(--ink);
  background:var(--cream); line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Zen Maru Gothic',sans-serif; line-height:1.4; color:var(--brown)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.latin{font-family:'Baloo 2',cursive}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,246,240,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.hdr-logo{display:flex;align-items:center;height:30px}
.hdr-logo svg{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:26px}
.nav a.link{font-weight:500;color:var(--brown);font-size:.95rem;transition:color .2s}
.nav a.link:hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Zen Maru Gothic',sans-serif;
  font-weight:700;border-radius:999px;padding:11px 20px;font-size:.95rem;cursor:pointer;
  border:none;transition:transform .15s, box-shadow .2s}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;
  box-shadow:0 8px 18px rgba(244,133,58,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(244,133,58,.4)}
.btn-ghost{background:#fff;color:var(--brown);border:1.5px solid var(--line)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn svg{width:16px;height:16px}
.hdr .nav .link{display:inline}
@media(max-width:760px){ .hdr .nav .link{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 60px;overflow:hidden}
.hero-blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;opacity:.7}
.hero-blob.b1{width:420px;height:420px;background:radial-gradient(circle at 40% 35%,#FFE9D2,#FBEEDF 70%);top:-120px;right:-80px}
.hero-blob.b2{width:300px;height:300px;background:radial-gradient(circle,#FBEEDF,transparent 70%);bottom:-80px;left:-60px}
.paw{position:absolute;z-index:0;opacity:.5}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center}
.eyebrow{display:inline-block;background:#fff;border:1.5px solid var(--line);
  color:var(--accent);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px;
  font-family:'Zen Maru Gothic',sans-serif;margin-bottom:20px}
.hero h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:900;letter-spacing:.01em}
.hero h1 .accent{color:var(--accent)}
.hero p.lead{margin:20px 0 28px;font-size:1.08rem;color:var(--ink);max-width:30em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:14px;font-size:.85rem;color:var(--brown-soft)}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-circle{position:absolute;width:108%;padding-bottom:108%;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FBEEDF,#F6E2CF 72%);top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:0}
.phone{position:relative;z-index:2;width:min(300px,78%);border-radius:34px;
  background:#fff;padding:8px;box-shadow:0 30px 60px rgba(120,90,60,.28);
  border:1px solid #f0e6da}
.phone img{width:100%;border-radius:27px;display:block}
.float-chip{position:absolute;z-index:3;background:#fff;border-radius:16px;
  padding:10px 14px;box-shadow:0 12px 26px rgba(120,90,60,.20);font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif;font-size:.85rem;color:var(--brown);
  display:flex;align-items:center;gap:8px}
.float-chip .dot{width:9px;height:9px;border-radius:50%}
.fc1{top:14%;left:-6%} .fc2{bottom:16%;right:-8%}
@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-art{margin-top:30px}
  .float-chip{display:none}
}

/* ---------- intro strip ---------- */
.strip{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-in{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:24px 0}
.strip-item{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brown);
  font-family:'Zen Maru Gothic',sans-serif;font-size:.98rem}
.strip-item .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--peach-soft);color:var(--accent)}
.strip-item .ic svg{width:18px;height:18px}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-head{text-align:center;max-width:36em;margin:0 auto 52px}
.sec-head .tag{color:var(--accent);font-weight:700;font-family:'Zen Maru Gothic',sans-serif;
  letter-spacing:.08em;font-size:.85rem}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.25rem);font-weight:900;margin-top:8px}
.sec-head p{margin-top:14px;color:var(--brown-soft)}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:80px}
.frow:last-child{margin-bottom:0}
.frow.rev .ftext{order:2}
.frow .fart{display:flex;justify-content:center;position:relative}
.fcircle{position:absolute;width:80%;padding-bottom:80%;border-radius:50%;
  background:var(--peach-soft);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.fphone{position:relative;z-index:2;width:min(260px,70%);border-radius:30px;background:#fff;
  padding:7px;box-shadow:0 24px 48px rgba(120,90,60,.22);border:1px solid #f0e6da}
.fphone img{width:100%;border-radius:24px;display:block}
.fnum{font-family:'Baloo 2',cursive;color:var(--accent);font-size:1.1rem;font-weight:800}
.ftext h3{font-size:1.5rem;font-weight:900;margin:6px 0 12px}
.ftext p{color:var(--ink)}
@media(max-width:820px){
  .frow{grid-template-columns:1fr;gap:30px;text-align:center}
  .frow.rev .ftext{order:0}
  .ftext p{max-width:30em;margin-left:auto;margin-right:auto}
}

/* small feature cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;
  transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(120,90,60,.14)}
.card .cic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFE6CC,#FBEEDF);color:var(--accent);margin-bottom:14px}
.card .cic svg{width:24px;height:24px}
.card h3{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.9rem;color:var(--brown-soft);line-height:1.7}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cards{grid-template-columns:1fr}}

/* pricing */
.price-sec{background:var(--cream2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:780px;margin:0 auto}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px}
.plan.pro{border-color:var(--accent);box-shadow:0 20px 44px rgba(244,133,58,.18);position:relative}
.plan.pro .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;font-weight:700;
  font-family:'Zen Maru Gothic',sans-serif;font-size:.78rem;padding:5px 16px;border-radius:999px}
.plan h3{font-size:1.25rem;font-weight:900}
.plan .pr{font-family:'Baloo 2',cursive;color:var(--brown);margin:8px 0 4px;font-size:1.6rem;font-weight:800}
.plan .pr small{font-family:'M PLUS Rounded 1c';font-size:.8rem;color:var(--brown-soft);font-weight:500}
.plan ul{list-style:none;margin:18px 0 0}
.plan li{padding:8px 0 8px 28px;position:relative;font-size:.95rem;border-top:1px solid #f4ece1}
.plan li:first-child{border-top:none}
.plan li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:9px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg)}
.price-note{text-align:center;color:var(--brown-soft);font-size:.82rem;margin-top:24px}
@media(max-width:680px){.plans{grid-template-columns:1fr}}

/* story */
.story{position:relative;overflow:hidden}
.story-card{background:linear-gradient(135deg,#FFF7EF,#FBEEDF);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:56px 48px;max-width:760px;margin:0 auto;text-align:center;
  position:relative;z-index:2}
.story-card .q{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;color:var(--brown);
  font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:22px}
.story-card p{color:var(--ink);font-size:1.02rem}
.story-card p+p{margin-top:14px}

/* CTA */
.cta{padding:90px 0;text-align:center}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:900}
.cta p{color:var(--brown-soft);margin:14px 0 28px}
.cta .appicon{width:84px;height:84px;border-radius:20px;box-shadow:0 14px 30px rgba(120,90,60,.25);margin-bottom:22px}

/* footer */
.ft{background:#fff;border-top:1px solid var(--line);padding:46px 0 30px}
.ft-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.ft-brand .latin{font-size:1.5rem;color:var(--accent)}
.ft-brand p{color:var(--brown-soft);font-size:.85rem;margin-top:6px;max-width:24em}
.ft-links{display:flex;gap:46px;flex-wrap:wrap}
.ft-col h4{font-family:'Zen Maru Gothic';font-size:.82rem;color:var(--brown-soft);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.ft-col a{display:block;color:var(--brown);font-size:.92rem;padding:5px 0;transition:color .2s}
.ft-col a:hover{color:var(--accent)}
.ft-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  color:var(--brown-soft);font-size:.8rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* ---------- subpages ---------- */
.page-hero{position:relative;padding:64px 0 40px;text-align:center;overflow:hidden}
.page-hero .tag{color:var(--accent);font-weight:700;font-family:'Zen Maru Gothic';letter-spacing:.08em;font-size:.85rem}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:900;margin-top:8px}
.page-hero p{margin:14px auto 0;max-width:34em;color:var(--brown-soft)}
.page-hero .hero-blob.b1{top:-140px;right:-100px}

/* faq */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:14px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:'Zen Maru Gothic';
  font-weight:700;color:var(--brown);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;color:var(--accent);transition:transform .2s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 22px;color:var(--ink);font-size:.96rem}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:840px;margin:46px auto 0}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center}
.value .vic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin:0 auto 14px;
  background:linear-gradient(180deg,#FFE6CC,#FBEEDF);color:var(--accent)}
.value .vic svg{width:24px;height:24px}
.value h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.value p{font-size:.9rem;color:var(--brown-soft)}
@media(max-width:720px){.values{grid-template-columns:1fr}}

/* pricing extras */
.bill-faq{max-width:680px;margin:46px auto 0}
.bill-faq .faq-item{background:var(--cream2)}

.story-block{max-width:720px;margin:0 auto;font-size:1.05rem;color:var(--ink)}
.story-block p{margin-bottom:18px}
.story-block .big{font-family:'Zen Maru Gothic';font-weight:900;color:var(--brown);
  font-size:clamp(1.4rem,3vw,1.9rem);text-align:center;margin-bottom:28px;line-height:1.5}