/* Base — variables, reset, typography */

/* Red Pill Labs — Human-centered minimal aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Enhanced color psychology for Red Pill Labs */
    --ink: #0a0b0f;
    --graphite: #1a1d23;
    --parchment: #fefcf9;
    --mist: #f8f6f3;
    --sage: #e8f5e8;

    /* Red Pill Labs signature colors - psychology optimized */
    --pill-red: #dc2626;        /* Primary red - urgency, action, transformation */
    --pill-red-dark: #b91c1c;   /* Darker red - authority, confidence */
    --pill-red-light: #fef2f2;  /* Light red - warmth, approachability */
    --pill-accent: #7c3aed;     /* Purple accent - innovation, wisdom */
    --pill-accent-light: #f3f0ff; /* Light purple - creativity */

    /* Trust and stability colors */
    --trust-blue: #1e40af;      /* Trust, reliability */
    --trust-blue-light: #dbeafe; /* Calm, professional */
    --success-green: #059669;   /* Success, growth */
    --warning-amber: #d97706;   /* Attention, urgency */

    /* Neutral grays for balance */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    /* Legacy support */
    --clay: var(--pill-red);
    --clay-dark: var(--pill-red-dark);
    --rose: var(--pill-red-light);

    /* Enhanced shadows for depth and trust */
    --shadow-soft: 0 28px 60px -40px rgba(10, 11, 15, 0.65);
    --shadow-light: 0 20px 45px -35px rgba(10, 11, 15, 0.45);
    --shadow-red: 0 20px 40px -20px rgba(220, 38, 38, 0.3);
    --shadow-accent: 0 20px 40px -20px rgba(124, 58, 237, 0.25);

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
    --max-width: 1100px;
    --transition: 220ms ease;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    background: var(--parchment);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--clay);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover, a:focus {
    color: var(--clay-dark);
}

button {
    font-family: inherit;
    cursor: pointer;
}

section {
    padding: 120px 0;
}

.container {
    width: min(92%, var(--max-width));
    margin: 0 auto;
}

/* Components — header, nav, buttons, hero, badges, typography helpers */

.header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(16px);
    background: rgba(253, 248, 244, 0.82);
    border-bottom: 1px solid rgba(19, 20, 26, 0.05);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.nav-links {
    display: flex;
    gap: 28px;
    font-size: 0.95rem;
}

.nav-links a {
    color: var(--graphite);
}

.nav-links a:hover,
.nav-links a:focus {
    color: var(--ink);
}

.primary-btn,
.secondary-btn {
    border-radius: 999px;
    padding: 13px 28px;
    border: none;
    font-weight: 600;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.primary-btn {
    background: linear-gradient(135deg, var(--pill-red), var(--pill-red-dark));
    color: white;
    box-shadow: var(--shadow-red);
    position: relative;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.primary-btn:hover::before {
    left: 100%;
}

.primary-btn:hover,
.primary-btn:focus {
    background: linear-gradient(135deg, var(--pill-red-dark), #991b1b);
    transform: translateY(-3px);
    box-shadow: 0 25px 50px -20px rgba(220, 38, 38, 0.4);
}

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

.secondary-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(19, 20, 26, 0.15);
}

.secondary-btn:hover,
.secondary-btn:focus {
    border-color: rgba(19, 20, 26, 0.35);
    transform: translateY(-2px);
}

.hero {
    display: grid;
    gap: 70px;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding-top: 80px;
}

.hero__intro {
    display: grid;
    gap: 28px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(19, 20, 26, 0.55);
}

.hero__eyebrow::before {
    content: '';
    height: 1px;
    width: 42px;
    background: rgba(19, 20, 26, 0.3);
}

.hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.hero__text {
    font-size: 1.15rem;
    color: rgba(19, 20, 26, 0.75);
    max-width: 540px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--pill-red), var(--pill-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.gradient-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
    opacity: 0.3;
}

.link-btn {
    align-self: center;
    font-weight: 600;
    color: var(--clay);
}

.link-btn:hover,
.link-btn:focus {
    color: var(--clay-dark);
}

.hero__note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.hero__note-pill {
    background: rgba(220, 38, 38, 0.12);
    color: var(--pill-red-dark);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Trust indicators */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pill-red-light);
    color: var(--pill-red-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.trust-icon {
    color: var(--success-green);
    font-weight: 700;
    font-size: 0.9rem;
}

.tilt-card {
    position: relative;
    transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1), box-shadow 500ms ease;
}

.tilt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 25px 65px -45px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 400ms ease;
}

.tilt-card:hover,
.tilt-card:focus-within {
    transform: translateY(-12px) rotate3d(1, 1, 0, 3deg);
}

.tilt-card:hover::after,
.tilt-card:focus-within::after {
    opacity: 1;
}

.pulse-glow {
    position: relative;
    overflow: hidden;
}

.pulse-glow::before {
    content: '';
    position: absolute;
    inset: -40% 20%;
    background: radial-gradient(circle, rgba(230, 90, 61, 0.25), transparent 55%);
    opacity: 0;
    transform: scale(0.8);
    animation: pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(0.75) translateY(12px);
    }
    40% {
        opacity: 0.5;
        transform: scale(1) translateY(0);
    }
    60% {
        opacity: 0.2;
        transform: scale(1.05) translateY(-8px);
    }
}

.badge-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(19, 20, 26, 0.55);
}

.badge-line::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: rgba(19, 20, 26, 0.35);
}

.page-hero {
    padding: 160px 0 100px;
    display: grid;
    gap: 24px;
}

.page-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.82rem;
    color: rgba(19, 20, 26, 0.55);
}

.page-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 5vw, 4.2rem);
    line-height: 1.08;
    margin: 0;
}

.page-hero__text {
    font-size: 1.18rem;
    color: rgba(19, 20, 26, 0.72);
    max-width: 640px;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.page-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero__panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(223, 237, 226, 0.95));
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.hero__panel::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(19, 20, 26, 0.08);
    pointer-events: none;
}

.panel__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 18px;
}

.panel__list {
    display: grid;
    gap: 16px;
}

.panel__item {
    background: rgba(253, 248, 244, 0.78);
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(19, 20, 26, 0.07);
    display: grid;
    gap: 6px;
}

.panel__item strong {
    font-size: 1.05rem;
}

.panel__item span {
    color: rgba(19, 20, 26, 0.6);
    font-size: 0.95rem;
}

.focus-stream {
    margin-top: -20px;
    padding-top: 0;
}

.focus-stream__grid {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.06);
    box-shadow: var(--shadow-soft);
    padding: 36px;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
}

.focus-stream__grid h3 {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
}

.focus-stream__cta {
    display: grid;
    gap: 12px;
    align-content: start;
}

.focus-stream__meta {
    font-size: 0.9rem;
    color: rgba(19, 20, 26, 0.6);
}

.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 16px;
    background: rgba(19, 20, 26, 0.08);
    color: var(--graphite);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.branches {
    display: grid;
    gap: 56px;
}

.branches__grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.branch-card__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--clay);
}

.branch-card__cta:hover,
.branch-card__cta:focus {
    color: var(--clay-dark);
}

.branch-card__pricing {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(19, 20, 26, 0.7);
}

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    color: rgba(19, 20, 26, 0.5);
    margin-bottom: 18px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    margin-bottom: 22px;
}

.section-text {
    color: rgba(19, 20, 26, 0.65);
    max-width: 620px;
    font-size: 1.05rem;
}

/* Layout — contact, forms, footer, legal, scroll animations */
.cta {
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px;
    display: grid;
    gap: 34px;
    border: 1px solid rgba(19, 20, 26, 0.05);
    box-shadow: var(--shadow-soft);
}

.cta__content {
    display: grid;
    gap: 12px;
}

.cta__content p {
    color: rgba(19, 20, 26, 0.65);
    max-width: 520px;
}

.contact {
    display: grid;
    gap: 28px;
}

.contact__grid {
    display: grid;
    gap: 38px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: center;
}

.contact__cards {
    display: grid;
    gap: 16px;
}

.contact-card {
    display: flex;
    gap: 18px;
    align-items: center;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid rgba(19, 20, 26, 0.06);
    padding: 18px 20px;
    box-shadow: var(--shadow-light);
}

