/* ==========================================================================
   Funnel-specific styles for the DB Studio site.
   Layered on top of styles.css; reuses CSS variables (--primary etc).
   ========================================================================== */

/* ===== Nav CTA pill ===== */
.main-nav .nav-cta {
    background: var(--primary);
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 600;
    transition: var(--transition);
    font-size: 13px;
}
.main-nav .nav-cta:hover {
    background: var(--primary-dark);
}
.main-nav .nav-cta::after { display: none; }

.mobile-menu .nav-cta {
    background: var(--primary);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
}

/* ===== Hero meta ===== */
.hero-meta {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.4px;
}

/* ===== Trust strip ===== */
.trust-strip {
    padding: 36px 0;
    background: var(--grey-light);
    border-top: 1px solid var(--grey-medium);
    border-bottom: 1px solid var(--grey-medium);
}
.trust-strip-label {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin-bottom: 18px;
}
.trust-strip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 36px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.trust-strip-list li {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-medium);
    letter-spacing: 0.3px;
}

/* ===== Section header lead ===== */
.section-lead {
    max-width: 720px;
    margin: 16px auto 0;
    font-size: 18px;
    color: var(--text-medium);
    line-height: 1.6;
}

/* ===== Problem section ===== */
.problem-section {
    padding: 80px 0 52px;
}
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}
.problem-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: var(--shadow-sm);
}
.problem-card h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: 700;
}
.problem-card-highlight {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.problem-card-highlight h3 {
    color: rgba(255, 255, 255, 0.85);
}
.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.problem-list li {
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    font-size: 16px;
    line-height: 1.5;
}
.problem-card-highlight .problem-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.problem-list li:last-child { border-bottom: none; }
.problem-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 16px;
    height: 2px;
    background: var(--text-light);
}
.problem-card-highlight .problem-list li::before {
    background: rgba(255, 255, 255, 0.7);
}

/* ===== Pillar sections ===== */
.pillar-section {
    padding: 96px 0;
}
.pillar-section-alt {
    background: var(--grey-light);
}
.pillar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.pillar-row-reverse .pillar-content { order: 2; }
.pillar-row-reverse .pillar-image { order: 1; }
.pillar-tag {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 16px;
}
.pillar-content h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}
.pillar-content p {
    font-size: 17px;
    color: var(--text-medium);
    margin-bottom: 24px;
    line-height: 1.7;
}
.pillar-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.pillar-bullets li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 16px;
    color: var(--text-medium);
}
.pillar-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}
.pillar-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}
.pillar-link:hover {
    border-bottom-color: var(--primary);
}
.pillar-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}

/* ===== Fleet of One ===== */
.fleet-section {
    padding: 96px 0;
}
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.fleet-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.fleet-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.fleet-number {
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 12px;
}
.fleet-card h4 {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--text-dark);
}
.fleet-card p {
    font-size: 15px;
    color: var(--text-medium);
    line-height: 1.6;
}

/* ===== Pricing ===== */
.pricing-teaser {
    padding: 96px 0;
    background: var(--grey-light);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    align-items: stretch;
}
.pricing-card {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 12px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.pricing-card:hover {
    box-shadow: var(--shadow-md);
}
.pricing-card-featured {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pricing-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 700;
}
.pricing-price {
    margin: 16px 0 8px;
}
.pricing-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-dark);
}
.pricing-period {
    font-size: 14px;
    color: var(--text-light);
    margin-left: 4px;
}
.pricing-tagline {
    font-size: 14px;
    color: var(--text-medium);
    margin-bottom: 24px;
    min-height: 42px;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    flex-grow: 1;
}
.pricing-features li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 14px;
    color: var(--text-medium);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}
.pricing-card .btn {
    width: 100%;
    text-align: center;
}
.pricing-footnote {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-light);
}
.pricing-footnote a {
    color: var(--primary);
    text-decoration: none;
}

/* ===== Trial signup ===== */
.trial-page {
    padding: 60px 0 96px;
}
.trial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 32px;
}
.trial-pitch h2 {
    font-size: 32px;
    margin-bottom: 16px;
    line-height: 1.2;
}
.trial-pitch p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    margin-bottom: 20px;
}
.trial-pitch ul {
    list-style: none;
    padding: 0;
}
.trial-pitch ul li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
}
.trial-pitch ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
}
.trial-form-card {
    background: rgba(10, 20, 40, 0.65);
    border: 1px solid rgba(90, 145, 245, 0.18);
    border-radius: 16px;
    padding: 36px 36px 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px -24px rgba(53, 117, 242, 0.35);
}
.trial-form-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    color: #ffffff;
    margin: 0 0 6px;
}
.trial-form-card .form-meta {
    color: #9fb2d1;
    font-size: 14px;
    margin: 0 0 26px;
}
.trial-form-card .form-group {
    margin-bottom: 16px;
}
.trial-form-card label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9fb2d1;
    margin-bottom: 6px;
}
.trial-form-card input[type="text"],
.trial-form-card input[type="email"],
.trial-form-card select,
.trial-form-card textarea {
    width: 100%;
    padding: 11px 14px;
    background: rgba(6, 14, 34, 0.6);
    border: 1px solid rgba(230, 237, 247, 0.14);
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.trial-form-card input:focus,
.trial-form-card select:focus,
.trial-form-card textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    background: rgba(6, 14, 34, 0.85);
}
.trial-form-card textarea {
    resize: vertical;
    min-height: 80px;
}
.trial-form-card .btn,
.trial-form-card button[type="submit"] {
    width: 100%;
    margin-top: 6px;
}
.trial-form-card .form-fineprint {
    margin: 14px 0 0;
    font-size: 12px;
    color: #6e8ab4;
    line-height: 1.5;
}
.trial-form-card .form-fineprint a {
    color: var(--primary-light);
    text-decoration: none;
}
.trial-success {
    display: none;
    border: 1px solid rgba(110, 231, 183, 0.45);
    background: rgba(110, 231, 183, 0.08);
    padding: 18px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #d6e1f5;
    font-size: 14.5px;
}
.trial-success.is-visible { display: block; }
.trial-success strong { color: #6ee7b7; }

/* ===== Pricing comparison table ===== */
.compare-section {
    padding: 96px 0;
}
.compare-table-wrapper {
    overflow-x: auto;
    margin-top: 40px;
    border-radius: 12px;
    border: 1px solid var(--grey-medium);
    box-shadow: var(--shadow-sm);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 720px;
}
.compare-table th,
.compare-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--grey-medium);
    font-size: 14px;
}
.compare-table thead th {
    background: var(--grey-light);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-medium);
}
.compare-table thead th.featured {
    background: var(--gradient-primary);
    color: #fff;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td.feature-name {
    font-weight: 600;
    color: var(--text-dark);
}
.compare-table .check {
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}
.compare-table .dash {
    color: var(--grey-dark);
}
.compare-table .col-tier {
    text-align: center;
    width: 18%;
}

