/* Stonotix: the home leads the page. One headline, one button, one notification. */
.hero-home, .topbar {
  --home-brand:#172F38; --home-teal:#0D9488; --home-teal-ink:#096C63;
  --home-cta:#172F38; --home-canvas:#FAF9F6; --home-surface:#FFFFFF;
  --home-border:#DCE3DF; --home-text:#172F38; --home-muted:#586A70;
  --home-sleep:#4F46E5; --home-activity:#0D9488; --home-insight:#7C3AED;
  --home-attention:#9A4708; --home-critical:#C8314F; --home-drita:#E8912D;
  --home-calm:#0B6B5E;
  --home-tint:#E2F3EF; --home-shadow:rgba(23,47,56,.06);
  --home-gutter:max(24px,4.5vw,calc((100vw - 1320px)/2));
  color:var(--home-text);
}
[data-home-theme="night"] .hero-home, [data-home-theme="night"] .topbar {
  --home-brand:#EDF4F1; --home-teal:#2DD4BF; --home-teal-ink:#64DAC6;
  --home-cta:#64DAC6; --home-canvas:#101C24; --home-surface:#192B34;
  --home-border:#2B404B; --home-text:#EDF4F1; --home-muted:#9DB1B5;
  --home-sleep:#A5B4FC; --home-activity:#2DD4BF; --home-insight:#C084FC;
  --home-attention:#F5A962; --home-critical:#FB7185; --home-drita:#FBBF24;
  --home-calm:#5EE0C8;
  --home-tint:#12302D; --home-shadow:rgba(0,0,0,.14); color-scheme:dark;
}
.topbar { position:sticky; inset:0 0 auto; min-height:82px; padding:18px var(--home-gutter); gap:28px; background:var(--home-canvas); border-bottom:1px solid transparent; transition:border-color .25s; }
.topbar[data-scrolled="true"] { border-bottom-color:var(--home-border); }
.topbar .brand { display:flex; align-items:center; text-decoration:none; --logo-stones:var(--home-teal); --logo-keystone:var(--home-drita); --logo-ink:var(--home-brand); }
.topbar .stx-logo { width:165px; height:34px; }
.topbar .language-switch { margin-left:auto; }
/* Day/night switch: shows the moon by day and the sun at night. */
.theme-toggle { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--home-muted); cursor:pointer; transition:color .2s,background .2s; }
.theme-toggle:hover { color:var(--home-teal-ink); background:var(--home-tint); }
.theme-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.theme-icon-day, [data-home-theme="night"] .theme-icon-night { display:none; }
[data-home-theme="night"] .theme-icon-day { display:block; }
.topbar .topbar__cta { border-radius:6px; border-color:var(--home-border); color:var(--home-text); font-size:12px; gap:20px; padding:11px 17px; }
.topbar .topbar__cta:hover { background:var(--home-tint); border-color:var(--home-teal-ink); }

/* The stage: the 3D home fills the first screen; text sits in its quiet corners. */
.hero-home { position:relative; height:calc(100svh - 82px); min-height:560px; max-height:1000px; background:var(--home-canvas); overflow:hidden; transition:background .3s,color .3s; }
.hero-home svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* The model sits up and to the right, leaving the lower-left corner clear for the headline. */
.home-scene { position:absolute; inset:0 0 15% 20%; }
.home-scene > canvas { position:absolute; display:block; width:100%; height:100%; cursor:grab; touch-action:none; outline-offset:-5px; }
.home-scene > canvas:active { cursor:grabbing; }

