/* =========================================================
   ZENA'S ACADEMY — style.css
   0. Theme variables (edit colours here)
   1. Base & typography
   2. Backgrounds, orbs & patterns
   3. Reusable components (buttons, eyebrows, titles)
   4. Top bar / 5. Header
   6. Hero / 7. Marquee & subjects
   8. About / 9. Approach / 10. Services
   11. Why us / 12. How it works / 13. Counters
   14. Gallery / 15. CTA banner / 16. FAQ
   17. Testimonials / 18. Contact / 19. Footer
   20. Floating buttons / 21. Reveal + reduced motion / 22. Responsive
========================================================== */

/* =========================================================
   0. THEME VARIABLES  — change the whole look from here
========================================================== */
:root {
   /* Primary blue family */
   --brand: #2554e8;
   /* royal blue (logo) */
   --brand-2: #4f7bff;
   /* lighter blue for gradients */
   --brand-dark: #16307d;
   /* deep blue */
   --brand-light: #e9f0ff;
   /* soft blue tint */

   /* Dark section backgrounds */
   --navy: #0c1533;
   /* dark section base */
   --navy-2: #142150;
   /* dark gradient partner */

   /* Section tints (light variety, not pure white) */
   --tint: #f3f7ff;
   /* cool tint */
   --tint-2: #fff8f1;
   /* warm tint (unused base but available) */

   /* Secondary accent hues (variety — not only blue) */
   --gold: #f6a723;
   --gold-dark: #d98908;
   --coral: #ff6a52;
   --teal: #14b8a6;
   --violet: #7c6cf0;

   /* Ink & text */
   --ink: #101835;
   --body: #4b5566;
   --muted: #79839a;
   --line: #e6eaf3;
   --bg: #ffffff;

   /* Effects */
   --radius: 20px;
   --radius-sm: 13px;
   --shadow-sm: 0 4px 16px rgba(16, 24, 53, .06);
   --shadow-md: 0 16px 38px rgba(16, 24, 53, .10);
   --shadow-lg: 0 30px 66px rgba(16, 24, 53, .18);
   --shadow-brand: 0 18px 38px rgba(37, 84, 232, .30);

   /* Type */
   --font-display: 'Fraunces', Georgia, serif;
   --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

   /* Layout */
   --topbar-h: 42px;
   --header-h: 80px;
}

/* =========================================================
   1. BASE & TYPOGRAPHY
========================================================== */
* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-h) + 10px);
   overflow-x: hidden;
}

body {
   font-family: var(--font-body);
   color: var(--body);
   background: var(--bg);
   line-height: 1.72;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
   font-family: var(--font-display);
   color: var(--ink);
   font-weight: 600;
   line-height: 1.16;
   letter-spacing: -.01em;
}

p {
   margin: 0 0 1rem;
}

a {
   text-decoration: none;
   transition: color .25s ease;
}

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

