:root{
  --bg:#030712;
  --panel:#081426;
  --panel2:#0d2037;
  --text:#f8fbff;
  --muted:#a9bbd2;
  --blue:#22c7f3;
  --blue2:#4776ff;
  --pink:#ef477a;
  --gold:#e2be42;
  --green:#4be19b;
  --line:rgba(130,205,255,.24);
  --strong-line:rgba(103,220,255,.48);
  --shadow:0 30px 90px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(90deg,rgba(103,220,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(103,220,255,.055) 1px,transparent 1px),
    linear-gradient(135deg,#02050d 0%,#061322 40%,#111122 68%,#070812 100%);
  background-size:52px 52px,52px 52px,auto;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 36%,rgba(34,199,243,.14) 37%,transparent 39% 64%,rgba(239,71,122,.10) 65%,transparent 67%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 28%,rgba(0,0,0,.28));
  mix-blend-mode:screen;
}
a{color:inherit;text-decoration:none}
.page{min-height:100vh;overflow:hidden}
.nav{
  width:min(1240px,calc(100% - 36px));
  margin:0 auto;
  padding:22px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  z-index:2;
}
.brand img{width:210px;height:auto;display:block}
.nav-actions{display:flex;align-items:center;gap:18px;color:var(--muted);font-weight:850}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  padding:14px 20px;
  font-weight:950;
  border:1px solid var(--line);
  transition:.2s transform,.2s filter,.2s border-color;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);border-color:var(--strong-line)}
