/*=========================================================
MAGUDALI - FLUENT DESIGN
Complete Component Styles
=========================================================*/

/*==============================
THREE.JS CANVAS
==============================*/

#three-canvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -5;

    pointer-events: none;

    opacity: 0.6;

}

/*==============================
MICA BACKGROUND
==============================*/

.mica {

    position: fixed;

    inset: 0;

    z-index: -10;

    background: var(--fluent-bg-base);

}

.mica .noise {

    position: absolute;

    inset: 0;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    background-size: 128px 128px;

    opacity: 0.5;

    pointer-events: none;

}

.mica-gradient {

    position: absolute;

    border-radius: 50%;

    filter: blur(140px);

    pointer-events: none;

}

.mica-gradient.one {

    width: 800px;

    height: 800px;

    background: radial-gradient(circle, rgba(96, 205, 255, 0.08), transparent 70%);

    top: -300px;

    left: -200px;

}

.mica-gradient.two {

    width: 700px;

    height: 700px;

    background: radial-gradient(circle, rgba(135, 100, 184, 0.06), transparent 70%);

    bottom: -200px;

    right: -150px;

}

/*==============================
LOADER
==============================*/

#loader {

    position: fixed;

    inset: 0;

    background: var(--fluent-bg-base);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    transition: opacity 0.4s var(--fluent-ease-decelerate);

}

#loader.hidden {

    opacity: 0;

    pointer-events: none;

}

.loader-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 24px;

}

.loader-ring {

    width: 40px;

    height: 40px;

    border: 3px solid var(--fluent-bg-layer3);

    border-top-color: var(--fluent-accent);

    border-radius: 50%;

    animation: loaderSpin 0.8s linear infinite;

}

.loader-text {

    font-size: var(--fluent-type-subtitle-1);

    font-weight: 600;

    letter-spacing: 6px;

    color: var(--fluent-text-secondary);

}

@keyframes loaderSpin {

    to { transform: rotate(360deg); }

}

/*==============================
HEADER
==============================*/

#header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: var(--header-height);

    z-index: 500;

    transition:

        background var(--fluent-duration-slow) var(--fluent-ease-default),

        border-color var(--fluent-duration-slow) var(--fluent-ease-default);

    border-bottom: 1px solid transparent;

}

#header.scrolled {

    background: rgba(18, 18, 18, 0.85);

    backdrop-filter: blur(50px) saturate(150%);

    -webkit-backdrop-filter: blur(50px) saturate(150%);

    border-bottom-color: rgba(96, 205, 255, 0.08);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

}

.header-inner {

    height: 100%;

    display: flex;

    justify-content: space-between;

    align-items: stretch;

    gap: 20px;

}

header nav {

    height: 100%;

    display: flex;

    align-items: stretch;

}

/*==============================
LOGO
==============================*/

.logo {

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 4px;

    color: var(--fluent-text-primary);

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    position: relative;

    margin: auto 0;

}

.logo-glitch {

    position: relative;

    display: inline-block;

    background: linear-gradient(135deg, #60CDFF 0%, #fff 50%, #8764B8 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: logoShimmer 3s ease-in-out infinite;

    background-size: 200% 200%;

}

@keyframes logoShimmer {

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

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

}

.logo-glitch::before,

.logo-glitch::after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #60CDFF, #8764B8);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    opacity: 0;

}

.logo-glitch::before {

    animation: glitch1 4s infinite;

    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);

}

.logo-glitch::after {

    animation: glitch2 4s infinite;

    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);

}

@keyframes glitch1 {

    0%, 92%, 100% { opacity: 0; transform: translate(0); }

    93% { opacity: 0.8; transform: translate(-2px, -1px); }

    95% { opacity: 0; transform: translate(0); }

    96% { opacity: 0.6; transform: translate(2px, 1px); }

    98% { opacity: 0; }

}

@keyframes glitch2 {

    0%, 90%, 100% { opacity: 0; transform: translate(0); }

    91% { opacity: 0.7; transform: translate(2px, 1px); }

    93% { opacity: 0; transform: translate(0); }

    94% { opacity: 0.5; transform: translate(-2px, -1px); }

    96% { opacity: 0; }

}

.logo-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--fluent-accent);

    box-shadow: 0 0 12px var(--fluent-accent), 0 0 24px rgba(96, 205, 255, 0.3);

    animation: dotPulse 2s ease-in-out infinite;

    flex-shrink: 0;

}

@keyframes dotPulse {

    0%, 100% { transform: scale(1); box-shadow: 0 0 12px var(--fluent-accent), 0 0 24px rgba(96, 205, 255, 0.3); }

    50% { transform: scale(1.3); box-shadow: 0 0 16px var(--fluent-accent), 0 0 32px rgba(96, 205, 255, 0.5); }

}