.contact-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.contact-card__icon--blue {
    background: linear-gradient(135deg, #c7d7ff, #7c91ff);
}

.contact-card__icon--green {
    background: linear-gradient(135deg, #d6f6d8, #60cf7a);
}

.contact-card__icon--amber {
    background: linear-gradient(135deg, #ffe3c4, #f4a261);
}

.contact-card__title {
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-card__link {
    color: var(--clay);
    font-weight: 600;
}

.contact-card__meta {
    color: rgba(19, 20, 26, 0.65);
    font-size: 0.95rem;
}

.form {
    display: grid;
    gap: 18px;
}

.form label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(19, 20, 26, 0.55);
}

.form input,
.form textarea,
.form select {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(19, 20, 26, 0.12);
    background: rgba(253, 248, 244, 0.9);
    font-size: 1rem;
    color: var(--graphite);
    transition: border var(--transition), background var(--transition);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    outline: none;
    border-color: var(--clay);
    background: white;
}

.form textarea {
    min-height: 140px;
    resize: vertical;
}

.footer {
    padding: 60px 0 50px;
    background: transparent;
    color: rgba(19, 20, 26, 0.55);
    font-size: 0.9rem;
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px;
}

.footer__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.legal {
    padding: 120px 0;
}

.legal article {
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px;
    border: 1px solid rgba(19, 20, 26, 0.05);
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 24px;
}

.legal h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    margin-bottom: 12px;
}

.legal h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-top: 32px;
    margin-bottom: 12px;
}

.legal p,
.legal li {
    color: rgba(19, 20, 26, 0.7);
}

.legal ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}

.fade-up {
    opacity: 0;
    transform: translateY(18px);
}

.fade-up.is-visible {
    animation: fadeUp 0.8s ease forwards;
}

.fade-delay-1.is-visible {
    animation-delay: 0.2s;
}

.fade-delay-2.is-visible {
    animation-delay: 0.4s;
}

.fade-delay-3.is-visible {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sections — summary, docs, evidence grids */
.summary-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 40px;
}

.summary-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 14px;
}

.summary-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
}

.summary-card p,
.summary-card li {
    color: rgba(19, 20, 26, 0.68);
}

.summary-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.doc-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 32px;
}

.doc-card {
    position: relative;
    background: linear-gradient(155deg, rgba(12, 20, 28, 0.96), rgba(18, 34, 54, 0.88));
    border-radius: 28px;
    padding: 26px 24px;
    color: rgba(218, 234, 255, 0.95);
    overflow: hidden;
    box-shadow: 0 32px 72px -40px rgba(4, 9, 15, 0.75);
    animation: docReveal 0.9s ease both;
}

.doc-card::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.doc-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.doc-card header a {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(210, 232, 255, 0.85);
    text-decoration: none;
}

.doc-card header a:hover,
.doc-card header a:focus {
    color: rgba(210, 232, 255, 1);
}

.doc-body {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 58%), rgba(6, 12, 19, 0.58);
    border-radius: 20px;
    padding: 22px;
    overflow: hidden;
    height: 160px;
}

.doc-card footer {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: rgba(210, 232, 255, 0.85);
}

.doc-card--research {
    background: linear-gradient(155deg, rgba(34, 11, 27, 0.96), rgba(54, 20, 38, 0.86));
}

.doc-card--article {
    background: linear-gradient(155deg, rgba(48, 18, 8, 0.95), rgba(72, 36, 18, 0.85));
}

.doc-lines,
.doc-graph,
.doc-chart,
.doc-trenches,
.doc-dots,
.doc-wave,
.doc-gridlines,
.doc-preview {
    position: absolute;
    inset: 0;
}

.doc-lines::before,
.doc-lines::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, rgba(210, 232, 255, 0), rgba(210, 232, 255, 0.65), rgba(210, 232, 255, 0));
    animation: docLine 3s ease-in-out infinite;
}

.doc-lines::before { top: 32%; }
.doc-lines::after { top: 58%; animation-delay: 1.4s; }

.doc-graph::before {
    content: '';
    position: absolute;
    inset: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(210, 232, 255, 0.12), rgba(210, 232, 255, 0.35));
    clip-path: polygon(0% 72%, 18% 52%, 36% 58%, 56% 34%, 74% 42%, 90% 28%, 100% 38%, 100% 100%, 0% 100%);
    animation: docGraph 3.6s ease-in-out infinite;
}

.doc-graph::after {
    content: '';
    position: absolute;
    inset: 20px 22px;
    border-radius: 18px;
    border: 1px solid rgba(210, 232, 255, 0.15);
}

.doc-chart::before {
    content: '';
    position: absolute;
    inset: 24px 24px;
    background: conic-gradient(from 230deg, rgba(210, 232, 255, 0.85) 0deg 120deg, rgba(210, 232, 255, 0.2) 120deg 360deg);
    border-radius: 50%;
    mask: radial-gradient(circle, transparent 50%, black 51%);
    animation: docDial 3.6s ease-in-out infinite;
}

.doc-trenches {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 25px;
}

.doc-trenches::after {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 18px;
    border: 1px solid rgba(210, 232, 255, 0.1);
}

.doc-trenches span {
    width: 16px;
    height: 100px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(210, 232, 255, 0.6), rgba(210, 232, 255, 0.15));
    position: relative;
    overflow: hidden;
}

.doc-trenches span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(210, 232, 255, 0.1), rgba(210, 232, 255, 0.55));
    transform: translateY(-120%);
    animation: trenchFlow 4.2s ease-in-out infinite;
}

.doc-trenches span:nth-child(2)::after { animation-delay: 0.6s; }
.doc-trenches span:nth-child(3)::after { animation-delay: 1.2s; }

.doc-dots {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 24px 16px;
}

.doc-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(210, 232, 255, 0.85);
    animation: docDot 3s ease-in-out infinite;
}

.doc-dots span:nth-child(2) { animation-delay: 0.2s; }
.doc-dots span:nth-child(3) { animation-delay: 0.4s; }
.doc-dots span:nth-child(4) { animation-delay: 0.6s; }

.doc-wave::before {
    content: '';
    position: absolute;
    inset: 18px 12px;
    background: linear-gradient(180deg, rgba(210, 232, 255, 0.08), transparent);
    border-radius: 16px;
}

.doc-wave::after {
    content: '';
    position: absolute;
    inset: 30px 30px 30px 20px;
    border-radius: 12px;
    border: 1px solid rgba(210, 232, 255, 0.2);
    clip-path: polygon(0% 60%, 15% 45%, 35% 52%, 50% 35%, 65% 42%, 80% 30%, 90% 40%, 100% 20%, 100% 100%, 0% 100%);
    animation: docWave 4.5s ease-in-out infinite;
}

.doc-gridlines::before {
    content: '';
    position: absolute;
    inset: 18px 18px;
    background: repeating-linear-gradient(90deg, rgba(210, 232, 255, 0.08), rgba(210, 232, 255, 0.08) 1px, transparent 1px, transparent 24px),
                repeating-linear-gradient(0deg, rgba(210, 232, 255, 0.08), rgba(210, 232, 255, 0.08) 1px, transparent 1px, transparent 24px);
    border-radius: 14px;
    animation: docGrid 6s linear infinite;
}

.doc-preview::before,
.doc-preview::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
    animation: docPreview 5s ease-in-out infinite;
}

.doc-preview::after {
    top: 70px;
    animation-delay: 1.2s;
}

@keyframes docReveal {
    from { transform: translateY(18px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes docLine {
    0%, 100% { transform: translateX(-18px); opacity: 0.4; }
    50% { transform: translateX(18px); opacity: 1; }
}

@keyframes docGraph {
    0%, 100% { transform: scaleY(0.8); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes docDial {
    0% { transform: rotate(-30deg); }
    50% { transform: rotate(160deg); }
    100% { transform: rotate(-30deg); }
}

@keyframes docDot {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-22px); opacity: 1; }
}

@keyframes docWave {
    0%, 100% { transform: translateX(-8px); opacity: 0.65; }
    50% { transform: translateX(8px); opacity: 1; }
}

@keyframes docGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 24px); }
}

@keyframes docPreview {
    0%, 100% { transform: translateX(-18px); opacity: 0.35; }
    50% { transform: translateX(18px); opacity: 0.8; }
}

.viz-grid {
    display: grid;
    gap: 20px;
}

.viz-frame {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(223, 237, 226, 0.8));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 24px;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
}