/* Gradient text accents */
.text-grad {
   background: linear-gradient(100deg, var(--brand), var(--brand-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.text-grad-warm {
   background: linear-gradient(100deg, var(--gold), var(--coral));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

/* Section rhythm */
.section {
   padding: clamp(66px, 8vw, 116px) 0;
   position: relative;
   overflow: hidden;
}

/* Section background variants */
.section-tint {
   background: var(--tint);
}

.section-dark {
   background: var(--navy);
   color: #fff;
}

.section-navy {
   background:
      radial-gradient(1200px 500px at 15% -10%, rgba(37, 84, 232, .35), transparent 60%),
      radial-gradient(900px 500px at 100% 120%, rgba(124, 108, 240, .22), transparent 55%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
   color: #fff;
}

.on-dark {
   color: #fff !important;
}

.on-dark-muted {
   color: rgba(255, 255, 255, .72);
}

.section-head {
   max-width: 720px;
   margin: 0 auto clamp(40px, 5vw, 64px);
   position: relative;
   z-index: 2;
}

/* =========================================================
   2. BACKGROUNDS, ORBS & PATTERNS
========================================================== */
/* Blurred glow orbs — placed inside relative sections */
.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
   opacity: .5;
   pointer-events: none;
   z-index: 0;
}

.orb--blue {
   width: 460px;
   height: 460px;
   background: rgba(37, 84, 232, .55);
   top: -140px;
   right: -80px;
}

.orb--gold {
   width: 360px;
   height: 360px;
   background: rgba(246, 167, 35, .32);
   bottom: -120px;
   left: -60px;
}

.orb--blue2 {
   width: 420px;
   height: 420px;
   background: rgba(79, 123, 255, .30);
   top: -100px;
   left: -90px;
   opacity: .6;
}

.orb--gold2 {
   width: 340px;
   height: 340px;
   background: rgba(246, 167, 35, .30);
   bottom: -120px;
   right: -60px;
   opacity: .55;
}

.orb--blue3 {
   width: 260px;
   height: 260px;
   background: rgba(79, 123, 255, .45);
   top: -60px;
   right: -40px;
   opacity: .5;
}

.orb--soft {
   width: 380px;
   height: 380px;
   background: rgba(37, 84, 232, .10);
   top: 6%;
   left: -140px;
}

.orb--soft2 {
   width: 360px;
   height: 360px;
   background: rgba(124, 108, 240, .10);
   bottom: 0;
   right: -140px;
}

/* Dotted pattern for light sections */
.has-dots::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   opacity: .5;
   background-image: radial-gradient(rgba(37, 84, 232, .10) 1.4px, transparent 1.4px);
   background-size: 26px 26px;
   -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
   mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

.has-dots>.container {
   position: relative;
   z-index: 2;
}

/* Grid layer for hero */
.grid-layer {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: .5;
   background-image:
      linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
   background-size: 56px 56px;
   -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000 20%, transparent 80%);
   mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000 20%, transparent 80%);
}

/* =========================================================
   3. REUSABLE COMPONENTS
========================================================== */
.eyebrow {
   display: inline-block;
   font-family: var(--font-body);
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--brand);
   background: var(--brand-light);
   padding: .42rem .95rem;
   border-radius: 100px;
   margin-bottom: 1rem;
}

.eyebrow-light {
   color: #fff;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .18);
}

.section-title {
   font-size: clamp(1.75rem, 3.7vw, 2.8rem);
   margin-bottom: 1rem;
}

.section-desc {
   color: var(--muted);
   font-size: 1.06rem;
   margin: 0;
}

.lead-text {
   font-size: 1.14rem;
   color: var(--ink);
   font-weight: 500;
}

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

/* Buttons */
.btn {
   font-family: var(--font-body);
   font-weight: 700;
   border-radius: 100px;
   padding: .72rem 1.55rem;
   transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease;
}

.btn-lg {
   padding: .88rem 1.95rem;
}

.btn-brand {
   background: linear-gradient(120deg, var(--brand), var(--brand-2));
   color: #fff;
   box-shadow: var(--shadow-brand);
   border: 0;
}

.btn-brand:hover {
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 24px 46px rgba(37, 84, 232, .40);
}

.btn-gold {
   background: linear-gradient(120deg, var(--gold), var(--gold-dark));
   color: #14213a;
   border: 0;
   box-shadow: 0 16px 34px rgba(246, 167, 35, .34);
}

.btn-gold:hover {
   color: #14213a;
   transform: translateY(-3px);
   box-shadow: 0 22px 42px rgba(246, 167, 35, .44);
}

.btn-outline-accent {
   background: transparent;
   color: var(--ac, var(--brand));
   border: 2px solid var(--ac, var(--brand));
}

.btn-outline-accent:hover {
   background: var(--ac, var(--brand));
   color: #fff;
   transform: translateY(-3px);
}

.btn-glass {
   background: rgba(255, 255, 255, .10);
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .5);
   backdrop-filter: blur(8px);
}

.btn-glass:hover {
   background: #fff;
   color: var(--brand-dark);
   transform: translateY(-3px);
}

.btn-light-cta {
   background: rgba(255, 255, 255, .14);
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .55);
   backdrop-filter: blur(6px);
}

.btn-light-cta:hover {
   background: #fff;
   color: var(--brand);
   transform: translateY(-3px);
}

/* Feature ticks */
.tick-item {
   display: flex;
   align-items: center;
   gap: .55rem;
   font-weight: 600;
   color: var(--ink);
}

.tick-item i {
   color: var(--brand);
   font-size: 1.15rem;
}

