/* ==========================================================================
   Base Styles and Utilities
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* GSAP Setup */
.story-stage, .story-visual {
    opacity: 0;
    pointer-events: none;
}

/* Continuously Moving Animated Gradient */
@keyframes text-color-flow {
    0% { background-position: 200% center; }
    100% { background-position: 0% center; }
}

.text-gradient-animate {
    /* A premium, continuous color spectrum (Pink -> Orange -> Green -> Blue -> Purple -> Pink) */
    background: linear-gradient(to right, #FF3366, #FF9933, #22CC88, #00B3E6, #9933FF, #FF3366);
    background-size: 200% auto;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-color-flow 8s linear infinite;
    -webkit-text-fill-color: transparent;
}

/* Hero Enhanced Background Grid */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px);
    mask-image: radial-gradient(circle at center, black, transparent 90%);
    pointer-events: none;
    opacity: 0.6;
}

.hero-pill-container {
    will-change: transform, opacity;
}

.hero-subtext {
    will-change: transform, opacity;
}

.hero-stats {
    will-change: transform, opacity;
}

.hero-stats > div {
    position: relative;
    padding: 0 1rem;
}

.hero-stats > div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
    .hero-stats > div:not(:last-child)::after {
        display: none;
    }
    .hero-stats {
        gap: 2rem;
    }
}


/* ==========================================================================
   Trust Strip — Liquid Glass Marquee Animation
   ========================================================================== */

/* 
   We apply a native CSS transition directly to the animation logic.
   This guarantees full Safari/macOS native hardware acceleration
   without throwing CSS parsing errors caused by complex Houdini syntax.
*/
.trust-container {
    transition: all 0.5s ease-out;
}

.trust-marquee-content {
    will-change: transform;
    /* Clean robust constant-loop native animation */
    animation: scroll-ltr 22s linear infinite;
}

@keyframes scroll-ltr {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

.trust-logo {
    display: inline-block;
    height: clamp(120px, 14vw, 180px);
    width: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: default;
    will-change: transform;
    -webkit-user-drag: none;
}

.trust-logo:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   Featured Work — Compact Carousel
   ========================================================================== */

.featured-work-section {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(120, 170, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(200, 140, 255, 0.08) 0%, transparent 40%);
}

.mosaic-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
}

.mosaic-track {
    display: flex;
    align-items: center;
    padding: 0;
    width: 100%;
}

.featured-marquee-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    will-change: transform;
    gap: 40px;
    padding-right: 40px;
}

/* Aspect-Ratio First Sizing — No more width stretching */
.video-card {
    flex-shrink: 0;
    height: 50vh; /* Controlled height for cinematic look */
    min-height: 350px;
    max-height: 650px;
    position: relative;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
    
    /* Hardware Acceleration Bug Fix for Border Radius Blinking */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
}

.card-9-16 {
    aspect-ratio: 9 / 16;
}

.card-16-9 {
    aspect-ratio: 16 / 9;
    height: 28vh; /* Reduced from 35vh for a more refined, smaller look */
    min-height: 180px;
}

@media (max-width: 768px) {
    .video-card {
        height: 48vh;
        min-height: 300px;
    }
    .card-16-9 {
        height: 20vh; /* Reduced from 30vh for mobile balance */
        min-height: 140px;
    }
    .mosaic-viewport {
        padding: 40px 0;
    }
}

.video-card:hover {
    transform: scale(1.02) translateZ(0);
}

/* ==========================================================================
   Benefits Section — Premium Service Cards
   ========================================================================== */

.benefits-card {
    position: relative;
    background: #090909;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Hero CTA Button with Animated Glowing Border */
.animated-border-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    padding: 1.5px; /* Core thickness of the glowing border */
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    background: transparent;
    border: none;
    box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

.animated-border-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    background: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.8) 90%, rgba(255,255,255,0) 100%);
    transform: translate(-50%, -50%);
    animation: btn-border-spin 3s linear infinite;
    z-index: -2;
}

