/* GENERATED from DESIGN.md by tools/build.mjs — do not edit by hand. */
:root {
  --color-ink: #141110;
  --color-ink-2: #4a4440;
  --color-ink-3: #8a827c;
  --color-ink-4: #b8b0a9;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-yellow-200: #fbeda0;
  --color-yellow-400: #f4d35e;
  --color-yellow-500: #e8bf2e;
  --color-wood-400: #a8754b;
  --color-wood-500: #7d5336;
  --color-wood-700: #4b3122;
  --color-peach: #f7c9a0;
  --color-terracotta: #cf6a43;
  --color-canvas: #fbf8f5;
  --color-paper: #fffdfb;
  --color-sunken: #f4efea;
  --color-dark: #141110;
  --color-dark-2: #1f1a17;
  --color-dark-3: #2c2521;
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-2);
  --color-text-subtle: var(--color-ink-3);
  --color-text-accent: var(--color-orange-700);
  --color-on-orange: var(--color-ink);
  --color-on-dark: #fffdfb;
  --color-on-dark-muted: rgba(255, 253, 251, 0.68);
  --color-on-dark-subtle: rgba(255, 253, 251, 0.42);
  --color-hairline: rgba(20, 17, 16, 0.08);
  --color-hairline-strong: rgba(20, 17, 16, 0.14);
  --color-hairline-dark: rgba(255, 253, 251, 0.10);
  --color-hairline-orange: rgba(249, 115, 22, 0.32);
  --color-focus: var(--color-orange-600);
  --color-selection: var(--color-orange-200);
  --color-success: #15803d;
  --color-success-bright: #4ade80;
  --color-success-bg: #ecfdf3;
  --color-error: #b42318;
  --color-error-bg: #fdf1ec;
  --color-scrim: rgba(20, 17, 16, 0.44);
  --gradient-brand: linear-gradient(135deg, var(--color-orange-600) 0%, var(--color-orange-500) 50%, var(--color-amber-500) 100%);
  --gradient-brand-hover: linear-gradient(135deg, var(--color-orange-500) 0%, var(--color-amber-500) 60%, var(--color-amber-400) 100%);
  --gradient-soft: linear-gradient(135deg, var(--color-orange-200) 0%, var(--color-amber-200) 100%);
  --gradient-text: linear-gradient(100deg, var(--color-orange-700) 0%, var(--color-orange-600) 45%, var(--color-amber-600) 100%);
  --gradient-canvas-glow: radial-gradient(60% 45% at 12% 0%, rgba(251, 146, 60, 0.22), transparent 70%), radial-gradient(50% 40% at 92% 8%, rgba(245, 158, 11, 0.16), transparent 72%);
  --gradient-dark-glow: radial-gradient(70% 60% at 20% 0%, rgba(234, 88, 12, 0.28), transparent 70%);
  --gradient-brand-amber: linear-gradient(135deg, var(--color-amber-600) 0%, var(--color-amber-500) 50%, var(--color-amber-300) 100%);
  --gradient-text-amber: linear-gradient(100deg, var(--color-amber-700) 0%, var(--color-amber-600) 50%, var(--color-orange-700) 100%);
  --gradient-glow-amber: radial-gradient(60% 45% at 12% 0%, rgba(245, 158, 11, 0.24), transparent 70%), radial-gradient(50% 40% at 92% 8%, rgba(252, 211, 77, 0.22), transparent 72%);
  --gradient-dark-glow-amber: radial-gradient(70% 60% at 20% 0%, rgba(245, 158, 11, 0.26), transparent 70%);
  --gradient-brand-rust: linear-gradient(135deg, var(--color-orange-600) 0%, var(--color-orange-500) 55%, var(--color-orange-400) 100%);
  --gradient-text-rust: linear-gradient(100deg, var(--color-orange-900) 0%, var(--color-orange-800) 50%, var(--color-orange-700) 100%);
  --gradient-glow-rust: radial-gradient(60% 45% at 12% 0%, rgba(194, 65, 12, 0.18), transparent 70%), radial-gradient(50% 40% at 92% 8%, rgba(154, 52, 18, 0.14), transparent 72%);
  --gradient-dark-glow-rust: radial-gradient(70% 60% at 20% 0%, rgba(194, 65, 12, 0.36), transparent 70%);
  --gradient-brand-wood: linear-gradient(135deg, var(--color-wood-400) 0%, var(--color-amber-500) 55%, var(--color-amber-300) 100%);
  --gradient-text-wood: linear-gradient(100deg, var(--color-wood-700) 0%, var(--color-wood-500) 50%, var(--color-terracotta) 100%);
  --gradient-glow-wood: radial-gradient(60% 45% at 12% 0%, rgba(168, 117, 75, 0.22), transparent 70%), radial-gradient(50% 40% at 92% 8%, rgba(244, 211, 94, 0.18), transparent 72%);
  --gradient-dark-glow-wood: radial-gradient(70% 60% at 20% 0%, rgba(168, 117, 75, 0.34), transparent 70%);
  --gradient-brand-peach: linear-gradient(135deg, var(--color-orange-400) 0%, var(--color-orange-300) 55%, var(--color-peach) 100%);
  --gradient-text-peach: linear-gradient(100deg, var(--color-terracotta) 0%, var(--color-orange-700) 50%, var(--color-orange-600) 100%);
  --gradient-glow-peach: radial-gradient(60% 45% at 12% 0%, rgba(247, 201, 160, 0.42), transparent 70%), radial-gradient(50% 40% at 92% 8%, rgba(207, 106, 67, 0.14), transparent 72%);
  --gradient-dark-glow-peach: radial-gradient(70% 60% at 20% 0%, rgba(207, 106, 67, 0.32), transparent 70%);
  --font-google-href-bn: https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Hind+Siliguri:wght@400;500;600;700&display=swap;
  --font-display: "Cinzel", "Playfair Display", Georgia, serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-family: var(--font-display);
  --type-display-size: clamp(40px, 7vw, 76px);
  --type-display-weight: 700;
  --type-display-leading: 1.04;
  --type-display-tracking: 0.01em;
  --type-display-case: none;
  --type-h1-family: var(--font-display);
  --type-h1-size: clamp(34px, 5.6vw, 58px);
  --type-h1-weight: 700;
  --type-h1-leading: 1.08;
  --type-h1-tracking: 0.015em;
  --type-h1-case: none;
  --type-h2-family: var(--font-display);
  --type-h2-size: clamp(28px, 4.2vw, 44px);
  --type-h2-weight: 600;
  --type-h2-leading: 1.12;
  --type-h2-tracking: 0.02em;
  --type-h2-case: none;
  --type-h3-family: var(--font-display);
  --type-h3-size: clamp(19px, 2.2vw, 23px);
  --type-h3-weight: 700;
  --type-h3-leading: 1.25;
  --type-h3-tracking: 0.02em;
  --type-h3-case: none;
  --type-h4-family: var(--font-display);
  --type-h4-size: 16px;
  --type-h4-weight: 700;
  --type-h4-leading: 1.3;
  --type-h4-tracking: 0.03em;
  --type-h4-case: none;
  --type-subheading-family: var(--font-sans);
  --type-subheading-size: clamp(17px, 1.6vw, 19px);
  --type-subheading-weight: 400;
  --type-subheading-leading: 1.6;
  --type-subheading-tracking: 0;
  --type-subheading-case: none;
  --type-body-lg-family: var(--font-sans);
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.7;
  --type-body-lg-tracking: 0;
  --type-body-lg-case: none;
  --type-body-family: var(--font-sans);
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-leading: 1.65;
  --type-body-tracking: 0;
  --type-body-case: none;
  --type-body-sm-family: var(--font-sans);
  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.6;
  --type-body-sm-tracking: 0;
  --type-body-sm-case: none;
  --type-meta-family: var(--font-sans);
  --type-meta-size: 13px;
  --type-meta-weight: 500;
  --type-meta-leading: 1.4;
  --type-meta-tracking: 0.01em;
  --type-meta-case: none;
  --type-eyebrow-family: var(--font-sans);
  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-leading: 1;
  --type-eyebrow-tracking: 0.16em;
  --type-eyebrow-case: uppercase;
  --type-button-family: var(--font-sans);
  --type-button-size: 15px;
  --type-button-weight: 600;
  --type-button-leading: 1;
  --type-button-tracking: 0.005em;
  --type-button-case: none;
  --type-nav-family: var(--font-sans);
  --type-nav-size: 14px;
  --type-nav-weight: 500;
  --type-nav-leading: 1;
  --type-nav-tracking: 0.005em;
  --type-nav-case: none;
  --type-quote-family: var(--font-serif);
  --type-quote-size: clamp(18px, 2vw, 22px);
  --type-quote-weight: 500;
  --type-quote-leading: 1.45;
  --type-quote-tracking: 0;
  --type-quote-case: none;
  --type-wordmark-family: var(--font-display);
  --type-wordmark-size: 16px;
  --type-wordmark-weight: 700;
  --type-wordmark-leading: 1;
  --type-wordmark-tracking: 0.04em;
  --type-wordmark-case: none;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-section: clamp(56px, 7vw, 96px);
  --radius-hair: 2px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --border-thin: 1px solid var(--color-hairline);
  --border-strong: 1px solid var(--color-hairline-strong);
  --border-dark: 1px solid var(--color-hairline-dark);
  --border-accent: 1.5px solid var(--color-orange-400);
  --border-focus-ring: 2.5px solid var(--color-focus);
  --shadow-sm: 0 1px 2px rgba(20, 17, 16, 0.04), 0 2px 8px rgba(20, 17, 16, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 17, 16, 0.06), 0 14px 34px rgba(20, 17, 16, 0.08);
  --shadow-lg: 0 10px 26px rgba(20, 17, 16, 0.08), 0 30px 70px rgba(20, 17, 16, 0.12);
  --shadow-glow: 0 12px 30px rgba(234, 88, 12, 0.28);
  --shadow-island: 0 10px 30px rgba(20, 17, 16, 0.28), 0 2px 6px rgba(20, 17, 16, 0.2);
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
  --motion-reveal: 760ms;
  --motion-island: 560ms;
  --motion-stagger: 80ms;
  --motion-pulse: 2.2s;
  --motion-reveal-distance: 26px;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-base: 1;
  --z-raised: 10;
  --z-fab: 80;
  --z-island: 100;
  --z-overlay: 200;
  --layout-max: 1200px;
  --layout-prose: 720px;
  --layout-gutter: clamp(16px, 4vw, 28px);
  --layout-island-top: 14px;
  --layout-island-clearance: 56px;
  --c-island-bg: var(--color-dark);
  --c-island-text: var(--color-on-dark);
  --c-island-text-muted: var(--color-on-dark-muted);
  --c-island-link-hover-bg: rgba(255, 253, 251, 0.08);
  --c-island-radius: var(--radius-pill);
  --c-island-radius-open: var(--radius-xl);
  --c-island-height: 52px;
  --c-island-pad: 6px;
  --c-island-width-mobile: 560px;
  --c-island-link-height: 40px;
  --c-island-toggle-size: 40px;
  --c-island-dot-size: 7px;
  --c-island-icon-size: 18px;
  --c-island-duration: var(--motion-island);
  --c-island-shadow: var(--shadow-island);
  --c-island-progress: var(--gradient-brand);
  --c-island-cta-bg: var(--gradient-brand);
  --c-island-cta-text: var(--color-on-orange);
  --c-button-height: 48px;
  --c-button-height-sm: 38px;
  --c-button-pad-x: 22px;
  --c-button-pad-x-sm: 16px;
  --c-button-radius: var(--radius-md);
  --c-button-primary-bg: var(--gradient-brand);
  --c-button-primary-bg-hover: var(--gradient-brand-hover);
  --c-button-primary-text: var(--color-on-orange);
  --c-button-primary-shadow: var(--shadow-glow);
  --c-button-secondary-bg: var(--color-paper);
  --c-button-secondary-text: var(--color-ink);
  --c-button-secondary-border: var(--border-strong);
  --c-button-ghost-text: var(--color-text-accent);
  --c-button-dark-bg: var(--color-dark);
  --c-button-dark-text: var(--color-on-dark);
  --c-card-bg: var(--color-paper);
  --c-card-border: var(--border-thin);
  --c-card-border-hover: var(--color-hairline-orange);
  --c-card-radius: var(--radius-lg);
  --c-card-pad: var(--space-md);
  --c-card-shadow: var(--shadow-sm);
  --c-card-shadow-hover: var(--shadow-md);
  --c-card-lift: -4px;
  --c-card-dark-bg: var(--color-dark-2);
  --c-card-dark-border: var(--border-dark);
  --c-icon-tile-size: 44px;
  --c-icon-tile-radius: var(--radius-sm);
  --c-icon-tile-text: var(--color-on-orange);
  --c-icon-tile-bg-1: linear-gradient(135deg, var(--color-orange-500), var(--color-amber-500));
  --c-icon-tile-bg-2: linear-gradient(135deg, var(--color-orange-600), var(--color-orange-400));
  --c-icon-tile-bg-3: linear-gradient(135deg, var(--color-amber-500), var(--color-amber-300));
  --c-icon-tile-bg-4: linear-gradient(135deg, var(--color-orange-400), var(--color-orange-200));
  --c-chip-height: 30px;
  --c-chip-pad-x: 12px;
  --c-chip-radius: var(--radius-pill);
  --c-chip-bg: var(--color-orange-50);
  --c-chip-border: 1px solid var(--color-orange-200);
  --c-chip-text: var(--color-ink);
  --c-chip-bg-hover: var(--color-orange-400);
  --c-chip-dot-size: 8px;
  --c-section-header-gap: var(--space-xs);
  --c-section-header-max: var(--layout-prose);
  --c-section-header-eyebrow: var(--color-text-accent);
  --c-section-header-eyebrow-rule: var(--gradient-brand);
  --c-section-header-title: var(--color-text);
  --c-section-header-accent: var(--gradient-text);
  --c-section-header-sub: var(--color-text-muted);
  --c-section-header-rule-width: 28px;
  --c-lang-toggle-bg: rgba(255, 253, 251, 0.08);
  --c-lang-toggle-text: var(--color-on-dark-muted);
  --c-lang-toggle-active-bg: var(--gradient-brand);
  --c-lang-toggle-active-text: var(--color-on-orange);
  --c-lang-toggle-radius: var(--radius-pill);
  --c-lang-toggle-height: 30px;
  --c-wordmark-height: 26px;
  --c-wordmark-height-sm: 20px;
  --c-wordmark-height-lg: 56px;
  --c-wordmark-ink: var(--color-ink);
  --c-wordmark-ink-on-dark: var(--color-on-dark);
  --c-field-height: 48px;
  --c-field-radius: var(--radius-sm);
  --c-field-bg: var(--color-paper);
  --c-field-border: var(--border-strong);
  --c-field-border-focus: var(--color-orange-500);
  --c-field-label: var(--color-text-subtle);
  --c-field-focus-ring: 0 0 0 4px var(--color-orange-100);
  --c-field-textarea-min: 140px;
  --c-accordion-border: var(--border-thin);
  --c-accordion-radius: var(--radius-md);
  --c-accordion-icon-bg: var(--color-orange-100);
  --c-accordion-icon-bg-open: var(--color-orange-500);
  --c-accordion-icon-mark: var(--color-ink);
  --c-accordion-icon-size: 28px;
  --c-footer-bg: var(--color-dark);
  --c-footer-text: var(--color-on-dark-muted);
  --c-footer-heading: var(--color-orange-300);
  --c-footer-link-hover: var(--color-on-dark);
  --c-footer-fine: var(--color-on-dark-subtle);
  --c-footer-glow: var(--gradient-dark-glow);
  --c-contact-links-gap: var(--space-2xs);
  --c-contact-links-pill-height: 48px;
  --c-contact-links-pill-pad: 6px 18px 6px 6px;
  --c-contact-links-pill-bg: var(--color-paper);
  --c-contact-links-pill-border: var(--border-thin);
  --c-contact-links-pill-text: var(--color-ink);
  --c-contact-links-pill-dark-bg: var(--color-dark-2);
  --c-contact-links-pill-dark-border: var(--border-dark);
  --c-contact-links-pill-dark-text: var(--color-on-dark);
  --c-contact-links-icon-size: 36px;
  --c-contact-links-icon-size-lg: 52px;
  --c-contact-links-icon-radius: var(--radius-sm);
  --c-contact-links-icon-ink: var(--color-ink);
  --c-contact-links-icon-email: linear-gradient(135deg, var(--color-orange-600), var(--color-orange-400));
  --c-contact-links-icon-whatsapp: linear-gradient(135deg, var(--color-amber-500), var(--color-amber-300));
  --c-contact-links-icon-linkedin: linear-gradient(135deg, var(--color-orange-500), var(--color-amber-400));
  --c-contact-links-icon-github: linear-gradient(135deg, var(--color-orange-300), var(--color-amber-200));
  --c-hero-gap: var(--space-2xl);
  --c-hero-avatar-size: 88px;
  --c-hero-line-size: clamp(36px, 4.9vw, 64px);
  --c-hero-avatar-ring: var(--gradient-brand);
  --c-hero-avatar-shadow: var(--shadow-md);
  --c-hero-stage-height: 460px;
  --c-hero-window-shadow: var(--shadow-lg);
  --c-hero-badge-icon: 28px;
  --c-hero-badge-bg: rgba(20, 17, 16, 0.86);
  --c-hero-badge-text: var(--color-on-dark);
  --c-stat-strip-value: var(--color-ink);
  --c-stat-strip-value-size: clamp(28px, 3.4vw, 38px);
  --c-stat-strip-label: var(--color-text-subtle);
  --c-stat-strip-divider: var(--border-thin);
  --c-viz-height: 196px;
  --c-viz-bg: var(--color-dark);
  --c-viz-surface: var(--color-dark-2);
  --c-viz-surface-2: var(--color-dark-3);
  --c-viz-text: var(--color-on-dark);
  --c-viz-muted: var(--color-on-dark-muted);
  --c-viz-subtle: var(--color-on-dark-subtle);
  --c-viz-line: var(--color-hairline-dark);
  --c-viz-accent: var(--gradient-brand);
  --c-viz-accent-solid: var(--color-orange-500);
  --c-viz-ok: var(--color-success-bright);
  --c-viz-warn: var(--color-amber-400);
  --c-viz-radius: var(--radius-md);
  --c-viz-inner-radius: var(--radius-xs);
  --c-viz-glow: var(--gradient-dark-glow);
  --c-viz-bars-height: 72px;
  --c-viz-device-width: 112px;
  --c-case-card-fact-value: var(--color-orange-300);
  --c-case-card-fact-size: clamp(26px, 3vw, 34px);
  --c-case-card-fact-label: var(--color-on-dark-muted);
  --c-process-steps-num-size: 48px;
  --c-process-steps-num-bg: var(--gradient-brand);
  --c-process-steps-num-text: var(--color-on-orange);
  --c-process-steps-line: var(--color-orange-200);
  --c-contact-form-gap: var(--space-sm);
  --c-timeline-dot-size: 14px;
  --c-timeline-dot: var(--gradient-brand);
  --c-timeline-line: var(--color-orange-200);
  --c-timeline-when: var(--color-text-accent);
  --c-breadcrumb-text: var(--color-text-subtle);
  --c-breadcrumb-current: var(--color-text-accent);
  --c-page-hero-gap: var(--space-2xl);
  --c-page-hero-scene-max: 520px;
  --c-page-hero-scene-wide: 760px;
  --c-page-hero-copy-max: 820px;
  --c-pain-cards-quote: var(--color-ink);
  --c-pain-cards-mark: var(--gradient-brand);
  --c-pain-cards-mark-height: 3px;
  --c-story-scroll-step-min: 58vh;
  --c-story-scroll-sticky-top: 16vh;
  --c-story-scroll-rail: var(--color-orange-100);
  --c-story-scroll-rail-fill: var(--gradient-brand);
  --c-story-scroll-rail-width: 3px;
  --c-story-scroll-num: var(--color-text-accent);
  --c-story-scroll-dim: 0.32;
  --c-story-scroll-autoplay-ms: 1800;
  --c-offer-card-num: var(--color-orange-300);
  --c-offer-card-log-bg: var(--color-dark);
  --c-offer-card-log-text: var(--color-on-dark-muted);
  --c-offer-card-log-accent: var(--color-orange-300);
  --c-offer-card-log-step: 420ms;
  --c-flow-diagram-node-bg: var(--color-dark-2);
  --c-flow-diagram-node-border: var(--border-dark);
  --c-flow-diagram-node-text: var(--color-on-dark);
  --c-flow-diagram-node-sub: var(--color-on-dark-subtle);
  --c-flow-diagram-node-on-ring: var(--color-orange-500);
  --c-flow-diagram-node-on-shadow: 0 0 0 1px var(--color-orange-500), 0 12px 30px rgba(234, 88, 12, 0.28);
  --c-flow-diagram-line: var(--color-dark-3);
  --c-flow-diagram-line-on: var(--gradient-brand);
  --c-flow-diagram-line-length: 28px;
  --c-flow-diagram-icon-size: 40px;
  --c-flow-diagram-check-size: 22px;
  --c-flow-diagram-check-inset: inset 0 0 0 4px var(--color-dark-2);
  --c-dialogue-client-bg: var(--color-paper);
  --c-dialogue-client-border: var(--border-thin);
  --c-dialogue-us-bg: var(--color-dark);
  --c-dialogue-us-text: var(--color-on-dark);
  --c-dialogue-who: var(--color-text-subtle);
  --c-dialogue-stagger: 260ms;
  --c-dialogue-radius: var(--radius-lg);
  --c-engagement-featured-border: 1.5px solid var(--color-orange-500);
  --c-engagement-featured-badge: var(--gradient-brand);
  --c-related-links-arrow: var(--color-text-accent);
  --c-count-up-duration: 1200;
  --c-look-row-node-min: 120px;
  --c-icon-size: 20px;
  --c-reveal-distance: var(--motion-reveal-distance);
  --c-reveal-duration: var(--motion-reveal);
  --c-reveal-ease: var(--motion-ease);
  --c-reveal-stagger: var(--motion-stagger);
  --c-cmd-shell-sidebar-width: 264px;
  --c-cmd-shell-bg: var(--color-dark);
  --c-cmd-shell-glow: var(--gradient-dark-glow);
  --c-cmd-shell-text: var(--color-on-dark-muted);
  --c-cmd-shell-text-active: var(--color-on-dark);
  --c-cmd-shell-group: var(--color-on-dark-subtle);
  --c-cmd-shell-link-height: 40px;
  --c-cmd-shell-link-radius: var(--radius-sm);
  --c-cmd-shell-link-hover-bg: rgba(255, 253, 251, 0.06);
  --c-cmd-shell-link-active-bg: rgba(255, 253, 251, 0.10);
  --c-cmd-shell-marker: var(--gradient-brand);
  --c-cmd-shell-marker-width: 3px;
  --c-cmd-shell-icon-size: 18px;
  --c-cmd-shell-topbar-height: 56px;
  --c-cmd-shell-main-bg: var(--color-canvas);
  --c-cmd-shell-main-glow: var(--gradient-canvas-glow);
  --c-cmd-shell-scrim: var(--color-scrim);
  --c-cmd-stat-bg: var(--color-paper);
  --c-cmd-stat-border: var(--border-thin);
  --c-cmd-stat-radius: var(--radius-md);
  --c-cmd-stat-pad: var(--space-sm);
  --c-cmd-stat-min: 180px;
  --c-cmd-stat-label: var(--color-text-subtle);
  --c-cmd-stat-value: var(--color-ink);
  --c-cmd-stat-value-size: clamp(24px, 2.4vw, 30px);
  --c-cmd-stat-note: var(--color-text-muted);
  --c-cmd-stat-up: var(--color-success);
  --c-cmd-stat-down: var(--color-error);
  --c-cmd-panel-bg: var(--color-paper);
  --c-cmd-panel-border: var(--border-thin);
  --c-cmd-panel-radius: var(--radius-lg);
  --c-cmd-panel-pad: var(--space-md);
  --c-cmd-panel-shadow: var(--shadow-sm);
  --c-cmd-panel-row-border: var(--border-thin);
  --c-cmd-panel-tag-bg: var(--color-orange-50);
  --c-cmd-panel-tag-border: 1px solid var(--color-orange-200);
  --c-cmd-panel-tag-text: var(--color-text-accent);
  --c-cmd-panel-empty-bg: var(--color-sunken);
  --c-cmd-panel-empty-text: var(--color-text-muted);
  --c-cmd-panel-card-min: 260px;
}
:root[lang="bn"] {
  --font-display: "Cinzel", "Tiro Bangla", "Noto Serif Bengali", serif;
  --font-serif: "Playfair Display", "Tiro Bangla", "Noto Serif Bengali", serif;
  --font-sans: "DM Sans", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --type-eyebrow-tracking: 0.01em;
  --type-eyebrow-case: none;
  --type-display-tracking: 0;
  --type-h1-tracking: 0;
  --type-h2-tracking: 0;
  --type-h3-tracking: 0;
  --type-display-leading: 1.35;
  --type-h1-leading: 1.4;
  --type-h2-leading: 1.42;
  --type-body-leading: 1.85;
  --type-body-lg-leading: 1.95;
}

