/* Liquid Glass hero — high fidelity */
:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:rgba(17,24,39,.70);
  --muted2:rgba(17,24,39,.52);
  --stroke:rgba(0,0,0,.10);
  --glass:rgba(255,255,255,.30);
  --blue1:#60B1FF;
  --blue2:#319AFF;
  --cta:rgba(0,132,255,.80);
  --star:#FF801E;
  --radius:16px;
  --container:min(1600px, calc(100% - 48px));
  --fustat:"Fustat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --inter:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--inter);
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:-18% -18%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(780px 520px at 16% 18%, rgba(96,177,255,.22), transparent 62%),
    radial-gradient(640px 460px at 78% 16%, rgba(49,154,255,.16), transparent 64%),
    radial-gradient(760px 520px at 72% 84%, rgba(96,177,255,.10), transparent 64%),
    linear-gradient(180deg, #fff, #fff);
  filter: blur(22px);
  opacity:.9;
  transform: translate3d(0,0,0);
  animation: bgDrift 18s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background-image:
    linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(closest-side at 50% 16%, rgba(0,0,0,.9), transparent 72%);
}
a{color:inherit}
.lg-container{width:var(--container); margin-inline:auto}

@keyframes bgDrift{
  from{transform: translate3d(-1.2%, -0.6%, 0) scale(1.02)}
  to{transform: translate3d(1.0%, 0.8%, 0) scale(1.04)}
}

/* Common */
.lg-navwrap{position:sticky; top:0; z-index:50}
.lg-nav{
  pointer-events:auto;
  position:sticky; top:30px;
  width:fit-content;
  margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.30);
  backdrop-filter:blur(50px);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:inset 0 4px 4px rgba(255,255,255,.25), 0 24px 70px rgba(15,23,42,.08);
  transform:translate3d(0,0,0);
}
.lg-brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--fustat); font-weight:800; letter-spacing:-.02em}
.lg-brand__mark{width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--blue1), var(--blue2)); box-shadow:0 14px 30px rgba(49,154,255,.18)}
.lg-links{display:none; align-items:center; gap:18px}
.lg-link{text-decoration:none; color:rgba(17,24,39,.70); font-size:14px; font-weight:500}
.lg-link:hover{color:rgba(17,24,39,.92)}
@media (min-width: 860px){.lg-links{display:flex}}
.lg-btn{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  font-size:14px; font-weight:600; color:rgba(17,24,39,.92);
  padding:10px 14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.22);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 4px 4px rgba(255,255,255,.25);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.lg-btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.30); border-color:rgba(0,0,0,.12)}
.lg-btn__icon{width:18px; height:18px; display:grid; place-items:center}
.lg-btn__icon svg{width:100%; height:100%}

/* Burger */
.lg-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 4px 4px rgba(255,255,255,.25);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lg-burger:hover{transform:translateY(-1px); background:rgba(255,255,255,.30); border-color:rgba(0,0,0,.12)}
.lg-burger__lines{
  width:18px;
  height:2px;
  background:rgba(17,24,39,.82);
  border-radius:2px;
  box-shadow: 0 -5px 0 rgba(17,24,39,.82), 0 5px 0 rgba(17,24,39,.82);
  display:block;
}

@media (min-width: 860px){
  .lg-burger{display:none}
}
@media (max-width: 859.98px){
  .lg-btn{display:none}
}

/* Drawer */
.lg-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(2px);
  z-index:60;
}
.lg-drawer{
  position:fixed;
  right:16px;
  top:88px;
  width:min(360px, calc(100% - 32px));
  border-radius:24px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(24px);
  box-shadow: 0 40px 120px rgba(15,23,42,.18), inset 0 4px 4px rgba(255,255,255,.18);
  z-index:61;
  overflow:hidden;
  transform: translateY(-6px);
}
.lg-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.lg-drawer__brand{display:flex; align-items:center; gap:10px; font-family:var(--fustat); font-weight:800; letter-spacing:-.02em}
.lg-close{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.40);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.18);
  cursor:pointer;
}
.lg-close svg{width:18px; height:18px}
.lg-drawer__nav{display:grid; padding:10px}
.lg-drawer__link{
  padding:12px 12px;
  border-radius:16px;
  text-decoration:none;
  color:rgba(17,24,39,.82);
  font-weight:600;
  letter-spacing:-.2px;
}
.lg-drawer__link:hover{background:rgba(49,154,255,.10)}
.lg-drawer__actions{padding:10px 10px 14px}
.lg-cta--full{width:100%}
.lg-cta--full{justify-content:space-between}

/* Hero (centered) */
.lg-hero{position:relative; padding:112px 0 64px; overflow:hidden}
.lg-hero__grid{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:center;
}
.lg-hero__left{max-width:72ch}

