/* Hero · trade marquee · "sound familiar" */

/* ——— hero ——— */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(36px,6vw,80px));padding-bottom:clamp(80px,9vw,120px);
  background:radial-gradient(120% 80% at 80% 0%,#12281C 0%,var(--night) 55%)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.blob.b1{width:52vw;height:52vw;max-width:760px;max-height:760px;left:-14vw;top:-18vw;background:#1F4A33;animation:drift 16s var(--e-inout) infinite alternate}
.blob.b2{width:40vw;height:40vw;max-width:600px;max-height:600px;right:-10vw;top:10%;background:#3E6B4B;opacity:.38;animation:drift 20s var(--e-inout) -6s infinite alternate-reverse}
.blob.b3{width:30vw;height:30vw;max-width:420px;max-height:420px;left:34%;bottom:-16vw;background:#6E8C5A;opacity:.22;animation:drift 24s var(--e-inout) -12s infinite alternate}
.grid-lines{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(232,237,227,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(232,237,227,.045) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent 75%)}
.grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;margin:0 0 26px;
  background:rgba(232,237,227,.06);box-shadow:inset 0 0 0 1px rgba(232,237,227,.12);font-size:.86rem;font-weight:600;color:var(--cream-2);
  animation:fadeUp var(--t-slow) var(--e-out) both}
.dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--sage)}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sage);animation:ping 2.2s var(--e-out) infinite}
.hero-title{font-size:clamp(2.3rem,4.3vw,4.1rem);line-height:1;letter-spacing:-.04em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.06em}
.hero-title .line>span{display:inline-block;animation:lineUp 950ms var(--e-out) both;animation-delay:calc(var(--d,0) * 1ms)}
.hero-title em{color:var(--sage);font-weight:400;letter-spacing:-.03em}
.uline{position:relative;white-space:nowrap}
.swoosh{position:absolute;left:-2%;right:-2%;bottom:-.2em;width:104%;height:.36em;overflow:visible;color:var(--sage)}
.swoosh path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s var(--e-out) 1.15s forwards}
.hero-sub{margin-top:28px;max-width:34em;animation:fadeUp var(--t-slow) var(--e-out) .55s both}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;animation:fadeUp var(--t-slow) var(--e-out) .68s both}
.hero-call{margin-top:18px;font-size:.95rem;color:var(--cream-3);animation:fadeUp var(--t-slow) var(--e-out) .76s both}
.hero-call a{color:var(--cream);font-weight:700;border-bottom:1.5px solid rgba(167,188,145,.5);transition:border-color var(--t-fast)}
.hero-call a:hover{border-color:var(--sage)}
.hero-proof{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:.93rem;font-weight:600;color:var(--cream-2)}
.hero-proof li{display:flex;align-items:center;gap:9px;animation:popIn var(--t-slow) var(--e-back) both;animation-delay:calc(.85s + var(--i,0) * 70ms)}
.hero-proof svg{width:20px;height:20px;flex:none;color:var(--sage)}

/* the composition — every size in cqw so it scales as one picture */
.hero-stage{position:relative;width:100%;max-width:640px;justify-self:end;aspect-ratio:1/.98;container-type:inline-size;
  animation:fadeUp 900ms var(--e-out) .25s both}
