/* ============================================================
   WOW.CSS — Cinematic alignment to S/02 (adv3d)
   Brings perspective grids, ambient glows, glassmorphism,
   3D scenes, corner marks, faded oversized counters
   to the rest of the landing page.
   ============================================================ */

/* ---------- Shared atmospheric primitives ---------- */

/* Perspective grid floor — works on dark sections */
.wow-floor {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.18) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* Inverted floor for white/light sections */
.wow-floor-light {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.10) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* Inverted for orange band */
.wow-floor-orange {
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.13) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes wowFloorPan {
  from { background-position: 0 0; }
  to { background-position: 0 80px; }
}

.wow-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.wow-glow-a {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #f07d07, transparent 70%);
}
.wow-glow-b {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #b55a00, transparent 70%);
  opacity: .35;
}
.wow-glow-light {
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(240,125,7,.45), transparent 70%);
  filter: blur(90px);
  opacity: .5;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Corner registration marks — applied to bordered cards */
.wow-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(240,125,7,.5);
  pointer-events: none;
  transition: width 400ms ease, height 400ms ease, border-color 400ms ease;
  z-index: 3;
}
.wow-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.wow-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.wow-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.wow-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.wow-target:hover .wow-corner { width: 22px; height: 22px; border-color: #f07d07; }

/* Faded oversized counter on cards */
.wow-counter {
  position: absolute;
  bottom: 14px;
  right: 22px;
  font-family: var(--font-display);
  font-size: clamp(64px, 6vw, 110px);
  line-height: .8;
  letter-spacing: .015em;
  color: rgba(255,255,255,.05);
  pointer-events: none;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
}
.wow-counter-dark { color: rgba(13,13,13,.07); }
.wow-counter-orange { color: rgba(13,13,13,.10); }
.wow-counter .plus { font-size: .5em; color: rgba(240,125,7,.5); margin-left: 4px; }
.wow-counter-dark .plus { color: rgba(240,125,7,.7); }

/* ============================================================
   PAS — S/03 — keep dark, layer floor + glassy pain cards
   ============================================================ */
.pas { isolation: isolate; }
.pas .pas-bg {
  /* keep existing radial wash, but float deeper */
  z-index: 0;
}
.pas::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -40%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.14) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .7;
}
.pas .container { position: relative; z-index: 2; }

.pas-left .eyebrow {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(10px);
}
.pas-left .eyebrow::before { display: none; }
.pas-left h2 {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 40px rgba(240,125,7,.15);
}
.pas-left h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pain items: glass + 3D hover lift */
.pain-list { perspective: 1800px; }
.pain-item {
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.35) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), border-color 400ms ease, box-shadow 400ms ease, background 400ms ease;
}
.pain-item:hover {
  transform: translateZ(20px) translateX(6px) !important;
  border-color: rgba(240,125,7,.5) !important;
  box-shadow: 0 30px 80px rgba(240,125,7,.18), 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);
}
.pain-item .pain-ico {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.3);
}

/* ============================================================
   STEPS — S/04 — flip light section to subtle 3D depth
   ============================================================ */
.steps { isolation: isolate; }
.steps::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(240,125,7,.08), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(240,125,7,.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.steps::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.steps .container { position: relative; z-index: 2; }
.steps-head h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.steps-grid { perspective: 1800px; perspective-origin: 50% 30%; }
.step-cell {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), background 400ms ease, box-shadow 400ms ease, border-color 400ms ease !important;
  position: relative;
}
.step-cell:nth-child(1) { transform: rotateY(6deg) rotateX(1deg) translateZ(0); }
.step-cell:nth-child(2) { transform: rotateX(1deg) translateZ(30px); z-index: 2; background: #FAFAFA; }
.step-cell:nth-child(3) { transform: rotateY(-6deg) rotateX(1deg) translateZ(0); }
.step-cell:hover {
  transform: rotateY(0) rotateX(0) translateZ(50px) !important;
  background: #fff;
  box-shadow: 0 40px 100px rgba(240,125,7,.18), 0 20px 60px rgba(0,0,0,.08);
  z-index: 3;
}
.step-cell:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240,125,7,.3);
  pointer-events: none;
}

/* ============================================================
   TAKEAWAY — S/05 — orange band, layer subtle 3D + glow
   ============================================================ */
