/* ============================================================
   Avatier Identity Anywhere 2027 — Apple-style redesign
   Font: Proxima Nova Extra Condensed (primary) → Archivo Narrow fallback
   Keeps: header (Avatier logo), trust banner, HubSpot calendar, footer
   ============================================================ */

:root {
  --black: #000;
  --ink: #101114;
  --paper: #f5f5f7;
  --white: #fff;
  --blue: #0a84ff;
  --orange: #ff6a13;
  --purple: #8f5cff;
  --muted: rgba(255, 255, 255, .72);
  --muted-dark: rgba(16, 17, 20, .64);
  --line-dark: rgba(255, 255, 255, .12);
  --radius: 999px;
  --maxw: 1080px;
  /* SF Compact (Apple system font). Renders natively on Apple devices;
     falls back to the platform UI sans elsewhere. */
  --font: "SF Compact Display", "SF Compact Text", "SF Compact", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--black); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- header (KEPT: Avatier logo wordmark) ---------- */
.site-header {
  position: fixed; z-index: 60; top: 0; left: 0; width: 100%;
  display: flex; align-items: center;
  background: rgba(0, 0, 0, .56);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; padding: 0 5vw; gap: 20px; }
.brand { display: inline-flex; align-items: center; color: #fff; }
.brand .avatier-logo { height: 30px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.header-nav a { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .74); }
.header-nav a:hover { color: #fff; }
.header-event {
  margin-left: 24px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); padding: 6px 14px;
}

/* ---------- panels ---------- */
main { overflow: hidden; }
.panel {
  position: relative; min-height: auto; display: grid; place-items: center;
  padding: 84px 7vw; isolation: isolate;
}
.hero { min-height: 100svh; padding-top: 120px; }
.panel-mount { display: contents; }
.content { position: relative; z-index: 5; width: min(var(--maxw), 100%); margin-inline: auto; text-align: center; }

.eyebrow {
  margin: 0 0 20px; font-size: clamp(.9rem, 1.2vw, 1.05rem);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.panel h1 {
  margin: 0 auto; max-width: 1000px;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.04; letter-spacing: -.05em;
  font-weight: 700; text-wrap: balance; text-transform: none;
}
.panel .sub {
  margin: 28px auto 0; max-width: 840px;
  font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1.3; letter-spacing: -.01em;
  font-weight: 500; text-wrap: balance; color: rgba(255, 255, 255, .82);
}
.actions { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 0 26px; border-radius: var(--radius); background: var(--orange); color: #fff;
  font-size: 17px; font-weight: 650; letter-spacing: .01em;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button.secondary { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); }

.micro { margin: 23px auto 0; max-width: 760px; font-size: 15px; line-height: 1.45; font-weight: 500; opacity: .68; text-wrap: balance; }

/* ---------- hero panel + orb ---------- */
/* mirrored from the attached Avatier banner: green top-left → dark navy → blue right */
.hero {
  background:
    radial-gradient(88% 118% at 0% 0%, rgba(22, 110, 84, .72) 0%, rgba(22, 110, 84, 0) 50%),
    radial-gradient(95% 120% at 100% 92%, rgba(26, 74, 152, .55) 0%, rgba(26, 74, 152, 0) 55%),
    radial-gradient(80% 100% at 78% 30%, rgba(20, 52, 118, .38) 0%, rgba(20, 52, 118, 0) 60%),
    #05080f;
}
/* no tile / no wash — just the clean gradient A. Copy legibility via text-shadow only. */
.hero .content { text-shadow: 0 2px 26px rgba(0, 8, 18, .9), 0 1px 5px rgba(0, 8, 18, .7); }
.hero .eyebrow { text-shadow: 0 1px 12px rgba(0, 8, 18, .5); }
/* Avatier wordmark gradient (teal → cyan → blue), 2027™ stays white */
/* eyebrow group shrinks to the eyebrow's width and centers, so INTRODUCING sits above AVATIER */
.hero-eyebrow-group { display: inline-block; text-align: left; }
/* "INTRODUCING" — matches the booking-section eyebrow (small size, light blue) */
.hero-intro {
  margin: 0 0 10px; font-size: clamp(.9rem, 1.2vw, 1.05rem);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7fc5ff;
}
.hero .eyebrow {
  font-size: clamp(1.8rem, 2.4vw, 2.1rem);
  color: #fff; -webkit-text-fill-color: #fff;
}
.eb-year {
  background: linear-gradient(90deg, #17c9a0 0%, #1bbcd0 46%, #2f77dd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* hero headline sized to hold its two forced lines */
.hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); max-width: 100%; text-wrap: normal; white-space: normal; }
/* gradient Avatier "A" — hero centerpiece; fades in + grows from 0 to full size */
.hero-a {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  height: min(92svh, 1000px); width: auto;
  transform: translate(-50%, -50%) scale(0); opacity: 0; transform-origin: center;
  /* grow in, then (1.5s after the outline is done at ~3.35s) fade out to black */
  animation:
    a-in 1.9s cubic-bezier(.16, .84, .3, 1) .25s forwards,
    a-fade-out 1.2s ease 4.85s forwards;
}
.hero-a svg { height: 100%; width: auto; display: block; }
/* grows in as a solid gradient fill, then morphs to a thin gradient outline */
.hero-a svg path {
  stroke: url(#avatierAg); stroke-width: 2; vector-effect: non-scaling-stroke;
  fill-opacity: 1; stroke-opacity: 0;
  animation: a-to-outline 1.1s ease 2.25s forwards;
}
@keyframes a-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes a-to-outline {
  from { fill-opacity: 1; stroke-opacity: 0; }
  to { fill-opacity: 0; stroke-opacity: 1; }
}
@keyframes a-fade-out { to { opacity: 0; } }
/* copy contrast: dark-navy outer glow fades in ONLY as the A morphs to outline (synced to a-to-outline) */
@keyframes copy-glow-in {
  from { text-shadow: 0 0 10px rgba(5, 8, 16, 0), 0 0 24px rgba(5, 8, 16, 0), 0 0 46px rgba(5, 8, 16, 0); }
  to   { text-shadow: 0 0 10px rgba(5, 8, 16, .96), 0 0 24px rgba(5, 8, 16, .9), 0 0 46px rgba(5, 8, 16, .7); }
}
.hero .sub { animation: copy-glow-in 1.1s ease 2.25s both; }
@keyframes copy-fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero .actions .button { animation: copy-fade-in 1.1s ease 2.4s both; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-a { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: none; }
  .hero-a svg path { fill-opacity: 0; stroke-opacity: 1; animation: none; }
  .hero .sub {
    animation: none;
    text-shadow: 0 0 10px rgba(5, 8, 16, .96), 0 0 24px rgba(5, 8, 16, .9), 0 0 46px rgba(5, 8, 16, .7);
  }
  .hero .actions .button { animation: none; text-shadow: none; }
}

.orb {
  position: absolute; width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%;
  bottom: -34%; left: 50%; transform: translateX(-50%);
  background:
    radial-gradient(circle at 40% 34%, rgba(255, 255, 255, .85), transparent 4%),
    radial-gradient(circle at 48% 43%, #b6fff0 0 5%, #45d9cf 17%, #2a86e0 47%, #041629 74%);
  box-shadow: 0 0 100px rgba(20, 200, 180, .32), inset -34px -48px 90px rgba(0, 0, 0, .82);
  filter: saturate(120%); animation: float 8s ease-in-out infinite; z-index: 1;
}
.orb::before, .orb::after {
  content: ""; position: absolute; inset: -11%;
  border: 1px solid rgba(40, 205, 185, .34); border-radius: 50%;
  transform: rotate(-18deg) scaleY(.34);
}
.orb::after { inset: -21%; border-color: rgba(20, 130, 224, .26); transform: rotate(18deg) scaleY(.48); }
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-18px) rotate(2deg); }
}

/* ---------- pricing panel (light mint) ---------- */
/* soft mint→white, dark type, teal eyebrow, white cards, teal accents */
.pricing {
  color: #16232b;
  background:
    radial-gradient(48% 46% at 12% 6%, rgba(90, 130, 165, .10) 0%, transparent 60%),
    radial-gradient(54% 52% at 92% 98%, rgba(110, 145, 175, .08) 0%, transparent 60%),
    linear-gradient(168deg, #f8fafc 0%, #f4f7fa 50%, #eef3f8 100%);
}
.pricing .eyebrow { color: #2f77dd; }
.pricing h1 { color: #101d24; }
.pricing .sub { color: #566673; }
.pricing-grid { margin: 60px auto 0; width: min(960px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 22px; }
/* light blue benefit cards, equal height, soft blue shadow */
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  min-height: 232px; padding: 40px 26px; border-radius: 26px; text-align: center;
  background: linear-gradient(168deg, #eaf3fd 0%, #dfecfb 100%);
  border: 1px solid rgba(47, 119, 221, .18);
  box-shadow: 0 26px 50px -28px rgba(30, 90, 180, .30), 0 2px 6px -2px rgba(30, 90, 180, .10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 119, 221, .45);
  box-shadow: 0 36px 62px -26px rgba(30, 100, 200, .40), 0 0 0 1px rgba(70, 140, 235, .22);
}
.tile-icon {
  width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 16px;
  color: #2f77dd; background: rgba(255, 255, 255, .70); border: 1px solid rgba(70, 140, 235, .28);
}
.tile-icon svg { width: 30px; height: 30px; }
.tile-text { font-size: clamp(1.35rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: #08211c; text-wrap: balance; }
.pricing .micro { color: #6a877e; opacity: 1; margin-top: 30px; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* ---------- interoperability panel (dark navy / teal→cyan) ---------- */
.interop {
  color: #eaf3ff;
  background:
    radial-gradient(48% 46% at 8% 8%, rgba(23, 201, 160, .14) 0%, transparent 60%),
    radial-gradient(52% 52% at 96% 94%, rgba(47, 119, 221, .18) 0%, transparent 60%),
    linear-gradient(168deg, #06111f 0%, #050c18 52%, #030811 100%);
}
.interop .content { max-width: 1120px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; text-align: left; }
.io-copy { max-width: 540px; }
.interop .eyebrow { color: #4fbfe6; }
.interop h1 { color: #fff; }
.interop .sub { color: #9fbdda; margin-left: 0; margin-right: 0; }
.interop .sub .io-hi { color: #fff; }
/* platform logos on clean white cards — full brand color, legible on dark */
.io-logos { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
@property --io-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.io-logo-card {
  position: relative; isolation: isolate; background: transparent;
  width: calc(50% - 13px); min-height: 104px; display: grid; place-items: center;
  padding: 26px 30px; border-radius: 16px;
}
/* transparent card, rotating conic-gradient stroke (masked to the border ring) */
.io-logo-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--io-angle), rgba(34, 211, 238, .15), #22d3ee, #3b82f6, #22d3ee, rgba(34, 211, 238, .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: io-spin 5s linear infinite;
}
@keyframes io-spin { to { --io-angle: 360deg; } }
/* render every brand mark as a uniform monochrome white */
.io-logo-card img {
  max-width: 100%; max-height: 32px; width: auto; height: auto; display: block;
  filter: brightness(0) invert(1); opacity: .9;
}
@media (prefers-reduced-motion: reduce) { .io-logo-card::before { animation: none; } }

/* ---------- channels panel (spotlight grid of experiences) ---------- */
.channels {
  color: #eef4ff;
  background:
    radial-gradient(52% 48% at 86% 2%, rgba(56, 189, 248, .30) 0%, transparent 62%),
    radial-gradient(56% 54% at 6% 100%, rgba(99, 102, 241, .30) 0%, transparent 62%),
    linear-gradient(165deg, #16305c 0%, #12264c 52%, #0e1d3c 100%);
}
.channels .eyebrow { color: #8fd6ff; }
.channels h1 { color: #fff; }
.chan-lead {
  margin: 22px auto 0; font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; color: #aec4e4;
}
/* pill grid — every channel visible; a spotlight sweeps through */
.chan-grid {
  margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 14px; max-width: 760px;
}
.chan {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px; font-size: 1.06rem; font-weight: 650;
  letter-spacing: -.01em; color: #c6d6ef;
  background: rgba(22, 34, 62, .55);
  border: 1px solid rgba(120, 160, 220, .18);
  transition: color .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.chan-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #6fb3ee; flex: none; transition: color .45s ease; }
.chan-icon svg { width: 100%; height: 100%; }
/* active pill — electric cyan→blue spotlight */
.chan.is-active {
  color: #fff; transform: translateY(-2px);
  background: linear-gradient(120deg, #22d3ee 0%, #3b82f6 100%);
  border-color: rgba(120, 220, 255, .65);
  box-shadow: 0 12px 34px -10px rgba(45, 160, 255, .70), 0 0 0 1px rgba(140, 225, 255, .35);
}
.chan.is-active .chan-icon { color: #fff; }
/* reduced-motion / static: every pill in a gentle lit resting state */
.chan-grid.chan-static .chan { transition: none; transform: none; }
.chan-grid.chan-static .chan.is-active { transform: none; }
.chan-close {
  margin: 34px auto 0; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 650;
  letter-spacing: -.01em; color: #94b2d6;
}

/* ---------- claude panel ---------- */
.claude {
  color: #16232b;
  background:
    radial-gradient(46% 44% at 12% 6%, rgba(90, 130, 165, .10) 0%, transparent 60%),
    radial-gradient(52% 50% at 92% 98%, rgba(110, 145, 175, .08) 0%, transparent 60%),
    linear-gradient(168deg, #f8fafc 0%, #f4f7fa 50%, #eef3f8 100%);
}
.claude .eyebrow { color: #2f77dd; }
.claude h1 { color: #101d24; }
.claude .sub { color: #566673; }
/* "Build with" logo row */
.build-with {
  margin: 34px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 16px;
}
.bw-label { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5a748f; }
.bw-item {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 12px 22px; border-radius: 999px; font-size: 1.08rem; font-weight: 650; color: #101d24;
  background: #ffffff; border: 1px solid rgba(16, 29, 36, .10);
  box-shadow: 0 10px 24px -16px rgba(20, 40, 80, .35);
}
.bw-logo { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; color: #16232b; }
.bw-logo svg { width: 100%; height: 100%; }
.code-card {
  margin: 42px auto 0; width: min(760px, 100%); padding: 22px; border-radius: 28px;
  background: linear-gradient(165deg, #12233d 0%, #0d1b30 100%); border: 1px solid rgba(120, 160, 210, .16);
  box-shadow: 0 34px 70px -30px rgba(20, 40, 80, .5); text-align: left;
}
.dots { display: flex; gap: 7px; margin-bottom: 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
.code {
  margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: clamp(.82rem, 1.3vw, 1rem); line-height: 1.75; color: rgba(255, 255, 255, .86); white-space: pre-wrap;
}
.code .accent { color: #9ed0ff; }
.code .violet { color: #5fe0d4; }
.code .green { color: #a8edc2; }
.hard-close { margin: 28px auto 0; max-width: 900px; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.4; font-weight: 650; color: rgba(255, 255, 255, .78); text-wrap: balance; }
.event-pill {
  display: inline-flex; margin-top: 24px; align-items: center; gap: 9px; padding: 10px 16px;
  border-radius: var(--radius); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 15px; font-weight: 650;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #32d74b; box-shadow: 0 0 0 5px rgba(50, 215, 75, .12); }

/* ---------- trust banner (KEPT: two-column marquee, on black) ---------- */
.trust { position: relative; z-index: 10; background: var(--black); color: #fff; padding: 30px 0 34px; border-block: 1px solid var(--line-dark); }
.tb-viewport { position: relative; overflow: hidden; height: 96px; margin-bottom: 20px; }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.tb-col { position: relative; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 86%, transparent 100%);
}
.tb-track { display: flex; height: 100%; width: max-content; }
.tb-track-rev { animation: tb-marquee-rev 280s linear infinite; }
.tb-track-fwd { animation: tb-marquee-fwd 280s linear infinite; }
.tb-track:hover { animation-play-state: paused; }
.tb-item { display: flex; height: 100%; flex-shrink: 0; align-items: center; padding: 0 30px; }
.tb-item img { height: 44px; width: auto; object-fit: contain; filter: grayscale(1) brightness(2); opacity: .82; transition: opacity .2s ease; }
.tb-item img:hover { opacity: 1; }
.tb-center { position: absolute; top: 50%; left: 50%; z-index: 30; transform: translate(-50%, -50%); width: 66px; height: 66px; opacity: .8; color: #fff; }
.tb-center svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }
.tb-center:hover svg { animation: tb-spin-y 1.8s linear infinite; }
@keyframes tb-spin-y { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.tb-caption { position: relative; z-index: 12; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 5vw; }
.tb-caption p { margin: 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.tb-dash { display: block; width: 24px; height: 1px; background: rgba(255, 255, 255, .2); flex: none; }
.tb-fade { display: none; }
@keyframes tb-marquee-fwd { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tb-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- booking panel (KEPT: HubSpot calendar) ---------- */
.book { background: radial-gradient(circle at 50% 20%, rgba(10, 132, 255, .18), transparent 40%), #05060a; }
.book .eyebrow { color: #7fc5ff; }
.book .sub .grad {
  font-weight: 750;
  background: linear-gradient(90deg, #17c9a0 0%, #1bbcd0 46%, #2f77dd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* HubSpot sizing is hand-tuned: this is a raw <iframe>, not their
   MeetingsEmbedCode.js, so there is no auto-resize handshake and the height is
   a fixed guess. Measured natural heights: 683px narrow, 690px wide.
   Widths are NOT free — HubSpot pins its card at 400px until the container
   clears ~640px, so any max-width between 420 and 640 renders a 400px card
   floating in white gutters. Stay below 420 or above 640; never in between. */
.booking-embed {
  margin: 34px auto 0; max-width: 420px; background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
}
.booking-embed iframe { width: 100%; height: 700px; border: 0; display: block; }

/* Past 900px the widget switches to its two-pane layout — calendar left, meeting
   length + time slots right — so the whole booking flow is visible without
   scrolling inside the frame. */
@media (min-width: 900px) {
  .booking-embed { max-width: 880px; }
  .booking-embed iframe { height: 710px; }
}
.booking-fallback { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 600; color: #7fc5ff; text-decoration: underline; text-underline-offset: 3px; }
.booking-fallback:hover { color: #fff; }

/* ---------- footer (KEPT) ---------- */
.site-footer { background: #05060a; color: rgba(255, 255, 255, .7); padding: 54px 0 40px; border-top: 1px solid var(--line-dark); }
.site-footer .wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 5vw; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.footer-brand { display: inline-flex; align-items: center; color: #fff; margin-bottom: 16px; }
.footer-brand .avatier-logo { height: 28px; width: auto; display: block; }
.footer-col address { font-style: normal; font-size: 15px; line-height: 1.7; }
.footer-col a:hover { color: #fff; }
.footer-tagline { max-width: 380px; font-size: 15px; line-height: 1.6; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a:hover { color: #fff; }

/* ---------- sticky mobile CTA ---------- */
/* Full-bleed bar, not a floating pill: iOS Safari's translucent toolbar samples
   whatever sits behind it, so a bare orange button at the bottom edge tinted the
   entire browser chrome orange. The dark scrim keeps that sample near-black to
   match <meta name="theme-color">, and the safe-area pad lifts the button clear
   of the toolbar / home indicator. Needs viewport-fit=cover to be non-zero. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 8, 12, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, .10);
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta .button { width: 100%; }
.sticky-cta.hidden { opacity: 0; transform: translateY(140%); pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .header-nav, .header-event { display: none; }
  .sticky-cta { display: flex; }
}
@media (max-width: 720px) {
  .panel { padding: 64px 22px; }
  .hero { padding-top: 104px; }
  .panel h1 { font-size: clamp(2.4rem, 12vw, 5.2rem); }
  .panel .sub { font-size: 1.25rem; }
  .interop .content { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .io-copy { max-width: 100%; }
  .interop .sub { margin-inline: auto; }
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .tile { min-height: 168px; padding: 32px 24px; }
  .orb { width: 104vw; bottom: -18%; }
  /* mobile: center the eyebrow stack (INTRODUCING above the wordmark) */
  .hero-eyebrow-group { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .tb-track-rev, .tb-track-fwd, .tb-center:hover svg { animation: none; }
  * { transition: none !important; }
}