/* two-waters.co.uk — single shared stylesheet. Dark-first, amber accent. */

:root {
  --bg: #0b0f14;
  --bg2: #0e141b;
  --panel: rgba(15, 22, 29, 0.86);
  --panel2: rgba(20, 29, 38, 0.9);
  --line: rgba(137, 157, 180, 0.2);
  --text: #e8edf2;
  --muted: #93a1b0;
  --dim: #718093;
  --accent: #ffd34e;
  --accent2: #42f58d;
  --purple: #c65cff;
  --teal: #19d3c5;
  --danger: #ff6b6b;
  --radius: 14px;
  --maxw: 1080px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse 88% 60% at -12% 8%, rgba(198, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 82% 62% at 112% 46%, rgba(66, 245, 141, 0.14), transparent 61%),
    radial-gradient(circle at 58% -12%, rgba(255, 211, 78, 0.07), transparent 35%),
    linear-gradient(135deg, #080b12 0%, #081216 48%, #07110f 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* CSS-only ambient field: the dashboard's purple/green mood, not its screenshot */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 520px at 6% 18%, rgba(198, 92, 255, 0.20), transparent 68%),
    radial-gradient(760px 540px at 94% 48%, rgba(66, 245, 141, 0.17), transparent 68%),
    radial-gradient(560px 380px at 58% -8%, rgba(255, 211, 78, 0.09), transparent 68%),
    linear-gradient(rgba(147, 161, 176, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 161, 176, 0.018) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
}

body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(ellipse 40% 25% at 7% 25%, transparent 62%, rgba(198, 92, 255, 0.13) 63%, transparent 66%),
    radial-gradient(ellipse 48% 28% at 96% 61%, transparent 62%, rgba(66, 245, 141, 0.11) 63%, transparent 66%),
    radial-gradient(ellipse 34% 20% at 80% 16%, transparent 66%, rgba(25, 211, 197, 0.08) 67%, transparent 70%);
  filter: blur(12px);
  transform: rotate(-4deg);
}

main, footer { position: relative; z-index: 1; }
h1, h2, h3, h4, .brand, .num { font-family: var(--display); }
.kicker, .tag, .chip, .tl .when, svg .tt { font-family: var(--mono); }

::selection { background: rgba(255, 200, 97, 0.3); }

a { color: var(--accent); text-decoration: none; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: #171108; font-weight: 700; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; border-radius: var(--radius); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11, 15, 20, 0.8);
  border-bottom: 1px solid var(--line);
}
.nav .login-dock {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(61,220,151,.24);
  border-radius: 9px;
  color: var(--accent2);
  background: rgba(61,220,151,.055);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav .login-dock:hover { border-color: var(--accent2); color: var(--text); text-decoration: none; }
.nav .login-dock::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 4px rgba(61,220,151,.08); vertical-align: 1px; }
.nav .mobile-login { display: none; }
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav .brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-right: auto;
  white-space: nowrap;
}
.nav .brand span { color: var(--accent); }
.nav a.nl {
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav a.nl:hover { color: var(--text); text-decoration: none; }
.nav a.nl.on { color: var(--accent); }
.nav a.secure-link::after { content: "↗"; margin-left: 5px; color: var(--accent2); font-family: var(--mono); font-size: .62rem; }
.nav .links a[href="intro.html"] { display: none; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; }

/* ---------- merged Home Assistant + TightWatt ---------- */
.tw-merge {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border: 1px solid rgba(25,211,197,.28);
  border-radius: 22px;
  background: radial-gradient(circle at 82% 14%, rgba(25,211,197,.09), transparent 30%), linear-gradient(145deg, rgba(16,22,31,.96), rgba(5,19,19,.9));
}
.tw-merge::after { content: "TW 4.0"; position: absolute; right: -12px; top: -28px; color: rgba(255,211,78,.035); font: 700 8rem/1 var(--display); letter-spacing: -.08em; pointer-events: none; }
.tw-merge-head { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; margin-bottom: 30px; }
.tw-merge-head h2 { max-width: 760px; margin: 7px 0 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.tw-merge-head > p { max-width: 420px; margin: 0; color: var(--muted); }
.tw-decision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tw-decision-grid article { position: relative; min-height: 180px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: rgba(6,13,18,.72); }
.tw-decision-grid article::after { content: "→"; position: absolute; right: -11px; top: 50%; z-index: 2; width: 21px; height: 21px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 50%; background: #0a1117; color: var(--teal); font-family: var(--mono); }
.tw-decision-grid article:last-child::after { display: none; }
.tw-decision-grid small { color: var(--teal); font-family: var(--mono); font-size: .62rem; letter-spacing: .11em; }
.tw-decision-grid h3 { margin: 28px 0 8px; font-size: 1.05rem; }
.tw-decision-grid p { margin: 0; color: var(--muted); font-size: .78rem; }
.tw-decision-grid .protect { border-color: rgba(255,107,107,.28); }
.tw-decision-grid .protect small { color: var(--danger); }
.tw-priority { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tw-priority div { padding: 13px 15px; border-left: 2px solid var(--dim); background: rgba(6,13,18,.62); }
.tw-priority div:nth-child(2) { border-left-color: var(--danger); }
.tw-priority div:nth-child(3) { border-left-color: var(--accent); }
.tw-priority b, .tw-priority span { display: block; }
.tw-priority b { font-size: .8rem; }
.tw-priority span { margin-top: 2px; color: var(--dim); font-size: .7rem; }
.tw-merge-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 70px; }
.hero::after { content: ""; position: absolute; left: 0; bottom: 34px; width: 84px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.hero .kicker {
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub {
  margin-top: 22px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.1rem;
}
.hero .cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- homepage ---------- */
.home-head .kicker, .now-panel .kicker { color: var(--accent); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); margin: 0 8px 1px 0; box-shadow: 0 0 0 4px rgba(61,220,151,.12); }
.home-landing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding: 88px 0 58px; }
.home-landing .kicker { color: var(--accent2); font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.home-landing h1 { max-width: 13ch; margin-top: 17px; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.055em; }
.home-landing p { max-width: 60ch; margin-top: 24px; color: var(--muted); font-size: 1.04rem; }
.home-landing .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-landing-signal { display: grid; grid-template-columns: auto 34px auto 34px auto 34px auto; align-items: center; gap: 8px; padding-bottom: 12px; color: var(--dim); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; }
.home-landing-signal i { display: block; width: 34px; height: 1px; background: linear-gradient(90deg, var(--accent2), var(--purple)); position: relative; }
.home-landing-signal i::after { content: ""; position: absolute; top: -2px; right: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 9px var(--accent2); animation: signal-pulse 2s ease-in-out infinite; }
.about-strip .cta-row { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
@keyframes signal-pulse { 0%,100% { opacity:.55; filter:none; } 45% { opacity:1; filter:drop-shadow(0 0 6px currentColor); } }
@keyframes map-orbit { to { transform: rotate(360deg); } }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 10px 0 54px; }.quick-card { min-height: 108px; display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); transition: transform .18s ease, border-color .18s ease; }.quick-card:hover { transform: translateY(-3px); text-decoration: none; border-color: var(--accent); }.quick-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; font-size: 1.1rem; }.quick-solar .quick-icon { color: var(--accent2); background: rgba(61,220,151,.1); }.quick-ha .quick-icon { color: var(--purple); background: rgba(180,140,255,.1); }.quick-tw .quick-icon { color: var(--accent); background: rgba(255,200,97,.1); }.quick-web .quick-icon { color: var(--teal); background: rgba(25,211,197,.1); }.quick-m365 .quick-icon { color: var(--purple); background: rgba(180,140,255,.1); }.quick-training { border-color: rgba(61,220,151,.25); background: linear-gradient(145deg, rgba(61,220,151,.075), var(--panel) 62%); }.quick-training .quick-icon { color: var(--accent2); background: rgba(61,220,151,.11); border: 1px solid rgba(61,220,151,.22); }.quick-card b { display: block; font-size: .91rem; }.quick-card small { display: block; color: var(--muted); font-size: .73rem; line-height: 1.3; margin-top: 3px; }.quick-card strong { margin-left: auto; color: var(--dim); font-size: .75rem; }
.quick-game { border-color: rgba(25,211,197,.28); background: linear-gradient(145deg, rgba(25,211,197,.085), var(--panel) 62%); }.quick-game .quick-icon { color: var(--teal); background: rgba(25,211,197,.11); border: 1px solid rgba(25,211,197,.24); }
.quick-fitness { border-color: rgba(255,118,111,.28); background: linear-gradient(145deg, rgba(255,118,111,.08), var(--panel) 62%); }.quick-fitness .quick-icon { color: #ff766f; background: rgba(255,118,111,.11); border: 1px solid rgba(255,118,111,.24); }
.home-head h2 { font-size: clamp(2rem, 4vw, 3rem); }.project-cards { grid-template-columns: 1.08fr 1fr 1fr; }.feature-card { border-color: rgba(255,200,97,.35); background: linear-gradient(145deg, rgba(255,200,97,.08), var(--panel) 55%); }.project-cards .card { min-height: 260px; }
.dashboard-gallery { padding-top: 56px; }.dashboard-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }.dashboard-shots figure:first-child { grid-column: 1 / -1; }.dashboard-shots .dashboard-shot { min-height: 220px; }.dashboard-shots figure:first-child .dashboard-shot { min-height: 460px; }
.websites-section { padding-top: 74px; }.site-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.site-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(16,22,31,.9), rgba(5,19,19,.78)); color: var(--text); transition: transform .18s ease, border-color .18s ease, background .18s ease; }.site-link:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; background: linear-gradient(145deg, rgba(24,30,42,.95), rgba(6,27,24,.86)); }.site-link.burden { border-color: rgba(198,92,255,.26); }.site-link span { color: var(--accent); font-family: var(--mono); font-size: .72rem; }.site-link h3 { margin: 0; font-size: 1.08rem; }.site-link p { margin-top: 5px; color: var(--muted); font-size: .86rem; line-height: 1.45; }.site-link strong { color: var(--accent2); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; }
.site-link.larraine { border-color: rgba(61,220,151,.28); }.site-link.larraine span, .site-link.larraine strong { color: var(--accent2); }.site-link.graham { border-color: rgba(255,200,97,.3); }.site-link.graham span, .site-link.graham strong { color: var(--accent); }.site-link.horizon { border-color: rgba(25,211,197,.3); background: linear-gradient(145deg, rgba(25,211,197,.08), rgba(5,19,19,.84) 60%); }.site-link.horizon span, .site-link.horizon strong { color: var(--teal); }.site-link.training { border-color: rgba(180,140,255,.3); }.site-link.training span, .site-link.training strong { color: var(--purple); }
.site-link.fitness { border-color: rgba(255,118,111,.3); background: linear-gradient(145deg, rgba(255,118,111,.07), rgba(5,19,19,.84) 60%); }.site-link.fitness span, .site-link.fitness strong { color: #ff766f; }
.fitness-project { border-color: rgba(255,118,111,.3) !important; background: linear-gradient(145deg, rgba(255,118,111,.07), var(--panel) 60%) !important; }
.m365-section { padding-top: 82px; }.m365-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: 28px; align-items: center; }.m365-copy > p { color: var(--muted); margin-top: 18px; }.m365-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }.m365-meta span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(10,15,22,.54); }.m365-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }.m365-points article { padding: 16px; border-left: 2px solid rgba(61,220,151,.62); background: rgba(11,16,23,.52); }.m365-points article:nth-child(2n) { border-left-color: rgba(180,140,255,.62); }.m365-points h3 { font-size: .94rem; margin: 0 0 5px; }.m365-points p { color: var(--muted); font-size: .8rem; line-height: 1.45; }.m365-graphic { margin: 0; }.m365-graphic svg { display: block; width: 100%; height: auto; min-width: 0; }.m365-graphic figcaption { color: var(--dim); font-size: .8rem; margin-top: 10px; }.m365-bg { fill: url(#m365-panel); stroke: rgba(143,157,169,.24); stroke-width: 2; }.m365-grid path { fill: none; stroke: rgba(143,157,169,.08); stroke-width: 1; }.m365-core circle:first-child { fill: rgba(10,17,26,.96); stroke: rgba(180,140,255,.9); stroke-width: 3; }.m365-core circle:nth-child(2) { fill: none; stroke: rgba(61,220,151,.34); stroke-width: 2; stroke-dasharray: 7 12; animation: map-orbit 18s linear infinite; transform-origin: 490px 300px; }.m365-core text:first-of-type { fill: var(--text); font-family: var(--display); font-size: 34px; font-weight: 700; }.m365-core text:nth-of-type(2) { fill: var(--purple); font-family: var(--mono); font-size: 13px; }.m365-node rect, .m365-devices { fill: rgba(8,14,20,.93); stroke: rgba(143,157,169,.3); stroke-width: 2; }.m365-node.identity rect { stroke: rgba(180,140,255,.62); }.m365-node.provision rect { stroke: rgba(61,220,151,.62); }.m365-node.assign rect { stroke: rgba(25,211,197,.62); }.m365-node.security rect { stroke: rgba(255,200,97,.62); }.m365-node .eyebrow { fill: #708091; font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; }.m365-node .title { fill: var(--text); font-family: var(--display); font-size: 24px; font-weight: 700; }.m365-node .meta { fill: #8997a4; font-family: var(--mono); font-size: 12px; }.m365-devices text:first-child { fill: var(--text); font-family: var(--display); font-size: 19px; font-weight: 700; }.m365-devices text:nth-child(2) { fill: #8997a4; font-family: var(--mono); font-size: 12px; }.m365-wire { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 12; animation: tour-wire-flow 1.8s linear infinite; }.m365-wire.purple { stroke: var(--purple); }.m365-wire.green { stroke: var(--accent2); }.m365-wire.teal { stroke: var(--teal); }.m365-wire.amber { stroke: var(--accent); }.m365-wire.down { stroke: rgba(143,157,169,.55); stroke-dasharray: 4 10; }.m365-stat text { fill: #82909b; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; }
.m365-section#m365 .m365-layout { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }.m365-page-graphic { margin-top: 24px; }.m365-overview { padding-top: 12px; }.m365-detail-cards { margin-top: 8px; }.stack-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 16px; }.stack-list span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(10,15,22,.54); font-family: var(--mono); font-size: .72rem; }.tag.green { color: var(--accent2) !important; }.tag.purple { color: var(--purple) !important; }.tag.amber { color: var(--accent) !important; }.tag.red { color: #ff756d !important; }.tag.teal { color: var(--teal) !important; }
.last-horizon { padding: 78px 0 10px; }.horizon-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 34px; align-items: center; padding: 40px; border: 1px solid rgba(25,211,197,.3); border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 78% 28%, rgba(25,211,197,.12), transparent 33%), linear-gradient(120deg, rgba(16,22,31,.96), rgba(5,19,19,.88)); box-shadow: inset 0 1px rgba(255,255,255,.025); }.horizon-copy h2 { margin-top: 10px; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; }.horizon-copy > p { color: var(--muted); margin-top: 16px; max-width: 68ch; }.horizon-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.horizon-tags span { padding: 7px 10px; border: 1px solid rgba(25,211,197,.22); border-radius: 999px; color: var(--teal); background: rgba(25,211,197,.06); font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }.horizon-copy .cta-row { margin-top: 24px; }.horizon-console { min-height: 268px; padding: 22px; border: 1px solid rgba(143,157,169,.24); border-radius: 18px; background: linear-gradient(160deg, rgba(3,8,13,.96), rgba(7,25,25,.9)); box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 0 44px rgba(25,211,197,.035); font-family: var(--mono); }.horizon-console-head { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(143,157,169,.18); }.horizon-console-head span { color: var(--text); font-weight: 600; letter-spacing: .12em; }.horizon-console-head i { color: var(--accent2); font-size: .67rem; font-style: normal; letter-spacing: .09em; }.horizon-orbit { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; margin: 52px 0; color: var(--teal); font-size: .68rem; letter-spacing: .08em; }.horizon-orbit b { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 7px; border: 1px solid rgba(25,211,197,.34); border-radius: 50%; background: rgba(25,211,197,.08); box-shadow: 0 0 18px rgba(25,211,197,.08); }.horizon-orbit span { position: relative; height: 1px; background: linear-gradient(90deg, rgba(25,211,197,.18), rgba(25,211,197,.7), rgba(25,211,197,.18)); }.horizon-orbit span::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px var(--teal); animation: horizon-transmit 2.4s linear infinite; }.horizon-orbit span:nth-of-type(2)::after { animation-delay: -1.2s; }.horizon-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.horizon-readout p { margin: 0; color: var(--text); font-size: .74rem; }.horizon-readout small { display: block; color: var(--dim); font-size: .58rem; letter-spacing: .1em; margin-bottom: 4px; }@keyframes horizon-transmit { from { left: 0; } to { left: calc(100% - 5px); } }
.now-section { padding-top: 74px; }.now-panel { display: grid; grid-template-columns: .95fr 1.05fr; gap: 38px; padding: 40px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, var(--panel), rgba(22,30,40,.75)); }.now-panel h2 { margin-top: 9px; font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -.025em; }.now-panel > div > p { color: var(--muted); font-size: .94rem; margin-top: 15px; }.now-list { display: grid; gap: 2px; }.now-list > div { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }.now-list > div:last-child { border: 0; }.now-list span { color: var(--accent); font-size: .7rem; font-variant-numeric: tabular-nums; padding-top: 4px; }.now-list p { margin: 0 !important; }.now-list b { color: var(--text); display: block; font-size: .9rem; }.now-list small { display: block; color: var(--muted); line-height: 1.35; font-size: .78rem; margin-top: 3px; }.about-strip { padding-bottom: 78px; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #14100a; border-color: var(--accent); }
.btn.primary:hover { background: #ffd685; }
.btn.pending { opacity: 0.55; cursor: default; }
.btn.pending:hover { transform: none; border-color: var(--line); }

/* ---------- sections ---------- */
section { padding: 56px 0; }
.sec-head { margin-bottom: 34px; }
.sec-head .kicker {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sec-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.01em; margin-top: 6px; }
.sec-head p { color: var(--muted); margin-top: 10px; max-width: 62ch; }

/* ---------- stat band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.stat .num {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat .num small { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.stat .lbl { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }

/* ---------- public live-energy snapshot ---------- */
.live-energy-panel {
  overflow: hidden;
  border: 1px solid rgba(66, 245, 141, 0.24);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(14, 22, 30, 0.94), rgba(5, 20, 18, 0.92));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.2);
}
.live-energy-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.live-energy-head > div { display: flex; align-items: center; min-width: 0; }
.live-energy-head strong { font-family: var(--display); font-size: .94rem; }
.live-energy-head time { color: var(--dim); font-family: var(--mono); font-size: .72rem; text-align: right; }
.live-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,211,78,.1); }
.live-energy-panel[data-state="live"] .live-dot { color: var(--accent2); background: var(--accent2); box-shadow: 0 0 0 4px rgba(66,245,141,.11); animation: signal-pulse 2.4s ease-in-out infinite; }
.live-energy-panel[data-state="stale"] .live-dot,
.live-energy-panel[data-state="error"] .live-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,107,107,.1); }
.live-energy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1px; background: var(--line); }
.live-reading { min-width: 0; padding: 22px 19px; background: rgba(9,16,21,.96); }
.live-reading > span { display: block; color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.live-reading strong { display: block; margin: 6px 0 2px; color: var(--accent); font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.live-reading strong small { color: var(--muted); font-size: .8rem; font-weight: 500; }
.live-reading .live-word { color: var(--teal); font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; }
.live-reading em { display: block; color: var(--dim); font-family: var(--mono); font-size: .68rem; font-style: normal; }
.live-energy-note { padding: 13px 20px; color: var(--dim); font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .live-energy-panel[data-state="live"] .live-dot { animation: none; } }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: block;
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.card:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--accent); }
.card .tag { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.card h3 { margin: 10px 0 8px; font-size: 1.25rem; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card .go { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 0.9rem; font-weight: 600; }

/* ---------- feature rows / prose panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: 1.15rem; margin-bottom: 8px; }
.panel h3 .chip { vertical-align: 2px; }
.panel p { color: var(--muted); font-size: 0.98rem; }
.panel p + p { margin-top: 10px; }
.panel strong { color: var(--text); }

.chip {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  margin-left: 8px;
}
.chip.green { color: var(--accent2); border-color: rgba(61, 220, 151, 0.35); }
.chip.amber { color: var(--accent); border-color: rgba(255, 200, 97, 0.35); }
.chip.purple { color: var(--purple); border-color: rgba(180, 140, 255, 0.35); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- spec table ---------- */
table.spec { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.spec th, table.spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
table.spec th { color: var(--dim); font-weight: 600; width: 38%; white-space: nowrap; }
table.spec td { color: var(--text); }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }

/* ---------- timeline ---------- */
.tl { list-style: none; border-left: 2px solid var(--line); padding-left: 26px; }
.tl li { position: relative; padding-bottom: 26px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 200, 97, 0.15);
}
.tl .when { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tl h4 { margin: 3px 0 5px; font-size: 1.05rem; }
.tl p { color: var(--muted); font-size: 0.94rem; }

/* ---------- code block ---------- */
pre.code {
  background: #0a0d11;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #c9d4de;
}
pre.code .c { color: var(--dim); }
pre.code .k { color: var(--accent); }
pre.code .v { color: var(--accent2); }

/* ---------- cert list ---------- */
.cert-group { margin-bottom: 34px; }
.cert-group h3 { font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.cert {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cert .badge {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
  background: rgba(255, 200, 97, 0.12);
  color: var(--accent);
  border: 1px solid rgba(255, 200, 97, 0.3);
}
.cert .badge.exp { background: rgba(180, 140, 255, 0.12); color: var(--purple); border-color: rgba(180, 140, 255, 0.3); }
.cert .badge.fun { background: rgba(61, 220, 151, 0.1); color: var(--accent2); border-color: rgba(61, 220, 151, 0.28); }
.cert .body { flex: 1 1 300px; }
.cert .body h4 { font-size: 1.02rem; }
.cert .body .dates { color: var(--dim); font-size: 0.85rem; margin-top: 2px; }
.cert .status { font-size: 0.78rem; color: var(--accent2); border: 1px solid rgba(61, 220, 151, 0.3); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.cert .verify-link {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 200, 97, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cert .verify-link:hover { background: rgba(255, 200, 97, 0.1); border-color: rgba(255, 200, 97, 0.65); }

/* ---------- image slots ---------- */
.imgslot {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--bg2), var(--bg2) 12px, var(--panel) 12px, var(--panel) 24px);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 0.88rem;
  text-align: center;
  padding: 20px;
}
.imgslot.loaded { border: 0; background: none; padding: 0; min-height: 0; display: block; }
.imgslot.dashboard-shot { position: relative; overflow: hidden; border-style: solid; border-color: rgba(180,140,255,.23); background: linear-gradient(140deg, rgba(45,22,45,.64), rgba(0,63,52,.46)), var(--panel); }
.imgslot.dashboard-shot::before { content: ""; position: absolute; inset: 0; opacity: .84; background: radial-gradient(ellipse at 15% 20%, rgba(180,70,160,.34), transparent 36%), radial-gradient(ellipse at 85% 76%, rgba(0,172,123,.3), transparent 43%), linear-gradient(120deg, rgba(255,255,255,.03), transparent 34%); }
.imgslot.dashboard-shot::after { content: ""; position: absolute; inset: 0; }
.imgslot.dashboard-shot.loaded::before, .imgslot.dashboard-shot.loaded::after { display: none; }
.imgslot.dashboard-shot.loaded img { width: 100%; border: 1px solid rgba(180,140,255,.2); }
.imgslot.dashboard-shot.loaded.expandable { cursor: zoom-in; isolation: isolate; }
.imgslot.dashboard-shot.loaded.expandable::after { content: "EXPAND ↗"; display: flex; align-items: center; justify-content: center; inset: auto 12px 12px auto; width: auto; height: 30px; padding: 0 11px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; background: rgba(7,11,16,.82); color: var(--text); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.imgslot.dashboard-shot.loaded.expandable:hover::after, .imgslot.dashboard-shot.loaded.expandable:focus-visible::after { opacity: 1; transform: none; }
.imgslot.dashboard-shot.loaded.expandable:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

.image-viewer { width: min(96vw, 1800px); max-width: none; height: min(94vh, 1100px); max-height: none; margin: auto; padding: 48px 18px 16px; border: 1px solid rgba(198,92,255,.45); border-radius: 18px; background: rgba(5,9,13,.96); color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.7), 0 0 80px rgba(198,92,255,.12); overflow: hidden; }
.image-viewer::backdrop { background: rgba(0,3,6,.88); backdrop-filter: blur(8px); }
.image-viewer.fallback-open { display: block; position: fixed; inset: 3vh 2vw; z-index: 1000; }
.image-viewer figure { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.image-viewer img { max-width: 100%; max-height: calc(100% - 34px); object-fit: contain; border: 1px solid var(--line); border-radius: 10px; }
.image-viewer figcaption { width: 100%; margin-top: 10px; color: var(--muted); text-align: center; }
.viewer-close { position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--text); font: 600 1.3rem/1 var(--display); cursor: pointer; }
.viewer-close:hover, .viewer-close:focus-visible { border-color: var(--purple); color: var(--purple); outline: none; }
figure figcaption { color: var(--dim); font-size: 0.85rem; margin-top: 10px; }

/* ---------- wiring diagram ---------- */
.diagram-holder { background: linear-gradient(145deg, rgba(16,22,31,.94), rgba(5,19,19,.91)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; overflow-x: auto; box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.22); }
.diagram-holder svg { display: block; min-width: 900px; width: 100%; height: auto; }

svg .box { fill: rgba(11,17,24,.94); stroke: var(--line); stroke-width: 1.5; rx: 10; }
svg .box.hl { stroke: var(--accent); }
svg .box.energy { stroke: rgba(66,245,141,.45); } svg .box.power { stroke: rgba(255,211,78,.42); } svg .box.data { stroke: rgba(198,92,255,.46); } svg .box.control { stroke: rgba(25,211,197,.48); } svg .box.safety { stroke: rgba(255,107,107,.38); }
svg .t { fill: var(--text); font-family: var(--display); font-size: 14px; font-weight: 600; }
svg .ts { fill: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 400; }
svg .tt { fill: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
svg .cells rect { fill: rgba(66,245,141,.24); stroke: rgba(66,245,141,.65); stroke-width: 1; }

svg .wire { fill: none; stroke-width: 2; }
svg .wire.sun { stroke: var(--accent2); }
svg .wire.pwr { stroke: var(--accent); }
svg .wire.mon { stroke: var(--purple); stroke-dasharray: 3 5; stroke-width: 1.5; }
svg .wire.logic { stroke: var(--teal); stroke-dasharray: 3 5; stroke-width: 1.5; }
svg .flow { stroke-dasharray: 6 8; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { svg .flow { animation: none; } }

/* ---------- reveal on scroll (only hidden when JS is running: html.js) ---------- */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- TightWatt day replay ---------- */
.twday { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 22px 22px 18px; }
.twday-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.twday-head strong { font-family: var(--display); font-size: .95rem; }
.twday-replay { padding: 7px 14px; font-size: .78rem; border-radius: 8px; }
.twday-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 8px; }
.twday-slot { flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0; background: rgba(137,157,180,.3); opacity: .3; transition: opacity .2s ease; }
.twday-slot.seen { opacity: 1; }
.twday-slot.charge { background: var(--accent2); box-shadow: 0 0 9px rgba(66,245,141,.35); }
.twday-slot.veto-solar, .twday-slot.veto-session { background: rgba(255,107,107,.8); }
.twday-cursor { position: absolute; top: 0; bottom: -4px; left: 0; width: 2px; background: var(--teal); box-shadow: 0 0 10px var(--teal); transition: left .17s linear; }
.twday-cutover { position: absolute; top: 0; bottom: -4px; width: 2px; background: rgba(198,92,255,.75); }
.twday-caption { margin-top: 14px; min-height: 2.6em; color: var(--muted); font-family: var(--mono); font-size: .76rem; line-height: 1.5; }
.twday-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--dim); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.twday-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.twday-legend .l-idle { background: rgba(137,157,180,.45); }
.twday-legend .l-charge { background: var(--accent2); }
.twday-legend .l-veto { background: rgba(255,107,107,.8); }
.twday-legend .l-cut { background: rgba(198,92,255,.75); }
@media (prefers-reduced-motion: reduce) { .twday-cursor { transition: none; } }

/* ---------- callout ---------- */
.note {
  border-left: 3px solid var(--accent);
  background: rgba(255, 200, 97, 0.06);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 36px 0 48px;
  color: var(--dim);
  font-size: 0.9rem;
}
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--muted); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .nav .login-dock { display: none; }
  .nav .mobile-login { display: block; }
  .nav-inner { flex-wrap: wrap; gap: 10px 18px; }
  .nav-toggle { display: block; order: 2; }
  .nav .links { display: none; width: 100%; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
  .nav .links.open { display: flex; }
  .nav .links { order: 3; }
  .hero { padding: 64px 0 40px; }
  .home-landing { grid-template-columns: 1fr; gap: 26px; padding: 58px 0 42px; }.home-landing h1 { font-size: clamp(2.55rem, 14vw, 4.1rem); }.home-landing-signal { grid-template-columns: auto 1fr auto 1fr auto; }.home-landing-signal span:nth-of-type(4), .home-landing-signal i:nth-of-type(3) { display: none; }
  .quick-grid, .project-cards, .dashboard-shots, .site-links { grid-template-columns: 1fr; }.quick-grid { padding-bottom: 34px; }.quick-card { min-height: 84px; }.project-cards .card { min-height: 0; }.dashboard-shots figure:first-child { grid-column: auto; }.dashboard-shots .dashboard-shot, .dashboard-shots figure:first-child .dashboard-shot { min-height: 220px; }
  .websites-section, .m365-section { padding-top: 52px; }.site-link { grid-template-columns: auto 1fr; align-items: start; }.site-link strong { grid-column: 2; }
  .horizon-panel { grid-template-columns: 1fr; padding: 27px 22px; }.horizon-console { min-height: 230px; }.horizon-orbit { margin: 40px 0; }.horizon-readout { grid-template-columns: 1fr; gap: 12px; }
  .m365-layout { grid-template-columns: 1fr; }.m365-points { grid-template-columns: 1fr; }.m365-graphic svg { min-width: 720px; }.m365-graphic { overflow-x: auto; padding-bottom: 4px; }
  .now-section { padding-top: 48px; }.now-panel { grid-template-columns: 1fr; gap: 25px; padding: 27px 22px; }.about-strip { padding-bottom: 54px; }
  .grid2 { grid-template-columns: 1fr; }
  .tw-merge { padding: 26px 20px; }.tw-merge-head { grid-template-columns: 1fr; }.tw-decision-grid, .tw-priority { grid-template-columns: 1fr; }.tw-decision-grid article { min-height: 0; }.tw-decision-grid article::after { content: "↓"; right: 50%; top: auto; bottom: -15px; transform: translateX(50%); }
  .live-energy-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .live-energy-head time { text-align: left; }
  section { padding: 40px 0; }
}
@media (max-width: 767px) { .desktop-only-link { display: none !important; } }
@media (min-width: 761px) and (max-width: 1320px) { .nav-inner { padding-left: 140px; } }
@media (min-width: 761px) {
  .nav .links { display: flex; gap: 24px; }
}

/* ---------- homepage: cinematic system tour ---------- */
.system-tour {
  --tour-progress: 0;
  position: relative;
  width: 100vw;
  min-height: 100svh;
  height: auto;
  margin-left: calc(50% - 50vw);
  padding: 0;
  isolation: isolate;
  background: #070a10;
}
html.js .system-tour { height: 480vh; }
.tour-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #070a10;
}
.tour-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(198,92,255,.13), transparent 33%),
    radial-gradient(circle at 86% 56%, rgba(66,245,141,.10), transparent 38%),
    linear-gradient(180deg, rgba(2,5,10,.05), rgba(2,5,10,.38));
}
.tour-stage::after { content: ""; position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, rgba(66,245,141,.34), rgba(25,211,197,.12) 36%, transparent 72%); mix-blend-mode: screen; }
.system-tour.tour-launch-complete .tour-stage::after { animation: tour-arrival-green 1.25s ease-out 1; }
@keyframes tour-arrival-green { 0% { opacity: 0; } 22% { opacity: .9; } 100% { opacity: 0; } }
.tour-atmosphere { position: absolute; inset: -15%; z-index: 0; pointer-events: none; filter: blur(36px); opacity: .92; }
.tour-atmosphere i { position: absolute; display: block; width: 48vw; height: 28vw; min-width: 420px; min-height: 260px; border-radius: 50%; mix-blend-mode: screen; animation: tour-drift 18s ease-in-out infinite alternate; }
.tour-atmosphere i:nth-child(1) { left: -10%; top: 12%; background: radial-gradient(ellipse, rgba(198,92,255,.19), transparent 68%); }
.tour-atmosphere i:nth-child(2) { right: -8%; top: 36%; background: radial-gradient(ellipse, rgba(66,245,141,.16), transparent 68%); animation-duration: 23s; animation-direction: alternate-reverse; }
.tour-atmosphere i:nth-child(3) { left: 38%; top: -10%; background: radial-gradient(ellipse, rgba(25,211,197,.08), transparent 68%); animation-duration: 28s; }
@keyframes tour-drift { to { transform: translate3d(7vw, 4vh, 0) rotate(8deg) scale(1.08); } }

