/* ========================================
   TECH SOLUTION - PROFESSIONAL CSS
   Consolidated & Optimized
   ======================================== */

/* === CSS VARIABLES === */
:root {
    --primary: #4a6bff;
    --secondary: #00d4ff;
    --accent: #8a2be2;
    --dark-bg: #0a1628;
    --light-bg: #f8fafc;
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --white: #ffffff;
    --transition: all 0.3s ease;
    
    /* Hero Visual Tokens */
    --cyan: #00f5d4;
    --pink: #f700ff;
    --blue: #3a86ff;
    --gold: #fbbf24;
    --card: #080e20;
    --bg: #050810;
    --c0: #00f5d4;
    --c1: #818cf8;
    --c2: #f472b6;
    --c3: #fb923c;
    --c4: #34d399;
    --c5: #60a5fa;
    --c6: #e879f9;
    --text: #e8eaf0;
    --muted: #6b7280;
    --border: rgba(255,255,255,0.07);
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--dark-bg);
    overflow-x: hidden;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.8rem); }
p { font-size: 1.1rem; line-height: 1.7; }

/* === LAYOUT === */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* === BUTTONS === */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #ff00ff, #c71585);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.6);
}

/* Section scroll margin for proper navigation */
section {
    scroll-margin-top: 70px;
}

/* === HEADER === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(5, 8, 16, .85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background .3s, border-color .3s;
}
.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-header .logo.logo-link {
    position: relative;
    z-index: 910;
    text-decoration: none;
    display: flex;
    align-items: center;
}
/* Animated logo in header — plays on scroll in logo area only */
.site-header .logo-wrap {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    overflow: visible;
}
.site-header .icon-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    opacity: 1;
    transition: none;
    overflow: visible;
}
.site-header .logo-text {
    overflow: visible;
    width: auto;
    opacity: 1;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin-left: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.site-header .logo-wrap.animated .logo-text {
    transform: translateY(-1px);
}
.site-header .icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(0,245,212,.16), transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(6,12,24,.92);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 22px 48px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(0,245,212,.04);
    padding: 8px;
}
.site-header .logo-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    font-size: 1.3rem;
    display: block;
}
.site-header .logo-name .tech { color: #fff; }
.site-header .logo-name .easy {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.site-header .logo-sub {
    font-family: 'DM Mono', monospace;
    font-size: .46rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    display: block;
}
.logo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c0);
    box-shadow: 0 0 10px var(--c0);
    margin-left: 3px;
    vertical-align: middle;
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}
.desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}
.desktop-nav ul li a {
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}
.desktop-nav ul li a:hover {
    color: var(--c0);
}
.desktop-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c0);
    transition: var(--transition);
}
.desktop-nav ul li a:hover::after {
    width: 100%;
}

/* ═══ HAMBURGER BUTTON ═══ */
.hamburger {
    display: none;
    position: relative;
    z-index: 910;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: background .3s, border-color .3s, transform .2s;
    padding: 0;
    overflow: hidden;
}
.hamburger::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--c0);
    opacity: 0;
    transform: scale(0);
    transition: transform .35s, opacity .35s;
}
.hamburger.active::after {
    opacity: .08;
    transform: scale(1);
}
.hamburger:hover {
    background: rgba(0, 245, 212, .07);
    border-color: rgba(0, 245, 212, .25);
    transform: scale(1.05);
}
.hamburger.active {
    background: rgba(0, 245, 212, .08);
    border-color: rgba(0, 245, 212, .3);
}
.hamburger .bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .6);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s, width .3s, background .3s;
    transform-origin: center;
}
.hamburger .bar-2 {
    width: 14px;
}
.hamburger.active .bar {
    background: var(--c0);
}
.hamburger.active .bar-1 {
    transform: translateY(7px) rotate(45deg);
    width: 20px;
}
.hamburger.active .bar-2 {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.active .bar-3 {
    transform: translateY(-7px) rotate(-45deg);
    width: 20px;
}

/* ═══ FULL-SCREEN NAV OVERLAY ═══ */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 850;
    pointer-events: none;
    visibility: hidden;
}
.nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 16, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transition: opacity .4s ease;
}
.nav-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
    opacity: .03;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.nav-glow-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 245, 212, .08) 0%, transparent 65%);
    pointer-events: none;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .6s .1s, transform .6s .1s;
}
.nav-glow-2 {
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58, 134, 255, .07) 0%, transparent 65%);
    pointer-events: none;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .6s .2s, transform .6s .2s;
}
.nav-line {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s .2s;
}
.nav-line-1 {
    top: 0;
    right: 15%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 245, 212, .08) 40%, rgba(0, 245, 212, .08) 60%, transparent);
}
.nav-line-2 {
    top: 60%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(58, 134, 255, .07) 30%, rgba(58, 134, 255, .07) 70%, transparent);
}
.nav-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 90px 32px 40px;
    overflow-y: auto;
}
.nav-list {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0;
}
.nav-item {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0s, transform 0s;
}
.nav-item.reveal {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:nth-child(1).reveal { transition-delay: .08s; }
.nav-item:nth-child(2).reveal { transition-delay: .14s; }
.nav-item:nth-child(3).reveal { transition-delay: .20s; }
.nav-item:nth-child(4).reveal { transition-delay: .26s; }
.nav-item:nth-child(5).reveal { transition-delay: .32s; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-radius: 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    transition: background .3s, border-color .3s, transform .3s;
    cursor: pointer;
}
.nav-link:active {
    transform: scale(.98);
}
.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--item-color, var(--c0));
    opacity: 0;
    transition: opacity .3s;
}
.nav-link:hover::before {
    opacity: .06;
}
.nav-link:hover {
    border-color: rgba(255, 255, 255, .12);
}
.nav-link[style*="--item-color"]:hover {
    border-color: color-mix(in srgb, var(--item-color) 30%, transparent);
}
.nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .06), transparent);
    transition: left .5s ease;
    pointer-events: none;
}
.nav-link:hover::after {
    left: 130%;
}
.nav-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--item-color, var(--c0)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--item-color, var(--c0)) 22%, transparent);
    color: var(--item-color, var(--c0));
    transition: transform .3s, box-shadow .3s;
    position: relative;
    z-index: 1;
}
.nav-link:hover .nav-icon {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 0 20px color-mix(in srgb, var(--item-color, var(--c0)) 40%, transparent);
}
.nav-label-wrap {
    flex: 1;
    position: relative;
    z-index: 1;
}
.nav-label {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .85);
    display: block;
    transition: color .3s;
}
.nav-link:hover .nav-label {
    color: #fff;
}
.nav-sub {
    font-family: 'DM Mono', monospace;
    font-size: .57rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .25);
    margin-top: 2px;
    display: block;
    transition: color .3s;
}
.nav-link:hover .nav-sub {
    color: color-mix(in srgb, var(--item-color, var(--c0)) 70%, transparent);
}
.nav-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .25);
    font-size: .7rem;
    position: relative;
    z-index: 1;
    transition: border-color .3s, color .3s, transform .3s;
}
.nav-link:hover .nav-arrow {
    border-color: var(--item-color, var(--c0));
    color: var(--item-color, var(--c0));
    transform: translateX(3px);
}
.nav-link.is-active .nav-label {
    color: var(--item-color, var(--c0));
}
.nav-link.is-active::before {
    opacity: .07;
}
.nav-link.is-active {
    border-color: color-mix(in srgb, var(--item-color, var(--c0)) 25%, transparent);
}
.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .07) 60%, transparent);
    margin: 4px 20px;
    opacity: 0;
    transition: opacity .4s .3s;
}
.nav-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s .38s, transform .45s .38s;
}
.nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--c0), var(--blue));
    color: #000;
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 28px rgba(0, 245, 212, .2);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(247, 0, 255, .4), rgba(0, 245, 212, .5));
    opacity: 0;
    transition: opacity .35s;
}
.nav-cta span {
    position: relative;
    z-index: 1;
}
.nav-cta:active {
    transform: scale(.97);
}
.nav-cta:hover::before {
    opacity: 1;
}
.nav-cta:hover {
    box-shadow: 0 8px 40px rgba(0, 245, 212, .35);
}
.nav-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.social-chip {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    transition: all .25s;
}
.social-chip:hover {
    border-color: rgba(0, 245, 212, .35);
    color: var(--c0);
    background: rgba(0, 245, 212, .07);
    transform: translateY(-3px);
}
.nav-contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .2);
}
.nav-contact-row i {
    color: var(--c0);
    font-size: .55rem;
}
.nav-overlay.open {
    visibility: visible;
    pointer-events: all;
}
.nav-overlay.open .nav-backdrop {
    opacity: 1;
}
.nav-overlay.open .nav-glow-1,
.nav-overlay.open .nav-glow-2 {
    opacity: 1;
    transform: scale(1);
}
.nav-overlay.open .nav-line {
    opacity: 1;
}
.nav-overlay.open .nav-divider {
    opacity: 1;
}
.nav-overlay.open .nav-footer {
    opacity: 1;
    transform: translateY(0);
}
.nav-overlay.closing .nav-backdrop {
    opacity: 0;
    transition-duration: .3s;
}
.nav-overlay.closing .nav-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .25s, transform .25s;
}
.nav-overlay.closing .nav-item:nth-child(5) { transition-delay: 0s; }
.nav-overlay.closing .nav-item:nth-child(4) { transition-delay: .04s; }
.nav-overlay.closing .nav-item:nth-child(3) { transition-delay: .08s; }
.nav-overlay.closing .nav-item:nth-child(2) { transition-delay: .12s; }
.nav-overlay.closing .nav-item:nth-child(1) { transition-delay: .16s; }
.nav-overlay.closing .nav-footer {
    opacity: 0;
    transform: translateY(10px);
    transition-duration: .2s;
}

/* === HERO SECTION === */
#home.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg);
}

/* Radial Glow Clouds */
#home.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(0,245,212,.08) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 15% 80%, rgba(247,0,255,.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 10%, rgba(58,134,255,.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Perspective Grid */
#home.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,212,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,212,.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 90% 80% at 65% 50%, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 65% 50%, black 10%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Light Sweep */
.hero-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0%, rgba(0,245,212,.03) 38%, rgba(58,134,255,.04) 54%, transparent 70%);
    animation: heroSweep 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Bottom Glow Line */
.hero-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,245,212,.5) 30%, rgba(58,134,255,.6) 60%, transparent 100%);
    animation: lineGlow 4s ease-in-out infinite alternate;
    z-index: 2;
    pointer-events: none;
}

/* Floating Orb + Rings */
.hero-orb {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, rgba(0,245,212,.13) 0%, rgba(58,134,255,.07) 40%, transparent 70%);
    animation: orbFloat 9s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.hero-orb::before {
    content: '';
    position: absolute;
    inset: 60px;
    border-radius: 50%;
    border: 1px solid rgba(0,245,212,.1);
    animation: spinRing 22s linear infinite;
}

.hero-orb::after {
    content: '';
    position: absolute;
    inset: 140px;
    border-radius: 50%;
    border: 1px dashed rgba(58,134,255,.14);
    animation: spinRing 14s linear infinite reverse;
}

/* Orbital Dots */
.ring-dot {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.dot-cyan {
    width: 10px;
    height: 10px;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan), 0 0 40px rgba(0,245,212,.4);
    animation: orbit1 22s linear infinite;
    transform-origin: -280px 0;
}

.dot-blue {
    width: 8px;
    height: 8px;
    background: var(--blue);
    box-shadow: 0 0 12px var(--blue);
    animation: orbit2 14s linear infinite reverse;
    transform-origin: -200px 0;
}

.dot-pink {
    width: 6px;
    height: 6px;
    background: var(--pink);
    box-shadow: 0 0 12px var(--pink);
    animation: orbit1 34s linear infinite;
    transform-origin: -320px 0;
}

/* Rotating Diamond Corner */
.geo-corner {
    position: absolute;
    right: 70px;
    top: 110px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(0,245,212,.1);
    transform: rotate(45deg);
    animation: geoPulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.geo-corner::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(58,134,255,.08);
    animation: spinRing 18s linear infinite;
}

.geo-corner::after {
    content: '';
    position: absolute;
    inset: 40px;
    border: 1px dashed rgba(247,0,255,.07);
    animation: spinRing 10s linear infinite reverse;
}

/* Floating Particles */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.p {
    position: absolute;
    border-radius: 50%;
    animation: particleFloat var(--d, 4s) var(--dl, 0s) ease-in-out infinite alternate;
}

.p1 { width:3px;height:3px;left:72%;top:18%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);--d:3.2s;--dl:0s; }
.p2 { width:2px;height:2px;left:80%;top:55%;background:var(--blue);box-shadow:0 0 6px var(--blue);--d:4.5s;--dl:.8s; }
.p3 { width:4px;height:4px;left:88%;top:35%;background:var(--pink);box-shadow:0 0 10px var(--pink);--d:5s;--dl:1.2s; }
.p4 { width:2px;height:2px;left:65%;top:70%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);--d:3.8s;--dl:.4s; }
.p5 { width:3px;height:3px;left:92%;top:20%;background:var(--blue);box-shadow:0 0 8px var(--blue);--d:4s;--dl:1.6s; }
.p6 { width:2px;height:2px;left:55%;top:85%;background:var(--pink);box-shadow:0 0 6px var(--pink);--d:5.5s;--dl:.2s; }
.p7 { width:3px;height:3px;left:78%;top:80%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);--d:3.5s;--dl:2s; }
.p8 { width:2px;height:2px;left:60%;top:25%;background:var(--blue);box-shadow:0 0 6px var(--blue);--d:4.2s;--dl:.6s; }
.p9 { width:5px;height:5px;left:85%;top:60%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);opacity:.3;--d:6s;--dl:1s; }
.p10 { width:2px;height:2px;left:70%;top:45%;background:var(--pink);box-shadow:0 0 6px var(--pink);--d:3s;--dl:1.8s; }

