/**
 * MAGE Design — Main Stylesheet
 * Plugin: MAGE Design v2.0.0
 * Author: MAGE team s.r.o.
 *
 * Table of Contents:
 * 1.  Reset & Variables
 * 2.  Aurora Background
 * 3.  Cursor Effects
 * 4.  Noise Overlay
 * 5.  Top Bar Partner Marquee
 * 6.  Navbar
 * 6.  Hero Section
 * 7.  Buttons
 * 8.  Stats Bar
 * 9.  Section Base
 * 10. Services Grid (bento)
 * 11. Detail Services (accordion)
 * 12. For Whom
 * 13. Tech Marquee
 * 14. Why Us
 * 15. Process Timeline
 * 16. CTA / Contact
 * 17. Footer
 * 18. Scroll Progress Bar
 * 19. Large Marquee Band
 * 20. 3D Tilt Cards
 * 21. Gradient Shimmer
 * 22. Blur Text Reveal
 * 23. Card Spotlight Glow
 * 24. Card Shine Streak
 * 25. Trust Badges
 * 26. Section Color Tinting
 * 27. Lenis Smooth Scroll
 * 28. Preloader
 * 29. Active Nav Indicator
 * 30. Back to Top
 * 31. Horizontal Scroll Showcase
 * 32. SVG Line Drawing
 * 33. Testimonials Vertical Ticker
 * 34. GSAP Helpers
 * 36. Responsive
 * 37. Reduced Motion
 * 38. Dark Theme
 */


/* ==========================================================================
   1. RESET & VARIABLES
   ========================================================================== */

/* ── THEME ISOLATION: Reset anything the WP theme might inject ── */
.mage-design,
.mage-design *,
.mage-design *::before,
.mage-design *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    float: none;
    letter-spacing: normal;
}

.mage-design h1,
.mage-design h2,
.mage-design h3,
.mage-design h4,
.mage-design h5,
.mage-design h6,
.mage-design p,
.mage-design ul,
.mage-design ol,
.mage-design li,
.mage-design blockquote,
.mage-design figure {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
    color: inherit;
    -webkit-text-fill-color: unset;
    background: none;
}

.mage-design img {
    max-width: 100%;
    height: auto;
    border: none;
    display: inline-block;
}

.mage-design a {
    text-decoration: none;
    color: inherit;
    outline: none;
    box-shadow: none;
}

.mage-design section {
    display: block;
    width: 100%;
    max-width: none;
    visibility: visible !important;
    opacity: 1;
}

.mage-design {
    --bg: #ffffff;
    --bg2: #f8f6fc;
    --surface: rgba(255, 255, 255, .75);
    --surface2: #f0ecf8;
    --border: rgba(0, 0, 0, .06);
    --border-hover: rgba(147, 51, 234, .3);
    --text: #1a1025;
    --text-dim: #6b5f80;
    --purple: #9333ea;
    --magenta: #ec4899;
    --pink: #f472b6;
    --violet: #a855f7;
    --cyan: #0891b2;
    --orange: #ea580c;
    --green: #16a34a;
    --gradient: linear-gradient(135deg, #9333ea, #ec4899, #f97316);
    --gradient2: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(147, 51, 234, .08), rgba(236, 72, 153, .05));
    --glow-purple: rgba(147, 51, 234, .2);
    --glow-magenta: rgba(236, 72, 153, .18);
    --glow-cyan: rgba(8, 145, 178, .15);

    font-family: 'Sora', sans-serif !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-size: 16px;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

::selection {
    background: rgba(147, 51, 234, .15);
    color: #1a1025;
}


/* ==========================================================================
   2. AURORA BACKGROUND
   ========================================================================== */

.mage-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mage-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .25;
    will-change: transform;
}

.mage-aurora__blob:nth-child(1) {
    width: 70vw; height: 70vh;
    top: -25%; left: -15%;
    background: rgba(147, 51, 234, .15);
}
.mage-aurora__blob:nth-child(2) {
    width: 55vw; height: 55vh;
    bottom: -15%; right: -10%;
    background: rgba(236, 72, 153, .12);
}
.mage-aurora__blob:nth-child(3) {
    width: 45vw; height: 45vh;
    top: 25%; right: 15%;
    background: rgba(8, 145, 178, .08);
}
.mage-aurora__blob:nth-child(4) {
    width: 40vw; height: 40vh;
    bottom: 15%; left: 10%;
    background: rgba(249, 115, 22, .06);
}


/* ==========================================================================
   3. CURSOR EFFECTS
   ========================================================================== */

.mage-cursor-orb {
    position: fixed;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, .04) 0%, rgba(236, 72, 153, .02) 35%, transparent 65%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    will-change: left, top;
}

.mage-cursor-dot {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gradient);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px var(--glow-magenta), 0 0 40px rgba(147, 51, 234, .15);
    mix-blend-mode: normal;
    will-change: left, top;
}

.mage-cursor-ring {
    position: fixed;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(147, 51, 234, .2);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width .3s, height .3s, border-color .3s;
    will-change: left, top, width, height;
}

.mage-cursor-ring.hover {
    width: 60px; height: 60px;
    border-color: var(--magenta);
}


/* ==========================================================================
   4. NOISE OVERLAY
   ========================================================================== */

.mage-design::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
    opacity: .15;
}


/* ==========================================================================
   5. TOP BAR — PARTNER MARQUEE
   ========================================================================== */

.mage-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
    height: var(--tb-h, 32px);
    display: flex;
    align-items: center;
    background: rgba(248, 246, 252, .85);
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
    user-select: none;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1), opacity .4s;
}

.mage-topbar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.mage-topbar__label {
    flex-shrink: 0;
    padding: 0 1rem 0 1.5rem;
    font-family: 'Space Mono', monospace;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-dim);
    white-space: nowrap;
    position: relative;
}

.mage-topbar__label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, .1);
    margin-left: 1rem;
    vertical-align: middle;
}

.mage-topbar__marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}

.mage-topbar__track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: mageTopbarScroll var(--tb-speed, 30s) linear infinite;
}

.mage-topbar__logo {
    height: var(--tb-logo-h, 16px);
    max-height: var(--tb-logo-h, 16px);
    width: auto;
    max-width: 80px;
    object-fit: contain;
    opacity: var(--tb-opacity, .5);
    filter: var(--tb-filter, grayscale(100%));
    transition: opacity .3s, filter .3s;
    flex-shrink: 0;
    margin-right: var(--tb-gap, 2.5rem);
}

.mage-topbar__logo:hover {
    opacity: var(--tb-opacity-hover, 1);
    filter: var(--tb-filter-hover, grayscale(0%));
}

@keyframes mageTopbarScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Topbar present — push nav down */
.mage-design:has(.mage-topbar) .mage-nav {
    top: var(--tb-h, 32px);
}

.mage-design:has(.mage-topbar) .mage-hero {
    padding-top: calc(9rem + var(--tb-h, 32px));
}


/* ==========================================================================
   6. NAVBAR
   ========================================================================== */

.mage-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.2rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(40px) saturate(1.5);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: all .5s cubic-bezier(.23, 1, .32, 1);
}

.mage-nav.scrolled {
    padding: .7rem 3.5rem;
    background: rgba(255, 255, 255, .95);
    border-bottom-color: rgba(147, 51, 234, .1);
    box-shadow: 0 4px 30px rgba(0,0,0,.06);
}

.mage-nav__logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.mage-nav__logo img {
    height: 54px;
    width: auto;
    filter: drop-shadow(0 0 20px var(--glow-purple));
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
}

.mage-nav.scrolled .mage-nav__logo img {
    height: 40px;
}

