@import 'variables.css';

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
    /* Added for responsiveness */
}

/* Utilities */
/* .container is now primarily for inner content text alignment, 
   not for restricting section width globally */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn {
    display: inline-block;
    padding: 8px 20px;
    /* Reduced size */
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    /* Reduced font size */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
}

.btn-primary {
    /* Vibrant Gradient with 3 stops for animation flow */
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-magenta), var(--accent-blue));
    background-size: 200% auto;
    color: #fff;
    box-shadow: 0 0 20px rgba(64, 128, 255, 0.4);
    border: none;
}

.btn-primary:hover {
    background-position: right center;
    /* Gradient Flow Animation */
    box-shadow: 0 0 30px rgba(64, 128, 255, 0.6), 0 0 10px rgba(255, 0, 255, 0.5);
    transform: translateY(-2px) scale(1.05);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    overflow: hidden;
}

.btn-secondary:hover {
    background: var(--accent-blue);
    color: #000;
    box-shadow: 0 0 20px rgba(64, 128, 255, 0.4);
    transform: translateY(-2px);
}

/* Professional Call Button */
.btn-call {
    background: rgba(255, 107, 43, 0.1);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.btn-call i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.btn-call:hover {
    background: var(--accent-green);
    color: #000;
    box-shadow: 0 0 25px rgba(255, 107, 43, 0.5);
    transform: translateY(-2px);
}

.btn-call:hover i {
    transform: rotate(20deg) scale(1.2);
    /* Phone shake effect */
    animation: phone-ring 0.5s ease infinite alternate;
}

@keyframes phone-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(15deg);
    }
}

/* Subtle Pulse Animation for Standby */
.btn-call::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 107, 43, 0.2);
    border-radius: 50px;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-call:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--glass-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    padding: 0 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Reusing .container but overriding for header context if needed, 
   or we can just target the direct children since we are changing html structure potentially.
   Actually, let's keep the HTML structure simple and just override the container inside header. */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    /* UNCONSTRAINED WIDTH */
    margin: 0;
    padding: 0;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo img {
    height: 46px;
    width: auto;
    transition: filter 0.3s ease;
}

body.light-mode .logo img {
    filter: invert(1) hue-rotate(180deg);
}

.logo span {
    color: var(--accent-blue);
}

nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    /* Center the nav links */
}

nav ul {
    display: flex;
    gap: 30px;
}

nav a {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.3s ease;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-cyan);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--accent-cyan);
}

nav a:hover,
nav a.active {
    color: var(--accent-cyan);
    text-shadow: 0 0 15px var(--shadow-glow-blue);
}

nav a:hover::after,
nav a.active::after {
    width: 100%;
}

/* Dropdown Menu */
.dropdown-parent {
    position: relative;
    padding-bottom: 0px;
}

/* Invisible bridge for hover stability */
.dropdown-parent::before {
    content: '';
    position: absolute;
    bottom: -15px;
    /* Extend hit area downwards */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(10, 15, 20, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1001;
    margin-top: 10px;
    /* Gap from link */
}

/* Show on hover of parent LI */
.dropdown-parent:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Animation for Dropdown Items */
.dropdown li {
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-parent:hover .dropdown li {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger Delays for "Cascade" effect */
.dropdown-parent:hover .dropdown li:nth-child(1) {
    transition-delay: 0.05s;
}

.dropdown-parent:hover .dropdown li:nth-child(2) {
    transition-delay: 0.1s;
}

.dropdown-parent:hover .dropdown li:nth-child(3) {
    transition-delay: 0.15s;
}

.dropdown-parent:hover .dropdown li:nth-child(4) {
    transition-delay: 0.2s;
}

.dropdown-parent:hover .dropdown li:nth-child(5) {
    transition-delay: 0.25s;
}

.dropdown-parent:hover .dropdown li:nth-child(6) {
    transition-delay: 0.3s;
}

.dropdown a {
    display: block;
    padding: 10px 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.2s;
    text-align: left;
    white-space: nowrap;
}

.dropdown a::after {
    display: none;
    /* No underline in dropdown */
}

.dropdown a:hover {
    background: rgba(64, 128, 255, 0.1);
    color: var(--accent-cyan);
    padding-left: 20px;
    /* Slide effect */
    text-shadow: none;
}

/* CTA in header needs to be separate if it's inside valid container */
header .btn-primary {
    flex-shrink: 0;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    height: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 100px; /* room for stats strip */
    overflow: hidden;
    margin: 0;
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.hero-text h1 {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    /* Breathing Animation for Foreground */
    animation: breathe 6s ease-in-out infinite;
}

.hero-text p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 550px;
    animation: breathe 6s ease-in-out infinite 1s;
    /* Delayed breathe */
}

.hero-cta {
    display: flex;
    gap: 20px;
    animation: breathe 6s ease-in-out infinite 2s;
    /* Further delay */
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* New Section: Animated Video Showcase */
#video-showcase {
    background: #050505;
    padding: 100px 0;
    position: relative;
    border-bottom: 1px solid var(--glass-border);
}

.video-interface {
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--accent-blue);
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(64, 128, 255, 0.1);
}

/* Simulated Video Content "Screen" */
.video-screen {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Holographic Rotating Rings (Simulating "Scanning") */
.holo-ring {
    position: absolute;
    border: 1px solid var(--accent-cyan);
    border-radius: 50%;
    opacity: 0.3;
    animation: rotate-ring 10s linear infinite;
}

.ring-1 {
    width: 300px;
    height: 300px;
    border-style: dashed;
    animation-duration: 20s;
}

.ring-2 {
    width: 500px;
    height: 500px;
    border-top-color: transparent;
    animation-direction: reverse;
}

.ring-3 {
    width: 700px;
    height: 700px;
    border: 1px dotted var(--accent-magenta);
    opacity: 0.2;
}

@keyframes rotate-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* UI Overlay Data */
.ui-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    color: var(--accent-cyan);
    font-family: monospace;
    font-size: 0.8rem;
    z-index: 10;
}

.ui-stream {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.data-line {
    opacity: 0;
    animation: fadeInOut 2s infinite;
}

.data-line:nth-child(1) {
    animation-delay: 0.1s;
}

.data-line:nth-child(2) {
    animation-delay: 0.5s;
}

.data-line:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* Scan Line Effect */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--accent-magenta);
    box-shadow: 0 0 15px var(--accent-magenta);
    opacity: 0.5;
    animation: scan-down 3s linear infinite;
    z-index: 5;
}

@keyframes scan-down {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* Center Status Label */
.status-label {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    font-family: monospace;
    text-transform: uppercase;
    font-size: 0.9rem;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 5px var(--accent-green);
    }

    50% {
        box-shadow: 0 0 15px var(--accent-green);
    }
}

/* Hero Dashboard Interface (3x3 Grid) */
.hero-dashboard-interface {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: auto;
    perspective: 1000px;
    padding: 20px;
    /* Space for brackets */
}

/* Cyber-Deck Frame */
.dashboard-frame {
    position: relative;
    padding: 24px;
    border: 2px solid rgba(64, 128, 255, 0.5);
    background: rgba(10, 15, 20, 0.85);
    backdrop-filter: blur(15px);
    border-radius: 40px;
    box-shadow:
        0 0 20px rgba(64, 128, 255, 0.15),
        inset 0 0 20px rgba(64, 128, 255, 0.05);
}

/* Corner Brackets (The bright cyan L-shapes) */
.dashboard-frame-corner {
    position: absolute;
    width: 45px;
    height: 45px;
    border: 4px solid var(--accent-cyan);
    box-shadow: 0 0 15px var(--accent-cyan);
    border-radius: 12px;
    /* Slight round on the bracket itself */
    opacity: 0.9;
    z-index: 10;
}

/* Configure L-shapes */
.top-left {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 25px;
}

.top-right {
    top: -5px;
    right: -5px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 25px;
}

.bottom-left {
    bottom: -5px;
    left: -5px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 25px;
}

.bottom-right {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 25px;
}

/* Side Status Lights (Vertical Dots) */
.dashboard-frame::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    /* Inside left */
    transform: translateY(-50%);
    width: 4px;
    height: 80px;
    background-image: radial-gradient(circle, var(--accent-cyan) 1.5px, transparent 2.5px);
    background-size: 100% 12px;
    /* Repeating dots */
    opacity: 0.8;
}