/*==============================
NAVIGATION
==============================*/

nav ul {

    display: flex;

    gap: 0;

    background: none;

    border: none;

    border-radius: 0;

    padding: 0;

    height: 100%;

}

nav a {

    position: relative;

    color: var(--fluent-text-secondary);

    transition:

        color var(--fluent-duration-normal) var(--fluent-ease-default);

    font-weight: 500;

    font-size: 13px;

    padding: 0 20px;

    height: 100%;

    display: flex;

    align-items: center;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    border-radius: 0;

    overflow: hidden;

}

nav a::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(96, 205, 255, 0.08);

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform var(--fluent-duration-normal) var(--fluent-ease-default);

    z-index: -1;

}

nav a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 2px;

    background: var(--fluent-accent);

    box-shadow: 0 0 10px var(--fluent-accent);

    transition: width var(--fluent-duration-normal) var(--fluent-ease-default), left var(--fluent-duration-normal) var(--fluent-ease-default);

    z-index: 1;

}

nav a:hover {

    color: var(--fluent-text-primary);

}

nav a:hover::before {

    transform: scaleY(1);

}

nav a:hover::after {

    width: 100%;

    left: 0;

}

nav a:active::before {

    background: rgba(96, 205, 255, 0.12);

}

/*==============================
HAMBURGER (Mobile)
==============================*/

.menu-toggle {

    display: none;

}

.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    z-index: 600;

    padding: 8px;

    border-radius: var(--fluent-radius-md);

    transition: background var(--fluent-duration-normal) var(--fluent-ease-default);

}

.hamburger:hover {

    background: var(--fluent-surface-card);

}

.hamburger span {

    display: block;

    width: 20px;

    height: 2px;

    background: var(--fluent-text-primary);

    transition: all var(--fluent-duration-slow) var(--fluent-ease-default);

    border-radius: 2px;

}

.menu-toggle:checked ~ .hamburger span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}

.menu-toggle:checked ~ .hamburger span:nth-child(2) {

    opacity: 0;

}

.menu-toggle:checked ~ .hamburger span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}

.btn-icon {

    width: 16px;

    height: 16px;

    object-fit: contain;

}

/*==============================
SECTION BACKGROUND ELEMENTS
==============================*/

.section-bg-elements {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: -1;

    overflow: hidden;

}

.bg-element {

    position: absolute;

    opacity: 0.15;

}

.bg-hex {

    width: 120px;

    height: 120px;

    top: 20%;

    left: 5%;

    background: conic-gradient(from 0deg, transparent 0deg, rgba(247, 99, 12, 0.3) 60deg, transparent 120deg);

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    animation: floatHex 15s ease-in-out infinite;

}

.bg-circle {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    border: 1px solid rgba(96, 205, 255, 0.3);

    animation: floatCircle 20s ease-in-out infinite;

}

.bg-circle:nth-child(2) {

    top: 60%;

    right: 10%;

    left: auto;

    width: 60px;

    height: 60px;

    animation-delay: -5s;

    animation-duration: 18s;

}

.bg-line {

    width: 200px;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(96, 205, 255, 0.3), transparent);

    animation: floatLine 12s ease-in-out infinite;

}

.bg-line:nth-child(3) {

    top: 80%;

    left: 20%;

    width: 150px;

    animation-delay: -3s;

}

.bg-grid {

    width: 150px;

    height: 150px;

    top: 15%;

    right: 8%;

    left: auto;

    background:

        linear-gradient(rgba(135, 100, 184, 0.2) 1px, transparent 1px),

        linear-gradient(90deg, rgba(135, 100, 184, 0.2) 1px, transparent 1px);

    background-size: 20px 20px;

    animation: floatGrid 25s linear infinite;

}

.bg-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: rgba(96, 205, 255, 0.4);

    box-shadow: 0 0 10px rgba(96, 205, 255, 0.3);

    animation: floatDot 8s ease-in-out infinite;

}

.bg-dot:nth-child(2) {

    top: 40%;

    left: 15%;

    animation-delay: -2s;

}

.bg-dot:nth-child(3) {

    top: 70%;

    right: 20%;

    left: auto;

    animation-delay: -4s;

}

.bg-wave {

    width: 300px;

    height: 100px;

    bottom: 20%;

    left: 10%;

    top: auto;

    background: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(135, 100, 184, 0.1) 10px, rgba(135, 100, 184, 0.1) 11px);

    clip-path: polygon(0% 50%, 10% 30%, 20% 50%, 30% 30%, 40% 50%, 50% 30%, 60% 50%, 70% 30%, 80% 50%, 90% 30%, 100% 50%, 100% 100%, 0% 100%);

    animation: floatWave 15s ease-in-out infinite;

}