.mage-nav__logo:hover img {
    filter: drop-shadow(0 0 30px var(--glow-purple)) drop-shadow(0 0 60px var(--glow-magenta));
    transform: scale(1.05);
}

.mage-nav__status {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: .03em;
    white-space: nowrap;
    border-left: 1px solid rgba(0,0,0,.08);
    padding-left: 1rem;
    transition: all .4s;
}

.mage-nav__status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(34, 197, 94, .6);
}

.mage-nav__status-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .3);
    animation: mageNavPulse 2s ease-in-out infinite;
}

@keyframes mageNavPulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50%      { transform: scale(2.5); opacity: 0; }
}

.mage-nav.scrolled .mage-nav__status {
    opacity: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.mage-nav__links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.mage-nav__links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: all .3s;
    position: relative;
}

.mage-nav__links a:not(.mage-nav__cta)::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: var(--gradient);
    border-radius: 1px;
    transition: width .3s;
}

.mage-nav__links a:not(.mage-nav__cta):hover { color: var(--text); }
.mage-nav__links a:not(.mage-nav__cta):hover::after { width: 100%; }

.mage-nav__cta {
    padding: .6rem 2rem;
    background: var(--gradient);
    border-radius: 100px;
    color: #fff !important;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(236, 72, 153, .25);
}

.mage-nav__cta::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .5s;
}

.mage-nav__cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 35px var(--glow-magenta), 0 0 80px rgba(147, 51, 234, .12);
}

.mage-nav__cta:hover::before { transform: translateX(100%); }

.mage-nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 101;
}

.mage-nav__toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    border-radius: 2px;
    transform-origin: center;
}

/* Hamburger → X animation */
.mage-nav__toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mage-nav__toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mage-nav__toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.mage-hero {
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    padding: 9rem 3rem 6rem;
    overflow: hidden;
    width: 100%;
}

.mage-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(147, 51, 234, .08), transparent),
        radial-gradient(ellipse 50% 50% at 90% 50%, rgba(236, 72, 153, .05), transparent),
        radial-gradient(ellipse 40% 40% at 5% 80%, rgba(8, 145, 178, .04), transparent),
        radial-gradient(circle 600px at 50% 50%, rgba(147, 51, 234, .03), transparent);
}

.mage-hero__mesh {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(147, 51, 234, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147, 51, 234, .04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 65% 55% at 50% 40%, black 10%, transparent 70%);
    will-change: transform;
}

.mage-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    will-change: transform;
}

.mage-hero__orb--1 { width:500px;height:500px;top:-15%;left:-10%;background:rgba(147,51,234,.1); }
.mage-hero__orb--2 { width:400px;height:400px;bottom:5%;right:-8%;background:rgba(236,72,153,.08); }
.mage-hero__orb--3 { width:250px;height:250px;top:30%;left:55%;background:rgba(8,145,178,.06); }
.mage-hero__orb--4 { width:300px;height:300px;top:55%;left:8%;background:rgba(249,115,22,.05); }

.mage-hero__particles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mage-particle {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: .85rem;
    color: rgba(147, 51, 234, .24);
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(147, 51, 234, .14);
    will-change: transform;
}

.mage-hero__geo {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation: mageGeoSpin 20s linear infinite;
}

@keyframes mageGeoSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mage-hero__geo--1 { top:15%;right:12%;width:140px;height:140px;border:2px solid rgba(147,51,234,.1);border-radius:24px;opacity:.5; }
.mage-hero__geo--2 { bottom:18%;left:6%;width:100px;height:100px;border:2px solid rgba(236,72,153,.08);opacity:.4; }
.mage-hero__geo--3 { top:50%;right:22%;width:70px;height:70px;border:2px solid rgba(8,145,178,.08);border-radius:50%;opacity:.4; }

.mage-hero__content {
    position: relative;
    max-width: 1000px;
    width: 100%;
    text-align: center !important;
    z-index: 2;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mage-hero__logo {
    width: 250px;
    height: auto;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 0 50px var(--glow-purple)) drop-shadow(0 0 100px var(--glow-magenta));
    will-change: filter, transform;
    animation: mageLogoFloat 6s ease-in-out infinite;
}

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

/* Badge moved to navbar as tagline */

.mage-design .mage-hero h1 {
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(3rem, 6.5vw, 5.8rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em;
    margin-bottom: 2rem;
    color: var(--text) !important;
    -webkit-text-fill-color: unset;
    background: none;
    text-shadow: 0 0 80px rgba(147, 51, 234, .08);
    text-align: center !important;
    width: 100%;
}

.mage-design .mage-hero h1 .mage-line { display: block; overflow: hidden; }
.mage-design .mage-hero h1 .mage-line-inner { display: block; }

/* ── Hero Typing effect ── */
.mage-typed-h1 .mage-typed-content { display: inline; }
.mage-typed-h1 .mage-typed-content br { display: block; }

@keyframes mage-blink-cursor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.mage-typed-cursor {
    display: inline-block;
    font-weight: 200;
    margin-left: 2px;
    background: var(--gradient2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mage-blink-cursor .75s step-end infinite;
}

.mage-design .mage-hero h1 em {
    font-style: italic;
    background: var(--gradient2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% auto;
    color: var(--magenta);
}

.mage-hero__sub {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--text-dim);
    max-width: 680px;
    margin: 0 auto 3.5rem;
    font-weight: 300;
    text-align: center !important;
}

.mage-hero__buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mage-hero__scroll {
    position: absolute;
    bottom: 2.5rem; left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.mage-hero__scroll-mouse {
    width: 22px; height: 36px;
    border: 2px solid rgba(0,0,0,.12);
    border-radius: 11px;
    position: relative;
}

.mage-hero__scroll-mouse::after {
    content: '';
    width: 3px; height: 8px;
    border-radius: 2px;
    background: var(--gradient);
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    animation: mageScrollDown 2s ease-in-out infinite;
}

@keyframes mageScrollDown {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

.mage-hero__scroll span {
    font-size: .58rem;
    color: var(--text-dim);
    letter-spacing: .2em;
    text-transform: uppercase;
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.mage-btn {
    padding: 1.1rem 2.5rem;
    border-radius: 100px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    letter-spacing: .02em;
    border: none;
    position: relative;
    display: inline-block;
}

.mage-btn--glow {
    background: var(--gradient);
    background-size: 200% auto;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    overflow: hidden;
    box-shadow: 0 4px 25px var(--glow-magenta), 0 0 60px rgba(147, 51, 234, .08);
}

.mage-btn--glow::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .6s;
}

.mage-btn--glow:hover::before { transform: translateX(100%); }
.mage-btn--glow:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 50px var(--glow-magenta), 0 0 100px rgba(147, 51, 234, .12);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mage-btn--ghost {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0,0,0,.08);
    color: var(--text);
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

.mage-btn--ghost:hover {
    background: rgba(255,255,255,.9);
    border-color: var(--magenta);
    transform: translateY(-4px) scale(1.02);
    color: var(--purple);
    box-shadow: 0 15px 35px rgba(147, 51, 234, .1), 0 0 60px rgba(236, 72, 153, .05);
}


/* ==========================================================================
   8. STATS BAR
   ========================================================================== */

.mage-stats {
    padding: 0 3rem;
    position: relative;
    margin-top: -3.5rem;
    z-index: 2;
}

.mage-stats__inner {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(30px) saturate(1.3);
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.06), 0 0 40px rgba(147, 51, 234, .03);
}

.mage-stats__inner::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(147, 51, 234, .18), transparent 40%, transparent 60%, rgba(236, 72, 153, .18));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.mage-stat {
    padding: 2rem 1.5rem;
    text-align: center;
    border-right: 1px solid rgba(0,0,0,.05);
    transition: all .4s;
    position: relative;
    overflow: hidden;
}

.mage-stat:last-child { border-right: none; }

.mage-stat:hover {
    background: rgba(147, 51, 234, .02);
}

.mage-stat:hover .mage-stat__num {
    transform: scale(1.05);
}

.mage-stat:last-child { border-right: none; }

.mage-stat::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(147, 51, 234, .06), transparent 70%);
    opacity: 0;
    transition: opacity .4s;
}