/* Floating decorative icons */
.float-icon {
   position: absolute;
   z-index: 3;
   width: 60px;
   height: 60px;
   display: grid;
   place-items: center;
   border-radius: 16px;
   background: #fff;
   color: var(--gold);
   font-size: 1.55rem;
   box-shadow: var(--shadow-md);
   animation: floaty 5s ease-in-out infinite;
}

.float-icon--1 {
   top: -20px;
   right: 10%;
}

.float-icon--2 {
   bottom: 12%;
   right: -8px;
   color: var(--brand);
}

.float-icon--3 {
   bottom: 16%;
   left: -14px;
   color: var(--coral);
   animation-delay: 1.4s;
}

@keyframes floaty {

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

   50% {
      transform: translateY(-14px);
   }
}

/* Social dots */
.social-dot {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .14);
   color: #fff;
   font-size: .95rem;
   transition: transform .25s ease, background .25s ease;
}

.social-dot:hover {
   background: var(--gold);
   color: #14213a;
   transform: translateY(-3px) rotate(6deg);
}

/* =========================================================
   4. TOP BAR
========================================================== */
.topbar {
   background: linear-gradient(90deg, var(--navy), var(--brand-dark));
   color: rgba(255, 255, 255, .9);
   font-size: .85rem;
   padding: .45rem 0;
   min-height: var(--topbar-h);
}

.topbar-link {
   color: rgba(255, 255, 255, .88);
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   font-weight: 500;
}

.topbar-link i {
   color: var(--gold);
}

.topbar-link:hover {
   color: #fff;
}

.topbar-note {
   font-weight: 700;
   color: var(--gold);
   letter-spacing: .02em;
}

.topbar .social-dot {
   width: 28px;
   height: 28px;
   font-size: .8rem;
   background: rgba(255, 255, 255, .1);
}

/* =========================================================
   5. HEADER / NAVBAR
========================================================== */
.site-header {
   position: sticky;
   top: 0;
   z-index: 1030;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--line);
   transition: box-shadow .3s ease;
}

.site-header.scrolled {
   box-shadow: var(--shadow-sm);
}

.navbar {
   min-height: var(--header-h);
   padding: .4rem 0;
}

.brand-logo {
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 6px 18px rgba(37, 84, 232, .18);
   border: 2px solid #fff;
}

.navbar-nav .nav-link {
   font-weight: 600;
   color: var(--ink);
   padding: .55rem .95rem;
   position: relative;
   border-radius: 8px;
}

.navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 6px;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--brand), var(--brand-2));
   transform: translateX(-50%);
   transition: width .3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: var(--brand);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
   width: 22px;
}

.navbar-toggler {
   border: 0;
   padding: .4rem;
}

.navbar-toggler:focus {
   box-shadow: none;
}

.toggler-bar {
   display: block;
   width: 26px;
   height: 2.5px;
   background: var(--ink);
   border-radius: 4px;
   margin: 5px 0;
   transition: .3s;
}

/* =========================================================
   6. HERO
========================================================== */
.hero {
   position: relative;
   background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
}

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

.hero .carousel-item {
   height: clamp(560px, 82vh, 780px);
   background-size: cover;
   background-position: center;
   background-color: transparent;
   align-items: center;
}

.hero .carousel-item.active,
.hero .carousel-item.carousel-item-next,
.hero .carousel-item.carousel-item-prev {
   display: flex;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(10, 17, 40, .92) 0%, rgba(10, 17, 40, .74) 42%, rgba(10, 17, 40, .30) 100%);
}

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

.hero-content {
   max-width: 640px;
   color: #fff;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-weight: 700;
   font-size: .82rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gold);
   background: rgba(246, 167, 35, .14);
   border: 1px solid rgba(246, 167, 35, .4);
   padding: .45rem 1rem;
   border-radius: 100px;
   margin-bottom: 1.3rem;
}

.hero-title {
   color: #fff;
   font-size: clamp(2.1rem, 5.2vw, 3.7rem);
   margin-bottom: 1.1rem;
}

.hero-title em {
   font-style: italic;
   background: linear-gradient(100deg, var(--gold), var(--coral));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.hero-sub {
   color: rgba(255, 255, 255, .9);
   font-size: 1.14rem;
   margin-bottom: 1.9rem;
   max-width: 560px;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .9rem;
}

/* Controls & dots */
.hero-arrow {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .14);
   color: #fff;
   font-size: 1.3rem;
   border: 1px solid rgba(255, 255, 255, .35);
   transition: background .25s ease, transform .25s ease;
}