.tour-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; will-change: transform; }
.tour-stars circle { fill: rgba(225,236,242,.56); animation: tour-twinkle 4s ease-in-out infinite alternate; }
.tour-stars circle:nth-child(3n) { animation-delay: -1.7s; }.tour-stars circle:nth-child(4n) { animation-delay: -3s; }
@keyframes tour-twinkle { to { opacity: .2; } }
.tour-aurora { opacity: .13; filter: url(#tour-big-glow); transform-box: fill-box; transform-origin: center; animation: tour-aurora 14s ease-in-out infinite alternate; transition: fill 1.4s ease; }
.tour-aurora.purple { fill: #c65cff; }.tour-aurora.green { fill: #42f58d; animation-delay: -7s; animation-duration: 19s; }

/* time-of-day sky — class set once by tour.js from the visitor's clock */
.system-tour.sky-dawn #tour-sky stop:nth-child(1) { stop-color: #140f26; }
.system-tour.sky-dawn #tour-sky stop:nth-child(2) { stop-color: #251533; }
.system-tour.sky-dawn #tour-sky stop:nth-child(3) { stop-color: #3c2130; }
.system-tour.sky-dawn .tour-stars { opacity: .35; }
.system-tour.sky-dawn .tour-aurora.purple { fill: #ff7eb0; }
.system-tour.sky-day #tour-sky stop:nth-child(1) { stop-color: #0b1c30; }
.system-tour.sky-day #tour-sky stop:nth-child(2) { stop-color: #103048; }
.system-tour.sky-day #tour-sky stop:nth-child(3) { stop-color: #0c2f36; }
.system-tour.sky-day .tour-stars { opacity: 0; }
.system-tour.sky-day .tour-aurora.purple { fill: #5aa9ff; }
.system-tour.sky-dusk #tour-sky stop:nth-child(1) { stop-color: #120e20; }
.system-tour.sky-dusk #tour-sky stop:nth-child(2) { stop-color: #241428; }
.system-tour.sky-dusk #tour-sky stop:nth-child(3) { stop-color: #3a2118; }
.system-tour.sky-dusk .tour-stars { opacity: .5; }
.system-tour.sky-dusk .tour-aurora.green { fill: #ffb14e; }
.system-tour.scene-solar .tour-aurora.purple { fill: #1fd3a0; }
.system-tour.scene-hardware .tour-aurora.purple { fill: #ff9a3d; }.system-tour.scene-hardware .tour-aurora.green { fill: #ffd34e; }
.system-tour.scene-battery .tour-aurora.green { fill: #5aa9ff; }
.system-tour.scene-logic .tour-aurora.green { fill: #19d3c5; }
@keyframes tour-aurora { to { transform: scale(1.18) translate(24px, -14px); opacity: .2; } }

#tour-world { transform-origin: 0 0; will-change: transform; }
.tour-physical, .tour-data-layer, .tour-topology { will-change: opacity; }
html.js .tour-hardware, html.js .tour-energy-particles { opacity: 0; }
.tour-horizon { fill: url(#tour-ground); }.tour-distant { fill: #0a1115; opacity: .72; }
.tour-house-wall { fill: #10151a; stroke: rgba(147,161,176,.21); stroke-width: 2; }
.tour-roof { fill: #090c11; stroke: rgba(147,161,176,.18); stroke-width: 2; }
.tour-window { fill: rgba(255,211,78,.10); stroke: rgba(255,211,78,.38); stroke-width: 2; animation: tour-window-warm 7s ease-in-out infinite alternate; }
.tour-window:nth-of-type(2) { animation-delay: -3.4s; animation-duration: 9s; }
@keyframes tour-window-warm { to { fill: rgba(255,211,78,.24); } }
.tour-window-line { fill: none; stroke: rgba(255,211,78,.18); stroke-width: 1; }
.tour-door { fill: #090d12; stroke: rgba(147,161,176,.20); stroke-width: 2; }.tour-door-light { fill: var(--accent); filter: url(#tour-soft-glow); }
.tour-shed-roof { fill: #090d12; stroke: rgba(147,161,176,.20); stroke-width: 2; }.tour-shed-wall { fill: #0c1217; stroke: rgba(147,161,176,.18); stroke-width: 2; }.tour-shed-door { fill: #080c10; stroke: rgba(147,161,176,.16); stroke-width: 2; }
.tour-micro-label, .tour-hardware-meta { fill: #81909b; font-family: var(--mono); font-size: 12px; letter-spacing: .8px; }
.tour-micro-label.battery-label { fill: #9aa8b2; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.tour-hardware-title { fill: #e9f2f4; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 0; }

.tour-array-stand { fill: none; stroke: rgba(143,157,169,.55); stroke-width: 9; stroke-linecap: round; }
.tour-panel > rect:first-child { fill: url(#tour-panel); stroke: rgba(93,170,216,.72); stroke-width: 3; }
.tour-panel-grid { fill: url(#tour-panel-grid); }
.tour-panel-shine { fill: url(#tour-glass); opacity: .7; transform: translateX(-120px); animation: tour-panel-sweep 7s ease-in-out infinite; }
.tour-array { transition: opacity .35s ease; }
.tour-panel { transform-box: fill-box; transform-origin: center; }
@keyframes tour-panel-sweep { 0%,30% { transform: translateX(-150px); opacity: 0; } 48% { opacity: .8; } 70%,100% { transform: translateX(160px); opacity: 0; } }
.system-tour.scene-solar .tour-panel > rect:first-child { stroke: #42f58d; filter: url(#tour-soft-glow); }
.system-tour.scene-hardware .tour-array { opacity: .24; }

.tour-rack-back { fill: rgba(7,12,17,.92); stroke: rgba(143,157,169,.28); stroke-width: 2; }
.tour-rack-rail { fill: none; stroke: rgba(143,157,169,.1); stroke-width: 2; }
.tour-screw { fill: #0b1118; stroke: rgba(143,157,169,.45); stroke-width: 1.2; }
.tour-rack-kicker { fill: #c6d2d8; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.tour-hw-eyebrow { fill: #6d7f90; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1.1px; }
.tour-case { fill: url(#tour-case); stroke: rgba(120,150,175,.5); stroke-width: 1.5; }
.tour-case.blue { fill: url(#tour-mppt-case); stroke: rgba(96,190,255,.7); }
.tour-vent { fill: none; stroke: rgba(160,180,200,.22); stroke-width: 2; stroke-linecap: round; }
.tour-led { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.tour-led.green { fill: var(--accent2); color: var(--accent2); animation: signal-pulse 2.4s ease-out infinite; }
.tour-led.amber { fill: var(--accent); color: var(--accent); animation: signal-pulse 2.4s ease-out infinite; animation-delay: -1.2s; }
.tour-led.off { fill: #1d2630; }
.tour-inverter-main text { fill: #eef4f8; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.tour-inverter-main text.tour-value { fill: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.tour-power-rail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 5px rgba(255,211,78,.55)); }
.tour-mppt text { fill: #f1f8fb; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.tour-mppt text.sub { fill: #9fc4dd; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .4px; }
.tour-screen { fill: #050d15; stroke: rgba(96,190,255,.45); stroke-width: 1; }
.tour-screen-read { fill: var(--accent2); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .5px; }
.tour-fin { fill: none; stroke: rgba(96,190,255,.4); stroke-width: 2.5; stroke-linecap: round; }
.tour-cable { fill: none; stroke-linecap: round; }.tour-cable.positive { stroke: #d84040; stroke-width: 6; }.tour-cable.negative { stroke: #171d24; stroke-width: 8; }
.tour-busbar.positive { fill: url(#tour-copper); stroke: #f16b64; stroke-width: 1.5; }.tour-busbar.negative { fill: #14191f; stroke: #4a545e; stroke-width: 1.5; }
.tour-terminal circle { fill: #2a0f10; stroke: #f4a29b; stroke-width: 1.2; }
.tour-iso-ring { fill: #160a0c; stroke: #e0483f; stroke-width: 3; }
.tour-iso-tick { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; stroke-linecap: round; }
.tour-iso-face { fill: #a92129; stroke: #5e1216; stroke-width: 2; }
.tour-iso-handle { fill: #f2e9df; }
.tour-iso-hub { fill: #160a0c; stroke: #f2e9df; stroke-width: 1.5; }
.tour-small-inverter text.big { fill: #eef4f8; font-family: var(--display); font-size: 14px; font-weight: 600; }
.tour-small-inverter text.tag { fill: #7f8f9c; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px; }
.tour-cell rect { fill: url(#tour-battery); stroke: #3f83b8; stroke-width: 1.5; }
.tour-cell .tour-cell-charge { fill: rgba(66,245,141,.3); stroke: none; }
.system-tour.scene-battery .tour-cell-charge { animation: tour-charge-breathe 3s ease-in-out infinite alternate; }
@keyframes tour-charge-breathe { to { fill: rgba(66,245,141,.52); } }
.tour-cell circle { fill: #71b7dc; stroke: #d7f1ff; stroke-width: 1; }.tour-cell-link { fill: none; stroke: #ffd34e; stroke-width: 2.5; opacity: .75; }
.system-tour.scene-hardware .tour-case.blue, .system-tour.scene-hardware .tour-power-rail { filter: url(#tour-soft-glow); }
.system-tour.scene-battery .tour-cell { filter: url(#tour-soft-glow); }.system-tour.scene-battery .tour-cell:nth-child(2n) { animation-delay: -.8s; }

.tour-physical-wire, .tour-data-wire, .tour-topo-wire { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tour-physical-wire { stroke-width: 5; stroke-dasharray: 10 13; animation: tour-wire-flow 1.5s linear infinite; }
.tour-physical-wire.solar { stroke: var(--accent2); }.tour-physical-wire.power { stroke: var(--accent); }
.tour-data-wire { stroke: var(--purple); stroke-width: 4; stroke-dasharray: 7 10; animation: tour-wire-flow 1.25s linear infinite; }
.tour-decision-wire { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 10; animation: tour-wire-flow 1.4s linear infinite; }
@keyframes tour-wire-flow { to { stroke-dashoffset: -46; } }
.tour-particle.solar { fill: var(--accent2); filter: drop-shadow(0 0 8px var(--accent2)); }.tour-particle.power { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }.tour-particle.data { fill: var(--purple); filter: drop-shadow(0 0 8px var(--purple)); }.tour-particle.logic { fill: var(--teal); filter: drop-shadow(0 0 8px var(--teal)); }

.tour-data-layer { opacity: 0; }
.tour-telemetry-node rect { fill: rgba(9,13,20,.96); stroke: var(--purple); stroke-width: 2; }.tour-telemetry-node text { fill: #f3eef8; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 0; }.tour-telemetry-node text.small { fill: #9a8aa8; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .2px; }
.tour-telemetry-node text.eyebrow { fill: #708091; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; }
.tour-telemetry-node.tw rect { stroke: var(--teal); }.tour-telemetry-node.tw text.small { fill: #86a8a3; }
.system-tour.scene-logic .tour-telemetry-node.ha > circle:first-child, .system-tour.scene-logic .tour-telemetry-node.tw rect { filter: url(#tour-soft-glow); }
.tour-telemetry-node.ha > circle:first-child { fill: url(#tour-ha-core); stroke: var(--purple); stroke-width: 2; }.tour-telemetry-node.ha .orbit { fill: none; stroke: rgba(198,92,255,.5); stroke-width: 2; stroke-dasharray: 5 10; transform-origin: 72px 72px; animation: map-orbit 9s linear infinite; }

.tour-topology { opacity: 0; pointer-events: none; }
.tour-topology-grid rect { fill: rgba(5,10,15,.78); stroke: rgba(143,157,169,.22); stroke-width: 2; }
.tour-node rect { fill: rgba(8,14,20,.96); stroke: rgba(143,157,169,.31); stroke-width: 2; transition: stroke .2s ease, filter .2s ease, transform .2s ease; }
.tour-node.green rect { stroke: rgba(66,245,141,.56); }.tour-node.amber rect { stroke: rgba(255,211,78,.56); }.tour-node.purple rect { stroke: rgba(198,92,255,.62); }.tour-node.teal rect { stroke: rgba(25,211,197,.62); }.tour-node.battery rect:first-child { stroke: rgba(255,211,78,.75); }
.tour-node .eyebrow { fill: #708091; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; }.tour-node .title { fill: #eef4f7; font-family: var(--display); font-size: 21px; font-weight: 600; }.tour-node .title.small { font-size: 18px; }.tour-node .meta { fill: #8392a2; font-family: var(--mono); font-size: 13px; }.tour-node .value { fill: #b2c1c9; font-family: var(--mono); font-size: 12px; }
.tour-node .mini-cells rect { fill: rgba(66,245,141,.62); stroke: none; }
.tour-topo-wire { stroke-width: 3; stroke-dasharray: 8 11; animation: tour-wire-flow 1.6s linear infinite; opacity: .85; }.tour-topo-wire.solar { stroke: var(--accent2); }.tour-topo-wire.power { stroke: var(--accent); }.tour-topo-wire.data { stroke: var(--purple); }.tour-topo-wire.logic { stroke: var(--teal); }
.tour-ha-node > circle:first-child { fill: url(#tour-ha-core); stroke: var(--purple); stroke-width: 2.5; }.tour-ha-node .orbit { fill: none; transform-origin: 80px 80px; }.tour-ha-node .orbit.one { stroke: rgba(198,92,255,.55); stroke-dasharray: 5 10; animation: map-orbit 11s linear infinite; }.tour-ha-node .orbit.two { stroke: rgba(25,211,197,.35); stroke-dasharray: 2 13; animation: map-orbit 8s linear infinite reverse; }.tour-ha-node text { fill: #f5f0ff; font-family: var(--display); font-size: 28px; font-weight: 700; }.tour-ha-node text.small { fill: var(--purple); font-family: var(--mono); font-size: 11px; font-weight: 400; }
.system-tour.is-final .tour-topology { pointer-events: auto; }
.system-tour.is-final .tour-topology .tour-node, .system-tour.is-final .tour-ha-node { animation: topo-pulse .9s ease-out var(--pd, 0s) 1 backwards; }
@keyframes topo-pulse { 0%, 100% { filter: none; } 38% { filter: brightness(2) drop-shadow(0 0 16px rgba(235,245,255,.3)); } }
.system-tour.is-brownout .tour-scene { animation: tour-brownout 2.4s ease-in-out 1; }
.system-tour.is-brownout .tour-window, .system-tour.is-brownout .tour-door-light { animation: tour-lights-out 2.4s steps(3, end) 1; }
@keyframes tour-brownout { 0%, 100% { filter: none; } 12% { filter: brightness(.55) saturate(.6); } 20% { filter: brightness(.9); } 30% { filter: brightness(.4) saturate(.5); } 62% { filter: brightness(.45) saturate(.5); } 74% { filter: brightness(1.15); } 82% { filter: brightness(.95); } }
@keyframes tour-lights-out { 0%, 100% { opacity: 1; } 15%, 60% { opacity: .12; } 70% { opacity: 1; } 78% { opacity: .3; } 86% { opacity: 1; } }.tour-topo-link { outline: none; }.tour-topo-link:hover .tour-node rect, .tour-topo-link:focus-visible .tour-node rect, .tour-topo-link:hover .tour-ha-node > circle:first-child, .tour-topo-link:focus-visible .tour-ha-node > circle:first-child { stroke: #fff; filter: url(#tour-soft-glow); }

.tour-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 180px 36px rgba(0,0,0,.62); background: linear-gradient(90deg, rgba(2,4,8,.45), transparent 34%, transparent 68%, rgba(2,4,8,.24)); }
.tour-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .13; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px); mix-blend-mode: screen; }
.tour-skip { position: absolute; z-index: 12; top: 82px; right: 30px; color: rgba(221,231,236,.62); font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(221,231,236,.22); padding: 5px 0; }
.tour-skip:hover, .tour-skip:focus-visible { color: var(--text); text-decoration: none; border-color: var(--accent2); }

.tour-copy { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.tour-auto-status { position: absolute; z-index: 9; top: 84px; left: clamp(24px, 6vw, 110px); display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; padding: 9px 12px; border: 1px solid rgba(66,245,141,.28); border-radius: 999px; color: #e5eeef; background: rgba(6,13,18,.76); box-shadow: 0 12px 28px rgba(0,0,0,.28); backdrop-filter: blur(12px); font-family: var(--mono); text-transform: uppercase; }
.tour-auto-status span { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,200,97,.55); animation: tour-auto-pulse 1.1s ease-out infinite; }
.tour-auto-status b { font-size: .62rem; letter-spacing: .12em; }
.tour-auto-status em { color: #82919d; font-size: .52rem; font-style: normal; letter-spacing: .08em; }
.tour-auto-status.complete { border-color: rgba(66,245,141,.46); }
.tour-auto-status.complete span { background: var(--accent2); animation: none; box-shadow: 0 0 13px rgba(66,245,141,.62); }
@keyframes tour-auto-pulse { 70% { box-shadow: 0 0 0 8px rgba(255,200,97,0); } 100% { box-shadow: 0 0 0 0 rgba(255,200,97,0); } }
.tour-chapter { --ch: var(--accent2); position: absolute; left: clamp(24px, 6vw, 110px); top: 36%; width: min(480px, calc(100vw - 48px)); padding: 26px 30px 30px; opacity: 0; transform: translate3d(0, 30px, 0); will-change: opacity, transform; border: 1px solid rgba(137,157,180,.24); border-radius: 4px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px), linear-gradient(165deg, rgba(13,19,27,.9), rgba(7,11,17,.78)); box-shadow: 0 28px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.tour-chapter::before, .tour-chapter::after { content: ""; position: absolute; z-index: 1; width: 15px; height: 15px; pointer-events: none; }
.tour-chapter::before { top: -2px; left: -2px; border-top: 2px solid var(--ch); border-left: 2px solid var(--ch); }
.tour-chapter::after { bottom: -2px; right: -2px; border-bottom: 2px solid var(--ch); border-right: 2px solid var(--ch); }
.tour-chapter.right { left: auto; right: clamp(24px, 6vw, 110px); }
.tour-chapter.solar { --ch: var(--accent2); }
.tour-chapter.hardware { --ch: var(--accent); top: 33%; width: min(450px, calc(100vw - 48px)); }
.tour-chapter.battery { --ch: var(--purple); }
.tour-chapter.logic { --ch: var(--teal); }
.tour-chapter.intro { top: 22%; width: min(560px, calc(100vw - 48px)); opacity: 1; transform: translate3d(0, 0, 0); }
html.js .tour-chapter { opacity: 0; transform: translate3d(0, 30px, 0); }
.tour-chapter.final { --ch: var(--accent); left: 50%; top: 30%; width: min(720px, calc(100vw - 48px)); text-align: center; transform: translate3d(-50%, 30px, 0); }
.tour-chapter .kicker, .tour-number { color: var(--ch); font-family: var(--mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
.tour-chapter h1 { margin-top: 14px; max-width: 12ch; color: #f2f5f6; font-size: clamp(2.7rem, 4.6vw, 4.3rem); line-height: 1; letter-spacing: -.045em; }
.tour-chapter h1 em { color: var(--accent); font-style: normal; }
.tour-chapter h2 { margin-top: 12px; max-width: 14ch; color: #f2f5f6; font-size: clamp(1.9rem, 3.2vw, 3.15rem); line-height: 1.04; letter-spacing: -.035em; }
.tour-chapter h1::after, .tour-chapter h2::after { content: ""; display: block; width: 76px; height: 2px; margin-top: 18px; background: linear-gradient(90deg, var(--ch), transparent); }
.tour-chapter.final h2 { max-width: none; }
.tour-chapter.final h1::after, .tour-chapter.final h2::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--ch), transparent); }
.tour-chapter > p { margin-top: 16px; max-width: 47ch; color: #aeb9c2; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.62; }
.tour-chapter.hardware > p { max-width: 40ch; }
.tour-chapter.final > p { margin-inline: auto; }
.tour-leader { position: absolute; top: 70px; right: -84px; width: 84px; height: 2px; pointer-events: none; background: linear-gradient(270deg, var(--ch), rgba(255,255,255,0)); }
.tour-leader::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ch); box-shadow: 0 0 12px var(--ch); }
.tour-chapter.right .tour-leader { right: auto; left: -84px; background: linear-gradient(90deg, var(--ch), rgba(255,255,255,0)); }
.tour-chapter.right .tour-leader::after { right: auto; left: -3px; }
.tour-scroll-cue { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: #82919d; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.tour-scroll-cue span { position: relative; width: 2px; height: 42px; overflow: hidden; background: rgba(255,255,255,.14); }
.tour-scroll-cue span::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--accent2); animation: tour-scroll-cue 1.8s ease-in-out infinite; }
@keyframes tour-scroll-cue { to { transform: translateY(300%); } }
.tour-readout { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }.tour-readout span { min-width: 150px; padding: 11px 14px; border-left: 2px solid var(--ch); background: rgba(5,9,14,.62); color: #778894; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; }.tour-readout b { display: block; margin-top: 4px; color: #edf4f6; font-size: 1.05rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tour-route-key { display: flex; gap: 18px; margin-top: 23px; color: #8b9aa5; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }.tour-route-key span::before { content: ""; display: inline-block; width: 20px; height: 2px; margin: 0 8px 3px 0; }.tour-route-key .solar::before { background: var(--accent2); }.tour-route-key .power::before { background: var(--accent); }.tour-route-key .data::before { background: var(--purple); }.tour-route-key .logic::before { background: var(--teal); }
.tour-final-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(780px, 100%); margin: 24px auto 0; pointer-events: auto; }.tour-final-links a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 9px 13px; border: 1px solid rgba(143,157,169,.28); border-radius: 11px; background: rgba(8,14,20,.72); color: #e7eff2; font-size: .82rem; backdrop-filter: blur(12px); transition: transform .18s ease, border-color .18s ease, background .18s ease; }.tour-final-links a:hover, .tour-final-links a:focus-visible { transform: translateY(-3px); border-color: var(--accent2); background: rgba(12,24,25,.9); text-decoration: none; }.tour-final-links span { color: var(--accent2); font-family: var(--mono); font-size: .68rem; }

.tour-progress { position: absolute; z-index: 8; left: 50%; bottom: 22px; width: min(620px, calc(100vw - 48px)); transform: translateX(-50%); }
.tour-progress-track { position: relative; height: 2px; background: rgba(143,157,169,.19); }.tour-progress-track i { display: block; width: calc(var(--tour-progress) * 100%); height: 100%; background: linear-gradient(90deg, var(--accent2), var(--purple), var(--teal)); box-shadow: 0 0 10px rgba(66,245,141,.4); }
.tour-progress ol { display: flex; justify-content: space-between; margin-top: 9px; list-style: none; color: #64727e; font-family: var(--mono); font-size: .56rem; letter-spacing: .11em; text-transform: uppercase; }.tour-progress li.active { color: #e2ebee; }
.tour-progress button { background: none; border: 0; padding: 6px 4px; margin: -6px -4px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color .18s ease; }
.tour-progress button:hover, .tour-progress button:focus-visible { color: #e2ebee; }
.tour-inspect-hint { position: absolute; z-index: 8; top: 92px; left: 50%; opacity: 0; transform: translateX(-50%); color: #81909b; font-family: var(--mono); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; text-align: center; pointer-events: none; }
#tour-end { scroll-margin-top: 80px; }

/* ---------- static tour (small screens, set by tour.js) ---------- */
html.js .system-tour.tour-static { height: auto; }
.system-tour.tour-static .tour-stage { position: relative; height: 88svh; min-height: 540px; }
.system-tour.tour-static .tour-skip, .system-tour.tour-static .tour-auto-status, .system-tour.tour-static .tour-progress, .system-tour.tour-static .tour-inspect-hint, .system-tour.tour-static .tour-chapter { display: none; }
html.js .system-tour.tour-static .tour-chapter.intro { display: block; opacity: 1; transform: none; top: auto; bottom: 30px; left: 16px; right: 16px; width: auto; }
.system-tour.tour-static .tour-chapter.intro .tour-scroll-cue { display: none; }
.system-tour.tour-static .tour-energy-particles, .system-tour.tour-static .tour-topology-particles, .system-tour.tour-static .tour-data-layer, .system-tour.tour-static .tour-topology { display: none; }

/* ---------- mobile tour: full story, reduced rendering cost ---------- */
@media (max-width: 767px) {
  .system-tour.tour-mobile-lite .tour-atmosphere,
  .system-tour.tour-mobile-lite .tour-stars,
  .system-tour.tour-mobile-lite .tour-aurora,
  .system-tour.tour-mobile-lite .tour-panel-shine,
  .system-tour.tour-mobile-lite .tour-energy-particles,
  .system-tour.tour-mobile-lite .tour-topology-particles,
  .system-tour.tour-mobile-lite .tour-scan { display: none; }

  .system-tour.tour-mobile-lite .tour-chapter,
  .system-tour.tour-mobile-lite .tour-auto-status,
  .system-tour.tour-mobile-lite .tour-final-links a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .system-tour.tour-mobile-lite .tour-chapter {
    background: rgba(7, 11, 17, .95);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .38);
  }

  .system-tour.tour-mobile-lite .tour-vignette {
    box-shadow: inset 0 0 68px 8px rgba(0, 0, 0, .54);
    background: linear-gradient(90deg, rgba(2,4,8,.30), transparent 42%, rgba(2,4,8,.18));
  }

  .system-tour.tour-mobile-lite .tour-window,
  .system-tour.tour-mobile-lite .tour-led,
  .system-tour.tour-mobile-lite .tour-cell-charge,
  .system-tour.tour-mobile-lite .tour-topo-wire,
  .system-tour.tour-mobile-lite .tour-ha-node .orbit,
  .system-tour.tour-mobile-lite.is-final .tour-node,
  .system-tour.tour-mobile-lite.is-final .tour-ha-node {
    animation: none !important;
  }

  .system-tour.tour-mobile-lite .tour-door-light,
  .system-tour.tour-mobile-lite.scene-hardware .tour-case.blue,
  .system-tour.tour-mobile-lite.scene-hardware .tour-power-rail {
    filter: none;
  }
}

@media (max-width: 900px) {
  html.js .system-tour { height: 430vh; }
  .tour-stage { min-height: 560px; }
  .tour-vignette { box-shadow: inset 0 0 100px 20px rgba(0,0,0,.62); }
  .tour-chapter { top: auto; bottom: 110px; left: 24px; width: min(480px, calc(100vw - 48px)); padding: 20px 22px 24px; }
  .tour-chapter.right { right: auto; left: 24px; }
  .tour-chapter.intro { top: 25%; bottom: auto; }
  .tour-chapter.final { top: auto; right: 24px; bottom: 96px; left: 24px; width: auto; }
  .tour-chapter h1 { font-size: clamp(2.5rem, 8.5vw, 3.6rem); }
  .tour-chapter h2 { font-size: clamp(1.8rem, 6.5vw, 2.7rem); max-width: 14ch; }
  .tour-leader { display: none; }
  .tour-skip { top: 72px; right: 20px; }
}
@media (max-width: 600px) {
  html.js .system-tour { height: 420vh; }
  .tour-stage { min-height: 540px; }
  .tour-chapter { bottom: 92px; padding: 17px 18px 20px; }
  .tour-chapter.intro { top: 21%; }
  .tour-chapter h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); }
  .tour-chapter h2 { font-size: clamp(1.55rem, 8vw, 2.25rem); }
  .tour-chapter h1::after, .tour-chapter h2::after { margin-top: 13px; width: 56px; }
  .tour-chapter > p { font-size: .9rem; line-height: 1.52; max-width: 38ch; }
  .tour-number, .tour-chapter .kicker { font-size: .65rem; }
  .tour-readout { gap: 7px; margin-top: 16px; }.tour-readout span { min-width: 0; flex: 1 1 42%; padding: 8px 10px; }
  .tour-route-key { margin-top: 15px; gap: 12px; }
  .tour-final-links { grid-template-columns: 1fr; gap: 6px; margin-top: 18px; }.tour-final-links a { min-height: 42px; }
  .tour-progress { bottom: 13px; }.tour-progress ol { font-size: 0; }.tour-progress li { width: 5px; height: 5px; border-radius: 50%; background: #4c5963; }.tour-progress li.active { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
  .tour-skip { top: 66px; font-size: .6rem; }
  .tour-chapter.final { bottom: 62px; }
  .tour-chapter.final h2 { max-width: 12ch; margin-inline: auto; font-size: clamp(1.7rem, 8.5vw, 2.3rem); }
  .tour-chapter.final > p { max-width: 34ch; }
  .tour-final-links { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .system-tour, .system-tour { height: auto; min-height: 780px; }
  .tour-stage { position: relative; height: 780px; min-height: 780px; }
  .tour-atmosphere i, .tour-stars circle, .tour-aurora, .tour-panel-shine, .tour-physical-wire, .tour-data-wire, .tour-decision-wire, .tour-topo-wire, .tour-scroll-cue span::after, .tour-telemetry-node.ha .orbit, .tour-ha-node .orbit, .tour-led, .tour-window, .tour-cell-charge, .tour-node, .tour-ha-node, .tour-scene { animation: none !important; }
  .tour-energy-particles, .tour-topology-particles, .tour-data-layer { display: none; }
  .tour-physical { opacity: .08 !important; }
  .tour-topology { opacity: 1 !important; pointer-events: auto; }
  .tour-chapter { display: none; }
  .tour-chapter.final { display: block; opacity: 1 !important; transform: translate3d(-50%, 0, 0) !important; }
  .tour-progress { display: none; }
  .tour-inspect-hint { opacity: 1; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .tour-chapter.final { transform: none !important; }
}

/* ---------- phone-native system diagrams ---------- */
.mobile-flow { display: none; }

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: clip; }

  .diagram-holder {
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .diagram-holder > svg { display: none; }
  .m365-page-graphic { display: none; }

  .mobile-flow {
    --flow-colour: var(--teal);
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(143,157,169,.2);
    border-radius: 18px;
    background:
      linear-gradient(rgba(143,157,169,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(143,157,169,.045) 1px, transparent 1px),
      linear-gradient(155deg, rgba(13,19,27,.98), rgba(4,16,16,.98));
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 55px rgba(0,0,0,.22);
  }
  .m365-mobile-flow { margin-top: 20px; }

  .mobile-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px 4px 14px;
  }
  .mobile-flow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(143,157,169,.18);
    border-radius: 999px;
    background: rgba(6,10,15,.72);
    color: var(--muted);
    font: 600 .57rem/1.2 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-flow-legend span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
  .mobile-flow-legend .energy { color: var(--accent2); }
  .mobile-flow-legend .power { color: var(--accent); }
  .mobile-flow-legend .data { color: var(--purple); }
  .mobile-flow-legend .control { color: var(--teal); }
  .mobile-flow-legend .safety { color: var(--danger); }

  .mobile-flow-stage {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(143,157,169,.19);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(12,18,26,.96), rgba(6,13,18,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
  }
  .mobile-flow-stage-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    color: var(--text);
    font: 600 .7rem/1.3 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-flow-stage-head b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border: 1px solid rgba(25,211,197,.42);
    border-radius: 50%;
    color: var(--teal);
    background: rgba(25,211,197,.07);
    font-size: .62rem;
  }

  .mobile-flow-grid,
  .mobile-flow-stack { display: grid; min-width: 0; gap: 8px; }
  .mobile-flow-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-flow-grid.three { grid-template-columns: 1fr; }

  .mobile-flow-node {
    --node-colour: var(--teal);
    position: relative;
    min-width: 0;
    padding: 12px 11px 11px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--node-colour) 36%, transparent);
    border-left: 3px solid var(--node-colour);
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--node-colour) 8%, rgba(8,13,19,.96)), rgba(6,10,15,.96));
  }
  .mobile-flow-node::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 1px;
    background: var(--node-colour);
    box-shadow: 0 0 10px var(--node-colour);
    opacity: .7;
  }
  .mobile-flow-node.energy { --node-colour: var(--accent2); }
  .mobile-flow-node.power { --node-colour: var(--accent); }
  .mobile-flow-node.data { --node-colour: var(--purple); }
  .mobile-flow-node.control { --node-colour: var(--teal); }
  .mobile-flow-node.safety { --node-colour: var(--danger); }
  .mobile-flow-node.battery { --node-colour: #ffd34e; }
  .mobile-flow-node.wide { width: 100%; }
  .mobile-flow-node.hero { padding: 16px 14px; text-align: center; border-left-width: 1px; border-bottom: 3px solid var(--node-colour); }
  .mobile-flow-node small,
  .mobile-flow-node strong,
  .mobile-flow-node span,
  .mobile-flow-node em { display: block; min-width: 0; overflow-wrap: anywhere; }
  .mobile-flow-node small { color: var(--node-colour); font: 600 .54rem/1.25 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .mobile-flow-node strong { margin-top: 5px; color: var(--text); font: 600 .83rem/1.25 var(--display); }
  .mobile-flow-node span { margin-top: 4px; color: var(--muted); font-size: .63rem; line-height: 1.38; }
  .mobile-flow-node em { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(143,157,169,.15); color: var(--dim); font: normal .6rem/1.45 var(--mono); }

  .mobile-flow-connector {
    --connector-colour: var(--teal);
    position: relative;
    display: grid;
    place-items: center;
    min-height: 58px;
    overflow: hidden;
  }
  .mobile-flow-connector::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--connector-colour), color-mix(in srgb, var(--connector-colour) 28%, transparent)); }
  .mobile-flow-connector::after { content: ""; position: absolute; top: 2px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--connector-colour); box-shadow: 0 0 12px var(--connector-colour); animation: mobile-flow-pulse 2.2s ease-in-out infinite; }
  .mobile-flow-connector span { position: relative; z-index: 1; max-width: calc(100% - 34px); padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--connector-colour) 32%, transparent); border-radius: 999px; background: rgba(5,10,15,.94); color: var(--connector-colour); font: 600 .53rem/1.3 var(--mono); letter-spacing: .07em; text-align: center; text-transform: uppercase; }
  .mobile-flow-connector.energy { --connector-colour: var(--accent2); }
  .mobile-flow-connector.power { --connector-colour: var(--accent); }
  .mobile-flow-connector.data { --connector-colour: var(--purple); }
  .mobile-flow-connector.control { --connector-colour: var(--teal); }
  .mobile-flow-connector.safety { --connector-colour: var(--danger); }
  @keyframes mobile-flow-pulse { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

  .mobile-flow-split {
    --split-colour: var(--teal);
    position: relative;
    height: 52px;
  }
  .mobile-flow-split::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 20px; background: var(--split-colour); }
  .mobile-flow-split::after { content: ""; position: absolute; top: 20px; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--split-colour) 15%, var(--split-colour) 85%, transparent); }
  .mobile-flow-split i,
  .mobile-flow-split b { position: absolute; top: 20px; width: 2px; height: 32px; background: linear-gradient(var(--split-colour), transparent); }
  .mobile-flow-split i:first-child { left: 20%; }
  .mobile-flow-split b { left: 50%; }
  .mobile-flow-split i:last-child { right: 20%; }
  .mobile-flow-split.energy { --split-colour: var(--accent2); }
  .mobile-flow-split.power { --split-colour: var(--accent); }
  .mobile-flow-split.control { --split-colour: var(--teal); }

  .mobile-battery-cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 10px; }
  .mobile-battery-cells b { height: 15px; border: 1px solid rgba(255,211,78,.7); border-radius: 2px; background: linear-gradient(to top, rgba(66,245,141,.64) 72%, rgba(255,255,255,.04) 72%); }

  .mobile-flow-guard {
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255,107,107,.34);
    border-radius: 10px;
    background: rgba(255,107,107,.055);
  }
  .mobile-flow-guard small,
  .mobile-flow-guard strong,
  .mobile-flow-guard span { display: block; overflow-wrap: anywhere; }
  .mobile-flow-guard small { color: var(--danger); font: 600 .54rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .mobile-flow-guard strong { margin-top: 4px; color: var(--text); font-size: .76rem; }
  .mobile-flow-guard span { margin-top: 3px; color: var(--muted); font-size: .62rem; line-height: 1.4; }

  .mobile-flow-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .mobile-flow-steps li { --step-colour: var(--teal); display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--step-colour) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--step-colour) 5%, rgba(7,12,17,.95)); }
  .mobile-flow-steps li > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--step-colour) 13%, transparent); color: var(--step-colour); font: 600 .7rem var(--mono); }
  .mobile-flow-steps strong,
  .mobile-flow-steps span { display: block; overflow-wrap: anywhere; }
  .mobile-flow-steps strong { color: var(--text); font-size: .72rem; }
  .mobile-flow-steps span { margin-top: 3px; color: var(--muted); font-size: .61rem; line-height: 1.4; }

  .mobile-priority-list { display: grid; gap: 6px; margin-bottom: 9px; }
  .mobile-priority-list > div { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; background: rgba(7,12,18,.8); }
  .mobile-priority-list b { font: 600 .67rem var(--mono); }
  .mobile-priority-list span,
  .mobile-priority-list strong { display: block; min-width: 0; overflow-wrap: anywhere; }
  .mobile-priority-list strong { margin-bottom: 2px; font-size: .67rem; }
  .mobile-priority-list span { color: var(--muted); font-size: .58rem; line-height: 1.35; }
  .mobile-priority-list .stand { border-left: 3px solid var(--dim); }.mobile-priority-list .stand b { color: var(--dim); }
  .mobile-priority-list .protect { border-left: 3px solid var(--danger); }.mobile-priority-list .protect b { color: var(--danger); }
  .mobile-priority-list .control { border-left: 3px solid var(--teal); }.mobile-priority-list .control b { color: var(--teal); }

  .mobile-flow-return { position: relative; margin: 12px 8px 2px; padding: 10px 12px 10px 35px; border: 1px dashed rgba(198,92,255,.38); border-radius: 999px; color: var(--purple); font: 600 .55rem/1.3 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
  .mobile-flow-return::before { content: "↺"; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); font-size: 1rem; }

  .mobile-device-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .mobile-device-row span { min-width: 0; padding: 11px 6px; border: 1px solid rgba(66,245,141,.26); border-radius: 9px; background: rgba(66,245,141,.055); color: var(--text); font: 600 .69rem/1.2 var(--display); text-align: center; overflow-wrap: anywhere; }
  .mobile-flow-foot { margin: 10px 2px 0; color: var(--muted); font-size: .63rem; line-height: 1.45; text-align: center; }
}

@media (max-width: 360px) {
  .mobile-flow-grid.two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-flow-connector::after { animation: none; top: 24px; opacity: 1; }
}