/* ============ Brand tokens & helpers ============ */
:root {
    --sun: #FFC20E;
    --flame: #FF8A1F;
    --ember: #F2495B;
    --berry: #C21E74;
    --ink: #16101C;
    --ease: cubic-bezier(.16, 1, .3, 1)
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip
}

body {
    font-family: 'Manrope', system-ui, sans-serif
}

body.menu-open {
    overflow: hidden
}

::selection {
    background: #FF8A1F;
    color: #fff
}

.i-mark,
.i-logo,
.i-logo-light {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.i-mark {
    background-image: url("../img/mark.png");
    aspect-ratio: 205/189
}

.i-logo {
    background-image: url("../img/logo.png");
    aspect-ratio: 613/189
}

.i-logo-light {
    background-image: url("../img/logo-light.png");
    aspect-ratio: 613/189
}

.grad-bg {
    background: linear-gradient(100deg, #FFB81C 0%, #FF8A1F 38%, #F2495B 78%, #D4246E 100%)
}

.grad-text {
    background: linear-gradient(100deg, #F26A0C 0%, #EA4A3A 52%, #CB2A6E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.grad-text-lt {
    background: linear-gradient(100deg, #FFC20E 0%, #FF8A1F 40%, #F2495B 80%, #E02C7E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.btn-fire {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(100deg, #F26B0F, #EB4A3F 55%, #D12A6A);
    box-shadow: 0 16px 32px -14px rgba(235, 74, 63, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: box-shadow .3s, filter .3s
}

.btn-fire::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-130%)
}

.btn-fire:hover::after {
    transform: translateX(130%);
    transition: transform .9s var(--ease)
}

.btn-fire:hover {
    box-shadow: 0 22px 40px -14px rgba(235, 74, 63, .85), inset 0 1px 0 rgba(255, 255, 255, .3)
}

.mag {
    transition: transform .35s var(--ease);
    will-change: transform
}

/* ============ Preloader ============ */
#loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #FFF8F0;
    display: grid;
    place-items: center;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s cubic-bezier(.77, 0, .18, 1) .1s
}

.loaded #loader {
    clip-path: inset(0 0 100% 0)
}

.ld-mark {
    animation: ldPulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 18px 24px rgba(242, 73, 91, .35))
}

.ld-bar {
    transform-origin: left;
    animation: ldBar 1.15s ease-in-out forwards
}

@keyframes ldPulse {

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

    50% {
        transform: translateY(-10px) scale(1.06)
    }
}

@keyframes ldBar {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

/* ============ Scroll reveal ============ */
/* .rv — literal class; [data-rv] — eson_reveal() attr. Ikkalasi ham bir xil ishlaydi. */
.rv,
[data-rv] {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity .9s var(--ease), transform 1.1s var(--ease)
}

.rv[data-rv="left"],
[data-rv="left"] {
    transform: translateX(-60px)
}

.rv[data-rv="right"],
[data-rv="right"] {
    transform: translateX(60px)
}

.rv[data-rv="zoom"],
[data-rv="zoom"] {
    transform: scale(.88)
}

@media (max-width:1023px) {

    .rv[data-rv="left"],
    .rv[data-rv="right"],
    [data-rv="left"],
    [data-rv="right"] {
        transform: translateY(46px)
    }
}

.rv.in,
[data-rv].in {
    opacity: 1;
    transform: none
}

.ln {
    display: block;
    overflow: hidden;
    padding-bottom: .26em;
    margin-bottom: -.26em
}

.ln-i {
    display: inline-block;
    padding-bottom: .2em;
    margin-bottom: -.2em;
    transform: translateY(112%) rotate(3deg);
    transform-origin: left bottom;
    transition: transform 1.15s var(--ease)
}

.loaded .hero-h .ln-i,
.rv.in .ln-i,
[data-rv].in .ln-i {
    transform: none
}

.hero-h .ln:nth-child(1) .ln-i {
    transition-delay: .55s
}

.hero-h .ln:nth-child(2) .ln-i {
    transition-delay: .68s
}

.hero-h .ln:nth-child(3) .ln-i {
    transition-delay: .81s
}

.hero-in {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform 1s var(--ease)
}

.loaded .hero-in {
    opacity: 1;
    transform: none
}

.eyebrow-line {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1s var(--ease) .5s
}

.loaded .eyebrow-line,
.rv.in .eyebrow-line,
[data-rv].in .eyebrow-line {
    transform: scaleX(1)
}

/* ============ Header ============ */
#hdr {
    transition: transform .5s var(--ease), background-color .4s, box-shadow .4s, backdrop-filter .4s
}