.carousel-control-prev,
.carousel-control-next {
   width: auto;
   padding: 0 clamp(8px, 2vw, 26px);
   opacity: 1;
   z-index: 5;
}

.hero-arrow:hover {
   background: var(--gold);
   color: #14213a;
   transform: scale(1.08);
}

.hero-dots {
   margin-bottom: 1.6rem;
   z-index: 5;
}

.hero-dots [data-bs-target] {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, .4);
   opacity: 1;
   transition: .3s;
}

.hero-dots .active {
   background: var(--gold);
   width: 30px;
   border-radius: 100px;
}

/* Glass info card on right */
.hero-card-wrap {
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
   display: flex;
   align-items: center;
}

.hero-card-wrap .container {
   width: 100%;
}

.hero-card {
   pointer-events: auto;
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .22);
   backdrop-filter: blur(16px);
   border-radius: var(--radius);
   padding: 1.7rem 1.6rem;
   box-shadow: var(--shadow-lg);
   color: #fff;
}

.hero-card-badge {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   font-size: .74rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: .7rem;
}

.hero-card-title {
   color: #fff;
   font-size: 1.5rem;
   line-height: 1.2;
   margin: 0 0 1.1rem;
}

.hero-card-list {
   list-style: none;
   padding: 0;
   margin: 0 0 1.3rem;
}

.hero-card-list li {
   display: flex;
   align-items: center;
   gap: .7rem;
   font-size: .94rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .92);
   padding: .42rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.hero-card-list li:last-child {
   border-bottom: 0;
}

.hcl-ic {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   font-size: .95rem;
   color: #fff;
   flex: 0 0 auto;
}

.hcl-blue {
   background: rgba(79, 123, 255, .9);
}

.hcl-teal {
   background: rgba(20, 184, 166, .9);
}

.hcl-gold {
   background: rgba(246, 167, 35, .95);
   color: #14213a;
}

.hcl-coral {
   background: rgba(255, 106, 82, .92);
}

/* =========================================================
   7. MARQUEE + SUBJECT STRIP
========================================================== */
.marquee {
   background: linear-gradient(90deg, var(--brand), var(--brand-2));
   color: #fff;
   overflow: hidden;
   padding: .9rem 0;
   position: relative;
   z-index: 4;
}

.marquee-track {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   will-change: transform;
}

.marquee-group {
   display: inline-flex;
   align-items: center;
}

.marquee-item {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-weight: 600;
   font-size: .98rem;
   padding: 0 2.4rem;
   position: relative;
}

.marquee-item i {
   color: var(--gold);
}

.marquee-item::after {
   content: '';
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .55);
}

.subject-strip {
   padding: clamp(30px, 4vw, 40px) 0;
   overflow: hidden;
   position: relative;
}

.subject-strip-label {
   text-align: center;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .6);
   font-size: .8rem;
   margin-bottom: 1.8rem;
}

.subject-marquee {
   overflow: hidden;
   width: 100%;
}

.subject-track {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   will-change: transform;
}

.subject-group {
   display: inline-flex;
   align-items: center;
}

.subject-chip {
   flex: 0 0 auto;
   font-family: var(--font-display);
   font-size: clamp(1.6rem, 4.2vw, 2.9rem);
   font-weight: 600;
   font-style: italic;
   color: rgb(255 255 255 / 78%);
   margin: 0 1.7rem;
   display: inline-flex;
   align-items: center;
   transition: color .3s ease;
}

.subject-chip::after {
   content: '✦';
   color: var(--gold);
   font-size: .5em;
   font-style: normal;
   margin-left: 3.4rem;
}

.subject-chip:hover {
   color: #fff;
}

/* =========================================================
   8. ABOUT
========================================================== */
.about-media {
   position: relative;
   padding: 10px 26px 30px 10px;
   z-index: 2;
}

.about-img-main {
   width: 100%;
   border-radius: var(--radius);
   object-fit: cover;
   aspect-ratio: 5/4;
   box-shadow: var(--shadow-lg);
   background: var(--brand-light);
}

.about-img-float {
   position: absolute;
   right: 0;
   bottom: 6px;
   width: 46%;
   border-radius: var(--radius-sm);
   border: 6px solid #fff;
   box-shadow: var(--shadow-md);
   object-fit: cover;
   aspect-ratio: 4/3;
   background: var(--brand-light);
}