/* ── base/reset.css */
/* Reset + page canvas. Everything visual comes from DESIGN.md tokens. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-3xl);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* clip, not hidden — hidden would break position: sticky */
}

body {
  min-height: 100vh;
  background-color: var(--color-canvas);
  background-image: var(--gradient-canvas-glow);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  overflow-x: clip; /* clip, not hidden — hidden would break position: sticky */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

::selection { background: var(--color-selection); color: var(--color-ink); }

:focus-visible {
  outline: var(--border-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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

.skip-link {
  position: absolute; left: var(--space-sm); top: calc(-1 * var(--space-3xl));
  z-index: var(--z-overlay);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-dark); color: var(--color-on-dark);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-sm); }

/* ── base/typography.css */
/* Text styles — one class per DESIGN.md `type` entry, plus element defaults.
   Cinzel (display/h1–h4/wordmark) is written in normal case on purpose:
   lowercase renders as small capitals, so first letters stand taller. */

h1, h2, h3, h4 { color: var(--color-text); font-weight: inherit; }

.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-subheading, .t-body-lg, .t-body,
.t-body-sm, .t-meta, .t-eyebrow, .t-quote, h1, h2, h3, h4 {
  font-family: var(--_family);
  font-size: var(--_size);
  font-weight: var(--_weight);
  line-height: var(--_leading);
  letter-spacing: var(--_tracking);
  text-transform: var(--_case);
}

.t-display {
  --_family: var(--type-display-family); --_size: var(--type-display-size);
  --_weight: var(--type-display-weight); --_leading: var(--type-display-leading);
  --_tracking: var(--type-display-tracking); --_case: var(--type-display-case);
}
.t-h1, h1 {
  --_family: var(--type-h1-family); --_size: var(--type-h1-size);
  --_weight: var(--type-h1-weight); --_leading: var(--type-h1-leading);
  --_tracking: var(--type-h1-tracking); --_case: var(--type-h1-case);
}
.t-h2, h2 {
  --_family: var(--type-h2-family); --_size: var(--type-h2-size);
  --_weight: var(--type-h2-weight); --_leading: var(--type-h2-leading);
  --_tracking: var(--type-h2-tracking); --_case: var(--type-h2-case);
}
.t-h3, h3 {
  --_family: var(--type-h3-family); --_size: var(--type-h3-size);
  --_weight: var(--type-h3-weight); --_leading: var(--type-h3-leading);
  --_tracking: var(--type-h3-tracking); --_case: var(--type-h3-case);
}
.t-h4, h4 {
  --_family: var(--type-h4-family); --_size: var(--type-h4-size);
  --_weight: var(--type-h4-weight); --_leading: var(--type-h4-leading);
  --_tracking: var(--type-h4-tracking); --_case: var(--type-h4-case);
}
.t-subheading {
  --_family: var(--type-subheading-family); --_size: var(--type-subheading-size);
  --_weight: var(--type-subheading-weight); --_leading: var(--type-subheading-leading);
  --_tracking: var(--type-subheading-tracking); --_case: var(--type-subheading-case);
  color: var(--color-text-muted);
}
.t-body-lg {
  --_family: var(--type-body-lg-family); --_size: var(--type-body-lg-size);
  --_weight: var(--type-body-lg-weight); --_leading: var(--type-body-lg-leading);
  --_tracking: var(--type-body-lg-tracking); --_case: var(--type-body-lg-case);
}
.t-body {
  --_family: var(--type-body-family); --_size: var(--type-body-size);
  --_weight: var(--type-body-weight); --_leading: var(--type-body-leading);
  --_tracking: var(--type-body-tracking); --_case: var(--type-body-case);
}
.t-body-sm {
  --_family: var(--type-body-sm-family); --_size: var(--type-body-sm-size);
  --_weight: var(--type-body-sm-weight); --_leading: var(--type-body-sm-leading);
  --_tracking: var(--type-body-sm-tracking); --_case: var(--type-body-sm-case);
}
.t-meta {
  --_family: var(--type-meta-family); --_size: var(--type-meta-size);
  --_weight: var(--type-meta-weight); --_leading: var(--type-meta-leading);
  --_tracking: var(--type-meta-tracking); --_case: var(--type-meta-case);
  color: var(--color-text-subtle);
}
.t-eyebrow {
  --_family: var(--type-eyebrow-family); --_size: var(--type-eyebrow-size);
  --_weight: var(--type-eyebrow-weight); --_leading: var(--type-eyebrow-leading);
  --_tracking: var(--type-eyebrow-tracking); --_case: var(--type-eyebrow-case);
  color: var(--color-text-accent);
}
.t-quote {
  --_family: var(--type-quote-family); --_size: var(--type-quote-size);
  --_weight: var(--type-quote-weight); --_leading: var(--type-quote-leading);
  --_tracking: var(--type-quote-tracking); --_case: var(--type-quote-case);
  font-style: italic;
}

/* gradient text — for one accent phrase inside a heading */
.t-accent {
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.t-muted { color: var(--color-text-muted); }
.t-subtle { color: var(--color-text-subtle); }

/* inline highlight — orange wash under a phrase */
.t-mark {
  font-weight: 600;
  color: var(--color-ink);
  background: linear-gradient(transparent 62%, var(--color-orange-200) 62%);
}

/* Bangla needs nothing here: DESIGN.md `type-bn` overrides the same
   --type-* variables under :root[lang="bn"], so every class follows. */

/* ── base/layout.css */
/* Page structure: container, section rhythm, grids, stacks. */

.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}
.container--prose { max-width: calc(var(--layout-prose) + 2 * var(--layout-gutter)); }

.section { padding-block: var(--space-section); }
/* the first section clears the fixed island */
main > .section:first-child { padding-top: calc(var(--space-section) + var(--layout-island-clearance)); }
.section--dark {
  background-color: var(--color-dark);
  background-image: var(--gradient-dark-glow);
  color: var(--color-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-on-dark); }

/* vertical rhythm: children spaced by --stack-gap */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-sm)); }
.stack--lg { --stack-gap: var(--space-lg); }
.stack--sm { --stack-gap: var(--space-2xs); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

.grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 480px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 768px) { .split { grid-template-columns: 1.1fr 0.9fr; } }
.split--top { align-items: start; }

