/* ============================================================
   FOUNDER COCKPIT — DEPTH LAYER
   ------------------------------------------------------------
   One light model for the whole site, applied on top of the
   existing styles. Adds only paint (shadow / gradient / border /
   hover transform) — never layout — so nothing can reflow.

   LIGHT MODEL
     key      warm gold, top-centre, ~18° above the surface
     fill     cool navy ambient from below-left
     contact  a tight dark line where an element meets the page

   Every raised surface therefore gets, in order:
     1. a 1px white top edge   (the key catching the bevel)
     2. a soft warm bloom      (the key spilling onto the page)
     3. a tight contact shadow (what actually reads as "3D")
     4. a wide cool ambient    (the room)
   ============================================================ */

:root {
  /* the four shadow tiers of the light model */
  --d-contact: 0 1px 2px rgba(12, 18, 51, .07);
  --d-near:    0 4px 10px -2px rgba(12, 18, 51, .09);
  --d-mid:     0 14px 30px -8px rgba(12, 18, 51, .14);
  --d-far:     0 40px 70px -30px rgba(12, 18, 51, .28);
  --d-bloom:   0 10px 40px -14px rgba(233, 203, 161, .40);

  /* the bevel: key light on the top edge, ambient on the bottom */
  --d-bevel: inset 0 1px 0 rgba(255, 255, 255, .92),
             inset 0 -1px 0 rgba(12, 18, 51, .05);

  --d-rest:  var(--d-contact), var(--d-near), var(--d-mid);
  --d-lift:  var(--d-contact), var(--d-near), var(--d-mid), var(--d-far), var(--d-bloom);

  /* brand gradients */
  --grad-surface: linear-gradient(176deg, #FFFFFF 0%, #FDFBF7 46%, #F7F2E9 100%);
  --grad-gold:    linear-gradient(135deg, #F8D9AB 0%, #E9CBA1 38%, #C9A87C 72%, #E9CBA1 100%);
  --grad-gold-lo: linear-gradient(135deg, rgba(248, 217, 171, .16), rgba(201, 168, 124, .06));
  --grad-navy:    linear-gradient(160deg, #141C46 0%, #0C1233 58%, #070B22 100%);
  --grad-rim:     linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(233, 203, 161, .55) 42%, rgba(12, 18, 51, .10));
}

/* ---- 1. raised surfaces -------------------------------------- */
/* Only elements that already own an opaque surface get the gradient —
   applying it to a transparent block would invent a panel that the
   layout never asked for. */
.pain-card,
.testimonial-card,
.pill-v960,
.about-feature,
.contact-info-card {
  background-image: var(--grad-surface);
}

/* Only plain, flat card surfaces. Anything that already ships crafted
   styling of its own (.method-step is a transparent column, .faq-item /
   .about-name-card / .services-nav-item carry their own border+shadow)
   is left completely alone — overriding it flattened the original art. */
.pain-card,
.testimonial-card,
.pill-v960,
.about-feature,
.faq-action-card,
.contact-info-card {
  box-shadow: var(--d-bevel), var(--d-rest);
  /* deliberately no border-radius — each component keeps its own */
  transition:
    box-shadow .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    transform  .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    border-color .45s ease;
  will-change: transform;
}

/* The lift: the card rises toward the key light and tips its top
   edge a degree toward the viewer. One degree is the whole trick —
   more reads as a gimmick. */
.pain-card:hover,
.testimonial-card:hover,
.pill-v960:hover,
.about-feature:hover,
.faq-action-card:hover,
.contact-info-card:hover {
  transform: perspective(1100px) translate3d(0, -7px, 0) rotateX(1.1deg);
  box-shadow: var(--d-bevel), var(--d-lift);
}

/* Gold rim that only resolves on approach — the "expensive" cue. */
.pain-card,
.testimonial-card,
.pill-v960,
.faq-action-card,
.contact-info-card,
.about-name-card {
  position: relative;
}

.pain-card::after,
.testimonial-card::after,
.pill-v960::after,
.faq-action-card::after,
.contact-info-card::after,
.about-name-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .45;
  transition: opacity .45s ease;
  pointer-events: none;
}

.pain-card:hover::after,
.testimonial-card:hover::after,
.pill-v960:hover::after,
.faq-action-card:hover::after,
.contact-info-card:hover::after { opacity: 1; }

/* ---- 2. icons & emblems -------------------------------------- */
/* INTENTIONALLY EMPTY. The gold emblems, method nodes and card icons
   already carry hand-tuned radial fills and shadows in premium.css;
   layering a generic gradient over them washed the gold out. Depth for
   these lives in their own rules, not here. */

/* ---- 3. buttons: pressable, with a real bevel ----------------- */
.btn-primary {
  background-image: var(--grad-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -2px 0 rgba(139, 116, 82, .28),
    var(--d-near),
    0 10px 26px -10px rgba(175, 153, 122, .85);
  transition:
    transform .28s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    box-shadow .28s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    filter .28s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 0 rgba(139, 116, 82, .3),
    var(--d-mid),
    0 18px 40px -12px rgba(175, 153, 122, .95);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 5px rgba(139, 116, 82, .35),
    var(--d-contact);
}

.btn-outline {
  box-shadow: var(--d-bevel), var(--d-contact);
  transition: transform .28s var(--ease, cubic-bezier(.22, 1, .36, 1)), box-shadow .28s ease;
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-bevel), var(--d-near), var(--d-mid);
}

/* ---- 4. badges & pills: small, so only two tiers -------------- */
/* .section-label is deliberately absent: it is a rule + caption, not a
   pill, and the white inset bevel drew a stray light line across it on
   the dark sections. */
.hero-badge,
.hero-pill,
.pill-v960-tags > *,
.outcome-flow-tag,
.hero-trust-tags > * {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 6px -1px rgba(12, 18, 51, .16),
    0 8px 18px -10px rgba(12, 18, 51, .3);
}

/* ---- 5. framed media: a plate sitting on the page ------------- */
.hero-stage-frame,
.pill-v960-photo,
.about-hero-media,
.fcp-mock {
  box-shadow:
    0 2px 4px rgba(12, 18, 51, .08),
    0 18px 40px -14px rgba(12, 18, 51, .22),
    0 60px 110px -50px rgba(12, 18, 51, .45);
}

/* ---- 6. section beds: depth behind the content ---------------- */
/* A very wide, very soft gradient bed keeps sections from reading
   as flat colour bands. Painted on a pseudo-element so section
   backgrounds and their own children stay untouched. */
/* .cases and .pillars-v960 already own their ::before in premium.css —
   left alone on purpose rather than overwritten. */
.pain,
.about,
.method,
.faq {
  position: relative;
  isolation: isolate;
}

.pain::before,
.about::before,
.method::before,
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 44% at 18% 0%, rgba(233, 203, 161, .16), transparent 66%),
    radial-gradient(52% 40% at 88% 100%, rgba(12, 18, 51, .06), transparent 68%);
}

