/* TradeRapid marketing site.
   Dark, quiet, confident. The whole point is that it should not look like a
   trades SaaS template, so: a serif for the headlines, a lot of air, one
   accent used sparingly, and no stock photography of smiling tradesmen. */

*{box-sizing:border-box}
:root{
  --ink:#0F1319; --ink-2:#161C24; --ink-3:#1B2330;
  --paper:#F7F8FA; --line:rgba(255,255,255,.10); --line-dark:#E4E8EE;
  --text:#E6EAF0; --mut:#8E9AA8; --mut-dark:#5B6679;
  --lime:#C6F24E; --lime-ink:#5C7212;
  --max:1120px;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);
  font:17px/1.7 Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em}
.inner{max-width:var(--max);margin:0 auto;padding:0 28px}
.inner.narrow{max-width:720px}
/* Headlines mirror the wordmark: a light word beside a heavy one. That one
   decision is what makes the page and the logo look like the same brand. */
h1,h2,h3{font-family:inherit;letter-spacing:-.035em;margin:0;font-weight:800}
h1 .lt,h2 .lt{font-weight:200;color:var(--mut)}
h1 .hv{font-weight:800}
em{font-style:normal;color:var(--lime)}
a{color:inherit}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  font-weight:600;margin:0 0 14px}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;padding:22px 28px}
.nav nav{display:flex;align-items:center;gap:26px;font-size:15px}
.nav nav a{color:var(--mut);text-decoration:none}
.nav nav a:hover{color:#fff}
.nav .login{color:var(--text)}
.nav .cta{background:var(--lime);color:var(--ink);padding:9px 18px;border-radius:999px;
  font-weight:700;font-size:14px}
.nav .cta:hover{background:#D4F56F;color:var(--ink)}
.brand img{display:block}

/* ---- hero ---- */
.hero{padding:74px 0 86px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:560px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,242,78,.11),transparent 70%);pointer-events:none}
.hero .inner{position:relative}
h1{font-size:clamp(44px,6.6vw,82px);line-height:1.02;margin-bottom:24px}
.lead{font-size:19px;color:var(--mut);max-width:640px;margin:0 0 30px}
.lead.small{font-size:17px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.btn{display:inline-block;background:var(--lime);color:var(--ink);text-decoration:none;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:16px;border:0;cursor:pointer;
  font-family:inherit;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px);background:#D4F56F}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--mut);background:transparent}
.scarcity{font-size:14.5px;color:var(--mut-dark);max-width:520px;margin:0;
  padding-left:14px;border-left:2px solid var(--lime)}

/* ---- strip ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2);padding:34px 0}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.strip-grid b{display:block;font-size:16px;margin-bottom:3px}
.strip-grid span{color:var(--mut);font-size:14.5px}

/* ---- sections ---- */
.sec{padding:90px 0}
.sec.dark{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(31px,4.1vw,50px);line-height:1.1;margin-bottom:46px;max-width:18ch}
.feat{display:flex;gap:28px;padding:30px 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0;padding-top:6px}
.feat-n{flex:none;font-size:13px;font-weight:800;color:var(--lime);
  width:46px;padding-top:9px;letter-spacing:.08em}
.feat h3{font-size:23px;margin-bottom:9px;letter-spacing:-.025em}
.feat p{color:var(--mut);margin:0 0 12px;max-width:62ch}
.aside{border-left:2px solid var(--lime);padding-left:16px;color:var(--mut-dark) !important;
  font-size:15.5px;max-width:58ch}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;max-width:72ch}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 52px;color:var(--mut)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:3px;
  color:var(--lime);font-size:12.5px;font-weight:800;letter-spacing:.08em}
.steps b{color:var(--text);font-weight:600}

/* ---- apply ---- */
.apply{background:var(--paper);color:var(--ink)}
.apply .eyebrow{color:var(--mut-dark)}
.apply .lead{color:var(--mut-dark)}
form{margin-top:34px;display:flex;flex-direction:column;gap:18px}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
input,select,textarea{font:inherit;font-size:16px;font-weight:400;padding:13px 15px;
  border:1px solid var(--line-dark);border-radius:12px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}
textarea{resize:vertical;min-height:100px}
.apply .btn{align-self:flex-start;background:var(--ink);color:#fff}
.apply .btn:hover{background:var(--ink-3)}
.apply .btn:disabled{opacity:.5;cursor:default;transform:none}
.formnote{font-size:15px;margin:0;min-height:1.4em;font-weight:600}
.formnote.ok{color:var(--lime-ink)}
.formnote.bad{color:#B42318}

/* ---- footer ---- */
footer{padding:46px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--mut-dark)}
.footgrid{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footgrid div{display:flex;gap:20px;flex:1}
.footgrid a{color:var(--mut)}
.footgrid p{margin:0}

@media (max-width:760px){
  .inner{padding:0 20px}
  .nav{padding:16px 20px;flex-wrap:wrap;gap:12px}
  .nav nav{gap:16px;font-size:14px;width:100%;justify-content:space-between}
  .hero{padding:44px 0 56px}
  .sec{padding:60px 0}
  .strip-grid,.row2{grid-template-columns:1fr}
  .feat{flex-direction:column;gap:10px}
  .feat-n{width:auto}
  h2{margin-bottom:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}html{scroll-behavior:auto}}


/* ---- the trades marquee -------------------------------------------------
   The list of trades and most of the movement on the page, in one element.
   Duplicated in the DOM so the loop has no seam, and paused on hover so
   somebody looking for their own trade can actually read it. */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0 22px;overflow:hidden;background:var(--ink)}
.track{display:flex;gap:0;width:max-content;animation:marq 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-size:clamp(20px,2.4vw,30px);font-weight:200;color:var(--mut);
  padding:0 26px;white-space:nowrap;letter-spacing:-.03em}
.track span::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--lime);margin-left:26px;vertical-align:middle;opacity:.65}
.track span:nth-child(3n){color:var(--text);font-weight:500}
.marq-note{font-size:13.5px;color:var(--mut-dark);margin:18px auto 0}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- scroll reveal ------------------------------------------------------
   Everything is visible by default and only animates once observed, so if
   the script never runs the page still reads. A reveal that hides content
   when JavaScript fails is a broken page, not a subtle one. */
.rv{opacity:0;transform:translateY(16px);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .track{animation:none}
  .rv{opacity:1 !important;transform:none !important;transition:none}
}