/* Proper Leads — group site
   Shared stylesheet. Every page uses this file and nothing else. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:        #131A2A;
  --ink-2:      #1B2333;
  --ink-3:      #242E42;
  --line:       rgba(255,255,255,.12);
  --line-2:     rgba(255,255,255,.22);
  --text:       #F3F6FC;
  --muted:      #AEB8CC;
  --muted-2:    #838FA6;

  /* light band tokens */
  --paper:      #F6F8FC;
  --paper-2:    #FFFFFF;
  --ink-on-paper:#141B2B;
  --muted-on-paper:#414B60;
  --line-on-paper:rgba(18,26,44,.14);

  --red:        #FF2E5B;
  --orange:     #FF5A2C;
  --grad:       linear-gradient(100deg,#FF5A2C 0%,#FF1F5A 100%);

  --koa:        #2AA9F0;
  --telegen:    #F97316;
  --altnets:    #14D8C4;
  --flux:       #9B6BFF;
  --ils:        #FFC542;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --wrap: 1180px;
  --pad:  24px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }
/* Light band. Every other section flips to paper so the site breathes. */
.section--alt{
  background:var(--paper);
  color:var(--ink-on-paper);
  border-top:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
}
.section--alt h1,.section--alt h2,.section--alt h3,.section--alt h4{ color:var(--ink-on-paper); }
.section--alt p,.section--alt li,.section--alt td{ color:var(--muted-on-paper); }
.section--alt p.lead{ color:#2C3444; }
.section--alt .eyebrow{ color:var(--orange); }
.section--alt .eyebrow--muted{ color:#5D6880; }
.section--alt .text-light{ color:var(--ink-on-paper); }

.section--alt .card{
  background:var(--paper-2);
  border-color:var(--line-on-paper);
  box-shadow:0 1px 2px rgba(18,26,44,.04), 0 8px 24px rgba(18,26,44,.05);
}
.section--alt .card:hover{ border-color:rgba(18,26,44,.22); }
.section--alt .brand-name{ color:var(--ink-on-paper); }
.section--alt .brand-url{ color:#5D6880; }
.section--alt .brand-tag{ color:var(--muted-on-paper); border-color:var(--line-on-paper); }
.section--alt .icon{ background:rgba(18,26,44,.05); border-color:var(--line-on-paper); }

.section--alt .pill{ color:var(--muted-on-paper); border-color:var(--line-on-paper); background:var(--paper-2); }
.section--alt .ticks strong{ color:var(--ink-on-paper); }
.section--alt .step{ border-top-color:rgba(18,26,44,.2); }
.section--alt .callout{ color:#2C3444; }

.section--alt .table-wrap{ border-color:var(--line-on-paper); background:var(--paper-2); }
.section--alt th{ background:#E7ECF4; color:#48536A; }
.section--alt td{ border-bottom-color:var(--line-on-paper); }
.section--alt td:first-child{ color:var(--ink-on-paper); }

.section--alt .btn--ghost{ border-color:rgba(18,26,44,.25); color:var(--ink-on-paper); }
.section--alt .btn--ghost:hover{ border-color:var(--ink-on-paper); background:rgba(18,26,44,.05); }

.section--alt .field label{ color:var(--ink-on-paper); }
.section--alt .field input,.section--alt .field select,.section--alt .field textarea{
  background:var(--paper-2); border-color:var(--line-on-paper); color:var(--ink-on-paper);
}
.section--alt .consent{ color:var(--muted-on-paper); }

.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.12; letter-spacing:-.02em; font-weight:700; }
h1{ font-size:clamp(2.4rem,5.4vw,4.1rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); letter-spacing:-.03em; }
h3{ font-size:1.22rem; }
h4{ font-size:1rem; }
p{ margin:0 0 1em; color:var(--muted); }
p.lead{ font-size:1.14rem; color:#C3CBDC; max-width:62ch; }
.text-light{ color:var(--text); }

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 18px;
  display:block;
}
.eyebrow--muted{ color:var(--muted-2); }

.section-head{ max-width:760px; margin-bottom:52px; }
.section-head p{ font-size:1.08rem; margin-bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px;
  border-radius:100px;
  font-weight:600; font-size:.94rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--grad); color:#fff; }
.btn--primary:hover{ opacity:.92; }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.05); }
.btn--sm{ padding:10px 18px; font-size:.86rem; }

.arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(19,26,42,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{ display:flex; flex-direction:column; line-height:1; flex-shrink:0; }
.logo strong{
  font-size:1.02rem; font-weight:800; letter-spacing:-.03em; color:#fff;
}
.logo span{
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-top:3px;
}
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color .16s ease;
}
.nav a:hover,.nav a[aria-current="page"]{ color:#fff; }

.nav-toggle{
  display:none; background:none; border:0; color:#fff;
  font-size:1.5rem; cursor:pointer; padding:6px;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:112px 0 96px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(255,47,91,.20), transparent 62%),
    radial-gradient(760px 420px at 6% 8%, rgba(255,90,44,.13), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ max-width:17ch; }
.hero p.lead{ margin-top:22px; }

.hero--brand::before{
  background:
    radial-gradient(900px 480px at 78% -10%, var(--accent-glow,rgba(255,47,91,.22)), transparent 62%),
    radial-gradient(700px 400px at 4% 10%, rgba(255,255,255,.05), transparent 60%);
}

/* ---------- stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line-on-paper);
  background:var(--paper-2);
}
.stat{ padding:34px 26px; border-right:1px solid var(--line-on-paper); }
.stat:last-child{ border-right:0; }
.stat b{
  display:block; font-size:2.1rem; font-weight:800; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#4F5A70;
}

/* ---------- cards ---------- */
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:.95rem; margin-bottom:0; }
.card .eyebrow{ margin-bottom:12px; }

a.card{ display:block; }

.card--brand{ position:relative; overflow:hidden; padding-top:30px; }
.card--brand::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent,var(--grad));
}

