/* ============================================================
   stampl.app — landing (ascetic / clean)
   Maximal whitespace, thin rules, restrained type.
   Heatmap appears ONCE as a calm centerpiece. Dark, monochrome
   base; rating scale is the only color.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#F6F4EF;
  --surface:#FFFFFF;
  --line:#E6E3DB;
  --line2:#D4D0C6;
  --text:#17171A;
  --muted:#6C6C74;
  --faint:#9A968C;
  --ink:#0d0d0f;       /* dark canvas for heatmap / phones */
  --ink-line:#2a2a31;

  --green-bright:#34C759;
  --hm-red:#E2483B;
  --hm-yellow:#F2C12A;
  --hm-green:#3FBE50;

  --maxw:1080px;
  --font:'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{position:relative;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* a11y */
:focus-visible{outline:2px solid var(--green-bright); outline-offset:3px; border-radius:3px;}
.skip-link{position:absolute; left:-9999px; top:0; z-index:300; background:var(--green-bright);
  color:#05130a; padding:12px 18px; font-weight:500; font-size:14px;}
.skip-link:focus{left:0;}

/* type */
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--faint);}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-0.03em; line-height:1.04;}
h1{font-size:clamp(40px, 6vw, 76px); letter-spacing:-0.04em; line-height:1.0;}
h2{font-size:clamp(28px, 3.6vw, 44px);}
h3{font-size:20px; letter-spacing:-0.015em;}
p{margin:0;}
.lead{color:var(--muted); font-size:clamp(17px,1.7vw,20px); line-height:1.55; font-weight:400;}

/* link buttons — ascetic: text + underline reveal, one solid */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--font);
  font-size:16px; font-weight:500; letter-spacing:-0.01em; height:52px; padding:0 22px;
  border-radius:8px; border:1px solid transparent; transition:all .18s ease;}
.btn-primary{background:var(--text); color:#F6F4EF;}
.btn-primary:hover{background:#000;}
.btn-text{padding:0; height:auto; color:var(--text); border:none; position:relative;}
.btn-text::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--line2); transform:scaleX(1); transform-origin:left; transition:transform .25s ease;}
.btn-text:hover::after{background:var(--text);}
.btn-text .arrow{transition:transform .2s ease;}
.btn-text:hover .arrow{transform:translateX(4px);}
.btn[disabled]{opacity:.4; cursor:default;}
.store-row{display:flex; flex-wrap:wrap; align-items:center; gap:22px;}
.store{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; transition:color .15s;}
.store:hover{color:var(--text);}
.store small{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); display:block; line-height:1;}
.store .st-name{font-size:15px; font-weight:500; color:inherit;}

/* nav */
header.nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(246,244,239,0.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s;}
header.nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:500; font-size:19px; letter-spacing:-0.04em;}
.brand .logo{width:26px; height:31px;}
.brand .dot{color:var(--green-bright);}
.nav-right{display:flex; align-items:center; gap:26px;}
.nav-links{display:flex; gap:28px;}
.nav-links a{color:var(--muted); font-size:14.5px; transition:color .15s;}
.nav-links a:hover{color:var(--text);}
.lang{display:inline-flex; gap:2px; font-family:var(--mono); font-size:12px;}
.lang button{background:transparent; border:none; color:var(--faint); cursor:pointer; padding:6px 6px; letter-spacing:.05em; transition:color .15s; min-height:34px;}
.lang button.on{color:var(--text);}
.lang .sep{color:var(--line2); align-self:center;}

/* live heatmap (calm) */
.live-heat{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.heat-blob{position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform;}
.heat-chip{position:absolute; transform:translate(-50%,-50%); font-family:var(--mono); font-weight:500;
  letter-spacing:-0.01em; color:#06060a; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:0 11px; height:30px; font-size:15px; white-space:nowrap; box-shadow:0 2px 14px rgba(0,0,0,0.45);}
.heat-chip.sm{height:25px; padding:0 9px; font-size:13px;}
@keyframes drift0{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-12px,9px) scale(1.05);}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1.03);}50%{transform:translate(10px,-10px) scale(0.97);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(0.99);}50%{transform:translate(-9px,-9px) scale(1.04);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1.01);}50%{transform:translate(9px,10px) scale(0.98);}}
@keyframes floatY{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - 6px));}}

