/* ==== NLO site v2 — homepage accents (append AFTER /style.css rules) ==== */
:root{--green:#2BE38A;--bone:#F4EFE6}

/* 1. Subtle Lamplight Green horizon glow over the hero bottom */
.cine::before{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 75% 55% at 50% 100%,rgba(43,227,138,.16),transparent 70%)}
.cine::after{z-index:-1}            /* existing dark fade stays on top of the glow */
.cine-in{position:relative;z-index:1}

/* 2. Buttons: green hover glow + green focus ring */
.btn:hover,button:hover{box-shadow:0 0 0 1px rgba(43,227,138,.55),0 6px 28px rgba(43,227,138,.28)}
.btn:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:3px;box-shadow:0 0 0 6px #0a0e1a}
.btn.ghost:hover{border-color:var(--green)}

/* 3. Small divider ornament tinted green */
.cross{color:var(--green);opacity:.8;filter:drop-shadow(0 0 6px rgba(43,227,138,.35))}

/* 4. Card icons (inline SVG inside each .tablet) */
.tablet .ico{display:block;width:48px;height:48px;margin:.5rem 0 .25rem;color:#B8995A}
.tablet:hover .ico,.tablet:focus-within .ico{filter:drop-shadow(0 0 6px rgba(43,227,138,.35))}
@media(min-width:44rem){.tablets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.tablets{grid-template-columns:repeat(4,1fr)}}

/* 5. Footer crisis notice: bone, normal weight, still clear (≈17:1 on #0a0e1a) */
footer .crisis{color:var(--bone);font-weight:400;max-width:44rem;margin:1rem auto}
footer .crisis strong{font-weight:400}
footer .crisis a{color:var(--gold2);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* 6. Mobile nav: fits one line at 390px, wraps gracefully below */
@media(max-width:30rem){
  .bar{justify-content:center;padding:.25rem .5rem}
  .brand{font-size:.85rem;min-height:40px}
  nav ul{justify-content:center;flex-wrap:wrap;column-gap:0}
  nav a{font-size:.82rem;padding:.25rem .4rem;min-width:44px;white-space:nowrap}
}

/* DEPLOY4 v3 punch list */
.wm span{white-space:nowrap}
.eyebrow{font-size:.875rem;color:#ffb38a;text-shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.85)}
.cine .eyebrow{display:inline-block;background:rgba(10,14,26,.85);padding:.3rem .8rem;border-radius:999px}
.cine .cross{filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}
.cine .cta .btn{white-space:nowrap}
.below-hero{text-align:center}
@media(min-width:44rem){
 .cine{justify-content:flex-end}
 .cine-in{margin-right:3%;max-width:36rem;text-align:center}
 .cine h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
 .cine::after{background:linear-gradient(90deg,transparent 0%,rgba(10,14,26,.15) 35%,rgba(10,14,26,.7) 65%,rgba(10,14,26,.85) 100%),linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
}
@media(max-width:43.99rem){
 .bar{flex-wrap:nowrap;justify-content:space-between;gap:.25rem}
 .brand{font-size:.68rem;letter-spacing:.08em;line-height:1.1;min-height:44px}
 .wm{display:flex;flex-direction:column}
 nav ul{flex-wrap:nowrap}
 nav a{font-size:.8rem;padding:.25rem .3rem;min-width:0}
 .cine,.cine.short{display:block;min-height:0}
 .cine picture,.cine .hero-placeholder{position:relative;display:block;inset:auto;aspect-ratio:1/1;z-index:0}
 .cine .hero-placeholder{padding:2rem 1rem;align-items:center;text-align:center}
 .cine-img{position:absolute;inset:0}
 .cine::after{display:none}
 .cine-in{padding:1rem 1.25rem 1.5rem}
 .cine .eyebrow{background:none;padding:0}
 .cine h1{font-size:2rem;margin:.25rem 0 .75rem}
 .cine .cta{display:flex;flex-direction:column;gap:.6rem;align-items:center}
 .cine .cta .btn{margin:0}
 .cine .cross{display:none}
}

/* v4: longer "Hermes Trismegistus™" nav label: let it wrap on narrow phones (HELEL A4) */
@media(max-width:30rem){nav ul{flex-wrap:wrap;justify-content:flex-end;row-gap:0}nav a{font-size:.78rem}}