/* spacing utilities — only the few the pages need between components */
.u-mt-lg { margin-top: var(--space-lg); }

/* ── base/motion.css */
/* Shared keyframes + the one reduced-motion switch for the whole site. */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(var(--motion-reveal-distance)); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── components/accordion */
/* Accordion — <details> items; give a group the same name="" and only one stays open.
   Markup: <details class="accordion" name="faq"><summary>Question
           <span class="accordion__icon" aria-hidden="true"></span></summary>
           <div class="accordion__body">Answer</div></details>
   Opening animates where the browser supports ::details-content; elsewhere it snaps. */
.accordion { border-bottom: var(--c-accordion-border); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  letter-spacing: var(--type-h4-tracking);
  line-height: var(--type-h4-leading);
}
.accordion summary::-webkit-details-marker { display: none; }

.accordion__icon {
  position: relative;
  width: var(--c-accordion-icon-size);
  height: var(--c-accordion-icon-size);
  flex: none;
  border-radius: 50%;
  background: var(--c-accordion-icon-bg);
  transition:
    background var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-spring);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-accordion-icon-mark);
  transform: translate(-50%, -50%);
  transition:
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-base) var(--motion-spring);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* open: the vertical bar turns flat and fades, leaving a minus */
.accordion[open] .accordion__icon { background: var(--c-accordion-icon-bg-open); }
.accordion[open] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.accordion__body {
  padding-bottom: var(--space-md);
  color: var(--color-text-muted);
  max-width: var(--layout-prose);
}

@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--motion-base) var(--motion-ease),
      content-visibility var(--motion-base) allow-discrete;
  }
  .accordion[open]::details-content { block-size: auto; }
}

/* ── components/breadcrumb */
/* Breadcrumb — Home › Solutions › Page. The template adds BreadcrumbList schema.
   Markup: <nav class="breadcrumb" aria-label="Breadcrumb"><ol>
           <li><a href="/">Home</a></li>…<li aria-current="page">X</li></ol></nav> */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  font-size: var(--type-meta-size);
  color: var(--c-breadcrumb-text);
}
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2xs); }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-breadcrumb-current); font-weight: var(--type-button-weight); }

/* ── components/button */
/* Button — primary (orange gradient, ink text), secondary, ghost, dark; sm and icon sizes.
   Markup: <a class="btn btn--primary" href="…">Label <span class="btn__arrow" aria-hidden="true">→</span></a> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: var(--c-button-height);
  padding-inline: var(--c-button-pad-x);
  border: 1px solid transparent;
  border-radius: var(--c-button-radius);
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  letter-spacing: var(--type-button-tracking);
  line-height: var(--type-button-leading);
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--motion-base) var(--motion-spring),
    box-shadow var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn__arrow { display: inline-block; transition: transform var(--motion-base) var(--motion-spring); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--c-button-primary-bg);
  color: var(--c-button-primary-text);
  box-shadow: var(--c-button-primary-shadow);
}
.btn--primary:hover { background: var(--c-button-primary-bg-hover); }

.btn--secondary {
  background: var(--c-button-secondary-bg);
  color: var(--c-button-secondary-text);
  border: var(--c-button-secondary-border);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { border-color: var(--color-orange-400); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--c-button-ghost-text);
  padding-inline: var(--space-xs);
}
.btn--ghost:hover { background: var(--color-orange-50); }

.btn--dark {
  background: var(--c-button-dark-bg);
  color: var(--c-button-dark-text);
}
.btn--dark:hover { background: var(--color-dark-3); }

.btn--sm {
  height: var(--c-button-height-sm);
  padding-inline: var(--c-button-pad-x-sm);
  font-size: var(--type-body-sm-size);
}

.btn--icon {
  width: var(--c-button-height);
  padding-inline: 0;
  border-radius: var(--radius-pill);
}
.btn--icon svg { width: 45%; height: 45%; }

.btn--block { width: 100%; }

@media (max-width: 479.98px) {
  .btn--stack-mobile { width: 100%; }
}

/* ── components/card */
/* Card — base surface, interactive (lifts on hover), dark.
   Markup: <article class="card card--interactive"><span class="icon-tile">…</span>
           <h3 class="card__title t-h3">…</h3><p class="card__text">…</p></article> */
.card {
  position: relative;
  background: var(--c-card-bg);
  border: var(--c-card-border);
  border-radius: var(--c-card-radius);
  padding: var(--c-card-pad);
  box-shadow: var(--c-card-shadow);
}

.card--interactive {
  transition:
    transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}
.card--interactive:hover {
  transform: translateY(var(--c-card-lift));
  box-shadow: var(--c-card-shadow-hover);
  border-color: var(--c-card-border-hover);
}

.card--dark {
  background: var(--c-card-dark-bg);
  border: var(--c-card-dark-border);
  color: var(--color-on-dark);
  box-shadow: none;
}
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4 { color: var(--color-on-dark); }
.card--dark .card__text { color: var(--color-on-dark-muted); }

.card__title { margin-block: var(--space-sm) var(--space-2xs); }
.card__media { margin-bottom: var(--space-sm); }
.card__media + .icon-tile { margin-top: 0; }
/* the customer's problem, in their words — quoted, in the accent colour */
.card__problem {
  font-family: var(--type-quote-family);
  font-style: italic;
  font-size: var(--type-body-size);
  line-height: var(--type-body-sm-leading);
  color: var(--color-text-accent);
  margin-bottom: var(--space-2xs);
}
.card__text {
  color: var(--color-text-muted);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}
.card__meta { margin-top: var(--space-sm); }
.card__link { margin-top: var(--space-xs); margin-left: calc(-1 * var(--space-xs)); }

/* ── components/case-card */
/* Case card — one piece of work on a dark card: eyebrow (client type) → title
   → problem → what was built → two facts → stack chips.
   Markup: <article class="case-card card card--dark">
             <p class="case-card__who t-eyebrow">…</p><h3 class="t-h3">…</h3>
             <p class="case-card__text">…</p>
             <dl class="case-card__facts"><div><dt>…</dt><dd>…</dd></div>…</dl>
             <ul class="chips case-card__stack">…</ul></article> */
.case-card { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }
.case-card__who { color: var(--color-orange-300); }
.case-card__text { color: var(--color-on-dark-muted); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }
.case-card__text strong { color: var(--color-on-dark); font-weight: var(--type-button-weight); }

