/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

/* ========== RESET ========== */

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

/* ========== VARIABLES ========== */

:root {
    --color-primary: #1a365d;
    --color-primary-light: #2c5282;
    --color-primary-dark: #0f2442;
    --color-accent: #3182ce;
    --color-accent-hover: #2b6cb0;
    --color-background: #ffffff;
    --color-background-alt: #f7fafc;
    --color-background-dark: #1a202c;
    --color-text: #1a202c;
    --color-text-light: #4a5568;
    --color-text-on-dark: #e2e8f0;
    --color-text-on-primary: #ffffff;
    --color-border: #e2e8f0;
    --color-success: #38a169;
    --font-body: "DM Sans", Arial, sans-serif;
    --max-width: 1200px;
    --section-padding: 60px 24px;
    --radius: 8px;
}

/* ========== BASE ========== */

html {
    scroll-behavior: smooth;
}

/* Column layout with a growing <main> keeps the footer at the bottom of the
   viewport on short pages, instead of leaving dead space beneath it. */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
}

body > footer {
    flex-shrink: 0;
}

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

a:hover {
    color: var(--color-accent-hover);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    color: var(--color-primary);
}

/* ========== LAYOUT ========== */

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

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

header {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
}

.logo {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

.logo:hover {
    color: var(--color-primary);
}

.nav-links {
    align-items: center;
    display: none;
    gap: 28px;
}

.nav-links a {
    color: var(--color-text-light);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

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

.nav-links a.active {
    color: var(--color-primary);
    font-weight: 700;
}

/* ========== NAV DROPDOWN ========== */
/* Mobile-first: the submenu is stacked and revealed by .open. Desktop hover and
   focus behavior is added in the 760px query, so no JS is needed to browse it. */

.nav-group-toggle {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    gap: 8px;
    padding: 0;
    transition: color 0.2s;
}

.nav-group-toggle:hover {
    color: var(--color-primary);
}

.nav-group-toggle.active {
    color: var(--color-primary);
    font-weight: 700;
}

.nav-group-toggle:focus-visible,
.nav-submenu a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.nav-caret {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: inline-block;
    height: 6px;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    width: 6px;
}

.nav-group.open .nav-caret {
    transform: rotate(-135deg) translateY(1px);
}

.nav-submenu {
    display: none;
}

.nav-group.open .nav-submenu {
    display: block;
}

/* Stacked mobile menu: match the sibling links, then indent the children. */
.nav-links.open .nav-group {
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
    width: 100%;
}

.nav-links.open .nav-group-toggle {
    justify-content: space-between;
    width: 100%;
}

.nav-links.open .nav-submenu a {
    border-bottom: none;
    font-size: 14px;
    padding: 10px 0 0 16px;
}

.nav-cta {
    background-color: var(--color-accent);
    border-radius: var(--radius);
    color: var(--color-text-on-primary) !important;
    padding: 8px 20px;
    font-size: 14px !important;
    transition: background-color 0.2s;
}

.nav-cta:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-text-on-primary) !important;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.mobile-menu-toggle span {
    background-color: var(--color-primary);
    border-radius: 2px;
    display: block;
    height: 2px;
    transition: transform 0.2s, opacity 0.2s;
    width: 24px;
}

.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-links.open {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 16px 24px;
    position: absolute;
    right: 0;
    top: 64px;
}

.nav-links.open a {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

.nav-links.open .nav-cta {
    margin-top: 8px;
    text-align: center;
}

/* ========== BUTTONS ========== */

.btn {
    border-radius: var(--radius);
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-text-on-primary);
}

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

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--color-text-on-primary);
    color: var(--color-text-on-primary);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-text-on-primary);
}

/* ========== SECTIONS ========== */

.section {
    padding: var(--section-padding);
}

.section-light {
    background-color: var(--color-background);
}

