/* =====================================================================
   Imagine And Become — PREMIUM homepage hero + One-Day Success Plan
   Enqueued only on the static front page by the imagine-become plugin.
   Luxury black & gold identity preserved; upgraded with layered depth,
   3D tilt/parallax, glassmorphism, specular highlights and gold shimmer.
   GPU-friendly (transform/opacity), fully responsive, motion-safe.
   ===================================================================== */
:root {
  --bg: #0b0b0f;
  --bg-2: #08080b;
  --bg-3: #060608;
  --card: #111218;
  --ink: #f6f6f8;
  --muted: #b6b8c3;
  --gold: #d4af37;
  --gold-2: #f2d479;
  --gold-3: #fff3c4;
  --gold-deep: #9b7d1d;
  --gold-shadow: rgba(212, 175, 55, .35);
  --line: #1a1b26;
  --glass: rgba(255, 255, 255, .04);
  --glass-line: rgba(255, 255, 255, .10);
  --radius: 22px;
  /* Layered, real-depth drop shadow stack */
  --shadow: 0 2px 4px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-gold: 0 10px 30px rgba(212,175,55,.28), 0 2px 8px rgba(212,175,55,.35);
  --maxw: 1200px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ----------------------- Keyframes ----------------------- */
@keyframes ib-spin { to { transform: rotate(1turn); } }
@keyframes ib-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes ib-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ib-shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes ib-halo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes ib-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ----------------------- FULL-BLEED (edge-to-edge) -----------------------
   The block theme wraps page content in a constrained wrapper
   (.entry-content.has-global-padding.is-layout-constrained) that caps width
   and adds side padding. On the homepage we neutralise that so the hero
   background, auras and section bands span the FULL viewport width. This uses
   NO 100vw (which would overflow by the scrollbar width) — we simply remove
   the wrapper's padding and the child max-width/centering, so sections fill
   their already-full-width parent. Inner content keeps generous responsive
   padding via .ib-wrap for premium line-lengths on ultra-wide screens. */
.home .entry-content.has-global-padding,
.page-id-9 .entry-content.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}
.home .entry-content > .ib-million,
.home .entry-content > #iab-success-plan,
.page-id-9 .entry-content > .ib-million,
.page-id-9 .entry-content > #iab-success-plan {
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}
/* Belt-and-suspenders in case a section is not a direct child. */
.home .ib-million, .home #iab-success-plan,
.page-id-9 .ib-million, .page-id-9 #iab-success-plan { max-width: none; }

/* ----------------------- HERO ----------------------- */
.ib-million {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  background:
    radial-gradient(1200px 620px at 8% -12%, rgba(212, 175, 55, .16), transparent 60%),
    radial-gradient(900px 520px at 112% 8%, rgba(242, 212, 121, .10), transparent 60%),
    radial-gradient(700px 700px at 50% 120%, rgba(212, 175, 55, .07), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg) 100%);
  padding: 0 0 clamp(64px, 8vh, 104px);
  color: var(--ink);
  font-family: var(--font);
}
/* ----------------------- Premium glowing FX backdrop ----------------------- *
   Sits behind the hero copy/orb (z-index 0; .ib-wrap is z-index 1). Constrained
   to roughly the first viewport so the Three.js canvas stays cheap. Pure
   transform/opacity animation; frozen under prefers-reduced-motion. */
