@font-face {
  font-family: 'TheHeart';
  src: url('../the-heart-of-everything-demo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:    #110c06;
  --bark:   #2e1c0e;
  --terra:  #9b6b47;
  --clay:   #c9ad8a;
  --sand:   #f5f0e8;
  --sand2:  #ede5d6;
  --warm:   #ddd0bc;
  --white:  #ffffff;
  --wine:     #7a3045;
  --wine-bg:  #f5eaed;
  --accent:   #c2966b;
  --avail:    #0e8a45;
  --avail-bg: #e6f6ed;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px;
  --nav:64px;
}

html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--ink);color:var(--sand);overflow-x:hidden}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.5rem,5vw,3.5rem);
  background:rgba(17,12,6,0.75);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,173,138,0.12);
}
.nav-logo{
  font-family:'TheHeart','Cormorant Garamond',serif;font-size:30px;font-weight:600;
  color:var(--sand);text-decoration:none;letter-spacing:-0.01em;
  transform-origin:left center;transition:transform .2s ease-out;
}
.nav-logo em{font-style:italic;font-weight:300;color:var(--clay)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:13px;font-weight:400;color:var(--clay);text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--sand)}
.btn-nav{
  background:var(--clay);color:var(--bark) !important;
  padding:8px 20px;border-radius:99px;font-weight:500 !important;
  transition:background .2s !important;
}
.btn-nav:hover{background:var(--sand) !important}

/* ── HERO ── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--nav) + 5rem) 2rem 6rem;
  position:relative;overflow:hidden;
  background:linear-gradient(rgba(17,12,6,.62),rgba(17,12,6,.62)),url('../img/boutique.webp') center/cover no-repeat;
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(0,0,0,.35);
}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(201,173,138,.18) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(155,107,71,.10) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 75%, rgba(155,107,71,.08) 0%,transparent 60%);
}
.hero-eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-bottom:1.5rem;
  opacity:0;animation:fadeUp .7s .1s forwards;
}
.hero-title{
  font-family:'TheHeart','Cormorant Garamond',serif;
  font-size:clamp(64px,12vw,120px);font-weight:600;line-height:.92;
  color:var(--sand);margin-bottom:.4rem;
  opacity:0;animation:fadeUp .7s .2s forwards;
}
.hero-title em{font-style:italic;font-weight:300;color:var(--clay)}
.hero-tagline{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px,2.8vw,24px);font-style:italic;font-weight:300;
  color:var(--clay);margin-bottom:2rem;
  opacity:0;animation:fadeUp .7s .3s forwards;
}
.hero-desc{
  max-width:500px;font-size:16px;font-weight:300;line-height:1.8;
  color:rgba(245,240,232,.7);margin:0 auto 2.75rem;
  opacity:0;animation:fadeUp .7s .4s forwards;
}
.hero-desc strong{color:var(--sand);font-weight:500}
.hero-actions{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fadeUp .7s .5s forwards;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--clay);color:var(--bark);
  font-size:14px;font-weight:500;padding:13px 30px;
  border-radius:99px;text-decoration:none;border:none;cursor:pointer;
  transition:background .2s,transform .15s;
}
.btn-primary:hover{background:var(--sand);transform:translateY(-1px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--clay);
  font-size:14px;font-weight:400;padding:13px 22px;
  border-radius:99px;text-decoration:none;
  border:1px solid rgba(201,173,138,.35);
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--clay);color:var(--sand)}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,173,138,.1);color:var(--clay);
  font-size:12px;font-weight:400;padding:6px 16px;
  border-radius:99px;border:1px solid rgba(201,173,138,.2);
  margin-top:2.5rem;
  opacity:0;animation:fadeUp .7s .65s forwards;
}
.wa-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--avail);flex-shrink:0;
  box-shadow:0 0 6px rgba(14,138,69,.6);
  animation:pulse 2s infinite;
}
.hero-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(201,173,138,.5);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  opacity:0;animation:fadeUp .7s 1s forwards;
}
.scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,rgba(201,173,138,.5),transparent);animation:scrollPulse 2s 1.5s infinite}

/* ── STATS ── */
.stats-bar{
  background:rgba(201,173,138,.07);
  border-top:1px solid rgba(201,173,138,.1);
  border-bottom:1px solid rgba(201,173,138,.1);
  padding:3rem clamp(1.5rem,5vw,3.5rem);
}
.stats-inner{
  max-width:860px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;text-align:center;
}
.stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:52px;font-weight:600;color:var(--clay);line-height:1;margin-bottom:.4rem;
}
.stat-label{font-size:13px;font-weight:300;color:rgba(245,240,232,.6);line-height:1.5}