.bg-ring {

    width: 100px;

    height: 100px;

    top: 30%;

    left: 8%;

    border: 2px solid rgba(16, 124, 16, 0.3);

    border-radius: 50%;

    animation: floatRing 20s linear infinite;

}

.bg-arrow {

    width: 0;

    height: 0;

    top: 60%;

    right: 12%;

    left: auto;

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    border-bottom: 25px solid rgba(96, 205, 255, 0.2);

    animation: floatArrow 10s ease-in-out infinite;

}

.bg-signal {

    width: 200px;

    height: 200px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(96, 205, 255, 0.1);

    border-radius: 50%;

    animation: signalPulse 4s ease-out infinite;

}

.bg-signal::before,

.bg-signal::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(96, 205, 255, 0.1);

    border-radius: 50%;

}

.bg-signal::before {

    width: 140px;

    height: 140px;

    animation: signalPulse 4s ease-out infinite 1s;

}

.bg-signal::after {

    width: 80px;

    height: 80px;

    animation: signalPulse 4s ease-out infinite 2s;

}

@keyframes floatHex {

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

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

}

@keyframes floatCircle {

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

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

}

@keyframes floatLine {

    0%, 100% { transform: translateX(0) rotate(0deg); }

    50% { transform: translateX(30px) rotate(5deg); }

}

@keyframes floatGrid {

    0% { transform: translateY(0); }

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

}

@keyframes floatDot {

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

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

}

@keyframes floatWave {

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

    50% { transform: translateX(20px); }

}

@keyframes floatRing {

    0% { transform: rotate(0deg); }

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

}

@keyframes floatArrow {

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

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

}

@keyframes signalPulse {

    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }

    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }

}

/*==============================
HERO
==============================*/

#hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: calc(var(--header-height) + 40px);

    padding-bottom: 60px;

    position: relative;

}

#hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle at 20% 80%, rgba(96, 205, 255, 0.08) 0%, transparent 50%),

        radial-gradient(circle at 80% 20%, rgba(135, 100, 184, 0.06) 0%, transparent 50%),

        repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(96, 205, 255, 0.03) 100px, rgba(96, 205, 255, 0.03) 101px),

        repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(96, 205, 255, 0.03) 100px, rgba(96, 205, 255, 0.03) 101px);

    pointer-events: none;

    z-index: -1;

    animation: heroGrid 20s linear infinite;

}

@keyframes heroGrid {

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

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

}

.hero-inner {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 48px;

    align-items: center;

}

.hero-content h1 {

    font-size: clamp(2.2rem, 4.5vw, 3.4rem);

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.5px;

    margin-bottom: 20px;

    color: var(--fluent-text-primary);

}

.hero-desc {

    font-size: var(--fluent-type-subtitle-1);

    color: var(--fluent-text-secondary);

    line-height: 1.65;

    max-width: 520px;

    margin-bottom: 32px;

}

.hero-actions {

    display: flex;

    gap: 12px;

    margin-bottom: 48px;

    flex-wrap: wrap;

}

.hero-stats {

    display: flex;

    align-items: stretch;

    gap: 0;

    padding: 0;

    border-radius: var(--fluent-radius-lg);

    background: var(--fluent-surface-card);

    border: 1px solid var(--fluent-border-subtle);

    width: fit-content;

    overflow: hidden;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);

}

.stat-item {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 20px 28px;

    position: relative;

    flex: 1;

    min-width: 120px;

}

.stat-item::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background: linear-gradient(90deg, var(--fluent-accent), transparent);

    opacity: 0;

    transition: opacity 0.3s;

}

.stat-item:hover::after {

    opacity: 1;

}

.stat-value {

    font-size: 28px;

    font-weight: 800;

    color: var(--fluent-accent);

    line-height: 1;

    letter-spacing: -0.5px;

}

.stat-label {

    font-size: 11px;

    color: var(--fluent-text-tertiary);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 600;

}

.stat-bar {

    width: 100%;

    height: 3px;

    background: rgba(96, 205, 255, 0.1);

    border-radius: 2px;

    margin-top: 8px;

    overflow: hidden;

}

.stat-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--fluent-accent), #8764B8);

    border-radius: 2px;

    width: 0;

    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);

}

.hero-stats.revealed .stat-bar-fill {

    width: var(--fill-width);

}