.ib-fx {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.ib-fx__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ib-fx__canvas.is-ready { opacity: 1; }
.ib-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  will-change: transform;
  mix-blend-mode: screen;
}
.ib-aurora--1 {
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -14%; left: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(242,212,121,.5), rgba(212,175,55,.16) 45%, transparent 70%);
  animation: ib-aurora-a 22s ease-in-out infinite;
}
.ib-aurora--2 {
  width: 52vw; height: 52vw; max-width: 640px; max-height: 640px;
  top: 4%; right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(212,175,55,.4), rgba(155,125,29,.14) 45%, transparent 70%);
  animation: ib-aurora-b 27s ease-in-out infinite;
}
.ib-aurora--3 {
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  bottom: -18%; left: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(255,243,196,.3), rgba(212,175,55,.12) 45%, transparent 70%);
  animation: ib-aurora-a 31s ease-in-out infinite reverse;
}
/* Subtle receding perspective grid for depth. */
.ib-fx__grid {
  position: absolute;
  inset: 40% -20% -20% -20%;
  background-image:
    linear-gradient(rgba(212,175,55,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.10) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  opacity: .35;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 100%, #000 20%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 100%, #000 20%, transparent 75%);
}
@keyframes ib-aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4%, 6%, 0) scale(1.12); }
}
@keyframes ib-aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-5%, 4%, 0) scale(.95); }
}

/* Fine hairline gold top accent for that "expensive" edge */
.ib-million::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-shadow) 20%, var(--gold-2) 50%, var(--gold-shadow) 80%, transparent);
  opacity: .6;
  pointer-events: none;
}
.ib-wrap { max-width: none; margin: 0 auto; padding: 0 clamp(20px, 5vw, 120px); position: relative; z-index: 1; }

.ib-hero {
  /* Centered vertical composition: hero copy on top, animated orb below,
     both horizontally centered within the hero section. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(46px, 6vw, 88px);
  /* Immersive full-screen first view. svh keeps it stable under mobile UI.
     Top padding clears the sticky site header so nothing is cut off. */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(96px, 13vh, 168px) clamp(48px, 8vh, 112px);
  box-sizing: border-box;
}

/* Glass panel behind the hero copy for layered depth + inner light */
.ib-hero__copy {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
  padding: 40px 40px 44px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 60%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  isolation: isolate;
}
.ib-hero__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(242,212,121,.55), transparent 40%, transparent 70%, rgba(212,175,55,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}
.ib-hero__copy::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.07), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ----------------------- Header logo (block-theme site header) ----------------------- */
.iab-brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-right: 14px;
  flex: none;
  border-radius: 12px;
  transition: transform .25s ease, filter .25s ease;
}
.iab-brand-logo img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 11px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(212,175,55,.28));
}
.iab-brand-logo:hover { transform: translateY(-1px) scale(1.04); }
@media (max-width: 600px) {
  .iab-brand-logo img { width: 40px; height: 40px; }
}

.ib-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .06));
  border: 1px solid rgba(212, 175, 55, .4);
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(212,175,55,.14);
}
.ib-badge::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px 2px rgba(242,212,121,.8);
  animation: ib-twinkle 2.6s ease-in-out infinite;
}

.ib-title {
  margin: 22px 0 12px;
  /* Sized so "IMAGINE And BECOME" stays on ONE line on desktop/tablet
     within the narrower hero panel; wraps only on very small phones. */
  font-size: clamp(30px, 5.4vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .5px;
  text-transform: uppercase;
  /* Animated gold shimmer sweep across the clipped gradient text */
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 25%, var(--gold-3) 45%, var(--gold-2) 55%, var(--gold) 75%, var(--gold-deep) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ib-shimmer 7s linear infinite;
  filter: drop-shadow(0 2px 20px rgba(212, 175, 55, .28));
}
.ib-title span {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
/* Keep the title on a single horizontal line on desktop & tablet. On very
   narrow phones we allow it to wrap so it never overflows the viewport. */
@media (min-width: 761px) {
  .ib-title { white-space: nowrap; }
}
.ib-tagline {
  margin: 0 0 18px;
  font-size: clamp(18px, 2.8vw, 25px);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .2px;
}
.ib-desc {
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 60ch;
  line-height: 1.7;
}
.ib-desc strong { color: var(--gold-2); font-weight: 600; }

.ib-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ----------------------- Buttons (layered depth + sheen) ----------------------- */
.ib-btn {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, color .25s ease;
}
/* Sheen sweep */
.ib-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.ib-btn:hover::after { left: 140%; }
.ib-btn--gold {
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2) 35%, var(--gold) 62%, var(--gold-deep));
  color: #17130a;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 6px rgba(120,90,10,.5) inset, 0 10px 26px rgba(212,175,55,.4), 0 3px 8px rgba(0,0,0,.4);
}
.ib-btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(120,90,10,.5) inset, 0 18px 40px rgba(212,175,55,.55), 0 4px 10px rgba(0,0,0,.45);
  color: #17130a;
}
.ib-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.35);
}
.ib-btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(212,175,55,.22); }
.ib-btn--lg { padding: 19px 44px; font-size: 18px; }

