/* ============================================================
   PNSmart — light theme layer (loads after main.css / home.css)
   Bright, natural, cheerful: warm white bg, deep green text,
   vivid fern-green + sunlight-gold accents. Footer, full-screen
   menu, and data panels stay deep green for contrast.
   ============================================================ */

:root {
  --bg: #F6FAF3;
  --surface: #FFFFFF;
  --surface-2: #EDF5EA;
  --line: rgba(21, 58, 35, 0.14);

  --text: #16311F;
  --text-dim: #43604E;
  --text-faint: #6E8677;

  --cloud: #12271A;      /* headings: deep ink-green */
  --mist: #2C4A38;       /* secondary UI text */
  --aqua: #2E8B57;       /* kickers, links */
  --cyan: #2FA35E;       /* vivid accent */
  --teal: #2FA35E;
  --forest-teal: #57C278;
  --gold: #E8A93B;

  --shadow-card: 0 14px 40px rgba(23, 64, 39, 0.12);
  --glow-cyan: 0 0 18px rgba(47, 163, 94, 0.3);
}

body { background: var(--bg); color: var(--text); }
::selection { background: rgba(47, 163, 94, 0.25); color: var(--cloud); }
a { color: var(--aqua); }
a:hover { color: var(--cyan); }

/* ---------- Header ---------- */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(23, 64, 39, 0.1);
}
.nav-links a { color: var(--mist); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.menu-toggle { border-color: rgba(21, 58, 35, 0.3); color: var(--mist); }
.brand .brand-name { color: #1C5B36; }
.brand .brand-sub { color: var(--aqua); }
.skip-link { background: var(--cyan); color: #fff; }

/* ---------- Full-screen menu stays deep green ---------- */
.menu-overlay {
  --cloud: #F6FAF5; --mist: #DFEDDF; --text-faint: #9DBCA6;
  background: rgba(10, 30, 18, 0.97);
}
.menu-overlay a { color: #E7F3E7; }
.menu-overlay a:hover, .menu-overlay a[aria-current="page"] { color: #8FE3A6; }
.menu-overlay .menu-meta { color: #9DBCA6; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(120deg, #2FA35E, #57C278);
  color: #fff;
  box-shadow: 0 8px 24px rgba(47, 163, 94, 0.35);
}
.btn-primary:hover { color: #fff; box-shadow: 0 12px 32px rgba(47, 163, 94, 0.45), var(--glow-cyan); }
.btn-ghost { color: var(--text); border-color: rgba(21, 58, 35, 0.3); }
.btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Chips / pills / flow steps ---------- */
.chip, .pill-list li {
  background: #fff;
  border-color: rgba(21, 58, 35, 0.18);
  color: var(--mist);
}
.chip:hover { color: var(--cyan); border-color: var(--cyan); }
.chip[aria-pressed="true"], .chip.active {
  background: linear-gradient(120deg, #2FA35E, #57C278);
  border-color: #2FA35E;
  color: #fff;
}
.flow-steps { color: var(--mist); }
.flow-steps .arrow { color: var(--gold); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border-color: var(--line);
}
.card:hover {
  border-color: rgba(47, 163, 94, 0.45);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(47, 163, 94, 0.1), 0 14px 40px rgba(23, 64, 39, 0.16);
}
.card p, .card ul { color: var(--text-dim); }
.card .card-icon { color: var(--cyan); }
.why-item { background: #fff; border-color: var(--line); color: var(--mist); }
.why-item svg { color: var(--cyan); }
.proto { background: #fff; border-color: var(--line); }
.proto .proto-name { color: var(--cloud); }
.brand-cloud span { background: #fff; border-color: var(--line); color: var(--mist); }

/* ---------- Data panels stay deep-green glass ---------- */
.data-panel {
  --cloud: #F6FAF5; --aqua: #9ECFA4; --text-faint: #9DBCA6;
  background: rgba(13, 38, 24, 0.92);
  border-color: rgba(158, 207, 164, 0.22);
}
.data-panel .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(158, 207, 164, 0.14); }
.data-panel .stat .stat-value { color: #F6FAF5; }
.data-panel .stat.good .stat-value { color: #8FE3A6; }
.data-panel .stat.warn .stat-value { color: #FFD37A; }

/* ---------- Status lines / sim badges ---------- */
.status-line { color: var(--text-dim); }
.sim-badge { background: rgba(255, 123, 107, 0.1); }
.sim-badge.ok { background: rgba(47, 163, 94, 0.12); color: #1C7A43; border-color: rgba(47, 163, 94, 0.45); }

/* ---------- Process / timeline ---------- */
.process-step .step-dot, .timeline-step .t-dot {
  background: #fff;
  border-color: #57C278;
  color: #1C7A43;
  box-shadow: 0 6px 18px rgba(47, 163, 94, 0.25);
}
.process-step p { color: var(--text-faint); }

/* ---------- CTA band / page hero ---------- */
.cta-band {
  background:
    radial-gradient(900px 380px at 80% 120%, rgba(87, 194, 120, 0.25), transparent),
    radial-gradient(700px 320px at 10% -30%, rgba(232, 169, 59, 0.16), transparent),
    linear-gradient(160deg, #EAF5E6, #F6FAF3);
}
.page-hero {
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(87, 194, 120, 0.22), transparent),
    radial-gradient(700px 300px at 0% 110%, rgba(232, 169, 59, 0.12), transparent),
    linear-gradient(180deg, #EFF7EC, #F6FAF3);
}
.page-hero::after { background: linear-gradient(90deg, transparent, rgba(47, 163, 94, 0.45), transparent); }

/* ---------- Forms ---------- */
.form-card { background: #fff; border-color: var(--line); }
.form-field label { color: var(--mist); }
.form-field input, .form-field select, .form-field textarea {
  background: #FBFDFA;
  border-color: rgba(21, 58, 35, 0.22);
  color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(47, 163, 94, 0.15);
}
.check-item { background: #FBFDFA; border-color: rgba(21, 58, 35, 0.14); color: var(--text-dim); }
.check-item:hover { border-color: var(--cyan); }
.consent-row { color: var(--text-dim); }
.form-success svg { color: var(--cyan); }
.newsletter input { background: #fff; border-color: rgba(21, 58, 35, 0.2); color: var(--text); }
.newsletter input::placeholder { color: var(--text-faint); }
.site-footer .newsletter input { background: rgba(255,255,255,0.08); border-color: rgba(158,207,164,0.25); color: #F6FAF5; }
.site-footer .newsletter input::placeholder { color: #9DBCA6; }

/* ---------- Tabs / FAQ ---------- */
.tab-btn { background: #fff; color: var(--text-dim); border-color: rgba(21, 58, 35, 0.12); }
.tab-btn[aria-selected="true"] { background: linear-gradient(120deg, #2FA35E, #57C278); color: #fff; border-color: #2FA35E; }
.faq-item { background: #fff; border-color: var(--line); }
.faq-q { color: var(--cloud); }
.faq-q:hover { color: var(--cyan); }
.faq-a { color: var(--text-dim); }

/* ---------- Footer stays deep green ---------- */
.site-footer {
  --cloud: #F6FAF5; --aqua: #9ECFA4; --text-dim: #ADC9B2; --text-faint: #8AA894;
  --line: rgba(158, 207, 164, 0.2);
  background: linear-gradient(180deg, #0E2A1B, #081C10);
  color: #DDEBDE;
}
.site-footer .brand .brand-name { color: #F6FAF5; }
.site-footer .footer-grid ul a { color: #ADC9B2; }
.site-footer .footer-grid ul a:hover { color: #8FE3A6; }
.site-footer .footer-bottom { color: #8AA894; }
.site-footer .footer-tagline { color: #9ECFA4; }
.site-footer .social-links a { color: #ADC9B2; }
.site-footer .social-links a:hover { color: #8FE3A6; }

/* ---------- Cookie banner ---------- */
.cookie-banner { background: rgba(255, 255, 255, 0.97); border-color: var(--line); }
.cookie-banner p { color: var(--text-dim); }

/* ---------- Legal ---------- */
.legal-note { border-color: rgba(197, 138, 30, 0.5); background: rgba(232, 169, 59, 0.1); color: #8A6414; }
.legal-section p, .legal-section li { color: var(--text-dim); }

/* ---------- Hero (photo top -> light page bottom) ---------- */
.hero::before {
  background:
    linear-gradient(90deg, #F6FAF3 30%, rgba(246, 250, 243, 0.82) 48%, rgba(246, 250, 243, 0.15) 72%, rgba(246, 250, 243, 0) 100%),
    linear-gradient(180deg, rgba(246, 250, 243, 0.5), rgba(246, 250, 243, 0) 30%, rgba(246, 250, 243, 0) 62%, rgba(246, 250, 243, 0.7) 86%, #F6FAF3 98%);
}
.hero-content { padding-bottom: clamp(6.5rem, 13vh, 9rem); }
.hero-content .kicker { color: #1C7A43; }
.hero-labels li {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(21, 58, 35, 0.18);
  color: var(--mist);
  backdrop-filter: blur(6px);
}
.scroll-hint { color: var(--text-faint); }
.scroll-hint::after { background: linear-gradient(180deg, var(--cyan), transparent); }

/* ---------- Circuit trace on light ---------- */
.trace-path { stroke: rgba(21, 58, 35, 0.12); }
.trace-path-lit { filter: drop-shadow(0 0 5px rgba(232, 169, 59, 0.7)); }
.trace-pulse { fill: #E8A93B; filter: drop-shadow(0 0 9px rgba(232, 169, 59, 1)); }
.scene-node { background: #F6FAF3; border-color: rgba(21, 58, 35, 0.3); }
.scene.active .scene-node {
  border-color: #E8A93B;
  background: #E8A93B;
  box-shadow: 0 0 12px rgba(232, 169, 59, 0.8);
}

/* photo cards: soften the dark bottom gradient on light theme */
.photo-card { border-color: rgba(21, 58, 35, 0.16); }
.photo-card::after {
  background: linear-gradient(180deg, rgba(8, 26, 17, 0), rgba(8, 26, 17, 0) 55%, rgba(8, 26, 17, 0.45) 100%);
}

/* scene visuals: keep photos vivid while inactive, just slightly muted */
.scene-visual { opacity: 0.55; filter: saturate(0.75); }

/* 404 / thank-you */
.center-page p { color: var(--text-dim); }

/* hero image: crop out the baked-in storyboard title at the top */
.hero-art img { object-position: center bottom; }

/* scene images carry their own baked titles + HUD tags — drop old captions */
.scene-photo .photo-chip, .finale-art .photo-chip { display: none; }

/* high-res hero/finale/lighting photos: natural framing, no forced crops */
.hero-art img { object-position: center; }
.room-wrap img { aspect-ratio: auto; }
.finale-art .photo-card img { aspect-ratio: auto; }

/* ============================================================
   PNSmart OS demo panel + hero status widget
   ============================================================ */
.os-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #57C278;
  box-shadow: 0 0 8px rgba(87, 194, 120, 0.9);
  display: inline-block;
  flex: none;
}

/* hero floating widget */
.hero-widget {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: 24%;
  z-index: 5;
  min-width: 230px;
  background: rgba(10, 30, 18, 0.78);
  border: 1px solid rgba(158, 207, 164, 0.3);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(8, 26, 17, 0.35);
  color: #DFEDDF;
  font-size: 0.86rem;
  animation: floatChip 8s ease-in-out infinite;
}
.hw-row { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; padding: 0.22rem 0; }
.hw-row span { color: #9DBCA6; }
.hw-row b { font-family: var(--font-head); font-weight: 600; color: #F6FAF5; }
.hw-head {
  gap: 0.5rem; justify-content: flex-start;
  font-family: var(--font-head); font-weight: 600; color: #8FE3A6;
  border-bottom: 1px solid rgba(158, 207, 164, 0.18);
  padding-bottom: 0.5rem; margin-bottom: 0.4rem;
}
@media (max-width: 1080px) { .hero-widget { display: none; } }

/* OS panel — dark glass on the light page */
.os-panel {
  background:
    radial-gradient(700px 300px at 90% -20%, rgba(87, 194, 120, 0.18), transparent),
    linear-gradient(160deg, #0F2E1D, #081C10);
  border: 1px solid rgba(158, 207, 164, 0.25);
  border-radius: 26px;
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: 0 28px 70px rgba(10, 40, 24, 0.35);
  color: #DFEDDF;
}
.os-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.os-brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-head); font-weight: 700; color: #F6FAF5;
  letter-spacing: 0.04em;
}
.os-clock { font-family: var(--font-head); font-weight: 600; color: #9ECFA4; margin-left: auto; }
.os-net {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(158, 207, 164, 0.3);
  border-radius: 999px;
  color: #DFEDDF;
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.os-net:hover { border-color: #8FE3A6; }
.os-net-icon {
  width: 14px; height: 14px; position: relative; flex: none;
  border: 2px solid #8FE3A6; border-bottom: none; border-left: none; border-right: none;
  border-radius: 50% 50% 0 0;
}
.os-net-icon::before {
  content: ""; position: absolute; left: 50%; top: 55%;
  width: 4px; height: 4px; border-radius: 50%; background: #8FE3A6;
  transform: translateX(-50%);
}
.os-net[aria-pressed="true"] { border-color: rgba(255, 179, 92, 0.6); }
.os-net[aria-pressed="true"] .os-net-icon,
.os-net[aria-pressed="true"] .os-net-icon::before { border-color: #FFB35C; background: #FFB35C; }
.os-offline-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #FFD37A;
  background: rgba(232, 169, 59, 0.12);
  border: 1px solid rgba(232, 169, 59, 0.35);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
}
.os-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }
.os-mode {
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 600;
  color: #CDE4D0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(158, 207, 164, 0.25);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.os-mode:hover { border-color: #8FE3A6; transform: translateY(-1px); }
.os-mode.active {
  background: linear-gradient(120deg, #2FA35E, #57C278);
  border-color: #57C278;
  color: #fff;
}
.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}
.os-tile {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(158, 207, 164, 0.16);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  transition: background 0.4s, border-color 0.4s;
}
.os-tile-head {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #9DBCA6; margin-bottom: 0.4rem;
  font-family: var(--font-head); font-weight: 600;
}
.os-value {
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: #F6FAF5;
  transition: opacity 0.3s;
}
.os-sub { font-size: 0.78rem; color: #9DBCA6; margin-top: 0.2rem; transition: opacity 0.3s; }
.os-panel.switching .os-value, .os-panel.switching .os-sub { opacity: 0; }
.os-feed {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 1.1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(158, 207, 164, 0.14);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  min-height: 2.9rem;
}
.os-feed-agent {
  font-family: var(--font-head); font-weight: 700; color: #8FE3A6; flex: none;
}
.os-feed-text { color: #DFEDDF; }
.os-feed-time { margin-left: auto; font-size: 0.74rem; color: #7FA08C; flex: none; }
.os-feed.tick .os-feed-agent, .os-feed.tick .os-feed-text { opacity: 0; }
.os-feed-agent, .os-feed-text { transition: opacity 0.35s; }
.os-voice { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.os-voice-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: #9ECFA4;
  margin-right: 0.4rem;
}
.os-panel .chip {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(158, 207, 164, 0.3);
  color: #DFEDDF;
  font-style: italic;
}
.os-panel .chip:hover { border-color: #8FE3A6; color: #fff; }

/* ============================================================
   Split hero: text on light bg, scene-01 in a matching photo card
   ============================================================ */
.hero.hero-split {
  min-height: auto;
  display: block;
  align-items: initial;
  padding: calc(var(--nav-h) + clamp(3.5rem, 9vh, 6.5rem)) 0 clamp(3.5rem, 8vh, 5.5rem);
  background:
    radial-gradient(1000px 420px at 88% -10%, rgba(87, 194, 120, 0.22), transparent),
    radial-gradient(700px 300px at 0% 115%, rgba(232, 169, 59, 0.14), transparent),
    linear-gradient(180deg, #EFF7EC, #F6FAF3);
  overflow: visible;
}
.hero-split::before { display: none; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-split .hero-content { width: auto; margin: 0; padding: 0; }
.hero-split .hero-labels { margin-top: 2rem; }
.hero-media { position: relative; }
.hero-media .photo-card {
  box-shadow: 0 30px 80px rgba(23, 64, 39, 0.25);
}
.hero-media .hero-widget {
  position: absolute;
  left: -1.8rem; right: auto;
  bottom: -2rem;
  animation: floatChip 8s ease-in-out infinite;
}
.hero-split .scroll-hint {
  position: static;
  transform: none;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  width: max-content;
}
@media (max-width: 1080px) {
  .hero-media .hero-widget { display: block; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 560px; }
  .hero-media .hero-widget { left: auto; right: -0.6rem; bottom: -1.6rem; }
}
@media (max-width: 620px) {
  .hero-media .hero-widget { display: none; }
}

/* dark glass cards for the animated current-flow diagrams */
.diagram-card {
  background:
    radial-gradient(600px 260px at 88% -15%, rgba(87, 194, 120, 0.16), transparent),
    linear-gradient(160deg, #0F2E1D, #081C10);
  border: 1px solid rgba(158, 207, 164, 0.25);
  border-radius: 22px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: 0 22px 55px rgba(10, 40, 24, 0.28);
}
.diagram-card svg { width: 100%; height: auto; display: block; }

/* ---------- Footer contact line + Calendly card ---------- */
.footer-contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.9rem; font-size: 0.9rem; }
.footer-contact a { color: #9ECFA4; }
.footer-contact a:hover { color: #8FE3A6; }
.footer-contact a[href^="https://instagram"]::before { content: "◎ "; }

.calendly-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  overflow: hidden;
}
.calendly-card .calendly-inline-widget { border-radius: 16px; }

/* form submission error message */
.form-submit-error {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #B4462F;
  background: rgba(255, 123, 107, 0.12);
  border: 1px solid rgba(180, 70, 47, 0.35);
  border-radius: 10px;
  padding: 0.7rem 1rem;
}
.form-submit-error a { color: #B4462F; text-decoration: underline; }

/* ============================================================
   Cinematic full-bleed hero (homepage top) — green·blue·gold
   ============================================================ */
.hero.hero-cine {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-cine .hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-cine .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: kbh 42s ease-in-out infinite alternate;
}
/* green→blue scrim on the left for legibility, warm gold glow, fade to light page at the base */
.hero.hero-cine::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 540px at 15% 32%, rgba(217,169,65,0.18), transparent 70%),
    linear-gradient(100deg, rgba(10,46,42,0.9) 0%, rgba(13,55,60,0.62) 42%, rgba(14,58,64,0.12) 72%, rgba(14,58,64,0) 100%),
    linear-gradient(180deg, rgba(10,44,38,0.55) 0%, rgba(10,44,38,0) 26%, rgba(10,44,38,0) 52%, rgba(246,250,243,0.25) 86%, #F6FAF3 100%);
}
.hero-cine .hero-cine-inner {
  position: relative;
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding-top: var(--nav-h);
}
.hero-cine .hero-content { width: auto; max-width: 640px; margin: 0; padding: 0; }
.hero-cine .kicker { color: #FFD37A; }
.hero-cine .kicker::before { background: linear-gradient(90deg, #FFD37A, transparent); }
.hero-cine h1 { color: #FFFFFF; text-shadow: 0 2px 30px rgba(6,24,16,0.4); }
.hero-cine .hero-tag { color: #8FE3A6; }
.hero-cine .lead { color: rgba(255,255,255,0.92); }
.hero-cine .hero-support { color: rgba(228,242,228,0.72); }
.hero-cine .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero-cine .btn-ghost:hover { color: #8FE3A6; border-color: #8FE3A6; background: rgba(255,255,255,0.06); }
.hero-cine .hero-labels { margin-top: 2rem; }
.hero-cine .hero-labels li {
  background: rgba(10,36,24,0.42);
  border-color: rgba(158,207,164,0.42);
  color: #EAF5EA;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-cine .hero-widget {
  position: relative; right: auto; bottom: auto; left: auto;
  flex: none;
  animation: floatChip 8s ease-in-out infinite;
}
.hero-cine .scroll-hint { color: rgba(228,242,228,0.72); }
.hero-cine .scroll-hint::after { background: linear-gradient(180deg, #FFD37A, transparent); }

@media (max-width: 900px) {
  .hero-cine .hero-widget { display: none; }
  .hero-cine .hero-cine-inner { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 4rem; }
}

/* ---------- Header: transparent + light text while over the dark hero ---------- */
body.home-hero .site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(6,24,16,0.55), rgba(6,24,16,0));
}
body.home-hero .site-header:not(.scrolled) .brand-name { color: #F6FAF5; }
body.home-hero .site-header:not(.scrolled) .brand-sub { color: #9ECFA4; }
body.home-hero .site-header:not(.scrolled) .nav-links a { color: #E4F2E4; }
body.home-hero .site-header:not(.scrolled) .nav-links a:hover,
body.home-hero .site-header:not(.scrolled) .nav-links a[aria-current="page"] { color: #8FE3A6; border-bottom-color: #8FE3A6; }
body.home-hero .site-header:not(.scrolled) .menu-toggle { color: #E4F2E4; border-color: rgba(158,207,164,0.45); }
body.home-hero .site-header:not(.scrolled) .menu-toggle:hover { color: #8FE3A6; border-color: #8FE3A6; }