.stat-divider {

    width: 1px;

    background: var(--fluent-border-subtle);

    align-self: stretch;

}

    background: var(--fluent-divider);

}

/*==============================
HERO VISUAL
==============================*/

.hero-visual {

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.hero-visual .fluent-card {

    padding: 24px;

}

.card-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

}

.card-header h3 {

    font-size: var(--fluent-type-subtitle-1);

    font-weight: 600;

    color: var(--fluent-text-primary);

}

.card-subtitle {

    font-size: var(--fluent-type-caption);

    color: var(--fluent-text-tertiary);

}

.card-icon {

    width: 40px;

    height: 40px;

    border-radius: var(--fluent-radius-md);

    background: var(--fluent-surface-subtle);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.card-icon-img {

    width: 28px;

    height: 28px;

    object-fit: contain;

}

    border: 1px solid var(--fluent-border-subtle);

}

.card-icon.blue {

    background: var(--fluent-accent-subtle);

    border-color: rgba(96, 205, 255, 0.12);

}

.fluent-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.fluent-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: var(--fluent-radius-md);

    font-size: var(--fluent-type-body-1);

    color: var(--fluent-text-secondary);

    transition:

        background var(--fluent-duration-normal) var(--fluent-ease-default),

        color var(--fluent-duration-normal) var(--fluent-ease-default);

}

.fluent-list li:hover {

    background: var(--fluent-surface-card);

    color: var(--fluent-text-primary);

}

.list-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    flex-shrink: 0;

}

/* Stack List (Service Catalog) */

.stack-card {

    max-height: 480px;

    overflow-y: auto;

}

.stack-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.stack-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 10px 12px;

    border-radius: var(--fluent-radius-md);

    transition:

        background var(--fluent-duration-normal) var(--fluent-ease-default);

}

.stack-list li:hover {

    background: var(--fluent-surface-card-hover);

}

.stack-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    flex-shrink: 0;

    margin-top: 5px;

}

.stack-list strong {

    display: block;

    font-size: var(--fluent-type-body-2);

    font-weight: 600;

    color: var(--fluent-text-primary);

    margin-bottom: 2px;

}

.stack-list span {

    font-size: var(--fluent-type-caption);

    color: var(--fluent-text-tertiary);

    line-height: 1.4;

}

/* Method Steps */

.method-steps {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.method-step {

    padding: 10px 14px;

    border-radius: var(--fluent-radius-md);

    font-size: var(--fluent-type-body-2);

    font-weight: 500;

    color: var(--fluent-text-tertiary);

    border-left: 3px solid transparent;

    transition:

        all var(--fluent-duration-normal) var(--fluent-ease-default);

}

.method-step:hover {

    background: var(--fluent-surface-card);

    color: var(--fluent-text-primary);

}

.method-step.active {

    background: var(--fluent-accent-subtle);

    color: var(--fluent-accent);

    border-left-color: var(--fluent-accent);

}

/*==============================
SERVICES
==============================*/

#services {

    position: relative;

    overflow: hidden;

}

#services::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle at 70% 30%, rgba(247, 99, 12, 0.06) 0%, transparent 40%),

        radial-gradient(circle at 30% 70%, rgba(96, 205, 255, 0.05) 0%, transparent 40%),

        linear-gradient(135deg, transparent 25%, rgba(96, 205, 255, 0.02) 25%, rgba(96, 205, 255, 0.02) 50%, transparent 50%, transparent 75%, rgba(96, 205, 255, 0.02) 75%);

    background-size: 100% 100%, 100% 100%, 40px 40px;

    pointer-events: none;

    z-index: -1;

}

.services-hero-card {

    padding: 40px;

    margin-bottom: 24px;

}

.services-hero-content {

    display: flex;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 28px;

}

.services-hero-icon {

    width: 64px;

    height: 64px;

    border-radius: var(--fluent-radius-lg);

    background: var(--fluent-accent-subtle);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(96, 205, 255, 0.12);

}

.services-hero-content h3 {

    font-size: var(--fluent-type-subtitle-2);

    font-weight: 600;

    color: var(--fluent-text-primary);

    margin-bottom: 8px;

}

.services-hero-content p {

    font-size: var(--fluent-type-body-1);

    color: var(--fluent-text-secondary);

    line-height: 1.7;

}

.services-hero-features {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    border-radius: var(--fluent-radius-md);

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--fluent-border-subtle);

}