.section-dark {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.section-dark h2,
.section-dark h3 {
    color: var(--color-text-on-primary);
}

.section-dark p {
    color: var(--color-text-on-dark);
}

.section-accent {
    background-color: var(--color-background-dark);
    color: var(--color-text-on-primary);
}

/* Headings carry --color-primary from the base rule, which is unreadable on this
   near-black ground. Paragraphs inherit the section color and are already fine. */
.section-accent h2,
.section-accent h3 {
    color: var(--color-text-on-primary);
}

/* Anchor targets must clear the sticky 64px header. */
.section[id],
.page-body h2[id],
.page-body h3[id] {
    scroll-margin-top: 80px;
}

.section-cta {
    background-color: var(--color-primary-light);
    color: var(--color-text-on-primary);
    text-align: center;
    padding: 80px 24px;
}

.section-cta h2 {
    color: var(--color-text-on-primary);
    font-size: 32px;
    margin-bottom: 16px;
}

.section-cta p {
    color: var(--color-text-on-dark);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* .hero-ctas is a plain flex row, which reads as left-aligned inside a centered
   section. Center it wherever it sits in one. */
.section-cta .hero-ctas {
    justify-content: center;
}

.section-heading {
    font-size: 32px;
    margin-bottom: 16px;
    text-align: center;
}

/* The accent blue is unreadable on the navy ground, so links on dark sections
   take the same pale blue the hero eyebrow uses. */
.section-dark a {
    color: #A8D4F5;
}

.section-dark a:hover {
    color: var(--color-text-on-primary);
}

.pillar-link {
    font-size: 15px;
    font-weight: 600;
    margin-top: 16px;
}

.section-lead {
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

/* ========== HOME: HERO ========== */

.hero-section {
    background-color: var(--color-primary-light);
    background-image: url("../images/hero.webp");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(15, 36, 66, 0.92) 0%, rgba(26, 54, 93, 0.85) 50%, rgba(44, 82, 130, 0.7) 100%);
    display: flex;
    align-items: center;
    min-height: 90vh;
    width: 100%;
    padding: var(--section-padding);
    position: relative;
}

.hero-content {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Video hero variant */
.hero-video-section {
    position: relative;
    overflow: hidden;
    background-color: #0F2442;
    height: 70vh;
    min-height: auto;
    background-image: none;
    background-attachment: scroll;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% top;
    transform: scaleX(-1);
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 80px 24px 24px;
    background:
        linear-gradient(
            to right,
            rgba(15, 36, 66, 0.93) 0%,
            rgba(15, 36, 66, 0.85) 50%,
            rgba(15, 36, 66, 0.6) 100%
        );
}

.hero-video-content {
    max-width: 90%;
}

.hero-video-content h1 {
    color: var(--color-text-on-primary);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.hero-video-content .hero-sub {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 100%;
}

.hero-video-section .scroll-indicator {
    z-index: 3;
}

.hero-video-content .hero-super {
    color: #A8D4F5;
}

.hero-super {
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hero-content h1 {
    color: var(--color-text-on-primary);
    font-size: 36px;
    line-height: 1.25;
    margin-bottom: 24px;
    max-width: 700px;
}

.hero-sub {
    color: var(--color-text-on-dark);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
}

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

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
}

.scroll-indicator:hover {
    color: rgba(255, 255, 255, 1);
}

.scroll-indicator span {
    display: block;
    margin-bottom: 8px;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
}

/* ========== HOME: PROBLEM CARDS ========== */

.problem-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

.problem-card {
    background-color: var(--color-background-alt);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 24px;
}

.problem-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.problem-card p {
    color: var(--color-text-light);
    font-size: 15px;
}

/* ========== HOME: PILLARS ========== */

.pillar-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
}

.pillar-card {
    text-align: center;
}

.pillar-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.pillar-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.pillar-card p {
    font-size: 15px;
    max-width: 360px;
    margin: 0 auto;
}

/* ========== HOME: PRODUCT TEASER ========== */

.product-teaser {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: center;
}

.product-screenshot {
    aspect-ratio: 16 / 10;
}

.product-screenshot video {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    object-fit: contain;
    background-color: #000;
}

.video-caption {
    color: var(--color-text-light);
    font-size: 13px;
    font-style: italic;
    margin-top: 12px;
    text-align: center;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.feature-list li:last-child {
    border-bottom: none;
}

.product-features .btn {
    margin-top: 24px;
}

/* ========== HOME: TRUST BADGES ========== */

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 0;
}

.trust-badge {
    text-align: center;
    padding: 20px 24px;
    min-width: 160px;
}

.trust-badge strong {
    color: var(--color-text-on-primary);
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.trust-badge span {
    color: var(--color-text-on-dark);
    font-size: 12px;
}

.patent-badge strong {
    color: var(--color-success);
}

/* ========== INNER PAGES ========== */

.inner-page .page-hero {
    background-color: var(--color-primary);
    padding: 40px 24px 32px;
    text-align: center;
}

.title-icon {
    height: 1.4em;
    width: 1.4em;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 24px;
    margin-top: -4px;
}

.inner-page .page-hero-image {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    padding: 80px 24px 60px;
}

.inner-page .page-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 36, 66, 0.85) 0%, rgba(26, 54, 93, 0.75) 50%, rgba(44, 82, 130, 0.65) 100%);
}

.inner-page .page-hero-image .container {
    position: relative;
    z-index: 1;
}

.inner-page .page-hero h1 {
    color: var(--color-text-on-primary);
    font-size: 36px;
    margin-bottom: 12px;
}

.page-subtitle {
    color: var(--color-text-on-dark);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* Names the product above a capability's title, so a feature page can never be
   mistaken for a separate product. */
.page-eyebrow {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.inner-page .page-hero .page-eyebrow {
    color: #A8D4F5;
}

@media (prefers-reduced-motion: reduce) {
    .nav-caret,
    .nav-group-toggle {
        transition: none;
    }
}

.page-body {
    padding: 60px 24px;
}

.page-body h2 {
    font-size: 28px;
    margin-top: 56px;
    margin-bottom: 20px;
}

.page-body h2:first-child {
    margin-top: 0;
}

.page-body h3 {
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 12px;
}

.page-body p {
    color: var(--color-text-light);
    margin-bottom: 16px;
    max-width: 720px;
}

.page-body ul, .page-body ol {
    color: var(--color-text-light);
    margin-bottom: 16px;
    padding-left: 24px;
    max-width: 720px;
}

.page-body li {
    margin-bottom: 8px;
}

.page-body strong {
    color: var(--color-text);
}

/* Full-width override for sections that shouldn't be constrained */
.full-width-section p,
.full-width-section ul,
.full-width-section ol {
    max-width: none;
}

/* Links inside running prose carry an underline as well as color: color alone
   is not a sufficient affordance (WCAG 1.4.1), and an in-page link that reads as
   a product name is easily missed. Chrome and buttons stay undecorated. */
.feature-intro a,
.page-body p a,
.page-body li a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.page-body a.btn,
.feature-intro a.btn {
    text-decoration: none;
}

/* A closing note beneath a card grid — card-sized, full width, and italic so it
   reads as a footnote to the cards rather than as a new argument. */
.page-body .standards-note {
    font-size: 15px;
    font-style: italic;
    margin-top: -24px;
    max-width: none;
}

/* Feature intro */
.feature-intro {
    max-width: 720px;
    margin-bottom: 48px;
}

.feature-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text);
}

/* ========== CONTENT GRIDS ========== */

/* How It Works — video + heroes layout */
.how-it-works-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 32px 0 48px;
}

