/* ============================================
   VISIBLE EVERYWHERE — SEO / AEO / GEO LANDING
   Marketing SOP: core orange palette, Inter, light mode,
   ~60% visuals (images, flow charts, video) / ~40% words
   ============================================ */

:root{
  /* SOP palette */
  --orange:#F2AA24;
  --orange-soft:#FCEBC8;
  --brown:#504538;
  --taupe:#B7A99A;
  --green:#00D697;
  --red:#D90000;
  --cream:#F2F1EF;
  --white:#FFFFFF;

  --bg:var(--cream);
  --bg-alt:var(--white);
  --surface:var(--white);
  --border:rgba(80,69,56,0.12);
  --text:var(--brown);
  --text-dim:#6E6255;

  --font:'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --shadow-sm:0 4px 16px rgba(80,69,56,0.08);
  --shadow-md:0 14px 40px rgba(80,69,56,0.14);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:800; letter-spacing:-0.02em; }
p,figure{ margin:0; }
svg{ flex-shrink:0; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* -------- BUTTONS -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; border-radius:var(--radius-pill);
  cursor:pointer; border:none; white-space:nowrap; min-height:44px; padding:12px 24px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-lg{ padding:16px 30px; font-size:16px; }
.btn-sm{ padding:10px 20px; font-size:14px; min-height:40px; }
.btn-primary{ background:var(--orange); color:var(--brown); box-shadow:0 8px 24px rgba(242,170,36,0.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(242,170,36,0.45); }
.btn-ghost{ background:rgba(255,255,255,0.85); color:var(--brown); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color:var(--orange); background:#fff; }
.btn-whatsapp{ background:#25D366; color:#0b1f13; box-shadow:0 10px 30px rgba(37,211,102,0.35); }
.btn-whatsapp:hover{ transform:translateY(-2px); }

/* -------- FADE UP -------- */
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .fade-up{ opacity:1; transform:none; transition:none; } }

/* ============ NAVBAR ============ */
.navbar{ position:sticky; top:0; z-index:100; padding:14px 0; transition:background .3s, box-shadow .3s; }
.navbar.scrolled{ background:rgba(242,241,239,0.95); backdrop-filter:blur(12px); box-shadow:0 4px 24px rgba(80,69,56,0.08); }
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-logo{ height:32px; width:auto; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--text-dim); transition:color .2s; }
.nav-links a:hover{ color:var(--brown); }
.navbar-actions{ display:flex; align-items:center; gap:14px; }
.lang-switch,.mobile-lang-switch{
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:3px;
}
.lang-btn{
  border:none; background:transparent; color:var(--text-dim); font-family:var(--font);
  font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:var(--radius-pill);
  cursor:pointer; min-height:28px;
}
.lang-btn.active{ background:var(--orange); color:var(--brown); }

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.hamburger span{ width:22px; height:2px; background:var(--brown); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  display:none; flex-direction:column; gap:4px; max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease); padding:0 24px; background:var(--cream);
}
.mobile-menu.open{ max-height:460px; padding:12px 24px 20px; }
.mobile-menu > a{ padding:12px 4px; font-weight:600; border-bottom:1px solid var(--border); }
.mobile-menu .btn{ margin-top:12px; width:100%; border-bottom:none; }
.mobile-lang-switch{ align-self:flex-start; margin-bottom:10px; }

/* ============ HERO (banner + overlay) ============ */
.hero{
  position:relative; padding:96px 0 72px; margin-top:-72px; padding-top:168px;
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 55%, rgba(255,255,255,0.45) 100%),
    url('./logo/hero_banner.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-inner{ position:relative; text-align:center; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--brown); background:rgba(255,255,255,0.9); border:1px solid rgba(242,170,36,0.6);
  padding:8px 18px; border-radius:var(--radius-pill); margin-bottom:26px;
}
.kicker-product{ font-weight:800; letter-spacing:.01em; color:var(--brown); font-size:14px; }
.kicker-sep{ width:1px; height:14px; background:var(--taupe); }
.hero-kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }
.hero-title{
  font-size:clamp(2.2rem, 5.4vw, 4.2rem); display:flex; flex-direction:column; gap:8px;
  max-width:920px; margin:0 auto 20px; color:var(--brown);
}
.hero-title .mark{
  background:linear-gradient(transparent 58%, rgba(242,170,36,0.7) 58%, rgba(242,170,36,0.7) 92%, transparent 92%);
  padding:0 6px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero-sub{ font-size:clamp(16px, 2vw, 19px); font-weight:500; color:var(--brown); max-width:640px; margin:0 auto 34px; }
.hero-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

/* Shared flow chart */
.flow, .outcome-flow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,0.92); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 26px; max-width:860px; margin:0 auto; box-shadow:var(--shadow-sm);
}
.flow-step{ display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:700; font-size:14px; min-width:84px; }
.flow-icon{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--orange-soft); border:2px solid var(--orange); color:var(--brown);
}
.flow-icon svg, .rm-icon svg, .audience-icon-wrap svg, .pain-icon, .ai-avatar svg, .mock-search svg, .mock-voice svg{
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.flow-icon svg{ width:26px; height:26px; }
.flow-step-final .flow-icon{ background:var(--orange); }
.flow-arrow{
  flex:1; max-width:60px; min-width:20px; height:2px; background:var(--orange); position:relative; margin-bottom:26px;
}
.flow-arrow::after{
  content:''; position:absolute; right:-1px; top:-4px; border-left:8px solid var(--orange);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.platforms{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.platforms span{
  font-size:13px; font-weight:700; padding:7px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.88); border:1px solid var(--border);
}

/* ============ SECTION SHARED ============ */
section{ padding:96px 0; }
.section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.eyebrow{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:#B87A00; margin-bottom:14px; }
.section-title{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }

/* ============ PROMO VIDEO ============ */
.promo-video-section{ padding:72px 0 24px; }
.promo-video-card{
  max-width:980px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:28px; padding:14px; box-shadow:var(--shadow-md);
}
.promo-video-placeholder{
  aspect-ratio:16/9; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    linear-gradient(rgba(80,69,56,0.55), rgba(80,69,56,0.55)),
    url('./logo/hero_banner.jpg') center/cover;
  color:#fff; text-align:center;
}
.play-badge{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:var(--orange);
  color:var(--brown); box-shadow:0 0 0 12px rgba(242,170,36,0.25); margin-bottom:18px;
}
.promo-video-placeholder p{ font-size:clamp(1.1rem, 2.4vw, 1.6rem); font-weight:700; }
.promo-video-card iframe{ width:100%; aspect-ratio:16/9; border:none; border-radius:18px; display:block; }

/* ============ RESULTS ============ */
.results-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; margin-bottom:36px; }
.result-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.result-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--orange); }
.result-img-wrapper{ position:relative; aspect-ratio:16/10; overflow:hidden; cursor:zoom-in; background:var(--cream); }
.result-img-wrapper img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .4s var(--ease); }
.result-card:hover .result-img-wrapper img{ transform:scale(1.03); }
.img-overlay{
  position:absolute; inset:0; background:rgba(80,69,56,0.55); color:#fff; font-size:13px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:0; transition:opacity .25s;
}
.result-img-wrapper:hover .img-overlay{ opacity:1; }
.result-card figcaption{ padding:18px 22px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.result-card h3{ width:100%; font-size:18px; margin-top:6px; }
.result-platform, .result-rank{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); }
.platform-google{ background:rgba(66,133,244,0.1); color:#1A64D6; }
.platform-ai{ background:rgba(15,157,88,0.1); color:#0B7A44; }
.platform-gemini{ background:rgba(142,68,173,0.1); color:#7D3C98; }
.platform-copilot{ background:rgba(0,120,212,0.1); color:#005A9E; }
.result-rank{ background:var(--orange-soft); color:var(--brown); }

.strip-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--orange-soft); border:1.5px dashed var(--orange); border-radius:var(--radius-lg); padding:22px 28px;
}
.strip-cta h4{ font-size:20px; }

/* ============ PROBLEM ============ */
.problem{ background:var(--bg-alt); }
.problem-layout{ display:grid; grid-template-columns:1fr 1.25fr; gap:36px; align-items:center; }
.ai-mock{
  background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-md);
}
.ai-mock-bar{ display:flex; gap:6px; margin-bottom:18px; }
.ai-mock-bar i{ width:11px; height:11px; border-radius:50%; background:var(--taupe); }
.ai-q{
  margin-left:auto; max-width:85%; background:var(--brown); color:#fff; font-size:14px; font-weight:600;
  padding:12px 16px; border-radius:16px 16px 4px 16px; margin-bottom:16px; width:fit-content;
}
.ai-a{ display:flex; gap:12px; align-items:flex-start; }
.ai-avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#7B61FF,#4F8BFF); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
}
.ai-avatar svg{ width:20px; height:20px; fill:#fff; stroke:none; }
.ai-avatar.sm{ width:28px; height:28px; }
.ai-avatar.sm svg{ width:16px; height:16px; }
.ai-list{
  flex:1; background:#fff; border-radius:4px 16px 16px 16px; padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.ai-list li{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; }
.ai-list .ln{ flex:1; height:7px; border-radius:4px; background:#ECE8E3; }
.ok{
  width:22px; height:22px; border-radius:50%; background:rgba(0,214,151,0.15); color:#00976A;
  display:grid; place-items:center; font-size:12px;
}
.ai-missing{
  margin-top:16px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; color:var(--red);
  background:rgba(217,0,0,0.06); border:1.5px dashed rgba(217,0,0,0.45); border-radius:var(--radius-md); padding:12px 16px;
}
.ai-missing b{
  width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:12px;
}
.pain-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.pain-card{
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center;
  background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px;
  transition:transform .3s var(--ease), border-color .3s;
}
.pain-card:hover{ transform:translateY(-3px); border-color:var(--orange); }
.pain-icon{
  grid-row:span 2; width:48px; height:48px; padding:11px; border-radius:14px; background:#fff;
  color:var(--red); border:1px solid rgba(217,0,0,0.18);
}
.pain-card h3{ font-size:16px; }
.pain-card p{ font-size:13.5px; color:var(--text-dim); margin-top:3px; }

/* ============ OFFER ============ */
.feat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:36px; }
.feat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 18px 24px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.feat-visual{
  height:190px; border-radius:var(--radius-md); background:linear-gradient(160deg, #FFF7E6, var(--cream));
  border:1px solid var(--border); padding:18px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px; justify-content:center;
}
.feat-visual i{ display:block; height:7px; border-radius:4px; background:#E4DED6; }
.w55{ width:55%; } .w60{ width:60%; } .w70{ width:70%; } .w80{ width:80%; } .w85{ width:85%; } .w90{ width:90%; } .w95{ width:95%; }
.mock-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 12px;
}
.mock-search svg{ width:16px; height:16px; color:var(--taupe); }
.mock-search i{ flex:1; }
.mock-result{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:8px 10px; border:1px solid transparent; }
.mock-result b{ font-size:12px; color:var(--taupe); width:26px; text-align:center; }
.mock-result span{ flex:1; display:flex; flex-direction:column; gap:5px; }
.mock-result-top{ border-color:var(--orange); box-shadow:0 6px 16px rgba(242,170,36,0.25); }
.mock-result-top b{ background:var(--orange); color:var(--brown); border-radius:6px; padding:3px 0; }
.mock-result-top i:first-child{ background:#1A64D6; opacity:.6; }
.mock-snippet{ position:relative; background:#fff; border:2px solid var(--orange); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.mock-q{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; }
.mock-q i{ background:var(--brown); opacity:.5; }
.mock-ans{ display:flex; flex-direction:column; gap:6px; }
.mock-chip{
  position:absolute; top:-11px; right:10px; background:var(--orange); color:var(--brown); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:var(--radius-pill);
}
.mock-voice{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--radius-pill); padding:8px 14px; width:fit-content; }
.mock-voice svg{ width:18px; height:18px; color:var(--brown); }
.wave{ display:flex; align-items:center; gap:3px; }
.feat-visual .wave i{ width:4px; background:var(--orange); border-radius:2px; animation:wave 1.2s infinite ease-in-out; }
.wave i:nth-child(1){ height:8px; } .wave i:nth-child(2){ height:16px; animation-delay:.1s; }
.wave i:nth-child(3){ height:22px; animation-delay:.2s; } .wave i:nth-child(4){ height:14px; animation-delay:.3s; }
.wave i:nth-child(5){ height:9px; animation-delay:.4s; }
@keyframes wave{ 50%{ transform:scaleY(.5); } }
.mock-chat-user{ align-self:flex-end; width:60%; background:var(--brown); border-radius:14px 14px 4px 14px; padding:10px; }
.feat-visual .mock-chat-user i{ background:rgba(255,255,255,0.55); width:100%; }
.mock-chat-ai{ display:flex; gap:8px; align-items:flex-start; }
.mock-chat-bubble{ flex:1; background:#fff; border-radius:4px 14px 14px 14px; padding:12px; display:flex; flex-direction:column; gap:7px; }
.brand-hit{
  align-self:flex-start; font-size:12.5px; font-weight:800; background:var(--orange); color:var(--brown);
  padding:4px 10px; border-radius:var(--radius-pill);
}
.feat-tag{
  display:inline-block; font-weight:800; font-size:12.5px; color:var(--brown); background:var(--orange-soft);
  border:1px solid var(--orange); padding:4px 12px; border-radius:var(--radius-pill); margin:0 6px 10px;
}
.feat-card h3{ font-size:19px; margin:0 6px 14px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 6px; }
.chips span{
  font-size:13px; font-weight:600; padding:6px 12px; border-radius:var(--radius-pill); background:var(--cream);
  border:1px solid var(--border); position:relative; padding-left:26px;
}
.chips span::before{
  content:''; position:absolute; left:10px; top:50%; width:8px; height:8px; border-radius:50%; background:var(--green); transform:translateY(-50%);
}
.outcome-flow{ max-width:900px; background:var(--surface); }
.of-step{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:100px; }
.of-step b{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:800;
  background:var(--orange-soft); border:2px solid var(--orange);
}
.of-step span{ font-weight:700; font-size:14px; }
.of-final b{ background:var(--green); border-color:var(--green); color:#fff; font-size:26px; }
.outcome-flow .flow-arrow{ margin-bottom:24px; }

/* ============ PROCESS (roadmap flow chart) ============ */
.process{ background:var(--bg-alt); }
.roadmap{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; position:relative; }
.roadmap::before{
  content:''; position:absolute; top:36px; left:10%; right:10%; height:3px;
  background:linear-gradient(90deg, var(--orange), var(--green));
}
.rm-step{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.rm-icon{
  width:72px; height:72px; border-radius:50%; background:#fff; border:3px solid var(--orange); color:var(--brown);
  display:grid; place-items:center; position:relative; z-index:1; margin-bottom:16px; box-shadow:0 0 0 8px var(--bg-alt);
}
.rm-icon svg{ width:30px; height:30px; }
.rm-step-ongoing .rm-icon{ border-color:var(--green); background:rgba(0,214,151,0.12); }
.rm-week{
  font-size:11.5px; font-weight:800; letter-spacing:.08em; background:var(--orange-soft); padding:4px 10px;
  border-radius:var(--radius-pill); margin-bottom:10px;
}
.rm-step-ongoing .rm-week{ background:rgba(0,214,151,0.15); }
.rm-step h3{ font-size:16.5px; margin-bottom:6px; }
.rm-step p{ font-size:13px; color:var(--text-dim); }

/* ============ AUDIENCE ============ */
.audience-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.audience-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 24px;
  text-align:center; display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s;
}
.audience-card:hover{ transform:translateY(-6px); border-color:var(--orange); }
.audience-icon-wrap{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px;
  background:var(--orange-soft); border:2px solid var(--orange); color:var(--brown);
}
.audience-icon-wrap svg{ width:38px; height:38px; }
.audience-card h3{ font-size:19px; margin-bottom:8px; }
.audience-card p{ font-size:14.5px; color:var(--text-dim); }

/* ============ CTA ============ */
.cta-section{
  background:
    linear-gradient(135deg, rgba(80,69,56,0.88), rgba(80,69,56,0.78)),
    url('./logo/hero_banner.jpg') center/cover;
  color:#fff;
}
.cta-inner{ text-align:center; max-width:640px; }
.cta-title{ font-size:clamp(1.8rem, 4vw, 2.8rem); margin-bottom:14px; }
.cta-sub{ font-size:17px; opacity:.9; margin-bottom:30px; }

/* ============ FOOTER ============ */
.footer{ background:var(--bg-alt); border-top:1px solid var(--border); padding:40px 0 0; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding-bottom:28px; border-bottom:1px solid var(--border);
}
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ font-size:14px; font-weight:600; color:var(--text-dim); }
.footer-links a:hover{ color:var(--brown); }
.footer-bottom{ padding:20px 24px; font-size:13px; color:var(--text-dim); }

/* ============ FLOATING WHATSAPP ============ */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:999;
}
.whatsapp-float svg{ width:30px; height:30px; }

/* ============ LIGHTBOX ============ */
.lightbox-modal{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.lightbox-modal.active{ opacity:1; pointer-events:auto; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.85); }
.lightbox-content{
  position:relative; z-index:2; background:#fff; border-radius:var(--radius-md); max-width:960px; width:100%;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
.lightbox-close{
  position:absolute; top:10px; right:12px; z-index:10; background:rgba(80,69,56,0.75); color:#fff; border:none;
  width:36px; height:36px; border-radius:50%; font-size:24px; line-height:1; cursor:pointer;
}
.lightbox-header{ padding:16px 20px; border-bottom:1px solid var(--border); }
.lightbox-header h4{ font-size:16px; }
.lightbox-body{ padding:16px; overflow-y:auto; background:var(--cream); }
.lightbox-body img{ margin:0 auto; max-height:75vh; object-fit:contain; border-radius:var(--radius-sm); }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .problem-layout{ grid-template-columns:1fr; }
  .roadmap{ grid-template-columns:repeat(3, 1fr); row-gap:36px; }
  .roadmap::before{ display:none; }
}

@media (max-width:768px){
  .nav-links, .navbar-actions{ display:none; }
  .hamburger{ display:flex; }
  .mobile-menu{ display:flex; }
  section{ padding:64px 0; }
  .hero{ padding-top:128px; padding-bottom:52px;
    background-image:linear-gradient(rgba(255,255,255,0.84), rgba(255,255,255,0.84)), url('./logo/hero_banner.jpg'); }
  .hero-actions{ margin-bottom:36px; }
  .flow{ flex-wrap:wrap; padding:16px; gap:12px 4px; }
  .flow .flow-arrow{ display:none; }
  .flow-step{ min-width:30%; font-size:13px; }
  .results-grid, .feat-grid, .audience-grid{ grid-template-columns:1fr; }
  .roadmap{ grid-template-columns:1fr; text-align:left; row-gap:20px; }
  .roadmap::before{ display:block; top:36px; bottom:36px; left:35px; right:auto; width:3px; height:auto;
    background:linear-gradient(180deg, var(--orange), var(--green)); }
  .rm-step{ display:grid; grid-template-columns:72px 1fr; column-gap:16px; text-align:left; align-items:center; }
  .rm-icon{ grid-row:span 3; margin:0; }
  .rm-week{ justify-self:start; margin-bottom:4px; }
  .outcome-flow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .outcome-flow .flow-arrow{ display:none; }
  .strip-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px){
  .hero-title{ font-size:1.85rem; }
  .pain-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn, .cta-section .btn{ width:100%; }
  .btn-lg{ padding:14px 22px; font-size:15px; }
}