/* Dark sections get the navy gradient + a gold horizon line. */
.fcp {
  background-image: var(--grad-navy);
}

/* ---- 7. gold rules read as metal, not as a 1px line ----------- */
.gold-rule,
.pill-v960-rule,
.outcome-flow-rule {
  background-image: var(--grad-gold);
  box-shadow: 0 1px 3px rgba(175, 153, 122, .45);
}

/* ---- 8. nav: a pane of glass over the page -------------------- */
.site-nav {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    0 1px 0 rgba(12, 18, 51, .06);
}

.site-nav.scrolled {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    0 2px 10px rgba(12, 18, 51, .07),
    0 18px 40px -30px rgba(12, 18, 51, .5);
}

/* ---- reduced motion ------------------------------------------ */
/* The depth stays (it's paint, not motion); only the lift goes. */
@media (prefers-reduced-motion: reduce) {
  .pain-card, .testimonial-card, .pill-v960, .about-feature,
  .faq-action-card, .contact-info-card,
  .btn-primary, .btn-outline {
    transition: box-shadow .2s ease;
  }
  .pain-card:hover, .testimonial-card:hover, .pill-v960:hover,
  .about-feature:hover, .faq-action-card:hover, .contact-info-card:hover,
  .btn-primary:hover, .btn-outline:hover { transform: none; }
}

/* ---- touch: no hover state, so give the rest state more body -- */
@media (hover: none) {
  .pain-card, .testimonial-card, .pill-v960, .faq-action-card, .contact-info-card {
    box-shadow: var(--d-bevel), var(--d-contact), var(--d-near), var(--d-mid), var(--d-far);
  }
  .pain-card::after, .testimonial-card::after, .pill-v960::after,
  .faq-action-card::after, .contact-info-card::after { opacity: .7; }
}

/* ============================================================
   FLUID WIDE LAYOUT
   ------------------------------------------------------------
   The base grid is locked to a 1240px container, which leaves a
   27" display two thirds empty. Below 1440px nothing changes —
   laptops keep the tuned line length. Above it the container and
   the rhythm around it grow with the viewport, so the page fills
   any screen without the type turning into a 140-character line.
   ============================================================ */

@media (min-width: 1440px) {
  :root {
    --container: clamp(1240px, 86vw, 1720px);
    --section-py: clamp(96px, 6.4vw, 152px);
  }
  .container { padding-inline: clamp(32px, 3.2vw, 72px); }

  /* Wider container = wider cards; the gutters have to grow with them
     or the grid reads as one solid slab. */
  .pain-grid,
  .cases-grid,
  .testimonials-grid { gap: clamp(20px, 1.7vw, 34px); }
  .footer-grid { gap: clamp(48px, 3.6vw, 80px); }
}

@media (min-width: 2000px) {
  :root {
    --container: min(88vw, 2040px);
    --nav-h: 88px;
  }
  /* Four pain cards across 2000px would each be ~470px wide with a
     three-word line — the extra column keeps the measure honest. */
  .method-flow { gap: clamp(24px, 2vw, 48px); }
  body { font-size: 17px; }
}

@media (min-width: 2560px) {
  :root { --container: min(84vw, 2400px); }
  body { font-size: 18px; }
}

/* Full-bleed sections stay full-bleed at every width — the flight,
   the dark platform band and the footer must never inherit a max-width. */
.ff,
.ff-stage { max-width: none; }