/* =========================================================
   Loan Venture Point — Shared Stylesheet
   Used by: index, about, service, newsletter, unsubscribe,
            contact, privacy-policy, terms-conditions
   ========================================================= */

:root {
  --bg: #160B17;
  --bg2: #261027;
  --surface: rgba(255, 255, 255, .04);
  --line: rgba(255, 255, 255, .08);
  --ink: #FFF0F6;
  --mute: #B99AAA;
  --aur1: #D9468C;
  --aur2: #F28AB8;
  --aur3: #A855A0;
  --aur4: #E6A1C5;
  --glass: rgba(255, 255, 255, .06);
  --grad-aurora: linear-gradient(135deg, #D9468C 0%, #F28AB8 50%, #A855A0 100%);
  --grad-pink: linear-gradient(135deg, #F28AB8, #A855A0);
  --grad-cyan: linear-gradient(135deg, #E6A1C5, #D9468C);
}

* { box-sizing: border-box }

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth
}

h1, h2, h3, h4, .serif {
  font-family: 'Fraunces', serif;
  letter-spacing: -.02em;
  font-weight: 700
}

a { text-decoration: none; color: inherit }

.container-xl {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px
}

/* ---------- ambient aurora ---------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden
}

.aurora-bg::before,
.aurora-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .35
}

.aurora-bg::before {
  width: 700px;
  height: 700px;
  background: var(--aur1);
  top: -200px;
  left: -150px;
  animation: drift 22s ease-in-out infinite
}

.aurora-bg::after {
  width: 600px;
  height: 600px;
  background: var(--aur2);
  bottom: -200px;
  right: -100px;
  animation: drift 26s ease-in-out infinite reverse
}

.aurora-bg .b3 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: var(--aur3);
  border-radius: 50%;
  filter: blur(140px);
  opacity: .2;
  top: 40%;
  left: 40%;
  animation: drift 30s ease-in-out infinite
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1) }
  50% { transform: translate(80px, -40px) scale(1.15) }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")
}

/* ---------- NAV ---------- */
.nav-wrap {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  justify-content: center;
  padding: 0 20px
}

.nav-pill {
  background: rgba(10, 15, 30, .65);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px 10px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6)
}

.brand {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.3rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.nav-links { display: flex; gap: 22px }

.nav-links a {
  color: var(--mute);
  font-size: .88rem;
  font-weight: 500;
  transition: .2s
}

.nav-links a:hover,
.nav-links a.active { color: #fff }

.nav-cta {
  background: var(--grad-aurora);
  color: #05070d;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  border: none
}

.nav-cta a { color: #05070d }

@media(max-width:900px) {
  .nav-links { display: none }
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  padding: 160px 0 100px;
  position: relative;
  display: flex;
  align-items: center
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
  width: 100%
}

@media(max-width:980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #22d3ee;
  font-weight: 600
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 12px #34d399;
  animation: pulse 2s ease-in-out infinite
}

@keyframes pulse { 50% { opacity: .4 } }

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  line-height: 1;
  margin: 24px 0
}

.hero h1 .grad {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 900
}

.hero .lead {
  color: var(--mute);
  font-size: .9rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 36px
}

.btn-aur {
  background: var(--grad-aurora);
  color: #05070d;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  box-shadow: 0 20px 50px -15px rgba(124, 58, 237, .6);
  transition: .3s;
  cursor: pointer;
}

.btn-aur:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -15px rgba(124, 58, 237, .8)
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 12px;
  transition: .3s;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: #22d3ee;
  color: #22d3ee
}

.hero-trust {
  margin-top: 60px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap
}

.hero-trust div strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero-trust div span {
  color: var(--mute);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em
}

/* hero visual orbital rings */
.orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 520px;
  margin: 0 auto
}

.orbit .ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: 50%;
  animation: spin 40s linear infinite
}