.about-badge {
   position: absolute;
   left: -8px;
   bottom: 24%;
   background: linear-gradient(130deg, var(--brand), var(--brand-2));
   color: #fff;
   padding: 1rem 1.2rem;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-brand);
   text-align: center;
   animation: floaty 6s ease-in-out infinite;
   z-index: 3;
}

.about-badge-num {
   display: block;
   font-family: var(--font-display);
   font-size: 1.95rem;
   font-weight: 700;
   line-height: 1;
}

.about-badge-label {
   display: block;
   font-size: .72rem;
   font-weight: 600;
   opacity: .92;
   max-width: 110px;
}

/* =========================================================
   9. APPROACH (dark)
========================================================== */
.approach .container {
   position: relative;
   z-index: 2;
}

.approach-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius);
   padding: 1.6rem 1.4rem;
   height: 100%;
   backdrop-filter: blur(6px);
   transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.approach-card:hover {
   transform: translateY(-8px);
   background: rgba(255, 255, 255, .10);
   border-color: rgba(255, 255, 255, .25);
}

.approach-ic {
   width: 56px;
   height: 56px;
   border-radius: 15px;
   display: grid;
   place-items: center;
   font-size: 1.5rem;
   color: #fff;
   margin-bottom: 1rem;
}

.ic-teal {
   background: linear-gradient(135deg, var(--teal), #0e8f82);
}

.ic-coral {
   background: linear-gradient(135deg, var(--coral), #e0432c);
}

.ic-gold {
   background: linear-gradient(135deg, var(--gold), var(--gold-dark));
   color: #14213a;
}

.ic-violet {
   background: linear-gradient(135deg, var(--violet), #5a49d6);
}

.approach-title {
   color: #fff;
   font-size: 1.2rem;
   margin-bottom: .5rem;
}

.approach-text {
   color: rgba(255, 255, 255, .72);
   font-size: .95rem;
   margin: 0;
}

/* =========================================================
   10. SERVICES (multi-colour accents via --ac)
========================================================== */
.services .container {
   position: relative;
   z-index: 2;
}

.service-card {
   --ac: var(--brand);
   background: #fff;
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--line);
   box-shadow: var(--shadow-sm);
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
   position: relative;
}

.service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--ac);
   z-index: 3;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s ease;
}

.service-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-lg);
   border-color: var(--ac);
}

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

.accent-blue {
   --ac: var(--brand);
}

.accent-teal {
   --ac: var(--teal);
}

.accent-coral {
   --ac: var(--coral);
}

.accent-violet {
   --ac: var(--violet);
}

.service-img {
   height: 178px;
   background-size: cover;
   background-position: center;
   background-color: var(--brand-light);
   position: relative;
}

.service-img::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(12, 21, 51, 0) 40%, rgba(12, 21, 51, .4) 100%);
}

.service-tag {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 2;
   background: var(--ac);
   color: #fff;
   font-weight: 700;
   font-size: .72rem;
   padding: .32rem .72rem;
   border-radius: 100px;
}

.service-body {
   padding: 1.4rem 1.3rem 1.5rem;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.service-name {
   font-size: 1.18rem;
   margin-bottom: .6rem;
   display: flex;
   align-items: center;
   gap: .6rem;
}

.service-ic {
   width: 40px;
   height: 40px;
   border-radius: 11px;
   display: grid;
   place-items: center;
   font-size: 1.05rem;
   background: color-mix(in srgb, var(--ac) 14%, #fff);
   color: var(--ac);
   flex: 0 0 auto;
}

.service-text {
   color: var(--muted);
   font-size: .95rem;
   flex: 1;
   margin-bottom: 1.1rem;
}

/* =========================================================
   11. WHY CHOOSE US — sequential "blink"
========================================================== */
.why .container {
   position: relative;
   z-index: 2;
}

.why-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 1.7rem 1.5rem;
   height: 100%;
   box-shadow: var(--shadow-sm);
   position: relative;
   overflow: hidden;
   transition: transform .35s ease, box-shadow .4s ease, border-color .4s ease;
}

.why-card::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--line);
   transition: background .5s ease;
}

.why-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   font-size: 1.5rem;
   background: var(--brand-light);
   color: var(--brand);
   margin-bottom: 1rem;
   transition: background .5s ease, color .5s ease, transform .4s ease;
}

