/* LediCRM — the page borrows the language of a luminaire datasheet:
   mono field labels, hairline rules, dense spec tables, one photometric curve. */

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

:root{
  --void:#00060F; --panel:#050D1C; --panel-2:#08152A;
  --line:#142642; --line-soft:#0E1B30;
  --blue:#0063EE; --cyan:#16A9FD;
  --slate:#8FA3BE; --dim:#6A80A0;
  --paper:#E8EFF7;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,60px);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--paper);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:500; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(34px,5.4vw,62px); line-height:1.04; letter-spacing:-.035em}
h2{font-size:clamp(26px,3.4vw,40px); line-height:1.12}
h3{font-size:clamp(18px,2vw,22px); line-height:1.25}
p{margin:0}
.lede{font-size:clamp(16px,1.5vw,19px); color:var(--slate); max-width:52ch}
.small{font-size:14px; color:var(--slate)}

/* mono field label — the datasheet device that runs through the whole site */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::after{content:''; flex:1; height:1px; background:var(--line)}
.eyebrow.tight::after{display:none}

/* ---------- ambient light falloff: how these users evaluate light ---------- */
.sec{position:relative; padding-block:clamp(64px,9vw,120px); border-top:1px solid var(--line-soft)}
.sec::before{
  content:''; position:absolute; inset:0 0 auto 0; height:70%;
  background:radial-gradient(60% 100% at 62% 0%, rgba(0,99,238,.11), transparent 72%);
  pointer-events:none;
}
.sec > .wrap{position:relative}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(0,6,15,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:28px; height:64px}
.brand{display:flex; align-items:center; text-decoration:none; margin-right:auto}
.brand svg{height:26px; width:auto; display:block}
.nav a.navlink{font-size:14px; color:var(--slate); text-decoration:none}
.nav a.navlink:hover{color:var(--paper)}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--paper); border-radius:6px; padding:6px 10px; font-family:var(--mono); font-size:12px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--display); font-size:15px; font-weight:500;
  padding:11px 20px; border-radius:6px; border:1px solid transparent; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s;
}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:#1B77FF}
.btn-ghost{border-color:var(--line); color:var(--paper)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-sm{font-size:14px; padding:8px 15px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(52px,8vw,104px) clamp(56px,8vw,110px); position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto auto; width:70%; height:120%;
  background:radial-gradient(50% 50% at 70% 30%, rgba(0,99,238,.16), transparent 70%);
  pointer-events:none;
}
.hero-in{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1 em{font-style:normal; color:var(--cyan)}
.hero .lede{margin-top:22px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.cta-note{margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}

/* ---------- signature: the spec card ---------- */
.spec{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.spec-head{display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.spec-sku{font-family:var(--mono); font-size:13px; color:var(--cyan); letter-spacing:.04em}
.spec-name{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-left:auto}
.spec-plot{position:relative; height:200px; background:radial-gradient(52% 78% at 50% 6%, rgba(0,99,238,.16), transparent 70%)}
.spec-plot svg{position:absolute; inset:0; width:100%; height:100%}
.spec-plot .axis{stroke:var(--line); stroke-width:1; fill:none}
.spec-plot .beam{fill:url(#lobeFill)}
.spec-cap{position:absolute; left:16px; bottom:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.spec-fields{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.field{padding:13px 16px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.field:nth-child(3n){border-right:none}
.field dt{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0}
.field dd{margin:4px 0 0; font-family:var(--mono); font-size:15px; color:var(--paper)}
.spec-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; font-family:var(--mono); font-size:11.5px; color:var(--slate)}
.dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); margin-right:7px}

/* ---------- generic grids ---------- */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px)}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:10px; overflow:hidden}
.cell{background:var(--void); padding:clamp(20px,2.4vw,30px)}
.cell h3{margin-bottom:10px}
.cell p{color:var(--slate); font-size:15px}
.cell .tag{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:14px}

/* ---------- numbered sequence (real order: import -> group -> match -> quote) ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,32px); margin-top:44px}
.step{border-top:1px solid var(--line); padding-top:18px}
.step-n{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.14em}
.step h3{font-size:18px; margin:12px 0 8px}
.step p{color:var(--slate); font-size:14.5px}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px); margin-top:44px}
.plan{border:1px solid var(--line); border-radius:12px; padding:clamp(22px,2.6vw,32px); background:var(--panel); display:flex; flex-direction:column}
.plan.featured{border-color:var(--blue); background:linear-gradient(180deg,rgba(0,99,238,.09),var(--panel))}
.plan h3{font-size:20px}
.plan .price{font-family:var(--display); font-size:38px; letter-spacing:-.03em; margin:16px 0 4px}
.plan .price span{font-family:var(--mono); font-size:13px; color:var(--slate); letter-spacing:.06em}
.plan ul{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.plan li{font-size:14.5px; color:var(--slate); padding-left:20px; position:relative}
.plan li::before{content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--blue)}
.plan .btn{margin-top:26px; justify-content:center}
.plan .foot{margin-top:auto}

/* ---------- data table ---------- */
.tbl{width:100%; border-collapse:collapse; margin-top:32px; font-size:14.5px}
.tbl th,.tbl td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--line-soft)}
.tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:500}
.tbl td{color:var(--slate)}
.tbl td:first-child{color:var(--paper)}
.tbl td.num{font-family:var(--mono); color:var(--paper)}

/* ---------- prose (legal) ---------- */
.prose{max-width:74ch}
.prose h2{margin:44px 0 14px; font-size:clamp(20px,2.2vw,26px)}
.prose h3{margin:28px 0 10px; font-size:17px}
.prose p,.prose li{color:var(--slate); font-size:15.5px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px; display:grid; gap:8px}
.prose a{color:var(--cyan)}
.todo{background:rgba(0,99,238,.10); border:1px dashed var(--blue); border-radius:6px; padding:2px 7px; font-family:var(--mono); font-size:13px; color:var(--cyan)}
.notice{border-left:2px solid var(--blue); background:var(--panel); padding:16px 18px; border-radius:0 8px 8px 0; margin:0 0 26px}
.notice p{margin:0; font-size:14.5px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft); padding-block:52px 40px; background:var(--panel)}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:500; margin-bottom:14px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot a{font-size:14px; color:var(--slate); text-decoration:none}
.foot a:hover{color:var(--paper)}
.foot-base{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.06em}

