@charset "UTF-8";

/* ============================================================================
   SCO4M — public pages
   ----------------------------------------------------------------------------
   Loaded only by the marketing side, so the signed-in app never pays for it.
   Tokens, buttons, badges and cards all come from app.css; this adds the
   layout and the one thing the landing page is built around.

   The hero of every competing panel is a stock claim: "The Best SMM Panel at
   Cheapest Price" over a gradient. Ours is the product itself -- a real order
   ticket, running. It reuses the same ring and counter the customer will see
   after signing up, so the promise and the product are literally the same
   component. It costs nothing extra to ship and no competitor can screenshot
   it into their own site, because it only makes sense if you actually built
   the thing underneath.
   ========================================================================== */


@property --fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}


/* --- shell ---------------------------------------------------------------- */

.pub { padding-block-end: 0; }

.pubhead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--ground) 74%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  border-block-end: 1px solid var(--line-soft);
  box-shadow: var(--edge);
}

.pubhead__in {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-inline-size: 1120px;
  margin-inline: auto;
  padding: .7rem var(--pad);
}

.pubnav {
  display: none;
  gap: .25rem;
  margin-inline: auto;
}

/* 44px is the target size the project's own UI rules ask for, and these
   links were 20-23px tall. The hit area grows; the type does not. */
.pubnav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: .45rem .7rem;
  border-radius: 9px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.pubnav a:hover { color: var(--ink); background: var(--s2); }
.pubnav a.is-on { color: var(--brand-100); }

.pubnav__in {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-2);
  padding-inline: .4rem;
}

.langswap {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  margin-inline-start: auto;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.langswap:hover { color: var(--brand-300); border-color: color-mix(in oklab, var(--brand) 45%, transparent); }

/* The phone menu. Hidden from 880px up, where .pubnav takes over. */
.pubmenu { position: relative; flex: none; }

.pubmenu summary {
  list-style: none;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.pubmenu summary::-webkit-details-marker { display: none; }
.pubmenu summary::marker { content: ""; }

.pubmenu summary:hover,
.pubmenu[open] summary { color: var(--brand-300); border-color: color-mix(in oklab, var(--brand) 45%, transparent); }

.pubmenu nav {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  inline-size: max-content;
  min-inline-size: 190px;
  display: grid;
  padding: .4rem;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--s1) 97%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--e3, 0 20px 60px rgb(0 0 0 / .55));
}

/* 44px targets, which is what the rest of this stylesheet asks for and what
   a thumb actually needs. */
.pubmenu nav a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .8rem;
  border-radius: 9px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.pubmenu nav a:hover { color: var(--ink); background: var(--s2); }
.pubmenu nav a.is-on { color: var(--brand-100); }

@media (min-width: 880px) {
  .pubnav { display: flex; }
  .langswap { margin-inline-start: 0; }
  .pubmenu { display: none; }
}


/* --- sections ------------------------------------------------------------- */

.wrap {
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.wrap--narrow { max-inline-size: 760px; }

.sec { padding-block: clamp(2.5rem, 7vw, 5rem); }

.sec__head { display: grid; gap: .6rem; max-inline-size: 60ch; margin-block-end: 2rem; }

.eyebrow {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* -100, not -300: at this size the deeper tone falls under 4.5:1 against
     the ground and stops being readable on a phone in daylight. */
  color: var(--brand-100);
}

h1.display {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}

h2.display {
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  font-weight: 350;
  line-height: 1.6;
  text-wrap: pretty;
}


/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(2.5rem, 7vw, 4.5rem);
  overflow: clip;
}

/* A single wide glow behind the headline. One light source, not the four
   scattered blobs every AI-built landing page has. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -28%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(900px, 135vw);
  aspect-ratio: 2 / 1;
  background: radial-gradient(closest-side,
      color-mix(in oklab, var(--brand-300) 20%, transparent),
      transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero__copy { display: grid; gap: 1.1rem; justify-items: start; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .5rem; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-block-start: 1rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}

.hero__trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__trust svg { inline-size: 16px; block-size: 16px; color: var(--good); flex: none; }

@media (min-width: 940px) {
  .hero { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; }
}


/* --- the signature: a live order ticket ----------------------------------- */

.ticket {
  --fill: 0%;
  position: relative;
  border-radius: var(--r-lg);
  padding: 1.1rem;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 12%, var(--s2)),
      color-mix(in oklab, var(--brand) 4%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 24%, var(--line));
  box-shadow: var(--e3), var(--edge);
  display: grid;
  gap: .9rem;
  max-inline-size: 420px;
  inline-size: 100%;
  justify-self: center;
}

.ticket__top { display: flex; align-items: center; gap: .7rem; }

.ticket__ring {
  --size: 64px;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--live) var(--fill),
      color-mix(in oklab, var(--line) 70%, transparent) 0);
  animation: tkt-fill 9s var(--ease) infinite;
}

.ticket__ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--s1);
  box-shadow: inset 0 1px 4px rgb(0 0 0 / .55);
}

.ticket__pct {
  position: relative;
  font-size: .82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.ticket__name { font-weight: 600; font-size: var(--step-0); }
.ticket__sub { font-size: var(--step--2); color: var(--ink-2); }

.ticket__bar {
  block-size: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--line) 70%, transparent);
  overflow: hidden;
}

.ticket__bar i {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--live), var(--good));
  inline-size: var(--fill);
  animation: tkt-fill 9s var(--ease) infinite;
}

.ticket__rows { display: grid; gap: .45rem; font-size: var(--step--1); }

.ticket__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-2);
}

.ticket__row b { color: var(--ink); font-weight: 600; }

/* The status label swaps in step with the fill, so the ticket tells the whole
   lifecycle -- queued, delivering, done -- in one loop. */