/* ----------------------- Orb (luminous 3D sphere) ----------------------- */
.ib-orb {
  position: relative;
  /* Larger, prominent focal orb, horizontally centered under the hero copy. */
  width: min(560px, 86vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Ambient halo glow behind the orb — smoked graphite with a minimal warm accent */
.ib-orb::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(150,155,170,.22), rgba(212,175,55,.10) 46%, transparent 72%);
  filter: blur(32px);
  animation: ib-halo 6s ease-in-out infinite;
  z-index: -1;
}
.ib-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  transform-style: preserve-3d;
}
.ib-orb__ring--1 { inset: 0;   animation: ib-spin 26s linear infinite; box-shadow: 0 0 26px rgba(0,0,0,.5) inset, 0 0 14px rgba(255,255,255,.05); }
.ib-orb__ring--2 { inset: 14%; border-color: rgba(255, 255, 255, .10); animation: ib-spin 18s linear infinite reverse; }
.ib-orb__ring--3 { inset: 28%; border-style: dashed; border-color: rgba(212, 175, 55, .30); animation: ib-spin 12s linear infinite; }
.ib-orb__ring--1::before,
.ib-orb__ring--2::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  /* minimal warm-gold accent bead */
  background: var(--gold-3);
  box-shadow: 0 0 14px 2px rgba(242, 212, 121, .7);
  transform: translateX(-50%);
}
.ib-orb__stars {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(212,175,55,.55), transparent),
    radial-gradient(2px 2px at 80% 70%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(212,175,55,.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 60%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 15% 65%, rgba(200,205,220,.6), transparent);
  opacity: .6;
  animation: ib-pulse 6s ease-in-out infinite;
}
.ib-orb__core {
  position: relative;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Luxury glossy dark sphere: glossy black -> charcoal -> graphite with a
     smoked-glass depth falloff. Bright gold intentionally removed. */
  background:
    radial-gradient(120% 120% at 32% 22%, #40434e, #262931 28%, #16171d 54%, #0b0c11 78%, #050507 100%);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, .6),
    0 8px 22px rgba(0, 0, 0, .55),
    inset 0 5px 12px rgba(255, 255, 255, .16),
    inset 0 -14px 30px rgba(0, 0, 0, .72),
    inset 0 0 0 1px rgba(212, 175, 55, .18);
  animation: ib-float 7s ease-in-out infinite;
  transform: translateZ(40px);
}
/* Glossy specular highlight (soft metallic sheen) on the dark sphere */
.ib-orb__core::before {
  content: "";
  position: absolute;
  top: 10%; left: 18%;
  width: 46%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.55), rgba(255,255,255,.10) 55%, transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}
.ib-orb__core span {
  position: relative;
  font-size: clamp(36px, 8vw, 60px);
  font-weight: 800;
  letter-spacing: 1px;
  color: #17130a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(120,90,10,.5);
}
/* Original brand logo centered inside the circular orb core (replaces "IB").
   Scales with the core at every breakpoint; contained so it never overflows
   the circle; transparent PNG kept crisp on retina. */
.ib-orb__logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  line-height: 0;
  border-radius: 50%;
}
.ib-orb__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Depth shadow + soft warm halo so the gold mark reads crisply on dark glass. */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(212,175,55,.22));
}