.viz-frame::after {
    content: '';
    position: absolute;
    inset: -40% -40% auto;
    height: 120%;
    background: radial-gradient(circle at top, rgba(230, 90, 61, 0.15), transparent 65%);
    opacity: 0;
    animation: vizGlow 8s ease-in-out infinite;
    pointer-events: none;
}

.viz-title {
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(19, 20, 26, 0.55);
    margin-bottom: auto;
}

.viz-frame figcaption {
    margin-top: 18px;
    font-size: 0.94rem;
    color: rgba(19, 20, 26, 0.68);
    display: grid;
    gap: 6px;
}

.viz-frame figcaption a {
    font-weight: 600;
    color: var(--clay);
}

/* Divisions — division cards and enhanced stage animations */

/* Division Cards Styling */
.divisions {
    margin: 80px auto;
}

.divisions__grid {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    margin-top: 40px;
}

.division-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(220, 38, 38, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.division-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.division-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
}

.hosting-card::before {
    background: linear-gradient(90deg, var(--trust-blue), var(--success-green));
}

.labs-card::before {
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
}

.division-card__header {
    text-align: center;
    margin-bottom: 32px;
}

.division-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
    animation: iconFloat 3s ease-in-out infinite;
}

.hosting-icon {
    animation-delay: 0s;
}

.labs-icon {
    animation-delay: 1.5s;
}

.division-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--ink);
    margin: 0 0 8px;
}

.division-card p {
    color: rgba(10, 11, 15, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.division-card__features {
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

.feature-item:hover {
    transform: translateX(4px);
}

.feature-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.feature-item span:last-child {
    font-weight: 500;
    color: var(--ink);
}

.division-card__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.division-card__actions .primary-btn {
    width: 100%;
    text-align: center;
}

.division-card__actions .link-btn {
    color: var(--pill-red);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.division-card__actions .link-btn:hover {
    color: var(--pill-red-dark);
}

/* Animation Keyframes for Division Cards */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Enhanced animations for authenticity */
.immersive-stage {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.immersive-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.immersive-stage:hover::before {
    left: 100%;
}

.immersive-stage:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.3);
}

.immersive-stage__canvas {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.immersive-stage:hover .immersive-stage__canvas {
    transform: scale(1.02);
}

/* Sophisticated project animations */
.datagen-sheet {
    animation: dataFlow 4s ease-in-out infinite;
}

@keyframes dataFlow {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-4px) scale(1.02);
        opacity: 1;
    }
}

.bars span {
    animation: barPulse 3s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.15s);
}

@keyframes barPulse {
    0%, 100% { 
        transform: scaleY(0.6);
        opacity: 0.7;
    }
    50% { 
        transform: scaleY(1.1);
        opacity: 1;
    }
}

/* Chat animation enhancement */
.chat__bubble {
    animation: messageSlide 4s ease-in-out infinite;
}

.chat__bubble--secondary {
    animation-delay: 1.5s;
}

@keyframes messageSlide {
    0%, 20% { 
        transform: translateX(-20px);
        opacity: 0;
    }
    40%, 60% { 
        transform: translateX(0);
        opacity: 1;
    }
    80%, 100% { 
        transform: translateX(20px);
        opacity: 0;
    }
}

/* Node network animation */
.nodes span {
    animation: nodeConnect 5s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.2s);
}

@keyframes nodeConnect {
    0%, 100% { 
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% { 
        transform: scale(1.2);
        opacity: 1;
    }
}


/* Galleries — immersive stages, open-source showcases */
/* Immersive visual galleries */
.immersive-gallery__grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1000px;
    margin: 16px auto 0;
}

.immersive-stage {
    position: relative;
    min-height: 340px;
    padding: 48px 48px 56px;
    border-radius: 48px;
    overflow: hidden;
    color: #f6f8ff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
}

.immersive-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(0, 0, 0, 0.25), transparent 70%);
    opacity: 0.45;
    pointer-events: none;
}

.immersive-stage__label {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

.immersive-stage__canvas {
    position: relative;
    z-index: 1;
    margin-top: 32px;
}

.immersive-stage__cta {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.immersive-stage__cta::after {
    content: '→';
    font-size: 1.1em;
}

.immersive-stage__cta:hover,
.immersive-stage__cta:focus {
    opacity: 0.85;
}

.immersive-stage__note {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    max-width: 420px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

.immersive-stage--talent .immersive-stage__note {
    color: #4a1f14;
}

.immersive-stage--datagen {
    background: linear-gradient(135deg, #061522, #0e2a42 65%, #16415c);
}

.immersive-stage--datagen::before {
    content: '';
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 45deg, rgba(86, 196, 255, 0.25), transparent 35%, rgba(86, 196, 255, 0.35), transparent 80%);
    animation: rotateSlow 20s linear infinite;
    opacity: 0.55;
}

.immersive-stage .bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 200px;
}

.immersive-stage .bars span {
    width: 16px;
    border-radius: 12px;
    transform-origin: bottom;
    height: calc(var(--h) * 1px);
    animation: datagenBar 2.6s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.12s);
    opacity: 0.75;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
}

.immersive-stage--datagen .bars span {
    background: linear-gradient(180deg, rgba(86, 196, 255, 0.85), rgba(86, 196, 255, 0.2));
}

.datagen-sheet {
    position: absolute;
    inset: 18px 24px auto;
    height: 110px;
    border-radius: 16px;
    background: rgba(3, 10, 17, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 16px;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.datagen-sheet div {
    height: 10px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(86, 196, 255, 0.4), transparent);
    animation: sheetFlash 2.4s ease-in-out infinite;
    opacity: 0.6;
}
.datagen-sheet div:nth-child(1) { animation-delay: 0s; }
.datagen-sheet div:nth-child(2) { animation-delay: 0.2s; }
.datagen-sheet div:nth-child(3) { animation-delay: 0.4s; }
.datagen-sheet div:nth-child(4) { animation-delay: 0.6s; }

.zerodha-candles {
    position: absolute;
    inset: 26px 28px auto 28px;
    height: 120px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.zerodha-candles span {
    width: 12px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(112, 205, 255, 0.85), rgba(112, 205, 255, 0.18));
    position: relative;
    height: calc(60px + var(--d) * 8px);
    animation: candleWick 3.4s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.2s);
}

.zerodha-candles span::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    top: -16px;
    bottom: -18px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0.7;
}

.immersive-stage--talent {
    background: linear-gradient(120deg, #fff3ec, #f6c9b5 62%, #f08463);
    color: #3c180e;
}

.immersive-stage--talent::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 60%);
    animation: pulseSoft 14s ease-in-out infinite;
    opacity: 0.5;
}

.immersive-stage--talent .chat {
    width: min(420px, 70%);
    height: 200px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(60, 24, 14, 0.08);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.immersive-stage--talent .chat__bubble {
    height: 28px;
    border-radius: 999px;
    animation: chatBubble 5.2s ease-in-out infinite;
}

.immersive-stage--talent .chat__bubble--primary {
    background: linear-gradient(90deg, rgba(240, 122, 88, 0.85), rgba(255, 197, 171, 0.7));
}

.immersive-stage--talent .chat__bubble--secondary {
    background: linear-gradient(90deg, rgba(60, 24, 14, 0.15), rgba(60, 24, 14, 0.05));
    animation-delay: 1.6s;
}

.immersive-stage--talent .chat__wave {
    margin-top: auto;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 42px;
}

.immersive-stage--talent .chat__wave span {
    flex: 1;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(240, 122, 88, 0.65), rgba(240, 122, 88, 0.18));
    transform-origin: bottom;
    animation: waveBeat 1.8s ease-in-out infinite;
}

.immersive-stage--talent .chat__wave span:nth-child(2) { animation-delay: 0.15s; }
.immersive-stage--talent .chat__wave span:nth-child(3) { animation-delay: 0.3s; }
.immersive-stage--talent .chat__wave span:nth-child(4) { animation-delay: 0.45s; }
.immersive-stage--talent .chat__wave span:nth-child(5) { animation-delay: 0.6s; }
.immersive-stage--talent .chat__wave span:nth-child(6) { animation-delay: 0.75s; }

.immersive-stage--ml {
    background: linear-gradient(135deg, #04101e, #13253a 60%, #1f3f57);
}

.immersive-stage--zerodha {
    background: linear-gradient(135deg, #04101e, #102235 65%, #1a3a52);
}

.immersive-stage--zerodha::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 200deg, rgba(86, 196, 255, 0.25), transparent 45%, rgba(86, 196, 255, 0.2));
    animation: rotateSlow 18s linear infinite;
    opacity: 0.5;
}

