/* ReplyFirst marketing site — kit styles. Relies on colors_and_type.css vars. */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--black);color:var(--white);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.site{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.92}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:80px}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.02em;
  border-radius:8px;padding:15px 22px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;cursor:pointer;
  border:2px solid var(--yellow);background:var(--yellow);color:#050505;box-shadow:4px 4px 0 #000;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease,border-color .12s ease}
.btn svg{height:1.05em}
.btn:hover{background:var(--yellow-hover);transform:translate(1px,1px);box-shadow:2px 2px 0 #000}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn.secondary{background:transparent;color:#fff;border:1.5px solid #555;box-shadow:none}
.btn.secondary:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(255,212,0,.08);transform:none;box-shadow:none}
.btn.onlight{background:#050505;color:#fff;border:2px solid #050505;box-shadow:4px 4px 0 var(--yellow)}
.btn.onlight:hover{background:#000;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--yellow)}
.btn.sm{padding:11px 16px;font-size:12.5px}
.btn.block{width:100%;justify-content:center}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-family:var(--font-mono);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:1px solid #333;background:#111;color:#fff;white-space:nowrap}
.badge svg{height:.95em}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--green);display:inline-block}
.badge .dot.live{animation:pulse 1.6s ease-in-out infinite}
.badge.high{color:var(--red);border-color:var(--red)}
.badge.ok{color:var(--green);border-color:var(--green)}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(39,196,106,.5)}50%{opacity:.65;box-shadow:0 0 0 5px rgba(39,196,106,0)}}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.86);backdrop-filter:blur(10px);border-bottom:1px solid #222}
.hdr .site{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:30px;height:38px}
.brand .wm{font-family:var(--font-display);font-size:30px;text-transform:uppercase;line-height:.85;color:#fff}
.brand .wm b{color:var(--yellow);font-weight:400}
.brand .tag{font-family:var(--font-mono);font-size:8.5px;font-weight:800;color:var(--muted-text);letter-spacing:.18em;margin-top:2px}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-family:var(--font-body);font-weight:700;font-size:14px;color:#D9D9D9;transition:color .12s}
.nav a:hover{color:var(--yellow)}
.hdr-cta{display:flex;align-items:center;gap:16px}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#050505}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 8% 30%, rgba(255,212,0,.10), transparent 42%),
  radial-gradient(80% 70% at 78% 18%, rgba(120,140,170,.18), transparent 55%),
  linear-gradient(180deg,#0a0a0c 0%,#0c0d10 40%,#070708 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-photo{position:absolute;left:0;top:0;bottom:0;width:46%;
  background:linear-gradient(90deg,rgba(5,5,5,0) 60%,#050505 100%),
  radial-gradient(60% 50% at 30% 40%, rgba(180,190,205,.22), transparent 60%),
  linear-gradient(180deg,#15171b,#0a0b0d)}
.hero-photo .ph{position:absolute;left:20px;bottom:18px;font-family:var(--font-mono);font-size:9.5px;font-weight:800;
  color:rgba(255,255,255,.32);letter-spacing:.14em;border:1px dashed rgba(255,255,255,.18);padding:5px 9px;border-radius:5px}
.hero .site{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding-top:62px;padding-bottom:72px;align-items:center}
.hero-eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.hero h1{font-size:clamp(52px,6.4vw,92px)}
.hero h1 .yl{color:var(--yellow)}
.hero-sub{font-size:19px;line-height:1.5;color:#D9D9D9;max-width:440px;margin:20px 0 28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--font-mono);font-size:11px;font-weight:800;color:#B8B8B8;text-transform:uppercase;letter-spacing:.06em}
.hero-trust svg{color:var(--yellow);height:1.1em}

/* ---------- Dispatch card (hero right) ---------- */
.dispatch{background:#111;border:1px solid #333;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);padding:20px;position:relative}
.dispatch .drow{display:flex;justify-content:space-between;align-items:center}
.dlabel{font-family:var(--font-mono);font-size:11px;font-weight:800;color:#B8B8B8;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.dnum{font-family:var(--font-body);font-weight:900;font-size:28px;margin:10px 0 3px}
.dsub{font-size:13px;color:#B8B8B8}
.pri-pill{font-family:var(--font-mono);font-size:10.5px;font-weight:800;color:var(--red);border:1px solid var(--red);border-radius:6px;padding:5px 9px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.dconvo{border-top:1px solid #242424;margin-top:14px;padding-top:14px;display:flex;flex-direction:column;gap:14px}
.dmsg{display:flex;gap:12px}
.dmsg .ava{width:34px;height:34px;border-radius:8px;background:#222;display:flex;align-items:center;justify-content:center;color:#8a8a8a;flex:none}
.dmsg.ai .ava{background:var(--yellow);color:#050505}
.dmsg .who{font-family:var(--font-mono);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#8a8a8a;margin-bottom:4px}
.dmsg.ai .who{color:var(--yellow)}
.dmsg .txt{font-size:13px;line-height:1.45;color:#D9D9D9}
.drouted{display:flex;align-items:center;justify-content:space-between;background:#0c0c0c;border:1px solid #1d3a28;border-radius:12px;padding:13px 15px;margin-top:14px}
.drouted .l{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:.06em}
.drouted .r{font-family:var(--font-mono);font-size:11px;color:#B8B8B8}
.floatval{position:absolute;right:-14px;bottom:-22px;background:var(--yellow);color:#050505;border-radius:14px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.floatval .big{font-family:var(--font-display);font-size:34px;line-height:1}
.floatval .cap{font-family:var(--font-mono);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-top:3px}

/* ---------- Stat strip ---------- */
.stats{background:#0a0a0a;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c}
.stats .site{display:grid;grid-template-columns:repeat(5,1fr);padding:40px 28px}
.stat{padding:4px 24px;border-right:1px solid #2a2a2a;display:flex;flex-direction:column;gap:8px}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--font-display);font-size:52px;color:var(--yellow);line-height:1}
.stat .n small{font-size:30px}
.stat .l{font-weight:800;font-size:14px;color:#fff;line-height:1.25}
.stat .s{font-family:var(--font-mono);font-size:9.5px;color:#8a8a8a;text-transform:uppercase;letter-spacing:.05em;margin-top:auto}

/* ---------- Light sections ---------- */
.light{background:var(--off-white);color:#0a0a0a}
.light .eyebrow,.dark .eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sec-pad{padding-block:84px}  /* horizontal gutter comes from .site (28px); don't zero it */
.sec-head{margin-bottom:44px}
.sec-head h2{font-size:clamp(34px,4.4vw,56px);color:inherit}
.sec-head h2 .yl{color:var(--yellow)}
.light .sec-head h2 .yl{color:#caa400}

/* ---------- How it works ---------- */
.how{display:grid;grid-template-columns:repeat(4,1fr) ;gap:14px;align-items:start}
.step{display:flex;flex-direction:column;gap:12px}
.step .ico{width:62px;height:62px;border-radius:50%;background:#0a0a0a;color:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:26px;position:relative}
.step .ico .num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:6px;background:var(--yellow);color:#050505;font-family:var(--font-mono);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.step h3{font-family:var(--font-body);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:#0a0a0a}
.step p{font-size:14px;color:#444;line-height:1.5}
.how-wrap{display:flex;align-items:flex-start;gap:6px}
.how-arrow{color:#bdb7a8;margin-top:18px;flex:none}

/* ---------- Demo ---------- */
.demo-card{background:#0a0a0a;border:1px solid #2a2a2a;border-radius:18px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.demo-card h2{font-size:40px;color:#fff}
.demo-num{font-family:var(--font-display);font-size:46px;color:var(--yellow);line-height:1;margin:14px 0 6px}
.player{background:#111;border:1px solid #2e2e2e;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.player .top{display:flex;align-items:center;gap:14px}
.play-btn{width:50px;height:50px;border-radius:50%;background:var(--yellow);color:#050505;border:0;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;flex:none}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:42px}
.wave span{flex:1;background:#3a3a3a;border-radius:2px;transition:background .2s}
.wave span.on{background:var(--yellow)}
.player .time{font-family:var(--font-mono);font-size:11px;color:#8a8a8a;white-space:nowrap}
.player .cap{font-size:12px;color:#8a8a8a}

/* ---------- Industries ---------- */
.inds{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.ind{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.ind .ico{font-size:34px;color:#0a0a0a}
.ind h3{font-family:var(--font-body);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:#0a0a0a;line-height:1.2}
.ind p{font-size:12px;color:#5a564c;line-height:1.4;max-width:200px}

/* ---------- Pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.price{background:#111;border:1px solid #333;border-radius:16px;padding:28px;position:relative}
.price.pop{border:2px solid var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.price .poptag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#050505;font-family:var(--font-mono);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:5px 14px;border-radius:999px}
.price .pname{font-family:var(--font-display);font-size:26px;text-transform:uppercase;color:#fff}
.price .pdesc{font-size:13px;color:#B8B8B8;margin:5px 0 16px}
.price .pamt{font-weight:900;font-size:44px;color:#fff;line-height:1}
.price .pamt span{font-size:15px;font-weight:600;color:#B8B8B8}
.price ul{list-style:none;padding:0;margin:18px 0 24px;display:flex;flex-direction:column;gap:11px}
.price li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#D9D9D9}
.price li svg{color:var(--yellow);height:1em;margin-top:2px;flex:none}
.price-note{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:30px;font-family:var(--font-mono);font-size:12px;font-weight:800;color:#B8B8B8;text-transform:uppercase;letter-spacing:.06em}
.price-note svg{color:var(--yellow);height:1.1em}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;align-items:start}
.qa{border-bottom:1px solid #d8d3c6;padding:18px 4px;cursor:pointer}
.qa .q{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:800;font-size:16px;color:#0a0a0a}
.qa .ic{color:#0a0a0a;transition:transform .2s;flex:none;height:1em}
.qa.open .ic{transform:rotate(45deg)}
.qa .a{font-size:14px;color:#55514a;line-height:1.55;max-height:0;overflow:hidden;transition:max-height .25s ease,margin .25s ease;margin-top:0}
.qa.open .a{max-height:200px;margin-top:12px}

/* ---------- Final CTA + footer ---------- */
.final{background:#050505;text-align:center;padding:90px 0}
.final h2{font-size:clamp(38px,5vw,68px);color:#fff;max-width:900px;margin:0 auto}
.final h2 .yl{color:var(--yellow)}
.final p{color:#B8B8B8;font-size:18px;max-width:620px;margin:22px auto 30px;line-height:1.5}
.foot{background:#080808;border-top:1px solid #1c1c1c;padding:40px 0}
.foot .site{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .cols{display:flex;gap:30px;flex-wrap:wrap}
.foot a{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.06em}
.foot a:hover{color:var(--yellow)}
.foot .cc{font-family:var(--font-mono);font-size:10.5px;color:#6a6a6a;letter-spacing:.04em}

/* testimonial inside pricing area */
.quote-card{background:#111;border:1px solid #333;border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px}
.quote-card .mark{font-family:var(--font-display);font-size:46px;color:var(--yellow);line-height:.5;height:24px}
.quote-card p{font-size:15px;color:#D9D9D9;line-height:1.5}
.quote-card .who{font-weight:800;font-size:14px;color:#fff}
.quote-card .role{font-size:12px;color:#8a8a8a}
.stars{display:flex;gap:3px;color:var(--yellow);font-size:14px}

/* ---------- Call modal ---------- */
.ringer{width:74px;height:74px;border-radius:50%;background:var(--yellow);display:inline-flex;align-items:center;justify-content:center;animation:pulse 1.4s ease-in-out infinite}
.modal-ov{position:fixed;inset:0;background:rgba(3,3,4,.78);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#111;border:1px solid #333;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6);padding:22px;width:100%;max-width:440px}
.modal-x{background:#1c1c1c;border:1px solid #2e2e2e;color:#b8b8b8;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal-x:hover{color:#fff;border-color:#444}
.modal-body{min-height:150px;display:flex;flex-direction:column;justify-content:center;margin:6px 0 16px}
.modal-steps{display:flex;gap:6px;margin-bottom:16px}
.modal-steps .sdot{flex:1;height:4px;border-radius:2px;background:#2a2a2a}
.modal-steps .sdot.on{background:var(--yellow)}

@media(max-width:980px){
  .nav,.hdr-cta .btn{display:none}.burger{display:block}
  .hero .site{grid-template-columns:1fr}.hero-photo{display:none}
  .stats .site{grid-template-columns:repeat(2,1fr);gap:24px 0}.stat:nth-child(2n){border-right:none}
  .how{grid-template-columns:1fr 1fr}.how-wrap{flex-direction:column}.how-arrow{display:none}
  .inds{grid-template-columns:repeat(2,1fr)}.prices{grid-template-columns:1fr}.faq{grid-template-columns:1fr}
  .demo-card{grid-template-columns:1fr}
}