.brand-name{
  font-size:1.7rem; font-weight:800; letter-spacing:-.035em;
  color:var(--accent,#fff); margin:0 0 5px; line-height:1.05;
}

/* Big brand wordmark, used on brands.html */
.brand-title{
  font-size:clamp(2.6rem,5.2vw,3.9rem);
  font-weight:800; letter-spacing:-.04em; line-height:.98;
  color:var(--accent,#fff);
  margin:0 0 10px;
}
.brand-sub{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:22px;
}
.brand-title ~ h2{
  font-size:clamp(1.25rem,2vw,1.6rem);
  letter-spacing:-.02em; font-weight:700;
}
.section--alt .brand-title{ color:var(--accent-ink,var(--accent)); }
.section--alt .brand-sub{ color:#5D6880; }
.brand-url{
  font-family:'JetBrains Mono',monospace; font-size:.72rem;
  color:var(--muted-2); display:block; margin-bottom:16px;
}
.brand-tag{
  font-size:.78rem; font-weight:600; color:var(--muted);
  border:1px solid var(--line-2); border-radius:100px;
  padding:4px 11px; display:inline-block; margin:4px 4px 0 0;
}

.icon{
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.055); border:1px solid var(--line);
  font-size:1.1rem; margin-bottom:18px;
}

/* ---------- numbered steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:22px; border-top:1px solid var(--line-2); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace; font-size:.74rem;
  color:var(--orange); display:block; margin-bottom:12px;
}
.step h3{ font-size:1.05rem; }
.step p{ font-size:.92rem; margin:0; }

/* ---------- list ---------- */
.ticks{ list-style:none; padding:0; margin:0; }
.ticks li{
  position:relative; padding-left:26px; margin-bottom:12px;
  color:var(--muted); font-size:.96rem;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--orange);
}
.ticks strong{ color:var(--text); font-weight:600; }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
th,td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); font-size:.94rem; }
th{
  font-family:'JetBrains Mono',monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  background:var(--ink-3);
}
td{ color:var(--muted); vertical-align:top; }
td:first-child{ color:var(--text); font-weight:600; }
tr:last-child td{ border-bottom:0; }

