/* Kurdify landing extras: layered ON TOP of site.css, never replacing it.
   Adds the minimal sun-bloom intro, the aurora hero light, the real-listings
   ticker, three Kurdistan photo bands with parallax, gentle scroll snapping
   and the mega-landing sections (audience trio, prices strip, Kurdify Credit,
   pledge, growth band, ranking teaser, education/freelance duo, signup CTA,
   giveaway). Everything uses site.css variables so the light and dark themes
   both work untouched. */

/* scroll-snap removed: the photo bands were trapping scroll on mobile */
html{ scroll-snap-type:none }
.kband{ scroll-snap-align:none }

/* ---------- sun-bloom intro (#pre gets .pre-sun; base #pre rules in site.css)
   The gold Kurdify sun scales/blooms in over ~1s, then extras.js calls
   window.__kxPreFinish. CSS-ONLY FAILSAFE: the overlay fades itself out at
   1.5s (animation below, overriding site.css's 40s one) so the page can
   never stay hidden even if every script fails. site.css also gives
   .pre-sun icon sizing for other pages, so the container overrides it. */
#pre.pre-sun{
  width:auto; height:auto; margin:0; color:inherit;
  display:grid; place-items:center;
  /* CSS-only failsafe, pushed past the 1.85s JS finish so the orb has time to play */
  animation:kxPreAway .7s ease 2.3s forwards;
}
/* The orb blooms in from a soft blur + scale, holds, then on .done dissolves out
   through blur again - a slow "focus" both directions. */
.pre-sun .pl-orb{ animation:plBloomIn 1s cubic-bezier(.16,1,.3,1) both }
#pre.pre-sun.done{ opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease }
#pre.pre-sun.done .pl-orb{ animation:plBloomOut .6s ease forwards }
@keyframes kxPreAway{ to{ opacity:0; visibility:hidden } }
@keyframes plBloomIn{ from{ opacity:0; transform:scale(.72); filter:blur(22px) } to{ opacity:1; transform:scale(1); filter:blur(0) } }
@keyframes plBloomOut{ to{ opacity:0; transform:scale(1.12); filter:blur(18px) } }
/* Sun orb, ported from the app (:4660) so the marketing intro matches it:
   pulsing glow, two ripples, two counter-spinning rings, and a spinning,
   pulsing gold sun. Loops until __kxPreFinish (or a failsafe) clears #pre. */
.pl-orb{position:relative;width:150px;height:150px;display:grid;place-items:center}
/* rotating gold arc sweeping the orb - a premium progress indicator */
.pl-orb::before{content:"";position:absolute;inset:-3%;border-radius:50%;z-index:1;opacity:.85;
  background:conic-gradient(from 0deg, transparent 0 60%, color-mix(in oklab,var(--gold) 75%,transparent) 80%, transparent 90%);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%);
          mask:radial-gradient(circle, transparent 58%, #000 60%);
  animation:plspin 2.4s cubic-bezier(.6,.1,.4,.9) infinite}