.immersive-stage--zerodha .bars span {
    background: linear-gradient(180deg, rgba(112, 205, 255, 0.85), rgba(112, 205, 255, 0.18));
}

.immersive-stage--ml::before {
    content: '';
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 110deg, rgba(86, 196, 255, 0.3), transparent 55%, rgba(86, 196, 255, 0.18));
    animation: rotateSlow 24s linear infinite;
    opacity: 0.5;
}

.immersive-stage--ml .nodes {
    display: grid;
    grid-template-columns: repeat(6, minmax(24px, 1fr));
    gap: 16px;
}

.immersive-stage--ml .nodes span {
    aspect-ratio: 1/1;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(86, 196, 255, 0.85), rgba(86, 196, 255, 0.15));
    animation: nodePulse 3.4s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.18s);
    opacity: 0.8;
}

@keyframes rotateSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseSoft {
    0%, 100% { transform: scale(0.95); opacity: 0.45; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

@keyframes chatBubble {
    0%, 20% { transform: translateY(16px); opacity: 0; }
    40%, 60% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-12px); opacity: 0; }
}

@keyframes waveBeat {
    0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
    50% { transform: scaleY(1.2); opacity: 1; }
}

@keyframes nodePulse {
    0%, 100% { transform: scale(0.7); opacity: 0.45; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes datagenBar {
    0%, 100% {
        transform: scaleY(0.45);
        opacity: 0.45;
    }
    45% {
        transform: scaleY(1.1);
        opacity: 1;
    }
}

/* Animations — keyframes and motion effects */
@keyframes vizGlow {
    0%, 60% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
    }
    80% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.1);
    }
}

.viz-patent {
    background: linear-gradient(160deg, rgba(10, 25, 47, 0.9), rgba(23, 42, 69, 0.85));
    border: 1px solid rgba(104, 188, 255, 0.25);
    color: rgba(214, 233, 255, 0.9);
}

.viz-patent .viz-title,
.viz-patent figcaption {
    color: rgba(214, 233, 255, 0.85);
}

.viz-patent figcaption a {
    color: rgba(214, 233, 255, 0.95);
}

.viz-datagen figcaption a,
.viz-zerodha figcaption a,
.viz-mlops figcaption a {
    color: rgba(214, 233, 255, 0.9);
}

.viz-patent__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0 auto;
    width: 90%;
    height: 120px;
    position: relative;
}

.viz-patent__grid .node {
    width: 14px;
    height: 14px;
    background: rgba(104, 188, 255, 0.8);
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    box-shadow: 0 0 16px rgba(104, 188, 255, 0.7);
    animation: patentNode 4s ease-in-out infinite;
}

.viz-patent__grid .node.delay {
    animation-delay: 1.2s;
}

@keyframes patentNode {
    0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.6; }
    50% { transform: translateY(-14px) scale(1.2); opacity: 1; }
}

.viz-patent__radar {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(104, 188, 255, 0.4);
    overflow: hidden;
}

.viz-patent__radar .ring {
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    border: 1px solid rgba(104, 188, 255, 0.3);
    animation: radarRing 6s linear infinite;
}

.viz-patent__radar .pulse {
    position: absolute;
    inset: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 188, 255, 0.6), transparent 65%);
    animation: radarPulse 3s ease-in-out infinite;
}

@keyframes radarRing {
    0% { transform: scale(0.4); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes radarPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.viz-patent__trench {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120px;
}

.viz-patent__trench span {
    width: 18px;
    height: 90px;
    background: linear-gradient(180deg, rgba(104, 188, 255, 0.5), transparent);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.viz-patent__trench span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(104, 188, 255, 0.1), rgba(104, 188, 255, 0.6));
    transform: translateY(-100%);
    animation: trenchFlow 4.2s ease-in-out infinite;
}

.viz-patent__trench span:nth-child(2)::after {
    animation-delay: 0.6s;
}
.viz-patent__trench span:nth-child(3)::after {
    animation-delay: 1.2s;
}

@keyframes trenchFlow {
    0% { transform: translateY(-120%); }
    50% { transform: translateY(0); }
    100% { transform: translateY(120%); }
}

.viz-research {
    background: linear-gradient(150deg, rgba(248, 250, 252, 0.95), rgba(223, 237, 226, 0.85));
}

.viz-research__graph {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    height: 130px;
}

.viz-research__graph .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(230, 90, 61, 0.75);
    animation: graphDot 3.6s ease-in-out infinite;
}

.viz-research__graph .dot:nth-child(2) { animation-delay: 0.3s; }
.viz-research__graph .dot:nth-child(3) { animation-delay: 0.6s; }
.viz-research__graph .dot:nth-child(4) { animation-delay: 0.9s; }

@keyframes graphDot {
    0%, 100% { transform: translateY(0); opacity: 0.65; }
    50% { transform: translateY(-28px); opacity: 1; }
}

.viz-research__line svg {
    width: 100%;
    height: 110px;
}

.viz-research__line polyline {
    fill: none;
    stroke: rgba(230, 90, 61, 0.8);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 320;
    animation: drawLine 5s ease-in-out infinite;
}

@keyframes drawLine {
    0% { stroke-dashoffset: 320; }
    40%, 60% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -320; }
}

.viz-research__matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-self: center;
}

.viz-research__matrix span {
    width: 42px;
    height: 42px;
    background: radial-gradient(circle, rgba(230, 90, 61, 0.7), rgba(230, 90, 61, 0.1));
    border-radius: 14px;
    animation: matrixTwist 4.5s ease-in-out infinite;
}

.viz-research__matrix span:nth-child(2) { animation-delay: 0.5s; }
.viz-research__matrix span:nth-child(3) { animation-delay: 1s; }
.viz-research__matrix span:nth-child(4) { animation-delay: 1.5s; }

@keyframes matrixTwist {
    0%, 100% { transform: rotate(0deg) scale(0.9); }
    50% { transform: rotate(9deg) scale(1.15); }
}

.viz-article {
    background: linear-gradient(160deg, rgba(253, 248, 244, 0.92), rgba(230, 90, 61, 0.12));
}

.viz-article__swirl {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.viz-article__swirl::before,
.viz-article__swirl::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(230, 90, 61, 0.25);
    animation: swirl 7s linear infinite;
}

.viz-article__swirl::after {
    inset: 20%;
    border-color: rgba(104, 188, 255, 0.35);
    animation-duration: 5s;
}

@keyframes swirl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.viz-article__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    height: 120px;
}

.viz-article__grid span {
    background: rgba(230, 90, 61, 0.15);
    border-radius: 12px;
    animation: panelPulse 3.8s ease-in-out infinite;
}

.viz-article__grid span:nth-child(2) { animation-delay: 0.6s; }
.viz-article__grid span:nth-child(3) { animation-delay: 1.2s; }
.viz-article__grid span:nth-child(4) { animation-delay: 1.8s; }

@keyframes panelPulse {
    0%, 100% { transform: translateY(10px); opacity: 0.5; }
    50% { transform: translateY(-8px); opacity: 1; }
}

.viz-article__routes {
    position: relative;
    width: 160px;
    height: 120px;
    margin: 0 auto;
    background: radial-gradient(circle at center, rgba(230, 90, 61, 0.18), transparent 70%);
    border-radius: 28px;
}

.viz-article__routes::before,
.viz-article__routes::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(230, 90, 61, 0.2);
}

.viz-article__routes::before {
    inset: 30% 10% 40% 10%;
}

.viz-article__routes::after {
    inset: 50% 20% 20% 40%;
}

.viz-article__routes .pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(230, 90, 61, 0.9);
    border-radius: 50%;
    animation: routePulse 4.8s linear infinite;
}

@keyframes routePulse {
    0% { top: 30%; left: 12%; }
    25% { top: 20%; left: 70%; }
    50% { top: 60%; left: 80%; }
    75% { top: 70%; left: 20%; }
    100% { top: 30%; left: 12%; }
}

.viz-article__nodes {
    position: relative;
    width: 150px;
    height: 110px;
    margin: 0 auto;
}

.viz-article__nodes span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(230, 90, 61, 0.8);
    animation: nodeLink 5.5s ease-in-out infinite;
    top: 0;
    left: 0;
}

