/* ===========================================================================
   Lumina Film Solutions — per-client craft layer (loads AFTER styles.css)
   Theme: "Light Meets Performance." The logo is a brushed-chrome "L" with a
   tinted-glass cityscape and an electric-blue light burst on black — so the
   whole site lives in that world: deep navy-black backgrounds, an electric
   blue light accent, brushed-chrome metal on headings/numbers, and glass-pane
   surfaces (we sell film for glass — the UI should feel like looking through it).
   Distinct from the teal "Night Glass" tint site: navy base (their #0E2746),
   a purer azure light, and metallic chrome treatments deboer doesn't use.
   Keep design here; styles.css stays pristine base.css.
   Mobile-nav safety: never put transform/filter/backdrop-filter on
   .site-header, never blanket-z-index body children.
   =========================================================================== */

/* ---- Token flip: the per-page inline :root sets an orange primary that
   contradicts the (blue/chrome/black) logo. html:root (0,1,1) outranks that
   inline :root (0,1,0) even though it loads after, so the logo identity wins. */
html:root {
  --brand-primary: #2E9BFF;               /* electric-blue light accent (fills, buttons) */
  --brand-secondary: #0A0F1A;             /* deep ink — dark surfaces (hero/header/footer/cards) */
  --brand-text: #E8EFF7;
  --brand-text-muted: #93A3B6;
  --brand-bg: #070B12;
  --brand-bg-alt: #0C1322;
  --brand-border: rgba(255,255,255,.09);
  --shadow-1: 0 1px 3px rgba(0,0,0,.55);
  --shadow-2: 0 18px 46px rgba(0,0,0,.6);
  --lm-blue: #2E9BFF;
  --lm-glow: #62B8FF;                     /* brighter blue for text on near-black */
  --lm-navy: #0E2746;                     /* their brand navy — mid surface */
  --lm-ink: #05070C;                      /* header/footer, one step under bg */
  --lm-chrome-hi: #F4F8FC;
  --lm-chrome-mid: #B4C3D2;
  --lm-chrome-lo: #7A8A9B;
}