.layer{position:absolute;translate:calc(var(--px,0) * var(--depth,10) * 1px) calc(var(--py,0) * var(--depth,10) * 1px);transition:translate 600ms var(--e-out)}
.browser{left:0;top:12%;width:84%;--depth:8;z-index:1}
.browser .shell{border-radius:2.4cqw;background:#fff;overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 1px rgba(232,237,227,.08)}
.chrome{display:flex;align-items:center;gap:1.1cqw;height:5.4cqw;padding:0 2cqw;background:#EDEEE8;border-bottom:1px solid #DADCD2}
.chrome i{width:1.35cqw;height:1.35cqw;border-radius:50%;background:#C9CCC2}
.chrome i:first-child{background:#E0876A}.chrome i:nth-child(2){background:#E2B45C}.chrome i:nth-child(3){background:#8BAA74}
.chrome .url{margin-left:2cqw;flex:1;max-width:50%;height:3cqw;border-radius:99px;background:#fff;display:flex;align-items:center;gap:.8cqw;padding:0 1.6cqw;font:600 1.6cqw/1 var(--f-body);color:#566252}
.chrome .url svg{width:1.6cqw;height:1.6cqw;color:var(--moss)}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F4F6F1}
.screen .skel{position:absolute;inset:0;padding:4cqw;display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;background:#0B3B35}
.skel span{display:block;border-radius:1cqw;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.skel span::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:shimmer 1.2s var(--e-inout) infinite}
.skel .col{display:grid;align-content:start;gap:1.8cqw}
.skel .t1{height:3cqw;width:40%}.skel .t2{height:6cqw}.skel .t3{height:6cqw;width:80%}.skel .t4{height:2.2cqw;width:90%}.skel .t5{height:2.2cqw;width:70%}
.skel .t6{height:5cqw;width:46%;border-radius:99px;margin-top:1cqw}.skel .form{height:100%;background:rgba(255,255,255,.9)}
.screen .shot{position:absolute;left:0;top:0;width:100%;height:auto;clip-path:inset(0 0 100% 0);
  animation:wipeDown 1s var(--e-out) 1.1s forwards,scrollShot 22s var(--e-inout) 3s infinite alternate}

.gcard{right:5%;top:0;width:55%;--depth:18;z-index:3}
.gcard .card{background:#fff;border-radius:2.6cqw;padding:2.4cqw 2.6cqw 2.6cqw;box-shadow:var(--shadow-lg);animation:float 7s var(--e-inout) infinite;color:#1F2A22}
.gsearch{display:flex;align-items:center;gap:1.2cqw;height:5.4cqw;padding:0 2cqw;border-radius:99px;box-shadow:inset 0 0 0 1px #DADCE0;font:500 1.9cqw/1 var(--f-body);color:#202124}
.gsearch svg{width:2.2cqw;height:2.2cqw;color:#5F6368;flex:none}
.caret{display:inline-block;width:1.5px;height:2.4cqw;margin-left:1px;background:#202124;vertical-align:middle;animation:blink 1s steps(1) infinite}
.gad{margin-top:2.2cqw}
.gad .sp{font:700 1.45cqw/1 var(--f-body);color:#202124}
.gad .site{display:flex;align-items:center;gap:1cqw;margin-top:1.2cqw;font:500 1.5cqw/1.2 var(--f-body);color:#4D5156}
.gad .fav{width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--forest);display:grid;place-items:center}
.gad .fav .bars{--bw:1.5cqw;--bh:1cqw}
.gad h4{margin-top:1.1cqw;font:500 2.35cqw/1.2 var(--f-body);letter-spacing:0;color:#1A3FB0}
.gad p{margin:.8cqw 0 0;font-size:1.55cqw;line-height:1.45;color:#4D5156}
.gad .links{display:flex;gap:1cqw;margin-top:1.4cqw}
.gad .links span{padding:.8cqw 1.4cqw;border-radius:99px;box-shadow:inset 0 0 0 1px #DADCE0;font:600 1.4cqw/1 var(--f-body);color:#1A3FB0}
.gad .links .call{background:#E8F0E4;box-shadow:none;color:var(--forest)}

.phone{right:0;bottom:1%;width:28%;--depth:26;z-index:4}
.phone .body{position:relative;padding:1.1cqw;border-radius:5.2cqw;background:#050806;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(232,237,227,.14);animation:float 8s var(--e-inout) -3s infinite}
.phone .body::before{content:"";position:absolute;top:2cqw;left:50%;width:30%;height:2.3cqw;border-radius:99px;background:#050806;transform:translateX(-50%);z-index:2}
.phone img{border-radius:4.2cqw;aspect-ratio:390/844;object-fit:cover;object-position:top}

.mcard{left:2%;bottom:0;width:38%;--depth:22;z-index:3}
.mcard .card{background:#fff;border-radius:2.6cqw;overflow:hidden;box-shadow:var(--shadow-lg);animation:float 9s var(--e-inout) -5s infinite;color:#1F2A22}
.mhead{display:flex;align-items:center;gap:1.2cqw;padding:1.8cqw 2cqw}
.mhead .av{width:4cqw;height:4cqw;border-radius:50%;background:var(--forest);display:grid;place-items:center;flex:none}
.mhead .av .bars{--bw:2.2cqw;--bh:1.4cqw}
.mhead b{display:block;font:700 1.6cqw/1.1 var(--f-body)}
.mhead small{display:block;font:500 1.3cqw/1.2 var(--f-body);color:#65676B}
.mmedia{position:relative;aspect-ratio:1.2;background:linear-gradient(150deg,#24513A,#6E8C5A 60%,#C9D8B6);display:grid;place-items:center;overflow:hidden}
.mmedia svg{width:36%;color:rgba(255,255,255,.92)}
.mmedia span{position:absolute;left:2cqw;right:2cqw;bottom:1.8cqw;font:800 2.4cqw/1.05 var(--f-display);color:#fff;letter-spacing:-.01em}
.mfoot{display:flex;align-items:center;justify-content:space-between;padding:1.6cqw 2cqw}
.mfoot .heart{width:3cqw;height:3cqw;color:#E0566A;animation:pop 3.2s var(--e-back) 2s infinite}
.mfoot .cta{padding:1cqw 1.8cqw;border-radius:1cqw;background:#E7ECE3;font:700 1.45cqw/1 var(--f-body);color:#1F2A22}

.toasts{left:33%;bottom:21%;width:45%;height:13cqw;--depth:34;z-index:5}
.toast{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1.8cqw;padding:1.8cqw 2.2cqw;border-radius:2.6cqw;
  background:rgba(17,24,20,.94);box-shadow:0 20px 50px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,237,227,.12);color:var(--cream);
  opacity:0;transform:translateY(3cqw) scale(.94);transition:opacity var(--t-base) var(--e-out),transform var(--t-slow) var(--e-back)}
.toast.show{opacity:1;transform:none}
.toast.gone{opacity:0;transform:translateY(-4cqw) scale(.96);transition-timing-function:var(--e-sharp)}
.toast .ic{flex:none;width:5.4cqw;height:5.4cqw;border-radius:1.6cqw;background:var(--sage);color:var(--night);display:grid;place-items:center}
.toast .ic svg{width:2.8cqw;height:2.8cqw}
.toast b{display:block;font:700 2cqw/1.15 var(--f-body)}
.toast small{display:block;font:500 1.55cqw/1.3 var(--f-body);color:var(--cream-3);margin-top:.3cqw}
.toasts:not(.live) .toast:first-child{opacity:1;transform:none}

.stage-note{left:1%;top:1.5%;z-index:2;font-size:4.6cqw;line-height:1;color:var(--sage);rotate:-5deg;display:flex;align-items:flex-end;gap:1cqw;
  animation:fadeUp var(--t-slow) var(--e-out) 1.9s both}
.stage-note svg{width:7cqw;height:7cqw;margin-bottom:-2.6cqw}

.scroll-cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;
  font:700 .7rem/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--cream-3)}
.scroll-cue i{display:block;width:1.5px;height:38px;background:rgba(232,237,227,.16);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--sage);animation:cue 2s var(--e-inout) infinite}

@media (max-width:960px){
  .hero{min-height:0}
  .hero-inner{grid-template-columns:1fr}
  .hero-stage{justify-self:center;max-width:560px;margin-top:16px}
  .scroll-cue{display:none}
}

/* ——— trade marquee ——— */
.band{position:relative;background:var(--forest-deep);color:var(--cream);padding-block:30px;overflow:hidden;
  border-block:1px solid rgba(232,237,227,.07)}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee+.marquee{margin-top:10px}
.track{display:flex;flex:none;width:max-content;animation:marquee 60s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:72s}
.band:hover .track{animation-play-state:paused}
.track span{display:flex;align-items:center;gap:.7em;padding-right:.7em;font:700 clamp(1.5rem,3.4vw,2.7rem)/1.15 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.track span .bars{--bw:.9em;--bh:.5em}
.marquee.rev .track span{color:transparent;-webkit-text-stroke:1.2px rgba(232,237,227,.42)}
.marquee.rev .track span .bars{opacity:.5}

/* ——— sound familiar ——— */
.problems{background:var(--paper);
  background-image:radial-gradient(rgba(19,26,21,.09) 1px,transparent 1.2px);background-size:22px 22px}
.problems .eyebrow .bars,.head .eyebrow .bars{--bw:26px;--bh:14px}
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);align-items:start}
.note-card{position:relative;background:var(--card);border-radius:6px 6px 22px 6px;padding:40px 26px 26px;rotate:var(--rot,0deg);
  box-shadow:0 1px 1px rgba(19,26,21,.05),0 18px 40px -22px rgba(19,26,21,.35);
  transition:rotate var(--t-base) var(--e-out),translate var(--t-base) var(--e-out),box-shadow var(--t-base)}
.note-card:nth-child(1){--rot:-2.2deg}.note-card:nth-child(2){--rot:1.6deg;margin-top:28px}
.note-card:nth-child(3){--rot:-1.2deg;margin-top:6px}.note-card:nth-child(4){--rot:2.2deg;margin-top:34px}
.note-card:hover{rotate:0deg;translate:0 -8px;box-shadow:0 1px 1px rgba(19,26,21,.05),0 30px 60px -24px rgba(19,26,21,.45)}
.tape{position:absolute;top:-13px;left:50%;width:96px;height:28px;translate:-50% 0;rotate:-4deg;background:rgba(167,188,145,.6);
  box-shadow:0 1px 2px rgba(19,26,21,.08);clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 50%)}
.note-card:nth-child(even) .tape{rotate:5deg;background:rgba(201,216,182,.75)}
.note-card .quote{font:italic 500 1.24rem/1.38 var(--f-serif);color:var(--ink);letter-spacing:-.01em;margin-bottom:22px}
.note-card .fix{margin:0;padding-top:18px;border-top:1.5px dashed var(--line-2);font-size:.96rem;line-height:1.55;color:var(--ink-3)}
.note-card .fix b{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.note-card .fix b svg{width:16px;height:16px}
.reply{margin:64px auto 0;text-align:center;font-size:clamp(2rem,4vw,2.8rem);color:var(--forest);rotate:-2deg}
.reply svg{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.25em;margin-left:.2em}
@media (max-width:1040px){ .notes{grid-template-columns:repeat(2,minmax(0,1fr))} .note-card:nth-child(n){margin-top:0} }
@media (max-width:600px){ .notes{grid-template-columns:1fr;gap:34px} }