.why-title {
   font-size: 1.18rem;
   margin-bottom: .5rem;
}

.why-text {
   color: var(--muted);
   font-size: .95rem;
   margin: 0;
}

.why-card.is-lit {
   border-color: var(--brand);
   box-shadow: var(--shadow-brand);
   transform: translateY(-6px);
}

.why-card.is-lit::before {
   background: linear-gradient(180deg, var(--gold), var(--coral));
}

.why-card.is-lit .why-icon {
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   color: #fff;
   transform: rotate(-6deg) scale(1.05);
}

.why-card:hover {
   transform: translateY(-6px);
   border-color: var(--brand);
   box-shadow: var(--shadow-md);
}

/* =========================================================
   12. HOW IT WORKS (dark)
========================================================== */
.how .container {
   position: relative;
   z-index: 2;
}

.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.4rem;
   position: relative;
}

.steps::before {
   content: '';
   position: absolute;
   top: 40px;
   left: 12%;
   right: 12%;
   height: 2px;
   background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
   opacity: .55;
   z-index: 0;
}

.step {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--radius);
   padding: 2.3rem 1.3rem 1.6rem;
   text-align: center;
   position: relative;
   z-index: 1;
   backdrop-filter: blur(6px);
   transition: transform .35s ease, background .35s ease;
}

.step:hover {
   transform: translateY(-8px);
   background: rgba(255, 255, 255, .1);
}

.step-num {
   position: absolute;
   top: -18px;
   left: 50%;
   transform: translateX(-50%);
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gold), var(--gold-dark));
   color: #14213a;
   font-family: var(--font-display);
   font-weight: 700;
   display: grid;
   place-items: center;
   box-shadow: 0 8px 20px rgba(246, 167, 35, .4);
}

.step-icon {
   display: inline-grid;
   place-items: center;
   width: 60px;
   height: 60px;
   border-radius: 16px;
   background: rgba(79, 123, 255, .2);
   color: #9fbcff;
   font-size: 1.6rem;
   margin-bottom: .9rem;
}

.step-title {
   color: #fff;
   font-size: 1.15rem;
   margin-bottom: .4rem;
}

.step-text {
   color: rgba(255, 255, 255, .7);
   font-size: .92rem;
   margin: 0;
}

/* =========================================================
   14. GALLERY
========================================================== */
.gallery .container {
   position: relative;
   z-index: 2;
}

.gallery-item {
   position: relative;
   margin: 0;
   border-radius: var(--radius-sm);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
}

.gallery-item img {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   background: var(--brand-light);
   transition: transform .5s ease;
}

.gallery-item figcaption {
   position: absolute;
   inset: auto 0 0 0;
   padding: .9rem 1rem;
   color: #fff;
   font-weight: 600;
   font-size: .92rem;
   background: linear-gradient(180deg, transparent, rgba(12, 21, 51, .88));
   transform: translateY(8px);
   opacity: 0;
   transition: .35s ease;
}

.gallery-item::after {
   content: '\F52A';
   font-family: 'bootstrap-icons';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(.6);
   color: #fff;
   font-size: 1.6rem;
   opacity: 0;
   transition: .35s ease;
}

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

.gallery-item:hover figcaption {
   transform: translateY(0);
   opacity: 1;
}

.gallery-item:hover::after {
   opacity: .9;
   transform: translate(-50%, -50%) scale(1);
}

/* =========================================================
   15. CTA BANNER
========================================================== */
.cta-banner {
   position: relative;
   overflow: hidden;
   padding: clamp(48px, 6vw, 72px) 0;
   background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 45%, var(--violet) 120%);
   color: #fff;
}

.cta-inner {
   position: relative;
   z-index: 2;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.6rem;
}

.cta-title {
   color: #fff;
   font-size: clamp(1.5rem, 3.4vw, 2.3rem);
   margin: 0 0 .5rem;
   max-width: 620px;
}

.cta-sub {
   color: rgba(255, 255, 255, .88);
   margin: 0;
   max-width: 560px;
}

.cta-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .8rem;
}

/* =========================================================
   16. FAQ
========================================================== */
.faq {
   position: relative;
}

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

.faq-accordion .accordion-item {
   border: 1px solid var(--line);
   border-radius: var(--radius-sm) !important;
   margin-bottom: .9rem;
   overflow: hidden;
   background: #fff;
   box-shadow: var(--shadow-sm);
}