.feature-check {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: rgba(16, 124, 16, 0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.feature-item span {

    font-size: var(--fluent-type-body-2);

    color: var(--fluent-text-secondary);

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}

.service-card {

    padding: 32px;

}

.card-icon.orange {

    background: var(--fluent-orange-subtle);

    border-color: rgba(247, 99, 12, 0.12);

}

.card-icon.purple {

    background: var(--fluent-purple-subtle);

    border-color: rgba(135, 100, 184, 0.12);

}

.card-icon.green {

    background: var(--fluent-green-subtle);

    border-color: rgba(16, 124, 16, 0.12);

}

.card-icon.red {

    background: var(--fluent-red-subtle);

    border-color: rgba(231, 72, 86, 0.12);

}

.service-card h3 {

    font-size: var(--fluent-type-subtitle-2);

    margin-bottom: 10px;

    color: var(--fluent-text-primary);

}

.service-card > p {

    color: var(--fluent-text-secondary);

    font-size: var(--fluent-type-body-1);

    line-height: 1.65;

    margin-bottom: 20px;

}

.card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

/*==============================
TECHNOLOGY
==============================*/

#technology {

    position: relative;

    overflow: hidden;

}

#technology::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle at 50% 50%, rgba(135, 100, 184, 0.08) 0%, transparent 50%),

        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(135, 100, 184, 0.03) 50px, rgba(135, 100, 184, 0.03) 51px),

        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(135, 100, 184, 0.03) 50px, rgba(135, 100, 184, 0.03) 51px);

    pointer-events: none;

    z-index: -1;

    animation: techPulse 8s ease-in-out infinite;

}

@keyframes techPulse {

    0%, 100% { opacity: 0.5; }

    50% { opacity: 1; }

}

.tech-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}

.tech-card {

    padding: 28px;

}

.tech-card-accent {

    width: 32px;

    height: 4px;

    border-radius: 2px;

    margin-bottom: 20px;

}

.tech-card-accent.orange { background: var(--fluent-orange); }

.tech-card-accent.purple { background: var(--fluent-purple); }

.tech-card-accent.teal { background: var(--fluent-teal); }

.tech-card-accent.blue { background: var(--fluent-accent); }

.tech-card-accent.red { background: var(--fluent-red); }

.tech-card-accent.gold { background: var(--fluent-gold); }

.tech-card-accent.gray { background: #6D6D6D; }

.tech-card h4 {

    font-size: var(--fluent-type-subtitle-1);

    margin-bottom: 16px;

    color: var(--fluent-text-primary);

}

.tech-card ul {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.tech-card li {

    font-size: var(--fluent-type-body-1);

    color: var(--fluent-text-secondary);

    position: relative;

    line-height: 1.5;

    display: flex;

    align-items: center;

    gap: 8px;

}

.tech-icon {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    object-fit: contain;

    border-radius: 3px;

}

/*==============================
NUMBERS
==============================*/

#numbers {

    padding: 100px 0;

    background: linear-gradient(180deg, transparent, rgba(96, 205, 255, 0.03), transparent);

    position: relative;

}

#numbers::before,

#numbers::after {

    content: '';

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 200px;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(96, 205, 255, 0.3), transparent);

}

#numbers::before { top: 0; }

#numbers::after { bottom: 0; }

.numbers-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}

.number-card {

    padding: 40px 24px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    position: relative;

    overflow: hidden;

    transition: transform 0.3s, box-shadow 0.3s;

}

.number-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--fluent-accent), #8764B8);

    opacity: 0;

    transition: opacity 0.3s;

}

.number-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 32px rgba(96, 205, 255, 0.15);

}

.number-card:hover::before {

    opacity: 1;

}

.number-value {

    font-size: clamp(2.2rem, 4vw, 3rem);

    font-weight: 800;

    background: linear-gradient(135deg, #60CDFF, #8764B8);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    letter-spacing: -1px;

    line-height: 1;

}

.number-label {

    font-size: 12px;

    color: var(--fluent-text-tertiary);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-weight: 600;

}

/*==============================
PROCESS
==============================*/

#process {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at 20% 30%, rgba(96, 205, 255, 0.06) 0%, transparent 40%),

        radial-gradient(circle at 80% 70%, rgba(16, 124, 16, 0.05) 0%, transparent 40%),

        linear-gradient(180deg, transparent 0%, rgba(96, 205, 255, 0.02) 50%, transparent 100%);

}

#process::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(96, 205, 255, 0.03) 80px, rgba(96, 205, 255, 0.03) 81px),

        repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(96, 205, 255, 0.03) 80px, rgba(96, 205, 255, 0.03) 81px);

    pointer-events: none;

    z-index: -1;

    animation: processGrid 40s linear infinite;

}

@keyframes processGrid {

    0% { transform: translate(0, 0); }

    100% { transform: translate(80px, 80px); }

}