#hdr.scrolled {
    background: rgba(255, 248, 240, .82);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 10px 30px -18px rgba(22, 16, 28, .35)
}

#hdr.hide {
    transform: translateY(-110%)
}

.nav-link {
    position: relative;
    padding: 8px 0;
    transition: color .3s
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #FF8A1F, #F2495B);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease)
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left
}

.nav-link.active {
    color: #E8443C
}

#mmenu {
    clip-path: circle(0 at calc(100% - 44px) 38px);
    transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
    pointer-events: none
}

.menu-open #mmenu {
    clip-path: circle(150% at calc(100% - 44px) 38px);
    pointer-events: auto
}

#mmenu a.m-i {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s var(--ease), transform .7s var(--ease)
}

.menu-open #mmenu a.m-i {
    opacity: 1;
    transform: none
}

.burger i {
    display: block;
    height: 2.5px;
    width: 22px;
    border-radius: 3px;
    background: #16101C;
    transition: transform .45s var(--ease), opacity .3s
}

.burger i+i {
    margin-top: 6px
}

.menu-open .burger i:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg)
}

.menu-open .burger i:nth-child(2) {
    opacity: 0
}

.menu-open .burger i:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg)
}

/* ============ Hero motion graphics ============ */
.hero-bg {
    background: radial-gradient(55% 65% at 82% 28%, rgba(255, 138, 31, .26), transparent 62%), radial-gradient(40% 50% at 100% 100%, rgba(242, 73, 91, .2), transparent 62%), radial-gradient(35% 40% at 0% 100%, rgba(255, 194, 14, .18), transparent 60%), linear-gradient(#FFF8F0, #FFF1E3)
}

.blob {
    border-radius: 42% 58% 63% 37%/45% 38% 62% 55%;
    animation: blob 14s ease-in-out infinite;
    background: conic-gradient(from 200deg at 50% 50%, #FFC20E, #FF8A1F, #F2495B, #C21E74, #FF8A1F, #FFC20E);
    filter: blur(46px);
    opacity: .55
}

@keyframes blob {

    0%,
    100% {
        border-radius: 42% 58% 63% 37%/45% 38% 62% 55%;
        transform: rotate(0)
    }

    33% {
        border-radius: 61% 39% 44% 56%/57% 55% 45% 43%;
        transform: rotate(60deg)
    }

    66% {
        border-radius: 38% 62% 52% 48%/40% 60% 40% 60%;
        transform: rotate(130deg)
    }
}

.rib {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1
}

.loaded .rib {
    animation: ribIn 2.4s var(--ease) .7s forwards, ribSway 9s ease-in-out 3.2s infinite alternate
}

.rib.r2 {
    animation-delay: .9s, 3.4s
}

.rib.r3 {
    animation-delay: 1.1s, 3.6s
}

@keyframes ribIn {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes ribSway {
    from {
        transform: translate(0, 0)
    }

    to {
        transform: translate(-16px, -12px)
    }
}

.float {
    animation: float 6.5s ease-in-out infinite
}

.float-b {
    animation: float 8s ease-in-out -2s infinite
}

.float-c {
    animation: float 7s ease-in-out -4s infinite
}

@keyframes float {

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

    50% {
        transform: translateY(-16px) rotate(.8deg)
    }
}

.breathe {
    transform-origin: 25% 85%;
    animation: breathe 5s ease-in-out infinite
}

@keyframes breathe {

    0%,
    100% {
        transform: rotate(-1.6deg) scale(1)
    }

    50% {
        transform: rotate(1.4deg) scale(1.035)
    }
}

.spin-slow {
    animation: spin 38s linear infinite
}

.spin-rev {
    animation: spin 56s linear infinite reverse
}

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

.pulse-ring {
    animation: pulseRing 2.4s ease-out infinite
}

@keyframes pulseRing {
    0% {
        transform: scale(.9);
        opacity: .7
    }

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

.spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #FFC20E, #FF8A1F);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: twinkle 3s ease-in-out infinite
}

@keyframes twinkle {

    0%,
    100% {
        transform: scale(.3) rotate(0);
        opacity: .2
    }

    50% {
        transform: scale(1.2) rotate(90deg);
        opacity: 1
    }
}

.cq {
    container-type: inline-size
}

.bar {
    transform-origin: bottom;
    animation: bar 3.4s ease-in-out infinite
}

@keyframes bar {

    0%,
    100% {
        transform: scaleY(.35)
    }

    50% {
        transform: scaleY(1)
    }
}

.shimmer {
    background: linear-gradient(90deg, #f2e8df 0%, #fff 50%, #f2e8df 100%);
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite
}

@keyframes shimmer {
    to {
        background-position: -200% 0
    }
}

.lp-cursor {
    animation: lpCursor 6s ease-in-out infinite
}

@keyframes lpCursor {
    0% {
        left: 78%;
        top: 92%;
        opacity: 0
    }

    12% {
        opacity: 1
    }

    38% {
        left: 18%;
        top: 52%
    }

    48% {
        left: 18%;
        top: 52%;
        transform: scale(.85)
    }

    54% {
        transform: scale(1)
    }

    80% {
        left: 18%;
        top: 52%;
        opacity: 1
    }

    100% {
        left: 30%;
        top: 70%;
        opacity: 0
    }
}

.lp-btn {
    animation: lpBtn 6s ease-in-out infinite
}

@keyframes lpBtn {

    0%,
    44%,
    60%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(.9);
        filter: brightness(1.15)
    }
}

.draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 3.6s ease-in-out infinite
}

@keyframes draw {
    0% {
        stroke-dashoffset: 1
    }

    55%,
    100% {
        stroke-dashoffset: 0
    }
}

.wd {
    opacity: .35;
    transition: opacity .5s, transform .5s var(--ease), color .5s
}

.wd.on {
    opacity: 1;
    transform: translateX(8px);
    color: #E8443C
}

.wd i {
    display: inline-block;
    height: 2px;
    width: 26px;
    margin-right: 10px;
    vertical-align: middle;
    background: currentColor;
    transition: width .5s var(--ease)
}

.wd.on i {
    width: 48px
}

.dash-flow {
    animation: dashFlow 2s linear infinite
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -24
    }
}

/* ============ Marquee ============ */
.marquee {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite
}

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

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

/* ============ Services ============ */
.svc {
    position: relative;
    transition: opacity .9s var(--ease), transform .7s var(--ease), box-shadow .5s var(--ease), background-color .4s
}

.svc:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 30px 60px -34px rgba(194, 30, 116, .45)
}