.ticket__state { position: relative; block-size: 1.4em; overflow: hidden; }
.ticket__state span {
  position: absolute;
  inset-inline: 0;
  opacity: 0;
  animation: tkt-state 9s steps(1) infinite;
}
.ticket__state span:nth-child(1) { animation-delay: 0s; }
.ticket__state span:nth-child(2) { animation-delay: -8s; }
.ticket__state span:nth-child(3) { animation-delay: -3.5s; }

@keyframes tkt-fill {
  0%, 6% { --fill: 0%; }
  62% { --fill: 74%; }
  86%, 100% { --fill: 100%; }
}

@keyframes tkt-state {
  0%, 11% { opacity: 1; }
  12%, 100% { opacity: 0; }
}

/* Live ticker of the money figure, counting while the ring fills. */
.ticket__amount {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--brand-300);
  letter-spacing: -.03em;
  direction: ltr;
}


/* --- feature grid --------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.feat {
  display: grid;
  gap: .5rem;
  padding: 1.2rem;
  border-radius: var(--r);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 9%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line-soft));
  box-shadow: var(--e1), var(--edge);
  transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease);
}

.feat:hover { transform: translateY(-3px); border-color: var(--line); }

.feat__icon {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--brand-300);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent);
}

.feat__icon svg { inline-size: 20px; block-size: 20px; }
.feat h3 { font-size: var(--step-0); font-weight: 600; }
.feat p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }


/* --- platform tiles ------------------------------------------------------- */

.tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.tile {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-radius: var(--r);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 9%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line-soft));
  box-shadow: var(--e1), var(--edge);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.tile:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); }
.tile b { font-weight: 600; }
.tile span { font-size: var(--step--2); color: var(--ink-2); }


/* --- price table ---------------------------------------------------------- */

.ptable { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }

.ptable th {
  text-align: start;
  font-size: var(--step--2);
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .6rem .75rem;
  border-block-end: 1px solid var(--line);
}

.ptable td { padding: .7rem .75rem; border-block-end: 1px solid var(--line-soft); }
.ptable tr:last-child td { border-block-end: 0; }
.ptable tr:hover td { background: color-mix(in oklab, var(--live) 3%, transparent); }
.ptable .p { font-weight: 650; color: var(--brand-100); }


/* --- faq ------------------------------------------------------------------ */

.faq { display: grid; gap: .6rem; }

.faq details {
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line-soft));
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 8%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  box-shadow: var(--e1), var(--edge);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 2px solid var(--ink-3);
  border-block-end: 2px solid var(--ink-3);
  rotate: 45deg;
  transition: rotate var(--fast) var(--ease);
  flex: none;
}

.faq details[open] summary::after { rotate: -135deg; }

.faq p {
  padding: 0 1.1rem 1.1rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.7;
}


/* --- code ----------------------------------------------------------------- */

.code {
  direction: ltr;
  text-align: start;
  background: #06080d;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.7;
  color: #c8d3e8;
  box-shadow: inset 0 1px 4px rgb(0 0 0 / .5);
}

.code .k { color: var(--brand-300); }
.code .s { color: var(--good); }
.code .c { color: var(--ink-3); }


/* --- prose ---------------------------------------------------------------- */

.prose { display: grid; gap: 1rem; max-inline-size: 72ch; }
.prose h2 { font-size: var(--step-1); margin-block-start: 1rem; }
.prose h3 { font-size: var(--step-0); margin-block-start: .5rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; display: grid; gap: .4rem; }
.prose strong { color: var(--ink); font-weight: 600; }


/* --- cta band ------------------------------------------------------------- */

.band {
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 5vw, 3rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
  background:
    radial-gradient(120% 160% at 50% 0%, color-mix(in oklab, var(--brand) 15%, transparent), transparent 65%),
    linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
  box-shadow: var(--e3), var(--edge), var(--e-brand);
}


/* --- footer --------------------------------------------------------------- */

.pubfoot {
  border-block-start: 1px solid var(--line-soft);
  margin-block-start: 3.5rem;
  padding-block: 2.5rem 1.25rem;
  background:
    radial-gradient(80% 120% at 50% 100%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, color-mix(in oklab, var(--s1) 75%, transparent));
}

.pubfoot__in {
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  gap: 1.75rem;
  /* Three link columns side by side even on a phone: they are four items
     each, and stacking them turns the footer into a scroll of its own. */
  grid-template-columns: repeat(3, 1fr);
}

/* The brand block spans the full width above them. */
.pubfoot__brand {
  grid-column: 1 / -1;
  display: grid;
  gap: .7rem;
  justify-items: start;
}

.pubfoot__blurb {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.6;
  max-inline-size: 40ch;
}

.pubfoot__marks { display: flex; gap: .75rem; align-items: center; }

.pubfoot__marks .pmark {
  animation: mark-breathe 4s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 380ms);
}

.pubfoot__pay {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem .35rem .5rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 550;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--brand) 10%, var(--s2));
  border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--line-soft));
}

.pubfoot__pay .pmark { inline-size: 17px; block-size: 17px; }

.pubfoot__col { display: grid; gap: 0; align-content: start; }

.pubfoot__col h3 {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: .1rem;
}

/* Fourteen platform links stacked in a column, 16px tall each. The gap
   between them was most of the target. Padding makes each one its own
   comfortable row without changing the type size or the column's rhythm. */
.pubfoot__col a {
  display: flex;
  align-items: center;
  min-block-size: 40px;
  font-size: var(--step--2);
  color: var(--ink-2);
  transition: color var(--fast) var(--ease);
  line-height: 1.5;
}

.pubfoot__col a:hover { color: var(--brand-100); }