.pl-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--gold) 42%,transparent),transparent 62%);animation:plGlow 1.7s ease-in-out infinite;z-index:0}
.pl-ripple{position:absolute;inset:8%;border-radius:50%;border:1.5px solid color-mix(in oklab,#e23b34 60%,transparent);opacity:0;z-index:1;animation:plRipple 2.1s ease-out infinite}
.pl-ripple2{animation-delay:1.05s;border-color:color-mix(in oklab,var(--green) 55%,transparent)}
.pl-ring{position:absolute;inset:6%;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--gold);border-inline-end-color:color-mix(in oklab,#e23b34 55%,transparent);z-index:2;animation:plspin 1.05s linear infinite}
.pl-ring2{inset:20%;border-top-color:var(--green);border-inline-end-color:color-mix(in oklab,var(--green) 30%,transparent);animation-duration:1.7s;animation-direction:reverse;opacity:.7}
.pl-sun{position:relative;z-index:3;width:52px;height:52px;color:var(--gold);animation:plspin 3.4s linear infinite,plPulse 1.7s ease-in-out infinite;filter:drop-shadow(0 0 16px color-mix(in oklab,var(--gold) 60%,transparent))}
@keyframes plspin{to{transform:rotate(360deg)}}
@keyframes plGlow{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.95;transform:scale(1.08)}}
@keyframes plRipple{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
@keyframes plPulse{0%,100%{filter:drop-shadow(0 0 12px color-mix(in oklab,var(--gold) 45%,transparent))}50%{filter:drop-shadow(0 0 22px color-mix(in oklab,var(--gold) 80%,transparent))}}
/* ---------- .pre-sun override: the Kurdistan flag as a loading orb ----------
   Rebuilt 2026-07-28. The flag reads outward from the centre: the 21-ray gold
   sun, then a pale band, then green below and red above, all of it turning at
   different speeds so the three colours cross each other instead of sitting
   still. Everything animates transform/opacity/filter only, every colour comes
   from the theme variables so light mode works untouched, and the whole thing
   still clears itself through the same failsafes. */
.pre-sun .pl-orb{ width:170px; height:170px }

/* faint full circle behind everything, so the arcs read as parts of one dial */
.pre-sun .pl-orb::after{content:"";position:absolute;inset:2%;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--gold) 14%,transparent);z-index:1}

/* outer dial: one continuous red -> pale -> green sweep, masked to a hairline ring */
.pre-sun .pl-orb::before{ inset:-2%; opacity:.9;
  background:conic-gradient(from 0deg,
    transparent 0 6%,
    color-mix(in oklab,var(--red) 85%,transparent) 20%,
    color-mix(in oklab,var(--text) 70%,transparent) 34%,
    color-mix(in oklab,var(--green) 85%,transparent) 48%,
    transparent 64% 100%);
  -webkit-mask:radial-gradient(circle, transparent 88%, #000 90%);
          mask:radial-gradient(circle, transparent 88%, #000 90%);
  animation:plspin 2.8s cubic-bezier(.45,.05,.35,1) infinite }

/* red arc on top, green arc counter-turning under it, pale band between them */
.pre-sun .pl-ring{ inset:9%; border-width:2.5px;
  border-top-color:var(--red);
  border-inline-end-color:color-mix(in oklab,var(--red) 35%,transparent);
  border-bottom-color:transparent; border-inline-start-color:transparent;
  animation:plspin 2.2s cubic-bezier(.5,0,.3,1) infinite }
.pre-sun .pl-ring2{ display:block; inset:19%; border-width:2.5px; opacity:1;
  border-top-color:var(--green);
  border-inline-end-color:color-mix(in oklab,var(--green) 35%,transparent);
  border-bottom-color:transparent; border-inline-start-color:transparent;
  animation:plspin 3s cubic-bezier(.5,0,.3,1) infinite reverse }
.pre-sun .pl-ring3{ inset:14%; border-width:1px;
  border-color:color-mix(in oklab,var(--text) 26%,transparent);
  border-bottom-color:transparent;
  animation:plspin 5.5s linear infinite }

/* pale light sweeping the gap between the arcs: the flag's white band, moving */
.pre-sun .pl-sweep{position:absolute;inset:11%;border-radius:50%;z-index:2;opacity:.5;
  background:conic-gradient(from 0deg, transparent 0 72%, color-mix(in oklab,var(--text) 55%,transparent) 88%, transparent 96%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 66%, #000 82%, transparent 86%);
          mask:radial-gradient(circle, transparent 62%, #000 66%, #000 82%, transparent 86%);
  animation:plspin 4.4s linear infinite}

/* red and green ripples breathing outward from the sun, offset half a beat */
.pre-sun .pl-ripple,.pre-sun .pl-ripple2{ display:block; inset:24%;
  border-color:color-mix(in oklab,var(--red) 55%,transparent);
  animation:plRipple 3.2s cubic-bezier(.22,1,.36,1) infinite }
.pre-sun .pl-ripple2{ animation-delay:1.6s; border-color:color-mix(in oklab,var(--green) 55%,transparent) }

/* the sun itself: 21 rays, turning slowly, breathing in gold */
.pre-sun .pl-sun{ width:66px; height:66px;
  animation:plspin 9s linear infinite, plPulse 3.2s ease-in-out infinite }
.pre-sun .pl-glow{ inset:-14%;
  background:radial-gradient(circle,
    color-mix(in oklab,var(--gold) 40%,transparent),
    color-mix(in oklab,var(--gold) 8%,transparent) 45%,
    transparent 68%);
  animation:plGlow 3.2s ease-in-out infinite }

@media (prefers-reduced-motion:reduce){
  .pl-glow,.pl-ripple,.pl-ring2{ animation:none }
  .pl-sun{ animation:plspin 2s linear infinite }
  #pre.pre-sun{ animation-delay:.4s }
  /* keep the flag colours, drop the spinning: a still dial with one slow sun */
  .pre-sun .pl-orb::before,.pre-sun .pl-sweep,.pre-sun .pl-ring,
  .pre-sun .pl-ring2,.pre-sun .pl-ring3,
  .pre-sun .pl-ripple,.pre-sun .pl-ripple2{ animation:none }
  .pre-sun .pl-ripple,.pre-sun .pl-ripple2{ opacity:.35 }
  .pre-sun .pl-sun{ animation:plspin 12s linear infinite }
  .pre-sun .pl-orb{ animation:none }
}

/* ---------- hero: quiet living light instead of the photo blur ----------
   Two soft auras in brand gold and green drift very slowly behind the copy.
   Transform-only animation, oversized layer so edges never show. */
/* Toned down: the aurora blobs read as a muddy glow behind the headline. Kept as
   a whisper of brand warmth in the corners only, away from the text. */
.hero::before{
  inset:-22%;
  background:
    radial-gradient(34% 26% at 84% 16%, rgba(224,182,74,.07), transparent 72%),
    radial-gradient(30% 24% at 12% 84%, rgba(47,191,135,.05), transparent 72%);
  opacity:1;
  animation:kxAurora 40s ease-in-out infinite alternate;
}
@keyframes kxAurora{
  from{ transform:translate3d(-2.5%,-2%,0) scale(1) }
  to{ transform:translate3d(2.5%,3%,0) scale(1.09) }
}
html[data-theme="light"] .hero::before{ opacity:.55 }
@media (prefers-reduced-motion:reduce){ .hero::before{ animation:none } }

/* ---------- ticker of real listings ---------- */
.ticker{
  margin-block-start:clamp(2.4rem,5vw,3.6rem);
  background:var(--panel);
  padding-block:12px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tk-track{ display:flex; align-items:center; width:max-content }
@media (prefers-reduced-motion:no-preference){
  .tk-track{ animation:kxtk 60s linear infinite }
  [dir="rtl"] .tk-track{ animation-name:kxtkR }
}
@keyframes kxtk{ to{ transform:translateX(-50%) } }
@keyframes kxtkR{ to{ transform:translateX(50%) } }
.tk{ display:inline-flex; align-items:baseline; gap:8px; flex:none; margin-inline-end:clamp(26px,4vw,44px) }
.tk::before{
  content:""; align-self:center; flex:none;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.75;
}
.tk b{ font-weight:700; font-size:.9rem; color:var(--text) }
.tk i{ font-style:normal; font-size:.78rem; color:var(--muted) }

/* ---------- Kurdistan photo bands ---------- */
.kband{
  position:relative;
  height:70vh; min-height:400px;
  overflow:clip;
}
.kband img{
  position:absolute; left:0; top:-13%;
  width:100%; height:126%;
  object-fit:cover;
  will-change:transform;
}
.kband-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(8,14,17,.5)),
    linear-gradient(to bottom,
      var(--bg) 0%, rgba(8,14,17,.06) 30%,
      rgba(8,14,17,.34) 68%, var(--bg) 100%);
}
.kband-cap{
  position:absolute; inset-inline:0; bottom:13%;
  padding-inline:clamp(20px,5vw,48px);
  text-align:center;
}
.kband-line::before{
  content:""; display:block;
  width:46px; height:2px; border-radius:2px;
  margin:0 auto 16px;
  background:var(--gold);
  box-shadow:0 0 14px rgba(224,182,74,.8);
}
.kband-line{
  margin:0;
  text-align:center;
  font-weight:800;
  font-size:clamp(1.9rem, 6vw, 3.6rem);
  line-height:1.15;
  color:#f6fbf9;
  text-shadow:0 4px 44px rgba(0,0,0,.72), 0 1px 10px rgba(0,0,0,.55);
  text-wrap:balance;
  opacity:0; transform:translateY(40px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.kband.kb-in .kband-line{ opacity:1; transform:none }
.kband-sub{
  max-width:40rem; margin:.9rem auto 0;
  color:rgba(246,251,249,.86);
  font-size:clamp(.95rem, 2.4vw, 1.2rem);
  line-height:1.55; font-weight:500;
  text-shadow:0 2px 22px rgba(0,0,0,.66);
  text-wrap:pretty;
  opacity:0; transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1) .14s, transform 1s cubic-bezier(.16,1,.3,1) .14s;
}
.kband.kb-in .kband-sub{ opacity:1; transform:none }
.kband-credit{
  position:absolute; bottom:12px; inset-inline-end:14px;
  font-size:.66rem; letter-spacing:.02em;
  color:rgba(234,244,242,.75);
  background:rgba(11,20,24,.52);
  padding:4px 11px; border-radius:100px;
}
@media (prefers-reduced-motion:reduce){
  .kband-line{ opacity:1; transform:none; transition:none }
  .kband-sub{ opacity:1; transform:none; transition:none }
  .kband img{ transform:none !important }
}

/* ---------- feature cards: icon beside the title, no floating gap ----------
   The old layout parked the icon at the top corner with dead space beneath
   it on short cards; this keeps every card compact and visually equal. */
.grid .fcard{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-content:start; height:auto }
.grid .fcard .f-ic{ grid-row:span 2; margin-bottom:0; align-self:start }
.grid .fcard h3{ margin:0; align-self:center }
.grid .fcard p{ grid-column:2; margin:0 }
/* Mocks (countdown, ladder, mini-cards, bars) sit on their own full-width row below the
   icon+text, pushed to the card bottom, so they never land in the narrow icon column and
   squeeze the copy. */
.grid .fcard .f-mock{ grid-column:1 / -1; margin-top:auto; padding-top:1.1rem }

/* free callout used in the merged platform and rewards sections */
.kx-free{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:1.1rem auto 0; max-width:60ch;
  color:var(--green); font-weight:700; font-size:.95rem;
  text-wrap:balance; text-align:center;
}
.kx-free svg{ width:16px; height:16px; flex:none }

/* ============================================================
   MEGA LANDING SECTIONS (2026-07-11)
   ============================================================ */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* shared coming-soon badge (PLAN 3.4) */
.soon-badge{display:inline-block;padding:.15em .55em;border-radius:999px;
background:rgba(224,182,74,.16);color:#e0b64a;font-size:.72em;font-weight:700;
letter-spacing:.03em;vertical-align:middle;white-space:nowrap}

/* ---------- audience trio router ---------- */
.trio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:860px){ .trio-grid{ grid-template-columns:1fr } }
.trio-card{
  --accent:var(--gold);
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  padding:1.7rem 1.5rem 1.4rem; border-radius:20px;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%),
    var(--panel);
  border:1px solid var(--line2);
  color:var(--text); text-decoration:none; overflow:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}
/* per-card accent: users=gold, business=green, investors=mixed (default gold) */
.trio-card:nth-child(2){ --accent:var(--green) }
/* soft glow that rises on hover */
.trio-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 120%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%);
  opacity:0; transition:opacity .3s ease;
}
.trio-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 60%,var(--line2));
  box-shadow:0 20px 50px -18px color-mix(in srgb,var(--accent) 45%,#000) }
.trio-card:hover::before{ opacity:1 }
.trio-card::after{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 30%,var(--gold)));
  opacity:.9;
}
.trio-ic{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
  background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
  transition:transform .28s cubic-bezier(.22,1,.36,1) }