.dashboard-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    /* Inside right */
    transform: translateY(-50%);
    width: 4px;
    height: 80px;
    background-image: radial-gradient(circle, var(--accent-cyan) 1.5px, transparent 2.5px);
    background-size: 100% 12px;
    /* Repeating dots */
    opacity: 0.8;
}

/* Decorative Corners */
.dashboard-frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-cyan);
    transition: all 0.3s ease;
}

.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 10px;
}

.top-right {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 10px;
}

.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 10px;
}

.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 10px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.dashboard-card {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(64, 128, 255, 0.2);
    transform: translateY(-2px);
}

.card-visual {
    width: 100%;
    height: 80px;
    /* Small height for grid */
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #000;
}

.card-visual img,
.card-visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.card-label {
    font-size: 0.75rem;
    color: #ccc;
    text-align: center;
    font-weight: 500;
}

.dashboard-card:hover .card-label {
    color: #fff;
}

/* Connecting Arrows */
.flow-arrow {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-cyan);
    opacity: 0.5;
    font-size: 0.8rem;
    z-index: 2;
}

/* Remove arrow on last column items via selector or just don't add div */
.dashboard-card:nth-child(3n) .flow-arrow {
    display: none;
}

/* Animations */
.dashboard-frame:hover .dashboard-frame-corner {
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Holographic Scanning Overlay */
.slider-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 40%, rgba(64, 128, 255, 0.2) 50%, transparent 60%);
    background-size: 100% 200%;
    animation: scan-vertical 4s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes scan-vertical {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 200%;
    }
}

/* Video Thumbnail Styles */
.video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--accent-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent-cyan);
    box-shadow: 0 0 20px var(--accent-cyan);
    transition: all 0.3s ease;
    z-index: 2;
}

.slide:hover .play-button {
    background: var(--accent-cyan);
    color: #000;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-magenta);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 0 10px var(--accent-magenta);
}

.slide-caption h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.slide-caption p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: var(--accent-cyan);
}

@keyframes float-hologram {

    0%,
    100% {
        transform: rotateY(-5deg) rotateX(2deg) translateY(0);
    }

    50% {
        transform: rotateY(-2deg) rotateX(0deg) translateY(-15px);
    }
}

.slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slide-content {
    text-align: center;
    width: 100%;
    padding: 20px;
}

.demo-card h3 {
    color: var(--accent-blue);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.demo-visual {
    font-size: 5rem;
    margin-top: 30px;
    color: white;
    text-shadow: 0 0 30px var(--accent-magenta);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: var(--accent-blue);
    box-shadow: 0 0 10px var(--accent-blue);
}

/* Sections General */
section {
    padding: 100px 0;
    width: 100vw;
    position: relative;
    overflow: hidden;
}

.section-header {
    text-align: left;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Services: Auto-Scroll Ticker */
.services-scroll-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    /* Masking for fade effect on edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Spacing between rows */
}

/* Row 1: Left-to-Right (User Request) */
.services-ticker {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scroll-right 40s linear infinite;
}

/* Row 2: Right-to-Left (User Request) */
.services-ticker-reverse {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scroll-left 45s linear infinite;
}

.services-ticker:hover,
.services-ticker-reverse:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* Enhanced 3D Service Card for Ticker */
.service-card {
    min-width: 250px;
    max-width: 280px;
    background: rgba(20, 20, 25, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 0;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.4s var(--transition-bounce), box-shadow 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    margin: 0;
    /* Ensure no external margin issues */
}

.service-card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-bottom: 1px solid var(--glass-border);
}

.service-card-content {
    padding: 15px 10px;
    width: 100%;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(64, 128, 255, 0.2);
    border-color: var(--accent-cyan);
    background: rgba(64, 128, 255, 0.05);
}

/* High-Fidelity 3D Icon styling */
.service-icon {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
    margin-bottom: 0;
    color: var(--accent-blue);
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    filter: drop-shadow(0 0 5px rgba(64, 128, 255, 0.3));
    transform: translateZ(20px);
}

.service-card:hover .service-icon {
    transform: translateZ(30px) rotateY(10deg);
}

.service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    transform: translateZ(10px);
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 5px;
    transform: translateZ(10px);
}

.learn-more {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Specialized Focus */
.focus-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.focus-card {
    background: var(--gradient-glass);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.focus-card h3 {
    color: var(--accent-green);
    margin-bottom: 1rem;
}

.focus-card.home h3 {
    color: var(--accent-magenta);
}

/* Chatbot Widget - Colorful Liquid Orb */
/* Chatbot Widget - Vibrant Liquid Orb (Restored) */
#chatbot-widget {
    position: fixed;
    bottom: 90px;
    right: 28px;
    z-index: 2000;
}
.has-stats-strip #chatbot-widget {
    bottom: 28px;
    right: auto;
    left: 28px;
}

.chatbot-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 10px;
    height: 40px;
    border-radius: 100px;
    background: linear-gradient(135deg, #0050e0, #00c8ff);
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(0, 150, 255, 0.4);
    transition: all 0.2s;
    white-space: nowrap;
    overflow: visible;
    position: relative;
}
.chatbot-btn .chat-btn-icon {
    width: 24px; height: 24px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
}
.chatbot-btn .chat-btn-label { line-height: 1; }
.chatbot-btn .chat-btn-dot {
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    background: #00e060;
    border-radius: 50%;
    border: 2px solid #03070d;
    box-shadow: 0 0 6px #00e060;
}

.chatbot-btn::after {
    display: none;
}

.chatbot-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 150, 255, 0.6);
}