/* ── SECTIONS BASE ── */
section{padding:7rem clamp(1.5rem,5vw,3.5rem)}
.container{max-width:1040px;margin:0 auto}
.container-sm{max-width:680px;margin:0 auto}
.sup{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);margin-bottom:.75rem;display:block;
}
h2.heading{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.08;
  color:var(--sand);margin-bottom:1rem;
}
h2.heading em{font-style:italic;font-weight:300;color:var(--clay)}
.sub{font-size:15px;font-weight:300;color:rgba(245,240,232,.65);line-height:1.75;max-width:500px}

/* ── HOW ── */
.how-section{background:rgba(255,255,255,.02)}
.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(201,173,138,.1);
  border:1px solid rgba(201,173,138,.12);
  border-radius:var(--r-xl);overflow:hidden;margin-top:3.5rem;
}
.step-card{
  background:rgba(17,12,6,.9);padding:2.25rem 2rem;
  transition:background .22s;position:relative;
}
.step-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,173,138,0),transparent);
  transition:background .3s;
}
.step-card:hover{background:rgba(46,28,14,.6)}
.step-card:hover::before{background:linear-gradient(90deg,transparent,var(--clay),transparent)}
.step-n{
  font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:600;
  color:rgba(201,173,138,.2);line-height:1;margin-bottom:1rem;
  transition:color .2s;
}
.step-card:hover .step-n{color:rgba(201,173,138,.5)}
.step-title{font-size:15px;font-weight:500;color:var(--sand);margin-bottom:.5rem}
.step-desc{font-size:13px;color:rgba(245,240,232,.55);line-height:1.65}

/* ── PROBLEM ── */
.problem-section{
  background:var(--bark);
  border-top:1px solid rgba(201,173,138,.1);
  border-bottom:1px solid rgba(201,173,138,.1);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;margin-top:3.5rem}
.problem-list{display:flex;flex-direction:column;gap:1px}
.prob-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:1.1rem 1.25rem;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.prob-item:first-child{border-radius:var(--r-md) var(--r-md) 0 0}
.prob-item:last-child{border-bottom:none;border-radius:0 0 var(--r-md) var(--r-md)}
.prob-dot{width:5px;height:5px;border-radius:50%;background:rgba(201,173,138,.5);flex-shrink:0;margin-top:8px}
.prob-body{font-size:13.5px;color:rgba(245,240,232,.65);line-height:1.55}
.prob-body strong{color:var(--sand);font-weight:500;display:block;margin-bottom:3px}
.sol-label{
  font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--wine);margin-bottom:1rem;display:block;
}
.sol-list{display:flex;flex-direction:column;gap:10px}
.sol-card{
  background:rgba(122,48,69,.08);
  border:1px solid rgba(122,48,69,.18);
  border-radius:var(--r-md);padding:1.1rem 1.25rem;
}
.sol-title{font-size:14px;font-weight:500;color:#e8a0b2;margin-bottom:4px}
.sol-desc{font-size:13px;color:rgba(232,160,176,.7);line-height:1.55}

/* ── BENEFITS ── */
.benefits-section{background:var(--ink)}
.benefits-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(201,173,138,.08);
  border:1px solid rgba(201,173,138,.1);
  border-radius:var(--r-xl);overflow:hidden;
  margin-top:3.5rem;
}
.benefit-card{
  background:rgba(17,12,6,.85);padding:2.25rem 2rem;
  transition:background .2s;
}
.benefit-card:hover{background:rgba(46,28,14,.7)}
.benefit-icon{
  font-size:22px;margin-bottom:1rem;display:block;
  filter:grayscale(0.2) brightness(1.1);
}
.benefit-title{font-size:14.5px;font-weight:500;color:var(--sand);margin-bottom:.5rem}
.benefit-desc{font-size:13px;color:rgba(245,240,232,.55);line-height:1.6}