/* ============ HERO ============ */
.hero{padding:190px 0 0;}
.hero-top{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; padding-bottom:64px;}
.hero h1{max-width:760px;}
.hero h1 em{font-style:normal; color:var(--green-bright);}
.hero-right{text-align:right; max-width:300px; padding-bottom:6px;}
.hero-right .lead{font-size:17px;}
.hero-actions{display:flex; flex-direction:column; align-items:flex-end; gap:18px; margin-top:24px;}

/* the one calm heatmap centerpiece — dark showcase with phones */
.showcase{position:relative; background:var(--ink); border-radius:28px; overflow:hidden;
  margin-top:8px; padding:64px 32px 0; min-height:clamp(420px, 50vw, 600px); display:flex; flex-direction:column;}
.showcase .live-heat{inset:0;}
.showcase::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%, rgba(13,13,15,0.85), transparent 60%);}
.sc-head{position:relative; z-index:4; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.sc-head .tag{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#b9b9c2;}
.sc-scale{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; color:#b9b9c2;}
.sc-bar{width:120px; height:6px; border-radius:4px; background:linear-gradient(90deg,var(--hm-red),var(--hm-yellow),var(--hm-green));}
.sc-phones{position:relative; z-index:3; display:flex; justify-content:center; align-items:flex-end; gap:24px; margin-top:auto; padding-top:48px;}
.sc-phones .phone{transform:translateY(40px); width:271px;}
.sc-phones .phone.mid{transform:translateY(10px) scale(1.06); z-index:2;}

/* phone mockup */
.phone{width:226px; aspect-ratio:226/462; border-radius:34px; background:#000; border:1px solid var(--ink-line);
  padding:9px; box-shadow:0 30px 70px rgba(0,0,0,0.5); flex-shrink:0;}
.phone .screen{position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden; background:#0b0b0d;}
.phone .notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:84px; height:20px; background:#000; border-radius:0 0 12px 12px; z-index:5;}
.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;}
.shot-ph{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px;}
.shot-ph .ph-lines{position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 40px);}
.shot-ph .ph-cap{position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:#6a6a72; text-transform:uppercase;}
.shot-ph svg{position:relative; opacity:.45;}

/* ============ generic section ============ */
.sec{padding:120px 0;}
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:72px;}
.sec-head .eyebrow{margin-bottom:18px; display:block;}
.sec-head p{color:var(--muted);}

/* process — clean numbered list, hairline rules */
.proc{border-top:1px solid var(--line);}
.prow{display:grid; grid-template-columns:64px 1fr 240px; gap:32px; padding:40px 0; border-bottom:1px solid var(--line);
  align-items:center; transition:padding-left .25s ease;}
.prow:hover{padding-left:10px;}
.prow .pnum{font-family:var(--mono); font-size:14px; color:var(--faint); align-self:start; padding-top:6px;}
.prow .pbody{max-width:600px;}
.prow h3{font-size:clamp(22px,2.4vw,30px); font-weight:500;}
.prow p{color:var(--muted); margin-top:12px;}
.prow .pmedia{justify-self:end;}
.prow .phone-sm{width:150px; aspect-ratio:150/306;}
.prow .phone-sm .screen{border-radius:20px;}
.prow .phone-sm .notch{width:60px; height:15px;}

/* features — quiet two-column list */
.flist{display:grid; grid-template-columns:1fr 1fr; gap:0 64px;}
.fitem{padding:30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;}
.fitem .ic{width:24px; height:24px; color:var(--green-bright); margin-top:3px;}
.fitem h3{font-size:18px; margin-bottom:8px;}
.fitem p{color:var(--muted); font-size:15px; line-height:1.55;}
.fitem .ttl-row{display:flex; align-items:center; gap:10px;}

/* fresh inline */
.fresh-line{margin-top:14px; display:flex; flex-direction:column; gap:9px;}
.fresh-row{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted);}
.fresh-row .fr-name{width:90px; flex-shrink:0;}
.fresh-track{flex:1; height:4px; border-radius:3px; background:var(--surface); overflow:hidden;}
.fresh-fill{height:100%; border-radius:3px;}
.fresh-row .fr-ttl{font-family:var(--mono); font-size:11px; color:var(--faint); width:52px; text-align:right; flex-shrink:0;}

/* cats inline */
.cats{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.cat{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  padding:6px 12px; border:1px solid var(--line2); border-radius:999px;}

/* audience — editorial rows */
.aud{border-top:1px solid var(--line);}
.arow{display:grid; grid-template-columns:160px 1fr; gap:32px; padding:44px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.arow .aidx{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
.arow h3{font-size:clamp(22px,2.6vw,32px); font-weight:500; max-width:640px;}
.arow p{color:var(--muted); margin-top:14px; max-width:560px;}

/* download — calm centered */
.download{padding:140px 0 120px; text-align:center; border-top:1px solid var(--line);}
.download h2{font-size:clamp(34px,5vw,62px); max-width:760px; margin:0 auto;}
.download .lead{margin:22px auto 0; max-width:480px;}
.download .store-row{justify-content:center; margin-top:40px;}

/* footer */
footer{border-top:1px solid var(--line); padding:48px 0;}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-start;}
.foot-links{display:flex; flex-wrap:wrap; gap:28px;}
.foot-links a{color:var(--muted); font-size:14px; transition:color .15s;}
.foot-links a:hover{color:var(--text);}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:36px;
  font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.03em;}

/* reveal */
.reveal{opacity:1; transform:none;}
html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
html.js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1; transform:none; transition:none;}
  .heat-blob,.heat-chip{animation:none !important;}
  html{scroll-behavior:auto;}
}