.viz-article__nodes span:nth-child(2) {
    animation-delay: 1s;
}

.viz-article__nodes span:nth-child(3) {
    animation-delay: 2s;
}

@keyframes nodeLink {
    0% { transform: translate(10px, 60px); opacity: 0.6; }
    33% { transform: translate(90px, 20px); opacity: 1; }
    66% { transform: translate(120px, 80px); opacity: 0.8; }
    100% { transform: translate(10px, 60px); opacity: 0.6; }
}

.viz-datagen {
    background: linear-gradient(160deg, rgba(8, 21, 30, 0.92), rgba(25, 43, 60, 0.85));
    border: 1px solid rgba(86, 196, 255, 0.18);
    color: rgba(212, 234, 255, 0.9);
}

.viz-datagen__matrix {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: center;
    height: 120px;
}

.viz-datagen__matrix span {
    width: 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(86, 196, 255, 0.7), rgba(86, 196, 255, 0.1));
    height: 30px;
    animation: datagenBar 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

@keyframes datagenBar {
    0%, 100% { height: 32px; opacity: 0.5; }
    40% { height: 110px; opacity: 1; }
    70% { height: 80px; }
}

.viz-talent {
    background: linear-gradient(150deg, rgba(253, 248, 244, 0.94), rgba(230, 90, 61, 0.18));
}

.viz-talent__chat {
    position: relative;
    width: 180px;
    height: 120px;
    margin: 0 auto;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(19, 20, 26, 0.08);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.viz-talent__chat .bubble {
    height: 20px;
    border-radius: 12px;
    animation: chatSlide 4s ease-in-out infinite;
}

.viz-talent__chat .bubble.primary {
    background: rgba(230, 90, 61, 0.6);
}

.viz-talent__chat .bubble.secondary {
    background: rgba(19, 20, 26, 0.12);
    animation-delay: 1.3s;
}

.viz-talent__chat .timeline {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(230, 90, 61, 0.7), rgba(86, 196, 255, 0.7));
    position: relative;
    overflow: hidden;
}

.viz-talent__chat .timeline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: timelineSweep 3.2s linear infinite;
}

@keyframes chatSlide {
    0%, 100% { transform: translateX(-12px); opacity: 0.6; }
    50% { transform: translateX(12px); opacity: 1; }
}

@keyframes timelineSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.viz-zerodha {
    background: linear-gradient(155deg, rgba(12, 20, 28, 0.94), rgba(38, 61, 82, 0.82));
    border: 1px solid rgba(112, 205, 255, 0.2);
    color: rgba(214, 233, 255, 0.9);
}

.viz-zerodha__chart {
    position: relative;
    height: 120px;
}

.viz-zerodha__chart svg {
    width: 100%;
    height: 100%;
}

.viz-zerodha__chart polyline {
    fill: none;
    stroke: rgba(112, 205, 255, 0.9);
    stroke-width: 3;
    stroke-dasharray: 400;
    animation: drawLine 6s ease-in-out infinite;
}

.viz-zerodha__chart .ticker {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 60px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.viz-zerodha__chart .ticker::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(112, 205, 255, 0.4), rgba(112, 205, 255, 0.9));
    animation: tickerFlow 2.2s linear infinite;
}

@keyframes tickerFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.viz-mlops {
    background: linear-gradient(150deg, rgba(9, 30, 53, 0.95), rgba(38, 56, 76, 0.85));
    color: rgba(214, 233, 255, 0.85);
}

.viz-mlops__tiles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
}

.viz-mlops__tiles span {
    flex: 1;
    margin: 0 6px;
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(86, 196, 255, 0.4), rgba(86, 196, 255, 0.1));
    position: relative;
    overflow: hidden;
    animation: tileGlow 3.7s ease-in-out infinite;
}

.viz-mlops__tiles span:nth-child(2) { animation-delay: 0.7s; }
.viz-mlops__tiles span:nth-child(3) { animation-delay: 1.4s; }

.viz-mlops__tiles span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: tileShimmer 2.4s ease-in-out infinite;
}

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

@keyframes tileShimmer {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

/* Workspace animations — DataGen, Talent, Trading, ML pipeline */
/* DataGen Workspace Animations */
.datagen-workspace {
    display: grid;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.datagen-workspace::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.1), transparent);
    animation: workspaceScan 4s ease-in-out infinite;
    z-index: 1;
}

.datagen-workspace > * {
    position: relative;
    z-index: 2;
}

.datagen-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.control-panel {
    display: flex;
    gap: 8px;
}

.control-knob {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.control-knob.active {
    background: var(--pill-red);
    animation: knobPulse 2s ease-in-out infinite;
}

.data-flow-indicator {
    position: relative;
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.flow-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--pill-red), transparent);
    animation: dataFlow 3s linear infinite;
}

.flow-dot {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--pill-red);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: dotPulse 2s ease-in-out infinite;
}

.datagen-preview {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.data-sheet {
    display: grid;
    gap: 8px;
}

.data-row {
    display: flex;
    gap: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    animation: rowSlide 4s ease-in-out infinite;
}

.data-row.generating {
    animation: rowGenerate 3s ease-in-out infinite;
}

.data-cell {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
}

.data-cell.typing {
    animation: typeText 2s ease-in-out infinite;
}

.datagen-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pill-red);
    animation: numberCount 3s ease-in-out infinite;
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Talent Evaluator Animations */
.talent-evaluator {
    display: grid;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.evaluator-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.candidate-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pill-red), var(--pill-accent));
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: avatarPulse 3s ease-in-out infinite;
}

.processing-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--success-green);
    border-radius: 50%;
    animation: processingPulse 2s ease-in-out infinite;
}

.candidate-name {
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
}

.candidate-role {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.evaluation-metrics {
    display: grid;
    gap: 12px;
}

.metric-bar {
    display: grid;
    gap: 8px;
}

.metric-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.metric-progress {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
    border-radius: 4px;
    width: var(--width);
    animation: progressFill 3s ease-in-out infinite;
}

.metric-score {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.ai-analysis {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.typing-indicator span {
    font-size: 0.8rem;
    color: var(--pill-accent);
    font-weight: 600;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 4px;
    height: 4px;
    background: var(--pill-accent);
    border-radius: 50%;
    animation: typingDots 1.5s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

.analysis-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.4;
    animation: textReveal 4s ease-in-out infinite;
}

/* Trading Dashboard Animations */
.trading-dashboard {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stock-symbol {
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
}

.price-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    animation: priceUpdate 3s ease-in-out infinite;
}

.price-change {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-change.positive {
    background: var(--success-green);
    color: white;
}

.chart-container {
    height: 120px;
    position: relative;
    overflow: hidden;
}

.candlestick-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100%;
    padding: 8px 0;
}

.candle {
    width: 12px;
    border-radius: 2px;
    position: relative;
    animation: candleGrow 3s ease-in-out infinite;
    animation-delay: var(--delay);
}

.candle.green {
    background: var(--success-green);
}

.candle.red {
    background: var(--pill-red);
}

.candle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4px;
    background: currentColor;
}

.candle::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4px;
    background: currentColor;
}

.trading-signals {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.signal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    animation: signalPulse 2s ease-in-out infinite;
}

.signal-item.buy {
    border: 1px solid var(--success-green);
}

.signal-item.sell {
    border: 1px solid var(--pill-red);
}

.signal-icon {
    font-size: 1.2rem;
}

.signal-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.signal-confidence {
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

.ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-green);
    animation: statusBlink 2s ease-in-out infinite;
}

.status-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ML Pipeline Animations */
.ml-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
}

.stage-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pill-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: stagePulse 3s ease-in-out infinite;
}

.stage-icon.data-ingestion {
    background: var(--trust-blue);
}

.stage-icon.processing {
    background: var(--warning-amber);
}

.stage-icon.ai-analysis {
    background: var(--pill-accent);
}

.stage-icon.insights {
    background: var(--success-green);
}

.stage-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.data-flow {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.data-stream {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--trust-blue), transparent);
    animation: dataStream 2s linear infinite;
}

.data-point {
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    background: var(--trust-blue);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: dataPoint 2s ease-in-out infinite;
}

.processing-animation {
    position: relative;
    width: 40px;
    height: 40px;
}

.gear {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--warning-amber);
    border-radius: 50%;
    animation: gearRotate 3s linear infinite;
}

.gear-1 {
    top: 0;
    left: 0;
}

