/* Homepage presentation; product UI remains owned by the Electron renderer. */
.home-story { background: var(--card); }
.home-story .site-header[data-chrome] { inset: 20px auto auto 50%; transform: translateX(-50%); width: min(360px,calc(100% - 32px)); height: auto; color: var(--ink); background: color-mix(in srgb,var(--card) 96%,transparent); border: 1px solid var(--line); border-radius: 28px; backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); }
.home-story .header-inner { width: 100%; height: auto; min-height: 58px; padding: 6px 10px 6px 20px; display: grid; grid-template-columns: 1fr auto; gap: 0; }
.home-story .brand { font-size: 18px; gap: 8px; }
.home-story .brand img { width: 25px; height: 25px; filter: brightness(.62) saturate(2.4); }
.home-story .menu-toggle { display: inline-flex; border: 0; border-radius: 22px; background: var(--ground); padding-inline: 16px; color: var(--ink); font-size: 13px; gap: 13px; }
.menu-symbol { width: 14px; display: grid; gap: 4px; }
.menu-symbol i { width: 14px; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.menu-toggle[aria-expanded=true] .menu-symbol i:first-child { transform: translateY(2.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-symbol i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
.home-story #main-nav { position: static; grid-column: 1/-1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; padding: 0 10px; margin: 0; border: 0; background: transparent; color: var(--ink); transition: max-height .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility .5s; }
.home-story #main-nav[data-open] { max-height: 360px; visibility: visible; opacity: 1; padding-block: 20px 12px; }
.home-story #main-nav > a { font-size: 25px; font-weight: 400; letter-spacing: -.03em; padding: 6px 4px; transform: translateY(-8px); opacity: 0; transition: opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.home-story #main-nav[data-open] > a { transform: none; opacity: 1; }
.home-story #main-nav[data-open] > a:nth-child(2) { transition-delay: .045s; }
.home-story #main-nav[data-open] > a:nth-child(3) { transition-delay: .09s; }
.home-story .nav-actions { margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.home-story .nav-actions .btn { background: var(--ink); color: var(--card); font-size: 12px; padding-inline: 12px; flex: none; }
.home-story .btn { border-radius: 100px; box-shadow: none; }
.home-story .btn--fill { background: var(--ink); }
.home-story .btn--fill:hover { background: var(--accent-deep); box-shadow: none; }
.home-story .opening { padding-block: 165px 64px; text-align: center; }
.opening-copy { max-width: 1100px; margin-inline: auto; }
.opening h1 { font-size: clamp(40px,4.5vw,64px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.opening h1 span { color: var(--muted); }
.opening-copy > p { margin: 26px auto 0; max-width: 470px; font-size: 20px; line-height: 1.5; color: var(--muted); }
.opening-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.opening-copy .opening-local { margin-top: 22px; font-size: 13px; }
.opening-local span { color: var(--accent-deep); margin-right: 7px; }
.proof-story { position: relative; padding-bottom: 40px; }
.proof-pin { padding-top: 16px; }
.proof-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 22px; }
.proof-narratives h2 { font-size: 25px; font-weight: 400; letter-spacing: -.035em; }
.proof-narratives [hidden] { display: none; }
.product-monitor { position: relative; background: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: 21px 9px 9px; box-shadow: 0 30px 65px -30px color-mix(in srgb,var(--ink) 28%,transparent), 0 2px 3px color-mix(in srgb,var(--ink) 15%,transparent); }
.monitor-camera { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); top: 8px; left: calc(50% - 2px); }
.product-story-frame { display: block; width: 100%; height: 560px; border: 0; border-radius: 15px; background: var(--dark); }
.proof-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.proof-bottom a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 16px; }
.demo-invitation { padding-block: 110px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.demo-invitation h2 { font-weight: 400; font-size: clamp(32px,3.5vw,48px); line-height: 1.15; }
.demo-invitation p { color: var(--muted); font-size: 19px; margin-top: 24px; max-width: 420px; }
.demo-invitation-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.demo-live-frame { grid-column: 1/-1; }
.demo-live-frame:empty { display: none; }
.demo-live-frame iframe { display: block; width: 100%; border: 1px solid var(--line); border-radius: 18px; }
.home-story .faq details { overflow: hidden; }
@media (prefers-reduced-motion:no-preference) {
  .home-story .qgrid > li { transition: transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease; }
  .home-story .faq summary span { transition: transform .3s cubic-bezier(.22,1,.36,1); }
  .home-story dialog[open] { animation: proof-arrive .3s cubic-bezier(.22,1,.36,1); }
}
@media (hover:hover) and (pointer:fine) {
  .home-story .qgrid > li:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
  .home-story #main-nav > a:hover { color: var(--accent-deep); }
}
.home-story .btn:active { transform: translateY(1px); }
@media (max-width:900px) {
  .home-story .opening { padding-block: 145px 55px; }
  .proof-heading { flex-direction: column; align-items: flex-start; gap: 18px; }
  .product-story-frame { height: 610px; }
  .demo-invitation { padding-block: 80px; }
}
@media (max-width:600px) {
  .opening h1 { font-size: 40px; }
  .opening-copy > p { font-size: 18px; }
  .opening-actions .btn { font-size: 13px; padding-inline: 18px; }
  .proof-narratives h2 { font-size: 24px; }
  .proof-pin { width: calc(100% - 24px); }
  .proof-heading { padding-inline: 6px; }
  .product-monitor { padding: 16px 5px 5px; border-radius: 18px; }
  .monitor-camera { top: 6px; }
  .product-story-frame { border-radius: 12px; height: 630px; }
  .proof-bottom { flex-direction: column; gap: 0; }
  .demo-invitation { grid-template-columns: 1fr; gap: 30px; }
}
@keyframes proof-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce) {
  .home-story *, .home-story *::before, .home-story *::after { animation: none !important; transition: none !important; }
  .home-story .qgrid > li:hover { transform: none; }
}

/* The hero's small physical network, restored on shared alignment axes. */
.home-story .opening { display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;text-align:left;padding-block:150px 85px; }
.opening h1 { font-size:clamp(40px,4.1vw,60px); }
.opening-copy > p { margin-left:0;max-width:400px; }
.opening-actions { justify-content:flex-start; }
.network-illustration { margin:0;width:100%;max-width:450px;justify-self:center; }
.network-scene { position:relative;aspect-ratio:500/480; }
.network-wires { position:absolute;inset:0;width:100%;height:100%;stroke:var(--line);stroke-width:2; }
.network-wires .network-packet { stroke:var(--accent);stroke-dasharray:12 340;animation:network-flow 7s linear infinite; }
.network-packet:last-child { animation-delay:-3s; }
.network-node { position:absolute;display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;font-size:12px;color:var(--muted); }
.network-node > span:last-child { background:var(--card);padding:2px 6px;white-space:nowrap; }
.node-server { left:8%;top:5%;width:30%; }
.node-access { right:8%;top:5%;width:30%; }
.node-switch { left:22%;top:44%;width:56%; }
.node-laptop { left:29%;bottom:0;width:42%; }
.server-object { display:flex;flex-direction:column;justify-content:center;gap:6px;height:86px;width:72px; }
.server-object i { height:22px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(160deg,var(--card),var(--ground));box-shadow:2px 3px 0 var(--line);position:relative; }
.server-object i:after { content:'';position:absolute;right:8px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--accent); }
.access-object { width:86px;height:86px;display:grid;place-items:center;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--card),var(--ground));box-shadow:0 6px 0 var(--line),var(--shadow-soft); }
.access-object svg { width:55px;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round; }
.switch-object { width:100%;height:62px;padding:14px;display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:8px;background:linear-gradient(165deg,var(--card),var(--ground));box-shadow:0 7px 0 var(--line),0 25px 35px color-mix(in srgb,var(--ink) 8%,transparent); }
.switch-jacks { flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px; }
.switch-jacks i { height:10px;border:1px solid var(--muted);border-radius:2px;background:var(--ink-2); }
.switch-jacks i:nth-child(3n) { background:var(--accent-deep);border-color:var(--accent); }
.switch-light { width:4px;height:4px;border-radius:50%;background:var(--accent); }
.laptop-object { display:flex;flex-direction:column;align-items:center;width:140px; }
.laptop-screen { width:112px;height:75px;padding:17px;display:grid;gap:7px;align-content:center;border:4px solid var(--line);border-radius:7px 7px 2px 2px;background:var(--card); }
.laptop-screen i { height:4px;width:70%;background:var(--line);border-radius:3px; }
.laptop-screen i:first-child { background:var(--accent-soft);width:45%; }
.laptop-base { width:140px;height:8px;border-radius:2px 2px 14px 14px;background:var(--line);box-shadow:0 10px 20px color-mix(in srgb,var(--ink) 10%,transparent); }
.network-illustration figcaption { text-align:center;margin-top:20px; }
.network-illustration button { background:none;border:0;color:var(--muted);font-size:12px;min-height:44px;cursor:pointer; }
.network-illustration[data-paused] .network-packet { animation-play-state:paused; }
.network-node > span:first-child { transition:translate .4s cubic-bezier(.22,1,.36,1); }
.network-node:hover > span:first-child,.network-node:focus-visible > span:first-child { translate:0 -5px; }
.proof-narratives p { color:var(--muted);font-size:14px;margin-top:8px; }
.proof-controls { display:flex;gap:10px; }
.proof-controls button { padding:10px 18px;min-height:44px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink);cursor:pointer;font-size:13px; }
.proof-controls button:first-child { background:var(--ink);color:var(--card); }
@keyframes network-flow { from {stroke-dashoffset:352} to {stroke-dashoffset:0} }
@media(max-width:900px) {
 .home-story .opening { grid-template-columns:1fr;gap:42px;padding-block:145px 60px; }
 .opening-copy { margin:0;max-width:600px; }
 .network-illustration { max-width:380px; }
}
@media(prefers-reduced-motion:reduce) { .network-packet { animation:none; }.network-illustration figcaption { display:none; }.network-node > span:first-child { translate:none!important; } }