.how-it-works-video {
    width: 100%;
}

.how-it-works-video video {
    width: 100%;
    max-width: 680px;
    height: auto;
    border-radius: var(--radius);
    background: #000;
}

.video-caption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text-muted);
    font-style: italic;
    max-width: 680px;
}

/* Reserved space for a screenshot or clip that has not been produced yet.
   Replace the whole block with a <video> or <img> when the asset arrives. */
.media-slot {
    align-items: center;
    aspect-ratio: 16 / 9;
    background-color: var(--color-background-alt);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    margin: 32px 0 0;
    max-width: 860px;
    padding: 24px;
    text-align: center;
}

.media-slot span {
    color: var(--color-text-light);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.steps-grid-2x2 {
    grid-template-columns: 1fr !important;
}

/* Steps grid (How it works, Lifecycle) */
.steps-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin: 32px 0 48px;
}

.step-card {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
}

.step-number {
    background-color: var(--color-accent);
    border-radius: 50%;
    color: var(--color-text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    height: 48px;
    margin-bottom: 16px;
    width: 48px;
}

.step-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.step-card p {
    color: var(--color-text-light);
    font-size: 15px;
    max-width: 100%;
}

/* Capabilities grid */
.capabilities-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin: 32px 0 48px;
}

.capability-card {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 32px;
    border-top: 3px solid var(--color-accent);
}

.capability-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.capability-card p {
    color: var(--color-text-light);
    font-size: 15px;
    max-width: 100%;
}

/* Deployment grid */
.deployment-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin: 32px 0 48px;
}

.deployment-card {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 32px;
}

.deployment-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.deployment-card p {
    color: var(--color-text-light);
    font-size: 15px;
    max-width: 100%;
}

/* ========== TEAM ========== */

.team-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    margin: 32px 0 48px;
}