.trio-card:hover .trio-ic{ transform:scale(1.08) rotate(-3deg) }
.trio-ic svg{ width:27px; height:27px }
.trio-card h3{ margin:.15rem 0 0; font-size:1.18rem; letter-spacing:-.01em }
.trio-card p{ margin:0; color:var(--muted); font-size:.93rem; line-height:1.6; flex:1 }
.trio-go{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--accent); min-height:44px }
.trio-go svg{ width:16px; height:16px; transition:transform .2s ease }
[dir="ltr"] .trio-go svg{ transform:scaleX(-1) }
.trio-card:hover .trio-arrow{ transform:translateX(-4px) }
[dir="ltr"] .trio-card:hover .trio-arrow{ transform:scaleX(-1) translateX(4px) }
.trio-go + .trio-go{ margin-top:-14px }
/* Two links in the same card (investors/sponsors) were reading as one crammed row: block
   default flow with only a text-node space between them. Give them a real flex gap and undo
   the single-link negative margin hack, which doesn't apply here. */
.trio-links{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:.9rem }
.trio-links .trio-go + .trio-go{ margin-top:0 }
@media (prefers-reduced-motion:reduce){ .trio-card,.trio-ic,.trio-arrow{ transition:none } .trio-card:hover{ transform:none } }

/* ---------- live prices strip ---------- */
.px-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:960px){ .px-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .px-grid{ grid-template-columns:1fr } }
.px-card{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.15rem 1.2rem; border-radius:16px;
  background:var(--panel); border:1px solid var(--line2);
  min-width:0;
}
.px-top{ display:flex; align-items:center; gap:10px }
.px-ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:rgba(224,182,74,.13); color:var(--gold) }
.px-ic svg{ width:19px; height:19px }
.px-name{ font-weight:800; font-size:.98rem }
.px-tag{ margin-inline-start:auto; flex:none }
.px-live{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--green) }
.px-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px rgba(47,191,135,.9); animation:pxPulse 1.8s ease-in-out infinite }
@keyframes pxPulse{ 50%{ opacity:.35 } }
.px-val{ font-size:1.5rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; min-height:1.9rem }
.px-val .px-skel{
  display:inline-block; width:96px; height:1.15em; border-radius:7px; vertical-align:middle;
  background:linear-gradient(90deg, var(--line) 25%, var(--line2) 50%, var(--line) 75%);
  background-size:200% 100%; animation:pxSkel 1.2s linear infinite;
}
@keyframes pxSkel{ to{ background-position:-200% 0 } }
.px-err{ font-size:.9rem; font-weight:600; color:var(--muted) }
.px-sub{ margin:0; font-size:.82rem; color:var(--muted) }
.px-sample .px-val{ opacity:.75 }
@media (prefers-reduced-motion:reduce){ .px-live::before,.px-val .px-skel{ animation:none } }

/* ---------- Kurdify Credit ---------- */
/* Section gets its own soft glow band (matches .gp-band's treatment elsewhere) so the
   heading sits on something instead of the flat page background, and its own top
   breathing room independent of the divider above it. */
