/* ============================================================
   components.css — Buttons, cards, forms, hero, badges, etc.
   Scanmatics Website — Royal Blue & Cream startup aesthetic
   All colours use CSS custom properties from base.css
   ============================================================ */

@layer components {

  /* ============================================================
     BUTTONS — Premium feel, shimmer on hover
     ============================================================ */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.75em 1.5em;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
      background-color var(--duration-base) var(--ease-out),
      border-color     var(--duration-base) var(--ease-out),
      color            var(--duration-base) var(--ease-out),
      box-shadow       var(--duration-base) var(--ease-out),
      transform        var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
  }

  .btn:active { transform: translateY(1px); }

  /* ── Primary — royal blue fill, bright text + shimmer ── */
  .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-heading);
    border-color: var(--color-accent);
  }

  /* Shimmer sweep pseudo-element */
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      oklch(99% 0.005 var(--hue-secondary) / 0.18) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
  }

  .btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }

  /* ── Secondary — ghost/outline on dark ── */
  .btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: oklch(96% 0.012 var(--hue-secondary) / 0.25);
  }

  .btn-secondary:hover {
    background-color: oklch(96% 0.012 var(--hue-secondary) / 0.08);
    border-color: oklch(96% 0.012 var(--hue-secondary) / 0.5);
  }

  /* ── Outline — for use on light backgrounds ── */
  .btn-outline {
    background-color: transparent;
    color: var(--color-bg);
    border-color: oklch(60% 0.05 var(--hue-primary));
  }

  .btn-outline:hover {
    background-color: var(--color-accent-pale);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* ── Sizes ── */
  .btn-lg {
    padding: 0.9em 2em;
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
  }

  .btn-sm {
    padding: 0.55em 1.1em;
    font-size: var(--text-xs);
  }

  /* ── Button with arrow icon ── */
  .btn-arrow::after {
    content: '\2192';
    display: inline-block;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .btn-arrow:hover::after { transform: translateX(4px); }


  /* ============================================================
     CARDS — Glass-morphism on dark, blue glow on hover
     ============================================================ */

  .card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    container-type: inline-size;
    container-name: card;
    transition:
      box-shadow    var(--duration-base) var(--ease-out),
      transform     var(--duration-base) var(--ease-out),
      border-color  var(--duration-base) var(--ease-out);
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.5);
    box-shadow: 0 8px 24px oklch(0% 0 0 / 0.35),
                0 0 0 1px oklch(58% 0.26 var(--hue-primary) / 0.12),
                0 0 20px var(--color-accent-glow);
  }

  /* ── Card on dark background (explicit dark variant) ── */
  .card-dark {
    background: oklch(18% 0.05 var(--hue-primary) / 0.8);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .card-dark h3,
  .card-dark h4 {
    color: var(--color-text-heading);
  }

  .card-dark p {
    color: var(--color-text-steel);
  }

  .card-dark:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px oklch(0% 0 0 / 0.3),
                0 0 24px var(--color-accent-glow);
  }

  /* ── Cards on light (.tint-section) backgrounds ── */
  .tint-section .card {
    background: oklch(100% 0 0);
    border-color: var(--color-border-light);
    backdrop-filter: none;
    box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06),
                0 4px 16px oklch(0% 0 0 / 0.04);
  }

  .tint-section .card:hover {
    box-shadow: 0 4px 16px oklch(0% 0 0 / 0.1),
                0 8px 32px oklch(0% 0 0 / 0.06);
    border-color: var(--color-accent);
  }

  .tint-section .card h3,
  .tint-section .card h4 {
    color: var(--color-bg);
  }

  .tint-section .card p {
    color: oklch(30% 0.05 var(--hue-primary));
  }

  /* ── Icon wrapper inside card ── */
  .card-icon {
    width: 3rem;
    height: 3rem;
    background: var(--color-accent-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-md);
    flex-shrink: 0;
    border: 1px solid oklch(58% 0.26 var(--hue-primary) / 0.2);
    transition: background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
  }

  .card:hover .card-icon {
    background: oklch(58% 0.26 var(--hue-primary) / 0.18);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.35);
  }

  .card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent-light);
  }

  .tint-section .card-icon {
    background: var(--color-accent-pale);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.15);
  }

  .tint-section .card-icon svg {
    color: var(--color-accent);
  }

  .card h3 {
    font-size: var(--text-xl);
    margin-block-end: var(--space-sm);
  }

  .card p {
    color: var(--color-text-steel);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  /* ── Card link with arrow animation ── */
  .card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-light);
    text-decoration: none;
    transition: gap var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }

  .card-link:hover {
    gap: var(--space-sm);
    color: var(--color-accent-hover);
  }

  .tint-section .card-link {
    color: var(--color-accent);
  }

  .tint-section .card-link:hover {
    color: var(--color-accent-hover);
  }

  /* ── Card grid layout ── */
  .card-grid {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* ── Feature card (consulting/software pages) ── */
  .feature-card {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-lg);
    background: oklch(16% 0.05 var(--hue-primary) / 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
  }

  .feature-card:hover {
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.4);
    box-shadow: 0 4px 16px var(--color-accent-glow);
  }

  .tint-section .feature-card {
    background: oklch(100% 0 0);
    border-color: var(--color-border-light);
    backdrop-filter: none;
  }

  .feature-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background: var(--color-accent-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid oklch(58% 0.26 var(--hue-primary) / 0.2);
  }

  .feature-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent-light);
  }

  .tint-section .feature-card-icon {
    background: var(--color-accent-pale);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.15);
  }

  .tint-section .feature-card-icon svg {
    color: var(--color-accent);
  }

  .feature-card-body h4 {
    font-size: var(--text-base);
    margin-block-end: var(--space-2xs);
  }

  .feature-card-body p {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
    max-width: none;
  }

  .tint-section .feature-card-body p {
    color: oklch(30% 0.05 var(--hue-primary));
  }

  /* ── Blog post card ── */
  .post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
      box-shadow    var(--duration-base) var(--ease-out),
      transform     var(--duration-base) var(--ease-out),
      border-color  var(--duration-base) var(--ease-out);
  }

  .post-card h3 a::after,
  .card-linked h2 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card-linked {
    position: relative;
    cursor: pointer;
  }

  .post-card:hover {
    transform: translateY(-3px);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.45);
    box-shadow: 0 8px 28px oklch(0% 0 0 / 0.35),
                0 0 16px var(--color-accent-glow);
  }

  .post-card-body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .post-card-body h3 {
    font-size: var(--text-xl);
    line-height: 1.3;
    margin-block: var(--space-sm);
    color: var(--color-text-heading);
  }

  .post-card-body p {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
    line-height: 1.7;
  }

  .post-card-body .card-link {
    margin-block-start: auto;
    padding-block-start: var(--space-md);
  }

  .tint-section .post-card {
    background: oklch(100% 0 0);
    border-color: var(--color-border-light);
    backdrop-filter: none;
    box-shadow: 0 1px 4px oklch(0% 0 0 / 0.06),
                0 4px 16px oklch(0% 0 0 / 0.04);
  }

  .tint-section .post-card:hover {
    box-shadow: 0 4px 16px oklch(0% 0 0 / 0.1),
                0 8px 32px oklch(0% 0 0 / 0.06);
    border-color: var(--color-accent);
  }

  .tint-section .post-card-body h3 {
    color: var(--color-bg);
  }

  .tint-section .post-card-body p {
    color: oklch(30% 0.05 var(--hue-primary));
  }


  /* ============================================================
     BADGES & TAGS
     ============================================================ */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.25em 0.75em;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Primary badge (royal blue) */
  .badge-primary {
    background: var(--color-accent-subtle);
    color: var(--color-accent-light);
    border: 1px solid oklch(58% 0.26 var(--hue-primary) / 0.2);
  }

  /* Amber alias — maps to primary for royal blue theme */
  .badge-amber {
    background: var(--color-accent-subtle);
    color: var(--color-accent-light);
    border: 1px solid oklch(58% 0.26 var(--hue-primary) / 0.2);
  }

  .badge-muted {
    background: var(--color-border);
    color: var(--color-text-steel);
  }

  .tint-section .badge-primary,
  .tint-section .badge-amber {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border-color: oklch(58% 0.26 var(--hue-primary) / 0.2);
  }

  .tint-section .badge-muted {
    background: oklch(88% 0.014 var(--hue-secondary));
    color: oklch(42% 0.05 var(--hue-primary));
  }

  /* ── Date meta ── */
  .post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .post-meta time { font-weight: 500; }


  /* ============================================================
     HERO (HOME) — Dramatic gradient mesh, animated orbs, dot grid
     ============================================================ */

  .home-hero {
    background:
      linear-gradient(
        160deg,
        oklch(8%  0.05 var(--hue-primary)) 0%,
        oklch(13% 0.05 var(--hue-primary)) 40%,
        oklch(16% 0.05 var(--hue-primary)) 70%,
        oklch(11% 0.06 calc(var(--hue-primary) + 12)) 100%
      );
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 12vw, 8rem);
  }

  /* Dot-grid background pattern */
  .home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      oklch(63% 0.05 var(--hue-primary) / 0.10) 1px,
      transparent 1px
    );
    background-size: 28px 28px;
    pointer-events: none;
  }

  /* Animated primary glow orb */
  .home-hero::after {
    content: '';
    position: absolute;
    top: -16rem;
    right: -14rem;
    width: 52rem;
    height: 52rem;
    background: radial-gradient(
      circle,
      oklch(58% 0.26 var(--hue-primary) / 0.10) 0%,
      oklch(70% 0.18 var(--hue-tertiary) / 0.05) 35%,
      transparent 65%
    );
    pointer-events: none;
    animation: pulse-glow 9s ease-in-out infinite;
  }

  .home-hero .container {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent-light);
    margin-block-end: var(--space-lg);
  }

  .hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
    flex-shrink: 0;
  }

  .hero-headline {
    font-size: var(--text-5xl);
    color: var(--color-text-heading);
    line-height: 1.05;
    max-width: 16ch;
    letter-spacing: -0.03em;
    font-weight: 800;
  }

  .hero-headline em {
    font-style: normal;
    /* Gradient text on emphasised words */
    background: linear-gradient(
      135deg,
      var(--color-primary-light),
      var(--color-tertiary)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-subhead {
    margin-block-start: var(--space-lg);
    font-size: var(--text-lg);
    color: var(--color-text-steel);
    max-width: 50ch;
    line-height: 1.7;
  }

  .hero-actions {
    margin-block-start: var(--space-2xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
  }

  .hero-stat-bar {
    margin-block-start: var(--space-3xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--color-border);
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .hero-stat-value {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-accent-light);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .hero-stat-label {
    font-size: 0.6875rem; /* 11px, smaller than --text-xs */
    color: var(--color-text-steel);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    max-width: 18ch;
  }


  /* ============================================================
     COST BANNER — Primary accent strip
     ============================================================ */

  .cost-banner {
    background: oklch(38% 0.22 var(--hue-primary));
    padding-block: var(--space-md);
    position: relative;
    overflow: hidden;
  }

  /* Subtle shimmer on the banner */
  .cost-banner::after {
    content: '';
    position: absolute;
    inset-block: 0;
    width: 3rem;
    background: linear-gradient(
      90deg,
      transparent,
      oklch(99% 0.005 var(--hue-secondary) / 0.15),
      transparent
    );
    animation: beam-sweep 4s ease-in-out infinite;
    pointer-events: none;
  }

  .cost-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .cost-banner-text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-heading);
    max-width: none;
  }

  .cost-banner-text strong {
    font-weight: 800;
  }


  /* ============================================================
     SECTION HEADINGS
     ============================================================ */

  .section-header {
    margin-block-end: var(--space-2xl);
  }

  .section-header.text-center {
    max-width: 42ch;
    margin-inline: auto;
  }

  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-light);
    margin-block-end: var(--space-sm);
  }

  .section-eyebrow::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
    flex-shrink: 0;
  }

  .tint-section .section-eyebrow {
    color: oklch(40% 0.20 var(--hue-primary));
  }

  .tint-section .section-eyebrow::before {
    background: var(--color-accent);
  }

  .section-header h2 {
    font-size: var(--text-3xl);
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .section-header p {
    margin-block-start: var(--space-md);
    font-size: var(--text-lg);
    color: var(--color-text-steel);
    max-width: 52ch;
  }

  .tint-section .section-header p {
    color: oklch(30% 0.05 var(--hue-primary));
  }


  /* ============================================================
     PROCESS STEPS — Large translucent numbers
     ============================================================ */

  .steps-list {
    list-style: none;
    display: grid;
    gap: var(--space-lg);
    counter-reset: steps;
  }

  @media (min-width: 48rem) {
    .steps-list { grid-template-columns: repeat(3, 1fr); }
  }

  .step-item {
    counter-increment: steps;
    position: relative;
    padding-block-start: var(--space-md);
  }

  .step-item::before {
    content: counter(steps, decimal-leading-zero);
    display: block;
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-accent);
    opacity: 0.30;
    line-height: 1;
    margin-block-end: var(--space-sm);
    letter-spacing: -0.04em;
  }

  .step-item h3 {
    font-size: var(--text-lg);
    margin-block-end: var(--space-xs);
    color: var(--color-text-heading);
  }

  .step-item p {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
  }

  .tint-section .step-item h3 {
    color: var(--color-bg);
  }

  .tint-section .step-item p {
    color: oklch(30% 0.05 var(--hue-primary));
  }

  .tint-section .step-item::before {
    color: var(--color-accent);
    opacity: 0.35;
  }


  /* ============================================================
     BEFORE / AFTER COMPARISON
     ============================================================ */

  .before-after {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 48rem) {
    .before-after { grid-template-columns: 1fr 1fr; }
  }

  .before-col,
  .after-col {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
  }

  .before-col {
    background: oklch(55% 0.22 25 / 0.06);
    border: 1px solid oklch(55% 0.22 25 / 0.2);
  }

  .after-col {
    background: oklch(55% 0.18 145 / 0.06);
    border: 1px solid oklch(55% 0.18 145 / 0.2);
  }

  .before-col h3 { color: oklch(65% 0.2 25); font-size: var(--text-lg); }
  .after-col  h3 { color: oklch(65% 0.18 145); font-size: var(--text-lg); }

  .ba-list {
    list-style: none;
    margin-block-start: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .ba-list li {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    align-items: flex-start;
    max-width: none;
    color: var(--color-text);
  }

  .ba-list li::before {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    margin-block-start: 0.1em;
  }

  .before-col .ba-list li::before {
    content: '\2715';
    color: oklch(65% 0.2 25);
    font-weight: 700;
  }

  .after-col .ba-list li::before {
    content: '\2713';
    color: oklch(65% 0.18 145);
    font-weight: 700;
  }

  .tint-section .ba-list li {
    color: oklch(30% 0.05 var(--hue-primary));
  }


  /* ============================================================
     CTA SECTION — Dramatic gradient mesh with animated glow
     ============================================================ */

  .cta-section {
    background:
      linear-gradient(
        160deg,
        oklch(8%  0.05 var(--hue-primary)) 0%,
        oklch(14% 0.05 var(--hue-primary)) 50%,
        oklch(11% 0.06 calc(var(--hue-primary) + 10)) 100%
      );
    padding-block: var(--space-4xl);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  /* Dot grid overlay */
  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      oklch(63% 0.05 var(--hue-primary) / 0.08) 1px,
      transparent 1px
    );
    background-size: 24px 24px;
    pointer-events: none;
  }

  /* Centered animated glow orb */
  .cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44rem;
    height: 44rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      oklch(58% 0.26 var(--hue-primary) / 0.10) 0%,
      oklch(70% 0.18 var(--hue-tertiary) / 0.05) 40%,
      transparent 65%
    );
    pointer-events: none;
    animation: pulse-glow 9s ease-in-out infinite;
  }

  .cta-section .container { position: relative; z-index: 1; }

  .cta-section h2 {
    color: var(--color-text-heading);
    font-size: var(--text-3xl);
    max-width: 24ch;
    margin-inline: auto;
  }

  .cta-section p {
    color: var(--color-text-steel);
    margin-block-start: var(--space-md);
    font-size: var(--text-lg);
    max-width: 44ch;
    margin-inline: auto;
  }

  .cta-actions {
    margin-block-start: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
  }


  /* ============================================================
     CONTACT FORM — Glass inputs, primary focus rings
     ============================================================ */

  .contact-form {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: 0 4px 24px oklch(0% 0 0 / 0.25);
  }

  .tint-section .contact-form {
    background: oklch(100% 0 0);
    border-color: var(--color-border-light);
    backdrop-filter: none;
    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08),
                0 8px 32px oklch(0% 0 0 / 0.05);
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .form-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
  }

  .tint-section .form-label {
    color: oklch(25% 0.05 var(--hue-primary));
  }

  .form-label .optional {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-inline-start: var(--space-2xs);
  }

  .form-input,
  .form-textarea {
    width: 100%;
    padding: 0.75em 1em;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    line-height: 1.5;
    transition:
      border-color var(--duration-fast) var(--ease-out),
      box-shadow   var(--duration-fast) var(--ease-out);
    outline: none;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-text-muted);
  }

  .form-input:focus,
  .form-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
  }

  .tint-section .form-input,
  .tint-section .form-textarea {
    color: oklch(20% 0.05 var(--hue-primary));
    background: var(--color-secondary-bright);
    border-color: oklch(78% 0.02 var(--hue-secondary));
  }

  .tint-section .form-input::placeholder,
  .tint-section .form-textarea::placeholder {
    color: oklch(58% 0.03 var(--hue-primary));
  }

  .form-textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .form-stack {
    display: grid;
    gap: var(--space-lg);
  }

  .form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .form-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  /* ── Form status messages ── */
  .form-status {
    display: none;
    padding: var(--space-md);
    margin: var(--space-md) 0;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .form-status.is-success {
    display: block;
    background: oklch(55% 0.18 145 / 0.1);
    border: 1px solid oklch(55% 0.18 145 / 0.3);
    color: oklch(70% 0.18 145);
  }

  .form-status.is-error {
    display: block;
    background: oklch(55% 0.22 25 / 0.08);
    border: 1px solid oklch(55% 0.22 25 / 0.25);
    color: oklch(65% 0.2 25);
  }


  /* ============================================================
     PROCESS TIMELINE (vertical) — Glowing dots
     ============================================================ */

  .timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background: linear-gradient(
      to bottom,
      var(--color-accent),
      oklch(26% 0.05 var(--hue-primary))
    );
  }

  .timeline-item {
    display: flex;
    gap: var(--space-lg);
    padding-block-end: var(--space-xl);
    position: relative;
  }

  .timeline-item:last-child { padding-block-end: 0; }

  .timeline-dot {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-text-heading);
    z-index: 1;
    box-shadow:
      0 0 0 4px oklch(18% 0.05 var(--hue-primary)),
      0 0 20px var(--color-accent-glow),
      0 0 40px oklch(58% 0.26 var(--hue-primary) / 0.08);
  }

  .timeline-content h3 {
    font-size: var(--text-lg);
    color: var(--color-text-heading);
    margin-block-end: var(--space-xs);
  }

  .timeline-content p {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
  }


  /* ============================================================
     TOC (Table of Contents — blog articles)
     ============================================================ */

  .toc {
    background: oklch(18% 0.05 var(--hue-primary) / 0.8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .toc-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    margin-block-end: var(--space-md);
  }

  .toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .toc-list a {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
    display: block;
    padding-block: var(--space-2xs);
  }

  .toc-list a:hover,
  .toc-list a.is-active {
    color: var(--color-accent-light);
  }

  .toc-list .toc-h3 {
    padding-inline-start: var(--space-md);
  }


  /* ============================================================
     ARTICLE HEADER
     ============================================================ */

  .article-header {
    padding-block: var(--space-4xl);
    background:
      linear-gradient(
        160deg,
        oklch(10% 0.05 var(--hue-primary)) 0%,
        oklch(15% 0.05 var(--hue-primary)) 50%,
        oklch(12% 0.06 calc(var(--hue-primary) + 10)) 100%
      );
    position: relative;
    overflow: hidden;
  }

  .article-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      oklch(63% 0.05 var(--hue-primary) / 0.08) 1px,
      transparent 1px
    );
    background-size: 24px 24px;
    pointer-events: none;
  }

  .article-header::after {
    content: '';
    position: absolute;
    top: -10rem;
    right: -8rem;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(
      circle,
      oklch(58% 0.26 var(--hue-primary) / 0.07) 0%,
      oklch(70% 0.18 var(--hue-tertiary) / 0.03) 40%,
      transparent 60%
    );
    pointer-events: none;
    animation: pulse-glow 10s ease-in-out infinite;
  }

  .article-header .container { position: relative; z-index: 1; }

  .article-header h1 {
    color: var(--color-text-heading);
    max-width: 22ch;
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .article-header .post-meta {
    margin-block-start: var(--space-lg);
  }

  .article-header .post-meta * { color: var(--color-text-steel); }


  /* ============================================================
     STAT GRID — Glass items with glow hover
     ============================================================ */

  .stat-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 30rem) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .stat-item {
    text-align: center;
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: oklch(18% 0.05 var(--hue-primary) / 0.7);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }

  .stat-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px oklch(0% 0 0 / 0.3),
                0 0 24px var(--color-accent-glow);
    transform: translateY(-2px);
  }

  .stat-value {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-accent-light);
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-steel);
    margin-block-start: var(--space-xs);
    text-wrap: balance;
  }


  /* ============================================================
     FLOW DIAGRAM (QR workflow)
     ============================================================ */

  .flow-diagram {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-xl);
    background: oklch(16% 0.05 var(--hue-primary) / 0.6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .tint-section .flow-diagram {
    background: oklch(93% 0.012 var(--hue-secondary));
    border-color: var(--color-border-light);
    backdrop-filter: none;
  }

  .flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
    min-width: 5rem;
    text-align: center;
  }

  .flow-step-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: oklch(92% 0.012 var(--hue-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid oklch(80% 0.02 var(--hue-secondary));
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
  }

  .flow-step:hover .flow-step-icon {
    border-color: oklch(70% 0.03 var(--hue-secondary));
    box-shadow: 0 0 16px oklch(92% 0.012 var(--hue-secondary) / 0.3);
    background: oklch(96% 0.008 var(--hue-secondary));
  }

  .flow-step-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: oklch(28% 0.05 var(--hue-primary));
  }

  .flow-step-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
  }

  .tint-section .flow-step-label {
    color: var(--color-bg);
  }

  .flow-arrow {
    color: var(--color-text-steel);
    font-size: var(--text-xl);
    flex-shrink: 0;
  }
}