.gear-2 {
    top: 12px;
    left: 12px;
    animation-delay: 0.5s;
}

.gear-3 {
    top: 24px;
    left: 24px;
    animation-delay: 1s;
}

.ai-brain {
    position: relative;
    width: 40px;
    height: 40px;
}

.neural-network {
    position: relative;
    width: 100%;
    height: 100%;
}

.neuron {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--pill-accent);
    border-radius: 50%;
    animation: neuronFire 2s ease-in-out infinite;
}

.neuron:nth-child(1) { top: 0; left: 0; }
.neuron:nth-child(2) { top: 0; right: 0; }
.neuron:nth-child(3) { bottom: 0; left: 0; }
.neuron:nth-child(4) { bottom: 0; right: 0; }

.connection {
    position: absolute;
    height: 2px;
    background: var(--pill-accent);
    animation: connectionPulse 2s ease-in-out infinite;
}

.connection:nth-child(5) {
    top: 4px;
    left: 4px;
    width: 24px;
    transform: rotate(45deg);
}

.connection:nth-child(6) {
    top: 4px;
    left: 4px;
    width: 24px;
    transform: rotate(-45deg);
}

.connection:nth-child(7) {
    top: 20px;
    left: 4px;
    width: 24px;
    transform: rotate(0deg);
}

.insights-display {
    display: grid;
    gap: 8px;
}

.insight-card {
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    text-align: center;
    animation: insightReveal 3s ease-in-out infinite;
}

.insight-title {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.insight-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--success-green);
}

/* Animation Keyframes */
@keyframes knobPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes dataFlow {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes dotPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.5); }
}

@keyframes rowSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes rowGenerate {
    0%, 100% { background: rgba(255, 255, 255, 0.1); }
    50% { background: rgba(220, 38, 38, 0.2); }
}

@keyframes typeText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes numberCount {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes processingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes progressFill {
    0% { width: 0%; }
    100% { width: var(--width); }
}

@keyframes typingDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes textReveal {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes priceUpdate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes candleGrow {
    0% { height: 0; }
    100% { height: var(--height); }
}

@keyframes signalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes stagePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes dataStream {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes dataPoint {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.5); }
}

@keyframes gearRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes neuronFire {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes connectionPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes insightReveal {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}


/* Labs page — patents, research, case studies, articles */
/* Patents & Research Document Styling */
.patents-showcase,
.research-showcase {
    margin: 40px auto;
}

.patents-grid,
.research-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    margin-top: 24px;
    align-items: center;
    justify-items: center;
}

/* Fix card alignment issues */
.patent-document,
.research-paper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.patent-preview,
.paper-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.patent-diagram,
.paper-abstract {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Patent Document Styling */
.patent-document {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.patent-document::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
}

.patent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.patent-number {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pill-red);
    letter-spacing: 0.05em;
}

.patent-status {
    background: var(--success-green);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.patent-preview {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.patent-diagram {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-nodes {
    position: relative;
    width: 120px;
    height: 80px;
}

.node {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.3);
    border: 2px solid var(--pill-red);
    animation: nodePulse 3s ease-in-out infinite;
}

.node.active {
    background: var(--pill-red);
    animation: nodeActive 2s ease-in-out infinite;
}

.node:nth-child(1) { top: 0; left: 0; }
.node:nth-child(2) { top: 0; right: 0; }
.node:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }

.connection-line {
    position: absolute;
    height: 2px;
    background: var(--pill-red);
    animation: connectionFlow 3s ease-in-out infinite;
}

.connection-line:nth-child(4) {
    top: 8px;
    left: 8px;
    width: 88px;
    transform: rotate(0deg);
}

.connection-line:nth-child(5) {
    top: 8px;
    left: 8px;
    width: 44px;
    transform: rotate(45deg);
}

.monitoring-dashboard {
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 12px;
}

.metric-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100%;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--pill-red), var(--pill-accent));
    border-radius: 2px;
    height: var(--height);
    animation: barGrow 3s ease-in-out infinite;
}

.chart-bar:nth-child(2) { animation-delay: 0.5s; }
.chart-bar:nth-child(3) { animation-delay: 1s; }
.chart-bar:nth-child(4) { animation-delay: 1.5s; }

.patent-abstract h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0 0 8px;
    text-align: center;
}

.patent-abstract p {
    color: rgba(10, 11, 15, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.patent-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(220, 38, 38, 0.1);
}

.patent-date {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.6);
}

.patent-link {
    color: var(--pill-red);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.patent-link:hover {
    color: var(--pill-red-dark);
}

/* Research Paper Styling */
.research-paper {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.research-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-accent), var(--trust-blue));
}

.paper-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.paper-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.3;
    text-align: center;
}

.paper-journal {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--pill-accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
}

.paper-preview {
    margin-bottom: 20px;
}

.paper-abstract {
    display: grid;
    gap: 16px;
}

.abstract-text p {
    color: rgba(10, 11, 15, 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.paper-metrics {
    display: flex;
    gap: 24px;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.metric-label {
    font-size: 0.7rem;
    color: rgba(10, 11, 15, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pill-accent);
    animation: metricCount 3s ease-in-out infinite;
}

.paper-authors {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
}

.author {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.7);
    font-weight: 500;
}

/* Animation Keyframes for Documents */
@keyframes nodePulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes nodeActive {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes connectionFlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes barGrow {
    0% { height: 0; }
    100% { height: var(--height); }
}

@keyframes metricCount {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Case Studies Styling */
.case-studies-showcase {
    margin: 40px auto;
}

.case-studies-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    margin-top: 24px;
    align-items: center;
    justify-items: center;
}

/* Fix case study card alignment */
.case-study {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.case-study-challenge,
.case-study-solution,
.case-study-results {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.solution-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-study {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(220, 38, 38, 0.1);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.case-study::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-red), var(--success-green));
}

.case-study-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.client-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pill-red), var(--pill-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    animation: logoPulse 3s ease-in-out infinite;
}

.client-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.client-industry {
    font-size: 0.9rem;
    color: rgba(10, 11, 15, 0.6);
}

.case-study-challenge,
.case-study-solution,
.case-study-results {
    margin-bottom: 24px;
}

.case-study-challenge h4,
.case-study-solution h4,
.case-study-results h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.case-study-challenge h4::before {
    content: '⚠️';
    font-size: 1.2rem;
}

.case-study-solution h4::before {
    content: '🔧';
    font-size: 1.2rem;
}

.case-study-results h4::before {
    content: '📊';
    font-size: 1.2rem;
}

.case-study-challenge p {
    color: rgba(10, 11, 15, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.solution-visual {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    margin-top: 12px;
}

.ai-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: stepPulse 3s ease-in-out infinite;
}

.step-icon.lead-capture {
    background: var(--trust-blue);
    animation-delay: 0s;
}

.step-icon.ai-analysis {
    background: var(--pill-accent);
    animation-delay: 1s;
}

.step-icon.qualification {
    background: var(--success-green);
    animation-delay: 2s;
}

.step-label {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.7);
    text-align: center;
    font-weight: 500;
}

.pipeline-arrow {
    color: var(--pill-red);
    font-size: 1.2rem;
    font-weight: 700;
    animation: arrowFlow 2s ease-in-out infinite;
}

.infrastructure-diagram {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.infra-layer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    animation: layerSlide 4s ease-in-out infinite;
}

.infra-layer:nth-child(2) { animation-delay: 0.5s; }
.infra-layer:nth-child(3) { animation-delay: 1s; }

.layer-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconRotate 3s ease-in-out infinite;
}

.layer-icon.load-balancer {
    background: var(--trust-blue);
}

.layer-icon.servers {
    background: var(--warning-amber);
}

.layer-icon.monitoring {
    background: var(--success-green);
}

.layer-label {
    font-size: 0.9rem;
    color: var(--ink);
    font-weight: 500;
}

.results-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(220, 38, 38, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: metricCardPulse 3s ease-in-out infinite;
}

.metric-card:nth-child(2) { animation-delay: 0.5s; }
.metric-card:nth-child(3) { animation-delay: 1s; }

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pill-red), var(--success-green));
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
    animation: iconBounce 2s ease-in-out infinite;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--pill-red);
    margin-bottom: 4px;
    animation: valueCount 3s ease-in-out infinite;
}