.orbit .ring.r2 { inset: 12%; animation-duration: 28s; animation-direction: reverse }
.orbit .ring.r3 { inset: 24%; animation-duration: 18s }

@keyframes spin { to { transform: rotate(360deg) } }

.orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
}

.orb-core i { font-size: 4rem; color: #fff; }

.orb-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--grad-aurora);
  filter: blur(40px);
  opacity: .7
}

.orb-badge {
  position: absolute;
  background: rgba(10, 15, 30, .85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 16px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 10px
}

.orb-badge i { color: #22d3ee }

.orb-badge strong {
  display: block;
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem
}

.orb-badge span {
  color: var(--mute);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em
}

.ob1 { top: 5%; left: -5% }
.ob2 { top: 20%; right: -8% }
.ob3 { bottom: 15%; left: -10% }
.ob4 { bottom: 2%; right: 5% }

/* ---------- SECTION base ---------- */
section { padding: 130px 0; position: relative }

.section-head {
  max-width: 820px;
  margin: 0 auto 80px;
  text-align: center
}

.section-head h2 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.05;
  margin: 20px 0
}

.section-head p {
  color: var(--mute);
  font-size: 1.08rem;
  line-height: 1.7
}

/* ---------- ABOUT ---------- */
.about { padding-top: 80px }

.about-frame {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(34, 211, 238, .04));
  border: 1px solid var(--line);
  border-radius: 32px;
  backdrop-filter: blur(20px)
}

@media(max-width:900px) {
  .about-frame {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px
  }
}

.vert-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .75rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #22d3ee;
  font-weight: 600
}

@media(max-width:900px) {
  .vert-label { writing-mode: horizontal-tb; transform: none }
}

.about h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 24px
}

.about-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #fff;
  padding-left: 24px;
  border-left: 3px solid;
  border-image: var(--grad-aurora) 1
}

.about p {
  color: var(--mute);
  line-height: 1.85;
  margin-top: 20px
}

.about-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px
}

.about-nums div strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.about-nums div span {
  color: var(--mute);
  font-size: .85rem
}

/* full About page additions */
.about-extended {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

@media(max-width:900px) { .about-extended { grid-template-columns: 1fr } }

.about-extended .ax {
  padding: 32px 28px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  transition: .3s;
}

.about-extended .ax:hover {
  transform: translateY(-6px);
  border-color: #22d3ee;
}

.about-extended .ax .ax-i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad-aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #05070d;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

.about-extended .ax h4 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif;
}

.about-extended .ax p {
  color: var(--mute);
  font-size: .94rem;
  line-height: 1.7;
  margin: 0;
}

/* ---------- WHY US hexagon ---------- */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto
}

@media(max-width:900px) { .hex-grid { grid-template-columns: repeat(2, 1fr) } }

.hex-cell {
  grid-column: span 2;
  padding: 36px 28px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
  transition: .4s;
  backdrop-filter: blur(12px)
}

.hex-cell:nth-child(4),
.hex-cell:nth-child(5) { grid-column: span 3 }

@media(max-width:900px) {
  .hex-cell, .hex-cell:nth-child(4), .hex-cell:nth-child(5) { grid-column: span 1 }
}

.hex-cell:hover {
  transform: translateY(-8px);
  border-color: #22d3ee;
  box-shadow: 0 30px 60px -20px rgba(34, 211, 238, .3)
}

.hex-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--grad-aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #05070d;
  margin-bottom: 20px
}

.hex-cell h3 { font-size: 1.35rem; margin-bottom: 12px }

.hex-cell p {
  color: var(--mute);
  line-height: 1.7;
  margin: 0;
  font-size: .95rem
}

.hex-cell .n {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .15);
  font-weight: 900
}

/* ---------- SERVICES category ---------- */
.svc-cat { margin-bottom: 120px }

.svc-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.svc-cat-head .code {
  font-family: 'Fraunces', serif;
  font-size: 4.5rem;
  font-weight: 900;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1
}