.faq-accordion .accordion-button {
   font-family: var(--font-body);
   font-weight: 700;
   color: var(--ink);
   padding: 1.1rem 1.3rem;
   background: #fff;
   box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
   color: var(--brand);
   background: var(--brand-light);
}

.faq-accordion .accordion-button:focus {
   box-shadow: none;
}

.faq-accordion .accordion-button::after {
   width: 1.1rem;
   height: 1.1rem;
   background-size: 1.1rem;
}

.faq-accordion .accordion-body {
   color: var(--muted);
   padding: 0 1.3rem 1.2rem;
}

/* =========================================================
   17. TESTIMONIALS (dark)
========================================================== */
.testimonials .container {
   position: relative;
   z-index: 2;
}

.testi-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 2.5rem 2.2rem;
   text-align: center;
   box-shadow: var(--shadow-md);
   position: relative;
   backdrop-filter: blur(8px);
}

.testi-quote {
   font-size: 2.8rem;
   color: rgba(255, 255, 255, .14);
   position: absolute;
   top: 14px;
   left: 22px;
}

.testi-text {
   font-size: 1.14rem;
   color: #fff;
   font-weight: 500;
   position: relative;
   z-index: 1;
}

.testi-stars {
   color: var(--gold);
   margin: .7rem 0 1.3rem;
   font-size: .95rem;
}

.testi-person {
   display: inline-flex;
   align-items: center;
   gap: .8rem;
}

.testi-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   color: #fff;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.25rem;
   display: grid;
   place-items: center;
}

.testi-person div {
   text-align: left;
   line-height: 1.25;
}

.testi-person strong {
   display: block;
   color: #fff;
}

.testi-person small {
   color: rgba(255, 255, 255, .62);
}

.testi-dots {
   position: static;
   margin-top: 1.8rem;
}

.testi-dots [data-bs-target] {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   border: 0;
   background: rgba(255, 255, 255, .28);
   opacity: 1;
}

.testi-dots .active {
   background: var(--gold);
   width: 28px;
   border-radius: 100px;
}

/* =========================================================
   18. CONTACT
========================================================== */
.contact .container {
   position: relative;
   z-index: 2;
}

.contact-info {
   background: linear-gradient(160deg, var(--navy), var(--navy-2));
   color: #fff;
   border-radius: var(--radius);
   padding: 2.1rem 1.9rem;
   height: 100%;
   box-shadow: var(--shadow-md);
   position: relative;
   overflow: hidden;
}

.contact-info .contact-line {
   position: relative;
   z-index: 2;
}

.contact-line {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   padding: 1rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
   color: #fff;
}

.contact-line:last-child {
   border-bottom: 0;
}

.contact-ic {
   flex: 0 0 auto;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .1);
   color: var(--gold);
   display: grid;
   place-items: center;
   font-size: 1.2rem;
   transition: background .3s ease, color .3s ease;
}

.contact-line:hover .contact-ic {
   background: var(--gold);
   color: #14213a;
}

.contact-line small {
   display: block;
   color: rgba(255, 255, 255, .6);
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .08em;
}

.contact-line strong {
   font-weight: 600;
   font-size: .98rem;
}

.contact-form {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 2.1rem 1.9rem;
   box-shadow: var(--shadow-sm);
   height: 100%;
}

.contact-form .form-label {
   font-weight: 600;
   color: var(--ink);
   font-size: .9rem;
   margin-bottom: .35rem;
}

.contact-form .form-control,
.contact-form .form-select {
   border: 1.5px solid var(--line);
   border-radius: var(--radius-sm);
   padding: .72rem .9rem;
   font-size: .95rem;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 4px var(--brand-light);
}

.form-note {
   font-size: .92rem;
   font-weight: 600;
   margin: 0;
}

.form-note.ok {
   color: #1a8f5c;
}

.form-note.err {
   color: #d64545;
}

/* =========================================================
   19. FOOTER
========================================================== */
.site-footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .75);
   padding: clamp(54px, 6vw, 76px) 0 0;
   position: relative;
}

.site-footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--brand), var(--gold), var(--coral));
}

.footer-brand img {
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, .2);
}

.footer-about {
   font-size: .95rem;
   line-height: 1.7;
}

