/*
   Supreme Branding Styles
   Systematic IT Solutions - 2026
*/

/* ---------------------------------------------------------------------------
   Hero density.
   The hero read as noticeably "zoomed in" versus the rest of the page — big
   text, big spacing, so a viewport showed less of it before scrolling than
   expected. `zoom` on the WHOLE page (`html { zoom: 0.85 }`) was tried first
   and reverted: it does keep click hit-boxes correct, but it silently
   corrupts GSAP's own math for anything scroll-triggered further down the
   page, specifically around the pinned `.trifid-fluid-section` — measured
   directly: that pin's spacer reserves `offsetHeight` (unscaled layout px)
   for its scroll distance, while everything actually renders at
   `getBoundingClientRect()` (zoomed, ×0.85) size, so GSAP's internal scroll
   position and the page's real visual position permanently drift apart by
   that same 0.85 ratio for every element after the pin — the .roadmap-node
   reveal below ended up firing over 1000px "early" because of exactly this.
   Scoped to just `.hero-dark` instead: this section is a normal, unpinned
   block, so it doesn't have that failure mode, and it's what actually needed
   to look denser in the first place. Desktop/tablet only, matching before —
   mobile is already compact via its own breakpoints, and mobile browsers
   handle `zoom` inconsistently with touch/pinch gestures.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .hero-dark {
        zoom: 0.85;
    }
}

/* Glassmorphism FAQ & Sections */
.glass-accordion .accordion-items {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin-bottom: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.glass-accordion .accordion-items.faq-active {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.glass-accordion .accordion-buttons {
    padding: 25px 30px;
    background: transparent !important;
    border: none;
    font-weight: 600;
    color: #1a1a1a;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
}

.glass-accordion .accordion-body {
    padding: 0 30px 25px;
    color: #4d4d4d;
}

/* Atropos Card Styling */
.atropos-expertise-card {
    height: 100%;
}

.atropos-expertise-card .atropos-inner {
    border-radius: 24px;
    padding: 50px 40px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
    transition: border-color 0.3s ease;
}

.atropos-expertise-card .atropos-inner:hover {
    border-color: #000;
}

.atropos-card-icon {
    font-size: 40px;
    margin-bottom: 25px;
    display: block;
    color: #000;
}

.atropos-card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.atropos-card-text {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Liquid Tech Marquee */
.tech-marquee-wrapper {
    background: #f8f9fa;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.tech-marquee-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #999;
    margin-bottom: 50px;
    text-align: center;
}

.tech-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.4s ease;
}

.tech-icon-box:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.tech-icon-box img {
    max-height: 45px;
    object-fit: contain;
}

.tech-icon-text {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    white-space: nowrap;
}

/* GSAP Scroll Reveal Padding */
.supreme-section-ptb {
    padding: 140px 0;
}


/* Logo Hover Interaction */
.tp-header-logo a {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tp-header-logo a:hover {
    transform: scale(1.08);
}

/* Global Brand Color Overrides (Replacing with Logo Scheme) */
:root {
    --tp-theme-primary: #f99d4e; /* Vibrant Orange from Logo Icon */
    --tp-theme-secondary: #e93b6e; /* Vibrant Pink from Logo Icon */
    --tp-theme-accent: #f99d4e; 

    --tp-theme-green: var(--tp-theme-primary) !important;
    --tp-common-green-light: var(--tp-theme-primary) !important;
    --tp-common-green-regular: var(--tp-theme-primary) !important;
    --tp-common-green-1: var(--tp-theme-secondary) !important;
    --tp-common-yellow-green: var(--tp-theme-primary) !important;
    
    --tp-common-paste: var(--tp-theme-primary) !important; 
    --tp-common-red: var(--tp-theme-secondary) !important;
    --tp-common-red-2: var(--tp-theme-primary) !important; 
    --tp-common-red-3: var(--tp-theme-secondary) !important;
    --tp-common-yellow: var(--tp-theme-primary) !important;
}

/* --- Legacy GSAP preloader removed: replaced by css/sis-loader.css --- */


/* Specific Class Overrides (Buttons & Wrappers) */
.tp-btn-yellow-green {
    background-color: var(--tp-theme-primary) !important;
    color: #ffffff !important;
}

.tp-btn-yellow-green:hover {
    background-color: var(--tp-theme-secondary) !important;
    color: #ffffff !important;
}

.tp-funfact-green-wrap {
    background-color: #f0fafa !important;
    border-color: var(--tp-theme-primary) !important;
}

.tp-funfact-green-wrap.pink-style {
    border-color: #ff4d6d !important;
}

.tp-funfact-green-wrap.yellow-style {
    border-color: #ff9d4d !important;
}

/* Custom styles for elements that might have hardcoded green or specific logic */
.tp-line-white.green {
    background-image: linear-gradient(var(--tp-theme-primary), var(--tp-theme-primary)), linear-gradient(var(--tp-theme-primary), var(--tp-theme-primary)) !important;
}

.tp-btn-black.btn-green-bg .tp-btn-black-circle {
    background: linear-gradient(135deg, var(--tp-theme-secondary) 0%, var(--tp-theme-accent) 100%) !important;
}

.tp-btn-green-border {
    border-color: var(--tp-theme-primary) !important;
    color: var(--tp-theme-primary) !important;
}

.tp-btn-green-border:hover {
    background-color: var(--tp-theme-primary) !important;
    color: #ffffff !important;
}

/* Split Menu Alignment & Colors */
.tp-header-logo img {
    margin: 0 auto;
    display: block;
}

@media (max-width: 991px) {
    .tp-header-logo {
        text-align: left !important;
    }
    .tp-header-logo img {
        margin: 0;
    }
}

.tp-header-menu nav ul li a {
    color: #000000 !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tp-header-menu nav ul li a:hover {
    color: var(--tp-theme-primary) !important;
}

.tp-header-menu .tp-submenu li a {
    color: #333333 !important;
}

.tp-header-menu .tp-submenu li a:hover {
    color: var(--tp-theme-primary) !important;
    padding-left: 5px;
}

/* --- Refined GSAP Service Sections (Awwwards Style) --- */

/* 1. Horizontal Feature Scroll */
.horizontal-scroll-section {
    overflow: hidden;
    background: #0a0a0a;
    color: #fff;
}

.horizontal-scroll-container {
    display: flex;
    width: 300%; /* Adjust based on cards */
    height: 100vh;
}

.feature-panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
    background: #ffffff;
    overflow: hidden;
}

.feature-panel-content {
    width: 100%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 5;
}

.feature-panel-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-abstract-shape {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--tp-theme-primary) 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(60px);
    border-radius: 50%;
}

.feature-illustration {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    opacity: 1;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.05));
}

.feature-bg-text {
    position: absolute;
    bottom: -50px;
    right: -20px;
    font-size: 250px;
    font-weight: 900;
    color: rgba(0,0,0,0.02);
    text-transform: uppercase;
    line-height: 0.8;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .feature-panel-content {
        grid-template-columns: 1fr;
        padding: 60px 20px;
    }
    .feature-panel-right {
        display: none;
    }
}

.feature-number {
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: -40px;
    display: block;
    font-family: 'Outfit', sans-serif;
    color: #f0f0f0;
}

.feature-title {
    font-size: clamp(40px, 5vw, 80px);
    font-weight: 800;
    margin-bottom: 30px;
    line-height: 1;
    color: #111 !important;
}

.feature-text {
    font-size: 20px;
    line-height: 1.6;
    color: #444;
    max-width: 600px;
}
.feature-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}

.feature-icon-box {
    width: 120px;
    height: 120px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.feature-list {
    margin-top: 40px;
    list-style: none;
    padding: 0;
}

.feature-list li {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #111;
}

.feature-list li span {
    color: var(--tp-theme-primary);
    font-weight: 900;
}

.security-list li span {
    color: var(--tp-theme-secondary);
}

.performance-stats {
    display: flex;
    gap: 50px;
    margin-top: 50px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.stat-value {
    font-size: 48px;
    font-weight: 900;
    color: var(--tp-theme-primary);
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    margin-top: 10px;
}

/* 2. Refined Tech Nebula - Light Edition */
.tech-cloud-area {
    padding: 160px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.tech-nebula-container {
    width: 100%;
    height: 700px;
    background: radial-gradient(circle at center, rgba(249, 157, 78, 0.08) 0%, transparent 70%);
    border-radius: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.tech-tag {
    position: absolute;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s ease;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    min-width: 120px;
}

.tech-tag:hover {
    background: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
    color: #fff !important;
    box-shadow: 0 15px 40px rgba(249, 157, 78, 0.3);
    z-index: 1000 !important;
}

.nebula-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(249, 157, 78, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

/* 3. Sleek Reveal CTA - Light Edition */
.sleek-cta-area {
    padding: 180px 0;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.cta-reveal-wrapper {
    position: relative;
    height: 600px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 40px 100px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.cta-reveal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    transform: scale(1.2);
    filter: grayscale(1);
    transition: all 0.6s ease;
}

.cta-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(249, 157, 78, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: 2;
}

.cta-content-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}

.cta-title-large {
    font-size: clamp(50px, 8vw, 100px);
    font-weight: 900;
    color: #111;
    line-height: 0.9;
    letter-spacing: -2px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.cta-button-glow {
    display: inline-block;
    padding: 22px 50px;
    background: var(--tp-theme-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 100px;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 15px 40px rgba(249, 157, 78, 0.25);
}

.cta-button-glow:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(249, 157, 78, 0.4);
    background: #000;
    color: #fff;
}

/* 4. Modern Perspective Solution Cards */
.pp-service-details-solution-ptb {
    padding: 160px 0;
    background: #ffffff;
    position: relative;
}

.solution-card-wrapper {
    perspective: 1500px;
    margin-bottom: 40px;
}

.solution-tilt-card {
    background: #ffffff;
    border-radius: 40px;
    padding: 60px 45px;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease-out, box-shadow 0.4s ease;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 20px 60px rgba(0,0,0,0.03);
    height: 100%;
    z-index: 1;
    transform-style: preserve-3d;
}

.solution-tilt-card:hover {
    box-shadow: 0 40px 100px rgba(0,0,0,0.08);
}

.solution-card-bg-number {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 180px;
    font-weight: 900;
    color: rgba(0,0,0,0.08);
    line-height: 1;
    pointer-events: none;
}

.solution-card-icon-wrap {
    margin-bottom: 35px;
    position: relative;
    z-index: 10;
}

.solution-card-icon-wrap svg {
    width: 70px;
    height: 70px;
    transition: transform 0.4s ease;
}

.solution-tilt-card:hover .solution-card-icon-wrap svg {
    transform: translateZ(30px);
}
/* Advanced Funfact Kinetic Design */
.tp-funfact-area {
    background: #fff; /* Light theme background */
    overflow: hidden;
}

.kinetic-slide {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.tp-funfact-green-wrap {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 120px 0;
}

.kinetic-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(0,0,0,0.03);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.kinetic-bg-text.outline {
    -webkit-text-stroke: 1px rgba(0,0,0,0.05);
    color: transparent;
}

.container-1400 {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.funfact-visual-art {
    min-height: 600px;
}

.glass-visual-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    padding: 60px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.05);
    position: relative;
    z-index: 5;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.system-coordinates {
    position: absolute;
    top: 30px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 6;
}

.system-coordinates.right {
    left: auto;
    right: 20px;
}

.coord {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: #999;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.05);
    padding: 4px 10px;
    border-radius: 4px;
}

.connection-line {
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, var(--tp-theme-secondary), transparent);
    margin-left: 20px;
}

.floating-data-bits, .floating-metrics-bits, .floating-brand-bits {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.bit, .m-bit, .b-bit {
    position: absolute;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    background: #111;
    padding: 6px 15px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 10;
}

.bit:nth-child(1) { top: 15%; right: 10%; }
.bit:nth-child(2) { bottom: 15%; left: 15%; }
.bit:nth-child(3) { top: 50%; left: 15%; }

.m-bit:nth-child(1) { top: 12%; left: 12%; background: var(--tp-theme-secondary); }
.m-bit:nth-child(2) { bottom: 18%; right: 12%; background: var(--tp-theme-primary); }
.m-bit:nth-child(3) { top: 45%; right: 10%; background: #111; }

.b-bit:nth-child(1) { top: 18%; left: 15%; background: var(--tp-theme-secondary); }
.b-bit:nth-child(2) { bottom: 15%; right: 15%; background: var(--tp-theme-primary); }
.b-bit:nth-child(3) { top: 60%; left: 12%; background: #111; }

.large-kinetic {
    font-size: 80px !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    margin-bottom: 30px !important;
}

.modern-glow {
    color: var(--tp-theme-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    display: block;
    margin-bottom: 15px;
}

.f-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.feat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feat-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tp-theme-secondary);
}

.feat-item span {
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

.magnetic-item {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 991px) {
    .large-kinetic {
        font-size: 50px !important;
    }
    .funfact-visual-art {
        min-height: 400px;
    }
    .kinetic-bg-text {
        font-size: 40vw;
    }
}


.solution-card-icon-wrap svg {
    width: 45px;
    height: 45px;
}

.solution-card-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    margin-bottom: 30px;
    transform: translateZ(40px);
}

.solution-card-list {
    list-style: none;
    padding: 0;
    transform: translateZ(30px);
}

.solution-card-list li {
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.solution-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-theme-primary);
}

.solution-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    border: 2px solid var(--tp-theme-primary);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.solution-tilt-card:hover .solution-glow-border {
    opacity: 0.3;
}

.solution-card-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    margin-bottom: 30px;
    transform: translateZ(40px);
}

.solution-card-list {
    list-style: none;
    padding: 0;
    transform: translateZ(30px);
}

.solution-card-list li {
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.solution-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-theme-primary);
}

.solution-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    border: 2px solid var(--tp-theme-primary);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}


.solution-tilt-card:hover .solution-glow-border {
    opacity: 0.3;
}

/* 
/* 5. Modern Service Overview - Mesh & Parallax Edition */
.service-overview-premium {
    padding: 160px 0;
    background: #fcfcfc;
    position: relative;
    overflow: hidden;
}

.overview-mesh-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 30% 20%, rgba(249, 157, 78, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 70% 80%, rgba(233, 59, 110, 0.03) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
    animation: meshRotate 30s linear infinite;
}

@keyframes meshRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.overview-content-wrap {
    position: relative;
    z-index: 2;
}

.overview-label {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(249, 157, 78, 0.05);
    border: 1px solid rgba(249, 157, 78, 0.1);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    color: #f99d4e;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.overview-title-modern {
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 900;
    color: #111;
    line-height: 1.1;
    margin-bottom: 40px;
}

.overview-text-reveal {
    font-size: 20px;
    line-height: 1.7;
    color: #555;
    max-width: 650px;
    margin-bottom: 50px;
}

.overview-visual-stack {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image-wrap {
    width: 80%;
    height: 80%;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,0.06);
    transform: rotate(-2deg);
}

.main-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-tech-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    border: 1px solid rgba(0,0,0,0.03);
}

.tech-card-1 { top: 10%; right: 0; transform: rotate(5deg); }
.tech-card-2 { bottom: 15%; left: -5%; transform: rotate(-8deg); }
.tech-card-3 { top: 40%; left: -10%; transform: rotate(-5deg); }

.tech-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.approach-item {
    background: #ffffff;
    padding: 25px;
    border-radius: 25px;
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 20px;
}

.approach-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    border-color: rgba(249, 157, 78, 0.2);
}

.approach-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: rgba(249, 157, 78, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f99d4e;
    font-size: 24px;
}

.approach-content h5 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #111;
}

/* 6. Modern Hero Service Banner - Kinetic & 3D Edition */
.hero-banner-premium {
    padding: 160px 0 100px;
    background: #fcfcfc;
    position: relative;
    overflow: hidden;
}

.hero-mouse-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(249, 157, 78, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.hero-tagline {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: rgba(0,0,0,0.4);
    position: relative;
    z-index: 5;
    display: inline-block;
    margin-bottom: 40px;
}

.hero-title-kinetic {
    font-size: clamp(55px, 8vw, 130px);
    font-weight: 900;
    color: #111;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    padding: 0 30px;
}

.hero-title-kinetic span, 
.hero-title-kinetic .word {
    display: inline-block;
    padding: 0 15px;
}

.hero-title-kinetic span {
    display: inline-block;
}

.hero-text-modern {
    font-size: 20px;
    line-height: 1.7;
    color: #555;
    max-width: 600px;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
}

.hero-stat-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 10;
}

.hero-stat-card {
    background: #ffffff;
    padding: 35px 50px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.02);
    box-shadow: 0 10px 40px rgba(0,0,0,0.01);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

.hero-stat-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 30px 70px rgba(0,0,0,0.05);
    border-color: rgba(249, 157, 78, 0.1);
}