/* ----------------------- Section titles ----------------------- */
.ib-h2 {
  text-align: center;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 40px;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold) 30%, var(--gold-3) 50%, var(--gold) 70%, var(--gold-deep));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ib-shimmer 9s linear infinite;
}
.ib-h2::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

/* ----------------------- 3D tilt scaffolding (shared) ----------------------- */
.ib-tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
/* Moving glare that follows the pointer on tilt cards */
.ib-tilt__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.ib-tilt.is-tilting .ib-tilt__glare { opacity: 1; }

/* ----------------------- Why (value props) ----------------------- */
.ib-why { margin-top: 104px; }
.ib-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.ib-value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #101119, var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 28px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ib-value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px 160px at 50% -10%, rgba(212, 175, 55, .16), transparent 60%);
  pointer-events: none;
  opacity: .85;
  transition: opacity .3s ease;
  z-index: -1;
}
/* Hover parity with Core Categories: glossy black-glass card, refined gold text,
   subtle gold border glow, gentle lift. */
.ib-value:hover {
  background: linear-gradient(160deg, #0c0d13, #060608);
  border-color: rgba(212, 175, 55, .5);
  box-shadow: var(--shadow), 0 0 0 1px rgba(212,175,55,.20), 0 22px 46px rgba(0,0,0,.62), 0 0 34px rgba(212,175,55,.14);
}
.ib-value:hover::before { opacity: 1; }

/* Icon medallion — identical treatment to category icons (.ib-card__ic/__img). */
.ib-value__ic {
  position: relative;
  display: grid; place-items: center;
  width: 96px; height: 96px; margin-bottom: 18px;
  border-radius: 22px;
  background: radial-gradient(120% 120% at 50% 22%, #16171f, #0b0c11 72%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.5);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ib-value__ic::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(242,212,121,.24), rgba(212,175,55,.06) 48%, transparent 74%);
  opacity: .75; transition: opacity .3s ease, transform .3s ease;
  z-index: 0;
}
.ib-value:hover .ib-value__ic { border-color: rgba(212,175,55,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 30px rgba(0,0,0,.55); }
.ib-value:hover .ib-value__ic::before { opacity: 1; transform: scale(1.12); }
.ib-value__img {
  position: relative; z-index: 1;
  width: 96px; height: 96px; object-fit: contain;
  mix-blend-mode: screen;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ib-value:hover .ib-value__img { transform: scale(1.06); }
.ib-value__num {
  margin: 14px 0 6px;
  font-size: 44px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--gold-3), var(--gold-2) 55%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ib-value__label {
  margin: 0; color: var(--muted); font-size: 15px; letter-spacing: .5px; text-transform: uppercase;
  transition: color .3s ease;
}
.ib-value:hover .ib-value__label { color: var(--gold-2); }
/* Gentle icon float (motion only); staggered per card, mirrors category icons. */
.ib-anim .ib-value__ic { animation: ib-val-float 6.5s ease-in-out infinite; }
.ib-anim .ib-value:nth-child(2) .ib-value__ic { animation-delay: -1.4s; }
.ib-anim .ib-value:nth-child(3) .ib-value__ic { animation-delay: -2.8s; }
@keyframes ib-val-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ----------------------- Categories (luxury / glossy / cinematic) ----------------------- */
.ib-cats { margin-top: 120px; text-align: center; }
.ib-cats__eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 14px;
}
.ib-cats .ib-h2 { margin-bottom: 16px; }
.ib-cats__lead {
  max-width: 60ch; margin: 0 auto 54px; color: var(--muted);
  font-size: clamp(15px, 2vw, 17px); line-height: 1.7;
}
.ib-cats__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  text-align: left;
}
.ib-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px 26px 26px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 24%),
    linear-gradient(160deg, #14151d 0%, #0d0e14 60%, #090a0f 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .45s ease, border-color .45s ease;
}
/* Animated gold hairline border (masked ring): subtle at rest, glows on hover */
.ib-card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(242,212,121,.55), transparent 34%, transparent 66%, rgba(212,175,55,.42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .32; transition: opacity .45s ease;
  pointer-events: none; z-index: 2;
}
.ib-card:hover::before { opacity: 1; }
/* Glossy diagonal light-sweep on hover */
.ib-card::after {
  content: "";
  position: absolute; top: 0; left: -130%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-18deg);
  transition: left .85s cubic-bezier(.2,.8,.2,1);
  pointer-events: none; z-index: 3;
}
.ib-card:hover::after { left: 155%; }
.ib-card:hover { border-color: rgba(212,175,55,.30); box-shadow: var(--shadow), var(--shadow-gold); }

