@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0A0A1A;
  --card:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.12);
  --text:#FFFFFF;
  --muted:#AEB4C5;
  --accent:#00D9FF;
  --accent2:#7B2FF7;
  --accent3:#FF3ED8;
  --brand-gradient:linear-gradient(100deg,#00D9FF 0%,#168BFF 36%,#7B2FF7 68%,#FF3ED8 100%);
}

body{
  font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(0,217,255,.12),transparent 32%),
    radial-gradient(circle at 90% 18%,rgba(123,47,247,.14),transparent 32%),
    radial-gradient(circle at 70% 76%,rgba(255,62,216,.07),transparent 28%),
    var(--bg);
}

.orb-a{background:#00D9FF;opacity:.12}
.orb-b{background:#FF3ED8;opacity:.1}

.site-header{
  background:rgba(10,10,26,.76);
  border-color:rgba(255,255,255,.13);
}

.brand img{
  filter:drop-shadow(0 0 16px rgba(0,217,255,.15));
}

.brand strong{
  font-family:Montserrat,sans-serif;
  font-weight:800;
  letter-spacing:.08em;
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand small{
  color:#fff;
  font-family:Montserrat,sans-serif;
  letter-spacing:.32em;
}

.hero{
  padding-top:112px;
}

.brand-signature{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:max-content;
  max-width:100%;
  margin:0 auto 28px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#d7d9e4;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.brand-signature:before{
  content:"";
  width:34px;
  height:2px;
  border-radius:999px;
  background:var(--brand-gradient);
  box-shadow:0 0 18px rgba(0,217,255,.45);
}

.hero h1{
  font-family:Montserrat,sans-serif;
  font-weight:700;
}

.hero h1 span{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-slogan{
  margin:18px auto 0;
  width:max-content;
  max-width:100%;
  color:#f3f4f8;
  font-size:clamp(14px,2vw,18px);
  font-weight:400;
  font-style:italic;
  letter-spacing:.18em;
  position:relative;
  padding-bottom:12px;
}

.brand-slogan:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:var(--brand-gradient);
}

.dot,.live i,.system-status i{
  background:#00D9FF;
  box-shadow:0 0 16px rgba(0,217,255,.7);
}

.button.primary{
  color:#fff;
  background:linear-gradient(110deg,#0676ff,#7B2FF7 62%,#FF3ED8);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 14px 38px rgba(123,47,247,.18);
}

.button.primary:hover{
  box-shadow:0 18px 46px rgba(0,217,255,.15),0 18px 46px rgba(255,62,216,.12);
}

.signal-card:before{
  background:linear-gradient(110deg,transparent 35%,rgba(0,217,255,.08),rgba(123,47,247,.08),transparent 68%);
}

.product-visual{
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(123,47,247,.19),transparent 46%);
  background-size:28px 28px,28px 28px,auto;
}

.product-visual:after{
  border-color:rgba(0,217,255,.16);
  box-shadow:0 0 100px rgba(123,47,247,.12);
}

.tag{
  border-color:rgba(0,217,255,.25);
  background:rgba(0,217,255,.07);
  color:#a7f3ff;
}

.product-note{
  border-left-color:rgba(255,62,216,.4);
}

.text-link span,.principles b{
  color:#00D9FF;
}

.contact-card{
  background:
    radial-gradient(circle at 84% 20%,rgba(255,62,216,.11),transparent 28%),
    radial-gradient(circle at 70% 80%,rgba(0,217,255,.08),transparent 30%),
    rgba(255,255,255,.035);
}

::selection{
  background:#7B2FF7;
  color:#fff;
}

@media(max-width:640px){
  .brand-signature{font-size:9px;letter-spacing:.14em;gap:10px}
  .brand-slogan{letter-spacing:.08em}
}