/* ============================================================
   A Little Love — Landing Page
   Soft blush pink · warm cream · subtle gold
   ============================================================ */

/* ---------- Brand tokens ---------- */
:root{
  --bg:           #fdf5f0;
  --bg-blush:     #fff1f5;
  --bg-blush-2:   #fde5ec;
  --paper:        #ffffff;
  --paper-warm:   #fffaf6;
  --paper-cream:  #fdf8f2;

  --rose-50:      #fff5f8;
  --rose-100:     #fff0f4;
  --rose-200:     #ffe0e8;
  --rose-300:     #fbc4d0;
  --rose-400:     #f4a3b8;
  --rose-500:     #e87a95;
  --rose-600:     #d15674;
  --rose-700:     #a83e5a;

  --gold-100:     #fdf3d9;
  --gold-200:     #f7e4b0;
  --gold-300:     #efcd78;
  --gold-400:     #e0b355;
  --gold-500:     #c9a24a;
  --gold-700:     #8a6a1a;

  --ink:          #4a3e3d;
  --ink-soft:     #6b5a58;
  --ink-muted:    #9c8b8a;
  --ink-whisper:  #c8bcbb;

  --env-body:     #f4a3b8;
  --env-body-2:   #e88ba5;
  --env-flap:     #f8b8c8;
  --env-flap-2:   #efa4b6;

  --line:         #f0e2dc;
  --line-soft:    #f7e9e2;
  --line-dashed:  rgba(232,122,149,0.28);
  --card-border:  #f5e6df;

  --shadow-sm:    0 2px 8px rgba(232,122,149,0.10), 0 1px 2px rgba(232,122,149,0.06);
  --shadow-md:    0 12px 28px rgba(232,122,149,0.13), 0 3px 8px rgba(232,122,149,0.08);
  --shadow-lg:    0 26px 60px rgba(232,122,149,0.17), 0 8px 20px rgba(232,122,149,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.9);

  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  --ease:        cubic-bezier(0.22,0.61,0.36,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  --max: 1180px;

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  font-size:16.5px;
  line-height:1.72;
  font-weight:400;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%,   rgba(255,200,220,0.50), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,220,235,0.42), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 40%,  rgba(253,243,217,0.30), transparent 70%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

h1,h2,h3,h4{
  font-family:'Baloo 2',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.12;
  color:var(--ink);
}
h1{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-0.025em}
h2{font-size:clamp(28px,4.6vw,50px);letter-spacing:-0.02em}
h3{font-size:clamp(19px,2.3vw,24px);line-height:1.24;letter-spacing:-0.005em}
p{font-weight:400}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:110px 0;position:relative}

.eyebrow{
  font-family:'Nunito',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:4px;
  text-transform:uppercase;
  color:var(--rose-500);
  margin-bottom:20px;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before,
.eyebrow::after{
  content:"✦";
  color:var(--gold-400);
  font-size:10px;
  letter-spacing:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;border-radius:var(--r-pill);
  font-family:'Nunito',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0.04em;
  transition:all 0.32s var(--ease);
  position:relative;
  border:2px solid transparent;
  text-align:center;
}
.btn-pink{
  background:linear-gradient(180deg,var(--rose-400) 0%,var(--rose-500) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 10px 24px rgba(232,122,149,0.35),
    0 3px 8px rgba(232,122,149,0.20);
}
.btn-pink:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 16px 36px rgba(232,122,149,0.45),
    0 4px 10px rgba(232,122,149,0.28);
}
.btn-ghost{
  background:var(--paper);
  border-color:var(--card-border);
  color:var(--rose-600);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
}
.btn-ghost:hover{
  background:var(--rose-50);
  border-color:var(--rose-300);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;
  transition:all 0.4s var(--ease);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.scrolled{
  background:rgba(253,245,240,0.86);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 4px 20px rgba(232,122,149,0.06);
}
.logo{
  display:flex;align-items:center;gap:11px;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:21px;
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}
.logo-mark{
  width:34px;height:28px;
  flex-shrink:0;
  filter:drop-shadow(0 3px 6px rgba(232,122,149,0.35));
  transition:transform 0.35s var(--ease-spring);
}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.08)}

.nav-links{
  display:flex;gap:30px;align-items:center;
  font-family:'Nunito',sans-serif;
  font-size:14.5px;font-weight:600;
  color:var(--ink-soft);
}
.nav-links a{
  transition:color 0.25s var(--ease);
  position:relative;
}
.nav-links a::after{
  content:"";position:absolute;bottom:-6px;left:50%;right:50%;height:2px;
  background:var(--rose-400);
  border-radius:2px;
  transition:left 0.3s var(--ease),right 0.3s var(--ease);
}
.nav-links a:hover{color:var(--rose-600)}
.nav-links a:hover::after{left:0;right:0}

.nav .btn{padding:11px 22px;font-size:13px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;
  padding:150px 0 100px;
  overflow:hidden;
}