.svc-cat-head h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  margin: 0;
  flex: 1;
  min-width: 280px
}

.svc-cat-head .tagline {
  color: var(--mute);
  max-width: 340px;
  font-size: .95rem;
  line-height: 1.6
}

/* LOANS mosaic */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 16px
}

@media(max-width:900px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: auto }
}

.mos {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(12px);
  transition: .3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden
}

.mos:hover {
  transform: scale(1.02);
  border-color: #7c3aed
}

.mos i {
  font-size: 1.8rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.mos h4 { font-size: 1.2rem; margin: 12px 0 8px }

.mos p {
  color: var(--mute);
  font-size: .9rem;
  line-height: 1.65;
  margin: 0
}

.mos.big {
  grid-column: span 6;
  grid-row: span 2;
  background: linear-gradient(135deg, rgba(124, 58, 237, .15), rgba(34, 211, 238, .05));
  border-color: rgba(124, 58, 237, .3)
}

.mos.big h4 { font-size: 1.8rem; font-family: 'Fraunces', serif }

.mos.med { grid-column: span 6; grid-row: span 1 }
.mos.sm { grid-column: span 4 }
.mos.wide { grid-column: span 8 }

@media(max-width:900px) {
  .mos, .mos.big, .mos.med, .mos.sm, .mos.wide {
    grid-column: span 1;
    grid-row: auto;
    min-height: 200px
  }
}

/* INSURANCE orbital */
.orb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

@media(max-width:900px) { .orb-grid { grid-template-columns: 1fr } }

.orb-card {
  position: relative;
  padding: 48px 32px;
  text-align: center;
  border-radius: 32px;
  background: radial-gradient(circle at top, rgba(52, 211, 153, .12), transparent 60%), var(--glass);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: .4s
}

.orb-card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--grad-aurora);
  opacity: .15;
  filter: blur(30px)
}

.orb-card:hover {
  transform: translateY(-8px);
  border-color: #34d399
}

.orb-card .ring-i {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg), var(--bg)), var(--grad-aurora);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1
}

.orb-card .ring-i i {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.orb-card h4 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  position: relative
}

.orb-card p {
  color: var(--mute);
  font-size: .93rem;
  line-height: 1.7;
  margin: 0;
  position: relative
}

/* INVESTMENTS pillars */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

@media(max-width:900px) { .pillar-grid { grid-template-columns: 1fr } }

.pillar {
  background: linear-gradient(180deg, rgba(34, 211, 238, .08), transparent 60%);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 40px 32px;
  position: relative;
  transition: .3s;
  overflow: hidden
}

.pillar:hover {
  border-color: #22d3ee;
  transform: translateY(-6px)
}

.pillar .idx {
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  font-weight: 900;
  line-height: .9;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .8
}

.pillar .tag {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #22d3ee;
  font-weight: 600;
  margin: 16px 0 8px
}

.pillar h4 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  font-family: 'Fraunces', serif
}

.pillar p {
  color: var(--mute);
  line-height: 1.75;
  font-size: .95rem;
  margin: 0
}

.pillar .arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s
}

.pillar:hover .arrow {
  background: var(--grad-aurora);
  color: #05070d;
  transform: rotate(-45deg)
}

/* WEALTH timeline */
.wealth-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative
}

@media(max-width:900px) { .wealth-flow { grid-template-columns: 1fr } }

.wf-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 24px;
  position: relative;
  transition: .3s;
  backdrop-filter: blur(12px)
}

.wf-card:nth-child(even) { transform: translateY(30px) }

@media(max-width:900px) {
  .wf-card:nth-child(even) { transform: none }
}

.wf-card:hover {
  border-color: #f472b6;
  transform: translateY(-6px)
}

.wf-card:nth-child(even):hover { transform: translateY(24px) }

.wf-card .stp {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--grad-pink);
  color: #05070d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Fraunces', serif;
  margin-bottom: 18px
}

.wf-card h4 { font-size: 1.15rem; margin-bottom: 10px }

