:root{
  --night:#0B1524;
  --night-2:#101D33;
  --ink:#16233A;
  --day:#F4F6F3;
  --day-2:#FFFFFF;
  --lamp:#FFB648;
  --lamp-deep:#E89A25;
  --confirm:#3E9B6E;
  --mist:rgba(244,246,243,.62);
  --line-night:rgba(244,246,243,.12);
  --line-day:rgba(22,35,58,.12);
  --radius:14px;
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--day);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-.01em}
.mono{font-family:'Spline Sans Mono',monospace}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{
  display:inline-block;font-weight:600;font-size:16px;text-decoration:none;
  padding:14px 26px;border-radius:999px;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
.btn-lamp{background:var(--lamp);color:#231604}
.btn-lamp:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,182,72,.35)}
.btn-ghost{border:1.5px solid var(--line-night);color:var(--day)}
.btn-ghost:hover{border-color:rgba(244,246,243,.4)}
.btn-ink{background:var(--ink);color:var(--day)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(22,35,58,.25)}
.eyebrow{
  font-family:'Spline Sans Mono',monospace;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
}

/* ---------- NIGHT (hero) ---------- */
.night{
  background:
    radial-gradient(900px 520px at 72% 30%, rgba(255,182,72,.13), transparent 60%),
    radial-gradient(600px 400px at 15% 80%, rgba(62,155,110,.06), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color:var(--day);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;text-decoration:none}
.logo span{color:var(--lamp)}
.nav-links{display:flex;gap:28px;align-items:center;font-size:15.5px}
.nav-links a{text-decoration:none;color:var(--mist)}
.nav-links a:hover{color:var(--day)}
.nav-links .btn{padding:10px 20px;font-size:15px}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:56px 0 96px}
.hero h1{font-size:clamp(38px,5vw,58px);font-weight:700}
.hero h1 em{font-style:normal;color:var(--lamp)}
.hero p.lead{font-size:19px;color:var(--mist);margin:22px 0 32px;max-width:34em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:26px;font-size:13.5px;color:rgba(244,246,243,.45)}

/* chat card */
.chat-card{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border:1px solid var(--line-night);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 120px rgba(255,182,72,.07);
  overflow:hidden;
  backdrop-filter:blur(4px);
}
.chat-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-night);
  font-size:13.5px;color:var(--mist);
}
.chat-head .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--confirm);margin-right:8px;box-shadow:0 0 8px rgba(62,155,110,.8)}
.chat-body{padding:20px 18px 8px;min-height:360px;display:flex;flex-direction:column;gap:12px}
.msg{
  max-width:82%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease;
}
.msg.shown{opacity:1;transform:none}
.msg.cust{align-self:flex-end;background:var(--lamp);color:#231604;border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:rgba(244,246,243,.09);border:1px solid var(--line-night);border-bottom-left-radius:5px}
.typing{align-self:flex-start;display:none;padding:12px 16px;border-radius:16px;background:rgba(244,246,243,.09);border:1px solid var(--line-night)}
.typing.on{display:flex;gap:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mist);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.booking{
  align-self:center;width:94%;margin-top:4px;
  background:rgba(62,155,110,.12);border:1px solid rgba(62,155,110,.4);
  border-radius:14px;padding:14px 16px;font-size:14px;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease;
}
.booking.shown{opacity:1;transform:none}
.booking strong{color:#7ED0A6;display:block;margin-bottom:4px;font-size:15px}
.booking .mono{color:var(--mist);font-size:12.5px}
.chat-log{
  padding:12px 18px 16px;border-top:1px solid var(--line-night);
  font-size:12px;color:rgba(244,246,243,.42);
}

/* while-you-slept band */
.slept{padding:0 0 90px}
.slept-box{
  border:1px solid var(--line-night);border-radius:var(--radius);
  padding:26px 30px;display:flex;gap:36px;flex-wrap:wrap;align-items:baseline;
  background:rgba(244,246,243,.03);
}
.slept-box .eyebrow{color:var(--lamp)}
.slept-item{font-size:15px;color:var(--mist)}
.slept-item b{color:var(--day);font-size:22px;font-family:'Bricolage Grotesque',sans-serif;margin-right:7px}

/* ---------- DAY ---------- */
.day-section{padding:96px 0}
.day-section.alt{background:var(--day-2)}
.sect-head{max-width:640px;margin-bottom:52px}
.sect-head .eyebrow{color:var(--lamp-deep);display:block;margin-bottom:14px}
.sect-head h2{font-size:clamp(30px,3.6vw,42px);font-weight:700}
.sect-head p{margin-top:16px;color:rgba(22,35,58,.72);font-size:18px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--day-2);border:1px solid var(--line-day);border-radius:var(--radius);
  padding:28px 26px;
}
.day-section.alt .card{background:var(--day)}
.card h3{font-size:20px;margin-bottom:10px}
.card p{font-size:15.5px;color:rgba(22,35,58,.72)}
.card .glyph{
  width:42px;height:42px;border-radius:11px;background:rgba(255,182,72,.16);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--lamp-deep);
}
.card .glyph svg{width:22px;height:22px}

