/* ═══════════════════════════════════════
               TOKENS
            ═══════════════════════════════════════ */
 .art-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: .68rem;
     letter-spacing: .25em;
     text-transform: uppercase;
     color: #9333ea;
 }

 .art-eyebrow::before,
 .art-eyebrow::after {
     content: '';
     display: block;
     height: 1px;
     width: 28px;
     background: #9333ea;
     opacity: .4;
 }

 /* ── featured card ── */
 .card-featured {
     transition: transform .4s cubic-bezier(.4, 0, .2, 1),
         box-shadow .4s cubic-bezier(.4, 0, .2, 1);
 }

 .card-featured:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 56px rgba(147, 51, 234, .1);
 }

 .card-featured:hover .card-img {
     transform: scale(1.04);
 }

 /* ── small card ── */
 .card-sm {
     transition: transform .4s cubic-bezier(.4, 0, .2, 1),
         box-shadow .4s cubic-bezier(.4, 0, .2, 1);
 }

 .card-sm:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 48px rgba(147, 51, 234, .1);
 }

 .card-sm:hover .card-img {
     transform: scale(1.05);
 }

 /* ── list card ── */
 .card-list {
     transition: background .3s, border-color .3s, transform .3s;
 }

 .card-list:hover {
     background: rgba(147, 51, 234, .04);
     border-color: rgba(147, 51, 234, .25) !important;
     transform: translateX(4px);
 }

 /* ── image zoom wrapper ── */
 .img-zoom {
     overflow: hidden;
 }

 .card-img {
     transition: transform .6s cubic-bezier(.4, 0, .2, 1);
 }

 /* ── read-more arrow ── */
 .arrow-link svg {
     transition: transform .3s;
 }

 .arrow-link:hover svg {
     transform: translateX(4px);
 }

 /* ── category pill ── */
 .pill {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 100px;
     font-size: .65rem;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     background: rgba(147, 51, 234, .09);
     color: #9333ea;
     border: 1px solid rgba(147, 51, 234, .18);
     transition: background .3s, color .3s;
 }

 .pill:hover {
     background: #9333ea;
     color: #fff;
 }

 /* ── view-all button ── */
 .btn-outline-purple {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 13px 28px;
     border-radius: 100px;
     font-size: .8rem;
     font-weight: 600;
     letter-spacing: .06em;
     border: 1.5px solid rgba(147, 51, 234, .35);
     color: #9333ea;
     background: transparent;
     transition: all .35s cubic-bezier(.4, 0, .2, 1);
 }

 .btn-outline-purple:hover {
     background: #9333ea;
     border-color: #9333ea;
     color: #fff;
     box-shadow: 0 8px 28px rgba(147, 51, 234, .28);
     transform: translateY(-2px);
 }

 .btn-outline-purple svg {
     transition: transform .3s;
 }

 .btn-outline-purple:hover svg {
     transform: translateX(3px);
 }

 :root {
     --gold: #9333ea;
     --gold-lt: #c084fc;
     --dark: #faf8ff;
     --dark-2: #f3f0ff;
     --dark-3: #ede9fe;
     --glass: rgba(147, 51, 234, .06);
     --glass-border: rgba(147, 51, 234, .15);
     --text: #1e1030;
     --muted: #6b7280;
     --radius: 20px;
     --transition: .45s cubic-bezier(.4, 0, .2, 1);
     --accent: #f97316;
 }

 /* ═══════════════════════════════════════
                   RESET / BASE
                ═══════════════════════════════════════ */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px;
 }

 body {
     font-family: 'DM Sans', sans-serif;
     background: #ffffff;
     color: var(--text);
     overflow-x: hidden;
 }

 img {
     display: block;
     max-width: 100%;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 /* ═══════════════════════════════════════
                   GRAIN OVERLAY
                ═══════════════════════════════════════ */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     z-index: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
     opacity: .03;
     pointer-events: none;
 }

 /* ═══════════════════════════════════════
                   AMBIENT BLOBS
                ═══════════════════════════════════════ */
 .ambient {
     position: fixed;
     z-index: 0;
     border-radius: 50%;
     filter: blur(140px);
     pointer-events: none;
     opacity: .18;
     animation: drift 30s infinite alternate ease-in-out;
 }

 .amb-1 {
     width: 700px;
     height: 700px;
     background: radial-gradient(#c084fc, transparent 70%);
     top: -200px;
     left: -200px;
     opacity: .22;
 }

 .amb-2 {
     width: 600px;
     height: 600px;
     background: radial-gradient(#f97316, transparent 70%);
     bottom: -150px;
     right: -100px;
     animation-delay: -12s;
     opacity: .12;
 }

 .amb-3 {
     width: 400px;
     height: 400px;
     background: radial-gradient(#9333ea44, transparent 70%);
     top: 50%;
     right: 20%;
     animation-delay: -6s;
     opacity: .1;
 }

 @keyframes drift {
     from {
         transform: translate(0, 0) scale(1);
     }

     to {
         transform: translate(80px, 60px) scale(1.15);
     }
 }

 /* ═══════════════════════════════════════
                   GLASS UTILITY
                ═══════════════════════════════════════ */
 .glass {
     background: rgba(255, 255, 255, .7);
     backdrop-filter: blur(24px) saturate(180%);
     -webkit-backdrop-filter: blur(24px) saturate(180%);
     border: 1px solid rgba(147, 51, 234, .12);
     border-radius: var(--radius);
     box-shadow: 0 4px 24px rgba(147, 51, 234, .06);
 }

 .glass-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(147, 51, 234, .15);
     border-radius: var(--radius);
     transition: var(--transition);
     box-shadow: 0 4px 24px rgba(147, 51, 234, .06);
 }

 .glass-card:hover {
     border-color: rgba(147, 51, 234, .4);
     transform: translateY(-6px);
     box-shadow: 0 32px 64px rgba(147, 51, 234, .12), 0 0 0 1px rgba(147, 51, 234, .12);
 }

 /* ═══════════════════════════════════════
                   TYPOGRAPHY
                ═══════════════════════════════════════ */
 .serif {
     font-family: 'Cormorant Garamond', serif;
 }

 .gold-text {
     color: #9333ea;
 }

 .gold-grad {
     background: linear-gradient(135deg, #9333ea 0%, #f97316 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .muted {
     color: var(--muted);
 }

 /* ═══════════════════════════════════════
                   SECTION LABEL
                ═══════════════════════════════════════ */
 .section-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: .7rem;
     letter-spacing: .25em;
     text-transform: uppercase;
     color: #9333ea;
     margin-bottom: 20px;
 }

 .section-eyebrow::before,
 .section-eyebrow::after {
     content: '';
     display: block;
     height: 1px;
     width: 32px;
     background: #9333ea;
     opacity: .4;
 }

 /* ═══════════════════════════════════════
                   BUTTON
                ═══════════════════════════════════════ */
 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     border-radius: 100px;
     font-family: 'DM Sans', sans-serif;
     font-size: .85rem;
     font-weight: 600;
     letter-spacing: .05em;
     cursor: pointer;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .btn::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, .1);
     opacity: 0;
     transition: var(--transition);
 }

 .btn:hover::after {
     opacity: 1;
 }

 .btn-primary {
     background: linear-gradient(135deg, #9333ea, #c084fc);
     color: #ffffff;
     box-shadow: 0 8px 32px rgba(147, 51, 234, .3);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 48px rgba(147, 51, 234, .4);
 }

 .btn-ghost {
     background: transparent;
     border: 1px solid rgba(147, 51, 234, .3);
     color: #9333ea;
 }

 .btn-ghost:hover {
     border-color: #9333ea;
     color: #9333ea;
     background: rgba(147, 51, 234, .06);
     transform: translateY(-2px);
 }

 /* ═══════════════════════════════════════
                   REVEAL ANIMATION
                ═══════════════════════════════════════ */
 .reveal {
     opacity: 0;
     transform: translateY(50px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-left {
     opacity: 0;
     transform: translateX(-50px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .reveal-left.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .reveal-right {
     opacity: 0;
     transform: translateX(50px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .reveal-right.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .reveal-delay-1 {
     transition-delay: .1s;
 }

 .reveal-delay-2 {
     transition-delay: .2s;
 }

 .reveal-delay-3 {
     transition-delay: .3s;
 }

 .reveal-delay-4 {
     transition-delay: .4s;
 }

 .reveal-delay-5 {
     transition-delay: .5s;
 }

 /* ═══════════════════════════════════════
                   ZIPPER INTRO
                ═══════════════════════════════════════ */
 #zipper-overlay {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: flex;
     background: #faf8ff;
 }

 .zipper-half {
     flex: 1;
     background: #f3f0ff;
     transition: transform 1.4s cubic-bezier(.87, 0, .13, 1);
 }

 #zipper-overlay.open .z-left {
     transform: translateX(-100%);
 }

 #zipper-overlay.open .z-right {
     transform: translateX(100%);
 }

 #zipper-overlay.gone {
     display: none;
 }

 .intro-center {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 32px;
     cursor: pointer;
 }

 .intro-logo {
     height: 60px;
     filter: drop-shadow(0 0 20px rgba(147, 51, 234, .3));
 }

 .lock-ring {
     width: 88px;
     height: 88px;
     border-radius: 50%;
     border: 2px solid rgba(147, 51, 234, .3);
     background: rgba(147, 51, 234, .08);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     transition: var(--transition);
 }

 .lock-ring::before {
     content: '';
     position: absolute;
     inset: -8px;
     border-radius: 50%;
     border: 1px solid rgba(147, 51, 234, .12);
     animation: pulse-ring 2s infinite;
 }

 .lock-ring:hover {
     border-color: #9333ea;
     background: rgba(147, 51, 234, .15);
     transform: scale(1.05);
 }

 .lock-ring svg {
     width: 32px;
     height: 32px;
     stroke: #9333ea;
 }

 @keyframes pulse-ring {
     0% {
         transform: scale(1);
         opacity: 1;
     }

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

 .intro-label {
     font-size: .65rem;
     letter-spacing: .4em;
     text-transform: uppercase;
     color: #9333ea;
     opacity: .7;
     animation: blink 1.8s infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: .7;
     }

     50% {
         opacity: .2;
     }
 }

 /* LOADING BAR */
 .intro-bar {
     width: 200px;
     height: 1px;
     background: rgba(147, 51, 234, .15);
     border-radius: 4px;
     overflow: hidden;
 }

 .intro-bar-fill {
     height: 100%;
     width: 0;
     background: linear-gradient(90deg, #9333ea, #c084fc);
     transition: width 2s ease;
 }

 /* ═══════════════════════════════════════
                   NAVBAR
                ═══════════════════════════════════════ */
 #navbar {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 100;
     padding: 0 40px;
     transition: var(--transition);
 }

 #navbar.scrolled {
     background: rgba(255, 255, 255, .85);
     backdrop-filter: blur(24px);
     border-bottom: 1px solid rgba(147, 51, 234, .1);
     box-shadow: 0 4px 24px rgba(147, 51, 234, .06);
     padding: 0 40px;
 }

 .nav-inner {
     max-width: 1280px;
     margin: 0 auto;
     height: 88px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .nav-logo {
     height: 36px;
 }

 .nav-links {
     display: flex;
     gap: 40px;
     font-size: .8rem;
     letter-spacing: .08em;
     font-weight: 500;
     list-style: none;
 }

 .nav-links a {
     color: rgba(30, 16, 48, .5);
     transition: color .3s;
     position: relative;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 1px;
     background: #9333ea;
     transition: width .3s;
 }

 .nav-links a:hover {
     color: #9333ea;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 .nav-cta {
     display: flex;
     gap: 16px;
     align-items: center;
 }

 /* ═══════════════════════════════════════
                   HERO
                ═══════════════════════════════════════ */
 #hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 120px 24px 80px;
     position: relative;
     z-index: 1;
 }

 .hero-inner {
     max-width: 960px;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 8px 20px;
     border-radius: 100px;
     background: rgba(147, 51, 234, .08);
     border: 1px solid rgba(147, 51, 234, .2);
     font-size: .72rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: #9333ea;
     margin-bottom: 40px;
 }

 .hero-badge span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #9333ea;
     animation: blink 1.5s infinite;
 }

 .hero-h1 {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(3rem, 9vw, 8rem);
     line-height: .92;
     font-weight: 300;
     letter-spacing: -.02em;
     margin-bottom: 32px;
     color: #1e1030;
 }

 .hero-h1 em {
     font-style: italic;
 }

 .hero-sub {
     max-width: 520px;
     margin: 0 auto 52px;
     font-size: 1rem;
     line-height: 1.75;
     color: var(--muted);
 }

 .hero-btns {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* HERO STATS */
 .hero-stats {
     display: flex;
     justify-content: center;
     gap: 0;
     margin-top: 80px;
     border-top: 1px solid rgba(147, 51, 234, .1);
     padding-top: 48px;
 }

 .stat-item {
     flex: 1;
     max-width: 200px;
     text-align: center;
     padding: 0 32px;
     border-right: 1px solid rgba(147, 51, 234, .1);
 }

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

 .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3rem;
     font-weight: 600;
     line-height: 1;
     color: #9333ea;
     margin-bottom: 6px;
 }

 .stat-lbl {
     font-size: .72rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--muted);
 }

 /* SCROLL INDICATOR */
 .scroll-ind {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     color: var(--muted);
     font-size: .65rem;
     letter-spacing: .2em;
     text-transform: uppercase;
 }

 .scroll-ind::after {
     content: '';
     display: block;
     width: 1px;
     height: 48px;
     background: linear-gradient(#9333ea, transparent);
     animation: scroll-line 2s infinite;
 }

 @keyframes scroll-line {
     0% {
         transform: scaleY(0);
         transform-origin: top;
     }

     50% {
         transform: scaleY(1);
         transform-origin: top;
     }

     51% {
         transform: scaleY(1);
         transform-origin: bottom;
     }

     100% {
         transform: scaleY(0);
         transform-origin: bottom;
     }
 }

 /* HERO BG LINES */
 .hero-grid-lines {
     position: absolute;
     inset: 0;
     z-index: -1;
     background-image:
         linear-gradient(rgba(147, 51, 234, .05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(147, 51, 234, .05) 1px, transparent 1px);
     background-size: 80px 80px;
 }

 /* ═══════════════════════════════════════
                   MARQUEE TICKER
                ═══════════════════════════════════════ */
 .marquee-section {
     overflow: hidden;
     border-top: 1px solid rgba(147, 51, 234, .12);
     border-bottom: 1px solid rgba(147, 51, 234, .12);
     padding: 18px 0;
     background: rgba(147, 51, 234, .04);
     position: relative;
     z-index: 1;
 }

 .marquee-track {
     display: flex;
     gap: 0;
     animation: marquee 30s linear infinite;
     width: max-content;
 }

 .marquee-item {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 0 40px;
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: rgba(147, 51, 234, .45);
     white-space: nowrap;
 }

 .marquee-item .dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #9333ea;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0);
     }

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

 /* ═══════════════════════════════════════
                   ABOUT
                ═══════════════════════════════════════ */
 #about {
     padding: 140px 40px;
     max-width: 1280px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }

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

 .about-img-wrap {
     position: relative;
 }

 .about-img-wrap img {
     width: 100%;
     border-radius: 24px;
     object-fit: cover;
     height: 560px;
     filter: brightness(.85) saturate(.8);
 }

 .about-img-wrap::before {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 26px;
     background: linear-gradient(135deg, rgba(147, 51, 234, .35), transparent, rgba(192, 132, 252, .2));
     z-index: -1;
 }

 .about-badge {
     position: absolute;
     bottom: -24px;
     right: -24px;
     padding: 24px 32px;
     border-radius: 20px;
     text-align: center;
     background: linear-gradient(135deg, #9333ea, #c084fc);
     color: #ffffff;
 }

 .about-badge .num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3rem;
     font-weight: 700;
     line-height: 1;
 }

 .about-badge .lbl {
     font-size: .7rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-weight: 600;
     opacity: .85;
 }

 .about-h2 {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.4rem, 4vw, 3.5rem);
     font-weight: 300;
     line-height: 1.15;
     margin-bottom: 28px;
 }

 .about-p {
     font-size: .95rem;
     line-height: 1.9;
     color: var(--muted);
     margin-bottom: 20px;
 }

 .about-divider {
     width: 60px;
     height: 1px;
     background: #9333ea;
     margin: 32px 0;
     opacity: .5;
 }

 /* ═══════════════════════════════════════
                   SERVICES
                ═══════════════════════════════════════ */
 #services {
     padding: 140px 40px;
     position: relative;
     z-index: 1;
 }

 .services-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 80px;
 }

 .section-h2 {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(2.2rem, 4vw, 3.4rem);
     font-weight: 300;
     line-height: 1.2;
 }

 .section-sub {
     max-width: 480px;
     margin: 16px auto 0;
     color: var(--muted);
     line-height: 1.8;
     font-size: .95rem;
 }

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

 .service-card {
     padding: 40px 36px;
     position: relative;
     overflow: hidden;
 }

 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, transparent, #9333ea, transparent);
     opacity: 0;
     transition: opacity .4s;
 }

 .service-card:hover::before {
     opacity: 1;
 }

 .service-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 4rem;
     font-weight: 700;
     line-height: 1;
     color: rgba(147, 51, 234, .12);
     margin-bottom: 24px;
     transition: color .4s;
 }

 .service-card:hover .service-num {
     color: rgba(147, 51, 234, .25);
 }

 .service-icon {
     width: 52px;
     height: 52px;
     margin-bottom: 24px;
     background: rgba(147, 51, 234, .08);
     border-radius: 14px;
     border: 1px solid rgba(147, 51, 234, .18);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .service-icon svg {
     width: 22px;
     height: 22px;
     stroke: #9333ea;
 }

 .service-h3 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 14px;
 }

 .service-p {
     font-size: .88rem;
     line-height: 1.8;
     color: var(--muted);
 }

 /* ═══════════════════════════════════════
                   FEATURES / WHY US
                ═══════════════════════════════════════ */
 #why {
     padding: 140px 40px;
     background: var(--dark-2);
     position: relative;
     z-index: 1;
 }

 #why::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(147, 51, 234, .04) 0%, transparent 50%, rgba(147, 51, 234, .03) 100%);
     pointer-events: none;
 }

 .why-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

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

 .why-img {
     width: 100%;
     border-radius: 24px;
     object-fit: cover;
     height: 620px;
     filter: brightness(.95) saturate(.85);
 }

 .why-list {
     display: flex;
     flex-direction: column;
     gap: 28px;
 }

 .why-item {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     padding: 28px;
     border-radius: 16px;
     border: 1px solid transparent;
     transition: var(--transition);
 }

 .why-item:hover {
     background: rgba(147, 51, 234, .04);
     border-color: rgba(147, 51, 234, .15);
 }

 .why-check {
     width: 44px;
     height: 44px;
     min-width: 44px;
     border-radius: 12px;
     background: rgba(147, 51, 234, .08);
     border: 1px solid rgba(147, 51, 234, .18);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .why-check svg {
     width: 18px;
     height: 18px;
     stroke: #9333ea;
 }

 .why-item-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 8px;
     color: #1e1030;
 }

 .why-item-desc {
     font-size: .88rem;
     line-height: 1.7;
     color: var(--muted);
 }

 /* ═══════════════════════════════════════
                   PORTFOLIO
                ═══════════════════════════════════════ */
 #portfolio {
     padding: 140px 40px;
     position: relative;
     z-index: 1;
 }

 .portfolio-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .portfolio-filter {
     display: flex;
     justify-content: center;
     gap: 12px;
     margin-bottom: 60px;
     flex-wrap: wrap;
 }

 .filter-btn {
     padding: 10px 24px;
     border-radius: 100px;
     font-size: .78rem;
     letter-spacing: .08em;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
     border: 1px solid rgba(147, 51, 234, .2);
     background: transparent;
     color: var(--muted);
 }

 .filter-btn.active,
 .filter-btn:hover {
     background: rgba(147, 51, 234, .08);
     border-color: #9333ea;
     color: #9333ea;
 }

 .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: 280px 280px;
     gap: 20px;
 }

 .port-item {
     border-radius: 20px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
 }

 .port-item-1 {
     grid-column: 1 / 8;
     grid-row: 1;
 }

 .port-item-2 {
     grid-column: 8 / 13;
     grid-row: 1;
 }

 .port-item-3 {
     grid-column: 1 / 5;
     grid-row: 2;
 }

 .port-item-4 {
     grid-column: 5 / 9;
     grid-row: 2;
 }

 .port-item-5 {
     grid-column: 9 / 13;
     grid-row: 2;
 }

 .port-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .7s ease, filter .7s ease;
     filter: brightness(.82) saturate(.75);
 }

 .port-item:hover img {
     transform: scale(1.06);
     filter: brightness(.65) saturate(1.1);
 }

 .port-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(20, 8, 40, .92), transparent 55%);
     padding: 28px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 }

 .port-tag {
     font-size: .65rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: #c084fc;
     margin-bottom: 8px;
 }

 .port-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.4rem;
     font-weight: 600;
     line-height: 1.2;
     color: #fff;
 }

 .port-arrow {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(147, 51, 234, .2);
     border: 1px solid rgba(192, 132, 252, .5);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transform: scale(.8);
     transition: var(--transition);
 }

 .port-item:hover .port-arrow {
     opacity: 1;
     transform: scale(1);
 }

 .port-arrow svg {
     width: 16px;
     height: 16px;
     stroke: #c084fc;
 }

 #clients {
     padding: 100px 40px;
     background: var(--dark-2);
     position: relative;
     z-index: 1;
 }

 .clients-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .clients-logos {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 2px;
     margin-top: 64px;
 }

 .client-logo-wrap {
     aspect-ratio: 2/1;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(147, 51, 234, .08);
     transition: var(--transition);
     padding: 28px;
 }

 .client-logo-wrap:hover {
     background: rgba(147, 51, 234, .05);
     border-color: rgba(147, 51, 234, .2);
 }

 .client-logo-text {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: rgba(30, 16, 48, .25);
     transition: color .3s;
 }

 .client-logo-wrap:hover .client-logo-text {
     color: #9333ea;
 }

 /* ═══════════════════════════════════════
                   TESTIMONIALS
                ═══════════════════════════════════════ */
 #testimonials {
     padding: 140px 40px;
     position: relative;
     z-index: 1;
 }

 .testi-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .swiper-testi {
     padding-bottom: 60px !important;
 }

 .testi-card {
     padding: 48px;
     position: relative;
 }

 .testi-quote {
     font-family: 'Cormorant Garamond', serif;
     font-size: 4rem;
     color: #9333ea;
     opacity: .2;
     line-height: 1;
     margin-bottom: -16px;
 }

 .testi-text {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     font-style: italic;
     line-height: 1.7;
     color: rgba(30, 16, 48, .75);
     margin-bottom: 32px;
 }

 .testi-author {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .testi-avatar {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: linear-gradient(135deg, #9333ea, #c084fc);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.3rem;
     font-weight: 700;
     color: #fff;
 }

 .testi-name {
     font-weight: 600;
     font-size: .9rem;
     color: #1e1030;
 }

 .testi-role {
     font-size: .78rem;
     color: var(--muted);
     margin-top: 2px;
 }

 .testi-stars {
     display: flex;
     gap: 3px;
     margin-bottom: 20px;
 }

 .testi-stars span {
     color: #f97316;
     font-size: .9rem;
 }

 .swiper-testi .swiper-pagination-bullet {
     background: rgba(147, 51, 234, .25);
     width: 24px;
     height: 3px;
     border-radius: 2px;
     transition: all .3s;
     opacity: 1;
 }

 .swiper-testi .swiper-pagination-bullet-active {
     background: #9333ea;
     width: 40px;
 }

 /* ═══════════════════════════════════════
                   TEAM
                ═══════════════════════════════════════ */
 #team {
     padding: 140px 40px;
     background: var(--dark-2);
     position: relative;
     z-index: 1;
 }

 .team-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 64px;
 }

 .team-card {
     position: relative;
     overflow: hidden;
     border-radius: 20px;
 }

 .team-img {
     width: 100%;
     aspect-ratio: 3/4;
     object-fit: cover;
     filter: brightness(.88) saturate(.7);
     transition: var(--transition);
 }

 .team-card:hover .team-img {
     filter: brightness(.65) saturate(.9);
     transform: scale(1.04);
 }

 .team-info {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 32px 24px 28px;
     background: linear-gradient(to top, rgba(20, 8, 40, .97) 60%, transparent);
     transform: translateY(8px);
     transition: var(--transition);
 }

 .team-card:hover .team-info {
     transform: translateY(0);
 }

 .team-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     font-weight: 600;
     color: #fff;
 }

 .team-role {
     font-size: .75rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: #c084fc;
     margin-top: 4px;
 }

 .team-border {
     width: 32px;
     height: 1px;
     background: #9333ea;
     margin: 14px 0;
     opacity: .5;
 }

 .team-socials {
     display: flex;
     gap: 10px;
 }

 .team-social {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: rgba(147, 51, 234, .15);
     border: 1px solid rgba(192, 132, 252, .3);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transform: translateY(8px);
     transition: var(--transition);
 }

 .team-card:hover .team-social {
     opacity: 1;
     transform: translateY(0);
 }

 .team-social:nth-child(2) {
     transition-delay: .05s;
 }

 .team-social:nth-child(3) {
     transition-delay: .1s;
 }

 .team-social svg {
     width: 14px;
     height: 14px;
     stroke: #c084fc;
 }

 /* ═══════════════════════════════════════
                   CONTACT
                ═══════════════════════════════════════ */
 #contact {
     padding: 140px 40px;
     position: relative;
     z-index: 1;
 }

 .contact-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 80px;
     align-items: start;
 }

 .contact-info-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.8rem;
     font-weight: 300;
     line-height: 1.2;
     margin-bottom: 24px;
 }

 .contact-info-desc {
     font-size: .93rem;
     line-height: 1.9;
     color: var(--muted);
     margin-bottom: 40px;
 }

 .contact-detail {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .contact-row {
     display: flex;
     gap: 16px;
     align-items: flex-start;
 }

 .contact-icon {
     width: 44px;
     height: 44px;
     min-width: 44px;
     border-radius: 12px;
     background: rgba(147, 51, 234, .08);
     border: 1px solid rgba(147, 51, 234, .18);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .contact-icon svg {
     width: 18px;
     height: 18px;
     stroke: #9333ea;
 }

 .contact-row-lbl {
     font-size: .72rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 4px;
 }

 .contact-row-val {
     font-size: .93rem;
     color: #1e1030;
 }

 /* FORM */
 .contact-form {
     padding: 48px;
 }

 .form-group {
     margin-bottom: 24px;
 }

 .form-label {
     display: block;
     font-size: .75rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 10px;
 }

 .form-input {
     width: 100%;
     background: rgba(255, 255, 255, .8);
     border: 1px solid rgba(147, 51, 234, .15);
     border-radius: 12px;
     padding: 14px 18px;
     color: #1e1030;
     font-family: 'DM Sans', sans-serif;
     font-size: .93rem;
     transition: var(--transition);
     outline: none;
 }

 .form-input:focus {
     border-color: #9333ea;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0 0 0 3px rgba(147, 51, 234, .08);
 }

 .form-input::placeholder {
     color: rgba(107, 114, 128, .5);
 }

 textarea.form-input {
     resize: vertical;
     min-height: 140px;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 /* ═══════════════════════════════════════
                   FOOTER
                ═══════════════════════════════════════ */
 footer {
     background: var(--dark-2);
     border-top: 1px solid rgba(147, 51, 234, .1);
     padding: 80px 40px 40px;
     position: relative;
     z-index: 1;
 }

 .footer-inner {
     max-width: 1280px;
     margin: 0 auto;
 }

 .footer-top {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1fr;
     gap: 60px;
     margin-bottom: 60px;
 }

 .footer-logo {
     height: 32px;
     margin-bottom: 20px;
 }

 .footer-desc {
     font-size: .88rem;
     line-height: 1.8;
     color: var(--muted);
     max-width: 260px;
 }

 .footer-col-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: #9333ea;
     margin-bottom: 24px;
 }

 .footer-links {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .footer-links a {
     font-size: .88rem;
     color: var(--muted);
     transition: color .3s;
 }

 .footer-links a:hover {
     color: #9333ea;
 }

 .footer-bottom {
     border-top: 1px solid rgba(147, 51, 234, .08);
     padding-top: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .footer-copy {
     font-size: .8rem;
     color: var(--muted);
 }

 .footer-socials {
     display: flex;
     gap: 12px;
 }

 .social-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(147, 51, 234, .06);
     border: 1px solid rgba(147, 51, 234, .12);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .social-icon:hover {
     background: rgba(147, 51, 234, .12);
     border-color: rgba(147, 51, 234, .3);
 }

 .social-icon svg {
     width: 15px;
     height: 15px;
     stroke: var(--muted);
     transition: stroke .3s;
 }

 .social-icon:hover svg {
     stroke: #9333ea;
 }

 /* ═══════════════════════════════════════
                   CANVAS BG
                ═══════════════════════════════════════ */
 #bg-canvas {
     position: fixed;
     inset: 0;
     z-index: -1;
     pointer-events: none;
     opacity: .4;
 }

 /* ═══════════════════════════════════════
                   RESPONSIVE
                ═══════════════════════════════════════ */
 @media (max-width: 1024px) {
     .services-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .portfolio-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto;
     }

     .port-item-1,
     .port-item-2,
     .port-item-3,
     .port-item-4,
     .port-item-5 {
         grid-column: auto;
         grid-row: auto;
         height: 260px;
     }

     .about-grid,
     .why-grid,
     .contact-grid {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .team-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .clients-logos {
         grid-template-columns: repeat(3, 1fr);
     }

     .footer-top {
         grid-template-columns: 1fr 1fr;
         gap: 40px;
     }
 }

 @media (max-width: 768px) {
     #navbar {
         padding: 0 20px;
     }

     .nav-links,
     .nav-cta .btn-ghost {
         display: none;
     }

     .hero-stats {
         flex-wrap: wrap;
     }

     .stat-item {
         border: none;
         padding: 16px;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .portfolio-grid {
         grid-template-columns: 1fr;
     }

     .clients-logos {
         grid-template-columns: repeat(2, 1fr);
     }

     .team-grid {
         grid-template-columns: 1fr;
     }

     .footer-top {
         grid-template-columns: 1fr;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 20px;
         text-align: center;
     }

     .form-row {
         grid-template-columns: 1fr;
     }

     #about,
     #services,
     #why,
     #portfolio,
     #clients,
     #testimonials,
     #team,
     #contact {
         padding: 80px 20px;
     }

     footer {
         padding: 60px 20px 32px;
     }
 }