/* Trendly sales landing v2 — Trendify UI structure, Trendly dark-green brand */
:root{
  --paper:#f8f7f3;
  --surface:#fffefa;
  --ink:#252c25;
  --muted:#626960;
  --line:#dedfd5;
  --accent:#3e553e;
  --soft:#edf0e6;
  --shadow:0 16px 60px #2631211a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --d-paper:#161b18;
  --d-surface:#1e2520;
  --d-ink:#f1f0e8;
  --d-muted:#adb7ac;
  --d-line:#39443b;
  --d-accent:#c1d4b6;
  --d-soft:#303c31;
  --d-shadow:0 16px 60px #0006;
  --radius-pill:89px;
  --radius-card:40px;
  --radius-media:28px;
  --mint:#bbf7d5;
  --peach:#ffd9d8;
  --butter:#feeacb;
  --fog:#eeeff3;
  --cream:var(--paper);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mq-track,.vcol-track{animation:none!important;transform:none!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;z-index:50}
.skip:focus{top:12px}


/* —— NAV: floating white pill INSIDE hero (Trendify pattern) —— */
.hero-pin{
  /* taller than hero so sticky holds briefly, then sheet covers */
  position:relative;
  height:130vh;
  min-height:820px;
}
.hero{
  position:sticky; top:0; z-index:1;
  height:100vh; min-height:720px; max-height:100vh;
  background:var(--d-paper);
  color:var(--d-ink);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(193,212,182,.04) 0%, transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(193,212,182,.035) 96px 97px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(193,212,182,.035) 96px 97px);
}

