/* ScalPanel product page. The ScalWS family's look: forest dark, one lime
   accent, Geist. Dark only, like scalws.com and guard.scalws.com.
   Radii: 8px controls, 14px cards and screenshots, 999px pills. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0b1511;
  --bg-2: #0f1b17;
  --surface: #121f1a;
  --surface-2: #172720;
  --line: #22342b;
  --line-2: #2d4237;
  --text: #e9efea;
  --text-2: #b9c8bd;
  --muted: #8ea398;
  --lime: #8de13a;
  --lime-ink: #0d1a10;
  --green: #008f50;
  --radius: 14px;
  --radius-s: 8px;
  --wrap: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgb(141 225 58 / 28%); }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; padding: 8px 14px; background: var(--lime); color: var(--lime-ink); border-radius: var(--radius-s); }
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--radius-s); border: 1px solid transparent;
  font: 600 15px/1 inherit; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn--primary { background: var(--lime); color: var(--lime-ink); }
.btn--primary:hover { background: #a3ea5c; }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: rgb(255 255 255 / 2%); }
.btn--ghost:hover { border-color: var(--muted); background: rgb(255 255 255 / 5%); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-weight: 600; text-decoration: none; }
.link svg { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgb(11 21 17 / 82%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__row { display: flex; align-items: center; gap: 32px; height: 68px; }
.nav__brand img { height: 38px; width: auto; }
.nav__links { display: flex; gap: 6px; margin-right: auto; }
.nav__links a { padding: 8px 12px; border-radius: var(--radius-s); color: var(--text-2); text-decoration: none; font-size: 15px; transition: color 160ms, background-color 160ms; }
.nav__links a:hover { color: var(--text); background: rgb(255 255 255 / 5%); }
.nav__menu { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: none; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
.nav__menu svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding: 72px 0 56px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto 35%; height: 780px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 143 80 / 26%), transparent 70%);
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.eyebrow { margin-bottom: 18px; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.lead { margin-top: 22px; max-width: 34ch; font-size: 19px; color: var(--text-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.shot {
  margin: 0; position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 30px 80px -30px rgb(0 0 0 / 70%), 0 0 0 6px rgb(255 255 255 / 2%);
}
.hero__shot { margin-right: calc((100vw - min(var(--wrap), 100vw - 48px)) / -2 - 24px); border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------------------------------------------------------------- facts */
.facts { border-block: 1px solid var(--line); background: var(--bg-2); }
.facts__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts__row > div { padding: 26px 24px; display: grid; gap: 4px; border-left: 1px solid var(--line); }
.facts__row > div:first-child { border-left: 0; padding-left: 0; }
.facts strong { font-size: 17px; font-weight: 650; }
.facts span { font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- sections */
section { scroll-margin-top: 80px; }
.containers, .tour, .dbm, .providers, .security, .install { padding: 112px 0; }
h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; max-width: 18ch; }
.section-lead { margin-top: 18px; max-width: 58ch; font-size: 19px; color: var(--text-2); }

.pillars { margin-top: 56px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.pillar { padding: 32px 32px 8px 0; }
.pillar + .pillar { padding-left: 32px; border-left: 1px solid var(--line); }
.pillar__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(141 225 58 / 10%); color: var(--lime); margin-bottom: 20px; }
.pillar__icon svg { width: 24px; height: 24px; }
.pillar h3 { font-size: 21px; }
.pillar p { margin-top: 8px; color: var(--text-2); }