/* Hero Content */
.hero .hero-content {
    position: relative;
    z-index: 5;
    max-width: 620px;
    animation: heroIn 1s ease both;
}

/* Live Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,245,212,.06);
    border: 1px solid rgba(0,245,212,.22);
    border-radius: 50px;
    padding: 6px 18px;
    font-family: 'Space Mono', monospace;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 28px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    animation: badgePulse 2s ease infinite;
    flex-shrink: 0;
}

/* H1 Gradient */
.hero-content h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 7vw, 5.4rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    margin-bottom: 12px;
    color: var(--text);
    animation: heroIn 1s .1s ease both;
}

.grad-word {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 50%, var(--pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
    animation: gradShift 5s ease infinite;
}

/* H2 */
.hero-content h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    letter-spacing: -.01em;
    color: var(--text);
    opacity: .8;
    margin-bottom: 20px;
    animation: heroIn 1s .2s ease both;
}

/* Paragraph */
.hero-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--muted);
    max-width: 500px;
    margin-bottom: 38px;
    animation: heroIn 1s .35s ease both;
}

/* CTA Button */
.hero-content .btn.btn-primary {
    position: relative;
    overflow: hidden;
    padding: 15px 36px;
    border-radius: 50px;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #000;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    animation: heroIn 1s .5s ease both;
    display: inline-block;
}

.hero-content .btn.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pink), var(--cyan));
    opacity: 0;
    transition: opacity .35s;
}

.hero-content .btn.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(0,245,212,.4);
}

.hero-content .btn.btn-primary:hover::before {
    opacity: 1;
}

.hero-content .btn.btn-primary span {
    position: relative;
    z-index: 1;
}

/* Scroll Hint */
.scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;
    opacity: .45;
    animation: heroIn 1s .9s ease both;
    pointer-events: none;
}

.scroll-hint span {
    font-family: 'Space Mono', monospace;
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.scroll-arrow {
    width: 18px;
    height: 18px;
    border-right: 1px solid var(--muted);
    border-bottom: 1px solid var(--muted);
    transform: rotate(45deg);
    animation: scrollBounce 1.8s ease-in-out infinite;
}

/* === SECTION HEADER === */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(20px);
}

.section-header.animate {
    animation: fadeInUp 0.6s ease forwards;
}

.section-header h2 {
    color: var(--white);
    font-size: 1rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
}

.section-header h3 {
    color: var(--white);
    margin-bottom: 15px;
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
}

.section-header p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════
   TECH SOLUTION — SERVICES SECTION (Enhanced)
═══════════════════════════════════════════════════════ */

.services {
    padding: 100px 0 120px;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.services .services-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.services .sg {
    position: absolute;
    border-radius: 50%;
}

.services .sg1 {
    width: 700px;
    height: 700px;
    top: -200px;
    right: -180px;
    background: radial-gradient(circle, rgba(0,245,212,.065) 0%, transparent 65%);
    animation: svcSgPulse 9s ease-in-out infinite alternate;
}

.services .sg2 {
    width: 600px;
    height: 600px;
    bottom: -200px;
    left: -150px;
    background: radial-gradient(circle, rgba(129,140,248,.055) 0%, transparent 65%);
    animation: svcSgPulse 11s 2s ease-in-out infinite alternate;
}

.services .sg3 {
    width: 450px;
    height: 450px;
    top: 40%;
    left: 38%;
    background: radial-gradient(circle, rgba(251,146,60,.04) 0%, transparent 65%);
    animation: svcSgPulse 7s 1s ease-in-out infinite alternate;
}

@keyframes svcSgPulse {
    from { transform: scale(1);   opacity: .7; }
    to   { transform: scale(1.25); opacity: 1; }
}

.services .sgrid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,212,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,212,.028) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 20%, transparent 80%);
}

.services .section-wrap {
    position: relative;
    z-index: 2;
}

.services .sec-header {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
}

.services .sec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'DM Mono', monospace;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c0);
    opacity: .75;
    margin-bottom: 18px;
}

.services .sec-eyebrow::before,
.services .sec-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--c0);
    box-shadow: 0 0 8px var(--c0);
}

.services .sec-header h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing: -.04em;
    line-height: 1.08;
    margin-bottom: 16px;
    color: #fff;
}

.services .sec-header h2 span {
    background: linear-gradient(110deg, var(--c0), var(--c5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services .sec-header p {
    font-size: .97rem;
    color: rgba(255,255,255,.4);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.8;
}

.services .sec-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px dashed rgba(0,245,212,.055);
    pointer-events: none;
    animation: svcHeaderRing 30s linear infinite;
}

.services .sec-header::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(129,140,248,.05);
    pointer-events: none;
    animation: svcHeaderRing 18s linear infinite reverse;
}

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

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

.svc-card {
    position: relative;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    cursor: pointer;
    transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
    opacity: 0;
    animation: svcCardIn .7s cubic-bezier(.22,1,.36,1) both;
    user-select: none;
}

.svc-card:nth-child(1) { animation-delay: .05s; }
.svc-card:nth-child(2) { animation-delay: .12s; }
.svc-card:nth-child(3) { animation-delay: .19s; }
.svc-card:nth-child(4) { animation-delay: .26s; }
.svc-card:nth-child(5) { animation-delay: .33s; }
.svc-card:nth-child(6) { animation-delay: .40s; }
.svc-card:nth-child(7) { animation-delay: .47s; }

@keyframes svcCardIn {
    from { opacity: 0; transform: translateY(40px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.svc-card:hover {
    transform: translateY(-12px) scale(1.02);
}

.svc-card.c0:hover { border-color: rgba(0,245,212,.35);  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(0,245,212,.08); }
.svc-card.c1:hover { border-color: rgba(129,140,248,.35); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(129,140,248,.08); }
.svc-card.c2:hover { border-color: rgba(244,114,182,.35); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(244,114,182,.08); }
.svc-card.c3:hover { border-color: rgba(251,146,60,.35);  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(251,146,60,.08); }
.svc-card.c4:hover { border-color: rgba(52,211,153,.35);  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(52,211,153,.08); }
.svc-card.c5:hover { border-color: rgba(96,165,250,.35);  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(96,165,250,.08); }
.svc-card.c6:hover { border-color: rgba(232,121,249,.35); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(232,121,249,.08); }

.svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    z-index: 10;
    opacity: 0;
    transition: opacity .35s;
}

.svc-card:hover::before { opacity: 1; }
.svc-card.c0::before { background: linear-gradient(90deg, transparent, var(--c0), transparent); }
.svc-card.c1::before { background: linear-gradient(90deg, transparent, var(--c1), transparent); }
.svc-card.c2::before { background: linear-gradient(90deg, transparent, var(--c2), transparent); }
.svc-card.c3::before { background: linear-gradient(90deg, transparent, var(--c3), transparent); }
.svc-card.c4::before { background: linear-gradient(90deg, transparent, var(--c4), transparent); }
.svc-card.c5::before { background: linear-gradient(90deg, transparent, var(--c5), transparent); }
.svc-card.c6::before { background: linear-gradient(90deg, transparent, var(--c6), transparent); }

.svc-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .4s, transform .4s;
    transform: scale(.6);
    pointer-events: none;
    z-index: 0;
}

.svc-card:hover::after { opacity: 1; transform: scale(1); }
.svc-card.c0::after { background: radial-gradient(circle, rgba(0,245,212,.12) 0%, transparent 70%); }
.svc-card.c1::after { background: radial-gradient(circle, rgba(129,140,248,.12) 0%, transparent 70%); }
.svc-card.c2::after { background: radial-gradient(circle, rgba(244,114,182,.12) 0%, transparent 70%); }
.svc-card.c3::after { background: radial-gradient(circle, rgba(251,146,60,.12) 0%, transparent 70%); }
.svc-card.c4::after { background: radial-gradient(circle, rgba(52,211,153,.12) 0%, transparent 70%); }
.svc-card.c5::after { background: radial-gradient(circle, rgba(96,165,250,.12) 0%, transparent 70%); }
.svc-card.c6::after { background: radial-gradient(circle, rgba(232,121,249,.12) 0%, transparent 70%); }

/* Click ripple system */
.click-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid currentColor;
    pointer-events: none;
    z-index: 50;
    animation: rippleExpand .7s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes rippleExpand {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: .9; }
    60%  { opacity: .5; }
    100% { transform: translate(-50%, -50%) scale(14);  opacity: 0; }
}
.click-ripple-2 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 1px solid currentColor;
    pointer-events: none;
    z-index: 50;
    animation: rippleExpand2 .9s .1s cubic-bezier(.15, .85, .25, 1) forwards;
}
@keyframes rippleExpand2 {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: .5; }
    100% { transform: translate(-50%, -50%) scale(20);  opacity: 0; }
}
.click-flash {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    pointer-events: none;
    z-index: 48;
    animation: flashFade .45s ease forwards;
}
@keyframes flashFade {
    0%   { opacity: .12; }
    100% { opacity: 0; }
}
.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 51;
    animation: sparkFly var(--dur, .5s) var(--del, 0s) ease-out forwards;
    transform-origin: center;
}
@keyframes sparkFly {
    0%   { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx, 40px)), calc(-50% + var(--ty, -40px))) scale(0); opacity: 0; }
}
.svc-card:active {
    transform: translateY(-6px) scale(.99);
}

.svc-inner {
    position: relative;
    z-index: 2;
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.svc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.svc-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: transform .35s, box-shadow .35s;
}

.svc-card:hover .svc-icon-wrap { transform: scale(1.1) rotate(-4deg); }

.svc-card.c0 .svc-icon-wrap { background: rgba(0,245,212,.1);  color: var(--c0); border: 1px solid rgba(0,245,212,.22); }
.svc-card.c1 .svc-icon-wrap { background: rgba(129,140,248,.1); color: var(--c1); border: 1px solid rgba(129,140,248,.22); }
.svc-card.c2 .svc-icon-wrap { background: rgba(244,114,182,.1); color: var(--c2); border: 1px solid rgba(244,114,182,.22); }
.svc-card.c3 .svc-icon-wrap { background: rgba(251,146,60,.1);  color: var(--c3); border: 1px solid rgba(251,146,60,.22); }
.svc-card.c4 .svc-icon-wrap { background: rgba(52,211,153,.1);  color: var(--c4); border: 1px solid rgba(52,211,153,.22); }
.svc-card.c5 .svc-icon-wrap { background: rgba(96,165,250,.1);  color: var(--c5); border: 1px solid rgba(96,165,250,.22); }
.svc-card.c6 .svc-icon-wrap { background: rgba(232,121,249,.1); color: var(--c6); border: 1px solid rgba(232,121,249,.22); }

.svc-card.c0:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(0,245,212,.3); }
.svc-card.c1:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(129,140,248,.3); }
.svc-card.c2:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(244,114,182,.3); }
.svc-card.c3:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(251,146,60,.3); }
.svc-card.c4:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(52,211,153,.3); }
.svc-card.c5:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(96,165,250,.3); }
.svc-card.c6:hover .svc-icon-wrap { box-shadow: 0 0 24px rgba(232,121,249,.3); }

.svc-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 20px;
    border: 1px solid currentColor;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .35s, transform .35s;
}

.svc-card:hover .svc-icon-wrap::after {
    opacity: .25;
    transform: scale(1);
}

.svc-num {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .2em;
    color: rgba(255,255,255,.18);
    line-height: 1;
}

.svc-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
    transition: color .3s;
}

.svc-card.c0:hover .svc-title { color: var(--c0); }
.svc-card.c1:hover .svc-title { color: var(--c1); }
.svc-card.c2:hover .svc-title { color: var(--c2); }
.svc-card.c3:hover .svc-title { color: var(--c3); }
.svc-card.c4:hover .svc-title { color: var(--c4); }
.svc-card.c5:hover .svc-title { color: var(--c5); }
.svc-card.c6:hover .svc-title { color: var(--c6); }

.svc-desc {
    font-size: .88rem;
    line-height: 1.75;
    color: rgba(255,255,255,.4);
    font-weight: 300;
    flex: 1;
}

.svc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.svc-pills .pill {
    font-family: 'DM Mono', monospace;
    font-size: .55rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.03);
    transition: border-color .25s, color .25s, background .25s;
}

.svc-card:hover .pill {
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.55);
}

.svc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: auto;
    transition: border-color .3s;
}

.svc-card:hover .svc-footer { border-color: rgba(255,255,255,.12); }

.details-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'DM Mono', monospace;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all .3s;
}
.details-btn i {
    font-size: .55rem;
    transition: transform .3s;
}
.svc-card:hover .details-btn {
    color: rgba(255,255,255,.6);
    border-color: rgba(255,255,255,.2);
}
.svc-card.c0:hover .details-btn { color: var(--c0); border-color: rgba(0,245,212,.3); background: rgba(0,245,212,.05); }
.svc-card.c1:hover .details-btn { color: var(--c1); border-color: rgba(129,140,248,.3); background: rgba(129,140,248,.05); }
.svc-card.c2:hover .details-btn { color: var(--c2); border-color: rgba(244,114,182,.3); background: rgba(244,114,182,.05); }
.svc-card.c3:hover .details-btn { color: var(--c3); border-color: rgba(251,146,60,.3); background: rgba(251,146,60,.05); }
.svc-card.c4:hover .details-btn { color: var(--c4); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.05); }
.svc-card.c5:hover .details-btn { color: var(--c5); border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.05); }
.svc-card.c6:hover .details-btn { color: var(--c6); border-color: rgba(232,121,249,.3); background: rgba(232,121,249,.05); }
.details-btn:hover i {
    transform: rotate(90deg);
}

