/* ==========================================================================
   Turbo Link Studio — THE STACK (the brand family's world, v2)
   --------------------------------------------------------------------------
   The homepage's visual world. A dark instrument canvas for a software
   company: near-black indigo ground, glass planes, and one live accent pair
   (electric cyan + violet) that exists to draw the WIRES between the product
   surfaces. The whole thesis of the page is integration, so the accent is
   spent on connections and nothing else.

   Deliberately unclaimed colour: every vertical already owns a hue
   (photography orange, salon brass, tattoo red, barber oxblood, contractor
   amber). Cyan/violet belongs to the brand layer alone.

   Pages load this AFTER tls-topbar.css / tls-footer.css and pair it with
   .tl-bar--stack / .tl-foot--stack. Page-specific composition (the rig, the
   wall) stays in each page's own <style>.
   ========================================================================== */

:root{
  --void: #090B11;
  --void-2: #0C0F18;
  --void-3: #10141F;
  --plane: #141926;
  --plane-2: #1A2133;
  --line: rgba(176,198,255,0.10);
  --line-strong: rgba(176,198,255,0.22);
  --cyan: #4FD8F0;
  --cyan-bright: #9BF0FF;
  --cyan-deep: #1E9EB8;
  --violet: #8B7CFF;
  --violet-bright: #BCB2FF;
  --text: #EFF4FB;
  --muted: #98A5BE;
  --caption: #7E8DAA;
  --on-accent: #04131A;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --shadow-plane: 0 26px 50px -28px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-lift: 0 34px 64px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.07);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --f-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---------- Themed chrome ---------- */
html{ scrollbar-color: var(--cyan-deep) var(--void); }
::selection{ background: var(--cyan); color: var(--on-accent); }
body{ caret-color: var(--cyan); }
::-webkit-scrollbar{ width: 12px; }
::-webkit-scrollbar-track{ background: var(--void); }
::-webkit-scrollbar-thumb{ background: var(--cyan-deep); border-radius: 6px; border: 3px solid var(--void); }
::-webkit-scrollbar-thumb:hover{ background: var(--cyan); }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
p{ margin: 0; }
a{ color: var(--cyan); }
.wrap{ width: min(1240px, 92vw); margin: 0 auto; }
.tnum{ font-variant-numeric: tabular-nums; }

/* ---------- Type ---------- */
h1, h2, h3{ margin: 0; font-family: var(--f-sans); color: var(--text); line-height: 1.04; }
.display{
  font-size: clamp(2.7rem, 5.2vw, 4.4rem); font-weight: 700;
  letter-spacing: -0.038em; line-height: 0.98; text-wrap: balance;
}
.headline{
  font-size: clamp(1.9rem, 3.3vw, 2.9rem); font-weight: 700;
  letter-spacing: -0.032em; text-wrap: balance;
}
.sub{ font-size: 1.16rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.lede{ font-size: 1.09rem; line-height: 1.62; color: var(--muted); max-width: 58ch; }
.mono{
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption);
}
.mono--cyan{ color: var(--cyan); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius-s);
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease),
              background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn svg{ flex: none; transition: transform 200ms var(--ease); }
.btn-primary{
  background: linear-gradient(180deg, #7BE7F8, #3FCBE6);
  color: var(--on-accent);
  box-shadow: 0 12px 28px -14px rgba(79,216,240,0.75), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(79,216,240,0.85), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{ background: rgba(255,255,255,0.03); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--cyan); background: rgba(79,216,240,0.07); }
.btn-ghost:hover svg{ transform: translateX(3px); }
.btn-quiet{
  padding: 13px 2px; border-radius: 0; background: none;
  font-weight: 500; font-size: 15px; color: var(--muted);
  border-bottom: 1px solid transparent;
}
.btn-quiet:hover{ color: var(--cyan); border-bottom-color: var(--cyan-deep); }
.cta-row{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Banks ---------- */
.bank{ padding: clamp(64px, 8vw, 116px) 0; position: relative; }
.bank--2{ background: var(--void-2); }
.bank--3{ background: var(--void-3); }
.bank-head{ margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 62ch; }
.bank-head .mono{ display: block; margin-bottom: 16px; }
.bank-head .lede{ margin-top: 16px; }
.centered{ text-align: center; }
.centered .bank-head{ margin-left: auto; margin-right: auto; }
.centered .lede{ margin-left: auto; margin-right: auto; }

/* the hairline rule that separates banks */
.rule{ height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent); }

/* ---------- Planes (the card material) ---------- */
.plane{
  position: relative;
  background: linear-gradient(180deg, var(--plane-2), var(--plane));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-plane);
}
.plane--flat{ background: var(--plane); }

/* screenshot furniture: a plane with a real screen inside */
.screen{ position: relative; overflow: hidden; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--plane); box-shadow: var(--shadow-plane); }
.screen img{ width: 100%; display: block; }
.screen--wide img{ aspect-ratio: 16/10; object-fit: cover; object-position: top center; }
.screen--phone{ max-width: 208px; margin-inline: auto; }
.screen--phone img{ aspect-ratio: 780/1688; object-fit: cover; object-position: top center; }
.screen-cap{ display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.screen-cap .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); flex: none; }

/* ---------- Links ---------- */
.link-c{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
  color: var(--cyan); text-decoration: none;
}
.link-c svg{ transition: transform 200ms var(--ease); }
.link-c:hover svg{ transform: translateX(3px); }

/* ---------- FAQ ---------- */
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 2px;
  font-weight: 600; font-size: 1.06rem; letter-spacing: -0.02em; color: var(--text);
  transition: color 180ms var(--ease);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ color: var(--cyan); }
.faq-item summary svg{ flex: none; color: var(--cyan); transition: transform 240ms var(--ease); }
.faq-item[open] summary svg{ transform: rotate(45deg); }
.faq-item p{ padding: 0 2px 24px; max-width: 68ch; }
.faq-item a{ color: var(--cyan); font-weight: 500; }

/* ---------- Reveal (supporting motion only) ---------- */
.rv{ opacity: 0; transform: translateY(14px); }
html:not(.js) .rv{ opacity: 1; transform: none; }
.rv.in{ opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
@media (prefers-reduced-motion: reduce){
  .rv, .rv.in{ opacity: 1; transform: none; transition: none; }
  .btn, .link-c svg{ transition: none; }
}

/* ---------- Readouts: the world's figure treatment (prices, rates, counts) ---------- */
.readout{ display: inline-flex; flex-direction: column; gap: 7px; }
.readout .fig{
  font-family: var(--f-sans); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.2vw, 2.9rem); letter-spacing: -0.035em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.readout .unit{
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--caption);
}
.readout--lead .fig{ color: var(--cyan-bright); }

/* ---------- Key/value rows: the docket's replacement in this world ---------- */
.kv{ list-style: none; margin: 0; padding: 0; }
.kv li{
  display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.kv li:last-child{ border-bottom: none; }
.kv .k{ font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.kv .v{ font-size: 0.97rem; color: var(--muted); line-height: 1.55; }
.kv .v a{ color: var(--cyan); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(79,216,240,0.4); }
@media (max-width: 560px){ .kv li{ grid-template-columns: 1fr; gap: 5px; } }

/* ---------- Ticked inclusion lists ---------- */
.ticks{ list-style: none; margin: 0; padding: 0; }
.ticks li{ display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid rgba(176,198,255,0.06); font-size: 0.97rem; color: var(--muted); }
.ticks li:last-child{ border-bottom: none; }
.ticks b{ color: var(--text); font-weight: 600; }
.tick{ flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--cyan); }