/* The language switch in the footer's last line: the one link a visitor
   who landed in the wrong language most needs, at 17px tall. */
.pubfoot__base a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .4rem;
}

.pubfoot__base {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-block-start: 2rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--step--2);
  color: var(--ink-3);
}

.pubfoot__base a { color: var(--ink-2); }
.pubfoot__base a:hover { color: var(--brand-100); }
.pubfoot__dot { color: var(--ink-3); }

@media (min-width: 760px) {
  .pubfoot__in { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
  .pubfoot__brand { grid-column: auto; }
}


/* --- breadcrumbs ---------------------------------------------------------- */

.crumbs {
  display: flex;
  gap: .45rem;
  align-items: center;
  font-size: var(--step--2);
  color: var(--ink-3);
  margin-block-end: 1rem;
  flex-wrap: wrap;
}

/* A breadcrumb should stay small, so this buys hit area with padding
   rather than by growing the row. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: .15rem;
  color: var(--ink-2);
}
.crumbs a:hover { color: var(--brand-100); }


@media (prefers-reduced-motion: reduce) {
  .ticket__ring, .ticket__bar i, .ticket__state span { animation: none !important; }
  .ticket { --fill: 74%; }
  .ticket__state span:nth-child(2) { opacity: 1; }
}


/* --- hero density --------------------------------------------------------- */
/*
   The first version of this page was correct and empty. Correct is not the
   same as convincing: a reseller deciding whether to trust a panel with money
   wants the answers to five questions before they read a sentence, and a
   headline floating in space does not give them.
*/

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem .35rem .6rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-100);
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 28%, transparent);
}

.pill-badge svg { inline-size: 14px; block-size: 14px; }

h1.display em {
  font-style: normal;
  color: var(--brand-300);
  /* A hairline underline rather than a highlighter block: the emphasis should
     read as a pen mark, not a marker. */
  box-shadow: inset 0 -.14em 0 color-mix(in oklab, var(--brand) 35%, transparent);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  padding: 0;
  margin-block-start: .3rem;
}

.pills li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 550;
  color: var(--ink-2);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 11%, var(--s2)),
      color-mix(in oklab, var(--brand) 4%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--line-soft));
  box-shadow: var(--e1);
}

.pills svg { inline-size: 15px; block-size: 15px; color: var(--brand-100); flex: none; }

.platforms-strip {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  margin-block-start: 1.1rem;
  color: var(--ink-3);
}

.platforms-strip svg {
  inline-size: 21px;
  block-size: 21px;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.platforms-strip svg:hover { color: var(--ink); transform: translateY(-2px); }
.platforms-strip span { font-size: var(--step--2); }


/* --- proof bar ------------------------------------------------------------ */

.proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--e2), var(--edge);
}

.proof__item {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  padding: 1rem .75rem;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 10%, var(--s2)),
      color-mix(in oklab, var(--brand) 4%, var(--s1)));
}

.proof__item b {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--brand-300);
}

.proof__item span { font-size: var(--step--2); color: var(--ink-2); }

@media (min-width: 700px) { .proof { grid-template-columns: repeat(4, 1fr); } }


/* --- steps ---------------------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--gap);
  counter-reset: s;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.steps li {
  position: relative;
  display: grid;
  gap: .4rem;
  align-content: start;
  padding: 1.3rem 1.2rem 1.2rem;
  border-radius: var(--r);
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 9%, var(--s2)),
      color-mix(in oklab, var(--brand) 3%, var(--s1)));
  border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line-soft));
  box-shadow: var(--e1), var(--edge);
}

.steps__n {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-100);
  background: color-mix(in oklab, var(--brand) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 24%, transparent);
  margin-block-end: .2rem;
  direction: ltr;
}

.steps h3 { font-size: var(--step-0); font-weight: 600; }
.steps p { font-size: var(--step--1); color: var(--ink-2); line-height: 1.65; }


/* --- ticket: head, platform mark, delivered counter ----------------------- */

.ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block-end: .85rem;
  border-block-end: 1px solid var(--line-soft);
}