@keyframes liquid-pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 50px rgba(0, 255, 255, 0.7), 0 0 80px rgba(255, 0, 255, 0.5);
    }
}

@keyframes liquid-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}





/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
    margin-top: 50px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    padding: 40px 20px;
    border-radius: 16px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
}

.stat-card h3 {
    font-size: 4rem;
    font-weight: 800;
    color: white;
    display: inline-block;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
}

.stat-card span {
    font-size: 2rem;
    color: var(--accent-cyan);
    font-weight: 700;
}

.stat-card p {
    color: var(--text-muted);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Testimonials Section (Full Width Slider) */
.testimonials-section {
    background: linear-gradient(90deg, #050505 0%, #1a1a1a 50%, #050505 100%);
    padding: 120px 0;
}

.testimonial-container {
    width: 100%;
    overflow: hidden;
    padding: 0 40px;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.testimonial-item {
    min-width: 100%;
    text-align: center;
    padding: 0 100px;
}

.testimonial-quote {
    font-size: 2.5rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 40px;
    line-height: 1.4;
    font-style: italic;
}

.testimonial-author h4 {
    color: var(--accent-blue);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.testimonial-author p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Footer */
footer {
    background: linear-gradient(to bottom, #050505, #000);
    padding: 80px 40px 30px;
    position: relative;
    width: 100%;
    /* Neon Top Border */
    border-top: 1px solid rgba(64, 128, 255, 0.2);
    box-shadow: 0 -10px 30px rgba(64, 128, 255, 0.05);
    /* Subtle top glow */
}

/* Optional: Background Grid Effect for Footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0;
    margin-bottom: 0px;
    /* Reduced to 0 to bring icons closer */
    line-height: 1.4;
    max-width: 350px;
}

.footer-links h4 {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

/* Underline for headings */
.footer-links h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--accent-cyan);
    transition: width 0.3s;
}

.footer-links:hover h4::after {
    width: 100%;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer-links a:hover {
    color: var(--accent-cyan);
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(64, 128, 255, 0.5);
    padding-left: 15px;
    /* Make room for arrow */
}

/* Arrow effect on hover */
.footer-links a::before {
    content: '>';
    position: absolute;
    left: 0;
    opacity: 0;
    color: var(--accent-blue);
    transition: all 0.3s;
    transform: translateX(-10px);
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #555;
    font-size: 0.85rem;
    position: relative;
    z-index: 2;
}

/* Process Card Interactive Animation & Visual Hierarchy */
.process-card {
    /* Glassmorphism & Base Visuals */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    position: relative;
    overflow: hidden;

    /* Layout & Uniformity */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 30px;
    /* Increased "breathability" */
    height: 100%;
    /* Ensure flex items stretch equally */
    min-height: 400px;
    /* Taller cards */

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* Base styling for large background numbers */
.process-card::before {
    content: attr(data-step);
    /* Uses HTML attribute */
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.03);
    z-index: 0;
    pointer-events: none;
    font-family: var(--font-heading);
    transition: all 0.4s ease;
}

.process-card:hover::before {
    color: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
}

/* Icon Container - Glassmorphism */
.process-icon-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;

    /* New Glass Style */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.process-icon-box i {
    font-size: 2.5rem;
    /* Larger Icon (+20%) */
    transition: transform 0.3s ease;
}

/* Hover States */
.process-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.process-card:hover .process-icon-box {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* Specific Card Colors (Borders & Icons) */
.process-card.step-1 {
    border-top: 1px solid var(--accent-cyan);
}

.process-card.step-1:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 10px 40px rgba(64, 128, 255, 0.15);
}

.process-card.step-1 .process-icon-box {
    border-color: rgba(64, 128, 255, 0.3);
}

.process-card.step-2 {
    border-top: 1px solid var(--accent-green);
}

.process-card.step-2:hover {
    border-color: var(--accent-green);
    box-shadow: 0 10px 40px rgba(0, 255, 100, 0.15);
}

.process-card.step-2 .process-icon-box {
    border-color: rgba(0, 255, 100, 0.3);
}

.process-card.step-3 {
    border-top: 1px solid var(--accent-magenta);
}

.process-card.step-3:hover {
    border-color: var(--accent-magenta);
    box-shadow: 0 10px 40px rgba(255, 0, 100, 0.15);
}

.process-card.step-3 .process-icon-box {
    border-color: rgba(255, 0, 100, 0.3);
}


/* Typography Updates */
.process-card h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.process-card p {
    color: #ccc;
    /* Lighter grey for better contrast */
    font-weight: 500;
    /* Increased weight */
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.9;
    position: relative;
    z-index: 2;
    margin-top: 0;
}

/* 30-Day Guarantee Badge */
.guarantee-badge {
    display: inline-block;
    margin-top: 20px;
    background: rgba(255, 0, 100, 0.15);
    color: var(--accent-magenta);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 0, 100, 0.3);
}

/* New Glowing CTA Button */
.btn-solve-issue {
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    /* Fresh teal/green gradient */
    color: #000;
    font-weight: 800;
    padding: 18px 45px;
    border-radius: 50px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 0 20px rgba(0, 201, 255, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-solve-issue:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 40px rgba(0, 201, 255, 0.7);
    filter: brightness(1.1);
}


/* Responsive */
@media (max-width: 900px) {
    .container {
        padding: 0 20px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 20px;
        gap: 40px;
        text-align: center;
    }

    .hero-text {
        order: 1;
    }

    .hero-text p {
        margin: 0 auto 2.5rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-slider-container {
        order: 2;
        height: 300px;
        margin-bottom: 30px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .focus-split {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand p {
        margin: 20px auto;
    }

    nav {
        display: none;
        /* Replaced by mobile-nav-overlay injected via main.js */
    }

    .header-actions {
        display: none;
        /* Hidden on mobile; CTA buttons shown inside mobile nav overlay */
    }
}

/* ------------------------------------------------------------------
   HOLOGRAPHIC PLAYER STYLES (Cyber-Deck Redesign & Responsive)
   ------------------------------------------------------------------ */

/* Main Container - adds perspective */
.hero-video-player-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    position: relative;
    padding: 20px 0;
    /* Add breathing room */
}

/* The shaped player container */
.holographic-player {
    position: relative;
    width: 100%;
    max-width: 650px;
    /* Responsive sizing */
    height: auto;
    aspect-ratio: 16/9;

    /* Cyber-Deck Shape: Chamfered Top-Left and Bottom-Right */
    clip-path: polygon(40px 0, 100% 0,
            100% calc(100% - 40px), calc(100% - 40px) 100%,
            0 100%, 0 40px);
    background: rgba(0, 15, 25, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Simulated Glowing Border Wrapper */
.holographic-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 2px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1);
    pointer-events: none;
    z-index: 5;
}

/* Dynamic Hover Effect */
.holographic-player:hover {
    transform: scale(1.02) rotateX(2deg);
    box-shadow: 0 20px 50px rgba(0, 255, 255, 0.2);
}

/* Decorative "Tech Plate" on Bottom Right */
.holographic-player::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 40px;
    background: linear-gradient(135deg, transparent 40px, var(--accent-cyan) 40px);
    opacity: 0.8;
    z-index: 6;
    pointer-events: none;
}

/* Video Wrapper */
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: none;
}

/* Gradient Overlay */
.video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 40%, #000 120%);
    pointer-events: none;
    z-index: 2;
}

/* UI Structure */
.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

/* Header */
.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    /* Offset for chamfer */
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 14px;
    border: 1px solid var(--accent-cyan);
    border-radius: 2px;
    transform: skewX(-15deg);
}

.blink-dot {
    width: 6px;
    height: 6px;
    background: #ff0040;
    box-shadow: 0 0 8px #ff0040;
    animation: flash 1s steps(2, start) infinite;
    transform: skewX(15deg);
}

.live-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #fff;
    transform: skewX(15deg);
}

/* Service Label */
.service-label {
    text-align: right;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: var(--accent-cyan);
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1));
    padding: 5px 15px;
    border-right: 3px solid var(--accent-cyan);
    text-shadow: 0 0 10px var(--accent-cyan);
}