/* Social proof */
.lg-rating{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(15,23,42,.06);
}
.lg-stars{display:flex; gap:4px}
.lg-stars svg{width:14px; height:14px; fill:var(--star); display:block}
.lg-rating__txt{font-size:14px; color:rgba(17,24,39,.75); letter-spacing:-.01em}
.lg-rating__txt strong{color:rgba(17,24,39,.92)}

/* Hero type */
.lg-h1{margin:18px 0 0; font-family:var(--fustat); font-weight:800; font-size:clamp(38px, 6.2vw, 75px); line-height:1.05; letter-spacing:-2px}
.lg-sub{margin:16px auto 0; max-width:58ch; font-size:18px; font-weight:500; color:rgba(17,24,39,.70); letter-spacing:-1px}
.lg-ctas{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.lg-section{padding: 74px 0}
@media (min-width: 980px){.lg-section{padding: 96px 0}}
.lg-section--last{padding-bottom: 104px}
.lg-h2{
  margin:0;
  font-family:var(--fustat);
  font-weight:800;
  font-size:clamp(26px, 3.1vw, 44px);
  line-height:1.08;
  letter-spacing:-1px;
}
.lg-h3{
  margin:14px 0 0;
  font-family:var(--fustat);
  font-weight:800;
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.3px;
}
.lg-p{margin:12px 0 0; font-size:16px; line-height:1.7; color:var(--muted); letter-spacing:-.2px}
.lg-p--wide{max-width: 70ch}
.lg-head{display:flex; flex-direction:column; gap:10px; margin-bottom:28px}

.lg-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: inset 0 4px 4px rgba(255,255,255,.18), 0 20px 70px rgba(15,23,42,.06);
  backdrop-filter: blur(18px);
}
.lg-card--soft{background: rgba(255,255,255,.42)}

.lg-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.36);
  color: rgba(17,24,39,.68);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.2px;
}
.lg-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,24,39,.80);
}
.lg-pill--a{
  border-color: rgba(49,154,255,.22);
  background: rgba(49,154,255,.10);
  color: rgba(0,70,160,.95);
}

.lg-chips{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px}
.lg-chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.50);
  font-size: 13px;
  font-weight: 600;
  color: rgba(17,24,39,.70);
}

.lg-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 18px;
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(12px);
  text-decoration:none;
  font-weight:600;
  color: rgba(17,24,39,.82);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lg-ghost:hover{transform: translateY(-1px); background: rgba(255,255,255,.42); border-color: rgba(0,0,0,.12)}

/* Split statement */
.lg-split{display:grid; gap:18px; align-items:start}
.lg-split__b .lg-card{padding:18px 18px}
@media (min-width: 980px){
  .lg-split{grid-template-columns: 1.05fr .95fr; gap:26px}
  .lg-split__b .lg-card{padding:22px 22px}
}