.case-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--border-dark);
}
.case-card__facts div { display: flex; flex-direction: column-reverse; gap: var(--space-3xs); }
.case-card__facts dd {
  font-family: var(--type-h2-family);
  font-size: var(--c-case-card-fact-size);
  font-weight: var(--type-h2-weight);
  line-height: 1;
  color: var(--c-case-card-fact-value);
}
.case-card__facts dt { font-size: var(--type-meta-size); color: var(--c-case-card-fact-label); }

.case-card__stack { list-style: none; }
.case-card__stack .chip {
  background: var(--color-dark-3);
  border-color: var(--color-hairline-dark);
  color: var(--color-on-dark-muted);
}

/* ── components/chip */
/* Chip — small pill tag. A `.chips` row wraps; hover fills orange (ink text).
   `.chip__dot` is the pulsing "live" dot. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: var(--c-chip-height);
  padding-inline: var(--c-chip-pad-x);
  border: var(--c-chip-border);
  border-radius: var(--c-chip-radius);
  background: var(--c-chip-bg);
  color: var(--c-chip-text);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-tracking);
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--motion-ease),
    transform var(--motion-base) var(--motion-spring);
}
.chip--interactive:hover { background: var(--c-chip-bg-hover); transform: translateY(-2px); }

.chip__dot {
  width: var(--c-chip-dot-size);
  height: var(--c-chip-dot-size);
  border-radius: 50%;
  background: var(--color-orange-500);
  animation: pulse var(--motion-pulse) var(--motion-ease) infinite;
}

/* ── components/cmd-panel */
/* Commander panel — the data blocks cmd-panel.js fills from /data/<id>.json:
   .cmd-source (summary, stats, lists, empty state), .cmd-panel (one list),
   and .cmd-card (an overview card on the home page). */
.cmd-source { display: flex; flex-direction: column; gap: var(--space-md); }
.cmd-source__summary { max-width: var(--layout-prose); color: var(--color-text); }

.cmd-panels { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cmd-panels { grid-template-columns: repeat(2, 1fr); } }

.cmd-panel {
  padding: var(--c-cmd-panel-pad);
  background: var(--c-cmd-panel-bg);
  border: var(--c-cmd-panel-border);
  border-radius: var(--c-cmd-panel-radius);
  box-shadow: var(--c-cmd-panel-shadow);
}
.cmd-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.cmd-panel__title { margin: 0; }

.cmd-list { list-style: none; margin: 0; padding: 0; }
.cmd-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-xs);
  border-top: var(--c-cmd-panel-row-border);
}
.cmd-list__item:first-child { border-top: 0; padding-top: 0; }
.cmd-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.cmd-list__title { font-weight: var(--type-button-weight); color: var(--color-text); overflow-wrap: anywhere; }
a.cmd-list__title { color: var(--color-text-accent); }
.cmd-list__meta {
  flex: none;
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  color: var(--color-text-subtle);
}
.cmd-list__text { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); color: var(--color-text-muted); }

.cmd-tag {
  align-self: flex-start;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--c-cmd-panel-tag-border);
  border-radius: var(--radius-pill);
  background: var(--c-cmd-panel-tag-bg);
  color: var(--c-cmd-panel-tag-text);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-leading);
}

.cmd-empty {
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--c-cmd-panel-empty-bg);
  color: var(--c-cmd-panel-empty-text);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}
.cmd-empty strong { display: block; margin-bottom: var(--space-3xs); color: var(--color-text); }

/* overview cards on the home page — built on .card.card--interactive */
.cmd-cards {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--c-cmd-panel-card-min)), 1fr));
}
.cmd-card { display: flex; flex-direction: column; gap: var(--space-2xs); color: inherit; text-decoration: none; }
.cmd-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-3xs); }
.cmd-card .card__title { margin: 0; }
.cmd-card__stats { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--type-body-sm-size); color: var(--color-text-muted); }
.cmd-card__stats strong { color: var(--color-text); }
.cmd-card[data-empty] .card__text { color: var(--color-text-subtle); }

/* ── components/cmd-shell */
/* Commander shell — the private dashboard at ruhan.lol.
   Markup: <div class="cmd" data-cmd data-nav="closed"> + cmd-shell.html (sidebar, top bar, scrim)
           + <main class="cmd__main"><div class="cmd__content">…</div></main></div>
   The sidebar is fixed from lg up; below lg it is a sheet opened from the top bar. */
.cmd {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--c-cmd-shell-main-bg);
  background-image: var(--c-cmd-shell-main-glow);
  background-repeat: no-repeat;
}
/* the data blocks toggle [hidden]; component display rules must not win over it */
.cmd [hidden] { display: none; }

.cmd__side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-overlay);
  width: min(var(--c-cmd-shell-sidebar-width), 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-sm);
  overflow-y: auto;
  background-color: var(--c-cmd-shell-bg);
  background-image: var(--c-cmd-shell-glow);
  color: var(--c-cmd-shell-text);
  transform: translateX(-100%);
  transition: transform var(--motion-base) var(--motion-ease);
}
.cmd[data-nav="open"] .cmd__side { transform: none; }

.cmd__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs) var(--space-sm);
  color: var(--c-cmd-shell-text-active);
}
.cmd__brand .wordmark { height: var(--c-wordmark-height-sm); color: var(--c-wordmark-ink-on-dark); }
.cmd__brand-name { font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-tracking); text-transform: var(--type-eyebrow-case); color: var(--c-cmd-shell-group); }

.cmd-nav { display: flex; flex-direction: column; gap: var(--space-3xs); }
.cmd-nav__group {
  margin: var(--space-sm) 0 var(--space-3xs);
  padding-inline: var(--space-xs);
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--c-cmd-shell-group);
}
.cmd-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--c-cmd-shell-link-height);
  padding-inline: var(--space-xs);
  border-radius: var(--c-cmd-shell-link-radius);
  color: var(--c-cmd-shell-text);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
  text-decoration: none;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.cmd-nav__link .icon { width: var(--c-cmd-shell-icon-size); height: var(--c-cmd-shell-icon-size); }
.cmd-nav__link:hover { background: var(--c-cmd-shell-link-hover-bg); color: var(--c-cmd-shell-text-active); }
.cmd-nav__link[aria-current="page"] { background: var(--c-cmd-shell-link-active-bg); color: var(--c-cmd-shell-text-active); }
.cmd-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 25%;
  left: 0;
  width: var(--c-cmd-shell-marker-width);
  border-radius: var(--radius-pill);
  background: var(--c-cmd-shell-marker);
}
.cmd-nav__link[aria-current="page"] .icon { color: var(--color-orange-400); }
.cmd-nav__ext { margin-left: auto; color: var(--c-cmd-shell-group); }
.cmd__top {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: var(--c-cmd-shell-topbar-height);
  padding-inline: var(--layout-gutter);
  background: var(--c-cmd-shell-bg);
  color: var(--c-cmd-shell-text-active);
}
.cmd__top .wordmark { height: var(--c-wordmark-height-sm); color: var(--c-wordmark-ink-on-dark); }

.cmd__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-island);
  background: var(--c-cmd-shell-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--motion-ease);
}
.cmd[data-nav="open"] .cmd__scrim { opacity: 1; pointer-events: auto; }

.cmd__content {
  max-width: var(--layout-max);
  padding: var(--space-lg) var(--layout-gutter) var(--space-2xl);
}
.cmd__head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.cmd__title { margin: 0; }

@media (min-width: 1024px) {
  .cmd__side { width: var(--c-cmd-shell-sidebar-width); transform: none; transition: none; }
  .cmd__top, .cmd__scrim { display: none; }
  .cmd__main { margin-left: var(--c-cmd-shell-sidebar-width); }
  .cmd__content { padding-top: var(--space-xl); }
}

/* ── components/cmd-stat */
/* Commander stat — one KPI: label, big value, optional note (data-trend="up|down" colours it).
   Markup: <div class="cmd-stats"><div class="cmd-stat"><span class="cmd-stat__label">…</span>
           <span class="cmd-stat__value">…</span><span class="cmd-stat__note" data-trend="up">…</span></div></div> */
.cmd-stats {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--c-cmd-stat-min)), 1fr));
}
.cmd-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--c-cmd-stat-pad);
  background: var(--c-cmd-stat-bg);
  border: var(--c-cmd-stat-border);
  border-radius: var(--c-cmd-stat-radius);
}
.cmd-stat__label {
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  color: var(--c-cmd-stat-label);
}
.cmd-stat__value {
  font-family: var(--type-h3-family);
  font-size: var(--c-cmd-stat-value-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h1-leading);
  color: var(--c-cmd-stat-value);
  overflow-wrap: anywhere;
}
.cmd-stat__note {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
  color: var(--c-cmd-stat-note);
}
.cmd-stat__note[data-trend="up"] { color: var(--c-cmd-stat-up); }
.cmd-stat__note[data-trend="down"] { color: var(--c-cmd-stat-down); }

/* ── components/contact-form */
/* Contact form — name / email / message. Sending opens the visitor's mail app
   with everything filled in and addressed to the site email (contact-form.js),
   so nothing depends on a third-party form service.
   Markup: <form class="contact-form card" data-contact-form data-to="…">…fields…</form> */
.contact-form { display: flex; flex-direction: column; gap: var(--c-contact-form-gap); }
.contact-form__note { font-size: var(--type-meta-size); color: var(--color-text-subtle); text-align: center; }

/* ── components/contact-links */
/* Contact links — email, WhatsApp, LinkedIn, each with its own icon in an
   orange-shade tile (ink glyph, never white). The email is always written out.
   Include: <!-- @include components/contact-links/contact-links.html variant="pills" -->
   variants: pills (light, inline) · pills-dark (on dark bands) · cards (big, stacked) */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-contact-links-gap);
  list-style: none;
}

.contact-links__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--c-contact-links-pill-height);
  padding: var(--c-contact-links-pill-pad);
  border: var(--c-contact-links-pill-border);
  border-radius: var(--radius-pill);
  background: var(--c-contact-links-pill-bg);
  color: var(--c-contact-links-pill-text);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-base) var(--motion-spring),
    box-shadow var(--motion-base) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.contact-links__item:hover {
  transform: translateY(-2px);
  border-color: var(--color-hairline-orange);
  box-shadow: var(--shadow-md);
}

.contact-links__icon {
  width: var(--c-contact-links-icon-size);
  height: var(--c-contact-links-icon-size);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-contact-links-icon-ink);
  transition: transform var(--motion-base) var(--motion-spring);
}
.contact-links__icon svg { width: 54%; height: 54%; }
.contact-links__item:hover .contact-links__icon { transform: rotate(-8deg) scale(1.06); }

.contact-links__icon--email    { background: var(--c-contact-links-icon-email); }
.contact-links__icon--whatsapp { background: var(--c-contact-links-icon-whatsapp); }
.contact-links__icon--linkedin { background: var(--c-contact-links-icon-linkedin); }

.contact-links__text { display: flex; flex-direction: column; line-height: 1.15; }
.contact-links__label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--color-text-subtle);
}
.contact-links__value {
  font-family: var(--type-button-family);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-button-weight);
}

/* pills: label hidden, value only — compact */
.contact-links--pills .contact-links__label,
.contact-links--pills-dark .contact-links__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.contact-links--pills-dark .contact-links__item {
  background: var(--c-contact-links-pill-dark-bg);
  border: var(--c-contact-links-pill-dark-border);
  color: var(--c-contact-links-pill-dark-text);
  box-shadow: none;
}

/* cards: big tiles, label + value, one per row on mobile */
.contact-links--cards { flex-direction: column; }
.contact-links--cards .contact-links__item {
  width: 100%;
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  gap: var(--space-sm);
  background: var(--c-contact-links-pill-dark-bg);
  border: var(--c-contact-links-pill-dark-border);
  color: var(--c-contact-links-pill-dark-text);
  box-shadow: none;
}
.contact-links--cards .contact-links__icon {
  width: var(--c-contact-links-icon-size-lg);
  height: var(--c-contact-links-icon-size-lg);
  border-radius: var(--c-contact-links-icon-radius);
}
.contact-links--cards .contact-links__label { color: var(--color-on-dark-subtle); }
.contact-links--cards .contact-links__value { font-size: var(--type-body-lg-size); }

/* ── components/count-up */
/* Count-up — numbers keep their width while counting (count-up.js).
   Markup: <span data-count="98" data-suffix="%">98%</span> */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── components/dialogue */