/* responsive */
@media (max-width:820px){
  .nav-links{display:none;}
  .hero{padding:150px 0 0;}
  .hero-top{grid-template-columns:1fr; align-items:start; gap:28px;}
  .hero-right{text-align:left; max-width:none;}
  .hero-actions{align-items:flex-start;}
  .sec{padding:80px 0;}
  .sec-head{grid-template-columns:1fr; gap:18px; margin-bottom:48px;}
  .flist{grid-template-columns:1fr; gap:0;}
  .arow{grid-template-columns:1fr; gap:10px; padding:34px 0;}
  .sc-phones{gap:14px;}
  .sc-phones .phone{width:160px;}
  .prow{grid-template-columns:48px 1fr; gap:20px;}
  .prow .pmedia{display:none;}
}
@media (max-width:480px){
  .wrap{padding:0 22px;}
  .prow{grid-template-columns:1fr; gap:10px;}
  .showcase{padding:44px 18px 0;}
  .sc-phones{gap:10px;}
  .sc-phones .phone{width:130px;}
  .sc-phones .phone:first-child{display:none;}
}

/* legal */
.legal-page{padding:150px 0 90px;} .legal-page .wrap{max-width:720px;}
.legal-page h1{font-size:clamp(32px,5vw,48px); margin-bottom:8px;}
.legal-page .upd{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.06em; margin-bottom:42px;}
.legal-page h2{font-size:22px; margin:42px 0 14px; font-weight:500;}
.legal-page p, .legal-page li{color:var(--muted); font-size:16px; line-height:1.7;}
.legal-note{border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin:30px 0;}
.legal-note p{color:var(--text); font-size:15px;}
.back-link{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin-bottom:30px;}
.back-link:hover{color:var(--text);}

/* ============ DEMO · video phone over a light desk ============ */
.demo .desk{position:relative; margin-top:8px; border-radius:28px; overflow:hidden; perspective:1500px;
  padding:96px 20px 104px; display:grid; place-items:center;
  background:
    radial-gradient(130% 80% at 50% -10%, color-mix(in srgb, var(--desk-tone,#ECE8DF) 70%, #fff), var(--desk-tone,#ECE8DF) 60%, color-mix(in srgb, var(--desk-tone,#ECE8DF) 80%, #000 6%));}
.demo .desk::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(0deg, rgba(0,0,0,0.05), transparent); pointer-events:none;}
.phone-stage3d{position:relative; transform-style:preserve-3d;}
.phone-shadow{position:absolute; left:50%; bottom:-46px; width:218px; height:44px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(28,24,18,var(--shadow-a,0.3)) 0%, transparent 70%); filter:blur(15px); border-radius:50%; z-index:0;}
.phone-tilt{position:relative; z-index:2; transform-style:preserve-3d; transition:transform .3s ease-out; will-change:transform;
  transform:rotateY(var(--mx,0deg)) rotateX(calc(var(--tilt-x,6deg) + var(--my,0deg))) rotateZ(var(--tilt-z,-8deg));}
.phone-float{transform-style:preserve-3d;}
.demo .desk.idle .phone-float{animation:phoneFloat 5.6s ease-in-out infinite;}
.demo .desk.idle .phone-shadow{animation:shadowPulse 5.6s ease-in-out infinite;}
@keyframes phoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1); opacity:1;}50%{transform:translateX(-50%) scale(.88); opacity:.82;}}
.phone-big{width:300px; aspect-ratio:300/620; border-radius:42px; padding:11px;
  box-shadow:0 40px 80px rgba(0,0,0,0.34), 0 6px 18px rgba(0,0,0,0.18);}
