/* ============================================================
   CAVE & FIRE - Main Stylesheet
   ============================================================
   
   QUICK GUIDE — Search for these to jump to sections:
   
   [BRAND COLOURS]     — Change all site colours here
   [FONTS]             — Change fonts here
   [HEADER & NAV]      — Top navigation bar
   [HERO]              — Main landing banner + flame animation
   [HERO TEXT]          — "Endure" styling, tagline, description
   [BUTTONS]           — All button styles
   [PHILOSOPHY]        — "Built Different" section
   [PRODUCT CARDS]     — Product preview cards on landing page
   [PRODUCT PAGES]     — Individual product page layouts
   [SCREENSHOTS]       — Screenshot gallery grids
   [USE CASES]         — Use case cards
   [VIDEO]             — Video embed section
   [BUY SECTION]       — Pricing / purchase section
   [CONTACT]           — Contact page & form
   [WORK WITH US]      — Careers page
   [FOOTER]            — Footer
   [RESPONSIVE]        — Mobile / tablet breakpoints
   
   ============================================================ */


/* ==========================================================
   [BRAND COLOURS] — Change your brand palette here
   All colours used across the site reference these variables,
   so changing one here changes it everywhere.
   ========================================================== */
:root {
    /* Dark backgrounds (cave theme) */
    --cave-dark: #0d0d0f;       /* Darkest — main page background */
    --cave-medium: #1a1a1f;     /* Mid — alternate section backgrounds */
    --cave-light: #252530;      /* Lighter — card backgrounds, subtle areas */
    --cave-border: #35353f;     /* Border colour for cards, dividers */
    
    /* Fire / accent colours */
    --fire-primary: #e85d04;    /* Main orange — buttons, accents, borders */
    --fire-glow: #f48c06;       /* Lighter amber — hover states, highlights */
    --fire-ember: #dc2f02;      /* Deep red — gradients, secondary accent */
    
    /* Text colours */
    --stone-light: #e8e6e3;     /* Headings, bright text */
    --stone-medium: #a8a5a0;    /* Body text, paragraphs */
    --stone-muted: #6b6965;     /* Subtle text, captions, placeholders */
    
    /* [FONTS] — Change typefaces here */
    --font-display: 'Bebas Neue', sans-serif;   /* Headings font */
    --font-body: 'Source Sans 3', sans-serif;    /* Body / paragraph font */
    
    /* Animation speed for hover transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================
   RESET & BASE — Don't change unless you know what you're doing
   ========================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--cave-dark);
    color: var(--stone-light);
    line-height: 1.6;
    font-size: 16px;               /* Base font size — increase for larger text globally */
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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


/* ==========================================================
   TYPOGRAPHY — Heading sizes and paragraph defaults
   ========================================================== */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* clamp(min, preferred, max) — responsive font sizing */
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

p {
    color: var(--stone-medium);
    max-width: 65ch;                /* Limits paragraph width for readability */
}


/* ==========================================================
   LAYOUT — Page width and section spacing
   ========================================================== */
.container {
    width: 100%;
    max-width: 1200px;              /* Max page width — increase for wider layout */
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 6rem 0;               /* Vertical spacing between sections */
}


/* ==========================================================
   [HEADER & NAV] — Fixed top navigation bar
   ========================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(13, 13, 15, 0.95);    /* Semi-transparent dark bg */
    backdrop-filter: blur(10px);             /* Frosted glass blur effect */
    border-bottom: 1px solid var(--cave-border);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo — icon + text */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 40px;                    /* Logo icon size — change both width & height */
    height: 40px;
    background: linear-gradient(135deg, var(--fire-primary), var(--fire-ember));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--stone-light);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;             /* Logo text size */
    letter-spacing: 0.1em;
    color: var(--stone-light);     /* Logo text colour */
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;                    /* Space between nav items */
    list-style: none;
}

.nav-links a {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone-medium);     /* Nav link colour */
    transition: var(--transition-smooth);
    position: relative;
}

.nav-links a:hover {
    color: var(--fire-glow);       /* Nav link hover colour */
}

/* Underline animation on hover */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--fire-primary);    /* Underline colour */
    transition: var(--transition-smooth);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Dropdown menu */
.dropdown { position: relative; }

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-toggle::after {
    content: '';
    border: solid var(--stone-medium);
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    transition: var(--transition-smooth);
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(-135deg);
    border-color: var(--fire-glow);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 1rem;
    background: var(--cave-medium);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-smooth);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--cave-border);
    transition: var(--transition-smooth);
}

.dropdown-menu a:last-child { border-bottom: none; }