/* Floating pill nav — inset so green shows around it */
.nav-pill-wrap{
  position:relative; z-index:5;
  padding:24px 24px 0;
  flex:0 0 auto;
}
.nav-pill{
  height:72px;
  display:flex; align-items:center; gap:20px;
  /* Trendify-style: plain solid white pill — flat, no border/ring */
  background:#ffffff;
  border:none;
  border-radius:40px;
  padding:0 12px 0 32px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  box-shadow:none;
}
.logo{font-family:var(--serif);font-weight:bold;font-size:34px;letter-spacing:-1.5px;color:#161b18;line-height:1;flex:0 0 auto}
.logo span,.logo .wordmark-dot{color:#3e553e}
.nav-links{
  display:flex; align-items:center; gap:28px;
  margin-left:auto;
}
.nav-links a{font-family:var(--sans);font-size:16px;font-weight:500;color:#252c25;line-height:1.2}
.nav-links a:hover,.nav-links a.is-active{color:#3e553e}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:89px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  transition:transform .15s ease, opacity .15s ease;
  flex:0 0 auto;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--d-accent); color:var(--d-paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn-primary:hover{filter:brightness(1.05)}
/* Nav CTA on white pill: boards green */
.nav-pill .btn-primary{
  background:#3e553e; color:#f1f0e8;
  box-shadow:none;
}
.nav-pill .btn-primary:hover{filter:brightness(1.08); background:#354a35}
.btn-light{
  background:var(--d-ink); color:var(--d-paper);
  height:52px; padding:0 26px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-ghost{background:transparent;color:var(--d-ink);border:1px solid var(--d-line);height:52px}
.btn-arrow::after{content:"↗"; font-size:14px}

/* Hero body: copy left + vertical scrolling columns right */
.hero-body{
  position:relative; z-index:2;
  flex:1 1 auto;
  width:min(1200px, calc(100% - 64px));
  margin:0 auto;
  padding:28px 0 0;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;
  align-items:stretch;
  min-height:0;
}
.hero-copy{position:relative; z-index:2; align-self:center; padding-bottom:48px}
.hero h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(44px,6.4vw,78px); line-height:1.05; letter-spacing:-1.5px;
  color:var(--d-ink); max-width:13ch;
}
/* Hand-drawn swoosh under "brands" — hugs baseline like Trendify */
.hero-swoosh-word{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  padding-bottom:0.28em;
}
.hero-swoosh{
  position:absolute;
  left:-5%;                 /* start slightly left of 'b' */
  width:110%;               /* ~105–110% of word, past 's' */
  height:0.24em;            /* thin band; path stretched via preserveAspectRatio=none */
  /* content bottom + ~0.1em gap (~8px at 78px, ~4px at 44px phone) */
  top:calc(100% - 0.28em + 0.1em);
  transform:rotate(-5deg);
  transform-origin:center center;
  pointer-events:none;
  overflow:visible;
  display:block;
}
.hero-swoosh path{
  fill:none;
  stroke:#f1f0e8;
  stroke-width:6px;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}

/* Vertical auto-scrolling columns (Trendify: opposite directions, HARD clip — no fade) */
.hero-cols{
  position:relative;
  z-index:1;
  /* Pull up under floating nav so photos pass behind the pill; hard-clipped by .hero overflow */
  margin-top:-96px;
  height:calc(100% + 96px + 40px);
  min-height:420px;
  max-height:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  overflow:hidden; /* sharp cut at top and bottom; no gradient fade */
  align-self:stretch;
}
.vcol{
  overflow:hidden;
  height:100%;
  position:relative;
}
.vcol-track{
  display:flex; flex-direction:column; gap:14px;
  width:100%;
  will-change:transform;
}
/* Fallback durations; main.js sets exact duration for ~49.8 px/s (Trendify-measured) */
.vcol-up .vcol-track{ animation: vscroll-up 99s linear infinite; }
.vcol-down .vcol-track{ animation: vscroll-down 99s linear infinite; }
.vcol:hover .vcol-track{ animation-play-state:paused; }
@keyframes vscroll-up{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(0,-50%,0); }
}
@keyframes vscroll-down{
  from{ transform: translate3d(0,-50%,0); }
  to{ transform: translate3d(0,0,0); }
}
.vcard{
  flex:0 0 auto;
  width:100%;
  aspect-ratio:190/338;
  border-radius:22px;
  overflow:hidden;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.vcard img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Next section slides OVER sticky hero */
.sheet{
  position:relative;
  z-index:2;
  background:var(--paper);
  border-radius:40px 40px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.12);
  margin-top:-28px; /* slight overlap onto hero */
}

@media(prefers-reduced-motion:reduce){
  .vcol-up .vcol-track, .vcol-down .vcol-track{ animation:none !important; transform:none !important; }
}

@media(max-width:980px){
  .hero-body{ grid-template-columns:1fr; padding:20px 0 32px; width:calc(100% - 40px); }
  .hero-cols{ min-height:320px; max-height:360px; margin-top:0; height:auto; }
  .hero-pin, .hero{ min-height:auto; max-height:none; height:auto; }
  .hero{ position:relative; } /* phone: skip sticky pin for usability */
  .sheet{ margin-top:0; border-radius:28px 28px 0 0; }
}
@media(max-width:720px){
  .nav-pill-wrap{ padding:14px 12px 0; }
  .nav-pill{ height:60px; padding:0 8px 0 20px; border-radius:30px; border:none; box-shadow:none; }
  .nav-links{ display:none; }
  .logo{font-size:26px}
  .btn-primary{ height:42px; padding:0 16px; font-size:13px; }
  .hero-body{ width:calc(100% - 28px); }
  .hero-cols{ gap:10px; }
  .vcard{ border-radius:16px; }
}

/* —— sections —— */
.section{padding:96px 0}
.section.cream{background:var(--soft)}
.section.dots{
  background:
    radial-gradient(circle, rgba(43,43,43,.12) 1px, transparent 1.5px) 0 0/18px 18px,
    var(--paper);
}
.wrap{width:min(1100px,calc(100% - 64px));margin:0 auto}
.wrap-wide{width:min(1200px,calc(100% - 64px));margin:0 auto}
.center{text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:10px;font-weight:600;color:var(--muted);margin-bottom:10px;font-family:var(--sans)}
.eyebrow.muted{color:var(--muted);font-size:10px;font-weight:600}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-1.5px;
  color:var(--ink);
}
h2 em{font-style:italic;font-weight:600}
.section-lede{margin:16px auto 0;max-width:52ch;color:var(--muted);font-size:15px;font-family:var(--sans)}
.section-head{margin-bottom:48px}
.section-head.center .section-lede{margin-left:auto;margin-right:auto}

/* brand chips / trusted strip */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:8px}
.chip{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);padding:8px 4px;opacity:.85;
}

/* stats cards — Trendify pastel 4-up */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.stat{
  border-radius:var(--radius-card);padding:28px 24px 26px;min-height:200px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);
}
.stat:nth-child(1){background:var(--peach)}
.stat:nth-child(2){background:var(--butter)}
.stat:nth-child(3){background:var(--mint)}
.stat:nth-child(4){background:var(--fog)}
.stat .label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat strong{
  font-family:var(--serif);font-weight:700;font-size:40px;letter-spacing:-.03em;
  color:var(--ink);line-height:1.05;margin-top:8px;
}
.stat p{font-size:15px;color:var(--ink);margin-top:auto}

