*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 :root {
     --blue: #1055d4;
     --blue-b: #0a3a9e;
     --blue-m: #1a6aff;
     --blue-l: #3b82f6;
     --blue-pal: #dbeafe;
     --blue-gh: #eff6ff;
     --sky: #e0eeff;
     --white: #ffffff;
     --off: #f8faff;
     --g1: #f1f5f9;
     --g2: #e2e8f0;
     --g3: #94a3b8;
     --g4: #64748b;
     --text: #0f172a;
     --text2: #334155;
     --fh: 'Manrope', sans-serif;
     --fb: 'Inter', sans-serif;
     --nav: 74px;
     --r: 16px;
     --sh: 0 4px 24px rgba(16, 85, 212, .10);
     --shL: 0 12px 48px rgba(16, 85, 212, .18);
 }

 body {
     background: var(--white);
     color: var(--text);
     font-family: var(--fb);
     font-size: 16px;
     font-weight: 400;
     line-height: 1.75;
     overflow-x: hidden;
 }

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

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

 ::-webkit-scrollbar {
     width: 5px;
 }

 ::-webkit-scrollbar-track {
     background: var(--g1);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--blue);
     border-radius: 3px;
 }

 /* NAV */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 200;
     height: var(--nav);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 6%;
     background: transparent;
     transition: background .4s, box-shadow .4s;
 }

 nav.scrolled {
     background: rgba(255, 255, 255, .96);
     box-shadow: 0 2px 20px rgba(16, 85, 212, .09);
     backdrop-filter: blur(12px);
 }

 .nav-logo {
     font-family: var(--fh);
     font-size: 1.65rem;
     font-weight: 800;
     color: var(--blue);
     letter-spacing: -.02em;
 }

 .nav-logo span {
     color: var(--text);
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 2.2rem;
     list-style: none;
 }

 .nav-links a {
     font-size: .9rem;
     font-weight: 500;
     color: var(--text2);
     transition: color .2s;
 }

 .nav-links a:hover {
     color: var(--blue);
 }

 .nav-cta {
     padding: .6rem 1.5rem !important;
     background: var(--blue) !important;
     color: #fff !important;
     border-radius: 50px !important;
     font-weight: 600 !important;
     transition: background .3s, transform .2s !important;
 }

 .nav-cta:hover {
     background: var(--blue-b) !important;
     transform: translateY(-1px) !important;
 }

 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
 }

 .hamburger span {
     width: 24px;
     height: 2px;
     background: var(--text);
     border-radius: 2px;
     transition: .35s;
 }

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

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

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

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 28px;
     font-weight: 700;
     color: #111827;
 }

 .nav-logo img {
     width: 40px;
     height: 40px;
     object-fit: contain;
 }

 .nav-logo strong {
     color: #2563eb;
 }

 /* HERO */
 #home {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     overflow: hidden;
     position: relative;
     background: linear-gradient(135deg, var(--off) 0%, var(--sky) 55%, var(--blue-pal) 100%);
     padding-top: var(--nav);
 }

 #home::before {
     content: '';
     position: absolute;
     width: 640px;
     height: 640px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(59, 130, 246, .2) 0%, transparent 70%);
     top: -120px;
     right: -100px;
     pointer-events: none;
 }

 #home::after {
     content: '';
     position: absolute;
     width: 380px;
     height: 380px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(16, 85, 212, .12) 0%, transparent 70%);
     bottom: -80px;
     left: 8%;
     pointer-events: none;
 }

 .hero-text {
     padding: 5rem 4% 5rem 6%;
     position: relative;
     z-index: 2;
     animation: slideR 1s .2s both;
 }

 @keyframes slideR {
     from {
         opacity: 0;
         transform: translateX(-28px)
     }

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

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--blue-pal);
     color: var(--blue);
     font-size: .8rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: .38rem 1rem;
     border-radius: 50px;
     margin-bottom: 1.5rem;
     border: 1px solid rgba(59, 130, 246, .3);
 }

 .badge-dot {
     width: 8px;
     height: 8px;
     background: var(--blue-l);
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

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

     50% {
         transform: scale(1.5);
         opacity: .6
     }
 }

 .hero-title {
     font-family: var(--fh);
     font-size: clamp(2.8rem, 4.5vw, 4.2rem);
     font-weight: 800;
     line-height: 1.06;
     letter-spacing: -.03em;
     margin-bottom: 1.4rem;
 }

 .hero-title .blue {
     color: var(--blue);
 }

 .hero-sub {
     font-size: 1.1rem;
     color: var(--g4);
     max-width: 430px;
     margin-bottom: 2.4rem;
     line-height: 1.8;
 }

 .hero-btns {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .btn-blue {
     padding: .88rem 2.2rem;
     background: var(--blue);
     color: #fff;
     border-radius: 50px;
     font-weight: 600;
     font-size: .95rem;
     border: none;
     cursor: pointer;
     box-shadow: 0 6px 24px rgba(16, 85, 212, .35);
     transition: background .3s, transform .2s, box-shadow .3s;
 }

 .btn-blue:hover {
     background: var(--blue-b);
     transform: translateY(-2px);
     box-shadow: 0 10px 32px rgba(16, 85, 212, .45);
 }

 .btn-ghost {
     padding: .88rem 2.2rem;
     background: transparent;
     color: var(--blue);
     border-radius: 50px;
     font-weight: 600;
     font-size: .95rem;
     border: 2px solid var(--blue);
     cursor: pointer;
     transition: background .3s, color .3s;
 }

 .btn-ghost:hover {
     background: var(--blue);
     color: #fff;
 }

 .hero-stats {
     display: flex;
     gap: 2rem;
     margin-top: 2.6rem;
     padding-top: 2rem;
     border-top: 1px solid var(--g2);
 }

 .hs-num {
     font-family: var(--fh);
     font-size: 1.9rem;
     font-weight: 800;
     color: var(--blue);
     line-height: 1;
 }

 .hs-lbl {
     font-size: .82rem;
     color: var(--g3);
     margin-top: .2rem;
 }

 .hero-car {
     padding: 4rem 6% 4rem 2%;
     position: relative;
     z-index: 2;
     animation: slideL 1s .4s both;
 }

 @keyframes slideL {
     from {
         opacity: 0;
         transform: translateX(28px)
     }

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

 .hero-car-wrap {
     position: relative;
     max-width: 580px;
     margin: 0 auto;
 }

 .hero-car-img {
     width: 100%;
     aspect-ratio: 4/3;
     object-fit: cover;
     border-radius: 24px;
     box-shadow: var(--shL);
 }

 .hc-float {
     position: absolute;
     bottom: -1.6rem;
     left: -2rem;
     background: #fff;
     border-radius: 16px;
     padding: 1rem 1.4rem;
     box-shadow: var(--shL);
     display: flex;
     align-items: center;
     gap: .8rem;
     min-width: 195px;
 }

 .hc-icon {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     background: var(--blue-pal);
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .hc-icon svg {
     width: 20px;
     height: 20px;
 }

 .hc-lbl {
     font-size: .78rem;
     color: var(--g3);
     font-weight: 500;
 }

 .hc-val {
     font-size: 1rem;
     font-weight: 700;
     color: var(--text);
 }

 .hc-badge {
     position: absolute;
     top: -1rem;
     right: -1rem;
     width: 88px;
     height: 88px;
     border-radius: 50%;
     background: var(--blue);
     color: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-family: var(--fh);
     font-weight: 800;
     line-height: 1;
     box-shadow: 0 8px 24px rgba(16, 85, 212, .4);
 }

 .hc-badge strong {
     font-size: 1.6rem;
 }

 .hc-badge span {
     font-size: .63rem;
     letter-spacing: .06em;
     opacity: .85;
 }

 /* SECTION BASE */
 .sec {
     padding: 7rem 6%;
 }

 .sec-tag {
     display: inline-block;
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--blue);
     background: var(--blue-pal);
     padding: .3rem .9rem;
     border-radius: 50px;
     margin-bottom: 1rem;
 }

 .sec-title {
     font-family: var(--fh);
     font-size: clamp(2rem, 3.2vw, 3rem);
     font-weight: 800;
     letter-spacing: -.02em;
     line-height: 1.12;
     margin-bottom: 1rem;
 }

 .sec-title .blue {
     color: var(--blue);
 }

 .sec-desc {
     color: var(--g4);
     font-size: 1.02rem;
     max-width: 510px;
     line-height: 1.82;
 }

 /* ABOUT */
 #about {
     background: var(--white);
 }

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

 .ab-wrap {
     position: relative;
 }

 .ab-img {
     width: 100%;
     height: 500px;
     object-fit: cover;
     border-radius: 24px;
     box-shadow: var(--shL);
 }

 .ab-float {
     position: absolute;
     bottom: -2rem;
     right: -2rem;
     background: var(--blue);
     color: #fff;
     border-radius: 20px;
     padding: 1.3rem 1.7rem;
     text-align: center;
     box-shadow: 0 10px 32px rgba(16, 85, 212, .4);
 }

 .ab-float strong {
     font-family: var(--fh);
     font-size: 2.3rem;
     font-weight: 800;
     display: block;
 }

 .ab-float span {
     font-size: .76rem;
     opacity: .85;
     letter-spacing: .06em;
     text-transform: uppercase;
 }

 .ab-stats {
     display: flex;
     gap: 1.4rem;
     margin-top: 2.4rem;
     flex-wrap: wrap;
 }

 .a-stat {
     flex: 1;
     min-width: 100px;
     background: var(--blue-gh);
     border-radius: 16px;
     padding: 1.1rem 1.3rem;
     border: 1px solid var(--blue-pal);
 }

 .a-stat-n {
     font-family: var(--fh);
     font-size: 2rem;
     font-weight: 800;
     color: var(--blue);
     line-height: 1;
 }

 .a-stat-l {
     font-size: .82rem;
     color: var(--g4);
     margin-top: .25rem;
 }

 .ab-feats {
     margin-top: 1.8rem;
     display: flex;
     flex-direction: column;
     gap: .75rem;
 }

 .af {
     display: flex;
     align-items: center;
     gap: .7rem;
     font-size: .97rem;
     color: var(--text2);
 }

 .af-ck {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--blue-pal);
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .af-ck svg {
     width: 12px;
     height: 12px;
 }

 /* SERVICES SLIDER */
 #services {
     background: var(--off);
     overflow: hidden;
 }

 .sv-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 3rem;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .sl-nav {
     display: flex;
     gap: .8rem;
 }

 .sl-btn {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 2px solid var(--blue-pal);
     background: #fff;
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background .3s, border-color .3s, transform .2s;
 }

 .sl-btn:hover {
     background: var(--blue);
     color: #fff;
     border-color: var(--blue);
     transform: scale(1.06);
 }

 .sl-btn svg {
     width: 18px;
     height: 18px;
 }

 .sl-wrap {
     overflow: hidden;
     margin: 0 -6%;
     padding: 0 6% 1rem;
 }

 .sl-track {
     display: flex;
     gap: 1.5rem;
     transition: transform .52s cubic-bezier(.25, .8, .25, 1);
     will-change: transform;
 }

 .sv-card {
     flex: 0 0 calc(33.333% - 1rem);
     min-width: 270px;
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
     border: 1px solid var(--g2);
     box-shadow: var(--sh);
     transition: transform .3s, box-shadow .3s;
 }

 .sv-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shL);
 }

 .sv-img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .sv-body {
     padding: 1.5rem;
 }

 .sv-icon {
     width: 46px;
     height: 46px;
     border-radius: 13px;
     background: var(--blue-pal);
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: .9rem;
 }

 .sv-icon svg {
     width: 22px;
     height: 22px;
 }

 .sv-name {
     font-family: var(--fh);
     font-size: 1.18rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: .45rem;
 }

 .sv-desc {
     font-size: .92rem;
     color: var(--g4);
     line-height: 1.75;
 }

 .sv-lnk {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     margin-top: 1rem;
     font-size: .88rem;
     font-weight: 600;
     color: var(--blue);
     transition: gap .25s;
 }

 .sv-card:hover .sv-lnk {
     gap: .7rem;
 }

 .sl-dots {
     display: flex;
     justify-content: center;
     gap: .5rem;
     margin-top: 2rem;
 }

 .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--g2);
     cursor: pointer;
     transition: background .3s, width .3s;
 }

 .dot.active {
     background: var(--blue);
     width: 24px;
     border-radius: 4px;
 }


 #testimonials {
     background: var(--white);
 }

 .t-top {
     text-align: center;
     margin-bottom: 3.5rem;
 }

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

 .t-card {
     background: var(--off);
     border: 1px solid var(--g2);
     border-radius: 20px;
     padding: 2rem;
     position: relative;
     overflow: hidden;
     transition: border-color .3s, transform .3s, box-shadow .3s;
 }

 .t-card:hover {
     border-color: var(--blue-l);
     transform: translateY(-4px);
     box-shadow: var(--sh);
 }

 .t-card::before {
     content: '"';
     position: absolute;
     top: .5rem;
     right: 1.4rem;
     font-family: Georgia, serif;
     font-size: 6rem;
     line-height: 1;
     color: var(--blue-pal);
     pointer-events: none;
 }

 .stars {
     color: #f59e0b;
     font-size: .95rem;
     margin-bottom: .85rem;
 }

 .t-txt {
     font-size: .97rem;
     color: var(--text2);
     line-height: 1.82;
     margin-bottom: 1.4rem;
     font-style: italic;
 }

 .t-auth {
     display: flex;
     align-items: center;
     gap: .85rem;
 }

 .t-av {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--blue-pal);
 }

 .t-name {
     font-weight: 700;
     font-size: .96rem;
 }

 .t-role {
     font-size: .8rem;
     color: var(--g3);
 }


 #instagram {
     background: var(--off);
 }

 .ig-head {
     margin-bottom: 2.4rem;
 }

 .ig-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 8px;
 }

 .ig-item {
     aspect-ratio: 1;
     overflow: hidden;
     border-radius: 12px;
     position: relative;
     cursor: pointer;
 }

 .ig-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s;
 }

 .ig-item:hover img {
     transform: scale(1.08);
 }

 .ig-ov {
     position: absolute;
     inset: 0;
     background: rgba(16, 85, 212, 0);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     transition: background .3s;
 }

 .ig-item:hover .ig-ov {
     background: rgba(16, 85, 212, .35);
 }

 .ig-ov svg {
     opacity: 0;
     width: 26px;
     height: 26px;
     color: #fff;
     transition: opacity .3s;
 }

 .ig-item:hover .ig-ov svg {
     opacity: 1;
 }


 #contact {
     background: linear-gradient(135deg, var(--off) 0%, var(--sky) 100%);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: start;
     padding: 7rem 6%;
 }

 .ci-desc {
     color: var(--g4);
     font-size: 1.02rem;
     max-width: 400px;
     margin-bottom: 2.2rem;
     line-height: 1.82;
 }

 .ci-row {
     display: flex;
     gap: .9rem;
     align-items: flex-start;
     margin-bottom: 1.2rem;
 }

 .ci-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: var(--blue);
     color: #fff;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ci-icon svg {
     width: 18px;
     height: 18px;
 }

 .ci-txt {
     font-size: .93rem;
     color: var(--g4);
 }

 .ci-txt strong {
     display: block;
     color: var(--text);
     font-weight: 600;
     font-size: .97rem;
     margin-bottom: .1rem;
 }

 .cf {
     display: flex;
     flex-direction: column;
     gap: 1.1rem;
     background: #fff;
     padding: 2.4rem;
     border-radius: 24px;
     box-shadow: var(--shL);
 }

 .cf-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.1rem;
 }

 .cf-g {
     display: flex;
     flex-direction: column;
     gap: .35rem;
 }

 .cf-g label {
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .07em;
     text-transform: uppercase;
     color: var(--g4);
 }

 .cf-g input,
 .cf-g textarea,
 .cf-g select {
     background: var(--g1);
     border: 1.5px solid var(--g2);
     border-radius: 10px;
     color: var(--text);
     font-family: var(--fb);
     font-size: .97rem;
     padding: .76rem 1rem;
     outline: none;
     transition: border-color .3s, background .3s;
 }

 .cf-g input:focus,
 .cf-g textarea:focus,
 .cf-g select:focus {
     border-color: var(--blue);
     background: #fff;
 }

 .cf-g select option {
     background: #fff;
 }

 .cf-g textarea {
     min-height: 100px;
     resize: vertical;
 }

 .cf-sub {
     width: 100%;
     padding: 1rem;
     background: var(--blue);
     color: #fff;
     border: none;
     cursor: pointer;
     border-radius: 50px;
     font-family: var(--fb);
     font-size: .97rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .7rem;
     box-shadow: 0 6px 20px rgba(16, 85, 212, .35);
     transition: background .3s, transform .2s;
 }

 .cf-sub:hover {
     background: var(--blue-b);
     transform: translateY(-2px);
 }

 .cf-sub svg {
     width: 20px;
     height: 20px;
 }

 .wa-note {
     font-size: .8rem;
     color: var(--g3);
     text-align: center;
 }

 .wa-note strong {
     color: var(--blue);
 }


 footer {
     background: var(--text);
     color: #94a3b8;
 }

 .ft-top {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 3rem;
     padding: 5rem 6% 3rem;
 }

 .ft-brand {
     font-family: var(--fh);
     font-size: 1.75rem;
     font-weight: 800;
     color: var(--blue-l);
     margin-bottom: .85rem;
 }

 .ft-desc {
     font-size: .92rem;
     max-width: 265px;
     line-height: 1.78;
 }

 .ft-socs {
     display: flex;
     gap: .7rem;
     margin-top: 1.4rem;
 }

 .ft-s {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid #334155;
     color: #64748b;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: border-color .25s, color .25s;
 }

 .ft-s:hover {
     border-color: var(--blue-l);
     color: var(--blue-l);
 }

 .ft-s svg {
     width: 16px;
     height: 16px;
 }

 .ft-col h4 {
     font-size: .76rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #e2e8f0;
     margin-bottom: 1.2rem;
     font-weight: 600;
 }

 .ft-col ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: .6rem;
 }

 .ft-col ul a {
     font-size: .92rem;
     transition: color .2s;
 }

 .ft-col ul a:hover {
     color: var(--blue-l);
 }

 .ft-bot {
     border-top: 1px solid #1e293b;
     padding: 1.5rem 6%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
 }

 .ft-copy {
     font-size: .85rem;
 }

 .ft-leg {
     display: flex;
     gap: 1.5rem;
 }

 .ft-leg a {
     font-size: .85rem;
     transition: color .2s;
 }

 .ft-leg a:hover {
     color: var(--blue-l);
 }


 .reveal {
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .7s, transform .7s;
 }

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


 @media(max-width:1024px) {
     .sv-card {
         flex: 0 0 calc(50% - .75rem);
     }

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

     .ig-grid {
         grid-template-columns: repeat(4, 1fr);
     }

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

 @media(max-width:768px) {

     .sec,
     #contact {
         padding: 5rem 5%;
     }

     #home {
         grid-template-columns: 1fr;
         min-height: auto;
     }

     .hero-text {
         padding: 7rem 5% 3rem;
     }

     .hero-car {
         padding: 2rem 5% 5rem;
     }

     .about-grid,
     #contact {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .ab-float {
         right: 0;
         bottom: -1.5rem;
     }

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

     .sv-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .sv-card {
         flex: 0 0 calc(85vw);
     }

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

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

     .ft-top {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

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

     .nav-links {
         display: none;
         flex-direction: column;
         gap: 1.4rem;
         position: fixed;
         top: var(--nav);
         left: 0;
         right: 0;
         background: #fff;
         padding: 2rem 5%;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
     }

     .nav-links.open {
         display: flex;
     }

     .hamburger {
         display: flex;
     }
 }

 .gallery-sec {
     padding: 6rem 0;
     background: var(--off);
 }

 .gallery-head {
     text-align: center;
     margin-bottom: 3rem;
 }

 /* Desktop grid */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     padding: 0 2rem;
     max-width: 1200px;
     margin: 0 auto;
 }

 .gallery-grid .g-item:nth-child(1),
 .gallery-grid .g-item:nth-child(4) {
     grid-column: span 2;
 }

 .g-item {
     position: relative;
     overflow: hidden;
     border-radius: 16px;
     cursor: pointer;
     aspect-ratio: 4/3;
     background: var(--g2);
 }

 .g-item:nth-child(1),
 .g-item:nth-child(4) {
     aspect-ratio: 16/7;
 }

 .g-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
     display: block;
 }

 .g-item:hover img {
     transform: scale(1.06);
 }

 .g-ov {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 60%);
     opacity: 0;
     transition: opacity .3s;
     display: flex;
     align-items: flex-end;
     padding: 1.2rem;
 }

 .g-item:hover .g-ov {
     opacity: 1;
 }

 .g-ov span {
     color: #fff;
     font-size: .85rem;
     font-weight: 600;
     letter-spacing: .04em;
 }

 /* Mobile carousel */
 @media (max-width: 768px) {
     .gallery-grid {
         display: flex;
         gap: 12px;
         padding: 0 1.25rem;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .gallery-grid::-webkit-scrollbar {
         display: none;
     }

     .g-item {
         flex: 0 0 78vw;
         aspect-ratio: 4/3 !important;
         scroll-snap-align: start;
     }
 }

 /* Modal */
 .gal-modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: rgba(0, 0, 0, .88);
     backdrop-filter: blur(6px);
     align-items: center;
     justify-content: center;
     padding: 1rem;
 }

 .gal-modal.open {
     display: flex;
 }

 .gal-modal-inner {
     position: relative;
     max-width: 900px;
     width: 100%;
     animation: galFadeIn .25s ease;
 }

 @keyframes galFadeIn {
     from {
         opacity: 0;
         transform: scale(.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .gal-modal img {
     width: 100%;
     border-radius: 16px;
     max-height: 85vh;
     object-fit: contain;
     display: block;
 }

 .gal-modal-caption {
     color: #e2e8f0;
     font-size: .9rem;
     text-align: center;
     margin-top: .85rem;
     font-weight: 500;
 }

 .gal-close {
     position: absolute;
     top: -42px;
     right: 0;
     background: none;
     border: none;
     color: #fff;
     font-size: 1.8rem;
     cursor: pointer;
     line-height: 1;
     opacity: .8;
     transition: opacity .2s;
 }

 .gal-close:hover {
     opacity: 1;
 }

 .gal-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, .15);
     border: none;
     color: #fff;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     font-size: 1.3rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s;
     backdrop-filter: blur(4px);
 }

 .gal-nav:hover {
     background: rgba(255, 255, 255, .28);
 }

 .gal-prev {
     left: -56px;
 }

 .gal-next {
     right: -56px;
 }

 @media (max-width: 768px) {
     .gal-prev {
         left: 0;
     }

     .gal-next {
         right: 0;
     }
 }