:root{
  --bg:#06111f;
  --bg2:#020812;
  --panel:rgba(6,19,35,.72);
  --line:rgba(36,199,226,.26);
  --line-soft:rgba(148,163,184,.16);
  --text:#f8fafc;
  --muted:#a8b2c5;
  --cyan:#20e3e9;
  --blue:#168de8;
  --navy:#081522;
  --shadow:0 0 42px rgba(32,227,233,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 8%, rgba(22,141,232,.24), transparent 32rem),
    radial-gradient(circle at 8% 20%, rgba(32,227,233,.12), transparent 24rem),
    linear-gradient(135deg,var(--bg),var(--bg2) 58%,#030712);
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at top, black, transparent 78%);
}
a{color:inherit}.site-shell{width:min(1160px, calc(100% - 40px)); margin-inline:auto; padding:52px 0 30px; position:relative}
.topbar,.footer,.legal-line{display:flex; align-items:center; justify-content:space-between; gap:24px}.topbar{margin-bottom:72px}
.brand{display:inline-flex; align-items:center; gap:16px; text-decoration:none}.brand-mark{width:76px; height:76px; color:var(--cyan); filter:drop-shadow(0 0 12px rgba(32,227,233,.38))}.brand-word{font-size:clamp(1.7rem,3vw,2.45rem); font-weight:750; letter-spacing:-.05em}.brand-word strong{color:var(--cyan)}.brand-small .brand-mark{width:58px;height:58px}.brand-small .brand-word{font-size:1.65rem}
.pill-link{border:1px solid var(--line); border-radius:999px; padding:13px 22px; text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; color:var(--cyan); text-decoration:none; background:rgba(2,8,18,.35); box-shadow:var(--shadow)}
.hero{text-align:center; max-width:820px; margin:0 auto 68px}.eyebrow{text-transform:uppercase; color:var(--cyan); letter-spacing:.18em; font-weight:700; font-size:clamp(.9rem,1.5vw,1.1rem); margin:0 0 18px}.hero h1{font-size:clamp(4rem,10vw,7.4rem); letter-spacing:-.075em; line-height:.92; margin:0; text-shadow:0 8px 35px rgba(255,255,255,.12)}.hero h1 span{color:var(--cyan)}.strapline{font-size:clamp(1.2rem,2.5vw,1.9rem); color:#d5dbea; margin:24px 0}.intro{font-size:clamp(1.05rem,1.8vw,1.35rem); color:#d7ddea; line-height:1.55; max-width:720px; margin:30px auto 0}.circuit-divider{height:30px; display:flex; justify-content:center; align-items:center}.circuit-divider span{width:min(520px,80vw); height:1px; background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),var(--blue),transparent); position:relative; box-shadow:0 0 18px rgba(32,227,233,.65)}.circuit-divider span::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--cyan); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 20px var(--cyan)}
.features{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:0 0 66px}.feature-card{padding:20px 18px 26px; text-align:center; border-left:1px solid var(--line-soft)}.feature-card:nth-child(5n+1){border-left:0}.feature-card svg{width:96px; height:96px; margin:0 auto 18px; fill:none; stroke:url(#none); stroke:var(--cyan); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 12px rgba(32,227,233,.42))}.feature-card h2{font-size:1rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px}.feature-card p{margin:0; color:var(--muted); line-height:1.45; font-size:.98rem}

/* ===== Combined contact panel (Subscribe + Demo) ===== */
.contact-panel{
  border:1px solid var(--line);
  border-radius:28px;
  padding:42px 42px 38px;
  background:linear-gradient(135deg,rgba(8,21,34,.76),rgba(2,8,18,.44));
  box-shadow:var(--shadow);
  margin-bottom:60px;
}
.contact-header{text-align:center; max-width:680px; margin:0 auto 32px}
.contact-header h2{
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.05; margin:0 0 16px; letter-spacing:-.04em;
}
.contact-header h2 span{color:var(--cyan)}
.contact-header p{color:#d2d8e5; line-height:1.55; margin:0}

.contact-forms{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.contact-forms--single{
  grid-template-columns:minmax(0, 520px);
  justify-content:center;
}

.contact-form{
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:30px 28px;
  background:rgba(3,10,20,.55);
  display:flex; flex-direction:column;
}
.contact-form--accent{
  border-color:var(--line);
  background:linear-gradient(135deg,rgba(32,227,233,.06),rgba(22,141,232,.05) 60%,rgba(3,10,20,.55));
  box-shadow:0 0 24px rgba(32,227,233,.10);
}

.form-title{
  font-size:1.05rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 6px;
  color:var(--cyan);
}
.form-sub{margin:0 0 22px; color:#d2d8e5; font-size:.98rem}

.field{display:flex; flex-direction:column; margin-bottom:14px}
.field label{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b6c0d2;
  margin-bottom:6px;
}
.field input{
  height:50px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:rgba(3,10,20,.72);
  color:var(--text);
  padding:0 16px;
  font:inherit;
  font-size:1rem;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:#6b768a}
.field input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(32,227,233,.18);
}

.btn-primary{
  margin-top:8px;
  height:54px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#00111f;
  font:inherit;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(32,227,233,.28);
}
.btn-primary:active{transform:translateY(0)}

.privacy-note{
  margin:16px 0 0;
  padding-left:24px;
  position:relative;
  color:#b6c0d2;
  font-size:.88rem;
  line-height:1.45;
}
.privacy-note::before{content:"🔒"; position:absolute; left:0; top:0}
.privacy-note a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(32,227,233,.4);
  transition:border-color .15s ease;
}
.privacy-note a:hover{
  border-bottom-color:var(--cyan);
}

/* ===== Consent checkbox ===== */
.consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:6px 0 18px;
  cursor:pointer;
  font-size:.92rem;
  line-height:1.5;
  color:#d2d8e5;
}
.consent input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:1px 0 0;
  border:1px solid var(--line);
  border-radius:5px;
  background:rgba(3,10,20,.72);
  cursor:pointer;
  position:relative;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.consent input[type="checkbox"]:hover{
  border-color:var(--cyan);
}
.consent input[type="checkbox"]:focus-visible{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(32,227,233,.22);
}
.consent input[type="checkbox"]:checked{
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  border-color:var(--cyan);
}
.consent input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #00111f;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.consent span{flex:1}

.footer{border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft); padding:38px 0; align-items:flex-start}.footer>div,.contact{flex:1}.footer p{color:var(--muted); line-height:1.55}.contact{font-style:normal; display:grid; gap:10px; color:var(--muted)}.contact strong,.follow strong{text-transform:uppercase; letter-spacing:.14em; color:#dce3ee; margin-bottom:8px}.contact a,.follow a{text-decoration:none; color:#dce3ee}.contact a:hover,.follow a:hover{color:var(--cyan)}.follow{display:grid; gap:10px; color:var(--muted)}.legal-line{padding-top:26px; color:var(--muted); font-size:.94rem}.legal-line a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-soft); transition:color .15s ease, border-color .15s ease}.legal-line a:hover{color:var(--cyan); border-bottom-color:var(--cyan)}.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}

/* ===== Legal pages (Privacy Policy etc.) ===== */
.legal-page{
  max-width:780px;
  margin:0 auto 60px;
  padding:48px 44px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(8,21,34,.76),rgba(2,8,18,.44));
  box-shadow:var(--shadow);
}
.legal-header{
  text-align:center;
  margin-bottom:36px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line-soft);
}
.legal-header .eyebrow{margin-bottom:14px}
.legal-header h1{
  font-size:clamp(2.2rem,4vw,3.4rem);
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0 0 14px;
}
.legal-meta{color:var(--muted); margin:0; font-size:.94rem}

.legal-body{color:#d7ddea; line-height:1.65; font-size:1.02rem}
.legal-body .lede{
  font-size:1.1rem;
  color:#e6ebf5;
  margin:0 0 28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line-soft);
}
.legal-body h2{
  color:var(--cyan);
  font-size:1.15rem;
  letter-spacing:.04em;
  margin:34px 0 12px;
}
.legal-body p{margin:0 0 14px}
.legal-body ul{margin:0 0 18px; padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(32,227,233,.4);
  transition:border-color .15s ease;
}
.legal-body a:hover{border-bottom-color:var(--cyan)}
.legal-body strong{color:#f0f4fb}

.legal-back{
  margin-top:40px !important;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.legal-back a{
  color:var(--cyan);
  text-decoration:none;
  font-weight:600;
  border:none !important;
}

@media (max-width:980px){
  .features{grid-template-columns:repeat(2,1fr)}
  .feature-card,.feature-card:nth-child(5n+1){border-left:1px solid var(--line-soft)}
  .feature-card:nth-child(odd){border-left:0}
  .contact-forms{grid-template-columns:1fr}
  .contact-panel{padding:32px 26px 28px}
  .footer{display:grid; grid-template-columns:1fr 1fr}
  .follow{grid-column:1/-1}
}
@media (max-width:640px){
  .site-shell{width:min(100% - 28px,1160px); padding-top:28px}
  .topbar{align-items:flex-start; margin-bottom:54px}
  .pill-link{display:none}
  .brand-mark{width:58px;height:58px}
  .features{grid-template-columns:1fr}
  .feature-card,.feature-card:nth-child(odd),.feature-card:nth-child(5n+1){border-left:0; border-top:1px solid var(--line-soft)}
  .contact-panel{padding:26px 20px 22px}
  .contact-form{padding:24px 20px}
  .legal-page{padding:30px 22px}
  .footer{grid-template-columns:1fr}
  .legal-line{display:grid; gap:12px}
  .hero h1{font-size:3.8rem}
}