.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.sparkle{
  position:absolute;
  color:var(--gold-400);
  opacity:0.7;
  animation:twinkle 5s ease-in-out infinite;
  line-height:1;
  user-select:none;
}
.sparkle:nth-child(1){top:18%;left:8%;  font-size:14px; animation-delay:0s}
.sparkle:nth-child(2){top:32%;right:12%;font-size:11px; animation-delay:1.2s}
.sparkle:nth-child(3){top:68%;left:14%;font-size:12px; animation-delay:2.4s}
.sparkle:nth-child(4){bottom:22%;right:18%;font-size:16px; animation-delay:0.6s}
.sparkle:nth-child(5){top:14%;left:44%;font-size:10px; animation-delay:3s}
.sparkle:nth-child(6){bottom:14%;left:38%;font-size:13px; animation-delay:1.8s}
.sparkle:nth-child(7){top:52%;right:6%; font-size:10px; animation-delay:4.1s}
.sparkle:nth-child(8){top:78%;right:40%;font-size:9px;  animation-delay:2.1s}

@keyframes twinkle{
  0%,100%{opacity:0.3;transform:scale(0.9) rotate(0deg)}
  50%    {opacity:1;  transform:scale(1.2) rotate(15deg)}
}

.mini-heart{
  position:absolute;
  color:var(--rose-300);
  opacity:0.55;
  animation:heartFloat 8s ease-in-out infinite;
  user-select:none;
  line-height:1;
}
.mini-heart:nth-child(9) {top:24%;left:20%;font-size:13px; animation-delay:0s}
.mini-heart:nth-child(10){bottom:32%;right:22%;font-size:11px; animation-delay:2s}
.mini-heart:nth-child(11){top:60%;left:6%;font-size:10px; animation-delay:4s}

@keyframes heartFloat{
  0%,100%{transform:translateY(0) rotate(-4deg);opacity:0.35}
  50%    {transform:translateY(-14px) rotate(6deg);opacity:0.75}
}

.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.08fr 0.92fr;gap:80px;align-items:center;
  width:100%;
}
.hero-text{max-width:600px}
.hero .eyebrow{margin-bottom:24px}

.hero h1{
  color:var(--ink);
  margin-bottom:26px;
}
.hero h1 em{
  font-style:italic;
  color:var(--rose-500);
  font-weight:700;
  position:relative;
  display:inline;
}
.hero h1 em::after{
  content:"";
  position:absolute;
  left:2%;right:2%;bottom:2px;height:8px;
  background:linear-gradient(90deg,transparent,rgba(239,205,120,0.55),transparent);
  border-radius:4px;
  z-index:-1;
}

.hero-lede{
  font-size:17.5px;line-height:1.78;
  color:var(--ink-soft);
  max-width:520px;margin-bottom:38px;
}
.hero-lede strong{color:var(--rose-600);font-weight:700}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Hero envelope visual ---------- */
.hero-visual{
  position:relative;
  height:520px;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
}
.env-stage{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}

.hero-letter-peek{
  position:absolute;
  top:12%;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:230px;
  padding:22px 18px 16px;
  background:linear-gradient(180deg,#fffdf7 0%,#fdf6ec 100%);
  border-radius:var(--r-sm);
  box-shadow:
    0 0 0 1px rgba(232,122,149,0.12),
    var(--shadow-md);
  animation:letterPeek 6s ease-in-out infinite;
  z-index:2;
}
.hero-letter-peek::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background-image:var(--paper-grain);
  pointer-events:none;
  opacity:0.7;
}
@keyframes letterPeek{
  0%,100%{transform:translateX(-50%) rotate(-3deg) translateY(0)}
  50%    {transform:translateX(-50%) rotate(-2deg) translateY(-8px)}
}
.peek-line{
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(156,139,138,0.22),rgba(156,139,138,0.08));
  margin-bottom:9px;
  position:relative;
}
.peek-line:nth-child(1){width:100%}
.peek-line:nth-child(2){width:82%}
.peek-line:nth-child(3){width:94%}
.peek-line:nth-child(4){width:56%;margin-bottom:14px}
.peek-sig{
  font-family:'Caveat',cursive;
  font-size:26px;font-weight:700;
  color:var(--rose-500);
  text-align:right;
  line-height:1;
  position:relative;
}

.hero-envelope{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:340px;
  height:232px;
  z-index:3;
  animation:envFloat 6s ease-in-out infinite;
}
@keyframes envFloat{
  0%,100%{transform:translateX(-50%) rotate(-2deg) translateY(0)}
  50%    {transform:translateX(-50%) rotate(-1deg) translateY(-10px)}
}

.env-body{
  position:absolute;inset:0;
  border-radius:14px 14px var(--r-md) var(--r-md);
  background:linear-gradient(180deg,var(--env-body) 0%,var(--env-body-2) 100%);
  box-shadow:
    0 20px 50px rgba(232,122,149,0.32),
    0 6px 16px rgba(232,122,149,0.20),
    inset 0 1px 0 rgba(255,255,255,0.4);
  overflow:hidden;
}
.env-body::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.6;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.env-body::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(105deg,transparent 48%,rgba(255,255,255,0.24) 50%,transparent 52%),
    linear-gradient(-105deg,transparent 48%,rgba(0,0,0,0.05) 50%,transparent 52%);
  pointer-events:none;
}