.team-card {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 32px;
}

.team-headshot {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 3px solid var(--color-border);
    background-color: var(--color-background-alt);
}

.team-headshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.team-card h3 {
    font-size: 22px;
    margin-bottom: 4px;
}

.team-role {
    color: var(--color-accent) !important;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 16px !important;
}

.team-contact {
    margin-top: 16px;
    font-size: 14px;
}

.team-contact a {
    color: var(--color-accent);
}

/* ========== CONTACT ========== */

.contact-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin: 32px 0 48px;
}

.contact-option {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
}

.contact-option h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.contact-option p {
    color: var(--color-text-light);
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 100%;
}

.direct-contacts {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    margin-top: 24px;
}

.direct-contact-card {
    background-color: var(--color-background-alt);
    border-radius: var(--radius);
    padding: 24px;
}

.direct-contact-card h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.direct-contact-card p {
    font-size: 14px;
    margin-bottom: 4px;
}

/* ========== FAQ ========== */

.faq-section {
    margin: 24px 0 48px;
}

.faq-item {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding: 24px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 0;
}

.faq-item p {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* ========== BLOG ========== */

.post-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 8px 0 48px;
    max-width: 720px;
}

.post-item {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 40px;
}

.post-item:last-child {
    border-bottom: none;
}

.post-item h2 {
    font-size: 24px;
    margin: 0 0 12px;
}

.post-item h2 a {
    color: var(--color-primary);
    text-decoration: none;
}

.post-item h2 a:hover {
    color: var(--color-accent);
}

.post-meta {
    color: var(--color-text-light);
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 8px !important;
    text-transform: uppercase;
}

.post-summary {
    font-size: 16px;
}

.post-more {
    font-weight: 600;
    margin-top: 16px;
}

/* Running text in a post gets a comfortable measure and a little more air than
   the marketing pages, since it is read rather than scanned. */
.post-body {
    max-width: 680px;
}

.post-body p,
.post-body li {
    font-size: 17px;
    line-height: 1.8;
}

.post-body h2 {
    font-size: 24px;
    margin-top: 40px;
}

.post-body h3 {
    font-size: 19px;
}

.post-body blockquote {
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-light);
    font-style: italic;
    margin: 28px 0;
    padding-left: 20px;
}

.pagination {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    font-size: 15px;
    gap: 24px;
    justify-content: space-between;
    margin-top: 8px;
    max-width: 720px;
    padding-top: 24px;
}

.pagination-position {
    color: var(--color-text-light);
}

.post-elsewhere {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 15px;
    margin-top: 40px;
    padding-top: 20px;
}

/* ========== PAGE CTA ========== */

.page-cta {
    background-color: var(--color-primary);
    border-radius: var(--radius);
    margin-top: 64px;
    padding: 48px 32px;
    text-align: center;
}

.page-cta h2 {
    color: var(--color-text-on-primary);
    font-size: 28px;
    margin-bottom: 12px;
    margin-top: 0;
}

.page-cta p {
    color: var(--color-text-on-dark);
    font-size: 16px;
    margin: 0 auto 24px;
    max-width: 500px;
}

/* ========== FOOTER ========== */

footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-on-dark);
    padding: 60px 24px 24px;
}

