/* Base Styles & Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; 
}

/* Base Body is slightly off-white, matching the canvas */
body {
    background-color: #f8fafc; 
    color: #334155;
    line-height: 1.6;
}

/* 3D Angled Canvas - Global Background */
#pixel-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none; 
}

/* Sections span 100% of the screen by default */
section, .site-footer {
    width: 100%;
    padding: 80px 0;
}

/* --- Section Alternating Backgrounds --- */
.bg-white {
    background-color: #ffffff;
    position: relative;
    z-index: 1; /* Sits above the fixed canvas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.bg-light-blue {
    background-color: transparent; /* Lets the fixed canvas grid show through */
}

.bg-gradient-blue {
    /* Fades from a solid white top edge down into transparent, revealing the grid */
    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, transparent 40%);
}

/* The hero specifically gets a much lighter, shorter version — the full-strength wash above
   was washing out the globe's colour right where it's most visible, just under the navbar.
   Legal pages keep the original (unchanged above) since they don't have the canvas hover effect. */
#home.bg-gradient-blue {
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, transparent 15%);
}

/* The Container class */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px; 
    width: 100%;
}

/* Typography */
h1, h2, h3 {
    margin-bottom: 20px;
    color: #0f172a; 
}

p {
    margin-bottom: 15px;
    color: #475569;
}

/* Fade Edges Utility Class */
.fade-edges {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* iOS Safari has a rendering bug where mask-image on a wrapper glitches/clips
   an animated (translateX) child during scroll. The logo marquee sits on a
   solid white section, so it skips the mask and fades with two overlay
   gradients instead — nothing animated gets masked, so the bug can't fire. */
.marquee-wrapper:not(.reviews-marquee) {
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
}
.marquee-wrapper:not(.reviews-marquee)::before,
.marquee-wrapper:not(.reviews-marquee)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    z-index: 2;
    pointer-events: none;
}
.marquee-wrapper:not(.reviews-marquee)::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}
.marquee-wrapper:not(.reviews-marquee)::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

/* Same iOS Safari mask + animated-child bug, but this marquee sits on a
   transparent section showing the animated canvas grid through it, so it has
   no solid colour to fade to and has to keep the mask-image approach above.
   Forcing it onto its own stable GPU layer is the standard mitigation when the
   mask can't be removed — it's not a guaranteed fix like the logo marquee's,
   so test this on a real iPhone after deploying. */