/* ===== FAQ ===== */
.faq-section {
    padding: 96px 0;
    background: var(--grey-light);
}
.faq-list {
    max-width: 820px;
    margin: 48px auto 0;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--grey-medium);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}
.faq-item summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    list-style: none;
    position: relative;
    transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary);
    font-weight: 300;
    transition: var(--transition);
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq-item summary:hover { background: var(--grey-light); }
.faq-item .faq-body {
    padding: 0 22px 18px;
    color: var(--text-medium);
    font-size: 15px;
    line-height: 1.7;
}

/* ===== Hero variant: solid gradient bg, no video (used on products.html) =====
   Vertical dark-navy gradient (dark at top, deep blue at bottom) with a
   subtle brand-blue glow in the bottom-right for visual energy. */
.hero.hero-static {
    min-height: 55vh;
    background:
        radial-gradient(ellipse at 75% 100%, rgba(53, 117, 242, 0.30) 0%, transparent 55%),
        linear-gradient(180deg, #050d1f 0%, #0a1f3d 60%, #11305c 100%);
}
.hero.hero-static .hero-video-overlay,
.hero.hero-static .hero-video-background { display: none; }

/* ===== Company-front sections (homepage only) ===== */
.company-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 60px;
}
.company-hero-content {
    max-width: 760px;
}
.company-hero-content .pillar-tag {
    margin-bottom: 12px;
}
.company-hero-title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.company-hero-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-medium);
    margin-bottom: 32px;
}
.company-hero .hero-buttons .btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--grey-dark);
}
.company-hero .hero-buttons .btn-secondary:hover {
    border-color: var(--text-dark);
}

.company-mission {
    padding: 48px 0 72px;
}
.company-mission-grid {
    max-width: 820px;
    margin: 0 auto;
}
.company-mission-text h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: 700;
}
.company-mission-text p {
    font-size: 22px;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 400;
}

.featured-product {
    padding: 80px 0;
    background: var(--grey-light);
}
.featured-product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.featured-product-content h2 {
    font-size: 36px;
    margin-bottom: 16px;
    line-height: 1.2;
    font-weight: 700;
}
.featured-product-content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 28px;
}
.featured-product-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.featured-product-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--grey-medium);
}

.company-about-teaser {
    padding: 80px 0;
}
.company-about-teaser-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.company-about-teaser-content h2 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 18px;
    font-weight: 700;
}
.company-about-teaser-content p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 22px;
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
    .company-hero-title { font-size: 34px; }
    .company-hero-subtitle { font-size: 17px; }
    .company-mission-text p { font-size: 18px; }
    .featured-product-row { grid-template-columns: 1fr; gap: 32px; }
    .featured-product-content h2 { font-size: 28px; }
    .company-about-teaser-content h2 { font-size: 26px; }
    .problem-grid,
    .pillar-row,
    .fleet-grid,
    .pricing-grid,
    .trial-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pillar-row { gap: 32px; }
    .pillar-row-reverse .pillar-content { order: 1; }
    .pillar-row-reverse .pillar-image { order: 2; }
    .pricing-card-featured { transform: none; }
    .pillar-content h2 { font-size: 28px; }
    .main-nav { display: none; }
    .hamburger { display: flex; }
}

/* ==========================================================================
   Layout refresh - logo grid, diff comparison, code surfaces, cinematic
   pillar, hero polish. Added 2026-05-18.
   ========================================================================== */