.ticket__id {
  font-size: var(--step--2);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.ticket__name { display: flex; align-items: center; gap: .45rem; }
.ticket__plat { inline-size: 17px; block-size: 17px; color: var(--ink-2); flex: none; }

.ticket__sub { direction: ltr; text-align: start; }

.ticket__row--total {
  padding-block-start: .5rem;
  border-block-start: 1px solid var(--line-soft);
}

/* The percentage and the delivered count are driven by the same registered
   custom property as the ring, so the three can never disagree. */
.ticket__pct::after {
  content: counter(p) "%";
  counter-reset: p var(--pnum);
}

.ticket__done::after {
  content: counter(d);
  counter-reset: d var(--dnum);
}

@property --pnum { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --dnum { syntax: "<integer>"; inherits: false; initial-value: 0; }

.ticket__pct { animation: tkt-pct 9s var(--ease) infinite; }
.ticket__done { animation: tkt-done 9s var(--ease) infinite; }

@keyframes tkt-pct {
  0%, 6% { --pnum: 0; }
  62% { --pnum: 74; }
  86%, 100% { --pnum: 100; }
}

@keyframes tkt-done {
  0%, 6% { --dnum: 0; }
  62% { --dnum: 3700; }
  86%, 100% { --dnum: 5000; }
}


/* --- platform tiles get their mark ---------------------------------------- */

.tile__icon {
  inline-size: 26px;
  block-size: 26px;
  color: var(--brand-300);
  margin-block-end: .35rem;
}


@media (prefers-reduced-motion: reduce) {
  .ticket__pct, .ticket__done { animation: none !important; }
  .ticket { --pnum: 74; --dnum: 3700; }
}


/* --- platform heading on the catalogue ------------------------------------ */
/*
   The reset makes every svg display:block, which pushed the mark onto its own
   line inside the heading. A flex row keeps the pair together.
*/

.plat-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -.03em;
}


/* --- landing hero v3: tangible, mobile-first ----------------------------- */

.hero {
  gap: 1.5rem;
  padding-block: 1.75rem 2.5rem;
}

.hero__copy {
  position: relative;
  z-index: 2;
  gap: .9rem;
  text-align: center;
  justify-items: center;
}

.hero__copy .lede { max-inline-size: 38ch; }

.hero__cta {
  display: grid;
  inline-size: 100%;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin-block-start: .25rem;
}

.hero__cta .btn { inline-size: 100%; min-block-size: 50px; }

.pills {
  justify-content: center;
  gap: .4rem;
  margin-block-start: .15rem;
}

.pills li {
  padding: .38rem .62rem;
  background: color-mix(in oklab, var(--s2) 82%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}

.platforms-strip {
  justify-content: center;
  margin-block-start: .35rem;
}

.hero-visual {
  position: relative;
  min-block-size: 410px;
  inline-size: min(100%, 430px);
  justify-self: center;
  isolation: isolate;
}

.hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 12% 1rem;
  block-size: 15%;
  border-radius: 50%;
  background: rgb(160 8 25 / .35);
  filter: blur(30px);
}

.hero-visual__halo {
  position: absolute;
  z-index: -2;
  inset: 7% 2% 0;
  border-radius: 45% 45% 38% 38%;
  background: radial-gradient(circle at 50% 45%, rgb(176 14 31 / .28), transparent 67%);
}

.hero-visual img {
  display: block;
  inline-size: 100%;
  block-size: 430px;
  object-fit: cover;
  object-position: 50% 49%;
  border-radius: 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  filter: saturate(.9) contrast(1.06);
}

.hero-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-inline-size: 156px;
  padding: .62rem .7rem;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 14px;
  background: rgb(16 10 12 / .84);
  box-shadow: 0 16px 35px rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .08);
  backdrop-filter: blur(12px);
}

.hero-float--order { inset: 21% 0 auto auto; }
.hero-float--refund { inset: auto auto 12% 0; }

.hero-float__icon {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  color: var(--brand-100);
  border-radius: 10px;
  background: rgb(200 18 31 / .15);
}

.hero-float__icon--good { color: var(--good); background: rgb(53 211 154 / .12); }
.hero-float__icon svg { inline-size: 17px; block-size: 17px; }
.hero-float span:nth-child(2) { display: grid; line-height: 1.35; }
.hero-float small { color: var(--ink-3); font-size: .63rem; }
.hero-float b { color: var(--ink); font-size: .78rem; font-weight: 600; }

.hero-float i {
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 5px rgb(245 165 36 / .1);
  animation: hero-live 1.8s ease-in-out infinite;
}

@keyframes hero-live { 50% { opacity: .45; transform: scale(.75); } }

@media (max-width: 420px) {
  .pubhead__in { gap: .45rem; }
  .pubnav__in { display: none; }
  .pubhead .btn--sm { padding-inline: .6rem; }
  h1.display { font-size: clamp(1.85rem, 9vw, 2.35rem); }
  .hero-visual { min-block-size: 380px; margin-block-start: -.35rem; }
  .hero-visual img { block-size: 400px; }
  .hero-float { min-inline-size: 145px; padding: .55rem .6rem; }
}

@media (min-width: 620px) {
  .hero__cta { grid-template-columns: auto auto; inline-size: auto; }
  .hero__cta .btn { inline-size: auto; min-inline-size: 180px; }
}

@media (min-width: 940px) {
  .hero { min-block-size: 680px; grid-template-columns: 1.05fr .95fr; gap: 2rem; padding-block: 3.5rem 4.25rem; }
  .hero__copy { text-align: start; justify-items: start; }
  .hero__copy .lede { max-inline-size: 48ch; }
  .pills, .platforms-strip { justify-content: flex-start; }
  .hero-visual { inline-size: min(100%, 500px); min-block-size: 565px; }
  .hero-visual img { block-size: 590px; }
  .hero-float--order { inset-inline-end: -1rem; }
  .hero-float--refund { inset-inline-start: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float i { animation: none; }
}


/* --- landing v4: the product is the visual --------------------------------
   Only the home page uses these classes. The first screen is deliberately
   compact on a phone and the mock panel is pure HTML: no hero image request. */

.home-hero {
  position: relative;
  overflow: clip;
  border-block-end: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 42% at 50% 14%, rgb(153 9 25 / .20), transparent 72%),
    linear-gradient(180deg, rgb(255 255 255 / .018), transparent 65%);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.home-hero .hero {
  position: relative;
  z-index: 1;
  gap: 1.75rem;
  padding-block: 1.7rem 1rem;
}

.home-hero .hero::before { display: none; }

.home-hero .hero__copy {
  gap: .85rem;
  text-align: start;
  justify-items: start;
}

.home-hero h1.display {
  max-inline-size: 13ch;
  font-size: clamp(2.15rem, 10.8vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.055em;
}

.home-hero h1.display em {
  color: var(--brand-100);
  box-shadow: none;
  white-space: nowrap;
}

.home-hero .hero__copy .lede {
  max-inline-size: 43ch;
  font-size: .96rem;
  line-height: 1.75;
}

.pill-badge {
  gap: .5rem;
  padding: .35rem .65rem;
  letter-spacing: .04em;
  text-transform: none;
  background: rgb(200 18 31 / .09);
  border: 1px solid rgb(232 64 78 / .18);
  box-shadow: none;
}

.pill-badge i,
.demo-live i {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgb(53 211 154 / .1);
}

.home-hero .hero__cta {
  inline-size: 100%;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin-block-start: .25rem;
}

.home-hero .hero__cta .btn {
  min-block-size: 52px;
  border-radius: 13px;
  font-size: .9rem;
}

.home-hero .hero__cta .btn svg { inline-size: 17px; block-size: 17px; }
[dir="rtl"] .home-hero .hero__cta .btn svg { transform: scaleX(-1); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--step--2);
}

.hero-trust li { display: inline-flex; align-items: center; gap: .35rem; }
.hero-trust svg { inline-size: 14px; block-size: 14px; color: var(--good); }

.product-demo {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 465px;
  justify-self: center;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 24px;
  background: #0d090b;
  box-shadow: 0 35px 80px -35px rgb(0 0 0 / .9), 0 24px 70px -45px rgb(200 18 31 / .9), inset 0 1px 0 rgb(255 255 255 / .08);
}

.product-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px 10% 30%;
  border-radius: 50%;
  background: rgb(181 14 30 / .2);
  filter: blur(45px);
}

