/* Amber Lan · liquid glass layer (Oct 2026).

   Loaded after highend.css on every page, with assets/liquid.js. Removing
   those two tags puts the site back exactly as it was.

   1. Ground: a violet night. Lilac haze in the top left, indigo on the
      right, near-black where people read, and a sparse field of still stars.
   2. Glass: every panel is clear frosted glass, lit along its top edge, so
      the sky and the orb show through it.
   3. Buttons: the primary button stays golden amber lit glass, now with a
      light sweep on hover. Amber also lives in the light inside the orb.
   4. The home hero sits in a framed stage with the liquid orb rising from
      its foot and two glass cards floating over it. Other heroes get a
      quieter orb whose crown rises from the bottom edge. */

:root {
  --bg: #0b0a0f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.055);
  --surface-soft: rgba(255, 255, 255, 0.03);
  --fg: #f6f5fa;
  --muted: rgba(240, 238, 248, 0.74);
  --soft: rgba(240, 238, 248, 0.56);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-strong: rgba(255, 255, 255, 0.18);
  --ink: #0b0a0f;

  --shell: rgba(255, 255, 255, 0.035);
  --shell-line: rgba(255, 255, 255, 0.08);
  --core: rgba(24, 22, 34, 0.42);
  --core-line: rgba(255, 255, 255, 0.1);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --ambient: 0 32px 80px -40px rgba(3, 2, 10, 0.9), 0 12px 32px -20px rgba(3, 2, 10, 0.7);
  --ring: 0 0 0 1px var(--core-line);

  --glass:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0.02)),
    rgba(22, 20, 32, 0.4);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025),
    inset 0 0 24px -12px rgba(var(--lilac), 0.35);
  --sheen: radial-gradient(440px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.075), rgba(var(--lilac), 0.04) 35%, transparent 62%);
  --glass-blur: blur(20px) saturate(150%);

  --lilac: 132, 112, 168;
  --indigo: 70, 64, 128;
}

/* ---- 1. Ground ------------------------------------------------------------ */
html { background: #0b0a0f; }
body { background: transparent; }

/* The sky is fixed, so the haze stays at the edges while the page scrolls. */
body::before, body::after {
  display: block; content: "";
  position: fixed; inset: 0; z-index: -1;
  width: auto; height: auto; border: 0;
  pointer-events: none; transform: none;
}
body::before {
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(var(--lilac), 0.42), transparent 70%),
    radial-gradient(55% 50% at 100% 8%, rgba(var(--indigo), 0.34), transparent 72%),
    radial-gradient(60% 45% at 50% 100%, rgba(var(--indigo), 0.22), transparent 75%),
    linear-gradient(180deg, #1c1928 0%, #121019 38%, #0c0b10 70%, #0b0a0f 100%);
}
/* Stars: two tiles of different sizes, so the pattern never visibly repeats. */
body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='38' cy='72' r='.8' opacity='.7'/%3E%3Ccircle cx='151' cy='310' r='.6' opacity='.45'/%3E%3Ccircle cx='233' cy='41' r='1' opacity='.55'/%3E%3Ccircle cx='298' cy='488' r='.7' opacity='.5'/%3E%3Ccircle cx='402' cy='167' r='.6' opacity='.4'/%3E%3Ccircle cx='471' cy='379' r='1.1' opacity='.65'/%3E%3Ccircle cx='553' cy='92' r='.7' opacity='.5'/%3E%3Ccircle cx='87' cy='541' r='.9' opacity='.55'/%3E%3Ccircle cx='589' cy='566' r='.6' opacity='.4'/%3E%3Ccircle cx='352' cy='262' r='.5' opacity='.35'/%3E%3Ccircle cx='190' cy='430' r='.5' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='937' height='937'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='121' cy='203' r='.6' opacity='.4'/%3E%3Ccircle cx='502' cy='77' r='.8' opacity='.5'/%3E%3Ccircle cx='744' cy='402' r='.6' opacity='.45'/%3E%3Ccircle cx='310' cy='688' r='1' opacity='.5'/%3E%3Ccircle cx='866' cy='812' r='.7' opacity='.4'/%3E%3Ccircle cx='633' cy='599' r='.5' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 620px 620px, 937px 937px;
  opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: liquid-twinkle 9s ease-in-out infinite alternate; }
  @keyframes liquid-twinkle { from { opacity: 0.55; } to { opacity: 0.9; } }
}

