/*
  HI GLOBAL / HOME INTELLIGENCE — ULTIMATUM TYPOGRAPHY SYSTEM v2.0
  Additive layer. Preserves original HTML, product flows, JavaScript and styling architecture.
  Type roles: Jura (architectural display / brand), Manrope (body & interface),
  IBM Plex Mono (data / microcopy). Remote font CSS; system fallbacks remain usable.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Jura:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
 --font-display:'Jura','Trebuchet MS','Arial Narrow',sans-serif;
 --font-text:'Manrope','Avenir Next','Segoe UI',sans-serif;
 --font-data:'IBM Plex Mono','Consolas',monospace;
 --sans:var(--font-text);
 --serif:var(--font-display);
 --green:#dbf4aa;
 --line:rgba(238,250,230,.15);
}
html{font-synthesis:none}
body{font-family:var(--font-text);font-weight:450;letter-spacing:-.011em;line-height:1.55}
button,input,select,textarea{font-family:var(--font-text)}
h1,h2,h3,h4,.section-title{font-family:var(--font-display);font-weight:650;letter-spacing:-.061em;text-wrap:balance}
h1{font-size:clamp(3.65rem,7.65vw,8.6rem);line-height:.99;font-weight:650;letter-spacing:-.074em}
h2{font-size:clamp(2.7rem,5.9vw,6rem);line-height:1.02;letter-spacing:-.067em}
h3{font-weight:650;letter-spacing:-.045em}
em{font-family:var(--font-display);font-style:normal;font-weight:700;letter-spacing:-.067em;color:var(--green)}
.hero h1 em,.page-hero h1 em,.simple-heading h1 em,.final-cta h2 em,.feature-text h2 em,.section-head h2 em{
 color:var(--green);
 background:linear-gradient(115deg,#f0ffcb 4%,#dbf4aa 49%,#9bd7b5 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.eyebrow,.notice,.hero-foot,.scene-indicator,.scene-overlay .scene-indicator,
.editorial-card span,.room-chips,.universe-map-tag,.universe-room-kicker,.universe-pin,
.shop-label,.scene-status,.universe-system-card .eyebrow{
 font-family:var(--font-data);font-weight:500;letter-spacing:.10em;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.66rem;line-height:1.5;letter-spacing:.14em}
.section-head,.simple-heading{max-width:1000px}
.section-head p:last-child,.simple-heading>p:last-child{font-size:clamp(.93rem,1.35vw,1.12rem);line-height:1.75}
.header{height:91px;background:rgba(12,22,17,.92);border-bottom:1px solid rgba(221,242,215,.13);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.brand-mark{font-family:var(--font-display);font-weight:700;font-style:normal;border-radius:13px;transform:rotate(-7deg);font-size:31px;background:linear-gradient(145deg,rgba(213,251,168,.14),transparent)}
.brand-mark .brand-dot{font-family:var(--font-text);font-weight:800;transform:translate(9px,8px) rotate(7deg)}
.brand-words{font-family:var(--font-display);font-size:13px;line-height:1.05;font-weight:700;letter-spacing:.13em}
.nav a,.head-actions a{font-family:var(--font-text);font-weight:650;letter-spacing:-.017em}
.nav a{position:relative;font-size:.77rem}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--green);transition:right .25s}
.nav a:hover:after,.nav a.active:after{right:0}
.cart-trigger{border-radius:12px;background:rgba(255,255,255,.035);padding:12px 16px}
.btn{border-radius:12px;font-family:var(--font-text);font-size:.79rem;font-weight:750;letter-spacing:.005em;box-shadow:0 8px 25px rgba(4,17,8,.08);transition:transform .25s,box-shadow .25s,background .25s}
.btn.primary{background:var(--green);color:#152019;box-shadow:0 10px 26px rgba(201,241,148,.12)}
.btn.primary:hover{box-shadow:0 16px 35px rgba(201,241,148,.2)}
.btn.ghost{backdrop-filter:blur(13px);background:rgba(19,32,22,.36)}
.text-link,.text-button{font-family:var(--font-text);letter-spacing:.012em}
.hero{min-height:680px}
.hero-bg{background-position:center 48%}
.hero-shade{background:linear-gradient(90deg,rgba(8,20,16,.96) 1%,rgba(8,20,16,.80) 37%,rgba(8,20,16,.21) 86%),linear-gradient(0deg,rgba(9,19,13,.63),transparent 69%)}
.hero-copy{max-width:1180px}
.hero h1{max-width:1090px;font-size:clamp(3.35rem,6.75vw,8.2rem);line-height:1.00;letter-spacing:-.075em;text-shadow:0 8px 24px rgba(0,0,0,.12)}
.hero-copy>p:not(.eyebrow){font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:450;line-height:1.77;max-width:540px}
.hero .eyebrow{border:1px solid rgba(232,250,214,.24);padding:10px 14px;border-radius:6px;background:rgba(16,31,22,.23)}
.hero-foot{font-family:var(--font-data);font-weight:500;font-size:.59rem;letter-spacing:.065em}
.hero-foot span:not(:last-child):after{content:"/";color:rgba(219,244,170,.45);margin-left:28px}
.scroll-down{font-family:var(--font-data);font-size:.66rem;letter-spacing:.08em}
.editorial-three{gap:16px}
.editorial-card{border-radius:14px;isolation:isolate;border:1px solid rgba(255,255,255,.10)}
.editorial-card:after{z-index:0}
.editorial-card h3{font-family:var(--font-display);font-size:clamp(1.8rem,2.6vw,2.65rem);line-height:1.04;font-weight:650;letter-spacing:-.055em}
.editorial-card strong{font-family:var(--font-data);font-size:.66rem;font-weight:600;letter-spacing:.05em}
.feature-split{background:linear-gradient(122deg,#1b2a20 0%,#15241b 55%,#18271d 100%)}
.feature-photo img{border-radius:12px}
.section{padding-top:clamp(80px,9vw,158px);padding-bottom:clamp(80px,9vw,158px)}
.final-cta{background:radial-gradient(ellipse at 55% 82%,#2b4231,#101713 65%)}
.footer{border-top:1px solid rgba(230,249,218,.13)}
.page-hero-content{max-width:1180px}
.page-hero h1{font-size:clamp(3.5rem,6.6vw,7rem)}
.scene-overlay strong{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em}
.scene-visual,.room-feature,.scene-controls>button,.room-tabs button,.filter-list button{border-radius:12px}
.scene-controls>button,.room-tabs button,.filter-list button{font-family:var(--font-text);font-weight:650}
.scene-controls>button.selected,.room-tabs button.selected,.filter-list button.selected{background:var(--green);color:#17231a}
.shop-card,.product-card,.universe-device-card,.universe-system-card,.universe-entry,.universe-plan-next,.intake-shell form{border-radius:14px}
input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #d9f6a2;outline-offset:3px}
::selection{background:#d9f6a2;color:#162019}
@media(min-width:1101px){.header{gap:16px}.nav{gap:clamp(10px,1.6vw,27px)}.nav a{white-space:nowrap}}
@media(max-width:1100px){.header{height:77px}.hero h1{font-size:clamp(3.35rem,8vw,6rem)}.nav a:after{display:none}}
@media(max-width:700px){
 .header{height:72px;padding-inline:20px}
 .brand-mark{width:38px;height:38px;font-size:27px}
 .brand-words{font-size:11px}
 h1{font-size:clamp(3.05rem,12.2vw,4.8rem);letter-spacing:-.066em}
 h2{font-size:clamp(2.3rem,9vw,3.8rem);letter-spacing:-.067em}
 .hero{min-height:650px;height:auto}
 .hero h1{font-size:clamp(3rem,11.6vw,4.7rem);max-width:100%;letter-spacing:-.07em}
 .hero-copy{padding:67px 0 85px;margin-inline:22px}
 .hero-foot{gap:12px;flex-wrap:wrap;line-height:1.8;font-size:.54rem;margin-top:34px}
 .hero-foot span:not(:last-child):after{margin-left:13px}
 .hero .eyebrow{font-size:.56rem;letter-spacing:.07em;padding:8px 10px}
 .hero-copy>p:not(.eyebrow){font-size:.93rem;line-height:1.72}
 .btn{min-height:48px;padding:12px 17px;font-size:.76rem}
 .editorial-card h3{font-size:2.15rem}
 .section{padding:78px 22px}
 .scene-overlay strong{font-size:2.25rem}
 .footer{padding:56px 22px}
 .page-hero h1{font-size:clamp(2.9rem,11vw,4.45rem)}
}
@media(prefers-reduced-motion:reduce){.nav a:after,.btn{transition:none!important}}