.footer-title {
   color: #fff;
   font-size: 1.05rem;
   margin-bottom: 1.1rem;
   font-family: var(--font-display);
}

.footer-links,
.footer-contact {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-links li {
   margin-bottom: .6rem;
}

.footer-links a {
   color: rgba(255, 255, 255, .72);
   font-size: .95rem;
}

.footer-links a:hover {
   color: var(--gold);
   padding-left: 5px;
}

.footer-contact li {
   display: flex;
   gap: .6rem;
   margin-bottom: .8rem;
   font-size: .92rem;
   align-items: flex-start;
}

.footer-contact i {
   color: var(--gold);
   margin-top: 3px;
}

.footer-contact a {
   color: rgba(255, 255, 255, .72);
}

.footer-contact a:hover {
   color: var(--gold);
}

.footer-bottom {
   margin-top: 2.6rem;
   padding: 1.3rem 0;
   border-top: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: .5rem;
   font-size: .86rem;
}

.footer-bottom p {
   margin: 0;
}

/* =========================================================
   20. FLOATING BUTTONS & BACK-TO-TOP
========================================================== */
.float-btn {
   position: fixed;
   bottom: 26px;
   z-index: 1040;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #fff;
   font-size: 1.5rem;
   box-shadow: var(--shadow-md);
}

.float-wa {
   left: 22px;
   background: #25d366;
   animation: pulse-wa 2.2s infinite;
}

.float-call {
   right: 22px;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   animation: pulse-call 2.2s infinite;
}

.float-btn:hover {
   color: #fff;
   transform: scale(1.1);
}

@keyframes pulse-wa {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
   }

   70% {
      box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
   }
}

@keyframes pulse-call {
   0% {
      box-shadow: 0 0 0 0 rgba(37, 84, 232, .5);
   }

   70% {
      box-shadow: 0 0 0 16px rgba(37, 84, 232, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(37, 84, 232, 0);
   }
}

.to-top {
   position: fixed;
   right: 22px;
   bottom: 92px;
   z-index: 1039;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 0;
   background: var(--navy);
   color: #fff;
   font-size: 1.1rem;
   opacity: 0;
   visibility: hidden;
   transform: translateY(12px);
   transition: .3s ease;
   box-shadow: var(--shadow-md);
}

.to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.to-top:hover {
   background: var(--brand);
}

/* =========================================================
   21. REVEAL + REDUCED MOTION
========================================================== */
.reveal {
   opacity: 0;
   transform: translateY(34px);
   transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
   opacity: 1;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

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

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

/* =========================================================
   22. RESPONSIVE
========================================================== */
@media (max-width: 991.98px) {
   .navbar-collapse {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      margin-top: .8rem;
      padding: 1rem;
      box-shadow: var(--shadow-md);
   }

   .navbar-nav .nav-link {
      padding: .6rem .4rem;
   }

   .navbar-nav .btn-brand {
      display: inline-block;
      margin-top: .5rem;
   }

   .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.2rem 1.2rem;
   }

   .steps::before {
      display: none;
   }

   .hero-overlay {
      background: linear-gradient(160deg, rgba(10, 17, 40, .94) 0%, rgba(10, 17, 40, .76) 100%);
   }

   .hero-card-wrap {
      position: static;
      padding: 0 0 clamp(40px, 7vw, 64px);
      background: var(--navy-2);
   }

   .hero-card-wrap .row {
      justify-content: center;
   }

   .hero-card-wrap .col-lg-4 {
      max-width: 460px;
   }

   .about-media {
      padding: 0 0 40px;
   }

   .about-badge {
      left: 6px;
   }

   .cta-inner {
      flex-direction: column;
      text-align: center;
      align-items: center;
   }
}

@media (max-width: 575.98px) {
   .topbar {
      font-size: .78rem;
   }

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

   .hero-actions .btn {
      flex: 1 1 auto;
      text-align: center;
   }

   .float-btn {
      width: 50px;
      height: 50px;
      font-size: 1.3rem;
   }

   .contact-info,
   .contact-form {
      padding: 1.5rem 1.2rem;
   }

   .footer-bottom {
      justify-content: center;
      text-align: center;
   }

   .cta-actions {
      width: 100%;
      flex-direction: column;
   }

   .cta-actions .btn {
      width: 100%;
      text-align: center;
   }
}