::selection { background: rgba(46,155,255,.5); color: #fff; }

/* Layered page background: an electric light-burst low-left (echoes the logo
   flare), a cool wash top-right, faint vertical "glass pane" lines, base
   gradient. Lives on body so there are no overlay z-index games. */
body {
  background:
    radial-gradient(760px 520px at 12% 108%, rgba(46,155,255,.18), transparent 60%),
    radial-gradient(900px 640px at 92% -120px, rgba(46,155,255,.08), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #070B12, #05070C);
  background-color: #070B12;
}

/* ---- Brushed-chrome text helper (the "L" is polished steel). Used on eyebrow
   labels, stat numbers, and the signature headline. */
.lm-chrome {
  background: linear-gradient(180deg, var(--lm-chrome-hi) 0%, var(--lm-chrome-mid) 46%, var(--lm-chrome-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Editorial serif emphasis: italic electric-blue word inside headings. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; color: var(--lm-glow); }

/* =========================== HEADER / NAV ================================= */
/* Ink-black bar with a blue signature rule; the black logo lockup sits on its
   native background instead of floating in a white bar. */
.site-header {
  background: var(--lm-ink);
  border-top: 3px solid var(--lm-blue);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-logo img { height: 46px; max-width: 240px; }
.nav-links a { color: var(--brand-text); }
.nav-links a:hover { color: var(--lm-glow); }
.nav-toggle { color: #fff; }
.nav-cta { background: var(--lm-blue); color: #fff; box-shadow: 0 6px 20px rgba(46,155,255,.35); }
.nav-cta:hover { background: var(--lm-glow); opacity: 1; }
@media (max-width: 860px) { .nav-links { background: var(--lm-ink); } }
.nav-dropdown { background: #0B1220; border-color: rgba(255,255,255,.1); }
.nav-dropdown a { color: var(--brand-text); }
.nav-dropdown a:hover { background: rgba(46,155,255,.12); color: var(--lm-glow); }

/* ============================== HERO ===================================== */
/* Kill the base navy→orange gradient; build a black stage with a blue light
   burst rising from the lower-left, faint vertical glass panes overlaid. */
.x-hero.x-hero--gradient {
  background:
    radial-gradient(620px 620px at 14% 116%, rgba(46,155,255,.42), rgba(46,155,255,.06) 46%, transparent 66%),
    radial-gradient(1100px 700px at 82% -12%, rgba(14,39,70,.9), transparent 60%),
    linear-gradient(180deg, #060910 0%, #080D18 55%, #05070C 100%);
  min-height: 88vh;
}
/* vertical "glass pane" lines + a thin chrome baseline under the hero */
.x-hero.x-hero--gradient::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1.5px, transparent 1.5px 120px);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.x-hero.x-hero--gradient::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(46,155,255,.7), transparent);
}
.x-hero .x-eyebrow {
  background: rgba(46,155,255,.12); color: var(--lm-glow);
  border: 1px solid rgba(46,155,255,.4); backdrop-filter: none;
  letter-spacing: .18em;
}
.x-hero h1 { text-shadow: 0 2px 40px rgba(46,155,255,.25); }
/* staggered entrance */
.x-hero .x-eyebrow { animation: lmUp .6s .05s both; }
.x-hero h1 { animation: lmUp .7s .16s both; }
.x-hero .x-sub { animation: lmUp .7s .28s both; }
.x-hero .x-cta-row { animation: lmUp .7s .4s both; }
.x-hero .x-chips { animation: lmUp .7s .52s both; }
@keyframes lmUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.x-btn-primary { background: var(--lm-blue); box-shadow: 0 12px 34px rgba(46,155,255,.34); }
.x-btn-primary:hover { background: var(--lm-glow); }

/* ============================== STATS ==================================== */
.x-stats { background: var(--lm-ink); border-bottom: 1px solid rgba(255,255,255,.06); }
.x-stat .num {
  font-family: var(--font-heading); font-weight: 600; font-size: 2.9rem;
  background: linear-gradient(180deg, var(--lm-chrome-hi), var(--lm-chrome-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.x-stat .lbl { color: rgba(255,255,255,.66); }

/* ====================== SECTION HEADINGS / EYEBROWS ====================== */
.x-head .k { color: var(--lm-glow); }
.x-head .k::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--lm-glow); margin-right: 10px; vertical-align: middle; opacity: .7; }

/* ====================== SERVICE CARDS (no photos) ======================== */
/* Lumina supplied no imagery, so the cards must read as designed, not empty.
   Make each a tinted-glass pane: navy glass, a bright top light-edge, an inner
   sheen, a ghosted index mark, and a blue border-sweep + lift on hover. */
.x-services { gap: 20px; }
.x-svc {
  min-height: 260px; align-items: stretch;
  background:
    linear-gradient(180deg, rgba(46,155,255,.10), transparent 34%),
    linear-gradient(155deg, #12203A 0%, #0B1526 60%, #0A101E 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.4);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.x-svc::after { /* neutralize the photo-scrim gradient */
  background: radial-gradient(420px 200px at 82% -10%, rgba(46,155,255,.16), transparent 62%);
}
/* top light edge */
.x-svc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(46,155,255,.85), transparent);
  transform: scaleX(.3); transform-origin: left; transition: transform .3s ease; opacity: .7;
}
.x-svc:hover { transform: translateY(-5px); border-color: rgba(46,155,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 50px rgba(0,0,0,.5); }
.x-svc:hover::before { transform: scaleX(1); opacity: 1; }
.x-svc-body { justify-content: flex-end; display: flex; flex-direction: column; height: 100%; }
.x-svc h3 { font-family: var(--font-heading); }
.x-svc .x-arrow { color: var(--lm-glow); }
.x-svc:hover .x-arrow span { transform: translateX(4px); display: inline-block; transition: transform .2s; }

/* ======================= WHY / FEATURES ================================== */
.x-feat .ic { background: rgba(46,155,255,.12); border: 1px solid rgba(46,155,255,.28); }
.x-feat .ic svg { color: var(--lm-glow); }
.x-feat h4 { color: var(--brand-text); }
.x-feat p { color: var(--brand-text-muted); }

/* ============================ STEPS ===================================== */
.x-step { border-left: 1px solid rgba(255,255,255,.1); padding-left: 22px; }
.x-step .n { color: rgba(46,155,255,.5); font-family: var(--font-heading); font-weight: 600; }
.x-step h4 { color: var(--brand-text); }
.x-step p { color: var(--brand-text-muted); }

/* ===================== CARDS (areas, generic grids) ===================== */
.card {
  background: linear-gradient(160deg, #101B30, #0A111F);
  border: 1px solid rgba(255,255,255,.08); color: var(--brand-text);
}
.card h3 { color: var(--brand-text); }
.card p { color: var(--brand-text-muted); }
.card:hover { border-color: rgba(46,155,255,.45); box-shadow: 0 16px 40px rgba(0,0,0,.45); }

/* ============================= FAQ ====================================== */
.x-faq details { border-bottom: 1px solid rgba(255,255,255,.1); }
.x-faq summary { color: var(--brand-text); }
.x-faq summary::after { color: var(--lm-glow); }
.x-faq p { color: var(--brand-text-muted); }

/* ============================ BODY COPY ================================= */
.x-body .x-lead { color: var(--brand-text); }
.x-body p { color: var(--brand-text-muted); }
.x-body h2 { color: var(--brand-text); }
.x-body h3 { color: var(--brand-text); }
.x-body ul.x-checklist li { color: var(--brand-text-muted); }
.x-body ul.x-checklist li svg { color: var(--lm-glow); flex: 0 0 auto; }
.x-body a { color: var(--lm-glow); }

/* ======================= BIG CTA / BANNERS ============================== */
.x-bigcta {
  background:
    radial-gradient(560px 320px at 20% 120%, rgba(46,155,255,.4), transparent 62%),
    linear-gradient(180deg, #0B1526, #070B12);
  border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07);
}
.x-btn-white { background: linear-gradient(180deg, #fff, #E4ECF4); color: #0A0F1A; }
.x-btn-white:hover { background: #fff; }
.x-banner {
  background:
    radial-gradient(520px 400px at 88% -20%, rgba(46,155,255,.22), transparent 60%),
    linear-gradient(180deg, #070C16, #05070C);
}
.x-banner .x-eyebrow { background: rgba(46,155,255,.12); color: var(--lm-glow); border: 1px solid rgba(46,155,255,.4); }

/* ============================= FOOTER =================================== */
.site-footer { background: var(--lm-ink); border-top: 1px solid rgba(255,255,255,.08); }
.site-footer::before { content: ""; display: block; height: 2px; margin-bottom: 40px; background: linear-gradient(90deg, transparent, rgba(46,155,255,.6), transparent); }
.footer-grid h4 { color: var(--lm-chrome-mid); }
.x-social-ico:hover { background: rgba(46,155,255,.22) !important; transform: translateY(-2px); }

/* =================== SIGNATURE: film shade + rejection =================== */
/* Lumina's one-of-a-kind element: a glass-pane "shade ladder" that shows what
   film does (clear -> limo) over a bright light source, plus the rejection
   stats. It sells the product visually without a single photograph. */
.lm-sig { position: relative; overflow: hidden; }
.lm-sig .container { position: relative; z-index: 2; }
.lm-shade-stage {
  position: relative; border-radius: 14px; overflow: hidden; margin-top: 30px;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(600px 300px at 50% 120%, rgba(46,155,255,.5), transparent 60%), #060910;
}
.lm-panes { display: grid; grid-template-columns: repeat(4, 1fr); }
.lm-pane {
  position: relative; min-height: 220px; padding: 22px 18px; display: flex; flex-direction: column; justify-content: flex-end;
  border-right: 1px solid rgba(255,255,255,.08); color: #fff;
}
.lm-pane:last-child { border-right: 0; }
.lm-pane .glass { position: absolute; inset: 0; z-index: 0; }
.lm-pane .glass.p1 { background: linear-gradient(180deg, rgba(10,20,38,.14), rgba(10,20,38,.22)); }
.lm-pane .glass.p2 { background: linear-gradient(180deg, rgba(8,16,30,.44), rgba(8,16,30,.52)); }
.lm-pane .glass.p3 { background: linear-gradient(180deg, rgba(6,12,24,.68), rgba(6,12,24,.74)); }
.lm-pane .glass.p4 { background: linear-gradient(180deg, rgba(4,8,16,.9), rgba(4,8,16,.93)); }
.lm-pane .lbl { position: relative; z-index: 1; }
.lm-pane .lbl .vlt { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; color: #fff; line-height: 1; }
.lm-pane .lbl .nm { display: block; margin-top: 6px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); font-weight: 700; }
.lm-rej { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.lm-rej .r { text-align: center; padding: 22px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(160deg, #101B30, #0A111F); }
.lm-rej .r b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 2.4rem; background: linear-gradient(180deg, var(--lm-chrome-hi), var(--lm-chrome-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lm-rej .r span { display: block; margin-top: 6px; color: var(--brand-text-muted); font-size: .9rem; }
@media (max-width: 720px) {
  .lm-panes { grid-template-columns: repeat(2, 1fr); }
  .lm-pane:nth-child(2) { border-right: 0; }
  .lm-pane:nth-child(1), .lm-pane:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .lm-rej { grid-template-columns: 1fr; }
}