/* ----- Database logo grid (replaces text trust-strip-list) ----- */
.db-logo-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    background: var(--grey-light);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--grey-medium);
}
.db-logo-cell {
    aspect-ratio: 1.5 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border-right: 1px solid var(--grey-medium);
    border-bottom: 1px solid var(--grey-medium);
    transition: var(--transition);
}
.db-logo-cell:nth-child(8n) { border-right: none; }
.db-logo-cell:nth-last-child(-n+8) { border-bottom: none; }
.db-logo-cell img {
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.72;
    transition: var(--transition);
}
.db-logo-cell .db-logo-name {
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0;
    transition: var(--transition);
    line-height: 1;
}
.db-logo-cell:hover {
    background: #fafbfd;
    box-shadow: inset 0 -2px 0 var(--primary);
}
.db-logo-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}
.db-logo-cell:hover .db-logo-name { opacity: 1; }
@media (max-width: 1100px) {
    .db-logo-grid { grid-template-columns: repeat(4, 1fr); }
    .db-logo-cell { border-right: 1px solid var(--grey-medium); border-bottom: 1px solid var(--grey-medium); }
    .db-logo-cell:nth-child(4n) { border-right: none; }
    .db-logo-cell:nth-last-child(-n+4) { border-bottom: none; }
}
@media (max-width: 600px) {
    .db-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .db-logo-cell { border-right: 1px solid var(--grey-medium); border-bottom: 1px solid var(--grey-medium); aspect-ratio: 1.2 / 1; }
    .db-logo-cell:nth-child(3n) { border-right: none; }
    .db-logo-cell:nth-last-child(-n+3) { border-bottom: none; }
}

/* ----- Diff-styled comparison (replaces text problem-grid cards) ----- */
.diff-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 48px;
    background: #0d1117;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #21262d;
    box-shadow: var(--shadow-lg);
    font-family: 'SF Mono', 'JetBrains Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