.stat-num-large {
    font-size: 56px;
    font-weight: 900;
    color: #111;
    line-height: 1;
}

.stat-label-modern {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.floating-3d-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.floating-3d-obj {
    position: absolute;
    opacity: 0.6;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.05));
}

.obj-1 { top: 15%; right: 10%; width: 120px; }
.obj-2 { bottom: 20%; left: 5%; width: 100px; }
.obj-3 { top: 40%; right: 25%; width: 60px; opacity: 0.3; }

.hero-badge-modern {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(249, 157, 78, 0.05);
    color: #f99d4e;
    font-weight: 800;
    border-radius: 100px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    border: 1px solid rgba(249, 157, 78, 0.1);
    position: relative;
}

.hero-badge-modern::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(249, 157, 78, 0.1);
}

/* 7. Continuous Moving Gradient Animation */
.moving-gradient-text {
    background: linear-gradient(to right, #f99d4e, #e93b6e, #f99d4e);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientFlow 3s linear infinite;
    display: inline-block;
}

@keyframes gradientFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 8. Modern Gradient Buttons */
.moving-gradient-btn {
    background: linear-gradient(to right, #f99d4e, #e93b6e, #f99d4e);
    background-size: 200% auto;
    color: #ffffff !important;
    padding: 18px 40px;
    border-radius: 100px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 10px 30px rgba(233, 59, 110, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: gradientFlow 3s linear infinite;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.moving-gradient-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 50px rgba(233, 59, 110, 0.4);
    color: #ffffff !important;
}

.moving-gradient-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.moving-gradient-btn:hover i {
    transform: translateX(5px);
}

/* 9. Advanced Section-Specific Cursor Styles */
#magic-cursor {
    pointer-events: none;
}

#ball {
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cursor-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    letter-spacing: 1px;
}

/* State: View Details */
.cursor-view #ball {
    width: 80px !important;
    height: 80px !important;
    background-color: rgba(249, 157, 78, 0.9) !important;
    border: none !important;
}
.cursor-view .cursor-label { opacity: 1; }

/* State: Drag / Scroll */
.cursor-drag #ball {
    width: 100px !important;
    height: 100px !important;
    background-color: rgba(233, 59, 110, 0.9) !important;
    border: none !important;
}
.cursor-drag .cursor-label { opacity: 1; }

/* State: 3D Tilt */
.cursor-tilt #ball {
    width: 70px !important;
    height: 70px !important;
    background-color: rgba(17, 17, 17, 0.9) !important;
    border: 2px solid #f99d4e !important;
}
.cursor-tilt .cursor-label { opacity: 1; }

/* State: Highlight (Hero Section) */
.cursor-highlight #ball {
    width: 80px !important;
    height: 80px !important;
    background-color: rgba(17, 17, 17, 0.8) !important;
    border: 1px solid rgba(249, 157, 78, 0.5) !important;
    backdrop-filter: blur(5px);
    mix-blend-mode: normal;
}
.cursor-highlight .cursor-label { 
    opacity: 1; 
    color: #f99d4e;
}

/* 10. Modern Advanced FAQ Section */
.modern-faq-section {
    padding: 140px 0;
    background: radial-gradient(circle at top left, #ffffff, #fcfcfc);
    position: relative;
    overflow: hidden;
}

.faq-visual-shape {
    position: absolute;
    top: 10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(233, 59, 110, 0.05) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 1;
}

.modern-faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.faq-item-premium {
    background: #ffffff;
    border-radius: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    display: block;
}

.faq-item-premium:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 157, 78, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.faq-header-premium {
    padding: 25px 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.faq-question {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.faq-icon-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(249, 157, 78, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f99d4e;
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-size: 14px;
}

.faq-item-premium.active .faq-icon-toggle {
    background: #e93b6e;
    color: #fff;
    transform: rotate(135deg);
}

.faq-content-premium {
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 35px;
    background: rgba(249, 157, 78, 0.01);
}

.faq-item-premium.active .faq-content-premium {
    max-height: 500px;
    padding-bottom: 30px;
}

.faq-answer-inner {
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.03);
}

.faq-answer {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin: 0;
}
/* 11. Modern Services Showcase Section */
.tp-inner-service-area {
    padding: 80px 0;
    background: #ffffff;
    position: relative;
    overflow: visible !important; /* Ensure no clipping */
}

.inner-service-1-left {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    padding-right: 40px;
    z-index: 100;
    height: fit-content; /* Critical for sticky inside flex/grid */
    transition: opacity 0.3s ease;
}

.inner-service-1-left > span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #bbb;
    margin-bottom: 40px;
    display: block;
}

.service-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-nav-item {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #999;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    white-space: nowrap;
    opacity: 0.6;
}

.service-nav-item.active {
    color: #e93b6e;
    opacity: 1;
    transform: translateX(10px);
}

.service-nav-item::before {
    content: '';
    width: 0;
    height: 2px;
    background: #e93b6e;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-nav-item.active::before {
    width: 20px;
}

.service-item-modern {
    margin-bottom: 120px;
    position: relative;
    opacity: 1; /* Handled by GSAP reveal */
}

.service-num-huge {
    font-size: clamp(200px, 25vw, 400px);
    font-weight: 900;
    line-height: 0.8;
    color: rgba(249, 157, 78, 0.02);
    position: absolute;
    top: -80px;
    left: -50px;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.02);
}

.service-content-box {
    position: relative;
    z-index: 5;
    padding-top: 40px;
}

.service-category-tag {
    font-size: 14px;
    font-weight: 800;
    color: #f99d4e;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 25px;
    display: block;
}

.service-main-title {
    font-size: clamp(40px, 6vw, 70px);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 10px;
    color: #111;
}

