/* ============================================================
   WEB CLICK AGENCY — Stylesheet
   Display font: Oswald (condensed)  |  Body: Poppins
   Feature font: Neue Kaine Variable (About + Tech banner)
   ============================================================ */
@font-face {
    font-family: 'Neue Kaine';
    src: url('../fonts/neue-kaine-variable.ttf') format('truetype-variations'),url('../fonts/neue-kaine-variable.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #0a0014;
    --purple-1: #2a0a3a;
    --purple-2: #3d1359;
    --purple-deep: #16002b;
    --pink: #e23ad0;
    --pink-2: #ff4d9d;
    --violet: #7b2ff7;
    --violet-light: #b06cff;
    --grad-pill: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
    --grad-hero: radial-gradient(ellipse at 55% 40%,#c01e3c 0%,#7a1550 28%,#2a0a3a 60%,#0a0014 100%);
    --white: #ffffff;
    --muted: #c9b8d8;
    --ink: #15151a;
    --display: 'Neue Kaine','Oswald',sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Poppins',sans-serif;
    background: var(--bg);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1.hero-title2222 {
    font-size: 20px;
}

/*************************************** .case_study*********************************/
.h_sec30_banner{background:url(assets/img/casestudybanner.png)!important;width:100%;background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important;padding:120px 0 100px;}
.s30_left h1{font-family:'Britanica-HeavyItalic-Regular';font-weight:700;font-size:80px;color:#fff;text-transform:uppercase;letter-spacing:3px;}
.s30_left p{color:#fff;font-size:18px;line-height:34px;background:#ffffff2b;padding:15px 20px;border-radius:10px;font-family:'Inter';}
.s30_left{margin-top:70px;}
.h_sec30_banner{background:url(../assets/img/casestudybanner.png)!important;width:100%;background-size:contain!important;background-repeat:no-repeat!important;background-position:left!important;padding:120px 0 100px;position:relative;}
.s30_left h1{font-family:'Britanica-HeavyItalic-Regular';font-weight:700;font-size:80px;color:#fff;text-transform:uppercase;letter-spacing:3px;}
.s30_left p{color:#fff;font-size:18px;line-height:34px;background:#ffffff2b;padding:15px 20px;border-radius:10px;font-family:'Inter';}
.s30_left{margin-top:70px;}
.h_sec30_banner:before{position:absolute;content:"";background:url(../assets/img/fav.png) no-repeat;top:0;bottom:0;left:0;right:0;background-position:right;background-size:contain;}
.s30_right{text-align:right;}
.s30_right img{border-radius:20px;}
.h_sec31{background:#fff;padding:60px 0;position:relative;}
.s31_top h3{color:#212529;font-family:'Inter';font-size:30px;margin:0 0 15px;}
.s31_left p {
    color: #000;
}

.s31_right p {
    color: #000;
}
.s31_top h2{font-family:Inter;font-weight:700;font-size:60px;text-transform:uppercase;color:#212529;position:relative;z-index:1;}
.s31_right h3{color:#212529;font-family:'Inter';font-size:20px;}
.h_sec31:before{position:absolute;content:"";background:url(../assets/img/fav.png) no-repeat;top:0;bottom:0;left:0;right:0;background-position:left;background-size:contain;opacity:0.2;}
.h_sec31:after{position:absolute;content:"";background:url(../assets/img/casebackground1.png)no-repeat!important;background-repeat:no-repeat!important;top:0;bottom:0;left:0;right:0%;background-size:contain!important;background-position:right!important;opacity:0.3;}

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

.glimpse-grid .gg {
    height: 420px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    background: #111;
    cursor: pointer;
}

.glimpse-grid .gg img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateY(0);
    transition: transform 6s ease-in-out;
}

/* Move the tall website image upward on hover */
.glimpse-grid .gg:hover img {
    transform: translateY(calc(-100% + 420px));
}

/* Responsive */
@media (max-width: 991px) {
    .glimpse-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .glimpse-grid {
        grid-template-columns: 1fr;
    }

    .glimpse-grid .gg {
        height: 350px;
    }

    .glimpse-grid .gg:hover img {
        transform: translateY(calc(-100% + 350px));
    }
}




.animate-sec .img-holder,.web-gal .proj-img{transition:1s cubic-bezier(0.51,0.92,0.27,0.96)!important;background-size:cover;overflow:hidden;}
.animate-sec .img-holder:hover,.web-gal .proj-img:hover{background-position:100% 100%;transition:6s!important;transform:none;}
.animate-sec .img-holder{height:650px;box-shadow:0 0 20px #0000004a;}
.animate-sec{padding:50px 0;background:#fff;}
.animate-sec .screen-holder{background:url(../assets/img/casestudybanner.png)!important;padding:80px 80px 0;overflow:hidden;background-size:cover!important;background-position:center;border-radius:50px;}
.animate-sec h3,.logo-present h3{font-size:30px;color:#161515;margin:0 0 30px;}
.h_sec32{background:#fff;padding:60px 0;}
.s32_right{background:#444444;color:#fff;text-align:center;padding:10px 0;border-radius:10px;margin:0 0 20px;}
.s32_left h3{font-family:Inter;font-weight:700;font-size:60px;text-transform:uppercase;color:#212529;}
.s32_right h3{font-family:'Inter';font-size:30px;}
.s32_right.s32_2{background:#F4F1EE;color:#000;}
.s32_right.s32_3{background:#BE454D;}
.s32_right.s32_4{background:#C3467c;}
.s32_right.s32_5{background:#000000;}
.s32_right.s32_6{background:#373737;}
.s32_right.s32_7{background:#000000;}
.s32_right.s32_8{background:#fadc9c; color: #000;}
.s32_right.s32_9{background:#232426;}
.s32_right.s32_10{background:#f7b5d1;}
.s32_right.s32_11{background:#000; color: #fff;}
.s32_right.s32_12{background:#e5bac4;}
.s32_right.s32_13{background:#f4dce1; color: #000;}
.s32_right.s32_14{background:#c58b59;}
.s32_right.s32_15{background:#1a1b18;}
.s32_right.s32_16{background:#e489a8;}
.s32_right.s32_17{background:#c48c41;}
.s32_right.s32_18{background:#1f0f3c;}




.h_sec37{padding:60px 0;}
.s37_left h2{font-family:Inter;font-weight:700;font-size:60px;text-transform:uppercase;color:#ffffff;}
.s37_right p{color:#fff;}
.s38_box{color:#fff;}
.s38_box h3{margin-top:20px;}
.s38_box img{border-radius:10px;}
.s38_box.s38{margin-top:150px;margin-bottom:0;}
.s32_main{margin-top:130px;}
.h_sec33{background:#fff;padding:60px 0 0;}
.s33_top h2{font-family:Inter;font-weight:800;font-size:60px;text-transform:uppercase;color:#212529;margin:0 0 30px;}
.s33_left h2{font-family:Inter;font-weight:700;font-size:26px;text-transform:uppercase;color:#212529;}
.h_sec34.aerangis .container{background:url(../assets/img/s33_banner.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34.luxury .container{background:url(../assets/img/s33_banner2.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34.Mermoirs .container{background:url(../assets/img/s33_banner3.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34.SENNA .container{background:url(../assets/img/s33_banner4.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34.Howling  .container{background:url(../assets/img/s33_banner5.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34 .container{background:url(../assets/img/s33_banner1.jpg);height:760px;width:100%;background-repeat:no-repeat;background-size:contain;border-radius:50px;background-position:center;}
.h_sec34{background:#fff;padding:60px 0;}
.s33_right p {
    color: #000;
}

ul.star-rate li {
    display: inline-block;
    color: #f87e0e;
}

.logo-track img {
    height: 70px;
}






.s35_top h2{font-family:Inter;font-weight:800;font-size:60px;text-transform:uppercase;color:#212529;margin:0 0 30px;}
.h_sec35{background:#fff;}
.h_sec36{background:#fff;padding:0 0 60px;color:#fff;}
.h_sec36 .container{background:url(../assets/img/casestudybanner.png);background-repeat:no-repeat;background-size:cover;background-position:center;}
.s36_top{padding:60px 110px;text-align:center;}
ul.star-rate li{display:inline-block;color:#f87e0e;}
.s36_top img{margin:0 0 30px; display: inline-block;}

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

h1.hero-title.website {
    font-size: 70px;
    text-align: center;
}

.fc-item a {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

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

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.popup-modal {
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    border: none;
}

.popup-title {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: 22px;
    text-align: center;
    color: #000;
}

.popup-title span {
    color: #7b2ff7;
}

.popup-sub {
    text-align: center;
    margin-bottom: 25px;
    color: #000;
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-form input,.popup-form textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 12px 14px;
}

.popup-submit {
    width: 100%;
    border: none;
    padding: 15px;
    border-radius: 8px;
    background: #f84141;
    color: #fff;
}

.popup-submit:hover {
    background: #e12f2f;
}

h3.old_price {
    font-size: 1rem;
    text-decoration: line-through;
    color: #ffffff;
    margin: 0 9px 0 0;
}

/* ---------- Display headline helper ---------- */
.sec-title {
    font-family: 'Neue Kaine';
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 48px;
    line-height: 1.02;
    text-transform: uppercase;
    margin: 0;
}

.sec-title .muted {
    background: linear-gradient(109deg,#FFFFFF,#828282);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Gradient pill button ---------- */
.btn-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--grad-pill);
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 10px 60px 10px 30px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    /* keeps the expanding circle clipped to the pill shape */
    text-decoration: none;
    transition: transform .25s ease,box-shadow .25s ease;
    box-shadow: 0 8px 30px rgba(180,40,200,.35);
}

.btn-pill:hover,.btn-pill.is-hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 38px rgba(200,50,210,.55);
}

.btn-pill .label {
    position: relative;
    z-index: 2;
    transition: opacity .35s ease .05s,color .35s ease;
}

/* label fades out as the white circle takes over the whole button */
.btn-pill:hover .label,.btn-pill.is-hover .label {
    opacity: 0;
}

/* white circle that expands into the FULL button on hover */
.btn-pill .btn-arrow {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    width: 46px;
    border-radius: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    transition: width .45s cubic-bezier(.65,.05,.36,1),left .45s cubic-bezier(.65,.05,.36,1);
}

.btn-pill:hover .btn-arrow,.btn-pill.is-hover .btn-arrow {
    left: 0;
    /* expands leftward until it fills the whole pill */
    width: calc(100% - 0px);
    top: 0;
    bottom: 0;
}

/* two identical arrows, anchored to the right, same slide-swap as before */
.btn-pill .btn-arrow i {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #111;
    transition: transform .45s cubic-bezier(.65,.05,.36,1);
}

.btn-pill .btn-arrow i:nth-child(1) {
    transform: translateX(0);
}

.btn-pill .btn-arrow i:nth-child(2) {
    transform: translateX(-260%);
}

.btn-pill:hover .btn-arrow i:nth-child(1),.btn-pill.is-hover .btn-arrow i:nth-child(1) {
    transform: translateX(260%);
}

.btn-pill:hover .btn-arrow i:nth-child(2),.btn-pill.is-hover .btn-arrow i:nth-child(2) {
    transform: translateX(0);
    transform: translateX(-90px);
    font-size: 25px;
}

/* ============================================================
 HEADER
 ============================================================ */
@font-face {
    font-family: "Neue Kaine"!important;
    src: url("../fonts/neue-kaine-variable.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding-top: 26px;
    background: #0000001c;
}

.navbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand {
    display: inline-flex;
    flex-direction: column;
    line-height: .9;
}

.brand-web {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .5px;
    color: #fff;
    text-transform: lowercase;
}

.brand-web .dot-e {
    color: #5b6bff;
}

.brand-agency {
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 15px;
    color: var(--pink-2);
    letter-spacing: 3px;
    text-align: right;
    margin-top: -2px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.call-us {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

.call-ico {
    width: 34px;
    height: 34px;
    /* border-radius:50%; */
    /* border:1px solid rgba(255,255,255,.4); */
    display: flex;
    /* align-items:center; */
    justify-content: center;
    font-size: 13px;
    /* color:var(--pink-2); */
}

.call-label {
    font-family: 'Neue Kaine';
    letter-spacing: 1px;
}

.call-num {
    color: #fff;
    font-weight: 500;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    z-index: 999;
}

.menu-toggle span {
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    transition: .3s;
}

.menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,0,20,.97);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

.nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

.nav-overlay ul {
    text-align: center;
}

.nav-overlay li {
    margin: 18px 0;
}

.nav-overlay a {
    font-family: 'Neue Kaine';
    font-size: 34px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    transition: .25s;
}

.nav-overlay a:hover {
    color: var(--pink-2);
}

/* ============================================================
 HERO
 ============================================================ */
.hero {
    position: relative;
    background: #0a0014 url(../assets/img/banner.png);
    padding-top: 150px;
    padding-bottom: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero::after {
    /* dim the banner so animated bubbles read through */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10,0,20,.45);
    z-index: 0;
    pointer-events: none;
}

.hero::before {
    /* faint line texture sides */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 60%,rgba(120,40,200,.25),transparent 40%),radial-gradient(circle at 92% 35%,rgba(220,40,120,.20),transparent 45%);
    pointer-events: none;
}

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

.hero-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
}

.eyebrow {
    font-family: 'Neue Kaine';
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 6px;
}

.hero-title {
    font-family: 'Neue Kaine';
    font-weight: 800;
    font-size: clamp(42px,9vw,110px);
    line-height: .92;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 20px;
}

.hero-title {
    background: linear-gradient(180deg,#FFFFFF 60%,#999999 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-side {
    max-width: 330px;
    padding-top: 14px;
    text-align: right;
}

.hero-desc {
    margin-top: 26px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.55;
}

h1.hero-title span {
    margin: 0 0 0 clamp(0px,6vw,60px);
}

/* ===== Animated Bubbles background ===== */
.bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    filter: blur(60px);
    /* heavy blur -> soft gooey blobs */
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: .7;
    mix-blend-mode: screen;
    will-change: transform;
}

.bubble.b1 {
    width: 420px;
    height: 420px;
    left: 6%;
    top: 30%;
    background: radial-gradient(circle at 30% 30%,#ff3d77,#9c1f8f 70%);
    animation: floatY 14s ease-in-out infinite;
}

.bubble.b2 {
    width: 360px;
    height: 360px;
    left: 50%;
    top: 0%;
    background: radial-gradient(circle at 30% 30%,#5202FF,#F84141 70%);
    animation: floatX 18s ease-in-out infinite;
}

.bubble.b3 {
    width: 300px;
    height: 300px;
    left: 38%;
    top: 40%;
    background: radial-gradient(circle at 30% 30%,#e23ad0,#7a1550 70%);
    animation: rot1 22s linear infinite;
}

.bubble.b4 {
    width: 260px;
    height: 260px;
    left: 80%;
    top: 48%;
    background: radial-gradient(circle at 30% 30%,#ff5d9e,#7b2ff7 70%);
    animation: floatY 16s ease-in-out infinite reverse;
}

.bubble.b5 {
    width: 340px;
    height: 340px;
    left: -4%;
    top: 55%;
    background: radial-gradient(circle at 30% 30%,#9c1f8f,#c01e3c 70%);
    animation: rot2 26s linear infinite;
}

.bubble.b6 {
    width: 220px;
    height: 220px;
    left: 50%;
    top: 6%;
    background: radial-gradient(circle at 30% 30%,#b06cff,#e23ad0 70%);
    animation: floatX 20s ease-in-out infinite reverse;
}

.bubble.b7 {
    width: 280px;
    height: 280px;
    left: 22%;
    top: 18%;
    background: radial-gradient(circle at 30% 30%,#ff3d77,#7b2ff7 70%);
    animation: rot3 24s linear infinite;
}

/* cursor-following bubble — moves with the mouse, fades in/out */
.bubble.bubble-cursor {
    width: 300px;
    height: 300px;
    left: 0;
    top: 0;
    background: radial-gradient(circle at 35% 35%,#ff5fa0,#b3208c 55%,transparent 72%);
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: opacity .4s ease;
    animation: none;
    will-change: left,top;
}

.bubbles.cursor-active .bubble-cursor {
    opacity: .8;
}

@keyframes floatY {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(120px)
    }
}

@keyframes floatX {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(140px)
    }
}

@keyframes rot1 {
    from {
        transform: rotate(0) translateX(70px) rotate(0)
    }

    to {
        transform: rotate(360deg) translateX(70px) rotate(-360deg)
    }
}

@keyframes rot2 {
    from {
        transform: rotate(0) translateX(90px) rotate(0)
    }

    to {
        transform: rotate(-360deg) translateX(90px) rotate(360deg)
    }
}

@keyframes rot3 {
    from {
        transform: rotate(0) translateX(60px) rotate(0)
    }

    to {
        transform: rotate(360deg) translateX(60px) rotate(-360deg)
    }
}

/* ===== Hero website-preview sliders (two opposite rows) ===== */
.hero-sliders {
    position: relative;
    z-index: 2;
    margin-top: 54px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-slider {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.hero-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.track-left {
    animation: slideLeft 38s linear infinite;
}

.track-right {
    animation: slideRight 38s linear infinite;
}

.hero-sliders:hover .hero-track {
    animation-play-state: paused;
}

.hero-track .hm {
    flex: 0 0 auto;
    width: 300px;
    height: 188px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    transition: transform .4s,box-shadow .4s;
}

.hm:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 22px 55px rgba(155,61,240,.4);
}

.hero-track .hm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* one full set = 6 cards * (300 + 24 gap) = 1944px -> translate by exactly that */
@keyframes slideLeft {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-1944px)
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-1944px)
    }

    to {
        transform: translateX(0)
    }
}

/* logo strip */
.logo-strip {
    position: relative;
    z-index: 3;
    margin-top: 40px;
    background: linear-gradient(180deg,rgba(10,0,20,.2),#0a0014 70%);
    padding: 30px 0 50px;
}

/* dark box that holds the marquee + traveling beam */
.beam-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 1px;
    /* room for the beam track */
    background: repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px),radial-gradient(120% 180% at 50% -40%,rgba(123,47,247,.18),transparent 60%),#0c0118;
    border: 1px solid rgba(255,255,255,.08);
}

/* soft static outer glow */
.beam-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    box-shadow: inset 0 0 40px rgba(123,47,247,.12);
}

/* the traveling border beam — a bright dot/streak orbiting the edge */
.border-beam {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    z-index: 2;
    padding: 1.5px;
    background: conic-gradient(from var(--beam-angle,0deg),transparent 0turn,transparent .80turn,#ff5fa0 .90turn,#b06cff .95turn,#ffffff 1turn);
    /* show only the 1.5px border ring */
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: beamSpin 5s linear infinite;
}

@property --beam-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes beamSpin {
    to {
        --beam-angle: 360deg;
    }
}

/* fallback for browsers without @property: rotate the whole conic layer */
@supports not (background: conic-gradient(from var(--beam-angle),#000,#000)) {
    .border-beam {
        animation:beamSpinFallback 5s linear infinite;
        background: conic-gradient(transparent 0 .80turn,#ff5fa0 .90turn,#b06cff .95turn,#fff 1turn);
    }

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

/* sliding logos */
.logo-marquee {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 15px;
    padding: 24px 0;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 90px;
    width: max-content;
    animation: logoSlide 26s linear infinite;
}

.beam-box:hover .logo-track {
    animation-play-state: paused;
}

/* one set = 5 logos; translate by exactly half the duplicated track */
@keyframes logoSlide {
    from {
        transform: translateX(0)
    }

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

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    opacity: .45;
    flex-shrink: 0;
    font-family: 'Neue Kaine';
    font-size: 19px;
    letter-spacing: .5px;
    font-weight: 400;
    white-space: nowrap;
}

.brand-logo b {
    font-weight: 700;
}

.brand-logo svg {
    flex-shrink: 0;
}

.brand-logo.italic-mark {
    font-style: italic;
    font-weight: 700;
}

.brand-logo.bold-mark svg {
    transform: scale(1.1);
}

.scroll-down {
    text-align: center;
    margin-top: 18px;
    color: var(--pink-2);
    font-size: 22px;
    animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }
}

/* ============================================================
 ABOUT  (FDA-style — Neue Kaine)
 ============================================================ */
.about {
    background: #fff;
    color: var(--ink);
    padding: 110px 0 0;
}

.about-main {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.about-top {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
}

.about-title {
    font-family: 'Neue Kaine';
    font-weight: 900;
    font-size: clamp(56px,15vw,160px);
    margin: 0;
    line-height: .82;
    color: #101014;
    letter-spacing: -1px;
    background: linear-gradient(109deg,#000000,#999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 42px;
}

.about-lead {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(22px,2.6vw,34px);
    line-height: 1.18;
    color: #101014;
    margin: 6px 0 0;
    max-width: 560px;
    letter-spacing: -.3px;
}

/* 4-column counter grid */
.about-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #e7e7ea;
}

.counter-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 40px 28px 10px 0;
    border-right: 1px solid #e7e7ea;
}

.counter-block:last-child {
    border-right: none;
}

.counter-num {
    font-family: 'Neue Kaine';
    font-weight: 800;
    font-size: clamp(46px,7vw,91px);
    line-height: 1;
    color: #101014;
    letter-spacing: -1px;
    background: linear-gradient(109deg,#000000,#999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.counter-label {
    font-family: 'Poppins',sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    text-align: center;
}

/* marquee */
.marquee {
    overflow: hidden;
    margin: 70px 0 40px;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    animation: scrollX 18s linear infinite;
}

.marquee-track span {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(60px,9vw,120px);
    color: #cfcfcf;
    text-transform: uppercase;
    padding-right: 10px;
    letter-spacing: -1px;
}

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

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

/* ============================================================
 CREATIVE PORTFOLIO — Orlixa-style pinned reveal
 Scroll drives: scattered imgs -> one expands full screen -> text reveals
 ============================================================ */
.fda-portfolio {
    position: relative;
    height: 300vh;
    background: #fff;
}

.fda-portfolio-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fda-portfolio-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* heading centered behind images */
.fda-portfolio-heading {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 1;
    pointer-events: none;
    transition: opacity .4s ease;
}

.fda-pf-creative {
    font-family: 'Neue Kaine';
    font-weight: 800;
    color: #000000;
    font-size: clamp(34px,7vw,85px);
    line-height: .9;
    letter-spacing: -1px;
}

.fda-pf-portfolio {
    font-family: 'Neue Kaine';
    font-weight: 800;
    color: #101014;
    font-size: clamp(36px,7.4vw,90px);
    line-height: .9;
    letter-spacing: -1px;
}

/* scattered images — all same 16:9 size, arranged around the heading */
.fda-pf-img {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    will-change: transform,opacity;
}

.fda-pf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fda-image-one {
    width: 21%;
    aspect-ratio: 16/10;
    top: 9%;
    left: 7%;
}

.fda-image-two {
    width: 21%;
    aspect-ratio: 16/10;
    top: 6%;
    right: 8%;
}

.fda-image-three {
    width: 21%;
    aspect-ratio: 16/10;
    top: 42%;
    left: 4%;
}

.fda-image-four {
    width: 21%;
    aspect-ratio: 16/10;
    bottom: 8%;
    left: 24%;
}

.fda-image-five {
    width: 21%;
    aspect-ratio: 16/10;
    bottom: 9%;
    right: 9%;
}

/* expanding image (box-6) — centered, grows to full screen */
.fda-pf-expand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26%;
    aspect-ratio: 16/10;
    transform: translate(-50%,-50%);
    border-radius: 14px;
    overflow: hidden;
    z-index: 3;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    will-change: width,height,border-radius;
}

.fda-pf-expand img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fda-pf-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg,rgba(0,0,0,.85) 30%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.15));
}

.fda-pf-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 8%;
    opacity: 0;
    text-align: center;
}

.fda-pf-title {
    font-family: 'Neue Kaine';
    font-weight: 800;
    color: #fff;
    font-size: clamp(28px,7.5vw,110px);
    line-height: .95;
    margin: 0 0 24px;
    text-transform: capitalize;
    letter-spacing: -1px;
    max-width: 14ch;
    text-align: center;
}

.fda-pf-text {
    font-family: 'Poppins';
    font-weight: 600;
    color: #eaeaef;
    letter-spacing: -.2px;
    font-size: clamp(14px,2.2vw,22px);
    line-height: 1.4;
    margin: 0;
    max-width: 46ch;
}

/* word-mask split */
.split-words .word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.split-words .word {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .7s cubic-bezier(.2,.75,.2,1);
}

.split-words.in .word {
    transform: translateY(0);
}

/* ============================================================
 HOW WE DO
 ============================================================ */
.how {
    background: #0000009e url(../assets/img/ban.png);
    padding: 80px 0 70px;
    position: relative;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    background-blend-mode: color;
}

.how-head {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.how-title {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: clamp(34px,5vw,60px);
    line-height: .98;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.how-title .hl-dot {
    color: var(--pink-2);
}

.how-text {
    max-width: 430px;
    color: #c9c2d6;
    font-size: 14px;
    line-height: 1.7;
}

.how-btn {
    flex-shrink: 0;
    margin-top: 10px;
}

.services-list {
    position: relative;
    border-top: 1px solid rgba(255,255,255,.12);
}

.service-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: .3s;
    cursor: pointer;
}

.service-row .s-num {
    font-family: 'Neue Kaine';
    font-size: 24px;
    color: #6e6e7a;
    width: 40px;
    font-weight: 500;
}

.service-row .s-name {
    font-family: 'Neue Kaine';
    font-weight: 500;
    font-size: clamp(26px,3.4vw,40px);
    color: #d7d7df;
    text-transform: capitalize;
    letter-spacing: .5px;
}

.service-row .s-arrow {
    margin-left: 14px;
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: .3s;
}

.service-row.active {
    background: linear-gradient(90deg,rgba(140,20,40,.55),rgba(60,10,40,.15));
    border-bottom: 2px solid #e23a5a;
    padding-left: 18px;
    padding-right: 18px;
    margin: 0 -18px;
    border-radius: 4px;
}

.service-row.active .s-name {
    background: linear-gradient(90deg,#b06cff,#e94fb0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.service-row.active .s-num {
    color: #fff;
}

.service-row.active .s-arrow {
    opacity: 1;
}

.service-row:hover:not(.active) .s-name {
    color: #fff;
}

.s-laptop {
    position: absolute;
    right: -60px;
    top: 50%;
    width: 470px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(.96);
    transition: opacity .4s ease,transform .4s ease;
    z-index: 5;
    /* box-shadow:0 24px 50px rgba(0,0,0,.5); */
}

.service-row.active .s-laptop {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* ============================================================
 WHAT WE OFFER
 ============================================================ */
.offer {
    background: url(../assets/img/banner.png);
    padding: 70px 0 80px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.offer-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 50px;
}

.offer-sub {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
    margin-top: 16px;
}

.offer-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.offer-card {
    position: relative;
    background: #0c0410;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 30px 28px 40px;
    min-height: 250px;
    transition: transform .3s ease,box-shadow .3s ease;
}

.offer-card.light {
    background: #f3f3f5;
    color: #15151a;
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(120,30,160,.4);
    background: #fff;
    color: #000;
    transition: opacity .7s ease,transform .7s ease;
}

.oc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.oc-num {
    font-family: 'Neue Kaine';
    font-size: 22px;
    color: var(--violet-light);
    font-weight: 600;
}

.offer-card.light .oc-num {
    color: #9b59ff;
}

.oc-ico {
    font-size: 30px;
    color: var(--violet-light);
}

.offer-card.light .oc-ico {
    color: #15151a;
}

.offer-card h3 {
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 28px;
    line-height: 1.05;
    margin: 0 0 16px;
    text-transform: capitalize;
}

.offer-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #b9aecb;
    margin: 0;
}

.offer-card.light p {
    color: #555;
}

.oc-arrow {
    position: absolute;
    right: 26px;
    bottom: 24px;
    font-size: 20px;
    opacity: .7;
}

.offer-card:hover p {
    color: #000;
}

/* ============================================================
 GLIMPSE / TOP NOTCH PORTFOLIO
 ============================================================ */
.glimpse {
    background: radial-gradient(ellipse at 10% 20%,rgba(140,30,90,.35),transparent 50%),var(--purple-deep);
    padding: 30px 0 80px;
    position: relative;
    overflow: hidden;
}

.glimpse .container {
    position: relative;
    z-index: 1;
}

.glimpse .sec-title {
    margin-bottom: 44px;
    text-align: center;
}

.glimpse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.gg {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    min-height: 280px;
    z-index: 1;
}

.gg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gg5 {
}

.more-projects {
    background: linear-gradient(135deg,#7b2ff7,#e94fb0);
    display: flex;
    align-items: flex-start;
}

.more-projects img {
    position: absolute;
    bottom: -20px;
    right: -10px;
    width: 70%;
    height: auto;
    opacity: .9;
    border-radius: 8px 0 0 0;
}

.mp-content {
    position: relative;
    z-index: 2;
    padding: 30px 34px;
}

.mp-content h3 {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}

.mp-content i {
    font-size: 26px;
    position: absolute;
    bottom: -180px;
    right: -260px;
}

/* cursor-following gradient glow — same recipe as the hero's .bubble-cursor,
 scoped to the portfolio section and gated to fine-pointer devices in JS */
.glimpse-cursor-glow {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,#ff5fa0,#7b2ff7 55%,transparent 72%);
    opacity: 0;
    transform: translate(-50%,-50%);
    filter: blur(70px);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity .4s ease;
    will-change: left,top;
}

.glimpse.cursor-active .glimpse-cursor-glow {
    opacity: .6;
}

/* ============================================================
 MOBILE RESPONSIVE
 ============================================================ */
.mobile-resp {
    background: var(--purple-deep);
    padding: 0 0 80px;
}

.mr-card {
    background: #fff;
    color: #15151a;
    border-radius: 28px;
    padding: 64px 40px 10px;
    margin-top: -20px;
    position: relative;
    overflow: hidden;
}

.sec-title.dark {
    color: #15151a;
}

.sec-title.dark .muted {
    color: #9a9aa3;
}

.mr-sub {
    text-align: center;
    max-width: 640px;
    margin: 18px auto 0;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

.mr-phones {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 44px 0 40px;
    min-height: 340px;
}

.mr-track-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.mr-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 0 24px;
    animation: mrSlide 26s linear infinite;
    will-change: transform;
}

.mr-phones:hover .mr-track {
    animation-play-state: paused;
}

.mph {
    flex: 0 0 auto;
    width: 150px;
    height: 310px;
    border-radius: 24px;
    background: #e4e4e8;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.mph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.mph.center {
    position: absolute;
    z-index: 3;
    background: transparent;
    width: auto;
    height: auto;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -38px;
    left: 0;
    right: 27px;
}

.mph.center img {
    width: min(490px,72vw);
    height: auto;
    object-fit: contain;
}

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

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

.text-center.btnssds {
    position: relative;
    z-index: 99;
}

.btn-slide {
    position: relative;
    width: 260px;
    height: 58px;
    background: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
    border-radius: 999px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    transition: .6s cubic-bezier(.76,0,.24,1);
    transition: transform .25s ease,box-shadow .25s ease;
    box-shadow: 0 8px 30px rgba(180,40,200,.35);
    font-family: 'Neue Kaine';
}

/* Sliding Circle */
.btn-slide::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 6px;
    width: 46px;
    height: 46px;
    background: #111;
    border-radius: 50%;
    transition: .6s cubic-bezier(.76,0,.24,1);
    z-index: 1;
}

/* Text */
.btn-slide span {
    position: relative;
    z-index: 2;
    transition: .6s cubic-bezier(.76,0,.24,1);
}

/* Arrow */
.btn-slide svg {
    position: absolute;
    right: 17px;
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 2.5;
    fill: none;
    z-index: 2;
    transition: .6s cubic-bezier(.76,0,.24,1);
}

/* Hover */
.btn-slide:hover::before {
    transform: translateX(-202px);
}

.btn-slide:hover span {
    transform: translateX(18px);
}

.btn-slide:hover svg {
    transform: translateX(-202px) rotate(-45deg);
}

/* ============================================================
 TESTIMONIALS
 ============================================================ */
.testimonials {
    padding: 70px 0;
    background: url(../assets/img/banner.png);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.testimonials .sec-title {
    margin-bottom: 48px;
    text-align: center;
}

.t-slider {
    overflow: hidden;
}

.t-track {
    display: flex;
    gap: 24px;
    transition: transform .5s cubic-bezier(.65,.05,.36,1);
}

.t-card {
    background: #120818;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 34px 28px 30px;
    position: relative;
    flex: 0 0 calc((100% - 48px) / 3);
    transition: background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}

.t-card.light {
    background: #f3f3f5;
    color: #15151a;
}

.t-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
}

.t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-card h3 {
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    margin: 0 0 14px;
    transition: color .35s ease;
}

.t-card p {
    font-size: 13px;
    line-height: 1.65;
    color: #b3a9c2;
    margin: 0 0 18px;
    transition: color .35s ease;
}

.t-card.light p {
    color: #555;
}

.stars {
    color: #f5b400;
    letter-spacing: 3px;
    font-size: 16px;
}

/* on hover, every card (regardless of its base variant) turns white */
.t-card:hover {
    background: #fff;
    color: #15151a;
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    transform: translateY(-6px);
}

.t-card:hover p {
    color: #555;
}

.t-nav {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 28px;
}

.t-nav button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    background: var(--grad-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}

.t-nav button:hover {
    transform: scale(1.08);
}

/* ============================================================
 CTA / CONTACT
 ============================================================ */
.cta {
    background: radial-gradient(ellipse at 50% 0%,rgba(140,30,90,.3),transparent 50%),var(--bg);
    padding: 50px 0 80px;
}

.cta-card {
    background: linear-gradient(120deg,#4a1d7a 0%,#7a2a8f 45%,#c23ad0 100%);
    border-radius: 26px;
    padding: 46px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

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

.cta-form input,.cta-form textarea {
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;
    padding: 16px 24px;
    color: #fff;
    font-family: 'Poppins';
    font-size: 14px;
    resize: none!important;
}

.cta-form input::placeholder,.cta-form textarea::placeholder {
    color: #e6d6ee;
}

.cta-form input:focus,.cta-form textarea:focus {
    outline: none;
    border-color: #fff;
}

.msg-wrap {
    position: relative;
}

.cta-form textarea {
    border-radius: 22px;
    min-height: 150px;
    resize: vertical;
}

.send-btn {
    position: absolute;
    right: -6px;
    bottom: -19px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-title {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: clamp(34px,4.4vw,54px);
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.cta-copy p {
    color: #f0e6f5;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px;
}

button.send-btn i {
    background: linear-gradient(135deg,#7b2ff7,#e94fb0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
 FOOTER
 ============================================================ */
.site-footer {
    background: radial-gradient(ellipse at 0% 0%,rgba(90,30,140,.25),transparent 45%),#08020f;
    padding: 60px 0 26px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding-bottom: 36px;
}

.f-brand .brand {
    margin-bottom: 18px;
}

.f-brand p {
    color: #a99fbb;
    font-size: 13px;
    line-height: 1.7;
    max-width: 280px;
}

.socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--grad-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: .25s;
}

.socials a:hover {
    transform: translateY(-3px);
}

.f-col h4 {
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 18px;
}

.f-col ul li {
    margin-bottom: 11px;
}

.f-col ul li a {
    color: #b3a9c2;
    font-size: 13.5px;
    transition: .2s;
}

.f-col ul li a:hover {
    color: #fff;
}

.f-contact .fc-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.fc-ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--grad-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

.fc-item div {
    font-size: 14px;
    color: #e3dcec;
}

.fc-item small {
    color: #9a8fae;
    font-size: 12px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 22px;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #9a8fae;
    font-size: 13px;
}

/* ============================================================
 RESPONSIVE
 ============================================================ */
@media (max-width: 991px) {
    .service-row .s-name {
        font-size:20px;
    }

    .about {
        background: #fff;
        color: var(--ink);
        padding: 30px 0 0;
        text-align: center;
    }

    .marquee {
        overflow: hidden;
        margin: 30px 0 0;
        white-space: nowrap;
    }

    .hero-top {
        flex-direction: column;
        text-align: center;
    }

    .hero-side {
        text-align: center;
        max-width: 100%;
    }

    .hero-track .hm {
        width: 220px;
        height: 140px;
    }

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

        to {
            transform: translateX(-1464px)
        }
    }

    @keyframes slideRight {
        from {
            transform: translateX(-1464px)
        }

        to {
            transform: translateX(0)
        }
    }

    .about-top {
        grid-template-columns: 1fr;
        gap: 18px;
    }

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

    .counter-block:nth-child(2) {
        border-right: none;
    }

    .counter-block:nth-child(1),.counter-block:nth-child(2) {
        border-bottom: 1px solid #e7e7ea;
    }

    .how-head {
        flex-direction: column;
    }

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

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

    .t-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }

    .cta-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
    }

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

    .s-laptop {
        display: none;
    }

    .mr-phones {
        flex-wrap: wrap;
        gap: 14px;
    }

    .mph {
        width: 110px;
        height: 230px;
    }

    /* Pinned portfolio -> simple stacked grid on tablet/mobile */
    .fda-portfolio {
        height: auto;
    }

    .fda-portfolio-sticky {
        position: relative;
        height: auto;
        display: block;
        padding: 56px 0;
    }

    .fda-portfolio-stage {
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding: 0 20px;
    }

    .fda-portfolio-heading {
        position: static;
        transform: none;
        grid-column: 1/-1;
        margin-bottom: 10px;
        opacity: 1!important;
        text-align: center;
    }

    .fda-pf-img {
        position: static;
        width: 100%!important;
        aspect-ratio: 16/10!important;
        inset: auto!important;
        height: auto!important;
        box-shadow: 0 14px 30px rgba(0,0,0,.15);
    }

    .fda-pf-expand {
        position: relative;
        grid-column: 1/-1;
        width: 100%!important;
        height: auto!important;
        aspect-ratio: 16/10;
        /* transform:none!important; */
        border-radius: 14px!important;
        margin-top: 6px;
    }

    .fda-pf-overlay {
        opacity: 1!important;
    }

    .fda-pf-content {
        position: absolute;
        opacity: 1!important;
        padding: 0 7%;
        align-items: center;
    }

    .fda-pf-title {
        font-size: clamp(28px,7vw,52px);
        margin-bottom: 14px;
    }

    .fda-pf-text {
        font-size: clamp(13px,3.4vw,18px);
    }

    .split-words .word {
        transform: none!important;
    }
}

@media (max-width: 600px) {
    .s-laptop {
        display:block;
        width: 90px;
        right: 0;
        top: 62%;
    }

    .mph.center img {
        width: 358px;
        height: auto;
        object-fit: contain;
    }

    .call-label,.call-num {
        display: none;
    }

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

    .counter-block {
        padding: 24px 16px 8px 0;
    }

    .logo-track {
        gap: 54px;
    }

    .brand-logo {
        font-size: 16px;
    }

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

    .marquee-track span {
        font-size: 60px;
    }

    .cta-card {
        padding: 24px;
    }

    .t-card {
        flex: 0 0 100%;
    }

    .glimpse-cursor-glow {
        width: 260px;
        height: 260px;
        filter: blur(50px);
    }

    .offer-cards {
        grid-template-columns: 1fr;
    }

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

    .mph {
        width: 96px;
        height: 200px;
    }

    .mph.center {
        right: 0;
        left: 0;
        /* transform: translateX(30%); */
        top: -10px;
    }

    .mr-phones {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 40px;
        min-height: 246px;
    }

    .cta-form input,.cta-form textarea {
        padding: 14px 20px;
        font-size: 13px;
    }

    .fda-pf-content {
        padding: 0 6%;
        text-align: center;
    }

    /* single column on small phones */
    .fda-portfolio-stage {
        grid-template-columns: 1fr
    }
}

@media (max-width: 420px) {
    .container {
        padding:0 16px;
    }

    .offer-card {
        padding: 24px 20px 32px;
        min-height: auto;
    }

    .mp-content h3 {
        font-size: 24px;
    }

    .cta-title {
        font-size: clamp(28px,8vw,40px);
    }
}

/* ---- Scroll reveal ---- */
.reveal {
    opacity: 0;
    /* transform:translateY(34px); */
    transition: opacity .7s ease,transform .7s ease;
}

.reveal.in {
    opacity: 1;
    /* transform:none; */
}

/* ---- data-reveal (About + Tech banner premium reveal) ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--rev-delay,0s);
    will-change: opacity,transform;
}

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

/* ---- Header on scroll ---- */
.site-header.scrolled {
    /* position:fixed; */
    top: 0;
    padding-top: 14px;
    background: rgba(10,0,20,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
    animation: slideDown .4s ease;
}

.site-header.scrolled .navbar-row {
    border-bottom: none;
    padding-bottom: 14px;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none!important;
        transition: none!important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   MODERN DEVELOPMENT STACK (Agency page)
   ============================================================ */
.dev-stack {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    padding: 110px 0;
}

.dev-stack .bubbles {
    opacity: .55;
}

.dev-stack .bubble.b1 {
    width: 320px;
    height: 320px;
}

.dev-stack .bubble.b2 {
    width: 260px;
    height: 260px;
}

.dev-stack .bubble.b3 {
    width: 220px;
    height: 220px;
}

.dev-stack .bubble.b4 {
    width: 200px;
    height: 200px;
}

.dev-stack .bubble.b5 {
    width: 240px;
    height: 240px;
}

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

.ds-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 46px;
    flex-wrap: wrap;
}

.ds-title {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: clamp(30px,4vw,44px);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0;
    color: #fff;
}

.ds-title .muted {
    background: linear-gradient(109deg,#FFFFFF,#828282);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ds-text {
    max-width: 360px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 6px;
}

.ds-rows {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    background: rgba(255,255,255,.02);
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.ds-row {
    position: relative;
    padding: 26px 32px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    transition: background .35s ease;
}

.ds-row:last-child {
    border-bottom: none;
}

.ds-row:hover,.ds-row.active {
    background: rgba(255,255,255,.035);
}

.ds-row-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ds-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink-2);
    font-size: 15px;
    transition: background .35s ease,color .35s ease,transform .35s ease;
}

.ds-row.active .ds-ico,.ds-row:hover .ds-ico {
    background: var(--grad-pill);
    color: #fff;
    transform: rotate(90deg);
}

.ds-name {
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    color: var(--muted);
    transition: color .35s ease;
    flex: 1;
}

.ds-row.active .ds-name,.ds-row:hover .ds-name {
    color: #fff;
}

.ds-arrow {
    font-size: 16px;
    color: var(--muted);
    transition: transform .35s ease,color .35s ease;
}

.ds-row.active .ds-arrow,.ds-row:hover .ds-arrow {
    color: #fff;
    transform: translate(3px,-3px);
}

/* collapsible sliding-logo panel */
.ds-row-panel {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.65,.05,.36,1),opacity .4s ease,margin-top .5s ease;
    border-radius: 40px;
}

.ds-row.active .ds-row-panel,.ds-row:hover .ds-row-panel {
    max-height: 90px;
    opacity: 1;
    margin-top: 18px;
}

.ds-marquee {
    position: relative;
    border-radius: 40px;
    padding: 16px 0;
    background: var(--grad-pill);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    box-shadow: 0 14px 40px rgba(180,40,200,.35);
}

.ds-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    padding: 0 40px;
    animation: dsSlide 22s linear infinite;
}

.ds-row:hover .ds-track,.ds-row.active .ds-track {
    animation-play-state: running;
}

.ds-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #fff;
    font-family: 'Neue Kaine';
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.ds-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ds-logo i {
    font-size: 13px;
    opacity: .85;
    margin-left: 2px;
}

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

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

.ds-btn {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .dev-stack {
        padding:80px 0;
    }

    .ds-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-row {
        padding: 20px;
    }

    .ds-name {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .ds-logo {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .dev-stack {
        padding:60px 0;
    }

    .ds-title {
        font-size: clamp(26px,8vw,34px);
    }

    .ds-text {
        font-size: 14px;
        max-width: 100%;
    }

    .ds-row {
        padding: 16px;
    }

    .ds-row-top {
        gap: 10px;
    }

    .ds-ico {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .ds-name {
        font-size: 14px;
        letter-spacing: .5px;
    }

    .ds-logo {
        font-size: 13px;
        gap: 7px;
    }

    .ds-logo img {
        width: 18px;
        height: 18px;
    }

    .ds-track {
        gap: 30px;
        padding: 0 24px;
    }

    .ds-btn {
        margin-top: 28px;
    }
}

/* ============================================================
   CASE STUDIES (light card section)
   ============================================================ */
.about.agency {
    padding: 0;
}

.case-studies {
    position: relative;
    background: #ffffff;
    padding: 40px 0 110px;
}

.cs-card {
    position: relative;
    background: #ffffff;
    border-radius: 26px;
    padding: 46px 46px 40px;
    overflow: hidden;
}

.cs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.cs-title {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: clamp(30px,5vw,70px);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}

.cs-btn-dark {
    background: var(--ink);
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.cs-btn-dark .btn-arrow {
    background: var(--grad-pill);
}

.cs-btn-dark .btn-arrow i {
    color: #fff;
}

.cs-btn-dark:hover,.cs-btn-dark.is-hover {
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.cs-divider {
    height: 1px;
    background: rgb(0 0 0);
    width: 0%;
    transition: width 1s cubic-bezier(.65,.05,.36,1) .1s;
}

.cs-divider.in {
    width: 100%;
}

.cs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 38px 0;
}

.cs-row.reveal {
    transform: translateY(50px);
    transition: opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}

.cs-row.reveal.in {
    transform: translateY(0);
}

.cs-row:nth-child(even) {
    flex-direction: row-reverse;
}

.cs-text {
    flex: 0 1 420px;
}

.cs-name {
    font-family: 'Neue Kaine';
    font-weight: 900;
    font-size: 26px;
    letter-spacing: .5px;
    color: var(--ink);
    margin: 0 0 12px;
}

.cs-desc {
    color: #5c5866;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px;
    max-width: 380px;
}

.cs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.cs-tag {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #000000;
    /* background: rgba(123, 47, 247, .1); */
    border: 1px solid rgba(123,47,247,.25);
    padding: 7px 14px;
    border-radius: 30px;
}

.cs-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background .3s ease,transform .3s ease;
}

.cs-link:hover {
    background: var(--grad-pill);
    transform: rotate(45deg);
}

.cs-media {
    flex: 0 0 320px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    /* background: #e6e2ec; */
}

.cs-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.15);
    will-change: transform;
    transition: transform .15s linear;
}

/* ---- Blade-title style text reveal (chars / words / lines), matching the nextbricks portfolio-005 reference ---- */
.split-word-mask,.split-char-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.split-word,.split-char {
    display: inline-block;
    transform: translateY(112%);
    opacity: 0;
    transition: transform .7s cubic-bezier(.16,.84,.44,1) var(--d,0s),opacity .5s ease var(--d,0s);
}

.split-ready.in .split-word,.split-ready.in .split-char {
    transform: translateY(0);
    opacity: 1;
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 20px;
}

.cs-stat {
    background: #fff;
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    border: 1px solid rgba(21,21,26,.08);
}

.cs-stat-num {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 30px;
    color: var(--ink);
}

.cs-stat-num span {
    background: linear-gradient(90deg,var(--violet),var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cs-stat-label {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #7a7684;
}

@media (max-width: 900px) {
    .cs-row,.cs-row:nth-child(even) {
        flex-direction:column;
        align-items: flex-start;
        gap: 22px;
    }

    .cs-media {
        width: 100%;
        flex-basis: auto;
        height: 0;
        padding-bottom: 62%;
        /* keeps a consistent aspect ratio instead of a fixed 300px height */
    }

    .cs-text {
        flex-basis: auto;
    }
}

@media (max-width: 600px) {
    .cs-card {
        padding:32px 22px;
    }

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

@media (max-width: 480px) {
    .case-studies {
        padding:24px 0 70px;
    }

    .cs-card {
        padding: 26px 18px;
        border-radius: 20px;
    }

    .cs-head {
        gap: 16px;
        margin-bottom: 20px;
    }

    .cs-btn-dark span {
        font-size: 12px;
    }

    .cs-row {
        padding: 26px 0;
    }

    .cs-name {
        font-size: 21px;
    }

    .cs-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .cs-media {
        padding-bottom: 72%;
        border-radius: 16px;
    }

    .cs-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cs-stat {
        padding: 18px 12px;
    }

    .cs-stat-num {
        font-size: 24px;
    }
}

.hero22 {
    background: none;
    padding-top: 170px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .hero22 {
        padding-top:140px;
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {
    .hero22 {
        padding-top:120px;
        padding-bottom: 46px;
    }
}

/* ============================================================
   PORTFOLIO PARALLAX SLIDER ("Our Work Speaks For Itself")
   ============================================================ */
.portfolio-slider .container {
    background: #fff;
    border-radius: 20px;
    padding: 60px 0;
}

.portfolio-slider {
    position: relative;
    background: #0a0014;
    padding: 100px 0 70px;
    overflow: hidden;
}

.ps-title {
    font-family: 'Neue Kaine';
    font-weight: 800;
    font-size: clamp(32px,6vw,64px);
    line-height: 1.06;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .5px;
    margin: 0 0 54px;
    background: linear-gradient(109deg,#000000,#7a7a7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* draggable / wheel-scrollable / touch-swipeable track */
.ps-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.ps-wrap.dragging {
    cursor: grabbing;
}

.ps-wrap.dragging .ps-card {
    pointer-events: none;
}

.ps-track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: max-content;
    padding: 0 24px;
    will-change: transform;
}

.ps-card {
    position: relative;
    flex: 0 0 auto;
    width: 380px;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    background: #150b1c;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.ps-card:first-child {
    width: 420px;
}

.ps-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ps-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,-50%) scale(1.35);
    will-change: transform;
    pointer-events: none;
    -webkit-user-drag: none;
}

.ps-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78) 100%);
    pointer-events: none;
}

.ps-label {
    position: absolute;
    left: 26px;
    bottom: 24px;
    z-index: 2;
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 24px;
    letter-spacing: .3px;
    color: #fff;
}

/* progress bar */
.ps-progress-wrap {
    max-width: 1120px;
    margin: 46px auto 0;
    padding: 0 24px;
}

.ps-progress-track {
    position: relative;
    height: 1px;
    background: rgba(21,21,26,.15);
    border-radius: 4px;
}

.ps-progress-fill {
    position: absolute;
    left: 0;
    top: -1.5px;
    height: 4px;
    width: 16%;
    background: linear-gradient(90deg,var(--violet),var(--pink-2));
    border-radius: 4px;
}

.ps-btn-wrap {
    text-align: center;
    margin-top: 42px;
}

@media (max-width: 991px) {
    .portfolio-slider {
        padding:80px 0 60px;
    }

    .ps-title {
        margin-bottom: 40px;
    }

    .ps-card {
        width: 300px;
        height: 380px;
    }

    .ps-card:first-child {
        width: 320px;
    }
}

@media (max-width: 600px) {
    .portfolio-slider {
        padding:64px 0 50px;
    }

    .ps-title {
        margin-bottom: 30px;
    }

    .ps-track {
        gap: 16px;
        padding: 0 16px;
    }

    .ps-card {
        width: 240px;
        height: 300px;
        border-radius: 16px;
    }

    .ps-card:first-child {
        width: 250px;
    }

    .ps-label {
        font-size: 18px;
        left: 18px;
        bottom: 16px;
    }

    .ps-progress-wrap {
        margin-top: 32px;
    }

    .ps-btn-wrap {
        margin-top: 30px;
    }
}

@media (max-width: 420px) {
    .ps-card {
        width:210px;
        height: 270px;
    }

    .ps-card:first-child {
        width: 220px;
    }
}

/* ============================================================
   PRICING (tabbed plans)
   ============================================================ */
.pricing-tab i {
    display: none;
}

.pricing-section {
    position: relative;
    background: url(../assets/img/pricingbanner.png) no-repeat;
    padding: 110px 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.pricing-section .glow-a {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(226,58,208,.28),transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.pricing-section .glow-b {
    position: absolute;
    bottom: -140px;
    right: -140px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(123,47,247,.25),transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

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

.pricing-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 46px;
}

.pricing-head .sec-title {
    margin: 0;
}

/* ---- Tabs ---- */
.pricing-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 54px;
}

.pricing-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-family: 'Neue Kaine';
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .35s ease,color .35s ease,border-color .35s ease,transform .25s ease;
}

.pricing-tab:hover {
    color: #fff;
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
}

.pricing-tab.active {
    background: #fff;
    color: #000000;
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(180,40,200,.38);
}

/* ---- Grid ---- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px;
    align-items: stretch;
    transition: opacity .3s ease,transform .3s ease;
}

.pricing-grid.is-switching {
    opacity: 0;
    transform: translateY(14px);
}

.price-card {
    position: relative;
    display: none;
    flex-direction: column;
    background: #0d0710;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    padding: 32px 30px 32px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s cubic-bezier(.2,.7,.2,1) var(--pd,0s),transform .55s cubic-bezier(.2,.7,.2,1) var(--pd,0s),border-color .35s ease,box-shadow .35s ease;
}

.price-card.is-visible {
    display: flex;
}

.price-card.is-visible.in {
    opacity: 1;
    transform: translateY(0);
}

.price-card:hover {
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 20px 46px rgba(0,0,0,.35);
}

.price-card.popular {
    background: #5902ff;
    border-color: transparent;
    box-shadow: 0 25px 60px rgba(89,2,255,.45);
    z-index: 2;
}

.price-card.popular:hover {
    box-shadow: 0 28px 66px rgba(89,2,255,.6);
}

@media (min-width: 992px) {
    .price-card.popular {
        transform:translateY(4px) scale(1.045);
    }

    .price-card.popular.in {
        transform: translateY(-6px) scale(1.045);
    }
}

/* ---- plan tag chip (top of every card; blue "Best Seller" variant on the popular card) ---- */
.price-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 7px 18px;
    border-radius: 20px;
    background: rgba(220,60,70,.14);
    border: 1px solid rgba(255,90,100,.32);
    color: #ff8a8a;
    font-family: 'Neue Kaine';
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.price-tag-best {
    background: #1e9cee;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(30,156,238,.45);
}

.price-amount {
    font-family: 'Neue Kaine';
    font-weight: 800;
    font-size: 40px;
    color: #fff;
    margin: 0;
    line-height: 1;
    display: flex;
    art; justify-content: flex-start;
    align-items: center;
}

.price-amount .price-cents {
    font-size: 18px;
    font-weight: 400;
    opacity: .55;
}

.price-sub {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 12px 0 26px;
    min-height: 40px;
}

.price-card.popular .price-sub {
    color: rgba(255,255,255,.85);
}

.price-features {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
    max-height: 300px;
    /* Adjust height as needed */
    overflow-y: auto;
    /* Vertical scroll */
    overflow-x: hidden;
    /* Hide horizontal scroll */
    padding-right: 8px;
    /* Prevent text from touching scrollbar */
}

.price-features::-webkit-scrollbar {
    width: 6px;
}

.price-features::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.price-features::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
    border-radius: 10px;
}

.price-features::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.price-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #d8cfe4;
}

.price-features li i {
    color: var(--pink-2);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.price-card.popular .price-features li {
    color: #fff;
}

.price-card.popular .price-features li i {
    color: #fff;
}

.price-cta {
    margin-top: auto;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.price-card.popular .price-cta.btn-pill {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.price-card.popular .price-cta.btn-pill .btn-arrow {
    background: var(--ink);
}

.price-card.popular .price-cta.btn-pill .btn-arrow i {
    color: #fff;
}

.price-card.popular .price-cta.btn-pill .label {
    color: var(--ink);
}

@media (max-width: 991px) {
    .pricing-section {
        padding:90px 0;
    }

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

    .price-card.popular {
        transform: none!important;
    }
}

@media (max-width: 700px) {
    .pricing-grid {
        grid-template-columns:1fr;
    }

    .pricing-tabs {
        gap: 10px;
    }

    .pricing-tab {
        padding: 9px 18px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pricing-section {
        padding:70px 0;
    }

    .pricing-head {
        margin-bottom: 32px;
    }

    .pricing-tabs {
        margin-bottom: 36px;
    }

    .price-card {
        padding: 28px 22px 26px;
    }

    .price-amount {
        font-size: 34px;
    }
}

/* ============================================================
   OUR WORK — PORTFOLIO LISTING
   True 50/50 two-column grid per project: content on the left,
   image on the right — same orientation on every row. Reuses the
   blade-title reveal / animated-divider / parallax system from
   the case-studies component, restyled for a dark background.
   ============================================================ */
.our-portfolio {
    position: relative;
    background: url(../assets/img/pricingbanner.png);
    padding: 100px 0 90px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

.our-portfolio .glow-a {
    position: absolute;
    top: -100px;
    right: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(226,58,208,.22),transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

.our-portfolio .glow-b {
    position: absolute;
    bottom: 10%;
    left: -160px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(123,47,247,.22),transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

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

.ow-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}

.ow-title {
    font-family: 'Neue Kaine';
    font-weight: 800;
    font-size: clamp(28px,4.4vw,48px);
    line-height: 1.1;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
}

.ow-rows {
    border-top: 1px solid rgba(255,255,255,.1);
}

/* true 50/50 grid: content | image, on every row (no alternating) */
.ow-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    padding: 48px 0;
}

.ow-row.reveal {
    transform: translateY(50px);
    transition: opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}

.ow-row.reveal.in {
    transform: translateY(0);
}

.ow-divider {
    height: 1px;
    background: rgba(255,255,255,.1);
    width: 0%;
    transition: width 1s cubic-bezier(.65,.05,.36,1) .1s;
}

.ow-divider.in {
    width: 100%;
}

.ow-content {
    min-width: 0;
}

.ow-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ow-name {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.ow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ow-tag {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--pink-2);
    background: rgba(226,58,208,.1);
    border: 1px solid rgba(226,58,208,.3);
    padding: 7px 14px;
    border-radius: 30px;
    white-space: nowrap;
}

.ow-desc {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 24px;
    max-width: 460px;
}

.ow-cta {
    margin-bottom: 0;
    padding: 9px 50px 9px 24px;
    font-size: 12.5px;
    gap: 10px;
}

.ow-cta .btn-arrow {
    width: 34px;
}

/* image column: fills its half of the grid */
.ow-media {
    width: 100%;
    height: 0;
    padding-bottom: 62%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: #150b1c;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.4);
}

.ow-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
    will-change: transform;
    transition: transform .15s linear;
}

.ow-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg,rgba(226,58,208,.12),transparent 55%);
    pointer-events: none;
}

@media (max-width: 900px) {
    .ow-row {
        grid-template-columns:1fr;
        gap: 26px;
    }

    .ow-row-head {
        flex-direction: column;
        gap: 10px;
    }

    .ow-desc {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .our-portfolio {
        padding:70px 0 60px;
    }

    .ow-head {
        margin-bottom: 40px;
    }

    .ow-row {
        padding: 32px 0;
    }

    .ow-name {
        font-size: 21px;
    }

    .ow-desc {
        font-size: 14px;
    }

    .ow-media {
        padding-bottom: 68%;
        border-radius: 16px;
    }
}

/* ============================================================
   CONTACT INFO ("Let's Talk About Growing Your Business")
   ============================================================ */
.contact-info {
    position: relative;
    background: url(../assets/img/pricingbanner.png);
    padding: 100px 0 70px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.ci-head {
    text-align: center;
    /* max-width: 720px; */
    /* margin: 0 auto 50px; */
}

.ci-title {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
    /* margin: 0 0 20px; */
    color: #fff;
}

.ci-title .muted {
    background: linear-gradient(109deg,#FFFFFF,#828282);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ci-text {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.8;
    margin: 0 0 10px;
}

.ci-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.ci-left {
    display: flex;
    flex-direction: column;
}

.ci-label {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 22px;
}

.ci-label .muted {
    background: linear-gradient(109deg,var(--violet),var(--pink-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ci-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 26px;
}

.ci-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 3px solid transparent;
    border-radius: 12px;
    transition: border-color .3s ease,background .3s ease,transform .3s ease;
}

.ci-card .border-beam {
    border-radius: 12px;
    animation-duration: 4s;
}

.ci-card:nth-child(2) .border-beam {
    animation-delay: -1.3s;
}

.ci-card:nth-child(3) .border-beam {
    animation-delay: -2.6s;
}

.ci-card:hover {
    background: rgba(255,255,255,.06);
    border-left-color: var(--pink-2);
    transform: translateX(4px);
}

.ci-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--grad-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.ci-card-label {
    display: block;
    font-size: 11.5px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.ci-card-value {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    color: #fff;
    word-break: break-word;
}

.ci-social {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.ci-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .3s ease,transform .3s ease,border-color .3s ease;
}

.ci-social a:hover {
    background: var(--grad-pill);
    border-color: transparent;
    transform: translateY(-3px);
}

.ci-map {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    min-height: 320px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.ci-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.15);
}

@media (max-width: 900px) {
    .ci-grid {
        grid-template-columns:1fr;
        gap: 30px;
    }

    .ci-map {
        min-height: 280px;
    }
}

@media (max-width: 600px) {
    .contact-info {
        padding:70px 0 50px;
    }

    .ci-head {
        margin-bottom: 36px;
    }

    .ci-card {
        padding: 14px 16px;
    }

    .ci-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

/* ============================================================
   SERVICES DETAIL (alternating image/text cards)
   ============================================================ */
.services-detail {
    position: relative;
    background: url(../assets/img/pricingbanner.png);
    padding: 90px 0 60px;
    overflow: hidden;
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    background-position: right top;
}

.svc-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 40px;
    margin-bottom: 34px;
    overflow: hidden;
}

/* warm gradient glow along the bottom edge of every card */
.svc-card::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 3px;
    border-radius: 4px;
    background: linear-gradient(90deg,transparent,#ff7a3d,#e23ad0,#7b2ff7,transparent);
    opacity: .75;
}

.svc-card.reverse .svc-content {
    order: 2;
}

.svc-card.reverse .svc-media {
    order: 1;
}

.svc-heading-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.svc-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(226,58,208,.12);
    border: 1px solid rgba(226,58,208,.3);
    color: var(--pink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.svc-heading {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.svc-desc {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 14px;
}

.svc-list {
    list-style: none;
    margin: 20px 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #d8cfe4;
    line-height: 1.4;
}

.svc-list li i {
    color: var(--pink-2);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

.faq-section {
    background: url(../assets/img/pricingbanner.png);
    padding: 70px 20px;
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}

.faq-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.faq-title {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: clamp(50px,4vw,34px);
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    letter-spacing: .5px;
    margin: 0 0 40px;
    background: linear-gradient(180deg,#ffffff 55%,#8a8a8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: #1c1815;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .3s ease;
}

.faq-item.is-open {
    border-color: rgba(226,58,208,.35);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Poppins',sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #eae6e6;
}

.faq-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7b2ff7,#e23ad0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s ease;
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 400px;
}

.faq-answer-inner {
    margin: 0 18px 18px;
    background: #fdfdfd;
    border-radius: 10px;
    padding: 18px 20px;
}

.faq-answer-inner p {
    margin: 0;
    font-family: 'Poppins',sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: #333;
}

@media (max-width: 600px) {
    .faq-section {
        padding:50px 14px;
    }

    .faq-question {
        padding: 16px 16px;
        font-size: 12.5px;
        gap: 12px;
    }

    .faq-icon {
        width: 28px;
        height: 28px;
    }

    .faq-icon svg {
        width: 12px;
        height: 12px;
    }

    .faq-answer-inner {
        margin: 0 14px 14px;
        padding: 14px 16px;
    }
}

:root {
    --tc-bg: #0a0014;
    --tc-card: rgba(255,255,255,.03);
    --tc-border: rgba(255,255,255,.08);
    --tc-muted: #c9b8d8;
    --tc-body: #d8cfe4;
    --tc-violet: #7b2ff7;
    --tc-pink: #e23ad0;
    --tc-grad: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
}

.terms-hero {
    background: radial-gradient(circle at 20% 20%,#7b2ff7,transparent 55%),radial-gradient(circle at 80% 80%,#e23ad0,transparent 55%),#120022;
    padding: 90px 24px 70px;
}

.terms-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.terms-hero h1 {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: clamp(34px,6vw,60px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.terms-body {
    background: var(--tc-bg);
    padding: 70px 24px 90px;
}

.terms-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.terms-block h2 {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: clamp(22px,3.2vw,32px);
    line-height: 1.25;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: .3px;
}

.terms-block h2 span {
    background: linear-gradient(109deg,#ffffff,#828282);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.terms-block h4 {
    font-family: 'Poppins',sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tc-pink);
    margin: 22px 0 10px;
}

.terms-block p {
    font-family: 'Poppins',sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--tc-body);
    margin: 0 0 16px;
}

.terms-list {
    list-style: none;
    margin: 12px 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.terms-list li {
    position: relative;
    padding-left: 22px;
    font-family: 'Poppins',sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--tc-body);
}

.terms-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--tc-grad);
}

@media (max-width: 700px) {
    .terms-hero {
        padding:70px 18px 50px;
    }

    .terms-body {
        padding: 50px 18px 70px;
    }

    .terms-wrap {
        gap: 42px;
    }

    .terms-block h2 {
        margin-bottom: 14px;
    }

    .terms-block p,.terms-list li {
        font-size: 13px;
    }
}

:root {
    --pp-bg: #0a0014;
    --pp-muted: #c9b8d8;
    --pp-body: #d8cfe4;
    --pp-violet: #7b2ff7;
    --pp-pink: #e23ad0;
    --pp-grad: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
}

.privacy-hero {
    background: radial-gradient(circle at 20% 30%,#b06cff,transparent 55%),radial-gradient(circle at 85% 70%,#e23ad0,transparent 55%),#1a0033;
    padding: 90px 24px 70px;
}

.privacy-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.privacy-hero h1 {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: clamp(34px,6vw,60px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.privacy-body {
    background: var(--pp-bg);
    padding: 70px 24px 90px;
}

.privacy-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.privacy-block {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 46px;
}

.privacy-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.privacy-block h2 {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: clamp(20px,2.8vw,28px);
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: .3px;
}

.privacy-block h2 span {
    background: linear-gradient(109deg,#ffffff,#828282);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.privacy-block p {
    font-family: 'Poppins',sans-serif;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--pp-body);
    margin: 0 0 14px;
}

.privacy-block p:last-child {
    margin-bottom: 0;
}

.privacy-lead {
    font-weight: 600;
    color: #fff!important;
}

.privacy-link {
    color: var(--pp-pink);
    text-decoration: underline;
}

/* feature list ("What do we use your information for?") */
.privacy-feature-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-banner.sec2323 {
    padding: 35px 45px 0px 45px;
}

img.img-fluid.banner-phone.sdds {
    transform: none;
}

.privacy-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pf-icon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 3px;
    background: var(--pp-grad);
}

.privacy-feature-list strong {
    display: block;
    font-family: 'Poppins',sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
    margin-bottom: 4px;
}

.banner-section {
    padding: 80px 0;
}

.cta-banner {
    background: linear-gradient(115deg,#f7f7f7 10%,#ffffff 55%,#c9b2ff 100%);
    border-radius: 22px;
    padding: 35px 45px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.banner-phone {
    transform: rotate(-10deg);
}

.banner-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: #111;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-family: 'Neue Kaine';
    font-weight: 900;
    color: #101014;
    background: linear-gradient(109deg, #000000, #999999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.banner-title span {
    color: #444;
}

.banner-text {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.18;
    color: #101014;
    margin: 6px 0 0;
    letter-spacing: -.3px;
}

.banner-online {
    font-size: 48px;
    font-weight: 900;
    color: #111;
    margin-top: 10px;
    font-family: 'Neue Kaine';
}

.btn-start {
    display: inline-flex;
    align-items: center;
    background: #6b17d9;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    overflow: hidden;
    font-weight: 700;
    font-size: 14px;
    transition: .3s;
}

.btn-start:hover {
    color: #fff;
    transform: translateY(-3px);
}

.btn-start {
    padding-left: 28px;
}

.btn-start span {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #210026;
    margin-left: 18px;
}

.phone-link {
    color: #9b5dff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(90deg,#7b2ff7 0%,#c33ad6 55%,#e94fb0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.phone-link i {
    margin-right: 8px;
}

.services-detail {
    position: relative;
    background: url(../assets/img/pricingbanner.png);
    padding: 90px 0 60px;
    overflow: hidden;
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    background-position: right top;
}

.svc-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 40px;
    margin-bottom: 34px;
    overflow: hidden;
}

/* warm gradient glow along the bottom edge of every card */
.svc-card::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 3px;
    border-radius: 4px;
    background: linear-gradient(90deg,transparent,#ff7a3d,#e23ad0,#7b2ff7,transparent);
    opacity: .75;
}

.svc-card.reverse .svc-content {
    order: 2;
}

.svc-card.reverse .svc-media {
    order: 1;
}

.svc-heading-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.svc-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(226,58,208,.12);
    border: 1px solid rgba(226,58,208,.3);
    color: var(--pink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.svc-heading {
    font-family: 'Neue Kaine';
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.svc-desc {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 14px;
}

.svc-list {
    list-style: none;
    margin: 20px 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #d8cfe4;
    line-height: 1.4;
}

.svc-list li i {
    color: var(--pink-2);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

.svc-media {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    /* height: 0; */
    /* padding-bottom: 66%; */
    /* background: #6d7166; */
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.svc-media img {
    /* position: absolute; */
    /* inset: 0; */
    width: 100%;
    /* height: 100%; */
    /* object-fit: cover; */
}

@media(max-width: 991px) {
    img.img-fluid.banner-phone.sdds {
        margin: 0;
    }

    .banner-phone {
        margin-bottom: 30px;
        transform: none;
    }

    .banner-title {
        font-size: 34px;
    }

    .banner-online {
        font-size: 36px;
    }

    .cta-banner {
        text-align: center;
    }

    .d-flex {
        justify-content: center;
    }
}

@media(max-width: 576px) {
    .banner-title {
        font-size:28px;
    }

    .banner-online {
        font-size: 30px;
    }

    .cta-banner {
        padding: 30px 20px;
    }

    .privacy-feature-list em {
        display: block;
        font-family: 'Poppins',sans-serif;
        font-style: normal;
        font-size: 12.5px;
        line-height: 1.6;
        color: var(--pp-muted);
    }

    @media (max-width: 700px) {
        .privacy-hero {
            padding:70px 18px 50px;
        }

        .privacy-body {
            padding: 50px 18px 70px;
        }

        .privacy-wrap {
            gap: 36px;
        }

        .privacy-block {
            padding-bottom: 34px;
        }

        .privacy-block p,.privacy-feature-list em {
            font-size: 13px;
        }
    }

    .svc-media {
        position: relative;
        border-radius: 40px;
        overflow: hidden;
        /* height: 0; */
        /* padding-bottom: 66%; */
        background: #6d7166;
        box-shadow: 0 20px 50px rgba(0,0,0,.35);
    }

    .svc-media img {
        /* position: absolute; */
        /* inset: 0; */
        /* width: 100%; */
        /* height: 100%; */
        /* object-fit: cover; */
        er; */ }

    @media (max-width: 900px) {
        .svc-card {
            grid-template-columns:1fr;
            padding: 30px;
            gap: 28px;
        }

        .svc-card.reverse .svc-content,.svc-card.reverse .svc-media {
            order: initial;
        }

        .svc-media {
            /* padding-bottom: 60%; */
        }
    }

    @media (max-width: 600px) {
        .services-detail {
            padding:60px 0 40px;
        }

        .svc-card {
            padding: 22px;
            border-radius: 20px;
            margin-bottom: 24px;
        }

        .svc-heading {
            font-size: 19px;
        }

        .svc-desc {
            font-size: 13px;
        }

        .svc-media {
            /* padding-bottom: 68%; */
            /* border-radius: 16px; */
        }
    }

    /* ============================================================
   SINGLE SERVICE PAGE — breadcrumb, hero media/proof, CTA card,
   portfolio filter tags
   ============================================================ */
    /* breadcrumb */
    .breadcrumb-nav {
        position: relative;
        z-index: 2;
        font-size: 12.5px;
        letter-spacing: .3px;
        margin-bottom: 18px;
    }

    .breadcrumb-nav a {
        color: var(--muted);
        text-decoration: none;
        transition: color .25s ease;
    }

    .breadcrumb-nav a:hover {
        color: #fff;
    }

    .breadcrumb-nav .sep {
        color: rgba(255,255,255,.25);
        margin: 0 8px;
    }

    .breadcrumb-nav .current {
        color: var(--pink-2);
        font-weight: 600;
    }

    .hero-lead {
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.7;
        max-width: 560px;
        margin: 16px 0 0;
    }

    /* hero media (video/image showcase + proof strip) */
    .hero-media {
        position: relative;
        z-index: 2;
        margin-top: 40px;
    }

    .hero-video {
        position: relative;
        width: 100%;
        border-radius: 24px;
        overflow: hidden;
        height: 0;
        padding-bottom: 46%;
        background: #6d7166;
        box-shadow: 0 30px 70px rgba(0,0,0,.45);
    }

    .hero-video img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 78px;
        height: 78px;
        border-radius: 50%;
        background: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: var(--ink);
        cursor: pointer;
        transition: transform .3s ease,box-shadow .3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    .play-btn:hover {
        transform: translate(-50%,-50%) scale(1.08);
        box-shadow: 0 14px 40px rgba(226,58,208,.45);
    }

    .play-btn i {
        margin-left: 4px;
    }

    .hero-proof {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 26px;
    }

    .avatar-stack {
        display: flex;
    }

    .avatar-stack img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--bg);
        margin-left: -14px;
    }

    .avatar-stack img:first-child {
        margin-left: 0;
    }

    .proof-rating {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .proof-rating .stars {
        color: #ffb648;
        font-size: 15px;
        letter-spacing: 2px;
    }

    .proof-rating .proof-text {
        color: var(--muted);
        font-size: 13.5px;
    }

    @media (max-width: 700px) {
        .cta-card {
            padding:32px 26px;
            border-radius: 20px;
        }
    }

    /* portfolio filter tags (reuses pricing-tab visual language) */
    .glimpse-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 36px;
    }

    .glimpse-tag {
        padding: 9px 20px;
        border-radius: 30px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.03);
        color: var(--muted);
        font-family: 'Neue Kaine';
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .glimpse-tag.active {
        background: var(--grad-pill);
        color: #fff;
        border-color: transparent;
    }

    @media (max-width: 700px) {
        .glimpse-grid {
            grid-template-columns:1fr;
        }

        .hero-video {
            padding-bottom: 60%;
        }

        .play-btn {
            width: 60px;
            height: 60px;
            font-size: 20px;
        }
    }