/* ============================================================================
   video-gate.css  —  Aurus.ai investors.html page styles
   ----------------------------------------------------------------------------
   Extracted from the inline <style> block in investors.html (2026-06-20) so no
   styling lives in the HTML. Covers: hero, investor product-demos showcase,
   thesis pillars, the access-gate modal (form + code steps + mobile sheet),
   and the YouTube lightbox. Brand tokens mirror main.css (--primary-navy
   #061c39 / --accent-yellow #ffc000).
   Linked from investors.html AFTER main.css/components.css so it can override.
   ============================================================================ */

/* ── Icon size guard (prevents unsized SVG/FA icons from ballooning, esp. on
   mobile or if this stylesheet loads late). Scoped to the demo/gate sections. */
.inv-demos svg, .inv-demos-access svg, .inv-demo-play svg { max-width: 100%; }
.inv-demos-access svg { width: 15px; height: 15px; flex: 0 0 auto; }
.inv-demo-play svg { width: 22px; height: 22px; }
.inv-thesis-ic { flex: 0 0 auto; }
.inv-thesis-ic i, .pv-gate-icon i { font-size: 1.15rem; line-height: 1; }
.pv-gate-icon { flex: 0 0 auto; }



/* Auto-adjusting hero section positioning */
.hero-compact {
    padding-top: 140px !important;
    padding-bottom: 60px !important;
    min-height: 75vh !important;
    display: flex !important;
    align-items: center !important;
}

.hero-content {
    width: 100%;
    max-width: 100%;
}

.hero-badge {
    margin-bottom: 2rem !important;
    margin-top: 1rem !important;
}

.hero-title {
    margin-bottom: 1.5rem !important;
}

.hero-description {
    margin-bottom: 2.5rem !important;
}

.hero-actions {
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
}

/* Fix for hero section positioning - add proper top padding */
.hero {
    padding-top: 120px !important; /* Add space for fixed navbar */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero {
        padding-top: 100px !important;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 90px !important;
    }
}

/* Investor Cards - Single Row Layout */
.investors-showcase .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.investors-showcase .product-card {
    padding: 2rem 1.5rem;
}

.investors-showcase .product-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
}

.investors-showcase .product-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.investors-showcase .product-description {
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .investors-showcase .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .investors-showcase .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Form Styles */
.contact-form-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0f172a;
    font-size: 0.95rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #FFC000;
}

.form-input.error,
.form-input[style*="border-color: rgb(220, 38, 38)"] {
    border-color: #dc2626 !important;
}

.form-input.error:focus {
    border-color: #dc2626 !important;
}


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

/* Phone Field with Country Code */
.phone-field-group {
    display: flex;
    gap: 10px;
}

.country-code-select {
    flex: 0 0 220px;
    padding: 0.875rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.3s ease;
    background: white;
    cursor: pointer;
}

.country-code-select:focus {
    outline: none;
    border-color: #FFC000;
}

.phone-input-field {
    flex: 1;
}

@media (max-width: 640px) {
    .phone-field-group {
        flex-direction: column;
    }
    
    .country-code-select {
        flex: 1;
        width: 100%;
    }
}


.form-submit {
    width: 100%;
    padding: 1rem;
    background: #FFC000;
    color: #061C39;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit:hover {
    background: #e6ac00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 192, 0, 0.3);
}

.form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    display: none;
}

.form-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Updated Footer Styles */
.footer {
    background: #0a1628;
    padding: 60px 0 30px;
    color: #e2e8f0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.footer-brand {
    flex: 0 0 200px;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 192, 0, 0.1);
    border-radius: 8px;
    color: #FFC000;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #FFC000;
    color: #061C39;
    transform: translateY(-2px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

/* Footer columns in single row with dividers */
.footer-links {
    display: flex;
    flex: 1;
    gap: 40px;
    align-items: flex-start;
}

.footer-column {
    flex: 1;
    position: relative;
}

.footer-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(226, 232, 240, 0.15);
}