.dropdown-menu a:hover {
    background: var(--cave-light);
    color: var(--fire-glow);
    padding-left: 1.5rem;
}

/* Mobile hamburger toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--stone-light);
    transition: var(--transition-smooth);
}


/* ==========================================================
   [HERO] — Main landing banner with animated flames
   
   The hero uses layered backgrounds:
   1. Stable base image (always visible)
   2. Distorted fire layer (warps the flames in the image)
   3. Fine detail fire layer (subtle extra flicker)
   4. Firelight glow (warm light beaming over monitors)
   5. Gradient overlay (darkens edges for text readability)
   6. Ambient glow orbs (pulsing warm blobs)
   
   The SVG filters that drive the distortion are in index.html
   The JS that animates them is at the bottom of index.html
   ========================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    background: var(--cave-dark);
}

/* All background layers share this base — sets the hero image */
.hero-bg {
    position: absolute;
    inset: 0;
    background: url('images/hero.jpg') center/cover no-repeat;  /* ← Change hero image path here */
    pointer-events: none;
}

/* Layer 1: Stable base — always visible, no distortion */
.hero-bg-stable {
    z-index: 0;
}

/* Layer 2: Primary flame distortion — big lashing movement
   The mask-image controls WHERE the distortion appears:
   - 0% = top of image (full distortion on flames)
   - 42% = fades to invisible (no distortion on monitors/desk)
   Adjust these percentages to move the distortion boundary up/down */
.hero-bg-fire {
    z-index: 1;
    filter: url(#fire-distort);
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.8) 15%,
        rgba(0,0,0,0.3) 30%,
        rgba(0,0,0,0) 42%          /* ← Distortion cutoff — increase to push lower */
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.8) 15%,
        rgba(0,0,0,0.3) 30%,
        rgba(0,0,0,0) 42%
    );
    animation: fireBrightness 3s ease-in-out infinite;
}

/* Layer 3: Fine flame detail — tighter, subtler flicker */
.hero-bg-fire-fine {
    z-index: 2;
    filter: url(#fire-distort-fine);
    opacity: 0.4;                   /* ← Controls how visible this layer is (0-1) */
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.5) 15%,
        rgba(0,0,0,0) 35%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.5) 15%,
        rgba(0,0,0,0) 35%
    );
    animation: fireBrightnessFine 2.5s ease-in-out infinite;
}

/* Flame intensity pulsing */
@keyframes fireBrightness {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.92; }
    60% { opacity: 1; }
    80% { opacity: 0.96; }
}

@keyframes fireBrightnessFine {
    0%, 100% { opacity: 0.4; }
    25% { opacity: 0.5; }
    50% { opacity: 0.35; }
    75% { opacity: 0.45; }
}

/* Layer 4: Firelight glow — warm light beaming over the monitors
   This layer does NOT distort the image, just adds a warm colour wash.
   Change the rgba colours to adjust warmth/intensity.
   The "at X% Y%" controls where the glow is centred. */
.hero-firelight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 90% 50% at 50% 32%, rgba(244,140,6,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 35% at 45% 38%, rgba(232,93,4,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 25% at 55% 28%, rgba(255,200,60,0.08) 0%, transparent 50%);
    animation: firelightPulse 4s ease-in-out infinite;
}

/* Firelight flicker pattern — irregular pulse for realism */
@keyframes firelightPulse {
    0%, 100% { opacity: 0.7; }
    15% { opacity: 0.9; }
    35% { opacity: 0.6; }
    50% { opacity: 1; }
    65% { opacity: 0.75; }
    80% { opacity: 0.85; }
}

/* Layer 5: Gradient overlay — darkens left (for text) and right (for blending)
   Adjust the rgba alpha values (last number) to make sides darker/lighter.
   The percentages control where the gradient transitions happen. */
.hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: 
        linear-gradient(to right,
            rgba(13,13,15,0.88) 35%,    /* Left side — dark for text readability */
            rgba(13,13,15,0.15) 55%,    /* Middle — lets the image show through */
            rgba(13,13,15,0.8) 75%,     /* Right side starts darkening */
            rgba(13,13,15,1) 92%        /* Right edge — fully dark to blend with bg */
        ),
        linear-gradient(to top,
            rgba(13,13,15,0.4) 0%,      /* Bottom edge darkening */
            transparent 30%
        );
    pointer-events: none;
}

/* Layer 6: Ambient glow orbs — big soft pulsing blobs of warm colour */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);             /* ← Blur size — higher = softer glow */
    pointer-events: none;
    z-index: 2;
}

.hero-glow-1 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: 10%;
    background: rgba(232, 93, 4, 0.12);    /* Colour and intensity of glow */
    animation: glowPulse1 4s ease-in-out infinite;
}