/* dashboard mock */
.dash-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dash-mock{
  background:var(--day-2);border:1px solid var(--line-day);border-radius:18px;
  padding:24px;box-shadow:0 24px 60px rgba(22,35,58,.1);
}
.dash-mock .mono{font-size:12px;color:rgba(22,35,58,.5);letter-spacing:.08em;text-transform:uppercase}
.dash-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;margin:4px 0 18px}
.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.dash-cell{background:var(--day);border:1px solid var(--line-day);border-radius:11px;padding:14px}
.dash-cell b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;margin-top:2px}
.dash-cell span{font-size:11.5px;color:rgba(22,35,58,.55);text-transform:uppercase;letter-spacing:.06em}
.dash-alert{
  background:rgba(255,182,72,.14);border:1px solid rgba(232,154,37,.45);border-radius:11px;
  padding:13px 15px;font-size:14px;display:flex;gap:10px;align-items:center;
}
.dash-alert b{color:var(--lamp-deep)}
.dash-feed{margin-top:14px;border-top:1px solid var(--line-day);padding-top:12px}
.dash-feed .row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;color:rgba(22,35,58,.78)}
.dash-feed .row .mono{font-size:11.5px;color:rgba(22,35,58,.45);text-transform:none;letter-spacing:0}
.checkline{display:flex;gap:12px;margin-top:22px;align-items:flex-start}
.checkline svg{flex:none;width:20px;height:20px;color:var(--confirm);margin-top:3px}
.checkline p{font-size:16px;color:rgba(22,35,58,.8)}
.checkline p b{color:var(--ink)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding:30px 26px;border:1px solid var(--line-day);border-radius:var(--radius);background:var(--day-2)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'Spline Sans Mono',monospace;font-size:13px;color:var(--lamp-deep);
  letter-spacing:.12em;display:block;margin-bottom:14px;
}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:15px;color:rgba(22,35,58,.72)}

/* channels */
.channels{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1px solid var(--line-day);background:var(--day-2);font-weight:500;font-size:15px;
}
.chip svg{width:17px;height:17px;color:var(--lamp-deep)}

/* verticals */
.vert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vert{border:1px solid var(--line-day);border-radius:var(--radius);overflow:hidden;background:var(--day-2)}
.vert-top{padding:24px 24px 18px}
.vert-top h3{font-size:19px;margin-bottom:6px}
.vert-top p{font-size:14.5px;color:rgba(22,35,58,.68)}
.vert-quote{
  border-top:1px solid var(--line-day);padding:16px 24px;background:var(--day);
  font-size:13.5px;color:rgba(22,35,58,.78);
}
.vert-quote .q{margin-bottom:6px}
.vert-quote .a{color:var(--ink)}
.vert-quote .a::before,.vert-quote .q::before{
  font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  display:inline-block;margin-right:8px;padding:2px 7px;border-radius:5px;
}
.vert-quote .q::before{content:"CUSTOMER";background:rgba(22,35,58,.08)}
.vert-quote .a::before{content:"LEXISGRID";background:rgba(255,182,72,.22);color:#7a5410}

/* trust */
.trust-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;max-width:880px}

/* final CTA — back to night */
.cta-night{
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(255,182,72,.14), transparent 60%),
    linear-gradient(180deg, var(--night-2), var(--night));
  color:var(--day);text-align:center;padding:110px 0;
}
.cta-night h2{font-size:clamp(32px,4.2vw,48px);max-width:16em;margin:0 auto}
.cta-night p{color:var(--mist);margin:20px auto 36px;max-width:36em;font-size:18px}
.cta-night .mono{display:block;margin-top:30px;font-size:13px;color:rgba(244,246,243,.4)}

