:root {
    --bg-color: #050505;
    --text-main: #f0f0f0;
    --text-muted: #a0a0a0;
    --accent-primary: #8a2be2; /* Neon Purple */
    --accent-secondary: #00d2ff; /* Deep blue/cyan */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* VOX paper/ink palette — matches the .vox-text wordmark */
    --vox-gold: #c9a227;
    --vox-cream: #e8dcb4;
    --vox-ink: #17120a;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Stop iOS inflating text when the phone rotates to landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Media never breaks the layout */
img, video {
    max-width: 100%;
}

/* Typography */
h1, h2, h3, .logo {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1 {
    /* vw term carries the scaling; the old 3rem floor was too big for phones */
    font-size: clamp(2.25rem, 7vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.gradient-text {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

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

.section {
    padding: 6rem 0;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
}

.btn-primary.sm {
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

.btn-primary.lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* Navbar */
.navbar.floating-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 35, 45, 0.7); /* distinct bluish-grey color */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.navbar .logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
}

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

.nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

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

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    /* svh tracks the visible area as mobile browser chrome hides/shows */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: -1;
    /* Adding a subtle zoom animation */
    animation: slowZoom 20s infinite alternate linear;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.hero-content {
    max-width: 800px;
    padding: 0 2rem;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
}

.stat {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.stat .highlight {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-secondary);
    font-family: var(--font-heading);
}

/* Split Layout */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mockup-img, .styles-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.5s ease;
}

.mockup-img:hover, .styles-img:hover {
    transform: scale(1.02);
}

/* Features (Motion Styles) */
.styles-preview {
    margin: 3rem 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.styles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.style-badge {
    padding: 0.8rem 2rem;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Base distinct hover effect will be handled by color classes below */

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.step-card {
    position: relative;
    padding-top: 3rem;
}

.step-num {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    font-family: var(--font-heading);
}

/* Pricing */
.pricing-card {
    max-width: 500px;
    margin: 0 auto;
    padding: 3rem;
}

.pricing-card .price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.features-list {
    list-style: none;
    text-align: left;
    margin: 2rem 0;
}

.features-list li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

/* Footer */
footer {
    border-top: 1px solid var(--glass-border);
    padding: 2rem 0;
    margin-top: 4rem;
}

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

.footer-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* Animations */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* Responsive */
@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
    
    /* .nav-links collapses into the toggle menu — see "Mobile Navigation" below */

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* --- New VOX Styles --- */
.vox-text {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #d8b878;
}

/* VOX text: yellowish-brown paper color, Times New Roman, italic - used EVERYWHERE */
.vox-text {
    color: #c9a227;
    background: linear-gradient(135deg, #c9a227, #e8c060, #a07820, #d4b44a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    animation: voxShimmer 4s ease-in-out infinite;
    display: inline-block;
}
.vox-text-inline {
    color: #c9a227;
    background: linear-gradient(135deg, #c9a227, #e8c060, #a07820);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    animation: voxShimmer 4s ease-in-out infinite;
}
@keyframes voxShimmer {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.boil-effect {
    display: inline-block;
    animation: boiling 0.2s infinite alternate;
}

@keyframes boiling {
    0% { filter: url(#boil); }
    100% { filter: none; }
}

.film-grain {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.06;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
}

/* =============================================
   HERO MOTION EFFECTS - VOX STYLE
   ============================================= */

/* Parallax background container */
.hero-parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Ink blobs - drifting organic shapes */
.ink-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.12;
    animation: blobDrift 20s ease-in-out infinite;
    pointer-events: none;
}
.blob-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #c9a227 0%, transparent 70%);
    top: -100px; left: -150px;
    animation-delay: 0s;
}
.blob-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #7928ca 0%, transparent 70%);
    top: 20%; right: -100px;
    animation-delay: -7s;
    animation-duration: 25s;
}
.blob-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #00d2ff 0%, transparent 70%);
    bottom: 0; left: 40%;
    animation-delay: -13s;
    animation-duration: 18s;
}
@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(40px, -30px) scale(1.1); }
    66%       { transform: translate(-30px, 40px) scale(0.95); }
}

/* Ink tear / ripped edge effect */
.ink-tear {
    position: absolute;
    top: 0;
    width: 160px;
    height: 100%;
    pointer-events: none;
    opacity: 0.35;
}
.tear-left {
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100%25'%3E%3Cpath d='M0 0 Q40 80 20 160 Q60 240 10 320 Q50 400 0 480 Q40 560 20 640 Q60 720 0 800 L0 0Z' fill='%23c9a22788'/%3E%3C/svg%3E") left/cover no-repeat;
    animation: tearShift 8s ease-in-out infinite;
}
.tear-right {
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100%25'%3E%3Cpath d='M160 0 Q120 80 140 160 Q100 240 150 320 Q110 400 160 480 Q120 560 140 640 Q100 720 160 800 L160 0Z' fill='%237928ca88'/%3E%3C/svg%3E") right/cover no-repeat;
    animation: tearShift 10s ease-in-out infinite reverse;
}
@keyframes tearShift {
    0%, 100% { transform: scaleY(1) translateY(0); }
    50%       { transform: scaleY(1.05) translateY(-10px); }
}

/* GIS / Map grid scanline overlay */
.gis-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 162, 39, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 39, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gisShift 30s linear infinite;
}
.gis-grid::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.8), rgba(0, 210, 255, 0.8), transparent);
    animation: scanLine 4s linear infinite;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.6), 0 0 30px rgba(0, 210, 255, 0.3);
}
@keyframes gisShift {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}
@keyframes scanLine {
    0%   { top: -3px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Floating paper fragments */
.paper-fragment {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    animation: paperFloat 12s infinite linear;
    z-index: 2;
}
.paper-fragment::before {
    content: '';
    display: block;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.3);
    transform: rotate(var(--rot, 15deg));
    backdrop-filter: blur(2px);
}
.frag-1 { --rot: 12deg;  left: 8%;  top: 20%; animation-delay: 0s;   }
.frag-2 { --rot: -25deg; left: 78%; top: 35%; animation-delay: 3s;   }
.frag-3 { --rot: 38deg;  left: 20%; top: 65%; animation-delay: 6s;   }
.frag-4 { --rot: -10deg; left: 60%; top: 15%; animation-delay: 9s;   }
.frag-1::before { width: 80px; height: 50px; }
.frag-2::before { width: 50px; height: 70px; }
.frag-3::before { width: 100px; height: 40px; }
.frag-4::before { width: 60px; height: 90px; }
@keyframes paperFloat {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    10%  { opacity: 1; }
    50%  { transform: translateY(-80px) rotate(180deg); }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-160px) rotate(360deg); }
}