.service-desc-modern {
    font-size: 17px;
    color: #555;
    max-width: 650px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-features-list {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.service-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-decoration: none !important;
    position: relative;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.feature-info {
    display: flex;
    align-items: center;
    gap: 30px;
    z-index: 2;
}

.feature-num {
    font-size: 14px;
    font-weight: 800;
    color: #e93b6e;
    font-family: 'Outfit', sans-serif;
}

.feature-label {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 800;
    color: #111;
    transition: all 0.4s ease;
}

.feature-icon-minimal {
    color: #999;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.feature-row-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90deg, #e93b6e 0%, #f99d4e 100%);
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-feature-row:hover .feature-row-bg {
    height: 100%;
}

.service-feature-row:hover .feature-label,
.service-feature-row:hover .feature-num,
.service-feature-row:hover .feature-icon-minimal {
    color: #fff;
    transform: translateX(15px);
}

.service-feature-row:hover .feature-icon-minimal {
    transform: rotate(45deg) translateX(-15px);
    color: #e93b6e;
}

/* Service Detail Image Hover Effect */
.service-visual-box {
    position: relative;
    margin-top: 60px;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
}

.service-visual-box img {
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-visual-box:hover img {
    transform: scale(1.1);
}

.service-visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-visual-box:hover .service-visual-overlay {
    opacity: 1;
}

@media (max-width: 991px) {
    .service-sidebar-nav {
        position: relative;
        top: 0;
        margin-bottom: 80px;
        padding-right: 0;
    }
    .service-features-grid {
        grid-template-columns: 1fr;
    }
    .service-num-huge {
        font-size: 150px;
        top: -40px;
    }
}

/* 12. Premium Ticker Section (Light Theme) */
.premium-ticker-wrapper {
    overflow: hidden;
    background: #fdfdfd;
    padding: 100px 0;
    display: flex;
    white-space: nowrap;
    border-top: 1px solid rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.03);
    position: relative;
}

.premium-ticker-inner {
    display: flex;
    /* Animation handled by GSAP for better control */
}

.ticker-item {
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.ticker-text {
    font-size: clamp(50px, 8vw, 120px);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.2); /* Darker for readability */
    text-transform: uppercase;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}

.ticker-text:hover {
    color: #e93b6e; /* Brand color on hover */
    -webkit-text-stroke: 1.5px #e93b6e;
}

.ticker-text .dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
    border-radius: 50%;
    margin: 0 60px;
    vertical-align: middle;
}

/* reveal animation utility */
.reveal-anim {
    opacity: 1; /* Ensure visible by default */
}

/* 13. Premium About Hero Section */
.about-hero-premium {
    padding: 180px 0 100px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.about-hero-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.04) 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.5;
    pointer-events: none;
}

.about-hero-tag {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #bbb;
    margin-bottom: 20px;
}

.about-hero-title {
    font-size: clamp(55px, 8vw, 130px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #111;
    white-space: nowrap;
    padding: 0 20px;
    text-transform: uppercase;
}

.about-hero-title .title-line {
    display: block;
    position: relative;
    padding-bottom: 0.1em; /* Space for descenders */
}

.about-hero-title .pink-text {
    background: linear-gradient(90deg, #e93b6e 0%, #f99d4e 50%, #e93b6e 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradientMove 4s linear infinite;
}

@keyframes textGradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.about-hero-description {
    margin-bottom: 20px;
}

.about-sub-label {
    margin-bottom: 15px;
}

.about-sub-label span {
    font-size: 12px;
    font-weight: 800;
    background: #f1f1f1;
    padding: 5px 15px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
}

.about-hero-description p {
    font-size: 17px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* About Hero Ticker */
.about-hero-ticker-wrap {
    margin-top: 80px;
    white-space: nowrap;
    overflow: hidden;
    padding: 30px 0;
    border-top: 1px solid rgba(0,0,0,0.04);
}

.about-hero-ticker-inner {
    display: flex;
}

.ticker-text-huge {
    font-size: clamp(100px, 15vw, 200px);
    font-weight: 900;
    color: rgba(0,0,0,0.02); /* Very subtle fill */
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.2); /* Thicker and darker stroke */
    text-transform: uppercase;
    line-height: 1;
}

.ticker-text-huge span {
    color: #e93b6e;
    margin: 0 40px;
}

@media (max-width: 1200px) {
    .about-hero-title .pink-text {
        margin-left: 0;
    }
    .about-hero-description {
        padding-left: 0;
        border-left: none;
        margin-top: 40px;
    }
}

/* 14. Refined Mission Who We Are Section */
.about-refined-wrap {
    padding: 160px 0;
    position: relative;
    background: #fff;
}

.refined-sidebar {
    position: sticky;
    top: 150px;
}

.brand-eyebrow {
    font-size: 14px;
    font-weight: 800;
    color: #e93b6e;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
}

.refined-heading {
    font-size: 55px;
    font-weight: 900;
    line-height: 1.1;
    color: #111;
    margin-bottom: 50px;
    letter-spacing: -2px;
}

.accent-text {
    color: #e93b6e;
}

.refined-image-box {
    position: relative;
    padding: 20px;
}

.image-frame-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    border-top: 2px solid #e93b6e;
    border-left: 2px solid #e93b6e;
    z-index: 0;
}

.refined-img-inner {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    aspect-ratio: 4/5;
    filter: url(#liquid-water-filter); /* Hook for liquid animation */
    transition: filter 0.3s ease;
}

.refined-parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.refined-content-area {
    padding-left: 40px;
}

.refined-main-text {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    color: #333;
    margin-bottom: 80px;
}

.mission-pillars-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 80px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.pillar-item {
    display: flex;
    gap: 30px;
    padding: 40px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    transform: translateY(40px);
}

.pillar-item.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

.pillar-item:nth-child(2) { transition-delay: 0.15s; }
.pillar-item:nth-child(3) { transition-delay: 0.3s; }

.pillar-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: #fff8f9;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pillar-item:hover .pillar-icon {
    background: #e93b6e;
    transform: scale(1.1) rotate(5deg);
}

.pillar-item:hover .pillar-icon svg path,
.pillar-item:hover .pillar-icon svg rect,
.pillar-item:hover .pillar-icon svg circle {
    stroke: #fff;
}

.pillar-info {
    flex-grow: 1;
}

.pillar-info h4 {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.2;
}

.pillar-info p {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
}

.pillar-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: #fff8f9;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* JS Animation Helper Classes */
.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.2em;
}

.word-inner {
    display: inline-block;
}

.refined-philosophy-box {
    background: #f9f9fb;
    padding: 60px;
    border-radius: 30px;
}

.phil-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #e93b6e;
    margin-bottom: 20px;
}

.refined-philosophy-box h3 {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 25px;
    line-height: 1.2;
}

.refined-philosophy-box p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .refined-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 80px;
    }
    .refined-content-area {
        padding-left: 0;
    }
    .refined-heading {
        font-size: 40px;
    }
}

.service-modern-img-inner {
    filter: url(#liquid-water-filter);
    transition: filter 0.3s ease;
}

/* 15. Redesigned Funfact Panels */
.tp-funfact-area {
    background: #fff;
}

.funfact-visual-art {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9fb;
    border-radius: 40px;
    overflow: visible; /* Allow floating bits to overlap slightly without clipping */
}

.art-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(233, 59, 110, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(233, 59, 110, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}

.art-grid-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.art-orbit-rings {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(233, 59, 110, 0.1);
    border-radius: 50%;
}

.art-orbit-rings::before {
    content: '';
    position: absolute;
    inset: -40px;
    border: 1px solid rgba(233, 59, 110, 0.05);
    border-radius: 50%;
}

.big-metric-text {
    font-size: 180px;
    font-weight: 950;
    line-height: 1;
    color: #e93b6e;
    letter-spacing: -10px;
    z-index: 2;
    position: relative;
}

.big-metric-text em {
    font-style: normal;
    font-size: 0.5em;
    vertical-align: super;
}

.funfact-info-box {
    padding-left: 60px;
}

.f-eyebrow {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #e93b6e;
    display: block;
    margin-bottom: 20px;
}

.f-title {
    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    color: #111;
    margin-bottom: 30px;
    letter-spacing: -3px;
}

.f-desc {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 30px;
}

.f-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.f-tags span {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 18px;
    background: #f1f1f1;
    border-radius: 50px;
    color: #111;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.f-tags.tech span {
    background: #111;
    color: #fff;
}

.f-tags.impact span {
    background: #fff5f7;
    color: #e93b6e;
    border: 1px solid rgba(233, 59, 110, 0.1);
}

.design-detail-box {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.d-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.tech-nodes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.t-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
}

.t-node:nth-child(1) { top: 30%; right: 20%; }
.t-node:nth-child(2) { bottom: 40%; left: 15%; }

.m-node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e93b6e;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(233, 59, 110, 0.4);
}

.marker-1 { top: 40%; left: 45%; }
.marker-2 { top: 35%; left: 60%; }
.marker-3 { top: 55%; left: 55%; }

.floating-icons-box {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.f-icon {
    position: absolute;
}

.icon-1 { top: 20%; left: 20%; }
.icon-2 { bottom: 20%; right: 20%; }

.code-snippet-box {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background: #111;
    padding: 20px;
    border-radius: 15px;
    width: 200px;
}

.code-line {
    height: 4px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 8px;
    border-radius: 2px;
}

.code-line.short { width: 40%; }
.code-line.mid { width: 70%; }

@media (max-width: 1200px) {
    .funfact-visual-art { height: 350px; }
    .big-metric-text { font-size: 120px; }
    .f-title { font-size: 50px; }
    .funfact-info-box { padding-left: 0; margin-top: 40px; }
}

/* Split Text Reveal Utilities */
.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.word-inner {
    display: inline-block;
    transform: translateY(0);
}

/* -------------------------------------------
   PREMIUM CONTACT SECTION
   ------------------------------------------- */
.premium-contact-area {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.premium-contact-glass {
    background: #ffffff;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
}

.contact-map-premium {
    height: 100%;
    min-height: 600px;
    position: relative;
    background: #f0f0f0;
}

.map-overlay-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent, rgba(0,0,0,0.4));
    pointer-events: none;
    z-index: 1;
}

.contact-location-tag {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #111;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.contact-location-tag i {
    color: var(--tp-theme-primary);
}

.contact-form-premium {
    padding: 80px 60px;
    background: #fafafa;
}

.form-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--tp-theme-primary);
    margin-bottom: 10px;
}

.form-title {
    font-size: 45px;
    font-weight: 900;
    color: #111;
    margin-bottom: 50px;
    letter-spacing: -1px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group-modern {
    position: relative;
    margin-bottom: 10px;
}

.form-group-modern.full-width {
    grid-column: span 2;
}

.form-group-modern input,
.form-group-modern textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding: 25px 0 10px;
    font-size: 16px;
    color: #111;
    font-weight: 500;
    transition: all 0.3s ease;
}

.form-group-modern textarea {
    min-height: 120px;
    resize: none;
}

.form-group-modern label {
    position: absolute;
    top: 25px;
    left: 0;
    font-size: 16px;
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-group-modern input:focus + label,
.form-group-modern input:not(:placeholder-shown) + label,
.form-group-modern textarea:focus + label,
.form-group-modern textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 12px;
    font-weight: 800;
    color: #e93b6e;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.group-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #e93b6e;
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.form-group-modern input:focus ~ .group-focus-border,
.form-group-modern textarea:focus ~ .group-focus-border {
    width: 100%;
}

.form-submit-wrap {
    grid-column: span 2;
    margin-top: 20px;
}

.premium-submit-btn {
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
    color: #fff;
    border: none;
    padding: 20px 50px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    width: 100%;
    justify-content: center;
}

.premium-submit-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(233, 59, 110, 0.4);
}

.premium-submit-btn i {
    font-size: 16px;
    transition: transform 0.4s ease;
}

.premium-submit-btn:hover i {
    transform: translate(5px, -5px);
}

.premium-alert {
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
}

.premium-alert.success {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

@media (max-width: 991px) {
    .premium-contact-glass {
        flex-direction: column;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-group-modern.full-width {
        grid-column: span 1;
    }
    .form-submit-wrap {
        grid-column: span 1;
    }
    .contact-form-premium {
        padding: 60px 30px;
    }
}

/* -------------------------------------------
   MODERN CONTACT INFO CARDS
   ------------------------------------------- */
.tp-contact-info-pills {
    background: #ffffff;
}

.contact-info-card-premium {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 30px;
    padding: 50px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contact-info-card-premium:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    border-color: #e93b6e;
}

.card-icon-wrap {
    width: 80px;
    height: 80px;
    background: #f8f8f8;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.contact-info-card-premium:hover .card-icon-wrap {
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
}

.card-icon-wrap i {
    font-size: 32px;
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease;
}

.contact-info-card-premium:hover .card-icon-wrap i {
    -webkit-text-fill-color: #fff;
    transform: scale(1.1);
}

.icon-glow {
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
    border-radius: 25px;
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.contact-info-card-premium:hover .icon-glow {
    opacity: 0.3;
}

.card-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 15px;
}

.card-value {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-value.address {
    line-height: 1.5;
    margin-bottom: 20px;
}

.card-value:hover {
    color: #e93b6e;
}

.card-sub-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

.card-link {
    font-size: 14px;
    font-weight: 700;
    color: #e93b6e;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    position: relative;
}

.card-link i {
    transition: transform 0.3s ease;
}

.card-link:hover i {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .contact-info-card-premium {
        padding: 40px 20px;
    }
}


/* --- High-End GSAP Mega Menu Glassmorphism --- */
.has-mega-menu {
    position: static !important;
}

.tp-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.45); /* More transparent */
    backdrop-filter: blur(45px) saturate(180%); /* Higher blur and saturation */
    -webkit-backdrop-filter: blur(45px) saturate(180%);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    padding: 100px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px) scale(0.96);
    transform-origin: top center;
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 999;
    overflow: hidden;
}

/* Decorative Mesh Background for Mega Menu */
.tp-megamenu::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle at 20% 30%, rgba(249, 157, 78, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(233, 59, 110, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
    animation: meshRotate 20s linear infinite;
}

/* .is-open, not :hover — js/mega-menu.js decides when the menu is open,
   because :hover can stick when the cursor leaves the browser window. */
.has-mega-menu.is-open .tp-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.mega-menu-item {
    padding: 0 45px;
    opacity: 0; 
    transform: translateY(30px);
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 5;
}

.mega-menu-item-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 45px;
}

.mega-menu-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(249, 157, 78, 0.1) 0%, rgba(233, 59, 110, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-theme-primary);
    font-size: 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.mega-menu-item:hover .mega-menu-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, var(--tp-theme-primary) 0%, var(--tp-theme-secondary) 100%);
    color: #fff;
    box-shadow: 0 15px 30px rgba(249, 157, 78, 0.3);
}

.col-xl-3:last-child .mega-menu-item {
    border-right: none;
}

.mega-menu-title {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #000;
    margin-bottom: 0;
    position: relative;
    display: block;
}

.mega-menu-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 25px;
    height: 3px;
    background: linear-gradient(to right, var(--tp-theme-primary), var(--tp-theme-secondary));
    border-radius: 10px;
}