/* Rail */
.lg-rail{
  display:grid;
  gap:14px;
}
.lg-mod{padding:18px 18px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.lg-mod:hover{transform: translateY(-4px); border-color: rgba(49,154,255,.20); box-shadow: inset 0 4px 4px rgba(255,255,255,.22), 0 30px 90px rgba(15,23,42,.08)}
.lg-mod__top{display:flex; justify-content:flex-start}
@media (min-width: 720px){.lg-rail{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (min-width: 1100px){.lg-rail{grid-template-columns: repeat(4, minmax(0,1fr))}}

/* Workflow */
.lg-flow{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.lg-flow__item{
  display:flex;
  gap:12px;
  padding:16px 16px;
  border-radius: 20px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
}
.lg-flow__n{
  width:36px;
  height:36px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight:800;
  color: rgba(0,70,160,.95);
  background: rgba(49,154,255,.12);
  border:1px solid rgba(49,154,255,.20);
}
.lg-flow__h{font-family:var(--fustat); font-weight:800; letter-spacing:-.2px}
.lg-flow__p{margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6}
@media (min-width: 980px){.lg-flow{grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px}}

/* Matrix */
.lg-matrix{display:grid; gap:14px}
.lg-mcell{padding:18px 18px; transition: transform .18s ease, border-color .18s ease}
.lg-mcell:hover{transform: translateY(-3px); border-color: rgba(49,154,255,.20)}
@media (min-width: 980px){.lg-matrix{grid-template-columns: repeat(4, minmax(0,1fr))}}

/* Compare */
.lg-compare{display:grid; gap:10px}
.lg-row{
  display:grid;
  gap:10px;
  padding:14px 14px;
  border-radius: 22px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
}
.lg-cell{font-size:14px; color:rgba(17,24,39,.72); line-height:1.6}
.lg-cell--k{font-family:var(--fustat); font-weight:800; color: rgba(17,24,39,.88)}
.lg-cell--a{border:1px solid rgba(49,154,255,.18); background: rgba(49,154,255,.08); border-radius: 16px; padding:10px 12px}
@media (min-width: 980px){
  .lg-row{grid-template-columns: 160px 1fr 1fr; align-items:start; padding:18px 18px}
  .lg-cell--a{padding:12px 14px}
}

/* Trust */
.lg-trustgrid{display:grid; gap:14px}
.lg-trustitem{padding:18px 18px; transition: transform .18s ease, border-color .18s ease}
.lg-trustitem:hover{transform: translateY(-3px); border-color: rgba(49,154,255,.20)}
@media (min-width: 980px){.lg-trustgrid{grid-template-columns: repeat(3, minmax(0,1fr))}}

/* Install */
.lg-install{display:grid; gap:14px; align-items:start}
.lg-install__cta{padding:18px 18px}
.lg-install__h{font-family:var(--fustat); font-weight:800; letter-spacing:-.4px; font-size:18px}
.lg-install__actions{margin-top:14px; display:flex; flex-wrap:wrap; gap:12px}
.lg-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.lg-step{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 14px;
  border-radius: 20px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
}
.lg-step__n{
  width:34px; height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight:800;
  color: rgba(0,70,160,.95);
  background: rgba(49,154,255,.12);
  border:1px solid rgba(49,154,255,.20);
}
.lg-step__t{font-size:14px; line-height:1.6; color: rgba(17,24,39,.72)}
@media (min-width: 980px){.lg-install{grid-template-columns: 1fr 1fr; gap:18px}}

/* FAQ */
.lg-faq{display:grid; gap:10px}
.lg-qa{
  border-radius: 22px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
  padding: 0;
  overflow:hidden;
}
.lg-q{
  cursor:pointer;
  list-style:none;
  padding:18px 18px;
  font-family:var(--fustat);
  font-weight:800;
  letter-spacing:-.2px;
}
.lg-q::-webkit-details-marker{display:none}
.lg-a{padding: 0 18px 18px; color: var(--muted); line-height:1.7}
.lg-qa[open]{background: rgba(255,255,255,.62)}

/* Final */
.lg-final{
  padding: 22px 22px;
  border-radius: 26px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.18), 0 26px 90px rgba(15,23,42,.08);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.lg-final__actions{display:flex; flex-wrap:wrap; gap:12px}
@media (min-width: 980px){
  .lg-final{flex-direction:row; align-items:center; justify-content:space-between; padding: 28px 28px}
  .lg-final__copy{max-width: 68ch}
}

/* (deduped navbar/hero block removed) */

/* Primary CTA */
.lg-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:16px 18px;
  border-radius:var(--radius);
  color:#fff; text-decoration:none; font-weight:600;
  background:var(--cta);
  backdrop-filter:blur(2px);
  box-shadow:inset 0 4px 4px rgba(255,255,255,.35), 0 28px 80px rgba(49,154,255,.20);
  transition:transform .18s ease, box-shadow .18s ease;
  transform:translate3d(0,0,0);
}
.lg-cta:hover{transform:scale(1.02); box-shadow:inset 0 4px 4px rgba(255,255,255,.35), 0 40px 110px rgba(49,154,255,.22)}
.lg-cta__circle{width:32px; height:32px; border-radius:999px; background:rgba(255,255,255,.22); display:grid; place-items:center; box-shadow:inset 0 4px 4px rgba(255,255,255,.25)}
.lg-cta__circle svg{width:18px; height:18px; color:#fff}

/* Orb removed per request */

/* Trusted logos */
.lg-trust{padding:26px 0 72px}
.lg-trust__label{margin:0 0 26px; font-size:14px; font-weight:500; color:rgba(17,24,39,.65)}
.lg-logos{display:flex; flex-wrap:wrap; gap:36px; align-items:center}
@media (min-width: 980px){.lg-logos{gap:100px}}
.lg-logo{color:rgba(0,0,0,.44); filter:grayscale(100%); opacity:.85}
.lg-logo svg{height:26px; width:auto; fill:currentColor}

/* Footer */
.lg-pad{height:1px}
.lg-footer{padding:28px 0 42px}
.lg-footer__line{height:1px; background:rgba(0,0,0,.08); margin-bottom:14px}
.lg-footer__copy{font-size:13px; color:rgba(17,24,39,.55)}

.lg-footer__grid{
  margin: 22px 0 18px;
  display:grid;
  gap:16px;
}
.lg-foot__brand{font-family:var(--fustat); font-weight:800; letter-spacing:-.2px}
.lg-foot__cap{font-size:12px; font-weight:700; color: rgba(17,24,39,.62); letter-spacing:-.1px; margin-bottom:8px}
.lg-foot__txt{font-size:13px; color: rgba(17,24,39,.60); line-height:1.6}
.lg-foot__links{display:flex; flex-direction:column; gap:8px}
.lg-foot__links a{text-decoration:none; color: rgba(0,70,160,.90)}
.lg-foot__links a:hover{text-decoration:underline}
@media (min-width: 980px){.lg-footer__grid{grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:22px}}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  body::before{animation:none !important}
}

.is-drawer-open{overflow:hidden}