.metric-label {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.metric-change {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
}

.metric-change.positive {
    background: rgba(5, 150, 105, 0.1);
    color: var(--success-green);
    animation: changePulse 2s ease-in-out infinite;
}

/* Animation Keyframes for Case Studies */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes stepPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes arrowFlow {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(4px); opacity: 1; }
}

@keyframes layerSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

@keyframes iconRotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

@keyframes metricCardPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

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

@keyframes valueCount {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes changePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Articles & Blog Posts Styling */
.articles-showcase {
    margin: 40px auto;
}

.articles-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    margin-top: 24px;
    align-items: center;
    justify-items: center;
}

/* Fix article card alignment */
.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-accent), var(--trust-blue));
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.article-category {
    background: var(--pill-accent);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.article-date {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.6);
    font-weight: 500;
}

.article-preview {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.article-visual {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neural-network-visual {
    position: relative;
    width: 120px;
    height: 80px;
}

.network-layer {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.network-layer:last-child {
    margin-bottom: 0;
}

.neuron {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.3);
    border: 2px solid var(--pill-accent);
    animation: neuronPulse 3s ease-in-out infinite;
}

.neuron.active {
    background: var(--pill-accent);
    animation: neuronActive 2s ease-in-out infinite;
}

.network-connections {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pill-accent);
    opacity: 0.3;
    animation: connectionFlow 3s ease-in-out infinite;
}

.infrastructure-visual {
    display: flex;
    align-items: center;
    gap: 16px;
}

.server-rack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.server {
    width: 40px;
    height: 8px;
    background: rgba(124, 58, 237, 0.3);
    border-radius: 2px;
    animation: serverPulse 3s ease-in-out infinite;
}

.server.active {
    background: var(--pill-accent);
    animation: serverActive 2s ease-in-out infinite;
}

.status-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--success-green);
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

.data-flow {
    position: relative;
    width: 60px;
    height: 4px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.flow-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--pill-accent), transparent);
    animation: dataFlow 3s linear infinite;
}

.flow-dot {
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 6px;
    background: var(--pill-accent);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: dotPulse 2s ease-in-out infinite;
}

.strategy-visual {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.strategy-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 60px;
}

.chart-bar {
    width: 12px;
    background: linear-gradient(180deg, var(--pill-accent), var(--trust-blue));
    border-radius: 2px;
    height: var(--height);
    animation: barGrow 3s ease-in-out infinite;
}

.chart-bar:nth-child(2) { animation-delay: 0.5s; }
.chart-bar:nth-child(3) { animation-delay: 1s; }
.chart-bar:nth-child(4) { animation-delay: 1.5s; }

.growth-indicator {
    position: relative;
    width: 40px;
    height: 40px;
}

.trend-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--success-green);
    transform: translateY(-50%) rotate(15deg);
    animation: trendGrow 3s ease-in-out infinite;
}

.trend-dot {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--success-green);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: dotPulse 2s ease-in-out infinite;
}

.article-content h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.3;
}

.article-content p {
    color: rgba(10, 11, 15, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 16px;
}

.article-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pill-red), var(--pill-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    animation: avatarPulse 3s ease-in-out infinite;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.author-title {
    font-size: 0.8rem;
    color: rgba(10, 11, 15, 0.6);
}

.article-link {
    color: var(--pill-accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.article-link:hover {
    color: var(--pill-accent);
    text-decoration: underline;
}

/* Animation Keyframes for Articles */
@keyframes neuronPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes neuronActive {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes serverPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes serverActive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes trendGrow {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes workspaceScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Enhanced trading dashboard animations */
.trading-dashboard {
    position: relative;
    overflow: hidden;
}

.trading-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.1), transparent);
    animation: tradingScan 3s ease-in-out infinite;
    z-index: 1;
}

.trading-dashboard > * {
    position: relative;
    z-index: 2;
}

/* Enhanced candlestick animations */
.candle {
    position: relative;
    overflow: hidden;
}


/* Hosting & shared page sections — blueprint, offers, kits, journey, CTA */
.candle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: candleShine 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

/* Enhanced neural network animations */
.neural-network-visual {
    position: relative;
    overflow: hidden;
}

.neural-network-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.2), transparent);
    animation: networkScan 3s ease-in-out infinite;
    z-index: 1;
}

.neural-network-visual > * {
    position: relative;
    z-index: 2;
}

@keyframes sheetFlash {
    0%, 100% { transform: translateX(-12px); opacity: 0.4; }
    50% { transform: translateX(12px); opacity: 0.9; }
}

@keyframes tradingScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes candleShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes networkScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes candleWick {
    0%, 100% { transform: translateY(6px); opacity: 0.5; }
    50% { transform: translateY(-6px); opacity: 0.95; }
}

.motion-gallery {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}

.reference-marquee {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    padding: 26px 0;
    background: linear-gradient(120deg, rgba(6, 18, 34, 0.92), rgba(16, 36, 58, 0.8));
    color: rgba(214, 233, 255, 0.92);
}

.reference-marquee::before,
.reference-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
}

.reference-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #0b1a2d, transparent);
}

.reference-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #0b1a2d, transparent);
}

.reference-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 48px;
    min-width: 200%;
    animation: marquee 24s linear infinite;
    padding-left: 64px;
}

.reference-marquee__item {
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

.reference-marquee__item span {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.85;
}

.reference-marquee--research {
    background: linear-gradient(120deg, rgba(33, 11, 25, 0.92), rgba(58, 19, 42, 0.85));
}

.reference-marquee--articles {
    background: linear-gradient(120deg, rgba(47, 20, 8, 0.92), rgba(82, 43, 20, 0.85));
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.evidence {
    display: grid;
    gap: 28px;
}

.evidence__intro {
    display: grid;
    gap: 12px;
    max-width: 760px;
}

.evidence__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.evidence-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.06);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 12px;
}

.evidence-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
}

.evidence-card p {
    color: rgba(19, 20, 26, 0.7);
    margin: 0;
}

.evidence-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(19, 20, 26, 0.68);
}

.evidence-card a {
    font-weight: 600;
}

.showcase-open-source {
    display: grid;
    gap: 24px;
}

.showcase-open-source__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.outcomes {
    display: grid;
    gap: 36px;
}

.outcomes__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.outcome-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.06);
    padding: 32px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 16px;
}

.outcome-card__tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(19, 20, 26, 0.6);
}

.outcome-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.outcome-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: rgba(19, 20, 26, 0.68);
}

.outcome-card__cta {
    font-weight: 600;
    color: var(--clay);
}

.outcome-card__cta:hover,
.outcome-card__cta:focus {
    color: var(--clay-dark);
}

.blueprint {
    display: grid;
    gap: 24px;
}

.blueprint__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.blueprint-step {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.06);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 14px;
}

.blueprint-step__index {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(19, 20, 26, 0.45);
}

.blueprint-step h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.blueprint-step ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(19, 20, 26, 0.65);
}

.offer-grid {
    display: grid;
    gap: 32px;
}

.offer-grid__cards {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.offer-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 12px;
}

.offer-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.offer-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(19, 20, 26, 0.65);
}

.case-study {
    padding-top: 40px;
}

.case-study__content {
    background: linear-gradient(145deg, rgba(230, 90, 61, 0.12), rgba(253, 248, 244, 0.9));
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 16px;
}

.case-study__tag,
.showcase__tag {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.78rem;
    color: rgba(19, 20, 26, 0.55);
}

.case-study ul,
.showcase ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(19, 20, 26, 0.68);
}

.cta-panel {
    padding: 80px 0;
}

.cta-panel__inner {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    box-shadow: var(--shadow-soft);
    padding: 40px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
}

.cta-panel__actions {
    display: grid;
    gap: 12px;
    align-content: start;
}

.cta-panel__meta {
    font-size: 0.9rem;
    color: rgba(19, 20, 26, 0.6);
}
.results {
    display: grid;
    gap: 48px;
}

.results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.result-card {
    background: white;
    padding: 22px 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(19, 20, 26, 0.08);
    font-weight: 600;
    color: rgba(19, 20, 26, 0.78);
}

.results__steps {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 32px;
    box-shadow: var(--shadow-light);
}

.results__steps h3 {
    margin: 0 0 16px;
    font-family: 'Playfair Display', serif;
}

.results__steps ol {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    color: rgba(19, 20, 26, 0.65);
}

.process {
    display: grid;
    gap: 34px;
}

.process__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.process-step {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.06);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 12px;
}

.process-step__index {
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(19, 20, 26, 0.5);
}