.mega-menu-title a {
    color: inherit !important;
}

.mega-menu-list li {
    margin-bottom: 18px;
    display: block;
}

.mega-menu-list li a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.mega-menu-list li a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--tp-theme-primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mega-menu-list li a:hover {
    color: #000 !important;
    transform: translateX(10px);
}

.mega-menu-list li a:hover::before {
    opacity: 1;
    transform: scale(1.5);
}

@media (max-width: 1199px) {
    .tp-megamenu {
        display: none !important;
    }
}


/* Spotlight Effect for Mega Menu */
.tp-megamenu {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.tp-megamenu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(249, 157, 78, 0.08), transparent 40%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.has-mega-menu.is-open .tp-megamenu::after {
    opacity: 1;
}


/* Sidebar Nav Link Styling */
.service-nav-item a {
    color: inherit !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    width: 100%;
}

.service-nav-item:hover a {
    color: #e93b6e !important;
}


/* --- Premium Sticky Header Implementation --- */
#header-sticky.header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    animation: headerSlideDown 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    z-index: 10000 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

@keyframes headerSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Header link colors when sticky */
#header-sticky.header-sticky .tp-main-menu-content ul li a {
    color: #111 !important;
    font-weight: 600;
}

#header-sticky.header-sticky .logo-white {
    display: none !important;
}

#header-sticky.header-sticky .logo-black {
    display: block !important;
}

/* The homepage's floating white pill around the logo on scroll, now applied
   everywhere the sticky header appears (not just the dark-hero homepage),
   so the logo gets the same raised-card treatment site-wide. The homepage's
   own more specific .home-dark-hero-scoped copy of this rule (further down
   this file) still wins there; this is what every other page picks up. */
#header-sticky.header-sticky .tp-header-logo a {
    display: inline-block;
    padding: 9px 24px;
    border-radius: 999px;
    /* Frosted glass rather than solid white. The blur only works while the
       header bar itself has no backdrop-filter — a filtered parent becomes
       the backdrop root and the pill would blur nothing — so every header
       that shows this pill turns the bar's own blur off (see the
       .home-dark-hero and .sis-header-light blocks further down). */
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background .28s ease, padding .28s ease;
}

/* Ensure mega menu remains perfectly aligned when sticky */
#header-sticky.header-sticky .tp-megamenu {
    top: 100% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(40px) !important;
}


/* --- Modernized Design Thinking Process Section --- */
.process-modern-bg {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.process-kinetic-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(0,0,0,0.02);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.process-title-kinetic {
    font-size: clamp(60px, 8vw, 120px) !important;
    font-weight: 950 !important;
    line-height: 0.9 !important;
    letter-spacing: -4px !important;
    margin-bottom: 40px !important;
}

.process-intro-text {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 450px;
}

.process-card-modern {
    background: transparent;
    position: relative;
    padding: 50px;
    border-radius: 40px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 5;
    border: 1px solid rgba(0,0,0,0.04);
}

.process-card-glass {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 40px;
    z-index: -1;
    transition: all 0.5s ease;
}

.process-card-modern:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(233, 59, 110, 0.2);
    box-shadow: 0 40px 80px rgba(0,0,0,0.06);
}

.process-card-modern:hover .process-card-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(40px);
}

.process-card-modern .tp-work-number {
    width: 70px;
    height: 70px;
    background: #111;
    color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 30px;
    position: relative;
    transition: all 0.4s ease;
}

.step-glow {
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, #e93b6e 0%, #f99d4e 100%);
    border-radius: 24px;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-card-modern:hover .step-glow {
    opacity: 0.4;
}

.process-card-modern:hover .tp-work-number {
    background: #e93b6e;
    transform: rotate(-10deg);
}

.process-tag-list {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.process-tag-list span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0,0,0,0.04);
    padding: 5px 15px;
    border-radius: 50px;
    color: #888;
}

.process-card-modern:hover .process-tag-list span {
    background: rgba(233, 59, 110, 0.1);
    color: #e93b6e;
}


/* Fix for Process Card Visibility */
.process-card-modern {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Z-index fix for process cards */
.process-step-grid {
    position: relative;
    z-index: 100 !important;
}

.process-card-modern {
    z-index: 110 !important;
}


/* --- Premium Services Sidebar --- */
.premium-service-sidebar {
    position: relative;
    padding: 40px 30px;
    border-radius: 30px;
    overflow: hidden;
    z-index: 10;
    transition: all 0.4s ease;
}

.sidebar-glass-effect {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 30px;
    z-index: -1;
}

.sidebar-header {
    margin-bottom: 40px;
}

.sidebar-progress-track {
    width: 100%;
    height: 2px;
    background: rgba(0,0,0,0.05);
    margin-top: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.sidebar-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, #e93b6e, #f99d4e);
}

.service-nav-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-nav-item-modern {
    margin-bottom: 12px;
    position: relative;
}

.service-nav-item-modern a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 15px;
    color: #666 !important;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    background: transparent;
}

