:root{
  --bg: #050a12;
  --bg-2: #081321;
  --cyan: #4fe3f0;
  --cyan-2: #7ff2ff;
  --cyan-soft: rgba(79,227,240,.55);
  --ink: #eef6f8;
  --muted: #9db0bb;
  --border: rgba(120,220,235,.28);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
}

body{
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  position:relative;
  width:100vw;
  height:100svh;
  min-height:520px;
}

#stars{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.glow{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  z-index:0;
  pointer-events:none;
  opacity:.55;
}
.glow-a{
  width:46vw; height:46vw;
  top:-16vw; left:-10vw;
  background:radial-gradient(circle at 30% 30%, rgba(79,227,240,.35), transparent 70%);
}
.glow-b{
  width:38vw; height:38vw;
  bottom:-14vw; right:-8vw;
  background:radial-gradient(circle at 70% 70%, rgba(28,120,180,.30), transparent 70%);
}

/* --- Page --- */
.page{
  position:relative;
  z-index:2;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: clamp(14px,3vh,36px) clamp(20px,6vw,64px);
  max-width:1200px;
  margin:0 auto;
  gap: clamp(6px, 1.4vh, 16px);
}

/* --- Brand wordmark (styled like the logo) --- */
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  margin-bottom:clamp(2px,0.6vh,6px);
}
.brand-word{
  font-family:'Unbounded', sans-serif;
  font-weight:900;
  font-size:clamp(18px, 4.4vh, 32px);
  letter-spacing:.03em;
  color:var(--ink);
}
.brand-sub{
  margin-top:clamp(2px,0.5vh,5px);
  font-size:clamp(9px, 1.5vh, 12px);
  letter-spacing:.4em;
  font-weight:700;
  color:var(--cyan-2);
  text-shadow:0 0 14px rgba(79,227,240,.55);
}

/* --- Headline --- */
.headline{
  font-family:'Unbounded', sans-serif;
  font-weight:900;
  line-height:.98;
  letter-spacing:-.01em;
  font-size:clamp(26px, 7.5vh, 76px);
}
.headline .line{
  display:block;
  color:var(--ink);
}
.headline .accent{
  background:linear-gradient(100deg, #6ee9f5, #37c6e8 55%, #1fa8d6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(79,227,240,.35));
}

.lede{
  color:var(--muted);
  font-size:clamp(12px, 2vh, 17px);
  line-height:1.4;
  font-weight:400;
  max-width:640px;
}

/* --- CTA --- */
.cta{
  margin-top: clamp(4px, 0.8vh, 10px);
  display:inline-flex;
  align-items:center;
  gap:14px;
  width:fit-content;
  max-width:100%;
  padding: clamp(8px,1.3vh,14px) clamp(14px,2vw,22px);
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(79,227,240,.09), rgba(79,227,240,.03));
  backdrop-filter:blur(6px);
  text-decoration:none;
  color:var(--ink);
  transition:transform .25s ease, box-shadow .35s ease, border-color .25s ease, background .25s ease;
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(220px 80px at var(--mx,20%) 50%, rgba(79,227,240,.25), transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
}
.cta:hover{
  transform:translateY(-2px);
  border-color:rgba(120,220,235,.6);
  box-shadow:0 10px 40px -8px rgba(79,227,240,.35);
}
.cta:hover::before{ opacity:1; }
.cta:active{ transform:translateY(0px) scale(.99); }

.cta-icon{
  width:clamp(32px,4.4vh,44px);
  height:clamp(32px,4.4vh,44px);
  flex:none;
  border-radius:12px;
  background:#eaf9fb;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(79,227,240,.35);
}

.cta-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.12;
}
.cta-text strong{
  font-size:clamp(13px,2vh,18px);
  font-weight:700;
}
.cta-text small{
  font-size:clamp(10px,1.4vh,13px);
  color:var(--cyan-2);
  font-weight:500;
}

.cta-arrow{
  margin-left:clamp(16px,3vw,48px);
  color:var(--cyan-2);
  display:flex;
  transition:transform .3s ease;
}
.cta:hover .cta-arrow{ transform:translateX(6px); }

/* --- Advantages (compact grid) --- */
.advantages{
  margin-top: clamp(8px, 1.6vh, 20px);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap: clamp(6px,1.2vh,12px) clamp(8px,1.6vw,14px);
  max-width:760px;
  width:100%;
  min-width:0;
}
@media (min-width:760px){
  .advantages{ grid-template-columns:repeat(4, minmax(0, 1fr)); max-width:none; }
}

.adv-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding: clamp(7px,1.2vh,12px) clamp(9px,1.4vw,14px);
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(79,227,240,.06), rgba(79,227,240,.015));
  transition:border-color .25s ease, background .25s ease;
}
.adv-card:hover{
  border-color:rgba(120,220,235,.55);
  background:linear-gradient(180deg, rgba(79,227,240,.11), rgba(79,227,240,.03));
}

.adv-icon{
  flex:none;
  width:clamp(28px,4.2vh,38px);
  height:clamp(28px,4.2vh,38px);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cyan-2);
  border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(79,227,240,.16), rgba(79,227,240,.02));
}

.adv-text{ min-width:0; }
.adv-text h3{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(11px,1.6vh,14px);
  color:var(--ink);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.adv-text p{
  color:var(--muted);
  font-size:clamp(9.5px,1.25vh,11.5px);
  line-height:1.3;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* --- Reveal animation --- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--d) * 90ms + 120ms);
}
@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

/* --- Responsive tweaks --- */
@media (max-width: 640px){
  .page{ padding:3vh 6vw; gap:8px; }
  .cta-arrow{ margin-left:auto; }
}

@media (max-width: 360px){
  .adv-card{ gap:8px; padding: 7px 8px; }
  .adv-icon{ width:26px; height:26px; }
  .adv-text h3{ font-size:10.5px; }
  .adv-text p{ font-size:9px; }
}

@media (max-height: 640px){
  .brand-word{ font-size:clamp(15px,3.6vh,24px); }
  .headline{ font-size:clamp(22px,6.4vh,54px); }
  .lede{ font-size:clamp(11px,1.7vh,14px); }
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}