.hero-glow-2 {
    width: 300px;
    height: 300px;
    top: 5%;
    right: 25%;
    background: rgba(244, 140, 6, 0.08);
    animation: glowPulse2 6s ease-in-out infinite;
}

@keyframes glowPulse1 {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes glowPulse2 {
    0%, 100% { opacity: 0.4; transform: scale(1) translateY(0); }
    50% { opacity: 0.8; transform: scale(1.1) translateY(-20px); }
}


/* ==========================================================
   [HERO TEXT] — Tagline, heading, "Endure" word, description
   ========================================================== */

/* Makes sure text sits above all animation layers */
.hero > .container {
    position: relative;
    z-index: 10;
}

.hero-content {
    position: relative;
    z-index: 10;
    animation: heroFadeIn 1.2s ease-out both;
}

/* Staggered fade-in entrance for hero text */
.hero-content .hero-tagline     { animation: heroFadeIn 1s ease-out 0.2s both; }
.hero-content h1                { animation: heroFadeIn 1s ease-out 0.4s both; }
.hero-content .hero-description { animation: heroFadeIn 1s ease-out 0.6s both; }

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* "Solid Structure • Forged from Fire" tagline above heading */
.hero-tagline {
    font-size: 0.9rem;             /* Tagline text size */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fire-glow);       /* Tagline colour — change to any colour */
    margin-bottom: 1.5rem;
}

.hero h1 {
    margin-bottom: 1.5rem;
}

/* The word "Endure" inside the h1 — styled via the <span> tag
   To change: edit color, font-weight, font-size below */
.hero h1 span {
    color: #000000;                 /* ← ENDURE text colour */
    font-weight: 700;              /* ← ENDURE bold (400=normal, 700=bold) */
    font-size: 1.15em;             /* ← ENDURE size relative to h1 (1em = same, 1.15em = 15% bigger) */
}

/* Hero description paragraph */
.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 550px;              /* Max width of description text */
}


/* ==========================================================
   [BUTTONS] — Primary (filled) and secondary (outline)
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;            /* Button padding — top/bottom  left/right */
    font-family: var(--font-body);
    font-size: 0.9rem;             /* Button text size */
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;            /* Button corner rounding */
    cursor: pointer;
    transition: var(--transition-smooth);
}

/* Primary button — solid filled */
.btn-primary {
    background: linear-gradient(135deg, var(--fire-primary), var(--fire-ember));
    color: var(--stone-light);
    box-shadow: 0 4px 20px rgba(232, 93, 4, 0.3);     /* Glow shadow */
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(232, 93, 4, 0.4);
}

/* Secondary button — outline/ghost */
.btn-secondary {
    background: transparent;
    color: var(--stone-light);
    border: 1px solid var(--cave-border);
}

.btn-secondary:hover {
    border-color: var(--fire-primary);
    color: var(--fire-glow);
}

/* Large button variant */
.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1rem;
}


/* ==========================================================
   [PHILOSOPHY] — "Built Different" section with 6 cards
   ========================================================== */
.philosophy {
    background: var(--cave-medium);
    position: relative;
}

/* Orange line at top of section */
.philosophy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fire-primary), transparent);
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));   /* Min card width */
    gap: 2.5rem;                    /* Gap between cards */
    margin-top: 3rem;
}

.philosophy-card {
    padding: 2rem;
    background: var(--cave-dark);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.philosophy-card:hover {
    border-color: var(--fire-primary);
    transform: translateY(-4px);    /* Lift on hover */
}

.philosophy-icon {
    width: 48px;                    /* Icon size */
    height: 48px;
    margin-bottom: 1.5rem;
    color: var(--fire-glow);       /* Icon colour */
}

.philosophy-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--stone-light);
}

.philosophy-card p {
    font-size: 0.95rem;
}


/* ==========================================================
   [PRODUCT CARDS] — Product preview cards on the landing page
   ========================================================== */
.products-preview {
    background: var(--cave-dark);
}

.products-preview .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.products-preview .section-header p {
    margin: 1rem auto 0;
}

.product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--cave-medium);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.product-card:hover {
    border-color: var(--fire-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Product image frame — controls the size/shape of the image area
   aspect-ratio sets the proportions. Change to 16/9, 1/1, etc.
   object-fit: contain = show full image; cover = fill & crop */
.product-card-image {
    aspect-ratio: 7/6;             /* ← Image frame proportions */
    background: var(--cave-dark);  /* Background colour behind image */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone-muted);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--cave-border);
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* ← contain = full image visible; cover = fills & crops */
}

.product-card-content {
    padding: 2rem;
}