.env-flap{
  position:absolute;
  top:0;left:0;
  width:100%;height:64%;
  background:linear-gradient(180deg,var(--env-flap) 0%,var(--env-flap-2) 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 4px 6px rgba(232,122,149,0.18));
  z-index:2;
  border-radius:14px 14px 0 0;
}
.env-flap::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,0.14) 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

.env-seal{
  position:absolute;
  top:46%;left:50%;
  transform:translate(-50%,-50%);
  width:74px;height:74px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#fff5f8 70%,#ffe8ee 100%);
  border:3px solid rgba(255,255,255,0.9);
  display:flex;align-items:center;justify-content:center;
  z-index:4;
  box-shadow:
    0 8px 22px rgba(232,122,149,0.4),
    0 0 0 4px rgba(255,255,255,0.5),
    inset 0 -3px 6px rgba(232,122,149,0.10);
  animation:sealBeat 3s ease-in-out infinite;
}
@keyframes sealBeat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-50%) scale(1.04)}
}
.env-seal svg{
  width:36px;height:34px;
  filter:drop-shadow(0 2px 3px rgba(232,122,149,0.35));
}

.hero-badge{
  position:absolute;
  top:14%;right:-2%;
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;
  background:linear-gradient(180deg,#fffdf7 0%,#fff5f8 100%);
  border:2px solid var(--rose-200);
  border-radius:var(--r-pill);
  font-family:'Nunito',sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rose-600);
  box-shadow:var(--shadow-md);
  z-index:5;
  transform:rotate(4deg);
  animation:badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat{
  0%,100%{transform:rotate(4deg) translateY(0)}
  50%    {transform:rotate(4deg) translateY(-8px)}
}
.hero-badge::before{content:"✦";color:var(--gold-400);font-size:12px}

@keyframes badgeFloatMobile{
  0%,100%{transform:translateX(-50%) rotate(3deg) translateY(0)}
  50%    {transform:translateX(-50%) rotate(3deg) translateY(-8px)}
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.strip{
  background:var(--paper);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:32px 0;
  position:relative;
}
.strip::before,
.strip::after{
  content:"✦";
  position:absolute;
  color:var(--gold-300);
  font-size:14px;
  top:50%;
  transform:translateY(-50%);
}
.strip::before{left:24px}
.strip::after{right:24px}

.strip-inner{
  display:flex;justify-content:space-around;align-items:center;
  gap:32px;flex-wrap:wrap;
  font-family:'Caveat',cursive;
  font-size:22px;
  color:var(--ink-soft);
}
.strip-inner span{display:flex;align-items:center;gap:10px}
.strip-inner span::before{
  content:"♡";
  color:var(--rose-400);
  font-size:15px;
  font-family:'Nunito',sans-serif;
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sec-head{text-align:center;max-width:680px;margin:0 auto 72px}
.sec-head h2{margin-bottom:20px;text-wrap:balance}
.sec-head h2 em{font-style:italic;color:var(--rose-500)}
.sec-head p{font-size:17px;color:var(--ink-soft);line-height:1.75}

/* ============================================================
   DEMO
   ============================================================ */
.demo{padding-top:80px;padding-bottom:100px}

.demo-card{
  max-width:740px;
  margin:0 auto;
  padding:56px 48px 48px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,#fffdf7 0%,#fff5f8 100%);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-lg), var(--shadow-inset);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.demo-card::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  pointer-events:none;
  opacity:0.8;
}
.demo-card::after{
  content:"";
  position:absolute;inset:14px;
  border:1.5px dashed var(--line-dashed);
  border-radius:20px;
  pointer-events:none;
}
.demo-card > *{position:relative;z-index:1}

.demo-card .eyebrow{margin-bottom:14px}

.demo-card h2{
  font-size:clamp(26px,4vw,40px);
  margin-bottom:14px;
}
.demo-card h2 em{font-style:italic;color:var(--rose-500)}

.demo-lede{
  font-size:16.5px;color:var(--ink-soft);
  max-width:480px;margin:0 auto 8px;line-height:1.7;
}

.demo-code{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 26px;
  margin:26px 0 32px;
  background:var(--paper);
  border:2px dashed var(--rose-300);
  border-radius:var(--r-pill);
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--ink-muted);
  letter-spacing:0.06em;
  text-transform:uppercase;
  box-shadow:var(--shadow-sm);
  flex-wrap:wrap;
  justify-content:center;
  max-width:100%;
}
.demo-code strong{
  font-family:'Caveat',cursive;
  font-size:22px;
  font-weight:700;
  color:var(--rose-600);
  letter-spacing:0.02em;
  text-transform:none;
}

/* ============================================================
   WHY
   ============================================================ */
.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}

.why-card{
  padding:40px 34px;
  border-radius:var(--r-xl);
  background:var(--paper);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  transition:all 0.4s var(--ease);
  position:relative;overflow:hidden;
  transform:rotate(-0.5deg);
}
.why-card:nth-child(2){
  transform:rotate(0.6deg);
  background:linear-gradient(180deg,#fffdf7 0%,#fff5f8 100%);
}
.why-card:nth-child(3){transform:rotate(-0.4deg)}

.why-card::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.7;pointer-events:none;
}
.why-card:hover{
  transform:translateY(-6px) rotate(0);
  box-shadow:var(--shadow-lg), var(--shadow-inset);
  border-color:var(--rose-200);
}
.why-card > *{position:relative;z-index:1}

.why-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  margin-bottom:22px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--rose-200) 0%,var(--rose-300) 100%);
  color:#fff;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 16px rgba(232,122,149,0.28);
}
.why-card h3{margin-bottom:14px;color:var(--ink)}
.why-card p{font-size:15.5px;color:var(--ink-soft);line-height:1.72}

