/* --- 1. VIDEO LAYER (Untouched) 146pm --- */
#intro-overlay {
  position: fixed; inset: 0; background: #ffffff; z-index: 99999; 
  display: flex; align-items: center; justify-content: center; 
  transition: opacity 1s ease;
}
#intro-video { width: 100%; height: 100%; object-fit: cover; }
.is-hidden { opacity: 0; pointer-events: none; }

.bento-grid {
    display: grid;
    /* This is the strict 4-column "Lego Baseplate" */
    grid-template-columns: repeat(4, 1fr); 
    
    /* This controls the height of a standard square (1x1) */
    grid-auto-rows: 240px; 
    
    gap: 20px; /* Space between tiles */
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    
    /* MAGIC COMMAND: This fills the white gaps automatically */
    grid-auto-flow: dense; 
}

/* FIX THE "PATHETIC" BIG RECTANGLE (Logo) */
/* Right now it is 2x2 (huge square). This makes it 2 wide x 1 tall (letterbox) */
.bento-item--lg {
    grid-column: span 2;
    grid-row: span 1; /* Changed from span 2 */
}

/* Ensure wide tiles span 2 columns */
.bento-item--wide {
    grid-column: span 2;
}

/* Ensure tall tiles span 2 rows */
.bento-item--tall {
    grid-row: span 2;
}
/* --- NEW SIZE: FULL WIDTH STRIP --- */
.bento-item--full {
    grid-column: 1 / -1; /* Spans the entire width (desktop, tablet, mobile) */
    min-height: 160px;   /* Slightly shorter than a square tile, looks more like a banner */
}

/* Responsive: 2 columns on tablets */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }
    /* On mobile, force everything to be 1x1 blocks so it scrolls nicely */
    .bento-item--wide, .bento-item--tall, .bento-item--lg {
        grid-column: span 1;
        grid-row: span 1;
    }
}


/* --- 4. TILE VISUALS --- */
.bento-item {
  position: relative;
  background: #fff;
  border-radius: 16px;
 border: 1px solid rgba(176, 138, 72, 0.18);
 
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.bento-item:hover {
  transform: translateY(-5px);
 border: 1px solid rgba(176,138,70,0.28);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  z-index: 10;
}

/* --- 5. IMAGES (Visible) --- */
.tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    
    transition: transform 0.5s ease;
    z-index: 0;
    opacity: .50; /* FULL VISIBILITY */
}
.bento-item:hover .tile-bg { transform: scale(1.05); }

/* Image Links */
.bg-marketing { background-image: url('/images/marketing.jpg'); }
.bg-artist    { background-image: url('/images/artist.jpg'); }
.bg-mind      { background-image: url('/images/mapping.jpg'); } 
.bg-kitchen   { background-image: url('/images/kitchen.jpg'); }
.bg-apoth     { background-image: url('/images/apothocary.jpg'); }
.bg-planner   { background-image: url('/images/planner.jpg'); }
.bg-utilities   { background-image: url('/images/mic.jpg'); }
.bg-pets   { background-image: url('/images/pets.jpg'); }
.bg-digital   { background-image: url('/images/digital.jpg'); }

/* --- 6. READABILITY GRADIENT --- */
.tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* --- 7. TEXT STYLES --- */
/* 1. MOVE CONTENT TO CENTER */
.tile-content {
    position: absolute;
    top: 50%;       /* Push down to middle */
    left: 50%;      /* Push right to middle */
    transform: translate(-50%, -50%); /* Pull back to exact center */
    width: 100%;    /* spanning full width */
    padding: 20px;
    text-align: center; /* Center the text itself */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 2. MAKE THE CATEGORY (Food Hub) A CLEAN LABEL */
.os-subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase; /* Make it look like a system label */
    letter-spacing: 2px;       /* Spread letters out for elegance */
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

/* 3. MAKE THE TITLE (Chef's Suite) BIGGER */
.os-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.8rem; /* Bigger for impact */
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Helps read against busy photos */
}

/* 4. KILL THE PILL (Make features just clean text) */
.feature-pill {
    background: transparent; /* No background color */
    border: none;
    padding: 0;
    font-size: 0.85rem;
    color: #e0e0e0; /* Soft white */
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0;
}

/* OPTIONAL: Darken the overlay slightly so centered white text pops */
.tile-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}

/* --- SPECIAL TILES --- */