/* Icon medallion: a glossy dark rounded tile the icon fills edge-to-edge, so the
   icon's near-black backdrop dissolves into the tile (via screen) instead of
   leaving a stray square on the card. The tile's own border/glow read as premium. */
.ib-card__ic {
  position: relative;
  display: grid; place-items: center;
  width: 96px; height: 96px; margin-bottom: 18px;
  border-radius: 22px;
  background: radial-gradient(120% 120% at 50% 22%, #16171f, #0b0c11 72%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.5);
  overflow: hidden;
  transform: translateZ(36px);
  transition: border-color .45s ease, box-shadow .45s ease;
}
/* Ambient gold glow inside the tile, behind the subject. */
.ib-card__ic::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(242,212,121,.24), rgba(212,175,55,.06) 48%, transparent 74%);
  opacity: .75; transition: opacity .45s ease, transform .45s ease;
  z-index: 0;
}
.ib-card:hover .ib-card__ic { border-color: rgba(212,175,55,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 30px rgba(0,0,0,.55); }
.ib-card:hover .ib-card__ic::before { opacity: 1; transform: scale(1.1); }
.ib-card__img {
  position: relative; z-index: 1;
  width: 96px; height: 96px; object-fit: contain;
  mix-blend-mode: screen; /* icon's dark backdrop melts into the tile; gold subject glows */
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ib-card:hover .ib-card__img { transform: scale(1.06); }

.ib-card__title {
  margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--ink);
  letter-spacing: .2px; transform: translateZ(22px);
}
.ib-card__desc {
  margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55;
  transform: translateZ(14px);
}
.ib-card__explore {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.ib-card__explore svg { transition: transform .3s ease; }
.ib-card:hover .ib-card__explore { opacity: .95; transform: translateY(0); }
.ib-card:hover .ib-card__explore svg { transform: translateX(3px); }

/* Gentle icon float (only when motion is allowed); staggered per card. */
.ib-anim .ib-card__ic { animation: ib-cat-float 6.5s ease-in-out infinite; }
.ib-anim .ib-card:nth-child(2) .ib-card__ic { animation-delay: -.9s; }
.ib-anim .ib-card:nth-child(3) .ib-card__ic { animation-delay: -1.8s; }
.ib-anim .ib-card:nth-child(4) .ib-card__ic { animation-delay: -2.7s; }
.ib-anim .ib-card:nth-child(5) .ib-card__ic { animation-delay: -3.6s; }
.ib-anim .ib-card:nth-child(6) .ib-card__ic { animation-delay: -1.3s; }
.ib-anim .ib-card:nth-child(7) .ib-card__ic { animation-delay: -2.2s; }
.ib-anim .ib-card:nth-child(8) .ib-card__ic { animation-delay: -3.1s; }
@keyframes ib-cat-float {
  0%, 100% { transform: translateZ(36px) translateY(0); }
  50%      { transform: translateZ(36px) translateY(-7px); }
}

/* ----------------------- CTA ----------------------- */
.ib-cta {
  position: relative;
  margin-top: 104px;
  text-align: center;
  padding: 64px 24px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(640px 260px at 50% 0%, rgba(212, 175, 55, .2), transparent 70%),
    linear-gradient(150deg, #101119, var(--bg-2));
  border: 1px solid rgba(212, 175, 55, .32);
  box-shadow: var(--shadow), var(--shadow-gold);
}
.ib-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(212,175,55,.28), rgba(242,212,121,.1), rgba(212,175,55,.28));
  filter: blur(26px);
  opacity: .3;
  z-index: -1;
  animation: ib-spin 18s linear infinite;
}
.ib-cta__title { margin: 0 0 12px; font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--ink); }
.ib-cta__sub { margin: 0 0 28px; color: var(--muted); font-size: 17px; }