/* Surfaces that painted the old flat ink become sky. */
.site-footer {
  background: linear-gradient(180deg, rgba(11, 10, 15, 0), rgba(11, 10, 15, 0.6));
  border-top-color: var(--hair);
}
.sticky-cta { background: rgba(14, 12, 20, 0.7); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ---- 2. Glass ---------------------------------------------------------------- */
.shell,
.outcome, .proof-card.proof-text, .install, .offer, .sx__doc, .form-thanks, .flagship, .team__hq, .versus::before,
.dgrid, .demo__win,
.team__col, .poss, .rule, .pp-card, .path, .glass, .tpl-card, .grid > .part.case, .split__col, .buys-band .fig,
.pp-table, .pp-contact, .compound, .team__review {
  border-color: rgba(255, 255, 255, 0.075);
  background: var(--sheen), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--ambient);
}
/* Tiles inside a grid stay light: an edge, no drop shadow under each one. */
.team__col, .poss, .rule, .pp-card, .path, .glass, .tpl-card, .grid > .part.case, .split__col, .compound, .team__review {
  box-shadow: var(--glass-edge);
}
a.proof-card:hover, a.part.case:hover, a.path:hover, a.flagship:hover, .glass:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    var(--sheen),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.025)),
    rgba(26, 24, 38, 0.45);
}
@media (prefers-reduced-transparency: reduce) {
  .shell, .outcome, .proof-card.proof-text, .install, .offer, .sx__doc, .form-thanks, .flagship, .team__hq,
  .dgrid, .demo__win, .team__col, .poss, .rule, .pp-card, .path, .glass, .tpl-card, .grid > .part.case,
  .split__col, .buys-band .fig, .pp-table, .pp-contact, .compound, .team__review {
    background: #16141e; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* The hero label and the secondary button are clear glass pills. On phones
   the hero label is plain text (highend.css), so it stays that way. */
.hero .stack > .eyebrow, .btn-secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.09); }
@media (max-width: 640px) {
  .hero .stack > .eyebrow { border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The island header: one sheet of clear glass. */
.site-header__inner {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(18, 16, 26, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px -28px rgba(3, 2, 10, 0.85);
}
.site-header__nav > a:not(.site-header__cta):hover,
.site-header__nav > a[aria-current="page"] { background: rgba(255, 255, 255, 0.07); }
@media (max-width: 820px) {
  .site-menu { background: rgba(14, 12, 20, 0.82); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header__inner { background: #16141e; }
}

/* ---- 3. Buttons: amber stays the primary ------------------------------------
   The golden lit-glass button from highend.css, with a soft light sweep
   across it on hover so it carries the same glass as everything around it. */
.btn-primary, .hero .btn-primary, .site-header__nav .site-header__cta, .site-menu .site-header__cta {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat,
    radial-gradient(120% 150% at 50% 125%, rgba(247, 210, 130, 0.9), rgba(242, 185, 63, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.04) 52%, rgba(0, 0, 0, 0.06)),
    var(--accent);
  transition:
    transform 560ms var(--ease-spring),
    background-position 1000ms var(--ease-out),
    color 320ms var(--ease-out),
    box-shadow 560ms var(--ease-spring);
}
.btn-primary:hover, .hero .btn-primary:hover, .site-header__nav .site-header__cta:hover, .site-menu .site-header__cta:hover {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
    radial-gradient(120% 150% at 50% 125%, rgba(250, 222, 158, 0.95), rgba(242, 185, 63, 0) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.06) 52%, rgba(0, 0, 0, 0.04)),
    #f5c45a;
}

/* ---- Hero light: lilac and a little gold, not a flat amber pool -------------- */
.hero::before {
  background: radial-gradient(closest-side, rgba(var(--lilac), 0.2), rgba(242, 185, 63, 0.04) 55%, transparent 76%);
}
.hero::after {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent 72%);
}

/* ---- The orb (liquid.js) --------------------------------------------------- */
.liquid-orb { position: absolute; pointer-events: none; }
.liquid-orb canvas { display: block; width: 100%; height: 100%; }

/* Still fallback for browsers without WebGL: the same light, painted. */
.liquid-orb--static::before {
  content: ""; position: absolute; left: 50%; bottom: -38%;
  width: 62%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(38% 22% at 34% 16%, rgba(255, 196, 96, 0.75), transparent 70%),
    radial-gradient(30% 18% at 70% 22%, rgba(255, 214, 140, 0.55), transparent 70%),
    radial-gradient(40% 30% at 62% 78%, rgba(40, 90, 255, 0.35), transparent 70%),
    radial-gradient(closest-side, #07070b 82%, rgba(255, 255, 255, 0.85) 96%, transparent 100%);
  filter: blur(1px);
}

/* Quiet orb: only its crown rises from the bottom of an inner page's hero. */
.hero.has-orb { padding-bottom: clamp(10rem, 20vw, 16rem); }
.liquid-orb--quiet {
  z-index: 0; left: 50%; bottom: 0;
  width: min(1100px, 140vw); height: clamp(220px, 26vw, 340px);
  transform: translateX(-50%);
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to top, transparent, #000 38%, #000 58%, transparent);
  mask-image: linear-gradient(to top, transparent, #000 38%, #000 58%, transparent);
}
.liquid-orb--quiet canvas { transform: translateY(calc(18% + var(--liquid-sink, 0px))); }
@media (prefers-reduced-motion: no-preference) {
  .js .liquid-orb { opacity: 0; transform: translateX(-50%) translateY(24px); animation: liquid-rise 1600ms var(--ease-spring) 300ms forwards; }
  .js .liquid-orb--quiet { animation-name: liquid-rise-quiet; }
  @keyframes liquid-rise { to { opacity: 1; transform: translateX(-50%); } }
  @keyframes liquid-rise-quiet { to { opacity: 0.7; transform: translateX(-50%); } }
}

/* ---- Warm leftovers, cooled to the night -------------------------------- */
/* The demo window: glass over the sky, the dot keeps its own amber light. */
.demo__side { background: rgba(255, 255, 255, 0.02); border-right-color: var(--hair); }
.demo__run { background: radial-gradient(60% 50% at 50% 55%, rgba(242, 185, 63, 0.07), transparent 70%), rgba(14, 13, 20, 0.6); }
.demo__run-msg--you, .demo__run-msg--ok { background: rgba(30, 28, 42, 0.8); border-color: var(--hair); }
.demo__run-card { background: rgba(30, 28, 42, 0.85); }
/* The closer: lilac light behind the form, a little gold at its heart. */
.contact::before {
  background: radial-gradient(closest-side, rgba(242, 185, 63, 0.06), rgba(var(--lilac), 0.14) 45%, transparent 74%);
}

/* ---- 4. Home: the stage ---------------------------------------------------- */
.hero--home { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.hero--home::before, .hero--home::after { display: none; }
.liquid-stage {
  position: relative; z-index: 1; isolation: isolate;
  width: min(100% - (var(--gutter) * 2), 1320px); margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(var(--lilac), 0.3), transparent 62%),
    radial-gradient(50% 40% at 100% 0%, rgba(var(--indigo), 0.18), transparent 70%),
    linear-gradient(180deg, rgba(16, 15, 21, 0.92), rgba(9, 9, 12, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 60px 140px -50px rgba(0, 0, 0, 0.9);
}
.liquid-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='44' cy='98' r='.8' opacity='.6'/%3E%3Ccircle cx='190' cy='36' r='.6' opacity='.45'/%3E%3Ccircle cx='331' cy='141' r='.9' opacity='.55'/%3E%3Ccircle cx='468' cy='60' r='.6' opacity='.4'/%3E%3Ccircle cx='402' cy='300' r='.7' opacity='.45'/%3E%3Ccircle cx='96' cy='352' r='.6' opacity='.4'/%3E%3Ccircle cx='255' cy='447' r='.8' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
}
.liquid-stage::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -18%; top: -34%; width: 72%; height: 84%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--lilac), 0.26), rgba(var(--indigo), 0.08) 55%, transparent 72%);
  filter: blur(24px);
}
@media (prefers-reduced-motion: no-preference) {
  .liquid-stage::after { animation: liquid-aurora 22s ease-in-out infinite alternate; }
  @keyframes liquid-aurora {
    50% { transform: translate(22%, 8%) scale(1.12); }
    to { transform: translate(8%, 16%) scale(0.94); }
  }
}
.liquid-stage > .stack { position: relative; z-index: 2; }
.liquid-stage h1 { font-weight: 500; letter-spacing: -0.035em; }
.hero .liquid-stage .stack > h1 + .lead { margin-top: var(--s-6); }
.hero .liquid-stage .stack > .cta-row { margin-top: var(--s-7); }
.hero .liquid-stage .stack > .hero-facts { margin-top: var(--s-5); }

.liquid-stage__floor {
  position: relative; z-index: 1;
  height: clamp(300px, 34vw, 450px);
  margin: clamp(0.5rem, 1.5vw, 1.25rem) calc(clamp(1.25rem, 4vw, 3rem) * -1) 0;
}
.liquid-stage__floor .liquid-orb { z-index: 1; inset: -6% 0 0; left: 50%; width: 100%; transform: translateX(-50%); }
.liquid-stage__floor .liquid-orb canvas { transform: translateY(var(--liquid-sink, 0px)); }
/* The liquid lights the floor it rises from. */
.liquid-stage__floor::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: -34%; width: 78%; height: 80%; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.16), rgba(var(--lilac), 0.12) 48%, transparent 76%);
  filter: blur(12px);
}