.svc .num {
    position: relative;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #E4D2C4;
    letter-spacing: -.04em;
    min-width: 84px
}

.svc .num::after {
    content: attr(data-n);
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #FF8A1F, #F2495B 70%, #C21E74);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .7s var(--ease)
}

.svc:hover .num::after {
    clip-path: inset(0 0 0 0)
}

.svc .ico {
    display: inline-grid;
    place-items: center;
    height: 42px;
    width: 42px;
    color: #F0620F;
    transition: transform .5s var(--ease)
}

.svc:hover .ico {
    animation: wiggle .8s var(--ease)
}

/* Services widget (elementor-master) — MP4 card media, scoped so the
 * shared .svc/.ico rules used on other pages stay untouched. */
[data-eson-block="services"] .svc-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 20px;
    background: #F3E6DA
}

[data-eson-block="services"] .svc-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

[data-eson-block="services"] .svc-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: none;
    height: 48px;
    width: 48px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #fff;
    color: #16101C;
    box-shadow: 0 12px 30px -12px rgba(22, 16, 28, .45);
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

[data-eson-block="services"] .svc-toggle:hover {
    transform: scale(1.06);
    box-shadow: 0 16px 34px -12px rgba(22, 16, 28, .55)
}

[data-eson-block="services"] .svc-toggle .svc-toggle-pause {
    display: none
}

[data-eson-block="services"] .svc-toggle[aria-pressed="true"] .svc-toggle-pause {
    display: block
}

[data-eson-block="services"] .svc-toggle[aria-pressed="true"] .svc-toggle-play {
    display: none
}

