:root { color-scheme: light; }
html { font-size: 18px; }
body { font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #F8FAFF; }

.page-glow{
  position: fixed;
  inset: -20vh -20vw auto -20vw;
  height: 70vh;
  z-index: -1;
  background:
    radial-gradient(900px 450px at 20% 30%, rgba(236,72,153,.26), transparent 60%),
    radial-gradient(900px 520px at 55% 10%, rgba(59,130,246,.26), transparent 60%),
    radial-gradient(900px 520px at 85% 40%, rgba(34,197,94,.22), transparent 60%);
  filter: blur(10px);
}

.header-shell{
  background:
    radial-gradient(1200px 300px at 20% 0%, rgba(14,165,233,.26), transparent 55%),
    radial-gradient(900px 260px at 80% 10%, rgba(99,102,241,.24), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border-bottom: 1px solid rgba(226,232,240,1);
  backdrop-filter: blur(10px);
}

.brand-mark{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15,23,42,1), rgba(30,41,59,1));
  color: white;
  box-shadow: 0 10px 30px rgba(15,23,42,.20);
}

.nav-pill{
  padding: .6rem .9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: rgba(15,23,42,.88);
  font-weight: 700;
}
.nav-pill:hover{
  background: rgba(15,23,42,.06);
  border-color: rgba(226,232,240,1);
}

.cta-pill{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15,23,42,1), rgba(30,41,59,1));
  color: white;
  font-weight: 800;
  box-shadow: 0 14px 35px rgba(15,23,42,.18);
  border: 1px solid rgba(15,23,42,.12);
}
.cta-pill:hover{ transform: translateY(-1px); }

.ghost-pill{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,1);
  color: rgba(15,23,42,.9);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.ghost-pill:hover{ background: rgba(255,255,255,.95); }

.icon-btn{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  color: rgba(15,23,42,.9);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.icon-btn:hover{ background: rgba(248,250,252,1); }

.mobile-pill{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  font-weight: 800;
  color: rgba(15,23,42,.9);
}

.drop-panel{
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  min-width: 220px;
  padding: .4rem;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  box-shadow: 0 18px 60px rgba(15,23,42,.12);
}
.drop-link{
  display: flex;
  padding: .75rem .85rem;
  border-radius: 14px;
  font-weight: 800;
  color: rgba(15,23,42,.88);
  border: 1px solid transparent;
}
.drop-link:hover{
  background: rgba(15,23,42,.06);
  border-color: rgba(226,232,240,1);
}

.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(59,130,246,1));
}

.hero-surface{
  border-radius: 30px;
  padding: 28px;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(236,72,153,.35), transparent 55%),
    radial-gradient(900px 520px at 70% 10%, rgba(59,130,246,.35), transparent 55%),
    radial-gradient(900px 520px at 90% 60%, rgba(34,197,94,.30), transparent 58%),
    linear-gradient(135deg, rgba(15,23,42,1), rgba(2,6,23,1));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(2,6,23,.40);
}

.mini-card{
  border-radius: 20px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  padding: 1rem 1.05rem;
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
}
.mini-card-dark{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 20px 70px rgba(0,0,0,.22);
}
.mini-title{ font-weight: 900; color: white; }
.mini-text{ margin-top: .25rem; color: rgba(255,255,255,.75); }

