/* ==========================================================================
   RoomSense — marketing landing page.
   Ported verbatim from the Claude Design handoff (Landing Page.html inline
   <style>). RoomSense is its own dark-editorial sub-brand: amber + teal dual
   accent, cooler surfaces. This page is standalone (its own nav + tokens),
   so the stylesheet is self-contained and not scoped to the platform's
   .lp-* system. No build step.
   ========================================================================== */

:root{
  --bg:#0f0f0f; --surface:#1a1d22; --surface-2:#22262c; --sunken:#15181c;
  --line:#2a2d33; --line-2:#34373d; --fg:#f0ece4; --muted:#8a8a8a; --faint:#5e5e5e;
  --amber:#e8a838; --amber-dim:#a07820; --teal:#3a8c8c; --teal-dim:#26595a;
  --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--amber);color:#0f0f0f;}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.02em;}
.serif{font-family:var(--serif);font-weight:500;}
.mono{font-family:var(--mono);}
em{font-style:italic;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:11px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--amber);}

/* ── NAV ── */
nav.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(15,15,15,0.72);border-bottom:1px solid var(--line);}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;}
.wordmark{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-0.01em;display:flex;align-items:baseline;gap:1px;}
.wordmark .s{font-style:italic;color:var(--amber);font-weight:600;}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{font-size:13.5px;color:var(--muted);transition:color .15s;}
.navlinks a:hover{color:var(--fg);}
.navlinks a.backlink{color:var(--faint);display:inline-flex;align-items:center;gap:6px;}
.navlinks a.backlink:hover{color:var(--teal);}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0.02em;padding:11px 20px;border-radius:3px;border:1px solid var(--line);transition:all .16s;cursor:pointer;white-space:nowrap;}
.btn:hover{border-color:var(--line-2);background:var(--surface);}
.btn.amber{background:var(--amber);color:#0f0f0f;border-color:var(--amber);}
.btn.amber:hover{background:#f0b54a;border-color:#f0b54a;transform:translateY(-1px);}
.btn.lg{padding:15px 26px;font-size:15px;}
.nav-cta{display:flex;align-items:center;gap:14px;}
@media(max-width:820px){.navlinks{display:none;}}

/* ── HERO ── */
header.hero{position:relative;padding:96px 0 84px;overflow:hidden;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:44px;}}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,68px);line-height:1.02;margin:22px 0 0;}
.hero h1 em{font-style:italic;color:var(--amber);}
.hero .lede{font-size:clamp(16px,1.5vw,19px);color:#c8c4bb;max-width:33ch;margin:26px 0 0;line-height:1.6;}
.hero-cta{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap;}
.hero-meta{display:flex;gap:26px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;}
.hero-meta .stat .n{font-family:var(--mono);font-size:26px;font-weight:300;color:var(--fg);letter-spacing:-0.01em;}
.hero-meta .stat .n em{font-style:normal;color:var(--amber);}
.hero-meta .stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:3px;}
.hero-glow{position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse at center,rgba(232,168,56,0.10),transparent 62%);pointer-events:none;}

/* hero spectrum panel */
.spectrum-panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,0.9);}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);}
.sp-head .t{font-family:var(--serif);font-style:italic;font-size:16px;}
.sp-head .m{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.sp-legend{display:flex;gap:18px;padding:13px 20px 4px;}
.sp-legend .lg{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);}
.sp-legend .lg i{width:18px;height:2px;display:inline-block;}
.sp-legend .ax i{background:var(--amber);height:3px;} .sp-legend .ta i{background:var(--teal);} .sp-legend .ob i{background:var(--faint);}
.sp-svg{display:block;width:100%;height:208px;padding:6px 14px 0;}
.sp-foot{display:flex;height:6px;gap:1px;padding:10px 20px 0;}
.sp-foot span{flex:1;border-radius:1px;}
.sp-cap{display:flex;justify-content:space-between;padding:7px 20px 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);}

/* ── LOGO STRIP ── */
.trust{padding:30px 0;border-bottom:1px solid var(--line);}
.trust .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center;}
.trust .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);}
.trust .venue{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);opacity:.8;}

/* ── SECTION SHELL ── */
section.band{padding:92px 0;border-bottom:1px solid var(--line);}
.sec-head{max-width:660px;}
.sec-head.center{margin:0 auto;text-align:center;}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin-top:18px;}
.sec-head h2 em{font-style:italic;color:var(--amber);}
.sec-head p{color:var(--muted);font-size:17px;margin-top:18px;}