/* ============================================================
   HOW — steps
   ============================================================ */
.how{
  background:linear-gradient(180deg,var(--bg-blush) 0%,var(--bg) 100%);
  position:relative;
}
.how::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(239,205,120,0.14), transparent 25%),
    radial-gradient(circle at 88% 70%, rgba(232,122,149,0.08), transparent 25%);
  pointer-events:none;
}

.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  position:relative;z-index:1;
}

.step{
  padding:34px 26px;
  background:var(--paper);
  border:1px solid var(--card-border);
  border-radius:var(--r-xl);
  transition:all 0.4s var(--ease);
  position:relative;
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  overflow:hidden;
}
.step::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.6;pointer-events:none;
}
.step:hover{
  transform:translateY(-5px);
  border-color:var(--rose-200);
  box-shadow:var(--shadow-lg), var(--shadow-inset);
}
.step > *{position:relative;z-index:1}

.step-num{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--gold-200) 0%,var(--gold-400) 100%);
  color:#5c4210;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:19px;
  margin-bottom:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 6px 16px rgba(201,162,74,0.32);
}
.step h3{font-size:19px;margin-bottom:10px;color:var(--ink)}
.step p{font-size:14.5px;color:var(--ink-soft);line-height:1.68}

/* ============================================================
   INCLUDED
   ============================================================ */
.inc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
}
.inc-item{
  padding:28px 24px;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--card-border);
  display:flex;gap:16px;align-items:flex-start;
  transition:all 0.35s var(--ease);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  position:relative;
  overflow:hidden;
}
.inc-item::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.55;pointer-events:none;
}
.inc-item:hover{
  transform:translateY(-4px);
  border-color:var(--rose-200);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}
.inc-item > *{position:relative;z-index:1}

.inc-icon{
  font-size:24px;line-height:1;
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--rose-100) 0%,var(--rose-200) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 10px rgba(232,122,149,0.15);
}
.inc-item h4{
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:0;
  margin-bottom:5px;
  color:var(--ink);
}
.inc-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.62}

/* ============================================================
   PRICING — Template | Custom
   ============================================================ */
.pricing{padding-bottom:120px}

.price-solo{
  max-width:640px;
  margin:0 auto;
  position:relative;
}

.price-card-main{
  padding:56px 48px 48px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,#fffdf7 0%,#fff0f4 100%);
  border:2px solid var(--rose-300);
  position:relative;
  overflow:hidden;
  box-shadow:
    var(--shadow-lg),
    var(--shadow-inset),
    0 0 0 8px rgba(244,163,184,0.08);
  text-align:center;
}
.price-card-main::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.7;pointer-events:none;
}
.price-card-main::after{
  content:"";
  position:absolute;inset:14px;
  border:1.5px dashed var(--line-dashed);
  border-radius:22px;
  pointer-events:none;
}
.price-card-main > *{position:relative;z-index:1}

.price-badge-top{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;
  background:linear-gradient(180deg,var(--gold-200) 0%,var(--gold-300) 100%);
  color:#5c4210;
  border-radius:var(--r-pill);
  font-family:'Nunito',sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 16px rgba(201,162,74,0.25);
}
.price-badge-top::before{content:"✦";font-size:11px}

.price-main-name{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(24px,3.5vw,34px);
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:14px;
}
.price-main-name em{font-style:italic;color:var(--rose-500)}

.price-main-lede{
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:440px;
  margin:0 auto 32px;
  line-height:1.7;
}

.price-main-amount{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  margin-bottom:8px;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  color:var(--rose-600);
  letter-spacing:-0.03em;
  line-height:1;
}
.price-main-amount .currency{
  font-size:24px;
  align-self:flex-start;
  margin-top:10px;
  opacity:0.7;
}
.price-main-amount .number{
  font-size:clamp(58px,10vw,86px);
}
.price-main-amount .unit{
  font-size:26px;
  align-self:flex-end;
  margin-bottom:10px;
  opacity:0.75;
  letter-spacing:0;
}
.price-main-per{
  font-family:'Caveat',cursive;
  font-size:22px;
  color:var(--ink-muted);
  margin-bottom:36px;
  line-height:1.2;
}
.price-main-per::before,
.price-main-per::after{
  content:"♡";
  color:var(--rose-300);
  font-family:'Nunito',sans-serif;
  font-size:13px;
  vertical-align:middle;
  margin:0 10px;
  opacity:0.7;
}