.footer-content {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    color: var(--color-text-on-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.footer-tagline {
    color: var(--color-text-on-dark);
    font-size: 14px;
}

.footer-substack {
    font-size: 14px;
    margin-top: 14px;
}

.footer-substack a {
    color: var(--color-text-on-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.footer-substack a:hover {
    color: var(--color-text-on-primary);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav h4 {
    color: var(--color-text-on-primary);
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-nav a {
    color: var(--color-text-on-dark);
    font-size: 14px;
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--color-text-on-primary);
}

.footer-contact h4 {
    color: var(--color-text-on-primary);
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-contact-item {
    margin-bottom: 12px;
}

.footer-contact-item strong {
    color: var(--color-text-on-primary);
    display: block;
    font-size: 14px;
}

.footer-contact-item a {
    color: var(--color-text-on-dark);
    font-size: 13px;
}

.footer-contact-item a:hover {
    color: var(--color-text-on-primary);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 24px auto 0;
    text-align: center;
}

.footer-bottom p {
    color: var(--color-text-on-dark);
    font-size: 13px;
    margin-bottom: 4px;
}

.patent-notice {
    font-style: italic;
    opacity: 0.7;
}

/* ========== TABLET (760px+) ========== */

@media (min-width: 760px) {
    .nav-links {
        display: flex;
    }

    .mobile-menu-toggle {
        display: none;
    }

    /* The group's vertical padding fills the header, so the pointer never crosses
       dead space between the toggle and the panel below it. */
    .nav-group {
        padding: 20px 0;
        position: relative;
    }

    .nav-submenu {
        background-color: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: 0 8px 24px rgba(26, 54, 93, 0.14);
        left: -16px;
        min-width: 220px;
        padding: 8px 0;
        position: absolute;
        top: 100%;
    }

    .nav-group:hover .nav-submenu,
    .nav-group:focus-within .nav-submenu {
        display: block;
    }

    .nav-submenu a {
        display: block;
        padding: 10px 18px;
        white-space: nowrap;
    }

    .nav-submenu a:hover {
        background-color: var(--color-background-alt);
        color: var(--color-primary);
    }

    .hero-video-section {
        height: 750px;
    }

    .hero-video-bg {
        transform: none;
        object-position: top;
    }

    .hero-video-overlay {
        padding: 60px 40px 60px 40%;
        background:
            linear-gradient(
                to bottom,
                rgba(15, 36, 66, 0.7) 0%,
                transparent 10%
            ),
            linear-gradient(
                to right,
                transparent 40%,
                rgba(15, 36, 66, 0.85) 80%,
                rgba(15, 36, 66, 0.95) 100%
            );
    }

    .hero-video-content {
        max-width: 600px;
    }

    .hero-video-content h1 {
        font-size: 32px;
    }

    .hero-video-content .hero-sub {
        font-size: 16px;
        line-height: 1.8;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .problem-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pillar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-teaser {
        grid-template-columns: 1fr 1fr;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid-2x2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .deployment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .direct-contacts {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 2fr;
    }

    .inner-page .page-hero h1 {
        font-size: 44px;
    }

    .page-subtitle {
        font-size: 20px;
    }
}

/* ========== DESKTOP (1025px+) ========== */

@media (min-width: 1025px) {
    :root {
        --section-padding: 80px 40px;
    }

    .top-nav {
        padding: 0 40px;
    }

    .hero-video-section {
        height: 750px;
    }

    .hero-video-overlay {
        padding: 60px 40px 60px 45%;
        background:
            linear-gradient(
                to bottom,
                rgba(15, 36, 66, 0.7) 0%,
                transparent 10%
            ),
            linear-gradient(
                to right,
                transparent 40%,
                rgba(15, 36, 66, 0.85) 80%,
                rgba(15, 36, 66, 0.95) 100%
            );
    }

    .hero-video-content {
        max-width: 700px;
    }

    .hero-video-content h1 {
        font-size: 36px;
    }

    .hero-video-content .hero-sub {
        line-height: 2.0;
    }

    .hero-content h1 {
        font-size: 52px;
    }

    .hero-sub {
        font-size: 20px;
    }

    .section-heading {
        font-size: 36px;
    }

    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Video + 2x2 heroes side-by-side on desktop */
    .how-it-works-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .how-it-works-video {
        flex: 0 0 680px;
    }

    .how-it-works-video video {
        width: 680px;
        height: auto;
    }

    .steps-grid-2x2 {
        grid-template-columns: repeat(2, 1fr) !important;
        flex: 1;
        margin: 0;
    }

    .steps-grid-2x2 .step-card {
        padding: 24px 18px;
    }

    .steps-grid-2x2 .step-card p {
        font-size: 14px;
    }

    .capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .deployment-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .inner-page .page-hero {
        padding: 48px 40px 40px;
    }

    .inner-page .page-hero h1 {
        font-size: 52px;
    }

    .page-body {
        padding: 60px 40px;
    }

    .section-cta {
        padding: 100px 40px;
    }

    .section-cta h2 {
        font-size: 36px;
    }
}

/* ========== LARGE DESKTOP (1725px+) ========== */

@media (min-width: 1725px) {
    body {
        font-size: 18px;
    }

    :root {
        --max-width: 1400px;
    }

    .hero-content h1 {
        font-size: 64px;
    }

    .section-heading {
        font-size: 42px;
    }
}

/* Email links are inert until main.js assembles the address, so only style them
   as links once they actually have an href. Without JavaScript the text still
   reads as an address and can be copied; it simply is not clickable. */
.email-link:not([href]) {
  color: inherit;
  text-decoration: none;
  cursor: text;
}