/* Ensure hero content stays above all parallax layers */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 800px;
    padding: 0 2rem;
}

/* Animated Border Button */
.animated-border {
    position: relative;
    background: transparent;
    border: none;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    z-index: 1;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: linear-gradient(90deg, #050505, #111);
    z-index: -1;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.animated-border::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, var(--accent-primary) 30%, var(--accent-secondary) 70%, transparent 100%);
    animation: rotate-border 4s linear infinite;
    z-index: -2;
}

.animated-border:hover::before {
    background: linear-gradient(90deg, #111, #222);
}

.animated-border:hover::after {
    background: conic-gradient(from 0deg, transparent 0%, #ff4081 30%, #00d2ff 70%, transparent 100%);
}

@keyframes rotate-border {
    100% { transform: rotate(360deg); }
}

/* Brand Marquee */
.brand-marquee {
    padding: 3rem 0;
    overflow: hidden;
    background: #020202;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee 20s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
    gap: 4rem;
    padding: 0 2rem;
}

.marquee-content img {
    height: 40px;
    width: 120px; /* added width so broken images don't collapse */
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.3s;
}

.marquee-content img:hover {
    opacity: 1;
}

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

/* Demo Videos Area */
.demo-videos {
    background: #000;
}

.video-grid {
    display: grid;
    /* min() stops the track forcing 300px on narrower phones */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.desktop-frame {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    text-align: left;
}

.frame-header {
    background: #2a2a2a;
    padding: 0.8rem;
    display: flex;
    align-items: center;
}

.frame-header .dots {
    display: flex;
    gap: 6px;
}

.frame-header .dots span {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ff5f56;
}

.frame-header .dots span:nth-child(2) { background: #ffbd2e; }
.frame-header .dots span:nth-child(3) { background: #27c93f; }

.video-wrapper {
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- New Styles for Iteration 2 --- */

/* 1. Illuminated Text */
.illuminated-text {
    background: linear-gradient(90deg, #ff007f, #7928ca, #00d2ff, #ff007f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shine 3s linear infinite;
    display: inline-block;
}

@keyframes shine {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 2. Dynamic Background (Starfield/Particles) */
.dynamic-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #020202;
    overflow: hidden;
    z-index: -2;
}

/* Using pre-compiled CSS shadows for stars since we don't have SCSS processor here.
   We'll use a simple CSS trick with a large box-shadow or background pattern. */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
}
.stars {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: zoom 10s infinite alternate;
    opacity: 0.5;
}
.stars2 {
    background-image: 
        radial-gradient(3px 3px at 50px 50px, #ff007f, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 120px 150px, #00d2ff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: zoom 15s infinite alternate-reverse;
    opacity: 0.3;
}
.stars3 {
    background: radial-gradient(circle at center, rgba(138, 43, 226, 0.1) 0%, transparent 60%);
    width: 200%; height: 200%;
    top: -50%; left: -50%;
    animation: floatOrb 20s infinite linear;
}

@keyframes zoom {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes floatOrb {
    0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}

/* 3. Showcase Blocks */
.showcase {
    background: #050505;
}
.showcase-row {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-bottom: 8rem;
}
.showcase-row.reverse {
    flex-direction: row-reverse;
}
.showcase-text {
    flex: 1;
    text-align: left;
}
.showcase-image {
    flex: 1.2;
}
.tag {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent-secondary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}
.tag .dot {
    width: 8px; height: 8px; 
    border-radius: 50%; 
    background: var(--accent-secondary);
    box-shadow: 0 0 10px var(--accent-secondary);
}
.tag .dot.green { 
    background: #00ff88; box-shadow: 0 0 10px #00ff88; color: #00ff88; 
}
.tag .dot.purple { 
    background: #b026ff; box-shadow: 0 0 10px #b026ff; color: #b026ff; 
}
.tag .icon {
    background: rgba(0, 210, 255, 0.2);
    color: var(--accent-secondary);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
}

.neon-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
    transition: all 0.5s ease;
}
.neon-card img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}
.neon-card:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.3), inset 0 0 20px rgba(0, 210, 255, 0.1);
    transform: translateY(-8px);
}
.neon-card:hover img {
    transform: scale(1.05);
}

/* 4. Tutorial Section */
.tutorial-section {
    background: #020202;
    padding-top: 2rem;
    padding-bottom: 6rem;
}
.tutorial-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.tutorial-text {
    margin-bottom: 3rem;
}
.tutorial-text .tag {
    justify-content: center;
}
.tutorial-video {
    width: 100%;
}
.browser-header {
    background: #1a1a1a;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}
.browser-header .dots {
    display: flex; gap: 6px; margin-right: 20px;
}
.browser-header .dots span {
    width: 12px; height: 12px; border-radius: 50%; background: #ff5f56;
}
.browser-header .dots span:nth-child(2) { background: #ffbd2e; }
.browser-header .dots span:nth-child(3) { background: #27c93f; }
.url-bar {
    background: #000;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-family: monospace;
    color: #888;
    font-size: 0.85rem;
    flex: 1;
    text-align: center;
}

@media (max-width: 900px) {
    .showcase-row, .showcase-row.reverse {
        flex-direction: column;
        gap: 2rem;
    }
}

/* --- New Styles for Iteration 3 --- */

/* Utility Gradients & Text Colors */
/* NOTE: `background` is a shorthand that resets `background-clip`, so the
   clip MUST come after the gradient inside the same rule. Splitting them
   across rules silently un-clips the text and paints a solid block. */
.gradient-text-pastel {
    background: linear-gradient(90deg, #a8ff78, #78ffd6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text-vox {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text-cyan {
    background: linear-gradient(90deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text-orange {
    background: linear-gradient(90deg, #fceabb, #f8b500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tag-center {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.badge-outline {
    background: transparent;
    border: 1px solid var(--accent-secondary);
    color: var(--accent-secondary);
}

/* Distinct Hover Colors Framework */
.color-red { --theme-color: #ff4757; }
.color-yellow { --theme-color: #feca57; }
.color-orange { --theme-color: #ff9f43; }
.color-blue { --theme-color: #54a0ff; }
.color-green { --theme-color: #10ac84; }
.color-teal { --theme-color: #1dd1a1; }
.color-purple { --theme-color: #5f27cd; }
.color-pink { --theme-color: #ff9ff3; }
.color-cyan { --theme-color: #00d2d3; }

/* The Problem Section & Feature Grid (Why Choose) */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 2rem;
    margin-top: 4rem;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}
@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
}

.problem-card, .feature-card {
    background: #0a0a0c;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 2rem;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.problem-card .icon-box, .feature-card .icon-box, .workflow-step .icon-box {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: #1a1a20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid #333;
}

/* Distinct Hover Effects for Cards */
.problem-card:hover, .feature-card:hover, .style-badge:hover, .desktop-frame:hover {
    border-color: var(--theme-color);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.02);
    transform: translateY(-5px);
}
.problem-card:hover .icon-box, .feature-card:hover .icon-box {
    background: var(--theme-color);
    color: #fff;
    box-shadow: 0 0 20px var(--theme-color);
    border-color: transparent;
}
.style-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-color);
    box-shadow: 0 0 20px var(--theme-color), inset 0 0 10px var(--theme-color);
}
.desktop-frame:hover {
    box-shadow: 0 10px 50px var(--theme-color);
}

/* Workflow Section */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
}
.workflow-line {
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #1dd1a1, #10ac84, #00d2d3);
    z-index: 0;
}
.workflow-step {
    background: #0a0a0c;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 3rem 2rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
.step-circle {
    width: 50px; height: 50px;
    background: var(--theme-color);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px var(--theme-color);
}
.workflow-step .icon-box {
    margin: 1rem auto;
}
.workflow-step:hover {
    border-color: var(--theme-color);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.testimonial-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cover-image {
    width: 100%;
    height: 150px;
    background: #1a1a1a;
}
.cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-content {
    padding: 2rem;
    text-align: left;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stars-rating {
    color: #feca57;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.author .avatar-img {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-secondary);
}
.author h4 { margin: 0; font-size: 1rem; color: #fff; }
.author span { color: #888; font-size: 0.8rem; }

/* FAQ */
.faq-list {
    max-width: 800px;
    margin: 3rem auto 0;
    text-align: left;
}
.faq-item {
    border-bottom: 1px solid #333;
    padding: 1.5rem 0;
}
.faq-question {
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-question .plus {
    color: var(--accent-secondary);
}
.faq-answer {
    margin-top: 1rem;
    color: #a0a0a0;
    display: none;
    line-height: 1.6;
}
.faq-item.active .faq-answer {
    display: block;
}
.faq-item.active .plus {
    transform: rotate(45deg);
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Revamped Pricing */
.pricing-revamp {
    margin: 4rem 0;
}
.pricing-card-revamp {
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.06) 0%, #050505 100%);
    border: 1px solid #222;
    border-radius: 24px;
    padding: 4rem 3rem;
    max-width: 600px;
    margin: 4rem auto 0;
    position: relative;
    overflow: hidden;
}
.pricing-card-revamp::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 50%;
    background: radial-gradient(circle at center top, rgba(201, 162, 39, 0.18), transparent 70%);
    z-index: 0;
}
.lifetime-badge {
    display: inline-block;
    background: #10ac84;
    color: #000;
    padding: 0.4rem 1.5rem;
    border-radius: 30px;
    font-weight: 900;
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}
.price-big {
    font-size: clamp(3.25rem, 12vw, 5rem);
    font-weight: 900;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.price-strike {
    color: #8a8a8a;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}
.features-list-revamp {
    list-style: none;
    text-align: left;
    margin: 3rem 0;
    position: relative;
    z-index: 1;
}
.features-list-revamp li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 1rem;
}
.features-list-revamp .check {
    background: #10ac84;
    color: #000;
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}
.guarantee {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: #666;
    position: relative;
    z-index: 1;
}

/* Style Badge Hover Image */
.style-badge {
    position: relative;
}
.style-hover-img {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 220px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 20px var(--theme-color);
    z-index: 100;
    pointer-events: none;
    border: 2px solid var(--theme-color);
}
.style-hover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.style-badge:hover .style-hover-img {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* --- Iteration 4: CTA Motion, Text Gradients --- */

/* Logo gradient */
.logo-vox {
    background: linear-gradient(90deg, #c9a227, #e8c060, #c9a227);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    font-family: 'Times New Roman', serif;
    animation: shine 3s linear infinite;
}
.logo-era {
    color: #fff;
    font-style: normal;
}

/* Illuminated Alt (for final CTA H2) */
.illuminated-text-alt {
    background: linear-gradient(90deg, #a8ff78, #78ffd6, #00d2ff, #7928ca, #ff007f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shine 4s linear infinite;
    display: inline-block;
}

/* Pricing: Relative Position for z-index stacking */
.pricing-revamp {
    position: relative;
    overflow: hidden;
}

/* Shared CTA Particles (used by both pricing and final CTA) */
.cta-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.cta-particles span {
    position: absolute;
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    animation: floatUp 8s infinite linear;
    opacity: 0;
}
.cta-particles span:nth-child(1)  { left:10%; animation-delay:0s; background:#00ff88; }
.cta-particles span:nth-child(2)  { left:25%; animation-delay:1.5s; background:#00d2ff; width:6px; height:6px; }
.cta-particles span:nth-child(3)  { left:40%; animation-delay:3s; background:#7928ca; }
.cta-particles span:nth-child(4)  { left:55%; animation-delay:0.5s; background:#ff007f; width:3px; height:3px; }
.cta-particles span:nth-child(5)  { left:70%; animation-delay:2s; background:#feca57; width:5px; height:5px; }
.cta-particles span:nth-child(6)  { left:80%; animation-delay:4s; background:#00ff88; }
.cta-particles span:nth-child(7)  { left:15%; animation-delay:5s; background:#a8ff78; width:4px; height:4px; }
.cta-particles span:nth-child(8)  { left:60%; animation-delay:6s; background:#00d2ff; width:6px; height:6px; }
.cta-particles span:nth-child(9)  { left:35%; animation-delay:2.5s; background:#ff9f43; }
.cta-particles span:nth-child(10) { left:90%; animation-delay:3.5s; background:#78ffd6; width:3px; height:3px; }

@keyframes floatUp {
    0%   { bottom: -20px; opacity: 0; transform: translateX(0) rotate(0deg); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { bottom: 110%; opacity: 0; transform: translateX(60px) rotate(720deg); }
}

/* NOTE: the spinning conic-gradient ring (.card-glow-ring) and the neon
   pulse (.btn-pulse / .btn-neon-green*) that used to live here were
   removed — they read as motion-graphics/SaaS rather than VOX.
   See "VOX CTA — stamped paper ticket" at the end of this file. */

/* Final CTA section (after FAQ) */
.final-cta {
    position: relative;
    overflow: hidden;
    padding: 8rem 2rem;
}
.final-cta h2 {
    /* was a fixed 3.5rem — overflowed every phone */
    font-size: clamp(1.9rem, 6vw, 3.5rem);
    margin-bottom: 1.5rem;
}
.final-cta p {
    max-width: 500px;
    margin: 0 auto 3rem;
    color: #a0a0a0;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.cta-trust {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #666;
}
.cta-trust span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* =============================================
   NAVBAR SCROLLED STATE
   (was applied as inline styles from script.js)
   ============================================= */
.navbar.floating-nav.scrolled {
    background: rgba(20, 25, 35, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* =============================================
   MOBILE NAVIGATION
   ============================================= */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Hamburger — hidden on desktop, revealed under 768px */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.nav-toggle:hover {
    border-color: var(--accent-secondary);
    background: rgba(0, 210, 255, 0.1);
}
.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--text-main);
    transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Collapse the three bars into an X while the menu is open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .navbar.floating-nav {
        padding: 0.75rem 1rem 0.75rem 1.5rem;
    }

    /* Nav links drop out of the bar into a panel beneath it */
    .nav-links {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1.5rem;
        background: rgba(20, 25, 35, 0.95);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        /* Hidden by default; .open reveals it */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-links li:last-child {
        border-bottom: none;
    }
    .nav-links a {
        display: block;
        padding: 1rem 0;
    }

    /* Keep the CTA in the bar but compact enough to sit beside the toggle */
    .nav-actions .btn-primary.sm {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    /* Very narrow screens: CTA lives in the menu panel instead of the bar */
    .nav-actions .btn-primary.sm {
        display: none;
    }
}

/* =============================================
   SECTION FX — reusable hero-style backdrop
   Drop a .section-fx layer into any .has-fx section.
   Reuses the hero's .ink-blob / .gis-grid / .film-grain /
   .ink-tear / .paper-fragment pieces at hero strength.

   TUNING: --fx-strength scales the whole layer (1 = hero
   parity). Set it per section, e.g.
       <div class="section-fx" style="--fx-strength: 0.7">
   ============================================= */
.has-fx {
    position: relative;
    overflow: hidden;
}

/* Content sits above the effect layer */
.has-fx > .container {
    position: relative;
    z-index: 5;
}

.section-fx {
    --fx-strength: 1;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Hero parity — calc() lets one variable scale the whole layer */
.section-fx .ink-blob       { opacity: calc(0.14 * var(--fx-strength)); }
.section-fx .gis-grid       { opacity: var(--fx-strength); }
.section-fx .film-grain     { opacity: calc(0.06 * var(--fx-strength)); }
.section-fx .ink-tear       { opacity: calc(0.30 * var(--fx-strength)); }

/* NOTE: .paper-fragment is deliberately NOT used in .section-fx. Its
   fixed %-positions drift over headings at some viewport widths, and
   over a dark section a 15%-gold fragment reads as an opaque dark card
   sitting on the text. It stays a hero-only flourish. */

/* Stagger the scanline so the sections don't all beam in unison */
.section-fx .gis-grid::after {
    animation-duration: 6s;
}
.why-choose .section-fx .gis-grid::after    { animation-delay: -2s; }
.problem-section .section-fx .gis-grid::after { animation-delay: -4s; }
.workflow-section .section-fx .gis-grid::after { animation-delay: -1s; }

/* Re-spread the blobs for wide-and-short sections — the hero
   positions assume a full 100vh canvas. */
.section-fx .blob-1 {
    width: 700px; height: 700px;
    top: -220px; left: -200px;
}
.section-fx .blob-2 {
    width: 600px; height: 600px;
    top: 25%; right: -220px;
}
.section-fx .blob-3 {
    width: 500px; height: 500px;
    bottom: -200px; left: 35%;
}

/* Sections that painted their own flat background — let the FX through */
.showcase.has-fx,
.tutorial-section.has-fx {
    background: transparent;
}

@media (max-width: 768px) {
    /* Big blurred blobs are the expensive part on mobile GPUs */
    .section-fx .ink-blob {
        filter: blur(60px);
    }
    .section-fx .ink-tear {
        display: none;
    }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .section-fx .ink-blob,
    .section-fx .gis-grid {
        animation: none;
    }
}

/* =============================================
   VOX COLLAGE — mixed-media treatment
   Rip · Tape · Stamp · GIS HUD · Halftone · Parallax
   Applied to the tutorial section; .vox-collage is
   reusable on any .has-fx section.
   ============================================= */
.vox-collage {
    position: relative;
    /* Rips sit at the edges — keep content clear of them */
    padding-top: 6rem;
    padding-bottom: 7rem;
}

/* ---- RIP: torn paper edges ---- */
.rip-edge {
    position: absolute;
    left: -2%;
    width: 104%;
    height: 46px;
    z-index: 6;
    pointer-events: none;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.rip-top {
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 28 L1150 38 L1092 24 L1030 40 L972 26 L910 41 L848 27 L790 42 L728 28 L666 40 L604 25 L546 39 L484 26 L422 41 L360 27 L298 40 L236 25 L174 38 L112 26 L50 39 L0 27 Z' fill='%23c9a227'/%3E%3C/svg%3E");
}
.rip-bottom {
    bottom: -1px;
    transform: scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 30 L1144 40 L1080 26 L1022 41 L960 27 L898 39 L836 25 L778 40 L716 26 L654 41 L592 28 L530 38 L468 24 L406 40 L344 27 L282 41 L220 26 L158 39 L96 25 L38 38 L0 26 Z' fill='%237928ca'/%3E%3C/svg%3E");
}

/* ---- MIXED MEDIA: halftone print wash ---- */
.halftone-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 120%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(rgba(201, 162, 39, 0.30) 1px, transparent 1.7px);
    background-size: 7px 7px;
    mix-blend-mode: overlay;
    will-change: transform;
}

/* ---- Heading: "-era" pairs with the boiling VOX ---- */
.era-suffix {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #d8b878;
}

/* ---- Stage: positioning context for the collage pieces ---- */
.tutorial-stage {
    position: relative;
    width: 100%;
    will-change: transform;
}

/* ---- GIS TECH: survey brackets + telemetry readouts ---- */
.gis-hud {
    position: absolute;
    top: -18px; left: -18px; right: -18px; bottom: -18px;
    z-index: 4;
    pointer-events: none;
}
.hud-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(201, 162, 39, 0.7);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.35);
}
.hud-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hud-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.hud-readout {
    position: absolute;
    font-family: monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: rgba(201, 162, 39, 0.85);
    text-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
    white-space: nowrap;
}
.hud-tl { top: -20px; left: 34px; }
.hud-tr { top: -20px; right: 34px; color: rgba(0, 210, 255, 0.8); text-shadow: 0 0 8px rgba(0, 210, 255, 0.4); }
.hud-bl { bottom: -20px; left: 34px; }
.hud-br { bottom: -20px; right: 34px; color: rgba(0, 210, 255, 0.8); text-shadow: 0 0 8px rgba(0, 210, 255, 0.4); }

/* The REC readout blinks like a capture device */
.hud-tl { animation: hudBlink 1.6s steps(1) infinite; }
@keyframes hudBlink {
    0%, 60%  { opacity: 1; }
    61%, 100% { opacity: 0.35; }
}

/* ---- MIXED MEDIA: tape strips ---- */
.tape {
    position: absolute;
    z-index: 5;
    width: 130px;
    height: 34px;
    background: rgba(232, 220, 180, 0.16);
    border-left: 1px dashed rgba(232, 220, 180, 0.28);
    border-right: 1px dashed rgba(232, 220, 180, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tape-tl {
    top: -16px; left: -34px;
    transform: rotate(-38deg);
}
.tape-br {
    bottom: -16px; right: -34px;
    transform: rotate(-38deg);
}

/* ---- STAMP: rubber stamp, slams in on scroll ---- */
.ink-stamp {
    position: absolute;
    z-index: 7;
    top: -26px;
    right: 6%;
    width: 132px;
    height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 3px double rgba(201, 162, 39, 0.85);
    border-radius: 50%;
    color: rgba(201, 162, 39, 0.9);
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    /* Reuse the hero's turbulence filter for a distressed ink edge */
    filter: url(#boil);
}
.stamp-top,
.stamp-bottom {
    font-size: 0.55rem;
    letter-spacing: 2px;
    font-weight: 700;
}
.stamp-main {
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}
.stamp-bottom {
    border-top: 1px solid rgba(201, 162, 39, 0.6);
    padding-top: 3px;
    margin-top: 2px;
}

/* Hooks into the existing IntersectionObserver: it adds .visible
   to .animate-up elements, so the stamp gets a slam instead of a rise. */
.ink-stamp.animate-up {
    opacity: 0;
    transform: rotate(-38deg) scale(2.4);
    transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.ink-stamp.animate-up.visible {
    opacity: 0.9;
    transform: rotate(-14deg) scale(1);
}

@media (max-width: 900px) {
    .ink-stamp {
        width: 96px; height: 96px;
        top: -18px; right: 2%;
    }
    .stamp-main { font-size: 1.35rem; }
    .stamp-top, .stamp-bottom { font-size: 0.45rem; letter-spacing: 1px; }
    .tape { width: 96px; height: 26px; }
    .hud-readout { font-size: 0.55rem; }
    .hud-tr, .hud-br { display: none; }
}

@media (max-width: 600px) {
    /* Collage clutter competes with the video at phone width */
    .tape, .ink-stamp { display: none; }
    .rip-edge { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .hud-tl { animation: none; }
    .ink-stamp.animate-up { transition: opacity 0.3s ease; transform: rotate(-14deg) scale(1); }
    .halftone-layer { transform: none !important; }
}

/* =============================================
   MOBILE UI PASS
   Everything below tunes the layout for phones.
   Kept in one block so it's easy to reason about.
   ============================================= */

/* ---- Touch devices: hover-only UI needs a tap equivalent ---- */
@media (hover: none) {
    /* :hover never fires reliably on touch, so script.js toggles
       .tapped on the badge instead. Same reveal, driven by tap. */
    .style-badge.tapped .style-hover-img {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1);
    }
    /* The first row's popup would open above the viewport — flip
       those below the badge instead. */
    .styles-grid .style-badge.tapped .style-hover-img {
        bottom: auto;
        top: 120%;
    }
}

/* ---- Tablet / large phone ---- */
@media (max-width: 900px) {
    .section {
        padding: 4rem 0;
    }
    .showcase-row {
        margin-bottom: 4rem;
    }
    .tutorial-layout {
        max-width: 100%;
    }
}

/* ---- Phone ---- */
@media (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    .section {
        padding: 3.5rem 0;
    }

    /* Hero: leave room for the floating navbar, drop the fixed 100vh feel */
    .hero {
        min-height: auto;
        padding-top: 7rem;
        padding-bottom: 4rem;
    }
    .hero-content {
        padding: 0 0.5rem;
    }
    .hero-stats {
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    .stat .highlight {
        font-size: 2rem;
    }

    /* Full-width CTAs are far easier to hit with a thumb */
    .btn-primary.lg {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .cta-trust {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Pricing card: 3rem of side padding inside a 1.25rem container
       left almost no room for the feature list */
    .pricing-card-revamp {
        /* extra bottom room so .guarantee clears the .dossier-ref line */
        padding: 2.5rem 1.5rem 3.5rem;
        margin-top: 2.5rem;
        border-radius: 20px;
    }
    .features-list-revamp {
        margin: 2rem 0;
    }
    .features-list-revamp li {
        font-size: 1rem;
        align-items: flex-start;
    }
    .features-list-revamp .check {
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* The 3-step connector is drawn horizontally — meaningless once
       the steps stack into a single column */
    .workflow-line {
        display: none;
    }
    .workflow-grid {
        gap: 3rem;
        margin-top: 3rem;
    }
    .workflow-step {
        padding: 3rem 1.5rem 2rem;
    }

    /* Cards */
    .feature-card,
    .problem-card {
        padding: 1.5rem;
    }
    .features-grid,
    .problem-grid {
        margin-top: 2.5rem;
        gap: 1rem;
    }

    /* FAQ: give the tap area some height */
    .faq-question {
        padding: 1.1rem 0;
        font-size: 1rem;
        gap: 1rem;
    }

    /* Showcase stacks — text first reads better than image first */
    .showcase-row,
    .showcase-row.reverse {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 3.5rem;
    }

    .marquee-content {
        gap: 2rem;
        padding: 0 1rem;
    }
    .marquee-content img {
        height: 30px;
        width: 90px;
    }

    .testimonial-grid,
    .video-grid {
        gap: 1.5rem;
    }

    /* Section decoration is expensive and cramped on phones */
    .section-fx .gis-grid {
        background-size: 40px 40px;
    }

    footer {
        padding: 2.5rem 0;
    }
}

/* ---- Small phone ---- */
@media (max-width: 400px) {
    .container {
        padding: 0 1rem;
    }
    .navbar.floating-nav {
        width: 94%;
        top: 12px;
    }
    .style-badge {
        padding: 0.7rem 1.1rem;
        font-size: 0.85rem;
    }
    .styles-grid {
        gap: 0.6rem;
    }
    .price-strike,
    .guarantee {
        font-size: 0.8rem;
    }
    .url-bar {
        font-size: 0.7rem;
    }
    .browser-header .dots {
        margin-right: 10px;
    }
}

/* =============================================
   VOX CTA — stamped paper ticket
   Replaces the neon-pulse / spinning-ring treatment.
   Language: paper & ink · boiling edge · GIS brackets
             · torn ticket edge · scanline sweep · stamp press
   ============================================= */

/* ---- Dossier frame on the pricing card ---- */
.card-dossier {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    border-radius: 24px;
    overflow: hidden;
}

/* Blueprint survey grid — static, nothing spins */
.dossier-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(201, 162, 39, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 39, 0.055) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Torn paper edges, top and bottom of the card */
.dossier-rip {
    position: absolute;
    left: -2%;
    width: 104%;
    height: 22px;
    opacity: 0.45;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.dossier-rip.top {
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L600 0 L600 12 L570 18 L540 10 L510 19 L480 11 L450 18 L420 10 L390 19 L360 12 L330 17 L300 9 L270 18 L240 11 L210 19 L180 10 L150 18 L120 11 L90 19 L60 10 L30 17 L0 11 Z' fill='%23c9a227'/%3E%3C/svg%3E");
}
.dossier-rip.bottom {
    bottom: -1px;
    transform: scaleY(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L600 0 L600 13 L568 19 L536 10 L504 18 L472 11 L440 19 L408 10 L376 17 L344 12 L312 19 L280 10 L248 18 L216 11 L184 19 L152 10 L120 17 L88 12 L56 18 L24 10 L0 16 Z' fill='%2310ac84'/%3E%3C/svg%3E");
}

/* GIS survey brackets at the card corners */
.dossier-bracket {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(201, 162, 39, 0.55);
}
.dossier-bracket.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.dossier-bracket.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.dossier-bracket.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.dossier-bracket.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* Filing reference, like a stamped document number */
.dossier-ref {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: monospace;
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: rgba(201, 162, 39, 0.45);
}

/* Card reads as paper stock rather than a neon slab */
.pricing-card-revamp {
    border-color: rgba(201, 162, 39, 0.22);
}

/* Badge becomes a stamped chip */
.lifetime-badge {
    background: transparent;
    color: var(--vox-gold);
    border: 1px solid rgba(201, 162, 39, 0.55);
    border-radius: 4px;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.45rem 1.4rem;
}

/* ---- The button ---- */
.btn-vox-cta {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.25rem 2rem;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    z-index: 1;

    /* Aged paper stock: halftone dots over a cream-to-gold wash */
    background:
        radial-gradient(rgba(23, 18, 10, 0.16) 1px, transparent 1.6px) 0 0 / 6px 6px,
        linear-gradient(178deg, var(--vox-cream) 0%, #dccb96 52%, var(--vox-gold) 100%);
    color: var(--vox-ink);

    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;

    /* Torn ticket edge, top and bottom */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L20 1 L40 6 L60 2 L80 7 L100 2 L120 6 L140 1 L160 6 L180 2 L200 7 L220 2 L240 6 L260 1 L280 6 L300 2 L320 7 L340 2 L360 6 L380 1 L400 5 L400 59 L380 63 L360 58 L340 62 L320 57 L300 62 L280 58 L260 63 L240 58 L220 62 L200 57 L180 62 L160 58 L140 63 L120 58 L100 62 L80 57 L60 62 L40 58 L20 63 L0 59 Z' fill='%23fff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L20 1 L40 6 L60 2 L80 7 L100 2 L120 6 L140 1 L160 6 L180 2 L200 7 L220 2 L240 6 L260 1 L280 6 L300 2 L320 7 L340 2 L360 6 L380 1 L400 5 L400 59 L380 63 L360 58 L340 62 L320 57 L300 62 L280 58 L260 63 L240 58 L220 62 L200 57 L180 62 L160 58 L140 63 L120 58 L100 62 L80 57 L60 62 L40 58 L20 63 L0 59 Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), filter 0.25s ease;
}

/* Boiling ink border — the hand-drawn VOX signature.
   Same on/off turbulence trick as .boil-effect uses on the wordmark. */
.btn-vox-cta::before {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 2px solid rgba(23, 18, 10, 0.75);
    pointer-events: none;
    z-index: 2;
    animation: ctaBoil 0.22s infinite alternate;
}
@keyframes ctaBoil {
    0%   { filter: url(#boil); }
    100% { filter: none; }
}

/* Ink smudge, like a stamp pressed slightly off-register */
.btn-vox-cta::after {
    content: '';
    position: absolute;
    top: -30%; right: -6%;
    width: 90px; height: 160%;
    background: radial-gradient(ellipse at center, rgba(23, 18, 10, 0.14), transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* GIS brackets inside the ticket */
.cta-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(23, 18, 10, 0.55);
    z-index: 3;
    pointer-events: none;
}
.cta-bracket.tl { top: 11px; left: 11px; border-right: none; border-bottom: none; }
.cta-bracket.tr { top: 11px; right: 11px; border-left: none; border-bottom: none; }
.cta-bracket.bl { bottom: 11px; left: 11px; border-right: none; border-top: none; }
.cta-bracket.br { bottom: 11px; right: 11px; border-left: none; border-top: none; }

.cta-text {
    position: relative;
    z-index: 3;
}

/* Price set in the VOX wordmark face */
.cta-price {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.25em;
    letter-spacing: 0;
}

/* GIS scanline sweep — replaces the neon pulse.
   Idles slowly, snaps across on hover. */
.cta-sweep {
    position: absolute;
    top: 0;
    left: -35%;
    width: 28%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent
    );
    animation: ctaSweep 5.5s ease-in-out infinite;
}
@keyframes ctaSweep {
    0%, 62%   { left: -35%; }
    88%, 100% { left: 108%; }
}

/* Stamp press */
.btn-vox-cta:hover {
    filter: brightness(1.06) contrast(1.03);
    transform: translateY(-2px) rotate(-0.35deg);
}
.btn-vox-cta:hover .cta-sweep {
    animation: ctaSweep 1.1s ease-in-out;
}
.btn-vox-cta:active {
    transform: translateY(1px) scale(0.985) rotate(0.2deg);
    filter: brightness(0.94) contrast(1.08);
}
.btn-vox-cta:focus-visible {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 3px;
}

/* ---- Secondary: carbon-copy ghost ---- */
.btn-vox-ghost {
    display: inline-block;
    padding: 1.15rem 2.5rem;
    background: rgba(201, 162, 39, 0.05);
    border: 1px dashed rgba(201, 162, 39, 0.45);
    color: var(--vox-cream);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-vox-ghost:hover {
    background: rgba(201, 162, 39, 0.12);
    border-color: var(--vox-gold);
    border-style: solid;
    color: #fff;
    transform: translateY(-2px);
}

/* The final-CTA pair sits side by side on desktop */
.final-cta .btn-vox-cta {
    width: auto;
    min-width: 340px;
    display: inline-block;
}

@media (max-width: 768px) {
    .final-cta .btn-vox-cta {
        width: 100%;
        min-width: 0;
    }
    .btn-vox-cta {
        font-size: 0.9rem;
        padding: 1.1rem 1.25rem;
        letter-spacing: 0.5px;
    }
    .btn-vox-ghost {
        display: block;
        width: 100%;
        text-align: center;
    }
    .dossier-ref { font-size: 0.5rem; }
    .dossier-bracket { width: 16px; height: 16px; }
    .dossier-bracket.tl, .dossier-bracket.tr { top: 10px; }
    .dossier-bracket.bl, .dossier-bracket.br { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-vox-cta::before { animation: none; }
    .cta-sweep { animation: none; opacity: 0; }
}