/* ---------- pill row ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  border:1px solid var(--line-2); border-radius:100px;
  padding:8px 16px; font-size:.86rem; color:var(--muted);
}

/* ---------- logo wall ---------- */
.logo-strip{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:14px; align-items:center;
}
.logo-strip figure{
  margin:0; padding:20px 16px;
  background:var(--paper-2);
  border:1px solid var(--line-on-paper);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  min-height:84px;
}
.logo-strip img{
  max-height:38px; max-width:140px; width:auto; object-fit:contain;
}
/* circular marks read small next to wordmarks, so give them more height */
.logo-strip img[src*="currys"]{ max-height:52px; }
.logo-note{
  font-size:.82rem; color:var(--muted-2); margin-top:20px;
}
.section--alt .logo-note{ color:#4F5A70; }

/* ---------- testimonial ---------- */
.quote{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:44px 48px;
  background:var(--ink-2);
  position:relative;
}
.quote::before{
  content:''; position:absolute; left:0; top:28px; bottom:28px; width:3px;
  background:var(--grad); border-radius:3px;
}
.quote blockquote{
  margin:0 0 24px;
  font-size:clamp(1.1rem,1.7vw,1.32rem);
  line-height:1.55; color:var(--text); font-weight:500;
  letter-spacing:-.01em;
}
.quote cite{
  font-style:normal; display:block;
  font-size:.92rem; font-weight:600; color:var(--text);
}
.quote cite span{
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin-top:5px; font-weight:400;
}
.section--alt .quote{ background:var(--paper-2); border-color:var(--line-on-paper); }
.section--alt .quote blockquote,.section--alt .quote cite{ color:var(--ink-on-paper); }
.section--alt .quote cite span{ color:#5D6880; }

/* ---------- quote / callout ---------- */
.callout{
  border-left:2px solid var(--orange);
  padding:6px 0 6px 22px;
  color:#C3CBDC;
  font-size:1.05rem;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--grad);
  border-radius:var(--r-lg);
  padding:56px 48px;
  text-align:center;
}
.cta-band h2{ color:#fff; max-width:20ch; margin:0 auto .5em; }
.cta-band p{ color:rgba(255,255,255,.88); max-width:56ch; margin:0 auto; }
.cta-band .btn--primary{ background:#fff; color:#12101A; }
.cta-band .btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- forms ---------- */
.form{ display:grid; gap:18px; }
.field label{
  display:block; font-size:.8rem; font-weight:600;
  letter-spacing:.04em; margin-bottom:7px; color:var(--text);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  background:var(--ink-3); border:1px solid var(--line-2);
  border-radius:var(--r-sm); color:var(--text);
  font-family:inherit; font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--orange);
}
.field textarea{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.consent{ display:flex; gap:11px; align-items:flex-start; font-size:.84rem; color:var(--muted-2); }
.consent input{ width:auto; margin-top:3px; }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding:64px 0 32px;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid var(--line);
}
.footer-grid h4{
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
  margin-bottom:16px; font-weight:500;
}
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a{ font-size:.92rem; color:var(--muted); }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:.82rem; color:var(--muted-2);
}
.footer-bottom p{ margin:0; font-size:.82rem; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g4,.stats,.steps,.footer-grid{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .stat:nth-child(2n){ border-right:0; }
  .stat{ border-bottom:1px solid var(--line-on-paper); }
}

@media (max-width:720px){
  .section{ padding:64px 0; }
  .hero{ padding:72px 0 64px; }
  .g2,.g3,.g4,.stats,.steps,.footer-grid,.field-row{ grid-template-columns:1fr; }
  .stat{ border-right:0; }
  .nav{
    display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 18px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 0; width:100%; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav .btn{ margin-top:14px; border-bottom:0; }
  .nav-toggle{ display:block; }
  .cta-band{ padding:40px 24px; }
  .btn-row .btn{ width:100%; justify-content:center; }
}

/* logo wall responsive */
@media (max-width:1000px){ .logo-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .logo-strip{ grid-template-columns:repeat(2,1fr); } .quote{ padding:32px 26px; } }

/* ---------- product screenshots ---------- */
.shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.shot{
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink-2);
}
.shot img{ width:100%; height:auto; display:block; border-bottom:1px solid var(--line); }
.shot figcaption{
  padding:16px 20px;
  font-size:.9rem;
  color:var(--muted);
}
.shot figcaption strong{ display:block; color:var(--text); font-weight:600; margin-bottom:3px; }
.section--alt .shot{ background:var(--paper-2); border-color:var(--line-on-paper); }
.section--alt .shot img{ border-bottom-color:var(--line-on-paper); }
.section--alt .shot figcaption{ color:var(--muted-on-paper); }
.section--alt .shot figcaption strong{ color:var(--ink-on-paper); }
@media (max-width:720px){ .shots{ grid-template-columns:1fr; } }

/* ---------- light band overrides, declared last so they win on specificity ---------- */
.section--alt .ticks li{ color:var(--muted-on-paper); }
.section--alt .ticks strong{ color:var(--ink-on-paper); }
.section--alt .card p{ color:var(--muted-on-paper); }
.section--alt .step p{ color:var(--muted-on-paper); }
.section--alt .section-head p{ color:var(--muted-on-paper); }
.section--alt .shot figcaption{ color:var(--muted-on-paper); }
.section--alt .quote blockquote{ color:var(--ink-on-paper); }

/* ---------- two up testimonials ---------- */
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.quote--long blockquote{ font-size:1.02rem; line-height:1.62; font-weight:400; }
.quote--long blockquote p{ margin:0 0 .9em; color:inherit; font-size:inherit; }
.quote--long blockquote p:last-child{ margin-bottom:0; }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- nav dropdown ---------- */
.has-drop{ position:relative; }
.has-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.has-drop > a::after{
  content:''; width:5px; height:5px; flex-shrink:0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .16s ease;
}
.drop{
  position:absolute; top:100%; left:-16px;
  min-width:212px; padding:8px;
  background:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.has-drop:hover > a::after{ transform:rotate(225deg) translateY(-1px); }
.drop a{
  display:block; padding:10px 12px; border-radius:var(--r-sm);
  font-size:.9rem; color:var(--muted); line-height:1.35;
}
.drop a small{ display:block; font-size:.76rem; color:var(--muted-2); margin-top:2px; font-weight:400; }
.drop a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.drop a:hover small{ color:var(--muted); }

@media (max-width:720px){
  .has-drop{ width:100%; }
  .has-drop > a::after{ display:none; }
  .drop{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0 0 0 14px; min-width:0;
  }
  .drop a{ padding:11px 0; border-bottom:1px solid var(--line); }
}