:root {
    --bg: #000;
    --text: #E6E6E6;
    --accent: #4b4be9;
    --accent-hover: #483ACC;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.navbar {
    transition: background-color .3s ease;
}

.navbar.scrolled {
    background-color: #000 !important;
}

.nav-link {
    color: #fff !important;
    font-weight: 400;
}

.hero {
    background: radial-gradient(140% 120% at 50% 0%, #222744 0%, #0d1024 45%, #02030c 100%);
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .65);
    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 360px at 15% -10%, rgba(108, 99, 255, .22), transparent 60%),
        radial-gradient(700px 280px at 90% 110%, rgba(75, 67, 229, .18), transparent 60%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(34px, 5.2vw, 56px);
    font-weight: 800;
    letter-spacing: -.01em;
}

.hero-sub {
    color: #D8DAE7;
    font-size: clamp(16px, 2.2vw, 20px);
}

.btn {
    border-radius: 12px;
    font-weight: 700;
    padding: .9rem 1.2rem;
}

.btn-solid {
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(75, 67, 229, .25);
}

.btn-solid:hover {
    background: var(--accent-hover);
    filter: brightness(1.02);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid #3A3A3A;
    padding: .85rem 1.15rem;
}

.btn-outline:hover {
    background: #151626;
    border-color: #4b4be9;
}

.automation-dashboard {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 18px;
    background: radial-gradient(circle at 25% 20%, rgba(108, 99, 255, .18), transparent 65%),
        radial-gradient(circle at 80% 0%, rgba(76, 225, 255, .12), transparent 55%),
        rgba(8, 10, 26, .92);
    border: 1px solid rgba(63, 72, 126, .55);
    box-shadow: 0 24px 70px rgba(6, 8, 24, .55);
    outline: none;
}

.automation-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(140deg, rgba(108, 99, 255, .12), transparent 45%, rgba(76, 224, 255, .12));
    opacity: .85;
    pointer-events: none;
}

.automation-dashboard__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.automation-dashboard__svg .orb {
    transform-box: fill-box;
    transform-origin: center;
    animation: orbFloat 12s ease-in-out infinite;
}

.automation-dashboard__svg .orb--cyan {
    animation-delay: 3s;
}

.automation-dashboard__svg .orb--magenta {
    animation-delay: 6s;
}

.automation-dashboard__svg .clicks-line {
    stroke-dasharray: 680;
    stroke-dashoffset: 680;
    animation: lineFlow 7s ease-in-out infinite;
    filter: url(#glow);
}

.automation-dashboard__svg .line-spark {
    filter: url(#spark-glow);
}

.automation-dashboard__svg .cpc-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: barPulse 4.5s ease-in-out infinite;
}

.automation-dashboard__svg .cpc-bar:nth-child(2) {
    animation-delay: .25s;
}

.automation-dashboard__svg .cpc-bar:nth-child(3) {
    animation-delay: .5s;
}

.automation-dashboard__svg .cpc-bar:nth-child(4) {
    animation-delay: .75s;
}

.automation-dashboard__svg .cpc-bar:nth-child(5) {
    animation-delay: 1s;
}

.automation-dashboard__svg .panel-label {
    letter-spacing: .02em;
}

.automation-dashboard__svg .kpi-card rect {
    animation: cardGlow 9s ease-in-out infinite;
}

.automation-dashboard__svg .kpi-card:nth-child(odd) rect {
    animation-delay: .9s;
}

.automation-dashboard__svg .kpi-card:nth-child(even) rect {
    animation-delay: 1.8s;
}

.service-visual {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 18px;
    background: radial-gradient(circle at 20% 15%, rgba(108, 99, 255, .2), transparent 65%),
        radial-gradient(circle at 78% 0%, rgba(76, 224, 255, .14), transparent 55%),
        rgba(8, 10, 26, .92);
    border: 1px solid rgba(63, 72, 126, .45);
    box-shadow: 0 24px 60px rgba(5, 6, 20, .55);
}

.service-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(108, 99, 255, .14), transparent 45%, rgba(76, 224, 255, .12));
    opacity: .85;
    pointer-events: none;
}

.service-visual__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.service-visual__svg .orb {
    transform-box: fill-box;
    transform-origin: center;
    animation: orbFloat 14s ease-in-out infinite;
}