/* tour: tabs beside a screenshot */
.tour { background: linear-gradient(to bottom, var(--bg), var(--bg-2) 30%, var(--bg)); }
.tour__grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; }
.tour__tabs { display: grid; gap: 8px; }
.tour__tabs button {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 18px; text-align: left;
  border-radius: var(--radius); border: 1px solid transparent; background: none; color: inherit; cursor: pointer;
  font: inherit; transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.tour__tabs button:hover { background: rgb(255 255 255 / 3%); }
.tour__tabs button[aria-selected="true"] { background: var(--surface); border-color: var(--line-2); }
.tour__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.tour__icon svg { width: 21px; height: 21px; }
button[aria-selected="true"] .tour__icon { background: rgb(141 225 58 / 12%); color: var(--lime); }
.tour__tabs strong { display: block; font-size: 17px; font-weight: 600; }
.tour__tabs em { display: block; margin-top: 4px; font-style: normal; font-size: 15px; line-height: 1.5; color: var(--muted); }
button[aria-selected="false"] em { display: none; }
.tour__stage { position: sticky; top: 96px; }
.tour__panel[hidden] { display: none; }
.tour__panel { animation: show 420ms var(--ease); }
@keyframes show { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* database manager: screenshot left, words right */
.dbm__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.dbm__copy h2 { font-size: clamp(30px, 3.2vw, 40px); }
.dbm__copy p { margin-top: 18px; color: var(--text-2); font-size: 18px; }
.ticks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: center; }
.ticks svg { width: 20px; height: 20px; color: var(--lime); }

/* providers: a bento */
.providers { background: var(--bg-2); border-block: 1px solid var(--line); }
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.bento__cell { margin: 0; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.bento__cell--text { padding: 28px; display: flex; flex-direction: column; }
.bento__cell--text svg { width: 28px; height: 28px; color: var(--lime); margin-bottom: auto; }
.bento__cell--text h3 { margin-top: 28px; font-size: 20px; }
.bento__cell--text p { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.bento__cell--accent { background: linear-gradient(150deg, rgb(0 143 80 / 34%), rgb(141 225 58 / 10%) 60%, var(--surface)); border-color: rgb(141 225 58 / 25%); }
.shotcell { display: flex; flex-direction: column; }
.shotcell img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; border-bottom: 1px solid var(--line); }
.shotcell figcaption { padding: 20px 24px 24px; color: var(--text-2); font-size: 16px; }
.shotcell figcaption strong { color: var(--text); font-weight: 600; }
.shotcell--phone { background: radial-gradient(120% 70% at 50% 0%, rgb(0 143 80 / 28%), var(--surface) 70%); }
.shotcell--phone { justify-content: flex-end; }
.shotcell--phone img { width: 64%; margin: 36px auto 0; aspect-ratio: 390 / 640; object-fit: cover; object-position: top; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0; }
.shotcell--phone figcaption { border-top: 1px solid var(--line); }
.bento {
  grid-template-areas:
    "web web web web web web web web phone phone phone phone"
    "res res res res api api api api phone phone phone phone"
    "php php php php php php php php bill bill bill bill";
}
.b-web { grid-area: web; } .b-phone { grid-area: phone; } .b-res { grid-area: res; }
.b-auto { grid-area: api; } .b-php { grid-area: php; } .b-bill { grid-area: bill; }

/* security: words left, a list right */
.security__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.security__copy p { margin: 18px 0 26px; color: var(--text-2); font-size: 18px; max-width: 44ch; }
.security__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.security__list li { display: flex; gap: 16px; padding: 28px; background: var(--bg); }
.security__list svg { width: 26px; height: 26px; color: var(--lime); margin-top: 2px; }
.security__list span { color: var(--muted); font-size: 15px; }
.security__list strong { display: block; color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 4px; }

/* install */
.install { padding-top: 32px; }
.install__box {
  position: relative; overflow: hidden; padding: 64px; border-radius: 22px;
  border: 1px solid rgb(141 225 58 / 22%);
  background: radial-gradient(90% 120% at 100% 0%, rgb(0 143 80 / 36%), transparent 60%), var(--surface);
}
.install__box h2 { max-width: none; }
.install__box > p { margin-top: 14px; color: var(--text-2); font-size: 18px; }
.cmd { margin-top: 32px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 12px; background: #08110d; border: 1px solid var(--line-2); max-width: 880px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 16px/1.6 "Geist Mono", ui-monospace, monospace; color: var(--text); scrollbar-width: thin; }
.cmd code::before { content: "$ "; color: var(--lime); }
.cmd__copy { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: 600 14px/1 inherit; cursor: pointer; transition: background-color 160ms, border-color 160ms; }
.cmd__copy:hover { border-color: var(--muted); }
.cmd__copy svg { width: 18px; height: 18px; }
.cmd__copy.is-done { border-color: var(--lime); color: var(--lime); }
.reqs { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.reqs li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; }
.footer__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__brand img { height: 32px; width: auto; }
.footer__brand p { margin-top: 12px; color: var(--muted); font-size: 15px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.footer__links a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.footer__links a:hover { color: var(--lime); }
.footer__legal { margin-top: 36px; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .hero__copy > * { animation: rise 800ms var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .hero__shot { animation: slide 1000ms 120ms var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tour__panel { animation: none; }
}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1080px) {
  .hero__grid, .dbm__grid, .security__grid, .tour__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__shot { margin-right: -24px; }
  .tour__stage { position: static; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
  .pillar:first-child { border-top: 0; }
}
@media (max-width: 900px) {
  .nav__links { position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; padding: 12px 24px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav__links.is-open { display: flex; }
  .nav__menu { display: inline-flex; }
  .nav__cta { display: none; }
  .facts__row { grid-template-columns: 1fr 1fr; }
  .facts__row > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts__row > div { border-top: 1px solid var(--line); }
  .facts__row > div:nth-child(-n + 2) { border-top: 0; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "web web" "phone phone" "res api" "php php" "bill bill"; }
  .shotcell--phone img { width: 56%; }
  .security__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "web" "phone" "res" "api" "php" "bill"; }
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 40px 0; }
  .hero__shot { margin-right: -16px; }
  .containers, .tour, .dbm, .providers, .security, .install { padding: 72px 0; }
  .install { padding-top: 16px; }
  .install__box { padding: 32px 20px; }
  .cmd { flex-direction: column; align-items: stretch; padding: 14px; }
  .cmd__copy { justify-content: center; }
  .facts__row > div { padding: 20px 12px 20px 0; }
  .facts__row > div:nth-child(even) { padding-left: 16px; }
  .tour__tabs em { font-size: 14px; }
}