/* style.css */
:root{
  --brand:#1b5cff;
  --brand2:#00c2ff;
  --ink:#0b1220;
  --muted:#5c677d;
  --bg:#0b1220;
  --card:#111a2c;
  --soft:#0f1a30;
  --ring: rgba(27,92,255,.25);
}
body{
  color: var(--ink);
  background: #fff;
  overflow-x:hidden;
}

/* ====== Global subtle motion ====== */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ====== Navbar ====== */
.navbar{
  transition: background-color .25s ease, box-shadow .25s ease;
}
.navbar.scrolled{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ====== Hero ====== */
.hero{
  position:relative;
  padding: 5.5rem 0 4rem;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(27,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,194,255,.16), transparent 55%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 65%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1800&q=70") center/cover no-repeat;
  opacity:.12;
  filter: saturate(1.2) contrast(1.05);
  z-index:0;
}
.hero > .container{ position:relative; z-index:1; }

.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  background: rgba(27,92,255,.08);
  border:1px solid rgba(27,92,255,.18);
  color:#1b2a5c;
  font-weight:600;
  font-size:.9rem;
}
.headline{
  letter-spacing:-0.02em;
  line-height:1.1;
}
.lead{
  color: var(--muted);
  max-width: 44rem;
}

/* animated gradient line */
.glow-line{
  height:2px;
  width: 180px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--brand));
  background-size: 200% 100%;
  animation: flow 2.8s linear infinite;
  border-radius:999px;
  opacity:.9;
}
@keyframes flow{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* floating blob */
.blob{
  position:absolute;
  width: 520px;
  height: 520px;
  right:-220px;
  top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(27,92,255,.35), transparent 55%),
              radial-gradient(circle at 70% 40%, rgba(0,194,255,.28), transparent 55%),
              radial-gradient(circle at 40% 75%, rgba(27,92,255,.18), transparent 55%);
  opacity:.9;
  animation: float 7s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(-10px, 18px, 0) rotate(6deg); }
}

/* ====== Hero image card ====== */
.hero-card{
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.12);
  border: 1px solid rgba(27,92,255,.12);
  background:#fff;
  transform: translateZ(0);
}
.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  min-height: 360px;
}
.hero-card .overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.stat-pill{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .7rem;
  border-radius:999px;
  color:#fff;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  font-weight:600;
  font-size:.9rem;
}

/* ====== Section styling ====== */
section{
  padding: 4.5rem 0;
}
.section-title{
  letter-spacing:-0.02em;
}
.section-sub{
  color: var(--muted);
  max-width: 52rem;
}

/* ====== Feature cards ====== */
.feature-card{
  border-radius: 18px;
  border:1px solid rgba(17,26,44,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.10);
}
.icon-badge{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(27,92,255,.08);
  border:1px solid rgba(27,92,255,.18);
  color: var(--brand);
  font-size: 1.25rem;
}

/* ====== Image grid ====== */
.img-tile{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 55px rgba(0,0,0,.08);
  height:100%;
  min-height: 220px;
  transform: translateZ(0);
}
.img-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .7s ease;
}
.img-tile:hover img{ transform: scale(1.06); }
.img-tile .cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 1rem 1rem .9rem;
  color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

/* ====== Dark CTA band ====== */
.cta{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(27,92,255,.35), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,194,255,.30), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  color:#eaf0ff;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cta-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.cta .text-muted{ color: rgba(234,240,255,.7) !important; }

/* ====== Pricing cards ====== */
.price-card{
  border-radius: 20px;
  border:1px solid rgba(17,26,44,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.07);
  overflow:hidden;
  height:100%;
}
.price-card.featured{
  border-color: rgba(27,92,255,.35);
  box-shadow: 0 30px 90px rgba(27,92,255,.18);
  transform: translateY(-4px);
}
.price-head{
  background: linear-gradient(135deg, rgba(27,92,255,.10), rgba(0,194,255,.08));
}

/* ====== Contact ====== */
.contact-card{
  border-radius: 22px;
  border:1px solid rgba(17,26,44,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(17,26,44,.16);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(27,92,255,.5);
  box-shadow: 0 0 0 .25rem var(--ring);
}

/* ====== Footer ====== */
footer{
  border-top:1px solid rgba(0,0,0,.06);
  color: var(--muted);
}

/* small polish */
.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 10px 25px rgba(27,92,255,.22);
}
.btn-primary:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.btn-outline-primary{
  border-color: rgba(27,92,255,.45);
  color: var(--brand);
}

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