/* Dialogue — a short, clearly illustrative first call. Client bubbles on the
   left (paper), ours on the right (dark). Bubbles arrive one by one through
   data-reveal-stagger, slower than usual so it reads like a conversation.
   Markup: <ol class="dialogue" data-reveal-stagger>
           <li class="dialogue__line dialogue__line--client"><span class="dialogue__who">Client</span><p>…</p></li>
           <li class="dialogue__line dialogue__line--us">…</li></ol> */
.dialogue {
  --c-reveal-stagger: var(--c-dialogue-stagger);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--layout-prose);
  margin-inline: auto;
}

.dialogue__line { display: flex; flex-direction: column; gap: var(--space-3xs); max-width: 84%; }
.dialogue__line p {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--c-dialogue-radius);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.dialogue__who { font-size: var(--type-meta-size); color: var(--c-dialogue-who); padding-inline: var(--space-xs); }

.dialogue__line--client p {
  background: var(--c-dialogue-client-bg);
  border: var(--c-dialogue-client-border);
  border-bottom-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}
.dialogue__line--us { align-self: flex-end; align-items: flex-end; }
.dialogue__line--us p {
  background: var(--c-dialogue-us-bg);
  color: var(--c-dialogue-us-text);
  border-bottom-right-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
}
.dialogue__note { text-align: center; font-size: var(--type-meta-size); color: var(--color-text-subtle); margin-top: var(--space-sm); }

/* ── components/engagement */
/* Engagement — how the work is shaped: quick fix / project / ongoing.
   Markup: <ul class="engagement"><li class="engagement__item card [engagement__item--featured]">
           <h3 class="t-h3">…</h3><p class="engagement__time">…</p><p>…</p><p class="engagement__best">…</p></li></ul> */
.engagement { list-style: none; display: grid; gap: var(--space-md); }
@media (min-width: 768px) {
  .engagement { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.engagement__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); }
.engagement__item p { color: var(--color-text-muted); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }
.engagement__time { font-weight: var(--type-button-weight); color: var(--color-text-accent); }
.engagement__best { margin-top: auto; padding-top: var(--space-sm); border-top: var(--border-thin); }

.engagement__item--featured { border: var(--c-engagement-featured-border); box-shadow: var(--shadow-md); }
.engagement__item--featured::before {
  content: "Most common";
  position: absolute;
  top: calc(-1 * var(--space-xs));
  left: var(--space-md);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--c-engagement-featured-badge);
  color: var(--color-on-orange);
  font-size: var(--type-meta-size);
  font-weight: var(--type-button-weight);
}

/* ── components/field */
/* Field — label + input/textarea.
   Markup: <label class="field"><span class="field__label">Email</span>
           <input class="field__input" type="email" /></label> */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }

.field__label {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--c-field-label);
}

.field__input {
  width: 100%;
  height: var(--c-field-height);
  padding-inline: var(--space-sm);
  background: var(--c-field-bg);
  border: var(--c-field-border);
  border-radius: var(--c-field-radius);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.field__input::placeholder { color: var(--color-text-subtle); }
.field__input:focus {
  outline: none;
  border-color: var(--c-field-border-focus);
  box-shadow: var(--c-field-focus-ring);
}

textarea.field__input {
  height: auto;
  min-height: var(--c-field-textarea-min);
  padding-block: var(--space-xs);
  resize: vertical;
}

/* ── components/flow-diagram */
/* Flow diagram — a dark panel of nodes joined by lines. Nodes and lines with
   data-from="n" light up (.is-on) when story-scroll reaches step n; a packet
   then runs down each lit line.
   Markup: <div class="flow-diagram"><ol>
           <li class="flow-diagram__node" data-from="1"><span class="icon-tile">…</span>
           <span><b>Label</b><small>sub</small></span></li>…</ol></div> */
.flow-diagram {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-dark);
  background-image: var(--gradient-dark-glow);
  box-shadow: var(--shadow-lg);
}
.flow-diagram ol { list-style: none; display: flex; flex-direction: column; }

.flow-diagram__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--c-flow-diagram-node-bg);
  border: var(--c-flow-diagram-node-border);
  color: var(--c-flow-diagram-node-text);
  opacity: 0.45;
  transform: scale(0.98);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-spring),
    box-shadow var(--motion-base) var(--motion-ease);
}
.flow-diagram__node.is-on { opacity: 1; transform: none; box-shadow: var(--c-flow-diagram-node-on-shadow); }
.flow-diagram__node .icon-tile { width: var(--c-flow-diagram-icon-size); height: var(--c-flow-diagram-icon-size); box-shadow: none; }
.flow-diagram__node b { display: block; font-size: var(--type-body-sm-size); font-weight: var(--type-button-weight); }
.flow-diagram__node small { display: block; font-size: var(--type-meta-size); color: var(--c-flow-diagram-node-sub); }

/* the line between this node and the next */
.flow-diagram__node:not(:last-child) { margin-bottom: var(--c-flow-diagram-line-length); }
.flow-diagram__node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--space-xs) + var(--c-flow-diagram-icon-size) / 2 - 1px);
  top: 100%;
  width: 2px;
  height: var(--c-flow-diagram-line-length);
  background: var(--c-flow-diagram-line);
}
.flow-diagram__node.is-on:not(:last-child)::after { background: var(--c-flow-diagram-line-on); }
/* a packet running down a lit line */
.flow-diagram__node.is-on:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: var(--z-raised);
  left: calc(var(--space-xs) + var(--c-flow-diagram-icon-size) / 2 - 4px);
  top: 100%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-amber-300);
  box-shadow: var(--shadow-glow);
  animation: flow-packet var(--motion-pulse) var(--motion-ease) infinite;
}
@keyframes flow-packet {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(var(--c-flow-diagram-line-length)); opacity: 0; }
}

/* ── variants (content look.story) ─────────────────────────────────────── */
/* checklist: no lines; each item gets a check that fills when reached */
.flow-diagram--checklist .flow-diagram__node::after,
.flow-diagram--checklist .flow-diagram__node::before { display: none; }
.flow-diagram--checklist .flow-diagram__node { margin-bottom: var(--space-xs); padding-right: var(--space-2xl); }
.flow-diagram--checklist .flow-diagram__node > span:last-child::after {
  content: "";
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  width: var(--c-flow-diagram-check-size);
  height: var(--c-flow-diagram-check-size);
  margin-top: calc(var(--c-flow-diagram-check-size) / -2);
  border-radius: 50%;
  border: 2px solid var(--color-dark-3);
  transition: background var(--motion-base) var(--motion-spring), border-color var(--motion-base) var(--motion-ease);
}
.flow-diagram--checklist .flow-diagram__node.is-on > span:last-child::after {
  border-color: var(--color-success-bright);
  background: var(--color-success-bright);
  box-shadow: var(--c-flow-diagram-check-inset);
}

/* timeline: an open rail with dots instead of boxes */
.flow-diagram--timeline .flow-diagram__node {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-block: var(--space-2xs);
}
.flow-diagram--timeline .flow-diagram__node.is-on { box-shadow: none; }
.flow-diagram--timeline .flow-diagram__node b { font-size: var(--type-body-size); }
.flow-diagram--timeline .flow-diagram__node .icon-tile { border-radius: 50%; }

/* row: a horizontal pipeline (used with story-scroll--row, which autoplays) */
@media (min-width: 768px) {
  .flow-diagram--row ol { flex-direction: row; gap: var(--c-flow-diagram-line-length); }
  .flow-diagram--row .flow-diagram__node {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    text-align: center;
    margin-bottom: 0;
  }
  .flow-diagram--row .flow-diagram__node:not(:last-child)::after {
    left: 100%;
    top: calc(var(--space-xs) + var(--c-flow-diagram-icon-size) / 2);
    width: var(--c-flow-diagram-line-length);
    height: 2px;
  }
  .flow-diagram--row .flow-diagram__node.is-on:not(:last-child)::before {
    left: 100%;
    top: calc(var(--space-xs) + var(--c-flow-diagram-icon-size) / 2 - 4px);
    animation-name: flow-packet-x;
  }
}
@keyframes flow-packet-x {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(var(--c-flow-diagram-line-length)); opacity: 0; }
}

/* ── components/footer */
/* Footer — dark band with an orange glow. Include with tagline="…". */
.footer {
  background-color: var(--c-footer-bg);
  background-image: var(--c-footer-glow);
  color: var(--c-footer-text);
  padding-block: var(--space-3xl) var(--space-lg);
}

.footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr; }
  .footer__brand { grid-column: auto; }
}

.footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-on-dark);
  font-family: var(--type-wordmark-family);
  font-size: var(--type-wordmark-size);
  font-weight: var(--type-wordmark-weight);
  letter-spacing: var(--type-wordmark-tracking);
}
.footer__tagline {
  margin-top: var(--space-sm);
  max-width: 38ch;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}

.footer__heading {
  margin-bottom: var(--space-sm);
  color: var(--c-footer-heading);
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
}

.footer__col > a,
.footer__col > span {
  display: block;
  padding-block: var(--space-3xs);
  font-size: var(--type-body-sm-size);
  transition: color var(--motion-fast) var(--motion-ease);
}
.footer__col > a:hover { color: var(--c-footer-link-hover); }
.footer__col .contact-links { flex-direction: column; align-items: flex-start; }

.footer__fine {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--border-dark);
  color: var(--c-footer-fine);
  font-size: var(--type-meta-size);
}

/* ── components/hero */
/* Hero — the introduction.
   Left: a YouTube-style identity row (small round illustrated avatar, name,
   handle), the H1 and the contact links. Right: a "stage" of three product
   windows (viz) stacked like a desk of open apps, with a floating badge.
   Markup:
   <section class="hero">
     <div class="hero__copy">
       <div class="hero__id"><picture class="hero__avatar">…</picture>
         <div><p class="hero__name">Ruhan</p>
         <p class="hero__handle">…</p></div></div>
       <h1 class="hero__title"><span class="hero__kicker">…</span><span class="hero__line">…</span></h1> …
     </div>
     <div class="hero__stage"><div class="hero__window hero__window--1">viz</div>… <span class="hero__badge">…</span></div>
   </section> */
.hero {
  display: grid;
  gap: var(--c-hero-gap);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-md); }

/* ── identity row ───────────────────────────────────────────────────────── */
.hero__id { display: flex; align-items: center; gap: var(--space-sm); }
.hero__avatar {
  width: var(--c-hero-avatar-size);
  height: var(--c-hero-avatar-size);
  flex: none;
  padding: var(--space-3xs);
  border-radius: 50%;
  background: var(--c-hero-avatar-ring);
  box-shadow: var(--c-hero-avatar-shadow);
}
.hero__avatar img { width: 100%; height: 100%; border-radius: 50%; }

.hero__name {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
  line-height: 1.1;
}
.hero__handle { font-size: var(--type-meta-size); color: var(--color-text-subtle); margin-top: var(--space-3xs); }
.hero__handle .chip__dot { display: inline-block; margin-right: var(--space-3xs); vertical-align: middle; }

/* the H1 carries the keyword in its small first line and the memorable line big */
.hero__title { display: flex; flex-direction: column; gap: var(--space-xs); }
.hero__kicker {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--color-text-accent);
}
.hero__line {
  font-family: var(--type-display-family);
  font-size: var(--c-hero-line-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}
/* one sentence per line — the rhythm is part of the line */
.hero__line > span { display: block; }

.hero__lede {
  max-width: 54ch;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  color: var(--color-text-muted);
}

/* ── stage: three product windows, stacked ──────────────────────────────── */
.hero__stage { position: relative; display: grid; gap: var(--space-sm); }
.hero__window { border-radius: var(--radius-md); box-shadow: var(--c-hero-window-shadow); }
.hero__window--3 { display: none; }

@media (min-width: 768px) {
  .hero__stage { display: block; height: var(--c-hero-stage-height); }
  .hero__window { position: absolute; width: 74%; transition: transform var(--motion-base) var(--motion-spring); }
  .hero__window--1 { top: 0; left: 0; transform: rotate(-2deg); }
  .hero__window--2 { top: 32%; right: 0; transform: rotate(1.5deg); z-index: var(--z-raised); }
  .hero__window--3 { display: block; bottom: 0; left: 8%; transform: rotate(-1deg); }
  .hero__window:hover { transform: rotate(0) translateY(-6px); z-index: var(--z-fab); }
}

.hero__badge {
  position: absolute;
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  border: var(--border-thin);
  color: var(--color-ink);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-button-weight);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  animation: hero-float var(--motion-pulse) var(--motion-ease) infinite alternate;
}
.hero__badge .icon-tile {
  width: var(--c-hero-badge-icon);
  height: var(--c-hero-badge-icon);
  border-radius: 50%;
  box-shadow: none;
}
.hero__badge--1 { top: calc(-1 * var(--space-sm)); right: var(--space-sm); }
@media (min-width: 768px) {
  .hero__badge--1 { top: 22%; right: auto; left: 52%; }
}