footer{background:var(--night);color:rgba(244,246,243,.5);padding:34px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer a{color:rgba(244,246,243,.7);text-decoration:none}
footer a:hover{color:var(--day)}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.ba-col{border-radius:18px;padding:30px 28px;position:relative;overflow:hidden}
.ba-before{background:#E9EAE8;border:1px solid var(--line-day)}
.ba-after{
  background:linear-gradient(180deg, var(--night-2), var(--night));color:var(--day);
  border:1px solid rgba(255,182,72,.35);
  box-shadow:0 20px 60px rgba(11,21,36,.25);
}
.ba-tag{
  font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;padding:5px 12px;border-radius:6px;margin-bottom:22px;font-weight:500;
}
.ba-before .ba-tag{background:rgba(22,35,58,.1);color:rgba(22,35,58,.6)}
.ba-after .ba-tag{background:rgba(255,182,72,.18);color:var(--lamp)}
.ba-line{display:flex;gap:14px;padding:11px 0;font-size:15px;align-items:baseline}
.ba-line + .ba-line{border-top:1px dashed rgba(22,35,58,.14)}
.ba-after .ba-line + .ba-line{border-top:1px dashed rgba(244,246,243,.14)}
.ba-line .mono{flex:none;font-size:12px;width:74px;color:rgba(22,35,58,.45)}
.ba-after .ba-line .mono{color:rgba(244,246,243,.45)}
.ba-before .ba-line p{color:rgba(22,35,58,.75)}
.ba-line p b{font-weight:600}
.ba-outcome{
  margin-top:22px;padding:14px 16px;border-radius:11px;font-size:14.5px;font-weight:500;
}
.ba-before .ba-outcome{background:rgba(178,58,58,.1);border:1px solid rgba(178,58,58,.3);color:#8C2F2F}
.ba-after .ba-outcome{background:rgba(62,155,110,.14);border:1px solid rgba(62,155,110,.45);color:#7ED0A6}

/* comparison table */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;font-size:15px}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line-day)}
.cmp th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:600;padding-top:20px;padding-bottom:16px}
.cmp th:first-child,.cmp td:first-child{text-align:left;font-weight:500;color:var(--ink)}
.cmp td{color:rgba(22,35,58,.65)}
.cmp .sub{display:block;font-family:'Instrument Sans',sans-serif;font-size:12.5px;font-weight:400;color:rgba(22,35,58,.5);margin-top:3px}
.cmp .yes{color:var(--confirm);font-weight:600;font-size:17px}
.cmp .no{color:rgba(178,58,58,.75);font-weight:600;font-size:17px}
.cmp .part{color:var(--lamp-deep);font-weight:600}
.cmp .lex{background:rgba(255,182,72,.09)}
.cmp th.lex{background:var(--night);color:var(--day);border-radius:12px 12px 0 0;border-bottom:1px solid var(--night)}
.cmp th.lex span{color:var(--lamp)}
.cmp tr:last-child td{border-bottom:none}
.cmp tr:last-child td.lex{border-radius:0 0 12px 12px}
.cmp{background:var(--day-2);border-radius:14px}
.cmp th:first-child{border-radius:14px 0 0 0}
.switch-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.switch-strip .chip{background:var(--day-2)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .msg,.booking,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .typing{display:none !important}
}

