/* ============================================================
   Arketar Marketing Site — styles layered over Tailwind
   Optimized for native-scroll smoothness.
   ============================================================ */

:root {
  /* Brand palette matched to the real app login screen:
     indigo→cyan gradient with the red triangle accent. */
  --indigo:   #4F46E5;
  --indigo-2: #6366F1;
  --cyan:     #22D3EE;
  --navy:     #0F2A3F;
  --navy-2:   #0A1F30;
  --navy-3:   #061421;
  --red:      #D11E1E;
  --red-2:    #FF4D4D;
  --violet:   #8B5CF6;
  --gold:     #F59E0B;
  --ink:      #0B1220;
  --paper:    #FAFAF7;
  --line:     rgba(15, 42, 63, 0.08);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { background: var(--paper); color: var(--ink); }
html { scroll-behavior: auto; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Keep the browser's native scrolling — no JS smoothing. */
  text-rendering: optimizeSpeed;
}

.font-display { font-family: 'Sora', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }

.text-navy { color: var(--navy); }
.text-red  { color: var(--red); }
.bg-navy   { background: var(--navy); }
.bg-navy-2 { background: var(--navy-2); }
.bg-navy-3 { background: var(--navy-3); }
.bg-paper  { background: var(--paper); }

/* ====== Hero headline accent — shades of white, clean and high-contrast on aurora ====== */
.hero-accent {
  background: linear-gradient(120deg, #FFFFFF 0%, #F1F5F9 55%, #CBD5E1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Subtle drop shadow so the white stays legible on lighter areas of the gradient */
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

/* Hero eyebrow uses the same white-shades treatment so it reads cleanly on the aurora.
   Other eyebrows (on white backgrounds) keep the brand red. */
#hero .eyebrow {
  background: linear-gradient(120deg, #FFFFFF 0%, #F1F5F9 55%, #CBD5E1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}
#hero .eyebrow::before {
  background: rgba(255, 255, 255, 0.85);
}

/* ====== Hero gradient — brighter, more inviting aurora ====== */
.hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    /* Hot pink top-left */
    radial-gradient(38rem 38rem at 10% 18%, rgba(244, 114, 182, 0.55), transparent 62%),
    /* Bright cyan top-right */
    radial-gradient(42rem 42rem at 92% 22%, rgba(34, 211, 238, 0.60), transparent 60%),
    /* Amber-orange bottom */
    radial-gradient(48rem 48rem at 50% 110%, rgba(251, 146, 60, 0.45), transparent 60%),
    /* Violet center */
    radial-gradient(42rem 42rem at 68% 58%, rgba(139, 92, 246, 0.42), transparent 60%),
    /* Multi-stop base */
    linear-gradient(135deg, #4338CA 0%, #7C3AED 28%, #4F46E5 52%, #2563EB 72%, #06B6D4 100%);
}

/* Subtle static accent overlay — a single fixed conic for extra depth.
   NOT animated (conic + transform = expensive repaint). The blobs handle motion. */
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    conic-gradient(
      from 200deg at 70% 30%,
      rgba(244, 114, 182, 0.0)   0deg,
      rgba(244, 114, 182, 0.22)  40deg,
      rgba(139, 92, 246, 0.18)   120deg,
      rgba(34, 211, 238, 0.0)    220deg,
      rgba(251, 146, 60, 0.18)   300deg,
      rgba(244, 114, 182, 0.0)   360deg
    );
  pointer-events: none;
  opacity: 0.85;
}
/* Subtle grid overlay for tech feel — pure CSS, single paint, no animation */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
}
@keyframes heroSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before { animation: none; }
}

/* Static accent blobs — brighter saturated colors, NO animation (blur+animate kills perf) */
.blob {
  position: absolute; border-radius: 9999px; filter: blur(70px); opacity: 0.65;
  pointer-events: none;
}