/* ----------------------- Contact band (new) ----------------------- */
.ib-contact {
  position: relative;
  margin-top: 68px;
  text-align: center;
  padding: 48px 28px;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 60%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.ib-contact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: radial-gradient(120% 80% at 50% 0%, rgba(212,175,55,.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ib-contact__label {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-2);
}
.ib-contact__title { margin: 0 0 8px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: var(--ink); }
.ib-contact__sub { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.ib-contact__email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 20px);
  letter-spacing: .3px;
  text-decoration: none;
  color: var(--gold-2);
  background: linear-gradient(145deg, rgba(212,175,55,.14), rgba(212,175,55,.05));
  border: 1px solid rgba(212, 175, 55, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 26px rgba(212,175,55,.16);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.ib-contact__email:hover {
  transform: translateY(-2px);
  color: #17130a;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2) 45%, var(--gold));
  box-shadow: 0 14px 34px rgba(212,175,55,.4);
}
.ib-contact__email::before { content: "\2709"; font-size: 1.1em; line-height: 1; }

/* ----------------------- One-Day Success Plan ----------------------- */
#iab-success-plan {
  --p: 0;
  position: relative;
  color: var(--ink);
  font-family: var(--font);
  overflow-x: clip;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212, 175, 55, .12), transparent 60%),
    radial-gradient(900px 520px at 100% 110%, rgba(242,212,121,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg) 100%);
  padding: 88px 0 104px;
}
#iab-success-plan .wrap { max-width: none; margin: 0 auto; padding: 0 clamp(20px, 5vw, 120px); }
#iab-success-plan .iab-sp__header {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 30px;
  background: linear-gradient(150deg, #101119, var(--bg-2));
  box-shadow: var(--shadow);
  isolation: isolate;
}
#iab-success-plan .iab-sp__header::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(212, 175, 55, .38), rgba(242, 212, 121, .16), rgba(212, 175, 55, .38));
  filter: blur(24px);
  opacity: .34;
  z-index: -1;
  animation: ib-spin 14s linear infinite;
}
#iab-success-plan .brand-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#iab-success-plan .logo {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, var(--gold-3), var(--gold-2) 35%, var(--gold) 55%, var(--gold-deep) 74%, #4e3d0d 100%);
  box-shadow: 0 10px 26px rgba(212, 175, 55, .3), inset 0 2px 3px rgba(255, 255, 255, .35), inset 0 -4px 8px rgba(78,61,13,.6);
}
#iab-success-plan h2 { margin: 0; font-size: clamp(22px, 3vw, 31px); font-weight: 800; }
#iab-success-plan .subtitle { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
#iab-success-plan .pill {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
  border: 1px solid rgba(212,175,55,.35);
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
#iab-success-plan .progress {
  position: relative;
  height: 10px;
  margin-top: 22px;
  border-radius: 999px;
  background: #0f1016;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