/* Touch / coarse pointers have no hover — show the explicit toggle.
 * Reduced-motion users also get it since hover autoplay is disabled. */
@media (hover: none),
(pointer: coarse),
(prefers-reduced-motion: reduce) {
    [data-eson-block="services"] .svc-toggle {
        display: grid
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(0) scale(1)
    }

    30% {
        transform: rotate(-14deg) scale(1.2)
    }

    60% {
        transform: rotate(10deg) scale(1.15)
    }

    100% {
        transform: rotate(0) scale(1)
    }
}

/* ============ Portfolio ============ */
.tilt {
    transform-style: preserve-3d;
    transition: transform .5s var(--ease), box-shadow .5s;
    will-change: transform
}

.tilt.is-moving {
    transition: transform .08s linear, box-shadow .5s
}

.glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%)
}

.tilt:hover .glare {
    opacity: 1
}

.lift {
    transition: opacity .9s var(--ease), transform .7s var(--ease)
}

.rv.in.lift:hover,
[data-rv].in.lift:hover {
    transform: translateY(-8px)
}

.scene-in {
    transition: transform 1.2s var(--ease)
}

.pcard:hover .scene-in {
    transform: scale(1.07)
}

.sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sway 7s ease-in-out infinite alternate
}

@keyframes sway {
    from {
        transform: rotate(-3deg)
    }

    to {
        transform: rotate(3deg)
    }
}

.tw {
    animation: tw 3.2s ease-in-out infinite
}

.tw:nth-child(3n) {
    animation-delay: -1s
}

.tw:nth-child(3n+1) {
    animation-delay: -2.1s
}

.tw:nth-child(5n) {
    animation-delay: -.4s
}

@keyframes tw {

    0%,
    100% {
        opacity: .25
    }

    50% {
        opacity: 1
    }
}

.pcard .arr {
    transition: transform .5s var(--ease), background-color .3s, color .3s
}

.pcard:hover .arr {
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #FF8A1F, #F2495B);
    color: #fff;
    border-color: transparent
}

/* ============ Process ============ */
.mk {
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid #F1D5BE;
    font-family: Poppins, sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #C7A58B;
    transition: all .7s var(--ease)
}

.step.on .mk {
    background: linear-gradient(135deg, #FFA51F, #EB4A3F 60%, #D12A6A);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 9px rgba(255, 138, 31, .16), 0 18px 34px -12px rgba(242, 73, 91, .7)
}

.step .st {
    opacity: .45;
    transform: translateY(10px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.step.on .st {
    opacity: 1;
    transform: none
}

/* ============ Contact ============ */
.chip {
    transition: all .35s var(--ease)
}

.chip[aria-pressed="true"],
.chip[aria-current="page"] {
    background: linear-gradient(100deg, #F26B0F, #EB4A3F 60%, #D12A6A);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(235, 74, 63, .8)
}

.fld {
    transition: border-color .3s, box-shadow .3s, background-color .3s
}

.fld:focus {
    outline: none;
    border-color: #FF8A1F;
    box-shadow: 0 0 0 4px rgba(255, 138, 31, .2);
    background: #fff
}

.fld.err {
    border-color: #E5384F;
    box-shadow: 0 0 0 4px rgba(229, 56, 79, .15)
}

.shake {
    animation: shake .5s
}

@keyframes shake {

    20%,
    60% {
        transform: translateX(-7px)
    }

    40%,
    80% {
        transform: translateX(7px)
    }
}

.ok-check {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: okc .8s .2s var(--ease) forwards
}

@keyframes okc {
    to {
        stroke-dashoffset: 0
    }
}

.confetti {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    opacity: 0;
    animation: burst 1.4s var(--ease) forwards
}

@keyframes burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0)
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) rotate(var(--r))
    }
}

.spinner {
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 9999px;
    width: 20px;
    height: 20px;
    animation: spin .7s linear infinite
}

/* ============ Cursor / misc ============ */
#cur {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    pointer-events: none;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 9999px;
    border: 1.5px solid rgba(242, 73, 91, .65);
    opacity: 0;
    transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s
}

#cur.show {
    opacity: 1
}

#cur.big {
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: rgba(255, 138, 31, .12)
}

