:root {
    --fts-purple: #4a148c;
    --fts-accent: #ba68c8;
    --dark-overlay: rgba(10, 10, 15, 0.92);
}

/* HEADER & LAYOUT */
.fts-header { position: fixed !important; top: 0; left: 0; width: 100%; background: #ffffff !important; height: 90px; display: flex !important; justify-content: space-between; align-items: center; padding: 0 5%; z-index: 999999 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-sizing: border-box; }
.fts-header img { display: block !important; max-height: 60px !important; width: auto !important; }
.fts-nav { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
.fts-nav a { text-decoration: none; color: #333 !important; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }

/* BREAKOUT SECTIONS */
.swoop-section { position: relative !important; width: 100vw !important; left: 50% !important; transform: translateX(-50%) !important; background: #000; overflow: hidden; z-index: 100 !important; }
.video-bg-container { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bg-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }

/* CONTROLS - RE-ENABLING CLICKS */
.nav-arrow { 
    position: absolute; top: 50% !important; transform: translateY(-50%) !important; 
    background: rgba(255,255,255,0.2) !important; color: #fff !important; 
    border: 1px solid #fff !important; width: 50px; height: 50px; 
    border-radius: 50%; cursor: pointer !important; z-index: 99999 !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    font-size: 1.5rem; transition: 0.3s; pointer-events: auto !important;
}
.nav-arrow:hover { background: var(--fts-accent) !important; border-color: var(--fts-accent) !important; }
.arrow-prev { left: 30px !important; } .arrow-next { right: 30px !important; }

.carousel-dots { position: absolute; bottom: 30px; left: 8%; z-index: 99999 !important; display: flex; gap: 12px; pointer-events: auto !important; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer !important; transition: 0.3s; pointer-events: auto !important; }
.dot.active { background: var(--fts-accent); transform: scale(1.3); }

/* ANGLED SWOOP OVERLAY */
.swoop-overlay { 
    position: absolute !important; inset: 0 !important; width: 60% !important; 
    background: var(--dark-overlay) !important; z-index: 10 !important; 
    display: flex !important; align-items: center !important; padding-left: 8% !important; 
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%) !important; 
    border-right: 4px solid var(--fts-accent) !important; 
    pointer-events: none; /* Clicks will pass through the overlay to the buttons behind/around it */
}
.swoop-overlay div { pointer-events: auto; } /* Keeps text/links clickable inside the overlay */
.swoop-overlay h1, .swoop-overlay p { color: #ffffff !important; text-shadow: 1px 1px 10px #000; margin: 0; }

/* BENTO GRID */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; grid-gap: 20px; margin: 60px 0; }
.bento-item { border-radius: 20px; padding: 30px; background: #f9f9fb; border: 1px solid #eee; display: flex; flex-direction: column; justify-content: flex-end; }

/* SLIDE LOGIC */
.slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; transition: opacity 0.8s ease-in-out; }
.active-slide { opacity: 1 !important; z-index: 10 !important; }