@keyframes hero-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* ── components/icon */
/* Icon — 24-unit line icons, one file each (icon/<name>.svg), stroke in currentColor.
   Include: <!-- @include components/icon/chat.svg --> */
.icon { width: var(--c-icon-size); height: var(--c-icon-size); flex: none; }
.icon-tile .icon { width: 50%; height: 50%; }

/* ── components/icon-tile */
/* Icon tile — a gradient square holding a line icon. Four shade variants so a
   row of tiles never repeats one orange. Icon colour is ink, never white. */
.icon-tile {
  width: var(--c-icon-tile-size);
  height: var(--c-icon-tile-size);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--c-icon-tile-radius);
  background: var(--c-icon-tile-bg-1);
  color: var(--c-icon-tile-text);
  box-shadow: var(--shadow-sm);
}
.icon-tile svg { width: 48%; height: 48%; }

.icon-tile--2 { background: var(--c-icon-tile-bg-2); }
.icon-tile--3 { background: var(--c-icon-tile-bg-3); }
.icon-tile--4 { background: var(--c-icon-tile-bg-4); }

/* ── components/island */
/* Island — the Dynamic-Island navbar.
   A black pill fixed at the top centre with two states (data-state, set by island.js):
     open     at the top of the page, on hover/focus (desktop) or after a tap (mobile)
     compact  everywhere else — seal + current section name + scroll progress
   The morph is grid-track animation (0fr ↔ 1fr), so the pill's width/height
   follows its content smoothly with no measuring. Mobile (< md): links drop
   down as a sheet; desktop: links slide out sideways. */

.island {
  position: fixed;
  top: var(--layout-island-top);
  /* left/right 0 + auto margins centre it; left: 50% would cap its width at half the screen */
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: var(--z-island);
  width: min(calc(100% - 2 * var(--layout-gutter)), var(--c-island-width-mobile));
  overflow: hidden;
  background: var(--c-island-bg);
  color: var(--c-island-text);
  border-radius: var(--c-island-radius);
  box-shadow: var(--c-island-shadow);
  transition: border-radius var(--c-island-duration) var(--motion-spring);
}
.island[data-state="open"] { border-radius: var(--c-island-radius-open); }

.island__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand status toggle" "links links links";
  align-items: center;
  column-gap: var(--space-2xs);
  padding: var(--c-island-pad);
}

/* ── brand ──────────────────────────────────────────────────────────────── */
.island__brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: calc(var(--c-island-height) - 2 * var(--c-island-pad));
  padding-right: var(--space-2xs);
  font-family: var(--type-wordmark-family);
  font-size: var(--type-wordmark-size);
  font-weight: var(--type-wordmark-weight);
  letter-spacing: var(--type-wordmark-tracking);
  white-space: nowrap;
}
.island__brand .wordmark { height: var(--c-wordmark-height-sm); }

/* ── status: dot + current section name ─────────────────────────────────── */
.island__status {
  grid-area: status;
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  transition: grid-template-columns var(--c-island-duration) var(--motion-spring),
              opacity var(--motion-fast) var(--motion-ease);
}
.island__status-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-island-text-muted);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
}
.island__dot {
  width: var(--c-island-dot-size);
  height: var(--c-island-dot-size);
  flex: none;
  border-radius: 50%;
  background: var(--c-island-progress);
  animation: pulse var(--motion-pulse) var(--motion-ease) infinite;
}
.island__label { display: inline-block; overflow: hidden; text-overflow: ellipsis; }
.island__label.is-in { animation: island-label-in var(--motion-base) var(--motion-spring); }

@keyframes island-label-in {
  from { opacity: 0; transform: translateY(70%); }
  to   { opacity: 1; transform: none; }
}

/* ── links: a sheet on mobile ───────────────────────────────────────────── */
.island__links {
  grid-area: links;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--c-island-duration) var(--motion-spring);
}
.island[data-state="open"] .island__links { grid-template-rows: 1fr; }

.island__links-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.island[data-state="open"] .island__links-inner { opacity: 1; transition-delay: var(--motion-fast); }
.island__links-inner > :first-child { margin-top: var(--space-2xs); }

.island__link {
  display: flex;
  align-items: center;
  min-height: var(--c-island-link-height);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--c-island-text-muted);
  font-family: var(--type-nav-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.island__link:hover { background: var(--c-island-link-hover-bg); color: var(--c-island-text); }
.island__link[aria-current="true"] { color: var(--c-island-text); background: var(--c-island-link-hover-bg); }

.island .lang-toggle { align-self: flex-start; margin: var(--space-2xs) var(--space-xs); }

.island__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--c-island-link-height);
  padding-inline: var(--space-md);
  margin-bottom: var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--c-island-cta-bg);
  color: var(--c-island-cta-text);
  font-family: var(--type-button-family);
  font-size: var(--type-nav-size);
  font-weight: var(--type-button-weight);
  white-space: nowrap;
  transition: transform var(--motion-base) var(--motion-spring);
}
.island__cta:hover { transform: scale(1.04); }
.island__cta svg { width: var(--c-island-icon-size); height: var(--c-island-icon-size); flex: none; }

/* ── toggle (mobile only) ───────────────────────────────────────────────── */
.island__toggle {
  grid-area: toggle;
  position: relative;
  width: var(--c-island-toggle-size);
  height: var(--c-island-toggle-size);
  border-radius: 50%;
  background: var(--c-island-link-hover-bg);
}
.island__toggle span {
  position: absolute;
  left: 30%;
  right: 30%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-island-text);
  transition: transform var(--c-island-duration) var(--motion-spring);
}
.island__toggle span:first-child { top: calc(50% - 4px); }
.island__toggle span:last-child  { top: calc(50% + 2px); }
.island[data-state="open"] .island__toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.island[data-state="open"] .island__toggle span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ── scroll progress line ───────────────────────────────────────────────── */
.island__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-island-progress);
  transform-origin: left;
  transform: scaleX(var(--_progress, 0));
}

/* ── desktop: links slide out sideways, pill stays a pill ───────────────── */
@media (min-width: 768px) {
  .island { width: fit-content; max-width: calc(100% - 2 * var(--layout-gutter)); }
  .island[data-state="open"] { border-radius: var(--c-island-radius); }

  .island__bar {
    display: flex;
    column-gap: 0;
  }
  .island__toggle { display: none; }

  .island[data-state="open"] .island__status { grid-template-columns: 0fr; opacity: 0; }
  .island__status-inner { padding-inline: var(--space-2xs) var(--space-sm); }

  .island__links { grid-template-rows: none; grid-template-columns: 0fr; transition-property: grid-template-columns; }
  .island[data-state="open"] .island__links { grid-template-columns: 1fr; }
  .island__links-inner { flex-direction: row; align-items: center; }
  .island__links-inner > :first-child { margin-top: 0; }
  .island__link { padding-inline: var(--space-xs); }
  .island .lang-toggle { align-self: center; margin: 0 var(--space-2xs); }
  .island__cta { margin-bottom: 0; }
}

/* ── components/lang-toggle */
/* Language toggle — EN / বাংলা. Lives inside the island (dark), active option is orange with ink text. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  border-radius: var(--c-lang-toggle-radius);
  background: var(--c-lang-toggle-bg);
}

.lang-toggle__opt {
  height: var(--c-lang-toggle-height);
  padding-inline: var(--space-xs);
  border-radius: var(--c-lang-toggle-radius);
  color: var(--c-lang-toggle-text);
  font-family: var(--type-nav-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-nav-weight);
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.lang-toggle__opt:hover { color: var(--color-on-dark); }
.lang-toggle__opt[aria-pressed="true"] {
  background: var(--c-lang-toggle-active-bg);
  color: var(--c-lang-toggle-active-text);
}

/* ── components/look */
/* Look — gives each solution page its own character while staying Ember.
   The template puts look--<accent> on <html>, so every token derived from
   --gradient-brand / --gradient-text (buttons, accents, island CTA, rails…)
   follows on that page. Layout variants live in the components they change:
   page-hero--split|reverse|stacked · flow-diagram--flow|row|timeline|checklist
   · offers--grid|rows|bento · pains--light|dark. */

:root.look--amber {
  --gradient-brand: var(--gradient-brand-amber);
  --gradient-text: var(--gradient-text-amber);
  --gradient-canvas-glow: var(--gradient-glow-amber);
  --gradient-dark-glow: var(--gradient-dark-glow-amber);
}
:root.look--rust {
  --gradient-brand: var(--gradient-brand-rust);
  --gradient-text: var(--gradient-text-rust);
  --gradient-canvas-glow: var(--gradient-glow-rust);
  --gradient-dark-glow: var(--gradient-dark-glow-rust);
}
:root.look--wood {
  --gradient-brand: var(--gradient-brand-wood);
  --gradient-text: var(--gradient-text-wood);
  --gradient-canvas-glow: var(--gradient-glow-wood);
  --gradient-dark-glow: var(--gradient-dark-glow-wood);
}
:root.look--peach {
  --gradient-brand: var(--gradient-brand-peach);
  --gradient-text: var(--gradient-text-peach);
  --gradient-canvas-glow: var(--gradient-glow-peach);
  --gradient-dark-glow: var(--gradient-dark-glow-peach);
}

/* ── components/offer-card */
/* Offer card — one project from docs/PROJECT-CATALOG.md: number, name, brief,
   "you get", "live in", stack chips, and a small dark log that plays the
   outcome line by line when the card scrolls in.
   Markup: <article class="offer-card card card--interactive">
             <p class="offer-card__num">#01</p><h3 class="t-h3">…</h3><p class="offer-card__brief">…</p>
             <ol class="offer-card__log"><li>…</li>…</ol>
             <dl class="offer-card__facts"><div><dt>You get</dt><dd>…</dd></div>…</dl>
             <ul class="chips">…</ul></article> */
.offer-card { display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }

.offer-card__num {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--color-text-accent);
}
.offer-card__brief { color: var(--color-text-muted); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }

.offer-card__log {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--c-offer-card-log-bg);
  background-image: var(--gradient-dark-glow);
  color: var(--c-offer-card-log-text);
  font-size: var(--type-meta-size);
}
.offer-card__log li { display: flex; gap: var(--space-2xs); }
.offer-card__log li::before { content: "→"; color: var(--c-offer-card-log-accent); }
.offer-card__log li:last-child { color: var(--color-on-dark); font-weight: var(--type-button-weight); }
.offer-card__log li:last-child::before { content: "✓"; color: var(--color-success-bright); }

/* lines play in one after another when the card arrives */
.js .offer-card__log li { opacity: 0; transform: translateX(-6px); }
.is-visible .offer-card__log li {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}
.is-visible .offer-card__log li:nth-child(1) { transition-delay: var(--motion-slow); }
.is-visible .offer-card__log li:nth-child(2) { transition-delay: calc(var(--c-offer-card-log-step) * 1 + var(--motion-slow)); }
.is-visible .offer-card__log li:nth-child(3) { transition-delay: calc(var(--c-offer-card-log-step) * 2 + var(--motion-slow)); }
.is-visible .offer-card__log li:nth-child(4) { transition-delay: calc(var(--c-offer-card-log-step) * 3 + var(--motion-slow)); }

.offer-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: auto; }
.offer-card__facts div { display: flex; flex-direction: column; gap: var(--space-3xs); }
.offer-card__facts dt {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--color-text-subtle);
}
.offer-card__facts dd { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }

/* ── offer layouts (content look.offers) ───────────────────────────────── */
.offers { display: grid; gap: var(--space-md); grid-template-columns: 1fr; grid-auto-flow: dense; }

/* grid: plain columns */
@media (min-width: 768px) { .offers--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offers--grid { grid-template-columns: repeat(3, 1fr); } }

/* rows: one wide card per row — story on the left, the log and facts on the right */
@media (min-width: 768px) {
  .offers--rows .offer-card,
  .offers--bento .offer-card:nth-child(3n + 1) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: var(--space-xl);
    align-items: start;
  }
  .offers--rows .offer-card > *,
  .offers--bento .offer-card:nth-child(3n + 1) > * { grid-column: 1; }
  .offers--rows .offer-card__log,
  .offers--bento .offer-card:nth-child(3n + 1) .offer-card__log { grid-column: 2; grid-row: 1 / span 3; }
  .offers--rows .offer-card__facts,
  .offers--bento .offer-card:nth-child(3n + 1) .offer-card__facts { grid-column: 2; grid-row: 4 / span 2; margin-top: var(--space-sm); }
}

