/* ══ POPUP ══ */
		#popup-overlay {
		    position: fixed;
		    inset: 0;
		    z-index: 9500;
		    background: rgba(8, 6, 16, .88);
		    backdrop-filter: blur(14px);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    opacity: 0;
		    animation: pfadeIn .5s ease .4s forwards
		}

		#popup-overlay.hidden {
		    display: none
		}

		@keyframes pfadeIn {
		    to {
		        opacity: 1
		    }
		}

		.popup-box {
		    background: var(--dark3);
		    border: 1px solid var(--border);
		    border-radius: 4px;
		    max-width: 520px;
		    width: 92%;
		    position: relative;
		    overflow: hidden;
		    transform: translateY(28px) scale(.96);
		    animation: pslide .55s cubic-bezier(.34, 1.56, .64, 1) .45s forwards
		}

		@keyframes pslide {
		    to {
		        transform: translateY(0) scale(1)
		    }
		}

		.popup-top-bar {
		    height: 3px;
		    background: linear-gradient(90deg, var(--theme), var(--theme-light), var(--gold))
		}

		.popup-glow {
		    position: absolute;
		    top: -80px;
		    right: -80px;
		    width: 240px;
		    height: 240px;
		    border-radius: 50%;
		    background: radial-gradient(circle, rgba(139, 34, 82, .3) 0%, transparent 70%);
		    pointer-events: none
		}

		.popup-inner {
		    padding: 2.8rem
		}

		.popup-logo {
		    font-family: 'Playfair Display', serif;
		    font-size: 1rem;
		    font-weight: 900;
		    letter-spacing: .12em;
		    color: var(--text);
		    display: flex;
		    align-items: center;
		    gap: 8px;
		    margin-bottom: 1.4rem
		}

		.popup-logo-dot {
		    width: 7px;
		    height: 7px;
		    background: var(--theme-light);
		    border-radius: 50%;
		    animation: pdot 2s ease-in-out infinite
		}

		@keyframes pdot {

		    0%,
		    100% {
		        box-shadow: 0 0 0 0 var(--theme-glow)
		    }

		    50% {
		        box-shadow: 0 0 0 5px transparent
		    }
		}

		.popup-box h2 {
		    font-family: 'Playfair Display', serif;
		    font-size: 1.85rem;
		    font-weight: 900;
		    line-height: 1.15;
		    margin-bottom: .8rem
		}

		.popup-box h2 em {
		    font-style: italic;
		    color: var(--theme-light)
		}

		.popup-box>div>p {
		    color: var(--text-dim);
		    font-weight: 300;
		    font-size: .9rem;
		    margin-bottom: 1.8rem;
		    line-height: 1.7
		}

		.popup-form {
		    display: flex;
		    flex-direction: column;
		    gap: .85rem
		}

		.popup-row {
		    display: grid;
		    grid-template-columns: 1fr 1fr;
		    gap: .85rem
		}

		.popup-form input,
		.popup-form select {
		    background: var(--surface);
		    border: 1px solid var(--border);
		    color: var(--text);
		    padding: 12px 15px;
		    font-family: 'DM Sans', sans-serif;
		    font-size: .88rem;
		    outline: none;
		    border-radius: var(--radius);
		    transition: border-color .3s;
		    width: 100%
		}

		.popup-form input:focus,
		.popup-form select:focus {
		    border-color: var(--theme-light)
		}

		.popup-form input::placeholder {
		    color: var(--text-faint)
		}

		.popup-form select option {
		    background: var(--dark3)
		}

		.popup-submit {
		    background: var(--theme);
		    color: #fff;
		    border: none;
		    padding: 13px;
		    font-family: 'DM Sans', sans-serif;
		    font-size: .92rem;
		    font-weight: 500;
		    cursor: none;
		    border-radius: var(--radius);
		    transition: background .3s, box-shadow .3s, transform .2s;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 9px;
		    width: 100%
		}

		.popup-submit:hover {
		    background: var(--theme-light);
		    box-shadow: 0 0 28px var(--theme-glow);
		    transform: translateY(-1px)
		}

		.popup-close {
		    position: absolute;
		    top: 1rem;
		    right: 1rem;
		    background: transparent;
		    border: 1px solid var(--border);
		    width: 30px;
		    height: 30px;
		    border-radius: 50%;
		    display: grid;
		    place-items: center;
		    cursor: none;
		    color: var(--text-faint);
		    transition: all .3s
		}

		.popup-close:hover {
		    border-color: var(--theme-light);
		    color: var(--theme-light);
		    background: var(--theme-faint)
		}

		.popup-skip {
		    text-align: center;
		    margin-top: 1rem;
		    font-size: .66rem;
		    letter-spacing: .1em;
		    color: var(--text-faint);
		    cursor: none;
		    transition: color .3s;
		    padding: 4px
		}

		.popup-skip:hover {
		    color: var(--text-dim)
		}

		/* ══ FLOATING BUTTONS ══ */


		/* ══ HERO ══ */
		.hero {
		    min-height: 100vh;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    padding: 0 10vw;
		    position: relative;
		    overflow: hidden
		}

		.hero-content {
		    position: relative;
		    z-index: 1;
		    max-width: 1300px
		}

		.hero-tag {
		    display: inline-flex;
		    align-items: center;
		    gap: 8px;
		    font-size: .7em;
		    letter-spacing: .15em;
		    text-transform: uppercase;
		    color: var(--theme-light);
		    border: 1px solid var(--border);
		    padding: 6px 16px;
		    border-radius: 20px;
		    margin-bottom: 1rem;
		    background: var(--theme-faint);
		    opacity: 0;
		    animation: fadeUp .8s ease .2s forwards
		}

		.hero-tag::before {
		    content: '';
		    width: 6px;
		    height: 6px;
		    background: var(--theme-light);
		    border-radius: 50%;
		    animation: blink 1.2s ease-in-out infinite;
		    flex-shrink: 0
		}

		@keyframes blink {

		    0%,
		    100% {
		        opacity: 1
		    }

		    50% {
		        opacity: .2
		    }
		}

		.hero h1 {
		    font-family: 'Playfair Display', serif;
		    font-size: clamp(2.5rem, 10vw, 5rem);
		    font-weight: 900;
		    line-height: 1.2;
		    letter-spacing: -.02em;
		    opacity: 0;
		    animation: fadeUp .9s ease .4s forwards
		}

		.hero h1 em {
		    font-style: italic;
		    color: var(--theme-light)
		}

		.hero h1 .stroke {
		    -webkit-text-stroke: 1px var(--text-dim);
		    color: transparent
		}

		.hero-sub {
		    font-size: 1.05rem;
		    color: var(--text-dim);
		    max-width: 520px;
		    margin-top: 1.8rem;
		    font-weight: 300;
		    line-height: 1.8;
		    opacity: 0;
		    animation: fadeUp .9s ease .6s forwards
		}

		.hero-actions {
		    display: flex;
		    gap: 1.2rem;
		    align-items: center;
		    margin-top: 3rem;
		    opacity: 0;
		    animation: fadeUp .9s ease .8s forwards
		}

		.btn-primary {
		    background: var(--theme);
		    color: #fff;
		    text-decoration: none;
		    padding: 16px 40px;
		    border-radius: var(--radius);
		    font-size: .9rem;
		    font-weight: 500;
		    letter-spacing: .05em;
		    position: relative;
		    overflow: hidden;
		    transition: box-shadow .4s, transform .3s;
		    display: inline-flex;
		    align-items: center;
		    gap: 10px
		}

		.btn-primary::before {
		    content: '';
		    position: absolute;
		    inset: 0;
		    background: linear-gradient(135deg, rgba(255, 255, 255, .1) 0%, transparent 50%);
		    opacity: 0;
		    transition: opacity .3s
		}

		.btn-primary:hover {
		    box-shadow: 0 0 40px var(--theme-glow);
		    transform: translateY(-2px)
		}

		.btn-primary:hover::before {
		    opacity: 1
		}

		.btn-secondary {
		    color: var(--text-dim);
		    text-decoration: none;
		    font-size: .88rem;
		    letter-spacing: .08em;
		    display: inline-flex;
		    align-items: center;
		    gap: 10px;
		    transition: color .3s
		}

		.btn-secondary .arr {
		    width: 32px;
		    height: 32px;
		    border-radius: 50%;
		    border: 1px solid var(--text-faint);
		    display: grid;
		    place-items: center;
		    transition: border-color .3s, transform .3s
		}

		.btn-secondary:hover {
		    color: var(--text)
		}

		.btn-secondary:hover .arr {
		    border-color: var(--theme-light);
		    transform: rotate(45deg)
		}

		.hero-stats {
		    display: flex;
		    gap: 3rem;
		    margin-top: 5rem;
		    opacity: 0;
		    animation: fadeUp .9s ease 1s forwards;
		    padding-top: 3rem;
		    border-top: 1px solid var(--border)
		}

		.stat-num {
		    font-family: 'Playfair Display', serif;
		    font-size: 2.5rem;
		    font-weight: 700;
		    line-height: 1
		}

		.stat-num span {
		    color: var(--theme-light)
		}

		.stat-label {
		    font-size: .9em;
		    color: white;
		    opacity: 0.7;
		    letter-spacing: .1em;
		    text-transform: uppercase;
		    margin-top: 10px;
		}

		.scroll-ind {
		    position: absolute;
		    bottom: 3rem;
		    left: 50%;
		    transform: translateX(-50%);
		    z-index: 1;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    gap: 8px;
		    font-size: .9em;
		    color: var(--text-faint);
		    letter-spacing: .12em;
		    text-transform: uppercase;
		    animation: fadeIn 1s ease 1.5s both
		}

		.scroll-line {
		    width: 1px;
		    height: 50px;
		    background: linear-gradient(180deg, var(--theme-light), transparent);
		    animation: scrollDown 1.8s ease-in-out infinite
		}

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

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

		    51% {
		        transform-origin: bottom
		    }

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

		@keyframes fadeUp {
		    from {
		        opacity: 0;
		        transform: translateY(30px)
		    }

		    to {
		        opacity: 1;
		        transform: translateY(0)
		    }
		}

		@keyframes fadeIn {
		    from {
		        opacity: 0
		    }

		    to {
		        opacity: 1
		    }
		}

		/* ══ MARQUEE ══ */
		.marquee-section {
		    padding: 2rem 0;
		    border-top: 1px solid var(--border);
		    border-bottom: 1px solid var(--border);
		    background: var(--dark2);
		    overflow: hidden
		}

		.marquee-track {
		    display: flex;
		    gap: 4rem;
		    animation: marqueeScroll 25s linear infinite;
		    white-space: nowrap
		}

		.marquee-track:hover {
		    animation-play-state: paused
		}

		@keyframes marqueeScroll {
		    from {
		        transform: translateX(0)
		    }

		    to {
		        transform: translateX(-50%)
		    }
		}

		.marquee-item {
		    font-size: .75rem;
		    letter-spacing: .15em;
		    text-transform: uppercase;
		    color: var(--text-faint);
		    display: flex;
		    align-items: center;
		    gap: 1.5rem;
		    flex-shrink: 0
		}

		.mdot {
		    color: var(--theme-light)
		}

		/* ══ SECTIONS ══ */
		section {
		    padding: 8rem 10vw
		}

		.section-tag {
		    font-size: 1.1em;
		    letter-spacing: .18em;
		    text-transform: uppercase;
		    color: var(--theme-light);
		    margin-bottom: 1.2rem;
		    display: flex;
		    align-items: center;
		    gap: 12px
		}

		.section-tag::before {
		    content: '';
		    display: block;
		    width: 32px;
		    height: 1px;
		    background: var(--theme-light)
		}

		.section-title {
		    font-family: 'Playfair Display', serif;
		    font-size: clamp(2rem, 4vw, 3.5rem);
		    font-weight: 900;
		    line-height: 1.1;
		    letter-spacing: -.01em
		}

		.section-title em {
		    font-style: italic;
		    color: var(--theme-light)
		}

		/* ══ SERVICES ══ */
		.services {
		    background: var(--dark2);
		    position: relative;
		    overflow: hidden
		}

		.svc-deco {
		    position: absolute;
		    bottom: -80px;
		    right: -80px;
		    opacity: .05;
		    pointer-events: none
		}

		.services-header {
		    display: flex;
		    justify-content: space-between;
		    align-items: flex-end;
		    margin-bottom: 5rem
		}

		.services-desc {
		    max-width: 380px;
		    color: var(--text-dim);
		    font-weight: 300
		}

		.services-grid {
		    display: grid;
		    grid-template-columns: repeat(3, 1fr);
		    gap: 1.5px;
		    position: relative;
		    z-index: 1
		}

		.service-card {
		    background: var(--dark3);
		    padding: 2em;
		    position: relative;
		    overflow: hidden;
		    transition: background .4s;
		    cursor: none
		}

		.service-card::before {
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    height: 2px;
		    background: linear-gradient(90deg, transparent, var(--theme-light), transparent);
		    transform: scaleX(0);
		    transform-origin: left;
		    transition: transform .5s cubic-bezier(.25, .46, .45, .94)
		}

		.service-card::after {
		    content: '';
		    position: absolute;
		    inset: 0;
		    background: radial-gradient(circle at 30% 30%, var(--theme-faint) 0%, transparent 60%);
		    opacity: 0;
		    transition: opacity .5s
		}

		.service-card:hover {
		    background: var(--surface)
		}

		.service-card:hover::before {
		    transform: scaleX(1)
		}

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

		.svc-num {
		    font-size: 3em;
		    color: var(--text-faint);
		    letter-spacing: .12em;
		    margin-bottom: 2rem;
		    font-weight: bold;
		}

		.svc-icon {
		    width: 52px;
		    height: 52px;
		    margin-bottom: 1.8rem;
		    background: var(--theme-faint);
		    border: 1px solid var(--border);
		    border-radius: var(--radius);
		    display: grid;
		    place-items: center;
		    transition: background .3s, box-shadow .3s
		}

		.service-card:hover .svc-icon {
		    background: rgba(139, 34, 82, .2);
		    box-shadow: 0 0 20px var(--theme-glow)
		}

		.service-card h3 {
		    font-family: 'Playfair Display', serif;
		    font-size: 1.5rem;
		    font-weight: 700;
		    margin-bottom: .8rem;
		    transition: color .3s
		}

		.service-card:hover h3 {
		    color: var(--theme-light)
		}

		.service-card p {
		    color: var(--text-dim);
		    font-size: 1.1em;
		    font-weight: 300;
		    line-height: 1.8
		}

		.svc-tags {
		    display: flex;
		    flex-wrap: wrap;
		    gap: 6px;
		    margin-top: 1.8rem
		}

		.tag-pill {
		    font-size: .8em;
		    letter-spacing: .1em;
		    text-transform: uppercase;
		    color: var(--text-dim);
		    padding: 4px 12px;
		    border: 1px solid var(--border);
		    border-radius: 20px;
		    background: var(--theme-faint);
		    transition: background .3s, box-shadow .3s
		}

		.service-card:hover .tag-pill {
		    background: rgba(139, 34, 82, .15);
		    box-shadow: 0 0 8px var(--theme-glow)
		}

		/* ══ PROCESS ══ */
		.process {
		    background: var(--dark);
		    position: relative;
		    overflow: hidden
		}

		.proc-deco {
		    position: absolute;
		    top: 10%;
		    left: -80px;
		    opacity: .04;
		    pointer-events: none
		}

		.process-header {
		    margin-bottom: 5rem;
		    position: relative;
		    z-index: 1
		}

		.process-timeline {
		    position: relative;
		    z-index: 1
		}

		.process-timeline::before {
		    content: '';
		    position: absolute;
		    left: 28px;
		    top: 0;
		    bottom: 0;
		    width: 1px;
		    background: var(--border)
		}

		.process-step {
		    display: flex;
		    gap: 3rem;
		    margin-bottom: 4rem;
		    opacity: 0;
		    transform: translateX(-20px);
		    transition: opacity .6s, transform .6s
		}

		.process-step.visible {
		    opacity: 1;
		    transform: translateX(0)
		}

		.step-ind {
		    flex-shrink: 0;
		    width: 56px;
		    height: 56px;
		    border: 1px solid var(--border);
		    border-radius: 50%;
		    background: var(--dark2);
		    display: grid;
		    place-items: center;
		    font-size: .75rem;
		    color: var(--text-faint);
		    position: relative;
		    z-index: 1;
		    transition: all .4s
		}

		.process-step:hover .step-ind {
		    border-color: var(--theme-light);
		    background: rgba(139, 34, 82, .15);
		    color: var(--theme-light);
		    box-shadow: 0 0 20px var(--theme-glow)
		}

		.step-content h3 {
		    font-family: 'Playfair Display', serif;
		    font-size: 1.6rem;
		    font-weight: 700;
		    margin-bottom: .6rem
		}

		.step-content p {
		    color: var(--text-dim);
		    font-weight: 300;
		    max-width: 550px
		}

		.step-meta {
		    font-size: .72rem;
		    color: var(--theme-light);
		    margin-top: .8rem;
		    letter-spacing: .1em
		}

		/* ══ PORTFOLIO ══ */
		.portfolio {
		    background: var(--dark2)
		}

		.portfolio-header {
		    display: flex;
		    justify-content: space-between;
		    align-items: flex-end;
		    margin-bottom: 4rem
		}

		.pf-filter {
		    display: flex;
		    gap: .8rem
		}

		.filter-btn {
		    font-size: .7rem;
		    letter-spacing: .1em;
		    text-transform: uppercase;
		    padding: 8px 18px;
		    border-radius: 20px;
		    border: 1px solid var(--border);
		    background: transparent;
		    color: var(--text-faint);
		    cursor: none;
		    transition: all .3s
		}

		.filter-btn.active,
		.filter-btn:hover {
		    border-color: var(--theme-light);
		    color: var(--theme-light);
		    background: var(--theme-faint)
		}

		.portfolio-grid {
		    display: grid;
		    grid-template-columns: repeat(12, 1fr);
		    gap: 1.5rem
		}

		.pi {
		    position: relative;
		    overflow: hidden;
		    border-radius: 15px;
		    cursor: none
		}

		.pi:nth-child(1) {
		    grid-column: span 8;
		    height: 420px
		}

		.pi:nth-child(2) {
		    grid-column: span 4;
		    height: 420px
		}

		.pi:nth-child(3) {
		    grid-column: span 4;
		    height: 360px
		}

		.pi:nth-child(4) {
		    grid-column: span 8;
		    height: 360px
		}

		.pi:hover .pi-img {
		    transform: scale(1.06)
		}

		.pi-img {
		    width: 100%;
		    height: 100%;
		    transition: transform .8s cubic-bezier(.25, .46, .45, .94)
		}

		.pi-ov {
		    position: absolute;
		    inset: 0;
		    background: linear-gradient(180deg, transparent 30%, rgba(8, 6, 16, .94) 100%);
		    display: flex;
		    flex-direction: column;
		    justify-content: flex-end;
		    padding: 2rem;
		    transform: translateY(20px);
		    opacity: 0;
		    transition: all .4s
		}

		.pi:hover .pi-ov {
		    transform: translateY(0);
		    opacity: 1
		}

		.pi-cat {
		    font-size: .8em;
		    letter-spacing: .15em;
		    text-transform: uppercase;
		    color: white;
		    margin-bottom: .4rem
		}

		.pi-title {
		    font-family: 'Playfair Display', serif;
		    font-size: 1.4rem;
		    font-weight: 700
		}

		.pi1 {
		    background: linear-gradient(135deg, #1a0a16, #3d1a2e, #6b2845)
		}

		.pi2 {
		    background: linear-gradient(135deg, #0d1021, #1a2045, #2d3870)
		}

		.pi3 {
		    background: linear-gradient(135deg, #081512, #0f2e22, #1e5040)
		}

		.pi4 {
		    background: linear-gradient(135deg, #150e0a, #2e1e0f, #4a3020)
		}

		.pi-pat {
		    position: absolute;
		    inset: 0;
		    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
		    background-size: 30px 30px
		}

		.pi-svg {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    opacity: .09;
		    pointer-events: none
		}

		.pi-lbl {
		    position: absolute;
		    inset: 0;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-family: 'Playfair Display', serif;
		    font-size: 2.5rem;
		    color: rgba(255, 255, 255, .05);
		    font-style: italic;
		    font-weight: 900
		}

		/* ══ STATS BAND ══ */
		.stats-band {
		    background: var(--theme);
		    padding: 5rem 10vw;
		    display: grid;
		    grid-template-columns: repeat(4, 1fr);
		    gap: 2rem;
		    position: relative;
		    overflow: hidden
		}

		.stats-band::before {
		    content: '';
		    position: absolute;
		    inset: 0;
		    background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255, 255, 255, .06) 0%, transparent 70%)
		}

		.stat-block {
		    text-align: center;
		    position: relative;
		    z-index: 1
		}

		.stat-block .num {
		    font-family: 'Playfair Display', serif;
		    font-size: 4rem;
		    font-weight: 900;
		    line-height: 1;
		    color: #fff
		}

		.stat-block .unit {
		    font-size: 2rem;
		    color: rgba(255, 255, 255, .6)
		}

		.stat-block .label {
		    font-size: .72rem;
		    letter-spacing: .12em;
		    text-transform: uppercase;
		    color: rgba(255, 255, 255, .7);
		    margin-top: .5rem
		}

		/* ══ TESTIMONIALS ══ */
		.testimonials {
		    background: var(--dark3)
		}

		.testimonials-header {
		    margin-bottom: 4rem
		}

		.testi-grid {
		    display: grid;
		    grid-template-columns: repeat(3, 1fr);
		    gap: 1.5rem
		}

		.testi-card {
		    background: var(--surface);
		    padding: 2.5rem;
		    border: 1px solid var(--border);
		    border-radius: var(--radius);
		    position: relative;
		    transition: border-color .4s, box-shadow .4s, transform .4s
		}

		.testi-card::before {
		    content: '"';
		    position: absolute;
		    top: -.5rem;
		    left: 2rem;
		    font-family: 'Playfair Display', serif;
		    font-size: 6rem;
		    color: var(--theme);
		    line-height: 1;
		    opacity: .25
		}

		.testi-card:hover {
		    border-color: var(--theme-light);
		    box-shadow: 0 0 40px rgba(139, 34, 82, .15);
		    transform: translateY(-4px)
		}

		.testi-text {
		    color: var(--text-dim);
		    font-weight: 300;
		    line-height: 1.9;
		    font-size: .95rem;
		    margin-bottom: 1.8rem;
		    font-style: italic
		}

		.testi-author {
		    display: flex;
		    align-items: center;
		    gap: 1rem
		}

		.testi-avatar {
		    width: 44px;
		    height: 44px;
		    border-radius: 50%;
		    background: var(--theme-faint);
		    border: 1px solid var(--border);
		    display: grid;
		    place-items: center;
		    flex-shrink: 0
		}

		.testi-name {
		    font-weight: 500;
		    font-size: .9rem
		}

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

		.testi-stars {
		    color: var(--gold);
		    letter-spacing: 2px;
		    font-size: .85rem;
		    margin-bottom: .8rem
		}

		/* ══ TECH STACK ══ */
		.tech-stack {
		    background: var(--dark2)
		}

		.tech-header {
		    margin-bottom: 4rem
		}

		.tech-grid {
		    display: grid;
		    grid-template-columns: repeat(6, 1fr);
		    gap: 1.5rem
		}

		.tech-item {
		    background: var(--dark3);
		    border: 1px solid var(--border);
		    padding: 2rem 1rem;
		    text-align: center;
		    border-radius: var(--radius);
		    transition: all .3s;
		    cursor: none;
		    position: relative;
		    overflow: hidden
		}

		.tech-item::before {
		    content: '';
		    position: absolute;
		    inset: 0;
		    background: radial-gradient(circle at 50% 100%, var(--theme-faint), transparent 70%);
		    opacity: 0;
		    transition: opacity .3s
		}

		.tech-item:hover {
		    border-color: var(--theme-light);
		    background: var(--surface);
		    box-shadow: 0 0 20px var(--theme-glow);
		    transform: translateY(-6px)
		}

		.tech-item:hover::before {
		    opacity: 1
		}

		.tech-svg {
		    width: 38px;
		    height: 38px;
		    margin: 0 auto .8rem;
		    display: block
		}

		.tech-name {
		    font-size: .7rem;
		    letter-spacing: .1em;
		    text-transform: uppercase;
		    color: var(--text-dim)
		}

		/* ══ CTA ══ */
		.cta-section {
		    background: var(--dark);
		    padding: 10rem 10vw;
		    text-align: center;
		    position: relative;
		    overflow: hidden
		}

		.cta-bg {
		    position: absolute;
		    inset: 0;
		    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139, 34, 82, .14) 0%, transparent 70%)
		}

		.cta-deco {
		    position: absolute;
		    opacity: .05;
		    pointer-events: none
		}

		.cta-deco.left {
		    left: -80px;
		    top: 50%;
		    transform: translateY(-50%)
		}

		.cta-deco.right {
		    right: -80px;
		    top: 50%;
		    transform: translateY(-50%) scaleX(-1)
		}

		.cta-content {
		    position: relative;
		    z-index: 1;
		    max-width: 700px;
		    margin: 0 auto
		}

		.cta-title {
		    font-family: 'Playfair Display', serif;
		    font-size: clamp(2.5rem, 5vw, 5rem);
		    font-weight: 900;
		    line-height: 1.1;
		    margin-bottom: 1.5rem
		}

		.cta-title em {
		    font-style: italic;
		    color: var(--theme-light)
		}

		.cta-sub {
		    color: var(--text-dim);
		    font-weight: 300;
		    font-size: 1.05rem;
		    margin-bottom: 3rem
		}

		.cta-row {
		    display: flex;
		    max-width: 500px;
		    margin: 0 auto
		}

		.cta-input {
		    flex: 1;
		    padding: 16px 24px;
		    background: var(--surface);
		    border: 1px solid var(--border);
		    border-right: none;
		    color: var(--text);
		    font-family: 'DM Sans', sans-serif;
		    font-size: .95rem;
		    outline: none;
		    transition: border-color .3s
		}

		.cta-input:focus {
		    border-color: var(--theme-light)
		}

		.cta-input::placeholder {
		    color: var(--text-faint)
		}

		.cta-btn {
		    background: var(--theme);
		    color: #fff;
		    padding: 16px 32px;
		    border: none; 
		    font-size: .95rem;
		    cursor: none;
		    border-radius: var(--radius);
		    transition: background .3s, box-shadow .3s;
		    white-space: nowrap
		}

		.cta-btn:hover {
		    background: var(--theme-light);
		    box-shadow: 0 0 30px var(--theme-glow)
		}

		/* ══ FOOTER ══ */
		footer {
		    background: var(--dark2);
		    border-top: 1px solid var(--border);
		    padding: 5rem 10vw 3rem
		}

		.footer-grid {
		    display: grid;
		    grid-template-columns: 2fr 1fr 1fr 1fr;
		    gap: 4rem;
		    margin-bottom: 4rem
		}

		.footer-brand p {
		    color: var(--text-dim);
		    font-weight: 300;
		    font-size: .9rem;
		    margin: 1.2rem 0 1.5rem;
		    max-width: 280px
		}

		.footer-socials {
		    display: flex;
		    gap: .8rem
		}

		.social-btn {
		    width: 38px;
		    height: 38px;
		    border-radius: var(--radius);
		    border: 1px solid var(--border);
		    background: var(--dark);
		    display: grid;
		    place-items: center;
		    color: var(--text-dim);
		    text-decoration: none;
		    transition: all .3s
		}

		.social-btn:hover {
		    border-color: var(--theme-light);
		    background: var(--theme-faint);
		    color: var(--theme-light)
		}

		.footer-col h4 {
		    font-size: .72rem;
		    letter-spacing: .15em;
		    text-transform: uppercase;
		    color: var(--text-faint);
		    margin-bottom: 1.5rem
		}

		.footer-col ul {
		    list-style: none
		}

		.footer-col li {
		    margin-bottom: .8rem
		}

		.footer-col a {
		    color: var(--text-dim);
		    text-decoration: none;
		    font-size: .9rem;
		    transition: color .3s
		}

		.footer-col a:hover {
		    color: var(--theme-light)
		}

		.footer-bottom {
		    border-top: 1px solid var(--border);
		    padding-top: 2rem;
		    display: flex;
		    justify-content: space-between;
		    align-items: center
		}

		.footer-bottom p {
		    color: var(--text-faint);
		    font-size: .82rem;
		    font-family: 'Space Mono', monospace
		}

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

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

		.rd1 {
		    transition-delay: .15s
		}

		.rd2 {
		    transition-delay: .3s
		}

		.rd3 {
		    transition-delay: .45s
		}

		@media(max-width:900px) {
		   section {
		        padding: 5% 5%;
		    }

		    .nav-links {
		        display: none
		    }

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

		    .pi:nth-child(n) {
		        grid-column: span 12 !important;
		        height: 260px !important
		    }

		    .stats-band {
		        grid-template-columns: repeat(2, 1fr)
		    }

		    .testi-grid {
		        grid-template-columns: 1fr
		    }

		    .tech-grid {
		        grid-template-columns: repeat(3, 1fr)
		    }

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

		    .hero {
		        padding: 0 5vw
		    }

		    .hero-stats {
		        flex-wrap: wrap;
		        gap: 2rem
		    }

		    .services-header,
		    .portfolio-header {
		        flex-direction: column;
		        gap: 2rem;
		        align-items: flex-start
		    }

		    .popup-row {
		        grid-template-columns: 1fr
		    }

		    .float-btns {
		        right: 1rem;
		        bottom: 1.2rem
		    }

		    .hero-geo {
		        opacity: .06;
		        right: -10vw
		    }
		}