/* ============================================================
   Vibgyor.love — Premium LGBTQIA+ Dating & Community
   Photo-led, editorial, emotionally warm. v2
   ============================================================ */

:root {
  --violet: #7c3aed;
  --deep-purple: #4c1d95;
  --magenta: #d6249f;
  --coral: #ff6b6b;
  --pink: #f472b6;
  --blue: #4f7cff;
  --sky: #38bdf8;
  --amber: #fbbf24;

  --ink: #170f2b;
  --ink-soft: #4a4063;
  --muted: #786f93;

  --bg: #fbf8ff;
  --bg-2: #ffffff;
  --card: rgba(255, 255, 255, 0.78);
  --border: rgba(124, 58, 237, 0.12);
  --line: rgba(23, 15, 43, 0.08);

  --grad-spectrum: linear-gradient(120deg, #7c3aed 0%, #d6249f 38%, #ff6b6b 70%, #fbbf24 100%);
  --grad-romantic: linear-gradient(140deg, #4c1d95 0%, #9333ea 32%, #d6249f 66%, #ff8a5b 100%);
  --grad-soft: linear-gradient(135deg, #f3e8ff 0%, #ffe4f1 50%, #fff1e6 100%);
  --grad-button: linear-gradient(100deg, #7c3aed, #d6249f 55%, #ff6b6b);
  --grad-blue: linear-gradient(135deg, #4f7cff, #9333ea);

  --shadow-sm: 0 4px 18px rgba(76, 29, 149, 0.08);
  --shadow-md: 0 18px 50px rgba(76, 29, 149, 0.14);
  --shadow-lg: 0 40px 90px rgba(76, 29, 149, 0.26);
  --shadow-glow: 0 16px 44px rgba(214, 36, 159, 0.42);

  --radius-sm: 16px;
  --radius: 24px;
  --radius-lg: 34px;
  --radius-xl: 44px;
  --radius-pill: 999px;

  --maxw: 1200px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Plus Jakarta Sans', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* soft page glow */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(50% 45% at 95% 12%, rgba(214,36,159,.10), transparent 60%),
    radial-gradient(55% 50% at 80% 95%, rgba(255,107,107,.08), transparent 60%);
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--magenta); background: rgba(214, 36, 159, 0.08);
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
.eyebrow.light { color: #fff; background: rgba(255,255,255,.16); }
.section-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); font-size: 1.12rem; }
.grad-text { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.serif-i { font-style: italic; font-family: var(--font-display); }
section { padding: 96px 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  padding: 16px 32px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; text-decoration: none;
  transition: transform .25s, box-shadow .25s, filter .25s; white-space: nowrap;
}
.btn-primary { color: #fff; background: var(--grad-button); box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 22px 54px rgba(214,36,159,.5); }
.btn-ghost { color: var(--deep-purple); background: rgba(255,255,255,.8); border: 1.5px solid var(--border); backdrop-filter: blur(10px); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--shadow-sm); }
.btn-light { color: var(--deep-purple); background: #fff; box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: .3s; padding: 18px 0; }
.site-header.scrolled { background: rgba(251, 248, 255, 0.82); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 6px 30px rgba(76,29,149,.08); padding: 12px 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.logo .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--grad-spectrum); box-shadow: 0 0 16px rgba(214,36,159,.7); }
.logo span.name { color: var(--ink); } .logo span.tld { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.96rem; position: relative; transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--grad-button); border-radius: 2px; transition: width .25s; }
.nav-links a:hover { color: var(--violet); } .nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; background: rgba(255,255,255,.8); border: 1.5px solid var(--border); width: 48px; height: 48px; border-radius: 14px; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: .3s; }
.menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
.menu-toggle.active span { background: transparent; }
.menu-toggle.active span::before { top: 0; transform: rotate(45deg); } .menu-toggle.active span::after { top: 0; transform: rotate(-45deg); }

/* ---------- HERO ---------- */
.hero { padding-top: 138px; padding-bottom: 70px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(2.9rem, 6.6vw, 5rem); margin-bottom: 24px; }
.hero p.sub { font-size: 1.22rem; color: var(--ink-soft); max-width: 540px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bg); margin-left: -14px; object-fit: cover; box-shadow: var(--shadow-sm); }
.avatars img:first-child { margin-left: 0; }
.hero-proof .proof-txt { font-size: .92rem; color: var(--muted); font-weight: 600; max-width: 230px; line-height: 1.4; }
.hero-proof .proof-txt b { color: var(--ink); }
.hero-proof .stars { color: var(--amber); font-size: .85rem; display: block; }

/* Hero visual: layered photo + phone */
.hero-visual { position: relative; }
.hero-photo {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/5; max-width: 460px; margin-left: auto;
  transform: rotate(2deg);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(76,29,149,.4)); }
.hero-badge {
  position: absolute; z-index: 5; background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 12px 16px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: .88rem;
}
.hero-badge .ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.hb-1 { top: 14px; left: -26px; animation: floaty 5s ease-in-out infinite; }
.hb-1 .ic { background: var(--grad-button); }
.hb-2 { bottom: 80px; right: -30px; animation: floaty 6s ease-in-out infinite; animation-delay: -2s; }
.hb-2 .ic { background: var(--grad-blue); }
.hb-3 { bottom: -14px; left: 6%; animation: floaty 5.5s ease-in-out infinite; animation-delay: -1s; }
.hb-3 .ic { background: linear-gradient(135deg,#10b981,#38bdf8); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ---------- Trust pills ---------- */
.trust { padding: 64px 0; }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-item { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: .98rem; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.trust-item .ti { width: 46px; height: 46px; min-width: 46px; border-radius: 13px; background: var(--grad-soft); display: flex; align-items: center; justify-content: center; color: var(--magenta); font-size: 1.15rem; }

/* ---------- About (photo + copy) ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/2; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo .ribbon { position: absolute; bottom: 18px; left: 18px; right: 18px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-md); }
.about-photo .ribbon .rh { font-weight: 800; font-size: 1.7rem; font-family: var(--font-display); background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about-photo .ribbon small { color: var(--ink-soft); font-size: .82rem; font-weight: 600; }
.about-copy h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 20px; }
.about-copy p { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 16px; }
.identity-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.identity-tags span { padding: 9px 17px; border-radius: 999px; font-weight: 700; font-size: .88rem; background: rgba(124,58,237,.07); color: var(--deep-purple); border: 1px solid var(--border); }

/* ---------- Features ---------- */
.features { background: linear-gradient(180deg, transparent, rgba(243,232,255,.4), transparent); }
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: rgba(214,36,159,.3); }
.card .icon { width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; color: #fff; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.card h3 { font-size: 1.26rem; margin-bottom: 10px; font-family: var(--font); font-weight: 800; }
.card p { color: var(--ink-soft); font-size: .99rem; }
.ic-grad-1{background:var(--grad-button)} .ic-grad-2{background:var(--grad-blue)} .ic-grad-3{background:linear-gradient(135deg,#ff6b6b,#fbbf24)} .ic-grad-4{background:linear-gradient(135deg,#10b981,#38bdf8)} .ic-grad-5{background:linear-gradient(135deg,#9333ea,#d6249f)} .ic-grad-6{background:linear-gradient(135deg,#4f7cff,#38bdf8)} .ic-grad-7{background:linear-gradient(135deg,#f472b6,#7c3aed)}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { position: relative; padding: 34px 24px 30px; background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .3s; }
.step:hover { transform: translateY(-6px); }
.step .num { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 17px; background: var(--grad-button); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); }
.step h3 { font-size: 1.16rem; margin-bottom: 8px; font-family: var(--font); font-weight: 800; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Safety ---------- */
.safety-wrap { background: var(--grad-romantic); border-radius: var(--radius-xl); padding: 66px clamp(26px, 5vw, 70px); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.safety-wrap::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 82% 14%, rgba(255,255,255,.16), transparent 50%); pointer-events:none; }
.safety-wrap h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 14px; max-width: 640px; }
.safety-lead { color: rgba(255,255,255,.9); max-width: 600px; margin-bottom: 40px; font-size: 1.12rem; }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 2; }
.safety-item { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; transition: background .25s, transform .25s; }
.safety-item:hover { background: rgba(255,255,255,.18); transform: translateY(-4px); }
.safety-item .si { font-size: 1.35rem; min-width: 28px; }
.safety-item h4 { font-family: var(--font); font-weight: 800; font-size: 1.04rem; margin-bottom: 5px; }
.safety-item p { color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.5; }
.age-note { margin-top: 34px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.16); padding: 13px 24px; border-radius: 999px; font-weight: 700; position: relative; z-index: 2; }

/* ---------- Community ---------- */
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.comm-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; position: relative; }
.comm-photo img { width: 100%; height: 100%; object-fit: cover; }
.comm-list { display: flex; flex-direction: column; gap: 12px; }
.comm-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.comm-row:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.comm-row .ci { width: 50px; height: 50px; min-width: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; box-shadow: var(--shadow-sm); }
.comm-row h4 { font-family: var(--font); font-weight: 800; font-size: 1.08rem; margin-bottom: 3px; }
.comm-row p { color: var(--ink-soft); font-size: .94rem; }

/* ---------- App preview screens (real photos in phones) ---------- */
.preview { background: linear-gradient(180deg, transparent, rgba(255,228,241,.35), transparent); }
.screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: end; }
.phone-mini { background: linear-gradient(160deg,#241640,#150e29); border-radius: 34px; padding: 9px; box-shadow: var(--shadow-lg); transition: transform .35s; }
.phone-mini:hover { transform: translateY(-12px); }
.phone-mini:nth-child(even) { transform: translateY(-18px); }
.phone-mini:nth-child(even):hover { transform: translateY(-30px); }
.pm-screen { border-radius: 26px; overflow: hidden; background: #fff; position: relative; }
.pm-photo { position: relative; aspect-ratio: 3/4; }
.pm-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm-photo .grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(23,15,43,.82)); }
.pm-photo .badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pm-photo .verified { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--violet); padding: 4px 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.chip { background: rgba(255,255,255,.24); backdrop-filter: blur(6px); padding: 4px 11px; border-radius: 999px; font-size: .66rem; font-weight: 700; color: #fff; }
.pm-photo .meta { position: absolute; bottom: 14px; left: 14px; right: 14px; color: #fff; }
.pm-photo .meta h4 { font-family: var(--font); font-weight: 800; font-size: 1.1rem; }
.pm-photo .meta small { opacity: .9; font-size: .76rem; }
.pm-actions { display: flex; justify-content: center; gap: 12px; padding: 14px 0 16px; background: #fff; }
.pm-actions button { width: 44px; height: 44px; border-radius: 50%; border: none; background: #f4eeff; box-shadow: var(--shadow-sm); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pm-actions .like { background: var(--grad-button); color: #fff; width: 54px; height: 54px; } .pm-actions .pass { color: var(--muted); } .pm-actions .star { color: var(--amber); }
/* chat & community variants */
.pm-body { background: #fff; padding: 16px 14px 18px; min-height: 360px; }
.pm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pm-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pm-head b { font-size: .9rem; display: block; } .pm-head small { color: #22c55e; font-size: .72rem; font-weight: 700; }
.bubble { padding: 10px 13px; border-radius: 15px; font-size: .82rem; margin-bottom: 9px; max-width: 86%; line-height: 1.4; }
.bubble.them { background: #f3e8ff; color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.me { background: var(--grad-button); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.comm-pill { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: #faf5ff; margin-bottom: 9px; font-size: .85rem; font-weight: 700; }
.comm-pill small { display:block; color: var(--muted); font-weight: 600; font-size: .72rem; }
.comm-pill .cp { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; }
.match-pop { text-align: center; padding: 30px 8px; }
.match-pop .ph { display: flex; justify-content: center; margin-bottom: 14px; }
.match-pop .ph img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.match-pop .ph img:nth-child(2) { margin-left: -18px; }
.match-pop b { display: block; font-size: 1.2rem; margin: 6px 0; font-family: var(--font-display); background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.match-pop small { color: var(--muted); font-size: .8rem; }
.match-pop .hi { margin-top: 16px; display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--grad-button); color: #fff; font-weight: 700; font-size: .82rem; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: transform .3s; }
.testi:hover { transform: translateY(-6px); }
.testi .stars { color: var(--amber); font-size: .9rem; margin-bottom: 14px; }
.testi p { color: var(--ink); font-size: 1.08rem; margin-bottom: 22px; font-family: var(--font-display); font-style: italic; line-height: 1.5; }
.testi .who { display: flex; align-items: center; gap: 13px; }
.testi .who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi .who b { font-size: .96rem; display: block; } .testi .who small { color: var(--muted); }

/* ---------- Waitlist ---------- */
.waitlist-wrap { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 0.92fr 1.08fr; background: var(--bg-2); border: 1px solid var(--border); }
.waitlist-left { background: var(--grad-romantic); color: #fff; padding: 54px clamp(28px,4vw,48px); position: relative; overflow: hidden; }
.waitlist-left::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 18% 82%, rgba(255,255,255,.2), transparent 55%); }
.waitlist-left h2 { color: #fff; font-size: clamp(1.9rem,4vw,2.7rem); margin-bottom: 14px; position: relative; }
.waitlist-left p { color: rgba(255,255,255,.92); position: relative; margin-bottom: 28px; }
.wl-perks { list-style: none; position: relative; }
.wl-perks li { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font-weight: 600; }
.wl-perks li i { font-style: normal; background: rgba(255,255,255,.22); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.waitlist-form { padding: 54px clamp(28px,4vw,48px); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.form-group input, .form-group select { width: 100%; padding: 15px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: #fff; font-family: var(--font); font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
.form-group .err { color: #e11d6b; font-size: .82rem; margin-top: 6px; display: none; }
.form-group.invalid input, .form-group.invalid select { border-color: #e11d6b; }
.form-group.invalid .err { display: block; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 14px; text-align: center; }
.form-success { display: none; text-align: center; padding: 36px 10px; }
.form-success.show { display: block; }
.form-success .check { width: 74px; height: 74px; border-radius: 50%; background: var(--grad-button); color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: var(--shadow-glow); }
.form-success h3 { font-family: var(--font); font-weight: 800; margin-bottom: 8px; }
.form-success p { color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; transition: box-shadow .25s; }
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 24px 26px; font-family: var(--font); font-weight: 700; font-size: 1.06rem; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .plus { font-size: 1.5rem; color: var(--magenta); transition: transform .3s; min-width: 20px; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0 26px; }
.faq-item.open .faq-a { max-height: 340px; padding: 0 26px 24px; }
.faq-a p { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, #170f2b, #0d0819); color: #fff; padding: 72px 0 32px; margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 48px; }
.footer-brand .logo { color: #fff; margin-bottom: 14px; }
.footer-brand .logo span.name { color: #fff; }
.footer-brand p { color: rgba(255,255,255,.6); max-width: 290px; }
.footer-tag { font-family: var(--font-display); font-size: 1.1rem; margin: 14px 0; background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.footer-col h4 { font-family: var(--font); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.footer-col a { display: block; color: rgba(255,255,255,.72); text-decoration: none; margin-bottom: 12px; font-size: .95rem; transition: color .2s, transform .2s; }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: .25s; }
.socials a:hover { background: var(--grad-button); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { color: rgba(255,255,255,.5); font-size: .88rem; }
.footer-bottom .age-pill { background: rgba(255,255,255,.1); padding: 8px 18px; border-radius: 999px; font-size: .82rem; font-weight: 700; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid, .about-grid, .comm-grid, .waitlist-wrap { grid-template-columns: 1fr; }
  .grid-cards, .safety-grid, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .screens { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 120px; text-align: center; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .hero-photo { transform: none; margin: 0 auto; }
  .hb-1, .hb-2, .hb-3 { display: none; }
  .about-copy { order: 2; } .comm-photo { order: -1; }
  .waitlist-left { order: 2; }
  .phone-mini:nth-child(even) { transform: none; }
}
@media (max-width: 640px) {
  section { padding: 68px 0; }
  .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: 80%; max-width: 330px; background: rgba(251,248,255,.97); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; gap: 30px; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: -20px 0 60px rgba(76,29,149,.18); z-index: 99; padding: 40px; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.25rem; }
  .menu-toggle { display: flex; }
  .nav-cta .btn-waitlist-top { display: none; }
  .grid-cards, .safety-grid, .testi-grid, .steps, .trust-inner, .screens, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .phone-mini { max-width: 280px; margin: 0 auto; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } .hero-photo { transform: none; } }

/* ============================================================
   v3 — Alive: 3D, motion, moments
   ============================================================ */

/* Animated gradient mesh background (replaces static glow) */
body::before {
  background:
    radial-gradient(45% 40% at 12% 8%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(40% 38% at 92% 14%, rgba(214,36,159,.15), transparent 60%),
    radial-gradient(48% 42% at 82% 92%, rgba(255,107,107,.13), transparent 60%),
    radial-gradient(40% 38% at 8% 88%, rgba(79,124,255,.12), transparent 60%);
  background-size: 200% 200%;
  animation: meshShift 22s ease-in-out infinite;
}
@keyframes meshShift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
  50% { background-position: 20% 15%, 80% 10%, 85% 90%, 10% 85%; }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: var(--grad-spectrum); z-index: 200; border-radius: 0 4px 4px 0;
  box-shadow: 0 0 14px rgba(214,36,159,.6); transition: width .1s linear;
}

/* Magnetic buttons */
.magnetic { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s; will-change: transform; }

/* 3D tilt cards */
.tilt { transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; will-change: transform; }
.tilt > * { transform: translateZ(0); }

/* ---------- HERO 3D PHONE + SWIPE DECK ---------- */
.hero-stage { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1400px; min-height: 600px; }
.phone3d { position: relative; transform-style: preserve-3d; animation: phoneIn 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(40px) rotateX(20deg) rotateY(-14deg) scale(.92); } to { opacity: 1; transform: translateY(0) rotateX(6deg) rotateY(-10deg); } }
.phone3d-frame {
  position: relative; width: 312px; height: 636px; border-radius: 50px;
  background: linear-gradient(155deg, #2a1b4a, #150e29 70%); padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255,255,255,.06) inset, 0 2px 0 rgba(255,255,255,.12) inset;
  transform: rotateX(6deg) rotateY(-10deg); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.hero-stage:hover .phone3d-frame { transform: rotateX(2deg) rotateY(-4deg); }
.phone3d-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 116px; height: 26px; background: #0d0819; border-radius: 0 0 16px 16px; z-index: 6; }
.phone3d-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--grad-soft); transform: translateZ(1px); }
.phone3d-glow { position: absolute; inset: -40px; z-index: -1; background: var(--grad-spectrum); filter: blur(70px); opacity: .35; border-radius: 60px; animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: .28; transform: scale(.96); } 50% { opacity: .45; transform: scale(1.04); } }

.swipe-app { height: 100%; display: flex; flex-direction: column; padding: 44px 16px 18px; }
.swipe-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sa-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.sa-logo b { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sa-bell { width: 34px; height: 34px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--magenta); box-shadow: var(--shadow-sm); }

.swipe-deck { position: relative; flex: 1; }
.swipe-card {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-md); background: #ddd;
  transform-origin: bottom center;
  transform: translateY(calc(var(--i) * 8px)) scale(calc(1 - var(--i) * 0.04));
  opacity: 1; transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .45s;
  z-index: calc(10 - var(--i));
}
.swipe-card[style*="--i:3"], .swipe-card:nth-child(n+4) { opacity: 0; }
.swipe-card img { width: 100%; height: 100%; object-fit: cover; }
.swipe-card .sc-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(23,15,43,.86)); }
.sc-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.sc-verified { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.92); color: var(--violet); padding: 4px 10px; border-radius: 999px; font-size: .66rem; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.sc-meta { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #fff; }
.sc-meta h4 { font-family: var(--font); font-weight: 800; font-size: 1.3rem; }
.sc-meta span { font-size: .82rem; opacity: .92; }
.sc-stamp { position: absolute; top: 30px; font-family: var(--font); font-weight: 900; font-size: 1.5rem; letter-spacing: .08em; padding: 6px 14px; border-radius: 12px; border: 3px solid; opacity: 0; transition: opacity .2s; }
.like-stamp { left: 18px; color: #22c55e; border-color: #22c55e; transform: rotate(-16deg); }
.nope-stamp { right: 18px; color: #ef4444; border-color: #ef4444; transform: rotate(16deg); }
.swipe-card.fly-right { transform: translateX(140%) rotate(22deg) !important; opacity: 0; }
.swipe-card.fly-left { transform: translateX(-140%) rotate(-22deg) !important; opacity: 0; }
.swipe-card.fly-right .like-stamp { opacity: 1; }
.swipe-card.fly-left .nope-stamp { opacity: 1; }

.swipe-actions { display: flex; justify-content: center; gap: 14px; padding: 16px 0 4px; }
.sw-btn { width: 50px; height: 50px; border-radius: 50%; border: none; background: #fff; box-shadow: var(--shadow-md); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.sw-btn:hover { transform: scale(1.12); }
.sw-btn:active { transform: scale(.92); }
.sw-btn.like { background: var(--grad-button); color: #fff; width: 60px; height: 60px; font-size: 1.4rem; }
.sw-btn.pass { color: var(--muted); } .sw-btn.star { color: var(--amber); }

/* Match celebration overlay */
.match-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(76,29,149,.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 20; }
.match-overlay.show { opacity: 1; }
.mo-burst { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: var(--grad-spectrum); filter: blur(30px); opacity: .6; animation: burst 1.2s ease-out infinite; }
@keyframes burst { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.mo-hearts { display: flex; gap: 4px; font-size: 1.8rem; margin-bottom: 10px; position: relative; }
.mo-hearts span { animation: pop .6s ease-out both; }
.mo-hearts span:nth-child(2){animation-delay:.08s} .mo-hearts span:nth-child(3){animation-delay:.16s} .mo-hearts span:nth-child(4){animation-delay:.24s} .mo-hearts span:nth-child(5){animation-delay:.32s}
@keyframes pop { 0% { transform: scale(0) translateY(10px); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.mo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #fff; position: relative; }
.mo-sub { color: rgba(255,255,255,.9); font-size: .9rem; position: relative; }

/* About stats counters */
.about-stats { position: absolute; bottom: 18px; left: 18px; right: 18px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-radius: 20px; padding: 18px; display: flex; justify-content: space-around; box-shadow: var(--shadow-md); }
.about-stats .stat { text-align: center; }
.about-stats .stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; line-height: 1; }
.about-stats .stat small { color: var(--ink-soft); font-size: .76rem; font-weight: 600; }

/* Floating decorative orbs */
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(1px); opacity: .55; }

/* heartbeat icon in section heads on hover */
.card:hover .icon, .comm-row:hover .ci { animation: beat .6s ease; }
@keyframes beat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } }

/* Reveal: add scale + blur for richer entrance */
.reveal { filter: blur(6px); }
.reveal.visible { filter: blur(0); }

@media (max-width: 1000px) {
  .hero-stage { min-height: 560px; }
  .phone3d-frame { transform: rotateX(4deg) rotateY(0deg); }
  @keyframes phoneIn { from { opacity: 0; transform: translateY(40px) scale(.92);} to { opacity:1; transform:translateY(0);} }
}
@media (max-width: 640px) {
  .phone3d-frame { width: 280px; height: 572px; }
  .about-stats .stat-num { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  .phone3d, .phone3d-glow, .mo-burst, .mo-hearts span { animation: none !important; }
  .reveal { filter: none !important; }
}

/* ============================================================
   v4 — Brand assets: animated V logo + rainbow
   ============================================================ */

/* Logo mark (V) in header & footer */
.logo-mark { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(214,36,159,.35)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.12); }
.site-footer .logo-mark { width: 32px; height: 32px; filter: drop-shadow(0 2px 8px rgba(255,255,255,.25)); }

/* Hero rainbow behind the headline copy */
.hero-rainbow {
  position: absolute; top: -36px; left: -30px; width: 230px; opacity: 0; pointer-events: none; z-index: -1;
  filter: drop-shadow(0 8px 20px rgba(124,58,237,.2));
  animation: rainbowRise 1.4s cubic-bezier(.2,.8,.2,1) .3s forwards, rainbowFloat 7s ease-in-out 1.7s infinite;
}
@keyframes rainbowRise { from { opacity: 0; transform: translateY(26px) scale(.9) rotate(-6deg); } to { opacity: .9; transform: translateY(0) scale(1) rotate(0); } }
@keyframes rainbowFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* Rainbow arcing over the phone in the hero stage */
.stage-rainbow {
  position: absolute; top: 2%; left: 50%; width: 380px; max-width: 92%;
  transform: translateX(-50%) scale(.9); transform-origin: bottom center;
  opacity: 0; pointer-events: none; z-index: 1;
  animation: arcDraw 1.6s cubic-bezier(.2,.8,.2,1) .6s forwards, arcSway 9s ease-in-out 2.2s infinite;
  filter: drop-shadow(0 10px 26px rgba(214,36,159,.28));
}
@keyframes arcDraw { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateX(-50%) scale(.86); } to { opacity: .95; clip-path: inset(0 0 0 0); transform: translateX(-50%) scale(1); } }
@keyframes arcSway { 0%,100% { transform: translateX(-50%) translateY(0) rotate(0); } 50% { transform: translateX(-50%) translateY(-8px) rotate(1.5deg); } }

/* Rainbow inside waitlist panel */
.waitlist-left { position: relative; }
.wl-rainbow { position: absolute; top: -28px; right: -24px; width: 180px; opacity: .85; pointer-events: none; z-index: 0; animation: rainbowFloat 8s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(0,0,0,.2)); }
.waitlist-left h2, .waitlist-left p, .wl-perks { position: relative; z-index: 1; }

/* ---------- Brand intro loader ---------- */
.brand-loader {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2a1b4a, #150e29 75%);
  transition: opacity .6s ease, visibility .6s;
}
.brand-loader.hidden { opacity: 0; visibility: hidden; }
.bl-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.bl-v { width: 96px; height: auto; filter: drop-shadow(0 8px 30px rgba(214,36,159,.55)); animation: vPop 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vPop { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.bl-rainbow {
  position: absolute; top: -42px; width: 190px; opacity: 0;
  animation: blArc 1s cubic-bezier(.2,.8,.2,1) .5s forwards;
  filter: drop-shadow(0 6px 20px rgba(124,58,237,.5));
}
@keyframes blArc { from { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(14px) scale(.9); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); } }
.bl-name { margin-top: 22px; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: #fff; opacity: 0; animation: blFade .7s ease .9s forwards; letter-spacing: -.02em; }
.bl-name span { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes blFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
  .hero-rainbow { top: -20px; left: 50%; transform: translateX(-50%); width: 200px; }
  @keyframes rainbowRise { from { opacity:0; transform: translateX(-50%) translateY(26px) scale(.9);} to { opacity:.85; transform: translateX(-50%) translateY(0) scale(1);} }
  @keyframes rainbowFloat { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10px)} }
}
@media (max-width: 640px) {
  .stage-rainbow { width: 300px; }
  .wl-rainbow { width: 130px; top: -18px; right: -10px; }
  .bl-v { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rainbow, .stage-rainbow, .wl-rainbow, .bl-v, .bl-rainbow, .bl-name { animation: none !important; opacity: .9 !important; clip-path: none !important; }
  .hero-rainbow, .stage-rainbow { opacity: .85 !important; }
}

/* ============================================================
   v5 — India rebrand: store buttons, identity spectrum,
   why-india, comparison table, city pills
   ============================================================ */

/* App store buttons */
.store-buttons { display:flex; gap:14px; flex-wrap:wrap; margin: 6px 0 26px; }
.store-btn {
  display:inline-flex; align-items:center; gap:12px;
  padding: 11px 20px 11px 18px; border-radius: 16px;
  background:#170f2b; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease;
}
.store-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.store-btn i { font-size: 1.7rem; line-height:1; }
.store-btn span { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-btn small { font-size:.66rem; opacity:.78; letter-spacing:.02em; text-transform:uppercase; }
.store-btn b { font-size:1.02rem; font-weight:700; }
.store-buttons-light .store-btn { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border-color: rgba(255,255,255,.25); }

/* Who it's for — identity spectrum */
.who { padding: 92px 0; }
.identity-grid {
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 12px;
}
.id-card {
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.id-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.id-letter {
  display:inline-grid; place-items:center; width: 56px; height: 56px; border-radius: 18px;
  font-family:'Fraunces',serif; font-weight:700; font-size: 1.9rem; color:#fff;
  margin-bottom: 16px; box-shadow: var(--shadow-glow);
}
.idl-1 { background: linear-gradient(135deg,#7c3aed,#9333ea); }
.idl-2 { background: linear-gradient(135deg,#9333ea,#d6249f); }
.idl-3 { background: linear-gradient(135deg,#d6249f,#f472b6); }
.idl-4 { background: linear-gradient(135deg,#f472b6,#ff6b6b); }
.idl-5 { background: linear-gradient(135deg,#ff6b6b,#ff8a5b); }
.idl-6 { background: linear-gradient(135deg,#ff8a5b,#fbbf24); }
.idl-7 { background: linear-gradient(135deg,#fbbf24,#38bdf8); }
.idl-8 { background: linear-gradient(135deg,#38bdf8,#7c3aed); }
.id-card h4 { font-family:'Fraunces',serif; font-size: 1.15rem; margin-bottom: 6px; color:var(--ink); }
.id-card p { font-size: .92rem; color: var(--muted); line-height:1.55; }

/* Why India needs Vibgyor */
.why-india { padding: 92px 0; background: var(--grad-soft); }
.why-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 12px; }
.why-card {
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:12px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-prob { font-weight:700; color:#b4275f; font-size:1.02rem; display:flex; align-items:center; gap:8px; }
.why-prob i { color:#e23b6d; }
.why-card p { font-size:.9rem; color:var(--muted); line-height:1.55; flex:1; }
.why-sol { font-size:.9rem; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:12px; display:flex; align-items:flex-start; gap:8px; }
.why-sol i { color:#16a34a; margin-top:2px; }
.why-sol b { color:var(--ink); }

/* Comparison table */
.compare { padding: 92px 0; }
.compare-wrap { overflow-x:auto; border-radius: var(--radius); box-shadow: var(--shadow-md); border:1px solid var(--border); background:#fff; }
.compare-table { width:100%; min-width: 720px; border-collapse: collapse; font-size:.94rem; }
.compare-table th, .compare-table td { padding: 16px 14px; text-align:center; border-bottom:1px solid var(--line); }
.compare-table thead th { background: var(--grad-soft); font-weight:700; color:var(--ink); font-size:.9rem; }
.compare-table tbody th[scope="row"] { text-align:left; font-weight:600; color:var(--ink-soft); }
.compare-table .col-vib { background: rgba(124,58,237,.07); }
.compare-table thead th.col-vib { background: var(--grad-button); color:#fff; }
.compare-table .yes { color:#16a34a; font-size:1.05rem; }
.compare-table .no { color:#d1496f; font-size:1.05rem; opacity:.7; }
.compare-table .part { color:#c2862a; font-size:.78rem; font-weight:600; }
.compare-table .no-txt { color:var(--muted); font-size:.78rem; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom:none; }

/* City quick links */
.cities { padding: 92px 0; background: var(--grad-soft); }
.city-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 8px; }
.city-pill {
  display:inline-flex; align-items:center; gap:8px; padding: 11px 20px; border-radius:999px;
  background:#fff; border:1px solid var(--border); color:var(--ink-soft); font-weight:600;
  text-decoration:none; box-shadow: var(--shadow-sm); transition: all .25s ease;
}
.city-pill::before { content:"\f3c5"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--magenta); font-size:.82rem; }
.city-pill:hover { transform: translateY(-3px); background: var(--grad-button); color:#fff; box-shadow: var(--shadow-glow); }
.city-pill:hover::before { color:#fff; }

/* 5-up testimonials */
.testi-grid-5 { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }

/* Download form title */
.wl-form-title { font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:14px; color:var(--ink); }

@media (max-width: 980px) {
  .identity-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: repeat(2,1fr); }
  .testi-grid-5 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .identity-grid, .why-grid, .testi-grid-5 { grid-template-columns: 1fr; }
  .store-btn { flex:1; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .id-card, .why-card, .city-pill, .store-btn { transition:none !important; }
}

/* ============================================================
   v6 — Homepage video / experience section
   ============================================================ */
.video-section { padding: 92px 0; }
.video-frame {
  position: relative;
  margin: 8px auto 0;
  max-width: 1040px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  background: #170f2b;
}
.video-frame::after {
  /* spectrum glow ring */
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad-spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; pointer-events: none;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 6s ease;
}
.video-frame:hover .hero-video { transform: scale(1.04); }
.video-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(76,29,149,.55), transparent 60%),
    linear-gradient(180deg, rgba(23,15,43,.12) 0%, rgba(23,15,43,0) 30%, rgba(23,15,43,.45) 100%);
  pointer-events: none;
}
.video-toggle {
  position: absolute; inset: 0; margin: auto;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(214,36,159,.5), inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .3s ease, background .3s ease, opacity .4s ease;
}
.video-toggle::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: var(--grad-button); opacity: .9; z-index: -1;
  animation: vtPulse 2.6s ease-out infinite;
}
.video-toggle i { font-size: 1.7rem; margin-left: 5px; }
.video-toggle:hover { transform: scale(1.08); }
.video-toggle.is-playing { opacity: 0; pointer-events: none; }
.video-frame:hover .video-toggle.is-playing { opacity: .35; pointer-events: auto; }
.video-frame:hover .video-toggle.is-playing i { margin-left: 0; }
@keyframes vtPulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.video-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 28px 26px 22px;
  color: rgba(255,255,255,.95);
  font-weight: 600; font-size: .98rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.vc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: vcPing 1.8s ease-out infinite; flex: none;
}
@keyframes vcPing { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 70%{box-shadow:0 0 0 9px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }

@media (max-width: 640px) {
  .video-toggle { width: 70px; height: 70px; }
  .video-toggle i { font-size: 1.4rem; }
  .video-caption { font-size: .85rem; padding: 20px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video, .video-frame:hover .hero-video { transition: none !important; transform: none !important; }
  .video-toggle::before, .vc-dot { animation: none !important; }
}