#curDot {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 91;
    pointer-events: none;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 9999px;
    background: #F2495B;
    opacity: 0;
    transition: opacity .3s
}

#curDot.show {
    opacity: 1
}

#toTop {
    transition: opacity .4s, transform .5s var(--ease);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none
}

#toTop.show {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.outline-text {
    -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5);
    color: transparent
}

.noise:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .05;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")
}

a,
button {
    -webkit-tap-highlight-color: transparent
}

:focus-visible {
    outline: 3px solid #FF8A1F;
    outline-offset: 3px;
    border-radius: 8px
}

@media (max-width:639px) {
    .svc .num {
        font-size: 46px;
        min-width: 64px
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important
    }

    .rv,
    [data-rv],
    .hero-in,
    .ln-i {
        opacity: 1 !important;
        transform: none !important
    }

    .rib {
        stroke-dashoffset: 0
    }
}

/* ============ Multi-page additions ============ */
#curtain {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    background: linear-gradient(120deg, #FFB81C, #FF8A1F 38%, #F2495B 76%, #C21E74);
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
    transition: clip-path .55s cubic-bezier(.77, 0, .18, 1)
}

#curtain .i-mark {
    filter: brightness(0) invert(1);
    opacity: .9
}

.leaving #curtain {
    clip-path: inset(0 0 0 0);
    pointer-events: auto
}

.fh {
    opacity: 0 !important;
    transform: scale(.92) !important;
    pointer-events: none
}

/* FAQ */
.faq {
    transition: opacity .9s var(--ease), transform 1.1s var(--ease), box-shadow .4s, border-color .4s
}

.faq.open {
    box-shadow: 0 30px 60px -40px rgba(194, 30, 116, .4);
    border-color: rgba(255, 138, 31, .45)
}

.faq-p {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--ease)
}

.faq-p>div {
    overflow: hidden
}

.faq.open .faq-p {
    grid-template-rows: 1fr
}

.faq .plus {
    transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s
}