/* bento: mixed sizes — every third card spans two columns */
@media (min-width: 768px) { .offers--bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .offers--bento { grid-template-columns: repeat(3, 1fr); }
  .offers--bento .offer-card:nth-child(3n + 1) { grid-column: span 2; }
}

/* ── components/page-hero */
/* Page hero — the top of a solution page: breadcrumb, H1 (keyword kicker +
   promise line), lede, CTA, contact links; a live scene (viz) on the right.
   Reuses .hero__kicker / .hero__line / .hero__lede type from the hero component. */
.page-hero {
  display: grid;
  gap: var(--c-page-hero-gap);
  align-items: center;
}
@media (min-width: 1024px) {
  .page-hero { grid-template-columns: 1.05fr 0.95fr; }
}

.page-hero__copy { display: flex; flex-direction: column; gap: var(--space-md); }

.page-hero__scene {
  position: relative;
  width: 100%;
  max-width: var(--c-page-hero-scene-max);
  margin-inline: auto;
}
.page-hero__scene .viz { box-shadow: var(--shadow-lg); }
@media (min-width: 1024px) {
  .page-hero__scene { transform: rotate(1.2deg); }
}

.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  justify-content: center;
}

/* ── layout variants (content look.hero) ───────────────────────────────── */
/* reverse: the scene leads on the left */
@media (min-width: 1024px) {
  .page-hero--reverse { grid-template-columns: 0.95fr 1.05fr; }
  .page-hero--reverse .page-hero__scene { order: -1; transform: rotate(-1.2deg); }
}

/* stacked: centred copy, a wide scene underneath */
.page-hero--stacked { text-align: center; }
.page-hero--stacked .page-hero__copy { align-items: center; max-width: var(--c-page-hero-copy-max); margin-inline: auto; }
.page-hero--stacked .hero__title { align-items: center; }
.page-hero--stacked .hero__lede { margin-inline: auto; }
.page-hero--stacked .cluster,
.page-hero--stacked .contact-links,
.page-hero--stacked .breadcrumb ol { justify-content: center; }
@media (min-width: 1024px) {
  .page-hero--stacked { grid-template-columns: 1fr; }
  .page-hero--stacked .page-hero__scene { max-width: var(--c-page-hero-scene-wide); transform: none; }
}

/* ── components/pain-cards */
/* Pain cards — three problems in the client's own words. When a card scrolls
   in (.is-visible from reveal), a gradient mark draws under the quote.
   Markup: <ul class="pain-cards"><li class="pain-cards__item card">
           <p class="pain-cards__quote">"…"</p><p class="pain-cards__note">…</p></li>…</ul> */
.pain-cards {
  list-style: none;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .pain-cards { grid-template-columns: repeat(3, 1fr); }
}

.pain-cards__quote {
  display: inline;
  font-family: var(--type-quote-family);
  font-style: italic;
  font-size: var(--type-quote-size);
  line-height: var(--type-quote-leading);
  color: var(--c-pain-cards-quote);
  background-image: var(--c-pain-cards-mark);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--c-pain-cards-mark-height);
  transition: background-size var(--motion-slow) var(--motion-ease);
  transition-delay: calc(var(--_i, 0) * var(--motion-stagger) + var(--motion-base));
}
.is-visible .pain-cards__quote,
.pain-cards__item.is-visible .pain-cards__quote { background-size: 100% var(--c-pain-cards-mark-height); }

.pain-cards__note {
  margin-top: var(--space-sm);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
  color: var(--color-text-muted);
}

/* ── dark variant (content look.pains) — the problems on a dark band ─────── */
.pains--dark {
  background-color: var(--color-dark);
  background-image: var(--gradient-dark-glow);
  color: var(--color-on-dark);
}
.pains--dark h2 { color: var(--color-on-dark); }
.pains--dark .section-header__eyebrow { color: var(--color-orange-300); }
.pains--dark .pain-cards__item { background: var(--color-dark-2); border: var(--border-dark); box-shadow: none; }
.pains--dark .pain-cards__quote { color: var(--color-on-dark); }
.pains--dark .pain-cards__note { color: var(--color-on-dark-muted); }

/* ── components/process-steps */
/* Process steps — numbered steps joined by a line (horizontal from md up).
   Markup: <ol class="process-steps"><li class="process-steps__item">
           <span class="process-steps__num">1</span><h3 class="t-h3">…</h3><p>…</p></li>…</ol> */
.process-steps {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  counter-reset: step;
}
@media (min-width: 768px) {
  .process-steps { grid-template-columns: repeat(var(--_cols, 3), 1fr); gap: var(--space-md); }
}

.process-steps__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); }
.process-steps__item p { color: var(--color-text-muted); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); }

.process-steps__num {
  position: relative;
  z-index: var(--z-base);
  width: var(--c-process-steps-num-size);
  height: var(--c-process-steps-num-size);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2xs);
  border-radius: 50%;
  background: var(--c-process-steps-num-bg);
  color: var(--c-process-steps-num-text);
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  box-shadow: var(--shadow-glow);
}

/* the connecting line, behind the numbers */
@media (min-width: 768px) {
  .process-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--c-process-steps-num-size) / 2);
    left: var(--c-process-steps-num-size);
    right: calc(-1 * var(--space-md));
    height: 2px;
    background: var(--c-process-steps-line);
  }
}

/* ── components/related-links */
/* Related links — cards pointing to other solution pages.
   Markup: <ul class="related-links"><li><a class="related-links__item card card--interactive" href="…">
           <b>Name</b><span>line</span></a></li></ul> */
.related-links { list-style: none; display: grid; gap: var(--space-md); }
@media (min-width: 768px) {
  .related-links { grid-template-columns: repeat(3, 1fr); }
}
.related-links__item { display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; }
.related-links__item b { font-family: var(--type-h4-family); font-size: var(--type-h4-size); letter-spacing: var(--type-h4-tracking); }
.related-links__item span { color: var(--color-text-muted); font-size: var(--type-body-sm-size); }
.related-links__item b::after { content: " →"; color: var(--c-related-links-arrow); }

/* icons variant — the home page's "every solution" grid */
.related-links--icons .icon-tile { margin-bottom: var(--space-2xs); }
@media (min-width: 1024px) {
  .related-links--icons { grid-template-columns: repeat(4, 1fr); }
}

/* ── components/reveal */
/* Reveal — the fade-up entrance every block uses.
   [data-reveal]            fades up when it scrolls into view
   [data-reveal-stagger]    its children fade up one after another
   Hidden only when JS is running (html.js), so content never stays invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--c-reveal-distance));
  transition:
    opacity var(--c-reveal-duration) var(--c-reveal-ease),
    transform var(--c-reveal-duration) var(--c-reveal-ease);
  transition-delay: calc(var(--_i, 0) * var(--c-reveal-stagger));
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── components/section-header */
/* Section header — eyebrow (with gradient rule) → h2 (+ gradient accent) → subheading.
   Include: <!-- @include components/section-header/section-header.html
                  eyebrow="01 · How I work" title="Four things" accent="you can count on" sub="…" --> */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--c-section-header-gap);
  max-width: var(--c-section-header-max);
  margin-bottom: var(--space-xl);
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--c-section-header-eyebrow);
}
.section-header__eyebrow::before {
  content: "";
  width: var(--c-section-header-rule-width);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-section-header-eyebrow-rule);
}

.section-header .t-accent { background: var(--c-section-header-accent); -webkit-background-clip: text; background-clip: text; }
.section-header__sub { color: var(--c-section-header-sub); max-width: 56ch; }

.section-header--center { align-items: center; text-align: center; margin-inline: auto; }

.section--dark .section-header__sub { color: var(--color-on-dark-muted); }
.section--dark .section-header__eyebrow { color: var(--color-orange-300); }

/* ── components/stat-strip */
/* Stat strip — 3–4 big numbers with labels, divided by hairlines.
   Markup: <dl class="stat-strip"><div class="stat-strip__item">
           <dt class="stat-strip__label">years</dt><dd class="stat-strip__value">2.5</dd></div>…</dl> */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--c-stat-strip-divider);
}
@media (min-width: 768px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
}

.stat-strip__item {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
}
.stat-strip__item + .stat-strip__item { padding-left: var(--space-sm); border-left: var(--c-stat-strip-divider); }
@media (max-width: 767.98px) {
  .stat-strip__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat-strip__item:nth-child(n + 3) { border-top: var(--c-stat-strip-divider); }
}

.stat-strip__value {
  font-family: var(--type-h1-family);
  font-size: var(--c-stat-strip-value-size);
  font-weight: var(--type-h1-weight);
  line-height: 1;
  color: var(--c-stat-strip-value);
}
.stat-strip__label {
  font-size: var(--type-meta-size);
  color: var(--c-stat-strip-label);
}

/* ── components/story-scroll */
/* Story scroll — "how we see it". Steps scroll on the left while the visual
   on the right stays put (sticky) and changes with the active step.
   story-scroll.js sets data-active on [data-story-visual], toggles .is-on on
   anything with data-from="n" (on from step n), .is-current on data-cap="n",
   and writes scroll progress to --_progress for the rail.
   Below md there's no sticky: each step stays readable, the visual sits after them. */
.story-scroll { position: relative; display: grid; gap: var(--space-xl); }

.story-scroll__steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-lg); }
.story-scroll__step { position: relative; padding-left: var(--space-lg); }
.story-scroll__num {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--c-story-scroll-num);
}
.story-scroll__step h3 { margin: var(--space-2xs) 0; }
.story-scroll__step p { color: var(--color-text-muted); max-width: 46ch; }

/* progress rail on the left of the steps */
.story-scroll__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--c-story-scroll-rail-width);
  border-radius: var(--radius-pill);
  background: var(--c-story-scroll-rail);
  overflow: hidden;
}
.story-scroll__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-story-scroll-rail-fill);
  transform-origin: top;
  transform: scaleY(var(--_progress, 0));
}
.story-scroll__list { position: relative; }

.story-scroll__caption {
  margin-top: var(--space-sm);
  min-height: 3em;
  text-align: center;
  font-size: var(--type-meta-size);
  color: var(--color-text-subtle);
}
.story-scroll__caption [data-cap] { display: none; }
.story-scroll__caption [data-cap].is-current { display: block; animation: fade-in var(--motion-base) var(--motion-ease); }

@media (min-width: 768px) {
  .story-scroll { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: var(--space-2xl); }
  .story-scroll__step {
    min-height: var(--c-story-scroll-step-min);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: var(--c-story-scroll-dim);
    transition: opacity var(--motion-base) var(--motion-ease);
  }
  .story-scroll__step.is-current { opacity: 1; }
  .story-scroll__visual { position: sticky; top: var(--c-story-scroll-sticky-top); }
}

/* ── row variant: the pipeline sits on top, full width, and plays itself;
      the four steps sit underneath in a row (story-scroll.js autoplays) ── */
@media (min-width: 768px) {
  .story-scroll--row { grid-template-columns: 1fr; }
  .story-scroll--row .story-scroll__visual { position: static; order: -1; }
  .story-scroll--row .story-scroll__steps { flex-direction: row; gap: var(--space-md); }
  .story-scroll--row .story-scroll__step { flex: 1; min-height: 0; padding-left: 0; padding-top: var(--space-md); }
  .story-scroll--row .story-scroll__rail { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: var(--c-story-scroll-rail-width); }
  .story-scroll--row .story-scroll__rail::after { transform-origin: left; transform: scaleX(var(--_progress, 0)); }
}

/* ── components/timeline */
/* Timeline — experience entries on a vertical line with gradient dots.
   Markup: <ol class="timeline"><li class="timeline__item">
           <p class="timeline__when">May 2024 — now</p><h3 class="t-h3">…</h3>
           <p class="timeline__where">…</p><p class="timeline__text">…</p></li>…</ol> */
.timeline { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-lg); }
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--c-timeline-dot-size) / 2 - 1px);
  top: var(--space-2xs);
  bottom: var(--space-2xs);
  width: 2px;
  background: var(--c-timeline-line);
}

.timeline__item { position: relative; padding-left: calc(var(--c-timeline-dot-size) + var(--space-md)); }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3xs);
  width: var(--c-timeline-dot-size);
  height: var(--c-timeline-dot-size);
  border-radius: 50%;
  background: var(--c-timeline-dot);
  box-shadow: var(--shadow-glow);
}

.timeline__when {
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-case);
  color: var(--c-timeline-when);
  margin-bottom: var(--space-2xs);
}
.timeline__where { font-size: var(--type-meta-size); color: var(--color-text-subtle); margin-top: var(--space-3xs); }
.timeline__text { margin-top: var(--space-2xs); color: var(--color-text-muted); max-width: 60ch; }