.svc-tag {
    font-family: 'DM Mono', monospace;
    font-size: .55rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.2);
    transition: color .3s;
}

.svc-card.c0:hover .svc-tag { color: rgba(0,245,212,.6); }
.svc-card.c1:hover .svc-tag { color: rgba(129,140,248,.6); }
.svc-card.c2:hover .svc-tag { color: rgba(244,114,182,.6); }
.svc-card.c3:hover .svc-tag { color: rgba(251,146,60,.6); }
.svc-card.c4:hover .svc-tag { color: rgba(52,211,153,.6); }
.svc-card.c5:hover .svc-tag { color: rgba(96,165,250,.6); }
.svc-card.c6:hover .svc-tag { color: rgba(232,121,249,.6); }

.svc-card .noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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='1'/%3E%3C/svg%3E");
    background-size: 160px;
    opacity: .025;
    mix-blend-mode: overlay;
}

.svc-card .scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 2px;
    background: linear-gradient(to right, transparent, currentColor, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    transition: opacity .3s;
}

.svc-card:hover .scan { opacity: 1; animation: svcCardScan 2.5s ease-in-out infinite; }

@keyframes svcCardScan {
    0%  { top: -3px;  opacity: 0; }
    8%  { opacity: .6; }
    88% { opacity: .3; }
    100% { top: 100%; opacity: 0; }
}

.svc-card.c0 .scan { color: var(--c0); }
.svc-card.c1 .scan { color: var(--c1); }
.svc-card.c2 .scan { color: var(--c2); }
.svc-card.c3 .scan { color: var(--c3); }
.svc-card.c4 .scan { color: var(--c4); }
.svc-card.c5 .scan { color: var(--c5); }
.svc-card.c6 .scan { color: var(--c6); }

/* 7th card: full width of grid at all breakpoints */
.svc-card.wide {
    grid-column: 1 / -1;
}

.svc-card.wide .svc-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.svc-card.wide .svc-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svc-card.wide .svc-extra {
    width: 220px;
    min-width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid rgba(255,255,255,.06);
}

.svc-card.wide .svc-extra-label {
    font-family: 'DM Mono', monospace;
    font-size: .55rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.22);
    margin-bottom: 4px;
}

.svc-card.wide .deliverable {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    transition: color .25s;
}

.svc-card.wide:hover .deliverable { color: rgba(255,255,255,.65); }

.svc-card.wide .deliverable-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c6);
    box-shadow: 0 0 6px var(--c6);
    flex-shrink: 0;
    animation: svcDotPulse 2s ease-in-out infinite alternate;
}

@keyframes svcDotPulse {
    from { opacity: .5; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.4); }
}

/* ═══ Detail Panel — materialise overlay ═══ */
.detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 5, 16, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.detail-backdrop.visible {
    opacity: 1;
    pointer-events: all;
}

.detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    z-index: 201;
    pointer-events: none;
}

.detail-panel .mat-outline {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid currentColor;
    opacity: 0;
    transform: scale(.82) rotate(.8deg);
    transition: none;
}

.mat-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0;
}
.mat-corner.tl { top: -1px; left: -1px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.mat-corner.tr { top: -1px; right: -1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.mat-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }
.mat-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }

.mat-body {
    position: relative;
    background: linear-gradient(160deg, rgba(7, 16, 34, .97) 0%, rgba(4, 9, 22, .99) 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    padding: 44px 44px 36px;
    box-shadow: 0 60px 160px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
    opacity: 0;
    transform: scale(.88) translateY(20px);
    transition: none;
    overflow: hidden;
}
.mat-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 0%, transparent 75%);
    opacity: 0;
    pointer-events: none;
}
.mat-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
    opacity: .5;
}

.detail-panel.step1 .mat-outline {
    animation: outlineAppear .35s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes outlineAppear {
    0%   { opacity: 0; transform: scale(.78) rotate(1.2deg); }
    60%  { opacity: .5; transform: scale(1.03) rotate(-.3deg); }
    100% { opacity: .35; transform: scale(1) rotate(0deg); }
}
.detail-panel.step1 .mat-corner {
    animation: cornerFlash .2s ease forwards;
}
.detail-panel.step1 .mat-corner.tl { animation-delay: .04s; }
.detail-panel.step1 .mat-corner.tr { animation-delay: .08s; }
.detail-panel.step1 .mat-corner.bl { animation-delay: .12s; }
.detail-panel.step1 .mat-corner.br { animation-delay: .16s; }
@keyframes cornerFlash {
    0%   { opacity: 0; transform: scale(.5); }
    50%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

.detail-panel.step2 .mat-body {
    animation: bodyMaterialise .65s .1s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes bodyMaterialise {
    0%   { opacity: 0;   transform: scale(.88) translateY(22px); filter: blur(8px); }
    25%  { opacity: .3;  transform: scale(.94) translateY(12px); filter: blur(4px); }
    60%  { opacity: .85; transform: scale(1.01) translateY(-3px); filter: blur(1px); }
    80%  { opacity: .95; transform: scale(.995) translateY(1px);  filter: blur(0); }
    100% { opacity: 1;   transform: scale(1) translateY(0);       filter: blur(0); }
}
.detail-panel.step2 .mat-body::before {
    animation: dustFade .8s ease forwards;
}
@keyframes dustFade {
    0%   { opacity: .55; transform: scale(1.06); }
    60%  { opacity: .2; }
    100% { opacity: 0;   transform: scale(1); }
}
.detail-panel.step2 .mat-outline {
    animation: outlineFade .5s .2s ease forwards;
}
@keyframes outlineFade {
    from { opacity: .35; }
    to   { opacity: 0; }
}
.detail-panel.step2 .mat-item {
    animation: itemReveal .4s cubic-bezier(.22, 1, .36, 1) both;
}
.detail-panel.step2 .mat-item:nth-child(1) { animation-delay: .35s; }
.detail-panel.step2 .mat-item:nth-child(2) { animation-delay: .42s; }
.detail-panel.step2 .mat-item:nth-child(3) { animation-delay: .49s; }
.detail-panel.step2 .mat-item:nth-child(4) { animation-delay: .56s; }
.detail-panel.step2 .mat-item:nth-child(5) { animation-delay: .63s; }
.detail-panel.step2 .mat-item:nth-child(6) { animation-delay: .70s; }
@keyframes itemReveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.detail-panel.step2 {
    pointer-events: all;
}

.detail-panel.closing .mat-body {
    animation: bodyDematerialise .35s ease forwards;
}
@keyframes bodyDematerialise {
    0%   { opacity: 1; transform: scale(1) translateY(0);   filter: blur(0); }
    40%  { opacity: .4; transform: scale(.96) translateY(6px); filter: blur(3px); }
    100% { opacity: 0; transform: scale(.85) translateY(20px); filter: blur(10px); }
}
.detail-panel.closing .mat-corner {
    animation: cornerFlash .2s ease reverse forwards;
}

.dp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}
.dp-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dp-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.dp-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 4px;
}
.dp-tag {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}
.dp-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .4);
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .25s;
}
.dp-close:hover {
    border-color: rgba(255, 100, 100, .5);
    color: rgba(255, 100, 100, .8);
    background: rgba(255, 50, 50, .06);
}
.dp-divider {
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: .15;
    margin-bottom: 28px;
}
.dp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.dp-block {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
}
.dp-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: .3;
}
.dp-block-label {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3);
    margin-bottom: 14px;
}
.dp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-left: 0;
}
.dp-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: rgba(255, 255, 255, .55);
    transition: color .2s;
}
.dp-list li:hover {
    color: rgba(255, 255, 255, .85);
}
.dp-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
    opacity: .7;
}
.dp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-wrap: wrap;
    gap: 12px;
}
.dp-desc {
    font-size: .85rem;
    color: rgba(255, 255, 255, .35);
    max-width: 380px;
    line-height: 1.7;
}
.btn-dp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-family: 'DM Mono', monospace;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #000;
    border: none;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.btn-dp::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .25);
    opacity: 0;
    transition: opacity .3s;
    border-radius: inherit;
}
.btn-dp:hover {
    transform: translateY(-2px);
}
.btn-dp:hover::before {
    opacity: 1;
}

.cta-banner {
    margin-top: 48px;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(0,245,212,.06) 0%, rgba(58,134,255,.05) 50%, rgba(232,121,249,.04) 100%),
        rgba(7,16,31,.9);
    border: 1px solid rgba(255,255,255,.07);
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,245,212,.5) 25%, rgba(58,134,255,.6) 60%, transparent);
}

.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,245,212,.08) 0%, transparent 65%);
    pointer-events: none;
    animation: svcSgPulse 5s ease-in-out infinite alternate;
}

.cta-left h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    margin-bottom: 8px;
    color: #fff;
}

.cta-left p {
    font-size: .9rem;
    color: rgba(255,255,255,.4);
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--c0), #3a86ff);
    color: #000;
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 28px rgba(0,245,212,.22);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.btn-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(247,0,255,.5), rgba(0,245,212,.5));
    opacity: 0;
    transition: opacity .35s;
    border-radius: inherit;
}

.btn-cta span {
    position: relative;
    z-index: 1;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0,245,212,.38);
}

.btn-cta:hover::before {
    opacity: 1;
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-card.wide .svc-inner {
        flex-direction: column;
    }
    .svc-card.wide .svc-extra {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.06);
        padding-left: 0;
        padding-top: 16px;
    }
    .services .sec-header::before,
    .services .sec-header::after {
        display: none;
    }
}

@media (max-width: 580px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    .svc-card.wide .svc-extra {
        min-width: 0;
    }
    .dp-grid {
        grid-template-columns: 1fr;
    }
    .cta-banner {
        padding: 32px 24px;
        flex-direction: column;
        align-items: flex-start;
    }
    /* Detail panel: compact on small screens */
    .detail-panel {
        width: min(96vw, 720px);
        max-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .mat-body {
        padding: 28px 20px 24px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dp-header {
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .dp-title {
        font-size: 1.15rem;
    }
    .dp-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .dp-desc {
        max-width: none;
    }
    .btn-dp {
        justify-content: center;
    }
    .dp-close {
        min-width: 44px;
        min-height: 44px;
    }
    /* Touch-friendly service card actions */
    .details-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 18px;
        font-size: .65rem;
    }
}

/* === SERVICE POPUP (Detail Modal — svc-card style + animations) === */
.service-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: popupOverlayIn 0.35s ease;
}

@keyframes popupOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.popup-content {
    background: var(--card);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 44px 48px;
    border-radius: 22px;
    max-width: 720px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03),
        0 60px 140px rgba(0,0,0,.65),
        0 0 80px rgba(0,245,212,.06);
    overflow: hidden;
}

/* Noise texture overlay */
.popup-content .popup-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='np'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23np)' opacity='1'/%3E%3C/svg%3E");
    background-size: 160px;
    opacity: .03;
    mix-blend-mode: overlay;
}

/* Top accent line */
.popup-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c0), transparent);
    z-index: 10;
}

/* Scan line animation */
.popup-content .popup-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(0,245,212,.7), transparent);
    z-index: 15;
    pointer-events: none;
    animation: popupScanLine 3s ease-in-out infinite;
}

@keyframes popupScanLine {
    0%   { top: -3px;  opacity: 0; }
    6%   { opacity: .8; }
    92%  { opacity: .4; }
    100% { top: 100%; opacity: 0; }
}

/* Bottom-right glow on popup */
.popup-content::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,245,212,.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.popup-content .popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    cursor: pointer;
    color: rgba(255,255,255,.6);
    transition: transform .25s, background .25s, border-color .25s, color .25s;
    z-index: 20;
}

.popup-content .popup-close:hover {
    background: rgba(0,245,212,.15);
    border-color: var(--c0);
    color: var(--c0);
    transform: scale(1.08) rotate(90deg);
}

.popup-content h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    color: var(--c0);
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 2;
}

.detail-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.popup-content .detail-section {
    background: rgba(255,255,255,.03);
    padding: 24px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .3s, border-color .3s, box-shadow .3s;
}

.popup-content .detail-section:hover {
    border-color: rgba(0,245,212,.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 24px rgba(0,245,212,.06);
}

.popup-content .detail-section h4 {
    font-family: 'DM Mono', monospace;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c0);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,245,212,.15);
    transition: color .3s, text-shadow .3s;
}

.popup-content .detail-section:hover h4 {
    color: var(--c0);
    text-shadow: 0 0 12px rgba(0,245,212,.4);
}

.popup-content .detail-section ul {
    list-style: none;
    padding-left: 0;
}

.popup-content .detail-section li {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    transition: color .25s, transform .25s;
}

.popup-content .detail-section li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--c0);
    font-weight: 600;
    opacity: .7;
    transition: transform .25s, opacity .25s;
}

.popup-content .detail-section:hover li::before {
    opacity: 1;
    transform: translateX(2px);
}

.popup-content .detail-section:hover li {
    color: rgba(255,255,255,.78);
}

/* === CONSULTATION MODAL === */
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-content {
    background: linear-gradient(180deg, rgba(8,14,32,.92), rgba(5,8,16,.92));
    backdrop-filter: blur(26px);
    padding: 34px 32px 28px;
    border-radius: 20px;
    text-align: left;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,.12);
    animation: slideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}
.modal-content::before{
    content:'';
    position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,245,212,.55) 25%,rgba(58,134,255,.65) 60%,transparent);
}

.modal-content h3 {
    margin: 0 0 25px 0;
    font-size: 1.35rem;
    color: var(--white);
}

.close {
    color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    border: 0;
    line-height: 1;
    padding: 0 6px;
}

.close:hover {
    color: var(--white);
}

.modal-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.modal-btn {
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    color: var(--white);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
}