.nav-dot {
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.service-nav-item-modern a i {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
    font-size: 14px;
    color: #e93b6e;
}

.service-nav-item-modern.active a,
.service-nav-item-modern:hover a {
    color: #111 !important;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.service-nav-item-modern.active .nav-dot,
.service-nav-item-modern:hover .nav-dot {
    background: #e93b6e;
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(233, 59, 110, 0.5);
}

.service-nav-item-modern.active a i,
.service-nav-item-modern:hover a i {
    opacity: 1;
    transform: translateX(0);
}


/* Modern Select Styling for Contact Form */
.form-group-modern select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding: 25px 0 10px;
    font-size: 16px;
    color: #111;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.form-group-modern select:focus {
    outline: none;
}

.form-group-modern select:focus + label,
.form-group-modern select:not(:invalid) + label {
    top: 0;
    font-size: 12px;
    font-weight: 800;
    color: #e93b6e;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Custom Arrow DISABLED - was causing icons on ALL fields */


/* Fix for Select Label Overlap */
.form-group-modern select + label {
    top: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group-modern select:focus + label {
    color: #e93b6e !important;
}

.form-group-modern select {
    padding-top: 30px !important;
}


/* -------------------------------------------
   MODERN CONTACT REFINEMENTS
   ------------------------------------------- */
.form-group-modern {
    position: relative;
    padding-top: 15px;
}

.form-group-modern label {
    position: absolute;
    top: 35px;
    left: 0;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.form-group-modern.is-focused label,
.form-group-modern.has-value label {
    top: 0;
    font-size: 11px;
    color: #e93b6e;
    letter-spacing: 1px;
}

.form-group-modern input, 
.form-group-modern textarea,
.form-group-modern select {
    border-bottom: 1.5px solid rgba(0,0,0,0.06) !important;
    padding-bottom: 15px !important;
    font-family: 'Outfit', sans-serif;
}

.form-group-modern.is-focused input,
.form-group-modern.is-focused textarea {
    border-bottom-color: transparent !important;
}

.group-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #e93b6e, #f99d4e);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.premium-submit-btn {
    overflow: hidden;
    z-index: 1;
}

.btn-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.contact-info-card-premium {
    border: 1px solid rgba(0,0,0,0.04);
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    background: #f8f8f8;
    border-radius: 50px;
    color: #111;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s ease;
    margin: 0 10px 15px;
}

.social-pill:hover {
    background: #111;
    color: #fff;
    transform: translateY(-5px);
}

.social-pill.fb:hover { background: #1877f2; }
.social-pill.ig:hover { background: #e4405f; }
.social-pill.th:hover { background: #000000; }
.social-pill.pn:hover { background: #E60023; }
.social-pill.li:hover { background: #0077B5; }
.social-pill.tp:hover { background: #00b67a; }

.center-form-layout {
    max-width: 800px;
    margin: 0 auto;
}

/* Modern Custom Select Styling - NUCLEAR RESET */
.form-group-modern input,
.form-group-modern textarea,
.form-group-modern select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important; /* Force hide any background image first */
    box-shadow: none !important;
}

/* Specifically target only the select elements for the brand arrow */
.form-group-modern select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e93b6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Specific Browser Icon Removal (Chrome, Safari, Firefox, IE) */
.form-group-modern input::-webkit-calendar-picker-indicator,
.form-group-modern input::-webkit-inner-spin-button,
.form-group-modern input::-webkit-clear-button,
.form-group-modern input::-ms-reveal,
.form-group-modern input::-ms-clear,
.form-group-modern input::-webkit-contacts-auto-fill-button,
.form-group-modern input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none !important;
}

.form-group-modern select option {
    background: #fff;
    color: #333;
    padding: 15px;
}

.form-group-modern.is-focused select {
    background-position: right 10px center;
}

.sub-service-field.hidden {
    display: none !important;
    opacity: 0;
    transform: translateY(10px);
}

.form-group-modern.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

.form-group-modern.is-disabled label {
    color: #ccc !important;
}



/* ======================== */
/* 3D Realistic Globe       */
/* ======================== */
.globe-section {
    background: #050510;
    overflow: hidden;
    position: relative;
}

.globe-container {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: grab;
}

.globe-container:active {
    cursor: grabbing;
}

.globe-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.globe-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.globe-pin-label {
    position: absolute;
    display: inline-block;
    background: #050505;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.5px;
    pointer-events: none;
    transform: translate(35px, -50%);
    white-space: nowrap;
    border: 1px solid #00ddff;
}

.globe-pin-label.primary {
    font-size: 15px;
    padding: 8px 14px;
}

.pin-label-dot {
    display: none;
}

@keyframes globePinPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #00ddff; }
    50% { opacity: 0.5; transform: scale(1.6); box-shadow: 0 0 16px #00ddff; }
}

@media (max-width: 768px) {
    .globe-container {
        height: 380px;
    }
    .globe-pin-label {
        font-size: 11px;
        padding: 4px 12px;
    }
}
/* --- Responsive Hero & Kinetic Typography Fixes --- */
@media (max-width: 1200px) {
    .hero-title-kinetic {
        font-size: clamp(45px, 7vw, 100px);
    }
}

@media (max-width: 991px) {
    .hero-banner-premium {
        padding: 120px 0 60px;
    }
    .hero-title-kinetic {
        font-size: clamp(38px, 9vw, 65px);
        padding: 0 15px;
    }
    .hero-text-modern {
        font-size: 18px;
        margin-bottom: 40px;
    }
    .hero-stat-row {
        flex-wrap: wrap;
        gap: 20px;
    }
    .hero-stat-card {
        padding: 25px 30px;
        flex: 1 1 250px;
        justify-content: center;
    }
    .floating-3d-obj {
        transform: scale(0.7);
    }
    .obj-1 { right: 5%; }
    .obj-2 { left: 2%; }
}

@media (max-width: 575px) {
    .hero-banner-premium {
        padding: 100px 0 50px;
    }
    .hero-title-kinetic {
        font-size: 34px !important;
        letter-spacing: -1px;
    }
    .hero-title-kinetic .word {
        padding: 0 5px;
    }
    .hero-stat-card {
        padding: 20px;
        flex: 1 1 100%;
    }
    .stat-num-large {
        font-size: 40px;
    }
    .approach-grid {
        grid-template-columns: 1fr;
    }
    .cta-title-large {
        font-size: 40px;
    }
    .overview-title-modern {
        font-size: 36px;
    }
}
@media (max-width: 1200px) {
    .floating-tech-card {
        padding: 12px 20px;
        transform: scale(0.8);
    }
}

@media (max-width: 991px) {
    .overview-visual-stack {
        height: auto;
        margin-top: 50px;
    }
    .main-image-wrap {
        width: 100%;
        transform: none;
    }
    .floating-tech-card {
        display: none !important; /* Hide floating elements on mobile to prevent overlapping */
    }
}

/* Mobile Menu Button Visibility Fix - PREMIUM BRANDING VERSION */
@media (max-width: 991px) {
    .tp-offcanvas-open-btn {
        position: relative;
        z-index: 9999 !important;
        width: 45px !important;
        height: 45px !important;
        background: linear-gradient(135deg, #f99d4e 0%, #e93b6e 100%) !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none !important;
        padding: 0 !important;
        box-shadow: 0 4px 15px rgba(233, 59, 110, 0.4);
    }
}

@media (min-width: 992px) {
    .tp-offcanvas-open-btn {
        display: none !important;
    }
}

.tp-offcanvas-open-btn span:first-child {
    display: none !important;
}

.tp-offcanvas-open-btn i, .tp-offcanvas-open-btn span i {
    display: block !important;
    background: #fff !important;
    height: 2px !important;
    width: 22px !important;
    margin: 2px 0 !important;
    border-radius: 4px;
}

.tp-offcanvas-open-btn svg {
    fill: #fff !important;
    width: 20px;
}

@media (max-width: 991px) {
    .tp-header-logo img {
        max-width: 150px !important;
    }
}


/* ---------------------------------------------------------------------------
   Results rail
   Reuses the horizontal-scroll machinery that drove the old services rail, so
   the visual slot is the same; only what sits in it changed. The figure takes
   the place of the image, so it needs its own treatment rather than the
   object-fit rules the image slides used.
   --------------------------------------------------------------------------- */

.results-rail .result-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #16202c 0%, #2b1a24 100%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .12);
}

.results-rail .result-figure {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(120deg, #f99d4e, #e93b6e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-rail .result-number {
    font-size: clamp(72px, 11vw, 168px);
    font-variant-numeric: tabular-nums;
}

.results-rail .result-figure i {
    font-style: normal;
    font-size: clamp(30px, 4vw, 62px);
    margin-top: .18em;
    margin-left: .04em;
}

/* ---------------------------------------------------------------------------
   Pricing
   Replaces the "Future-Proof Architecture" block. Rows rather than cards: at
   three tiers a row lets the eye compare price and features straight across,
   which a card grid makes you do by jumping up and down.
   --------------------------------------------------------------------------- */

.sis-pricing {
    background: #fff;
    padding: 110px 0 120px;
    position: relative;
    z-index: 10;
}

.sis-pricing__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 62px;
}

@media (min-width: 992px) {
    .sis-pricing__head {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 60px;
        align-items: start;
    }
}

.sis-pricing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 20px;
}

.sis-pricing__eyebrow i { font-size: 10px; color: #e93b6e; }

.sis-pricing__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.02;
    color: #0d0d14;
    margin: 0;
}

.sis-pricing__lede {
    font-size: 17px;
    line-height: 1.6;
    color: #5a5a66;
    max-width: 46ch;
    margin: 0 0 26px;
}

/* --- billing toggle --- */

.sis-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sis-toggle__label {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #9a9aa6;
    transition: color .25s ease;
}

.sis-toggle__label.is-active { color: #0d0d14; }

.sis-toggle__switch {
    position: relative;
    width: 62px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #f2f2f5;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.sis-toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0d0d14;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), background .32s ease;
}

.sis-pricing.is-annual .sis-toggle__knob {
    transform: translateX(30px);
    background: linear-gradient(125deg, #f99d4e, #e93b6e);
}

.sis-toggle__save {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e9601f;
    background: #fdeee4;
    padding: 5px 11px;
    border-radius: 999px;
}

/* --- plan rows --- */

/* Classic 3-up pricing row: side plans as plain white cards, the popular
   plan raised, scaled and filled with the brand gradient so it reads as
   the obvious pick without a separate row layout doing double duty. */
.sis-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 24px;
}

.sis-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    padding: 44px 28px 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .04);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

/* The little icon medallion every plan carries, poking out over the
   card's own top edge on a short stem — the visual anchor the eye lands
   on first, before the price. */
.sis-plan__badge-icon {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, #f99d4e, #e93b6e);
    box-shadow: 0 10px 26px rgba(233, 59, 110, .35);
}
.sis-plan__badge-icon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 26px;
    background: rgba(0, 0, 0, .1);
    transform: translateX(-50%);
}

.sis-plan__tag {
    margin-top: 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #e9601f;
    background: #fdf1ea;
    padding: 6px 16px;
    border-radius: 999px;
}

.sis-plan__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 18px;
}

.sis-plan__amount {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1.6px;
    color: #0d0d14;
    font-variant-numeric: tabular-nums;
}

.sis-plan__cycle {
    font-style: normal;
    font-size: 13px;
    color: #8a8a96;
}

.sis-plan__name {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #0d0d14;
    margin: 18px 0 6px;
}

.sis-plan__blurb {
    font-size: 14px;
    line-height: 1.6;
    color: #6a6a76;
    margin: 0 0 26px;
    max-width: 30ch;
}

.sis-plan__features {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 11px;
    width: 100%;
    text-align: left;
}

.sis-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #2e2e38;
    line-height: 1.45;
}

.sis-plan__features li i {
    flex-shrink: 0;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #fff;
    background: #e9601f;
}

.sis-plan__action { width: 100%; margin-top: auto; }

.sis-plan__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #e9601f;
    background: #fdf1ea;
    padding: 15px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.sis-plan__cta i { font-size: 11px; }

.sis-plan__cta:hover,
.sis-plan__cta:focus-visible {
    color: #fff;
    background: linear-gradient(125deg, #f99d4e, #e93b6e);
    transform: translateY(-2px);
}

/* The popular plan: filled with the brand gradient, raised above its
   neighbours, and everything inside recoloured for contrast against it —
   this IS the "different from the other two" the layout is built around. */
.sis-plan.is-popular {
    background: linear-gradient(165deg, #e93b6e, #f99d4e);
    border-color: transparent;
    transform: scale(1.08) translateY(-22px);
    box-shadow: 0 30px 70px rgba(233, 59, 110, .35);
    z-index: 2;
    padding-top: 52px;
}
.sis-plan.is-popular .sis-plan__badge-icon {
    /* A translucent-white circle with a white icon was invisible on top of
       itself — solid white with the accent colour on the icon inverts the
       same way the CTA button already does, so it actually shows up. */
    background: #fff;
    color: #e9601f;
    border: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}
.sis-plan.is-popular .sis-plan__badge-icon::after { background: rgba(255, 255, 255, .4); }
.sis-plan.is-popular .sis-plan__tag { background: rgba(255, 255, 255, .16); color: #fff; }
.sis-plan.is-popular .sis-plan__amount,
.sis-plan.is-popular .sis-plan__name { color: #fff; }
.sis-plan.is-popular .sis-plan__cycle,
.sis-plan.is-popular .sis-plan__blurb { color: rgba(255, 255, 255, .8); }
.sis-plan.is-popular .sis-plan__features li { color: #fff; }
.sis-plan.is-popular .sis-plan__features li i { background: rgba(255, 255, 255, .22); color: #fff; }
.sis-plan.is-popular .sis-plan__cta { background: #fff; color: #e9601f; }
.sis-plan.is-popular .sis-plan__cta:hover,
.sis-plan.is-popular .sis-plan__cta:focus-visible { background: #0d0d14; color: #fff; }

@media (max-width: 991px) {
    .sis-plans { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 46px; }
    .sis-plan.is-popular { transform: none; order: -1; }
}

.sis-pricing__foot {
    margin: 44px 0 0;
    font-size: 15px;
    color: #6a6a76;
}

.sis-pricing__foot a { color: #e93b6e; text-decoration: none; font-weight: 600; }
.sis-pricing__foot a:hover { text-decoration: underline; }

/* --- service tabs: Organic Ranking | Paid Ads Services --- */

.sis-ptabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: -22px auto 104px;   /* room for the raised popular card's icon */
    padding: 6px;
    gap: 6px;
    border-radius: 999px;
    background: #f2f2f5;
    border: 1px solid rgba(0, 0, 0, .06);
}

.sis-ptabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5a5a66;
    font: 600 16px/1 'Outfit', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.sis-ptabs__tab i { font-size: 14px; }
.sis-ptabs__tab:hover { color: #0d0d14; }
.sis-ptabs__tab.is-active {
    color: #fff;
    background: linear-gradient(125deg, #f99d4e, #e93b6e);
    box-shadow: 0 10px 26px rgba(233, 59, 110, .28);
}
.sis-ptabs__tab:focus-visible { outline: 2px solid #e93b6e; outline-offset: 3px; }

.sis-plans-panel[hidden] { display: none; }

.sis-plans__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 40px 0 0;
    font-size: 15px;
    color: #5a5a66;
    text-align: center;
}
.sis-plans__note i { color: #20c997; }

@media (max-width: 575px) {
    .sis-ptabs { width: 100%; margin: -10px auto 44px; }
    .sis-ptabs__tab { flex: 1 1 0; justify-content: center; padding: 13px 10px; font-size: 13.5px; gap: 7px; }
    .sis-ptabs__tab i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sis-toggle__knob,
    .sis-plan__cta { transition: none; }
}

/* ---------------------------------------------------------------------------
   Hero typewriter — stop the heading resizing as it types
   The cycled words are 6 to 10 characters. Without a fixed slot the first line
   changes width on every keystroke and re-wraps at narrow viewports, which
   moved the whole hero. The ghost reserves the widest word's width; the live
   text is laid over it.
   --------------------------------------------------------------------------- */

.tw-slot {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
}

.tw-ghost {
    visibility: hidden;
    pointer-events: none;
}

.tw-live {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Container gutters
   The wide container variants only set max-width. At a viewport just wider
   than the container — 1785px against container-1750, for instance — that
   leaves about 17px each side and the content reads as edge to edge.
   Capping against the viewport guarantees a real gutter at every width, and
   changes nothing on screens that already had room.
   --------------------------------------------------------------------------- */

.container-1830 { max-width: min(1830px, calc(100vw - 96px)); }
.container-1750 { max-width: min(1750px, calc(100vw - 96px)); }
.container-1500 { max-width: min(1500px, calc(100vw - 96px)); }
.container-1300 { max-width: min(1300px, calc(100vw - 96px)); }
.container-1230 { max-width: min(1230px, calc(100vw - 96px)); }

@media (max-width: 991px) {
    .container-1830,
    .container-1750,
    .container-1500,
    .container-1300,
    .container-1230 { max-width: calc(100vw - 40px); }
}

@media (max-width: 575px) {
    .container-1830,
    .container-1750,
    .container-1500,
    .container-1300,
    .container-1230 { max-width: calc(100vw - 28px); }
}


/* ---------------------------------------------------------------------------
   Hero, dark
   The orb is drawn with additive blending, which adds light to whatever is
   behind it — on white every dot came out a pale grey. It was given a dark
   radial disc of its own for a while, but that read as a smudge dropped on the
   hero. The section itself is dark instead, and the copy is inverted with it.
   --------------------------------------------------------------------------- */

.hero-dark {
    /* Two layers, not one. The radial alone never actually reaches a flat
       #070a12 across the full width by the bottom of this (very tall, content
       -driven) section — off-centre from its 78%/38% origin, the last row
       still varies by several RGB units depending on x. The trifid section
       below fades in starting from a flat #070a12, assuming this section
       ends in one — so the mismatch showed up as a hard, if subtle, seam at
       the shared edge, no matter how well-tuned that section's own fade was.
       The linear-gradient painted on top forces the bottom 180px to true
       flat #070a12 at every x, which is what the fade below is actually
       blending from. */
    background:
        linear-gradient(180deg, transparent 0, transparent calc(100% - 180px), #070a12 calc(100% - 60px)),
        radial-gradient(120% 100% at 78% 38%, #16203a 0%, #0c1120 45%, #070a12 100%);
    /* border-bottom removed: with the trifid section now blending straight
       into this one, a hairline border here reads as a seam again. */
}

/* GSAP wraps a pinned element in a ".pin-spacer" div with no background of
   its own. For one frame while the pin engages (the "jump" on scroll entry)
   that wrapper is what's visible, and being transparent it shows the page's
   white default through — a white flash right at the seam this whole set of
   fixes exists to smooth over. Giving it the hero's own ending tone means
   that frame reads as more of the same background instead. Scoped to just
   the trifid section's spacer so it doesn't touch any other pinned section. */
.pin-spacer:has(> .trifid-fluid-section) {
    background: #070a12;
}

.hero-dark .pulsing-dot { box-shadow: 0 0 12px rgba(32, 201, 151, .8); }
.hero-dark .hero-audit__note { color: #8f99ab; }

/* Ring marks keep their white discs, which read as well on dark as on light.
   The labels under them do not: #6a6a78 on near-black is unreadable. */
.hero-dark .logo-ring__mark b { color: #98a2b3; }
.hero-dark .logo-ring-caption__title { color: #f5f7fa; }
.hero-dark .logo-ring-caption__eyebrow { color: #ff6f9c; }

/* --- the header over the dark hero -------------------------------------- */

/* The header sits in the flow ABOVE the hero, so the hero's dark gradient
   started below it and the header's own strip showed as a lighter blue band
   across the top — the bar behind the logo. Lifting the hero by the header's
   height puts the header over the artwork instead of above it, and the padding
   is given back so the copy inside does not move. */
.home-dark-hero #header-sticky {
    position: relative;
    z-index: 20;
    background: transparent !important;
}

.home-dark-hero #header-sticky::after,
.home-dark-hero #header-sticky::before { display: none !important; }

.home-dark-hero .hero-dark {
    margin-top: -104px;
    padding-top: 214px !important;   /* 110 of its own + the 104 taken back */
}

/* The hero artwork in the right-hand column (replaces the old background
   video). Three layers, one transform each:
     .hero-visual-stage  catches the mouse, carries --mx/--my for the glow
     .hero-visual-tilt   leans toward the mouse (inline script in index)
     .hero-visual        its own gentle drift (below) */
.hero-visual-stage {
    position: relative;
    width: 126%;
    max-width: 900px;
    margin-left: -10%;
    flex-shrink: 0;          /* .hero-floating-graphic is flex; keep the 126% */
    perspective: 1200px;
}
.hero-visual-tilt {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    will-change: transform;
}
.hero-visual {
    display: block;
    width: 100%;
    height: auto;
    animation: heroVisualDrift 6s ease-in-out infinite;
    will-change: transform;
    transition: filter .45s ease;
}
@keyframes heroVisualDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(1.5deg); }
}

/* Hover: a soft brand-coloured light behind the artwork that follows the
   cursor, and the artwork itself brightens. */
.hero-visual-glow {
    position: absolute;
    inset: 6%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 77, 148, .42) 0%, rgba(123, 77, 255, .26) 32%, transparent 64%);
    filter: blur(46px);
    opacity: .3;
    transition: opacity .45s ease;
}
.hero-visual-stage:hover .hero-visual-glow { opacity: 1; }
.hero-visual-stage:hover .hero-visual { filter: saturate(1.18) brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
    .hero-visual { animation: none; }
}


/* Both marks live in the markup; only one is ever shown. Named sis-mark,
   not sis-logo: sis-loader.css owns .sis-logo for the preloader and sets
   opacity:0 on it.

   !important: the theme's own `.tp-header-logo img { display: block; }`
   rule (specificity 0,1,1) otherwise beats this bare-class rule (0,1,0) and
   the "hidden" mark renders anyway, stacked under the visible one — this is
   exactly the bug that shipped when a page used this dark-hero header
   partial without the .home-dark-hero-scoped rules below to bail it out. */
.sis-mark--light { display: none !important; }

/* At rest the header floats over the dark hero, so it is transparent and
   everything on it is light. */
/* !important, reluctantly. The selector already outranks everything in the
   theme sheet by specificity and the sibling rules in this block (the logo
   swap) do apply — but the colour alone kept losing, and in a theme this
   layered the certain fix is worth more than the tidy one. */
.home-dark-hero #header-sticky .tp-header-menu > nav > ul > li > a,
.home-dark-hero #header-sticky .tp-header-menu nav ul li a {
    color: rgba(255, 255, 255, .88) !important;
}

.home-dark-hero #header-sticky .tp-header-menu > nav > ul > li:hover > a { color: #fff !important; }
.home-dark-hero #header-sticky .tp-header-menu > nav > ul { background-color: transparent; }

.home-dark-hero #header-sticky .sis-mark--dark { display: none !important; }
.home-dark-hero #header-sticky .sis-mark--light { display: inline-block !important; }

/* Active-page indicator: a short brand-gradient rule under the current
   nav item, not just a colour change — matches the gradient used on the
   CTA button and the headline's highlighted word. */
.home-dark-hero #header-sticky .tp-header-menu nav ul li a.is-active {
    position: relative;
}
.home-dark-hero #header-sticky .tp-header-menu nav ul li a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff4d94, #f99d4e);
}

/* The "Let's Talk" pill: a brand-gradient border (via the layered-
   background-image trick, since a plain border can't take a gradient)
   with an arrow that shifts on hover, rather than a flat white outline. */
.home-dark-hero #header-sticky .tp-header-btn a {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .45) !important;
}

.home-dark-hero #header-sticky .tp-btn-sky-border {
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(#0b0d15, #0b0d15), linear-gradient(135deg, #ff4d94, #f99d4e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}
.home-dark-hero #header-sticky .tp-btn-sky-border i {
    font-size: 13px;
    transition: transform .3s ease;
}
.home-dark-hero #header-sticky .tp-btn-sky-border:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 77, 148, .35);
}
.home-dark-hero #header-sticky .tp-btn-sky-border:hover i {
    transform: translateX(3px);
}

/* --- scrolled: everything goes except the mark ------------------------- */

/* main.js adds .header-sticky once the page is past 20px. From there the only
   thing left of the header is the logo on a white pill of its own — no bar
   across the page, no menu, no button.

   !important on the background because the theme paints the sticky bar from
   several places (.sticky-white-bg, .tp-header-blur::after, the area class),
   and chasing each one down is more fragile than closing the door once. */
.home-dark-hero #header-sticky.header-sticky {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    /* The site-wide sticky-header rule above (line ~2888) paints a frosted
       white plate here with !important — meant for light-hero pages. Without
       killing the blur too, it stays active and smears whatever bright hero
       content sits behind the bar (the CTA gradient, badge) into a cloudy
       streak, which is the bug this whole block exists to prevent. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* A set gap above the pill so it floats clear of the top edge rather than
       being cut against it. The logo column is pinned to the row's start
       (below) so this padding is the only space above it. */
    padding-top: 14px !important;
}
.home-dark-hero #header-sticky.header-sticky .row {
    /* Bootstrap's .align-items-center utility ships !important, so a plain
       override here loses without matching it. */
    align-items: flex-start !important;
}

/* the theme's blurred backing plate */
.home-dark-hero #header-sticky.header-sticky::after,
.home-dark-hero #header-sticky.header-sticky::before {
    display: none !important;
}

/* Everything except the mark. Faded rather than removed, so the header does
   not jump as it goes. */
.home-dark-hero #header-sticky.header-sticky .tp-header-menu,
.home-dark-hero #header-sticky.header-sticky .tp-header-btn,
.home-dark-hero #header-sticky.header-sticky .tp-header-bar,
.home-dark-hero #header-sticky.header-sticky .tp-btn-sky-border {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

/* Past the hero the pill is white, so the dark mark is the readable one.
   !important on all four swap rules in this file now, not just this one:
   the base .sis-mark--light hide (above) needs !important to beat the
   theme's .tp-header-logo img{display:block}, which forces every other
   rule in this swap to match or the higher-specificity !important base
   rule wins regardless of scroll state. */
.home-dark-hero #header-sticky.header-sticky .sis-mark--light { display: none !important; }
.home-dark-hero #header-sticky.header-sticky .sis-mark--dark { display: inline-block !important; }

/* The pill: only as wide as the mark inside it. inline-block on the anchor is
   what keeps it to the logo rather than stretching across the column. */
.home-dark-hero #header-sticky.header-sticky .tp-header-logo a {
    display: inline-block;
    padding: 9px 24px;
    border-radius: 999px;
    /* Frosted white glass, same as the site-wide pill above. */
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background .28s ease, padding .28s ease;
}

/* ---------------------------------------------------------------------------
   Inner pages: the home header, on a light page
   partials/_header_inner adds .sis-header-light. Same behaviour as the
   .home-dark-hero header above — plain menu at rest, only the logo pill once
   scrolled — but with dark text and the dark mark, since every inner page
   opens on a light hero.
   --------------------------------------------------------------------------- */

/* At rest: plain menu text. The theme's .tp-header-inner-style paints a grey
   rounded plate behind each menu group; that is what goes. */
#header-sticky.sis-header-light .tp-header-menu > nav > ul {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* "Let's Talk" — the homepage button, turned for a light background: brand
   gradient border on white, dark text. */
#header-sticky.sis-header-light .tp-btn-sky-border {
    color: #0e0f1a !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #ff4d94, #f99d4e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}
#header-sticky.sis-header-light .tp-btn-sky-border i {
    font-size: 13px;
    transition: transform .3s ease;
}
#header-sticky.sis-header-light .tp-btn-sky-border:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 77, 148, .3);
}
#header-sticky.sis-header-light .tp-btn-sky-border:hover i { transform: translateX(3px); }

/* Scrolled: no bar, no menu, no button — just the frosted logo pill. The
   !important background mirrors the homepage block: the theme paints the
   sticky bar from .sticky-white-bg, .tp-header-blur::after and the site-wide
   rule near the top of this file. */
#header-sticky.sis-header-light.header-sticky {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding-top: 14px !important;   /* same gap above the pill as the homepage */
}
#header-sticky.sis-header-light.header-sticky .row { align-items: flex-start !important; }
#header-sticky.sis-header-light.header-sticky::after,
#header-sticky.sis-header-light.header-sticky::before { display: none !important; }

#header-sticky.sis-header-light.header-sticky .tp-header-menu,
#header-sticky.sis-header-light.header-sticky .header-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

/* ---------------------------------------------------------------------------
   Hero orb
   A layer across the whole hero. The ring sits off to the right at rest; on
   scroll the points scatter across the full width and then gather back into
   the brain, centred.
   --------------------------------------------------------------------------- */

.hero-orb {
    position: absolute;
    inset: 0;
    z-index: 1;              /* under the copy, which is at 10 */
    pointer-events: auto;    /* the cursor has to reach the dots */
}

.hero-orb__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* No WebGL: hero-orb.js adds this and the layer is taken out entirely. */
.hero-orb.is-static { display: none; }

/* ---------------------------------------------------------------------------
   Hero site-audit bar
   Replaces the old Start Project / How We Work pair. One field, one action —
   a visitor can say what they want without deciding which button they are.
   --------------------------------------------------------------------------- */

.hero-audit {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 620px;
    padding: 8px 8px 8px 26px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 50px;
    /* Two layers, not one: the tight one gives the pill an edge to sit on, the
       wide one lifts it off the page. A single soft shadow at this size just
       reads as haze and the bar disappears into the white hero. */
    box-shadow: 0 4px 12px rgba(16, 16, 30, .07),
                0 26px 64px rgba(16, 16, 30, .17);
    transition: border-color .35s ease, box-shadow .35s ease;
}

/* focus-within, not :focus — the ring has to light up when the INPUT is
   focused, and the input is a child */
.hero-audit:focus-within {
    border-color: rgba(233, 59, 110, .38);
    box-shadow: 0 4px 12px rgba(233, 59, 110, .10),
                0 30px 72px rgba(233, 59, 110, .26);
}

.hero-audit__icon {
    flex: 0 0 auto;
    font-size: 16px;
    color: #b9b9c4;
    transition: color .35s ease;
}

.hero-audit:focus-within .hero-audit__icon { color: #e93b6e; }

/* Two classes deep on purpose. main.css styles input[type=text] with a grey
   fill, a radius and a 60px height at specificity (0,1,1), which beats a lone
   class — that is what was drawing a box inside the pill. */
.hero-audit .hero-audit__input {
    /* min-width:0 or the flex item refuses to shrink below its default
       intrinsic width and pushes the button out of the pill */
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    line-height: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #111;
}

.hero-audit .hero-audit__input::placeholder { color: #9a9aa6; font-weight: 400; }

.hero-audit__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #ff4d94, #f99d4e);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 77, 148, .3);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.hero-audit__go:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(255, 77, 148, .42);
}

.hero-audit__go i { font-size: 15px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.hero-audit__go:hover i { transform: translateX(4px); }

.hero-audit__note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #8a8a96;
}

.hero-audit__note i { font-size: 12px; color: #f99d4e; }

@media (max-width: 575px) {
    /* the pill cannot hold a full-width button and a usable field at once */
    .hero-audit {
        flex-wrap: wrap;
        border-radius: 26px;
        padding: 16px;
        gap: 10px;
    }
    .hero-audit__icon { display: none; }
    .hero-audit .hero-audit__input { height: 44px; line-height: 44px; flex: 1 1 100%; padding: 0 8px; }
    .hero-audit__go { flex: 1 1 100%; justify-content: center; height: 52px; }
    .hero-audit__note { font-size: 12.5px; align-items: flex-start; }
    .hero-audit__note i { margin-top: 3px; }
}

/* ---------------------------------------------------------------------------
   Platform ring
   One large circle with the marks on its rim. The section is far shorter than
   the circle is tall, so only the top arc is ever visible and the ring reads
   as continuing below the fold. Scroll turns it — see js/tech-rails.js.
   --------------------------------------------------------------------------- */

.logo-ring-area {
    /* Two radii, not one — this is an ellipse. JS reads both back off the
       computed style, so a breakpoint below is the single place a size
       changes; nothing is duplicated in the script.

       rx:ry is roughly 3:2. Flatter than that and the arc stops reading as a
       ring at all — it just looks like a row of logos sagging in the middle. */
    --ring-rx: 660px;
    --ring-ry: 430px;

    /* Clear air between the top of the band and the crown mark's centre.
       Must be at least half an icon, or the topmost logo is cut. */
    --ring-air: 62px;

    /* How far below the crown the band runs — this alone decides how much of
       the arc is shown and where it is cut away. */
    --ring-drop: 380px;

    position: relative;
    /* Above the hero's floating icons and background shapes. Deliberately far
       below the sticky header (10000) and the assistant (10040+) so it can
       never cover navigation. */
    z-index: 20;
    /* Pulled up into the gap under the buttons. Negative, so the arc rises
       without the hero growing taller to make room for it. */
    margin-top: -44px;
    /* No negative margin-bottom here any more. Pulling the trifid section up
       to "merge" the two sections was counterproductive: the merge itself is
       done by a mask/gradient fade that starts at the TRIFID section's own
       top edge (row 0, colour-matched to the hero's ending tone) and blends
       over its first 750px — see .trifid-fluid-section and its overlay divs
       in resources/views/pages/index.blade.php. Overlapping the two sections
       here cropped off exactly that smoothest starting slice of the fade,
       so what was actually visible right under the badges was already partway
       into the blend — reintroducing the hard seam this was meant to fix,
       and also crushing out the breathing room under the two rows of cert
       badges. Natural DOM spacing plus the untouched fade zone is what
       actually merges the two sections cleanly. */

    /* Derived, never a fixed number, so changing a radius at a breakpoint can
       never leave the crown clipped or the band short. */
    height: calc(var(--ring-air) + var(--ring-drop));

    pointer-events: none;
}

/* The clip is its own layer because the fade below has to apply to the ARC
   only. On the outer element it also ate into the caption in the middle. */
.logo-ring__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;

    /* Without this the bottom edge slices a logo in half on a straight line as
       it turns out of view. The fade lets each one dissolve away instead,
       which is what makes the arc read as a chain being drawn past rather
       than a picture with its bottom cropped off. */
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0) 100%);
}

/* Once js/tech-rails.js is running it fades each slot through its opacity,
   which the compositor does for free. The mask above (the no-JS fallback)
   made the whole band repaint on every animation frame. */
.logo-ring-area.is-js .logo-ring__clip {
    -webkit-mask-image: none;
            mask-image: none;
}

.logo-ring {
    /* The oval's centre — a full radius below the crown, which puts it past
       the bottom of the band. Only the arc above it is ever on screen. */
    position: absolute;
    left: 50%;
    top: calc(var(--ring-air) + var(--ring-ry));
    width: 0;
    height: 0;
}

/* Placed by translation alone. The slot never rotates, so the logo inside it
   is upright for free — there is no counter-rotation to keep in step. */
.logo-ring__slot {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    will-change: transform;
}

.logo-ring__mark {
    /* top offset is half an icon, so the ICON's centre sits on the slot's
       point and the arc is drawn by the circles rather than by the labels */
    position: absolute;
    left: -68px;
    top: -44px;
    width: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.logo-ring__mark i {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .09);
    background-clip: padding-box;
    color: #16161f;
}

/* Each platform in its own brand colour rather than flat black — the ring
   reads as "the real, recognisable tools we integrate with" instead of a
   generic icon set. Kept to single flat hex per mark (not each brand's
   full gradient mark) so every icon still sits cleanly on the shared white
   disc above. */
.logo-ring__mark i.fa-google           { color: #4285f4; }
.logo-ring__mark i.fa-store            { color: #34a853; } /* Google Business */
.logo-ring__mark i.fa-meta             { color: #0866ff; }
.logo-ring__mark i.fa-facebook         { color: #1877f2; }
.logo-ring__mark i.fa-instagram        { color: #e4405f; }
.logo-ring__mark i.fa-chart-simple     { color: #f9ab00; } /* Google Analytics */
.logo-ring__mark i.fa-searchengin      { color: #4285f4; } /* Search Console */
.logo-ring__mark i.fa-rectangle-ad     { color: #4285f4; } /* Google Ads */
.logo-ring__mark i.fa-mailchimp        { color: #ffe01b; }
.logo-ring__mark i.fa-envelope         { color: #ff4d94; } /* Email Marketing */
.logo-ring__mark i.fa-yoast            { color: #a61e69; }
.logo-ring__mark i.fa-magnifying-glass { color: #0091ff; } /* SEO */
.logo-ring__mark i.fa-wordpress        { color: #21759b; }
.logo-ring__mark i.fa-cart-shopping    { color: #7f54b3; } /* WooCommerce */
.logo-ring__mark i.fa-shopify          { color: #95bf47; }
.logo-ring__mark i.fa-linkedin         { color: #0a66c2; }

.logo-ring__mark b {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #6a6a78;
    white-space: nowrap;
}

/* --- caption, in the open middle of the arc --- */

.logo-ring-caption {
    position: absolute;
    left: 0;
    right: 0;
    /* the arc's crown is at --ring-air; this sits in the clear space below it */
    top: calc(var(--ring-air) + var(--ring-drop) * .38);
    text-align: center;
    z-index: 2;
}

.logo-ring-caption__eyebrow {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e93b6e;
    margin-bottom: 12px;
}

.logo-ring-caption__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1.06;
    color: #0d0d14;
    margin: 0;
}

/* Real accreditations, not decoration — verification chips under the
   platform ring's own claim ("certified & current"), laid out as two
   explicit rows (4 + 3) rather than a single line left to wrap on its own,
   so the split stays exactly 4/3 at every width instead of reflowing
   wherever the text happens to run out of room. */
.logo-ring-certs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    pointer-events: auto;
}

.logo-ring-certs__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.logo-ring-cert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 30px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #16161f;
    letter-spacing: .2px;
    white-space: nowrap;
}

.logo-ring-cert i { font-size: 16px; }
.logo-ring-cert i.fa-google          { color: #4285f4; }
.logo-ring-cert i.fa-meta            { color: #0866ff; }
.logo-ring-cert i.fa-shield-halved   { color: #1877c9; } /* BBB */
.logo-ring-cert i.fa-star            { color: #00b67a; } /* Trustpilot green */
.logo-ring-cert i.fa-award           { color: #FF8C00; } /* Clutch orange */
.logo-ring-cert i.fa-star-half-stroke { color: #E60000; } /* Yelp red */
.logo-ring-cert i.fa-users           { color: #00A651; } /* Commerce green */

@media (max-width: 991px) {
    .logo-ring-certs { margin-top: 16px; gap: 9px; }
    .logo-ring-certs__row { gap: 8px; }
    .logo-ring-cert { padding: 7px 14px; font-size: 11px; }
    .logo-ring-cert i { font-size: 13px; }
}

@media (max-width: 575px) {
    /* Screens too narrow for 4-across even at this size: each row wraps to
       2 lines on its own rather than trying to force 4 chips across. */
    .logo-ring-certs__row { gap: 7px; }
    .logo-ring-cert { padding: 6px 12px; font-size: 10px; }
    .logo-ring-cert i { font-size: 12px; }
}

@media (max-width: 1199px) {
    .logo-ring-area { --ring-rx: 480px; --ring-ry: 340px; --ring-air: 56px; --ring-drop: 300px; }
    .logo-ring__mark { left: -60px; top: -38px; width: 120px; }
    .logo-ring__mark i { width: 76px; height: 76px; font-size: 33px; }
    .logo-ring__mark b { font-size: 12px; }
}

@media (max-width: 991px) {
    .logo-ring-area { --ring-rx: 340px; --ring-ry: 260px; --ring-air: 50px; --ring-drop: 230px; margin-top: -20px; }
    .logo-ring-caption__eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 8px; }
    .logo-ring__mark { left: -52px; top: -32px; width: 104px; }
    .logo-ring__mark i { width: 64px; height: 64px; font-size: 28px; }
    .logo-ring__mark b { font-size: 11px; }
}

@media (max-width: 575px) {
    .logo-ring-area { --ring-rx: 200px; --ring-ry: 190px; --ring-air: 44px; --ring-drop: 165px; margin-top: 0; }
    /* labels off: at this size the marks are too tight for them to sit clear
       of one another, and the icons alone still read */
    .logo-ring__mark { left: -26px; top: -26px; width: 52px; }
    .logo-ring__mark i { width: 52px; height: 52px; font-size: 22px; }
    .logo-ring__mark b { display: none; }
}

/* ---------------------------------------------------------------------------
   Homepage header: badge | Home  About  [logo]  Services  Contact | Let's Talk
   partials/_header_index. A 1fr auto 1fr grid keeps the logo on the page's
   centre line; each side column pushes its outer item (badge, button) to the
   edge and its links in toward the logo.
   --------------------------------------------------------------------------- */

.home-dark-hero #header-sticky.sis-nav {
    margin-top: 0;
    padding: 0 42px;
}

#header-sticky.sis-nav .sis-nav__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 74px;
    min-height: 84px;
}

#header-sticky.sis-nav .sis-nav__side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

#header-sticky.sis-nav .sis-nav__logo a { display: inline-block; line-height: 0; }
#header-sticky.sis-nav .sis-nav__logo img { width: 218px; max-width: 100%; height: auto; }

/* links */
#header-sticky.sis-nav .sis-nav__links {
    display: flex;
    align-items: center;
    gap: 64px;
    margin: 0;
    padding: 0;
    background: transparent;
}
#header-sticky.sis-nav .tp-header-menu > nav > ul.sis-nav__links > li {
    margin: 0;
    padding: 0;
}
/* 30px top and bottom: the link fills the whole 84px bar, so the pointer
   stays on the li all the way down to the mega menu hanging off the bar. */
.home-dark-hero #header-sticky.sis-nav .tp-header-menu > nav > ul.sis-nav__links > li > a {
    display: block;
    padding: 30px 0;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #fff !important;
}
.home-dark-hero #header-sticky.sis-nav .tp-header-menu nav ul li a.is-active::after {
    bottom: 21px;
    height: 2px;
}

/* badge */
#header-sticky.sis-nav .sis-nav__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 22px 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .035);
    color: #eef0f5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .28s ease, visibility .28s ease;
}
#header-sticky.sis-nav .sis-nav__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20c997;
    box-shadow: 0 0 10px rgba(32, 201, 151, .7);
    animation: sisNavDot 2s ease-in-out infinite;
}
@keyframes sisNavDot { 50% { box-shadow: 0 0 2px rgba(32, 201, 151, .3); } }

/* Let's Talk */
.home-dark-hero #header-sticky.sis-nav .sis-nav__cta {
    height: 56px;
    padding: 0 30px 0 32px;
    gap: 34px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    background-image: linear-gradient(#07080d, #07080d), linear-gradient(60deg, #ff2d8a 0%, #f7a04b 100%);
}
.home-dark-hero #header-sticky.sis-nav .sis-nav__cta i { font-size: 15px; color: #f7a04b; }

/* scrolled: only the logo pill stays */
.home-dark-hero #header-sticky.sis-nav.header-sticky .sis-nav__grid { align-items: start; min-height: 0; }
.home-dark-hero #header-sticky.sis-nav.header-sticky .sis-nav__badge,
.home-dark-hero #header-sticky.sis-nav.header-sticky .header-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.home-dark-hero #header-sticky.sis-nav.header-sticky .sis-nav__logo img { width: 180px; }

@media (max-width: 1399px) {
    #header-sticky.sis-nav .sis-nav__grid { column-gap: 44px; }
    #header-sticky.sis-nav .sis-nav__links { gap: 36px; }
    #header-sticky.sis-nav .sis-nav__logo img { width: 190px; }
}
@media (max-width: 1199px) {
    /* links move to the off-canvas menu; badge | logo | button remains */
    #header-sticky.sis-nav .sis-nav__side--right { justify-content: flex-end; }
}
@media (max-width: 991px) {
    .home-dark-hero #header-sticky.sis-nav { padding: 0 20px; }
    #header-sticky.sis-nav .sis-nav__grid { grid-template-columns: auto 1fr; min-height: 76px; }
    #header-sticky.sis-nav .sis-nav__side--left { display: none; }
    #header-sticky.sis-nav .sis-nav__logo img { width: 170px; }
}

/* ---------------------------------------------------------------------------
   Homepage hero copy: eyebrow, three-line headline, lead, dark audit pill,
   trusted-by row
   --------------------------------------------------------------------------- */

/* margin 0: the header sits outside #smooth-wrapper (fixed at the top), so
   the hero already starts under it. A negative margin here collapses up
   through main and #smooth-content and drags the whole page above the fold. */
.home-dark-hero .hero-dark {
    margin-top: 0;
    padding-top: 140px !important;
    background:
        linear-gradient(180deg, transparent 0, transparent calc(100% - 180px), #070a12 calc(100% - 60px)),
        radial-gradient(120% 100% at 72% 42%, #0d0f1d 0%, #06070d 50%, #040509 100%);
}

.hero-shell { padding-left: 50px; padding-right: 50px; }
@media (max-width: 991px) { .hero-shell { padding-left: 20px; padding-right: 20px; } }

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px -22px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #e8eaf0;
}
.hero-eyebrow::before {
    content: "";
    width: 58px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 45, 138, 0), #ff4d6d 40%, #f7a04b);
}
@media (max-width: 991px) {
    .hero-eyebrow { margin-left: 0; font-size: 11px; letter-spacing: 2.5px; }
    .hero-eyebrow::before { width: 34px; }
}

.hero-dark .tp-hero-title.hero-headline {
    margin: 0;
    font-size: clamp(44px, 4.95vw, 86px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -2px;
    color: #f5f7fa;
    text-transform: uppercase;
}

.hero-dark .hero-lead {
    margin: 30px 0 48px;
    max-width: 600px;
    font-size: 20.5px;
    line-height: 1.66;
    font-weight: 400;
    letter-spacing: -0.2px;
    color: #a9adb8;
}
.hero-dark .hero-lead strong { color: #fff; font-weight: 600; }

/* the audit bar, dark */
.hero-dark .hero-audit {
    max-width: 632px;
    padding: 6px 6px 6px 24px;
    background: #0b0c13;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 20px 50px rgba(0, 0, 0, .45);
}
.hero-dark .hero-audit:focus-within {
    border-color: rgba(255, 77, 148, .5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 20px 50px rgba(255, 45, 138, .18);
}
.hero-dark .hero-audit__icon { font-size: 19px; color: #6f7380; }
.hero-dark .hero-audit .hero-audit__input {
    height: 60px;
    line-height: 60px;
    font-size: 17px;
    color: #f1f2f6;
}
.hero-dark .hero-audit .hero-audit__input::placeholder { color: #8b8f9b; font-size: inherit; }

.hero-lead__br { display: none; }
@media (min-width: 768px) { .hero-lead__br { display: inline; } }
.hero-dark .hero-audit__go {
    height: 62px;
    padding: 0 32px;
    gap: 26px;
    background: linear-gradient(90deg, #ff2d8a 0%, #ff5a78 45%, #f7a04b 100%);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: 0 8px 28px rgba(255, 45, 138, .28);
}
.hero-dark .hero-audit__go i { font-size: 17px; }

.hero-dark .hero-audit__note {
    margin-top: 38px;
    font-size: 15.5px;
    font-weight: 400;
    color: #9da1ab;
}
.hero-dark .hero-audit__note i { font-size: 16px; }

.hero-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 62px;
}
.hero-trust p { margin: 0; font-size: 16.5px; color: #b5b8c2; }
.hero-trust__faces { display: flex; }
.hero-trust__faces span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    border-radius: 50%;
    border: 2px solid #06070d;
    background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2));
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.hero-trust__faces span:first-child { margin-left: 0; }
.hero-trust__faces .hero-trust__more {
    width: 50px;
    height: 50px;
    margin-top: -3px;
    background: #0b0c13;
    border: 1.5px solid rgba(255, 255, 255, .28);
    font-size: 14px;
    font-weight: 500;
}

/* Desktop: .hero-dark carries zoom:.85 (top of this file), so every size in
   it renders at 85%. The values here are the on-screen targets divided by
   .85 — e.g. 100px here draws an 85px headline. */
@media (min-width: 992px) {
    /* Sized so the whole first screen, down to the trusted-by row, fits a
       ~1900x870 viewport without scrolling. */
    .home-dark-hero .hero-dark {
        padding-top: 165px !important;   /* eyebrow at ~140px on screen */
    }
    /* padding-bottom keeps the platform ring below the fold now that the
       copy above it is shorter */
    .hero-shell { padding-left: 73px; padding-right: 73px; padding-bottom: 210px; }

    /* artwork: lifted and spilling a little toward the copy */
    .home-dark-hero .hero-visual-stage {
        width: 118%;
        max-width: 980px;
        margin-left: -18%;
        margin-top: -30px;
    }

    .hero-eyebrow { gap: 12px; margin: 0 0 24px -24px; font-size: 13.5px; letter-spacing: 4.2px; }
    .hero-eyebrow::before { width: 58px; }

    .hero-dark .tp-hero-title.hero-headline { font-size: clamp(48px, 4.4vw, 82px); letter-spacing: -2px; }

    .hero-dark .hero-lead { margin: 28px 0 42px; max-width: 640px; font-size: 22px; }

    .hero-dark .hero-audit { max-width: 640px; padding: 6px 6px 6px 24px; gap: 14px; }
    .hero-dark .hero-audit__icon { font-size: 19px; }
    .hero-dark .hero-audit .hero-audit__input { height: 60px; line-height: 60px; font-size: 18px; }
    .hero-dark .hero-audit__go { height: 62px; padding: 0 32px; gap: 24px; font-size: 18px; }
    .hero-dark .hero-audit__go i { font-size: 18px; }

    .hero-dark .hero-audit__note { margin-top: 32px; gap: 10px; font-size: 16.5px; }
    .hero-dark .hero-audit__note i { font-size: 17px; }

    .hero-trust { margin-top: 46px; gap: 20px; }
    .hero-trust p { font-size: 17.5px; }
    .hero-trust__faces span { width: 46px; height: 46px; margin-left: -12px; font-size: 18px; }
    .hero-trust__faces .hero-trust__more { width: 52px; height: 52px; margin-top: -3px; font-size: 15px; }
}

/* Inner pages: the current page gets the same gradient underline as "Home"
   does on the home page header. */
#header-sticky.sis-header-light .tp-header-menu nav ul li a.is-active { position: relative; }
#header-sticky.sis-header-light .tp-header-menu nav ul li a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff4d94, #f99d4e);
}

/* Home header with three links on the left (Home · About Us · Portfolio):
   never let a label or the button wrap onto two lines, and give up room
   gradually as the screen narrows — link gaps first, then the badge. */
#header-sticky.sis-nav .sis-nav__links a,
#header-sticky.sis-nav .sis-nav__cta,
#header-sticky.sis-nav .sis-nav__badge { white-space: nowrap; }
@media (max-width: 1699px) {
    #header-sticky.sis-nav .sis-nav__links { gap: 44px; }
}
@media (max-width: 1499px) {
    #header-sticky.sis-nav .sis-nav__badge { display: none; }
    #header-sticky.sis-nav .sis-nav__side--left { justify-content: flex-end; }
    #header-sticky.sis-nav .sis-nav__grid { column-gap: 48px; }
    #header-sticky.sis-nav .sis-nav__links { gap: 36px; }
}

/* Footer icon trail (js/footer-trail.js): a layer behind the footer's
   content that never takes a click; icons are dropped into it. */
.tp-footer-area { position: relative; isolation: isolate; }
.tp-footer-area > .sis-trail {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.tp-footer-area > .container { position: relative; z-index: 1; }
/* one falling piece: the body is moved by the script, its child pops in */
.sis-trail__body {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
}
.sis-trail__icon,
.sis-trail__shape {
    position: absolute;
    inset: 0;
    animation: sisTrailPop .32s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes sisTrailPop { from { transform: scale(.2); opacity: 0; } }
.sis-trail__icon {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(11, 13, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sis-trail__icon i { line-height: 1; }
.sis-trail__shape--box { border-radius: 22%; box-shadow: 0 10px 22px -10px rgba(11, 13, 24, .45); }
.sis-trail__shape--circle { border-radius: 50%; box-shadow: 0 10px 22px -10px rgba(11, 13, 24, .45); }
.sis-trail__shape--ring { border-radius: 50%; border: 6px solid currentColor; background: transparent; }
.sis-trail__shape--star {
    clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 79% 95%, 50% 74%, 21% 95%, 31% 59%, 2% 37%, 38% 36%);
}
.sis-trail__shape--tri { clip-path: polygon(50% 6%, 96% 90%, 4% 90%); }
.sis-trail__shape--hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.sis-trail__shape--plus {
    clip-path: polygon(35% 4%, 65% 4%, 65% 35%, 96% 35%, 96% 65%, 65% 65%, 65% 96%, 35% 96%, 35% 65%, 4% 65%, 4% 35%, 35% 35%);
}

/* Footer wordmark stretch (js/footer-stretch.js): words stay whole so the
   heading wraps where it always did; each letter scales from its baseline. */
.sis-stretch .sis-stretch__w { display: inline-block; white-space: nowrap; }
.sis-stretch .sis-stretch__ch {
    display: inline-block;
    transform-origin: 50% 88%;
    will-change: transform;
}
.sis-stretch { cursor: default; }

/* Pricing: hovering a side plan lifts it and turns it to the brand gradient,
   like the popular plan. A gradient can't be transitioned, so it fades in as
   an overlay behind the card's content. */
@media (hover: hover) and (min-width: 992px) {
    .sis-plan:not(.is-popular) { position: relative; isolation: isolate; }
    .sis-plan:not(.is-popular)::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(165deg, #e93b6e, #f99d4e);
        opacity: 0;
        transition: opacity .35s ease;
    }
    .sis-plan:not(.is-popular):hover {
        transform: translateY(-22px) scale(1.03);
        border-color: transparent;
        box-shadow: 0 30px 60px -20px rgba(233, 59, 110, .45);
    }
    .sis-plan:not(.is-popular):hover::before { opacity: 1; }
    .sis-plan:not(.is-popular) .sis-plan__amount,
    .sis-plan:not(.is-popular) .sis-plan__name,
    .sis-plan:not(.is-popular) .sis-plan__cycle,
    .sis-plan:not(.is-popular) .sis-plan__blurb,
    .sis-plan:not(.is-popular) .sis-plan__features li,
    .sis-plan:not(.is-popular) .sis-plan__tag { transition: color .3s ease, background .3s ease; }
    .sis-plan:not(.is-popular):hover .sis-plan__amount,
    .sis-plan:not(.is-popular):hover .sis-plan__name,
    .sis-plan:not(.is-popular):hover .sis-plan__features li { color: #fff; }
    .sis-plan:not(.is-popular):hover .sis-plan__cycle,
    .sis-plan:not(.is-popular):hover .sis-plan__blurb { color: rgba(255, 255, 255, .85); }
    .sis-plan:not(.is-popular):hover .sis-plan__tag { background: rgba(255, 255, 255, .16); color: #fff; }
    .sis-plan:not(.is-popular):hover .sis-plan__features li i { background: rgba(255, 255, 255, .22); color: #fff; }
    .sis-plan:not(.is-popular):hover .sis-plan__badge-icon { background: #fff; color: #e9601f; }
    .sis-plan:not(.is-popular):hover .sis-plan__cta { background: #fff; color: #e9601f; }
}

/* Hero loop video (index.blade.php): laid exactly over the still artwork and
   faded in once it is actually playing, so the hero never flashes empty. */
.hero-visual-tilt { position: relative; }
.hero-visual--loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.hero-visual--loop.is-playing { opacity: 1; }
/* once the loop plays, the still underneath steps aside */
.hero-visual-tilt:has(.hero-visual--loop.is-playing) > img.hero-visual { opacity: 0; transition: opacity .8s ease; }

/* Home stats on a phone: a fixed-height window, one stat at a time, sliding
   up (js/impact-slider.js adds .is-slider below 768px). */
.impact-grid.is-slider {
    display: block;
    position: relative;
    height: 268px;
    margin-top: 44px;
    overflow: hidden;
    border-radius: 26px;
    touch-action: pan-x;          /* an up/down swipe here moves the slider */
}
.impact-grid.is-slider .impact-track {
    display: flex;
    flex-direction: column;
    height: 500%;                 /* four stats + the looping copy of the first */
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}
.impact-grid.is-slider .impact-card {
    flex: 0 0 20%;
    min-height: 0;
    margin: 0;
    padding: 30px 52px 30px 30px;
    border-radius: 26px;
    box-sizing: border-box;
    transform: none !important;
}
.impact-grid.is-slider .impact-number { font-size: 64px; line-height: 1; }
.impact-grid.is-slider .impact-desc { margin-bottom: 0; }
.impact-dots {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}
.impact-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(13, 13, 20, .16);
    cursor: pointer;
    transition: height .35s ease, background .35s ease;
}
.impact-dots button.is-on { height: 26px; background: linear-gradient(180deg, #ff4d94, #f99d4e); }
html[data-theme="dark"] .impact-dots button { background: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .impact-dots button.is-on { background: linear-gradient(180deg, #ff4d94, #f99d4e); }