/* Central Elements */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 15px var(--accent-cyan);
    animation: scan-vertical 5s ease-in-out infinite;
    opacity: 0.4;
}

/* Footer */
.overlay-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 40px;
    /* Offset for chamfer */
    position: relative;
}

.data-stream {
    display: flex;
    flex-direction: column;
    font-family: monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    gap: 4px;
}

.typewriter {
    border-right: 2px solid var(--accent-cyan);
    padding-right: 5px;
    animation: blink-caret 0.75s step-end infinite;
}

/* Custom Progress Bar that fits the theme */
.progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 40px;
    /* Aligned with cut */
    width: calc(100% - 160px);
    /* Leave room for tech plate */
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.progress-fill {
    width: 0;
    height: 100%;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
}

/* Decoration: Corner Brackets (Redesigned) */
.corner {
    display: none;
}

/* Animations */
@keyframes flash {
    to {
        visibility: hidden;
    }
}

@keyframes scan-vertical {
    0% {
        top: 0%;
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes blink-caret {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: var(--accent-cyan);
    }

    100% {
        border-color: transparent;
    }
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 900px) {
    .holographic-player {
        /* Reduce clipped corner size */
        clip-path: polygon(20px 0, 100% 0,
                100% calc(100% - 20px), calc(100% - 20px) 100%,
                0 100%, 0 20px);
    }

    .holographic-player::after {
        width: 80px;
        height: 20px;
        background: linear-gradient(135deg, transparent 20px, var(--accent-cyan) 20px);
    }

    .overlay-header {
        padding-left: 10px;
    }

    .overlay-footer {
        padding-right: 20px;
    }

    .progress-bar-container {
        left: 20px;
        width: calc(100% - 100px);
    }

    /* Smaller Text */
    .service-label {
        font-size: 0.8rem;
    }

    .live-text {
        font-size: 0.6rem;
    }

    .data-stream {
        display: none;
    }

    /* Hide extra data on small screens */
}

@media (max-width: 600px) {

    /* Global Mobile Fixes */
    body {
        font-size: 14px;
    }

    section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    /* Full width containers with less padding */
    .container {
        padding: 0 15px;
    }

    /* Player Adjustments */
    .hero-video-player-container {
        padding: 10px 0;
        min-height: unset;
        height: auto;
    }

    .holographic-player {
        clip-path: polygon(15px 0, 100% 0,
                100% calc(100% - 15px), calc(100% - 15px) 100%,
                0 100%, 0 15px);
    }

    .player-overlay {
        padding: 15px;
    }

    .overlay-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .overlay-header .service-label {
        border-left: none;
        border-bottom: 2px solid var(--accent-cyan);
        padding-left: 0;
        text-align: left;
    }
}

/* --- Visual Effects (JS Powered) --- */

/* Initial hidden state */
.scroll-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Revealed state */
.scroll-hidden.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Specific stagger adjustments if needed, 
   but standard transition handles it smoothly enough */

/* Hero Content specific animation overrides */
.hero-content.scroll-hidden {
    transform: scale(0.95);
}

.hero-content.scroll-hidden.visible {
    transform: scale(1);
}

/* 3D Tilt Smoothness */
.problem-card {
    transition: transform 0.1s ease-out;
    /* Fast response for tilt, overriding default hover */
    /* Note: We use inline styles in JS for the tilt, this is fallback */
}

/* Floating Tech Icons */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- New Detailed Service Page Styles --- */
.detail-section {
    padding: 80px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-section h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.detail-lead {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 800px;
    margin-bottom: 60px;
}

/* Problem Grid */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.problem-card {
    background: rgba(255, 50, 50, 0.05);
    border: 1px solid rgba(255, 50, 50, 0.2);
    padding: 30px;
    border-radius: 12px;
    transition: transform 0.3s;
}

.problem-card:hover {
    transform: translateY(-5px);
    border-color: #00c8ff;
    box-shadow: 0 5px 20px rgba(255, 50, 50, 0.1);
}

.problem-icon {
    font-size: 2rem;
    color: #00c8ff;
    margin-bottom: 20px;
}

/* Visual Case Study - Compact */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.case-study-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.case-study-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
}

.case-study-item:hover .case-study-img {
    transform: scale(1.05);
}

.case-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    padding: 15px 20px;
}

.case-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.badge-problem {
    background: rgba(255, 50, 50, 0.2);
    color: #00c8ff;
    border: 1px solid #00c8ff;
}

.badge-solution {
    background: rgba(0, 255, 100, 0.2);
    color: #00ff66;
    border: 1px solid #00ff66;
}

.case-overlay h3 {
    font-size: 1.1rem;
    margin-bottom: 2px !important;
}

@media (max-width: 768px) {
    .case-study-grid {
        grid-template-columns: 1fr;
    }
}

/* Solution Timeline */
.solution-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 60px;
}

.solution-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-cyan);
    opacity: 0.3;
    transform: translateX(-50%);
}

.timeline-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
    position: relative;
}

.timeline-step:nth-child(even) {
    flex-direction: row-reverse;
}

.step-marker {
    width: 40px;
    height: 40px;
    background: var(--bg-dark);
    border: 2px solid var(--accent-cyan);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 0 15px var(--accent-cyan);
}

.step-content {
    width: 45%;
    background: rgba(20, 20, 30, 0.8);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(64, 128, 255, 0.1);
    position: relative;
}

.step-content h3 {
    color: var(--accent-cyan);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    background: var(--accent-cyan);
    opacity: 0.5;
}

.timeline-step:nth-child(odd) .step-content::before {
    right: -20px;
}

.timeline-step:nth-child(even) .step-content::before {
    left: -20px;
}