.mage-stat:hover::before { opacity: 1; }

.mage-design .mage-stat__num {
    font-family: 'Space Mono', monospace !important;
    font-size: 2.2rem;
    font-weight: 700;
    background: var(--gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1);
}

.mage-stat__label {
    font-size: .78rem;
    color: var(--text-dim);
    margin-top: .4rem;
    font-weight: 500;
    letter-spacing: .03em;
}


/* ==========================================================================
   9. SECTION BASE
   ========================================================================== */

.mage-section {
    padding: 4rem 3rem;
    position: relative;
}

.mage-section__label {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: 'Space Mono', monospace;
    font-size: .62rem;
    color: var(--magenta);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 1.2rem;
    font-weight: 700;
    padding: .35rem 1rem .35rem .7rem;
    background: rgba(147, 51, 234, .04);
    border: 1px solid rgba(147, 51, 234, .08);
    border-radius: 100px;
    width: fit-content;
}

.mage-section__label::before {
    content: '';
    width: 28px; height: 2px;
    background: var(--gradient);
    border-radius: 1px;
}

.mage-design .mage-section__title {
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: -.01em;
    line-height: 1.12;
    margin-bottom: 1rem;
    background: linear-gradient(to right, var(--text), var(--text-dim)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.mage-section__desc {
    font-size: .98rem;
    color: var(--text-dim);
    max-width: 560px;
    line-height: 1.8;
}

.mage-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(147, 51, 234, .08), rgba(236, 72, 153, .06), transparent);
    max-width: 800px;
    margin: 0 auto;
}


/* ==========================================================================
   10. SERVICES GRID (bento layout)
   ========================================================================== */

.mage-services__header {
    text-align: center;
    margin-bottom: 4rem;
}

.mage-services__header .mage-section__desc { margin: 0 auto; }

.mage-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1140px;
    margin: 0 auto;
}

/* Glass card */
.mage-service-card {
    padding: 2.5rem;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 20px;
    transition: all .5s cubic-bezier(.23, 1, .32, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    backdrop-filter: blur(20px);
}

.mage-service-card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: background .5s;
    pointer-events: none;
}

.mage-service-card::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(147,51,234,.06), transparent, rgba(236,72,153,.06), transparent);
    opacity: 0;
    transition: opacity .5s;
    animation: mageBorderRotate 10s linear infinite;
    pointer-events: none;
    will-change: transform;
}

@keyframes mageBorderRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mage-service-card:hover::before {
    background: linear-gradient(135deg, rgba(147,51,234,.4), rgba(236,72,153,.25), rgba(34,211,238,.12));
}

.mage-service-card:hover::after { opacity: 1; }

.mage-service-card:hover {
    border-color: rgba(147, 51, 234, .2);
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,.08), 0 0 50px rgba(147, 51, 234, .06);
    background: rgba(255, 255, 255, .95);
}

.mage-service-card--wide { grid-column: span 2; }

.mage-service-card__icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(147,51,234,.16), rgba(236,72,153,.08));
    border: 1px solid rgba(147,51,234,.15);
    position: relative;
    z-index: 1;
    transition: all .5s cubic-bezier(.23, 1, .32, 1);
    box-shadow: 0 4px 15px rgba(147,51,234,.12);
    color: var(--magenta);
}

.mage-service-card:hover .mage-service-card__icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 12px 35px rgba(147,51,234,.25);
    background: linear-gradient(135deg, var(--violet), var(--magenta));
    color: #fff;
    border-color: transparent;
}

.mage-design .mage-service-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: .8rem;
    position: relative;
    z-index: 1;
    transition: color .4s;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

.mage-design .mage-service-card p {
    font-size: .84rem;
    color: var(--text-dim) !important;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

.mage-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.mage-service-tag {
    padding: .2rem .6rem;
    font-size: .6rem;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    background: rgba(147,51,234,.05);
    border: 1px solid rgba(147,51,234,.08);
    border-radius: 100px;
    color: var(--violet);
    transition: all .3s;
}

.mage-service-tag:hover {
    background: rgba(147,51,234,.1);
    border-color: rgba(147,51,234,.2);
    transform: translateY(-1px);
}


/* ==========================================================================
   11. DETAIL SERVICES ACCORDION
   ========================================================================== */

.mage-details__inner {
    max-width: 900px;
    margin: 0 auto;
}

.mage-detail-item {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all .3s cubic-bezier(.23, 1, .32, 1);
}

.mage-detail-item:hover {
    border-color: rgba(147, 51, 234, .15);
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.mage-detail-item.active {
    border-color: rgba(147, 51, 234, .3);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 15px 40px rgba(147, 51, 234, .06);
}

.mage-detail-item__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 2rem;
    cursor: pointer;
    transition: all .3s;
    -webkit-user-select: none;
    user-select: none;
}

.mage-detail-item__header:hover {
    color: var(--magenta);
}

.mage-detail-item__num {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    background: var(--gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    flex-shrink: 0;
    width: 2.5rem;
}

.mage-design .mage-detail-item__title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    flex: 1;
    transition: color .3s;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

.mage-detail-item__arrow {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,.03);
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    color: var(--text-dim);
    font-size: .75rem;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.06);
}

.mage-detail-item:hover .mage-detail-item__arrow {
    background: rgba(147, 51, 234, .1);
    border-color: rgba(147, 51, 234, .2);
    color: var(--text);
}

.mage-detail-item.active .mage-detail-item__arrow {
    transform: rotate(180deg);
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 15px rgba(236,72,153,.3);
}

.mage-detail-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.23, 1, .32, 1);
}

.mage-detail-item.active .mage-detail-item__body {
    max-height: 800px;
}

.mage-detail-item__content {
    padding: 0 2rem 2rem 5.7rem;
}

.mage-detail-item__content p {
    font-size: .95rem;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.mage-detail-item__list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.mage-detail-item__list span {
    padding: .4rem 1rem;
    font-size: .7rem;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    background: rgba(147,51,234,.06);
    border: 1px solid rgba(147,51,234,.15);
    border-radius: 100px;
    color: var(--violet);
    transition: all .3s;
}

.mage-detail-item__list span:hover {
    background: rgba(147,51,234,.15);
    border-color: rgba(147,51,234,.3);
    color: var(--purple);
    transform: translateY(-2px);
}


/* ==========================================================================
   12. FOR WHOM
   ========================================================================== */

.mage-forwhom__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.mage-forwhom__header {
    text-align: center;
    margin-bottom: 3rem;
}

.mage-forwhom__header .mage-section__desc { margin: 0 auto; }

.mage-forwhom__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mage-forwhom-card {
    padding: 1.5rem 1.8rem;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 16px;
    display: flex;
    gap: 1rem;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
}

.mage-forwhom-card:hover {
    border-color: rgba(147, 51, 234, .15);
    transform: translateX(6px);
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}

.mage-forwhom-card__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--gradient-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(147,51,234,.06);
}