/* ── CHAT MOCKUP ── */
.demo-section{
  background:rgba(46,28,14,.3);
  border-top:1px solid rgba(201,173,138,.1);
  border-bottom:1px solid rgba(201,173,138,.1);
}
.demo-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.chat-phone{
  background:#0d0d0d;border-radius:32px;
  border:1.5px solid rgba(201,173,138,.15);
  overflow:hidden;max-width:300px;margin:0 auto;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.chat-header{
  background:#1f1f1f;padding:.85rem 1.1rem;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chat-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--terra),var(--clay));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.chat-name{font-size:13px;font-weight:500;color:#fff}
.chat-status{font-size:11px;color:var(--avail)}
.chat-body{padding:1rem;display:flex;flex-direction:column;gap:.6rem;min-height:340px;background:#111}
.msg{max-width:80%;font-size:12.5px;line-height:1.5;padding:.6rem .85rem;border-radius:12px}
.msg-in{background:#2a2a2a;color:#ddd;border-bottom-right-radius:3px;align-self:flex-end}
.msg-out{background:#005c4b;color:#fff;border-bottom-left-radius:3px;align-self:flex-start}
.msg-time{font-size:10px;opacity:.45;display:block;margin-top:3px;text-align:right}
.msg-btns{display:flex;flex-direction:column;gap:5px;align-self:flex-start;max-width:82%}
.msg-btn{
  background:rgba(0,92,75,.7);color:#a7f3cc;
  font-size:12px;padding:.5rem .85rem;
  border-radius:8px;border:1px solid rgba(167,243,204,.2);
  cursor:default;
}
.chat-footer{
  background:#1f1f1f;padding:.7rem 1rem;
  display:flex;gap:8px;align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.chat-input{
  flex:1;background:rgba(255,255,255,.06);
  border:none;border-radius:20px;
  padding:.45rem .9rem;font-size:12px;color:#999;
}

/* ── CTA ── */
.cta-section{background:var(--bark);text-align:center}
.cta-card{
  max-width:620px;margin:0 auto;
  background:rgba(201,173,138,.07);
  border:1px solid rgba(201,173,138,.15);
  border-radius:var(--r-xl);padding:4rem 3rem;
}
.cta-section h2.heading{margin-bottom:1rem}
.cta-section .sub{margin:0 auto 2.5rem}

/* ── FOOTER ── */
footer{
  background:var(--ink);
  border-top:1px solid rgba(201,173,138,.1);
  padding:2.5rem clamp(1.5rem,5vw,3.5rem);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.footer-logo{
  font-family:'TheHeart','Cormorant Garamond',serif;font-size:26px;font-weight:600;
  color:var(--sand);text-decoration:none;
}
.footer-logo em{font-style:italic;font-weight:300;color:var(--clay)}
.footer-copy{font-size:12px;color:rgba(201,173,138,.5)}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 4px rgba(14,138,69,.5)}50%{box-shadow:0 0 10px rgba(14,138,69,.9)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── WA SVG ── */
.wa-icon{width:15px;height:15px;flex-shrink:0}

/* ── MOBILE ── */
@media(max-width:900px){
  .two-col{grid-template-columns:1fr}
  .demo-inner{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr}
  .benefits-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-links{display:none}
  .stats-inner{grid-template-columns:1fr;gap:2rem}
  .steps-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .cta-card{padding:2.5rem 1.5rem}
}