/* ====== Marquee strip — pure CSS, GPU-friendly ====== */
.marquee {
  display: flex; gap: 4rem; white-space: nowrap;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ====== Pillar card ====== */
.pillar {
  position: relative; padding: 1.75rem; border-radius: 1.25rem;
  background: white; border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s, border-color .25s;
  overflow: hidden;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -22px rgba(15,42,63,0.18);
  border-color: rgba(209,30,30,0.35);
}
.pillar .pillar-num {
  font-family: 'Sora', sans-serif; font-weight: 800;
  color: rgba(15,42,63,0.06); font-size: 5rem; line-height: 1;
  position: absolute; top: -8px; right: 8px;
}

/* ====== Showcase art panel ====== */
.showcase-art {
  position: relative; border-radius: 1.5rem; overflow: hidden;
  background: linear-gradient(135deg, #1A1A4D 0%, #2D2E78 55%, #1F4E73 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px -30px rgba(31,30,99,0.45);
}
.showcase-art .badge {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  color: white; padding: .45rem .8rem;
  border-radius: 9999px; font-size: 0.78rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .4rem;
}
.showcase-art .glow {
  position: absolute; border-radius: 9999px;
  filter: blur(60px); opacity: .55; pointer-events: none;
}

/* Mock dashboard cards inside showcase art — NO backdrop-filter (perf killer) */
.mock-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0.85rem; padding: 0.9rem 1rem;
  color: rgba(255,255,255,0.92);
}
.mock-card .label {
  font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.mock-card .value {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 1.4rem; margin-top: .15rem;
}
.mock-bar {
  height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.mock-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

/* ====== Browser-chrome frame for real app screenshots ====== */
.browser-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0B1220;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 60px 120px -30px rgba(15,16,60,0.55),
              0 18px 40px -12px rgba(15,16,60,0.35);
  transition: transform .5s cubic-bezier(.2,.7,.2,1),
              box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.browser-frame:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 80px 140px -30px rgba(15,16,60,0.65),
              0 24px 50px -12px rgba(15,16,60,0.40);
}
.browser-frame .browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: #0F1A2E;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-frame .browser-bar i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
}
.browser-frame .browser-bar .pill {
  margin-left: 12px; flex: 1; height: 24px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; padding: 0 10px;
  color: rgba(255,255,255,0.55); font-size: 0.74rem; letter-spacing: 0.02em;
  font-family: 'Inter', sans-serif;
}
.browser-frame .browser-bar .pill svg { width: 12px; height: 12px; margin-right: 6px; }
.browser-frame img.screen {
  display: block; width: 100%; height: auto;
  /* Crisp scaling */
  image-rendering: -webkit-optimize-contrast;
}
.browser-frame.placeholder .screen-slot {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4F46E5 0%, #4096C7 100%);
  color: white; min-height: 420px; text-align: center;
  padding: 2rem;
}
.browser-frame.placeholder .screen-slot .ph-title {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem;
}
.browser-frame.placeholder .screen-slot .ph-sub {
  font-size: 0.85rem; opacity: .8;
}

/* ====== Feature grid ====== */
.feat {
  position: relative; padding: 1.25rem 1.25rem 1.1rem; border-radius: 1rem;
  background: white; border: 1px solid var(--line);
  transition: transform .3s, border-color .25s;
}
.feat:hover { transform: translateY(-3px); border-color: rgba(15,42,63,0.18); }
.feat .ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(34,211,238,0.12));
  color: var(--indigo);
}
.feat h4 {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem;
  margin: .65rem 0 .3rem; color: var(--navy);
}
.feat p {
  color: rgba(15,42,63,0.7); font-size: 0.875rem; line-height: 1.45; margin: 0;
}

/* ====== Workflow diagram ====== */
.flow-step {
  position: relative; padding: 1.25rem; border-radius: 1rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.flow-step .num {
  font-family: 'Sora', sans-serif; font-weight: 800; color: var(--red);
  font-size: .85rem; letter-spacing: .15em;
}

/* ====== Reveal-on-view via IntersectionObserver class flip ====== */
.reveal,
[data-stagger] [data-stagger-item] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1),
              transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible,
[data-stagger] [data-stagger-item].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-stagger] [data-stagger-item] {
    opacity: 1; transform: none; transition: none;
  }
  .marquee { animation: none; }
}

/* ====== Buttons ====== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: 9999px; font-weight: 600; font-size: .92rem;
  transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red); color: white;
  box-shadow: 0 10px 26px -10px rgba(209,30,30,0.55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(209,30,30,0.65);
}
.btn-ghost { color: var(--navy); background: rgba(15,42,63,0.06); }
.btn-ghost:hover { background: rgba(15,42,63,0.12); }
.btn-light { background: white; color: var(--navy); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.20); }

/* ====== Chips ====== */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem; border-radius: 9999px; font-size: .72rem;
  background: rgba(209,30,30,0.08); color: var(--red);
  border: 1px solid rgba(209,30,30,0.16); font-weight: 600;
}

/* ====== Nav ====== */
.nav-shell {
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.nav-shell.scrolled {
  background-color: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(15,42,63,0.18);
}
/* Optional progressive enhancement: blur only on browsers that support it cheaply */
@supports (backdrop-filter: blur(12px)) {
  .nav-shell.scrolled {
    background-color: rgba(255,255,255,0.78);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }
}
.nav-link {
  position: relative; color: rgba(15,42,63,0.78); font-weight: 500; font-size: .92rem;
  padding: .35rem .15rem;
}
.nav-link:hover { color: var(--navy); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--red); border-radius: 1px;
  transform: scaleX(0); transform-origin: center; transition: transform .22s;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ====== Section heading ====== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700;
  color: var(--red);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--red); display: inline-block;
}
.h-section {
  font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.02em;
  color: var(--navy);
}
.h-section.on-dark { color: white; }