/* approach cards */
.diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.diff-card{
  background:#fff;border:1px solid var(--line);border-radius:28px;
  padding:28px;min-height:200px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
.diff-card .badge{
  align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--soft);color:var(--accent);padding:6px 12px;border-radius:999px;
}
.diff-card h3{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);letter-spacing:-.02em}
.diff-card p{color:var(--muted);font-size:15px;line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.step{
  background:#fff;border-radius:24px;padding:22px 18px;min-height:180px;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.step .n{font-family:var(--serif);font-weight:700;font-size:13px;color:var(--accent);margin-bottom:14px}
.step h3{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink);margin-bottom:8px}
.step p{font-size:13px;color:var(--muted);line-height:1.5}

/* marquees */
.marquee-block{padding:24px 0 8px;overflow:hidden}
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);margin:10px 0}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 55s linear infinite}
.mq.reverse .mq-track{animation-direction:reverse;animation-duration:62s}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-card{flex:0 0 auto;width:180px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#eee;border:1px solid var(--line)}
.mq-card img{width:100%;height:100%;object-fit:cover}

/* compare */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.compare th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--cream);font-weight:700}
.compare tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:600;color:var(--ink);width:26%}
.compare .yes{color:var(--accent);font-weight:500}
.compare .no{color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 20px;
  box-shadow:var(--shadow);
}
.faq summary{
  cursor:pointer;font-family:var(--serif);font-weight:400;font-size:18px;
  color:var(--ink);padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:15px;line-height:1.55;padding:0 0 18px}

/* get access CTA band */
.cta-band{
  background:var(--d-paper);color:var(--d-ink);border-radius:40px;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  box-shadow:var(--d-shadow); border:1px solid var(--d-line);
}
.cta-band h2{color:var(--d-ink);font-size:clamp(32px,4vw,48px)}
.cta-band p{margin-top:10px;color:var(--d-muted);max-width:42ch}
.cta-note{margin-top:10px;font-size:12px;color:var(--d-muted)}

/* footer */
.footer{border-top:1px solid var(--line);padding:48px 0 28px;background:var(--cream)}
.footer-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.footer .logo{font-size:36px;color:var(--ink)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-links a{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-top:18px;border-top:1px solid var(--line)}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;padding:48px 0 56px}
  .hero-media{max-width:420px}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .diff{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start;padding:40px 28px}
}
@media(max-width:720px){
  .nav-inner{width:calc(100% - 32px)}
  .nav-links{display:none}
  .wrap,.wrap-wide{width:calc(100% - 32px)}
  .hero-inner{width:calc(100% - 32px)}
  .stats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero-col:nth-child(2){margin-top:24px}
  .mq-card{width:140px}
  .section{padding:64px 0}
  .nav-pill .logo{font-size:26px}
  .logo{font-size:26px}
}

.footer .logo{color:var(--ink)}
.footer .logo span,.logo .wordmark-dot{color:var(--d-accent)}