/* Tech Stack Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.tech-item {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(10px);
    padding: 25px 20px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, rgba(64, 128, 255, 0.1) 0%, transparent 100%);
    transition: height 0.4s ease;
    z-index: 0;
}

.tech-item:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(64, 128, 255, 0.15);
}

.tech-item:hover::before {
    height: 100%;
}

.tech-item i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--text-muted);
    transition: all 0.4s ease;
    z-index: 1;
    filter: drop-shadow(0 0 0 transparent);
}

.tech-item:hover i,
.tech-item:hover img {
    transform: scale(1.1) rotateY(10deg);
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 10px var(--accent-cyan));
}

.tech-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    transition: all 0.4s ease;
    z-index: 1;
    filter: grayscale(100%) brightness(200%);
    /* Start white/silver */
}

.tech-item:hover img {
    filter: grayscale(0%) drop-shadow(0 0 15px rgba(64, 128, 255, 0.6));
    /* Reveal color */
}

.tech-item span {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    z-index: 1;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.tech-item:hover span {
    color: var(--accent-cyan);
}

/* Responsive Timeline */
@media (max-width: 768px) {
    .solution-timeline::before {
        left: 20px;
    }

    .timeline-step {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 50px;
        margin-bottom: 40px;
    }

    .step-marker {
        left: 20px;
        top: 0;
        transform: translate(-50%, 0);
    }

    .step-content {
        width: 100%;
        margin-top: 10px;
    }

    .step-content::before {
        display: none;
    }
}

/* Cyber Hero Overlay Effects */
.hero-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 95%, rgba(64, 128, 255, 0.2) 95%);
    background-size: 100% 4px;
    animation: scanlines 1s linear infinite;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}

@keyframes scanlines {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 90%);
    z-index: 1;
    pointer-events: none;
}

/* Global Service Page Adjustments */
section[class^="hero-"] {
    min-height: 50vh;
}

.hero-content h1 {
    font-size: 3.5rem;
}

/* Text Scramble 'Dud' Character */
.dud {
    color: var(--accent-purple);
    opacity: 0.7;
}

/* Impact Statistics Section */
.stats-section {
    padding: 60px 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.03), transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    text-align: center;
}

.stat-item h3 {
    font-size: 3.5rem;
    color: var(--accent-cyan);
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.stat-item p {
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* Footer Social Icons & Layout */
.footer-logo {
    display: block;
    margin-bottom: 16px;
}

.footer-logo img {
    height: 80px;
    width: auto;
    display: block;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    /* Push icons down a bit */
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    transform: translateY(-3px);
    background: #fff;
    color: #000;
    /* Fix: Icon turns black on white background */
}

/* --- Focus Section Animations --- */
.focus-split {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

.focus-card {
    position: relative;
    background: rgba(15, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 200px 30px 40px;
    /* Space for top visual */
    width: 45%;
    min-width: 300px;
    overflow: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.focus-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-cyan);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.feature-list {
    margin: 20px 0;
    text-align: left;
}

.feature-list li {
    margin-bottom: 10px;
    color: #ccc;
    font-size: 0.95rem;
}

.feature-list i {
    color: var(--accent-cyan);
    margin-right: 10px;
}

/* -- Business Diagnostics Animation -- */
.card-visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: #000;
    z-index: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.diagnostics-overlay,
.shield-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.diagnostics-bg {
    background:
        linear-gradient(rgba(64, 128, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 128, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.diag-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 50%, rgba(64, 128, 255, 0.1) 50%);
    background-size: 100% 4px;
    animation: diag-flicker 0.2s infinite;
    opacity: 0.3;
}

.diag-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Share Tech Mono', monospace;
    color: var(--accent-blue);
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 0 5px var(--accent-blue);
    opacity: 0.9;
    background: rgba(0, 10, 20, 0.9);
    padding: 8px 16px;
    border: 1px solid var(--accent-blue);
    letter-spacing: 2px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Glitch effect on status text */
.diag-status::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 20, 0.9);
    overflow: hidden;
    color: var(--accent-magenta);
    clip: rect(0, 0, 0, 0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

.focus-card.business:hover .diag-grid {
    animation: none;
    /* Stabilize */
    background: none;
}

.focus-card.business:hover .diag-status {
    color: #000;
    background: var(--accent-blue);
    box-shadow: 0 0 30px var(--accent-blue);
    border-color: var(--accent-blue);
    text-shadow: none;
    transform: translate(-50%, -50%) scale(1.1);
}

.focus-card.business:hover .diag-status::after {
    content: "100% OPTIMIZED";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-blue);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes diag-flicker {
    0% {
        opacity: 0.1;
    }

    5% {
        opacity: 0.3;
    }

    10% {
        opacity: 0.1;
    }

    15% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.2;
    }
}

@keyframes glitch-anim {
    0% {
        clip: rect(44px, 9999px, 56px, 0);
        transform: skew(0.6deg);
    }

    5% {
        clip: rect(12px, 9999px, 86px, 0);
        transform: skew(0.6deg);
    }

    10% {
        clip: rect(84px, 9999px, 80px, 0);
        transform: skew(0.2deg);
    }

    15% {
        clip: rect(22px, 9999px, 7px, 0);
        transform: skew(0.8deg);
    }

    20% {
        clip: rect(8px, 9999px, 49px, 0);
        transform: skew(0.1deg);
    }

    25% {
        clip: rect(66px, 9999px, 11px, 0);
        transform: skew(0.4deg);
    }

    100% {
        clip: rect(61px, 9999px, 18px, 0);
        transform: skew(0.3deg);
    }
}

/* -- Home Shield Animation -- */
.shield-bg {
    background: radial-gradient(circle at center, rgba(0, 255, 100, 0.1), transparent 70%);
}

.shield-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shield-icon-container {
    font-size: 4rem;
    color: rgba(0, 255, 100, 0.3);
    transition: all 0.5s ease;
}

.shield-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s;
}

.focus-card.home:hover .shield-scan {
    animation: shield-sweep 2s ease-in-out infinite;
}

.focus-card.home:hover .shield-icon-container {
    color: #00ff66;
    filter: drop-shadow(0 0 25px #00ff66);
    transform: scale(1.2) rotateY(180deg);
}

/* Enhanced Buttons for Cards */
/* ... existing content ... */

/* --- New Service Areas "SixVM Ops Terminal" Style --- */
.sixvm-ops-section {
    padding: 100px 0;
    background: radial-gradient(circle at 30% 50%, rgba(0, 40, 60, 0.4), transparent 70%);
    position: relative;
    overflow: hidden;
}

.ops-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

/* Left: Map Visualization */
.ops-map-frame {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--accent-cyan);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(64, 128, 255, 0.15);
    overflow: hidden;
}

.ops-map-frame img {
    width: 100%;
    display: block;
    opacity: 0.8;
    transition: opacity 0.5s;
}

.ops-map-frame:hover img {
    opacity: 1;
}

.map-overlay-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 2;
}

/* Right: Terminal Interface */
.ops-terminal {
    background: rgba(10, 15, 20, 0.95);
    border: 1px solid var(--glass-border);
    border-top: 3px solid var(--accent-magenta);
    border-radius: 5px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    font-family: 'Consolas', 'Monaco', monospace;
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.terminal-title {
    color: var(--accent-cyan);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.terminal-status {
    font-size: 0.7rem;
    color: var(--accent-green);
    animation: blink 2s infinite;
}

/* State Chips */
.state-selector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 25px;
}

.state-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    padding: 8px 0;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.state-chip:hover {
    border-color: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 0 10px rgba(64, 128, 255, 0.2);
}

.state-chip.active {
    background: var(--accent-cyan);
    color: #000;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(64, 128, 255, 0.4);
}

/* Output Area */
.terminal-output {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 300px;
    overflow-y: auto;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.terminal-item {
    font-size: 0.85rem;
    color: #ccc;
    display: flex;
    align-items: center;
}

.terminal-item::before {
    content: '>';
    color: var(--accent-magenta);
    margin-right: 8px;
    font-weight: bold;
}

.terminal-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Scrollbar for terminal */
.terminal-output::-webkit-scrollbar {
    width: 6px;
}

.terminal-output::-webkit-scrollbar-track {
    background: #000;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
}

@media (max-width: 900px) {
    .ops-grid {
        grid-template-columns: 1fr;
    }

    .ops-map-frame {
        order: -1;
        /* Keep map on top or bottom depending on preference, currently top */
    }
}

/* --- Compact Service Area Card Style (Small & Clean) --- */
.service-compact-section {
    padding: 60px 0;
}

.service-compact-card {
    background: rgba(10, 20, 30, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 380px;
    /* Fixed Compact Height */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    max-width: 1000px;
    margin: 0 auto;
}

/* Map Column (Left) */
.compact-map-col {
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #050505;
}

.compact-map-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.5s;
}

.service-compact-card:hover .compact-map-col img {
    transform: scale(1.05);
}

.map-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: simple-scan 3s linear infinite;
    opacity: 0.5;
}

@keyframes simple-scan {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Content Column (Right) */
.compact-content-col {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
}

.compact-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.compact-title {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.compact-title i {
    color: var(--accent-magenta);
}

/* Mini Nav Pills */
.mini-state-nav {
    display: flex;
    gap: 8px;
}

.mini-state-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mini-state-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mini-state-btn.active {
    background: var(--accent-cyan);
    color: #000;
    box-shadow: 0 0 10px rgba(64, 128, 255, 0.4);
}

/* Grid List */
.compact-area-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 10px 20px;
    overflow-y: auto;
    padding-right: 10px;
}

.compact-area-item {
    font-size: 0.85rem;
    color: #ccc;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: color 0.2s;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-area-item:hover {
    color: var(--accent-cyan);
}

/* Scrollbar */
.compact-area-list::-webkit-scrollbar {
    width: 4px;
}

.compact-area-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .service-compact-card {
        grid-template-columns: 1fr;
        height: auto;
        max-height: 600px;
    }

    .compact-map-col {
        height: 150px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .compact-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .compact-area-list {
        grid-template-columns: 1fr 1fr;
        max-height: 200px;
    }
}

.focus-card .btn-secondary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.focus-card .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--accent-blue);
    z-index: -1;
    transition: width 0.3s ease;
}

.focus-card.home .btn-secondary::before {
    background: var(--accent-green);
}

.focus-card.home .btn-secondary {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.focus-card .btn-secondary:hover {
    color: #000;
    box-shadow: 0 0 20px rgba(64, 128, 255, 0.4);
}

.focus-card.home .btn-secondary:hover {
    box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
}

.focus-card .btn-secondary:hover::before {
    width: 100%;
}

@keyframes shield-sweep {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}
/* ═══════════════════════════════════════════════
   HOME & BUSINESS SUPPORT — Quick Access Section
   ═══════════════════════════════════════════════ */
.support-focus-section {
    padding: 90px 0 60px;
}

.support-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 48px;
}

.support-mega-card {
    background: rgba(12, 18, 28, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.business-card {
    border-top: 3px solid var(--accent-cyan);
}

.home-card {
    border-top: 3px solid #00c850;
}

.business-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 200, 255, 0.14);
}

.home-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 200, 80, 0.14);
}