.mage-design .mage-forwhom-card h4 {
    font-size: .88rem !important;
    font-weight: 700 !important;
    margin-bottom: .2rem;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

.mage-design .mage-forwhom-card p {
    font-size: .8rem;
    color: var(--text-dim) !important;
    line-height: 1.55;
}


/* ==========================================================================
   13. TECH MARQUEE
   ========================================================================== */

.mage-tech__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.mage-tech__marquee {
    margin-top: 3rem;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.mage-tech__row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.mage-tech__track {
    display: flex;
    gap: 1rem;
    width: fit-content;
    will-change: transform;
}

.mage-tech-pill {
    padding: .6rem 1.5rem;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 100px;
    font-family: 'Space Mono', monospace;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-dim);
    transition: all .3s;
    backdrop-filter: blur(10px);
}

.mage-tech-pill:hover {
    border-color: rgba(147,51,234,.2);
    color: var(--text);
    transform: scale(1.05);
    background: rgba(147, 51, 234, .06);
}


/* ==========================================================================
   14. WHY US
   ========================================================================== */

.mage-why__inner { max-width: 1100px; margin: 0 auto; }
.mage-why__header { text-align: center; margin-bottom: 3.5rem; }
.mage-why__header .mage-section__desc { margin: 0 auto; }

.mage-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.mage-why-card {
    padding: 2rem;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 20px;
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    transition: all .5s cubic-bezier(.23, 1, .32, 1);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.mage-why-card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: background .5s;
    pointer-events: none;
}

.mage-why-card:hover::before {
    background: linear-gradient(135deg, rgba(147,51,234,.18), rgba(236,72,153,.12));
}

.mage-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(0,0,0,.06);
}

.mage-why-card__num {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .4s;
}

.mage-why-card:hover .mage-why-card__num { transform: scale(1.1); }

.mage-design .mage-why-card h3 { font-size: 1rem !important; font-weight: 700 !important; margin-bottom: .4rem; color: var(--text) !important; -webkit-text-fill-color: unset !important; }
.mage-design .mage-why-card p { font-size: .84rem; color: var(--text-dim) !important; line-height: 1.7; }


/* ==========================================================================
   15. PROCESS TIMELINE
   ========================================================================== */

.mage-process__inner { max-width: 900px; margin: 0 auto; }

.mage-timeline {
    margin-top: 3.5rem;
    position: relative;
    padding-left: 4rem;
}

.mage-timeline::before {
    content: '';
    position: absolute;
    left: 16px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--purple), var(--magenta), var(--pink), var(--cyan));
    opacity: .15;
    border-radius: 1px;
}

.mage-timeline__item {
    position: relative;
    padding-bottom: 3rem;
}

.mage-timeline__item:last-child { padding-bottom: 0; }

.mage-timeline__dot {
    position: absolute;
    left: -4rem; top: .1rem;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, .9);
    border: 2px solid var(--magenta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: .6rem;
    font-weight: 700;
    color: var(--magenta);
    box-shadow: 0 0 18px rgba(236, 72, 153, .12), 0 0 45px rgba(147, 51, 234, .06);
    transition: all .4s;
    backdrop-filter: blur(10px);
}

.mage-timeline__item:hover .mage-timeline__dot {
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(236, 72, 153, .25), 0 0 60px rgba(147, 51, 234, .1);
    border-color: var(--violet);
}

.mage-design .mage-timeline__item h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: .4rem;
    transition: all .3s;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

.mage-timeline__item:hover h3 {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mage-timeline__item p {
    font-size: .88rem;
    color: var(--text-dim);
    line-height: 1.75;
    max-width: 600px;
}


/* ==========================================================================
   16. CTA / CONTACT
   ========================================================================== */

.mage-cta {
    text-align: center;
    padding: 5rem 3rem;
    overflow: hidden;
}

.mage-cta__glow {
    position: absolute;
    width: 900px; height: 450px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(147,51,234,.1), rgba(236,72,153,.05) 45%, transparent 70%);
    pointer-events: none;
}

.mage-cta__inner {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.mage-design .mage-cta h2 {
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 400 !important;
    margin-bottom: 1.2rem;
    line-height: 1.12;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

.mage-design .mage-cta h2 em {
    font-style: italic;
    background: var(--gradient2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% auto;
    color: var(--magenta);
}

.mage-cta p {
    font-size: .98rem;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.mage-cta__links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.2rem;
}

.mage-cta__links a {
    color: var(--text-dim);
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-size: .76rem;
    font-weight: 700;
    transition: all .3s;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    border-radius: 12px;
    border: 1px solid transparent;
}

.mage-cta__links a:hover {
    color: var(--magenta);
    border-color: rgba(236, 72, 153, .12);
    background: rgba(236, 72, 153, .03);
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.mage-footer {
    padding: 2.2rem 3rem;
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .72rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(20px);
}

.mage-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color .3s;
}

.mage-footer a:hover { color: var(--magenta); }


/* ==========================================================================
   18. SCROLL PROGRESS BAR
   ========================================================================== */

.mage-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: var(--gradient);
    background-size: 300% auto;
    z-index: 9999;
    pointer-events: none;
    transition: none;
    box-shadow: 0 0 10px var(--glow-magenta), 0 0 30px rgba(147, 51, 234, .12);
}


/* ==========================================================================
   19. LARGE MARQUEE BAND
   ========================================================================== */

.mage-marquee-band {
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
    opacity: .06;
    user-select: none;
    pointer-events: none;
}

.mage-marquee-band__track {
    display: flex;
    gap: 0;
    width: fit-content;
    will-change: transform;
}

.mage-marquee-band__text {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    white-space: nowrap;
    padding: 0 1rem;
    color: var(--text);
    letter-spacing: .02em;
}

.mage-marquee-band__text span {
    display: inline-block;
    margin: 0 2rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .7;
}


/* ==========================================================================
   20. 3D TILT CARDS
   ========================================================================== */

.mage-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.mage-tilt > * {
    transform: translateZ(0);
}

.mage-service-card,
.mage-why-card {
    transform-style: preserve-3d;
}


/* ==========================================================================
   21. GRADIENT SHIMMER ON HEADINGS
   ========================================================================== */

.mage-design .mage-hero h1 em,
.mage-design .mage-cta h2 em {
    background-size: 300% auto !important;
    animation: mageShimmer 4s linear infinite;
}

@keyframes mageShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}


/* ==========================================================================
   22. BLUR TEXT REVEAL (GSAP helper)
   ========================================================================== */

.mage-design.mage-gsap-active .mage-blur-reveal {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(25px);
}


/* ==========================================================================
   23. CARD SPOTLIGHT GLOW
   ========================================================================== */

.mage-service-card,
.mage-why-card,
.mage-forwhom-card {
    position: relative;
    overflow: hidden;
}

.mage-spotlight {
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, .12) 0%, rgba(236, 72, 153, .06) 40%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s;
    z-index: 0;
    will-change: left, top;
}

.mage-service-card:hover .mage-spotlight,
.mage-why-card:hover .mage-spotlight,
.mage-forwhom-card:hover .mage-spotlight {
    opacity: 1;
}


/* ==========================================================================
   24. CARD SHINE STREAK
   ========================================================================== */

.mage-service-card .mage-shine,
.mage-why-card .mage-shine {
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, .35) 45%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, .35) 55%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 2;
    transform: skewX(-15deg);
}


/* ==========================================================================
   25. TRUST BADGES
   ========================================================================== */

.mage-hero__badges {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3rem;
}

.mage-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: .02em;
    backdrop-filter: blur(15px);
    transition: all .4s cubic-bezier(.23, 1, .32, 1);
    white-space: nowrap;
}

.mage-trust-badge:hover {
    border-color: rgba(147, 51, 234, .2);
    background: rgba(255, 255, 255, .9);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(147, 51, 234, .08);
    color: var(--text);
}

.mage-trust-badge__icon {
    font-size: .85rem;
    line-height: 1;
}


/* ==========================================================================
   26. SECTION COLOR TINTING
   ========================================================================== */