/* A desktop app on a quiet surface, with room for its floating detail panel. */
.product-monitor { background:var(--ground);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:none; }
.monitor-camera { display:none; }
.product-story-frame { height:600px;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 45px -18px color-mix(in srgb,var(--ink) 35%,transparent); }
.proof-heading { margin-bottom:26px; }
@media(max-width:600px) { .product-monitor { padding:10px;border-radius:20px; }.product-story-frame {height:610px;border-radius:12px;} }

/* Stable hardware; motion belongs to the connections. */
.network-scene {isolation:isolate;}
.network-wires .network-trace {stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:16 84;stroke-dashoffset:0;opacity:.85;}
@media(prefers-reduced-motion:no-preference) {
 .network-wires .network-trace {animation:signal-travel 5s linear infinite;}
 .network-wires .trace-right {animation-delay:-2.5s;}
 .network-wires .trace-answer {animation-delay:-1.7s;}
 .switch-jacks i:nth-child(3n) {animation:port-breathe 5s ease-in-out infinite;}
 .switch-jacks i:nth-child(6n) {animation-delay:-2.5s;}
 .laptop-screen i:first-child {animation:answer-breathe 5s ease-in-out infinite;}
}
@keyframes signal-travel {from {stroke-dashoffset:100;}to {stroke-dashoffset:0;}}
@keyframes port-breathe {0%,100% {background:var(--accent-deep);border-color:var(--accent);}50% {background:var(--accent);border-color:var(--accent-soft);}}
@keyframes answer-breathe {0%,100% {opacity:.5;}50% {opacity:1;}}
@media(prefers-reduced-motion:reduce) {.network-wires .network-trace {stroke-dasharray:none;opacity:.35;}}