.support-card-header {
    padding: 28px 28px 20px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.support-badge.enterprise {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    background: rgba(0, 200, 255, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 200, 255, 0.3);
}

.support-badge.home-badge-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    background: rgba(0, 200, 80, 0.1);
    color: #00c850;
    border: 1px solid rgba(0, 200, 80, 0.3);
}

.support-card-header h3 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
}

.support-card-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}

.support-services-list {
    flex: 1;
    padding: 8px 0;
}

.support-service-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

.support-service-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.support-service-item:last-child {
    border-bottom: none;
}

.support-service-item > i:first-child {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.business-card .support-service-item > i:first-child {
    background: rgba(0, 200, 255, 0.08);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 200, 255, 0.2);
}

.home-card .support-service-item > i:first-child {
    background: rgba(0, 200, 80, 0.08);
    color: #00c850;
    border: 1px solid rgba(0, 200, 80, 0.2);
}

.support-service-item > div {
    flex: 1;
}

.support-service-item strong {
    display: block;
    color: #dde4f0;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.support-service-item span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.support-service-item > i:last-child {
    color: rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    transition: color 0.2s, transform 0.2s;
}

.support-service-item:hover > i:last-child {
    color: rgba(255, 255, 255, 0.55);
    transform: translateX(4px);
}

.support-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 28px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    letter-spacing: 0.4px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.support-cta-btn:hover {
    transform: translateY(-2px);
}

.enterprise-btn {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.12), rgba(64, 128, 255, 0.18));
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 200, 255, 0.3);
}

.enterprise-btn:hover {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.22), rgba(64, 128, 255, 0.28));
    box-shadow: 0 8px 25px rgba(0, 200, 255, 0.2);
}

.home-btn {
    background: linear-gradient(135deg, rgba(0, 200, 80, 0.12), rgba(0, 160, 60, 0.18));
    color: #00c850;
    border: 1px solid rgba(0, 200, 80, 0.3);
}

.home-btn:hover {
    background: linear-gradient(135deg, rgba(0, 200, 80, 0.22), rgba(0, 160, 60, 0.28));
    box-shadow: 0 8px 25px rgba(0, 200, 80, 0.2);
}

/* Trust Bar */
.support-stats-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
    padding: 22px 32px;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.support-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 500;
}

.support-stat i {
    color: var(--accent-blue);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .support-cards-grid {
        grid-template-columns: 1fr;
    }
    .support-stats-bar {
        gap: 20px;
    }
}

/* ═══════════════════════════════════════════
   SUPPORT CARDS — Image Banners + Animations
   ═══════════════════════════════════════════ */

/* ── Visual banner ── */
.sc-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.sc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.support-mega-card:hover .sc-bg {
    transform: scale(1.06);
}

/* Overlays */
.biz-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,10,25,0.82) 0%, rgba(0,30,60,0.6) 100%);
}