.product-demo__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem;
  border-block-end: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent);
}

.product-demo__brand { display: flex; align-items: center; gap: .45rem; direction: ltr; }
.product-demo__brand > span { display: grid; place-items: center; inline-size: 27px; block-size: 27px; border-radius: 8px; color: white; background: var(--brand-500); }
.product-demo__brand svg { inline-size: 16px; block-size: 16px; }
.product-demo__brand b { font-size: .8rem; letter-spacing: -.03em; }
.product-demo__brand em { color: var(--brand-100); font-style: normal; }
.product-demo__balance { display: grid; text-align: end; line-height: 1.25; }
.product-demo__balance small { color: var(--ink-3); font-size: .56rem; }
.product-demo__balance b { font-size: .72rem; }
.product-demo__balance b span { color: var(--ink-3); font-size: .55rem; }

.product-demo__body { display: grid; gap: .72rem; padding: .9rem; }
.product-demo__title { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 600; }
.demo-live { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-3); font-size: .56rem; font-weight: 400; }

.demo-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.demo-platforms > span { display: grid; place-items: center; min-block-size: 42px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--s1); }
.demo-platforms > span.is-active { border-color: rgb(232 64 78 / .42); background: rgb(200 18 31 / .1); box-shadow: inset 0 -2px 0 var(--brand-300); }
.demo-platforms svg { inline-size: 18px; block-size: 18px; }

.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.demo-field { display: grid; gap: .2rem; min-inline-size: 0; padding: .62rem .7rem; border: 1px solid var(--line-soft); border-radius: 11px; background: #110c0e; }
.demo-field--wide { grid-column: 1 / -1; }
.demo-field small { color: var(--ink-3); font-size: .57rem; }
.demo-field > span { display: flex; align-items: center; gap: .4rem; overflow: hidden; color: var(--ink); font-size: .68rem; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.demo-field svg { inline-size: 15px; block-size: 15px; flex: none; }
.demo-field b { font-size: .72rem; }

.demo-order { display: grid; gap: .65rem; padding: .72rem; border: 1px solid rgb(232 64 78 / .15); border-radius: 13px; background: linear-gradient(135deg, rgb(200 18 31 / .08), rgb(255 255 255 / .018)); }
.demo-order__head { display: flex; align-items: center; justify-content: space-between; }
.demo-order__head > span:first-child { display: flex; align-items: baseline; gap: .35rem; }
.demo-order__head small { color: var(--ink-3); font-size: .57rem; }
.demo-order__head b { font-size: .68rem; }
.demo-order__head .badge { font-size: .56rem; }
.demo-order__progress { block-size: 5px; overflow: hidden; border-radius: 999px; background: var(--line); direction: ltr; }
.demo-order__progress i { display: block; inline-size: 74%; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-300), var(--live)); box-shadow: 0 0 14px rgb(245 165 36 / .35); }
.demo-order__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.demo-order__stats span { display: grid; gap: .1rem; }
.demo-order__stats small { color: var(--ink-3); font-size: .54rem; }
.demo-order__stats b { font-size: .7rem; }

.demo-refund {
  position: absolute;
  inset: auto -.35rem -1.4rem auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-inline-size: 185px;
  padding: .62rem .68rem;
  border: 1px solid rgb(53 211 154 / .22);
  border-radius: 13px;
  background: rgb(11 16 14 / .94);
  box-shadow: 0 16px 35px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
}

.demo-refund > span { display: grid; place-items: center; inline-size: 31px; block-size: 31px; flex: none; border-radius: 9px; color: var(--good); background: rgb(53 211 154 / .1); }
.demo-refund svg { inline-size: 16px; block-size: 16px; }
.demo-refund p { display: grid; line-height: 1.35; }
.demo-refund p b { font-size: .63rem; }
.demo-refund p small { color: var(--ink-3); font-size: .52rem; }
.demo-refund strong { margin-inline-start: auto; color: var(--good); font-size: .7rem; }

.hero-platforms {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding-block: 1.8rem .9rem;
  color: var(--ink-3);
}

.hero-platforms > span { display: none; }
.hero-platforms i { font-style: normal; }
.hero-platforms svg { inline-size: 20px; block-size: 20px; }
.hero-platforms small { font-size: .58rem; }