@media (max-width: 920px){
  .hero{grid-template-columns:1fr;padding:36px 0 70px;gap:40px}
  .grid-3,.steps,.vert-grid,.ba-grid{grid-template-columns:1fr}
  .dash-split{grid-template-columns:1fr;gap:36px}
  .trust-list{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
  .day-section{padding:70px 0}
}

/* ============ SUBPAGE COMPONENTS ============ */
.page-hero{
  background:
    radial-gradient(700px 380px at 78% 10%, rgba(255,182,72,.12), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color:var(--day);padding-bottom:72px;
}
.page-hero h1{font-size:clamp(34px,4.4vw,50px);font-weight:700;max-width:16em;padding-top:34px}
.page-hero p.lead{font-size:19px;color:var(--mist);margin-top:18px;max-width:36em}
.page-hero .eyebrow{color:var(--lamp);display:block;padding-top:30px}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0}
.frow + .frow{border-top:1px solid var(--line-day)}
.frow.flip .fr-media{order:-1}
.frow h3{font-size:26px;font-family:'Bricolage Grotesque',sans-serif;margin-bottom:12px}
.frow p{color:rgba(22,35,58,.72);font-size:16.5px}
.frow ul{margin-top:14px;padding-left:0;list-style:none}
.frow li{padding:7px 0 7px 30px;position:relative;font-size:15.5px;color:rgba(22,35,58,.78)}
.frow li::before{content:"✓";position:absolute;left:0;color:var(--confirm);font-weight:600}
.fr-media{
  background:var(--day-2);border:1px solid var(--line-day);border-radius:16px;
  padding:22px;box-shadow:0 18px 50px rgba(22,35,58,.08);font-size:14px;
}
.fr-media .mono{font-size:11.5px;color:rgba(22,35,58,.5);text-transform:uppercase;letter-spacing:.08em}
.mini-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;margin-top:10px;line-height:1.45}
.mini-msg.c{background:var(--lamp);color:#231604;margin-left:auto;border-bottom-right-radius:4px}
.mini-msg.a{background:var(--day);border:1px solid var(--line-day);border-bottom-left-radius:4px}
.mini-note{margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(62,155,110,.12);border:1px solid rgba(62,155,110,.4);font-size:13px;color:#2C6E4E;font-weight:500}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{background:var(--day-2);border:1px solid var(--line-day);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column}
.price-card.featured{background:linear-gradient(180deg,var(--night-2),var(--night));color:var(--day);border-color:rgba(255,182,72,.4);box-shadow:0 24px 70px rgba(11,21,36,.3)}
.price-card h3{font-size:21px;margin-bottom:6px}
.price-card .for{font-size:14px;color:rgba(22,35,58,.6);margin-bottom:18px}
.price-card.featured .for{color:var(--mist)}
.price{font-family:'Bricolage Grotesque',sans-serif;font-size:42px;font-weight:700}
.price small{font-size:15px;font-weight:400;font-family:'Instrument Sans',sans-serif;color:rgba(22,35,58,.55)}
.price-card.featured .price small{color:var(--mist)}
.price-card ul{list-style:none;margin:22px 0 26px;flex:1}
.price-card li{padding:7px 0 7px 28px;position:relative;font-size:15px}
.price-card li::before{content:"✓";position:absolute;left:0;color:var(--confirm);font-weight:600}
.price-card.featured li::before{color:#7ED0A6}
.badge{display:inline-block;font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,182,72,.2);color:var(--lamp);padding:4px 10px;border-radius:6px;margin-bottom:14px}

/* faq */
.faq-list{max-width:780px}
.faq-list details{border:1px solid var(--line-day);border-radius:12px;background:var(--day-2);margin-bottom:12px;overflow:hidden}
.faq-list summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:var(--lamp-deep);flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list .ans{padding:0 22px 20px;color:rgba(22,35,58,.72);font-size:15.5px}

/* contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form-card{background:var(--day-2);border:1px solid var(--line-day);border-radius:18px;padding:32px;box-shadow:0 18px 50px rgba(22,35,58,.08)}
.form-card label{display:block;font-size:13.5px;font-weight:600;margin:16px 0 6px}
.form-card input,.form-card textarea,.form-card select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line-day);border-radius:10px;
  font-family:'Instrument Sans',sans-serif;font-size:15px;background:var(--day);color:var(--ink);
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:2px solid var(--lamp);border-color:transparent}
.form-card button{margin-top:22px;width:100%;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif}

/* legal prose */
.legal{max-width:760px;padding:64px 0 90px}
.legal h1{font-size:clamp(30px,4vw,40px);margin-bottom:8px}
.legal .updated{font-family:'Spline Sans Mono',monospace;font-size:13px;color:rgba(22,35,58,.5);margin-bottom:40px;display:block}
.legal h2{font-size:21px;margin:38px 0 12px}
.legal p,.legal li{font-size:15.5px;color:rgba(22,35,58,.78);margin-bottom:12px}
.legal ul{padding-left:22px}
.legal a{color:var(--lamp-deep)}

@media (max-width:920px){
  .frow,.contact-grid{grid-template-columns:1fr;gap:30px}
  .frow.flip .fr-media{order:0}
  .pricing-grid{grid-template-columns:1fr}
  .page-hero h1{padding-top:20px}
}