.home-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,10,5,0.78) 0%, rgba(0,40,20,0.55) 100%);
}

/* Scan line (business card) */
.sc-scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,200,255,0.8), transparent);
    box-shadow: 0 0 12px rgba(0,200,255,0.6);
    animation: scScanDown 3s ease-in-out infinite;
    z-index: 3;
}

@keyframes scScanDown {
    0%   { top: 0%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Grid lines overlay (business) */
.sc-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 2;
}

/* HUD corners */
.sc-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 4;
    border-color: rgba(0,200,255,0.7);
    border-style: solid;
}
.sc-tl { top: 10px; left: 10px;  border-width: 2px 0 0 2px; }
.sc-tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.sc-bl { bottom: 10px; left: 10px;  border-width: 0 0 2px 2px; }
.sc-br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

/* HUD status bar (business) */
.sc-hud {
    position: absolute;
    bottom: 12px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(0,200,255,0.85);
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 4;
}

.sc-hud-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88;
    animation: scBlink 1.4s ease-in-out infinite;
}

@keyframes scBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.sc-hud-sep { opacity: 0.35; }

/* Floating device icons (home card) */
.sc-float {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,200,80,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00c850;
    font-size: 0.85rem;
    z-index: 4;
    animation: scFloat 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0,200,80,0.25);
}

@keyframes scFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Override center icon positioning */
.sc-float:nth-child(6) {
    animation: scFloatCenter 2.5s ease-in-out infinite;
    font-size: 1.1rem;
    width: 46px;
    height: 46px;
    border-color: rgba(0,200,80,0.7);
    box-shadow: 0 0 20px rgba(0,200,80,0.4);
}

@keyframes scFloatCenter {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-50%) scale(1.1); }
}

/* Pulse ring (home card) */
.sc-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid rgba(0,200,80,0.4);
    animation: scPulse 2.5s ease-out infinite;
    z-index: 3;
}

@keyframes scPulse {
    0%   { width: 54px; height: 54px; opacity: 0.8; }
    100% { width: 130px; height: 130px; opacity: 0; }
}

/* Visual badge (inside image) */
.sc-visual-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 5;
}

.sc-visual-badge.enterprise {
    background: rgba(0,200,255,0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(0,200,255,0.4);
    backdrop-filter: blur(6px);
}

.sc-visual-badge.home {
    background: rgba(0,200,80,0.15);
    color: #00c850;
    border: 1px solid rgba(0,200,80,0.4);
    backdrop-filter: blur(6px);
}

/* Card body (below visual) */
.support-card-body {
    padding: 22px 26px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.support-card-body h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}

.sc-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 8px;
}

/* Animate card border glow on hover */
.business-card {
    border-top: none;
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}

.home-card {
    border-top: none;
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}

.business-card:hover {
    border-color: rgba(0,200,255,0.35);
    box-shadow: 0 0 40px rgba(0,200,255,0.12), 0 20px 50px rgba(0,0,0,0.3);
}

.home-card:hover {
    border-color: rgba(0,200,80,0.35);
    box-shadow: 0 0 40px rgba(0,200,80,0.12), 0 20px 50px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════
   ABOUT SECTION
   ══════════════════════════════════ */
.about-section {
    padding: 100px 0 80px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-content h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin: 12px 0 20px;
    line-height: 1.2;
}

.about-lead {
    font-size: 1.05rem;
    color: #c8d4e8;
    line-height: 1.75;
    margin-bottom: 16px;
    font-weight: 500;
}

.about-body {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 32px;
}

.about-values {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-value {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: border-color 0.3s, background 0.3s;
}

.about-value:hover {
    background: rgba(64,128,255,0.05);
    border-color: rgba(64,128,255,0.2);
}

.av-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: rgba(64,128,255,0.1);
    border: 1px solid rgba(64,128,255,0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-size: 1rem;
}

.about-value h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #dde4f0;
    margin: 0 0 3px;
}

.about-value p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Right visual */
.about-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.about-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-img-wrap:hover .about-img {
    transform: scale(1.04);
}

.about-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,10,20,0.7) 0%, transparent 60%);
}

/* Badge cards */
.about-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.about-badge-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(12,18,28,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    transition: border-color 0.3s, transform 0.3s;
}

.about-badge-card:hover {
    border-color: rgba(64,128,255,0.3);
    transform: translateY(-2px);
}

.about-badge-card i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.about-badge-card strong {
    display: block;
    font-size: 0.82rem;
    color: #dde4f0;
    font-weight: 700;
}

.about-badge-card span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ══════════════════════════════════
   FAQ SECTION
   ══════════════════════════════════ */
.faq-section {
    padding: 80px 0 100px;
    background: rgba(255,255,255,0.01);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 48px;
}