.price-main-features{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
  margin:0 auto 40px;
  max-width:480px;
  text-align:left;
}
.price-main-features li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.55;
  font-weight:500;
}
.price-main-features li::before{
  content:"♡";
  color:var(--rose-400);
  font-size:13px;
  line-height:1.7;
  flex-shrink:0;
}

.price-main-cta{display:inline-flex;padding:18px 40px;font-size:14.5px}
.price-main-note{
  margin-top:20px;
  font-size:12.5px;
  color:var(--ink-muted);
  font-style:italic;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{
  background:linear-gradient(180deg,var(--bg-blush) 0%,var(--bg) 100%);
  position:relative;
}
.testi::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(239,205,120,0.10), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(232,122,149,0.06), transparent 30%);
  pointer-events:none;
}

.testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  position:relative;z-index:1;
}

.testi-card{
  padding:34px 30px 28px;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--card-border);
  transition:all 0.4s var(--ease);
  position:relative;
  box-shadow:var(--shadow-md), var(--shadow-inset);
  overflow:hidden;
  transform:rotate(-1deg);
}
.testi-card:nth-child(2){
  transform:rotate(1deg) translateY(-6px);
  background:linear-gradient(180deg,#fffdf7 0%,#fff5f8 100%);
}
.testi-card:nth-child(3){transform:rotate(-0.6deg)}

.testi-card::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.7;pointer-events:none;
}
.testi-card:hover{
  transform:rotate(0) translateY(-4px);
  border-color:var(--rose-200);
  box-shadow:var(--shadow-lg), var(--shadow-inset);
}
.testi-card > *{position:relative;z-index:1}

.testi-tape{
  position:absolute;
  top:-10px;left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:88px;height:22px;
  background:linear-gradient(180deg,rgba(244,163,184,0.55) 0%,rgba(244,163,184,0.35) 100%);
  border-radius:2px;
  box-shadow:0 2px 6px rgba(232,122,149,0.15);
  z-index:2;
}
.testi-card:nth-child(2) .testi-tape{
  background:linear-gradient(180deg,rgba(239,205,120,0.6) 0%,rgba(239,205,120,0.4) 100%);
  transform:translateX(-50%) rotate(2deg);
}

.testi-quote{
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:26px;
  font-weight:500;
  position:relative;
}
.testi-quote::before{
  content:"“";
  font-family:'Baloo 2',sans-serif;
  font-size:52px;
  line-height:0;
  color:var(--rose-300);
  position:relative;
  top:14px;
  margin-right:4px;
}

.testi-author{
  display:flex;align-items:center;gap:14px;
  padding-top:20px;
  border-top:1px dashed var(--line-soft);
}
.testi-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--rose-300) 0%,var(--rose-500) 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:17px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 12px rgba(232,122,149,0.30);
}
.testi-name{
  font-family:'Nunito',sans-serif;
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
}
.testi-role{
  color:var(--ink-muted);
  font-family:'Caveat',cursive;
  font-size:17px;
  line-height:1.2;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{
  max-width:800px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
}

.faq-item{
  background:var(--paper);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  transition:all 0.4s var(--ease);
  overflow:hidden;
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  position:relative;
}
.faq-item::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.55;
  pointer-events:none;
}
.faq-item.open{
  border-color:var(--rose-200);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}
.faq-item > *{position:relative;z-index:1}

.faq-q{
  width:100%;
  text-align:left;
  padding:22px 26px;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.005em;
  line-height:1.35;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--ink);
  transition:color 0.25s var(--ease);
}
.faq-q:hover{color:var(--rose-600)}

.faq-toggle{
  width:30px;height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--rose-100);
  display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1;
  color:var(--rose-500);
  transition:all 0.4s var(--ease);
  border:1px solid var(--rose-200);
}
.faq-item.open .faq-toggle{
  background:linear-gradient(180deg,var(--rose-400),var(--rose-500));
  border-color:transparent;
  color:#fff;
  transform:rotate(45deg);
  box-shadow:0 4px 12px rgba(232,122,149,0.3);
}

.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s var(--ease),padding 0.35s var(--ease);
  padding:0 26px;
}
.faq-item.open .faq-a{
  max-height:600px;
  padding:0 26px 24px;
}
.faq-a p{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.75;
  max-width:680px;
  padding-top:2px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{
  padding:130px 0;
  text-align:center;
  background:linear-gradient(180deg,var(--bg-blush) 0%,var(--bg-blush-2) 100%);
  position:relative;
  overflow:hidden;
}
.final::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(239,205,120,0.16), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(244,163,184,0.14), transparent 30%);
  pointer-events:none;
}
.final-sparkles{
  position:absolute;inset:0;pointer-events:none;z-index:1;
}
.final-sparkles span{
  position:absolute;
  color:var(--gold-400);
  animation:twinkle 5s ease-in-out infinite;
  line-height:1;
}
.final-sparkles span:nth-child(1){top:20%;left:14%;font-size:14px;animation-delay:0s}
.final-sparkles span:nth-child(2){top:30%;right:18%;font-size:11px;animation-delay:1.4s}
.final-sparkles span:nth-child(3){bottom:26%;left:22%;font-size:12px;animation-delay:2.2s}
.final-sparkles span:nth-child(4){bottom:18%;right:14%;font-size:13px;animation-delay:0.8s}