.mage-section-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s;
    z-index: -1;
    border-radius: 0;
}

.mage-section:nth-child(odd) .mage-section-tint {
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(147, 51, 234, .03), transparent);
}

.mage-section:nth-child(even) .mage-section-tint {
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(236, 72, 153, .025), transparent);
}

.mage-section.mage-tinted .mage-section-tint {
    opacity: 1;
}


/* ==========================================================================
   27. LENIS SMOOTH SCROLL
   ========================================================================== */

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}


/* ==========================================================================
   28. PRELOADER
   ========================================================================== */

.mage-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility .6s;
}

.mage-preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mage-preloader__logo {
    width: 120px;
    height: auto;
    animation: magePreloaderPulse 1.8s ease-in-out infinite;
}

.mage-preloader__bar-wrap {
    width: 200px;
    height: 3px;
    background: rgba(0, 0, 0, .06);
    border-radius: 10px;
    overflow: hidden;
}

.mage-preloader__bar {
    height: 100%;
    width: 0%;
    background: var(--gradient);
    border-radius: 10px;
    transition: width .3s ease;
}

.mage-preloader__text {
    font-family: 'Space Mono', monospace;
    font-size: .7rem;
    color: var(--text-dim);
    letter-spacing: .15em;
    text-transform: uppercase;
}

@keyframes magePreloaderPulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.06); opacity: 1; }
}


/* ==========================================================================
   29. ACTIVE NAV INDICATOR
   ========================================================================== */

.mage-nav__links a:not(.mage-nav__cta).active::after {
    width: 100%;
}

.mage-nav__links a:not(.mage-nav__cta).active {
    color: var(--purple) !important;
    -webkit-text-fill-color: var(--purple) !important;
}


/* ==========================================================================
   30. BACK TO TOP
   ========================================================================== */

.mage-btt {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .4s, visibility .4s, transform .4s cubic-bezier(.23, 1, .32, 1), background .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mage-btt.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mage-btt:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 8px 30px rgba(147, 51, 234, .15), 0 0 0 1px rgba(147, 51, 234, .1);
    transform: translateY(-3px);
}

.mage-btt__svg {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.mage-btt__circle {
    fill: none;
    stroke: url(#mageBttGrad);
    stroke-width: 2.5;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

.mage-btt__arrow {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   31. HORIZONTAL SCROLL SHOWCASE
   ========================================================================== */

.mage-hscroll {
    position: relative;
    overflow: hidden;
}

.mage-hscroll__track {
    display: flex;
    gap: 2rem;
    padding: 3rem 0;
    width: max-content;
}

.mage-hscroll__card {
    flex-shrink: 0;
    width: 380px;
    min-height: 320px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    padding: 2.5rem;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1), box-shadow .4s;
}

.mage-hscroll__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(147, 51, 234, .08);
}

.mage-hscroll__card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(147, 51, 234, .08), rgba(236, 72, 153, .06));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.mage-hscroll__card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.mage-hscroll__card p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0;
}

.mage-hscroll__card-num {
    font-family: 'Space Mono', monospace;
    font-size: .7rem;
    color: var(--purple);
    letter-spacing: .12em;
    opacity: .6;
}

.mage-hscroll__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    font-size: .75rem;
    color: var(--text-dim);
    opacity: .5;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mage-hscroll__hint svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    animation: mageHscrollHint 2s ease-in-out infinite;
}

@keyframes mageHscrollHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}


/* ==========================================================================
   32. SVG LINE DRAWING
   ========================================================================== */

.mage-svg-line {
    display: block;
    width: 100%;
    height: 120px;
    overflow: visible;
    pointer-events: none;
}

.mage-svg-line path {
    fill: none;
    stroke: url(#mageSvgLineGrad);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}


/* ==========================================================================
   33. TESTIMONIALS — 3-Column Vertical Ticker
   ========================================================================== */

.mage-testimonials {
    padding: 0;
    overflow: hidden;
}

.mage-testimonials__header {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem 3rem;
}

/* ── Ticker container ── */
.mage-testimonials__ticker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 620px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 92%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 92%,
        rgba(0,0,0,0) 100%
    );
}

/* ── Column ── */
.mage-testimonials__col {
    overflow: hidden;
    position: relative;
}

.mage-testimonials__col-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: mageTickerUp 30s linear infinite;
}

.mage-testimonials__col[data-direction="down"] .mage-testimonials__col-track {
    animation-name: mageTickerDown;
}

/* Pause on hover */
.mage-testimonials__ticker:hover .mage-testimonials__col-track {
    animation-play-state: paused;
}

@keyframes mageTickerUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes mageTickerDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ── Card ── */
.mage-testimonial {
    position: relative;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.3rem;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color .4s, box-shadow .4s;
    flex-shrink: 0;
}

.mage-testimonial:hover {
    border-color: rgba(147, 51, 234, .2);
    box-shadow: 0 8px 30px rgba(147, 51, 234, .08);
}

/* ── Quote text ── */
.mage-testimonial__quote {
    font-family: 'Sora', sans-serif;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--text-dim);
    font-weight: 400;
    margin: 0;
    flex: 1;
    font-style: italic;
}

/* ── Stars ── */
.mage-testimonial__stars {
    display: flex;
    gap: .15rem;
    font-size: .75rem;
    color: #f59e0b;
    letter-spacing: 1px;
}

/* ── Footer (avatar + name) ── */
.mage-testimonial__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    margin-top: auto;
}

/* ── Avatar ── */
.mage-testimonial__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .02em;
    flex-shrink: 0;
    overflow: hidden;
}

.mage-testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Author ── */
.mage-testimonial__author {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.mage-testimonial__name {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    color: var(--text);
}

.mage-testimonial__role {
    font-size: .7rem;
    color: var(--text-dim);
    opacity: .65;
}

/* ── Light theme overrides ── */
.mage-design:not(.mage-dark) .mage-testimonial {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(0, 0, 0, .06);
}

.mage-design:not(.mage-dark) .mage-testimonial:hover {
    border-color: rgba(147, 51, 234, .15);
    box-shadow: 0 12px 35px rgba(147, 51, 234, .06);
}

.mage-design:not(.mage-dark) .mage-testimonial__footer {
    border-top-color: rgba(0, 0, 0, .06);
}


/* ==========================================================================
   34. GSAP HELPERS
   ========================================================================== */

/* These are only activated when GSAP adds .mage-gsap-active to root.
   Without GSAP, everything stays visible. */
.mage-design.mage-gsap-active .mage-reveal {
    opacity: 0;
    transform: translateY(50px);
}

.mage-design.mage-gsap-active .mage-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
}

.mage-design.mage-gsap-active .mage-reveal-right {
    opacity: 0;
    transform: translateX(60px);
}

.mage-design.mage-gsap-active .mage-reveal-scale {
    opacity: 0;
    transform: scale(.85);
}

.mage-split-char {
    display: inline-block;
    opacity: 0;
}

.mage-magnetic {
    will-change: transform;
}

.mage-parallax {
    will-change: transform;
}