.te-modal-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}
.te-mini-logo{
    width:44px;height:44px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(0,245,212,.10),rgba(58,134,255,.07));
    border:1px solid rgba(0,245,212,.18);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 32px rgba(0,245,212,.12);
}
.te-brand-text .te-brand-name{
    font-family:'Syne',sans-serif;
    font-weight:800;
    letter-spacing:-.04em;
    line-height:1;
    font-size:1.25rem;
}
.te-brand-text .te-brand-name .tech{ color:#fff; }
.te-brand-text .te-brand-name .easy{
    background:linear-gradient(135deg,var(--c0),var(--blue));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.te-brand-text .te-brand-sub{
    font-family:'DM Mono',monospace;
    font-size:.52rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.35);
    margin-top:4px;
}
.te-modal-desc{
    margin:-14px 0 6px;
    font-family:'DM Mono',monospace;
    font-size:.72rem;
    letter-spacing:.08em;
    color:rgba(255,255,255,.40);
    line-height:1.7;
}
.te-modal-summary{
    margin-top:16px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);
    font-family:'DM Mono',monospace;
    font-size:.62rem;
    letter-spacing:.08em;
    line-height:1.7;
}
.te-modal-summary b{ color:rgba(255,255,255,.82); font-weight:600; }

.email-btn {
    background: linear-gradient(135deg, #ff9500, #ff7500);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

.email-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #20BA5A);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* === ALERT MODAL === */
.alert-modal {
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.alert-content {
    background: radial-gradient(120% 120% at 30% 0%, rgba(0,245,212,.16) 0%, rgba(58,134,255,.10) 35%, rgba(8,14,32,.92) 70%);
    backdrop-filter: blur(26px);
    padding: 34px 32px 28px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,.12);
    animation: slideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}
.alert-content::before{
    content:'';
    position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,245,212,.55) 20%,rgba(251,191,36,.35) 55%,rgba(58,134,255,.55) 80%,transparent);
}
.alert-content::after{
    content:'';
    position:absolute;inset:-40%;
    background:conic-gradient(from 180deg, transparent 0 18%, rgba(0,245,212,.14) 22%, transparent 28%, rgba(58,134,255,.12) 52%, transparent 58%, rgba(139,92,246,.10) 78%, transparent 86%);
    animation: teSpark 3.6s linear infinite;
    pointer-events:none;
    opacity:.55;
}
@keyframes teSpark{to{transform:rotate(360deg);}}

.te-alert-brand{
    justify-content:center;
    margin-bottom:10px;
}

.alert-content h3 {
    margin: 0 0 15px 0;
    font-size: 1.5rem;
    color: var(--white);
}

.alert-content p {
    margin: 0 0 25px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.alert-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--c0), var(--blue));
    border: none;
    border-radius: 10px;
    color: #02050a;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 10px 34px rgba(0,245,212,.18);
}

.alert-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 46px rgba(0,245,212,.28);
}

/* === BUSINESS CARD OVERLAY (scroll to flip) === */
.bc-overlay{
    position:fixed;
    inset:0;
    z-index:10002;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    --card-w: min(680px, 92vw);
    --card-h: calc(var(--card-w) / 1.5852);
}
.bc-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
}
.bc-shell{
    position:relative;
    width:min(980px, 96vw);
    max-height:92vh;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(5,8,16,.55);
    box-shadow: 0 60px 170px rgba(0,0,0,.78);
    overflow:hidden;
}
.bc-shell::before{
    content:'';
    position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,245,212,.55) 25%,rgba(58,134,255,.65) 60%,transparent);
}
.bc-close{
    position:absolute;
    top:10px;
    right:12px;
    z-index:3;
    width:38px;height:38px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.65);
    cursor:pointer;
    font-size:28px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.bc-close:hover{
    transform: translateY(-1px);
    border-color: rgba(0,245,212,.25);
    color: var(--c0);
    background: rgba(0,245,212,.06);
}
.bc-scroll{
    position:relative;
    z-index:2;
    height:min(78vh, 740px);
    overflow-y:auto;
    overscroll-behavior:contain;
}
.bc-scroll-inner{
    min-height:190vh;
    padding:54px 24px 110px;
}
.bc-stage{
    position:sticky;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    justify-content:center;
}
.bc-scroll-spacer{
    height:60vh;
}
.bc-hint{
    position:relative;
    z-index:2;
    padding:14px 18px;
    text-align:center;
    font-family:'DM Mono',monospace;
    font-size:.62rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.35);
    border-top:1px solid rgba(255,255,255,.07);
    background:rgba(0,0,0,.18);
}

/* --- Card system (scoped) --- */
.bc-overlay .scene{
    width:var(--card-w);
    height:var(--card-h);
    perspective:1600px;
    cursor: grab;
}
.bc-overlay .flipper{
    width:100%;height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition: transform .12s linear;
}
.bc-overlay .face{
    position:absolute;inset:0;
    border-radius:22px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    overflow:hidden;
}
.bc-overlay .back-face{ transform:rotateY(180deg); }

/* FRONT */
.bc-overlay .front{
    background:
        radial-gradient(circle at top left, rgba(0,245,212,.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(58,134,255,.18), transparent 28%),
        linear-gradient(145deg, #08111e 0%, #0a1221 38%, #101a2d 100%);
    border:1px solid rgba(0,245,212,.14);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 50px 130px rgba(0,0,0,.85),
        0 0 120px rgba(0,245,212,.07),
        inset 0 1px 0 rgba(255,255,255,.07);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:0;
    position:relative;
}
.bc-overlay .f-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(circle at center, black 18%, transparent 78%);
    opacity:.55;
    pointer-events:none;
}
.bc-overlay .f-topbar{
    position:absolute;top:0;left:0;right:0;height:1px;z-index:20;
    background:linear-gradient(90deg,transparent 0%,rgba(0,245,212,.7) 22%,rgba(58,134,255,.9) 55%,rgba(139,92,246,.6) 78%,transparent 100%);
}
.bc-overlay .f-bottombar{
    position:absolute;bottom:0;left:0;right:0;height:1px;z-index:20;
    background:linear-gradient(90deg,transparent,rgba(0,245,212,.2) 40%,transparent);
}
.bc-overlay .f-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(10px);
}
.bc-overlay .f-glow-a{
    left:-70px;
    top:-80px;
    width:290px;
    height:290px;
    background:radial-gradient(circle, rgba(0,245,212,.16) 0%, transparent 70%);
}
.bc-overlay .f-glow-b{
    right:-50px;
    bottom:-70px;
    width:260px;
    height:260px;
    background:radial-gradient(circle, rgba(58,134,255,.14) 0%, transparent 70%);
}
.bc-overlay .f-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:30px 32px 0;
    position:relative;z-index:2;
}
.bc-overlay .f-brand-block{
    max-width:68%;
}
.bc-overlay .f-logo{
    display:flex;
    align-items:center;
    gap:14px;
}
.bc-overlay .f-logo-name{
    font-family:'Syne',sans-serif;font-weight:800;
    font-size:1.7rem;letter-spacing:-.04em;line-height:1;
}
.bc-overlay .f-logo-name .tech{color:#fff;}
.bc-overlay .f-logo-name .easy{
    background:linear-gradient(135deg,var(--c0),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.bc-overlay .f-logo-sub{
    font-family:'DM Mono',monospace;
    font-size:.48rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.38);
    margin-top:5px;
    display:block;
}
.bc-overlay .f-lead{
    margin-top:20px;
    max-width:430px;
    color:rgba(255,255,255,.70);
    font-size:.92rem;
    line-height:1.6;
}
.bc-overlay .f-chip{
    min-width:92px;
    padding:14px 16px 12px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}
.bc-overlay .f-chip::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,245,212,.08), transparent 60%);
}
.bc-overlay .f-chip span{
    position:relative;
    z-index:1;
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:1.1rem;
    letter-spacing:-.04em;
    color:#fff;
}
.bc-overlay .f-chip small{
    position:relative;
    z-index:1;
    font-family:'DM Mono',monospace;
    font-size:.48rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.46);
}
.bc-overlay .f-mid{
    padding:0 32px;
    position:relative;z-index:2;
}
.bc-overlay .f-services-title{
    font-family:'DM Mono',monospace;font-size:.5rem;letter-spacing:.28em;
    text-transform:uppercase;color:rgba(0,245,212,.5);
    margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.bc-overlay .f-services-title::after{content:'';flex:1;max-width:40px;height:1px;background:rgba(0,245,212,.25);}
.bc-overlay .f-meta-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
}
.bc-overlay .f-meta-card{
    min-height:92px;
    padding:16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.bc-overlay .f-meta-kicker{
    display:block;
    margin-bottom:10px;
    font-family:'DM Mono',monospace;
    font-size:.48rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(0,245,212,.65);
}
.bc-overlay .f-meta-card strong{
    display:block;
    font-size:.9rem;
    line-height:1.45;
    color:rgba(255,255,255,.80);
}
.bc-overlay .f-bottom{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:18px;
    padding:0 32px 28px;
    position:relative;z-index:2;
}
.bc-overlay .f-tagline{
    font-family:'Syne',sans-serif;font-weight:700;
    max-width:420px;
    font-size:1.2rem;letter-spacing:-.03em;
    color:rgba(255,255,255,.78);line-height:1.3;
}
.bc-overlay .f-tagline span{
    background:linear-gradient(135deg,var(--c0),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.bc-overlay .f-website{
    font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.12em;
    color:var(--c0);display:flex;align-items:center;gap:6px;
    white-space:nowrap;
}
.bc-overlay .f-website::before{
    content:'';width:12px;height:1px;
    background:var(--c0);box-shadow:0 0 6px var(--c0);
}
.bc-overlay .f-scan{
    position:absolute;left:0;right:0;top:-2px;height:1.5px;
    background:linear-gradient(to right,transparent,rgba(0,245,212,.5),transparent);
    pointer-events:none;z-index:15;
    animation: bcCardScan 5s ease-in-out infinite;
}
@keyframes bcCardScan{
    0%{top:-2px;opacity:0;}5%{opacity:.8;}90%{opacity:.3;}100%{top:100%;opacity:0;}
}

/* BACK */
.bc-overlay .back{
    background:
        radial-gradient(circle at top right, rgba(58,134,255,.18), transparent 32%),
        radial-gradient(circle at 15% 85%, rgba(0,245,212,.12), transparent 28%),
        linear-gradient(160deg, #060d18 0%, #0b1322 50%, #0d1830 100%);
    border:1px solid rgba(58,134,255,.14);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 50px 130px rgba(0,0,0,.85),
        0 0 80px rgba(58,134,255,.07);
    display:flex;
    flex-direction:column;
    position:relative;overflow:hidden;
}
.bc-overlay .b-glow{
    position:absolute;right:-60px;top:-60px;
    width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(58,134,255,.08) 0%,transparent 65%);
    pointer-events:none;
}
.bc-overlay .b-glow2{
    position:absolute;left:-40px;bottom:-40px;
    width:250px;height:250px;border-radius:50%;
    background:radial-gradient(circle,rgba(0,245,212,.06) 0%,transparent 65%);
    pointer-events:none;
}
.bc-overlay .b-topbar{
    position:absolute;top:0;left:0;right:0;height:1px;z-index:20;
    background:linear-gradient(90deg,transparent,rgba(58,134,255,.7) 35%,rgba(0,245,212,.6) 65%,transparent);
}
.bc-overlay .b-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(58,134,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(58,134,255,.025) 1px,transparent 1px);
    background-size:24px 24px;
    mask-image:radial-gradient(ellipse 85% 80% at 30% 55%,black 0%,transparent 70%);
    pointer-events:none;
}
.bc-overlay .b-content{
    flex:1;
    display:flex;
    align-items:stretch;
    padding:30px 32px;
    gap:28px;
    position:relative;z-index:2;
}
.bc-overlay .b-left{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    justify-content:space-between;
    gap:18px;
}
.bc-overlay .b-badge-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.bc-overlay .b-sig-strip{
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    min-height:64px;
    display:flex;
    align-items:center;
    padding:14px 16px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.bc-overlay .b-sig-strip::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(0,245,212,.08), transparent 60%);
}
.bc-overlay .b-sig-text{
    font-family:'Outfit',sans-serif;
    font-size:1rem;
    line-height:1.45;
    color:rgba(255,255,255,.76);
    position:relative;
    z-index:1;
}
.bc-overlay .b-contacts{display:flex;flex-direction:column;gap:8px;}
.bc-overlay .b-contact-row{display:flex;align-items:center;gap:10px;}
.bc-overlay .b-contact-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.bc-overlay .b-contact-dot.c{background:var(--c0);box-shadow:0 0 6px var(--c0);}
.bc-overlay .b-contact-dot.g{background:#25d366;box-shadow:0 0 6px #25d366;}
.bc-overlay .b-contact-dot.b{background:var(--blue);box-shadow:0 0 6px var(--blue);}
.bc-overlay .b-contact-label{
    font-family:'DM Mono',monospace;font-size:.48rem;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.22);width:38px;flex-shrink:0;
}
.bc-overlay .b-contact-val{
    font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.04em;
    color:rgba(255,255,255,.72);
    word-break: break-word;
}
.bc-overlay .b-logo-small{display:flex;align-items:center;gap:8px;margin-top:auto;}
.bc-overlay .b-status-pill{
    padding:9px 12px;
    border-radius:999px;
    border:1px solid rgba(0,245,212,.16);
    background:rgba(0,245,212,.06);
    color:rgba(0,245,212,.74);
    font-family:'DM Mono',monospace;
    font-size:.5rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    white-space:nowrap;
}
.bc-overlay .b-logo-small-name{
    font-family:'Syne',sans-serif;font-weight:800;
    font-size:.9rem;letter-spacing:-.03em;
}
.bc-overlay .b-logo-small-name .tech{color:rgba(255,255,255,.6);}
.bc-overlay .b-logo-small-name .easy{
    background:linear-gradient(135deg,var(--c0),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    opacity:.8;
}
.bc-overlay .b-divider{
    width:1px;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.07) 20%,rgba(255,255,255,.07) 80%,transparent);
    flex-shrink:0;
}
.bc-overlay .b-qr-block{
    width:160px;flex-shrink:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:10px;
}
.bc-overlay .b-qr-frame{
    position:relative;
    padding:6px;
    background:rgba(255,255,255,.97);
    border-radius:10px;
    box-shadow:0 0 0 1px rgba(0,245,212,.2),0 0 20px rgba(0,245,212,.15);
}
.bc-overlay .b-qr-frame img{
    display:block;width:120px;height:120px;border-radius:4px;
    image-rendering:pixelated;
}
.bc-overlay .qr-tick{position:absolute;width:12px;height:12px;}
.bc-overlay .qr-tick.tl{top:-1px;left:-1px;border-top:2px solid var(--c0);border-left:2px solid var(--c0);border-radius:2px 0 0 0;}
.bc-overlay .qr-tick.tr{top:-1px;right:-1px;border-top:2px solid var(--c0);border-right:2px solid var(--c0);border-radius:0 2px 0 0;}
.bc-overlay .qr-tick.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--c0);border-left:2px solid var(--c0);border-radius:0 0 0 2px;}
.bc-overlay .qr-tick.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--c0);border-right:2px solid var(--c0);border-radius:0 0 2px 0;}
.bc-overlay .b-qr-label{
    font-family:'DM Mono',monospace;font-size:.5rem;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.25);text-align:center;
}
.bc-overlay .b-qr-sublabel{
    font-family:'DM Mono',monospace;font-size:.44rem;letter-spacing:.1em;
    color:rgba(0,245,212,.4);text-align:center;margin-top:-6px;
}
.bc-overlay .b-qr-note{
    font-size:.72rem;
    line-height:1.55;
    color:rgba(255,255,255,.52);
    text-align:center;
    max-width:180px;
}