.product-card h3 {
    margin-bottom: 0.75rem;
    color: var(--stone-light);
}

.product-card p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.product-card .btn {
    width: 100%;
    justify-content: center;
}


/* ==========================================================
   [PRODUCT PAGES] — Individual product page layouts
   (lattice-vision.html, lattice-command.html)
   ========================================================== */
.product-hero {
    padding-top: 120px;
    padding-bottom: 4rem;
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(232, 93, 4, 0.08) 0%, transparent 60%),
        var(--cave-dark);
}

.product-hero h1 { margin-bottom: 1rem; }

.product-hero .lead {
    font-size: 1.25rem;
    color: var(--stone-medium);
    max-width: 700px;
}

.product-content {
    background: var(--cave-medium);
}

.product-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--cave-border);
}

.product-section:last-child { border-bottom: none; }
.product-section h2 { margin-bottom: 2rem; }

.product-description {
    font-size: 1.05rem;
    line-height: 1.8;
}

.product-description p + p {
    margin-top: 1.5rem;
}


/* ==========================================================
   [SCREENSHOTS] — Screenshot gallery grid
   ========================================================== */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.screenshot {
    aspect-ratio: 16/10;           /* ← Screenshot frame shape */
    background: var(--cave-dark);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone-muted);
    font-size: 0.85rem;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.screenshot:hover {
    border-color: var(--fire-primary);
}

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


/* ==========================================================
   [USE CASES] — Use case cards with left border accent
   ========================================================== */
.use-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.use-case {
    padding: 1.5rem;
    background: var(--cave-dark);
    border-left: 3px solid var(--fire-primary);    /* ← Left accent bar colour */
    border-radius: 0 4px 4px 0;
}

.use-case h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--stone-light);
    text-transform: none;
    letter-spacing: 0;
}

.use-case p {
    font-size: 0.9rem;
}


/* ==========================================================
   [VIDEO] — Video embed section
   ========================================================== */
.video-section {
    background: var(--cave-dark);
}

.video-container {
    background: var(--cave-light);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    color: var(--stone-muted);
    margin-top: 2rem;
}


/* ==========================================================
   [BUY SECTION] — Pricing and purchase CTA
   ========================================================== */
.buy-section {
    background: linear-gradient(135deg, var(--cave-medium), var(--cave-dark));
    text-align: center;
}

.buy-section h2 { margin-bottom: 1rem; }
.buy-section p { margin: 0 auto 2rem; }

.price {
    font-family: var(--font-display);
    font-size: 3rem;               /* ← Price text size */
    color: var(--fire-glow);       /* ← Price colour */
    margin-bottom: 2rem;
}

.price span {
    font-size: 1.5rem;
    color: var(--stone-muted);     /* "USD" text colour */
}

/* ==========================================================
   [LAUNCH PROMO] — Grand opening celebration styles
   ========================================================== */

/* Site-wide launch banner */
.launch-banner {
    background: linear-gradient(90deg, #1a0a02, #2a0e04 30%, #1a0a02 70%, #1a0a02);
    text-align: center;
    padding: 14px 0;
    position: relative;
    z-index: 1001;
    overflow: hidden;
}

.launch-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(232,89,4,0.06) 50%, transparent 100%);
    pointer-events: none;
}

.launch-banner canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.launch-banner .marquee-track {
    position: relative;
    display: flex;
    width: max-content;
    animation: marqueeScroll 22s linear infinite;
}

.launch-banner .marquee-track p {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    margin: 0;
    letter-spacing: 0.15em;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--fire-ember), var(--fire-primary), var(--fire-glow), var(--fire-primary), var(--fire-ember));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

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

.launch-banner a {
    color: var(--fire-glow);
    text-decoration: underline;
    font-weight: 700;
}

/* Video nudge CTAs */
.video-nudge {
    text-align: center;
    padding: 1.25rem 1.5rem;
}

.video-nudge a {
    font-size: 0.8rem;
    color: var(--stone-muted);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
    font-style: italic;
}

.video-nudge a:hover {
    color: var(--fire-glow);
}

.video-nudge a .nudge-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.video-nudge a:hover .nudge-arrow {
    transform: translateX(3px);
}

/* Promo pricing block */
.promo-pricing {
    margin-bottom: 2rem;
}

.promo-pricing .price-original {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--stone-muted);
    text-decoration: line-through;
    opacity: 0.5;
    display: block;
    margin-bottom: 0.25rem;
}

.promo-pricing .price-intro {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--fire-glow);
    display: block;
    line-height: 1;
}

.promo-pricing .price-intro span {
    font-size: 1.5rem;
    color: var(--stone-muted);
}