.service-visual__svg .orb--alt {
    animation-delay: 5s;
}

.service-visual__svg .orb--late {
    animation-delay: 8s;
}

.web-lab__svg .code-line {
    transform-origin: left center;
    animation: codeSwipe 6s ease-in-out infinite;
    opacity: .45;
}

.web-lab__svg .code-line:nth-child(2) {
    animation-delay: .8s;
}

.web-lab__svg .code-line:nth-child(3) {
    animation-delay: 1.6s;
}

.web-lab__svg .code-line:nth-child(4) {
    animation-delay: 2.4s;
}

.web-lab__svg .progress-value {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: progressSweep 8s ease-in-out infinite;
    filter: url(#web-glow);
}

.web-lab__svg .progress-spark {
    filter: url(#web-glow);
}

.web-lab__svg .floating-card {
    transform-box: fill-box;
    transform-origin: center;
    animation: floatSoft 7s ease-in-out infinite;
}

.web-lab__svg .floating-card--delay {
    animation-delay: 2.2s;
}

.web-lab__svg .audit-card {
    animation: pulseSoft 5.5s ease-in-out infinite;
}

.marketing-command__svg .line-path {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: lineFlow 7.5s ease-in-out infinite;
    filter: url(#marketing-glow);
}

.marketing-command__svg .line-spark {
    filter: url(#marketing-glow);
}

.marketing-command__svg .bar {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: barPulse 4.8s ease-in-out infinite;
}

.marketing-command__svg .bar:nth-child(2) {
    animation-delay: .5s;
}

.marketing-command__svg .bar:nth-child(3) {
    animation-delay: 1s;
}

.marketing-command__svg .bar:nth-child(4) {
    animation-delay: 1.5s;
}

.marketing-command__svg .bar:nth-child(5) {
    animation-delay: 2s;
}

.marketing-command__svg .pulse-dot {
    animation: pulseDot 3s ease-in-out infinite;
}

.marketing-command__svg .floating-tag {
    transform-box: fill-box;
    transform-origin: center;
    animation: floatSoft 6.5s ease-in-out infinite;
}

.marketing-command__svg .floating-tag--delay {
    animation-delay: 2.6s;
}

@keyframes orbFloat {

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

    50% {
        transform: translateY(-16px) scale(1.05);
        opacity: 1;
    }
}

@keyframes lineFlow {
    0% {
        stroke-dashoffset: 680;
        opacity: .25;
    }

    15% {
        opacity: 1;
    }

    55% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -680;
        opacity: .45;
    }
}

@keyframes barPulse {

    0%,
    100% {
        transform: scaleY(.82);
        opacity: .7;
    }

    45% {
        transform: scaleY(1.05);
        opacity: 1;
    }

    70% {
        transform: scaleY(.95);
        opacity: .85;
    }
}

@keyframes cardGlow {

    0%,
    100% {
        stroke-opacity: .28;
    }

    50% {
        stroke-opacity: .65;
    }
}

@keyframes codeSwipe {

    0%,
    100% {
        transform: scaleX(.2);
        opacity: .25;
    }

    20%,
    55% {
        transform: scaleX(1);
        opacity: .9;
    }
}

@keyframes cursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes progressSweep {
    0% {
        stroke-dashoffset: 280;
    }

    40%,
    80% {
        stroke-dashoffset: 70;
    }

    100% {
        stroke-dashoffset: 280;
    }
}

@keyframes floatSoft {

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

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

@keyframes pulseSoft {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(108, 99, 255, 0));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(108, 99, 255, .6));
    }
}

@keyframes pulseDot {

    0%,
    100% {
        r: 5;
        opacity: .45;
    }

    50% {
        r: 8;
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .hero {
        min-height: unset;
        padding: 80px 0;
    }
}

.web-font {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.web-ink {
    fill: #EDEDF7;
}

.web-muted {
    fill: #AEB4CC;
}

.web-stroke {
    stroke: rgba(60, 65, 94, .75);
    stroke-width: 1.2;
}

.web-chip {
    fill: rgba(10, 12, 26, .92);
    stroke: rgba(76, 82, 117, .7);
}

.web-cap {
    dominant-baseline: middle;
}

@media (max-width: 575px) {
    .hero {
        padding-top: 120px;
        padding-bottom: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}