/* Give the remainder of the landing page a clearer, calmer rhythm. */
.home-hero + .wrap { position: relative; z-index: 3; margin-block-start: 1.5rem; }
.proof { border-radius: 18px; background: transparent; gap: .45rem; border: 0; box-shadow: none; }
.proof__item { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--s1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
.proof__item b { color: var(--ink); }
.proof__item:first-child b { color: var(--brand-100); }
.sec { padding-block: clamp(2.8rem, 8vw, 5.5rem); }
.sec__head { margin-block-end: 1.4rem; }
.feat, .steps li, .tile { background: var(--s1); }
.feat { grid-template-columns: auto 1fr; column-gap: .75rem; }
.feat h3, .feat p { grid-column: 2; }
.feat__icon { grid-row: 1 / span 2; }
.band { border-color: rgb(232 64 78 / .22); background: radial-gradient(circle at 15% 0, rgb(200 18 31 / .17), transparent 50%), var(--s1); }

@media (max-width: 420px) {
  .home-hero .hero { padding-block-start: 1.25rem; }
  .home-hero h1.display { font-size: clamp(2rem, 10.5vw, 2.6rem); }
  .home-hero .hero__copy .lede { font-size: .88rem; }
  .hero-trust { gap: .45rem .7rem; }
  .product-demo__body { padding: .72rem; }
  .demo-refund { inset-inline-end: -.15rem; }
}

@media (min-width: 620px) {
  .home-hero .hero__cta { inline-size: auto; grid-template-columns: auto auto; }
  .home-hero .hero__cta .btn { min-inline-size: 190px; }
  .hero-platforms > span { display: inline; font-size: var(--step--2); }
}

@media (min-width: 940px) {
  .home-hero .hero { min-block-size: 630px; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 4.5rem; padding-block: 4rem 2.5rem; }
  .home-hero h1.display { font-size: clamp(3.2rem, 4.4vw, 4.5rem); }
  .home-hero .hero__copy .lede { font-size: 1.05rem; }
  .product-demo { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
  [dir="rtl"] .product-demo { transform: perspective(1200px) rotateY(3deg) rotateX(1deg); }
  .product-demo__body { padding: 1.1rem; }
  .hero-platforms { padding-block: 0 1.3rem; }
  .feat { grid-template-columns: auto 1fr; }
}


/* --- landing v5: SCO / Scorpion identity -------------------------------- */

.home-hero {
  background:
    radial-gradient(70% 44% at 84% 42%, rgb(182 10 29 / .18), transparent 70%),
    linear-gradient(180deg, #080506, #0b0608 70%, #080506);
}

.home-hero::before {
  opacity: .13;
  background-size: 72px 72px;
}

.home-hero .hero { padding-block-end: 0; }

.scorpion-hero {
  position: relative;
  min-block-size: 470px;
  inline-size: min(100%, 470px);
  justify-self: center;
  isolation: isolate;
}

.scorpion-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #080506 0, transparent 13%, transparent 76%, #080506 100%);
}

.scorpion-hero img {
  display: block;
  inline-size: 100%;
  block-size: 500px;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(.92) contrast(1.04);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%);
}

.scorpion-hero__word {
  position: absolute;
  z-index: -1;
  inset: 4% auto auto 50%;
  translate: -50% 0;
  color: transparent;
  font: 800 clamp(5.8rem, 30vw, 9rem)/1 var(--font);
  letter-spacing: -.09em;
  -webkit-text-stroke: 1px rgb(232 64 78 / .16);
  direction: ltr;
}

.scorpion-order {
  position: absolute;
  z-index: 3;
  inset: auto .3rem 1.1rem;
  display: grid;
  gap: .55rem;
  padding: .75rem;
  border: 1px solid rgb(232 64 78 / .2);
  border-radius: 15px;
  background: rgb(13 8 10 / .88);
  box-shadow: 0 18px 45px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .08);
  backdrop-filter: blur(14px);
}

.scorpion-order__head,
.scorpion-order__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.scorpion-order__head { color: var(--ink-2); font-size: .62rem; }
.scorpion-order__head > span { display: inline-flex; align-items: center; gap: .4rem; }
.scorpion-order__head i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgb(53 211 154 / .1); }
.scorpion-order__head b { color: var(--ink-3); font-size: .62rem; }
.scorpion-order > p { display: flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 600; }
.scorpion-order > p svg { inline-size: 16px; block-size: 16px; }
.scorpion-order__track { block-size: 4px; overflow: hidden; border-radius: 99px; background: var(--line); direction: ltr; }
.scorpion-order__track i { display: block; inline-size: 74%; block-size: 100%; background: linear-gradient(90deg, var(--brand-300), #ff4b36); }
.scorpion-order__foot small { display: block; color: var(--ink-3); font-size: .52rem; }
.scorpion-order__foot b { display: block; font-size: .65rem; }
.scorpion-order__foot .badge { font-size: .54rem; }

.hero-platforms {
  border-block-start: 1px solid rgb(255 255 255 / .055);
  background: rgb(0 0 0 / .18);
}

.sco-story {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.sco-story::before {
  content: "";
  position: absolute;
  inset: 12% -25% auto auto;
  inline-size: 75%;
  aspect-ratio: 1;
  border: 1px solid rgb(232 64 78 / .07);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgb(232 64 78 / .025), 0 0 0 56px rgb(232 64 78 / .018);
  pointer-events: none;
}

.sco-story__mark {
  position: relative;
  display: grid;
  place-content: center;
  min-block-size: 190px;
  overflow: hidden;
  border: 1px solid rgb(232 64 78 / .16);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 80%, rgb(176 9 28 / .22), transparent 58%), var(--s1);
  text-align: center;
}

.sco-story__mark::after {
  content: "";
  position: absolute;
  inline-size: 92px;
  block-size: 92px;
  inset: auto -18px -18px auto;
  border: 16px solid rgb(232 64 78 / .08);
  border-inline-start-color: transparent;
  border-radius: 50%;
  rotate: -24deg;
}

.sco-story__mark b { color: var(--brand-100); font-size: clamp(3.8rem, 20vw, 6rem); line-height: .9; letter-spacing: -.1em; direction: ltr; text-shadow: 0 0 38px rgb(200 18 31 / .32); }
.sco-story__mark span { margin-block-start: .7rem; color: var(--ink-3); font-size: .6rem; letter-spacing: .38em; direction: ltr; }
.sco-story__copy { position: relative; display: grid; gap: .7rem; }
.sco-story__copy .lede { font-size: .92rem; }
.sco-traits { display: grid; gap: .5rem; margin-block-start: .4rem; }
.sco-traits span { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-block-end: 1px solid var(--line-soft); color: var(--ink-2); font-size: .75rem; }
.sco-traits i { color: var(--brand-100); font-style: normal; font-size: .58rem; font-variant-numeric: tabular-nums; direction: ltr; }

.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  inset: 15px 14px 15px auto;
  inline-size: 1px;
  background: linear-gradient(var(--brand-300), rgb(200 18 31 / .08));
}
.steps li { margin-inline-start: 1.2rem; border-color: rgb(232 64 78 / .12); }
.steps__n { position: relative; z-index: 1; border-radius: 50%; }

.api-scorpion {
  position: relative;
  min-block-size: 480px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-inline: 0;
  border-block: 1px solid var(--line-soft);
}

.api-scorpion > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 67% 50%;
  filter: saturate(.88) contrast(1.08);
}

