/* Single-page site (29 Sep 2026). Header, footer and homepage sections.
   Classes are prefixed r8- so they do not collide with styles.css, which
   privacy.html and terms.html still load for their body content. */

:root {
    --r8-navy: #0A0E27;
    --r8-blue: #0066FF;
    --r8-cyan: #00D2FF;
    --r8-ink: #111827;
    --r8-muted: #4B5563;
    --r8-line: #E5E7EB;
    --r8-soft: #F5F7FB;
    --r8-max: 1080px;
}

.r8-body {
    margin: 0;
    font-family: 'Active Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--r8-ink);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.r8-wrap { max-width: var(--r8-max); margin: 0 auto; padding: 0 24px; }

/* Header */
.r8-header { background: var(--r8-navy); position: sticky; top: 0; z-index: 50; }
.r8-header .r8-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.r8-brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.r8-brand img.r8-logo { height: 30px; width: auto; display: block; }
.r8-brand img.r8-badge { height: 40px; width: auto; display: block; }

/* Buttons */
.r8-btn {
    display: inline-block; padding: 12px 22px; border-radius: 8px;
    font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
    border: 2px solid var(--r8-blue); transition: background .15s, color .15s;
}
.r8-btn-primary { background: #FF9900; border-color: #FF9900; color: #000; }
.r8-btn-primary:hover { background: #ec8e00; border-color: #ec8e00; }
.r8-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.r8-btn-ghost:hover { border-color: #fff; }
.r8-btn-outline { background: #fff; color: var(--r8-blue); }
.r8-btn-outline:hover { background: var(--r8-soft); }

/* Hero */
.r8-hero { background: var(--r8-navy); color: #fff; padding: 72px 0 88px; }
.r8-hero h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.1; margin: 0 0 20px; max-width: 820px; letter-spacing: -0.01em; }
.r8-hero p { font-size: 19px; color: #C9D2E3; max-width: 760px; margin: 0 0 32px; }
.r8-hero .r8-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.r8-kicker { color: var(--r8-cyan); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }

/* Sections */
.r8-section { padding: 72px 0; }
.r8-section.r8-alt { background: var(--r8-soft); }
.r8-section h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; margin: 0 0 14px; }
.r8-lead { font-size: 18px; color: var(--r8-muted); margin: 0 0 36px; }

.r8-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.r8-card { background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; padding: 26px; }
.r8-card h3 { margin: 0 0 10px; font-size: 20px; }
.r8-card p { margin: 0; color: var(--r8-muted); font-size: 16px; }

/* Product: AI I&E agent */
.r8-product { background: var(--r8-navy); color: #fff; border-radius: 16px; padding: 44px; }
.r8-pill { display: inline-block; background: rgba(0,210,255,.14); color: var(--r8-cyan); border: 1px solid rgba(0,210,255,.4); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.r8-product h2 { color: #fff; }
.r8-product p { color: #C9D2E3; font-size: 17px; margin: 0 0 18px; }
.r8-product .r8-btn { margin-top: 10px; }
.r8-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; margin: 8px 0 10px; }
.r8-product .r8-video-note { font-size: 14px; color: #8FA0BD; margin: 0 0 18px; }

/* Proof */
.r8-proof { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.r8-proof li { background: #fff; border: 1px solid var(--r8-line); border-left: 4px solid var(--r8-blue); border-radius: 10px; padding: 20px 22px; font-size: 17px; }
.r8-proof a { color: var(--r8-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.r8-proof li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Founder */
.r8-founder { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: start; }
.r8-founder img { width: 180px; height: 180px; object-fit: cover; border-radius: 14px; display: block; }
.r8-founder h3 { margin: 0 0 4px; font-size: 22px; }
.r8-founder .r8-role { color: var(--r8-muted); margin: 0 0 14px; }
.r8-founder p { margin: 0 0 12px; font-size: 17px; }
.r8-founder a { color: var(--r8-blue); font-weight: 600; text-decoration: none; }

/* Contact */
.r8-contact { text-align: center; }
.r8-contact .r8-lead { max-width: 760px; margin-left: auto; margin-right: auto; }
.r8-contact .r8-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.r8-contact a.r8-mail { color: var(--r8-blue); font-weight: 600; text-decoration: none; }

/* Footer */
.r8-footer { background: var(--r8-navy); color: #9AA6BF; padding: 40px 0; font-size: 14px; }
.r8-footer .r8-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.r8-footer img { height: 26px; width: auto; display: block; }
.r8-footer nav a { color: #C9D2E3; text-decoration: none; margin-left: 22px; }
.r8-footer nav a:first-child { margin-left: 0; }
.r8-footer nav a:hover { color: #fff; }
.r8-footer p { margin: 0 0 6px; }

@media (max-width: 860px) {
    .r8-grid3 { grid-template-columns: 1fr; }
    .r8-proof { grid-template-columns: 1fr; }
    .r8-founder { grid-template-columns: 1fr; }
    .r8-product { padding: 30px 24px; }
    .r8-brand img.r8-badge { display: none; }
}
@media (max-width: 480px) {
    .r8-header .r8-btn { padding: 9px 14px; font-size: 14px; }
    .r8-footer nav a { margin-left: 14px; }
}

/* Homepage hero on the old site shell: two-line headline, cyan accents */
.hero-single .hero-content { max-width: 960px; }
.hero-single h1 { font-size: 3.4rem; }
.hero-single .hero-intro { max-width: 700px; }
.hero-intro a.r8-accent-link { color: var(--cyan-accent, #00D2FF); text-decoration: none; }
.hero-intro a.r8-accent-link:hover { text-decoration: underline; }
@media (max-width: 1100px) {
    .r8-br-desktop { display: none; }
    .hero-single h1 { font-size: 2.8rem; }
}
@media (max-width: 600px) {
    .hero-single h1 { font-size: 2.2rem; }
}

/* Nav anchors: land section headings below the fixed nav */
section[id] { scroll-margin-top: 90px; }

/* Section labels, matching the old site's .section-header.left .section-label:
   primary blue with a short leading rule on light sections, cyan on dark. */
.r8-label { display: flex; align-items: center; gap: 0.7rem; color: var(--r8-blue); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.11em; margin: 0 0 0.9rem; }
.r8-label::before { content: ""; flex-shrink: 0; width: 26px; height: 2px; background: currentColor; opacity: 0.45; }
.r8-label-dark { color: var(--r8-cyan); }
.r8-product { position: relative; }
.r8-product .r8-pill { position: absolute; top: 40px; right: 44px; margin: 0; }
@media (max-width: 860px) {
    .r8-product .r8-pill { top: 26px; right: 24px; }
}

/* Track record numbers */
.r8-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 28px; }
.r8-stats div { background: var(--r8-navy); border-radius: 12px; padding: 22px; color: #C9D2E3; }
.r8-stats strong { display: block; color: var(--r8-cyan); font-size: 34px; line-height: 1.1; margin-bottom: 8px; }
.r8-stats span { font-size: 15px; line-height: 1.4; display: block; }
.r8-note { color: var(--r8-muted); font-size: 13px; margin: 16px 0 0; }
.r8-controls { row-gap: 20px; }
@media (max-width: 860px) {
    .r8-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Founder block restored from the old homepage (styles.css); LinkedIn link under the bio */
.founder-info a.r8-founder-link { display: inline-block; margin-top: 8px; color: var(--r8-blue); font-weight: 600; text-decoration: none; font-size: 15px; }
.founder-info a.r8-founder-link:hover { text-decoration: underline; }

/* Keep the restored founder section on the grey band and aligned with the r8 sections */
.section.r8-alt { background: var(--r8-soft); }
#about .container { max-width: var(--r8-max); padding-left: 24px; padding-right: 24px; }

.r8-proof li strong { display: block; font-size: 18px; margin-bottom: 6px; color: var(--r8-ink); }
.r8-proof li { font-size: 16px; color: var(--r8-muted); }

/* Closing CTA: make the inline "send us a message" link visible */
.cta-section .cta-email a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* "Verified by AWS" strip in the About section */
.r8-verified { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 36px 0 8px; padding: 18px 22px; background: #fff; border: 1px solid var(--r8-line); border-radius: 12px; }
.r8-verified-label { font-weight: 700; color: var(--r8-ink); font-size: 15px; margin-right: 4px; }
.r8-verified ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.r8-verified li { font-size: 14px; color: var(--r8-ink); background: var(--r8-soft); border: 1px solid var(--r8-line); border-radius: 999px; padding: 5px 12px; }
.r8-verified a { margin-left: auto; color: var(--r8-blue); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.r8-verified a:hover { text-decoration: underline; }
@media (max-width: 860px) { .r8-verified a { margin-left: 0; } }

/* Cyan accent phrase in headings on dark sections */
.r8-accent { color: var(--cyan-accent, #00D2FF); }

/* Controls: four cards in a 2x2 grid */
.r8-controls { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .r8-controls { grid-template-columns: 1fr; } }

/* Logo bar on phones: 2x2 grid so no logo sits alone on a line */
@media (max-width: 600px) {
    .credibility-bar .trust-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; justify-items: center; max-width: 320px; }
}

/* Controls: link to the trust page */
.r8-trust-link { margin: 24px 0 0; font-size: 16px; }
.r8-trust-link a { color: var(--r8-blue); font-weight: 600; text-decoration: none; }
.r8-trust-link a:hover { text-decoration: underline; }

/* Trust page: four information security cards as a 2x2 grid */
.def-grid.r8-def-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .def-grid.r8-def-2 { grid-template-columns: 1fr; } }

/* Hero spacing: more room between headline, intro and buttons */
.hero-single h1 { margin-bottom: 2rem; }
.hero-single .hero-intro { margin-bottom: 2.5rem; }

/* Avoid a single orphaned word on the last line of intros and paragraphs */
.hero-intro, .r8-lead, .r8-card p, .r8-product p, .cta-section p { text-wrap: pretty; }

/* /ie-call: the demo call on its own page */
.r8-call-wrap { max-width: 960px; }
.r8-call-wrap .r8-video { margin: 0 0 12px; }
.r8-call-notes { margin-top: 48px; text-align: left; }
.r8-call-pilot { margin-top: 48px; }