/* Soft selling theme overlay: loaded after style.css and overrides its strict look. */

/* ---------- Typography ---------- */
body,button,input{font-family:Manrope,Arial,sans-serif!important}
.logo,.hero h1,h1,h2,.cards h3,.visual-caption b,.offer-art span{font-family:"Space Grotesk",Manrope,Arial,sans-serif!important}
.logo{font-weight:700!important;letter-spacing:-.055em!important}
h1,h2{letter-spacing:-.04em!important}

/* ---------- Soft warm background with subtle pattern ---------- */
body{
  background:
    radial-gradient(ellipse 65% 45% at 80% 0%,#2a224433,transparent 70%),
    radial-gradient(ellipse 55% 40% at 8% 38%,#251d3d2e,transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff' fill-opacity='0.022'%3E%3Cpath d='M42 26c-7.2 0-12.4 5.7-12.4 12.9V52c0 1.4 1.7 2.2 2.8 1.3l2.4-2.1 2.8 2.4c.7.6 1.7.6 2.3 0l2.1-1.8 2.1 1.8c.7.6 1.7.6 2.3 0l2.8-2.4 2.4 2.1c1.1.9 2.8.1 2.8-1.3V38.9C54.4 31.7 49.2 26 42 26zm-5.1 14.4c-1.2 0-2.3-1.2-2.3-2.7s1-2.7 2.3-2.7 2.3 1.2 2.3 2.7-1 2.7-2.3 2.7zm10.2 0c-1.2 0-2.3-1.2-2.3-2.7s1-2.7 2.3-2.7 2.3 1.2 2.3 2.7-1 2.7-2.3 2.7z'/%3E%3Cpath d='M164 128l2.5 6.7 6.7 2.5-6.7 2.5-2.5 6.7-2.5-6.7-6.7-2.5 6.7-2.5zM120 168l1.7 4.5 4.5 1.7-4.5 1.7-1.7 4.5-1.7-4.5-4.5-1.7 4.5-1.7z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(175deg,#141220 0%,#100e17 45%,#151221 100%)!important;
}

/* ---------- Round animated logo ---------- */
.mark{
  display:grid!important;place-items:center!important;
  width:38px!important;height:38px!important;padding:8px!important;
  color:#171224!important;border:0!important;border-radius:50%!important;
  background:linear-gradient(140deg,#cbb6ff,#8f6ff0)!important;
  box-shadow:0 0 0 0 #b49cff55;
  animation:logo-pulse 3s ease-out infinite;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover .mark{transform:rotate(-12deg) scale(1.12)}
.mark svg{display:block;width:100%;height:100%;fill:currentColor}
@keyframes logo-pulse{
  0%{box-shadow:0 0 0 0 #b49cff44}
  70%{box-shadow:0 0 0 12px #b49cff00}
  100%{box-shadow:0 0 0 0 #b49cff00}
}

/* ---------- Softer surfaces and buttons ---------- */
.button,.nav-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:50px!important;border-radius:99px!important}
.button{font-size:13.5px!important;padding:0 24px!important;background:linear-gradient(140deg,#c4adff,#8f6ff0)!important;box-shadow:0 10px 28px #8f6ff033!important;transition:transform .25s,box-shadow .25s!important}
.button:hover{transform:translateY(-3px) scale(1.02)!important;box-shadow:0 16px 36px #a685ff48!important}
.button b{display:inline-block;line-height:1;margin-left:22px!important;transition:transform .25s}
.button:hover b{transform:translateX(4px)}
.nav-cta{font-size:12px!important;padding:0 18px!important;border:1px solid #3d3457!important;transition:.25s!important}
.nav-cta:hover{border-color:var(--green)!important;color:var(--green)!important}
.text-button{display:inline-flex!important;align-items:center!important;min-height:50px!important;font-size:13px!important}
button,.button,.nav-cta,.text-button,.muted-button{line-height:1!important}
.offer .button{align-self:center}

.hero-visual{border-radius:26px!important;border:1px solid #362f4d!important;box-shadow:0 30px 80px #00000059,0 0 0 8px #ffffff05!important}
.cards{gap:14px!important;border:0!important;background:transparent!important}
.cards article{border-radius:22px!important;border:1px solid #292440!important;transition:transform .3s,border-color .3s,box-shadow .3s}
.cards article:hover{transform:translateY(-6px);border-color:#5c4d8a!important;box-shadow:0 18px 44px #0006}
.offer{border-radius:26px!important;border:1px solid #3d3457!important;box-shadow:0 24px 60px #0000004d}
.offer-art{border-radius:18px!important}
.visual-caption{border-radius:12px!important;padding:12px 15px!important;background:#101311d9!important;backdrop-filter:blur(6px)}
.modal-card{border-radius:26px!important}
.chat-window{border-radius:16px!important}
.chat-toggle,.operator{border-radius:99px!important}
.toast{border-radius:99px!important}

/* ---------- Floating mascot motion ---------- */
.hero-visual{animation:visual-float 7s ease-in-out infinite}
@keyframes visual-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.35,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .mark,.hero-visual{animation:none}
}

@media(max-width:719px){
  .header{height:74px}
  .logo{font-size:15px}
  .mark{width:34px!important;height:34px!important}
  .button{min-height:54px!important}
  .actions{gap:10px}
  .text-button{min-height:54px!important}
}

/* ==========================================================
   Ghost layout remix: mirrored hero, pill facts, a tinted
   lead card, support before offer, ghost SVG in modal/offer art.
   ========================================================== */

/* ---------- Hero facts as pill cards instead of a bordered row ---------- */
.hero-facts{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:36px!important;padding-top:0!important;border-top:0!important;
}
.hero-facts div{
  min-width:0!important;justify-items:center;text-align:center;
  padding:14px 8px;border:1px solid #352e4d;border-radius:18px;
  background:linear-gradient(160deg,#1b1729,#151221);
}
.hero-facts b{font-size:19px!important}

/* ---------- Cards: 01 leads a single row (1.35fr) with a tinted glow accent, then 02/03 in order ---------- */
.cards{display:grid}
.feature-number{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:28px!important;height:28px!important;margin-bottom:16px!important;
  border:1px solid #352e4d;border-radius:50%;background:#1e1b2c;
  font-size:11px!important;
}
.feature-wide{
  overflow:hidden;
  background:linear-gradient(135deg,#211c36,#171522)!important;
  border-color:#4a3f68!important;
}
.feature-wide::after{
  content:"";position:absolute;z-index:0;top:-40%;right:-15%;width:65%;height:150%;
  background:radial-gradient(circle,#8f6ff02e,transparent 65%);pointer-events:none;
}
.feature-wide .feature-number,.feature-wide h3,.feature-wide p,.feature-wide .feature-arrow{position:relative;z-index:1}
@media(min-width:720px){
  .feature-wide .feature-number{position:absolute!important;top:23px;margin-bottom:0!important}
  /* ---------- Mirrored hero: visual on the left, copy on the right ---------- */
  .hero{grid-template-columns:.92fr 1.08fr!important;gap:48px}
  .hero-visual{order:-1}
  /* ---------- Offer: text -> button -> ghost art (art moved to the right) ---------- */
  .offer{grid-template-columns:1fr auto 210px!important}
}
@media(max-width:719px){
  .hero-facts{grid-template-columns:1fr 1fr}
  .hero-facts div:first-child{grid-column:1/-1}
  .offer-art{order:-1}
}

/* ---------- Ghost SVG in offer art and funnel modal ---------- */
.offer-art span{display:grid;place-items:center;text-shadow:none!important}
.offer-art span svg{width:92px;height:92px;fill:var(--green);filter:drop-shadow(4px 4px 0 #4c3b82)}
.paw{padding:9px!important}
.paw svg{display:block;width:100%;height:100%;fill:var(--green)}