.faq.open .plus {
    transform: rotate(135deg);
    background: linear-gradient(135deg, #FF8A1F, #F2495B);
    color: #fff;
    border-color: transparent
}

/* Article typography */
.prose-e {
    font-size: 17.5px;
    line-height: 1.8;
    color: rgba(22, 16, 28, .78)
}

.prose-e>*+* {
    margin-top: 1.15em
}

.prose-e h2 {
    font-family: Poppins, sans-serif;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: #16101C;
    font-size: clamp(25px, 3vw, 34px);
    margin-top: 2.2em;
    scroll-margin-top: 96px
}

.prose-e h3 {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    color: #16101C;
    font-size: 21px;
    margin-top: 1.8em
}

.prose-e a {
    color: #E8443C;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px
}

.prose-e ul,
.prose-e ol {
    padding-left: 1.4em
}

.prose-e ul {
    list-style: none
}

.prose-e ul li {
    position: relative;
    margin-top: .5em
}

.prose-e ul li::before {
    content: "";
    position: absolute;
    left: -1.3em;
    top: .72em;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: linear-gradient(135deg, #FF8A1F, #F2495B);
    transform: rotate(45deg)
}

.prose-e ol {
    list-style: decimal
}

.prose-e ol li {
    margin-top: .5em;
    padding-left: .3em
}

.prose-e ol li::marker {
    font-family: Poppins, sans-serif;
    font-weight: 800;
    color: #EB4A3F
}

.prose-e blockquote {
    position: relative;
    padding: 1.4em 1.6em 1.4em 2em;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 1.15em;
    line-height: 1.5;
    color: #16101C
}

.prose-e blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(#FFC20E, #F2495B, #C21E74)
}

.prose-e .callout {
    border-radius: 24px;
    padding: 1.3em 1.5em;
    background: linear-gradient(135deg, #FFF3D6, #FFE4DC);
    border: 1px solid rgba(255, 138, 31, .25);
    font-size: .96em;
    line-height: 1.7
}

.prose-e .callout strong {
    display: block;
    font-family: Poppins, sans-serif;
    color: #16101C;
    margin-bottom: .3em
}

.prose-e code {
    font-size: .88em;
    padding: .15em .45em;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08)
}

#readProg {
    position: fixed;
    left: 0;
    top: 76px;
    height: 3px;
    z-index: 49;
    background: linear-gradient(90deg, #FFC20E, #F2495B, #C21E74);
    width: 0;
    transition: opacity .3s
}

.toc a {
    display: block;
    border-left: 2px solid rgba(22, 16, 28, .1);
    padding: 7px 0 7px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(22, 16, 28, .55);
    transition: color .3s, border-color .3s, padding .4s var(--ease)
}

.toc a:hover {
    color: #16101C
}

.toc a.on {
    color: #E8443C;
    border-color: #F2495B;
    padding-left: 22px
}

/* horizontal drag scroller */
.drag {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
}

.drag::-webkit-scrollbar {
    display: none
}

.drag>* {
    flex: none;
    scroll-snap-align: start
}

.drag.grabbing {
    cursor: grabbing;
    scroll-snap-type: none
}

.drag.grabbing * {
    user-select: none
}

/* 404 */
.n404 {
    font-family: Poppins, sans-serif;
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.06em;
    font-size: clamp(130px, 30vw, 360px);
    display: flex;
    align-items: center;
    justify-content: center
}

.n404 .g {
    background: linear-gradient(100deg, #FFC20E, #FF8A1F 30%, #F2495B 60%, #C21E74 85%, #FFC20E);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gshift 7s linear infinite
}

@keyframes gshift {
    to {
        background-position: -220% 0
    }
}

.n404 .o {
    position: relative;
    display: inline-block;
    width: .74em;
    height: .74em;
    margin: 0 .03em
}

.glitch {
    animation: glitch 5s steps(1) infinite
}

@keyframes glitch {

    0%,
    92%,
    100% {
        transform: none
    }

    93% {
        transform: translate(-4px, 2px) skewX(-6deg)
    }

    95% {
        transform: translate(5px, -2px) skewX(5deg)
    }

    97% {
        transform: translate(-2px, 1px)
    }
}

.orbit {
    animation: spin 9s linear infinite
}

.orbit-rev {
    animation: spin 14s linear infinite reverse
}

/* misc */
.cat-dot {
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 9999px
}

.kbd {
    font-family: Poppins, sans-serif;
    font-weight: 700
}

.stat-ph {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed rgba(240, 98, 15, .55);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: .62em;
    font-weight: 700;
    color: #C2410C;
    background: rgba(255, 194, 14, .12);
    letter-spacing: 0;
    vertical-align: middle
}

@media (prefers-reduced-motion:reduce) {
    .n404 .g {
        animation: none
    }

    .glitch,
    .orbit,
    .orbit-rev {
        animation: none
    }
}

.bld {
    opacity: 0;
    transform: translateY(14px);
    animation: bld 9s var(--ease) infinite;
    animation-delay: var(--d, 0s)
}

@keyframes bld {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    9%,
    84% {
        opacity: 1;
        transform: none
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-6px)
    }
}

.grow-x {
    transform-origin: left;
    transform: scaleX(0);
    animation: growx 9s var(--ease) infinite;
    animation-delay: var(--d, 0s)
}

@keyframes growx {
    0% {
        transform: scaleX(0)
    }

    10%,
    84% {
        transform: scaleX(1)
    }

    94%,
    100% {
        transform: scaleX(0)
    }
}

@media (prefers-reduced-motion:reduce) {

    .bld,
    .grow-x {
        opacity: 1 !important;
        transform: none !important
    }
}

/* ============ Hero: Phoenix portal ============ */
.p3 {
    transform-style: preserve-3d
}

#tilt {
    will-change: transform
}

.glass {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 50px -26px rgba(22, 16, 28, .5), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.sun {
    background: radial-gradient(circle at 50% 50%, #FFE27A 0%, #FFB81C 28%, #FF8A1F 52%, rgba(242, 73, 91, .55) 74%, rgba(242, 73, 91, 0) 100%);
    opacity: .62;
    animation: sunPulse 5.5s ease-in-out infinite
}

@keyframes sunPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.94)
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06)
    }
}

.shock {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 138, 31, .7);
    opacity: 0;
    pointer-events: none
}

.loaded .shock {
    animation: shock 5.5s cubic-bezier(.2, .7, .2, 1) 1.2s infinite
}