/* ====== Logo ====== */
.logo-img { height: 32px; width: auto; display: block; }
.logo-img.on-dark { filter: brightness(0) invert(1); }

/* ====== Floats (CSS keyframe, lighter than JS) ====== */
@keyframes floaty {
  0%,100% { transform: translate3d(0, 0, 0); }
  50%     { transform: translate3d(0, -8px, 0); }
}
.float-slow { animation: floaty 6s ease-in-out infinite; }
.float-med  { animation: floaty 4.5s ease-in-out infinite; }

/* ====== Stat counter ====== */
.stat-num {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ====== Footer ====== */
.footer-link { color: rgba(255,255,255,0.65); font-size: .9rem; }
.footer-link:hover { color: white; }

/* ====== Logo mark fallback ====== */
.logo-mark {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--red); color: white;
  box-shadow: 0 6px 16px -4px rgba(209,30,30,0.6);
  font-family: 'Sora', sans-serif; font-weight: 800;
}

/* Mobile responsive niceties */
@media (max-width: 768px) {
  .pillar .pillar-num { font-size: 3.5rem; }
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.bill-toggle {
  color: rgba(15,42,63,0.65);
  transition: color .2s, background-color .2s;
}
.bill-toggle.is-active {
  background: white;
  color: var(--navy);
  box-shadow: 0 4px 12px -4px rgba(15,42,63,0.18);
}

.price-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .25s;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -25px rgba(15,42,63,0.20);
  border-color: rgba(99,102,241,0.30);
}
.price-card-featured {
  background: linear-gradient(160deg, #4338CA 0%, #4F46E5 40%, #06B6D4 100%);
  color: white;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 40px 80px -25px rgba(67,56,202,0.45);
  transform: scale(1.02);
}
.price-card-featured:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 50px 100px -25px rgba(67,56,202,0.55);
  border-color: rgba(255,255,255,0.30);
}
.price-badge {
  position: absolute; top: -12px; right: 1.5rem;
  background: var(--red); color: white; font-size: .7rem; font-weight: 700;
  padding: .35rem .75rem; border-radius: 9999px; letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -4px rgba(209,30,30,0.5);
}
.price-eyebrow {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: inherit;
}
.price-card-featured .price-eyebrow { color: white; }
.price-tagline {
  font-size: .85rem; color: rgba(15,42,63,0.60); margin-top: .25rem;
  min-height: 2.6em;
}
.price-card-featured .price-tagline { color: rgba(255,255,255,0.75); }
.price-amount { line-height: 1; }
.price-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .65rem;
  flex: 1;
  border-top: 1px solid var(--line); padding-top: 1.25rem;
}
.price-card-featured .price-features {
  border-top-color: rgba(255,255,255,0.15);
}
.price-features li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .92rem; color: rgba(15,42,63,0.80);
}
.price-features li i {
  width: 16px; height: 16px; color: #10B981; flex-shrink: 0; margin-top: 2px;
}
.price-features-dark li { color: rgba(255,255,255,0.92); }
.price-features-dark li i { color: #6EE7B7; }

/* Comparison table */
.compare-table {
  border-collapse: collapse;
}
.compare-table thead th {
  font-family: 'Sora', sans-serif; font-weight: 700;
  color: var(--navy); font-size: .9rem;
  padding: 1rem .75rem; border-bottom: 2px solid var(--line);
  text-align: left;
}
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody td {
  padding: .85rem .75rem; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: rgba(15,42,63,0.80);
}
.compare-table tbody td:not(:first-child) {
  text-align: center; color: var(--navy); font-weight: 500;
}
.compare-table tbody tr:hover { background: rgba(99,102,241,0.03); }

/* FAQ */
.faq-item {
  background: white; border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: rgba(99,102,241,0.30); }
.faq-item[open] {
  box-shadow: 0 14px 30px -16px rgba(15,42,63,0.18);
  border-color: rgba(99,102,241,0.35);
}
.faq-item summary {
  font-family: 'Sora', sans-serif; font-weight: 600;
  color: var(--navy); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: rgba(15,42,63,0.45);
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: .75rem 0 0; color: rgba(15,42,63,0.70); font-size: .95rem; line-height: 1.55;
}

/* ============================================================
   BLOG PAGE
   ============================================================ */
.filter-chip {
  padding: .55rem 1.1rem; border-radius: 9999px;
  background: white; border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; color: rgba(15,42,63,0.70);
  transition: all .2s;
  cursor: pointer;
}
.filter-chip:hover {
  border-color: rgba(99,102,241,0.40); color: var(--navy);
}
.filter-chip.is-active {
  background: var(--navy); color: white; border-color: var(--navy);
  box-shadow: 0 8px 18px -8px rgba(15,42,63,0.40);
}

.blog-featured {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: white; border: 1px solid var(--line); border-radius: 1.5rem;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s;
  text-decoration: none;
}
@media (min-width: 768px) {
  .blog-featured { grid-template-columns: 5fr 7fr; }
}
.blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 80px -30px rgba(15,42,63,0.25);
}
.blog-featured-art {
  position: relative; min-height: 320px;
  background: linear-gradient(140deg, #4338CA 0%, #7C3AED 50%, #06B6D4 100%);
  padding: 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.blog-featured-art .blob-bg {
  position: absolute; inset: -50% -50% auto auto; width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(244,114,182,0.5), transparent 70%);
  filter: blur(40px);
}
.blog-featured-tag {
  background: rgba(255,255,255,0.15); color: white; font-size: .72rem; font-weight: 700;
  padding: .35rem .75rem; border-radius: 9999px; letter-spacing: .08em;
  text-transform: uppercase; align-self: flex-start;
  border: 1px solid rgba(255,255,255,0.25);
  position: relative; z-index: 1;
}
.blog-featured-body { padding: 2.5rem; }

.blog-card {
  background: white; border: 1px solid var(--line); border-radius: 1.25rem;
  overflow: hidden; cursor: pointer;
  transition: transform .35s, box-shadow .35s, border-color .25s;
  display: flex; flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -25px rgba(15,42,63,0.22);
  border-color: rgba(99,102,241,0.30);
}
.blog-card-art {
  position: relative; aspect-ratio: 16 / 9;
  padding: 1.25rem;
  display: flex; align-items: flex-start;
}
.blog-card-tag {
  background: rgba(255,255,255,0.18); color: white; font-size: .68rem; font-weight: 700;
  padding: .3rem .65rem; border-radius: 9999px; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.blog-card-body { padding: 1.25rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-body h3 {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.1rem;
  color: var(--navy); line-height: 1.3;
}
.blog-card-body p {
  color: rgba(15,42,63,0.70); font-size: .9rem; line-height: 1.5;
  margin: .65rem 0 0;
}
.blog-card-body .meta {
  margin-top: 1rem; font-size: .78rem; color: rgba(15,42,63,0.55);
  font-weight: 500;
}

/* ============================================================
   DEMO PAGE
   ============================================================ */
.demo-check {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #4F46E5, #06B6D4);
  color: white; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.demo-check i { width: 16px; height: 16px; }

.demo-form-card {
  background: white; border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 2rem;
  box-shadow: 0 40px 80px -30px rgba(15,42,63,0.20);
}
.demo-field { display: flex; flex-direction: column; gap: .35rem; }
.demo-field > span {
  font-size: .82rem; font-weight: 600; color: var(--navy);
}
.demo-field input,
.demo-field select,
.demo-field textarea {
  width: 100%;
  padding: .7rem .85rem; border-radius: .65rem;
  border: 1px solid rgba(15,42,63,0.14);
  background: white; color: var(--navy);
  font-family: inherit; font-size: .92rem;
  transition: border-color .15s, box-shadow .15s;
}
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.demo-field textarea { resize: vertical; }

.demo-step {
  background: white; border: 1px solid var(--line); border-radius: 1.25rem;
  padding: 1.75rem;
  transition: transform .3s, border-color .25s;
}
.demo-step:hover { transform: translateY(-3px); border-color: rgba(99,102,241,0.30); }
.demo-step-num {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.6rem; color: var(--indigo);
  letter-spacing: -.02em;
}

/* Current page indicator in nav */
.nav-link.is-current {
  color: var(--navy); font-weight: 600;
}
.nav-link.is-current::after {
  transform: scaleX(1);
}

/* ===========================================================================
   Register page — plan picker pills
   =========================================================================== */
.plan-pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.plan-pill:hover { border-color: rgba(2,6,23,.25); transform: translateY(-1px); }
.plan-pill.is-active {
  border-color: #4F46E5;
  background: linear-gradient(180deg, rgba(79,70,229,.06), rgba(6,182,212,.06));
  box-shadow: 0 4px 16px -8px rgba(79,70,229,.4);
}
.plan-pill-name {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: #0F2A3F;
}
.plan-pill-price {
  font-size: .78rem;
  color: rgba(15,42,63,.65);
}
.plan-pill.is-active .plan-pill-price { color: #4F46E5; font-weight: 600; }