/* ---------- a11y + responsive ---------- */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav a.navlink{display:none}
  .nav.open a.navlink{display:block}
  .nav-toggle{display:block}
  .nav-in{flex-wrap:wrap; height:auto; padding-block:12px; gap:14px}
  .nav.open .nav-in{padding-bottom:16px}
  .g2,.g3,.plans{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .spec-fields{grid-template-columns:repeat(2,1fr)}
  .field:nth-child(3n){border-right:1px solid var(--line-soft)}
  .field:nth-child(2n){border-right:none}
  .foot-in{grid-template-columns:1fr}
}

/* ---------- billing period toggle ---------- */
.billing-wrap{display:flex; justify-content:center; margin-bottom:clamp(30px,4.5vw,48px)}
.billing{display:inline-flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--panel)}
.seg{
  font-family:var(--display); font-size:clamp(15px,1.7vw,17px); font-weight:500; color:var(--slate);
  background:none; border:0; padding:13px 30px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
}
.seg:hover{color:var(--paper)}
.seg.is-on{background:var(--blue); color:#fff}
.seg .save{font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.9}
.plan .price .unit{white-space:nowrap}
.billnote{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--dim); margin-top:4px; line-height:1.5}

/* the amount must keep the display face; .plan .price span otherwise shrinks it */
.plan .price .amt{font-family:var(--display); font-size:inherit; color:var(--paper); letter-spacing:-.03em}

/* tier marker on the features page */
.pill{
  display:inline-block; vertical-align:middle; margin-left:8px;
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); background:rgba(22,169,253,.11); border:1px solid rgba(22,169,253,.34);
  border-radius:4px; padding:3px 7px; line-height:1.4; white-space:nowrap;
}
.lede .pill{margin-left:2px}