/* ═══ BOOM 2026 — the shared design system for product & service pages.
   One file governs tokens, nav, family strip, hero, sections, pay-plates,
   FAQ, footer, checkout sheet, pay bar. Page-specific "device" styles stay
   inline in each page. Change here → every page follows. ═══ */

/* ═══ SERVICES 2.0 — flagship product page. MATERIA ambience, pay-plate,
   honest numbers, one tap to buy. Shares its language with apartments +
   apartment-detail + L'Atto. ═══ */
*{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#FFD700;--gold-light:#FFE5A0;--void:#060607;--card:#0C0C0E;--surface:#111114;--input:#17171B;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.05);--line-gold:rgba(255,215,0,.28);
  --gold-muted:rgba(255,215,0,.12);--gold-faint:rgba(255,215,0,.06);
  --t1:#FFF;--t2:rgba(255,255,255,.72);--t3:rgba(255,255,255,.46);--t4:rgba(255,255,255,.26);
  --green:#3ddc97;--green-muted:rgba(61,220,151,.14);--red:#ff7a6e;
  --sans:'Helvetica Neue',Helvetica,'Inter',-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--safe:env(safe-area-inset-bottom,0px)}
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.24s}
::view-transition-new(root){animation-duration:.24s}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--void);color:var(--t1);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit}
.eyebrow{font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--gold)}
/* nav */
nav.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:13px 20px;background:rgba(6,6,7,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-weight:300;letter-spacing:5px;font-size:15px}
.nlinks{display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t3)}
.nlinks a:hover{color:var(--t1)}
.nlinks .wa{color:var(--gold);border:1px solid var(--line-gold);border-radius:100px;padding:7px 14px;transition:.3s}
.nlinks .wa:hover{background:var(--gold-muted);color:var(--gold)}
@media(max-width:640px){.nlinks a.hide-m{display:none}}
/* the family strip — one suite, four products */
.fam{position:fixed;top:52px;left:0;right:0;z-index:49;display:flex;gap:4px;padding:8px 12px;background:rgba(6,6,7,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.fam::-webkit-scrollbar{display:none}
.fam a:first-child{margin-left:auto}.fam a:last-child{margin-right:auto}
.fam a{flex:none;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t4);padding:7px 13px;border-radius:100px;border:1px solid transparent;transition:.3s;white-space:nowrap}
.fam a:hover{color:var(--t2)}
.fam a.on{color:var(--gold);border-color:var(--line-gold);background:var(--gold-faint)}
.fam a b{font-weight:400;margin-left:5px;color:var(--gold)}
main{position:relative;z-index:5;max-width:1080px;margin:0 auto;padding:140px 18px calc(60px + var(--safe))}
/* hero */
.hero{display:grid;gap:34px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:920px){.hero{grid-template-columns:1.05fr .95fr;gap:44px}}
.hero h1{font-weight:100;font-size:clamp(36px,7vw,62px);line-height:1.05;letter-spacing:-1px;margin-top:12px}
.hero h1 em{font-style:normal;color:var(--gold);font-weight:300}
.hero .sub{color:var(--t2);font-size:clamp(14.5px,2vw,16.5px);max-width:50ch;margin-top:16px}
.hero .ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center}
.cta-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:13px 20px;font-size:13px;color:var(--t2);transition:.3s}
.cta-ghost:hover{border-color:var(--line-gold);color:var(--t1)}
.proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:11px;color:var(--t3)}
.proof span{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:100px;padding:6px 12px}
.proof .c{color:var(--green)}
/* sections */
section{margin-top:76px}
.sec-h{display:flex;gap:14px;align-items:baseline;margin-bottom:10px}
.sec-h .num{font-size:11px;color:var(--t4);letter-spacing:2px;white-space:nowrap}
.sec-h h2{font-weight:200;font-size:clamp(24px,4.5vw,34px)}
.sec-h h2 .g{color:var(--gold)}
.sec-sub{color:var(--t3);font-size:13.5px;max-width:60ch}
/* steps with a gold thread */
.steps{margin-top:26px;position:relative;display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{position:relative;padding:22px 22px 22px 46px;border:1px solid var(--line);background:var(--card);border-radius:16px}
.step+.step{margin-top:12px}
@media(min-width:700px){.step+.step{margin-top:0;margin-left:12px}}
.step .dot{position:absolute;left:18px;top:26px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--gold-faint),0 0 18px rgba(255,215,0,.45)}
.step .k{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.step .v{font-size:15.5px;margin-top:6px;font-weight:400}
.step .s{font-size:12.5px;color:var(--t3);margin-top:5px}
/* honesty band */
.truth{margin-top:26px;border:1px solid var(--line-gold);border-radius:18px;padding:26px 26px;background:radial-gradient(120% 100% at 10% 0%,rgba(255,215,0,.07),transparent 60%),var(--card)}
.truth h3{font-weight:200;font-size:clamp(19px,3.4vw,25px)}
.truth h3 em{font-style:normal;color:var(--gold);font-weight:300}
.truth p{color:var(--t2);font-size:13.5px;margin-top:9px;max-width:64ch}
.flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.flag{font-size:11.5px;border:1px solid var(--line);border-radius:100px;padding:7px 13px;color:var(--t3)}
.flag b{color:var(--red);font-weight:500;margin-right:5px}
/* what you get */
.get{margin-top:26px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.get{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:920px){.get{grid-template-columns:repeat(3,minmax(0,1fr))}}
.g-it{border:1px solid var(--line);border-radius:15px;background:var(--card);padding:18px;transition:border-color .3s,transform .3s var(--ease)}
.g-it:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.g-it .ic{font-size:19px}
.g-it b{display:block;font-weight:400;font-size:14.5px;margin-top:9px}
.g-it p{font-size:12.5px;color:var(--t3);margin-top:4px}
/* pay */
.paywrap{margin-top:26px;border:1px solid var(--line-gold);border-radius:22px;overflow:hidden;background:var(--card)}
.pay{padding:26px;display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.pay{grid-template-columns:1.15fr 1fr;align-items:center}}
.why{display:grid;gap:10px}
.why div{display:flex;gap:10px;font-size:13.5px;color:var(--t2)}
.why .c{color:var(--green);flex:none}
.paybtn{position:relative;width:100%;display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:14px;background:linear-gradient(135deg,var(--gold),#d9b400);color:#1a1407;text-align:left;transition:.3s var(--ease);overflow:hidden}
.paybtn::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:sheen 4.2s var(--ease) infinite}
@keyframes sheen{0%,72%{left:-70%}100%{left:130%}}
.paybtn:hover{transform:translateY(-1px);box-shadow:0 16px 44px rgba(255,215,0,.3)}
.paybtn .lk{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:rgba(0,0,0,.14);flex:none;font-size:15px}
.paybtn .tx{flex:1}
.paybtn b{display:block;font-size:15px;font-weight:600}
.paybtn small{display:block;font-size:11px;opacity:.75;margin-top:1px}
.paybtn .amt{font-size:22px;font-weight:300;white-space:nowrap}
.paysafe{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--t3);margin-top:11px;text-align:center}
.paysafe b{color:var(--t2)}
/* guarantee trio */
.trio{margin-top:12px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tri{border:1px dashed var(--line-gold);border-radius:15px;padding:16px 18px;background:var(--gold-faint)}
.tri b{display:block;font-weight:400;font-size:13.5px;color:var(--gold-light)}
.tri p{font-size:12px;color:var(--t3);margin-top:4px}
/* faq */
.faq{margin-top:26px;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;font-size:14px;font-weight:400;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:19px;font-weight:200;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 16px;font-size:13px;color:var(--t2);max-width:70ch}
/* siblings */
.sibs{margin-top:26px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.sibs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sib{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px;transition:border-color .3s,transform .3s var(--ease);overflow:hidden}
.sib:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.sib .se{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t4)}
.sib b{display:block;font-weight:300;font-size:17px;margin-top:6px}
.sib p{font-size:12px;color:var(--t3);margin-top:5px;min-height:36px}
.sib .pr{margin-top:12px;font-size:13px;color:var(--gold)}
/* final band */
.band{margin-top:76px;border:1px solid var(--line-gold);border-radius:22px;padding:34px 28px;text-align:center;background:radial-gradient(120% 130% at 50% 0%,rgba(255,215,0,.08),transparent 60%),var(--card)}
.band h2{font-weight:100;font-size:clamp(26px,5vw,40px)}
.band h2 em{font-style:normal;color:var(--gold);font-weight:300}
.band p{color:var(--t3);font-size:13.5px;margin-top:10px}
.band .paybtn{max-width:430px;margin:22px auto 0}
/* footer */
footer{position:relative;z-index:5;border-top:1px solid var(--line-soft);margin-top:70px;padding:34px 20px calc(70px + var(--safe));background:rgba(6,6,7,.6)}
.fin{max-width:1080px;margin:0 auto;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.fin{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fbrand{display:flex;align-items:center;gap:10px}
.fbrand b{letter-spacing:5px;font-weight:300}
.fco{font-size:11px;color:var(--t4);margin-top:10px;line-height:1.7}
.fcol h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--t4);font-weight:400;margin-bottom:10px}
.fcol a{display:block;font-size:12.5px;color:var(--t3);padding:3px 0}
.fcol a:hover{color:var(--t1)}
.fbot{max-width:1080px;margin:26px auto 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--t4);border-top:1px solid var(--line-soft);padding-top:16px}
.fbot .ok{display:inline-flex;align-items:center;gap:6px}
.fbot .ok i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(61,220,151,.8)}
/* checkout sheet */
.ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center}
.ov.on{display:flex}
@media(min-width:640px){.ov{align-items:center}}
.sheet{width:100%;max-width:480px;max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--line-gold);border-radius:22px 22px 0 0;padding:24px 22px calc(24px + var(--safe));animation:rise .4s var(--ease)}
@media(min-width:640px){.sheet{border-radius:22px}}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sheet h3{font-weight:200;font-size:21px}
.sheet .x{color:var(--t3);font-size:22px;line-height:1;padding:4px 8px}
.sheet .note{font-size:12px;color:var(--t3);margin-top:6px}
.fld{margin-top:14px}
.fld label{display:block;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.fld input,.fld textarea{width:100%;background:var(--input);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--t1);outline:none;transition:border-color .3s}
.fld input:focus,.fld textarea:focus{border-color:var(--line-gold)}
.fld textarea{resize:vertical;min-height:64px}
.ferr{display:none;font-size:12px;color:var(--red);margin-top:10px}
.ferr.on{display:block}
.sheet .paybtn{margin-top:18px}
.sheet .alt{margin-top:12px;text-align:center;font-size:12px;color:var(--t3)}
.sheet .alt a{color:var(--gold)}
/* sticky mobile pay bar */
.paybar{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;display:none;gap:12px;align-items:center;padding:10px 14px calc(10px + var(--safe));background:rgba(6,6,7,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line-gold);transform:translateY(110%);transition:transform .45s var(--ease)}
.paybar.on{transform:none}
.paybar .pinfo{flex:1;min-width:0}
.paybar .pinfo b{display:block;font-size:13px;font-weight:400}
.paybar .pinfo small{font-size:10.5px;color:var(--t3)}
.paybar .go{flex:none;background:linear-gradient(135deg,var(--gold),#d9b400);color:#1a1407;font-weight:600;border-radius:100px;padding:12px 20px;font-size:13.5px}
@media(max-width:879px){.paybar{display:flex}}
/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.still{animation:none}.paybtn::after{animation:none}}


/* ── classic chrome port (nav + footer from boom-core) ── */
:root{--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--black:#030303;--border-subtle:rgba(255,255,255,0.04);--ease-out:cubic-bezier(0.16,1,0.3,1);--font-display:'Helvetica Neue',Helvetica,Arial,sans-serif;--text-primary:#FAFAFA;--text-secondary:rgba(250,250,250,0.72);--text-tertiary:rgba(250,250,250,0.44);}
.container{width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--space-lg);}
@media (min-width: 768px){.container{padding: 0 var(--space-2xl);}}
.nav{position: fixed; top: 0; left: 0; right: 0; z-index: 10000; padding: var(--space-lg) 0; transition: all 0.4s var(--ease-out); background: linear-gradient(180deg, rgba(3, 3, 3, 1) 0%, rgba(3, 3, 3, 0.9) 60%, transparent 100%);}
.nav.scrolled{background: rgba(3, 3, 3, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); padding: var(--space-md) 0;}
.nav-inner{display: flex; align-items: center; justify-content: space-between;}
.logo{display: flex; align-items: center; gap: var(--space-md); transition: transform 0.3s var(--ease-out);}
.logo:hover{transform: scale(1.02);}
.logo-mark{width: 80px; height: 80px; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)); transition: filter 0.3s ease;}
.logo:hover .logo-mark{filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));}
.logo-text{font-family: var(--font-display); font-size: 32px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase;}
.nav-links{display: none; align-items: center; gap: var(--space-xl);}
@media (min-width: 1024px){.nav-links{display: flex;}}
.nav-link{font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); transition: color 0.3s ease; position: relative;}
.nav-link::after{content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s var(--ease-out);}
.nav-link:hover{color: var(--text-primary);}
.nav-link:hover::after{width: 100%;}
.nav-cta{padding: 10px 20px; background: transparent; border: 1px solid var(--gold); color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.3s var(--ease-out);}
.nav-cta:hover{background: var(--gold); color: var(--black);}
.nav-toggle{display: flex; flex-direction: column; gap: 5px; padding: 10px; background: none; border: none; cursor: pointer;}
@media (min-width: 1024px){.nav-toggle{display: none;}}
.nav-toggle span{display: block; width: 24px; height: 2px; background: var(--gold); transition: all 0.3s ease;}
.nav-toggle.active span:nth-child(1){transform: rotate(45deg) translate(5px, 5px);}
.nav-toggle.active span:nth-child(2){opacity: 0;}
.nav-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(5px, -5px);}
.mobile-menu{position: fixed; top: 0; right: 0; width: 100%; max-width: 380px; height: 100vh; background: var(--void); border-left: 1px solid var(--border-subtle); z-index: 999; transform: translateX(100%); transition: transform 0.4s var(--ease-out); padding: 100px var(--space-xl) var(--space-xl); overflow-y: auto;}
.mobile-menu.active{transform: translateX(0);}
.mobile-menu-links{display: flex; flex-direction: column; gap: var(--space-sm);}
.mobile-menu-link{font-size: 14px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); padding: var(--space-md) 0; border-bottom: 1px solid var(--border-subtle); transition: all 0.3s ease;}
.mobile-menu-link:hover{color: var(--gold); padding-left: var(--space-md);}
.mobile-menu-cta{display: block; margin-top: var(--space-xl); padding: var(--space-lg); background: var(--gold); color: var(--black); text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;}
.footer{padding: var(--space-4xl) 0 var(--space-2xl); border-top: 1px solid var(--border-subtle);}
.footer-grid{display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-bottom: var(--space-3xl);}
@media (min-width: 768px){.footer-grid{grid-template-columns: 2fr 1fr 1fr 1fr;}}
.footer-brand-logo{display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);}
.footer-brand-logo svg{width: 80px; height: 80px; opacity: 0.9;}
.footer-brand-logo span{font-family: var(--font-display); font-size: 32px; font-weight: 300; letter-spacing: 4px;}
.footer-tagline{font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-lg);}
.footer-company{font-size: 12px; color: var(--text-tertiary); line-height: 1.8;}
.footer-company strong{color: var(--text-secondary);}
.footer-links-title{font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-lg);}
.footer-links-list{list-style: none;}
.footer-links-list a{display: block; font-size: 13px; color: var(--text-secondary); padding: var(--space-xs) 0; transition: color 0.3s ease;}
.footer-links-list a:hover{color: var(--text-primary);}
.footer-bottom{display: flex; flex-direction: column; gap: var(--space-md); align-items: center; padding-top: var(--space-xl); border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px;}
@media (min-width: 640px){.footer-bottom{flex-direction: row; justify-content: space-between;}}
.footer-status{display: flex; align-items: center; gap: var(--space-sm);}
.footer-status-dot{width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite;}

/* pinned height: the .fam services strip docks flush under the nav, so the
   nav must not grow/shrink on scroll (index shrinks 128 -> 113px; we live at
   the 113px scrolled state, always solid over the ambient) */
.nav{padding:var(--space-md) 0;background:rgba(6,6,7,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft);z-index:50}
.nav.scrolled{padding:var(--space-md) 0;background:rgba(6,6,7,.97)}
.nav .container{padding:0 20px}
.mobile-menu{z-index:60}
footer.footer{background:none}
/* polish: the page you are on, visible in the chrome */
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.mobile-menu-link[aria-current="page"]{color:var(--gold)}
.nav a:focus-visible,.mobile-menu a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}