/* ── TOOLS GRID ── */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px;}
@media(max-width:900px){.tools{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.tools{grid-template-columns:1fr;}}
.tool{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:28px 26px;transition:transform .2s,border-color .2s,background .2s;overflow:hidden;}
.tool:hover{transform:translateY(-4px);border-color:var(--line-2);background:#1d2127;}
.tool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--amber));opacity:.85;}
.tool .ix{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent,var(--amber));}
.tool h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:14px 0 0;}
.tool .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:7px;}
.tool p{color:#b6b2a9;font-size:14.5px;margin:16px 0 0;line-height:1.6;}
.tool ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tool li{font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:baseline;}
.tool li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent,var(--amber));flex:0 0 auto;transform:translateY(-1px);}
.tool .go{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent,var(--amber));display:inline-flex;align-items:center;gap:7px;transition:gap .18s;}
.tool:hover .go{gap:12px;}

/* ── FEATURE SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px;}}
.feat-list{display:flex;flex-direction:column;gap:2px;margin-top:34px;}
.feat{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line);}
.feat:last-child{border-bottom:1px solid var(--line);}
.feat .k{font-family:var(--mono);font-size:12px;color:var(--amber);flex:0 0 38px;padding-top:3px;}
.feat h4{font-family:var(--serif);font-weight:500;font-size:19px;margin:0;}
.feat p{color:var(--muted);font-size:14.5px;margin:6px 0 0;}
.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0;overflow:hidden;box-shadow:0 24px 60px -40px rgba(0,0,0,0.9);}
.demo-card .dc-h{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;}
.demo-card .dc-h .t{font-family:var(--serif);font-weight:500;font-size:18px;}
.demo-card .dc-h .m{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.badge-row{display:flex;gap:12px;padding:20px 22px;}
.vbadge{flex:1;display:flex;align-items:center;gap:14px;background:var(--sunken);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:3px;padding:16px 18px;}
.vbadge .ico{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--teal);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.vbadge .vv{font-family:var(--serif);font-style:italic;font-size:16px;}
.vbadge .kk{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.oct{padding:6px 22px 22px;}
.oct .ol{font-family:var(--mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.oct .bars{display:flex;gap:7px;align-items:flex-end;height:70px;}
.oct .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.oct .b .bar{width:100%;background:var(--line);border-radius:1px;height:56px;display:flex;align-items:flex-end;overflow:hidden;}
.oct .b .fill{width:100%;background:linear-gradient(to top,var(--teal-dim),var(--teal));}
.oct .b.warm .fill{background:linear-gradient(to top,var(--amber-dim),var(--amber));}
.oct .b .bl{font-family:var(--mono);font-size:9px;color:var(--faint);}

/* ── METRIC ROW ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-top:54px;}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr);}}
.metric{padding:30px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);}
.metric .n{font-family:var(--mono);font-size:34px;font-weight:300;letter-spacing:-0.02em;}
.metric .n em{font-style:normal;color:var(--amber);font-size:18px;}
.metric .l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.metric .d{color:var(--faint);font-size:12.5px;margin-top:10px;line-height:1.5;}

/* ── FAQ ── */
.faq{max-width:780px;margin:48px auto 0;}
.qa{border-top:1px solid var(--line);}
.qa:last-child{border-bottom:1px solid var(--line);}
.qa summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--serif);font-weight:500;font-size:20px;transition:color .15s;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{color:var(--amber);}
.qa .sign{font-family:var(--mono);font-size:20px;color:var(--amber);transition:transform .2s;flex:0 0 auto;}
.qa[open] .sign{transform:rotate(45deg);}
.qa .a{padding:0 4px 26px;color:var(--muted);font-size:15.5px;max-width:64ch;}

/* ── FINAL CTA ── */
.final{padding:104px 0;text-align:center;position:relative;overflow:hidden;}
.final-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(232,168,56,0.12),transparent 60%);pointer-events:none;}
.final h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.4vw,54px);line-height:1.05;position:relative;}
.final h2 em{font-style:italic;color:var(--amber);}
.final p{color:var(--muted);font-size:18px;margin:22px auto 0;max-width:48ch;position:relative;}
.final .hero-cta{justify-content:center;position:relative;}

/* ── FOOTER ── */
footer.site{padding:56px 0 40px;background:var(--sunken);}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
@media(max-width:760px){footer.site .wrap{grid-template-columns:1fr 1fr;gap:30px;}}
footer .fcol h5{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);margin:0 0 16px;font-weight:500;}
footer .fcol a{display:block;color:var(--muted);font-size:14px;padding:6px 0;transition:color .15s;}
footer .fcol a:hover{color:var(--fg);}
footer .about p{color:var(--muted);font-size:14px;margin:14px 0 0;max-width:34ch;}
footer .legal{max-width:var(--maxw);margin:44px auto 0;padding:22px 28px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--faint);}
footer .legal .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);margin:0 9px;vertical-align:middle;}

/* ── reveal ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1 !important;transform:none !important;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}