/* ── components/viz */
/* Viz — small dark "product windows" that show a service working instead of
   describing it. One partial per service in this folder (viz-ai.html,
   viz-automation.html, viz-backup.html, viz-monitor.html, viz-security.html,
   viz-web.html). Pure HTML/CSS; motion pauses under reduced-motion. */

.viz {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--c-viz-height);
  overflow: hidden;
  border-radius: var(--c-viz-radius);
  background-color: var(--c-viz-bg);
  background-image: var(--c-viz-glow);
  color: var(--c-viz-text);
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
}

/* window chrome */
.viz__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--c-viz-line);
  color: var(--c-viz-subtle);
}
.viz__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-viz-surface-2); }
.viz__bar span { margin-left: var(--space-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz__body { position: relative; flex: 1; padding: var(--space-xs); min-height: 0; }

/* shared bits */
.viz-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--c-viz-surface);
  color: var(--c-viz-muted);
  white-space: nowrap;
}
.viz-pill svg { width: 12px; height: 12px; }
.viz-pill--ok { color: var(--c-viz-ok); }
.viz-pill--accent { background: var(--c-viz-accent); color: var(--color-on-orange); font-weight: var(--type-button-weight); }

.viz-line { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-viz-surface-2); }
.viz-line--90 { width: 90%; }
.viz-line--70 { width: 70%; }
.viz-line--50 { width: 50%; }

/* ── ai: a private chat ─────────────────────────────────────────────────── */
.viz-chat { display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; }
.viz-chat__msg {
  max-width: 82%;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--c-viz-radius);
  background: var(--c-viz-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.viz-chat__msg--me {
  align-self: flex-end;
  background: var(--c-viz-accent);
  color: var(--color-on-orange);
  font-weight: var(--type-button-weight);
}
.viz-chat__cite { color: var(--color-orange-300); }
.viz-chat .viz-pill { margin-top: auto; align-self: flex-start; }

/* ── automation: a flow with a moving token ─────────────────────────────── */
.viz-flow { display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); height: 100%; }
.viz-flow__track { position: relative; display: flex; justify-content: space-between; align-items: center; }
.viz-flow__track::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  top: 50%;
  height: 2px;
  background: var(--c-viz-surface-2);
}
.viz-flow__node {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  min-width: 56px;
  border-radius: var(--c-viz-inner-radius);
  background: var(--c-viz-surface);
  border: 1px solid var(--c-viz-line);
  color: var(--c-viz-muted);
}
.viz-flow__node svg { width: 16px; height: 16px; color: var(--c-viz-accent-solid); }
.viz-flow__token {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--c-viz-accent);
  box-shadow: var(--shadow-glow);
  animation: viz-travel calc(var(--motion-pulse) * 1.6) var(--motion-ease) infinite;
}
@keyframes viz-travel {
  from { left: 6%; }
  to   { left: 92%; }
}
.viz-flow__log { display: flex; justify-content: space-between; color: var(--c-viz-subtle); }

/* ── backup: a mesh of office PCs ───────────────────────────────────────── */
.viz-mesh { position: relative; height: 100%; }
.viz-mesh__vault {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-viz-accent);
  color: var(--color-on-orange);
  box-shadow: var(--shadow-glow);
}
.viz-mesh__vault svg { width: 20px; height: 20px; }
.viz-mesh__pc {
  position: absolute;
  width: 26px;
  height: 20px;
  border-radius: var(--c-viz-inner-radius);
  background: var(--c-viz-surface);
  border: 1px solid var(--c-viz-line);
}
.viz-mesh__pc::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-hair);
  background: var(--c-viz-accent);
  opacity: 0.85;
  animation: pulse var(--motion-pulse) var(--motion-ease) infinite;
}
.viz-mesh__pc--off::after { background: var(--c-viz-surface-2); animation: none; }
.viz-mesh__pc:nth-child(2) { left: 8%;  top: 10%; }
.viz-mesh__pc:nth-child(3) { left: 44%; top: 0; }
.viz-mesh__pc:nth-child(4) { right: 8%; top: 10%; }
.viz-mesh__pc:nth-child(5) { left: 12%; top: 58%; }
.viz-mesh__pc:nth-child(6) { right: 12%; top: 58%; }
.viz-mesh__pc:nth-child(3)::after { animation-delay: calc(-1 * var(--motion-slow)); }
.viz-mesh__pc:nth-child(6)::after { animation-delay: calc(-2 * var(--motion-slow)); }
.viz-mesh__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.viz-meter { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--c-viz-surface-2); overflow: hidden; }
.viz-meter i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--c-viz-accent);
  transform-origin: left;
  animation: viz-fill calc(var(--motion-pulse) * 1.4) var(--motion-ease) infinite;
}
@keyframes viz-fill {
  0%   { transform: scaleX(0.08); }
  70%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ── monitor: uptime rows + a forecast warning ──────────────────────────── */
.viz-rows { display: flex; flex-direction: column; gap: var(--space-2xs); }
.viz-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2xs); }
.viz-row__name { color: var(--c-viz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-ticks { display: flex; gap: 2px; }
.viz-ticks i { width: 4px; height: 14px; border-radius: var(--radius-hair); background: var(--c-viz-ok); opacity: 0.85; }
.viz-ticks i.is-warn { background: var(--c-viz-warn); }
.viz-row__val { color: var(--c-viz-ok); min-width: 46px; text-align: right; }
.viz-row--warn .viz-row__val { color: var(--c-viz-warn); }
.viz-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: var(--c-viz-inner-radius);
  background: var(--c-viz-surface);
  border-left: 3px solid var(--c-viz-warn);
  color: var(--c-viz-text);
}

/* ── security: a checklist + score ──────────────────────────────────────── */
.viz-check { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); height: 100%; align-items: center; }
.viz-check ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); }
.viz-check li { display: flex; align-items: center; gap: var(--space-2xs); color: var(--c-viz-muted); }
.viz-check li svg { width: 16px; height: 16px; flex: none; color: var(--c-viz-ok); }
.viz-score {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--c-viz-accent-solid) 0 100%, var(--c-viz-surface-2) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, var(--color-ink) 55%);
          mask: radial-gradient(circle, transparent 54%, var(--color-ink) 55%);
}
.viz-score-wrap { position: relative; display: grid; place-items: center; }
.viz-score-wrap b {
  position: absolute;
  font-family: var(--type-h3-family);
  font-size: var(--type-h4-size);
  color: var(--c-viz-text);
}

/* ── web: a browser with an accessibility badge ─────────────────────────── */
.viz-page { display: flex; flex-direction: column; gap: var(--space-2xs); }
.viz-page__hero { height: 34px; border-radius: var(--c-viz-inner-radius); background: var(--c-viz-surface); }
.viz-page__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xs); }
.viz-page__cols span { height: 28px; border-radius: var(--c-viz-inner-radius); background: var(--c-viz-surface); }
.viz-page .viz-pill--accent { position: absolute; right: var(--space-xs); bottom: var(--space-xs); }

/* ── agent: a conversation that plays out, then loops ───────────────────── */
.viz--tall { height: auto; min-height: var(--c-viz-height); }
.viz-seq { display: flex; flex-direction: column; gap: var(--space-2xs); }
.viz-seq > * {
  opacity: 0;
  transform: translateY(6px);
  animation: viz-seq calc(var(--motion-pulse) * 4) var(--motion-ease) infinite;
}
.viz-seq > :nth-child(1) { animation-delay: 0s; }
.viz-seq > :nth-child(2) { animation-delay: calc(var(--motion-pulse) * 0.45); }
.viz-seq > :nth-child(3) { animation-delay: calc(var(--motion-pulse) * 0.9); }
.viz-seq > :nth-child(4) { animation-delay: calc(var(--motion-pulse) * 1.35); }
.viz-seq > :nth-child(5) { animation-delay: calc(var(--motion-pulse) * 1.8); }
.viz-seq > :nth-child(6) { animation-delay: calc(var(--motion-pulse) * 2.25); }
@keyframes viz-seq {
  0%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: none; }
  88%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.viz-seq .viz-pill { align-self: flex-start; }
.viz-event {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--c-viz-inner-radius);
  background: var(--c-viz-surface);
  border-left: 3px solid var(--c-viz-accent-solid);
  color: var(--c-viz-text);
}
.viz-event--ok { border-left-color: var(--c-viz-ok); }
.viz-event--warn { border-left-color: var(--c-viz-warn); }

/* ── dashboard bars ─────────────────────────────────────────────────────── */
.viz-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2xs);
  height: var(--c-viz-bars-height);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid var(--c-viz-line);
}
.viz-bars i {
  flex: 1;
  border-radius: var(--radius-hair) var(--radius-hair) 0 0;
  background: var(--c-viz-accent);
  transform-origin: bottom;
  animation: viz-grow calc(var(--motion-pulse) * 4) var(--motion-ease) infinite;
}
.viz-bars i:nth-child(1) { height: 35%; }
.viz-bars i:nth-child(2) { height: 52%; animation-delay: var(--motion-fast); }
.viz-bars i:nth-child(3) { height: 44%; animation-delay: calc(var(--motion-fast) * 2); }
.viz-bars i:nth-child(4) { height: 63%; animation-delay: calc(var(--motion-fast) * 3); }
.viz-bars i:nth-child(5) { height: 58%; animation-delay: calc(var(--motion-fast) * 4); }
.viz-bars i:nth-child(6) { height: 76%; animation-delay: calc(var(--motion-fast) * 5); }
.viz-bars i:nth-child(7) { height: 70%; animation-delay: calc(var(--motion-fast) * 6); }
.viz-bars i:nth-child(8) { height: 92%; animation-delay: calc(var(--motion-fast) * 7); }
@keyframes viz-grow {
  0%   { transform: scaleY(0.05); }
  14%  { transform: scaleY(1); }
  90%  { transform: scaleY(1); }
  100% { transform: scaleY(0.05); }
}

/* ── saas tiles: many tools fading into one ─────────────────────────────── */
.viz-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3xs); margin-bottom: var(--space-sm); }
.viz-tiles span {
  padding: var(--space-3xs);
  border-radius: var(--c-viz-inner-radius);
  background: var(--c-viz-surface);
  border: 1px solid var(--c-viz-line);
  color: var(--c-viz-muted);
  text-align: center;
  animation: viz-merge calc(var(--motion-pulse) * 4) var(--motion-ease) infinite;
}
@keyframes viz-merge {
  0%, 40%  { opacity: 1; transform: none; }
  55%, 90% { opacity: 0.25; transform: scale(0.92); }
  100%     { opacity: 1; transform: none; }
}

/* ── phone ──────────────────────────────────────────────────────────────── */
.viz-phone-wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; }
.viz-device {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: var(--c-viz-device-width);
  padding: var(--space-xs) var(--space-2xs);
  border-radius: var(--radius-lg);
  border: 2px solid var(--c-viz-surface-2);
  background: var(--c-viz-surface);
}
.viz-device__notch { align-self: center; width: 40%; height: 6px; border-radius: var(--radius-pill); background: var(--c-viz-surface-2); }
.viz-device .viz-page__cols { grid-template-columns: 1fr 1fr; }
.viz-device__btn {
  padding: var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--c-viz-accent);
  color: var(--color-on-orange);
  text-align: center;
  font-weight: var(--type-button-weight);
}

/* ── course progress ────────────────────────────────────────────────────── */
.viz-progress {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
  color: var(--c-viz-muted);
}
.viz-progress i { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--c-viz-surface-2); }
.viz-progress i::after { content: ""; position: absolute; inset: 0; background: var(--c-viz-accent); transform-origin: left; }
.viz-progress i.is-grow::after { animation: viz-fill calc(var(--motion-pulse) * 2) var(--motion-ease) infinite; }
.viz-event b { color: var(--color-orange-300); font-weight: var(--type-button-weight); }

@media (prefers-reduced-motion: reduce) {
  .viz-seq > * { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .viz-flow__token { left: 50%; }
  .viz-meter i { transform: none; }
}

/* ── components/wordmark */
/* Wordmark — the "ruhan" logo. wordmark.html is generated by `npm run brand`
   (tools/brand.py); ink follows currentColor, the ember core is a gradient.
   Include: <!-- @include components/wordmark/wordmark.html id="nav" --> (id must be unique per page) */
.wordmark {
  display: block;
  height: var(--c-wordmark-height);
  width: auto;
  color: var(--c-wordmark-ink);
  overflow: visible;
}
.wordmark--sm { height: var(--c-wordmark-height-sm); }
.wordmark--lg { height: var(--c-wordmark-height-lg); }

.island .wordmark,
.footer .wordmark,
.section--dark .wordmark { color: var(--c-wordmark-ink-on-dark); }