.takeaway { isolation: isolate; }
.takeaway::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.13) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.takeaway .container { position: relative; z-index: 2; }
.takeaway h2 {
  text-shadow: 0 12px 40px rgba(13,13,13,.18);
}
.takeaway h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.takeaway-list { perspective: 1400px; }
.take-item {
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), border-color 300ms ease !important;
}
.take-item:hover {
  transform: translateZ(20px) translateX(12px) !important;
}
.take-visual {
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 12px 30px rgba(0,0,0,.18);
  position: relative;
}
.take-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

/* ============================================================
   AUDIENCE — S/06 — dark, glass cards + floor + glows
   ============================================================ */
.audience { isolation: isolate; overflow: hidden; }
.audience::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,125,7,.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.audience::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.14) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.audience .container { position: relative; z-index: 2; }
.aud-head .eyebrow {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(10px);
}
.aud-head .eyebrow::before { display: none; }
.aud-head h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aud-card {
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.4) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), border-color 400ms ease, box-shadow 400ms ease !important;
  transform-style: preserve-3d;
}
.aud-card:hover {
  transform: translateY(-8px) translateZ(40px) !important;
  border-color: rgba(240,125,7,.5) !important;
  box-shadow:
    0 50px 120px rgba(240,125,7,.18),
    0 30px 80px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.aud-card .aud-ico {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.3);
}

.not-for {
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.4) 100%) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-left: 3px solid var(--orange) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}

/* ============================================================
   WALL — S/07 — light bg, layered 3D testimonials
   ============================================================ */
.wall { isolation: isolate; }
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(240,125,7,.10), transparent 55%),
    radial-gradient(ellipse at 0% 80%, rgba(13,13,13,.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.wall::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.wall .container { position: relative; z-index: 2; }
.wall-head h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.testimonials { perspective: 1800px; perspective-origin: 50% 30%; }
.test-card {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), border-color 400ms ease, box-shadow 400ms ease !important;
  box-shadow: 0 30px 60px rgba(13,13,13,.10), 0 12px 30px rgba(13,13,13,.06);
}
.test-card:nth-child(1) { transform: rotateY(6deg) rotateX(1deg) translateZ(0); }
.test-card:nth-child(2) { transform: rotateX(1deg) translateZ(30px); z-index: 2; }
.test-card:nth-child(3) { transform: rotateY(-6deg) rotateX(1deg) translateZ(0); }
.test-card:hover {
  transform: rotateY(0) rotateX(0) translateZ(50px) !important;
  box-shadow: 0 50px 120px rgba(240,125,7,.20), 0 30px 80px rgba(13,13,13,.12);
}
.test-card .visual {
  position: relative;
}
.test-card .visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
}

/* Wall stat — make the dark cinematic strip */
.wall-stat {
  background:
    linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.5) 100%),
    var(--black) !important;
  border: 1px solid rgba(240,125,7,.25);
  box-shadow: 0 40px 100px rgba(13,13,13,.18), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.wall-stat::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,125,7,.35), transparent 70%);
  filter: blur(80px);
  top: -150px; left: -120px;
  pointer-events: none;
}
.wall-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  pointer-events: none;
}
.wall-stat > * { position: relative; z-index: 1; }
.wall-stat .big {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(240,125,7,.4);
}

/* ============================================================
   COMPANY — S/08 — orange band; isometric floor + numbers
   ============================================================ */
.company { isolation: isolate; }
.company::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.13) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.company .container { position: relative; z-index: 2; }
.company h2 {
  text-shadow: 0 12px 40px rgba(13,13,13,.18);
}
.company h2 em {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.numbers-grid { perspective: 1400px; }
.num-cell {
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), background 400ms ease !important;
  position: relative;
}
.num-cell:hover {
  transform: translateZ(30px) !important;
  background: rgba(255,255,255,.10) !important;
}
.num-cell .big {
  text-shadow: 0 8px 30px rgba(13,13,13,.25);
}

/* ============================================================
   FAQ — S/09 — light, layered + 3D toggle
   ============================================================ */