.final-inner{
  position:relative;z-index:2;
  max-width:720px;margin:0 auto;padding:0 24px;
}
.final h2{margin-bottom:24px;text-wrap:balance}
.final h2 em{
  font-style:italic;color:var(--rose-500);
  position:relative;
}
.final h2 em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:2px;height:8px;
  background:linear-gradient(90deg,transparent,rgba(239,205,120,0.5),transparent);
  border-radius:4px;
  z-index:-1;
}
.final p{
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:44px;
  line-height:1.75;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.final-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--ink);
  color:rgba(255,255,255,0.65);
  padding:56px 0 44px;
  font-size:14px;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.3;
  pointer-events:none;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.footer-brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:20px;
  color:#fff;
  margin-bottom:6px;
  letter-spacing:-0.015em;
}
.footer-brand .logo-mark{filter:drop-shadow(0 3px 6px rgba(0,0,0,0.4))}
.footer-tagline{
  max-width:300px;
  line-height:1.6;
  font-family:'Caveat',cursive;
  font-size:19px;
  color:rgba(255,255,255,0.55);
}
.footer-links{
  display:flex;gap:28px;flex-wrap:wrap;
  font-weight:600;
}
.footer-links a{transition:color 0.25s var(--ease)}
.footer-links a:hover{color:var(--rose-300)}
.footer-credit{
  font-family:'Caveat',cursive;
  font-size:21px;
  color:var(--rose-300);
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:0.10s}
.reveal.d2{transition-delay:0.20s}
.reveal.d3{transition-delay:0.30s}
.reveal.d4{transition-delay:0.40s}

/* Focus */
:focus-visible{
  outline:3px solid var(--rose-400);
  outline-offset:3px;
  border-radius:8px;
}

/* ============================================================
   MOBILE MENU — bottom sheet + trigger button
   ============================================================ */

.nav-menu{
  display:none;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-sm);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.3s var(--ease);
  flex-shrink:0;
  padding:0;
}
.nav-menu:hover{
  background:var(--rose-50);
  border-color:var(--rose-300);
}
.nav-menu-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:16px;
  align-items:flex-start;
}
.nav-menu-lines span{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--rose-500);
  transition:all 0.35s var(--ease);
}
.nav-menu-lines span:nth-child(1){width:16px}
.nav-menu-lines span:nth-child(2){width:11px}
.nav-menu-lines span:nth-child(3){width:14px}

.nav-menu[aria-expanded="true"] .nav-menu-lines span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
  width:16px;
}
.nav-menu[aria-expanded="true"] .nav-menu-lines span:nth-child(2){
  opacity:0;
}
.nav-menu[aria-expanded="true"] .nav-menu-lines span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
  width:16px;
}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.35s var(--ease);
}
.mobile-menu.open{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background:rgba(74,62,61,0.45);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}

.mobile-menu-sheet{
  position:absolute;
  left:0;right:0;bottom:0;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-cream) 100%);
  border-radius:24px 24px 0 0;
  padding:14px 22px 32px;
  transform:translateY(100%);
  transition:transform 0.5s var(--ease-out);
  box-shadow:0 -24px 60px rgba(232,122,149,0.28);
  max-height:82vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu-sheet::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--paper-grain);
  opacity:0.7;pointer-events:none;
  border-radius:inherit;
}
.mobile-menu.open .mobile-menu-sheet{
  transform:translateY(0);
}

.mobile-menu-handle{
  width:36px;height:4px;
  border-radius:2px;
  background:var(--rose-200);
  margin:0 auto 16px;
  position:relative;z-index:1;
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  position:relative;z-index:1;
}
.mobile-menu-eyebrow{
  font-family:'Caveat',cursive;
  font-size:26px;
  font-weight:700;
  color:var(--rose-500);
  line-height:1;
}
.mobile-menu-close{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--rose-100);
  border:1px solid var(--rose-200);
  color:var(--rose-600);
  font-size:22px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all 0.25s var(--ease);
  padding:0;
}
.mobile-menu-close:hover{
  background:var(--rose-200);
  transform:rotate(90deg);
}

.mobile-menu-list{
  display:flex;
  flex-direction:column;
  margin-bottom:20px;
  position:relative;z-index:1;
}

.mobile-menu-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 6px;
  border-bottom:1px dashed var(--line-soft);
  color:var(--ink);
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.005em;
  transition:all 0.25s var(--ease);
}
.mobile-menu-link:last-child{border-bottom:none}
.mobile-menu-link:active,
.mobile-menu-link:hover{
  color:var(--rose-600);
  padding-left:12px;
}