.phone-big .screen{border-radius:32px;}
.phone-big .notch{width:108px; height:24px; border-radius:0 0 14px 14px;}
.demo-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;}
.demo-ph{position:absolute; inset:0; z-index:1;}
.play-btn{position:relative; z-index:3; width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.1); backdrop-filter:blur(4px); display:grid; place-items:center; cursor:pointer;
  color:#fff; transition:transform .18s ease, background .18s ease;}
.play-btn:hover{transform:scale(1.06); background:rgba(255,255,255,0.18);}
.demo .sec-head{margin-bottom:40px;}
@media (prefers-reduced-motion: reduce){
  .demo .desk.idle .phone-float, .demo .desk.idle .phone-shadow{animation:none !important;}
  .phone-tilt{transition:none;}
}
@media (max-width:560px){
  .demo .desk{padding:64px 14px 76px;}
  .phone-big{width:230px;}
}

/* ============ TWEAKS panel (design-time only) ============ */
#tweaks-panel{position:fixed; right:18px; bottom:18px; z-index:9999; width:312px; max-height:84vh; overflow:auto;
  background:#fff; color:#17171a; border:1px solid #e2ddd2; border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,0.22);
  font-family:var(--font); padding:0;}
#tweaks-panel[hidden]{display:none;}
.tw-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eee7da; cursor:grab;}
.tw-head h4{margin:0; font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.tw-x{border:none; background:transparent; font-size:20px; line-height:1; color:#9a968c; cursor:pointer; padding:0 4px;}
.tw-x:hover{color:#17171a;}
.tw-body{padding:6px 18px 18px;}
.tw-sec{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#9a968c; margin:18px 0 10px;}
.tw-row{margin-bottom:14px;}
.tw-row label{display:block; font-size:13px; color:#46464d; margin-bottom:7px; display:flex; justify-content:space-between; gap:8px;}
.tw-row label .val{font-family:var(--mono); color:#9a968c;}
.tw-row input[type=range]{width:100%; accent-color:#34C759; height:24px;}
.tw-row input[type=text]{width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid #e2ddd2; border-radius:9px; font-family:var(--mono); font-size:12px; color:#17171a;}
.tw-row input[type=text]:focus{outline:2px solid #34C759; outline-offset:1px;}
.tw-seg{display:flex; gap:6px;}
.tw-seg button{flex:1; padding:9px 8px; border:1px solid #e2ddd2; border-radius:9px; background:#fff; cursor:pointer; font-family:var(--font); font-size:12.5px; color:#46464d; min-height:38px;}
.tw-seg button.on{background:#17171a; color:#fff; border-color:#17171a;}
.tw-sw{display:flex; gap:8px;}
.tw-sw button{width:34px; height:34px; border-radius:9px; border:2px solid transparent; cursor:pointer; padding:0;}
.tw-sw button.on{border-color:#34C759;}
.tw-hint{font-size:11px; color:#9a968c; line-height:1.5; margin-top:6px;}

.demo-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;}
.demo-overlay{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.5));}
.demo-overlay .ph-cap{position:relative;}

/* ============ DEMO — 3D phone over a bright desk ============ */
.demo{padding:110px 0 120px;}
.demo .sec-head{margin-bottom:40px;}
.desk{position:relative; border-radius:30px; overflow:hidden; padding:84px 20px 96px;
  background:
    radial-gradient(140% 120% at 50% -10%, #ffffff 0%, var(--desk,#F1ECE3) 56%, color-mix(in srgb, var(--desk,#F1ECE3) 86%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -40px 80px rgba(120,110,95,0.10);}
.desk::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 120%, rgba(120,110,95,0.12), transparent 55%);}
.stage3d{position:relative; display:grid; place-items:center; perspective:1500px;}
.bob{position:relative; transform-style:preserve-3d; animation:bob3d 7s ease-in-out infinite;}
@keyframes bob3d{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.desk-shadow{position:absolute; left:50%; bottom:-44px; width:248px; height:54px;
  transform:translateX(-50%) rotate(0.001deg); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(34,30,24,0.55), transparent 70%);
  filter:blur(20px); opacity:var(--deskShadow,0.6); animation:shadowPulse 7s ease-in-out infinite;}
@keyframes shadowPulse{0%,100%{opacity:var(--deskShadow,0.6); transform:translateX(-50%) scale(1);}50%{opacity:calc(var(--deskShadow,0.6) * 0.62); transform:translateX(-50%) scale(0.9);}}

.demo-phone{position:relative; width:300px; aspect-ratio:300/620; border-radius:46px;
  background:#08080a; border:1px solid #23232b; padding:11px; transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-17deg)) rotateZ(var(--rz,-2deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow:
    0 50px 90px rgba(30,26,20,0.34),
    0 8px 22px rgba(30,26,20,0.18),
    inset 0 0 0 2px #000,
    inset 0 2px 6px rgba(255,255,255,0.12);}
.demo-phone .screen{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#000;}
.demo-phone .island{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:92px; height:26px; background:#000; border-radius:999px; z-index:6;}
.demo-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0b0b0d; z-index:2;}
.demo-ph{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px; background:#0b0b0d;}
.demo-ph .ph-lines{position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 44px);}
.demo-ph .ph-cap{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#6a6a72; text-transform:uppercase;}
.demo-ph .ph-sub{position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:#4d4d55;}
.demo-play{position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.92); display:grid; place-items:center; transition:transform .16s ease, background .16s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);}
.demo-play:hover{transform:translate(-50%,-50%) scale(1.06); background:#fff;}
.demo-play svg{margin-left:3px;}
.demo-cap-row{display:flex; justify-content:center; gap:10px; margin-top:54px; position:relative; z-index:1;}
.demo-cap{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line2); border-radius:999px; padding:8px 14px; background:rgba(255,255,255,0.4);}
@media (prefers-reduced-motion: reduce){ .bob,.desk-shadow{animation:none !important;} }
@media (max-width:560px){ .demo-phone{width:230px;} .desk{padding:60px 14px 72px;} }

/* ============ TWEAKS PANEL (vanilla) ============ */
#tweaks{position:fixed; right:18px; bottom:18px; z-index:9999; width:300px; display:none;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line2); border-radius:18px; box-shadow:0 24px 60px rgba(30,26,20,0.28);
  font-family:var(--font); color:var(--text); overflow:hidden;}
#tweaks.on{display:block;}
.tw-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line);}
.tw-head h4{margin:0; font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.tw-head .tw-x{background:none; border:none; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; padding:4px; border-radius:6px;}
.tw-head .tw-x:hover{color:var(--text); background:var(--line);}
.tw-body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:16px; max-height:70vh; overflow:auto;}
.tw-ctrl label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:8px;}
.tw-ctrl .val{color:var(--text); margin-left:6px;}
.tw-ctrl input[type=range]{width:100%; accent-color:var(--green);}
.tw-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tw-switch{position:relative; width:42px; height:24px; border-radius:999px; background:var(--line2); border:none; cursor:pointer; transition:background .18s; flex-shrink:0;}
.tw-switch::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s;}
.tw-switch.on{background:var(--green);} .tw-switch.on::after{transform:translateX(18px);}
.tw-swatches{display:flex; gap:8px;}
.tw-swatch{width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.tw-swatch.on{border-color:var(--green);}
.tw-ctrl input[type=text]{width:100%; box-sizing:border-box; font-family:var(--mono); font-size:12px; padding:9px 10px; border-radius:8px; border:1px solid var(--line2); background:#fff; color:var(--text);}
.tw-ctrl input[type=text]:focus{outline:none; border-color:var(--green);}

/* ===== 4-language legal content ===== */
[data-lang-block][hidden]{display:none;}
.legal-page h3{font-size:17px; font-weight:600; margin:26px 0 8px; color:var(--text);}
.legal-page strong{color:var(--text); font-weight:600;}
.legal-page a{color:var(--green-bright);}
.legal-page a:hover{text-decoration:underline;}
.legal-page ul, .legal-page ol{padding-left:22px; margin:12px 0;}
.legal-page li{margin:7px 0;}
.legal-page hr{border:none; border-top:1px solid var(--line); margin:46px 0;}
.legal-page .meta{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.04em;}
.legal-page .steps{counter-reset:step; list-style:none; padding-left:0;}
.legal-page .steps li{counter-increment:step; position:relative; padding-left:42px; margin:14px 0;}
.legal-page .steps li::before{content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--hm-green); color:#fff; font-family:var(--mono); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center;}