.process-step h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.process-step p {
    color: rgba(19, 20, 26, 0.65);
    margin: 0;
}

.kits {
    display: grid;
    gap: 26px;
}

.kits__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kit-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 30px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 14px;
}

.kit-card__tag {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(19, 20, 26, 0.5);
}

.kit-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
}

.kit-card ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: rgba(19, 20, 26, 0.68);
}

.kit-card__meta {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(19, 20, 26, 0.7);
}

.journey {
    display: grid;
    gap: 28px;
}

.journey__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.journey-step {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 26px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 12px;
}

.journey-step__index {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(19, 20, 26, 0.45);
}

.journey-step h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.showcase {
    padding-top: 20px;
}

.showcase__inner {
    background: linear-gradient(145deg, rgba(95, 112, 190, 0.12), rgba(253, 248, 244, 0.9));
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 16px;
}

.proof {
    padding-top: 20px;
}

.proof__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.proof-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 28px;
    box-shadow: var(--shadow-light);
    display: grid;
    gap: 12px;
}

.proof-card h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.proof-card p {
    color: rgba(19, 20, 26, 0.65);
    margin: 0;
}
.story {
    background: var(--mist);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 24px;
}

.story__author {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.story__author img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(19, 20, 26, 0.1);
}

.story__quote {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: rgba(19, 20, 26, 0.85);
}

.services {
    display: grid;
    gap: 46px;
}

.branches__grid .service-card ul li::before {
    content: '—';
    margin-right: 12px;
    color: var(--clay);
}

.services__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.service-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    display: grid;
    gap: 14px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-light);
}

.service-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(19, 20, 26, 0.6);
}

.service-card .badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--clay);
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    margin: 0;
}

.service-card p {
    color: rgba(19, 20, 26, 0.65);
    margin: 0;
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    color: rgba(19, 20, 26, 0.7);
    font-size: 0.95rem;
}

.service-card ul li::before {
    content: '—';
    margin-right: 12px;
    color: var(--clay);
}

.who {
    display: grid;
    gap: 24px;
}

.who__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.who__card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid rgba(19, 20, 26, 0.05);
    box-shadow: var(--shadow-light);
}

.who__card h3 {
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.who__card p {
    color: rgba(19, 20, 26, 0.65);
}

.faq {
    display: grid;
    gap: 18px;
}

.faq__items {
    display: grid;
    gap: 12px;
}

.faq__items details {
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid rgba(19, 20, 26, 0.05);
    padding: 20px 24px;
    box-shadow: var(--shadow-light);
}

.faq__items summary {
    font-weight: 600;
    cursor: pointer;
    color: rgba(19, 20, 26, 0.85);
}

.faq__items p {
    margin-top: 12px;
    color: rgba(19, 20, 26, 0.65);
}

/* Urgency banner for conversion optimization */
.urgency-banner {
    background: linear-gradient(135deg, var(--pill-red-light), rgba(255, 255, 255, 0.95));
    border: 2px solid var(--pill-red);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-red);
    padding: 40px;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
}

.urgency-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.1), transparent);
    border-radius: 50%;
    animation: urgencyPulse 3s ease-in-out infinite;
}

.urgency-banner__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
}

.urgency-banner__badge {
    display: inline-flex;
    align-items: center;
    background: var(--pill-red);
    color: white;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: fit-content;
    animation: urgencyBlink 2s ease-in-out infinite;
}

.urgency-banner h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin: 0;
    color: var(--ink);
}

.urgency-banner p {
    font-size: 1.1rem;
    color: rgba(10, 11, 15, 0.7);
    margin: 0;
}

.urgency-banner__stats {
    display: flex;
    gap: 32px;
    margin-top: 20px;
}

.urgency-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.urgency-stat__number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pill-red);
    font-family: 'Playfair Display', serif;
}

.urgency-stat__label {
    font-size: 0.85rem;
    color: rgba(10, 11, 15, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.urgency-banner__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.urgency-btn {
    animation: urgencyGlow 2s ease-in-out infinite;
}

@keyframes urgencyPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

@keyframes urgencyBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.7; }
}

@keyframes urgencyGlow {
    0%, 100% { box-shadow: var(--shadow-red); }
    50% { box-shadow: 0 25px 50px -20px rgba(220, 38, 38, 0.5); }
}

.cta-banner {
    margin-top: -40px;
    background: linear-gradient(130deg, rgba(253, 248, 244, 0.95), rgba(223, 237, 226, 0.95));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    box-shadow: var(--shadow-soft);
    padding: 48px;
    display: grid;
    gap: 18px;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.metric {
    background: white;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(19, 20, 26, 0.05);
    text-align: left;
}

.metric strong {
    display: block;
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
}

.metric span {
    color: rgba(19, 20, 26, 0.55);
    font-size: 0.95rem;
}

.testimonial {
    background: linear-gradient(155deg, rgba(220, 38, 38, 0.1), rgba(255, 255, 255, 0.85));
    padding: 40px;
    border-radius: var(--radius-lg);
    display: grid;
    gap: 18px;
}

.testimonial blockquote {
    margin: 0;
    font-size: 1.4rem;
    font-family: 'Playfair Display', serif;
    color: rgba(19, 20, 26, 0.85);
}

.testimonial cite {
    font-style: normal;
    color: rgba(19, 20, 26, 0.6);
    font-size: 0.95rem;
}

/* Testimonials section */
.testimonials {
    display: grid;
    gap: 32px;
}

.testimonials__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.testimonial-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(220, 38, 38, 0.1);
    padding: 32px;
    box-shadow: var(--shadow-light);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pill-red), var(--pill-accent));
}

.testimonial-card__content {
    display: grid;
    gap: 20px;
}

.testimonial-card blockquote {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(10, 11, 15, 0.8);
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pill-red-light);
}

.testimonial-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card__name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
}

.testimonial-card__title {
    color: rgba(10, 11, 15, 0.6);
    font-size: 0.85rem;
}


/* Responsive — media queries for all breakpoints */
@media (max-width: 960px) {
    section {
        padding: 90px 0;
    }
    .nav-links {
        gap: 18px;
    }
    .hero {
        gap: 40px;
    }
    .page-hero {
        padding: 120px 0 80px;
    }
    .hero__panel {
        padding: 28px;
    }
    .focus-stream__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .nav {
        flex-direction: column;
        gap: 18px;
        align-items: flex-start;
    }
    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero__panel::after {
        inset: 12px;
    }
    .story,
    .cta {
        padding: 32px;
    }
    .cta-banner {
        grid-template-columns: 1fr;
        padding: 36px;
    }
    .cta-panel__inner {
        grid-template-columns: 1fr;
        padding: 32px;
    }
    
    /* Mobile optimization for new elements */
    .hero__trust {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .trust-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
    
    .testimonials__grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-card {
        padding: 24px;
    }
    
    .urgency-banner {
        padding: 24px;
        margin: 20px auto;
    }
    
    .urgency-banner h2 {
        font-size: 1.8rem;
    }
    
    .urgency-banner__stats {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .urgency-stat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    
    .urgency-stat__number {
        font-size: 1.5rem;
    }
    
    .urgency-banner__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Mobile optimization for new content sections */
    .patents-grid,
    .research-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .immersive-gallery__grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 24px;
    }
    
    .patent-document,
    .research-paper,
    .case-study,
    .article-card {
        padding: 20px;
    }
    
    .patent-diagram,
    .article-visual {
        min-height: 80px;
        padding: 16px;
    }
    
    .results-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .metric-card {
        padding: 12px;
    }
    
    .ai-pipeline {
        flex-direction: column;
        gap: 12px;
    }
    
    .pipeline-arrow {
        transform: rotate(90deg);
    }
    
    .infrastructure-diagram {
        gap: 12px;
    }
    
    .ml-pipeline {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Mobile optimization for division cards */
    .divisions__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .division-card {
        padding: 24px;
    }
    
    .division-card h2 {
        font-size: 1.6rem;
    }
    
    .division-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 520px) {
    section {
        padding: 72px 0;
    }
    .hero__title {
        font-size: 2.4rem;
    }
    .page-hero {
        padding: 110px 0 64px;
    }
    .panel__item {
        padding: 18px;
    }
    .testimonial {
        padding: 30px;
    }
    .cta {
        padding: 28px;
    }
    .focus-stream__grid {
        padding: 28px;
    }
}