.mobile-menu-icon{
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--rose-100),var(--rose-200));
  display:flex;align-items:center;justify-content:center;
  color:var(--rose-500);
  font-size:14px;
  flex-shrink:0;
  font-family:'Nunito',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.mobile-menu-link > span:nth-child(2){flex:1}
.mobile-menu-arrow{
  color:var(--rose-400);
  font-size:16px;
  transition:transform 0.25s var(--ease);
  flex-shrink:0;
}
.mobile-menu-link:hover .mobile-menu-arrow,
.mobile-menu-link:active .mobile-menu-arrow{
  transform:translateX(4px);
}

.mobile-menu-cta{
  padding-top:8px;
  position:relative;z-index:1;
}
.mobile-menu-cta .btn{width:100%}

/* Desktop: hide the mobile menu entirely */
@media (min-width:961px){
  .mobile-menu{display:none}
}

/* ============================================================
   ACTIVE SECTION INDICATOR
   ============================================================ */

section[id]{
  scroll-margin-top: 90px;
}

/* Desktop nav-links */
.nav-links a{
  transition:
    color 0.3s var(--ease),
    font-weight 0.3s var(--ease);
}
.nav-links a.active{
  color: var(--rose-600);
  font-weight: 700;
}
.nav-links a.active::after{
  left: 0;
  right: 0;
  background: var(--rose-500);
}

/* Mobile bottom-sheet links */
.mobile-menu-link{
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    padding-left 0.25s var(--ease);
  border-radius: 14px;
  margin-bottom: 2px;
}

.mobile-menu-link.active{
  background: linear-gradient(90deg, var(--rose-50) 0%, rgba(255,240,244,0.4) 100%);
  color: var(--rose-600);
  padding-left: 14px;
}