#credit{
  position:relative; border-radius:24px; padding-top:.6rem; padding-bottom:.6rem;
  background:
    radial-gradient(65% 100% at 50% 0%, color-mix(in oklab,var(--gold) 7%,transparent), transparent 65%);
}
#credit .s-head{ padding-top:.4rem }
/* Kurdify Credit steps: a value-flow rail. The numbered nodes are stations on an
   animated gold->green line that carries value earn -> convert -> spend. */
.cr-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:crs }
@media (max-width:860px){ .cr-steps{ grid-template-columns:1fr; gap:16px } }
.cr-step{
  position:relative; overflow:hidden; padding:1.75rem 1.5rem 1.6rem; border-radius:18px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--panel) 55%,var(--panel2)), var(--panel));
  border:1px solid var(--line2);
  box-shadow:0 1px 0 color-mix(in oklab,#fff 6%,transparent) inset;
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
}
/* top accent bar: gold -> gold/green blend -> green across the 3-step earn/convert/spend
   flow, so the narrative reads at a glance before anyone reads the copy */
.cr-step::after{ content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold)) }
.cr-step:nth-child(2)::after{ background:linear-gradient(90deg,var(--gold),var(--green)) }
.cr-step:nth-child(3)::after{ background:linear-gradient(90deg,var(--green),var(--green)) }
/* soft corner glow, same device other premium cards on the site use */
.cr-step .cr-glow{ position:absolute; inset-inline-end:-60px; top:-60px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle,color-mix(in oklab,var(--gold) 20%,transparent),transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:0 }
.cr-step:hover .cr-glow{ opacity:.9 }
.cr-step:hover{ transform:translateY(-4px);
  border-color:color-mix(in oklab,var(--gold) 42%,var(--line2));
  box-shadow:0 20px 40px -26px color-mix(in oklab,var(--gold) 65%,transparent) }