@media (max-width: 700px){
    .bc-scroll{ height: 78vh; }
    .bc-overlay .f-top{ padding:22px 18px 0; flex-direction:column; }
    .bc-overlay .f-brand-block{ max-width:100%; }
    .bc-overlay .f-chip{ min-width:unset; width:100%; align-items:flex-start; }
    .bc-overlay .f-mid{ padding:0 18px; }
    .bc-overlay .f-meta-grid{ grid-template-columns:1fr; }
    .bc-overlay .f-bottom{ padding:0 18px 18px; flex-direction:column; align-items:flex-start; gap:10px; }
    .bc-overlay .b-content{ padding:18px; gap:14px; flex-direction:column; }
    .bc-overlay .b-badge-row{ flex-direction:column; align-items:flex-start; }
    .bc-overlay .b-divider{ width:100%; height:1px; }
    .bc-overlay .b-qr-block{ width:100%; }
}

/* ═══════════════════════════════════════════════════════
   TECH SOLUTION — ABOUT SECTION (Enhanced)
═══════════════════════════════════════════════════════ */

.about {
    padding: 100px 0 120px;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

/* Ambient background — scoped to section */
.about .scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.about .scene-glow-1 {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,245,212,.07) 0%, transparent 65%);
    animation: aboutGlowDrift 9s ease-in-out infinite alternate;
}

.about .scene-glow-2 {
    position: absolute;
    bottom: -250px;
    left: -150px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58,134,255,.06) 0%, transparent 65%);
    animation: aboutGlowDrift 12s 2s ease-in-out infinite alternate;
}

.about .scene-glow-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247,0,255,.04) 0%, transparent 65%);
    animation: aboutGlowDrift 7s 1s ease-in-out infinite alternate;
}

@keyframes aboutGlowDrift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(30px,20px) scale(1.15); }
}

.about .scene-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,245,212,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,212,.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

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

/* Eyebrow */
.about .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}

.about .eyebrow-line {
    width: 32px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.about .eyebrow span {
    font-family: 'DM Mono', monospace;
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: .75;
}

/* Main grid */
.about .about-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 32px;
    align-items: start;
}

/* Left column */
.about .about-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.about .about-headline h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.04em;
    color: #fff;
    margin-bottom: 0;
}

.about .about-headline h2 .grad {
    background: linear-gradient(110deg, var(--cyan) 0%, var(--blue) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about .about-copy {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
}

.about .about-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,245,212,.45), transparent);
}

.about .about-copy p {
    font-size: .97rem;
    line-height: 1.85;
    color: rgba(255,255,255,.5);
    font-weight: 300;
}

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

.about .pillar {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .3s, background .3s;
    cursor: default;
}

.about .pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    opacity: 0;
    transition: opacity .3s;
}

.about .pillar.p1::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.about .pillar.p2::before { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.about .pillar.p3::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.about .pillar.p4::before { background: linear-gradient(90deg, transparent, var(--pink), transparent); }

.about .pillar:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.05);
}

.about .pillar.p1:hover { border-color: rgba(0,245,212,.3); }
.about .pillar.p2:hover { border-color: rgba(58,134,255,.3); }
.about .pillar.p3:hover { border-color: rgba(251,191,36,.3); }
.about .pillar.p4:hover { border-color: rgba(247,0,255,.3); }

.about .pillar:hover::before { opacity: 1; }

.about .pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: box-shadow .3s;
}

.about .p1 .pillar-icon {
    background: rgba(0,245,212,.08);
    color: var(--cyan);
    border: 1px solid rgba(0,245,212,.18);
}

.about .p2 .pillar-icon {
    background: rgba(58,134,255,.08);
    color: var(--blue);
    border: 1px solid rgba(58,134,255,.18);
}

.about .p3 .pillar-icon {
    background: rgba(251,191,36,.08);
    color: var(--gold);
    border: 1px solid rgba(251,191,36,.18);
}

.about .p4 .pillar-icon {
    background: rgba(247,0,255,.08);
    color: var(--pink);
    border: 1px solid rgba(247,0,255,.18);
}

.about .p1:hover .pillar-icon { box-shadow: 0 0 18px rgba(0,245,212,.25); }
.about .p2:hover .pillar-icon { box-shadow: 0 0 18px rgba(58,134,255,.25); }
.about .p3:hover .pillar-icon { box-shadow: 0 0 18px rgba(251,191,36,.25); }
.about .p4:hover .pillar-icon { box-shadow: 0 0 18px rgba(247,0,255,.25); }

.about .pillar-text strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    color: rgba(255,255,255,.85);
    margin-bottom: 3px;
}

.about .pillar-text span {
    font-size: .77rem;
    line-height: 1.5;
    color: rgba(255,255,255,.3);
}

/* Tags section */
.about .tags-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about .tags-label {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
}

.about .tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.about .etag {
    font-family: 'DM Mono', monospace;
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.38);
    background: rgba(255,255,255,.025);
    transition: border-color .25s, color .25s, background .25s;
    cursor: default;
}

.about .etag:hover {
    border-color: rgba(0,245,212,.4);
    color: var(--cyan);
    background: rgba(0,245,212,.05);
}

/* CTA row */
.about .about-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.about .about-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #000;
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 4px 28px rgba(0,245,212,.22);
    position: relative;
    overflow: hidden;
}

.about .about-cta .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pink), var(--cyan));
    opacity: 0;
    transition: opacity .35s;
    border-radius: inherit;
}

.about .about-cta .btn-primary span {
    position: relative;
    z-index: 1;
}

.about .about-cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0,245,212,.38);
}

.about .about-cta .btn-primary:hover::before {
    opacity: 1;
}

.about .about-cta .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    text-decoration: none;
    transition: color .25s;
}

.about .about-cta .btn-ghost i {
    font-size: .65rem;
    transition: transform .25s;
}

.about .about-cta .btn-ghost:hover {
    color: var(--cyan);
}

.about .about-cta .btn-ghost:hover i {
    transform: translateX(4px);
}

/* Right column */
.about .about-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about .img-frame {
    position: relative;
    border-radius: 22px;
    overflow: visible;
}

.about .img-inner {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(0,245,212,.04);
    position: relative;
    background: var(--card);
}

/* CSS-only tech visual (replaces image) */
.about .img-inner.img-css-object {
    min-height: 320px;
    background:
        linear-gradient(165deg, rgba(0,245,212,.03) 0%, transparent 40%, transparent 60%, rgba(58,134,255,.04) 100%),
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,245,212,.08) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 75% 55%, rgba(58,134,255,.06) 0%, transparent 50%),
        linear-gradient(rgba(0,245,212,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,212,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(7,16,31,.97) 0%, rgba(4,12,28,.98) 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s, box-shadow .4s;
}
.about .img-frame:hover .img-inner.img-css-object {
    transform: scale(1.02);
    box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 80px rgba(0,245,212,.08);
}
.about .img-inner.img-css-object::after {
    left: 0;
    right: 0;
}

.about .img-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(0,245,212,.75), transparent);
    animation: aboutScanLine 4s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes aboutScanLine {
    0%   { top: -3px;  opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: .5; }
    100% { top: 100%;  opacity: 0; }
}

.about .corner {
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 20;
    pointer-events: none;
}

.about .corner-tl {
    top: 10px;
    left: 10px;
    border-top: 2px solid rgba(0,245,212,.65);
    border-left: 2px solid rgba(0,245,212,.65);
}

.about .corner-tr {
    top: 10px;
    right: 10px;
    border-top: 2px solid rgba(0,245,212,.65);
    border-right: 2px solid rgba(0,245,212,.65);
}

.about .corner-bl {
    bottom: 10px;
    left: 10px;
    border-bottom: 2px solid rgba(58,134,255,.5);
    border-left: 2px solid rgba(58,134,255,.5);
}

.about .corner-br {
    bottom: 10px;
    right: 10px;
    border-bottom: 2px solid rgba(58,134,255,.5);
    border-right: 2px solid rgba(58,134,255,.5);
}

.about .img-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 5;
    background: linear-gradient(90deg, transparent, rgba(0,245,212,.6) 30%, rgba(58,134,255,.7) 60%, transparent);
}

/* Badge cards */
.about .badge-card {
    position: absolute;
    background: rgba(6,12,28,.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 16px 50px rgba(0,0,0,.5);
    z-index: 30;
    pointer-events: none;
}

.about .badge-card.bc-tl {
    top: -18px;
    left: -18px;
    animation: aboutBadgeFloat 4.5s ease-in-out infinite alternate;
}

.about .badge-card.bc-br {
    bottom: -18px;
    right: -18px;
    animation: aboutBadgeFloat 5.5s 1s ease-in-out infinite alternate;
}

@keyframes aboutBadgeFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-9px); }
}

.about .badge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-radius: 14px 14px 0 0;
}

.about .bc-tl::before {
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.about .bc-br::before {
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.about .badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.about .bc-tl .badge-icon {
    background: rgba(0,245,212,.1);
    color: var(--cyan);
    border: 1px solid rgba(0,245,212,.2);
}

.about .bc-br .badge-icon {
    background: rgba(58,134,255,.1);
    color: var(--blue);
    border: 1px solid rgba(58,134,255,.2);
}

.about .badge-text strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .84rem;
    color: #fff;
    white-space: nowrap;
}

.about .badge-text span {
    font-family: 'DM Mono', monospace;
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

/* Tech stack strip */
.about .stack-strip {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.about .stack-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(58,134,255,.45), transparent);
}

.about .stack-label {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
}

.about .stack-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.about .sicon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: rgba(255,255,255,.45);
    transition: border-color .25s, color .25s, background .25s, transform .25s;
    cursor: default;
    flex-shrink: 0;
}

.about .sicon:hover {
    transform: translateY(-4px);
}

.about .sicon.si-cyan:hover  { border-color: rgba(0,245,212,.4);  color: var(--cyan); background: rgba(0,245,212,.06); }
.about .sicon.si-blue:hover  { border-color: rgba(58,134,255,.4); color: var(--blue); background: rgba(58,134,255,.06); }
.about .sicon.si-pink:hover  { border-color: rgba(247,0,255,.4);  color: var(--pink); background: rgba(247,0,255,.06); }
.about .sicon.si-gold:hover  { border-color: rgba(251,191,36,.4); color: var(--gold); background: rgba(251,191,36,.06); }
.about .sicon.si-green:hover { border-color: rgba(74,222,128,.4); color: #4ade80; background: rgba(74,222,128,.06); }

/* Process strip */
.about .process-strip {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
}

.about .process-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.4), transparent);
}

.about .process-label {
    font-family: 'DM Mono', monospace;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 16px;
}

.about .process-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.about .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.about .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
}

.about .step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.4);
    transition: all .3s;
}

.about .step:hover .step-dot {
    border-color: var(--cyan);
    background: rgba(0,245,212,.1);
    color: var(--cyan);
    box-shadow: 0 0 14px rgba(0,245,212,.25);
}

.about .step-name {
    font-family: 'DM Mono', monospace;
    font-size: .5rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    text-align: center;
    white-space: nowrap;
    transition: color .3s;
}

.about .step:hover .step-name {
    color: rgba(255,255,255,.5);
}

/* About responsive */
@media (max-width: 860px) {
    .about .about-grid {
        grid-template-columns: 1fr;
    }
    .about .about-right {
        margin-top: 60px;
    }
    .about .badge-card.bc-tl {
        top: 12px;
        left: 12px;
    }
    .about .badge-card.bc-br {
        bottom: 12px;
        right: 12px;
    }
}

@media (max-width: 540px) {
    .about .pillars {
        grid-template-columns: 1fr;
    }
    .about .badge-card {
        display: none;
    }
    .about .process-steps {
        gap: 4px;
    }
    .about .step:not(:last-child)::after {
        display: none;
    }
    .about .img-inner.img-css-object {
        min-height: 240px;
    }
    .about .tags-row {
        gap: 8px;
    }
}