/* ==========================================================================
   36. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .mage-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mage-service-card--wide {
        grid-column: span 1;
    }
    .mage-nav { padding: 1rem 2rem; }
    .mage-nav.scrolled { padding: .6rem 2rem; }
    .mage-hero { padding: 8rem 2rem 5rem; }
    .mage-design:has(.mage-topbar) .mage-hero { padding-top: calc(8rem + 32px); }
    .mage-hero__logo { width: 200px; }
}

@media (max-width: 768px) {
    /* ── Topbar Mobile ── */
    .mage-topbar { height: var(--tb-h, 28px); }
    .mage-topbar__label { font-size: .5rem; padding: 0 .6rem 0 1rem; }
    .mage-topbar__label::after { margin-left: .6rem; }
    .mage-topbar__logo { height: var(--tb-logo-h, 13px); }
    .mage-design:has(.mage-topbar) .mage-nav { top: var(--tb-h, 28px); }
    .mage-design:has(.mage-topbar) .mage-hero { padding-top: calc(6.5rem + var(--tb-h, 28px)); }

    /* ── Navbar Mobile ── */
    .mage-nav { padding: .8rem 1.2rem; }
    .mage-nav.scrolled { padding: .6rem 1.2rem; }

    .mage-nav__logo img { height: 38px; }
    .mage-nav.scrolled .mage-nav__logo img { height: 32px; }

    .mage-nav__status {
        display: none;
    }

    .mage-nav__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: .5rem;
    }

    .mage-nav__toggle span {
        width: 24px;
        height: 2px;
        background: #1a1025 !important;
        margin: 4px 0;
    }

    .mage-nav__links {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(40px) saturate(1.4);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        transform: translateX(100%);
        transition: transform .5s cubic-bezier(.4, 0, .2, 1);
        z-index: 99;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5rem 2rem;
    }

    .mage-nav__links.open {
        transform: translateX(0);
    }

    .mage-nav__links a {
        font-size: 1.3rem;
        padding: 1rem 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,.04);
        letter-spacing: .08em;
    }

    .mage-nav__links a:last-child {
        border-bottom: none;
    }

    .mage-nav__links .mage-nav__cta {
        margin-top: 1.5rem;
        padding: 1rem 3rem;
        font-size: 1rem;
        width: auto;
        border-bottom: none;
    }

    /* ── Hero Mobile ── */
    .mage-hero {
        min-height: auto;
        min-height: 100dvh;
        padding: 6.5rem 1.2rem 4rem;
    }

    .mage-hero__logo { width: 160px; margin-bottom: .5rem; }

    .mage-design .mage-hero h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.2 !important;
    }

    .mage-hero__sub {
        font-size: .95rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
    }

    .mage-hero__buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        align-items: stretch;
    }

    .mage-hero__buttons .mage-btn {
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
    }

    .mage-hero__scroll { display: none; }
    .mage-hero__geo { display: none; }

    .mage-hero__badges { gap: .5rem; margin-top: 2rem; }
    .mage-trust-badge { font-size: .6rem; padding: .35rem .8rem; }

    /* ── Sections Mobile ── */
    .mage-section { padding: 3rem 1.2rem; }

    .mage-design .mage-section__title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .mage-section__desc {
        font-size: .9rem;
    }

    /* ── Stats Mobile ── */
    .mage-stats__inner { grid-template-columns: repeat(2, 1fr); }
    .mage-stat:nth-child(1),
    .mage-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
    .mage-stat { padding: 1.4rem 1rem; }
    .mage-design .mage-stat__num { font-size: 1.6rem; }

    /* ── Cards Mobile ── */
    .mage-services__grid { grid-template-columns: 1fr; }
    .mage-service-card--wide { grid-column: span 1; }
    .mage-service-card { padding: 1.8rem; }

    .mage-forwhom__grid { grid-template-columns: 1fr; }
    .mage-why__grid { grid-template-columns: 1fr; }

    /* ── Accordion Mobile ── */
    .mage-detail-item__header { padding: 1.2rem 1.2rem; gap: .8rem; }
    .mage-detail-item__content { padding: 0 1.2rem 1.5rem 3.5rem; }
    .mage-detail-item__num { width: 2rem; font-size: .85rem; }

    /* ── Timeline Mobile ── */
    .mage-timeline { padding-left: 3rem; }
    .mage-timeline__dot {
        left: -3rem;
        width: 30px; height: 30px;
        font-size: .5rem;
    }

    /* ── CTA, Footer Mobile ── */
    .mage-cta { padding: 3.5rem 1.5rem; }
    .mage-cta__links { flex-direction: column; align-items: center; }
    .mage-footer { flex-direction: column; gap: .8rem; text-align: center; padding: 1.8rem 1.2rem; }

    /* ── Kill heavy effects on mobile ── */
    .mage-cursor-dot,
    .mage-cursor-ring,
    .mage-cursor-orb { display: none !important; }

    .mage-aurora__blob {
        filter: blur(100px);
        opacity: .15;
    }

    .mage-hero__orb { display: none; }
    .mage-hero__mesh { display: none; }
    .mage-particle { display: none; }

    .mage-design::after {
        display: none;
    }

    /* ── Disable tilt on touch ── */
    .mage-service-card,
    .mage-why-card { transform: none !important; }

    /* ── Hide desktop-only effects ── */
    .mage-spotlight,
    .mage-shine { display: none !important; }

    /* ── Marquee band smaller ── */
    .mage-marquee-band__text { font-size: clamp(2rem, 8vw, 3rem); }

    /* ── Shimmer is fine on mobile, it's CSS only ── */

    /* ── Back to Top smaller ── */
    .mage-btt { width: 40px; height: 40px; bottom: 1.2rem; right: 1.2rem; }
    .mage-btt__svg { width: 40px; height: 40px; }
    .mage-btt__arrow { width: 14px; height: 14px; }

    /* ── Active nav indicator off on mobile ── */
    .mage-nav__links a::after { display: none; }

    /* ── Horizontal scroll cards ── */
    .mage-hscroll__card { width: 280px; min-height: 240px; padding: 1.5rem; }
    .mage-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
    .mage-hscroll__card { scroll-snap-align: start; }
    .mage-hscroll__hint { display: none; }

    /* ── SVG Lines hide on mobile ── */
    .mage-svg-line { display: none; }

    /* ── Scroll progress hide on mobile ── */
    .mage-progress { display: none; }

    /* ── Kill will-change on mobile for perf ── */
    .mage-magnetic { will-change: auto; }
    .mage-parallax { will-change: auto; }
    * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

    /* ── Testimonials ── */
    .mage-testimonials__ticker {
        grid-template-columns: 1fr;
        height: 480px;
        gap: .8rem;
    }
    .mage-testimonials__col:nth-child(2),
    .mage-testimonials__col:nth-child(3) { display: none; }
    .mage-testimonial { padding: 1.2rem; }
    .mage-testimonial__quote { font-size: .85rem; }
    .mage-testimonials__header { padding: 0 1.2rem 2rem; }
}

@media (max-width: 480px) {
    .mage-stats__inner { grid-template-columns: 1fr; }
    .mage-stat { border-right: none; border-bottom: 1px solid var(--border); }
    .mage-stat:last-child { border-bottom: none; }

    .mage-nav { padding: .7rem 1rem; }
    .mage-nav__logo img { height: 32px; }

    .mage-design .mage-hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    }

    .mage-hero__sub { font-size: .88rem; }

    .mage-service-card { padding: 1.5rem; border-radius: 16px; }
    .mage-service-card__icon { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 12px; }

    .mage-why-card { padding: 1.5rem; flex-direction: column; gap: .8rem; }
    .mage-forwhom-card { padding: 1.2rem; }
    .mage-forwhom-card__icon { width: 36px; height: 36px; font-size: 1rem; }

    .mage-tech-pill { padding: .5rem 1rem; font-size: .65rem; }

    .mage-detail-item__header { padding: 1rem; }
    .mage-detail-item__content { padding: 0 1rem 1.2rem 2.8rem; }

    .mage-btn { padding: .9rem 2rem; font-size: .9rem; }
}

