/* ═══ registered properties — what drives the travelling border ═══ */
@property --angle     { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --cta-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --accent:      #1871ff;
  --accent-ink:  #0758d5;
  --accent-soft: #EAF2FE;
  --accent-line: #1871ff59;

  --ink:    #0B0C17;
  --ink-2:  #3A3F52;
  --muted:  #6B7186;
  --faint:  #9AA0B4;

  --bg:     #FFFFFF;
  --bg-2:   #FBFBFD;
  --well:   #F7F8FB;

  /* every hairline on this page is navy at low alpha, never grey */
  --line:    #00003b14;
  --line-2:  #00003b0d;
  --line-3:  #00003b26;

  /* the six-layer navy shadow */
  --sh-card: 0 0 0 1px #00003b0d, 0 1px 1px #00003b0a, 0 3px 3px #00003b08,
             0 6px 4px #00003b05, 0 11px 4px #00003b03, 0 32px 24px -12px #00003b0f;
  --sh-sm:   0 0 0 1px #00003b0d, 0 1px 2px #00003b0f;
  --sh-btn:  inset 0 1px .5px #ffffff59, 0 0 0 1px #00003b1a, 0 1px 2px #00003b26;

  --r:   2px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 16px;

  --frame: 1200px;
  --col:   996px;
  --pad:   40px;

  --easing: linear;
  --line-width: 1px;
  --sans: "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: -.006em;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.028em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ═══ the blueprint frame — literal 1px tracks, like the hero grid ═══ */
.rig { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rig span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.rig span:nth-child(1) { left: calc(50% - var(--frame) / 2); }
.rig span:nth-child(2) { left: calc(50% - var(--frame) / 2 + var(--pad)); }
.rig span:nth-child(3) { left: calc(50% + var(--frame) / 2 - var(--pad) - 1px); }
.rig span:nth-child(4) { left: calc(50% + var(--frame) / 2 - 1px); }
@media (max-width: 1260px) { .rig { display: none; } }

.frame { position: relative; z-index: 1; width: min(var(--frame), 100%); margin-inline: auto; padding-inline: var(--pad); }
.col { width: min(var(--col), 100%); margin-inline: auto; }
.hr { height: 1px; background: var(--line-2); width: min(var(--frame), 100%); margin-inline: auto; }

/* ═══ atoms ═══ */
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r-2);
  font-size: 14px; font-weight: 500;
  transition: background-color .15s, box-shadow .15s, color .15s, transform .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn--p { background: var(--accent); color: #fff; box-shadow: inset 0 1px .5px #ffffff5c, 0 0 0 1px #0E56B8, 0 1px 2px #00003b33; }
.btn--p:hover { background: var(--accent-ink); }
.btn--s { background: var(--bg); color: var(--ink-2); box-shadow: var(--sh-btn); }
.btn--s:hover { color: var(--ink); }
.btn:active { transform: translateY(.5px); }
.btn--lg { height: 42px; padding: 0 18px; }

/* ═══ the travelling border ═══ */
.eff { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.eff::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: var(--line-width);
  background: conic-gradient(from calc(var(--angle) + var(--start-angle, 0deg)),
              transparent 0%, var(--line-color, var(--accent-line)) 20%, transparent 25%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@keyframes line-anim { to { --angle: 360deg; } }
@keyframes line-opacity-loop { 0%, 100% { opacity: .28; } 45% { opacity: .9; } }
@keyframes cta-line-anim { to { --cta-angle: 360deg; } }
.anim-loop .eff { opacity: .5; animation: line-anim 12s var(--easing) infinite, line-opacity-loop 3s var(--easing) infinite; }
.anim-loop .eff::before { animation: line-anim 12s var(--easing) infinite; }
.anim-int .eff { opacity: .45; animation: line-anim 8s var(--easing) infinite; animation-delay: var(--delay, 0s); }
.anim-int .eff::before { animation: line-anim 8s var(--easing) infinite; animation-delay: var(--delay, 0s); }

/* ═══ header ═══ */
.hdr__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
/* ═══ hero ═══ */
.hero { position: relative; padding-block: 44px 0; text-align: center; overflow: hidden; }
.spot {
  position: absolute; left: 50%; top: -260px; width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(40% 44% at 50% 46%, #1871ff26, transparent 70%),
              radial-gradient(26% 30% at 26% 34%, #6A38FF1a, transparent 72%),
              radial-gradient(24% 28% at 76% 30%, #14B8A614, transparent 72%);
  animation: spot-o 9s var(--easing) infinite, spot-s 14s var(--easing) infinite;
  pointer-events: none;
}
@keyframes spot-o { 0% { opacity: .62; } 50% { opacity: .48; } 95% { opacity: .62; } }
@keyframes spot-s { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1) rotate(4deg); } }
.hero__in { position: relative; display: grid; justify-items: center; gap: 0; }
.hero h1 { margin-top: 26px; font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.038em; line-height: 1.04; text-wrap: balance; }
.hero__p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 25px; }
.hero__r { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.hero__lnk { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .15s, gap .2s; }
.hero__lnk:hover { color: var(--accent); gap: 8px; }
.hero__lnk svg { width: 13px; height: 13px; }

.cards { position: relative; margin-top: 44px; display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.cards__i { position: relative; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.cards__i:nth-child(1) { transform: translateY(22px) rotate(-1.2deg); }
.cards__i:nth-child(3) { transform: translateY(22px) rotate(1.2deg); }
.cards:hover .cards__i:nth-child(1) { transform: translateY(14px) rotate(-1.8deg); }
.cards:hover .cards__i:nth-child(3) { transform: translateY(14px) rotate(1.8deg); }
.cards__l { display: flex; justify-content: center; gap: 18px; margin-top: 26px; }
.cards__l span { width: 318px; text-align: center; }
.cards__l b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cards__l em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 1080px) { .cards { flex-direction: column; align-items: center; gap: 24px; } .cards__i { transform: none !important; } .cards__l { display: none; } }

/* ═══ the widget, at its real proportions ═══ */
.w {
  --w-btn: #1871ff; --w-ink: #16161a; --w-muted: #6e6e78; --w-line: #ececee;
  --w-card: #f4f4f4; --w-outline: #e3e3e6; --w-surface: #ffffff; --w-r: 16px;
  position: relative; width: 318px; height: 520px; flex: none;
  background: var(--w-surface); border-radius: var(--w-r); overflow: hidden;
  box-shadow: var(--sh-card); text-align: left; color: var(--w-ink);
  transition: border-radius .35s cubic-bezier(.22,1,.36,1);
}
.w--m { width: 344px; height: 512px; }
.w__top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; padding: 12px 14px; }
.w__rn { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--w-outline); display: grid; place-items: center; }
.w__rn svg { width: 12px; height: 12px; }
.w__b { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 46px 16px 16px; }
.w__b--f { padding-bottom: 126px; }
.w__f { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 16px 16px; background: var(--w-surface); display: grid; gap: 7px; }
.w__f::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; background: linear-gradient(to top, var(--w-surface), transparent); }
.w__bt { height: 42px; border-radius: calc(var(--w-r) * .5); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.w__bt svg { width: 15px; height: 15px; }
.w__bt--p { background: var(--w-btn); color: #fff; box-shadow: inset 0 1px .5px #ffffff33; }
.w__bt--o { background: #fff; box-shadow: inset 0 0 0 1.5px var(--w-outline); }
.w__t { font-size: 21px; font-weight: 600; letter-spacing: -.028em; line-height: 1.1; }
.w__s { margin-top: 5px; font-size: 13px; line-height: 18px; color: var(--w-muted); }
.w__eb { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 8px; border-radius: 999px;
         background: #EDFCF3; box-shadow: inset 0 0 0 1px #C3EDD6; color: #12784A; font-size: 11px; font-weight: 500; }
.w__eb svg { width: 11px; height: 11px; }
.w__pr { text-align: center; margin-bottom: 12px; }
.w__md { width: 116px; aspect-ratio: 1; margin-inline: auto; border-radius: calc(var(--w-r) * .75); background: var(--w-card); position: relative; overflow: hidden; }
.w__nm { margin-top: 9px; font-size: 13.5px; font-weight: 600; }
.w__ct { font-size: 12px; color: var(--w-muted); }
.w__pc { margin-top: 1px; font-size: 12.5px; font-weight: 600; }
.w__pf { list-style: none; margin: 10px 0 0; padding: 0; }
.w__pf li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 12px; color: #3c3c43; border-top: 1px solid var(--w-line); }
.w__pf li:last-child { border-bottom: 1px solid var(--w-line); }
.w__pf svg { width: 15px; height: 15px; flex: none; color: #a1a1aa; }
.w__st { margin-top: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.w__pt { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--w-btn); font-variant-numeric: tabular-nums; }
.w__pl { margin-top: 4px; font-size: 12px; color: var(--w-muted); }
.w__cp { display: flex; align-items: flex-start; flex: none; }
.w__ci, .w__th { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; flex: none; position: relative; }
.w__ci { width: 66px; background: #ece9e4; box-shadow: 0 6px 16px -6px #00003b4d, 0 0 0 1px var(--w-line); }
.w__th { width: 56px; background: var(--w-card); margin-left: -18px; margin-top: 14px; z-index: 1; box-shadow: 0 6px 14px -6px #00003b4d; }
.w__bar { margin-top: 12px; height: 6px; border-radius: 999px; background: #ececef; overflow: hidden; }
.w__bar i { display: block; height: 100%; background: var(--w-btn); border-radius: 999px; transition: width .3s linear; }
.w__sp { margin-top: 12px; border: 1px solid var(--w-line); border-radius: calc(var(--w-r) * .7); padding: 12px; }
.w__spl { position: relative; }
.w__spl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; transform: translateX(-50%); background: var(--w-line); }
.w__sr { display: flex; gap: 9px; align-items: flex-start; }
.w__sr + .w__sr { margin-top: 12px; }
.w__sd { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid var(--w-outline); display: grid; place-items: center; color: #fff; flex: none; }
.w__sd svg { width: 8px; height: 8px; display: none; }
.w__sr.done .w__sd { background: var(--w-btn); border-color: var(--w-btn); }
.w__sr.done .w__sd svg { display: block; }
.w__sr.cur .w__sd { border-color: var(--w-btn); }
.w__sr.cur .w__sd::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--w-btn); }
.w__sx { font-size: 12px; line-height: 16px; color: var(--w-muted); }
.w__sr.done .w__sx, .w__sr.cur .w__sx { color: var(--w-ink); }
.w__sr.cur .w__sx { font-weight: 600; }
.w__tr { margin-top: 10px; border: 1px solid var(--w-line); border-radius: calc(var(--w-r) * .7); padding: 0 11px; }
.w__tr div { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 11.5px; color: #3c3c43; }
.w__tr div + div { border-top: 1px solid var(--w-line); }
.w__tr svg { width: 14px; height: 14px; flex: none; color: #a1a1aa; }
.w__rs { position: relative; }
.w__rm { width: 100%; height: 244px; border-radius: calc(var(--w-r) * .8); overflow: hidden; background: #ece9e4; position: relative; }
.w__rt { position: absolute; right: -3%; bottom: -6%; width: 30%; aspect-ratio: 1; border-radius: calc(var(--w-r) * .6); overflow: hidden; background: var(--w-card); border: 3px solid #fff; box-shadow: 0 6px 16px -6px #00003b4d; }
.w__zm { position: absolute; top: 9px; right: 9px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #14102666; backdrop-filter: blur(4px); }
.w__zm svg { width: 14px; height: 14px; }
.w__sc { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--w-muted); }
.w__sc b { font-size: 13px; color: var(--w-ink); }
.w__sc span { display: flex; align-items: center; gap: 5px; }
.w__sc svg { width: 12px; height: 12px; }

.fig { position: absolute; inset: 0; overflow: hidden; }
.fig i { position: absolute; inset: 0; display: block; }
.fig .bg { background: linear-gradient(178deg, #F7F9FE, #E4E9F3 60%, #D5DCEA); }
.fig .bd { filter: blur(3px);
  background:
    radial-gradient(7% 5.8% at 50% 12%, #0b0c17b8, transparent 72%),
    radial-gradient(3% 3.2% at 50% 18.5%, #0b0c178c, transparent 74%),
    radial-gradient(17% 7% at 50% 26%, #0b0c1794, transparent 76%),
    radial-gradient(4.4% 14% at 31% 42%, #0b0c1766, transparent 78%),
    radial-gradient(4.4% 14% at 69% 42%, #0b0c1766, transparent 78%),
    radial-gradient(12% 18% at 50% 44%, #0b0c1775, transparent 78%),
    radial-gradient(13.5% 11% at 50% 64%, #0b0c1761, transparent 78%),
    radial-gradient(5.5% 20% at 44% 84%, #0b0c1747, transparent 80%),
    radial-gradient(5.5% 20% at 56% 84%, #0b0c1747, transparent 80%); }
.fig .gm { left: 50%; top: 24%; width: 34%; height: var(--gh, 44%); right: auto; bottom: auto; transform: translateX(-50%);
  background: var(--gc, var(--accent)); mix-blend-mode: multiply; opacity: .62; filter: blur(3px);
  clip-path: var(--gp, polygon(26% 0, 74% 0, 88% 12%, 80% 34%, 96% 100%, 4% 100%, 20% 34%, 12% 12%));
  transition: background .4s, clip-path .4s, height .4s; }
.fig .gr { opacity: .8; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fig--p .bg { background: var(--w-card); }
.fig--p .gm { top: 14%; height: 68%; width: 52%; }

/* ═══ sections ═══ */
.sec { padding-block: 80px; position: relative; }
.sec--tall { padding-block: 120px; }
.sh { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 620px; margin: 0 auto 44px; }
.sh h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.032em; }
.sh p { color: var(--muted); font-size: 15px; line-height: 23px; }
.kick { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }

/* capability grid — hairlines, not cards */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.cap { padding: 26px 24px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; align-content: start; position: relative; }
.cap__i { width: 30px; height: 30px; border-radius: var(--r-2); background: var(--accent-soft); box-shadow: inset 0 0 0 1px #1871ff29; display: grid; place-items: center; color: var(--accent-ink); margin-bottom: 4px; position: relative; overflow: hidden; }
.cap__i svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.cap__i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, #ffffffcc 50%, transparent 62%); transform: translateX(-130%); animation: shine 7s var(--easing) infinite; animation-delay: var(--delay, 0s); }
@keyframes shine { 0%, 72% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
.cap h3 { font-size: 14.5px; font-weight: 600; }
.cap p { font-size: 13.5px; line-height: 20px; color: var(--muted); }
@media (max-width: 900px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }

/* customiser */
.cust { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.pan { position: relative; background: var(--bg); border-radius: var(--r-3); box-shadow: var(--sh-sm); overflow: hidden; }
.pan__h { padding: 13px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; }
.pan__h b { font-size: 13.5px; font-weight: 600; }
.ct { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: grid; gap: 9px; }
.ct:last-child { border-bottom: 0; }
.ct__l { font-size: 12px; color: var(--muted); }
.sws { display: flex; gap: 7px; }
.sw { width: 26px; height: 26px; border-radius: var(--r-2); background: var(--c); box-shadow: inset 0 0 0 1px #00003b26; position: relative; transition: transform .18s; }
.sw:hover { transform: translateY(-1.5px); }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -3.5px; border-radius: 9px; box-shadow: 0 0 0 1.5px var(--c); }
.seg { display: flex; padding: 2px; background: var(--well); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button { flex: 1; height: 26px; border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--muted); transition: all .15s; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--sh-sm); }
.rw { display: flex; align-items: center; justify-content: space-between; }
.tg { width: 34px; height: 20px; border-radius: 999px; background: #D0D5DD; position: relative; transition: background .18s; flex: none; box-shadow: inset 0 1px 2px #00003b1a; }
.tg::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #00003b3d; transition: transform .18s cubic-bezier(.22,1,.36,1); }
.tg[aria-pressed="true"] { background: var(--accent); }
.tg[aria-pressed="true"]::after { transform: translateX(14px); }
.fld { height: 32px; padding: 0 10px; border-radius: var(--r-2); background: var(--bg); box-shadow: var(--sh-sm); font-size: 13px; color: var(--ink); outline: 0; width: 100%; }
.fld:focus { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px #1871ff1f; }

.well { position: relative; min-height: 596px; border-radius: var(--r-4); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--bg-2); display: grid; place-items: center; overflow: hidden; }
.well::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, #00003b1a 1px, transparent 0); background-size: 22px 22px; }
.well::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 42% at 50% 42%, #1871ff1f, transparent 70%); }
.well > * { position: relative; }
@media (max-width: 940px) { .cust { grid-template-columns: 1fr; } }

/* screens strip */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 14px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.scr { position: relative; border-radius: var(--r-3); background: var(--bg); box-shadow: var(--sh-sm); overflow: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.scr:hover { transform: translateY(-3px); }
.scr__v { height: 232px; background: var(--bg-2); position: relative; border-bottom: 1px solid var(--line-2); overflow: hidden; }
.scr__c { padding: 11px 13px 13px; }
.scr__c b { display: block; font-size: 13px; font-weight: 600; }
.scr__c span { font-size: 12px; color: var(--muted); }

/* privacy: radar + rules */
.radar { position: relative; height: 300px; border-radius: var(--r-4); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--bg-2); overflow: hidden; display: grid; place-items: center; margin-bottom: 24px; }
.radar__r { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.radar__s { position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: conic-gradient(from 0deg, #1871ff00 0deg, #1871ff24 40deg, #1871ff00 70deg);
  animation: spin 8s var(--easing) infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.radar__c { position: relative; z-index: 2; padding: 14px 18px; border-radius: var(--r-3); background: var(--bg); box-shadow: var(--sh-card); text-align: center; }
.radar__c b { display: block; font-size: 14px; font-weight: 600; }
.radar__c span { font-size: 12.5px; color: var(--muted); }
.radar__d { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #1871ffa3; opacity: 0; }
.radar__d:nth-child(4) { top: 26%; left: 24%; animation: dot1 8s var(--easing) infinite; }
.radar__d:nth-child(5) { top: 66%; left: 32%; animation: dot2 8s var(--easing) infinite; }
.radar__d:nth-child(6) { top: 34%; left: 74%; animation: dot3 8s var(--easing) infinite; }
.radar__d:nth-child(7) { top: 72%; left: 68%; animation: dot4 8s var(--easing) infinite; }
@keyframes dot1 { 0%, 60%, 100% { opacity: 0; } 64%, 84% { opacity: 1; } }
@keyframes dot2 { 0%, 10%, 100% { opacity: 0; } 14%, 34% { opacity: 1; } }
@keyframes dot3 { 0%, 35%, 100% { opacity: 0; } 39%, 59% { opacity: 1; } }
@keyframes dot4 { 0%, 85%, 100% { opacity: 0; } 88%, 99% { opacity: 1; } }

.rules { border-top: 1px solid var(--line-2); }
.rule { display: grid; grid-template-columns: 44px 1fr 1.05fr; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line-2); align-items: start; }
.rule__n { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.rule__t { font-size: 14.5px; font-weight: 600; }
.rule__d { font-size: 13.5px; line-height: 20px; color: var(--muted); }
@media (max-width: 780px) { .rule { grid-template-columns: 30px 1fr; } .rule__d { grid-column: 2; } }

/* platform, stats, quotes */
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { position: relative; background: var(--bg); border-radius: var(--r-3); padding: 20px; box-shadow: var(--sh-sm); display: grid; gap: 7px; align-content: start; }
.card b { font-size: 14px; font-weight: 600; }
.card p { font-size: 13.5px; line-height: 20px; color: var(--muted); }
.card code { font-family: var(--mono); font-size: 11.5px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-2); padding: 1px 5px; border-radius: var(--r); color: var(--ink-2); }
@media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.stat { padding: 22px 20px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: grid; gap: 3px; }
.stat b { font-size: 28px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } }

.quotes { display: flex; max-width: var(--col); margin-inline: auto; }
.quote { width: 50%; min-height: 300px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; box-shadow: inset 0 0 0 1px var(--line-2); }
.quote p { font-size: 15px; line-height: 23px; color: var(--ink-2); }
.quote footer { display: flex; align-items: center; gap: 10px; }
.quote .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #93C0FF, var(--accent)); flex: none; box-shadow: inset 0 1px .5px #ffffff8f; }
.quote b { display: block; font-size: 13px; font-weight: 600; }
.quote span { font-size: 12px; color: var(--muted); }
@media (max-width: 780px) { .quotes { flex-direction: column; } .quote { width: 100%; min-height: 0; } }

/* cta with its own travelling border */
.cta { position: relative; border-radius: var(--r-4); background: var(--bg); padding: 56px 32px; text-align: center; overflow: hidden; box-shadow: var(--sh-card); }
.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--cta-angle), transparent 0%, #1871ff6b 18%, transparent 26%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cta-line-anim 10s var(--easing) infinite; }
.cta__bg { position: absolute; inset: 0; background: radial-gradient(44% 60% at 50% 0%, #1871ff1f, transparent 70%); }
.cta__dots { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, #00003b14 1px, transparent 0); background-size: 22px 22px;
  mask-image: radial-gradient(56% 70% at 50% 0%, #000, transparent 74%); }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(26px, 3.2vw, 40px); max-width: 18ch; margin: 0 auto 12px; }
.cta p { color: var(--muted); max-width: 46ch; margin: 0 auto 22px; font-size: 15px; }
.cta__r { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.foot { border-top: 1px solid var(--line-2); padding-block: 40px 28px; margin-top: 60px; }
.foot__g { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
.foot h4 { font-size: 12.5px; font-weight: 600; margin-bottom: 11px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot a { font-size: 13px; color: var(--muted); transition: color .15s; }
.foot a:hover { color: var(--accent); }
.foot__b { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--faint); }
@media (max-width: 820px) { .foot__g { grid-template-columns: 1fr 1fr; } }

.rv { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .spot, .radar__s, .radar__d, .cap__i::after, .cta::before, .anim-loop .eff, .anim-loop .eff::before, .anim-int .eff, .anim-int .eff::before { animation: none !important; }
}