.api-scorpion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #080506 0, rgb(8 5 6 / .08) 25%, rgb(8 5 6 / .22) 62%, #080506 100%), linear-gradient(90deg, rgb(8 5 6 / .95), rgb(8 5 6 / .2) 80%);
}

.api-scorpion__copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: .75rem;
  inline-size: calc(100% - 2rem);
  max-inline-size: 470px;
  margin-inline: auto;
  padding: 1.1rem;
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 18px;
  background: rgb(8 5 6 / .72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
  backdrop-filter: blur(9px);
}

.api-scorpion__copy code { inline-size: 100%; overflow: hidden; padding: .72rem; border: 1px solid rgb(232 64 78 / .15); border-radius: 10px; background: rgb(0 0 0 / .36); color: var(--good); font-size: .66rem; direction: ltr; white-space: nowrap; text-overflow: ellipsis; }
.api-scorpion__copy code i { color: var(--brand-100); font-style: normal; }

@media (max-width: 420px) {
  .scorpion-hero { min-block-size: 430px; }
  .scorpion-hero img { block-size: 460px; }
  .sco-story { padding-block-start: 3.5rem; }
  .api-scorpion { min-block-size: 450px; }
}

@media (min-width: 700px) {
  .sco-story { grid-template-columns: .8fr 1.2fr; gap: 3rem; }
  .steps::before { display: none; }
  .steps li { margin-inline-start: 0; }
  .api-scorpion { border: 1px solid var(--line-soft); border-radius: 28px; }
  .api-scorpion__copy { margin-inline-start: 5%; margin-inline-end: auto; }
  [dir="rtl"] .api-scorpion__copy { margin-inline-start: auto; margin-inline-end: 5%; }
}

@media (min-width: 940px) {
  .home-hero .hero { grid-template-columns: .92fr 1.08fr; gap: 1.5rem; }
  .scorpion-hero { inline-size: min(100%, 590px); min-block-size: 610px; }
  .scorpion-hero img { block-size: 650px; object-position: 50% 62%; }
  .scorpion-hero__word { font-size: 11rem; }
  .scorpion-order { inset-inline: 10% -2%; inset-block-end: 2.2rem; }
  .sco-story { grid-template-columns: .75fr 1.25fr; gap: 5rem; }
  .sco-story__mark { min-block-size: 320px; }
  .api-scorpion { min-block-size: 560px; }
  .api-scorpion__copy { padding: 1.5rem; }
}


/* --- landing v6: distinct scenes, matching the reference's page rhythm --- */

.home-scene {
  position: relative;
  isolation: isolate;
  clip-path: inset(0 -100vmax);
}

.home-scene--story {
  margin-block-start: 2.75rem;
  padding-block: 4.25rem;
  box-shadow: 0 0 0 100vmax #0b0709;
  background:
    linear-gradient(90deg, transparent, rgb(200 18 31 / .05), transparent),
    radial-gradient(circle at 18% 50%, rgb(200 18 31 / .11), transparent 34%);
}

.home-advantages {
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #070506;
}

.home-advantages::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -100vmax;
  background:
    radial-gradient(42% 50% at 50% 55%, rgb(120 7 20 / .13), transparent 72%),
    linear-gradient(135deg, transparent 48%, rgb(232 64 78 / .035) 49%, rgb(232 64 78 / .035) 51%, transparent 52%);
  background-size: auto, 120px 120px;
}

.home-advantages .sec__head { margin-inline: auto; text-align: center; justify-items: center; }
.home-advantages .grid { gap: .75rem; }
.home-advantages .feat {
  position: relative;
  overflow: hidden;
  grid-template-columns: auto 1fr;
  border-color: rgb(232 64 78 / .2);
  background: linear-gradient(145deg, rgb(200 18 31 / .09), rgb(15 10 12 / .96));
}
.home-advantages .feat::after { content: ""; position: absolute; inset: auto -25% -55% 20%; block-size: 80%; border: 1px solid rgb(232 64 78 / .11); rotate: 45deg; }

.home-services-scene {
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #0d080b;
  background: radial-gradient(60% 75% at 100% 45%, rgb(135 8 23 / .12), transparent 70%);
}