@media(prefers-reduced-motion:reduce){ .cr-step:hover{ transform:none } }
/* numbered node — a station with a soft halo ring */
.cr-step::before{
  counter-increment:crs; content:counter(crs);
  position:relative; z-index:2;
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:.85rem;
  border-radius:50%; font-weight:800; font-size:1.05rem; color:#231a05;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  border:1px solid color-mix(in oklab,var(--gold2) 70%,transparent);
  box-shadow:0 0 0 5px color-mix(in oklab,var(--gold) 12%,transparent),
             0 6px 15px -6px color-mix(in oklab,var(--gold) 72%,transparent),
             0 1px 0 color-mix(in oklab,#fff 42%,transparent) inset;
}
/* per-step glyph (earn / convert / spend) in the top corner */
.cr-glyph{ position:absolute; top:1.5rem; inset-inline-end:1.35rem; z-index:2;
  width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  color:color-mix(in oklab,var(--gold2) 78%,var(--text));
  background:color-mix(in oklab,var(--gold) 8%,transparent);
  border:1px solid color-mix(in oklab,var(--gold) 20%,var(--line2)) }
.cr-glyph svg{ width:16px; height:16px }
/* the value-flow rail: line + chevron + a spark that travels toward the next step */
/* The connectors are children of .cr-steps, NOT of .cr-step. Each card is overflow:hidden (it
   has to be: it clips the corner glow and the rounded top accent bar), so a connector living
   inside a card and positioned past its right edge was clipped to a 1px stub in the gap. Anchored
   to the grid instead, each one spans a real column gap. Absolutely positioned children of a grid
   container are not grid items, so they do not disturb the 3-column layout.
   Geometry: 3 equal columns with two 22px gaps, so a column is (100% - 44px)/3. Gap centres are
   one and two columns in, plus the gaps already crossed. inset-inline-start keeps RTL correct. */
.cr-flow{ display:none }
@media (min-width:861px){
  .cr-flow{ display:block; position:absolute; z-index:3; pointer-events:none;
    top:calc(1.75rem + 20px);
    width:24px; height:12px; transform:translateY(-50%) }
  .cr-flow:nth-of-type(1){ inset-inline-start:calc((100% - 44px)/3 + 11px - 12px) }
  .cr-flow:nth-of-type(2){ inset-inline-start:calc((100% - 44px)/3*2 + 33px - 12px) }
  .cr-flow::before{ content:""; position:absolute; top:50%; inset-inline-start:0; width:100%; height:2px; border-radius:2px; transform:translateY(-50%);
    background:
      radial-gradient(circle at 0 50%, color-mix(in oklab,#fff 92%,var(--gold2)) 0, transparent 2.2px),
      linear-gradient(90deg, color-mix(in oklab,var(--gold) 75%,transparent), color-mix(in oklab,var(--green) 55%,transparent));
    background-size:9px 100%, 100% 100%; background-repeat:no-repeat; background-position:-9px 0, 0 0;
    box-shadow:0 0 7px color-mix(in oklab,var(--gold) 40%,transparent) }
  .cr-flow::after{ content:""; position:absolute; top:50%; inset-inline-end:-1px; width:6px; height:6px; transform:translateY(-50%) rotate(45deg);
    border-top:2px solid color-mix(in oklab,var(--green) 60%,var(--gold)); border-inline-end:2px solid color-mix(in oklab,var(--green) 60%,var(--gold)) }
}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .cr-flow::before{ animation:crFlow 1.7s linear infinite }
  [dir="rtl"] .cr-flow::before{ animation-name:crFlowRtl }
}
@keyframes crFlow{ to{ background-position:26px 0, 0 0 } }
@keyframes crFlowRtl{ to{ background-position:-26px 0, 0 0 } }
.cr-step h3{ margin:0 0 .35rem; font-size:1.05rem }
.cr-step p{ margin:0; color:var(--muted); font-size:.9rem }
/* spend row: an eyebrow + reward pills with leading icons, sitting in its own panel
   so it reads as one grouped "spend menu" rather than loose chips on bare background */
.cr-spend{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center;
  margin-top:1.6rem; padding:1.1rem 1.2rem;
  border-radius:16px; border:1px solid var(--line2);
  background:color-mix(in oklab,var(--panel) 55%,transparent);
}
.cr-spend-on{ width:100%; text-align:center; margin-bottom:.3rem;
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.cr-spend .pill{ padding:.42rem .85rem; font-size:.76rem; transition:transform .18s cubic-bezier(.22,1,.36,1), border-color .18s }
.cr-spend .pill svg{ width:14px; height:14px }
.cr-spend .pill.gold{ box-shadow:0 8px 18px -10px color-mix(in oklab,var(--gold) 70%,transparent) }
.cr-spend .pill.muted{ background:color-mix(in oklab,var(--text) 5%,var(--panel)); border:1px solid var(--line2) }
.cr-spend .pill.muted svg{ color:var(--gold2) }
.cr-spend .pill:hover{ transform:translateY(-2px); border-color:color-mix(in oklab,var(--gold) 45%,var(--line2)) }
@media(prefers-reduced-motion:reduce){ .cr-spend .pill:hover{ transform:none } }
.cr-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:1.4rem }
@media (max-width:720px){ .cr-facts{ grid-template-columns:1fr } }
/* premium feature tiles inside the credit section */
.cr-facts .fcard{ background:linear-gradient(180deg, color-mix(in oklab,var(--panel) 62%,var(--panel2)), var(--panel)) }
.cr-facts .f-ic{
  width:52px; height:52px; border-radius:15px;
  background:linear-gradient(145deg, color-mix(in oklab,var(--gold) 20%,transparent), color-mix(in oklab,var(--green) 10%,transparent));
  border:1px solid color-mix(in oklab,var(--gold) 24%,transparent);
  box-shadow:0 8px 20px -12px color-mix(in oklab,var(--gold) 62%,transparent), 0 1px 0 color-mix(in oklab,#fff 22%,transparent) inset;
}
.cr-facts .f-ic svg{ width:25px; height:25px }
.cr-facts h3{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.cr-facts .soon-badge{
  display:inline-flex; align-items:center; gap:.42em; padding:.28em .66em; font-size:.68em;
  color:var(--gold);
  background:linear-gradient(180deg, color-mix(in oklab,var(--gold) 20%,transparent), color-mix(in oklab,var(--gold) 11%,transparent));
  border:1px solid color-mix(in oklab,var(--gold) 32%,transparent);
}
.cr-facts .soon-badge::before{
  content:""; width:.5em; height:.5em; border-radius:50%; background:var(--gold);
  box-shadow:0 0 6px color-mix(in oklab,var(--gold) 90%,transparent);
}

/* ---------- growth + partnership band ---------- */
.gp-band{
  border-radius:20px; padding:clamp(1.6rem,4vw,2.6rem);
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(224,182,74,.14), transparent 60%),
    radial-gradient(70% 120% at 10% 100%, rgba(47,191,135,.12), transparent 60%),
    var(--panel);
  border:1px solid var(--line2);
}
.gp-band h2{ margin:.2rem 0 .6rem }
.gp-band p{ max-width:64ch }

/* ---------- ranking teaser ---------- */
.rk-list{ display:grid; gap:10px; max-width:560px; margin:0 auto }
.rk-row{
  display:flex; align-items:center; gap:12px;
  padding:.8rem 1rem; border-radius:14px;
  background:var(--panel); border:1px solid var(--line2);
}
.rk-medal{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%;
  font-weight:800; font-size:.95rem; background:rgba(224,182,74,.15); color:var(--gold) }
.rk-row:nth-child(2) .rk-medal{ background:rgba(170,180,190,.16); color:var(--muted) }
.rk-row:nth-child(3) .rk-medal{ background:rgba(190,120,60,.16); color:#c98a4b }
.rk-bar{ flex:1; height:10px; border-radius:6px; background:var(--line); overflow:hidden; min-width:0 }
.rk-bar i{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--gold), var(--green)) }

/* ---------- signup CTA + toast ---------- */
.kx-toast{
  position:fixed; z-index:400;
  inset-inline:16px; bottom:calc(18px + env(safe-area-inset-bottom));
  margin-inline:auto; max-width:420px;
  display:flex; align-items:center; gap:11px;
  padding:.95rem 1.15rem; border-radius:14px;
  background:var(--panel); border:1px solid var(--gold);
  color:var(--text); font-weight:600; font-size:.92rem;
  box-shadow:0 16px 48px rgba(0,0,0,.4);
  opacity:0; transform:translateY(14px); visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.kx-toast.show{ opacity:1; transform:none; visibility:visible }
.kx-toast svg{ width:20px; height:20px; flex:none; color:var(--gold) }
.btn.loading{ pointer-events:none; opacity:.7 }

/* ---------- giveaway band ---------- */
.gv-band{
  border-radius:20px; padding:clamp(1.6rem,4vw,2.6rem);
  text-align:center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(224,182,74,.16), transparent 58%),
    var(--panel);
  border:1px solid var(--line2);
  overflow:hidden;
}
.gv-prizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:1.5rem }
@media (max-width:860px){ .gv-prizes{ grid-template-columns:1fr } }
.gv-prize{
  padding:1.2rem 1rem; border-radius:16px;
  background:var(--card, var(--bg)); border:1px solid var(--line2);
  transition:transform .25s ease, border-color .25s ease;
}
.gv-prize:hover{ transform:translateY(-4px); border-color:var(--gold) }
.gv-prize .f-ic{ width:54px; height:54px; margin:0 auto .8rem; border-radius:15px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(224,182,74,.16),rgba(47,191,135,.08)); color:var(--gold) }
.gv-prize .f-ic svg{ width:26px; height:26px }
.gv-prize h3{ margin:0 0 .3rem; font-size:1.02rem }
.gv-prize p{ margin:0; font-size:.86rem; color:var(--muted) }
.gv-meter{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-top:1.4rem; flex-wrap:wrap;
}
.gv-meter .pill{ font-size:.8rem }
[dir="rtl"] .gv-meter > svg{ transform:scaleX(-1) }

/* Rewards "points" mockup card: a loyalty engine, not a stat tile.
   Signature = the medal is the hub of a conic tier-ring that arcs gold->green
   toward the next tier (--pc-goal %). Everything else stays quiet and refined. */
@property --pc-fill{syntax:"<percentage>";inherits:true;initial-value:0%}