/* LOGO TILE (2x2 White) */
.tile-logo {
    background: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.brand-name {
    font-family: 'Times New Roman', Times, serif;
    font-size: 52px;
    letter-spacing: -2px;
    color: #111;
    margin: 0;
}
.brand-tag {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: #b08a48;
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ACTION TILE (2x1 Gold) */
.tile-action {
    background: #000000 !important;
    border: 2px solid #b08a48;
    align-items: center;
    justify-content: center;
    animation: pulse-gold-border 2.5s infinite;
}

@keyframes pulse-gold-border {
    0% { box-shadow: 0 0 0 0 rgba(176, 138, 72, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(176, 138, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(176, 138, 72, 0); }
}

.action-text {
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    text-align: center;
}
.action-sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* STAR TILE (1x1 White) */
.tile-star {
    background: #fff;
    align-items: center;
    justify-content: center;
}
.star-icon {
    width: 60px;
    height: auto;
}

/* --- MODAL --- */
#app-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); z-index: 100000; display: none; align-items: center; justify-content: center; }
#app-modal.is-open { display: flex; }
.modal-card { background: #fff; border-radius: 12px; padding: 40px; max-width: 550px; width: 90%; position: relative; }
/* --- CSP SAFE INTERACTIONS --- */
.js-app-tile { cursor: pointer; }
.js-app-tile:focus-visible {
  outline: 2px solid rgba(176,138,72,0.75);
  outline-offset: 3px;
}

/* --- MODAL CONTENT (no inline styles) --- */
.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #111;
}

.modal-title {
  margin: 0;
  color: #333;
}

.modal-desc {
  margin-top: 12px;
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

.modal-cta {
  display: block;
  width: 100%;
  padding: 15px;
  background: #b08a48;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  margin-top: 18px;
}
.tile-action .action-content {
    text-align: center;
    flex-direction: column; /* Stacks the text vertically */
    padding: 10px;
    color: #ffffff;
}

.tile-action .action-main {
    font-size: 1.8rem; /* Make it significantly larger */
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffffff;
}

.tile-action .action-sub {
    color: #b08a48;
    font-size: 0.9rem;
}
.bg-gold-solid {
    background-color: #b08A48; /* Your Gold */
    background-image: none !important; /* Removes the photo */
}
/* In whatisclariia.css */
.bg-landing1400 {
    background-image: url('/images/your-file-name.webp'); /* Make sure extension is .webp */
    background-size: cover;
    background-position: center;
}
/* --- TILE CORE FIXES --- */

/* This ensures the image actually fills the space and is visible */
.tile-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Sits behind text */
}

/* --- SPECIFIC TILE BACKGROUNDS --- */

/* NEXA: The WebP fix */
.bg-landing1400 {
    background-image: url('/images/landing1400.webp') !important;
}

/* SCANNER: The Gold fix */
.bg-gold-solid {
    background-color: #b08A48 !important;
    background-image: none !important;
}

/* HOOD: The Solid fix */
.bg-hood-solid {
    background-color: #b08a48 !important;
    background-image: none !important;
}

/* --- HIERARCHY & CENTERING --- */

.tile-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    z-index: 3; /* Forces text to the very front */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.os-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.os-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* REMOVING THE PILL LOOK */
.feature-pill {
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 400;
    display: block;
}

/* --- OVERLAY --- */
/* This ensures the white text is readable against images */
.tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Darkens the image */
    z-index: 2;
}

/* --- MODAL CONTENT --- */
.modal-card {
    background: #fff;
    border-radius: 12px;
    padding: 50px 40px; /* More padding for a premium feel */
    max-width: 500px;
    width: 90%;
    position: relative;
    text-align: center; /* IMPACT: Centers the text and the button */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Deeper shadow */
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}
.modal-close:hover { color: #000; }

.modal-title {
    margin: 0 0 15px 0;
    color: #111;
    font-family: 'Nunito Sans', sans-serif; /* Ensures clean font */
    font-weight: 800;
    font-size: 2rem; /* Bigger title */
    letter-spacing: -0.5px;
}

.modal-desc {
    margin: 0 auto 30px auto; /* Auto margins help center the block */
    color: #555;
    line-height: 1.6;
    font-size: 1.05rem;
    max-width: 90%; /* Prevents text from hitting the edges */
}

.modal-cta {
    display: inline-block; /* IMPACT: Shrinks bar to fit text */
    width: auto;           /* IMPACT: Removes the "too long" bar */
    padding: 14px 40px;    /* Wider padding for shape */
    background: #b08a48;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;   /* IMPACT: Pill shape looks friendlier/modern */
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(176, 138, 72, 0.2);
}

/* Make it less "boring" with interaction */
.modal-cta:hover {
    transform: translateY(-2px);
    background: #9e7b3e;
    box-shadow: 0 8px 20px rgba(176, 138, 72, 0.4);
}
/* --- UPDATE: TILE BORDERS & SUBTITLES --- */

/* 1. The Border: Frames every tile like a premium card */
.bento-item {
    /* Existing styles... */
    border: 1px solid #b08a48; /* FULL STRENGTH GOLD */
}



/* 3. The Title: Keep it White for maximum contrast */
.os-title {
    color: #fff; 
}

/* EXCEPTION: The "Scanner" tile has a gold background, so we need White text there */
.bg-gold-solid ~ .tile-content .os-subtitle {
    color: rgba(255,255,255, 0.9); /* Revert to white for this specific tile */
}
/* --- COLORS UPDATE --- */

/* 1. Reset Top Label to White (Clean) */
.os-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.75rem; /* Kept small and neat */
}

/* 2. Make Main Title Big & White */
.os-title {
    color: #fff;
}
 /* --- FIX: SOLID COLORS (Make them 100% visible) --- */

/* 1. Force solid backgrounds to be full strength (removes the "pale" effect) */
.bg-gold-solid, 
.bg-hood-solid {
    background-color: #b08a48 !important; /* Your deep brand gold */
    background-image: none !important;
    opacity: 1 !important; /* CRITICAL: This fixes the "washed out" look */
}

/* 2. Fix the Bottom "Custom Architecture" Strip */
/* This targets the inline style you added for the bottom strip */
.bento-item--full .tile-bg {
    opacity: 1 !important;
}
/* Make the bottom strip Title bigger */
.bento-item--full .os-title {
    font-size: 2.2rem; /* Bigger than the standard 1.8rem */
}

/* Make the bottom strip Subtitle (Concierge Service) stand out */
.bento-item--full .os-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
    opacity: 1; /* Make it fully bright white */
}
/* --- ANIMATED MODAL ENTRANCE --- */

/* 1. The Starting State (Invisible & slightly down) */
.modal-card {
    /* ... keep your existing styles (background, padding, etc.) ... */
    opacity: 0;
    transform: translateY(20px) scale(0.95); /* Starts lower and slightly smaller */
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* "Apple-style" smooth ease */
}

/* 2. The Open State (Visible & in place) */
#app-modal.is-open .modal-card {
    opacity: 1;
    transform: translateY(0) scale(1); /* Floats up to perfect position */
}

/* --- DATA TRANSPARENCY SECTION --- */
.data-transparency-section {
    padding: 20px;
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.data-transparency-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.data-transparency-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.data-transparency-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.data-transparency-links a {
    color: #b08a48;
    text-decoration: none;
    font-weight: 600;
}

.data-transparency-links a:first-child {
    margin-right: 20px;
}

/* --- FIX: MOBILE VIDEO (FULL HEIGHT) --- */
@media (max-width: 768px) {
    #intro-video {
        /* This forces the video to be at least as tall as the screen */
        min-height: 100vh; 
        min-width: 100vw;
        
        /* This ensures it fills the box, cropping the sides if needed */
        object-fit: cover !important; 
        
        /* Centers the video so you lose equal parts left/right */
        object-position: center;
    }
    
    #intro-overlay {
        background: #fff;
        overflow: hidden; /* prevents any scrollbars */
    }
}
/* --- HERO CTA BUTTON STYLING --- */

/* Make the tile black with a gold border for high contrast */
.bento-item--cta {
    background: #000000 !important; /* Overrides default gold background */
    border: 3px solid #b08a48; /* Adds a prominent gold border */
    color: #ffffff !important; /* White text for maximum readability */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Add a subtle pulse animation to draw the eye */
    animation: pulse-gold 2.5s infinite;
}

/* Make the main text bigger and bolder */
.bento-item--cta .cta-title {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Style the subtitle */
.bento-item--cta .cta-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 400;
}

/* The pulse animation definition */
@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(176, 138, 72, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(176, 138, 72, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(176, 138, 72, 0);
    }
}

/* Add a hover effect for good measure */
.bento-item--cta:hover {
    background: #b08a48 !important;
    color: #000000 !important;
    cursor: pointer;
    transform: scale(1.02);
    transition: all 0.3s ease;
}
/* --- SMALL SIGNUP TILE --- */
.tile-free-signup {
    background: #1a1a1a !important;
    border: 1px solid rgba(176, 138, 72, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tile-free-signup:hover {
    background: #000000 !important;
    border-color: #b08a48;
    transform: scale(1.02);
}