.wf-card p {
  color: var(--mute);
  font-size: .9rem;
  line-height: 1.7;
  margin: 0
}

/* PAYMENTS glass slabs */
.pay-slab {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px
}

@media(max-width:900px) { .pay-slab { grid-template-columns: 1fr } }

.slab {
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .15), rgba(124, 58, 237, .08));
  border: 1px solid rgba(34, 211, 238, .2);
  position: relative;
  overflow: hidden;
  transition: .3s
}

.slab:nth-child(2) {
  background: linear-gradient(135deg, rgba(244, 114, 182, .15), rgba(124, 58, 237, .08));
  border-color: rgba(244, 114, 182, .2)
}

.slab:nth-child(3) {
  background: linear-gradient(135deg, rgba(52, 211, 153, .15), rgba(34, 211, 238, .08));
  border-color: rgba(52, 211, 153, .2)
}

.slab:hover { transform: translateY(-6px) }

.slab .g-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  backdrop-filter: blur(10px)
}

.slab h4 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif
}

.slab p {
  color: rgba(255, 255, 255, .75);
  line-height: 1.7;
  font-size: .94rem;
  margin: 0
}

/* DEBT split */
.debt-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line)
}

@media(max-width:900px) { .debt-split { grid-template-columns: 1fr } }

.dbt {
  padding: 44px 32px;
  background: var(--bg2);
  position: relative;
  transition: .3s;
  border-right: 1px solid var(--line)
}

.dbt:last-child { border-right: none }

@media(max-width:900px) {
  .dbt {
    border-right: none;
    border-bottom: 1px solid var(--line)
  }
}

.dbt:hover {
  background: linear-gradient(180deg, rgba(124, 58, 237, .1), transparent)
}

.dbt .code {
  font-family: 'Fraunces', serif;
  font-size: .9rem;
  color: #22d3ee;
  letter-spacing: .2em
}

.dbt h4 {
  font-size: 1.4rem;
  margin: 12px 0 16px;
  font-family: 'Fraunces', serif
}

.dbt p {
  color: var(--mute);
  line-height: 1.75;
  font-size: .93rem;
  margin: 0
}

.dbt .bar {
  width: 40px;
  height: 3px;
  background: var(--grad-aurora);
  margin-bottom: 20px;
  border-radius: 3px
}

/* HOME WARRANTY cluster */
.badge-cluster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

@media(max-width:900px) { .badge-cluster { grid-template-columns: 1fr } }

.bdg {
  text-align: center;
  padding: 44px 28px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 32px;
  transition: .4s;
  position: relative;
  backdrop-filter: blur(12px)
}

.bdg:hover {
  transform: translateY(-10px) rotate(-1deg);
  border-color: #f472b6
}

.bdg .shield {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 24px;
  background: var(--grad-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #05070d;
  box-shadow: 0 20px 40px -10px rgba(244, 114, 182, .5);
  transform: rotate(-6deg);
  transition: .4s
}

.bdg:hover .shield { transform: rotate(6deg) scale(1.05) }

.bdg h4 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif
}

.bdg p {
  color: var(--mute);
  line-height: 1.7;
  font-size: .93rem;
  margin: 0
}

/* AUTO dashboard */
.dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

@media(max-width:900px) { .dash { grid-template-columns: 1fr } }

.gauge {
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(52, 211, 153, .08), transparent);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: .3s
}

.gauge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-aurora)
}

.gauge:hover {
  transform: translateY(-6px);
  border-color: #34d399
}

.gauge .meter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line)
}

.gauge .meter .rpm {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.gauge .meter .lbl {
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--mute);
  text-transform: uppercase
}

.gauge h4 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif
}

.gauge p {
  color: var(--mute);
  line-height: 1.75;
  font-size: .93rem;
  margin: 0
}

/* ---------- PROCESS ---------- */
.proc-flow {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 60px
}

