.uc-step-num { width:2rem; height:2rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; background:#18181b; }
.uc-gex-col { flex:1; display:flex; flex-direction:column; height:150px; }
.uc-gex-top { height:75px; display:flex; align-items:flex-end; justify-content:center; }
.uc-gex-bot { height:75px; display:flex; align-items:flex-start; justify-content:center; }
.uc-pain-card { position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.uc-pain-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#fb7185,#f43f5e); opacity:.85; }
.uc-pain-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(244,63,94,.35); border-color:#fecdd3; }
.uc-pain-num { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; font-weight:800; font-size:15px; color:#e11d48; background:linear-gradient(135deg,#fff1f2,#ffe4e6); border:1px solid #fecdd3; font-variant-numeric:tabular-nums; }
.uc-topic-rule { height:1px; flex:1; background:linear-gradient(90deg,#e4e4e7,transparent); }
.uc-trust-card { transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.uc-trust-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(67,56,202,.3); border-color:#ddd6fe; }
.uc-trust-ico { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--color-blue-600); background:linear-gradient(135deg,#f5f3ff,#ede9fe); border:1px solid #ddd6fe; }

.uc-plan-card-free {
    background: linear-gradient(3deg, #ffffff 0%, #ffffff 58%, #ffffff 100%); 
}

.uc-plan-card {
    background: linear-gradient(3deg, #1e293b 0%, #145ea0 58%, #3394e1 100%); 
    box-shadow: 0 22px 48px -20px rgba(67, 56, 202, .55);
}

.uc-gex-bar {
    height: var(--bar-h);
}


/* ---------- Hero ----------- */
.fa-icon-box{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- Reveal-on-load ---------- */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .15s; }
.reveal-3 { animation-delay: .25s; }
.reveal-4 { animation-delay: .35s; }
.reveal-5 { animation-delay: .45s; }
.reveal-6 { animation-delay: .55s; }
.reveal-7 { animation-delay: .65s; }

/* ---------- Scroll reveal ---------- */
.fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.fade-in-up.in-view { opacity: 1; transform: translateY(0); }

@keyframes uc-icon-blink { 
  0%,100% { color:var(--color-blue-600); opacity:1; } 
  50% { color:var(--color-zinc-900); opacity:1; }
}
.uc-icon-blink { animation:uc-icon-blink 1.4s ease-in-out infinite; }

.why-growth {
  background: #fafbfe;
}

.why-growth-card {
  position: relative;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}

.why-growth-card:hover {
  border-color: #2c5b4c;
  background: #141a22;
  transform: translateY(-2px);
}

.why-growth-card:hover .spark { opacity: 0.16; }

.spark {
  position: absolute;
  right: -10px;
  bottom: -6px;
  opacity: 0.08;
  transition: opacity 220ms ease;
  pointer-events: none;
}

/* ---------- Card hover lift ---------- */
.lift { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(109,63,242,.25); }

.ring-orange-5{box-shadow:0 0 0 3px var(--color-orange-400);}


/* CTA band */
@keyframes box-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.18);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.008);
    box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
  }
}

.cta-box-pulse {
  animation: box-pulse 2.6s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.cta-icon-pulse {
  animation: icon-pulse 1.8s ease-in-out infinite;
}

.cta-btn-shimmer {
  position: relative;
  overflow: hidden;
}

.cta-btn-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
}

.cta-btn-shimmer:hover::before {
  animation: shimmer-sweep 0.9s ease forwards;
}

@keyframes shimmer-sweep {
  0% { left: -75%; }
  100% { left: 130%; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .cta-box-pulse,
  .cta-icon-pulse {
    animation: none;
  }
}


/* FAQ + Sale box + CTA band */
.faq-icon-badge {
  background: #eaf0ff;
  color: #3b6ef6;
}

.pricing-card {
  background: linear-gradient(180deg, #2e5fee 0%, #1a3fb0 45%, #0a1330 100%);
}

.pricing-badge {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  width: 190px;
}

.pricing-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.check-icon-solid {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.check-icon-outline {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cta-banner {
  background: radial-gradient(ellipse at top right, #10193d 0%, #060a1c 70%);
  background-color: #060a1c;
}

.cta-icon-box {
  background: linear-gradient(145deg, #4f7fff 0%, #2952e3 100%);
  box-shadow: 0 8px 20px -4px rgba(41, 82, 227, 0.55);
}

/* ============ ANIMATIONS ============ */

@keyframes card-glow {
  0%, 100% {
    box-shadow: 0 20px 45px -18px rgba(41, 82, 227, 0.35),
                0 0 0 0 rgba(79, 127, 255, 0.25);
  }
  50% {
    box-shadow: 0 20px 45px -18px rgba(41, 82, 227, 0.45),
                0 0 0 10px rgba(79, 127, 255, 0);
  }
}

.pricing-card-glow {
  animation: card-glow 3s ease-in-out infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.6; transform: scale(1.15) rotate(15deg); }
}

.star-twinkle {
  animation: star-twinkle 1.8s ease-in-out infinite;
}

.cta-icon-float {
  animation: icon-float 2.4s ease-in-out infinite;
}


.sparkle-1 {
  animation: sparkle-blink 1.6s ease-in-out infinite;
}

.sparkle-2 {
  animation: sparkle-blink 1.6s ease-in-out infinite 0.8s;
}

.btn-pulse {
  animation: btn-pulse 2.2s ease-in-out infinite;
}

.btn-pulse:hover {
  animation-play-state: paused;
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(59, 110, 246, 0.18) 50%, transparent 100%);
  transform: skewX(-20deg);
}

.btn-shimmer:hover::before {
  animation: shimmer-sweep 0.9s ease forwards;
}

.faq-toggle[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.25s ease;
}


/* ============ What you get ============ */
.guide-banner {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f7ff 100%);
  border: 1px solid #e2e7fb;
}

.guide-icon-box {
  background: #ffffff;
  box-shadow: 0 4px 10px -2px rgba(59, 89, 246, 0.12);
}

.section-icon-badge {
  background: #eaf0ff;
  color: #3b6ef6;
}

.badge-free {
  color: var(--color-green-600);
}

.badge-basic {
  color: var(--color-zinc-700);
}

/* ============ Terminal ============ */
.terminal-card {
  background: #16181d;
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.35);
}

.terminal-header {
  background: #101215;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-dot-red { background: #ff5f57; }
.terminal-dot-yellow { background: #febc2e; }
.terminal-dot-green { background: #28c840; }

.token-key { color: #ff9d5c; }      /* curl, -H, key names */
.token-string { color: #a5e2a5; }   /* string values, URL */
.token-value { color: #7cd9ff; }    /* numeric values */
.token-status { color: #ffffff; }
.token-punct { color: #6b7280; }

/* ============ SECTION BACKGROUNDS ============ */
.section-steps {
  background: #fafbfe;
  border: 1px solid #eef0f6;
}

.section-learn {
  background: #f6f7fb;
  border: 1px solid #eef0f6;
}

/* ============ BADGES ============ */
.badge-get-started {
  background: #e8ecff;
  color: #4338ca;
}

/* ============ STEP CARDS ============ */
.step-card {
  background: #ffffff;
  border: 1px solid #cddaf9;
}

.step-icon-box {
  background: #eef1fb;
}

.step-icon-box-blue {
  background: #eaf0ff;
}

/* ============ LEARN CATEGORY CARDS ============ */
.learn-icon-0,
.learn-icon-4 {
  background: linear-gradient(145deg, #f56bd2 0%, #d10fa1 100%);
}

.learn-icon-1,
.learn-icon-5 {
  background: linear-gradient(145deg, #a78bfa 0%, #7c5cff 100%);
}

.learn-icon-2,
.learn-icon-6 {
  background: linear-gradient(145deg, #34d399 0%, #10b981 100%);
}


.terminal-cursor::after {
  content: "▋";
  color: var(--color-orange-400);
  animation: cursor-blink 1s step-end infinite;
}


.terminal-line {
  animation: line-fade-in 0.4s ease forwards;
  opacity: 0;
}

.terminal-line:nth-child(1) { animation-delay: 0.1s; }
.terminal-line:nth-child(2) { animation-delay: 0.2s; }
.terminal-line:nth-child(3) { animation-delay: 0.3s; }
.terminal-line:nth-child(4) { animation-delay: 0.4s; }
.terminal-line:nth-child(5) { animation-delay: 0.5s; }
.terminal-line:nth-child(6) { animation-delay: 0.6s; }
.terminal-line:nth-child(7) { animation-delay: 0.7s; }
.terminal-line:nth-child(8) { animation-delay: 0.8s; }
.terminal-line:nth-child(9) { animation-delay: 0.9s; }
.terminal-line:nth-child(10) { animation-delay: 1s; }

.link-arrow-hover svg {
  transition: transform 0.25s ease;
}

.link-arrow-hover:hover svg {
  transform: translateX(3px);
}

/* Step card animation */
.step-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -14px rgba(59, 110, 246, 0.25);
}

/* Learn card animation */
.learn-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.learn-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -14px rgba(30, 41, 82, 0.15);
}

.learn-card-hover:hover .learn-icon-scale {
  transform: scale(1.08) rotate(-3deg);
}

.learn-icon-scale {
  transition: transform 0.3s ease;
}

/* Article row animation */
.article-row-hover svg {
  transition: transform 0.2s ease;
}

.article-row-hover:hover svg {
  transform: translateX(3px);
}

.article-row-hover:hover span {
  color: #1e293b;
}

/* Explore all: icon xoay nhẹ khi hover */
.explore-all-hover svg {
  transition: transform 0.3s ease;
}

.explore-all-hover:hover svg {
  transform: rotate(90deg);
}


.icon-wiggle {
  display: inline-block;
  animation: rocket-launch 4s ease-in-out infinite;
  transform-origin: center bottom;
}

.btn-pulse {
  animation: btn-pulse 2.4s ease-in-out infinite;
}

.btn-pulse:hover {
  animation-play-state: paused;
}


.fa-banner{
  position:relative;
  background: linear-gradient(135deg, #1e293b 0%, #145ea0 58%, #3394e1 100%);
  overflow:hidden;
  isolation:isolate;
}

.fa-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(55% 65% at 88% 30%, black, transparent 75%);
  pointer-events:none;
}

.fa-icon-box{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.fa-anim-1{ animation: fa-fade-in .7s ease-out both; }
.fa-anim-2{ animation: fa-fade-in .7s ease-out .12s both; }
.fa-anim-3{ animation: fa-fade-in .7s ease-out .22s both; }


/* Base setup animation */
.box-animation {
  position: relative;
  background-clip: padding-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform, box-shadow;
}

.box-animation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.box-animation:hover::before {
  opacity: 1;
  animation: borderFlow 3s linear infinite;
}

.fa-key-mask{
  filter: blur(4px);
  user-select:none;
  transition: filter .2s ease;
}

.fa-key-mask.revealed{
  filter: blur(0);
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.box-animation:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 20px 40px -12px rgba(99, 102, 241, 0.45),
    0 0 0 1px rgba(129, 140, 248, 0.3);
}

.box-animation:hover li svg.text-emerald-500 {
  animation: checkPop 0.4s ease forwards;
}

.box-animation:hover li:nth-child(1) svg { animation-delay: 0.02s; }
.box-animation:hover li:nth-child(2) svg { animation-delay: 0.06s; }
.box-animation:hover li:nth-child(3) svg { animation-delay: 0.1s; }
.box-animation:hover li:nth-child(4) svg { animation-delay: 0.14s; }
.box-animation:hover li:nth-child(5) svg { animation-delay: 0.18s; }

@keyframes checkPop {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16,185,129,0)); }
  60%  { transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(16,185,129,0.8)); }
  100% { transform: scale(1.1); filter: drop-shadow(0 0 3px rgba(16,185,129,0.6)); }
}

.box-animation:hover .btn-pulse {
  animation: ctaShake 0.5s ease;
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.35);
}

@keyframes ctaShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

.box-animation:hover .font-inter-tight {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* ANIMATIONS */


@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}


@keyframes sparkle-blink {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}


@keyframes shimmer-sweep {
  0% { left: -75%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card-glow,
  .star-twinkle,
  .cta-icon-float,
  .sparkle-1,
  .sparkle-2,
  .btn-pulse {
    animation: none;
  }
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes line-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (prefers-reduced-motion: reduce) {
  .endpoint-glow,
  .badge-pulse,
  .terminal-cursor::after,
  .terminal-line {
    animation: none;
    opacity: 1;
  }
}

/* Badge GET STARTED */
@keyframes rocket-launch {
  0%, 75%, 100% {
    transform: translateY(0);
  }

  77% { transform: translateY(1px); }
  79% { transform: translateY(-1px); }
  81% { transform: translateY(2px); }
  83% { transform: translateY(-2px); }

  87% {
    transform: translateY(-2px);
  }

  91% {
    transform: translateY(-4px);
  }

  96% {
    transform: translateY(-1px);
  }
}

/* BUTTON Animation*/
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 94, 234, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(47, 94, 234, 0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .step-number-pulse,
  .connector-arrow,
  .icon-wiggle,
  .btn-pulse {
    animation: none;
  }
  .step-card-hover:hover,
  .learn-card-hover:hover {
    transform: none;
  }
}

@keyframes fa-float-in{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes fa-fade-in{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .fa-anim-1,
  .fa-anim-2,
  .fa-anim-3{
    animation:none !important; transition:none !important;
  }
}

/* ── Static cards ────────────────────────────────────────────────────────────
   The plan and pain/trust cards lifted on hover, faded up on scroll, and two
   animations ran forever (btn-pulse, uc-icon-blink). Together that made the page
   feel restless: content shifting under the cursor while a button throbbed.
   Motion is removed here rather than at each definition so the rules above stay
   readable as a record of what was tried. Colour/background transitions are kept,
   they do not move anything. */
.uc-pain-card, .uc-trust-card { transition: box-shadow .15s ease, border-color .15s ease; }
.uc-pain-card:hover, .uc-trust-card:hover { transform: none; }

/* Reveal-on-scroll: show the content, skip the travel. */
.reveal, .fade-in-up, .fade-in-up.in-view {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}

/* Perpetual attention-seekers. */
.btn-pulse { animation: none; }
.uc-icon-blink { animation: none; }

/* Second pass: three infinite animations survived the block above because they are
   applied via separate classes (glow/float/spin), not the ones neutralised there.
   A measured sweep of computed styles found them still running. */
.pricing-card, .pricing-card-glow, .cta-icon-box, .cta-icon-float {
    animation: none !important;
    transform: none !important;
}
.pricing-card:hover, .pricing-card-glow:hover { transform: none !important; }

/* Third pass: the remaining hover lifts, reported as "panels growing" on the
   onboarding pages. Shadow/colour hover feedback stays; movement goes. The small
   arrow nudges inside links are left alone - they are affordances, not panels. */
.why-growth-card:hover, .step-card-hover:hover, .learn-card-hover:hover { transform: none; }
.learn-card-hover:hover .learn-icon-scale { transform: none; }
/* Fourth: box-animation (-6px + scale on the main capability panels) was missed by
   every previous pass - found by scanning the live stylesheet for :hover transforms
   that match rendered elements. Shadow feedback stays. */
.box-animation:hover { transform: none; }