.faq-item {
    background: rgba(12,18,28,0.85);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.faq-item.open {
    border-color: rgba(64,128,255,0.3);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: none;
    border: none;
    cursor: pointer;
    color: #dde4f0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    font-family: inherit;
    transition: color 0.2s;
}

.faq-q:hover {
    color: #fff;
}

.faq-q i {
    color: var(--accent-blue);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-q i {
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 22px;
}

.faq-item.open .faq-a {
    max-height: 300px;
    padding: 0 22px 20px;
}

.faq-a p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.75;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 14px;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════
   RATINGS & REVIEWS SECTION
   ══════════════════════════════════ */
.ratings-section {
    padding: 90px 0 80px;
}

/* Rating overview bar */
.rating-overview {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin: 48px 0 56px;
    padding: 36px;
    background: rgba(12,18,28,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
}

/* Big score */
.rating-score-box {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.07);
    padding-right: 30px;
}

.rating-number {
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
}

.rating-stars-big {
    color: #ffd700;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.rating-count {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 16px;
}

.rating-platforms {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.rating-platform {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.78rem;
}

.rating-platform i { font-size: 1rem; }
.rating-platform span { color: var(--text-muted); }
.rating-platform strong { color: #fff; font-weight: 700; }

/* Star breakdown bars */
.rating-breakdown {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rb-row > span:first-child {
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.rb-row > span:last-child {
    width: 32px;
    flex-shrink: 0;
}

.rb-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.rb-fill {
    height: 100%;
    border-radius: 4px;
    animation: rbGrow 1.2s ease forwards;
    transform-origin: left;
}

@keyframes rbGrow {
    from { width: 0 !important; }
}

/* Quick stats */
.rating-quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.07);
}

.rqs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.rqs-item i {
    color: var(--accent-blue);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.rqs-item strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.rqs-item span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Review cards grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.review-card {
    background: rgba(12,18,28,0.85);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.review-card:hover {
    border-color: rgba(64,128,255,0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.review-meta {
    flex: 1;
}

.review-meta h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #dde4f0;
    margin: 0 0 2px;
}

.review-meta span {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.review-platform {
    font-size: 1.2rem;
    opacity: 0.8;
}

.review-stars {
    color: #ffd700;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.review-card p {
    font-size: 0.84rem;
    color: #b8c4d8;
    line-height: 1.7;
    margin: 0;
    flex: 1;
    font-style: italic;
}

.review-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
    margin-top: auto;
}

/* Leave a Review CTA */
.review-cta {
    text-align: center;
    padding: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.review-cta p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .rating-overview {
        grid-template-columns: 1fr 1fr;
    }
    .rating-quick-stats {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
        padding-left: 0;
        padding-top: 20px;
        grid-template-columns: repeat(4,1fr);
    }
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .rating-overview {
        grid-template-columns: 1fr;
    }
    .rating-score-box {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding-right: 0;
        padding-bottom: 24px;
    }
    .rating-quick-stats {
        grid-template-columns: 1fr 1fr;
    }
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════
   REVIEW MODAL
   ══════════════════════════════════ */
.review-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.review-modal-overlay.open {
    display: flex;
}

.review-modal-box {
    background: #0d1520;
    border: 1px solid rgba(64,128,255,0.25);
    border-radius: 20px;
    padding: 36px;
    width: 100%;
    max-width: 480px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.review-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.review-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.review-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.review-modal-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(255,200,0,0.15), rgba(255,150,0,0.1));
    border: 1px solid rgba(255,200,0,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffd700;
    margin: 0 auto 14px;
}

.review-modal-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
}

.review-modal-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Star input */
.star-input-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.star-input-wrap > span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.star-input-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.star-input-i {
    font-size: 2rem;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.star-input-i:hover {
    transform: scale(1.2);
}

/* Form fields */
#review-form input,
#review-form textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 12px 16px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

#review-form input:focus,
#review-form textarea:focus {
    border-color: rgba(64,128,255,0.5);
}

#review-form input::placeholder,
#review-form textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

#review-form textarea { resize: vertical; }

.review-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4080ff, #0050cc);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.review-submit-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.review-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.review-error {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: #ff8080;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-bottom: 12px;
}

/* Success state */
.review-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    gap: 0;
}

.review-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #00c850, #00a040);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 22px;
    box-shadow: 0 0 50px rgba(0, 200, 80, 0.35);
    animation: success-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes success-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.review-success h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    background: linear-gradient(90deg, #fff 40%, #00c8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.review-success p {
    color: rgba(180, 210, 240, 0.8);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 28px;
    max-width: 300px;
}

/* Verified badge for dynamic reviews */
.review-verified {
    color: #00c850 !important;
    font-size: 0.75rem !important;
}

.review-card-new {
    border-color: rgba(0,200,80,0.15);
}

/* ══════════════════════════════════
   REVIEWS AUTO-SCROLL TICKER
   ══════════════════════════════════ */
.reviews-scroll-wrapper {
    overflow: hidden;
    margin: 0 -40px 40px;
    -webkit-mask: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.reviews-ticker {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scroll-left 45s linear infinite;
    padding: 10px 20px 14px;
}

.reviews-ticker:hover {
    animation-play-state: paused;
}

.reviews-ticker .review-card {
    width: 320px;
    flex-shrink: 0;
    cursor: inherit;
    user-select: none;
    -webkit-user-select: none;
}

/* ══════════════════════════════════
   HERO — FULL HEIGHT REDESIGN
   ══════════════════════════════════ */

/* Hero grid vertical alignment */
.hero-grid {
    align-items: center;
}

/* Badge above headline */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(64,128,255,0.1);
    border: 1px solid rgba(64,128,255,0.3);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    background: #00c850;
    border-radius: 50%;
    box-shadow: 0 0 6px #00c850;
    animation: scBlink 1.4s ease-in-out infinite;
}

/* Tech partner logos */
.hero-partners {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.hero-partners-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.hero-partners-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-partners-logos span {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.3);
    transition: color 0.2s;
    cursor: default;
}

.hero-partners-logos span:hover { color: rgba(255,255,255,0.7); }

/* Feature chips */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.hero-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.hero-chip i { color: var(--accent-blue); }

/* Floating info cards below video */
.hero-info-cards {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.hero-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(10,15,25,0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    flex: 1;
}

.hero-info-card i { font-size: 1.2rem; }

.hero-info-card strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.hero-info-card span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Bottom stats strip */
.hero-stats-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 18px 40px;
    background: rgba(5,10,20,0.7);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.hss-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(12px, 2.5vw, 40px);
    text-align: center;
}

.hss-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hss-plus {
    font-size: 1rem;
    color: var(--accent-cyan);
}

.hss-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.hss-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.08);
}

/* ── Medium screens: 2-col hero stays but tighter ── */
@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .hero-text h1 { font-size: 2.8rem; }
    .hero-dashboard-interface { padding: 10px; }
    .hero-stats-strip { padding: 14px 20px; }
}

@media (max-width: 768px) {
    .hero-stats-strip { flex-wrap: wrap; gap: 16px; padding: 16px 20px; }
    .hss-divider { display: none; }
    .hss-item { padding: 0 16px; }
    .hero-chips { display: none; }
    .hero-info-cards { display: none; }
    .hero-partners { display: none; }
}

/* ══════════════════════════════════
   HERO — MOBILE FIXES
   ══════════════════════════════════ */
@media (max-width: 900px) {

    /* Fix hero height so stats strip doesn't overlap content */
    .hero {
        height: auto;
        min-height: 100svh;
        padding-bottom: 100px; /* height of stats strip */
        align-items: flex-start;
        padding-top: calc(var(--header-height) + 20px);
    }

    /* Text first, video second */
    .hero-text {
        order: 1;
        text-align: center;
    }

    .hero-dashboard-interface {
        order: 2;
        padding: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Center badge */
    .hero-badge {
        margin: 0 auto 18px;
        display: inline-flex;
    }

    /* Fix text overflow */
    .hero-text h1 {
        font-size: 2.2rem;
        word-break: break-word;
    }

    .hero-text p {
        font-size: 1rem;
        padding: 0 10px;
        word-break: break-word;
    }

    /* Center CTA buttons and stack them */
    .hero-cta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Hide extras on mobile */
    .hero-chips    { display: none; }
    .hero-partners { display: none; }
    .hero-info-cards { display: none; }

    /* Grid padding for stats strip */
    .hero-grid {
        padding-bottom: 20px;
        gap: 30px;
    }

    /* Stats strip — 2 rows on mobile */
    .hero-stats-strip {
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 14px 16px;
        gap: 8px;
    }

    .hss-item {
        min-width: calc(33% - 16px);
        padding: 4px 8px;
    }

    .hss-num  { font-size: 1.3rem; }
    .hss-plus { font-size: 0.8rem; }
    .hss-label { font-size: 0.62rem; letter-spacing: 0.5px; }
    .hss-divider { display: none; }
}

@media (max-width: 480px) {
    .hero-text h1 { font-size: 1.9rem; }
    .hero-stats-strip { padding: 12px 10px; }
    .hss-item { min-width: calc(50% - 12px); }
}