/*==============================
SDLC ANIME.JS VISUALIZATION
==============================*/

.sdlc-visual {

    position: relative;

    width: 100%;

    max-width: 500px;

    margin: 0 auto 64px;

    aspect-ratio: 1;

}

.sdlc-ring-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

}

.sdlc-ring-svg {

    width: 100%;

    height: 100%;

}

.sdlc-ring-track {

    opacity: 0.5;

}

.sdlc-ring-progress {

    transform-origin: center;

    transform: rotate(-90deg);

}

.sdlc-center {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.sdlc-center-text {

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 4px;

    color: var(--fluent-text-primary);

}

.sdlc-center-sub {

    font-size: 10px;

    color: var(--fluent-text-tertiary);

    letter-spacing: 1px;

    text-transform: uppercase;

}

.sdlc-nodes {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.sdlc-node {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    cursor: default;

    width: 0;

    height: 0;

    overflow: visible;

}

.sdlc-node-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--node-color);

    box-shadow: 0 0 15px var(--node-color), 0 0 30px var(--node-color);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    position: absolute;

    top: 0;

    left: 0;

    transform: translate(-50%, -50%);

}

.sdlc-node.active .sdlc-node-dot {

    transform: translate(-50%, -50%) scale(1.4);

    box-shadow: 0 0 25px var(--node-color), 0 0 50px var(--node-color);

}

.sdlc-node:hover .sdlc-node-dot,

.sdlc-node:focus .sdlc-node-dot {

    transform: translate(-50%, -50%) scale(1.3);

    box-shadow: 0 0 20px var(--node-color), 0 0 40px var(--node-color);

}

.sdlc-node-label {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1px;

    color: var(--node-color);

    text-transform: uppercase;

    white-space: nowrap;

    opacity: 1;

    transition: transform 0.3s ease;

    position: absolute;

    top: 14px;

    left: 50%;

    transform: translateX(-50%);

}

.sdlc-node-desc {

    font-size: 9px;

    color: var(--fluent-text-tertiary);

    white-space: nowrap;

    opacity: 0;

    transform: translateX(-50%) translateY(-5px);

    transition: opacity 0.3s ease, transform 0.3s ease;

    max-width: 80px;

    text-align: center;

    line-height: 1.2;

    position: absolute;

    top: 30px;

    left: 50%;

}

.sdlc-node:hover .sdlc-node-desc,

.sdlc-node:focus .sdlc-node-desc {

    opacity: 1;

    transform: translateX(-50%) translateY(0);

}

.sdlc-node:focus {

    outline: 2px solid var(--node-color);

    outline-offset: 4px;

    border-radius: 4px;

}

.sdlc-connections {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}

.sdlc-connections-svg {

    width: 100%;

    height: 100%;

}

.sdlc-arrow {

    fill: none;

    stroke-width: 1;

    opacity: 0.3;

    stroke-dasharray: 4 4;

    animation: dashFlow 20s linear infinite;

}

@keyframes dashFlow {

    to { stroke-dashoffset: -100; }

}

/*==============================
PHASE CARDS
==============================*/

.phase-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

}

.phase-card {

    padding: 28px;

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.phase-number {

    font-size: 36px;

    font-weight: 700;

    line-height: 1;

    opacity: 0.8;

}

.phase-info h3 {

    font-size: var(--fluent-type-subtitle-1);

    font-weight: 600;

    color: var(--fluent-text-primary);

    margin-bottom: 8px;

}

.phase-info p {

    font-size: var(--fluent-type-body-1);

    color: var(--fluent-text-secondary);

    line-height: 1.65;

    margin-bottom: 14px;

}

.phase-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

/*==============================
CONTACT
==============================*/

#contact {

    position: relative;

    overflow: hidden;

}

#contact::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle at 80% 20%, rgba(96, 205, 255, 0.08) 0%, transparent 40%),

        radial-gradient(circle at 20% 80%, rgba(255, 185, 0, 0.05) 0%, transparent 40%),

        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(96, 205, 255, 0.02) 20px, rgba(96, 205, 255, 0.02) 21px);

    pointer-events: none;

    z-index: -1;

    animation: contactWave 10s ease-in-out infinite;

}

@keyframes contactWave {

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

    50% { background-position: 0 0, 0 0, 20px 20px; }

}

.contact-grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 24px;

    align-items: start;

}

.contact-form {

    padding: 40px;

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}

.fluent-field {

    margin-bottom: 20px;

}

.fluent-field label {

    display: block;

    margin-bottom: 6px;

    font-size: var(--fluent-type-body-2);

    font-weight: 600;

    color: var(--fluent-text-secondary);

}

