/* ══════════════════════════════════════════
   HOME HERO
══════════════════════════════════════════ */
.home-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--s8) var(--s24);
  position: relative;
  overflow: hidden;
}

.home-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.65; mix-blend-mode: screen; }

.home-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 100%);
}

/* Orbs */
.h-orb {
  position: absolute; border-radius: 50%; filter: blur(110px);
}
.h-orb--1 {
  width: 700px; height: 700px;
  background: rgba(139, 92, 246, 0.08);
  top: -200px; left: -100px;
  animation: orbFloat 10s ease-in-out infinite;
}
.h-orb--2 {
  width: 500px; height: 500px;
  background: rgba(163, 230, 53, 0.06);
  bottom: -100px; right: -80px;
  animation: orbFloat 13s ease-in-out infinite reverse;
}
.h-orb--3 {
  width: 350px; height: 350px;
  background: rgba(0, 229, 255, 0.05);
  top: 40%; right: 15%;
  animation: orbFloat 8s ease-in-out infinite 1.5s;
}

/* Rings */
.home-hero__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.07);
}
.ring--1 { width: 600px; height: 600px; }
.ring--2 { width: 900px; height: 900px; border-color: rgba(139, 92, 246, 0.04); }
.ring--3 { width: 1200px; height: 1200px; border-color: rgba(139, 92, 246, 0.025); }

.home-hero__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.home-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.22);
  padding: 0.38rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: var(--s8);
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--lime);
  border-radius: 50%;
  animation: pulse 2.5s ease-in-out infinite;
}

.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: var(--s6);
}
.home-hero__title-accent {
  background: linear-gradient(135deg, var(--lime) 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-hero__sub {
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: var(--s10);
}

.home-hero__actions {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--s16);
}

/* Stats */
.home-hero__stats {
  display: flex; align-items: center;
  gap: var(--s8); flex-wrap: wrap; justify-content: center;
}
.h-stat { text-align: center; }
.h-stat__n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 800;
  color: #fff; line-height: 1;
}
.h-stat__l {
  display: block;
  font-size: 0.65rem; color: var(--text-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: var(--s1);
}
.h-stat-div {
  width: 1px; height: 44px;
  background: var(--border);
}

/* Hero pills */
.hero-pills {
  position: absolute;
  bottom: var(--s10);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--s3);
  flex-wrap: wrap; justify-content: center;
  z-index: 1;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(5, 6, 8, 0.7);
  backdrop-filter: blur(10px);
  transition: border-color var(--t), color var(--t);
}
.hero-pill--dfn {
  color: var(--dfn-cyan);
  border-color: rgba(0, 229, 255, 0.2);
}
.hero-pill--dfn:hover { border-color: var(--dfn-cyan); }
.hero-pill--soon { color: var(--text-faint); cursor: default; }

.hero-pill__dot {
  width: 6px; height: 6px;
  background: var(--text-faint);
  border-radius: 50%;
}
.hero-pill__dot--live {
  background: var(--lime);
  animation: pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   PRODUCTS SECTION
══════════════════════════════════════════ */
.products-section { padding: var(--s24) var(--s8); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6);
}

/* Product Card */
.prod-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.prod-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.06), transparent 40%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
  border-radius: inherit;
  z-index: 3;
}
.prod-card.is-hovered::before { opacity: 1; }
.prod-card:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }

.prod-card--live {
  border-color: rgba(0, 229, 255, 0.18);
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.05);
}
.prod-card--live:hover { border-color: rgba(0, 229, 255, 0.35); }
.prod-card--soon { opacity: 0.75; }
.prod-card--soon:hover { opacity: 0.9; }

/* Glow layers */
.prod-card__glow {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--r-2xl);
}
.prod-card__glow--dfn {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 229, 255, 0.07) 0%, transparent 70%);
}
.prod-card__glow--vc {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245, 158, 11, 0.07) 0%, transparent 70%);
}

/* Coming overlay */
.prod-card__coming-overlay {
  position: absolute; top: var(--s4); right: var(--s4);
  z-index: 2;
}
.coming-badge {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.3);
  color: var(--future-slate);
}

.prod-card__header {
  display: flex; align-items: flex-start; gap: var(--s5);
}