.reviews-marquee {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Navbar - Blurred to look good over the grid */
nav {
    position: sticky;
    top: 0;
    width: 100%;
    height: 90px; 
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    align-items: center;
    height: 100%;
}

.nav-logo a { display: block; }
.nav-logo img {
    height: 40px; 
    width: auto;
    transition: transform 0.2s ease;
}
.nav-logo img:hover { transform: scale(1.02); }

/* Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1001; 
}
.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #0f172a;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-links { display: flex; gap: 25px; }
.nav-links a {
    position: relative;
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    transition: color 0.3s;
    padding-bottom: 5px;
}
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #dc2626; /* Crimson accent */
    transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover { color: #dc2626; }
.nav-links a:hover::after { width: 100%; left: 0; }

/* Landing Page (Hero) */
#home {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center; 
    padding: 0; 
}
.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

/* Light Grey drop-shadow used anywhere text sits directly over the busy canvas grid/globe
   instead of on a background, so it stays readable without reading as a boxed panel.
   Reused for the hero, the service timeline text, and the footer links. */
.hero-content, .service-text, .footer-legal-links a {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.hero-content { max-width: 640px; }

.hero-eyebrow {
    display: flex; align-items: center; gap: 10px;
    color: #dc2626; font-weight: 700; font-size: 0.9rem;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; flex-shrink: 0; }

.hero-heading {
    font-size: 3.4rem; line-height: 1.15; font-weight: 800;
    color: #0f172a; margin-bottom: 20px;
}
.hero-heading .text-accent { color: #dc2626; }

.hero-subtext {
    font-size: 1.2rem; color: #475569; max-width: 520px; margin-bottom: 10px;
}

/* Primary Button Styling */
.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    background: #dc2626; 
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    text-shadow: none;
    transition: background 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}
.btn:hover { background: #b91c1c; transform: translateY(-2px); }

/* Hero Stats Row */
.hero-stats {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-top: 55px;
    width: 100%;
}
.hero-stat { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    background: rgba(255, 255, 255, 0.85); 
    border: 2px solid #dc2626; 
    border-radius: 12px; 
    padding: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    backdrop-filter: blur(4px);
    aspect-ratio: 1 / 1; 
    text-align: center;
}
.hero-stat-number { font-size: 2.2rem; font-weight: 800; color: #0f172a; line-height: 1.1; margin-bottom: 5px; }
.hero-stat-label { font-size: 0.85rem; color: #dc2626; font-weight: 700; margin-top: 0; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }


/* Infinite Marquee */
.marquee-wrapper { width: 100%; overflow: hidden; padding: 25px 0; display: flex; }
.marquee-content { display: flex; width: fit-content; }
.marquee-group { display: flex; align-items: center; gap: 50px; padding-right: 50px; flex-shrink: 0; }

.right-to-left { animation: scroll-left 25s linear infinite; }
.left-to-right { animation: scroll-right 30s linear infinite; }

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

.marquee-logo {
    height: 42px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    flex-shrink: 0;
}
/* SC and BM are dense circular/seal badges that read smaller than the wordmarks
   at the same height, so they get a bit more room to stay legible. */
.marquee-logo-badge {
    height: 58px;
}

/* What We Do */
.services-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1100px;
    margin: 60px auto 0;
    position: relative;
}
.services-container::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: 50%; width: 4px; background: #cbd5e1; transform: translateX(-50%);
}
.service-box {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; position: relative;
}
.service-box::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 24px; height: 24px;
    background: #dc2626; border: 4px solid #ffffff; border-radius: 50%; z-index: 2;
}

.service-img-wrapper { width: 45%; }
.service-text { width: 45%; text-align: left; }

.service-img-placeholder {
    width: 100%; height: 280px; background: rgba(255, 255, 255, 0.9);
    border-radius: 12px; display: flex;
    align-items: center; justify-content: center; color: #94a3b8;
    font-weight: bold; font-size: 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.service-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-text h3 { font-size: 2.2rem; margin-bottom: 15px; color: #dc2626; }
.service-text p { font-size: 1.25rem; color: #475569; line-height: 1.8; margin-bottom: 0; }

.service-box:nth-child(odd) { flex-direction: row; }
.service-box:nth-child(even) { flex-direction: row-reverse; }

/* Products Section */
.products-interactive-zone { margin-top: 40px; position: relative; }
#products h2 { text-align: center; }

#productsMainView { transition: visibility 0s, opacity 0.3s; }
.product-pages-container { display: block; }
.product-page {
    display: none; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.product-page.active { display: grid; animation: fadeIn 0.4s ease forwards; }

.product-card {
    width: 100%; background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(220, 38, 38, 0.1); }

.product-img-placeholder {
    width: 100%; height: 180px; background: #f1f5f9; display: flex;
    align-items: center; justify-content: center; color: #64748b; font-weight: bold;
    overflow: hidden;
}
.product-img-placeholder.icon-placeholder { font-size: 3.4rem; }
.product-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-info { padding: 20px; }

.product-nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; }
.nav-arrow {
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 50%; width: 45px; height: 45px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #334155; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.nav-arrow:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; transform: translateY(-2px); }
.nav-dots { display: flex; gap: 12px; }
.dot {
    width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1;
    cursor: pointer; transition: background 0.3s, transform 0.2s;
}
.dot:hover { transform: scale(1.2); }
.dot.active { background: #dc2626; }

/* Product Detail View */
.product-detail-view {
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 10; flex-direction: column; justify-content: center;
    background-color: rgba(120, 15, 25, 0.95); backdrop-filter: blur(8px);
    padding: 30px 40px; border-radius: 12px; overflow: hidden; animation: fadeIn 0.4s ease forwards;
}
.detail-content { display: flex; align-items: center; gap: 40px; width: 100%; height: 100%; }
.detail-card-container { flex-shrink: 0; }
.cloned-card { width: 320px; cursor: default; pointer-events: none; margin: 0; box-shadow: 0 10px 25px rgba(0,0,0,0.4); }
.cloned-card:hover { transform: none; }

.detail-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; }
.detail-info h3 { color: #ffffff; font-size: 1.8rem; margin-bottom: 12px; }
.detail-info p { color: #f1d9db; font-size: 1rem; line-height: 1.6; margin-bottom: 24px; }
.detail-examples { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; margin-top: -8px; }
.example-tag {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
}
.detail-back-btn {
    align-self: flex-start; background: transparent; border: 2px solid #ffffff; color: #ffffff;
    padding: 10px 22px; border-radius: 6px; cursor: pointer; font-weight: bold;
    font-size: 0.95rem; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.detail-back-btn:hover { background: #ffffff; color: #780f19; border-color: #ffffff; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Reviews */
.reviews-section { border-top: 1px solid rgba(226, 232, 240, 0.6); border-bottom: 1px solid rgba(226, 232, 240, 0.6); }
.reviews-section h2 { text-align: center; margin-bottom: 50px; }
.review-card {
    width: 350px; flex-shrink: 0; white-space: normal; background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0; border-radius: 16px; padding: 25px; display: flex;
    flex-direction: column; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
}
.review-header { display: flex; align-items: center; gap: 12px; }
.review-author { font-weight: bold; font-size: 1.05rem; color: #0f172a; }
.review-text { color: #1e293b; font-size: 1rem; line-height: 1.6; }

/* Contact Form */
.multi-step-form { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.form-step {
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px;
    padding: 30px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.step-header { display: flex; align-items: center; gap: 15px; margin: 0; }
.step-number {
    display: flex; align-items: center; justify-content: center; width: 35px; height: 35px;
    background: #cbd5e1; color: #ffffff; border-radius: 50%; font-weight: bold;
    font-size: 1.1rem; transition: background 0.3s;
}
.step-header h3 { margin: 0; color: #475569; font-size: 1.4rem; }

.step-content-wrapper {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-out, opacity 0.3s ease-out, margin-top 0.4s ease-out;
    opacity: 0; margin-top: 0;
}
.step-content { overflow: hidden; display: flex; flex-direction: column; gap: 20px; }

.form-step.active { border: 2px solid #dc2626; box-shadow: 0 10px 25px rgba(220, 38, 38, 0.1); }
.form-step.active .step-number { background: #dc2626; }
.form-step.active .step-header h3 { color: #0f172a; }
.form-step.active .step-content-wrapper { grid-template-rows: 1fr; opacity: 1; margin-top: 20px; }
.form-step.locked { opacity: 0.7; pointer-events: none; background: rgba(248, 250, 252, 0.85); border-color: transparent; }

.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #334155; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 14px; border: 1px solid #cbd5e1; border-radius: 8px;
    font-family: inherit; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; background: #fff;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.form-group input.invalid, .form-group textarea.invalid, .form-group select.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.form-group textarea { resize: vertical; height: 120px; }
.error-message { color: #ef4444; font-size: 0.9rem; margin-top: 8px; display: none; font-weight: 600; }

.phone-input-group { display: flex; gap: 10px; }
.phone-input-group select { width: 35%; cursor: pointer; }
.phone-input-group input { width: 65%; }

.form-actions { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 20px; border-top: 1px solid #f1f5f9; }
.form-actions.single-action { justify-content: flex-end; }
.back-btn { background: transparent; border: 1px solid #cbd5e1; color: #475569; padding: 12px 24px; }
.back-btn:hover { background: #f1f5f9; color: #0f172a; transform: translateY(0); }
.submit-btn, .next-btn {
    width: auto; padding: 12px 30px; background: #dc2626; color: #ffffff; border: none;
    border-radius: 6px; font-size: 1.05rem; font-weight: bold; cursor: pointer; transition: background 0.3s, transform 0.2s;
}
.submit-btn:hover, .next-btn:hover { background: #b91c1c; transform: translateY(-2px); }

/* Success Form */
.form-success {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 60px 30px;
    min-height: 500px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.02); animation: fadeIn 0.5s ease forwards;
}
.form-success.hidden { display: none !important; }
.checkmark {
    width: 160px; height: 160px; border-radius: 50%; display: block; stroke-width: 4; stroke: #dc2626;
    stroke-miterlimit: 10; margin: 0 auto 30px auto; box-shadow: inset 0px 0px 0px #dc2626;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark-circle {
    stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 4; stroke-miterlimit: 10;
    stroke: #dc2626; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
    transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
.form-success h3 { color: #0f172a; font-size: 1.5rem; margin-bottom: 10px; }
.form-success .reset-form-link {
    background: none; border: none; color: #dc2626; font-size: 1rem; font-weight: 600;
    margin-top: 20px; cursor: pointer; text-decoration: underline; transition: color 0.3s;
}
.form-success .reset-form-link:hover { color: #b91c1c; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .container { padding: 0 30px; }
    .nav-container { gap: 30px; }
    .hero-heading { font-size: 2.8rem; }
    .service-text h3 { font-size: 1.8rem; }
    .service-text p { font-size: 1.1rem; }
}
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .nav-container { justify-content: space-between; width: 100%; }
    .nav-logo { margin: 0; z-index: 1001; }
    .nav-logo img { height: 34px; }
    .menu-toggle { display: flex; }
    
    .nav-links {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column;
        justify-content: center; align-items: center; gap: 40px; opacity: 0; visibility: hidden;
        pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000;
    }
    .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .nav-links a { font-size: 2rem; }
    
    .menu-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    
    .hero-stats { gap: 15px; }
    .hero-stat-number { font-size: 1.8rem; }
    .hero-stat-label { font-size: 0.75rem; }
    
    .form-step { width: 100%; padding: 30px 15px; border: none; box-shadow: none; background: rgba(255, 255, 255, 0.95); }
    .review-card { width: 300px; }
    
    .product-page { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .product-detail-view {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; border-radius: 0;
        padding: 80px 20px 40px 20px; z-index: 1005; background-color: #780f19; margin: 0; overflow-y: auto;
    }
    .detail-content { flex-direction: column; align-items: center; justify-content: flex-start; height: auto; min-height: 100%; gap: 30px; }
    
    .services-container::before { left: 0; transform: none; }
    .service-box, .service-box:nth-child(even), .service-box:nth-child(odd) { flex-direction: column; align-items: flex-start; gap: 20px; }
    .service-box::before { left: 0; top: 0; transform: translate(-10px, 20px); }
    
    /* Keep the service text clear of the timeline dot on mobile */
    .service-img-wrapper { width: 100%; padding-left: 35px; }
    .service-text { width: calc(100% - 35px); margin-left: 35px; }
    
    .service-img-placeholder { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    
    .phone-input-group { flex-direction: column; }
    .phone-input-group select, .phone-input-group input { width: 100%; }
    .form-actions { flex-direction: column-reverse; gap: 15px; }
    .submit-btn, .next-btn, .back-btn, .detail-back-btn { width: 100%; }
    .cookie-content { flex-direction: column; text-align: center; }
    .footer-legal-links { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 480px) {
    .container { padding: 0 20px; }
    .hero-heading { font-size: 2.1rem; }
    
    .hero-stats { gap: 8px; }
    .hero-stat { padding: 8px; }
    .hero-stat-number { font-size: 1.3rem; margin-bottom: 2px;}
    .hero-stat-label { font-size: 0.6rem; line-height: 1.15; letter-spacing: 0; }
    
    .product-page { grid-template-columns: 1fr; }
    .product-card, .cloned-card { width: 100%; max-width: 320px; margin: 0 auto; }
    .review-card { width: 260px; padding: 20px; }
    .cookie-buttons { flex-direction: column; width: 100%; }
    .cookie-buttons .btn { width: 100%; }
}

/* Footer Styles */
.site-footer { padding: 40px 0; border-top: 1px solid rgba(226, 232, 240, 0.6); }
.footer-container { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.footer-legal-links { display: flex; gap: 25px; }
.footer-legal-links a { color: #475569; text-decoration: none; font-size: 0.95rem; transition: color 0.3s; }
.footer-legal-links a:hover { color: #dc2626; text-decoration: underline; }
.footer-copy { color: #94a3b8; font-size: 0.85rem; }

/* Cookie Banner */
.cookie-consent-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; background: #0f172a; color: #f1f5f9; padding: 20px; z-index: 9999;
    display: flex; justify-content: center; box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
    transform: translateY(100%); animation: slideUp 0.6s ease forwards 0.5s; 
}
@keyframes slideUp { to { transform: translateY(0); } }
.cookie-consent-bar.hidden { display: none !important; }
.cookie-content { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; width: 100%; gap: 20px; }
.cookie-content p { margin: 0; color: #cbd5e1; font-size: 0.95rem; }
.cookie-content a { color: #fca5a5; text-decoration: underline; }
.cookie-buttons { display: flex; gap: 15px; flex-shrink: 0; }
.cookie-buttons .btn { margin-top: 0; padding: 8px 24px; font-size: 0.9rem; }
.btn-accept { background: #dc2626; }
.btn-decline { background: transparent; border: 1px solid #cbd5e1; color: #cbd5e1; }
.btn-decline:hover { background: #1e293b; border-color: #ffffff; color: #ffffff; }
/* ==========================================================================
   Legal / Policy Pages (Privacy, Cookies, Terms of Service, Terms & Conditions)
   ========================================================================== */
.legal-section { min-height: calc(100vh - 90px); padding: 40px 0 80px; }

.legal-container {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.legal-container h1 {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 20px;
    margin-bottom: 15px;
    font-size: 2.1rem;
}

.legal-meta {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 35px;
    line-height: 1.7;
}
.legal-meta strong { color: #334155; }

.legal-notice {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 35px;
    font-size: 0.9rem;
    color: #7f1d1d;
    line-height: 1.6;
}
.legal-notice strong { display: block; margin-bottom: 4px; }

.legal-container h2 {
    font-size: 1.4rem;
    margin-top: 40px;
    padding-top: 8px;
    scroll-margin-top: 110px;
}
.legal-container h3 {
    font-size: 1.1rem;
    margin-top: 25px;
    color: #1e293b;
    scroll-margin-top: 110px;
}
.legal-container h4 {
    font-size: 0.98rem;
    margin-top: 18px;
    margin-bottom: 8px;
    color: #334155;
}
.legal-container p { color: #475569; }
.legal-container ul, .legal-container ol {
    margin: 0 0 15px 22px;
    color: #475569;
}
.legal-container li { margin-bottom: 8px; }
.legal-container a { color: #dc2626; }
.legal-container a:hover { text-decoration: none; }
.legal-container hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 40px 0;
}

/* Flags any spot that still needs the user's real business details filled in.
   Kept highly visible on-page on purpose, so it can't accidentally go live unnoticed. */
.tbd {
    background: #fef08a;
    color: #78350f;
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.92em;
    white-space: nowrap;
}

/* Tables (e.g. lawful-basis table, cookie table) scroll horizontally on
   narrow screens instead of squashing or breaking the layout */
.legal-table-wrapper { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.legal-table th, .legal-table td {
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.92rem;
    color: #475569;
    vertical-align: top;
}
.legal-table th { background: #f8fafc; color: #0f172a; font-weight: 700; }

@media (max-width: 768px) {
    .legal-container { padding: 30px 20px; }
    .legal-container h1 { font-size: 1.6rem; }
    .legal-container h2 { font-size: 1.25rem; }
    .legal-container h3 { font-size: 1.05rem; }
}
@media (max-width: 480px) {
    .legal-container { padding: 25px 16px; border-radius: 8px; }
    .legal-container h1 { font-size: 1.4rem; }
    .legal-notice { padding: 14px 16px; font-size: 0.85rem; }
}