@keyframes shock {
    0% {
        transform: scale(.35);
        opacity: .9
    }

    38% {
        transform: scale(1.32);
        opacity: 0
    }

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

.phx {
    opacity: 0
}

.loaded .phx {
    animation: phxIn 1.7s var(--ease) .55s both
}

@keyframes phxIn {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(50px);
        filter: blur(16px) brightness(2.2)
    }

    60% {
        opacity: 1;
        filter: blur(0) brightness(1.25)
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .phx {
        opacity: 1 !important;
        animation: none !important
    }

    .shock {
        display: none
    }
}

.portal {
    background: radial-gradient(circle at 50% 38%, #4A3585 0%, #241852 48%, #120D18 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 9px rgba(36, 24, 82, .10), 0 40px 90px -20px rgba(36, 24, 82, .55), inset 0 0 70px rgba(120, 90, 220, .35)
}

.portal::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 9999px;
    border: 1px dashed rgba(255, 255, 255, .18)
}

/* Gradient matn: g, y, p kabi harflarning past qismi qirqilmasin */
.grad-text,
.grad-text-lt {
    padding-bottom: .16em;
    margin-bottom: -.16em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
}

/* Pagination */
.pg:disabled {
    opacity: .35;
    pointer-events: none
}

.pg.is-active {
    background: linear-gradient(100deg, #F26B0F, #EB4A3F 60%, #D12A6A);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px -12px rgba(235, 74, 63, .8)
}

/* ============ Service landing blocks ============ */

/* Testimonials: scroll-snap track (works as a slider without a library) */
.tst-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    outline: none
}

.tst-track::-webkit-scrollbar {
    display: none
}

.tst-track:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 138, 31, .45);
    border-radius: 12px
}

.tst-card {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - .5rem)
}

@media (min-width: 640px) {
    .tst-card {
        flex-basis: calc(50% - .625rem)
    }
}

@media (min-width: 1024px) {
    .tst-track[data-visible="2"] .tst-card {
        flex-basis: calc(50% - .625rem)
    }

    .tst-track[data-visible="3"] .tst-card {
        flex-basis: calc(33.333% - .834rem)
    }
}

.tst-nav:focus-visible {
    outline: 2px solid #FF8A1F;
    outline-offset: 2px
}

/* Logo wall: uniform tiles, grayscale -> color */
.lw-grid {
    display: grid;
    grid-template-columns: repeat(var(--lw-cols-m, 2), minmax(0, 1fr))
}

@media (min-width: 640px) {
    .lw-grid {
        grid-template-columns: repeat(var(--lw-cols-t, 4), minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .lw-grid {
        grid-template-columns: repeat(var(--lw-cols-d, 5), minmax(0, 1fr))
    }
}

.lw-item {
    display: grid;
    place-items: center;
    height: 104px;
    padding: 20px 26px;
    border-radius: 24px;
    border: 1px solid rgba(22, 16, 28, .06);
    background: rgba(255, 255, 255, .75);
    transition: transform .45s var(--ease, cubic-bezier(.22, 1, .36, 1)), border-color .3s, background .3s
}

.lw-item:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 16, 28, .12);
    background: #fff
}

.lw-item:focus-visible {
    outline: 2px solid #FF8A1F;
    outline-offset: 2px
}

.lw-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .35s, opacity .35s
}

.lw-item:hover .lw-img,
.lw-item:focus-visible .lw-img {
    filter: grayscale(0);
    opacity: 1
}

/* Marquee mode: fixed tile width, pause on hover/focus */
.lw-track .lw-item {
    width: 220px;
    flex: none
}

.lw-marquee:hover .marquee,
.lw-marquee:focus-within .marquee {
    animation-play-state: paused
}

@media (prefers-reduced-motion: reduce) {
    .lw-track {
        animation: none !important;
        flex-wrap: wrap;
        transform: none !important
    }

    .lw-set[aria-hidden="true"] {
        display: none
    }
}

/* Guarantee shield visual */
.gr-shield {
    position: relative;
    aspect-ratio: 240/260;
    max-width: 320px;
    margin-inline: auto
}

/* Final CTA: scoped native lead form (posts to em_submit_form) */
.fcta-form form {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.fcta-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700
}