.mobile-menu-link.active .mobile-menu-icon{
  background: linear-gradient(180deg, var(--rose-400) 0%, var(--rose-500) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 12px rgba(232,122,149,0.30);
}

.mobile-menu-link.active .mobile-menu-arrow{
  color: var(--rose-500);
  transform: translateX(2px);
}

.mobile-menu-link.active{
  border-bottom-color: transparent;
}
.mobile-menu-link.active + .mobile-menu-link{
  border-top: 1px dashed var(--line-soft);
}

@media (prefers-reduced-motion: reduce){
  .nav-links a,
  .mobile-menu-link{
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE — tablet (≤960px)
   ============================================================ */
@media (max-width:960px){
  .nav-links{display:none}
  .nav-menu{display:flex}

  .hero-grid{grid-template-columns:1fr;gap:56px;text-align:center}
  .hero{padding:130px 0 60px;min-height:auto}
  .hero-text{max-width:640px;margin:0 auto}
  .hero-lede{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-visual{height:440px}
  .hero-envelope{width:280px;height:192px}
  .hero-letter-peek{width:190px}
  .env-seal{width:64px;height:64px}
  .env-seal svg{width:32px;height:30px}

  .hero-badge{
    top:2%;right:auto;left:50%;
    transform:translateX(-50%) rotate(3deg);
    animation:badgeFloatMobile 5s ease-in-out infinite;
  }

  .why-grid{grid-template-columns:1fr;gap:20px}
  .why-card{transform:rotate(0)!important}

  .steps{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .testi-card{transform:rotate(0)!important}
  .testi-card:nth-child(2){transform:none}
}

/* ============================================================
   RESPONSIVE — phone (≤640px)
   ============================================================ */
@media (max-width:640px){
  body{font-size:16px}

  .section{padding:72px 0}
  .sec-head{margin-bottom:44px}
  .sec-head h2{margin-bottom:16px}
  .sec-head p{font-size:15.5px}

  .nav{padding:12px 0}
  .nav-inner{gap:14px}
  .logo{font-size:18px;gap:8px}
  .logo-mark{width:28px;height:24px}
  .nav .btn{
    padding:9px 16px;
    font-size:12px;
    letter-spacing:0.02em;
    width:auto;
  }

  .hero{padding:110px 0 48px}
  .hero h1{margin-bottom:22px}
  .hero-lede{font-size:16.5px;margin-bottom:32px}
  .hero-cta{margin-bottom:8px}

  .hero-visual{height:380px;margin-top:8px}
  .hero-envelope{width:240px;height:164px}
  .hero-letter-peek{width:170px;padding:18px 14px 12px}
  .hero-letter-peek .peek-line{height:5px;margin-bottom:7px}
  .hero-letter-peek .peek-sig{font-size:22px}
  .env-seal{width:54px;height:54px}
  .env-seal svg{width:26px;height:24px}
  .hero-badge{display:none}

  .strip{padding:24px 0}
  .strip::before,.strip::after{display:none}
  .strip-inner{
    font-size:19px;
    gap:14px 22px;
    justify-content:center;
  }

  .demo{padding-top:64px;padding-bottom:72px}
  .demo-card{padding:36px 22px 32px;border-radius:var(--r-lg)}
  .demo-card::after{inset:10px;border-radius:16px}
  .demo-code{
    font-size:11.5px;
    padding:10px 18px;
    gap:8px;
    letter-spacing:0.05em;
  }
  .demo-code strong{font-size:19px}

  .why-card,.step,.inc-item{padding:26px 22px}
  .why-num{width:42px;height:42px;font-size:20px;margin-bottom:18px}

  .steps{grid-template-columns:1fr;gap:14px}
  .step-num{width:40px;height:40px;font-size:17px;margin-bottom:18px}

  .inc-grid{grid-template-columns:1fr;gap:14px}

  .price-card-main{padding:40px 22px 32px;border-radius:var(--r-lg)}
  .price-card-main::after{inset:10px;border-radius:16px}
  .price-main-amount .number{font-size:clamp(54px,14vw,72px)}
  .price-main-amount .currency{font-size:20px}
  .price-main-amount .unit{font-size:22px;margin-bottom:8px}
  .price-main-per{font-size:19px;margin-bottom:28px}
  .price-main-per::before,.price-main-per::after{margin:0 6px}

  .price-main-features{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:32px;
  }
  .price-main-features li{font-size:14px}
  .price-main-cta{padding:16px 32px;font-size:14px;width:100%}

  .testi-card{padding:28px 22px}

  .faq-q{padding:18px 20px;font-size:16.5px;gap:14px}
  .faq-toggle{width:28px;height:28px;font-size:16px}
  .faq-a{padding:0 20px}
  .faq-item.open .faq-a{padding:0 20px 20px}
  .faq-a p{font-size:14.5px}

  .final{padding:96px 0}
  .final p{font-size:16px;margin-bottom:32px}

  .footer{padding:48px 0 40px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:22px}
  .footer-links{gap:20px;font-size:14px}

  .hero-cta .btn,
  .final-cta .btn,
  .price-main-cta,
  .demo-card .btn{width:100%}

  .hero-cta,
  .final-cta{flex-direction:column;width:100%}
}

/* ============================================================
   RESPONSIVE — small phone (≤380px)
   ============================================================ */
@media (max-width:380px){
  .nav-inner{gap:10px}
  .logo{font-size:16px;gap:7px}
  .logo-mark{width:24px;height:20px}
  .nav-menu{width:36px;height:36px}
  .nav .btn{padding:8px 12px;font-size:11px;letter-spacing:0}

  .hero h1{font-size:36px}

  .hero-visual{height:320px}
  .hero-envelope{width:210px;height:144px}
  .hero-letter-peek{width:150px}
  .env-seal{width:48px;height:48px}
  .env-seal svg{width:22px;height:20px}

  .price-main-amount .number{font-size:48px}
  .price-main-amount .currency{font-size:18px}
  .price-main-amount .unit{font-size:18px}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero-envelope, .hero-letter-peek, .hero-badge,
  .env-seal, .sparkle, .mini-heart, .final-sparkles span{
    animation:none !important;
  }
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ============================================================
   CATALOG LINKS — template lane (added with the catalog launch)
   ============================================================ */
/* Pricing: Template | Custom side by side */
.price-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:1040px;
  margin:0 auto;
  align-items:stretch;
}
.price-duo .price-card-main{
  padding:52px 34px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.price-duo .price-main-features{
  grid-template-columns:1fr;
  width:100%;
  max-width:300px;
  margin-bottom:auto;
  padding-bottom:36px;
}
.price-card-template{
  border-color:var(--rose-200);
  background:linear-gradient(180deg,#fffefb 0%,#fdf6f2 100%);
  box-shadow:var(--shadow-lg),var(--shadow-inset);
}
.price-card-template .price-badge-top{
  background:linear-gradient(180deg,var(--rose-100) 0%,var(--rose-200) 100%);
  color:var(--rose-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 6px 16px rgba(232,122,149,0.18);
}

/* Hero: small secondary link under the buttons */
.hero-sub-link{
  display:inline-block;
  margin-top:16px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-muted);
  text-decoration:underline;
  text-decoration-color:var(--rose-300);
  text-underline-offset:4px;
}
.hero-sub-link:hover{color:var(--rose-600)}

/* Demo + how: inline catalog pointers */
.demo-alt,
.how-template{
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-soft);
}
.demo-alt{margin-top:22px}
.demo-alt a,
.how-template a{
  color:var(--rose-600);
  font-weight:700;
  white-space:nowrap;
}
.how-template{
  max-width:720px;
  margin:40px auto 0;
  padding:18px 24px;
  text-align:center;
  background:var(--paper);
  border:1.5px dashed var(--rose-300);
  border-radius:var(--r-xl);
}
.how-template-label{
  display:block;
  margin-bottom:4px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-500);
}

@media (max-width:960px){
  .price-duo{grid-template-columns:1fr;max-width:560px}
  .hero-sub-link{display:block;text-align:center}
}
@media (max-width:640px){
  .price-duo .price-card-main{padding:44px 24px 34px}
  .how-template{padding:16px 18px}
}

/* "Baru" tag on the Template nav link */
.nav-new{
  display:inline-block;
  margin-left:4px;
  padding:2px 7px;
  border-radius:var(--r-pill);
  background:var(--rose-500);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  vertical-align:2px;
  line-height:1.4;
}