/* Icons */
.prod-card__icon {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
}
.prod-card__icon--dfn {
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.18);
}
.prod-card__icon--vc {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.18);
}
.prod-card__icon--future {
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.15);
}

/* Badges */
.prod-card__badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--s2);
}
.prod-card__badge--live {
  background: rgba(163, 230, 53, 0.1);
  border: 1px solid rgba(163, 230, 53, 0.25);
  color: var(--lime);
}
.prod-card__badge--soon {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.2);
  color: var(--future-slate);
}
.prod-live-dot {
  width: 5px; height: 5px;
  background: var(--lime); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.prod-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  line-height: 1.1;
}
.prod-card__tagline {
  font-size: 0.8rem; color: var(--text-muted);
  margin-top: var(--s1);
}

.prod-card__desc {
  font-size: 0.85rem; line-height: 1.8;
  color: var(--text-muted);
}

.prod-card__features {
  display: flex; flex-direction: column; gap: var(--s3);
}
.prod-card__features li {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 0.8rem; color: var(--text);
}
.pf-bullet {
  width: 6px; height: 6px;
  background: var(--c, var(--brand));
  border-radius: 50%; flex-shrink: 0;
}

.prod-card__footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.prod-card__price {
  display: flex; align-items: baseline; gap: var(--s2);
}
.price-amount {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 800; color: #fff;
}
.price-amount--muted { color: var(--text-faint); font-size: 1.5rem; }
.price-type { font-size: 0.72rem; color: var(--text-muted); }

/* Placeholder card */
.prod-card--placeholder {
  border-style: dashed;
  border-color: rgba(255,255,255,0.05);
  background: transparent;
  align-items: center; justify-content: center;
  min-height: 200px;
}
.prod-placeholder-inner {
  text-align: center; padding: var(--s8);
}
.prod-placeholder-icon {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--text-faint);
  margin: 0 auto var(--s5);
}
.prod-placeholder-inner h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: var(--text-faint);
  margin-bottom: var(--s2);
}
.prod-placeholder-inner p {
  font-size: 0.78rem; color: var(--text-faint);
  line-height: 1.7;
}
.coming-dots {
  display: flex; gap: var(--s2);
  justify-content: center; margin-top: var(--s5);
}
.coming-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-faint);
}
.coming-dots span:nth-child(1) { animation: pulse 1.5s infinite 0s; }
.coming-dots span:nth-child(2) { animation: pulse 1.5s infinite 0.3s; }
.coming-dots span:nth-child(3) { animation: pulse 1.5s infinite 0.6s; }

/* ══════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════ */
.about-section {
  padding: var(--s24) var(--s8);
  background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.025), transparent);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}
.about-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff; line-height: 1.1;
  letter-spacing: -0.03em;
  margin: var(--s4) 0 var(--s6);
}
.about-desc { font-size: 0.9rem; line-height: 1.85; color: var(--text-muted); }

.about-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  position: relative;
  transition: border-color var(--t), transform var(--t);
}
.about-card::after {
  content: ''; position: absolute; inset: -1px;
  background: linear-gradient(135deg, var(--brand-dim), var(--dfn-dim), var(--lime-dim));
  border-radius: inherit; z-index: -1; opacity: 0; transition: opacity var(--t);
}
.about-card:hover::after { opacity: 1; }
.about-card:hover { border-color: transparent; transform: translateY(-2px); }
.about-card__icon { font-size: 1.5rem; margin-bottom: var(--s3); }
.about-card h4 {
  font-family: var(--font-display);
  font-size: 0.9rem; font-weight: 700;
  color: #fff; margin-bottom: var(--s2);
}
.about-card p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.7; }

/* ══════════════════════════════════════════
   HOME RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .products-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s10); }
}
@media (max-width: 600px) {
  .home-hero__title { font-size: 3rem; }
  .home-hero__actions { flex-direction: column; align-items: stretch; }
  .home-hero__stats { gap: var(--s5); }
  .h-stat-div { height: 30px; }
  .about-cards { grid-template-columns: 1fr; }
  .hero-pills { display: none; }
  .prod-card { padding: var(--s6); }
  .prod-card__footer { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .btn--full-mobile { width: 100%; }
}