/* ==========================================================================
   37. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mage-aurora__blob,
    .mage-hero__orb,
    .mage-particle,
    .mage-hero__geo,
    .mage-marquee-band__track { animation: none !important; }

    .mage-service-card,
    .mage-why-card,
    .mage-forwhom-card,
    .mage-detail-item,
    .mage-btn,
    .mage-nav,
    .mage-trust-badge { transition-duration: .1s !important; }

    .mage-hero__logo { animation: none !important; }
    .mage-design .mage-hero h1 em,
    .mage-design .mage-cta h2 em { animation: none !important; }
    .mage-progress { display: none; }
    .mage-spotlight,
    .mage-shine { display: none !important; }
    .mage-cursor-dot,
    .mage-cursor-ring,
    .mage-cursor-orb { display: none !important; }

    .mage-preloader__logo { animation: none !important; }
    .mage-svg-line path { animation: none !important; }
    .mage-hscroll__hint svg { animation: none !important; }
    .mage-testimonial { transition: none !important; }

    html.lenis, html.lenis body { scroll-behavior: auto !important; }
}


/* ==========================================================================
   38. DARK THEME
   Activated by .mage-dark class on .mage-design root
   ========================================================================== */

/* ── Variables override ── */
.mage-design.mage-dark {
    --bg: #0a0a0f;
    --bg2: #12111a;
    --surface: rgba(255, 255, 255, .06);
    --surface2: #1a1926;
    --border: rgba(255, 255, 255, .08);
    --border-hover: rgba(168, 85, 247, .4);
    --text: #e8e4ef;
    --text-dim: #9b8fb0;
    --glow-purple: rgba(147, 51, 234, .3);
    --glow-magenta: rgba(236, 72, 153, .25);
    --glow-cyan: rgba(8, 145, 178, .2);
    --gradient-subtle: linear-gradient(135deg, rgba(147, 51, 234, .12), rgba(236, 72, 153, .08));

    background: var(--bg) !important;
    color: var(--text) !important;
}

/* ══════════════════════════════════════════════
   SIDE TAB — Worklist
   ══════════════════════════════════════════════ */
.mage-sidetab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    font-family: 'Inter', sans-serif;
}

/* ── Trigger tab ── */
.mage-sidetab__trigger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(20,10,35,.85), rgba(40,15,60,.8));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(147,51,234,.3);
    border-right: none;
    border-radius: 14px 0 0 14px;
    padding: 14px 16px 14px 14px;
    cursor: pointer;
    box-shadow: -4px 4px 24px rgba(147,51,234,.15), inset 0 0 20px rgba(147,51,234,.05);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    white-space: nowrap;
    animation: mageSidetabTriggerGlow 3s ease-in-out infinite;
}

@keyframes mageSidetabTriggerGlow {
    0%, 100% { box-shadow: -4px 4px 24px rgba(147,51,234,.15), inset 0 0 20px rgba(147,51,234,.05); border-color: rgba(147,51,234,.25); }
    50%      { box-shadow: -6px 6px 35px rgba(147,51,234,.25), inset 0 0 30px rgba(147,51,234,.08); border-color: rgba(236,72,153,.3); }
}

.mage-sidetab__trigger:hover {
    transform: translateY(-50%) translateX(-6px);
    box-shadow: -8px 8px 35px rgba(147,51,234,.25), inset 0 0 25px rgba(147,51,234,.08);
    border-color: rgba(147,51,234,.4);
}

.mage-sidetab__trigger-text {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--text), var(--text-dim));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mage-sidetab.is-open .mage-sidetab__trigger {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(20px);
}

/* ── Green pulsing dot ── */
.mage-sidetab__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 10px rgba(34,197,94,.6), 0 0 25px rgba(34,197,94,.2);
    animation: mageSidetabPulse 2s ease-in-out infinite;
}

.mage-sidetab__dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(34,197,94,.2);
    animation: mageSidetabDotRing 2s ease-in-out infinite;
}

@keyframes mageSidetabPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(34,197,94,.6), 0 0 25px rgba(34,197,94,.2); }
    50%      { box-shadow: 0 0 20px rgba(34,197,94,.8), 0 0 45px rgba(34,197,94,.3); }
}

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

/* ── Slide-out panel ── */
.mage-sidetab__panel {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    width: 280px;
    background: linear-gradient(160deg, rgba(20,10,35,.95), rgba(30,12,50,.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(147,51,234,.2);
    border-right: none;
    border-radius: 16px 0 0 16px;
    box-shadow: -8px 8px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
    overflow: hidden;
}

.mage-sidetab.is-open .mage-sidetab__panel {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ── Panel header ── */
.mage-sidetab__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
}

.mage-sidetab__header strong {
    flex: 1;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mage-sidetab__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .2s, color .2s;
    line-height: 1;
}

.mage-sidetab__close:hover {
    background: rgba(147,51,234,.08);
    color: var(--magenta);
}

/* ── Task list ── */
.mage-sidetab__list {
    list-style: none;
    margin: 0;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mage-sidetab__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .82rem;
    color: var(--text);
    line-height: 1.5;
    padding: 8px 10px;
    background: var(--gradient-subtle);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .3s;
    animation: mageSidetabItemGlow 3s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .5s);
}

.mage-sidetab__list li:hover {
    border-color: rgba(147,51,234,.2);
}

@keyframes mageSidetabItemGlow {
    0%, 100% { background: var(--gradient-subtle); }
    50%      { background: linear-gradient(135deg, rgba(147,51,234,.08), rgba(236,72,153,.04)); border-color: rgba(147,51,234,.1); }
}

/* ── Item dot (small pulsing) ── */
.mage-sidetab__item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 6px rgba(34,197,94,.4);
    animation: mageSidetabDotBlink 2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .4s);
}

@keyframes mageSidetabDotBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(34,197,94,.4); }
    50%      { opacity: .5; box-shadow: 0 0 12px rgba(34,197,94,.6); }
}

/* ── Mobile: better positioning ── */
@media (max-width: 768px) {
    .mage-sidetab {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    .mage-sidetab__trigger {
        top: 50%;
        transform: translateY(-50%);
        writing-mode: vertical-lr;
        border-radius: 12px 0 0 12px;
        padding: 10px 12px 10px 10px;
    }
    .mage-sidetab__trigger:hover {
        transform: translateY(-50%) translateX(-4px);
    }
    .mage-sidetab.is-open .mage-sidetab__trigger {
        transform: translateY(-50%) translateX(20px);
    }
    .mage-sidetab__panel {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%) translateX(100%);
        width: 260px;
        max-height: 70vh;
        overflow-y: auto;
    }
    .mage-sidetab.is-open .mage-sidetab__panel {
        transform: translateY(-50%) translateX(0);
    }
}

.mage-design.mage-dark ::selection {
    background: rgba(168, 85, 247, .3);
    color: #fff;
}


/* ── Aurora Background (dark) ── */
.mage-design.mage-dark .mage-aurora__blob {
    opacity: .15;
}

.mage-design.mage-dark .mage-aurora__blob:nth-child(1) {
    background: rgba(147, 51, 234, .2);
}

.mage-design.mage-dark .mage-aurora__blob:nth-child(2) {
    background: rgba(236, 72, 153, .12);
}

.mage-design.mage-dark .mage-aurora__blob:nth-child(3) {
    background: rgba(8, 145, 178, .1);
}


/* ── Noise overlay (darker) ── */
.mage-design.mage-dark::after {
    opacity: .12;
}