.fluent-field input,

.fluent-field textarea,

.fluent-field select {

    width: 100%;

    padding: 12px 14px;

    border-radius: var(--fluent-radius-md);

    background: var(--fluent-surface-card);

    border: 1px solid var(--fluent-border);

    color: var(--fluent-text-primary);

    font-size: var(--fluent-type-body-1);

    transition:

        border-color var(--fluent-duration-normal) var(--fluent-ease-default),

        box-shadow var(--fluent-duration-normal) var(--fluent-ease-default),

        background var(--fluent-duration-normal) var(--fluent-ease-default);

}

.fluent-field input::placeholder,

.fluent-field textarea::placeholder {

    color: var(--fluent-text-disabled);

}

.fluent-field input:hover,

.fluent-field textarea:hover,

.fluent-field select:hover {

    border-color: var(--fluent-border-strong);

}

.fluent-field input:focus,

.fluent-field textarea:focus,

.fluent-field select:focus {

    border-color: var(--fluent-accent);

    box-shadow: 0 0 0 1px var(--fluent-accent);

    background: var(--fluent-bg-layer2);

}

.fluent-field select {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239E9E9E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 14px center;

    padding-right: 36px;

    cursor: pointer;

}

.fluent-field select option {

    background: var(--fluent-bg-layer2);

    color: var(--fluent-text-primary);

}

.fluent-field textarea {

    resize: vertical;

    min-height: 100px;

}

.contact-form .btn-full {

    justify-content: center;

    gap: 10px;

}

.contact-form .btn-full.is-loading {

    opacity: 0.95;

}

.contact-form .btn-loader {

    width: 16px;

    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.35);

    border-top-color: #fff;

    border-radius: 50%;

    display: none;

    animation: btnSpin 0.8s linear infinite;

}

.contact-form .btn-full.is-loading .btn-loader {

    display: inline-block;

}

.captcha-field {

    margin-bottom: 24px;

}

.cf-turnstile {

    display: flex;

    justify-content: center;

    min-height: 65px;

}

.fluent-field input.is-invalid,
.fluent-field textarea.is-invalid,
.fluent-field select.is-invalid {

    border-color: rgba(231, 72, 86, 0.8);

    box-shadow: 0 0 0 1px rgba(231, 72, 86, 0.25);

}

.form-status {

    display: none;

    margin-top: 12px;

    padding: 12px 14px;

    border-radius: var(--fluent-radius-md);

    font-size: var(--fluent-type-body-2);

    border: 1px solid transparent;

}

.form-status.loading {

    display: block;

    background: rgba(96, 205, 255, 0.12);

    border-color: rgba(96, 205, 255, 0.2);

    color: var(--fluent-text-primary);

}

.form-status.success {

    display: block;

    background: rgba(34, 197, 94, 0.12);

    border-color: rgba(34, 197, 94, 0.24);

    color: #7CFFB3;

}

.form-status.error {

    display: block;

    background: rgba(231, 72, 86, 0.12);

    border-color: rgba(231, 72, 86, 0.24);

    color: #FFB4BD;

}

@keyframes btnSpin {

    to { transform: rotate(360deg); }

}

/*==============================
CONTACT SIDE
==============================*/

.contact-side {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.info-card {

    padding: 20px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

}

.info-icon {

    width: 36px;

    height: 36px;

    border-radius: var(--fluent-radius-md);

    background: var(--fluent-accent-subtle);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid rgba(96, 205, 255, 0.1);

}

.info-card h4 {

    font-size: var(--fluent-type-body-2);

    font-weight: 600;

    color: var(--fluent-text-primary);

    margin-bottom: 2px;

}

.info-card p {

    font-size: var(--fluent-type-caption);

    color: var(--fluent-text-tertiary);

    line-height: 1.5;

}

.social-row {

    display: flex;

    gap: 8px;

    margin-top: 4px;

}

.social-link {

    width: 44px;

    height: 44px;

    border-radius: var(--fluent-radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: var(--fluent-type-body-2);

    color: var(--fluent-text-secondary);

    transition:

        background var(--fluent-duration-normal) var(--fluent-ease-default),

        color var(--fluent-duration-normal) var(--fluent-ease-default),

        transform var(--fluent-duration-normal) var(--fluent-ease-default);

    cursor: pointer;

}

.social-link:hover {

    background: var(--fluent-accent);

    color: var(--fluent-text-on-accent);

    transform: translateY(-2px);

}

/*==============================
FOOTER
==============================*/

footer {

    border-top: 1px solid var(--fluent-divider);

    padding: 64px 0 0;

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    padding-bottom: 48px;

}

.footer-logo {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 4px;

    color: var(--fluent-text-primary);

    margin-bottom: 12px;

    position: relative;

    display: inline-block;

}

.footer-logo::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 28px;

    height: 3px;

    background: var(--fluent-accent);

    border-radius: 2px;

}

.footer-brand p {

    color: var(--fluent-text-tertiary);

    font-size: var(--fluent-type-body-1);

    max-width: 280px;

    margin-top: 20px;

    line-height: 1.65;

}

.footer-col h4 {

    font-size: var(--fluent-type-caption);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--fluent-text-primary);

    margin-bottom: 16px;

    font-weight: 600;

}

