/* =========================================================================
   cinema.css — Astrapia cinematic experience layer
   Loaded AFTER style.css (replaces the zen layer). Restyles every shared
   component so ALL pages get the immersive treatment on desktop + mobile.
   Content, URLs, headings and schema are untouched — presentation only.
   ========================================================================= */

:root{
  --day:#F3F6FA; --day2:#EAEFF6; --paper:#FBFCFE;
  --night:#0A1524; --night2:#0C1C31;
  --ink:#0F1620; --ink2:#48546A; --mut:#8B94A6; --hair:#E1E7EF;
  --blue:#0E5FB0; --blue-d:#0A4A8C; --glass:#3E92E0;
  --white:#ffffff;
  --disp:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --container:1180px;
}

body{ background:var(--day); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.62; }
::selection{ background:rgba(62,146,224,.24); }

/* Display face for all headings */
h1,h2,h3,.hero-copy h1,.section-head h2{ font-family:var(--disp); font-weight:400; font-optical-sizing:auto; letter-spacing:-.015em; }
h1{ line-height:1.04; } h2{ line-height:1.08; }
.lede,.section-head p{ font-family:var(--body); }

/* ---- Header: transparent over hero (white), solid on scroll ------------ */
.site-header{ background:transparent; box-shadow:none; }
.site-header::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,12,22,.42), rgba(6,12,22,0)); opacity:1; transition:opacity .4s; pointer-events:none; }
.site-header .nav-link,.site-header .brand{ color:#fff; }
.site-header .nav-link{ color:rgba(255,255,255,.86); }
.site-header .nav-link:hover,.site-header .nav-link.is-active{ color:#fff; }
.site-header .nav-link::after{ background:#fff; }
.site-header .btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.42); backdrop-filter:blur(4px); }
.site-header .btn-ghost:hover{ background:rgba(255,255,255,.2); color:#fff; }
.site-header.scrolled{ background:rgba(248,250,253,.9); backdrop-filter:saturate(1.2) blur(12px); box-shadow:0 1px 0 var(--hair); }
.site-header.scrolled::before{ opacity:0; }
.site-header.scrolled .brand,.site-header.scrolled .nav-link{ color:var(--ink); }
.site-header.scrolled .nav-link{ color:var(--ink2); }
.site-header.scrolled .nav-link:hover,.site-header.scrolled .nav-link.is-active{ color:var(--blue); }
.site-header.scrolled .nav-link::after{ background:var(--blue); }
.site-header.scrolled .btn-ghost{ background:#fff; color:var(--ink); border-color:var(--hair); }
.brand-logo{ filter:brightness(0) invert(1); transition:filter .4s; }
.site-header.scrolled .brand-logo{ filter:none; }
.site-header .nav-toggle span{ background:#fff; }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }

/* ---- Buttons: precise, cinematic --------------------------------------- */
.btn{ border-radius:9px; font-weight:700; letter-spacing:.01em; font-family:var(--body); }
.btn-primary{ background:var(--blue); box-shadow:0 14px 34px rgba(14,95,176,.28); }
.btn-primary:hover{ background:var(--blue-d); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--blue); }

/* =========================================================================
   HOME cinematic hero (new markup: .cine-hero)
   ========================================================================= */
.cine-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; color:#fff; }
.cine-hero .bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--night); }
.cine-hero .bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); animation:kb 14s var(--ease) forwards; }
@keyframes kb{ to{ transform:scale(1); } }
.cine-hero .veil{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,12,22,.5) 0%, rgba(6,12,22,.12) 34%, rgba(6,12,22,.44) 66%, rgba(6,12,22,.86) 100%); }
.cine-hero .inner{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,48px) clamp(70px,11vh,130px); }
.cine-hero .eyebrow{ color:rgba(255,255,255,.78); }
.cine-hero .eyebrow::before{ background:var(--glass); }
.cine-hero h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2.9rem,8vw,6.2rem); line-height:1; text-wrap:balance;
  margin:.24em 0 .3em; text-shadow:0 6px 46px rgba(0,0,0,.4); }