.fcta-form input[type="text"],
.fcta-form input[type="tel"],
.fcta-form input[type="email"],
.fcta-form input[type="url"],
.fcta-form input[type="number"],
.fcta-form input[type="date"],
.fcta-form select,
.fcta-form textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(22, 16, 28, .1);
    background: #FFF8F0;
    padding: 14px 18px;
    font-size: 15px;
    color: #16101C;
    outline: none;
    transition: border-color .2s, box-shadow .2s
}

.fcta-form input:focus,
.fcta-form select:focus,
.fcta-form textarea:focus {
    border-color: #FF8A1F;
    box-shadow: 0 0 0 3px rgba(255, 138, 31, .18)
}

.fcta-form .fld.err input,
.fcta-form .fld.err textarea,
.fcta-form .fld.err select {
    border-color: #E5384F;
    box-shadow: 0 0 0 3px rgba(229, 56, 79, .14)
}

/* Honeypot: never visible to humans, bots fill it anyway */
.fcta-form .fcta-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.fcta-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #FF8A1F, #F2495B 60%, #C21E74);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s
}

.fcta-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -14px rgba(242, 73, 91, .6)
}

.fcta-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none
}

.fcta-msg {
    border-radius: 14px;
    background: rgba(229, 56, 79, .08);
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #D12A6A
}

.fcta-ok {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    border-radius: 18px;
    border: 1px solid rgba(30, 158, 98, .25);
    background: rgba(30, 158, 98, .08);
    padding: 16px 18px
}

.fcta-ok.hidden {
    display: none
}

/* Project Video: scoped toggle button states */
[data-eson-block="project-video"] .vid-btn {
    transition: transform .3s, background-color .3s
}

[data-eson-block="project-video"] .vid-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: #fff
}

[data-eson-block="project-video"] .vid-btn:focus-visible {
    outline: 3px solid #FF8A1F;
    outline-offset: 3px
}

[data-eson-block="project-video"] .vid-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, .55)
}

@media (prefers-reduced-motion: reduce) {
    [data-eson-block="project-video"] .vid-btn {
        transition: none
    }
}

/* Project Summary: scoped article body typography
   h2 sarlavhalar avtomatik "01, 02…" raqamlanadi (grad-text) */
[data-eson-block="project-summary"] .psum-body {
    counter-reset: psum-h2;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(22, 16, 28, .75)
}

[data-eson-block="project-summary"] .psum-body>*+* {
    margin-top: 1rem
}

[data-eson-block="project-summary"] .psum-body>section,
[data-eson-block="project-summary"] .psum-body>h2 {
    margin-top: 3rem
}

[data-eson-block="project-summary"] .psum-body> :first-child {
    margin-top: 0 !important
}

[data-eson-block="project-summary"] .psum-body section>*+* {
    margin-top: 1rem
}

[data-eson-block="project-summary"] .psum-body h2 {
    counter-increment: psum-h2;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #16101C
}

[data-eson-block="project-summary"] .psum-body h2::before {
    content: counter(psum-h2, decimal-leading-zero);
    margin-right: .5rem;
    background: linear-gradient(100deg, #F26A0C 0%, #EA4A3A 52%, #CB2A6E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

[data-eson-block="project-summary"] .psum-body h3 {
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #16101C;
    margin-top: 1.5rem
}

[data-eson-block="project-summary"] .psum-body ul {
    margin-top: 1.25rem;
    display: grid;
    gap: .625rem;
    padding-left: 0;
    list-style: none
}

[data-eson-block="project-summary"] .psum-body li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: 1rem;
    background: #fff;
    padding: .75rem 1rem;
    font-size: 15px;
    font-weight: 600;
    color: rgba(22, 16, 28, .8)
}

[data-eson-block="project-summary"] .psum-body li::before {
    content: "";
    flex-shrink: 0;
    margin-top: 7px;
    height: 8px;
    width: 8px;
    border-radius: 9999px;
    background: linear-gradient(100deg, #FFC20E, #FF8A1F, #F2495B, #C21E74)
}

[data-eson-block="project-summary"] .psum-body a {
    color: #E8443C;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px
}

@media (min-width: 640px) {
    [data-eson-block="project-summary"] .psum-body h2 {
        font-size: 28px
    }

    [data-eson-block="project-summary"] .psum-body ul {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}