.proc-flow::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #7c3aed 15%, #22d3ee 50%, #34d399 85%, transparent)
}

.proc-item {
  position: relative;
  padding: 24px 0 40px
}

.proc-item .num {
  position: absolute;
  left: -60px;
  top: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid #22d3ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  color: #22d3ee;
  box-shadow: 0 0 30px rgba(34, 211, 238, .4)
}

.proc-item h4 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif
}

.proc-item p {
  color: var(--mute);
  line-height: 1.75;
  max-width: 640px;
  margin: 0
}

/* ---------- STATS ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 32px;
  overflow: hidden;
  backdrop-filter: blur(20px)
}

@media(max-width:900px) { .stats-row { grid-template-columns: 1fr 1fr } }

.stat {
  padding: 44px 28px;
  background: rgba(10, 15, 30, .6);
  text-align: center;
  transition: .3s
}

.stat:hover { background: rgba(124, 58, 237, .1) }

.stat i {
  font-size: 1.8rem;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  display: block
}

.stat .v {
  font-family: 'Fraunces', serif;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.stat .l {
  color: var(--mute);
  margin-top: 12px;
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase
}

/* ---------- TESTIMONIALS magazine ---------- */
.test-mag {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(34, 211, 238, .04));
  border: 1px solid var(--line);
  border-radius: 36px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden
}

@media(max-width:900px) {
  .test-mag {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px;
    text-align: center
  }
}

.test-mag .qmark {
  font-family: 'Fraunces', serif;
  font-size: 14rem;
  line-height: .7;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900
}

.test-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 32px
}

.test-meta {
  display: flex;
  align-items: center;
  gap: 16px
}

@media(max-width:900px) {
  .test-meta { justify-content: center }
}

.test-meta .av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #05070d;
  font-weight: 800;
  font-family: 'Fraunces', serif
}

.test-meta strong {
  display: block;
  color: #fff;
  font-size: 1.05rem
}

.test-meta span {
  color: #22d3ee;
  font-size: .85rem
}

.test-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px
}

.test-nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 1.1rem;
  transition: .3s;
  cursor: pointer
}

.test-nav button:hover {
  background: var(--grad-aurora);
  color: #05070d;
  border-color: transparent
}

.test-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px
}

.test-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: .3s
}

.test-dots span.active {
  background: var(--grad-aurora);
  width: 28px;
  border-radius: 4px
}

/* ---------- NEWSLETTER glass envelope ---------- */
.news-glass {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .15), rgba(34, 211, 238, .08));
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 36px;
  text-align: center;
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden
}

.news-glass::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(34, 211, 238, .15) 60deg, transparent 120deg, transparent 240deg, rgba(244, 114, 182, .15) 300deg, transparent 360deg);
  animation: spin 20s linear infinite;
  z-index: 0
}

.news-glass>* {
  position: relative;
  z-index: 1
}

.news-glass h3 {
  font-size: 2.2rem;
  margin-bottom: 12px;
  font-family: 'Fraunces', serif
}

.news-glass p {
  color: var(--mute);
  margin-bottom: 32px;
  font-size: 1rem
}

.news-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
}

.news-form input {
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 13, .6);
  color: #fff;
  font-size: .95rem;
  backdrop-filter: blur(10px);
  width: 100%;
}

.news-form input:focus {
  outline: none;
  border-color: #22d3ee
}

.news-form button {
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--grad-aurora);
  color: #05070d;
  border: none;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.news-form label {
  color: var(--mute);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: left;
  margin-top: 8px;
}

.news-check {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: .88rem;
  color: var(--mute);
  cursor: pointer;
}

.news-check input { width: auto }

.unsub-btn {
  background: none;
  border: none;
  color: var(--mute);
  margin-top: 20px;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer
}