.primary{
  background:linear-gradient(135deg,#22c7f3,#4776ff 48%,#ef477a);
  box-shadow:0 18px 44px rgba(55,143,255,.25);
  border:0;
  color:white;
}
.ghost{
  background:linear-gradient(135deg,rgba(38,185,255,.16),rgba(239,70,123,.10));
  border-color:rgba(120,200,255,.38);
  color:#f7fbff;
  box-shadow:0 12px 34px rgba(38,185,255,.12);
  backdrop-filter:blur(12px);
}
.nav-login{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#00d5ff 0%,#367cff 45%,#ff3f7f 100%);
  border:0!important;
  color:white!important;
  padding:16px 28px!important;
  border-radius:999px!important;
  box-shadow:0 18px 48px rgba(0,174,255,.38),0 10px 30px rgba(255,63,127,.24),0 0 0 1px rgba(255,255,255,.18) inset;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
}
.nav-login:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%);
  animation:shine 2.8s infinite;
}
@keyframes shine{55%,100%{transform:translateX(130%)}}
.hero{
  width:min(1240px,calc(100% - 36px));
  min-height:680px;
  margin:28px auto 0;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:42px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-copy,
.security-console{min-width:0}
.eyebrow{
  margin:0 0 14px;
  color:#6bd7ff;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  font-weight:950;
}
.hero h1{
  font-size:clamp(2.8rem,5.6vw,5.55rem);
  line-height:.92;
  margin:0 0 24px;
  letter-spacing:-.065em;
  max-width:850px;
  overflow-wrap:anywhere;
}
.lead{
  font-size:clamp(1.05rem,1.7vw,1.24rem);
  color:#d7e3f5;
  line-height:1.66;
  margin:0 0 28px;
  max-width:740px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.security-console{
  border:1px solid var(--strong-line);
  border-radius:34px;
  background:
    linear-gradient(90deg,rgba(34,199,243,.06) 1px,transparent 1px),
    linear-gradient(rgba(34,199,243,.05) 1px,transparent 1px),
    linear-gradient(145deg,rgba(10,26,47,.92),rgba(9,11,28,.94));
  background-size:34px 34px,34px 34px,auto;
  box-shadow:var(--shadow),0 0 70px rgba(34,199,243,.12);
  min-height:590px;
  padding:24px;
  position:relative;
  overflow:hidden;
}
.security-console:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0 42%,rgba(34,199,243,.12) 44%,transparent 46% 72%,rgba(239,71,122,.10) 74%,transparent 76%);
}
.security-console>*{position:relative}
.console-top{
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(130,205,255,.18);
  margin-bottom:24px;
}
.console-top span{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--pink);
}
.console-top span:nth-child(2){background:var(--gold)}
.console-top span:nth-child(3){background:var(--green)}
.console-top strong{
  margin-left:auto;
  color:#9eeeff;
  letter-spacing:.18em;
  font-size:.72rem;
}
.console-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:22px;
  align-items:stretch;
}
.radar{
  min-height:330px;
  border:1px solid rgba(130,205,255,.2);
  border-radius:28px;
  background:
    linear-gradient(90deg,transparent 49%,rgba(103,220,255,.17) 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,rgba(103,220,255,.17) 50%,transparent 51%),
    rgba(3,11,23,.72);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.radar:before{
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(103,220,255,.22);
  box-shadow:0 0 0 46px rgba(103,220,255,.035),0 0 0 92px rgba(103,220,255,.025);
}
.radar:after{
  content:"";
  position:absolute;
  width:44%;
  height:2px;
  background:linear-gradient(90deg,rgba(34,199,243,.95),transparent);
  transform-origin:left center;
  animation:sweep 4.4s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar-core{
  width:112px;
  height:126px;
  clip-path:polygon(50% 0,90% 16%,82% 74%,50% 100%,18% 74%,10% 16%);
  background:linear-gradient(145deg,#26b9ff,#4776ff 54%,#ef477a);
  box-shadow:0 20px 55px rgba(34,199,243,.32);
  position:relative;
}
.radar-core:after{
  content:"";
  position:absolute;
  left:33px;
  top:42px;
  width:42px;
  height:24px;
  border-left:8px solid white;
  border-bottom:8px solid white;
  transform:rotate(-45deg);
  border-radius:4px;
}
.node{
  position:absolute;
  min-width:52px;
  min-height:34px;
  padding:8px 10px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#041222;
  background:#6bd7ff;
  font-weight:950;
  box-shadow:0 12px 28px rgba(34,199,243,.25);
}
.node-a{left:10%;top:18%}
.node-b{right:9%;top:28%;background:#4be19b}
.node-c{left:17%;bottom:17%;background:#e2be42}
.node-d{right:14%;bottom:18%;background:#ef8db0}
.signal-panel{
  min-height:330px;
  border:1px solid rgba(130,205,255,.2);
  border-radius:28px;
  padding:28px;
  background:linear-gradient(145deg,rgba(13,32,55,.82),rgba(8,12,29,.82));
}
.signal-panel h2{
  margin:0 0 28px;
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:1.03;
}
.trust-bars{display:grid;gap:18px}
.trust-bars span{display:grid;gap:8px}
.trust-bars span:before{
  content:"";
  order:2;
}
.trust-bars i{
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green),var(--pink));
  box-shadow:0 0 22px rgba(34,199,243,.24);
}
.trust-bars b{font-size:.96rem;color:#dcecff}
.console-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.console-metrics article{
  border:1px solid rgba(130,205,255,.2);
  border-radius:20px;
  padding:18px;
  background:rgba(255,255,255,.045);
}
.console-metrics strong{display:block;font-size:1rem;margin-bottom:6px}
.console-metrics span{color:var(--muted);font-size:.92rem}
.trust-strip{
  width:min(1180px,calc(100% - 36px));
  margin:44px auto 94px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.trust-strip article,
.architecture-map article,
.security-grid article,
.assurance,
.contact-section{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(13,32,55,.78),rgba(17,17,38,.72));
  border-radius:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.trust-strip article{padding:24px}
.trust-strip strong{display:block;font-size:1.35rem;margin-bottom:8px}
.trust-strip span{color:var(--muted);line-height:1.55}
.architecture,
.section{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto 94px;
}
.section-head{max-width:850px;margin-bottom:26px}
.section-head h2,
.assurance h2,
.contact-section h2{
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1;
  margin:0;
}
.architecture-map{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.architecture-map article{
  padding:26px;
  min-height:260px;
  position:relative;
  overflow:hidden;
}
.architecture-map article:before{
  content:"";
  position:absolute;
  inset:0;
  border-top:2px solid rgba(107,215,255,.45);
  opacity:.6;
}
.architecture-map span{
  display:inline-flex;
  width:44px;
  height:44px;
  border-radius:15px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(34,199,243,.25),rgba(71,118,255,.22));
  border:1px solid rgba(126,219,255,.34);
  color:#aef0ff;
  font-weight:950;
  margin-bottom:22px;
}
.architecture-map h3,
.security-grid h3{
  font-size:1.24rem;
  margin:0 0 10px;
}
.architecture-map p,
.security-grid p,
.assurance p,
.assurance-stack span,
.contact-section p{
  color:#c6d4e8;
  line-height:1.65;
  margin:0;
}
.security-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.security-grid article{
  min-height:268px;
  padding:28px;
}
.security-icon{
  width:60px;
  height:60px;
  border-radius:20px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(38,185,255,.22),rgba(71,124,255,.22) 50%,rgba(239,71,122,.20));
  border:1px solid rgba(126,219,255,.34);
  box-shadow:0 16px 38px rgba(38,185,255,.16),inset 0 1px 0 rgba(255,255,255,.14);
  margin-bottom:22px;
}
.security-icon:before,.security-icon:after{content:"";position:absolute;display:block}
.cipher:before{width:34px;height:26px;border:3px solid #7edbff;border-radius:9px;bottom:13px}
.cipher:after{width:18px;height:18px;border:3px solid #7edbff;border-bottom:0;border-radius:12px 12px 0 0;top:12px}
.tenant:before{width:30px;height:30px;border:3px solid #7edbff;border-radius:8px}
.tenant:after{width:3px;height:38px;background:#ff4f8b;box-shadow:12px 0 0 #37d5f2,-12px 0 0 #37d5f2}
.roles:before{width:28px;height:28px;border:3px solid #7edbff;border-radius:50%;box-shadow:18px 12px 0 -7px #ff4f8b,-18px 12px 0 -7px #37d5f2}
.roles:after{width:34px;height:16px;border-radius:20px 20px 8px 8px;background:rgba(126,219,255,.16);bottom:13px}
.trace:before{width:30px;height:30px;border:3px solid #7edbff;border-radius:8px;transform:rotate(45deg)}
.trace:after{width:10px;height:10px;border-radius:50%;background:#ff4f8b;box-shadow:0 0 18px rgba(255,79,139,.55)}
.shield:before{width:34px;height:38px;background:linear-gradient(180deg,#37d5f2,#477cff);clip-path:polygon(50% 0,90% 15%,82% 72%,50% 100%,18% 72%,10% 15%)}
.shield:after{width:14px;height:8px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg);top:25px}
.backup:before{width:36px;height:36px;border:3px solid #7edbff;border-radius:50%;border-right-color:#ff4f8b}
.backup:after{width:12px;height:12px;border-left:3px solid white;border-bottom:3px solid white;transform:rotate(-45deg);top:24px}
.assurance{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto 94px;
  padding:34px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:start;
}
.assurance h2{margin-bottom:18px}
.assurance-stack{display:grid;gap:14px}
.assurance-stack article{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(130,205,255,.18);
}
.assurance-stack strong{display:block;margin-bottom:6px;color:#fff}
.contact-section{
  width:min(980px,calc(100% - 36px));
  margin:0 auto 60px;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.contact-section p{max-width:620px}
footer{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:30px 0 46px;
  color:#9cb0c8;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
@media(max-width:1040px){
  .hero,.assurance{grid-template-columns:1fr}
  .architecture-map,.security-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  body{overflow-x:hidden}
  .nav{align-items:flex-start;flex-direction:column}
  .nav-actions{width:100%;justify-content:flex-start}
  .nav-actions a:not(.btn){display:none}
  .brand img{width:180px}
  .hero{min-height:auto}
  .hero h1{font-size:3.05rem}
  .security-console{min-height:auto}
  .console-grid,.console-metrics,.trust-strip,.architecture-map,.security-grid{grid-template-columns:1fr}
  .console-top strong{font-size:.62rem;letter-spacing:.12em}
  .contact-section{align-items:flex-start;flex-direction:column;padding:28px}
  .assurance{padding:26px}
}
@media(max-width:560px){
  .nav{width:calc(100% - 28px);padding-top:16px}
  .brand img{width:170px}
  .nav-login{padding:13px 22px!important;font-size:.76rem}
  .hero{width:100%;padding:0 22px;gap:24px}
  .hero-copy{width:100%;max-width:330px}
  .hero h1{font-size:2.02rem;line-height:1;word-break:break-word}
  .lead{font-size:1rem;max-width:330px}
  .security-console{width:100%;max-width:330px;padding:18px;border-radius:24px}
  .console-top{align-items:flex-start;height:auto;min-height:44px}
  .console-top strong{max-width:140px;text-align:right;line-height:1.35;font-size:.55rem}
  .signal-panel h2{font-size:1.7rem}
  .signal-panel{padding:20px}
  .radar{min-height:280px}
}