#iab-success-plan .progress > i {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, #30260a, var(--gold) 40%, var(--gold-2));
  box-shadow: 0 0 14px rgba(212,175,55,.5);
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
#iab-success-plan .iab-sp__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#iab-success-plan .card {
  position: relative;
  background: linear-gradient(160deg, #12131b, var(--card));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow);
}
#iab-success-plan .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px 120px at 20% 0%, rgba(212, 175, 55, .14), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
#iab-success-plan .card.is-done { border-color: rgba(212, 175, 55, .6); box-shadow: var(--shadow), var(--shadow-gold); }
#iab-success-plan .card h3 { margin: 0 0 4px; font-size: 18px; }
#iab-success-plan .meta { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
#iab-success-plan .iab-done,
#iab-success-plan .iab-reset {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 11px 20px;
  border: 1px solid rgba(212, 175, 55, .5);
  background: linear-gradient(145deg, rgba(212, 175, 55, .12), rgba(212,175,55,.04));
  color: var(--gold-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#iab-success-plan .iab-done:hover,
#iab-success-plan .iab-reset:hover { background: rgba(212, 175, 55, .2); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(212,175,55,.2); }
#iab-success-plan .card.is-done .iab-done {
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2) 45%, var(--gold));
  color: #17130a;
  border-color: transparent;
}
#iab-success-plan .iab-sp__actions { margin-top: 26px; text-align: center; }

/* ----------------------- Reveal-on-scroll (progressive) ----------------------- */
.ib-anim .ib-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.ib-anim .ib-reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------- Responsive ----------------------- */
@media (max-width: 1250px) {
  .ib-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* Lighten the glow backdrop on phones/tablets (no WebGL canvas here). */
  .ib-fx__grid { display: none; }
  .ib-aurora { filter: blur(56px); }
  .ib-aurora--3 { display: none; }
}
@media (max-width: 760px) {
  .ib-hero { gap: 44px; }
  .ib-hero__copy { padding: 32px 24px 34px; }
  /* Orb stays below the centered copy and remains prominent on phones. */
  .ib-orb { width: min(440px, 84vw); }
  .ib-why__grid { grid-template-columns: 1fr; }
  .ib-cats__grid { grid-template-columns: 1fr 1fr; }
  /* Simplify motion on phones: no continuous icon float. */
  .ib-anim .ib-card__ic { animation: none; }
  .ib-anim .ib-value__ic { animation: none; }
}
@media (max-width: 440px) {
  .ib-cats__grid { grid-template-columns: 1fr; }
  .ib-hero__copy { padding: 26px 18px 28px; }
}
/* Touch devices (no hover): keep the Explore affordance visible so nothing
   is hover-gated and there are no empty gaps; descriptions are always shown. */
@media (hover: none), (pointer: coarse) {
  .ib-card__explore { opacity: .9; transform: none; }
}

/* ----------------------- Reduced motion / accessibility ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ib-orb__ring, .ib-orb__core, .ib-orb__stars, .ib-orb::before,
  .ib-title, .ib-h2, .ib-cta::before, .ib-badge::before,
  .ib-aurora, .ib-fx__grid, .ib-anim .ib-card__ic, .ib-anim .ib-value__ic,
  #iab-success-plan .iab-sp__header::before { animation: none !important; }
  /* Static premium fallback: keep the glow, drop the motion; canvas never inits. */
  .ib-fx__canvas { display: none !important; }
  .ib-aurora { opacity: .38; }
  .ib-title, .ib-h2 { background-position: 0 0; }
  .ib-anim .ib-reveal { opacity: 1 !important; transform: none !important; }
  .ib-tilt { transform: none !important; }
  /* Categories: no sweep/float; content and Explore affordance stay visible. */
  .ib-card::after { display: none !important; }
  .ib-card__ic { transform: none !important; }
  .ib-card__explore { opacity: .9 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Homepage-only: fully remove the newsletter from the front page.
   The "Subscribe to our newsletter" heading, description, email input and
   Subscribe button live in the shared global footer template part. On the
   homepage we hide the entire footer body group so there is NO newsletter and
   NO leftover empty band/gap — the page ends cleanly after the last section.
   Scoped to `body.home` (and this stylesheet only loads on the front page), so
   every OTHER page keeps its full footer (menu, contacts, socials, subscribe,
   copyright) intact. display:none is fully reversible (deactivating the plugin
   removes this CSS) and hidden from assistive tech; the shared template markup
   is NOT modified.
   --------------------------------------------------------------------------- */
body.home .site-footer > .wp-block-group { display: none !important; }