/* === WHY US SECTION - PRO VERSION === */
#why-us.why-us {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: var(--dark-bg);
}

#why-us .section-header {
    text-align: center;
    margin-bottom: 70px;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}

/* CARD BASE */
.card {
  border-radius: 20px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.055);
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
  opacity: 0; animation: appear .8s cubic-bezier(.22,1,.36,1) both;
  cursor: default;
}
.card:nth-child(1){animation-delay:.06s;}
.card:nth-child(2){animation-delay:.16s;}
.card:nth-child(3){animation-delay:.26s;}
@keyframes appear {
  from{opacity:0;transform:translateY(44px) scale(.96);}
  to  {opacity:1;transform:none;}
}
.card:hover { transform: translateY(-16px) scale(1.02); }

.c1 { background: #060d1e; }
.c2 { background: #0d0a06; }
.c3 { background: #0a0614; }

.c1:hover { border-color:rgba(94,234,212,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(94,234,212,.09),inset 0 0 0 1px rgba(94,234,212,.05); }
.c2:hover { border-color:rgba(251,191,36,.38);  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(251,191,36,.08),inset 0 0 0 1px rgba(251,191,36,.05); }
.c3:hover { border-color:rgba(192,132,252,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(192,132,252,.09),inset 0 0 0 1px rgba(192,132,252,.05); }

.card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:1px;z-index:30;
}
.c1::before{background:linear-gradient(90deg,transparent,#5eead4 28%,#60a5fa 72%,transparent);}
.c2::before{background:linear-gradient(90deg,transparent,#fbbf24 28%,#fb923c 72%,transparent);}
.c3::before{background:linear-gradient(90deg,transparent,#818cf8 28%,#c084fc 72%,transparent);}

.stage {
  position: relative; height: 250px; overflow: hidden;
}
.stage::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:80px;
  pointer-events:none;z-index:15;
}
.c1 .stage::after{background:linear-gradient(to top,#060d1e,transparent);}
.c2 .stage::after{background:linear-gradient(to top,#0d0a06,transparent);}
.c3 .stage::after{background:linear-gradient(to top,#0a0614,transparent);}

.body { padding: 20px 24px 28px; border-top: 1px solid rgba(255,255,255,.04); position: relative; }
.body::before {
  content:''; position:absolute;top:0;left:24px;
  height:2px;width:0;border-radius:2px;
  transition:width .5s cubic-bezier(.22,1,.36,1) .08s;
}
.card:hover .body::before{width:48px;}
.c1 .body::before{background:#5eead4;}
.c2 .body::before{background:#fbbf24;}
.c3 .body::before{background:#c084fc;}

.tag {
  font-family:'DM Mono',monospace; font-size:.55rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:3px 10px; border-radius:3px; margin-bottom:10px;
  display:inline-block;
}
.c1 .tag{color:#5eead4;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.15);}
.c2 .tag{color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15);}
.c3 .tag{color:#c084fc;background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.15);}

.body h3 {
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:1.16rem;letter-spacing:-.025em;
  color:#f0f2fa;margin-bottom:8px;transition:color .35s;
}
.c1:hover .body h3{color:#5eead4;}
.c2:hover .body h3{color:#fbbf24;}
.c3:hover .body h3{color:#c084fc;}
.body p{font-size:.88rem;line-height:1.76;color:#4a5270;font-weight:300;}

/* CARD 1 — BLUEPRINT */
.c1 .stage {
  background:
    radial-gradient(ellipse 80% 70% at 50% 60%, rgba(94,234,212,.055) 0%, transparent 65%),
    radial-gradient(circle at 1px 1px, rgba(94,234,212,.18) 1px, transparent 0);
  background-size: auto, 24px 24px;
}

.bp-svg { width:100%; height:100%; }

.draw-path {
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.dp1 { animation: drawIn 1.8s .2s ease forwards; }
.dp2 { animation: drawIn 1.6s .6s ease forwards; }
.dp3 { animation: drawIn 1.4s 1.0s ease forwards; }
.dp4 { animation: drawIn 1.2s 1.4s ease forwards; }
.dp5 { animation: drawIn 1.0s 1.8s ease forwards; }
.dp6 { animation: drawIn .8s 2.1s ease forwards; }
.dp7 { animation: drawIn .7s 2.4s ease forwards; }
.dp8 { animation: drawIn .6s 2.7s ease forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

.arc-loop { animation: arcDraw 4s 2.5s ease-in-out infinite; stroke-dasharray:200; stroke-dashoffset:200; }
@keyframes arcDraw { 0%,15%{stroke-dashoffset:200;} 45%,75%{stroke-dashoffset:0;} 95%,100%{stroke-dashoffset:-200;} }

.anno { opacity:0; animation: annoIn .5s ease both; }
.an1{animation-delay:1.8s;} .an2{animation-delay:2.3s;} .an3{animation-delay:2.8s;} .an4{animation-delay:3.2s;}
@keyframes annoIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

.bracket { animation: bracketIn .4s ease both; opacity:0; }
.br1{animation-delay:.1s;} .br2{animation-delay:.2s;} .br3{animation-delay:.3s;} .br4{animation-delay:.4s;}
@keyframes bracketIn { from{opacity:0;transform:scale(.7);} to{opacity:1;transform:scale(1);} }

.center-dot { animation: cDotPulse 2.4s 2s ease-in-out infinite; }
@keyframes cDotPulse { 0%,100%{r:4;opacity:.7;} 50%{r:7;opacity:1;} }
.center-ring { animation: cRingPulse 2.4s 2s ease-in-out infinite; }
@keyframes cRingPulse { 0%,100%{r:14;opacity:.2;} 50%{r:22;opacity:.5;} }

/* CARD 2 — HEXAGONAL TEAM GRID */
.c2 .stage {
  background: radial-gradient(ellipse 75% 65% at 50% 55%, rgba(251,191,36,.055) 0%, rgba(251,100,36,.02) 50%, transparent 70%);
}

.hex-svg { width:100%; height:100%; overflow:visible; }

.hex-cell {
  transition: all .3s;
}
.hex-path {
  transition: all .4s;
  fill: rgba(251,191,36,.04);
  stroke: rgba(251,191,36,.2);
  stroke-width: 1;
}
.hex-path.center {
  fill: rgba(251,191,36,.1);
  stroke: rgba(251,191,36,.5);
  stroke-width: 1.5;
}

.hex-lit .hex-path {
  fill: rgba(251,191,36,.15) !important;
  stroke: rgba(251,191,36,.8) !important;
}

.h-glow {
  animation: hexGlowCycle 5.6s ease-in-out infinite;
}
@keyframes hexGlowCycle {
  0%,90%,100% { opacity:0; }
  45%          { opacity:1; }
}

.hex-conn {
  stroke: rgba(251,191,36,.15);
  stroke-width: .8;
  stroke-dasharray: 4 6;
  animation: connPulse 3s ease-in-out infinite;
}
@keyframes connPulse { 0%,100%{opacity:.2;} 50%{opacity:.6;} }

.sig-dot {
  fill: #fbbf24;
  animation: sigTravel var(--d,4s) var(--dl,0s) linear infinite;
}
@keyframes sigTravel {
  0%   { offset-distance: 0%;   opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { offset-distance: 100%; opacity:0; }
}

.skill-bar-bg { fill: rgba(255,255,255,.04); rx: 2; }
.skill-bar-fill { animation: barFill 1.5s ease both; }
@keyframes barFill { from{width:0;} }

.hex-label { font-family:'DM Mono',monospace; fill: rgba(251,191,36,.8); font-size:7px; letter-spacing:.1em; }
.hex-role  { font-family:'Outfit',sans-serif; fill: rgba(255,255,255,.35); font-size:6px; }
.hex-center-label { font-family:'Syne',sans-serif; fill: #fbbf24; font-size:9px; font-weight:700; }

.center-orbit {
  fill: none; stroke: rgba(251,191,36,.15); stroke-width:1;
  stroke-dasharray: 6 5;
  animation: orbitSpin 12s linear infinite;
  transform-origin: 50% 50%;
}
.center-orbit-2 {
  fill: none; stroke: rgba(251,191,36,.08); stroke-width:.8;
  stroke-dasharray: 3 9;
  animation: orbitSpin 20s linear infinite reverse;
  transform-origin: 50% 50%;
}

/* CARD 3 — NEURAL NETWORK */
.c3 .stage {
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(129,140,248,.06) 0%, rgba(192,132,252,.03) 45%, transparent 70%);
}

.nn-svg { width:100%; height:100%; }

.nn-edge {
  fill: none;
  stroke: rgba(192,132,252,.15);
  stroke-width: .8;
  transition: stroke .4s, stroke-opacity .4s;
}
.nn-edge.active {
  stroke: rgba(192,132,252,.7);
  stroke-width: 1.2;
}

.nn-pulse {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 18 200;
  animation: pulseTrain var(--d,2s) var(--dl,0s) linear infinite;
  opacity: 0;
}
.nn-pulse.active { opacity: 1; }
@keyframes pulseTrain { from{stroke-dashoffset:220;} to{stroke-dashoffset:-220;} }

.nn-node {
  fill: rgba(9,6,22,.95);
  stroke: rgba(192,132,252,.25);
  stroke-width: 1.2;
  transition: all .35s;
}
.nn-node.firing {
  fill: rgba(192,132,252,.22);
  stroke: #c084fc;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(192,132,252,.8));
}
.nn-node-inner {
  fill: rgba(192,132,252,.2);
  animation: innerPulse 2s ease-in-out infinite;
}
.nn-node-inner.firing {
  fill: rgba(192,132,252,.7);
}
@keyframes innerPulse { 0%,100%{r:3;opacity:.3;} 50%{r:5;opacity:.8;} }

.nn-layer-label {
  font-family:'DM Mono',monospace;
  fill: rgba(192,132,252,.3);
  font-size: 7px; letter-spacing:.18em;
  text-transform: uppercase;
}

.nn-out-label {
  font-family:'DM Mono',monospace;
  fill: rgba(192,132,252,.5);
  font-size: 6.5px; letter-spacing:.06em;
  transition: fill .3s;
}
.nn-out-label.active { fill: #c084fc; }

.acc-bar-bg { fill: rgba(255,255,255,.04); }
.acc-bar-fill {
  fill: url(#accGrad);
  animation: accFill 3s .5s ease-in-out infinite alternate;
}
@keyframes accFill { from{width:55%;} to{width:94%;} }
.acc-label { font-family:'DM Mono',monospace; fill:rgba(192,132,252,.6); font-size:7px; }
.acc-value { font-family:'DM Mono',monospace; fill:#c084fc; font-size:7px; font-weight:500; }

.terminal-text {
  font-family:'DM Mono',monospace;
  fill: rgba(129,140,248,.6);
  font-size:7.5px;
}
.cursor-blink {
  fill: #818cf8;
  animation: cursorBlink .8s step-end infinite;
}
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* === REVIEWS SECTION === */
.reviews {
    padding: 100px 0;
    background: var(--dark-bg);
}

.reviews-cta {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
}

.reviews-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   TECH SOLUTION — CONTACT SECTION REDESIGN
═══════════════════════════════════════════════ */

/* ── SECTION SHELL ─────────────────────────── */
.contact {
    padding: 120px 0 140px;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* ── AMBIENT BACKGROUND OBJECTS ────────────── */

/* Large pulsing radial glow — top-right */
.contact::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -120px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 245, 212, 0.07) 0%,
        rgba(58, 134, 255, 0.05) 40%,
        transparent 70%
    );
    animation: ctaGlowPulse 7s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Deep pink accent glow — bottom-left */
.contact::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(247, 0, 255, 0.05) 0%,
        transparent 65%
    );
    animation: ctaGlowPulse 9s 1.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes ctaGlowPulse {
    from { transform: scale(1);   opacity: .6; }
    to   { transform: scale(1.2); opacity: 1;  }
}

/* ── STATIC GRID OVERLAY ────────────────────── */
.contact .container {
    position: relative;
    z-index: 2;
}

/* Dot-grid texture pinned inside the section */
.contact .container::before {
    content: '';
    position: absolute;
    inset: -120px;
    background-image:
        radial-gradient(circle, rgba(0,245,212,.18) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 80%);
    pointer-events: none;
    z-index: -1;
    opacity: .35;
}

/* ── THE MAIN CARD ─────────────────────────────── */
.contact-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(0,212,255,.04) 0%, rgba(138,43,226,.04) 100%),
        rgba(5, 10, 24, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 245, 212, 0.15);
    border-radius: 28px;
    padding: 60px 56px 56px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.035),
        0 40px 120px rgba(0, 0, 0, .6),
        0 0 80px rgba(0,245,212,.04),
        inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .4s, box-shadow .4s;
}

.contact-card:hover {
    border-color: rgba(0,245,212,.28);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 50px 130px rgba(0, 0, 0, .7),
        0 0 120px rgba(0,245,212,.07),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* Top accent line */
.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,245,212,.7) 25%,
        rgba(58,134,255,.8) 55%,
        rgba(247,0,255,.5) 80%,
        transparent 100%
    );
    z-index: 10;
}

/* ── ROTATING CORNER BRACKETS ───────────────── */

/* Top-left bracket */
.contact-card::after {
    content: '';
    position: absolute;
    top: 18px; left: 18px;
    width: 40px; height: 40px;
    border-top: 1.5px solid rgba(0,245,212,.5);
    border-left: 1.5px solid rgba(0,245,212,.5);
    border-radius: 3px 0 0 0;
    pointer-events: none;
    z-index: 10;
}

/* Additional bracket — bottom-right of card */
.contact-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
    position: relative;
}

.contact-content::after {
    content: '';
    position: absolute;
    bottom: -56px; right: -56px;
    width: 40px; height: 40px;
    border-bottom: 1.5px solid rgba(58,134,255,.45);
    border-right: 1.5px solid rgba(58,134,255,.45);
    border-radius: 0 0 3px 0;
    pointer-events: none;
}

/* ── LARGE ORBITING RING (decorative) ────────── */
.contact-card .section-header {
    position: relative;
}

.contact-card .section-header::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -280px;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px dashed rgba(0,245,212,.08);
    animation: ctaOrbit 22s linear infinite;
    pointer-events: none;
}

.contact-card .section-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -230px;
    transform: translateY(-50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(58,134,255,.06);
    animation: ctaOrbit 14s linear infinite reverse;
    pointer-events: none;
}

@keyframes ctaOrbit {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ── FLOATING SIGNAL DOTS / INFO ITEMS ───────── */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    padding: 22px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: background .35s, border-color .35s, transform .35s;
    overflow: hidden;
}

.info-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,245,212,.4), transparent);
    opacity: 0;
    transition: opacity .35s;
}

.info-item:hover {
    background: rgba(0,245,212,.04);
    border-color: rgba(0,245,212,.22);
    transform: translateX(6px);
}

.info-item:hover::before { opacity: 1; }

.info-item::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(0,245,212,.04) 50%,
        transparent 100%
    );
    transition: left .6s ease;
    pointer-events: none;
}

.info-item:hover::after { left: 140%; }

/* ── ICON RING ───────────────────────────────── */
.info-item .icon {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--secondary);
    border-radius: 50%;
    background: rgba(0,212,255,.06);
    border: 1px solid rgba(0,212,255,.2);
    box-shadow: 0 0 18px rgba(0,212,255,.12);
    transition: box-shadow .35s, border-color .35s;
}

.info-item:hover .icon {
    border-color: rgba(0,245,212,.5);
    box-shadow: 0 0 30px rgba(0,245,212,.25);
}

.info-item .icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(0,245,212,.25);
    animation: iconPing 2.8s ease-in-out infinite;
}

.info-item .icon::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed rgba(0,245,212,.1);
    animation: iconPing 2.8s 1.4s ease-in-out infinite;
}

@keyframes iconPing {
    0%, 100% { transform: scale(1);    opacity: .6; }
    50%       { transform: scale(1.18); opacity: 0; }
}

.info-item h4 {
    color: var(--white);
    margin-bottom: 5px;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .55;
    font-family: 'DM Mono', monospace;
}

.info-item p {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    font-weight: 500;
}

/* ── FORM INPUTS ────────────────────────────── */
.contact-form {
    position: relative;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 36px 32px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 16px 22px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    font-family: 'Poppins', sans-serif;
    color: var(--white);
    font-size: .98rem;
    transition: border-color .3s, box-shadow .3s, background .3s;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,.3);
    letter-spacing: .01em;
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(0,245,212,.04);
    border-color: rgba(0,245,212,.45);
    box-shadow:
        0 0 0 3px rgba(0,245,212,.07),
        0 0 24px rgba(0,245,212,.12),
        inset 0 0 20px rgba(0,245,212,.03);
}

.form-group::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--cyan), var(--blue));
    opacity: 0;
    transition: opacity .3s, top .3s, bottom .3s;
    z-index: 2;
}

.form-group:focus-within::before {
    opacity: 1;
    top: 12%;
    bottom: 12%;
}

.form-group textarea {
    height: 130px;
    resize: none;
    line-height: 1.7;
}

.form-row {
    display: flex;
    gap: 14px;
}
.form-group.half { flex: 1; }

/* ── CTA BUTTON ──────────────────────────────── */
.contact-form .btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 16px 38px;
    border-radius: 50px;
    border: none;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Space Mono', monospace;
    color: #000;
    background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 4px 28px rgba(0,245,212,.25);
    align-self: flex-start;
}

.contact-form .btn::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .55s ease;
    pointer-events: none;
}

.contact-form .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0,245,212,.4), 0 0 0 1px rgba(0,245,212,.3);
}

.contact-form .btn:hover::before { left: 140%; }

.contact-form .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(247,0,255,.35), rgba(58,134,255,.25));
    opacity: 0;
    transition: opacity .35s;
    border-radius: inherit;
}

.contact-form .btn:hover::after { opacity: 1; }

/* ── SECTION HEADER (inside card) ──────────────── */
.contact-card .section-header {
    margin-bottom: 44px;
}

.contact-card .section-header h2 {
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    letter-spacing: .28em;
    color: var(--cyan);
    text-shadow: 0 0 16px rgba(0,245,212,.5);
    margin-bottom: 12px;
}

.contact-card .section-header h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -.03em;
    color: var(--white);
    text-shadow:
        0 0 40px rgba(0,212,255,.25),
        0 0 80px rgba(58,134,255,.12);
    margin-bottom: 14px;
}

.contact-card .section-header p {
    color: rgba(255,255,255,.45);
    font-size: .97rem;
    max-width: 520px;
    margin: 0 auto;
}

/* ── DECORATIVE FLOATING NODE CLUSTER ───────── */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    position: relative;
}

