/* Homepage hero showcase, tool strip and About toolkit (27 Sep 2026). */

/* Hero: the three concept sites, one at a time, desktop with the phone view overlapping. */
.hero-sites { position:relative;min-width:0; }
.hero-sites__stage { display:grid; }
.hero-site { grid-area:1/1;position:relative;padding:0 42px 34px 0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s; }
.hero-site.is-active { opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease,visibility 0s; }
.hero-site a { display:block;color:var(--text);text-decoration:none;border-radius:14px; }
.hero-site__desk { border-radius:14px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface-solid);box-shadow:0 35px 90px #0004;transition:transform .4s ease; }
.hero-site__bar { display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--surface-2);font-family:var(--font-mono);font-size:.62rem;color:var(--text-2); }
.hero-site__bar i { width:8px;height:8px;border-radius:50%;background:var(--border-strong); }
.hero-site__bar span { margin-left:8px; }
.hero-site img { display:block;width:100%;height:auto; }
.hero-site__phone { position:absolute;right:0;bottom:0;width:25%;border-radius:22px;padding:6px;background:#0b0d18;border:1px solid #ffffff1a;box-shadow:0 30px 60px -20px #000b;transform:rotate(-2deg);transition:transform .4s ease; }
.hero-site__phone img { border-radius:16px; }
.hero-site a:hover .hero-site__desk { transform:translateY(-4px); }
.hero-site a:hover .hero-site__phone { transform:rotate(-2deg) translateY(-10px); }
.hero-site__label { position:absolute;left:16px;bottom:52px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#0b0d18e6;color:#fff;font-size:.74rem;font-weight:500;backdrop-filter:blur(6px); }
.hero-site__label small { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#c4bdff; }
.hero-sites__foot { display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:6px; }
.hero-sites__tabs { display:flex;gap:6px;flex-wrap:wrap; }
.hero-sites__tabs button { font:inherit;font-size:.78rem;padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-2);cursor:pointer;transition:background .25s,color .25s,border-color .25s; }
.hero-sites__tabs button:hover { color:var(--text);border-color:var(--border-brand); }
.hero-sites__tabs button[aria-selected=true] { background:var(--brand);border-color:var(--brand);color:#fff; }
.hero-sites__note { font-size:.72rem;color:var(--text-3); }
.hero-sites__note a { color:var(--brand-pale); }
.no-js .hero-sites__tabs { display:none; }
@media(max-width:650px){ .hero-site { padding:0 22px 22px 0; } .hero-site__phone { width:28%;border-radius:16px;padding:4px; } .hero-site__phone img { border-radius:12px; } .hero-site__label { left:10px;bottom:34px; } }
@media(prefers-reduced-motion:reduce){ .hero-site,.hero-site.is-active,.hero-site__desk,.hero-site__phone { transition:none; } }

/* Tool strip: muted logos that take their brand colour on hover. */
.tool-strip { text-align:center;padding-block:clamp(48px,6vw,72px); }
.tool-strip .eyebrow { justify-content:center; }
.tool-strip h2 { margin:14px auto 0;max-width:640px;font-size:clamp(1.6rem,3vw,2.3rem); }
.tool-strip__lede { max-width:540px;margin:12px auto 0;color:var(--text-2); }
.tool-strip__logos { list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:22px 40px; }
.tool-strip__logo { display:flex;flex-direction:column;align-items:center;gap:9px;min-width:64px;color:var(--text-2);transition:color .25s; }
.tool-strip__logo svg { width:30px;height:30px;opacity:.62;transition:opacity .25s; }
.tool-strip__logo span { font-size:.74rem;color:var(--text-2); }
.tool-strip__logo:hover { color:var(--tool,var(--text)); }
.tool-strip__logo:hover svg { opacity:1; }
.tool-strip__note { margin-top:28px;font-size:.72rem;color:var(--text-3); }
@media(max-width:650px){ .tool-strip__logos { gap:20px 26px; } .tool-strip__logo svg { width:26px;height:26px; } }

/* About: the full toolkit, as labelled tiles in groups. */
.kit { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:start; }
.kit__panel { padding-bottom:6px; }
.kit__panel .stack-scene { padding:2px 22px 22px; }
.stack-group { margin:16px 0 9px;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2); }
.stack-group:first-child { margin-top:6px; }
.stack-grid { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px; }
.stack-tool { display:flex;align-items:center;gap:9px;padding:9px 13px 9px 11px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface-solid);color:var(--text-2);transition:border-color .25s,transform .25s,color .25s; }
.stack-tool svg { width:19px;height:19px;flex:none;opacity:.72;transition:opacity .25s; }
.stack-tool span { font-size:.82rem;font-weight:500;line-height:1.15;color:var(--text); }
.stack-tool small { display:block;margin-top:2px;font-family:var(--font-mono);font-size:.48rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2); }
.stack-tool:hover { border-color:var(--border-brand);transform:translateY(-2px);color:var(--tool,var(--text)); }
.stack-tool:hover svg { opacity:1; }
@media(max-width:900px){ .kit { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .stack-tool,.tool-strip__logo { transition:none; } .stack-tool:hover { transform:none; } }
.kit__panel { position:relative;min-width:0;border:1px solid var(--border-brand);border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 96%,var(--brand)),var(--surface-solid));box-shadow:0 35px 90px #0003; }
.tool-strip__note,.tool-strip__lede { margin-inline:auto; }
.tool-strip__note { max-width:none; }
.kit__panel .stack-grid { background:none;border:0;padding:0;border-radius:0;box-shadow:none; }