.home-services-scene .tiles { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.home-services-scene .tile { min-block-size: 145px; align-content: end; overflow: hidden; border-color: rgb(255 255 255 / .07); background: linear-gradient(155deg, rgb(255 255 255 / .04), rgb(10 7 8 / .92)); }
.home-services-scene .tile::before { content: ""; position: absolute; inset: -45% -25% auto auto; inline-size: 100px; aspect-ratio: 1; border-radius: 50%; background: rgb(200 18 31 / .1); filter: blur(18px); }
.home-services-scene .tile { position: relative; }
.home-services-scene .tile__icon { inline-size: 34px; block-size: 34px; }

.home-roadmap {
  min-block-size: 680px;
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #070405;
}

.home-roadmap::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -100vmax;
  background:
    linear-gradient(90deg, #070405 5%, rgb(7 4 5 / .76) 45%, rgb(7 4 5 / .22), #070405 96%),
    url('/assets/scorpion-hero-v1.jpg') 82% 62% / min(560px, 82vw) auto no-repeat;
  opacity: .7;
}

.home-roadmap::after { content: ""; position: absolute; z-index: -1; inset: 0 -100vmax; background: linear-gradient(to bottom, #070405, transparent 18%, transparent 78%, #070405); }
.home-roadmap .sec__head { max-inline-size: 430px; }
.home-roadmap .steps { max-inline-size: 620px; }
.home-roadmap .steps li { background: rgb(15 9 12 / .82); backdrop-filter: blur(10px); }

.home-prices-scene {
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #0c080a;
  background: linear-gradient(180deg, rgb(200 18 31 / .035), transparent 30%);
}
.home-prices-scene .card { border-color: rgb(232 64 78 / .14); background: rgb(9 6 7 / .66); box-shadow: 0 30px 70px -45px rgb(200 18 31 / .45), inset 0 1px 0 rgb(255 255 255 / .06); }
.home-prices-scene .ptable tr { transition: background var(--fast) var(--ease); }
.home-prices-scene .ptable tbody tr:hover { background: rgb(200 18 31 / .045); }

.api-scorpion { clip-path: none; margin-block: 4rem; }

.home-faq {
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #090609;
  background:
    radial-gradient(45% 70% at 50% 100%, rgb(200 18 31 / .1), transparent 75%),
    linear-gradient(135deg, transparent 47%, rgb(255 255 255 / .015) 48%, rgb(255 255 255 / .015) 49%, transparent 50%);
  background-size: auto, 90px 90px;
}

.home-faq .sec__head { margin-inline: auto; text-align: center; justify-items: center; }
.home-faq__grid { display: grid; gap: .55rem; margin-block-end: 1rem; }
.home-faq details { border: 1px solid var(--line-soft); border-radius: 12px; background: rgb(17 11 14 / .78); }
.home-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; color: var(--ink); font-size: .78rem; font-weight: 550; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary i { position: relative; inline-size: 14px; block-size: 14px; flex: none; }
.home-faq summary i::before, .home-faq summary i::after { content: ""; position: absolute; inset: 50% 0 auto; block-size: 1px; background: var(--brand-100); transition: rotate var(--fast) var(--ease); }
.home-faq summary i::after { rotate: 90deg; }
.home-faq details[open] summary i::after { rotate: 0deg; }
.home-faq details p { padding: 0 1rem 1rem; color: var(--ink-2); font-size: .75rem; line-height: 1.75; }

.home-community {
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax #070405;
}
.home-community .band { position: relative; overflow: hidden; min-block-size: 300px; align-content: center; border-color: rgb(232 64 78 / .18); background: radial-gradient(circle at 80% 20%, rgb(200 18 31 / .25), transparent 48%), #10090c; }
.home-community .band > *:not(.home-community__tail) { position: relative; z-index: 1; }
.home-community__tail { position: absolute; inline-size: 260px; block-size: 260px; inset: -90px -70px auto auto; border: 34px solid rgb(232 64 78 / .08); border-inline-start-color: transparent; border-block-end-color: transparent; border-radius: 50%; rotate: 32deg; }
.home-community__tail::after { content: ""; position: absolute; inline-size: 42px; block-size: 70px; inset: 170px 12px auto auto; border-radius: 80% 20% 80% 20%; background: rgb(232 64 78 / .1); rotate: 28deg; }

@media (min-width: 700px) {
  .home-services-scene .tiles { grid-template-columns: repeat(3, 1fr); }
  .home-services-scene .tile:nth-child(1), .home-services-scene .tile:nth-child(4) { min-block-size: 190px; }
  .home-faq__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 940px) {
  .home-scene--story { padding-block: 6rem; }
  .home-advantages { padding-block: 7rem; }
  .home-advantages .grid { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 2.2rem 1rem; }
  .home-advantages .feat { display: grid; grid-template-columns: 1fr; place-content: center; justify-items: center; aspect-ratio: 1; margin-inline: -.45rem; padding: 2.4rem 2rem; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); text-align: center; border: 0; box-shadow: none; }
  .home-advantages .feat:nth-child(even) { translate: 0 42px; }
  .home-advantages .feat h3, .home-advantages .feat p { grid-column: 1; }
  .home-advantages .feat__icon { grid-row: auto; }
  .home-advantages .feat p { max-inline-size: 23ch; font-size: .68rem; line-height: 1.55; }
  .home-services-scene { padding-block: 7rem; }
  .home-services-scene .tiles { grid-template-columns: repeat(6, 1fr); }
  .home-services-scene .tile { min-block-size: 200px; }
  .home-services-scene .tile:nth-child(1), .home-services-scene .tile:nth-child(4) { min-block-size: 245px; translate: 0 -22px; }
  .home-roadmap { min-block-size: 780px; padding-block: 7rem; }
  .home-roadmap .steps { grid-template-columns: repeat(3, 1fr); max-inline-size: 760px; }
  .home-roadmap .steps li:nth-child(2) { translate: 0 80px; }
  .home-roadmap .steps li:nth-child(3) { translate: 0 160px; }
  .home-prices-scene, .home-faq, .home-community { padding-block: 7rem; }
}