.promo-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e8590c, #f48c06);
    color: #1a1a1a;
    font-family: var(--font-display);
    font-size: 1rem;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 140, 6, 0.4); }
    50% { box-shadow: 0 0 20px 4px rgba(244, 140, 6, 0.2); }
}

.promo-countdown {
    font-size: 0.85rem;
    color: var(--stone-muted);
    margin-top: 0.5rem;
}

/* Homepage launch hero section */
.launch-celebration {
    background: linear-gradient(135deg, rgba(232, 89, 12, 0.08), rgba(244, 140, 6, 0.04));
    border-top: 1px solid rgba(244, 140, 6, 0.2);
    border-bottom: 1px solid rgba(244, 140, 6, 0.2);
    text-align: center;
    padding: 3rem 0;
}

.launch-celebration h2 {
    color: var(--fire-glow);
    margin-bottom: 0.75rem;
}

.launch-celebration .launch-subtext {
    color: var(--stone-medium);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
}

.launch-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.launch-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(244, 140, 6, 0.2);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.launch-card h4 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--stone-light);
    margin-bottom: 1rem;
    text-transform: none;
    letter-spacing: 0;
}


/* ==========================================================
   [CONTACT] — Contact page layout and form styles
   ========================================================== */
.contact-hero {
    padding-top: 120px;
    padding-bottom: 4rem;
    background: linear-gradient(to bottom, rgba(10,12,16,0.55), rgba(10,12,16,0.85)), url('images/hero_old.jpg') center/cover no-repeat;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
}

.contact-content {
    background: var(--cave-medium);
    padding: 4rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;     /* Left info : right form ratio */
    gap: 4rem;
}

.contact-info h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.contact-info p { margin-bottom: 2rem; }
.contact-details { margin-top: 2rem; }

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--stone-medium);
}

.contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--fire-glow);       /* ← Contact icon colour */
}

/* Contact form */
.contact-form {
    background: var(--cave-dark);
    padding: 2.5rem;
    border-radius: 4px;
    border: 1px solid var(--cave-border);
}

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

.form-group label {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone-medium);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    background: var(--cave-medium);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    color: var(--stone-light);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--fire-primary);     /* ← Focus highlight colour */
}

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


/* ==========================================================
   [WORK WITH US] — Careers / positions page
   ========================================================== */
.careers-content {
    background: var(--cave-medium);
}

.careers-intro {
    max-width: 800px;
    margin-bottom: 4rem;
}

.careers-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.positions { margin-top: 3rem; }

.position-card {
    background: var(--cave-dark);
    border: 1px solid var(--cave-border);
    border-radius: 4px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: var(--transition-smooth);
}

.position-card:hover {
    border-color: var(--fire-primary);
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.position-card h3 { font-size: 1.25rem; }

.position-type {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fire-glow);               /* ← Badge text colour */
    padding: 0.35rem 0.75rem;
    background: rgba(232, 93, 4, 0.15);    /* ← Badge background */
    border-radius: 3px;
}

.position-card p { margin-bottom: 1.5rem; }


/* ==========================================================
   [FOOTER]
   ========================================================== */
footer {
    background: var(--cave-dark);
    border-top: 1px solid var(--cave-border);
    padding: 3rem 0 2rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.footer-links a {
    font-size: 0.85rem;
    color: var(--stone-muted);
    transition: var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--fire-glow);
}

.copyright {
    font-size: 0.85rem;
    color: var(--stone-muted);
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cave-border);
}


/* ==========================================================
   [RESPONSIVE] — Tablet and mobile breakpoints
   ========================================================== */

/* Tablet */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;    /* Stack contact form below info */
        gap: 3rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Mobile nav — slides down when hamburger tapped */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cave-medium);
        flex-direction: column;
        padding: 1.5rem;
        gap: 0;
        border-bottom: 1px solid var(--cave-border);
    }

    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }

    .nav-links a {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid var(--cave-border);
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 0;
        background: transparent;
        border: none;
    }

    .dropdown-menu a { padding-left: 1.5rem; }
    .nav-toggle { display: flex; }
    section { padding: 4rem 0; }

    .hero {
        min-height: auto;
        padding: 8rem 0 4rem;
    }

    /* Smaller glow orbs on mobile */
    .hero-glow-1 { width: 300px; height: 300px; }
    .hero-glow-2 { width: 200px; height: 200px; }
    
    /* Hide fine detail layer on mobile for performance */
    .hero-bg-fire-fine { display: none; }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .container { padding: 0 1.25rem; }
    .product-cards { grid-template-columns: 1fr; }
    .screenshot-gallery { grid-template-columns: 1fr; }
}