/* Tradebuddy marketing site */
@font-face{
  font-family: Inter;
  src: url("../fonts/Inter-sub.woff2") format("woff2"),
       url("../fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root{
  --bg:#0c0b14;
  --bg-2:#12111c;
  --ink:#f4f2ff;
  --muted:#9e9cc4;
  --dim:#6e6c90;
  --line:#2c2a48;
  --card:#1b1a2c;
  --purple:#6863f0;
  --purple-2:#8b7dff;
  --violet:#8b5cf6;
  --green:#22c55e;
  --radius:28px;
  --ease:cubic-bezier(.22,.7,.12,1);
  --nav-h:76px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:auto}
body{overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
button,a{font-family:inherit}
a{color:inherit}
::selection{background:#6863f088;color:#fff}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.grain,.vignette,.glow{position:fixed;inset:0;pointer-events:none}
.grain{z-index:3;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>")}
.vignette{z-index:2;background:radial-gradient(ellipse at center,transparent 40%,#07060e 100%)}
.glow{z-index:1;filter:blur(80px);opacity:.55}
.glow-a{width:55vw;height:55vw;left:-18vw;top:-22vw;border-radius:50%;background:radial-gradient(circle,#6a5cff88,transparent 65%)}
.glow-b{width:50vw;height:50vw;right:-18vw;bottom:-25vw;border-radius:50%;background:radial-gradient(circle,#22c55e33,transparent 65%)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,var(--purple),var(--green));transform-origin:0 50%;box-shadow:0 0 12px #6863f0aa}

.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:80;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid #c9c6ffaa;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,opacity .25s}
.cursor.is-hover{width:70px;height:70px;margin:-35px 0 0 -35px;background:#6863f033;border-color:#fff}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;box-shadow:0 0 16px #8b7dff}
.no-cursor .cursor,.no-cursor .cursor-dot{display:none}
body.has-cursor,body.has-cursor *{cursor:none !important}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:22px;height:var(--nav-h);padding:0 clamp(20px,4vw,56px);background:linear-gradient(to bottom,#0c0b14ee,#0c0b1400);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:20px}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 0 24px #6863f066}
.nav-links{display:flex;gap:22px;margin-left:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav .sp{flex:1}
.pill{font-size:12px;font-weight:700;color:#c9c6ff;border:1px solid var(--purple);padding:6px 12px;border-radius:999px;letter-spacing:.02em}
.nav .btn{padding:10px 16px;font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:999px;font-weight:800;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;will-change:transform}
.btn-pri{background:linear-gradient(90deg,var(--purple),var(--violet));color:#fff;box-shadow:0 10px 40px #6863f066;padding:16px 26px;font-size:16px}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 16px 50px #6863f088}
.btn-sec{background:transparent;color:#fff;border:1px solid #3b395c;padding:16px 26px;font-size:16px}
.btn-sec:hover{border-color:#8b7dff;background:#6863f01a}

.hero{position:relative;z-index:5;min-height:100svh;padding:calc(var(--nav-h) + 24px) clamp(20px,4vw,56px) 40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-copy{max-width:720px}
.eyebrow{color:#c9c6ff;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 22px}
h1{font-size:clamp(48px,7.4vw,108px);line-height:.92;font-weight:900;letter-spacing:-.045em;margin:0}
h1 .line{display:block;overflow:hidden}
h1 .line span{display:block;transform:translateY(110%);will-change:transform}
.grad{background:linear-gradient(90deg,#8b7dff,#22c55e);-webkit-background-clip:text;background-clip:text;color:transparent}
.rotator{margin:28px 0 0;font-size:clamp(18px,2vw,28px);color:#d8d6f5;font-weight:600;min-height:1.4em;overflow:hidden}
.rotator .win{display:inline-block;position:relative;height:1.3em;vertical-align:bottom;overflow:hidden}
.rotator .rl{display:block;position:relative}
.rotator .rl span{display:block;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(80%);transition:none}
.rotator .rl span.on{position:relative;opacity:1;transform:translateY(0);animation:wordIn .6s var(--ease) both}
.rotator .rl span.out{opacity:0;transform:translateY(-80%);animation:wordOut .5s var(--ease) both}
@keyframes wordIn{from{opacity:0;transform:translateY(80%)}to{opacity:1;transform:translateY(0)}}
@keyframes wordOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-80%)}}
.sub{margin:18px 0 0;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:40ch;font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);background:none;border:0;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:6}
.cue i{width:1px;height:36px;background:linear-gradient(#8b7dff,transparent);display:block;transform-origin:50% 0;animation:cueB 2.4s var(--ease) infinite}
@keyframes cueB{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(18px);opacity:0}}

.hero-stage{position:relative;height:min(72vh,740px);perspective:1400px}
.hero-card{position:absolute;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px #00000088,0 0 0 1px #ffffff14;background:#111;transform-style:preserve-3d;will-change:transform;transition:transform .35s var(--ease)}
.hero-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-card.c1{width:86%;right:0;top:4%;z-index:2}
.hero-card.c2{width:42%;left:0;bottom:0;z-index:3;border-radius:28px}
.hero-card.c3{width:38%;right:-4%;bottom:8%;z-index:1;opacity:.85;filter:brightness(.9)}
.phone-frame{border-radius:32px;padding:8px;background:#1a1828;box-shadow:0 30px 80px #000000aa,0 0 0 1px #ffffff14}
.phone-frame img{border-radius:24px}

.marquee-wrap{position:relative;z-index:5;border-block:1px solid var(--line);background:#0e0d18cc;overflow:hidden;padding:18px 0}
.marquee{display:flex;gap:0;width:max-content;animation:marquee 42s linear infinite;will-change:transform}
.marquee > div{display:flex;flex-shrink:0}
.marquee span{padding:0 28px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c9c6ff;white-space:nowrap}
.marquee span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--purple);margin-right:28px;vertical-align:middle;box-shadow:0 0 10px #6863f0}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{position:relative;z-index:5;padding:100px clamp(20px,4vw,56px)}
#features,.section,#iphone,#download{scroll-margin-top:88px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#c9c6ff;margin:0 0 14px}
h2{font-size:clamp(32px,4.6vw,64px);line-height:1.02;letter-spacing:-.04em;font-weight:900;margin:0 0 16px}
.lede{color:var(--muted);font-size:18px;line-height:1.55;max-width:46ch;margin:0}

.pin-wrap{position:relative;z-index:5}
.pin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:0 clamp(20px,4vw,56px);min-height:100svh}
.pin-copy{position:relative;min-height:420px}
.feat{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.feat.is-on{opacity:1;pointer-events:auto}
.feat p{color:var(--muted);font-size:17px;line-height:1.55;max-width:42ch}
.pin-stage{position:relative;min-height:min(70vh,720px)}
.shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease);will-change:transform,opacity}
.shot.is-on{opacity:1;transform:none}
.shot img{width:100%;max-height:min(70vh,720px);object-fit:contain;object-position:top;border-radius:18px;box-shadow:0 30px 80px #00000088,0 0 0 1px #ffffff12;background:#111}
.shot.phone img{width:auto;height:min(70vh,720px);border-radius:28px}

.grid-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden;transform:translateY(24px);opacity:0}
.card.is-in{transform:none;opacity:1;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.card .media{aspect-ratio:16/10;overflow:hidden;background:#0a0a12}
.card .media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s var(--ease)}
.card .media.mid img{object-position:center 40%}
.card:hover .media img{transform:scale(1.04)}
.card .body{padding:22px 24px 26px}
.card h3{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}

.devices{display:grid;grid-template-columns:1.2fr .7fr;gap:32px;align-items:end}
.devices .desk,.devices .ph{border-radius:20px;overflow:hidden;box-shadow:0 30px 80px #00000080,0 0 0 1px #ffffff12}
.devices .ph{border-radius:32px;justify-self:center;max-width:320px}

.iphone{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.8fr);gap:56px;align-items:center}
.iphone .phone-frame{max-width:380px;margin:0 auto}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;color:var(--muted);font-size:16px;line-height:1.5}
.num{width:36px;height:36px;border-radius:50%;background:#6863f022;border:1px solid var(--purple);display:grid;place-items:center;color:#c9c6ff;font-weight:800;font-size:13px}

.close{text-align:center;padding:140px 24px 120px;position:relative;z-index:5}
.close h2{max-width:16ch;margin:0 auto 18px}
.close .ctas{justify-content:center}

footer{position:relative;z-index:5;border-top:1px solid var(--line);padding:36px clamp(20px,4vw,56px) 48px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;color:var(--dim);font-size:13px;line-height:1.6}
footer .risk{max-width:62ch}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media (max-width: 900px){
  .nav{gap:10px;padding:0 16px;height:64px}
  .nav .btn{display:none}
  .nav-links{display:none}
  .brand{font-size:17px}
  .brand img{width:32px;height:32px;border-radius:9px}
  .hero{grid-template-columns:1fr;padding-top:calc(64px + 16px);min-height:auto;gap:22px}
  h1{font-size:clamp(40px,12vw,68px)}
  .hero-stage{height:58vh;min-height:340px;max-height:520px;margin-top:8px;width:100%}
  .hero-card.c1,.hero-card.c3{display:none}
  .hero-card.c2{width:54%;left:50%;right:auto;top:0;bottom:auto;height:auto;transform:translateX(-50%)}
  .hero-card.c2 img{height:auto;width:100%}
  .cue{display:none}
  .pin{display:flex;flex-direction:column;grid-template-columns:1fr;min-height:auto;padding:96px 20px 48px;gap:0}
  .feat{position:relative;top:auto;transform:none;opacity:1;pointer-events:auto;margin:0 0 16px}
  .feat + .feat{margin-top:0}
  .pin-copy,.pin-stage{display:contents}
  .shot{position:relative;inset:auto;opacity:1;transform:none;margin:0 0 64px}
  .shot img{max-height:none}
  .shot.phone img{width:70%;height:auto;margin:0 auto}
  .feat:nth-child(1){order:1}.shot:nth-child(1){order:2}
  .feat:nth-child(2){order:3}.shot:nth-child(2){order:4}
  .feat:nth-child(3){order:5}.shot:nth-child(3){order:6}
  .feat:nth-child(4){order:7}.shot:nth-child(4){order:8}
  .feat:nth-child(5){order:9}.shot:nth-child(5){order:10}
  .feat:nth-child(6){order:11}.shot:nth-child(6){order:12}
  .feat:nth-child(7){order:13}.shot:nth-child(7){order:14}
  .feat:nth-child(8){order:15}.shot:nth-child(8){order:16}
  .grid-feats{grid-template-columns:1fr}
  .devices{grid-template-columns:1fr}
  .devices .ph{max-width:220px}
  .iphone{grid-template-columns:1fr}
  .section{padding:80px 20px}
  #features,.section,#iphone,#download{scroll-margin-top:72px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  h1 .line span{transform:none}
  .feat,.shot,.card{opacity:1;transform:none}
  .marquee{animation:none}
  .cursor,.cursor-dot,.cue{display:none}
}