.diff-pane { min-width: 0; }
.diff-pane-old { background: #1a0e10; border-right: 1px solid #2a1414; }
.diff-pane-new { background: #0e1a12; }
.diff-pane-header {
    padding: 14px 22px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}
.diff-pane-old .diff-pane-header { color: #ff7b72; background: rgba(248, 81, 73, 0.05); }
.diff-pane-new .diff-pane-header { color: #7ee787; background: rgba(46, 160, 67, 0.06); }
.diff-pane-marker {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
    font-family: 'SF Mono', monospace;
}
.diff-pane-old .diff-pane-marker { background: rgba(248, 81, 73, 0.2); color: #ff7b72; }
.diff-pane-new .diff-pane-marker { background: rgba(46, 160, 67, 0.22); color: #7ee787; }
.diff-lines {
    list-style: none;
    margin: 0;
    padding: 14px 0;
}
.diff-lines li {
    padding: 9px 22px 9px 44px;
    font-size: 14.5px;
    line-height: 1.5;
    position: relative;
}
.diff-pane-old .diff-lines li {
    color: #d9b6b8;
    background: rgba(248, 81, 73, 0.06);
    text-decoration: line-through;
    text-decoration-color: rgba(248, 81, 73, 0.5);
    text-decoration-thickness: 1px;
}
.diff-pane-new .diff-lines li {
    color: #c4e3c8;
    background: rgba(46, 160, 67, 0.06);
}
.diff-lines li::before {
    position: absolute;
    left: 22px;
    font-weight: 700;
    width: 12px;
    text-align: center;
}
.diff-pane-old .diff-lines li::before { content: '-'; color: #ff7b72; }
.diff-pane-new .diff-lines li::before { content: '+'; color: #7ee787; }
@media (max-width: 900px) {
    .diff-comparison { grid-template-columns: 1fr; }
    .diff-pane-old { border-right: none; border-bottom: 1px solid #2a1414; }
}

/* ----- Code surface (terminal/editor chrome) ----- */
.code-surface {
    background: #0d1117;
    border-radius: 12px;
    border: 1px solid #21262d;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: 'SF Mono', 'JetBrains Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
.code-surface-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #161b22;
    border-bottom: 1px solid #21262d;
}
.code-surface-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #30363d;
}
.code-surface-dot.red    { background: #ff5f56; }
.code-surface-dot.yellow { background: #febc2e; }
.code-surface-dot.green  { background: #27c93f; }
.code-surface-filename {
    margin-left: 12px;
    color: #8b949e;
    font-size: 13px;
    font-family: 'SF Mono', monospace;
}
.code-surface-tab {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: #8b949e;
    background: rgba(255, 255, 255, 0.04);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.code-surface-body {
    display: flex;
    align-items: stretch;
}
.code-surface-gutter {
    user-select: none;
    padding: 18px 12px 18px 18px;
    color: #484f58;
    font-size: 13.5px;
    text-align: right;
    background: #0d1117;
    border-right: 1px solid #21262d;
    line-height: 1.7;
    font-family: 'SF Mono', monospace;
}
.code-surface-gutter span { display: block; }
.code-surface-code {
    flex: 1;
    padding: 18px 22px;
    overflow-x: auto;
    color: #c9d1d9;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre;
    margin: 0;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
}
.code-surface-code .tok-kw  { color: #ff7b72; }
.code-surface-code .tok-str { color: #a5d6ff; }
.code-surface-code .tok-num { color: #79c0ff; }
.code-surface-code .tok-fn  { color: #d2a8ff; }
.code-surface-code .tok-com { color: #8b949e; font-style: italic; }
.code-surface-code .tok-id  { color: #79c0ff; }
.code-surface-code .tok-key { color: #7ee787; }
.code-surface-code .tok-op  { color: #ff7b72; }

/* ----- Pillar image as a vertical stack (text left, image+code right) ----- */
.pillar-image-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pillar-image-stack > img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}

/* ----- Cinematic full-bleed pillar (replaces 2-col Change Manager) ----- */
.pillar-cinematic {
    padding: clamp(80px, 10vw, 120px) 0 clamp(64px, 8vw, 96px);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #060e22 0%, #0a1733 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.pillar-cinematic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.pillar-cinematic .container { position: relative; z-index: 1; }
.pillar-cinematic-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.pillar-cinematic-head .pillar-tag { color: #79c0ff; }
.pillar-cinematic-head h2 {
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.pillar-cinematic-head p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}
.pillar-cinematic-stage {
    max-width: 880px;
    margin: 0 auto 56px;
}
.pillar-cinematic-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.pillar-cinematic-feature {
    padding: 32px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pillar-cinematic-feature:nth-child(3n) { border-right: none; }
.pillar-cinematic-feature:nth-last-child(-n+3) { border-bottom: none; }
.pillar-cinematic-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(53, 117, 242, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #79c0ff;
    font-weight: 700;
    font-size: 17px;
    font-family: 'SF Mono', monospace;
}
.pillar-cinematic-feature h4 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 700;
}
.pillar-cinematic-feature p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}
@media (max-width: 900px) {
    .pillar-cinematic { padding: 80px 0 64px; }
    .pillar-cinematic-features { grid-template-columns: 1fr; }
    .pillar-cinematic-feature { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:last-child { border-bottom: none; }
    .pillar-cinematic-head h2 { font-size: 32px; }
}

/* ----- Hero polish: grid backdrop + sequential reveal ----- */
.hero.hero-static {
    position: relative;
}
.hero.hero-static::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 50%, #000 25%, transparent 75%);
    z-index: 1;
}
.hero.hero-static > .container { z-index: 2; }

@keyframes seqReveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero.hero-static .hero-title,
.hero.hero-static .hero-subtitle,
.hero.hero-static .hero-buttons,
.hero.hero-static .hero-meta {
    opacity: 0;
    animation: seqReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.hero.hero-static .hero-title    { animation-delay: 0.05s; }
.hero.hero-static .hero-subtitle { animation-delay: 0.20s; }
.hero.hero-static .hero-buttons  { animation-delay: 0.35s; }
.hero.hero-static .hero-meta     { animation-delay: 0.50s; }

/* Homepage video hero: visible grid overlay on top of the video */
.hero .hero-video-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%);
}
/* Homepage hero: sequential reveal too */
.hero .hero-content .hero-title,
.hero .hero-content .hero-subtitle,
.hero .hero-content .hero-buttons {
    animation-fill-mode: both;
}

/* ----- Featured product (homepage): cinematic dark variant ----- */
.featured-product.featured-product-cinematic {
    padding: 110px 0 96px;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.24) 0%, transparent 55%),
        linear-gradient(180deg, #060e22 0%, #0a1733 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.featured-product-cinematic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.featured-product-cinematic .container { position: relative; z-index: 1; }
.featured-product-cinematic .featured-product-row {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
}
.featured-product-cinematic .pillar-tag { color: #79c0ff; }
.featured-product-cinematic .featured-product-content h2 {
    color: #fff;
    font-size: 42px;
    letter-spacing: -0.5px;
}
.featured-product-cinematic .featured-product-content p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17.5px;
}
.featured-product-cinematic .featured-product-content p strong {
    color: #fff;
}
.featured-product-cinematic .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
}
.featured-product-cinematic .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: #fff;
}
.featured-product-cinematic .featured-product-image {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.featured-product-cinematic .featured-product-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border: none;
}
@media (max-width: 900px) {
    .featured-product.featured-product-cinematic { padding: 72px 0 64px; }
    .featured-product-cinematic .featured-product-row { grid-template-columns: 1fr; gap: 32px; }
    .featured-product-cinematic .featured-product-content h2 { font-size: 30px; }
}

/* ==========================================================================
   Homepage redesign - bigger type, generous spacing, blended sections,
   ambient motion. 2026-05-18 second pass.
   ========================================================================== */

/* ----- Ambient motion on the body atmosphere ----- */
@keyframes atmosphereDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    50%  { transform: translate3d(-2%, -3%, 0) scale(1.04); opacity: 0.85; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
body::before {
    animation: atmosphereDrift 22s ease-in-out infinite;
}

/* ----- Hero: bigger, bolder, slower ----- */
.hero { min-height: 92vh; }
.hero .hero-title {
    font-size: 92px;
    line-height: 0.98;
    letter-spacing: -3.5px;
    font-weight: 700;
    max-width: 13ch;
}
.hero .hero-subtitle {
    font-size: 26px;
    line-height: 1.45;
    font-weight: 300;
    max-width: 620px;
    margin-bottom: 52px;
}

/* Homepage hero sequential reveal */
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-buttons {
    opacity: 0;
    animation: seqReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .hero-title    { animation-delay: 0.10s; }
.hero .hero-subtitle { animation-delay: 0.28s; }
.hero .hero-buttons  { animation-delay: 0.46s; }

/* ----- Mission: huge, light, calm ----- */
.company-mission {
    padding: clamp(72px, 9vw, 160px) 0 clamp(56px, 7vw, 120px);
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(53, 117, 242, 0.05) 18%,
            rgba(53, 117, 242, 0.09) 50%,
            rgba(53, 117, 242, 0.05) 82%,
            rgba(255, 255, 255, 0) 100%);
}
.company-mission::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(26, 75, 168, 0.14) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    animation: cinematicGlow 18s ease-in-out infinite;
}
.company-mission .container { position: relative; z-index: 1; }
.company-mission-grid { max-width: 960px; }
.company-mission-text h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--primary);
    margin-bottom: 32px;
    font-weight: 700;
}
.company-mission-text p {
    font-size: clamp(1.125rem, 0.6rem + 1.1vw, 1.625rem);
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 400;
    letter-spacing: -0.3px;
}

/* ----- Featured product cinematic: blended edges, bigger typography ----- */
.featured-product.featured-product-cinematic {
    padding: clamp(80px, 10vw, 160px) 0 clamp(72px, 9vw, 140px);
    margin: 0;
}
.featured-product-cinematic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
/* Transparent → dark navy → transparent so adjacent sections show through */
.featured-product-cinematic {
    background:
        linear-gradient(180deg,
            rgba(6, 14, 34, 0) 0%,
            rgba(6, 14, 34, 0.45) 8%,
            rgba(6, 14, 34, 0.95) 18%,
            rgba(6, 14, 34, 1) 32%,
            rgba(10, 23, 51, 1) 68%,
            rgba(10, 23, 51, 0.95) 82%,
            rgba(10, 23, 51, 0.45) 92%,
            rgba(10, 23, 51, 0) 100%),
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%);
}
.featured-product-cinematic .featured-product-content h2 {
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}
.featured-product-cinematic .featured-product-content p {
    font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 480px;
}
.featured-product-cinematic .pillar-tag {
    font-size: 12px;
    letter-spacing: 2.5px;
    margin-bottom: 24px;
    display: inline-block;
}

/* Ambient glow drift inside the cinematic section */
@keyframes cinematicGlow {
    0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0); }
    50%      { opacity: 1;   transform: translate3d(2%, -1%, 0); }
}
.featured-product-cinematic::before {
    animation: cinematicGlow 14s ease-in-out infinite;
}

/* ----- About teaser: bigger statement ----- */
.company-about-teaser {
    padding: clamp(80px, 10vw, 160px) 0 clamp(72px, 9vw, 140px);
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(53, 117, 242, 0.06) 18%,
            rgba(53, 117, 242, 0.10) 50%,
            rgba(53, 117, 242, 0.06) 82%,
            rgba(255, 255, 255, 0) 100%);
}
.company-about-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 75%, rgba(26, 75, 168, 0.14) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    animation: cinematicGlow 22s ease-in-out infinite reverse;
}
.company-about-teaser .container { position: relative; z-index: 1; }
.company-about-teaser-content { max-width: 880px; }
.company-about-teaser-content h2 {
    font-size: clamp(1.875rem, 1rem + 2.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -1.2px;
    margin-bottom: 24px;
    font-weight: 700;
}
.company-about-teaser-content p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1.65;
    margin-bottom: 28px;
}
.company-about-teaser .pillar-link {
    font-size: 17px;
    letter-spacing: 0.3px;
}

/* ----- CTA: matched to the Currently Shipping (featured-product-cinematic) bg ----- */
.cta-section {
    padding: clamp(72px, 9vw, 140px) 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(180deg,
            rgba(6, 14, 34, 0) 0%,
            rgba(6, 14, 34, 0.45) 8%,
            rgba(6, 14, 34, 0.95) 18%,
            rgba(6, 14, 34, 1) 32%,
            rgba(10, 23, 51, 1) 68%,
            rgba(10, 23, 51, 0.95) 82%,
            rgba(10, 23, 51, 0.45) 92%,
            rgba(10, 23, 51, 0) 100%),
        radial-gradient(ellipse at 15% 0%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(26, 75, 168, 0.22) 0%, transparent 55%);
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    animation: cinematicGlow 14s ease-in-out infinite;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section .cta-content h2 {
    font-size: clamp(2rem, 1rem + 3vw, 4rem);
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 24px;
}
.cta-section .cta-content p {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    margin-bottom: 36px;
}

/* ----- Section reveal: softer cascade ----- */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.fade-in {
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Mobile guardrails for generic heroes (products.html static hero).
   Hero-blend has its own clamp()-based rules later in source and wins by
   source-order against same-specificity selectors. ----- */
@media (max-width: 900px) {
    .hero .hero-title { font-size: 44px; letter-spacing: -1.5px; }
    .hero .hero-subtitle { font-size: 18px; }
}

/* ==========================================================================
   Display font + split hero. 2026-05-18 third pass.
   ========================================================================== */

/* Apply Space Grotesk to all display headings. Body stays Inter. */
.hero-title,
.company-mission-text p,
.featured-product-content h2,
.company-about-teaser-content h2,
.cta-content h2,
.section-header h2,
.pillar-content h2,
.pillar-cinematic-head h2,
.page-hero h1,
.page-hero-video h1,
.company-hero-title,
.product-hero-content h2,
.featured-product-content h2 {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'ss01', 'ss02';
}

/* ----- Hero blend: contained video on right, feathered into the page ----- */
.hero.hero-blend {
    min-height: 78vh;
    padding-top: 90px;
    padding-bottom: 40px;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}
.hero.hero-blend > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.hero-blend-video {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 62%;
    height: 78%;
    z-index: 1;
    pointer-events: none;
    /* Feather the left edge into the page bg + softer top/bottom edges */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 32%, #000 100%),
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, transparent 0%, #000 32%, #000 100%),
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-composite: intersect;
    overflow: hidden;
}
.hero-blend-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Soft brand tint laid over the video, fading out toward the feathered edge */
.hero-blend-video::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(53, 117, 242, 0.18) 40%,
        rgba(10, 20, 40, 0.18) 100%
    );
}
.hero.hero-blend .hero-content {
    max-width: 560px;
    padding: 60px 0;
    text-align: left;
    position: relative;
    z-index: 3;
}
.hero.hero-blend .hero-title {
    font-size: clamp(2rem, 1rem + 2.7vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -1.8px;
    color: var(--text-dark);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
    font-weight: 700;
}
.hero.hero-blend .hero-subtitle {
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.1875rem);
    line-height: 1.55;
    color: var(--text-medium);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    font-weight: 400;
    margin-bottom: 32px;
    max-width: 100%;
}
.hero.hero-blend .hero-buttons .btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 28px rgba(53, 117, 242, 0.28);
}
.hero.hero-blend .hero-buttons .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 14px 36px rgba(53, 117, 242, 0.4);
}
.hero.hero-blend .hero-buttons .btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
    padding: 14px 38px;
}
.hero.hero-blend .hero-buttons .btn-secondary:hover {
    background: var(--text-dark);
    color: #fff;
}
/* ==========================================================================
   Layout-only media queries. Typography & padding are handled by clamp()
   on the base rules - no font-size overrides here.
   ========================================================================== */

/* Hero-blend stacks below 1024px (iPad + small laptops): text first, video below */
@media (max-width: 1024px) {
    .hero.hero-blend { min-height: auto; }
    .hero-blend-video {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        height: clamp(240px, 38vw, 380px);
        margin-top: 24px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
    .hero.hero-blend .hero-content { padding: 24px 0; max-width: 100%; }

    /* Featured product (homepage) - stack at tablet */
    .featured-product-cinematic .featured-product-row { grid-template-columns: 1fr; gap: 36px; }
    .featured-product-cinematic .featured-product-content p { max-width: 100%; }

    /* Change Manager cinematic features - 2-col at tablet */
    .pillar-cinematic-features { grid-template-columns: repeat(2, 1fr); }
    .pillar-cinematic-feature {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .pillar-cinematic-feature:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:nth-child(2n) { border-right: none; }
    .pillar-cinematic-feature:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:nth-last-child(-n+2) { border-bottom: none; }

    /* IDE pillar - stack at tablet (text above image/code) */
    .pillar-row { grid-template-columns: 1fr; gap: 40px; }
    .pillar-row-reverse .pillar-content { order: 1; }
    .pillar-row-reverse .pillar-image { order: 2; }

    /* Fleet grid stays 3-col but tighter */
    .fleet-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .fleet-card { padding: 24px 18px; }

    /* Code surface readability on tablet */
    .code-surface-gutter { padding: 16px 8px 16px 12px; font-size: 12.5px; }
    .code-surface-code { padding: 16px 18px; font-size: 13px; }
}

/* ----- Stack to 1-col at tablet portrait / phone (max 768) ----- */
@media (max-width: 768px) {
    .pillar-cinematic-features { grid-template-columns: 1fr; }
    .pillar-cinematic-feature { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .pillar-cinematic-feature:last-child { border-bottom: none; }
    .pillar-cinematic-stage { margin-bottom: 40px; }

    .diff-comparison { grid-template-columns: 1fr; }
    .diff-pane-old { border-right: none; border-bottom: 1px solid #2a1414; }
    .diff-lines li { padding: 8px 18px 8px 38px; }

    .fleet-grid { grid-template-columns: 1fr; }

    .code-surface-chrome { padding: 10px 12px; }
    .code-surface-filename { font-size: 12px; margin-left: 8px; }
    .code-surface-tab { display: none; }
    .code-surface-gutter { padding: 14px 6px 14px 10px; font-size: 12px; }
    .code-surface-code { padding: 14px 14px; font-size: 12.5px; line-height: 1.65; }

    .container { padding: 0 20px; }
}

/* ----- Very small phones (layout-only, no font sizes) ----- */
@media (max-width: 420px) {
    .container { padding: 0 16px; }
    .hero.hero-blend .hero-buttons { gap: 10px; }
    .hero.hero-blend .hero-buttons .btn { padding: 12px 22px; font-size: 13px; }
    .code-surface-code { padding: 12px 12px; }
    .code-surface-gutter { padding: 12px 4px 12px 8px; }
}

/* ==========================================================================
   Homepage unified canvas - single continuous gradient + atmospheric blobs
   live on the body itself, NOT per section. Sections are fully transparent
   pass-through containers. 2026-05-20.
   ========================================================================== */
body {
    background:
        /* Atmospheric brand-blue blobs distributed along page height.
           These scroll with the page so accents flow continuously across
           every section, no dead zones at section boundaries. */
        radial-gradient(ellipse 55% 22% at 78% 8%,  rgba(53, 117, 242, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 48% 18% at 18% 22%, rgba(53, 117, 242, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 24% at 88% 38%, rgba(26, 75, 168, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse 52% 22% at 12% 54%, rgba(53, 117, 242, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 58% 24% at 82% 70%, rgba(53, 117, 242, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 48% 20% at 22% 86%, rgba(26, 75, 168, 0.18) 0%, transparent 55%),
        /* Base vertical gradient - smooth tonal arc across the page */
        linear-gradient(180deg,
            #060e22 0%,
            #0a1733 14%,
            #0e2148 28%,
            #122a5a 44%,
            #122a5a 56%,
            #0e2148 72%,
            #0a1733 86%,
            #060e22 100%);
    color: #e6edf7;
}

/* Body's fixed-viewport atmospheric layer adds subtle motion */
body::before {
    background:
        radial-gradient(ellipse 120% 80% at 80% 20%, rgba(53, 117, 242, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 100% 70% at 20% 60%, rgba(53, 117, 242, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 90% 60% at 90% 80%, rgba(53, 117, 242, 0.12) 0%, transparent 50%);
    filter: blur(120px);
    z-index: 0;
}

/* Every section truly transparent - no bg, no ::before atmospheric overlay.
   Body provides all visuals. */
body .hero,
body .company-mission,
body .featured-product,
body .featured-product.featured-product-cinematic,
body .company-about-teaser,
body .cta-section {
    background: transparent !important;
    overflow: visible;
}
body .company-mission::before,
body .featured-product-cinematic::before,
body .company-about-teaser::before,
body .cta-section::before {
    display: none !important;
}

/* Hero on homepage - text becomes light to read on dark canvas */
body .hero.hero-blend .hero-title {
    color: #ffffff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
body .hero.hero-blend .hero-subtitle {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}
body .hero.hero-blend .hero-buttons .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}
body .hero.hero-blend .hero-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: #fff;
}

/* Mission section text - white on dark canvas */
body .company-mission-text h2 { color: #79c0ff; }
body .company-mission-text p { color: #ffffff; }

/* About teaser text - white on dark canvas */
body .company-about-teaser-content h2 { color: #ffffff; }
body .company-about-teaser-content p { color: rgba(255, 255, 255, 0.78); }
body .company-about-teaser .pillar-link { color: #79c0ff; }
body .company-about-teaser .pillar-link:hover { border-bottom-color: #79c0ff; }

/* Hero video tint adapted to dark canvas */
body .hero-blend-video::after {
    background: linear-gradient(
        90deg,
        rgba(6, 14, 34, 0.45) 0%,
        rgba(53, 117, 242, 0.12) 40%,
        rgba(6, 14, 34, 0.35) 100%);
}

/* Footer - fully transparent so the body canvas runs all the way to the
   bottom of every page. */
body .site-footer {
    background: transparent !important;
}
body .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Header - sticky and starts fully transparent. Once the user scrolls past
   the hero (40px threshold, toggled by script.js), a soft backdrop fades in
   via a pseudo-element whose bottom edge is masked to transparent. That
   eliminates the rectangular boundary that backdrop-filter normally creates,
   so the header reads as a soft glow over the page rather than a shelf. */
body .site-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 1000;
}
body .site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 -26px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6, 14, 34, 0.88) 0%,
        rgba(6, 14, 34, 0.62) 68%,
        rgba(6, 14, 34, 0) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}
body .site-header.scrolled::before {
    opacity: 1;
}
body .site-header::after {
    display: none !important;
}
body .main-nav a {
    color: rgba(255, 255, 255, 0.85);
}
body .main-nav a:hover {
    color: #ffffff;
}
body .main-nav a::after {
    background: #ffffff;
}
body .hamburger span {
    background: #ffffff;
}
body .mobile-menu {
    background: #0a1733;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body .mobile-menu nav a {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   All pages - additional section transparencies + dark-canvas text colors.
   2026-05-20 second pass: extend the homepage canvas treatment site-wide.
   ========================================================================== */

/* Strip every section bg AND every per-section radial accent. The body
   provides all atmosphere - per-section radials bounded to the section
   create lit-interior / dark-edges patterns that mark section boundaries. */
.trust-strip,
.pillar-section-alt,
.pricing-teaser,
.faq-section,
.hero.hero-static,
.pillar-cinematic,
.problem-section,
.pillar-section,
.fleet-section,
.services-detail,
.about-content,
.mission-section,
.expertise-section,
.contact-section,
.trial-page,
.page-hero,
.page-hero-video,
.product-detail-section,
.services-section {
    background: transparent !important;
}

/* Hide every section's ::before/::after atmospheric overlay so nothing
   bounded to a section can create a visible edge. */
.hero.hero-static::after,
.pillar-cinematic::before,
.pillar-cinematic::after,
.featured-product-cinematic::before,
.featured-product-cinematic::after,
.cta-section::before,
.cta-section::after,
.company-mission::before,
.company-about-teaser::before {
    display: none !important;
}

/* Section headers + leads sitting directly on the canvas → light text */
.section-header h2 { color: #ffffff; }
.section-header p,
.section-lead { color: rgba(255, 255, 255, 0.78); }

/* Pillar content (products.html IDE pillar) sits directly on canvas */
.pillar-section .pillar-content h2 { color: #ffffff; }
.pillar-section .pillar-content p { color: rgba(255, 255, 255, 0.82); }
.pillar-section .pillar-bullets li { color: rgba(255, 255, 255, 0.82); }
.pillar-section .pillar-bullets li::before { color: #79c0ff; }
.pillar-section .pillar-tag { color: #79c0ff; }
.pillar-link { color: #79c0ff; }
.pillar-link:hover { border-bottom-color: #79c0ff; }

/* Services detail content (services.html) */
.service-detail-content h2 { color: #ffffff; }
.service-detail-content p { color: rgba(255, 255, 255, 0.82); }
.service-detail-content ul li { color: rgba(255, 255, 255, 0.78); }

/* Page hero (about/services/pricing/contact) */
.page-hero h1 { color: #ffffff; }
.page-hero p { color: rgba(255, 255, 255, 0.82); }

/* About page text columns */
.about-text h2 { color: #ffffff; }
.about-text p { color: rgba(255, 255, 255, 0.82); }

/* Contact info text */
.contact-info h2 { color: #ffffff; }
.contact-info > p { color: rgba(255, 255, 255, 0.82); }
.contact-item h4 { color: #ffffff; }
.contact-item p { color: rgba(255, 255, 255, 0.78); }
.social-links h4 { color: #ffffff; }

/* Diff panes already dark - leave alone. Problem cards, fleet cards, pricing
   cards, mission cards, service cards, feature items keep their white bg
   and dark text - they read fine as cards on a dark canvas. */

/* Trust strip label (still exists on products page if reused) */
.trust-strip-label { color: rgba(255, 255, 255, 0.7); }

/* Process grid - 4 numbered steps, responsive */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
@media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .process-grid { grid-template-columns: 1fr; }
}

/* Differentiators grid - 2x2 layout (was auto-fit which left an orphan) */
.differentiators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 48px;
}
@media (max-width: 760px) {
    .differentiators-grid { grid-template-columns: 1fr; }
}

/* Pillar-link readability on the dark canvas */
body .pillar-link {
    color: #79c0ff;
    font-weight: 600;
}
body .pillar-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Service-detail screenshot/image - remove the light-grey border that shows
   as a stray outline on the dark canvas */
body .service-detail-image img {
    border: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

/* FAQ items as dark glass cards on the canvas */
body .faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(10px);
}
body .faq-item summary { color: #ffffff; font-weight: 600; }
body .faq-item summary:hover { background: rgba(255, 255, 255, 0.06) !important; }
body .faq-item summary::after { color: #79c0ff; }
body .faq-item .faq-body { color: rgba(255, 255, 255, 0.80); }
body .faq-item .faq-body a { color: #79c0ff; }

/* CTA section text (used across pages) */
.cta-section .cta-content h2 { color: #ffffff; }
.cta-section .cta-content p { color: rgba(255, 255, 255, 0.85); }


/* Service-card links sit on the frosted light card, not the dark canvas, so
   the light #79c0ff (meant for on-canvas links) reads as low-contrast. Use a
   darker blue here. Specificity (body + 2 classes) beats `body .pillar-link`. */
body .service-card .pillar-link {
    color: #1f49b8;
}
body .service-card .pillar-link:hover {
    color: #13317d;
    border-bottom-color: #13317d;
}

/* ==========================================================================
   Mobile hero-blend fix (<=1024px): the video was flipped to position:relative
   but .hero stayed display:flex(row), so it sat beside the text instead of
   stacking, and the tall centered min-height left a big empty gap under the
   header. Make the video a full-bleed background behind the text (matches the
   desktop "video fades behind the words" look) with a readability scrim.
   ========================================================================== */
@media (max-width: 1024px) {
    .hero.hero-blend {
        min-height: 86vh;
        padding-top: 92px;   /* clears the fixed 70px header without a big gap */
        padding-bottom: 48px;
        align-items: center;
    }
    .hero.hero-blend > .container { z-index: 3; }
    .hero.hero-blend .hero-content { max-width: 100%; padding: 0; }
    .hero-blend-video {
        position: absolute;
        inset: 0;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: 100%;
        transform: none;
        margin-top: 0;
        z-index: 1;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
    }
    .hero-blend-video video { width: 100%; height: 100%; object-fit: cover; }
    /* stronger scrim so white hero text stays readable over the full-bleed video */
    body .hero-blend-video::after {
        background: linear-gradient(
            180deg,
            rgba(6, 14, 34, 0.52) 0%,
            rgba(6, 14, 34, 0.74) 38%,
            rgba(6, 14, 34, 0.82) 68%,
            rgba(6, 14, 34, 0.68) 100%);
    }
}

/* Mobile header: the logo image box is up to 350px (lots of transparent
   padding), which pushed the hamburger past the right edge and clipped it.
   Cap the logo on small screens so the hamburger always fits. */
@media (max-width: 768px) {
    .site-header .logo img { max-width: 240px; }
}

/* Reduce excessive bottom padding across homepage sections (was up to ~130px,
   creating large empty gaps between sections). */
.featured-product { padding-bottom: 52px; }
.fleet-section { padding-bottom: 56px; }
body .company-mission { padding-bottom: clamp(40px, 4.5vw, 64px); }
body .company-about-teaser { padding-bottom: clamp(40px, 4.5vw, 64px); }
body .cta-section { padding-bottom: clamp(48px, 5vw, 80px); }
/* Also trim the oversized top padding on the lower homepage sections. */
body .company-mission { padding-top: clamp(48px, 5vw, 72px); }
body .company-about-teaser { padding-top: clamp(52px, 5.5vw, 84px); }
body .cta-section { padding-top: clamp(52px, 5.5vw, 84px); }

/* Engagement cards: equal height, tight padding and number. */
.process-grid .fleet-card { padding: 22px 26px 24px; }
.process-grid .fleet-number { font-size: 38px; margin-bottom: 4px; }

/* Additional Services link between sections */
.additional-services-link { padding: 0 0 64px; }
.additional-services-link .pillar-link { font-size: 17px; }

/* Center the Turnstile widget within forms */
.cf-turnstile { display: flex; justify-content: center; }