.pts-card{--pc-goal:62%;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;padding:1.5rem 1.35rem 1.5rem;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -12%, color-mix(in oklab,var(--gold) 14%,transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab,var(--panel) 42%,var(--panel2)), var(--panel2));
  border:1px solid color-mix(in oklab,var(--gold) 22%,var(--line));
  box-shadow:0 1px 0 color-mix(in oklab,#fff 8%,transparent) inset, 0 20px 44px -26px color-mix(in oklab,var(--gold) 60%,transparent)}
.pts-card::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--gold) 60%,transparent),transparent)}
/* fine grain + a one-time diagonal sheen sweep for material depth */
.pts-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(115deg,transparent 38%,color-mix(in oklab,#fff 12%,transparent) 48%,transparent 58%);
  background-size:250% 100%;background-position:120% 0}
@media (prefers-reduced-motion:no-preference){
  .pts-card::after{animation:pcSheen 5.5s ease-in-out .6s 2}
}
@keyframes pcSheen{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.pts-card > *{position:relative;z-index:2}

/* current-tier chip */
.pts-card .pc-tier{display:inline-flex;align-items:center;gap:.42rem;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in oklab,var(--gold2) 84%,var(--text));margin-bottom:.7rem;padding:.32rem .68rem;border-radius:99px;
  background:color-mix(in oklab,var(--gold) 10%,transparent);border:1px solid color-mix(in oklab,var(--gold) 26%,var(--line))}
.pts-card .pc-tier-dot{width:6px;height:6px;border-radius:99px;background:var(--gold2);box-shadow:0 0 8px var(--gold)}

/* conic tier-ring — the signature. The ring is a masked donut behind the medal;
   a slow highlight sweeps around it. Fill animates from 0 to --pc-goal on load. */
.pts-card .pc-ring{position:relative;width:86px;height:86px;display:grid;place-items:center;margin-bottom:.6rem;--pc-fill:var(--pc-goal)}
.pts-card .pc-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--gold),var(--gold2) 30%,var(--green) var(--pc-fill),color-mix(in oklab,var(--text) 9%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.pts-card .pc-ring::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0 80%,color-mix(in oklab,#fff 60%,transparent) 90%,transparent 97%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.pts-card .pc-ic{position:relative;z-index:2;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#231a05;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  border:1px solid color-mix(in oklab,var(--gold2) 70%,transparent);
  box-shadow:0 7px 18px -7px color-mix(in oklab,var(--gold) 75%,transparent), 0 1px 0 color-mix(in oklab,#fff 48%,transparent) inset}
.pts-card .pc-ic svg{width:25px;height:25px}
.pts-card .pc-num{font-size:2.95rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.pts-card .mini-sub{font-weight:700}

/* milestone bar with a glowing thumb + inline goal caption */
.pts-card .pc-bar{position:relative;width:100%;max-width:236px;height:9px;border-radius:99px;margin:.78rem 0 .55rem;
  background:color-mix(in oklab,var(--text) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);
  box-shadow:0 1px 2px color-mix(in oklab,#000 28%,transparent) inset}
.pts-card .pc-bar i{position:absolute;inset:0;inline-size:var(--pc-fill);height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold2) 46%,var(--green));
  box-shadow:0 0 12px color-mix(in oklab,var(--gold) 55%,transparent)}
[dir="rtl"] .pts-card .pc-bar i{background:linear-gradient(270deg,var(--gold),var(--gold2) 46%,var(--green))}
.pts-card .pc-bar b{position:absolute;top:50%;inset-inline-start:var(--pc-goal);width:13px;height:13px;border-radius:99px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 34%,#fff,var(--gold2) 55%,var(--gold));
  border:1.5px solid color-mix(in oklab,#fff 55%,var(--gold));
  box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 22%,transparent),0 2px 6px color-mix(in oklab,#000 45%,transparent)}
[dir="rtl"] .pts-card .pc-bar b{transform:translate(50%,-50%)}
.pts-card .pc-goal{font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:.9rem}
.pts-card .pc-goal b{color:color-mix(in oklab,var(--gold2) 80%,var(--text));font-weight:800}
.pts-card .mini-row{justify-content:center;flex-wrap:wrap;margin-bottom:0;gap:7px}
.pts-card .pill{transition:transform .18s ease}
.pts-card .pill:hover{transform:translateY(-1px)}

/* The card sits mid-page, so its entrance is gated on .rv-in (site.js adds this to the parent
   .showrow when it scrolls into view) instead of firing on load, where it would finish unseen
   above the fold. Before reveal the ring and bar hold empty and the contents wait, so the fill and
   count-up play right as the card arrives. The spinning highlight is the one always-on flourish. */
@media (prefers-reduced-motion:no-preference){
  .showrow:not(.rv-in) .pts-card{--pc-fill:0%}
  .showrow:not(.rv-in) .pts-card .pc-bar b{inset-inline-start:0}
  .showrow:not(.rv-in) .pts-card .pc-ic,
  .showrow:not(.rv-in) .pts-card .pc-num,
  .showrow:not(.rv-in) .pts-card .mini-row{opacity:0}
  .rv-in .pts-card .pc-ring::before{animation:pcFill 1.5s cubic-bezier(.22,1,.36,1) both}
  .pts-card .pc-ring::after{animation:pcSpin 7s linear infinite}
  .rv-in .pts-card .pc-bar i{animation:pcFill 1.5s cubic-bezier(.22,1,.36,1) both}
  .rv-in .pts-card .pc-bar b{animation:pcThumb 1.5s cubic-bezier(.22,1,.36,1) both}
  .rv-in .pts-card .pc-ic,.rv-in .pts-card .pc-num,.rv-in .pts-card .mini-row{animation:pcRise .7s cubic-bezier(.22,1,.36,1) both}
  .rv-in .pts-card .pc-num{animation-delay:.28s}
  .rv-in .pts-card .mini-row{animation-delay:.42s}
}
@keyframes pcFill{from{--pc-fill:0%}to{--pc-fill:var(--pc-goal)}}
@keyframes pcThumb{from{inset-inline-start:0}to{inset-inline-start:var(--pc-goal)}}
@keyframes pcSpin{to{transform:rotate(1turn)}}
@keyframes pcRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   Ported from the app (index.html): the sponsored video banner and the
   WhatsApp AI agent section. Same visuals, adapted to this site's shell:
   section padding comes from section.block, and every physical left/right in
   the source is written as a logical property here, because ckb/ar are RTL by
   default and these blocks have to mirror.
   ========================================================================== */

/* ---------- sponsored video banner ----------
   Copy sits on top of footage, so it stays light in both themes on purpose. */
.vp-section{ padding-block-start:0 }
.vp-wide{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  border-radius:22px; overflow:hidden; font-family:inherit; isolation:isolate;
  background:#0b1418; box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.vp-wide:hover{ transform:translateY(-2px); box-shadow:0 30px 70px -32px rgba(0,0,0,1) }
.vp-wide:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.vpw-media{ position:absolute; inset:0; z-index:0 }
.vpw-media .vp-vid{
  display:block; width:100%; height:100%; object-fit:cover; background:#0b1418;
  transform:scale(1.04); transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.vp-wide:hover .vpw-media .vp-vid{ transform:scale(1.08) }
/* dark enough for AA text at the centre, lighter at the edges so the footage still reads */
.vpw-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(6,12,15,.30), rgba(6,12,15,.78) 78%),
    linear-gradient(to top, rgba(6,12,15,.86), rgba(6,12,15,.18) 55%, rgba(6,12,15,.62));
}
.vp-wide .vp-tag{
  position:absolute; z-index:2; inset-block-start:16px; inset-inline-start:16px;
  font-size:.625rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .62rem; border-radius:999px; color:#12100a;
  background:color-mix(in srgb, var(--gold) 90%, #fff);
}
.vpw-copy{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  min-height:340px; padding:64px 26px;
}
.vpw-offer{
  display:inline-flex; align-items:center;
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  padding:.46rem .85rem; border-radius:999px;
  color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  background:color-mix(in srgb, #0b1418 55%, transparent);
  backdrop-filter:blur(3px); margin-block-end:2px;
}
.vpw-h{
  font-size:clamp(1.7rem,3.6vw,2.9rem); font-weight:800; line-height:1.12;
  letter-spacing:-.022em; color:#fff; text-wrap:balance; max-width:20ch;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
/* Sorani and Arabic need looser leading and no negative tracking */
:root[lang="ckb"] .vpw-h, :root[lang="ar"] .vpw-h{ letter-spacing:0; line-height:1.35 }
.vpw-p{
  font-size:clamp(.92rem,1.2vw,1.05rem); line-height:1.65; color:rgba(255,255,255,.84);
  letter-spacing:.002em; max-width:48ch; text-wrap:pretty; margin:0;
}
:root[lang="ckb"] .vpw-p, :root[lang="ar"] .vpw-p{ line-height:1.85 }
/* the CTA reads as a real button here, not a text link */
.vp-wide .vp-cta{
  margin-block-start:8px; display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg, var(--gold), var(--gold2)); color:#231a05;
  border-radius:999px; padding:.78rem 1.5rem; font-size:.9rem; font-weight:800;
  box-shadow:0 14px 34px -16px var(--gold);
  transition:filter .18s, transform .18s;
}
.vp-wide:hover .vp-cta{ filter:brightness(1.06); transform:translateY(-1px) }
.vp-wide .vp-cta svg{ width:15px; height:15px }
/* the arrow points along the reading direction */
:root[dir="rtl"] .vp-wide .vp-cta svg{ transform:scaleX(-1) }
@media(max-width:720px){
  .vpw-copy{ min-height:270px; padding:44px 20px; gap:12px }
  .vpw-h{ font-size:1.5rem }
  .vpw-p{ font-size:.9rem }
}
@media (prefers-reduced-motion:reduce){
  .vp-wide, .vp-wide .vp-cta, .vpw-media .vp-vid{ transition:none }
  .vp-wide:hover{ transform:none }
  .vp-wide:hover .vpw-media .vp-vid{ transform:scale(1.04) }
}

/* ---------- Kurdify AI for your business (WhatsApp agent) ----------
   Columns rebalanced against the app's version only where section.block already
   supplies the vertical rhythm; the mockup itself is unchanged. */
.wai-inner{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(.8rem,2vw,1.7rem); align-items:center; max-width:1180px }
@media(max-width:860px){ .wai-inner{ grid-template-columns:1fr; gap:2.6rem } }
.wai-text .kicker{ color:var(--gold); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-block-end:.6rem }
.wai-text h2{ font-size:clamp(1.55rem,3.6vw,2.25rem); letter-spacing:-.02em; line-height:1.18; margin:.5rem 0 .8rem; max-width:19ch }
:root[lang="ckb"] .wai-text h2, :root[lang="ar"] .wai-text h2{ letter-spacing:0; line-height:1.4 }
.wai-text p{ color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:34ch; margin:0 0 1.3rem }
.wai-feats{ list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.7rem }
.wai-feats li{ display:flex; align-items:center; gap:.6rem; font-weight:600 }
.wai-feats li svg{ width:20px; height:20px; flex:0 0 20px; color:#25d366; background:rgba(37,211,102,.13); border-radius:50%; padding:3px }
.wai-cta{ display:inline-flex; align-items:center; gap:.5rem; background:#25d366; color:#04231a; font-weight:800; padding:.8rem 1.35rem; border-radius:999px; text-decoration:none; transition:transform .15s, box-shadow .15s; box-shadow:0 8px 24px -8px rgba(37,211,102,.6) }
.wai-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(37,211,102,.7) }
.wai-cta svg{ width:18px; height:18px }
:root[dir="rtl"] .wai-cta svg{ transform:scaleX(-1) }
/* Column, not a row, so the sample caption can sit under the phone without splitting it. */
.wai-stage{ display:flex; flex-direction:column; align-items:center; position:relative }
/* Centred with inset-inline + auto margins rather than a left/transform pair, so the glow
   lands in the same place in both directions. */
.wai-stage::before{
  content:""; position:absolute; inset-block-start:50%; inset-inline:0; margin-inline:auto;
  width:min(420px,80%); aspect-ratio:1; transform:translateY(-50%);
  background:radial-gradient(circle at 50% 45%, rgba(37,211,102,.28), rgba(231,184,78,.10) 45%, transparent 68%);
  filter:blur(26px); z-index:0; animation:waiAura 7s ease-in-out infinite;
}
@keyframes waiAura{
  0%,100%{ opacity:.75; transform:translateY(-50%) scale(1) }
  50%{ opacity:1; transform:translateY(-50%) scale(1.06) }
}
.wai-phone{ position:relative; z-index:1; width:288px; max-width:88vw; border-radius:44px; background:linear-gradient(165deg,#16261f,#0a0f0d 70%); padding:9px; box-shadow:0 44px 90px -34px rgba(0,0,0,.75), 0 0 0 1px rgba(37,211,102,.16), inset 0 0 0 1px rgba(255,255,255,.05) }
.wai-note{ position:relative; z-index:1; margin:1.1rem 0 0; text-align:center }
.wai-wa{ border-radius:36px; overflow:hidden; background:#0b141a; display:flex; flex-direction:column; height:452px; position:relative }
.wai-wa::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(37,211,102,.16),transparent); height:38%; transform:translateY(-140%); animation:waiScan 5.5s ease-in-out 1.2s infinite }
@keyframes waiScan{ 0%{ transform:translateY(-140%) } 18%,100%{ transform:translateY(320%) } }
.wai-statusbar{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .95rem .12rem; background:#1f2c34; color:#dfeaf0; font-size:.7rem; font-weight:800 }
.wai-statusbar .sb-ic{ display:flex; gap:5px; align-items:center; opacity:.9 }
.wai-statusbar .sb-ic svg{ height:11px; width:auto; fill:currentColor }
.wai-wahead{ display:flex; align-items:center; gap:.55rem; background:#1f2c34; padding:.5rem .8rem .62rem; color:#e9edef; position:relative }
.wai-hmeta{ flex:1; min-width:0 }
.wai-av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); display:flex; align-items:center; justify-content:center; font-weight:800; color:#04231a; flex:0 0 36px; position:relative }
.wai-av::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:1.5px solid rgba(37,211,102,.55); animation:waiRing 2.6s ease-out infinite }
@keyframes waiRing{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.35); opacity:0 } }
.wai-hname{ font-weight:700; font-size:.92rem; line-height:1.15; display:flex; align-items:center; gap:.4rem; min-width:0 }
.wai-hname .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wai-aibadge{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font-size:.6rem; font-weight:800; letter-spacing:.02em; color:#04231a; background:linear-gradient(135deg,#5ff0a3,#e7b84e); padding:2px 6px; border-radius:999px }
.wai-aibadge svg{ width:9px; height:9px }
.wai-hstat{ font-size:.72rem; color:#8fe3b0; display:flex; align-items:center; gap:.3rem }
.wai-hstat i{ width:7px; height:7px; border-radius:50%; background:#25d366; display:inline-block; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:waiPulse 2s infinite }
@keyframes waiPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5) } 70%{ box-shadow:0 0 0 6px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }
.wai-wabody{ flex:1; overflow:hidden; padding:.85rem .7rem; display:flex; flex-direction:column; gap:.45rem; background:#0b141a; background-image:radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size:18px 18px }
.wai-msg{ max-width:82%; padding:.5rem .7rem; border-radius:13px; font-size:.85rem; line-height:1.45; opacity:0; transform:translateY(8px) scale(.98); transition:opacity .35s, transform .35s }
.wai-msg.show{ opacity:1; transform:none }
/* Tails use the logical start/end corners so the incoming bubble keeps its notch against
   whichever edge it is actually aligned to once the page flips to RTL. */
.wai-in{ align-self:flex-start; background:#202c33; color:#e9edef; border-start-start-radius:3px }
.wai-out{ align-self:flex-end; background:#005c4b; color:#e9edef; border-start-end-radius:3px }
.wai-card{ align-self:flex-start; max-width:88%; background:linear-gradient(160deg,#10241d,#0d1b16); border:1px solid rgba(37,211,102,.3); border-radius:14px; border-start-start-radius:3px; padding:.6rem .7rem; opacity:0; transform:translateY(8px) scale(.98); transition:opacity .4s, transform .4s; box-shadow:0 10px 26px -14px rgba(0,0,0,.6) }
.wai-card.show{ opacity:1; transform:none }
.wai-card-top{ display:flex; align-items:center; gap:.4rem; font-weight:800; font-size:.8rem; color:#5ff0a3; margin-block-end:.45rem }
.wai-card-top svg{ width:15px; height:15px }
.wai-card-rows{ display:grid; gap:.28rem }
.wai-crow{ display:flex; align-items:center; gap:.45rem; font-size:.76rem; color:#cfe6da }
.wai-crow svg{ width:13px; height:13px; color:#8fa3ad; flex:0 0 13px }
.wai-crow b{ color:#fff; font-weight:700 }
.wai-typing{ align-self:flex-start; background:#202c33; border-radius:12px; border-start-start-radius:3px; padding:.6rem .75rem; display:none; align-items:center; gap:.4rem }
.wai-typing.show{ display:flex }
.wai-typing em{ font-style:normal; font-size:.68rem; color:#8fa3ad }
.wai-typing .dots{ display:flex; gap:4px }
.wai-typing .dots span{ width:6px; height:6px; border-radius:50%; background:#8fe3b0; animation:waiDot 1.2s infinite }
.wai-typing .dots span:nth-child(2){ animation-delay:.2s }
.wai-typing .dots span:nth-child(3){ animation-delay:.4s }
@keyframes waiDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }
.wai-wabar{ display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem; background:#1f2c34 }
.wai-wabar .wai-inp{ flex:1; background:#2a3942; border-radius:999px; padding:.5rem .8rem; color:#8fa3ad; font-size:.78rem }
.wai-wabar .wai-send{ width:32px; height:32px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; color:#04231a; flex:0 0 32px }
:root[dir="rtl"] .wai-wabar .wai-send svg{ transform:scaleX(-1) }
.wai-cap{ position:absolute; z-index:3; background:rgba(12,32,26,.72); border:1px solid rgba(37,211,102,.28); border-radius:12px; padding:.42rem .65rem; font-size:.72rem; font-weight:700; color:#eaf4f2; display:flex; align-items:center; gap:.4rem; backdrop-filter:blur(9px); box-shadow:0 14px 34px -14px rgba(0,0,0,.6); animation:waiFloat 4.5s ease-in-out infinite }
.wai-cap svg{ width:14px; height:14px; color:#5ff0a3 }
.wai-cap.c1{ inset-block-start:21%; inset-inline-start:-30% }
.wai-cap.c2{ inset-block-end:22%; inset-inline-end:-24%; animation-delay:1.3s }
@media(max-width:1024px){ .wai-cap.c1{ inset-inline-start:-16% } .wai-cap.c2{ inset-inline-end:-12% } }
@keyframes waiFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
/* Hidden below 520px: the chips overhang the phone, and at that width the overhang is what
   would push the page into horizontal scroll. */
@media(max-width:520px){ .wai-cap{ display:none } }
@media(prefers-reduced-motion:reduce){
  .wai-msg, .wai-card{ opacity:1; transform:none }
  .wai-cap, .wai-hstat i, .wai-av::after, .wai-wa::after, .wai-stage::before{ animation:none }
}

/* ---------- points card: sample marker ----------
   The card shows a balance, a tier and wallet chips. None of it belongs to the visitor, so it
   is labelled the same way the other product mocks on this site are. */
.pts-card .pc-sample{
  position:absolute; z-index:2; inset-block-start:12px; inset-inline-start:12px;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
}