.footer-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFC000;
    margin-bottom: 1rem;
    font-family: 'Source Sans Pro', sans-serif;
}

.footer-column a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #FFC000;
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 0.85rem;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: #cbd5e1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #FFC000;
}

.footer-copyright {
    color: #94a3b8;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   ============================================ */

/* Hero Actions Base - ensure flexbox */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Tablet - 992px */
@media (max-width: 992px) {
    .hero {
        padding-top: 100px !important;
        min-height: auto !important;
        padding-bottom: 60px !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important;
    }
    
    .hero-description {
        font-size: 1rem !important;
    }
    
    .contact-form-container {
        padding: 2rem;
    }
    
    .footer-content {
        flex-wrap: wrap;
    }
    
    .footer-brand {
        flex: 0 0 100%;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .footer-column {
        flex: 0 0 45%;
        margin-bottom: 20px;
    }
    
    .footer-column:not(:last-child)::after {
        display: none;
    }
}

/* Mobile - 768px */
@media (max-width: 768px) {
    .hero {
        padding-top: 90px !important;
        padding-bottom: 40px !important;
        text-align: center;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-description {
        font-size: 0.95rem !important;
        padding: 0 10px;
    }
    
    .hero-badge {
        margin-bottom: 1.5rem !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    .hero-actions .btn,
    .hero-actions a.btn {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
        text-align: center;
    }
    
    /* Stats Banner Mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .stat-item {
        padding: 15px !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    /* Section Header Mobile */
    .section-header {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .section-description {
        font-size: 0.9rem !important;
    }
    
    /* Contact Form Mobile */
    .contact-form-section {
        padding: 50px 0;
    }
    
    .contact-form-container {
        padding: 1.5rem;
        margin: 0 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    .form-input {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Footer Mobile */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-brand {
        flex: 0 0 100%;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }
    
    .footer-column {
        flex: 0 0 100%;
        text-align: center;
    }
    
    .footer-column a {
        display: inline-block;
        margin: 4px 8px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    /* Modal Mobile */
    .modal-content {
        margin: 20px;
        max-height: 85vh;
        width: calc(100% - 40px);
    }
}

/* Mobile Small - 480px */
@media (max-width: 480px) {
    .hero {
        padding-top: 80px !important;
        padding-bottom: 30px !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .hero-actions .btn,
    .hero-actions a.btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* Stats 2x2 grid on very small screens */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 10px;
    }
    
    .stat-number {
        font-size: 1.3rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
    }
    
    /* Contact form small */
    .contact-form-container {
        padding: 1.25rem;
    }
    
    .contact-form-container h2 {
        font-size: 1.3rem;
    }
    
    .form-submit {
        font-size: 1rem;
        padding: 0.875rem;
    }
    
    /* Investor cards small */
    .investors-showcase .product-card {
        padding: 1.5rem 1rem;
    }
    
    .investors-showcase .product-title {
        font-size: 1rem;
    }
    
    .investors-showcase .product-description {
        font-size: 0.85rem;
    }
    
    /* Section padding */
    .section {
        padding: 40px 0 !important;
    }
    
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   HERO ARCHITECTURE OVERRIDE — appended last for cascade priority

   Single-section hero. Same approach used on solutions.html and
   index.html. .hero-content becomes a 4-row grid:
     Row 1 = badge | Row 2 = title | Row 3 = description | Row 4 = buttons
   minmax minimums on desktop create consistent rhythm; mobile uses
   auto-fit rows for content-tight layout.

   This block is intentionally appended at the end of the stylesheet
   so it wins the cascade over any earlier hero rules in this file.
   All declarations use !important to also outrank earlier !important
   rules. The earlier rules can stay in place (we don't delete them)
   since this block reliably overrides them.

   Solves these recurring bugs:
     - navbar overlap (padding-top uses --navbar-h variable)
     - empty desktop "gap above badge" (no min-height forcing the box)
     - mobile button cut-off / hidden behind next section
     - cramped mobile buttons (now side-by-side with wrap fallback)
     - content-driven hero height across all viewport widths
   ──────────────────────────────────────────────────────────── */
:root {
    --navbar-h: 72px;       /* desktop fixed nav height */
}
@media (max-width: 768px) {
    :root { --navbar-h: 64px; }
}

/* Horizontal overflow guard: prevent any descendant from causing
   sideways scroll on mobile (safety net only — real responsive
   layout below is what does the heavy lifting). */
html, body {
    overflow-x: hidden;     /* fallback for older browsers */
    overflow-x: clip;       /* preferred — keeps position:sticky working */
    max-width: 100%;
}

/* Hero base: block layout, content-driven height, navbar clearance via var.
   Override any inherited flex+center on .hero from main.css. */
.hero {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    padding-top: calc(var(--navbar-h) + 2rem) !important;
    padding-bottom: clamp(3rem, 6vw, 5rem) !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
}

/* Inner content: 4-row CSS Grid where each row is one structural element.
   minmax(MIN, auto) gives a minimum visual rhythm but lets content grow. */
.hero-content {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-rows:
        minmax(50px,  auto)   /* badge */
        minmax(110px, auto)   /* title */
        minmax(90px,  auto)   /* description */
        minmax(60px,  auto) !important;  /* buttons */
    row-gap: 1.25rem !important;
    align-items: start !important;
    justify-content: start !important;
}
.hero-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: start !important;
}

/* Badge sizes to its text on desktop (anchored to the start/left of row 1).
   Kills any inherited block-level full-width behavior. */
.hero-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    justify-self: start !important;
    margin: 0 !important;
}

/* Fluid type — replaces per-breakpoint font-size hacks */
.hero-title {
    line-height: 1.2 !important;
    font-size: clamp(1.8rem, 4.2vw, 3rem) !important;
    margin: 0 !important;
}
.hero-description {
    font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.7 !important;
    max-width: 800px !important;
    margin: 0 !important;
}

/* Mobile rules (≤768px) */
@media (max-width: 768px) {
    .hero {
        text-align: center !important;
    }

    /* Defensively ensure the hero's navy background fills the full
       hero height even when content makes the section taller than
       main.css's default sizing. */
    .hero .hero-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Auto-fit rows on mobile — content-tight, no wasted space */
    .hero-content {
        grid-template-rows: auto auto auto auto !important;
        row-gap: 1rem !important;
    }

    /* Badge centered (instead of start-aligned) under text-align: center */
    .hero-badge {
        justify-self: center !important;
    }

    /* Buttons sit side-by-side on phones (not stacked).
       Smaller font/padding fits two CTAs within typical phone widths.
       flex-wrap is the safety net for very narrow viewports (<320px). */
    .hero-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .hero-actions .btn,
    .hero-actions a.btn,
    .hero-actions a {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 130px !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
        display: inline-flex !important;
    }
}
/* ════════════════════════════════════════════════════════════════════════
   INVESTOR PRODUCT-DEMOS SHOWCASE  (added 2026-06-13)
   High-impact band placed directly under the hero so investors see the live
   product walkthroughs first. Links to productVideos.html (which is gated and
   intentionally NOT in the public nav — this page is the deliberate doorway).
   ════════════════════════════════════════════════════════════════════════ */
.inv-demos {
    position: relative;
    padding: 84px 0 92px;
    background:
        radial-gradient(1100px 520px at 82% -12%, rgba(90,166,255,0.12), transparent 60%),
        radial-gradient(820px 460px at 0% 112%, rgba(255,192,0,0.10), transparent 55%),
        linear-gradient(180deg, #061327 0%, #061C39 55%, #081a36 100%);
    color: #e8eef7;
    overflow: hidden;
    border-top: 1px solid rgba(255,192,0,0.14);
}
.inv-demos-head { text-align: center; max-width: 780px; margin: 0 auto 18px; padding: 0 1rem; }
.inv-demos-overline {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
    color: #FFC000; margin-bottom: 1rem; padding: 0.45rem 1rem;
    border: 1px solid rgba(255,192,0,0.28); border-radius: 999px; background: rgba(255,192,0,0.10);
}
.inv-demos-title {
    font-family: 'Inter', sans-serif; font-weight: 800; line-height: 1.12;
    font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin: 0 0 14px;
    background: linear-gradient(90deg,#ffffff 0%,#cfe0fb 55%,#FFC000 130%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.inv-demos-sub { font-size: 1.06rem; line-height: 1.7; color: rgba(232,238,247,0.66); margin: 0 auto 14px; }
.inv-demos-access {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; color: rgba(232,238,247,0.5);
    margin-bottom: 44px;
}
.inv-demos-access svg { width: 15px; height: 15px; color: #FFC000; }

.inv-demos-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    max-width: 1120px; margin: 0 auto 44px; padding: 0 24px;
}
.inv-demo-card {
    display: block; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, #0d1f3d 0%, #081a35 100%);
    border: 1px solid rgba(148,176,214,0.16); border-radius: 16px; overflow: hidden;
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.inv-demo-card:hover {
    transform: translateY(-7px); border-color: rgba(255,192,0,0.4);
    box-shadow: 0 22px 56px rgba(0,0,0,0.45);
}
.inv-demo-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #04101f; }
.inv-demo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display:block; }
.inv-demo-card:hover .inv-demo-thumb img { transform: scale(1.05); }
.inv-demo-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,28,57,0.05), rgba(6,28,57,0.5)); }
.inv-demo-play {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:60px; height:60px; border-radius:50%; background:rgba(255,192,0,0.92);
    display:flex; align-items:center; justify-content:center; z-index:2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.inv-demo-play svg { width:22px; height:22px; color:#061C39; margin-left:3px; }
.inv-demo-card:hover .inv-demo-play { transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 0 9px rgba(255,192,0,0.14); }
.inv-demo-body { padding: 18px 18px 20px; }
.inv-demo-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:10px; }
.inv-demo-product {
    font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
    color:#061C39; background:linear-gradient(135deg,#FFC000,#ffd24d); padding:4px 9px; border-radius:5px;
}
.inv-demo-seg { font-size:0.68rem; font-weight:700; color:#5aa6ff; }
.inv-demo-name { font-family:'Inter',sans-serif; font-size:1.04rem; font-weight:700; line-height:1.3; color:#fff; margin:0; }

.inv-demos-cta { text-align: center; }
.inv-demos-cta .btn { font-size: 1.05rem; }

@media (max-width: 992px) {
    .inv-demos-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 768px) {
    .inv-demos { padding: 60px 0 68px; }
    .inv-demos-access { margin-bottom: 32px; }
}
/* ── Investor thesis pillars (qualitative, no metrics) ── */
.inv-thesis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    max-width: 1120px; margin: 8px auto 40px; padding: 0 24px;
}
.inv-thesis-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(148,176,214,0.16);
    border-radius: 14px; padding: 26px 24px;
}
.inv-thesis-ic {
    width: 46px; height: 46px; border-radius: 11px; margin-bottom: 16px;
    background: rgba(255,192,0,0.10); border: 1px solid rgba(255,192,0,0.28);
    display: flex; align-items: center; justify-content: center;
}
.inv-thesis-ic i { color: #FFC000; font-size: 1.15rem; }
.inv-thesis-card h3 { font-family: 'Inter',sans-serif; font-size: 1.12rem; font-weight: 700; color: #fff; margin: 0 0 10px; }
.inv-thesis-card p { font-size: 0.92rem; line-height: 1.65; color: rgba(232,238,247,0.62); margin: 0; }
.inv-demos-watch-cue {
    text-align: center; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
    color: rgba(232,238,247,0.7); margin: 4px auto 26px;
}
.inv-demo-card.has-video { cursor: pointer; }
.inv-demo-card.has-video:focus-visible { outline: 3px solid #FFC000; outline-offset: 3px; }
@media (max-width: 992px) { .inv-thesis { grid-template-columns: 1fr; max-width: 460px; } }

/* ════════════════════════════════════════════════════════════════════════
   Recoloured border/caption accents to Aurus gold.
   ════════════════════════════════════════════════════════════════════════ */
#yt-overlay {
    display: none; position: fixed; inset: 0; z-index: 9700;
    background: rgba(2,8,18,0.62);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 16px;
}
#yt-overlay.open { display: flex; }
#yt-box {
    position: relative; width: min(880px, 94vw);
    background: #000;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--pv-gold);
    box-shadow: 0 40px 120px rgba(0,0,0,0.9), 0 0 22px rgba(255,192,0,0.20);
    animation: ytCin 0.28s cubic-bezier(.25,.8,.25,1);
}
@keyframes ytCin { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
#yt-ratio { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
#yt-player-div { position: absolute; inset: 0; }
#yt-player-div iframe { position:absolute;inset:0;width:100%!important;height:100%!important;border:none; }
#yt-spin { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:2; }
#yt-spin.hide { display:none; }
.yt-ring {
    width:46px;height:46px;border-radius:50%;
    border:3px solid rgba(255,192,0,0.14);
    border-top-color:rgba(255,192,0,0.75);
    animation:ytSpin 0.75s linear infinite;
}
@keyframes ytSpin { to{transform:rotate(360deg)} }
#yt-fallback {
    position:absolute;inset:0;display:none;
    align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:3;background:#0a0a0a;
}
#yt-fallback.show { display:flex; }
#yt-fb-bg { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.18;filter:blur(4px); }
.yt-fb-body { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px; }
.yt-fb-body p { color:rgba(255,255,255,0.65);font-size:0.9rem;line-height:1.5;margin:0;max-width:340px; }
.yt-fb-body strong { color:#fff;display:block;font-size:1rem;margin-bottom:2px; }
.yt-fb-watch {
    display:inline-flex;align-items:center;gap:9px;background:#ff0000;color:#fff;
    font-weight:700;font-size:0.95rem;padding:13px 32px;border-radius:999px;text-decoration:none;
    box-shadow:0 8px 28px rgba(255,0,0,0.45);transition:background 0.15s,transform 0.15s;
}
.yt-fb-watch:hover { background:#cc0000;transform:translateY(-2px); }
#yt-x {
    position:absolute;top:14px;right:14px;z-index:10;
    width:38px;height:38px;border-radius:50%;
    background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.78);font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);
    transition:background 0.15s,color 0.15s,transform 0.15s;
}
#yt-x:hover { background:rgba(255,255,255,0.18);color:#fff;transform:rotate(90deg) scale(1.1); }
#yt-caption {
    padding:13px 18px 15px;background:#000;
    border-top: 1px solid rgba(255,192,0,0.25);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#yt-cap-meta { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
#yt-cap-tags { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
#yt-cap-product {
    font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--pv-navy);background:var(--pv-gold);padding:2px 7px;border-radius:4px;
}
#yt-cap-version { font-size:0.66rem;font-weight:700;color:rgba(90,166,255,0.95); }
#yt-cap-title { font-size:0.84rem;font-weight:600;color:rgba(255,255,255,0.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#yt-cap-yt {
    display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:700;
    color:rgba(255,255,255,0.32);text-decoration:none;white-space:nowrap;flex-shrink:0;transition:color 0.15s;
}
#yt-cap-yt:hover { color:#ff4444; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pv-gallery { padding: 60px 0 72px; }
    .pv-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 18px; }
    .pv-section-header { margin-bottom: 40px; }
    #yt-caption { flex-direction: column; align-items: flex-start; gap: 8px; }
    #yt-cap-title { white-space: normal; }
}
@media (max-width: 480px) {
    .pv-play { width: 60px; height: 60px; }
    .pv-play i { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   EMAIL GATE  — verify an email (6-digit code) before the videos unlock.
   One verification unlocks all videos for the whole browser-tab session.
   ════════════════════════════════════════════════════════════════════════ */
#pv-gate-overlay {
    display: none; position: fixed; inset: 0; z-index: 9800;
    background: rgba(2,8,18,0.78); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 16px;
}
#pv-gate-overlay.open { display: flex; }
#pv-gate-box {
    width: min(760px, 95vw);
    max-height: 90vh;                 /* never taller than the viewport */

    display: flex; flex-direction: column;  /* head fixed, body scrolls, foot fixed */
    background: linear-gradient(160deg, #0d1f3d 0%, #081a35 100%);
    border: 1px solid var(--pv-border, rgba(255,192,0,0.16));
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 40px 110px rgba(0,0,0,0.7), 0 0 22px rgba(255,192,0,0.10);
    animation: pvGateIn 0.3s cubic-bezier(.34,1.4,.64,1);
    color: #e8eef7;
}
@keyframes pvGateIn { from{opacity:0;transform:scale(.94) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }
#pv-gate-box.pv-narrow { width: min(440px, 95vw); transition: width 0.25s ease; }
.pv-gate-head { padding: 22px 26px 0; text-align: center; flex: 0 0 auto; }
.pv-gate-icon {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
    background: rgba(255,192,0,0.12); border: 1px solid rgba(255,192,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
.pv-gate-icon i { font-size: 1.15rem; color: #FFC000; }
.pv-gate-head h3 { font-family: 'Inter',sans-serif; font-size: 1.18rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.pv-gate-head p { font-size: 0.86rem; line-height: 1.5; color: rgba(232,238,247,0.62); margin: 0; }
.pv-gate-body { padding: 18px 26px 22px; flex: 1 1 auto; overflow-y: auto; }
.pv-gate-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(232,238,247,0.55); margin: 0 0 8px; }
.pv-gate-input {
    width: 100%; box-sizing: border-box; padding: 10px 13px;
    background: rgba(255,255,255,0.04); border: 1.5px solid rgba(148,176,214,0.22);
    border-radius: 9px; color: #fff; font-size: 0.95rem; font-family: 'Inter',sans-serif;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pv-gate-input:focus { outline: none; border-color: #FFC000; background: rgba(255,255,255,0.06); }
.pv-gate-input::placeholder { color: rgba(232,238,247,0.3); }
#pv-gate-code {
    text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.5em;
    padding-left: 0.5em; /* visually center the spaced text */
}
.pv-gate-btn {
    width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: 9px;
    background: #FFC000; color: #061C39; font-size: 0.98rem; font-weight: 800; cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.pv-gate-btn:hover:not(:disabled) { background: #ffd24d; transform: translateY(-1px); }
.pv-gate-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pv-gate-msg { min-height: 16px; margin: 10px 2px 0; font-size: 0.82rem; line-height: 1.45; }
.pv-gate-msg.err { color: #ff8585; }
.pv-gate-msg.ok  { color: #6ee7a8; }
.pv-gate-sub {
    margin: 14px 0 0; text-align: center; font-size: 0.82rem; color: rgba(232,238,247,0.45);
}
.pv-gate-sub a { color: #FFC000; cursor: pointer; text-decoration: none; font-weight: 600; }
.pv-gate-sub a.disabled { color: rgba(232,238,247,0.3); cursor: default; pointer-events: none; }
.pv-gate-spin {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(6,28,57,0.25); border-top-color: #061C39;
    animation: ytSpin 0.7s linear infinite; display: inline-block;
}
.pv-gate-foot {
    padding: 12px 26px; border-top: 1px solid rgba(148,176,214,0.12); flex: 0 0 auto;
    font-size: 0.72rem; color: rgba(232,238,247,0.4); text-align: center; line-height: 1.5;
}
.pv-gate-step { display: none !important; }
.pv-gate-step.active { display: block !important; }
/* Code step has little content — keep it compact and centered so the
   full-width form layout doesn't stretch these buttons across the wide box. */
#pv-gate-step-code { max-width: 380px; margin: 0 auto; }
#pv-gate-step-code .pv-gate-btn { margin-top: 14px; }
@media (max-width: 480px) {
    #pv-gate-code { letter-spacing: 0.35em; font-size: 1.3rem; }
    .pv-gate-head, .pv-gate-body { padding-left: 18px; padding-right: 18px; }
}
/* ── Investor intake form inside the gate modal ── */
#pv-gate-step-email .pv-form-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin-bottom: 2px;
}
.pv-field { display: flex; flex-direction: column; }
.pv-field.pv-col-2 { grid-column: span 2; }
.pv-field.pv-col-3 { grid-column: 1 / -1; }
.pv-field .pv-gate-label { margin-bottom: 5px; font-size: 0.72rem; }
.pv-field-hint { font-size: 0.74rem; line-height: 1.4; color: rgba(232,238,247,0.5); margin: 5px 2px 0; }
.pv-field-hint b { color: #FFC000; font-weight: 700; }
.pv-phone-row { display: flex; gap: 8px; }
.pv-phone-country { flex: 0 0 130px; max-width: 130px; padding-right: 30px; }
.pv-phone-number { flex: 1 1 auto; min-width: 0; }
select.pv-gate-input { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFC000' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
select.pv-gate-input option { background: #0d1f3d; color: #e8eef7; }
.pv-gate-textarea { min-height: 60px; resize: vertical; font-family: inherit; line-height: 1.45; }
.pv-phone-number.pv-invalid { border-color: #ff8585; }
@media (max-width: 680px) {
    #pv-gate-step-email .pv-form-grid { grid-template-columns: 1fr 1fr; }
    .pv-field.pv-col-2, .pv-field.pv-col-3 { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
    #pv-gate-step-email .pv-form-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   GATE MODAL — header band + sticky action bar + see-through backdrop
   (matches the demo-modal design language). Added 2026-06-20.
   ============================================================================ */

/* Backdrop: semi-transparent so the page shows through (overlay, not takeover) */
#pv-gate-overlay {
    background: rgba(4, 12, 26, 0.62) !important;
    backdrop-filter: blur(3px);
}

/* Fixed header band with logo + close (light band so the navy logo reads) */
#pv-gate-box .pv-gate-bar {
    flex: 0 0 auto;
    display: flex !important; align-items: center; justify-content: space-between;
    background: #061c39 !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #F5A623;
}
#pv-gate-box .pv-gate-logo {
    height: 26px !important; width: auto !important; max-height: 26px !important;
    max-width: 170px !important; object-fit: contain; display: block !important;
}
#pv-gate-box .pv-gate-close {
    width: 34px !important; height: 34px !important; flex: 0 0 auto; padding: 0 !important;
    border: none !important; border-radius: 8px !important; cursor: pointer;
    background: rgba(6,28,57,0.06) !important; color: #061C39 !important;
    font-size: 24px !important; line-height: 1 !important; font-weight: 400;
    display: flex !important; align-items: center; justify-content: center;
    -webkit-appearance: none; appearance: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#pv-gate-box .pv-gate-close:hover { background: rgba(6,28,57,0.12) !important; color: #061C39 !important; transform: rotate(90deg); }

/* Trim the head now that the band sits above it */
.pv-gate-head { padding-top: 16px; }

/* Action bar: sits at the bottom of the form content (not pinned). */
.pv-gate-actions {
    margin: 18px 0 0;
    padding: 0;
    text-align: center;
}
.pv-gate-actions .pv-gate-btn {
    margin-top: 0;
    width: auto;                  /* slim — not full width */
    min-width: 220px;
    display: inline-flex;
    padding-left: 32px; padding-right: 32px;
}
.pv-gate-actions .pv-gate-msg { margin-bottom: 0; }

/* Mobile: bottom-sheet — slides up, page peeks at the top, sticky button bar */
@media (max-width: 600px) {
    #pv-gate-overlay {
        align-items: flex-end;        /* sheet sits at the bottom */
        justify-content: center;
        padding: 0;
    }
    #pv-gate-box,
    #pv-gate-box.pv-narrow {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 92dvh;            /* leave a strip of dimmed page above */
        border-radius: 18px 18px 0 0; /* rounded top like an iOS sheet */
        border-left: none; border-right: none; border-bottom: none;
        animation: pvSheetUp 0.32s cubic-bezier(.25,.9,.3,1);
    }
    .pv-gate-logo { height: 24px; }
}
@keyframes pvSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@supports not (height: 92dvh) {
    @media (max-width: 600px) {
        #pv-gate-box, #pv-gate-box.pv-narrow { max-height: 92vh; }
    }
}

/* ============================================================================
   GATE v2 — welcome banner, restricted notice, personalized video greeting bar
   ============================================================================ */
.pv-gate-welcome {
    background: rgba(255,192,0,0.08); border: 1px solid rgba(255,192,0,0.22);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
    font-size: 0.88rem; line-height: 1.5; color: #F5A623;
}
.pv-gate-restricted {
    text-align: center; padding: 14px 6px 4px;
}
.pv-gate-restricted i { font-size: 2rem; color: #FFC000; margin-bottom: 12px; display: block; }
.pv-gate-restricted p { font-size: 0.95rem; line-height: 1.6; color: rgba(232,238,247,0.8); margin: 0; }
.pv-gate-restricted a { color: #FFC000; text-decoration: none; font-weight: 600; }

/* Personalized greeting bar atop the video modal */
#yt-greet {
    display: flex; align-items: center; gap: 12px;
    background: #061c39; border-bottom: 1px solid #F5A623;
    padding: 11px 56px 11px 16px;   /* right pad clears the ✕ */
    border-radius: 12px 12px 0 0;
    font-size: 0.9rem; color: #e8eef7; font-weight: 600;
}
#yt-greet-text { flex: 1 1 auto; }
/* OK button — bottom bar of the video modal */
#yt-okbar {
    background: #061c39; border-top: 1px solid rgba(148,176,214,0.16);
    padding: 12px 16px; text-align: center; border-radius: 0 0 12px 12px;
}
#yt-ok {
    border: none; cursor: pointer; min-width: 160px;
    background: #FFC000; color: #061C39; font-weight: 800;
    padding: 11px 30px; border-radius: 9px; font-size: 0.95rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
#yt-ok:hover { background: #ffd24d; transform: translateY(-1px); }

/* Right-click deterrent: a thin transparent strip over the top of the player
   where YouTube shows its title/share chrome, so it can't be clicked/copied.
   Kept short so the play/pause/scrub controls below remain usable. */
#yt-guard {
    position: absolute; top: 0; left: 0; right: 0; height: 64px;
    z-index: 5; background: transparent; cursor: default;
}
@media (max-width: 600px) {
    #yt-greet { font-size: 0.8rem; padding: 9px 50px 9px 12px; }
    #yt-ok { padding: 10px 24px; min-width: 140px; }
    #yt-guard { height: 48px; }
}

/* ── Stage 0 (identify): slim, single-column, centered — not the wide 3-col form ── */
#pv-gate-step-identify .pv-form-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
    gap: 12px;
}
#pv-gate-step-identify .pv-gate-btn { margin-left: auto; margin-right: auto; }