.contact-info::before {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(247,0,255,.1);
    border-radius: 50%;
    animation: ctaOrbit 18s linear infinite;
    pointer-events: none;
}

.contact-info::after {
    content: '';
    position: absolute;
    bottom: 101px;
    right: 91px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 10px var(--pink), 0 0 22px rgba(247,0,255,.4);
    animation: satDot 18s linear infinite;
    pointer-events: none;
}

@keyframes satDot {
    0%   { transform: rotate(0deg)   translateX(50px); }
    100% { transform: rotate(360deg) translateX(50px); }
}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
    .contact-card {
        padding: 44px 32px 40px;
    }
    .contact-card .section-header::before,
    .contact-card .section-header::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .contact-card {
        padding: 36px 22px 32px;
    }
    .form-row {
        flex-direction: column;
    }
    .contact-form {
        padding: 26px 20px;
    }
    .contact-info::before,
    .contact-info::after {
        display: none;
    }
}

/* === FOOTER (compact, dark tech) === */
.site-footer {
    background: linear-gradient(180deg, #060c18 0%, #040810 100%);
    color: rgba(255, 255, 255, 0.6);
    padding: 32px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 245, 212, 0.25) 30%, rgba(58, 134, 255, 0.2) 70%, transparent);
    opacity: 0.8;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-logo:hover {
    color: var(--c0);
}
.footer-nav {
    display: flex;
    align-items: center;
    gap: 8px 28px;
    flex-wrap: wrap;
}
.footer-nav a {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-nav a:hover {
    color: var(--c0);
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social a:hover {
    color: var(--c0);
    border-color: rgba(0, 245, 212, 0.3);
    background: rgba(0, 245, 212, 0.06);
}
.footer-bottom {
    padding-top: 16px;
    text-align: center;
}
.footer-bottom p {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 640px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 16px;
    }
    .footer-nav {
        justify-content: center;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* Hero Visual Animations */
@keyframes heroIn {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(calc(-50% - 18px)); }
}

@keyframes spinRing {
    to { transform: rotate(360deg); }
}

@keyframes orbit1 {
    to { transform: rotate(360deg) translateX(-280px); }
}

@keyframes orbit2 {
    to { transform: rotate(360deg) translateX(-200px); }
}

@keyframes heroSweep {
    from { opacity: .6; transform: skewX(-4deg); }
    to { opacity: 1; transform: skewX(4deg); }
}

@keyframes geoPulse {
    0%, 100% { opacity: .6; transform: rotate(45deg) scale(1); }
    50% { opacity: 1; transform: rotate(47deg) scale(1.05); }
}

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

@keyframes badgePulse {
    0%, 100% { opacity: .7; box-shadow: 0 0 6px var(--cyan); }
    50% { opacity: 1; box-shadow: 0 0 16px var(--cyan); }
}

@keyframes particleFloat {
    from { opacity: 0; transform: translateY(10px) scale(.8); }
    to { opacity: .8; transform: translateY(-10px) scale(1); }
}

@keyframes lineGlow {
    from { opacity: .35; }
    to { opacity: 1; }
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translate(-3px, -3px); }
    50% { transform: rotate(45deg) translate(3px, 3px); }
}

/* Why Us Animations */
@keyframes wuShimmer {
    from { opacity: .3; }
    to { opacity: 1; }
}

@keyframes wuCardIn {
    0%   { opacity: 0; transform: translateY(32px) scale(0.97); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tailoredBars {
    from {
        background-size:
            calc(100% - 52px) 26px, calc((100% - 52px) * .73) 5px,
            calc(100% - 52px) 26px, calc((100% - 52px) * .50) 5px,
            calc(100% - 52px) 26px, calc((100% - 52px) * .87) 5px,
            100% 100%;
    }
    to {
        background-size:
            calc(100% - 52px) 26px, calc((100% - 52px) * .45) 5px,
            calc(100% - 52px) 26px, calc((100% - 52px) * .82) 5px,
            calc(100% - 52px) 26px, calc((100% - 52px) * .60) 5px,
            100% 100%;
    }
}

@keyframes tailoredDots {
    from { opacity: .5; }
    to { opacity: 1; }
}

@keyframes teamPulse {
    from { opacity: .7; }
    to { opacity: 1; }
}

@keyframes teamPing {
    0% { box-shadow: 0 0 0 0 rgba(247,0,255,.55); }
    70% { box-shadow: 0 0 0 22px rgba(247,0,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(247,0,255,0); }
}

@keyframes circuitGlow {
    from { opacity: .75; }
    to { opacity: 1; }
}

@keyframes signalTravel {
    0% { top: 28%; left: 8%; opacity: 0; }
    5% { opacity: 1; }
    38% { top: 28%; left: 48%; opacity: 1; }
    39% { top: 28%; left: 48%; }
    68% { top: 78%; left: 48%; opacity: 1; }
    95% { top: 78%; left: 72%; opacity: 1; }
    100% { top: 78%; left: 72%; opacity: 0; }
}

/* === WHY US PRO CARDS === */
.why-us-card.wu-card { border-radius:20px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.055); transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s; opacity:0; animation:appear .8s cubic-bezier(.22,1,.36,1) both; cursor:default; }
.why-us-card.wu-card:nth-child(1){animation-delay:.06s;}
.why-us-card.wu-card:nth-child(2){animation-delay:.16s;}
.why-us-card.wu-card:nth-child(3){animation-delay:.26s;}
.why-us-card.wu-card:hover { transform:translateY(-16px) scale(1.02); }

.why-us-card.wu-card.c1 { background:#060d1e; }
.why-us-card.wu-card.c2 { background:#0d0a06; }
.why-us-card.wu-card.c3 { background:#0a0614; }

.why-us-card.wu-card.c1:hover { border-color:rgba(94,234,212,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(94,234,212,.09),inset 0 0 0 1px rgba(94,234,212,.05); }
.why-us-card.wu-card.c2:hover { border-color:rgba(251,191,36,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(251,191,36,.08),inset 0 0 0 1px rgba(251,191,36,.05); }
.why-us-card.wu-card.c3:hover { border-color:rgba(192,132,252,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(192,132,252,.09),inset 0 0 0 1px rgba(192,132,252,.05); }

.why-us-card.wu-card::before { content:''; position:absolute; top:0;left:0;right:0;height:1px;z-index:30; }
.why-us-card.wu-card.c1::before{background:linear-gradient(90deg,transparent,#5eead4 28%,#60a5fa 72%,transparent);}
.why-us-card.wu-card.c2::before{background:linear-gradient(90deg,transparent,#fbbf24 28%,#fb923c 72%,transparent);}
.why-us-card.wu-card.c3::before{background:linear-gradient(90deg,transparent,#818cf8 28%,#c084fc 72%,transparent);}

.wu-stage { position:relative; height:250px; overflow:hidden; }
.wu-stage::after { content:'';position:absolute;bottom:0;left:0;right:0;height:80px; pointer-events:none;z-index:15; }
.why-us-card.wu-card.c1 .wu-stage::after{background:linear-gradient(to top,#060d1e,transparent);}
.why-us-card.wu-card.c2 .wu-stage::after{background:linear-gradient(to top,#0d0a06,transparent);}
.why-us-card.wu-card.c3 .wu-stage::after{background:linear-gradient(to top,#0a0614,transparent);}

.wu-body { padding:20px 24px 28px; border-top:1px solid rgba(255,255,255,.04); position:relative; }
.wu-body::before { content:''; position:absolute;top:0;left:24px; height:2px;width:0;border-radius:2px; transition:width .5s cubic-bezier(.22,1,.36,1) .08s; }
.why-us-card.wu-card:hover .wu-body::before{width:48px;}
.why-us-card.wu-card.c1 .wu-body::before{background:#5eead4;}
.why-us-card.wu-card.c2 .wu-body::before{background:#fbbf24;}
.why-us-card.wu-card.c3 .wu-body::before{background:#c084fc;}

.wu-tag { font-family:'DM Mono',monospace; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; padding:3px 10px; border-radius:3px; margin-bottom:10px; display:inline-block; }
.why-us-card.wu-card.c1 .wu-tag{color:#5eead4;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.15);}
.why-us-card.wu-card.c2 .wu-tag{color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15);}
.why-us-card.wu-card.c3 .wu-tag{color:#c084fc;background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.15);}

.wu-body h3 { font-family:'Syne',sans-serif;font-weight:700; font-size:1.16rem;letter-spacing:-.025em; color:#f0f2fa;margin-bottom:8px;transition:color .35s; }
.why-us-card.wu-card.c1:hover .wu-body h3{color:#5eead4;}
.why-us-card.wu-card.c2:hover .wu-body h3{color:#fbbf24;}
.why-us-card.wu-card.c3:hover .wu-body h3{color:#c084fc;}
.wu-body p{font-size:.88rem;line-height:1.76;color:#4a5270;font-weight:300;}

/* CARD 1 — BLUEPRINT */
.why-us-card.wu-card.c1 .wu-stage { background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(94,234,212,.055) 0%, transparent 65%), radial-gradient(circle at 1px 1px, rgba(94,234,212,.18) 1px, transparent 0); background-size:auto, 24px 24px; }
.bp-svg { width:100%; height:100%; }
.draw-path { fill:none; stroke-dasharray:600; stroke-dashoffset:600; }
.dp1{animation:drawIn 1.8s .2s ease forwards;}
.dp2{animation:drawIn 1.6s .6s ease forwards;}
.dp3{animation:drawIn 1.4s 1.0s ease forwards;}
.dp4{animation:drawIn 1.2s 1.4s ease forwards;}
.dp5{animation:drawIn 1.0s 1.8s ease forwards;}
.dp6{animation:drawIn .8s 2.1s ease forwards;}
.dp7{animation:drawIn .7s 2.4s ease forwards;}
.dp8{animation:drawIn .6s 2.7s ease forwards;}
@keyframes drawIn { to{stroke-dashoffset:0;} }
.arc-loop{animation:arcDraw 4s 2.5s ease-in-out infinite; stroke-dasharray:200; stroke-dashoffset:200;}
@keyframes arcDraw { 0%,15%{stroke-dashoffset:200;} 45%,75%{stroke-dashoffset:0;} 95%,100%{stroke-dashoffset:-200;} }
.anno{opacity:0;animation:annoIn .5s ease both;}
.an1{animation-delay:1.8s;}.an2{animation-delay:2.3s;}.an3{animation-delay:2.8s;}.an4{animation-delay:3.2s;}
@keyframes annoIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
.bracket{animation:bracketIn .4s ease both; opacity:0;}
.br1{animation-delay:.1s;}.br2{animation-delay:.2s;}.br3{animation-delay:.3s;}.br4{animation-delay:.4s;}
@keyframes bracketIn { from{opacity:0;transform:scale(.7);} to{opacity:1;transform:scale(1);} }
.center-dot{animation:cDotPulse 2.4s 2s ease-in-out infinite;}
@keyframes cDotPulse { 0%,100%{r:4;opacity:.7;} 50%{r:7;opacity:1;} }
.center-ring{animation:cRingPulse 2.4s 2s ease-in-out infinite;}
@keyframes cRingPulse { 0%,100%{r:14;opacity:.2;} 50%{r:22;opacity:.5;} }

/* CARD 2 — HEXAGONAL TEAM GRID */
.why-us-card.wu-card.c2 .wu-stage { background:radial-gradient(ellipse 75% 65% at 50% 55%, rgba(251,191,36,.055) 0%, rgba(251,100,36,.02) 50%, transparent 70%); }
.hex-svg{width:100%;height:100%;overflow:visible;}
.hex-cell{transition:all .3s;}
.hex-path{transition:all .4s;fill:rgba(251,191,36,.04);stroke:rgba(251,191,36,.2);stroke-width:1;}
.hex-path.center{fill:rgba(251,191,36,.1);stroke:rgba(251,191,36,.5);stroke-width:1.5;}
.hex-conn{stroke:rgba(251,191,36,.15);stroke-width:.8;stroke-dasharray:4 6;animation:connPulse 3s ease-in-out infinite;}
@keyframes connPulse { 0%,100%{opacity:.2;} 50%{opacity:.6;} }
.hex-label{font-family:'DM Mono',monospace;fill:rgba(251,191,36,.8);font-size:7px;letter-spacing:.1em;}
.hex-role{font-family:'Outfit',sans-serif;fill:rgba(255,255,255,.35);font-size:6px;}
.center-orbit{fill:none;stroke:rgba(251,191,36,.15);stroke-width:1;stroke-dasharray:6 5;animation:orbitSpin 12s linear infinite;transform-origin:50% 50%;}
@keyframes orbitSpin { to{transform:rotate(360deg);} }

/* CARD 3 — NEURAL NETWORK */
.why-us-card.wu-card.c3 .wu-stage { background:radial-gradient(ellipse 75% 70% at 50% 50%, rgba(129,140,248,.06) 0%, rgba(192,132,252,.03) 45%, transparent 70%); }
.nn-svg{width:100%;height:100%;}
.nn-edge{fill:none;stroke:rgba(192,132,252,.15);stroke-width:.8;transition:stroke .4s, stroke-opacity .4s;}
.nn-edge.active{stroke:rgba(192,132,252,.7);stroke-width:1.2;}
.nn-pulse{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:18 200;animation:pulseTrain var(--d,2s) var(--dl,0s) linear infinite;opacity:0;}
.nn-pulse.active{opacity:1;}
@keyframes pulseTrain { from{stroke-dashoffset:220;} to{stroke-dashoffset:-220;} }
.nn-node{fill:rgba(9,6,22,.95);stroke:rgba(192,132,252,.25);stroke-width:1.2;transition:all .35s;}
.nn-node.firing{fill:rgba(192,132,252,.22);stroke:#c084fc;stroke-width:2;filter:drop-shadow(0 0 8px rgba(192,132,252,.8));}
.nn-node-inner{fill:rgba(192,132,252,.2);animation:innerPulse 2s ease-in-out infinite;}
.nn-node-inner.firing{fill:rgba(192,132,252,.7);}
@keyframes innerPulse { 0%,100%{r:3;opacity:.3;} 50%{r:5;opacity:.8;} }
.nn-layer-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.3);font-size:7px;letter-spacing:.18em;text-transform:uppercase;}
.nn-out-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.5);font-size:6.5px;letter-spacing:.06em;transition:fill .3s;}
.nn-out-label.active{fill:#c084fc;}
.acc-bar-bg{fill:rgba(255,255,255,.04);}
.acc-bar-fill{fill:url(#accGrad);animation:accFill 3s .5s ease-in-out infinite alternate;}
@keyframes accFill { from{width:55%;} to{width:94%;} }
.acc-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.6);font-size:7px;}
.acc-value{font-family:'DM Mono',monospace;fill:#c084fc;font-size:7px;font-weight:500;}
.terminal-text{font-family:'DM Mono',monospace;fill:rgba(129,140,248,.6);font-size:7.5px;}
.cursor-blink{fill:#818cf8;animation:cursorBlink .8s step-end infinite;}
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.nn-node{fill:rgba(9,6,22,.95);stroke:rgba(192,132,252,.25);stroke-width:1.2;transition:all .35s;}
.nn-node.firing{fill:rgba(192,132,252,.22);stroke:#c084fc;stroke-width:2;filter:drop-shadow(0 0 8px rgba(192,132,252,.8));}
.nn-node-inner{fill:rgba(192,132,252,.2);animation:innerPulse 2s ease-in-out infinite;}
.nn-node-inner.firing{fill:rgba(192,132,252,.7);}
@keyframes innerPulse { 0%,100%{r:3;opacity:.3;} 50%{r:5;opacity:.8;} }
.nn-layer-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.3);font-size:7px;letter-spacing:.18em;text-transform:uppercase;}
.nn-out-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.5);font-size:6.5px;letter-spacing:.06em;transition:fill .3s;}
.nn-out-label.active{fill:#c084fc;}
.acc-bar-bg{fill:rgba(255,255,255,.04);}
.acc-bar-fill{fill:url(#accGrad);animation:accFill 3s .5s ease-in-out infinite alternate;}
@keyframes accFill { from{width:55%;} to{width:94%;} }
.acc-label{font-family:'DM Mono',monospace;fill:rgba(192,132,252,.6);font-size:7px;}
.acc-value{font-family:'DM Mono',monospace;fill:#c084fc;font-size:7px;font-weight:500;}
.terminal-text{font-family:'DM Mono',monospace;fill:rgba(129,140,248,.6);font-size:7.5px;}
.cursor-blink{fill:#818cf8;animation:cursorBlink .8s step-end infinite;}
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .hero-orb {
        width: 480px;
        height: 480px;
        right: -150px;
    }
    
    .geo-corner {
        display: none;
    }
    
    .why-us-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
    
    .why-us-grid::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    .services-grid,
    .why-us-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .popup-content {
        padding: 25px;
        width: 95%;
    }
    
    .detail-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero-orb {
        display: none;
    }
    
    .hero-particles {
        display: none;
    }
    
    .scroll-hint {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        width: 95%;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    
    .btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    .why-us-card .card-header {
        height: 160px;
    }
    
    /* Detail panel: extra compact */
    .mat-body {
        padding: 22px 16px 20px;
    }
    .dp-title {
        font-size: 1.05rem;
    }
    .dp-grid {
        gap: 14px;
    }
    .dp-block {
        padding: 16px 14px;
    }
    
    /* Services: card padding */
    .svc-inner {
        padding: 22px 20px 20px;
    }
    
    /* About CTA stack */
    .about .about-cta {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ══════════════════════════════════════════
   WHY US PRO - CARD STYLES FROM why-us-pro.html
══════════════════════════════════════════ */

/* CARD BASE */
.card {
  border-radius: 20px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.055);
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
  opacity: 0; animation: appear .8s cubic-bezier(.22,1,.36,1) both;
  cursor: default;
}
.card:nth-child(1){animation-delay:.06s;}
.card:nth-child(2){animation-delay:.16s;}
.card:nth-child(3){animation-delay:.26s;}
@keyframes appear {
  from{opacity:0;transform:translateY(44px) scale(.96);}
  to  {opacity:1;transform:none;}
}
.card:hover { transform: translateY(-16px) scale(1.02); }

.c1 { background: #060d1e; }
.c2 { background: #0d0a06; }
.c3 { background: #0a0614; }

.c1:hover { border-color:rgba(94,234,212,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(94,234,212,.09),inset 0 0 0 1px rgba(94,234,212,.05); }
.c2:hover { border-color:rgba(251,191,36,.38);  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(251,191,36,.08),inset 0 0 0 1px rgba(251,191,36,.05); }
.c3:hover { border-color:rgba(192,132,252,.38); box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px rgba(192,132,252,.09),inset 0 0 0 1px rgba(192,132,252,.05); }

/* Top accent */
.card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:1px;z-index:30;
}
.c1::before{background:linear-gradient(90deg,transparent,#5eead4 28%,#60a5fa 72%,transparent);}
.c2::before{background:linear-gradient(90deg,transparent,#fbbf24 28%,#fb923c 72%,transparent);}
.c3::before{background:linear-gradient(90deg,transparent,#818cf8 28%,#c084fc 72%,transparent);}

/* Visual stage */
.stage {
  position: relative; height: 250px; overflow: hidden;
}
.stage::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:80px;
  pointer-events:none;z-index:15;
}
.c1 .stage::after{background:linear-gradient(to top,#060d1e,transparent);}
.c2 .stage::after{background:linear-gradient(to top,#0d0a06,transparent);}
.c3 .stage::after{background:linear-gradient(to top,#0a0614,transparent);}

/* Card body */
.body { padding: 20px 24px 28px; border-top: 1px solid rgba(255,255,255,.04); position: relative; }
.body::before {
  content:''; position:absolute;top:0;left:24px;
  height:2px;width:0;border-radius:2px;
  transition:width .5s cubic-bezier(.22,1,.36,1) .08s;
}
.card:hover .body::before{width:48px;}
.c1 .body::before{background:#5eead4;}
.c2 .body::before{background:#fbbf24;}
.c3 .body::before{background:#c084fc;}

.tag {
  font-family:'DM Mono',monospace; font-size:.55rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:3px 10px; border-radius:3px; margin-bottom:10px;
  display:inline-block;
}
.c1 .tag{color:#5eead4;background:rgba(94,234,212,.08);border:1px solid rgba(94,234,212,.15);}
.c2 .tag{color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15);}
.c3 .tag{color:#c084fc;background:rgba(192,132,252,.08);border:1px solid rgba(192,132,252,.15);}

.body h3 {
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:1.16rem;letter-spacing:-.025em;
  color:#f0f2fa;margin-bottom:8px;transition:color .35s;
}
.c1:hover .body h3{color:#5eead4;}
.c2:hover .body h3{color:#fbbf24;}
.c3:hover .body h3{color:#c084fc;}
.body p{font-size:.88rem;line-height:1.76;color:#4a5270;font-weight:300;}


/* ══════════════════════════════════════════
   CARD 1 — BLUEPRINT
══════════════════════════════════════════ */
.c1 .stage {
  background:
    radial-gradient(ellipse 80% 70% at 50% 60%, rgba(94,234,212,.055) 0%, transparent 65%),
    radial-gradient(circle at 1px 1px, rgba(94,234,212,.18) 1px, transparent 0);
  background-size: auto, 24px 24px;
}

.h-glow {
  animation: hexGlowCycle 5.6s ease-in-out infinite;
}
@keyframes hexGlowCycle {
  0%,90%,100% { opacity:0; }
  45%          { opacity:1; }
}

.sig-dot {
  fill: #fbbf24;
  animation: sigTravel var(--d,4s) var(--dl,0s) linear infinite;
}
@keyframes sigTravel {
  0%   { offset-distance: 0%;   opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { offset-distance: 100%; opacity:0; }
}

.skill-bar-bg { fill: rgba(255,255,255,.04); rx: 2; }
.skill-bar-fill { animation: barFill 1.5s ease both; }
@keyframes barFill { from{width:0;} }

.hex-center-label { font-family:'Syne',sans-serif; fill: #fbbf24; font-size:9px; font-weight:700; }

.center-orbit-2 {
  fill: none; stroke: rgba(251,191,36,.08); stroke-width:.8;
  stroke-dasharray: 3 9;
  animation: orbitSpin 20s linear infinite reverse;
  transform-origin: 50% 50%;
}