.hero-frame{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  box-shadow: 0 20px 70px rgba(15,23,42,.12);
  padding: 14px;
}
.hero-frame-vivid{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(520px 180px at 25% 0%, rgba(168,85,247,.26), transparent 60%),
    radial-gradient(520px 180px at 80% 25%, rgba(59,130,246,.26), transparent 60%),
    radial-gradient(520px 200px at 70% 90%, rgba(34,197,94,.20), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.hero-grid{ display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.hero-photo{
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  height: 160px;
}
.hero-wide{ grid-column: span 2; height: 170px; }

.float-note{
  position: absolute;
  left: -10px;
  bottom: 16px;
  width: min(320px, 90%);
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(15,23,42,.12);
  padding: 12px 14px;
}
.float-note-2{ left: auto; right: -10px; bottom: 86px; }

.float-note-vivid{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
}
.note-ico{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(226,232,240,1);
  color: rgba(15,23,42,.9);
}
.note-ico-vivid{
  background:
    radial-gradient(30px 30px at 30% 30%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(30px 30px at 80% 20%, rgba(59,130,246,.28), transparent 60%),
    rgba(15,23,42,.06);
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
}
.chip-dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}

.ribbon{ display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px){ .ribbon{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ribbon-item{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
}
.ribbon-dark{ margin-top: 10px; }
.ribbon-item-dark{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(280px 120px at 20% 10%, rgba(236,72,153,.20), transparent 60%),
    radial-gradient(260px 120px at 80% 30%, rgba(59,130,246,.20), transparent 60%),
    rgba(255,255,255,.08);
  color: white;
  box-shadow: 0 20px 70px rgba(0,0,0,.22);
}
.ribbon-item-dark i{ color: rgba(255,255,255,.85); }

.bright-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,1);
  background:
    radial-gradient(260px 120px at 20% 20%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(260px 120px at 80% 20%, rgba(236,72,153,.16), transparent 60%),
    white;
  padding: 14px 16px;
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
}
.bright-ico{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
}

.card{
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  padding: 18px 18px;
  box-shadow: 0 16px 44px rgba(15,23,42,.08);
}
.card-vivid{
  background:
    radial-gradient(280px 140px at 20% 0%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(280px 140px at 80% 20%, rgba(59,130,246,.16), transparent 60%),
    white;
}
.card-top{ display:flex; align-items:center; gap:12px; }

.badge{
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .85rem;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  color: rgba(51,65,85,.92);
  font-weight: 900;
}
.badge-vivid{
  border-color: rgba(59,130,246,.22);
  background: rgba(59,130,246,.10);
  color: rgba(30,41,59,1);
}

.pill-row{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.18);
  padding: 10px 12px;
  color: rgba(255,255,255,.86);
}
.pill-row-light{
  border-color: rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  color: rgba(51,65,85,.92);
}
.pill-row-light i{ color: rgba(34,197,94,1); }

.collection-surface{
  border-radius: 30px;
  padding: 28px;
  background:
    radial-gradient(900px 450px at 15% 10%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(900px 520px at 70% 10%, rgba(59,130,246,.34), transparent 60%),
    radial-gradient(900px 520px at 90% 80%, rgba(236,72,153,.26), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,1), rgba(15,23,42,1));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(2,6,23,.40);
}

.card-glow{
  background:
    radial-gradient(260px 140px at 20% 10%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(260px 140px at 85% 10%, rgba(59,130,246,.16), transparent 60%),
    white;
}

.card-ico{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
}
.card-ico-glow{
  background:
    radial-gradient(26px 26px at 30% 30%, rgba(236,72,153,.20), transparent 60%),
    radial-gradient(26px 26px at 80% 20%, rgba(59,130,246,.20), transparent 60%),
    rgba(248,250,252,1);
}

.tag-light{
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  font-weight: 800;
  color: rgba(51,65,85,.92);
  font-size: .9rem;
}
.tag-neon{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(15,23,42,1);
}

.img-tile{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(226,232,240,1);
  height: 210px;
  box-shadow: 0 16px 44px rgba(15,23,42,.08);
}
.img-cap{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
}
.img-cap-bright{
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(220px 90px at 20% 20%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(220px 90px at 80% 20%, rgba(59,130,246,.22), transparent 60%),
    rgba(255,255,255,.90);
  backdrop-filter: blur(10px);
}
.cap-title{ font-weight: 900; }
.cap-text{ font-size: .92rem; color: rgba(51,65,85,.92); }

.circle-ico{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
}
.circle-ico-dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: white;
}

.form-shell{
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,1);
  background: white;
  padding: 18px 18px;
  box-shadow: 0 20px 70px rgba(15,23,42,.12);
}
.form-shell-vivid{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(700px 260px at 15% 10%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(700px 260px at 70% 10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(700px 300px at 90% 90%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,1), rgba(15,23,42,1));
  box-shadow: 0 30px 90px rgba(2,6,23,.40);
}

.badge-light{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .4rem .75rem;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  font-weight: 900;
  color: rgba(51,65,85,.92);
  font-size: .9rem;
}
.badge-light-dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
}

.field-light{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(248,250,252,1);
  padding: .85rem 1rem;
  outline: none;
  color: rgba(15,23,42,.92);
}
.field-light:focus{
  border-color: rgba(15,23,42,.35);
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
  background: white;
}
.field-dark{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
.field-dark::placeholder{ color: rgba(255,255,255,.65); }
.field-dark:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  background: rgba(255,255,255,.12);
}

.success-ico{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,1);
  background: rgba(34,197,94,.10);
  color: rgba(21,128,61,1);
}

.footer-dark{
  background:
    radial-gradient(900px 320px at 15% 10%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(900px 360px at 70% 10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,1), rgba(15,23,42,1));
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer-link{
  color: rgba(255,255,255,.78);
}
.footer-link:hover{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
}

.chip-footer{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}
.hero-surface{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(2,6,23,.40);
  background: linear-gradient(135deg, rgba(2,6,23,1), rgba(15,23,42,1));
}

.hero-surface-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: .28;
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.02);
}

.hero-surface-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(236,72,153,.38), transparent 58%),
    radial-gradient(900px 520px at 70% 10%, rgba(59,130,246,.38), transparent 58%),
    radial-gradient(900px 520px at 90% 70%, rgba(34,197,94,.26), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.75), rgba(15,23,42,.65));
}

.hero-surface-bg > *{
  position: relative;
  z-index: 1;
}

.hero-point{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}
.hero-point i{
  margin-top: 2px;
  color: rgba(167,243,208,.95);
}

.hero-media{
  position: relative;
  height: 420px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 260px at 70% 10%, rgba(59,130,246,.18), transparent 60%);
  pointer-events: none;
}

.hero-metric{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.90);
  padding: 12px 14px;
  backdrop-filter: blur(10px);
}