/* Two glass cards floating over the liquid */
.liquid-card {
  position: absolute; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0 var(--s-4);
  width: clamp(190px, 17vw, 228px);
  padding: 16px 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 18px;
  background:
    radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.14), transparent 65%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 58%, rgba(var(--lilac), 0.06)),
    rgba(20, 18, 28, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -26px rgba(0, 0, 0, 0.75);
  color: var(--fg); text-align: left;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 600ms var(--ease-out), border-color 320ms var(--ease-out);
}
/* a fine line of light along the top edge, brightest at its centre */
.liquid-card::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}
.liquid-card--left { left: 13%; top: 16%; }
.liquid-card--right { right: 13%; top: 46%; }
.liquid-card__label { grid-column: 1; color: rgba(246, 245, 250, 0.72); font-size: 12.5px; font-weight: 450; line-height: 1.3; }
.liquid-card__go {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1;
  transition: transform 560ms var(--ease-spring);
}
.liquid-card__big {
  grid-column: 1; margin-top: var(--s-4);
  color: var(--fg); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.liquid-card__bar {
  grid-column: 1 / -1; display: block; height: 4px; margin-top: var(--s-4);
  border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden;
}
.liquid-card__bar i { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--glass-amber, #f2b93f); box-shadow: var(--glass-amber-glow, none); }
.liquid-card__note { grid-column: 1 / -1; margin-top: var(--s-2); color: rgba(246, 245, 250, 0.62); font-size: 12.5px; line-height: 1.3; }
.liquid-card:hover { --lift: -3px; border-color: rgba(255, 255, 255, 0.24); }
a.liquid-card:hover .liquid-card__go { transform: translate(2px, -2px) scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  /* arrive out of a blur, then float on the liquid, each at its own pace */
  .js .liquid-card {
    opacity: 0; filter: blur(10px);
    animation: liquid-card-in 1300ms var(--ease-spring) forwards, liquid-float 7s ease-in-out infinite alternate;
  }
  .js .liquid-card--left { animation-delay: 900ms, 2.2s; }
  .js .liquid-card--right { animation-delay: 1100ms, 2.6s; animation-duration: 1300ms, 8.5s; }
  @keyframes liquid-card-in { to { opacity: 1; filter: none; } }
  @keyframes liquid-float { from { translate: 0 0; } to { translate: 0 -10px; } }
}

/* After the stage, the run keeps its own breathing room. */
.hero--home > .wrap > .demo { margin-top: clamp(5rem, 9vw, 7.5rem); }

/* Phones: the cards sit side by side over the foot of the liquid. */
@media (max-width: 720px) {
  .liquid-stage { border-radius: 22px; padding-top: 3.5rem; }
  .liquid-stage__floor { height: 330px; }
  .liquid-card { width: auto; padding: 14px; }
  .liquid-card--left { left: 16px; right: calc(50% + 6px); top: auto; bottom: 18px; }
  .liquid-card--right { right: 16px; left: calc(50% + 6px); top: auto; bottom: 18px; }
  .liquid-card { gap: 0 var(--s-2); }
  .liquid-card__label { font-size: 11.5px; }
  .liquid-card__go { width: 22px; height: 22px; font-size: 11px; }
  .liquid-card__note { display: none; }
}