.footer-col ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.footer-col li,

.footer-col a {

    font-size: var(--fluent-type-body-1);

    color: var(--fluent-text-tertiary);

    transition: color var(--fluent-duration-normal) var(--fluent-ease-default);

}

.footer-col a:hover {

    color: var(--fluent-text-primary);

}

.footer-bottom {

    border-top: 1px solid var(--fluent-divider);

    padding: 20px 0;

    text-align: center;

}

.footer-bottom p {

    color: var(--fluent-text-disabled);

    font-size: var(--fluent-type-caption);

}

/*==============================
RESPONSIVE - TABLET
==============================*/

@media (max-width: 1024px) {

    .hero-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .hero-visual {

        max-width: 480px;

    }

    .tech-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .services-hero-features {

        grid-template-columns: 1fr;

    }

    .phase-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 32px;

    }

}

/*==============================
RESPONSIVE - MOBILE
==============================*/

@media (max-width: 768px) {

    section {

        padding: 80px 0;

    }

    .hamburger {

        display: flex;

    }

    nav {

        position: fixed;

        top: 0;

        right: -100%;

        width: 300px;

        height: 100vh;

        background: rgba(12, 12, 12, 0.95);

        backdrop-filter: blur(60px) saturate(150%);

        -webkit-backdrop-filter: blur(60px) saturate(150%);

        border-left: 1px solid rgba(96, 205, 255, 0.1);

        transition: right var(--fluent-duration-slower) var(--fluent-ease-decelerate);

        padding-top: 100px;

        z-index: 550;

        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);

    }

    .menu-toggle:checked ~ nav {

        right: 0;

    }

    nav ul {

        flex-direction: column;

        gap: 4px;

        padding: 0 16px;

        background: transparent;

        border: none;

        border-radius: 0;

    }

    nav ul li {

        border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    }

    nav ul li:last-child {

        border-bottom: none;

    }

    nav a {

        display: block;

        padding: 16px 20px;

        font-size: 14px;

        border-radius: var(--fluent-radius-md);

        letter-spacing: 2px;

    }

    nav a:hover {

        background: linear-gradient(90deg, rgba(96, 205, 255, 0.1), transparent);

        border-left: 2px solid var(--fluent-accent);

        padding-left: 28px;

    }

    .header-cta {

        display: none;

    }

    .hero-content h1 {

        font-size: 1.8rem;

    }

    .hero-actions {

        flex-direction: column;

    }

    .hero-actions .btn-accent,

    .hero-actions .btn-subtle {

        width: 100%;

        text-align: center;

    }

    .hero-stats {

        flex-direction: column;

        gap: 0;

        width: 100%;

    }

    .stat-item {

        padding: 16px 20px;

        border-bottom: 1px solid var(--fluent-border-subtle);

    }

    .stat-item:last-child {

        border-bottom: none;

    }

    .stat-divider {

        width: 100%;

        height: 1px;

    }

    .stat-bar {

        display: block;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .tech-grid {

        grid-template-columns: 1fr;

    }

    .numbers-row {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }

    .services-hero-card {

        padding: 24px;

    }

    .services-hero-content {

        flex-direction: column;

    }

    .section-header h2 {

        font-size: 1.8rem;

    }

    .deco-line {

        width: 40px !important;

    }

    .section-header-underline {

        width: 40px !important;

    }

    .phase-grid {

        grid-template-columns: 1fr;

    }

    .contact-form {

        padding: 24px;
    }

    .form-row {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }

}

@media (max-width: 480px) {

    .hero-content h1 {

        font-size: 1.6rem;

    }

    .hero-visual .fluent-card {

        padding: 20px;

    }

    .service-card {

        padding: 24px;
    }

    .tech-card {

        padding: 20px;
    }

    .number-card {

        padding: 28px 16px;
    }

    .sdlc-visual {

        max-width: 350px;

    }

    .sdlc-node-label {

        font-size: 8px;

    }

    .phase-card {

        padding: 20px;

    }

}