/* =========================================================
   Shamis — landing page
   Built on a 1440px design grid: 1rem = 10 design px.
   The root size scales with the viewport (100vw / 144) up to 10px,
   so the layout is identical at every desktop width.
   ========================================================= */

:root {
  --bg: #070a0d;
  --panel: #181818;
  --card: #232323;
  --card-line: #2b2b2b;
  --line: #1b1e20;
  --line-2: #242729;
  --sep: #27292b;
  --white: #ffffff;
  --gray: #838486;
  --muted: #9c9d9e;
  --dim: #6a6c6e;
  --gold: #ffd700;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: 8rem;
  --container: 128rem;
  --frame: max(6rem, calc((100% - 132rem) / 2)); /* CTA/footer frame inset */
}

html { font-size: min(10px, calc(100vw / 144)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* below 1200px the proportional design would get too small to read, so the
   root size is fixed and the layout reflows (see "Responsive" at the end) */
@media (max-width: 1199px) { html { font-size: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, canvas { display: block; }
:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 3px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }

/* ---------- type ---------- */
.display {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.eyebrow, .label {
  font-family: var(--mono);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
}
.eyebrow { text-align: center; }
.section-title { text-align: center; margin-top: 2.55rem; }
.num { font-family: var(--mono); font-weight: 300; font-size: 1.55rem; line-height: 1; color: var(--white); }
.num i { font-style: normal; color: var(--dim); }

/* ---------- corner brackets (buttons) ---------- */
.brackets {
  --bc: rgba(255, 255, 255, .9);
  --bl: .7rem;
  --bw: 1px;
  background-image:
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
    linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc));
  background-repeat: no-repeat;
  background-size:
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl),
    var(--bl) var(--bw), var(--bw) var(--bl);
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 5.15rem; width: 17.69rem; padding: 0;
  font-family: var(--sans); font-weight: 500; font-size: 1.85rem; letter-spacing: -0.03em; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn--solid { background-color: var(--white); color: #0b0b0b; }
.btn--solid:hover { background-color: #e9e9e9; }
.btn--ghost { background-color: rgba(255, 255, 255, .1); color: #fff; --bc: rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.btn--ghost:hover { background-color: rgba(255, 255, 255, .18); }

.btn-mono {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.8rem; padding: 0 1.65rem;
  font-family: var(--mono); font-size: 1.35rem; text-transform: uppercase; color: var(--white);
  background-color: #2e2e2e;
  transition: background-color .25s ease;
}
.btn-mono:hover { background-color: #3a3a3a; }
.btn-mono--sm { background-color: #303030; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 118.3rem;
  background: var(--bg) url("../assets/hero-bg.jpg") center bottom / cover no-repeat;
  overflow: hidden;
}
.hero::after { /* blend dunes into the page */
  content: ""; position: absolute; inset: auto 0 0 0; height: 6rem;
  background: linear-gradient(to bottom, rgba(7, 10, 13, 0), var(--bg));
  pointer-events: none;
}

.nav {
  position: fixed; z-index: 50; top: 3rem; left: 50%;
  width: 82.2rem; height: 5.6rem; margin-left: -41.1rem;
  display: flex; align-items: center;
  padding: 0 .8rem 0 2rem;
  border-radius: 99rem;
  background: rgba(62, 66, 73, .42);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.nav.is-scrolled { background: rgba(28, 31, 35, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 1rem 3rem rgba(0, 0, 0, .35); }
.nav__logo { width: 2.6rem; height: 2.45rem; color: var(--gold); flex: none; }
.nav__logo svg { width: 100%; height: 100%; }
.nav__links { display: flex; gap: 2.48rem; margin-left: auto; margin-right: 6.45rem; }
.nav__links a { font-family: var(--ui); font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; color: rgba(255, 255, 255, .95); transition: color .2s; }
.nav__links a:hover { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .35); }
.nav__cta {
  display: inline-flex; align-items: center; height: 4rem; padding: 0 1.75rem;
  border-radius: 99rem; background: var(--white); color: #03201f;
  font-family: var(--ui); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em;
  transition: background-color .2s;
}
.nav__cta:hover { background: #ececec; }
.nav__burger { display: none; }

.hero__mark {
  position: absolute; left: 50%; top: 13.3rem;
  width: 46rem; height: 46rem; margin-left: -23rem;
}
.hero__mark canvas { width: 100%; height: 100%; }
.hero__fallback { position: absolute; inset: 9rem; width: auto; height: auto; color: #1d1e20; filter: drop-shadow(0 1.2rem 1.6rem rgba(0, 0, 0, .35)); opacity: 0; transition: opacity .4s; }
.hero__mark.no-webgl .hero__fallback { opacity: 1; }

.hero__copy { position: relative; padding-top: 62.77rem; text-align: center; }
.hero .eyebrow { color: #fff; }
.hero__title { width: 86rem; margin: 1.62rem auto 0; }
.hero__actions { display: flex; justify-content: center; gap: 1.25rem; margin-top: 2.34rem; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { padding-top: 9.4rem; }
.about__grid { display: grid; grid-template-columns: 43rem 1fr; }
.about__grid .label { margin-top: 0; }
.about__title { color: var(--gray); text-indent: 8.9rem; max-width: 85rem; letter-spacing: -0.02em; }
.about__title .is-lit { color: var(--white); }
.about__text {
  margin-top: 8.1rem; max-width: 33.6rem;
  font-family: var(--mono); font-size: 1.49rem; line-height: 2.25rem; color: var(--muted);
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8rem; }
.stat { position: relative; padding-left: 4rem; border-left: 1px solid var(--line); height: 25rem; }
.stat .label { line-height: 1.38rem; padding-top: .12rem; }
.stat::after { /* white tick */
  content: ""; position: absolute; left: -1px; bottom: 0; width: .6rem; height: 6.58rem;
  background: var(--white);
  clip-path: polygon(0 .9rem, 100% 0, 100% 100%, 0 100%);
}
.stat__value { position: absolute; left: 4rem; bottom: -2.25rem; display: flex; align-items: baseline; white-space: nowrap; }
.stat__num { font-family: var(--sans); font-weight: 400; font-size: 13rem; line-height: 1; letter-spacing: -0.04em; }
.stat__unit { font-family: var(--sans); font-size: 5rem; line-height: 1; letter-spacing: -0.04em; color: var(--dim); margin-left: 2.6rem; }

/* =========================================================
   THE OLD WAY
   ========================================================= */
.oldway { padding-top: 19.85rem; }
.oldway__grid { position: relative; margin-top: 7.9rem; height: 66rem; }

.pains { width: 61.94rem; }
.pain {
  position: relative; height: 11.93rem; padding: 3.64rem 0 0 12.57rem;
  margin-bottom: 6.07rem;
  transition: background-color .35s ease;
}
.pain::before, .pain::after { /* dashed separators */
  content: ""; position: absolute; left: 12.57rem; right: 4.5rem; height: 1px;
  background:
    linear-gradient(var(--sep), var(--sep)) 0 0 / 13.17rem 1px no-repeat,
    linear-gradient(var(--sep), var(--sep)) 13.89rem 0 / 1.54rem 1px no-repeat,
    radial-gradient(circle, #d9d9d9 45%, transparent 55%) 34.62rem -0.05rem / .22rem .22rem no-repeat,
    radial-gradient(circle, #d9d9d9 45%, transparent 55%) 44.59rem -0.05rem / .22rem .22rem no-repeat;
  transition: opacity .3s ease;
}
.pain::before { top: 0; }
.pain::after { bottom: 0; }
.pain__head { display: flex; align-items: baseline; gap: 2.4rem; }
.pain__title { font-family: var(--sans); font-size: 1.6rem; line-height: 1; letter-spacing: -0.005em; }
.pain__desc { margin-top: 1.68rem; font-family: var(--mono); font-size: 1.3rem; line-height: 1; color: var(--muted); }
.pain__desc--sans { font-family: var(--sans); font-size: 1.42rem; letter-spacing: -0.01em; }
.pain__tick {
  position: absolute; left: 8.05rem; top: 2.56rem; width: .52rem; height: 6.8rem;
  background: linear-gradient(to bottom, #fff 0 2.1rem, #1d2125 2.1rem 100%);
  clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 100%);
  transition: background .4s ease;
}
.pain { z-index: 1; }
.pain.is-active::before, .pain.is-active::after { opacity: 0; }
.pain.is-active .pain__tick { background: linear-gradient(to bottom, #fff 0, #e9edf1 1.95rem, transparent 1.95rem 2.35rem, #b4bcc4 2.35rem, #4d545b 100%); }
.pains { position: relative; }
.pains__hl { /* moving highlight frame */
  position: absolute; left: -.1rem; top: 0; width: 62.14rem; height: 12.13rem;
  pointer-events: none; z-index: 0;
  filter: drop-shadow(0 0 .45rem rgba(126, 152, 178, .35));
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.pains__hl::before, .pains__hl::after { content: ""; position: absolute; }
.pains__hl::before {
  inset: 0; background: linear-gradient(180deg, #93a7bb, #7489a0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 3.4rem 100%, 0 calc(100% - 3.4rem));
}
.pains__hl::after {
  inset: .14rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 3.34rem 100%, 0 calc(100% - 3.34rem));
  background:
    linear-gradient(180deg, rgba(150, 175, 200, .2), rgba(150, 175, 200, 0) .9rem),
    linear-gradient(0deg, rgba(150, 175, 200, .16), rgba(150, 175, 200, 0) .8rem),
    linear-gradient(90deg, rgba(150, 175, 200, .14), rgba(150, 175, 200, 0) .8rem),
    linear-gradient(270deg, rgba(150, 175, 200, .14), rgba(150, 175, 200, 0) .8rem),
    linear-gradient(180deg, #1f262d 0%, #1a2026 40%, #171c21 100%);
}

/* ---------- dial ---------- */
.dial { position: absolute; left: 96.91rem; top: 33.07rem; width: 0; height: 0; }
.dial > * { position: absolute; }
.dial__dots {
  left: -25.8rem; top: -26rem; width: 51.6rem; height: 52rem;
  background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 .1rem, transparent .13rem) 1.2rem 1.2rem / 3.39rem 3.39rem;
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.dial__ring { left: -23.2rem; top: -23.2rem; width: 46.4rem; height: 46.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .045); }
.dial__disc {
  left: -18.5rem; top: -18.5rem; width: 37rem; height: 37rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1b1d1f 0%, #161819 55%, #131517 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 3rem 6rem rgba(0, 0, 0, .5);
  overflow: hidden;
}
.dial__wedge {
  position: absolute; inset: .8rem; border-radius: 50%;
  background: conic-gradient(from -45deg, #1f2123 0deg, #1b1d1f 90deg, transparent 90deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.dial__spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial__spokes path { stroke: rgba(255, 255, 255, .17); stroke-width: 1.2; fill: none; }
.dial__binary {
  position: absolute; left: 0; right: 0; top: 7rem; text-align: center;
  font-family: var(--mono); font-size: 1.25rem; line-height: 4.2rem; letter-spacing: .05em; color: rgba(255, 255, 255, .02);
  white-space: nowrap;
}
.dial__pin {
  left: -.55rem; top: -18.15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 .42rem #2b2e31, 0 0 0 .55rem rgba(255, 255, 255, .07);
}
.dial__knob {
  left: -6.6rem; top: -6.6rem; width: 13.2rem; height: 13.2rem; border-radius: 50%;
  background: #161719;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 2rem 4rem rgba(0, 0, 0, .55);
  display: grid; place-items: center;
}
.dial__sphere {
  width: 10.6rem; height: 10.6rem; border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #5b5b5d 0%, #3a3a3c 35%, #262628 70%, #1c1c1e 100%);
  box-shadow: inset 0 -1rem 2rem rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  display: grid; grid-template-columns: repeat(3, .62rem); gap: .42rem; place-content: center;
}
.dial__sphere i { width: .62rem; height: .62rem; border-radius: 50%; background: #9a9a9b; }
.dial__sphere i:nth-child(2), .dial__sphere i:nth-child(4), .dial__sphere i:nth-child(6), .dial__sphere i:nth-child(8) { background: #5d5d5f; }
.dial__sphere i:nth-child(5) { background: #4a4a4c; }

.dial__key {
  top: -5.65rem; width: 11.3rem; height: 11.3rem; border-radius: 3.3rem;
  background: #141517; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 1.6rem 3rem rgba(0, 0, 0, .5);
  display: grid; place-items: center;
}
.dial__key--left { left: -23.55rem; }
.dial__key--right { left: 12.4rem; }
.dial__keycap {
  width: 10rem; height: 10rem; border-radius: 2.8rem;
  background: linear-gradient(160deg, #2c2d2f 0%, #212224 55%, #1b1c1e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05);
  display: grid; place-items: center;
}
.ico-toggle { display: flex; align-items: center; gap: 0; }
.ico-toggle i { width: 2.4rem; height: 3rem; border-radius: 1.5rem; background: #3a3b3d; }
.ico-toggle i:first-child { margin-right: -.9rem; }
.ico-toggle i:last-child { margin-left: -.9rem; }
.ico-toggle b { position: relative; z-index: 1; width: 1.85rem; height: 3.95rem; border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 60%, #a9a9a9 100%); box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .4); }
.ico-camera {
  position: relative; width: 4.1rem; height: 3.05rem; border-radius: .5rem; margin-top: .6rem;
  background: linear-gradient(180deg, #f2f2f2 0%, #c4c4c4 100%);
}
.ico-camera::before { content: ""; position: absolute; left: 1.1rem; top: -.75rem; width: 1.9rem; height: 1rem; border-radius: .35rem .35rem 0 0; background: #ededed; }
.ico-camera::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.55rem; height: 1.55rem; margin: -.78rem 0 0 -.78rem; border-radius: 50%; background: #2a2a2c; box-shadow: 0 0 0 .22rem #d9d9d9; }
.dial__dash { top: -.1rem; width: 2.06rem; height: .26rem; background: #fff; }
.dial__dash--left { left: -9.9rem; }
.dial__dash--right { left: 7.8rem; }

/* =========================================================
   MEET (isometric tiles)
   ========================================================= */
.meet { padding-top: 30.99rem; }
.tiles { position: relative; height: 72rem; margin-top: 0; }
.tiles svg { position: absolute; left: 50%; top: 0; width: 120rem; height: 72rem; margin-left: -60.56rem; overflow: visible; }
.tile { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile.is-float { animation: tileFloat 6s ease-in-out infinite; }
@keyframes tileFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tile:hover { transform: translateY(-8px); animation-play-state: paused; }

/* =========================================================
   AGENTS
   ========================================================= */
.agents { padding-top: 28.16rem; }
.agents .section-title { margin-top: 2.35rem; }
.agents__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 5.67rem; }
.agent { position: relative; height: 46.4rem; text-align: center; border-bottom: 1px solid #191c1e; }
.agent::after { /* white highlight bars */
  content: ""; position: absolute; bottom: -1px; height: .5rem; width: 20.06rem; background: #fff;
}
.agent:nth-child(odd)::after { right: .3rem; clip-path: polygon(.32rem 0, 100% 0, 100% 100%, 0 100%); }
.agent:nth-child(even)::after { left: .25rem; clip-path: polygon(0 0, calc(100% - .32rem) 0, 100% 100%, 0 100%); }
.agent:nth-child(odd)::before { /* centre notch */
  content: ""; position: absolute; right: -.56rem; bottom: -1px; width: 1.12rem; height: .62rem; background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: 2;
}
.agent__art { position: absolute; inset: 0 0 auto 0; height: 33rem; }
.agent__title { position: absolute; left: 0; right: 0; top: 36.94rem; font-family: var(--sans); font-weight: 400; font-size: 2rem; line-height: 2.4rem; letter-spacing: -0.01em; }
.agent__desc { position: absolute; left: 0; right: 0; top: 40.42rem; font-family: var(--mono); font-size: 1.3rem; line-height: 1.95rem; color: var(--muted); }

.agents__vline { position: absolute; left: 50%; width: .82rem; margin-left: -.41rem; border-left: 1px solid #2a2d30; border-right: 1px solid #2a2d30; }
.agents__vline--top { top: 29.93rem; height: 15.53rem; }
.agents__vline--bottom { top: 76.43rem; height: 15.43rem; }
.agents__vline::before { content: ""; position: absolute; left: -2px; right: -2px; top: 1.65rem; height: .62rem; background: var(--bg); }
.agents__dots { position: absolute; left: 50%; width: .3rem; height: .3rem; margin-left: -.46rem; background: #e5e5e5; box-shadow: .62rem 0 0 #e5e5e5; }
.agents__dots--a { top: 2.47rem; }
.agents__dots--b { top: 10.5rem; }
.agents__dots--c { top: 48.85rem; }
.agents__dots--d { top: 56.88rem; }

/* shared illustration atoms */
.art-traces { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art-traces path { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.1; }
.spark { position: absolute; width: .9rem; height: .9rem; border-radius: 50%; background: #2c2f33; }
.spark.sm { width: .55rem; height: .55rem; background: #33373b; }
.spark.xs { width: .3rem; height: .3rem; background: #6b6f73; }
.trace-dash { position: absolute; width: 2.6rem; height: .22rem; background: #d9d9d9; }
.trace-dash.w { background: #fff; width: 1.3rem; }
.node { position: absolute; width: .78rem; height: .78rem; margin: .26rem 0 0 .26rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .42rem #2f3236, 0 0 0 .56rem rgba(255, 255, 255, .07); }

/* sales */
.art-sales { position: absolute; left: 50%; top: 5.5rem; width: 46rem; height: 26rem; margin-left: -23rem; }
.art-sales .art-traces path { stroke: rgba(255, 255, 255, .1); }
.art-sales::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34rem; height: 30rem; margin: -15rem 0 0 -17rem; background: radial-gradient(closest-side, rgba(150, 160, 175, .07), transparent); pointer-events: none; }
.pill, .orb { position: absolute; left: 50%; background: linear-gradient(180deg, #2b2c2e 0%, #1f2022 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 0 0 .55rem rgba(20, 21, 23, .9), 0 1.2rem 2.4rem rgba(0, 0, 0, .5); }
.pill { width: 11.94rem; height: 5.46rem; margin-left: -5.97rem; border-radius: 3rem; }
.pill--chart { top: 4.26rem; display: flex; align-items: flex-end; justify-content: center; gap: .55rem; padding-bottom: 1.55rem; }
.pill--chart i { width: .55rem; height: calc(var(--h) * .1rem); background: #6d6e70; border-radius: .05rem; }
.pill--chart i.hi { background: #e9e9e9; }
.pill-row { position: absolute; left: 50%; top: 10.7rem; width: 11.94rem; margin-left: -5.97rem; display: flex; justify-content: space-between; }
.orb { position: relative; left: auto; width: 5.66rem; height: 5.66rem; border-radius: 50%; display: grid; place-items: center; }
.pill--bar { top: 17.12rem; height: 5.6rem; display: grid; place-content: center; justify-items: center; gap: .45rem; }
.pill--bar b { width: 2.7rem; height: .5rem; background: #e6e6e6; border-radius: .1rem; }
.pill--bar i { width: 8.2rem; height: .55rem; background: #3d3e40; border-radius: .1rem; }
.ico-card { width: 2.05rem; height: 1.55rem; border-radius: .3rem; background: linear-gradient(180deg, #e8e8e8 0 .35rem, #2a2a2a .35rem .62rem, #bdbdbd .62rem); }
.ico-bag { position: relative; width: 1.85rem; height: 1.75rem; border-radius: .35rem; background: linear-gradient(180deg, #e6e6e6, #b9b9b9); }
.ico-bag::after { content: ""; position: absolute; left: .55rem; top: .45rem; width: .75rem; height: .4rem; border: .16rem solid #3a3a3a; border-top: 0; border-radius: 0 0 .5rem .5rem; }

/* support */
.art-support { position: absolute; left: 50%; top: 3.1rem; width: 46rem; height: 30rem; margin-left: -23rem; }
.ghost-grid { position: absolute; inset: 0; }
.ghost-grid i { position: absolute; width: 5.2rem; height: 5.5rem; border-radius: 1.3rem; background: rgba(255, 255, 255, .018); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); }
.ghost-grid i:nth-child(1) { left: 5.36rem; top: 9.9rem; } .ghost-grid i:nth-child(2) { left: 10.88rem; top: 9.9rem; }
.ghost-grid i:nth-child(3) { left: 5.36rem; top: 16.08rem; } .ghost-grid i:nth-child(4) { left: 10.88rem; top: 16.08rem; }
.ghost-grid i:nth-child(5) { right: 9.9rem; top: 9.9rem; } .ghost-grid i:nth-child(6) { right: 4.26rem; top: 9.9rem; }
.ghost-grid i:nth-child(7) { right: 9.9rem; top: 16.08rem; } .ghost-grid i:nth-child(8) { right: 4.26rem; top: 16.08rem; }
.ghost-grid { -webkit-mask: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.console {
  position: absolute; left: 50%; top: 8.4rem; width: 12.24rem; height: 12.44rem; margin-left: -6.12rem;
  padding: .55rem; border-radius: 1.9rem;
  background: #232426; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 1.6rem 3rem rgba(0, 0, 0, .55);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .55rem;
}
.console__key { border-radius: 1.35rem; background: linear-gradient(180deg, #38393b, #2c2d2f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); display: grid; place-items: center; }
.console__key.is-on { background: linear-gradient(180deg, #4a4b4d, #3c3d3f); }
.console__bar { grid-column: 1 / -1; border-radius: 1.35rem; background: linear-gradient(180deg, #343537, #2a2b2d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); display: flex; align-items: center; justify-content: center; gap: .85rem; }
.console__bar i { width: .9rem; height: .9rem; border-radius: 50%; background: #4a4b4d; }
.console__bar i.on { background: radial-gradient(circle at 40% 35%, #fff, #b5b5b5); }
.ico-user { position: relative; width: 2.2rem; height: 2.4rem; }
.ico-user::before { content: ""; position: absolute; left: .55rem; top: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #d4d4d4; }
.ico-user::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.2rem; height: 1.1rem; border-radius: 1.1rem 1.1rem .3rem .3rem; background: #c2c2c2; }
.ico-gift { position: relative; width: 1.9rem; height: 1.6rem; margin-top: .5rem; border-radius: .15rem; background: linear-gradient(90deg, #a9a9a9 0 44%, #4a4b4d 44% 56%, #a9a9a9 56%); }
.ico-gift::before { content: ""; position: absolute; left: -.15rem; right: -.15rem; top: 0; height: .55rem; background: linear-gradient(90deg, #c4c4c4 0 44%, #4a4b4d 44% 56%, #c4c4c4 56%); border-radius: .12rem; }
.ico-gift::after { content: ""; position: absolute; left: .35rem; top: -.6rem; width: 1.2rem; height: .7rem; border: .17rem solid #bdbdbd; border-bottom: 0; border-radius: .7rem .7rem 0 0; }

/* monitors (ops + finance) */
.monitor { position: absolute; left: 50%; }
.monitor__screen { position: relative; border-radius: 2rem; background: linear-gradient(180deg, #2a2b2d 0%, #1d1e20 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 2rem 4rem rgba(0, 0, 0, .55); }
.monitor__stand { position: relative; margin: 0 auto; width: 6.1rem; height: 5.4rem; background: linear-gradient(180deg, #1c1d1f, #26272a); }
.monitor__stand::after { content: ""; position: absolute; left: -.2rem; right: -.2rem; bottom: 0; height: .85rem; background: #36373a; border-radius: .15rem; }

.art-ops { position: absolute; left: 50%; top: 4.5rem; width: 46rem; height: 28rem; margin-left: -23rem; }
.monitor--ops { top: 5.65rem; width: 17.34rem; margin-left: -9.35rem; }
.monitor--ops .monitor__screen { height: 12.03rem; }
.monitor--ops .monitor__stand { margin-left: 5.72rem; }
.check { position: absolute; left: 2.2rem; top: 3.35rem; width: 4.63rem; height: 4.63rem; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #4a4b4e, #2e2f32); box-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
.check::after { content: ""; position: absolute; left: 1.45rem; top: 1.25rem; width: 1.65rem; height: .85rem; border-left: .32rem solid #e8e8e8; border-bottom: .32rem solid #e8e8e8; transform: rotate(-45deg); border-radius: .1rem; }
.ab { position: absolute; left: 8.56rem; top: 1.75rem; width: 12.66rem; height: 8.55rem; padding: .55rem; border-radius: 1.6rem; background: #2a2b2e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 1rem 2rem rgba(0, 0, 0, .45); display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ab__k { display: grid; place-items: center; border-radius: 1.2rem; background: linear-gradient(180deg, #353639, #2b2c2f); font-family: var(--sans); font-weight: 700; font-size: 1.95rem; color: #707175; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ab__k.is-on { color: #e0e0e0; box-shadow: 0 0 0 .2rem #a9a9ab, inset 0 1px 0 rgba(255, 255, 255, .1); background: linear-gradient(180deg, #3c3d40, #2e2f32); }

.art-finance { position: absolute; left: 50%; top: 2.2rem; width: 46rem; height: 30rem; margin-left: -23rem; }
.monitor--fin { top: 10.4rem; width: 17.49rem; margin-left: -8.55rem; }
.monitor--fin .monitor__screen { height: 11.93rem; padding: 1rem; }
.monitor--fin .monitor__screen::before { content: ""; position: absolute; inset: 1rem; border-radius: 1.3rem; background: #26272a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.bars { position: absolute; left: 2.2rem; right: 2.2rem; bottom: 2rem; height: 7.5rem; display: flex; align-items: flex-end; gap: .62rem; }
.bars i { flex: 1; height: calc(var(--h) * .1rem); border-radius: .35rem; background: #3a3b3e; }
.bars i.hi { background: linear-gradient(180deg, #f2f2f2, #a5a5a7); }
.cursor { position: absolute; left: 9.6rem; top: 6.4rem; width: 2.2rem; height: 2.4rem; background: #fff; clip-path: polygon(0 0, 100% 58%, 55% 62%, 38% 100%); filter: drop-shadow(0 0 0 #000); }
.cursor::after { content: ""; position: absolute; inset: .28rem .36rem .42rem .28rem; background: #18191b; clip-path: polygon(0 0, 100% 58%, 55% 62%, 38% 100%); }

/* =========================================================
   PANEL (workflows + FAQ)
   ========================================================= */
.panel {
  width: min(140rem, 100% - 4rem);
  margin: 9.86rem auto 0;
  padding: 10rem 0 8rem;
  background: var(--panel);
  border-radius: 2.9rem;
}
.panel .container { width: min(var(--container), 100% - 12rem); }
.workflows__head { display: flex; justify-content: space-between; align-items: flex-end; }
.workflows__head .section-title { text-align: left; }
.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.65rem 1.85rem; margin-top: 8rem; }
.wf-card {
  position: relative; height: 35.4rem; padding: 3.35rem 2.65rem 0;
  background: var(--card); border: 1px solid var(--card-line); border-radius: .85rem;
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.wf-card:hover { border-color: #3a3a3a; background: #262626; }
.wf-icon { width: 5.8rem; height: 4.2rem; }
.wf-icon[data-shape="hex"] { height: 5.2rem; margin-top: -.5rem; }
.wf-icon[data-shape="blob"] { height: 5.8rem; margin-top: -.8rem; }
.wf-card .num { position: absolute; left: 2.65rem; top: 18.7rem; }
.wf-card__title { position: absolute; left: 2.65rem; top: 21.8rem; font-family: var(--sans); font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: 0; }
.wf-card__flow { position: absolute; left: 2.65rem; top: 24.74rem; font-family: var(--sans); font-size: 1.42rem; line-height: 1; color: #a7a7a7; letter-spacing: -0.01em; }
.wf-card .btn-mono { position: absolute; left: 2.65rem; top: 28.65rem; height: 4rem; }

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; margin-top: 20.2rem; }
.faq__intro .display { margin-top: 2.55rem; }
.faq__intro .btn-mono { margin-top: 9.78rem; }
.faq__list { margin-top: .2rem; }
.faq__item { border: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left;
  height: 6.69rem; padding-bottom: .41rem;
  border-bottom: 1px solid #333;
  font-family: var(--ui); font-weight: 500; font-size: 1.85rem; letter-spacing: -0.01em; color: #fff;
}
.faq__q svg { width: 3rem; height: 3rem; color: #fff; transition: transform .35s ease; flex: none; }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a {
  overflow: hidden; height: 4.4rem; margin: 1.34rem 0 3.72rem; max-width: 52.4rem;
  font-family: var(--ui); font-size: 1.6rem; line-height: 2.2rem; color: #bababa; letter-spacing: -0.02em;
  transition: height .45s cubic-bezier(.2, .7, .2, 1);
}
.faq__a p + p { margin-top: 1.1rem; }

/* =========================================================
   CTA + FOOTER (framed)
   ========================================================= */
.cta, .footer { position: relative; }
.cta::before, .footer::before { /* frame verticals */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--frame); right: var(--frame);
  border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); pointer-events: none;
}
.cta { padding: 24.3rem 0 0; height: 75.64rem; text-align: center; }
.cta .section-title { margin-top: 2.45rem; }
.cta .btn { margin-top: 3.93rem; }

.footer { border-top: 1px solid #303335; }
.footer__top, .footer__mid, .footer__bottom { position: relative; margin: 0 var(--frame); padding: 0 2.4rem; }
.footer__top { display: flex; justify-content: space-between; padding-top: 8rem; padding-bottom: 3.92rem; }
.footer__logo { display: inline-flex; align-items: center; gap: .9rem; margin-top: .62rem; }
.footer__logo svg { width: 2.6rem; height: 2.45rem; color: var(--gold); }
.footer__logo span { font-family: var(--sans); font-size: 2.42rem; line-height: 1; letter-spacing: -0.02em; }
.footer__brand p { margin-top: 2.04rem; max-width: 24rem; font-family: var(--sans); font-size: 1.6rem; line-height: 2.88rem; color: var(--muted); letter-spacing: -0.005em; }
.footer__cols { display: flex; gap: 10.3rem; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__col a { font-family: var(--sans); font-size: 1.6rem; line-height: 2.88rem; color: var(--muted); letter-spacing: -0.005em; transition: color .2s; }
.footer__col a:hover { color: #fff; }
.footer__col .tag + a { margin-top: .95rem; }
.footer__col--tight a { line-height: 2.67rem; }
.tag { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 .95rem; border-radius: .3rem; background: #fff; color: #0b0b0b; font-family: var(--ui); font-size: 1.35rem; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.footer__mid { display: flex; justify-content: space-between; align-items: center; height: 10.6rem; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding-top: .2rem; }
.badges { display: flex; gap: 1.25rem; }
.badge { width: 7.45rem; height: 7.45rem; margin-top: -.25rem; }
.socials { display: flex; gap: 1.58rem; align-items: center; }
.socials a { width: 2.12rem; height: 2.12rem; color: #fff; opacity: .95; transition: opacity .2s, transform .2s; }
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 100%; height: 100%; fill: currentColor; }
.footer__bottom { display: flex; align-items: center; height: 9.47rem; padding: 1.64rem 2.4rem 0; }
.amp { font-family: var(--ui); }
.footer__bottom a { font-family: var(--sans); font-size: 1.6rem; line-height: 1; color: #cdcecf; letter-spacing: -0.005em; }
.footer__bottom a:hover { color: #fff; }
.footer__bottom a + a { margin-left: 1.85rem; padding-left: 1.85rem; border-left: 1px solid #2c2f32; line-height: 1.85rem; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile.is-float { animation: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1199px) {
  :root { --gutter: 4rem; --frame: 2rem; }
  .display { font-size: clamp(3.8rem, 6.2vw, 5.8rem); line-height: 1.02; }
  .br-d { display: none; }

  .nav { left: 50%; margin-left: 0; transform: translateX(-50%); width: min(82.2rem, calc(100% - 3.2rem)); top: 1.6rem; }
  .nav__links { gap: 2rem; margin-right: 2.4rem; }

  .hero { height: auto; min-height: 92rem; padding-bottom: 26rem; }
  .hero__mark { top: 11rem; width: 36rem; height: 36rem; margin-left: -18rem; }
  .hero__copy { padding: 48rem 2rem 0; }
  .hero__title { width: auto; max-width: 74rem; margin-top: 1.6rem; }

  .about { padding-top: 10rem; }
  .about__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .about__title { text-indent: 0; max-width: none; }
  .about__text { margin-top: 4rem; }
  .stats { margin-top: 7rem; }
  .stat { height: 19rem; padding-left: 2.4rem; }
  .stat__value { left: 2.4rem; bottom: -1.4rem; }
  .stat__num { font-size: clamp(6.4rem, 10vw, 10rem); }
  .stat__unit { font-size: clamp(2.8rem, 4vw, 4rem); margin-left: 1.4rem; }

  .oldway { padding-top: 14rem; }
  .oldway__grid { height: auto; margin-top: 7rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
  .pains { width: 100%; max-width: 62rem; }
  .pains__hl { width: calc(100% + .2rem); }
  .dial { position: relative; left: auto; top: auto; width: 52rem; height: 52rem; flex: none; }
  .dial > * { translate: 26rem 26rem; }

  .meet { padding-top: 14rem; }
  .tiles { height: auto; aspect-ratio: 1200 / 720; margin-top: 2rem; }
  .tiles svg { left: 0; width: 100%; height: 100%; margin-left: 0; }

  .agents { padding-top: 12rem; }
  .agents__grid { margin-top: 6rem; }
  .agent__art { overflow: hidden; }

  .panel { width: calc(100% - 2.4rem); margin-top: 10rem; padding: 7rem 0 6rem; border-radius: 2.4rem; }
  .panel .container { width: calc(100% - 4.8rem); }
  .workflows__head { flex-direction: column; align-items: flex-start; gap: 2.8rem; }
  .wf-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 5rem; }
  .faq { grid-template-columns: 1fr; gap: 4.8rem; margin-top: 12rem; }
  .faq__intro .btn-mono { margin-top: 3.2rem; }
  .faq__a { max-width: none; }

  .cta { height: auto; padding: 16rem 2rem 16rem; }
  .footer__top { flex-direction: column; gap: 5rem; padding-top: 6rem; padding-bottom: 5rem; }
  .footer__cols { flex-wrap: wrap; gap: 4rem 7rem; }
}

@media (max-width: 819px) {
  .nav { height: 5.4rem; padding-right: .7rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger {
    display: grid; place-content: center; gap: .55rem; margin-left: auto;
    width: 4rem; height: 4rem; border-radius: 50%; background: #fff;
  }
  .nav__burger span { display: block; width: 1.6rem; height: .16rem; background: #03201f; border-radius: 1px; transition: transform .3s ease; }
  .nav.is-open .nav__burger span:first-child { transform: translateY(.36rem) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child { transform: translateY(-.36rem) rotate(-45deg); }
  .nav.is-open { border-radius: 2.7rem; background: rgba(24, 27, 31, .94); }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: absolute; top: calc(100% + .8rem); left: 0; right: 0;
    padding: 1rem 2rem; border-radius: 2.4rem;
    background: rgba(24, 27, 31, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 2rem 4rem rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .nav.is-open .nav__links a { display: block; padding: 1.5rem 0; font-size: 1.7rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .nav.is-open .nav__links li:last-child a { border-bottom: 0; }
}

@media (max-width: 719px) {
  :root { --gutter: 2rem; --frame: 1.2rem; }
  .display { font-size: clamp(3.3rem, 9.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.035em; }
  .about__title { letter-spacing: -0.02em; }

  .hero { min-height: 0; padding-bottom: 20rem; }
  .hero__mark { top: 9rem; width: 28rem; height: 28rem; margin-left: -14rem; }
  .hero__copy { padding-top: 38rem; }
  .hero__actions { flex-wrap: wrap; }
  .btn { width: auto; min-width: 15.5rem; padding: 0 2.4rem; height: 4.8rem; font-size: 1.7rem; }

  .stats { grid-template-columns: 1fr; gap: 4rem; }
  .stat { height: 15rem; }

  .pain { height: auto; min-height: 11.93rem; padding: 3.2rem 1.6rem 3rem 4rem; margin-bottom: 3rem; }
  .pain::before, .pain::after { left: 4rem; right: 1.6rem; }
  .pain__tick { left: 1.4rem; }
  .pain__head { gap: 1.4rem; }
  .pain__desc { line-height: 1.5; }
  .dial { scale: .64; margin: -9.4rem 0; }

  .agents__grid { grid-template-columns: 1fr; }
  .agent { height: 42rem; }
  .agent__title { top: 32.5rem; }
  .agent__desc { top: 36rem; padding: 0 2rem; }
  .agent__art { height: 31rem; }
  .agent::before, .agent::after, .agents__vline, .agents__dots { display: none; }

  .wf-grid { grid-template-columns: 1fr; }
  .wf-card { height: 30rem; }
  .wf-card .num { top: 13.4rem; } .wf-card__title { top: 16.5rem; } .wf-card__flow { top: 19.4rem; } .wf-card .btn-mono { top: 23rem; }

  .cta { padding: 12rem 2rem; }
  .footer__mid { flex-direction: column; align-items: flex-start; gap: 2.4rem; height: auto; padding: 2.4rem; }
  .footer__bottom { height: auto; padding: 2.8rem 2.4rem 3.2rem; }
}