/* ============================================================
   designLift.css  —  RTW thank-you page  ·  "Wave / Aurora-Tech"
   ------------------------------------------------------------
   A major visual redesign delivered as an override layer (loaded
   AFTER the app bundle, so it wins by source order). Pure skin:
   no DOM, copy, or sizing changes — the bundle's entrance
   animations are left intact.

   New design language (all in RTW colours):
     · signature blue -> cyan -> violet gradient
     · "wave" motif (brand: Ride The Wave) carving section edges
     · layered canvas: dot-grid + soft aurora blobs + fine grain
     · gradient "kicker" pills on every section label
     · gradient-ring bordered glass cards
   ============================================================ */

:root {
  --blue:   #327ff2;
  --cyan:   #22d3ee;
  --violet: #8b5cf6;
  --grad:   linear-gradient(120deg, #327ff2 0%, #22d3ee 50%, #8b5cf6 100%);
  --ink:    #0c1838;
  --glass:  rgba(255, 255, 255, .68);
  --glass-brd: rgba(255, 255, 255, .7);
  --shadow-card:   0 14px 44px rgba(40, 70, 160, .12);
  --shadow-card-h: 0 26px 70px rgba(40, 70, 160, .22);
}

/* gradient-text helper */
.dl-grad-text, .number-value, .hero h1 em {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===================== LAYERED PAGE CANVAS ===================== */
body {
  position: relative;
  background-color: #F4F7FE;
  /* subtle blueprint dot-grid */
  background-image: radial-gradient(rgba(50, 127, 242, .07) 1.1px, transparent 1.1px);
  background-size: 24px 24px;
}
/* soft aurora blobs — gently drift so the page background quietly breathes */
body::before {
  content: ""; position: fixed; inset: -8%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 32% at 8% 4%,   rgba(50, 127, 242, .20), transparent 70%),
    radial-gradient(34% 30% at 92% 10%,  rgba(139, 92, 246, .17), transparent 70%),
    radial-gradient(46% 38% at 82% 90%,  rgba(34, 211, 238, .15), transparent 70%);
  animation: dlDrift 24s ease-in-out infinite alternate;
}
@keyframes dlDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -26px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
/* fine film grain for premium texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero, .content, .footer { position: relative; z-index: 1; }

/* ============================ HERO ============================ */
.hero { background: #0a1024; color: #fff; }
/* repurpose the bundle's blue orb into a full living aurora mesh */
.hero::before {
  top: 0; left: 0; width: 100%; height: 100%;
  transform: none; border-radius: 0;
  background:
    radial-gradient(46% 58% at 18% 6%,  rgba(50, 127, 242, .55), transparent 62%),
    radial-gradient(44% 56% at 86% 16%, rgba(139, 92, 246, .50), transparent 62%),
    radial-gradient(58% 62% at 68% 98%, rgba(34, 211, 238, .44), transparent 62%);
  filter: blur(8px);
  animation: dlAurora 16s ease-in-out infinite alternate;
}
@keyframes dlAurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -16px, 0) scale(1.08); }
}
.hero h1 { font-size: clamp(31px, 6vw, 48px); letter-spacing: -.025em; }
.hero h1 em { font-style: normal; }
.hero-sub { color: rgba(255, 255, 255, .74); }
.hero-check-icon { box-shadow: 0 8px 34px rgba(34, 168, 91, .55), inset 0 1px rgba(255, 255, 255, .4); }

/* ====================== SECTION HEADERS ======================= */
/* turn every overline into a gradient "kicker" pill */
.section-label {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(50, 127, 242, .07); border: 1px solid rgba(50, 127, 242, .22);
  font-weight: 800; letter-spacing: 1.6px;
  background-clip: padding-box;
}
.section-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad); flex: none; box-shadow: 0 0 0 3px rgba(50, 127, 242, .14);
}
/* gradient text sits on the label text itself (kept separate from the pill bg) */
.section-label { color: var(--blue); }
.section h2 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.025em; line-height: 1.16; }

/* gradient divider — forced visible (bundle ships it scaled to 0) */
.divider {
  background: var(--grad) !important; height: 4px !important; width: 56px !important;
  opacity: 1 !important; transform: none !important; border-radius: 3px;
}

/* numbered steps — gradient discs + gradient connector */
.step-number { background: var(--grad); box-shadow: 0 8px 22px rgba(50, 127, 242, .45); }
.step:before { background: linear-gradient(180deg, rgba(50, 127, 242, .5), rgba(139, 92, 246, .12)); }

/* ====================== GLASS CARD SURFACES ==================== */
.why-card, .testimonial, .numbers-bar, .prep-card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-card);
}
.why-card, .testimonial { border-radius: 18px; transition: transform .25s ease, box-shadow .25s ease; }
.why-card:hover, .testimonial:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-h); }
.numbers-bar { border-radius: 18px; overflow: hidden; }
.number-card { background: transparent; border-right-color: rgba(120, 140, 200, .18); }
.number-value { font-weight: 800; }
.testimonial-stars { color: #f5b73c; }
.testimonial-source { border-top-color: rgba(120, 140, 200, .2); }
.prep-card { border-radius: 18px; }
.prep-header {
  background: linear-gradient(120deg, rgba(50, 127, 242, .14), rgba(139, 92, 246, .14));
  border-bottom: 1px solid rgba(50, 127, 242, .16);
}
.prep-checkbox-checked { background: var(--grad) !important; border-color: transparent !important; }
.prep-item:hover { background: rgba(50, 127, 242, .06); }

/* signature gradient-ring border on cards (only where mask compositing works,
   so the ring is a clean 1.5px outline that never covers card content) */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .why-card::after, .testimonial::after, .numbers-bar::after, .prep-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: var(--grad); opacity: .5; pointer-events: none;
    transition: opacity .25s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .why-card:hover::after, .testimonial:hover::after { opacity: 1; }
}

/* =================== DARK CALLOUT -> VIVID BLOCK =============== */
.callout { background: var(--grad); box-shadow: 0 24px 70px rgba(99, 80, 220, .38); border-radius: 22px; }
.callout h3 { color: #fff; }
.callout p { color: rgba(255, 255, 255, .92); }

/* ============================ FOOTER ========================== */
.footer { background: var(--grad); }
.footer-contact {
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* graceful fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .why-card, .testimonial, .numbers-bar, .prep-card { background: rgba(255, 255, 255, .95); }
}