/* ── Navbar (dark) ── */
.mage-design.mage-dark .mage-nav {
    background: rgba(10, 10, 15, .6);
    border-bottom-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-nav.scrolled {
    background: rgba(10, 10, 15, .92);
    border-bottom-color: rgba(147, 51, 234, .15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .3);
}

.mage-design.mage-dark .mage-nav__links a {
    color: var(--text);
}

.mage-design.mage-dark .mage-nav__status {
    color: var(--text-dim);
    border-left-color: rgba(255, 255, 255, .06);
}


/* ── Hero (dark) ── */
.mage-design.mage-dark .mage-hero__sub {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-hero__scroll-text {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-hero__scroll-mouse {
    border-color: rgba(255, 255, 255, .15);
}

.mage-design.mage-dark .mage-hero__scroll-dot {
    background: var(--text-dim);
}


/* ── Buttons (dark) ── */
.mage-design.mage-dark .mage-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    color: var(--text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

.mage-design.mage-dark .mage-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(168, 85, 247, .25);
    box-shadow: 0 6px 25px rgba(0, 0, 0, .3);
}


/* ── Stats bar (dark) ── */
.mage-design.mage-dark .mage-stats__inner {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2), 0 0 0 1px rgba(255, 255, 255, .03);
}

.mage-design.mage-dark .mage-stat {
    border-right-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-stat__label {
    color: var(--text-dim);
}


/* ── Section base (dark) ── */
.mage-design.mage-dark .mage-section__label {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-section__desc {
    color: var(--text-dim);
}


/* ── Service cards (dark) ── */
.mage-design.mage-dark .mage-service-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-service-card:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3), 0 0 0 1px rgba(168, 85, 247, .1);
}

.mage-design.mage-dark .mage-service-card__desc {
    color: var(--text-dim);
}


/* ── Accordion detail items (dark) ── */
.mage-design.mage-dark .mage-detail-item {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-detail-item:hover {
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.mage-design.mage-dark .mage-detail-item.active {
    background: rgba(255, 255, 255, .07);
}

.mage-design.mage-dark .mage-detail-item__arrow {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-detail-item__content {
    color: var(--text-dim);
}


/* ── For Whom cards (dark) ── */
.mage-design.mage-dark .mage-forwhom-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-forwhom-card__desc {
    color: var(--text-dim);
}


/* ── Tech marquee pills (dark) ── */
.mage-design.mage-dark .mage-tech-pill {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text);
}

.mage-design.mage-dark .mage-tech-pill:hover {
    background: rgba(255, 255, 255, .1);
}


/* ── Why-us cards (dark) ── */
.mage-design.mage-dark .mage-why-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-why-card__text p {
    color: var(--text-dim);
}


/* ── Process timeline (dark) ── */
.mage-design.mage-dark .mage-timeline__dot {
    background: rgba(255, 255, 255, .08);
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-timeline__content p {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-timeline::before {
    background: rgba(255, 255, 255, .06);
}


/* ── CTA (dark) ── */
.mage-design.mage-dark .mage-cta p {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-cta__links a {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-cta__links a:hover {
    background: rgba(236, 72, 153, .08);
}


/* ── Footer (dark) ── */
.mage-design.mage-dark .mage-footer {
    background: rgba(10, 10, 15, .6);
    border-top-color: rgba(255, 255, 255, .06);
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-footer a {
    color: var(--text-dim);
}


/* ── Preloader (dark) ── */
.mage-design.mage-dark .mage-preloader {
    background: #0a0a0f;
}

.mage-design.mage-dark .mage-preloader__bar-wrap {
    background: rgba(255, 255, 255, .08);
}

.mage-design.mage-dark .mage-preloader__text {
    color: var(--text-dim);
}


/* ── Trust badges (dark) ── */
.mage-design.mage-dark .mage-trust-badge {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-trust-badge:hover {
    background: rgba(255, 255, 255, .1);
}


/* ── Back to top (dark) ── */
.mage-design.mage-dark .mage-btt {
    background: rgba(20, 18, 30, .85);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-btt:hover {
    background: rgba(20, 18, 30, 1);
}

.mage-design.mage-dark .mage-btt__arrow {
    color: var(--text);
}


/* ── Horizontal scroll cards (dark) ── */
.mage-design.mage-dark .mage-hscroll__card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-hscroll__card:hover {
    background: rgba(255, 255, 255, .07);
}

.mage-design.mage-dark .mage-hscroll__hint {
    color: var(--text-dim);
}


/* ── Testimonials (dark) — already the default look, just reinforce ── */
.mage-design.mage-dark .mage-testimonial {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

.mage-design.mage-dark .mage-testimonial:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(147, 51, 234, .2);
}

.mage-design.mage-dark .mage-testimonial__quote {
    color: rgba(255, 255, 255, .5);
}

.mage-design.mage-dark .mage-testimonial__footer {
    border-top-color: rgba(255, 255, 255, .06);
}

.mage-design.mage-dark .mage-testimonial__role {
    color: var(--text-dim);
}


/* ── SVG lines (dark) ── */
.mage-design.mage-dark .mage-svg-line path {
    stroke: rgba(168, 85, 247, .15);
}


/* ── Section tinting (dark - boost glow) ── */
.mage-design.mage-dark .mage-section-tint {
    opacity: .08;
}


/* ── Shimmer (dark - slightly brighter) ── */
.mage-design.mage-dark .mage-shimmer::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(168, 85, 247, .06) 45%,
        rgba(236, 72, 153, .04) 55%,
        transparent 100%
    );
}


/* ── Card spotlight glow (dark - brighter) ── */
.mage-design.mage-dark .mage-spotlight {
    background: radial-gradient(
        300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(168, 85, 247, .12),
        transparent 50%
    );
}


/* ── Card shine streak (dark) ── */
.mage-design.mage-dark .mage-shine {
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 255, 255, .08) 45%,
        rgba(255, 255, 255, .12) 50%,
        rgba(255, 255, 255, .08) 55%,
        transparent 75%
    );
}


/* ── Top bar partner marquee (dark) ── */
.mage-design.mage-dark .mage-topbar {
    background: rgba(10, 10, 15, .85);
    border-bottom-color: rgba(255, 255, 255, .04);
}

.mage-design.mage-dark .mage-topbar__label {
    color: var(--text-dim);
}

.mage-design.mage-dark .mage-topbar__label::after {
    background: rgba(255, 255, 255, .1);
}

.mage-design.mage-dark .mage-topbar__logo {
    opacity: var(--tb-opacity, .4);
    filter: var(--tb-filter-dark, grayscale(100%) brightness(2));
}

.mage-design.mage-dark .mage-topbar__logo:hover {
    opacity: var(--tb-opacity-hover, 1);
    filter: var(--tb-filter-dark-hover, grayscale(0%) brightness(1));
}


/* ── Night-Rider sweep glow on dark topbar ── */
@keyframes knight-rider-sweep {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.mage-design.mage-dark .mage-topbar.has-nightrider {
    overflow: hidden;
}

.mage-design.mage-dark .mage-topbar.has-nightrider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    z-index: 0;
    pointer-events: none;
    background: var(--nr-gradient, linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.2) 20%, rgba(255, 0, 126, 0.36) 50%, rgba(147, 51, 234, 0.2) 80%, transparent));
    animation: knight-rider-sweep var(--nr-speed, 3s) ease-in-out infinite alternate;
}

/* Ensure topbar children stay above the sweep */
.mage-design.mage-dark .mage-topbar.has-nightrider > * {
    position: relative;
    z-index: 1;
}


/* ── Hamburger on dark mobile ── */
@media (max-width: 768px) {
    .mage-design.mage-dark .mage-nav__toggle span {
        background: #e8e4ef !important;
    }

    .mage-design.mage-dark .mage-nav__links {
        background: rgba(10, 10, 15, .98);
    }

    .mage-design.mage-dark .mage-nav__links a {
        border-bottom-color: rgba(255, 255, 255, .04);
    }

    .mage-design.mage-dark .mage-stat {
        border-bottom-color: rgba(255, 255, 255, .06);
    }
}