/* Sensor dots stay on the model; their names are announced, not printed. */
.home-hotspots { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.home-hotspot { position:absolute; pointer-events:auto; display:grid; place-items:center; width:36px; height:36px; border:0; padding:0; background:none; cursor:pointer; transform:translate(-50%,-50%); transition:opacity .25s; }
.home-hotspot-dot { width:11px; height:11px; border:2px solid var(--home-surface); background:var(--home-teal); border-radius:50%; box-shadow:0 0 0 2px #fff5,0 2px 8px #0002; position:relative; transition:transform .2s; }
.home-hotspot-dot::after { content:""; position:absolute; inset:-5px; border:1px solid var(--home-teal); border-radius:50%; opacity:.35; }
.home-hotspot[data-room="bedroom"] .home-hotspot-dot { background:var(--home-sleep); }
.home-hotspot-label { display:none; }
.home-hotspot:hover .home-hotspot-dot, .home-hotspot:focus-visible .home-hotspot-dot, .home-hotspot[aria-pressed="true"] .home-hotspot-dot { transform:scale(1.25); }
.home-hotspot[aria-pressed="true"] .home-hotspot-dot::after { animation:home-sensor-pulse 2.5s ease-out infinite; }
.home-hotspot[data-triggered="active"] .home-hotspot-dot { box-shadow:0 0 0 4px #2dd4bf28,0 0 16px #2dd4bf77; }
.home-hotspot[data-triggered="alert"] .home-hotspot-dot { background:var(--home-critical); box-shadow:0 0 0 4px #e11d4833,0 0 16px #e11d4877; }
.home-hotspot[data-triggered="alert"] .home-hotspot-dot::after { border-color:var(--home-critical); }
@keyframes home-sensor-pulse { 0%,100% { transform:scale(.8); opacity:.45; } 75% { transform:scale(1.35); opacity:0; } }

/* One quiet line at a time. The status shape carries the state, not only its colour. */
.home-moment { --tone:var(--home-calm); position:absolute; top:22px; right:var(--home-gutter); z-index:4; display:flex; align-items:center; gap:8px; max-width:min(380px,calc(100% - 48px)); padding:7px 14px 7px 9px; background:color-mix(in srgb,var(--home-surface) 88%,transparent); border:1px solid var(--home-border); border-radius:999px; box-shadow:0 4px 14px var(--home-shadow); font-size:12.5px; font-weight:600; line-height:1.35; color:var(--home-text); white-space:nowrap; pointer-events:none; transition:border-color .3s; }
.home-moment > span:last-child { overflow:hidden; text-overflow:ellipsis; }
.home-moment[hidden] { display:none; }
.home-moment-icon { width:16px; height:16px; flex-shrink:0; background:var(--tone); -webkit-mask:var(--shape) center/contain no-repeat; mask:var(--shape) center/contain no-repeat;
  --shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2A10 10 0 0 1 12 22A10 10 0 0 1 12 2ZM6.7 13.05L9.7 16.05A1.125 1.125 0 0 0 11.3 16.05L17.3 10.05A1.125 1.125 0 0 0 15.7 8.45L10.5 13.66L8.3 11.45A1.125 1.125 0 0 0 6.7 13.05Z'/%3E%3C/svg%3E"); }
.home-moment[data-tone="alert"] { --tone:var(--home-critical); border-color:color-mix(in srgb,var(--home-critical) 40%,var(--home-border)); }
.home-moment[data-tone="alert"] .home-moment-icon { --shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.06 2.94A2.75 2.75 0 0 1 13.94 2.94L21.06 10.06A2.75 2.75 0 0 1 21.06 13.94L13.94 21.06A2.75 2.75 0 0 1 10.06 21.06L2.94 13.94A2.75 2.75 0 0 1 2.94 10.06ZM10.875 7.375A1.125 1.125 0 0 1 13.125 7.375V12.625A1.125 1.125 0 0 1 10.875 12.625ZM12 15.5A1.25 1.25 0 0 1 12 18A1.25 1.25 0 0 1 12 15.5Z'/%3E%3C/svg%3E"); }
.home-moment[data-tone="care"] { --tone:var(--home-attention); }
.home-moment[data-tone="care"] .home-moment-icon { --shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2A10 10 0 0 1 12 22A10 10 0 0 1 12 2ZM12 4A8 8 0 0 1 12 20Z'/%3E%3C/svg%3E"); }

/* The headline and the actions. Empty space around them passes drags through to the home. */
.home-hero-copy { position:absolute; left:var(--home-gutter); bottom:44px; z-index:4; max-width:min(620px,calc(100% - 48px)); pointer-events:none; }
.home-hero-copy h1 { margin:0; font-family:var(--display); font-weight:800; font-size:clamp(38px,4.8vw,70px); line-height:1.04; letter-spacing:-.03em; color:var(--home-brand); }
.home-hero-copy h1 span, .home-hero-copy h1 em { display:block; }
.home-hero-copy h1 em { font-style:normal; color:var(--home-teal-ink); }
.home-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin-top:26px; }
.home-actions > * { pointer-events:auto; }
.home-primary { display:inline-flex; align-items:center; min-height:48px; padding:0 22px; background:var(--home-teal-ink); color:var(--home-canvas); border-radius:8px; text-decoration:none; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }
.home-primary:hover { transform:translateY(-2px); background:var(--home-brand); }
.home-fall-demo { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:none; color:var(--home-text); font:600 14px var(--body); cursor:pointer; }
.home-fall-demo:hover { color:var(--home-teal-ink); }
.home-fall-demo:disabled { cursor:wait; opacity:.45; }
.home-fall-demo[hidden] { display:none; }
.home-scroll-cue { position:absolute; right:var(--home-gutter); bottom:44px; z-index:4; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--home-border); border-radius:50%; color:var(--home-muted); background:color-mix(in srgb,var(--home-canvas) 80%,transparent); }
.home-scroll-cue:hover { color:var(--home-teal-ink); border-color:var(--home-teal-ink); }

.home-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--home-muted); font-size:12px; text-align:center; padding:30px; }
.home-loading-icon { font-size:55px; color:var(--home-teal); font-weight:400; }
.home-scene[data-ready="true"] .home-loading { display:none; }
.home-fallback-image { width:100%; height:100%; object-fit:contain; }
.home-scene[data-failed="true"] .home-loading { padding:0 0 18px; gap:0; font-size:11px; }
.home-scene[data-failed="true"] .home-loading img { min-height:0; }
[data-home-theme="night"] .home-fallback-image { filter:brightness(.65) saturate(.8); }
.hero-home :focus-visible, .topbar :focus-visible { outline:2px solid var(--home-teal); outline-offset:4px; }

/* Phones and narrow tablets: notification, then the home, then the headline. */
@media (max-width:900px), (max-aspect-ratio:4/5) {
  .hero-home { height:auto; min-height:0; max-height:none; display:flex; flex-direction:column; padding:18px 0 36px; }
  .home-scene { position:relative; inset:auto; height:clamp(320px,62vw,560px); }
  .home-moment { position:relative; top:auto; right:auto; order:-1; margin:0 auto; }
  .home-hero-copy { position:relative; left:auto; bottom:auto; padding:0 var(--home-gutter); max-width:none; }
  .home-scroll-cue { display:none; }
}
@media (max-width:540px) {
  .topbar { min-height:70px; padding:14px 18px; gap:12px; }
  .topbar .stx-logo { width:136px; height:28px; }
  .topbar .topbar__cta { font-size:11px; padding:9px 12px; gap:14px; }
  .theme-toggle { width:38px; height:38px; }
  .home-moment { max-width:calc(100% - 36px); }
  .home-hero-copy { padding:0 18px; }
  .home-hero-copy h1 { font-size:clamp(32px,9vw,42px); }
}
@media (prefers-reduced-motion:reduce) { .hero-home *, .hero-home *::after { animation:none!important; transition:none!important; } }