.animated-border-btn::after {
    content: '';
    position: absolute;
    inset: 1.5px; /* Important: this matches the padding of the parent for border width */
    background: #0d0d0d; /* Dark inner background */
    border-radius: 9999px;
    z-index: -1;
    transition: background 0.3s ease;
}

.animated-border-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(255, 255, 255, 0.15);
}

.animated-border-btn:hover::after {
    background: #151515;
}

.animated-border-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.animated-border-btn .btn-content {
    position: relative;
    z-index: 10;
    display: block;
}

@keyframes btn-border-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.benefits-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, rgba(255, 255, 255, 0.05) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.benefits-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.benefits-card i {
    filter: drop-shadow(0 0 10px currentColor);
}

@media (max-width: 768px) {
    .benefits-card {
        padding: 24px !important;
    }
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: inherit;
    overflow: hidden;
}

.video-card video {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform: translateZ(0); /* Hardware accelerated mask enforce */
}

/* Overlays & Arrows Removed */



/* ==========================================================================
   Meeting Scheduler Styles
   ========================================================================== */

/* Custom Scrollbar for Time List */
.scheduler-time-list::-webkit-scrollbar {
    width: 6px;
}
.scheduler-time-list::-webkit-scrollbar-track {
    background: transparent;
}
.scheduler-time-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}
.scheduler-time-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Background Color changing layer */
@keyframes continuousGradientBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.scheduler-gradient-bg {
    background: linear-gradient(270deg, #D4AF37, #FF4D00, #9933FF, #00B3E6, #D4AF37);
    background-size: 300% 300%;
    animation: continuousGradientBg 12s ease infinite;
}

/* Liquid Glass exact styles */
.liquid-calendar-container {
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.calendar-day {
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 0.875rem;
    position: relative;
    user-select: none;
}

/* ==========================================================================
   Workflow Path Styles
   ========================================================================== */

/* Responsive Workflow Node Triggers (Hover & ScrollTrigger Combo) */
.workflow-node.node-active .node-glow,
.workflow-node:hover .node-glow {
    opacity: 0.6;
}
.workflow-node.node-active .node-core,
.workflow-node:hover .node-core {
    transform: scale(1.15);
    border-color: currentColor; 
    background-color: rgba(255, 255, 255, 0.05);
}
.workflow-node.node-active .node-icon,
.workflow-node:hover .node-icon {
    color: white;
}
.workflow-node.node-active .node-label,
.workflow-node:hover .node-label {
    opacity: 1;
    transform: translate(0,0) !important;
}
.workflow-node.node-active .node-desc,
.workflow-node:hover .node-desc {
    opacity: 1;
}
.workflow-node.node-active .platform-icons,
.workflow-node:hover .platform-icons {
    opacity: 1;
}

/* ==========================================================================
   Creative Network Node Floating Styles
   ========================================================================== */

@keyframes floatAnim1 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-20px); }
}
@keyframes floatAnim2 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(15px); }
}
@keyframes floatAnim3 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) translateX(0); }
    50% { transform: translate(-50%, -50%) translateY(-10px) translateX(10px); }
}

.float-anim-1 { animation: floatAnim1 6s ease-in-out infinite; }
.float-anim-2 { animation: floatAnim2 5s ease-in-out infinite 1s; }
.float-anim-3 { animation: floatAnim3 7s ease-in-out infinite 2s; }
.float-anim-4 { animation: floatAnim1 8s ease-in-out infinite 1.5s; }

/* Subtext pulsing connection hover glow */
.network-hover-area:hover .network-lines {
    opacity: 0.6;
}

/* Button Soft Pulse */
@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.creative-join-btn {
    animation: pulseBtn 3s infinite;
}
.creative-join-btn:hover {
    animation: none;
}

/* ==========================================================================
   Testimonials Floating Styles
   ========================================================================== */
@keyframes subtleFloatAnim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.float-anim-subtle {
    animation: subtleFloatAnim 6s ease-in-out infinite;
}
/* Disable float on mobile to reduce processing and visual clutter */
@media (max-width: 768px) {
    .float-anim-subtle {
        animation: none;
    }
}