.unsub-btn:hover { color: #f472b6 }

/* Newsletter full page wrapper */
.news-page-wrap {
  padding: 160px 0 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.faq {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: .3s;
  backdrop-filter: blur(12px)
}

.faq.open {
  border-color: #22d3ee;
  background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(124, 58, 237, .04))
}

.faq-q {
  width: 100%;
  padding: 24px 28px;
  background: none;
  border: none;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Manrope', sans-serif
}

.faq-q .ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  flex-shrink: 0
}

.faq.open .faq-q .ico {
  background: var(--grad-aurora);
  color: #05070d;
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease
}

.faq.open .faq-a { max-height: 400px }

.faq-a-inner {
  padding: 0 28px 24px;
  color: var(--mute);
  line-height: 1.8
}

/* ---------- CONTACT split glass ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px
}

@media(max-width:900px) { .contact-grid { grid-template-columns: 1fr } }

.c-panel {
  padding: 48px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 28px;
  backdrop-filter: blur(16px)
}

.c-panel.info {
  background: linear-gradient(135deg, rgba(124, 58, 237, .15), rgba(34, 211, 238, .05));
  border-color: rgba(124, 58, 237, .25)
}

.c-panel h3 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  font-family: 'Fraunces', serif
}

.c-panel p {
  color: var(--mute);
  margin-bottom: 32px;
  line-height: 1.7
}

.c-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start
}

.c-item .ci {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--grad-aurora);
  color: #05070d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0
}

.c-item small {
  color: var(--mute);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px
}

.c-item strong { color: #fff }

.c-form input,
.c-form select,
.c-form textarea {
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: rgba(5, 7, 13, .5);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-size: .95rem
}

.c-form input:focus,
.c-form select:focus,
.c-form textarea:focus {
  outline: none;
  border-color: #22d3ee
}

.c-form textarea { min-height: 130px; resize: vertical }

.c-form button {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: var(--grad-aurora);
  color: #05070d;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: .3s
}

.c-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(124, 58, 237, .5)
}

/* ---------- FINAL CTA ---------- */
.cta-final {
  padding: 140px 0;
  text-align: center;
  position: relative
}

.cta-final .ring-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  opacity: .3
}

.cta-final .ring-bg .rg {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 400px;
  height: 400px
}

.cta-final .ring-bg .rg:nth-child(2) { width: 600px; height: 600px }
.cta-final .ring-bg .rg:nth-child(3) { width: 800px; height: 800px }

.cta-final>* { position: relative; z-index: 1 }

.cta-final h2 {
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.05;
  margin-bottom: 24px
}

.cta-final h2 .grad {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic
}

.cta-final p {
  color: var(--mute);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 40px
}

/* ---------- FOOTER ---------- */
footer {
  padding: 80px 0 30px;
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 13, .6);
  backdrop-filter: blur(20px)
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px
}

@media(max-width:900px) { .foot-grid { grid-template-columns: 1fr 1fr } }
@media(max-width:560px) { .foot-grid { grid-template-columns: 1fr } }

footer h5 {
  font-family: 'Fraunces', serif;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 18px
}

footer ul { list-style: none; padding: 0; margin: 0 }

footer li { margin-bottom: 10px }

footer a,
footer .lnk {
  color: var(--mute);
  font-size: .92rem;
  transition: .2s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left
}

footer a:hover,
footer .lnk:hover { color: #22d3ee }

.foot-brand {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 900;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  display: block
}

.foot-brand-desc {
  color: var(--mute);
  line-height: 1.75;
  max-width: 340px;
  font-size: .93rem
}

.foot-social {
  display: flex;
  gap: 12px;
  margin-top: 20px
}

.foot-social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: .3s
}

.foot-social a:hover {
  background: var(--grad-aurora);
  color: #05070d;
  border-color: transparent
}

.foot-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--mute);
  font-size: .88rem
}