.cine-hero h1 .em{ font-style:italic; color:#d7e8fb; }
.cine-hero .lede{ color:rgba(255,255,255,.92); max-width:44ch; font-size:clamp(1.02rem,2.2vw,1.28rem); }
.cine-hero .hero-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.cine-hero .hero-actions .btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.42); }
.cine-hero .hero-actions .btn-ghost:hover{ background:rgba(255,255,255,.2); }
.cine-hero .hero-trust{ margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.24); display:flex; gap:clamp(24px,4vw,54px); flex-wrap:wrap; }
.cine-hero .hero-trust .n{ font-family:var(--disp); font-weight:500; font-size:1.7rem; color:#fff; }
.cine-hero .hero-trust .l{ font-size:.8rem; color:rgba(255,255,255,.68); letter-spacing:.02em; }
.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.8);
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint i{ width:1px; height:32px; background:linear-gradient(180deg,#fff,transparent); animation:fall 1.9s var(--ease) infinite; }
@keyframes fall{ 0%{opacity:0;transform:translateY(-8px)} 40%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* =========================================================================
   Full-bleed statement band (.cine-band)
   ========================================================================= */
.cine-band{ position:relative; min-height:82svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; color:#fff; }
.cine-band .bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--night); }
.cine-band .bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.cine-band .veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,12,22,.82), rgba(6,12,22,.28) 55%, rgba(6,12,22,0)); }
.cine-band .inner{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.cine-band .eyebrow{ color:rgba(255,255,255,.72); } .cine-band .eyebrow::before{ background:var(--glass); }
.cine-band h2{ font-family:var(--disp); font-weight:400; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.04; text-wrap:balance; margin:.2em 0 .3em; }
.cine-band h2 .em{ font-style:italic; color:#cfe4fb; }
.cine-band p{ max-width:38ch; color:rgba(255,255,255,.9); font-size:clamp(1rem,2.2vw,1.22rem); }

/* =========================================================================
   Sections, eyebrows, headings (light "breath" grounds)
   ========================================================================= */
.section{ padding-block:clamp(84px,11vw,150px); }
.bg-soft{ background:var(--day2); } .bg-tint{ background:var(--paper); }
.eyebrow{ color:var(--blue); font-weight:700; letter-spacing:.26em; text-transform:uppercase; font-size:.74rem; display:inline-flex; align-items:center; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--blue); margin-right:12px; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.4rem); margin-top:.34em; }
.section-head p{ color:var(--ink2); font-size:1.08rem; margin-top:18px; }

/* =========================================================================
   Feature cards (Why Astrapia) — quiet, hairline, image-free
   ========================================================================= */
.feature-card{ background:var(--paper); border:1px solid var(--hair); border-radius:14px; box-shadow:none; padding:30px; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.feature-card::after{ display:none; }
.feature-card:hover{ transform:translateY(-6px); border-color:#c9d8ec; box-shadow:0 26px 60px rgba(15,22,32,.10); }
.feature-ic{ color:var(--blue); background:rgba(14,95,176,.08); border-radius:11px; }
.feature-card h3{ font-family:var(--disp); font-size:1.34rem; }

/* =========================================================================
   FEATURES SHOWCASE (new .feat-showcase) — "all common features"
   ========================================================================= */
.feat-showcase{ background:var(--night); color:#fff; padding-block:clamp(84px,11vw,150px); }
.feat-showcase .section-head h2{ color:#fff; }
.feat-showcase .eyebrow{ color:var(--glass); } .feat-showcase .eyebrow::before{ background:var(--glass); }
.feat-showcase .section-head p{ color:rgba(255,255,255,.72); }
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09); border-radius:16px; overflow:hidden; margin-top:clamp(34px,5vw,56px); }
.feat{ background:var(--night); padding:26px 24px; transition:background .4s; }
.feat:hover{ background:var(--night2); }
.feat .fi{ width:40px; height:40px; color:var(--glass); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat h3{ font-family:var(--body); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; margin-bottom:6px; }
.feat p{ color:rgba(255,255,255,.66); font-size:.9rem; line-height:1.5; }

/* =========================================================================
   Split (engineered / locations / process)
   ========================================================================= */
.split-copy h2{ font-size:clamp(1.9rem,3.8vw,2.9rem); }
.split-media .frame{ border-radius:16px; border:1px solid var(--hair); box-shadow:0 30px 70px rgba(15,22,32,.14); overflow:hidden; }
.checklist li{ color:var(--ink2); } .checklist .ck{ color:var(--blue); }

/* =========================================================================
   Product cards → cinematic dark tiles
   ========================================================================= */
.prod-card{ border:none; border-radius:16px; overflow:hidden; background:var(--night); box-shadow:0 20px 50px rgba(15,22,32,.14); position:relative; transition:transform .5s var(--ease); }
.prod-card:hover{ transform:translateY(-6px); }
.prod-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.prod-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .8s var(--ease); }
.prod-card:hover .prod-media img{ transform:scale(1.1); }
.prod-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,14,24,0) 40%,rgba(8,14,24,.72)); }
.prod-tag{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,.9); color:var(--blue); font-weight:800; font-size:.68rem; letter-spacing:.14em; padding:5px 10px; border-radius:6px; }
.prod-body{ padding:22px 24px 26px; color:#fff; }
.prod-body h3{ font-family:var(--disp); font-size:1.4rem; }
.prod-body p{ color:rgba(255,255,255,.7); font-size:.95rem; margin-top:6px; }
.prod-features span{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.82); border:none; }
.prod-link{ color:var(--glass); font-weight:700; }
.prod-link:hover{ color:#fff; }

/* Locations chips */
.loc-chip{ background:var(--paper); border:1px solid var(--hair); color:var(--ink); border-radius:999px; transition:all .3s; }
.loc-chip:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.loc-chip .dot{ background:var(--blue); }

/* Marquee */
.marquee{ background:var(--night); border:none; }
.marquee .lbl{ color:rgba(255,255,255,.6); letter-spacing:.22em; }
.marquee .items span{ color:rgba(255,255,255,.82); opacity:1; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--hair); }
.faq-item summary{ font-family:var(--disp); font-size:1.16rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }

/* CTA band */
.cta-band{ background:linear-gradient(120deg,var(--night),var(--night2)); position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; right:-10%; top:-40%; width:60%; height:180%; background:radial-gradient(closest-side,rgba(62,146,224,.28),transparent); }
.cta-band h2{ font-family:var(--disp); color:#fff; font-size:clamp(1.9rem,4vw,3rem); }
.cta-band p{ color:rgba(255,255,255,.8); }

/* =========================================================================
   Non-home page heroes (.page-hero) → cinematic dark
   ========================================================================= */
.page-hero{ position:relative; background:linear-gradient(140deg,var(--night),var(--night2)); color:#fff; padding-top:calc(var(--header-h,100px) + clamp(40px,7vw,90px)); padding-bottom:clamp(56px,8vw,110px); overflow:hidden; }
.page-hero::after{ content:""; position:absolute; right:-8%; top:-30%; width:52%; height:160%; background:radial-gradient(closest-side,rgba(62,146,224,.22),transparent); pointer-events:none; }
.page-hero .breadcrumb,.page-hero .breadcrumb a{ color:rgba(255,255,255,.66); }
.page-hero .eyebrow{ color:var(--glass); } .page-hero .eyebrow::before{ background:var(--glass); }
.page-hero h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2.3rem,5.4vw,4rem); color:#fff; text-wrap:balance; }
.page-hero .lede,.page-hero p{ color:rgba(255,255,255,.86); }

/* =========================================================================
   FOOTER → premium dark
   ========================================================================= */
.site-footer{ background:var(--night); color:rgba(255,255,255,.8); }
.site-footer h3,.site-footer .fb-name{ font-family:var(--disp); color:#fff; }
.site-footer .lbl{ color:var(--glass); letter-spacing:.16em; }
.site-footer .footer-form-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; }
.site-footer .field input,.site-footer .field textarea{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:9px; }
.site-footer .field input::placeholder,.site-footer .field textarea::placeholder{ color:rgba(255,255,255,.5); }
.site-footer .field input:focus,.site-footer .field textarea:focus{ border-color:var(--glass); outline:none; }
.site-footer .finfo-card{ border-top:1px solid rgba(255,255,255,.1); }
.site-footer a{ color:rgba(255,255,255,.82); } .site-footer a:hover{ color:#fff; }
.site-footer .mail,.site-footer .finfo-card a[href^="tel"]{ color:var(--glass); }
.footer-social a{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:8px; }
.footer-social a:hover{ border-color:var(--glass); color:var(--glass); }
.fproj-btn{ border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:8px; }
.fproj-btn:hover{ background:rgba(255,255,255,.08); }
.showroom-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#fff; transition:all .3s; }
.showroom-card:hover{ border-color:var(--glass); transform:translateY(-3px); }
.showroom-card .city{ font-family:var(--disp); color:#fff; }
.showroom-card .st{ color:rgba(255,255,255,.6); }
.showroom-card .map{ color:var(--glass); }
.footer-brand-row .footer-logo{ filter:brightness(0) invert(1); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); }
.footer-nav a{ color:rgba(255,255,255,.72); }

/* =========================================================================
   Scroll reveals (JS adds .cin-in)
   ========================================================================= */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].cin-in{ opacity:1; transform:none; }
[data-reveal-delay="2"]{ transition-delay:.12s } [data-reveal-delay="3"]{ transition-delay:.24s }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .feat-grid{ grid-template-columns:1fr; }
  .cine-hero h1{ font-size:clamp(2.6rem,12vw,3.6rem); }
  .cine-hero .hero-actions .btn{ width:100%; justify-content:center; }
  .cine-band h2{ font-size:clamp(2rem,10vw,3rem); }
}
@media (prefers-reduced-motion:reduce){
  .cine-hero .bg img{ animation:none; transform:none; }
  .cine-band .bg img{ transform:none!important; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .scroll-hint i{ animation:none; }
}