/* ====== Base polish (unique, not "default tailwind") ====== */
:root{
  --glass: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }

/* Background aurora */
.aurora{
  position:absolute;
  width: 900px;
  height: 900px;
  filter: blur(55px);
  opacity: .55;
  transform: translate3d(0,0,0);
}
.aurora--a{
  left:-280px; top:-260px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.55), transparent 55%),
              radial-gradient(circle at 60% 70%, rgba(16,185,129,.45), transparent 55%),
              radial-gradient(circle at 70% 20%, rgba(99,102,241,.45), transparent 55%);
}
.aurora--b{
  right:-320px; bottom:-300px;
  background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.50), transparent 55%),
              radial-gradient(circle at 65% 70%, rgba(34,211,238,.42), transparent 55%),
              radial-gradient(circle at 30% 80%, rgba(16,185,129,.35), transparent 55%);
}

/* Subtle grid overlay */
.grid-overlay{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 15%, black 0%, transparent 70%);
  opacity:.25;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(16,185,129,.95));
  color: rgba(2,6,23,.98);
  border-color: rgba(255,255,255,.16);
}
.btn-primary:hover{ filter: brightness(1.03); }

.btn-ghost{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.btn-dark{
  background: rgba(15,23,42,.7);
  color: rgba(255,255,255,.92);
}

.navlink{
  color: rgba(226,232,240,.85);
  transition: color .15s ease;
}
.navlink:hover{ color: rgba(255,255,255,.95); }

.text-gradient{
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(99,102,241,1));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.text-gradient-2{
  background: linear-gradient(90deg, rgba(16,185,129,1), rgba(34,211,238,1));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

.dot{
  width:.5rem;height:.5rem;border-radius:999px;display:inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.dot--cyan{ background: rgba(34,211,238,.9); }
.dot--emerald{ background: rgba(16,185,129,.9); }
.dot--indigo{ background: rgba(99,102,241,.9); }

/* Chips */
.chip{
  display:flex; gap:.75rem;
  padding: .85rem .9rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.chip-ico{
  width: 2.2rem; height: 2.2rem;
  border-radius: 1rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

.check{
  width: 1.1rem; height: 1.1rem;
  border-radius: .4rem;
  margin-top: .15rem;
  background: rgba(16,185,129,.18);
  border: 1px solid rgba(16,185,129,.35);
  position: relative;
}
.check:after{
  content:"";
  position:absolute;
  left: 3px; top: 5px;
  width: 6px; height: 3px;
  border-left: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: rotate(-45deg);
}

/* Hero mock */
.card-hero{
  border-radius: 1.75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.card-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
}
.win-dot{ width:.6rem;height:.6rem;border-radius:999px; display:inline-block; }
.pill{
  font-size:.72rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.25);
  color: rgba(226,232,240,.95);
}
.card-hero__body{ padding: 1.1rem; }
.mini-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.mini{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: .8rem;
}
.mini__h{ font-weight: 700; font-size: .9rem; }
.mini__p{ color: rgba(226,232,240,.75); font-size: .8rem; margin-top:.2rem; }

.tag{
  font-size:.72rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(226,232,240,.9);
}

/* Feature cards */
.feature-card{
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 1.2rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
.feature-ico{
  width: 2.8rem; height: 2.8rem;
  border-radius: 1.2rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* Workflow board */
.workflow-board{
  display:grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media(min-width: 1024px){
  .workflow-board{ grid-template-columns: repeat(4, 1fr); }
}
.workflow-col{
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 1rem;
}
.workflow-title{
  font-weight: 700;
  font-size: .9rem;
  color: rgba(226,232,240,.9);
  margin-bottom: .75rem;
}
.workflow-card{
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: .85rem .9rem;
  margin-bottom: .75rem;
}
.workflow-card__h{ font-weight: 700; font-size: .88rem; }
.workflow-card__p{ font-size: .78rem; color: rgba(226,232,240,.72); margin-top:.15rem; }

.step{
  width: 1.6rem; height: 1.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: .7rem;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.22);
  color: rgba(226,232,240,.95);
  font-weight: 700;
  font-size: .8rem;
}

/* Why cards / Serve cards */
.why-card, .serve-card{
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 1.1rem;
}
.why-ico{
  width: 2.6rem; height: 2.6rem;
  border-radius: 1.2rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.why-title{ margin-top: .85rem; font-weight: 800; }
.why-text{ margin-top: .3rem; font-size: .9rem; color: rgba(226,232,240,.75); }
.serve-title{ font-weight: 800; }
.serve-text{ margin-top: .3rem; font-size: .9rem; color: rgba(226,232,240,.75); }

.logo-pill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: .6rem .9rem;
  text-align:center;
  font-size: .85rem;
  color: rgba(226,232,240,.85);
}

/* CTA section */
.cta{
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(16,185,129,.12), rgba(99,102,241,.12));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}

/* Inputs */
.input{
  width: 100%;
  border-radius: 1rem;
  background: rgba(2,6,23,.6);
  border: 1px solid rgba(255,255,255,.12);
  padding: .75rem .9rem;
  outline: none;
  color: rgba(255,255,255,.92);
}
.input:focus{
  border-color: rgba(34,211,238,.35);
  box-shadow: 0 0 0 4px rgba(34,211,238,.10);
}

/* Contact icon container */
.contact-ico{
  width: 2.3rem; height: 2.3rem;
  border-radius: 1rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}