/* ---------- MODALS (kept for contact CTA on index) ---------- */
.modal-content {
  background: linear-gradient(180deg, #0a0f1e, #05070d);
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 24px;
  color: var(--ink);
  backdrop-filter: blur(24px)
}

.modal-header { border-bottom: 1px solid var(--line) }

.modal-title {
  font-family: 'Fraunces', serif;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800
}

.modal .btn-close { filter: invert(1) }

.success-badge {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--grad-aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 20px;
  font-size: 2.6rem;
  color: #05070d;
  box-shadow: 0 20px 50px -10px rgba(124, 58, 237, .6)
}

/* ============================================================
   NEW: page header for sub-pages (about, service, contact, etc.)
   ============================================================ */
.page-hero {
  padding: 180px 0 60px;
  text-align: center;
  position: relative;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 20px 0;
}

.page-hero h1 .grad {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.page-hero p {
  color: var(--mute);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================================
   NEW: Policy / Legal page layout
   Used by: privacy-policy.html, terms-conditions.html
   ============================================================ */
.policy-page {
  padding: 160px 0 100px;
}

.policy-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(34, 211, 238, .04));
  border: 1px solid var(--line);
  border-radius: 32px;
  backdrop-filter: blur(20px);
}

@media(max-width:900px) {
  .policy-wrap { padding: 32px }
}

.policy-wrap .policy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #22d3ee;
  font-weight: 600;
  margin-bottom: 18px;
}

.policy-wrap h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 12px;
}

.policy-wrap .policy-lead {
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.policy-c h6 {
  font-family: 'Fraunces', serif;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 32px;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.policy-c h6 .num {
  font-size: 1rem;
  opacity: .8;
}

.policy-c p {
  color: var(--mute);
  line-height: 1.85;
  font-size: .96rem;
  margin-bottom: 8px;
}

.policy-c h6:first-child { margin-top: 0 }

.policy-toc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 32px;
  padding: 24px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
}

@media(max-width:600px) { .policy-toc { grid-template-columns: 1fr } }

.policy-toc a {
  color: var(--mute);
  font-size: .9rem;
  transition: .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.policy-toc a:hover { color: #22d3ee }

/* ============================================================
   NEW: Unsubscribe page
   ============================================================ */
.unsub-page {
  padding: 160px 0 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.unsub-glass {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px;
  background: linear-gradient(135deg, rgba(244, 114, 182, .12), rgba(124, 58, 237, .06));
  border: 1px solid rgba(244, 114, 182, .3);
  border-radius: 32px;
  text-align: center;
  backdrop-filter: blur(20px);
}

@media(max-width:600px) { .unsub-glass { padding: 32px } }

.unsub-glass .unsub-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--grad-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 2.2rem;
  color: #05070d;
  box-shadow: 0 20px 40px -10px rgba(244, 114, 182, .4);
}

.unsub-glass h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}

.unsub-glass p {
  color: var(--mute);
  margin-bottom: 32px;
  line-height: 1.7;
}

.unsub-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.unsub-form input {
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 13, .6);
  color: #fff;
  font-size: .95rem;
  width: 100%;
}

.unsub-form input:focus {
  outline: none;
  border-color: #f472b6;
}

.unsub-form button {
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--grad-pink);
  color: #05070d;
  border: none;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.unsub-reasons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0;
  text-align: left;
}

.unsub-reasons label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  color: var(--mute);
  font-size: .92rem;
  transition: .2s;
}

.unsub-reasons label:hover { border-color: #f472b6; color: #fff; }

.unsub-reasons input { width: auto; }

.unsub-resub {
  margin-top: 24px;
  color: var(--mute);
  font-size: .88rem;
}

.unsub-resub a { color: #22d3ee; text-decoration: underline; }

/* ============================================================
   NEW: back-to-home / breadcrumb helper
   ============================================================ */
.breadcrumb-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--mute);
}

.crumb a { color: #22d3ee; }
.crumb a:hover { color: #fff; }
.crumb i { font-size: .7rem; }

/* utility */
.text-secondary { color: var(--mute) !important; }
.text-center { text-align: center; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.serif { font-family: 'Fraunces', serif !important; }