.faq { isolation: isolate; position: relative; overflow: hidden; }
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(240,125,7,.08), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(240,125,7,.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.faq::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(13,13,13,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,13,13,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.faq .container { position: relative; z-index: 2; }
.faq-left h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-item {
  transition: padding 300ms cubic-bezier(.2,.8,.2,1), transform 400ms cubic-bezier(.2,.8,.2,1) !important;
}
.faq-item:hover { transform: translateX(4px); }
.faq-item.open .qt {
  background: linear-gradient(180deg, #1a1a1a 0%, #4d4d4d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-item.open .toggle {
  box-shadow: 0 0 24px rgba(240,125,7,.5);
}

/* ============================================================
   FORM — S/10 — full cinematic dark stage
   ============================================================ */
.form-section { isolation: isolate; }
.form-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,125,7,.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.form-section::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.16) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.form-section .container { position: relative; z-index: 2; }
.form-glow-1 {
  position: absolute;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, #f07d07, transparent 70%);
  filter: blur(80px);
  top: -120px; left: -160px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.form-glow-2 {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, #b55a00, transparent 70%);
  filter: blur(80px);
  bottom: -180px; right: -120px;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}
.form-left h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.form-left h2 {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 40px rgba(240,125,7,.15);
}

.incentive {
  background: linear-gradient(160deg, rgba(240,125,7,.22) 0%, rgba(181,90,0,.08) 50%, rgba(0,0,0,.45) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.incentive::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  pointer-events: none;
}

.form-card {
  background:
    linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 60%, rgba(0,0,0,.5) 100%),
    #131313 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 50px 120px rgba(0,0,0,.6),
    0 30px 80px rgba(240,125,7,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  pointer-events: none;
}
.form-card > * { position: relative; z-index: 1; }
.form-card h3 {
  background: linear-gradient(180deg, #fff 0%, #ffae54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.field input, .field select, .field textarea {
  background: rgba(0,0,0,.4) !important;
  backdrop-filter: blur(8px);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(0,0,0,.6) !important;
}

.form-submit {
  box-shadow: 0 20px 50px rgba(240,125,7,.35), inset 0 1px 0 rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
.form-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}
.form-submit:hover::before { transform: translateX(100%); }

/* ============================================================
   LM2 — S/11 — keep dark, add accent floor + glass
   ============================================================ */
.lm2 { isolation: isolate; }
.lm2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(240,125,7,.10), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.lm2::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -50%;
  height: 80%;
  background-image:
    linear-gradient(to right, rgba(240,125,7,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,125,7,.12) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(1600px) rotateX(70deg);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  animation: wowFloorPan 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.lm2 .container { position: relative; z-index: 2; }
.lm2 h2 em {
  background: linear-gradient(180deg, #ff9d2e 0%, #f07d07 60%, #b55a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lm2 h2 {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lm2-stat .num {
  text-shadow: 0 0 30px rgba(240,125,7,.5);
}

/* ============================================================
   HERO TILES — give them tilt to match S/02
   ============================================================ */
.hero-right { perspective: 1800px; perspective-origin: 50% 30%; }
.tile {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), border-color 400ms ease, box-shadow 400ms ease !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.tile.t1 { transform: rotateY(8deg) rotateX(1deg) translateZ(0); }
.tile.t2 { transform: rotateY(-6deg) rotateX(2deg) translateZ(20px); }
.tile.t3 { transform: rotateY(-6deg) rotateX(-1deg) translateZ(0); }
.tile:hover {
  transform: rotateY(0) rotateX(0) translateZ(40px) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 50px 120px rgba(240,125,7,.18), 0 30px 80px rgba(0,0,0,.6);
  z-index: 5;
}
.tile-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  pointer-events: none;
}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pas::after, .steps::after, .takeaway::after, .audience::after,
  .wall::after, .company::before, .faq::after, .form-section::after, .lm2::after {
    animation: none !important;
  }
}

/* ============================================================
   RESPONSIVE — flatten tilts on tablet
   ============================================================ */
@media (max-width: 1024px) {
  .step-cell, .step-cell:nth-child(1), .step-cell:nth-child(2), .step-cell:nth-child(3),
  .test-card, .test-card:nth-child(1), .test-card:nth-child(2), .test-card:nth-child(3),
  .tile, .tile.t1, .tile.t2, .tile.t3 {
    transform: none !important;
  }
  .step-cell:hover, .test-card:hover, .tile:hover {
    transform: translateY(-6px) !important;
  }
  /* On mobile the 3D tilt is disabled, so the "featured" treatment on
     step-cell #2 (gray bg + orange outline) just looks like a random
     bordered card. Reset it so all stacked cells render uniformly. */
  .step-cell:nth-child(2) { background: transparent !important; }
  .step-cell:nth-child(2)::before { display: none !important; }
}