/* ═══════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  Reset & Box Model
   2.  Design Tokens (CSS Variables)
   3.  Base HTML & Body
   4.  Utilities (wrapper, labels, headings, gradient text)
   5.  Scrollbar
   6.  Buttons
   7.  Reveal Animations
   8.  Skip Link
   9.  Custom Cursor
   10. Navigation
   11. Mobile Hamburger
   12. Mobile Menu
   13. Hero Section
   14. Hero Cards & Stat Panels
   15. Marquee Strip
   16. Stats Section
   17. Philosophy Section
   18. Services Section
   19. Process Section
   20. Skills Section
   21. Difference Section
   22. Quote Band
   23. About Section
   24. Contact Section
   25. Footer
   26. Modal
   27. Floating Action Buttons
═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────
   1. RESET & BOX MODEL
─────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}


/* ───────────────────────────────────────────────
   2. DESIGN TOKENS
─────────────────────────────────────────────── */
:root {

  /* Brand colours */
  --navy:   #0B0F3B;
  --cream:  #F5F6FA;
  --orange: #FF6A1A;
  --purple: #7A2EFF;
  --tmuted: #5a6080;   /* muted text */
  --tlight: #9098c0;   /* light text  */

  /* Gradient */
  --grad: linear-gradient(135deg, #7A2EFF 0%, #FF6A1A 100%);

  /* Shadows (s1 = softest → s4 = strongest) */
  --s1: 0  2px  12px rgba(11, 15, 59, .08);
  --s2: 0  8px  32px rgba(11, 15, 59, .13);
  --s3: 0 20px  60px rgba(11, 15, 59, .18);
  --s4: 0 40px  80px rgba(11, 15, 59, .24);

  /* Border radii */
  --r:   16px;
  --rsm: 10px;

  /* Fonts */
  --fh: 'Playfair Display', Georgia, serif;  /* headings */
  --fb: 'DM Sans', Arial, sans-serif;        /* body     */
}


/* ───────────────────────────────────────────────
   3. BASE HTML & BODY
─────────────────────────────────────────────── */
html {
  scroll-behavior:   smooth;
  font-size:         16px;
  background:        #0B0F3B;
  overscroll-behavior: none;
}

body {
  font-family:              var(--fb);
  background:               var(--cream);
  color:                    var(--navy);
  overflow-x:               hidden;
  line-height:              1.6;
  -webkit-font-smoothing:   antialiased;
  text-rendering:           optimizeLegibility;
}

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


/* ───────────────────────────────────────────────
   4. UTILITIES
─────────────────────────────────────────────── */

/* Centered max-width wrapper */
.w {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 clamp(16px, 5vw, 40px);
}

/* Orange badge pill label */
.lbl {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--fb);
  font-size:      .67rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--orange);
  margin-bottom:  .75rem;
  padding:        6px 14px;
  border-radius:  100px;
  border:         1px solid rgba(255, 106, 26, .25);
  background:     rgba(255, 106, 26, .08);
}

/* Light variant of label (for dark backgrounds) */
.lbl-w {
  color:        var(--orange);
  border-color: rgba(255, 106, 26, .30);
  background:   rgba(255, 106, 26, .10);
}

/* Section heading — dark version */
.h2 {
  font-family:    var(--fh);
  font-size:      clamp(1.8rem, 4vw, 3.1rem);
  font-weight:    800;
  line-height:    1.08;
  color:          var(--navy);
  letter-spacing: -.025em;
}

/* Section heading — white version */
.h2w {
  color: #fff;
}

/* Purple → Orange gradient text */
.gt {
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  color:                   transparent;
}


/* ───────────────────────────────────────────────
   5. SCROLLBAR
─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background:    linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-radius: 3px;
}


/* ───────────────────────────────────────────────
   6. BUTTONS
─────────────────────────────────────────────── */

/* Base button reset + shared styles */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         14px 28px;
  border-radius:   100px;
  font-family:     var(--fb);
  font-size:       .87rem;
  font-weight:     600;
  letter-spacing:  .03em;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      transform .3s, box-shadow .3s;
  white-space:     nowrap;
  line-height:     1;
  min-height:      48px;
}

/* Gradient filled button */
.bg {
  background:  linear-gradient(135deg, #7A2EFF, #FF6A1A);
  color:       #fff;
  box-shadow:  0 4px 24px rgba(122, 46, 255, .30);
}
.bg:hover {
  transform:  scale(1.05);
  box-shadow: 0 14px 36px rgba(122, 46, 255, .42);
}

/* White outlined button (on dark bg) */
.bw {
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A) !important;
  color:      #fff !important;
  border:     2px solid rgba(255, 255, 255, .30);
  backdrop-filter: blur(8px);
}
.bw:hover {
  transform:  scale(1.05);
  background: rgba(255, 255, 255, .90);
}

/* Ghost white transparent button */
.bgwp {
  background:      rgba(255, 255, 255, .08);
  color:           #fff;
  border:          2px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
}
.bgwp:hover {
  background:   rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .40);
}


/* ───────────────────────────────────────────────
   7. REVEAL ANIMATIONS
─────────────────────────────────────────────── */
@keyframes fup {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.rv {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.rv.in {
  opacity:   1;
  transform: none;
}

/* Stagger delays */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }


/* ───────────────────────────────────────────────
   8. SKIP LINK (accessibility)
─────────────────────────────────────────────── */
.skip {
  position:      absolute;
  top:           -99px;
  left:          0;
  background:    var(--purple);
  color:         #fff;
  padding:       8px 16px;
  z-index:       9999;
  border-radius: 0 0 8px 0;
  font-size:     .85rem;
}
.skip:focus {
  top: 0;
}


/* ───────────────────────────────────────────────
   9. CUSTOM CURSOR  (hidden on touch / ≤1024px)
─────────────────────────────────────────────── */
#cur {
  position:       fixed;
  top:            0;
  left:           0;
  z-index:        9999;
  pointer-events: none;
}

/* Dot */
#cdot {
  width:            8px;
  height:           8px;
  background:       var(--orange);
  border-radius:    50%;
  position:         absolute;
  transform:        translate(-50%, -50%);
}

/* Ring */
#cring {
  width:         34px;
  height:        34px;
  border:        1.5px solid rgba(122, 46, 255, .55);
  border-radius: 50%;
  position:      absolute;
  transform:     translate(-50%, -50%);
  transition:    width .3s, height .3s, border-color .3s;
}

/* Grow ring on hoverable element */
body.cg #cring {
  width:        54px;
  height:       54px;
  border-color: var(--purple);
}

@media (max-width: 1024px) {
  #cur { display: none; }
}


/* ═══════════════════════════════════════════════
   10. NAVIGATION
═══════════════════════════════════════════════ */
#nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         200;
  height:          68px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 clamp(16px, 5vw, 40px);
  transition:      background .4s, box-shadow .4s, padding .3s;
}

/* Scrolled state — filled dark bar */
#nav.sc {
  background:              rgba(11, 15, 59, 0.97);
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:              0 2px 24px rgba(0, 0, 0, .28);
  height:                  64px;
}

/* Logo container */
.nlogo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  flex-shrink:     0;
}
.nlogo img {
  height:     54px;
  width:      auto;
  object-fit: contain;
  transition: transform .3s;
}
.nlogo:hover img {
  transform: scale(1.05);
}

/* Logo text (shows when no image) */
.nlogo-txt {
  font-family:    var(--fh);
  font-size:      1.4rem;
  font-weight:    800;
  color:          #fff;
  letter-spacing: -.01em;
  display:        none;
}
.nlogo-txt .hi {
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
}

/* Stacked name + tagline under logo */
.nlogo-name {
  display:        flex;
  flex-direction: column;
}
.nlogo-name span:first-child {
  font-family: var(--fh);
  font-size:   1.15rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1;
}
.nlogo-name span:last-child {
  font-family:    var(--fb);
  font-size:      .60rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--orange);
  margin-top:     2px;
}

/* Nav links list */
.nlinks {
  display:     flex;
  gap:         .25rem;
  list-style:  none;
  align-items: center;
}
.nlinks a {
  position:       relative;
  color:          rgba(255, 255, 255, .75);
  text-decoration: none;
  font-family:    var(--fb);
  font-size:      .84rem;
  font-weight:    500;
  letter-spacing: .03em;
  transition:     color .3s;
  padding:        6px 14px;
  border-radius:  100px;
}
.nlinks a:hover {
  color: #fff;
}
.nlinks a.active {
  color: var(--orange);
}
.nlinks a.active::after {
  content:       '';
  position:      absolute;
  bottom:        0;
  left:          14px;
  right:         14px;
  height:        2px;
  background:    linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-radius: 2px;
}

/* Nav CTA button */
.ncta {
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  color:                   #fff;
  padding:                 10px 22px;
  border-radius:           100px;
  text-decoration:         none;
  font-family:             var(--fb);
  font-size:               .82rem;
  font-weight:             600;
  box-shadow:              0 4px 24px rgba(122, 46, 255, .30);
  transition:              transform .3s, box-shadow .3s;
  flex-shrink:             0;
  min-height:              42px;
  display:                 flex;
  align-items:             center;
}
.ncta:hover {
  transform:  scale(1.05);
  box-shadow: 0 8px 24px rgba(122, 46, 255, .45);
}


/* ───────────────────────────────────────────────
   11. HAMBURGER ICON
─────────────────────────────────────────────── */
.ham {
  display:                  none;
  flex-direction:           column;
  gap:                      5px;
  background:               none;
  border:                   none;
  cursor:                   pointer;
  padding:                  8px;
  border-radius:            12px;
  transition:               background .2s;
  -webkit-tap-highlight-color: transparent;
}
.ham:hover {
  background: rgba(255, 255, 255, .08);
}
.ham span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    #fff;
  border-radius: 2px;
  transition:    all .3s;
}

/* Animate to X when open */
.ham.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.ham.open span:nth-child(2) { opacity:   0; }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nlinks,
  .ncta { display: none; }

  .ham   { display: flex; }
}


/* ───────────────────────────────────────────────
   12. MOBILE MENU
─────────────────────────────────────────────── */
.mmenu {
  display:                 none;
  position:                fixed;
  inset:                   0;
  z-index:                 190;
  background:              rgba(11, 15, 59, 0.98);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction:          column;
  justify-content:         center;
  align-items:             center;
  padding:                 80px 5vw 40px;
  overflow-y:              auto;
}
.mmenu.open {
  display: flex;
}

/* Menu links */
.mmenu a {
  color:           rgba(255, 255, 255, .75);
  text-decoration: none;
  font-size:       1.5rem;
  font-family:     var(--fh);
  font-weight:     700;
  padding:         1.1rem 0;
  width:           100%;
  text-align:      center;
  border-bottom:   1px solid rgba(255, 255, 255, .07);
  transition:      color .3s;
  display:         block;
}
.mmenu a:first-child {
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.mmenu a:hover,
.mmenu a:focus {
  color: var(--orange);
}

/* Mobile menu CTA */
.mmcta {
  margin-top:      2rem    !important;
  background:      linear-gradient(135deg, #7A2EFF, #FF6A1A) !important;
  color:           #fff    !important;
  padding:         14px 40px !important;
  border-radius:   100px   !important;
  font-size:       1rem    !important;
  font-weight:     600     !important;
  font-family:     var(--fb) !important;
  border:          none    !important;
  border-top:      none    !important;
  display:         inline-flex !important;
  align-items:     center  !important;
  justify-content: center  !important;
  width:           auto    !important;
  min-height:      52px    !important;
}


/* ═══════════════════════════════════════════════
   13. HERO SECTION
═══════════════════════════════════════════════ */
#hero {
  position:       relative;
  min-height:     100svh;
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  overflow:       hidden;
  background:     var(--navy);
}

/* Background image layer */
.hbg {
  position:            absolute;
  inset:               0;
  z-index:             0;
  background-image:    url('https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?w=1800&q=80');
  background-size:     cover;
  background-position: center 35%;
  opacity:             0.15;
}

/* Dark overlay */
.hoverlay {
  position:  absolute;
  inset:     0;
  z-index:   1;
  background: var(--navy);
  opacity:   0.92;
}

/* Gradient accent blobs */
.haccent {
  position:       absolute;
  inset:          0;
  z-index:        2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 100%   0%, rgba(122, 46, 255, .30) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(255, 106,  26, .18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at   0% 100%, rgba(122, 46, 255, .15) 0%, transparent 60%);
}

/* Grain noise overlay */
.hnoise {
  position:          absolute;
  inset:             0;
  z-index:           2;
  pointer-events:    none;
  opacity:           .03;
  background-image:  url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:   200px;
}

/* Dot grid pattern */
.hgrid {
  position:          absolute;
  inset:             0;
  z-index:           2;
  pointer-events:    none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size:   40px 40px;
}

/* Animated glow orbs */
.horb1 {
  position:       absolute;
  top:            -80px;
  right:          -80px;
  z-index:        2;
  width:          500px;
  height:         500px;
  border-radius:  50%;
  pointer-events: none;
  background:     radial-gradient(circle, rgba(122, 46, 255, .22) 0%, transparent 70%);
  animation:      orb1 10s ease-in-out infinite;
}
.horb2 {
  position:       absolute;
  bottom:         -120px;
  left:           -60px;
  z-index:        2;
  width:          400px;
  height:         400px;
  border-radius:  50%;
  pointer-events: none;
  background:     radial-gradient(circle, rgba(255, 106, 26, .15) 0%, transparent 70%);
  animation:      orb2 13s ease-in-out infinite;
}

@keyframes orb1 {
  0%, 100% { transform: scale(1)    translate(0, 0);      }
  50%       { transform: scale(1.12) translate(-20px, 20px); }
}
@keyframes orb2 {
  0%, 100% { transform: scale(1)    translate(0, 0);      }
  50%       { transform: scale(1.08) translate(20px, -15px); }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Two-column hero layout */
.hinner {
  position:   relative;
  z-index:    3;
  padding:    clamp(90px, 14vh, 130px) clamp(16px, 5vw, 40px) clamp(70px, 10vh, 110px);
  max-width:  1200px;
  margin:     0 auto;
  width:      100%;
  display:    grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:        clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* Orange pulsing badge */
.hbadge {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  background:     rgba(255, 106, 26, .10);
  border:         1px solid rgba(255, 106, 26, .25);
  padding:        6px 16px;
  border-radius:  100px;
  font-family:    var(--fb);
  font-size:      .67rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--orange);
  margin-bottom:  1.6rem;
  animation:      heroFadeUp .55s .05s both;
}

/* Pulsing dot inside badge */
.bdot {
  width:         8px;
  height:        8px;
  background:    var(--orange);
  border-radius: 50%;
  flex-shrink:   0;
  animation:     bdp 2s infinite;
}
@keyframes bdp {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 106, 26, .35); }
  50%       { box-shadow: 0 0 0 8px rgba(255, 106, 26, 0);   }
}

/* Hero main heading */
.htitle {
  font-family:    var(--fh);
  font-size:      clamp(2.8rem, 6.5vw, 5.5rem);
  font-weight:    800;
  line-height:    .96;
  color:          #fff;
  letter-spacing: -.03em;
  margin-bottom:  1.75rem;
  animation:      heroFadeUp .55s .15s both;
}
.htitle .or  { color:    var(--orange); display: block; }
.htitle .grd {
  display:                 block;
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* Hero sub-text */
.hsub {
  color:         rgba(255, 255, 255, .65);
  font-family:   var(--fb);
  font-size:     clamp(.9rem, 1.5vw, 1.05rem);
  line-height:   1.85;
  max-width:     500px;
  margin-bottom: 2.5rem;
  animation:     heroFadeUp .55s .28s both;
}

/* CTA buttons row */
.hacts {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  animation: heroFadeUp .55s .42s both;
}

/* Scroll indicator arrow */
.hscrl {
  position:       absolute;
  bottom:         clamp(1.25rem, 3vh, 2rem);
  left:           50%;
  transform:      translateX(-50%);
  z-index:        3;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  animation:      heroFadeUp .6s 1.2s both;
}
.hscrl span {
  font-family:    var(--fb);
  font-size:      .60rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .30);
}
.sarw {
  width:           38px;
  height:          38px;
  border:          1px solid rgba(255, 255, 255, .15);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255, 255, 255, .40);
  font-size:       .90rem;
  animation:       bce 2.2s ease-in-out infinite;
}
@keyframes bce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(6px); }
}

/* Hero responsive */
@media (max-width: 960px) {
  .hinner {
    grid-template-columns: 1fr;
    gap:                   3rem;
    padding-bottom:        100px;
  }
  .htitle { font-size: clamp(2.8rem, 9vw, 4.5rem); }
  .hsub   { max-width: 100%; }
  .hcards {
    flex-direction: row;
    flex-wrap:      wrap;
  }
  .hcard { flex: 2; min-width: 220px; }
  .hrow  { flex: 1; min-width: 200px; }
}

@media (max-width: 560px) {
  .hinner {
    padding-top: 88px;
    gap:         2.5rem;
  }
  .htitle { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .hcards {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .75rem;
  }
  .hcard   { grid-column: span 2; min-width: 0; }
  .hrow    { display: contents; }
  .hmini   { grid-column: span 1; }
  .hacts   { gap: .75rem; }
  .hacts .btn {
    flex:     1;
    font-size: .82rem;
    padding:  13px 16px;
  }
}


/* ───────────────────────────────────────────────
   14. HERO STAT CARDS
─────────────────────────────────────────────── */

/* Card column stack */
.hcards {
  display:   flex;
  flex-direction: column;
  gap:       1rem;
  animation: heroFadeUp .7s .5s both;
}

/* Main glass card */
.hcard {
  background:              rgba(255, 255, 255, .05);
  backdrop-filter:         blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:                  1px solid rgba(255, 255, 255, .10);
  border-radius:           20px;
  padding:                 1.6rem 1.8rem;
  box-shadow:              0 20px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .08);
  position:                relative;
  overflow:                hidden;
  transition:              transform .4s, box-shadow .4s;
}
.hcard::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
}
.hcard:hover {
  transform:  translateY(-5px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, .40);
}

/* Card label */
.hc-lbl {
  font-family:    var(--fb);
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .40);
  margin-bottom:  .5rem;
}

/* Card big value */
.hc-val {
  font-family:             var(--fh);
  font-size:               3rem;
  font-weight:             800;
  line-height:             1;
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* Card sub-text */
.hc-sub {
  font-family:  var(--fb);
  font-size:    .78rem;
  color:        rgba(255, 255, 255, .50);
  margin-top:   .3rem;
}

/* Progress bar track */
.hbar {
  width:         100%;
  height:        4px;
  background:    rgba(255, 255, 255, .08);
  border-radius: 10px;
  margin-top:    1.2rem;
  overflow:      hidden;
}

/* Progress bar fill — animates on load */
.hfill {
  height:        100%;
  background:    linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-radius: 10px;
  width:         0;
  animation:     hba 2s 1.2s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes hba {
  to { width: 78%; }
}

/* Percentage label row */
.hpct {
  display:         flex;
  justify-content: space-between;
  margin-top:      .45rem;
}
.hpct span {
  font-family: var(--fb);
  font-size:   .67rem;
  color:       rgba(255, 255, 255, .30);
}
.hpct b {
  font-family: var(--fb);
  font-size:   .67rem;
  color:       var(--orange);
  font-weight: 700;
}

/* Row of two mini cards */
.hrow {
  display: flex;
  gap:     1rem;
}

/* Mini glass card */
.hmini {
  flex:                    1;
  background:              rgba(255, 255, 255, .05);
  backdrop-filter:         blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border:                  1px solid rgba(255, 255, 255, .10);
  border-radius:           18px;
  padding:                 1.3rem 1rem;
  text-align:              center;
  box-shadow:              0 16px 40px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition:              transform .4s;
  position:                relative;
  overflow:                hidden;
}
.hmini::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
}
.hmini:hover { transform: translateY(-4px); }
.hmini .hc-val { font-size: 2.2rem; }
.hmini .hc-sub { font-size: .72rem; }


/* ═══════════════════════════════════════════════
   15. MARQUEE STRIP
═══════════════════════════════════════════════ */
.marq {
  background:  var(--navy);
  padding:     1.1rem 0;
  overflow:    hidden;
  border-top:  1px solid rgba(255, 255, 255, .06);
  position:    relative;
  z-index:     1;
}

.mtrack {
  display:   flex;
  gap:       2.5rem;
  width:     max-content;
  animation: mq 28s linear infinite;
}
.mtrack:hover {
  animation-play-state: paused;
}
.mtrack span {
  font-family:    var(--fb);
  font-size:      .74rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .38);
  white-space:    nowrap;
}
.mtrack .dot {
  color: var(--orange);
}

@keyframes mq {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════
   16. STATS SECTION
═══════════════════════════════════════════════ */
.stats {
  background: var(--cream);
  padding:    clamp(3rem, 7vw, 5.5rem) clamp(16px, 5vw, 40px);
}

.sgrid {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border:                1px solid rgba(11, 15, 59, .08);
  border-radius:         var(--r);
  overflow:              hidden;
  box-shadow:            var(--s1);
}

/* Individual stat cell */
.si {
  padding:          clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  background:       #fff;
  text-align:       center;
  border-right:     1px solid rgba(11, 15, 59, .06);
  position:         relative;
  overflow:         hidden;
  transition:       background .3s;
}
.si:last-child { border-right: none; }

/* Coloured top accent bar on hover */
.si::before {
  content:          '';
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(135deg, #7A2EFF, #FF6A1A);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .5s;
}
.si:hover::before { transform: scaleX(1); }
.si:hover         { background: rgba(11, 15, 59, .02); }

/* Big gradient number */
.sn {
  font-family:             var(--fh);
  font-size:               clamp(2rem, 4vw, 3rem);
  font-weight:             800;
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  line-height:             1;
  margin-bottom:           .4rem;
}

/* Label below number */
.sl {
  font-family:  var(--fb);
  font-size:    .75rem;
  font-weight:  500;
  color:        var(--tmuted);
  letter-spacing: .02em;
  line-height:  1.4;
}

/* Responsive — 2 columns on tablet */
@media (max-width: 768px) {
  .sgrid {
    grid-template-columns: 1fr 1fr;
  }
  .si:nth-child(2) { border-right: none; }
  .si:nth-child(1),
  .si:nth-child(2) { border-bottom: 1px solid rgba(11, 15, 59, .06); }
}

@media (max-width: 400px) {
  .sgrid { grid-template-columns: 1fr; }
  .si    { border-right: none !important; border-bottom: 1px solid rgba(11, 15, 59, .06); }
  .si:last-child { border-bottom: none; }
}


/* ═══════════════════════════════════════════════
   17. PHILOSOPHY SECTION
═══════════════════════════════════════════════ */
.phil {
  background: var(--navy);
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  position:   relative;
  overflow:   hidden;
}
.phil::before {
  content:        '';
  position:       absolute;
  top:            -180px;
  right:          -80px;
  width:          480px;
  height:         480px;
  background:     radial-gradient(circle, rgba(122, 46, 255, .20), transparent 70%);
  pointer-events: none;
}
.phil::after {
  content:        '';
  position:       absolute;
  bottom:         -80px;
  left:           -80px;
  width:          380px;
  height:         380px;
  background:     radial-gradient(circle, rgba(255, 106, 26, .12), transparent 70%);
  pointer-events: none;
}

/* Two-column inner layout */
.phin {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 5vw, 5rem);
  align-items:           center;
  position:              relative;
  z-index:               1;
}

/* Large statement quote */
.bigst {
  font-family:    var(--fh);
  font-size:      clamp(1.7rem, 3.8vw, 3rem);
  font-weight:    800;
  line-height:    1.12;
  color:          #fff;
  letter-spacing: -.02em;
  margin-bottom:  1.5rem;
}
.bigst .it {
  font-style: italic;
  color:      var(--orange);
}

/* Body copy */
.phtxt {
  font-family: var(--fb);
  color:       rgba(255, 255, 255, .55);
  font-size:   .90rem;
  line-height: 1.85;
}

/* Accordion-style card list */
.pcds { display: flex; flex-direction: column; gap: 1px; }

.pcd {
  display:    flex;
  align-items: flex-start;
  gap:        1rem;
  padding:    1.4rem;
  background: rgba(255, 255, 255, .04);
  border:     1px solid rgba(255, 255, 255, .07);
  transition: background .3s;
  position:   relative;
}
.pcd:first-child { border-radius: 14px 14px 0 0; }
.pcd:last-child  { border-radius: 0 0 14px 14px; }

/* Left colour accent bar */
.pcd::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              0;
  bottom:           0;
  width:            3px;
  background:       linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-radius:    3px 0 0 3px;
  transform:        scaleY(0);
  transform-origin: top;
  transition:       transform .4s;
}
.pcd:hover               { background:   rgba(255, 255, 255, .07); }
.pcd:hover::before       { transform:    scaleY(1); }

/* Icon container */
.pio {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  background:      rgba(255, 106, 26, .10);
  border:          1px solid rgba(255, 106, 26, .20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  flex-shrink:     0;
}

.pcd h4 {
  font-family:   var(--fb);
  font-size:     .90rem;
  font-weight:   600;
  color:         #fff;
  margin-bottom: .25rem;
}
.pcd p {
  font-family: var(--fb);
  font-size:   .79rem;
  color:       rgba(255, 255, 255, .45);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .phin { grid-template-columns: 1fr; gap: 3rem; }
}


/* ═══════════════════════════════════════════════
   18. SERVICES SECTION
═══════════════════════════════════════════════ */
.svcs {
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  background: var(--cream);
}

.svci {
  max-width: 1200px;
  margin:    0 auto;
}

/* Section header */
.svch {
  text-align:    center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.svch p {
  font-family: var(--fb);
  color:       var(--tmuted);
  max-width:   480px;
  margin:      .85rem auto 0;
  font-size:   .90rem;
  line-height: 1.8;
}

/* 2-column card grid */
.svgrid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.25rem;
}

/* Individual service card */
.svc {
  background:   #fff;
  border:       1px solid rgba(11, 15, 59, .07);
  border-radius: var(--r);
  padding:      clamp(1.5rem, 3vw, 2.5rem);
  position:     relative;
  overflow:     hidden;
  cursor:       pointer;
  transition:   transform .3s, box-shadow .3s, border-color .3s;
  box-shadow:   var(--s1);
}

/* Bottom colour bar on hover */
.svc::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(135deg, #7A2EFF, #FF6A1A);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .4s;
}
.svc:hover {
  transform:   translateY(-6px);
  box-shadow:  var(--s3);
  border-color: rgba(122, 46, 255, .15);
}
.svc:hover::after { transform: scaleX(1); }

/* Background number */
.svn {
  position:    absolute;
  top:         1.25rem;
  right:       1.25rem;
  font-family: var(--fh);
  font-size:   3.5rem;
  font-weight: 800;
  color:       rgba(11, 15, 59, .03);
  line-height: 1;
}

/* Icon box */
.svic {
  width:           50px;
  height:          50px;
  border-radius:   13px;
  background:      rgba(122, 46, 255, .06);
  border:          1px solid rgba(122, 46, 255, .12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  margin-bottom:   1.25rem;
}

.svc h3 {
  font-family:    var(--fh);
  font-size:      clamp(1rem, 2vw, 1.2rem);
  font-weight:    700;
  color:          var(--navy);
  margin-bottom:  .65rem;
  letter-spacing: -.02em;
}
.svc p {
  font-family:   var(--fb);
  font-size:     .84rem;
  color:         var(--tmuted);
  line-height:   1.8;
  margin-bottom: 1.25rem;
}

/* Tag pills */
.stags {
  display:   flex;
  gap:       .40rem;
  flex-wrap: wrap;
}
.stg {
  font-family:    var(--fb);
  font-size:      .63rem;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  100px;
  background:     rgba(11, 15, 59, .04);
  color:          var(--tmuted);
  border:         1px solid rgba(11, 15, 59, .07);
}

/* Arrow icon (bottom right) */
.sarr {
  position:        absolute;
  bottom:          1.5rem;
  right:           1.5rem;
  width:           34px;
  height:          34px;
  border-radius:   50%;
  border:          1px solid rgba(11, 15, 59, .10);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--tmuted);
  font-size:       .85rem;
  transition:      background .3s, border-color .3s, color .3s, transform .3s;
}
.svc:hover .sarr {
  background:   linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-color: transparent;
  color:        #fff;
  transform:    rotate(45deg);
}

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


/* ═══════════════════════════════════════════════
   19. PROCESS SECTION
═══════════════════════════════════════════════ */
.proc {
  background: var(--navy);
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  position:   relative;
  overflow:   hidden;
}
.proc::before {
  content:        '';
  position:       absolute;
  top:            50%;
  right:          -120px;
  transform:      translateY(-50%);
  width:          450px;
  height:         450px;
  background:     radial-gradient(circle, rgba(122, 46, 255, .15), transparent 70%);
  pointer-events: none;
}

.proci {
  max-width: 1200px;
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

/* Section header */
.proch {
  text-align:    center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* 5-step grid */
.prsteps {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   0;
  position:              relative;
}

/* Horizontal connector line */
.prline {
  position:       absolute;
  top:            29px;
  left:           calc(10% + 22px);
  right:          calc(10% + 22px);
  height:         1px;
  background:     linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .08) 10%,
    rgba(255, 255, 255, .08) 90%,
    transparent
  );
  pointer-events: none;
}

.prstep {
  padding:    0 .75rem;
  text-align: center;
}

/* Step number circle */
.prdot {
  width:           58px;
  height:          58px;
  border-radius:   50%;
  margin:          0 auto 1.1rem;
  background:      rgba(255, 255, 255, .04);
  border:          1px solid rgba(255, 255, 255, .10);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--fh);
  font-size:       .95rem;
  color:           rgba(255, 255, 255, .30);
  position:        relative;
  z-index:         1;
  transition:      all .5s;
}

/* Active / current step */
.prstep.on .prdot {
  background:  linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-color: transparent;
  color:        #fff;
  box-shadow:   0 0 0 8px rgba(122, 46, 255, .12);
}

.prstep h4 {
  font-family:   var(--fb);
  font-size:     .86rem;
  font-weight:   600;
  color:         #fff;
  margin-bottom: .3rem;
}
.prstep p {
  font-family: var(--fb);
  font-size:   .74rem;
  color:       rgba(255, 255, 255, .40);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
  .prsteps { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .prline  { display: none; }
  .prstep:nth-child(6) { grid-column: span 2; max-width: 200px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .prsteps { grid-template-columns: 1fr; }
  .prstep:nth-child(6) { grid-column: span 1; max-width: 100%; }
}


/* ═══════════════════════════════════════════════
   20. SKILLS SECTION
═══════════════════════════════════════════════ */
.sklsec {
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  background: var(--navy);
  position:   relative;
  overflow:   hidden;
}
.sklsec::before {
  content:        '';
  position:       absolute;
  top:            -120px;
  left:           -120px;
  width:          450px;
  height:         450px;
  background:     radial-gradient(circle, rgba(255, 106, 26, .10), transparent 70%);
  pointer-events: none;
}

.sklseci {
  max-width: 1200px;
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

/* Section header — left aligned */
.sklh {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sklh p {
  font-family: var(--fb);
  color:       rgba(255, 255, 255, .50);
  max-width:   540px;
  margin:      .85rem 0 0;
  font-size:   .90rem;
  line-height: 1.8;
}

/* 3-column grid */
.sklgrid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.1rem;
}

/* Skill card */
.skl {
  background:    rgba(255, 255, 255, .04);
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding:       clamp(1.4rem, 2.5vw, 2rem);
  position:      relative;
  overflow:      hidden;
  transition:    transform .3s, border-color .3s, box-shadow .3s;
}
.skl::before {
  content:          '';
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(135deg, #7A2EFF, #FF6A1A);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .4s;
}
.skl:hover {
  transform:   translateY(-6px);
  border-color: rgba(255, 106, 26, .25);
  box-shadow:  0 24px 55px rgba(0, 0, 0, .35);
}
.skl:hover::before { transform: scaleX(1); }

/* Skill icon */
.sklic {
  width:           48px;
  height:          48px;
  border-radius:   12px;
  background:      rgba(122, 46, 255, .15);
  border:          1px solid rgba(255, 255, 255, .10);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.35rem;
  margin-bottom:   1rem;
  flex-shrink:     0;
}

.skl h4 {
  font-family:    var(--fh);
  font-size:      1rem;
  font-weight:    700;
  color:          #fff;
  margin-bottom:  .5rem;
  letter-spacing: -.01em;
}
.skl p {
  font-family:   var(--fb);
  font-size:     .80rem;
  color:         rgba(255, 255, 255, .45);
  line-height:   1.75;
  margin-bottom: 1rem;
}

/* Skill bar rows */
.sklbars {
  display:        flex;
  flex-direction: column;
  gap:            .50rem;
}
.sklbar-row {
  display:     flex;
  align-items: center;
  gap:         .75rem;
}
.sklbar-row span {
  font-family:  var(--fb);
  font-size:    .68rem;
  color:        rgba(255, 255, 255, .35);
  font-weight:  500;
  white-space:  nowrap;
  width:        90px;
  flex-shrink:  0;
}
.sklbar-track {
  flex:          1;
  height:        4px;
  background:    rgba(255, 255, 255, .07);
  border-radius: 4px;
  overflow:      hidden;
}
.sklbar-fill {
  height:        100%;
  background:    linear-gradient(135deg, #7A2EFF, #FF6A1A);
  border-radius: 4px;
  width:         0;
  transition:    width 1.4s cubic-bezier(.4, 0, .2, 1);
}

/* Trigger bar animation when card enters view */
.skl.in .sklbar-fill {
  width: var(--w);
}

@media (max-width: 768px) { .sklgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sklgrid { grid-template-columns: 1fr;     } }


/* ═══════════════════════════════════════════════
   21. DIFFERENCE SECTION
═══════════════════════════════════════════════ */
.diff {
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  background: var(--cream);
}

.diffi {
  max-width: 1200px;
  margin:    0 auto;
}

/* Section header */
.diffh {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Two-column comparison grid */
.diffg {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

/* Base card */
.dc {
  border-radius: var(--r);
  padding:       clamp(1.5rem, 3vw, 2.5rem);
  border:        1px solid rgba(11, 15, 59, .07);
}

/* Typical / competitor column */
.dc.typ {
  background: #fff;
  box-shadow: var(--s1);
}

/* Our way / edm column */
.dc.edm {
  background: var(--navy);
  position:   relative;
  overflow:   hidden;
  box-shadow: var(--s4);
}
.dc.edm::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
}
.dc.edm::after {
  content:        '';
  position:       absolute;
  bottom:         -80px;
  right:          -80px;
  width:          250px;
  height:         250px;
  background:     radial-gradient(circle, rgba(255, 106, 26, .10), transparent 70%);
  pointer-events: none;
}

/* Column type label */
.dlbl {
  font-family:    var(--fb);
  font-size:      .66rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--tlight);
  margin-bottom:  .75rem;
}
.dc.edm .dlbl { color: var(--orange); }

/* Heading */
.dc h3 {
  font-family:   var(--fh);
  font-size:     clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight:   700;
  margin-bottom: 1.5rem;
  color:         var(--navy);
}
.dc.edm h3 { color: #fff; }

/* Comparison list */
.dlist {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            .80rem;
}
.dlist li {
  display:     flex;
  gap:         .75rem;
  font-family: var(--fb);
  font-size:   .84rem;
  color:       var(--tmuted);
  line-height: 1.5;
  align-items: flex-start;
}

/* Dash bullet (typical col) */
.dlist li::before { content: '—'; color: var(--tlight); flex-shrink: 0; margin-top: .05rem; }

/* Tick bullet (edm col) */
.dc.edm .dlist li       { color: rgba(255, 255, 255, .65); }
.dc.edm .dlist li::before { content: '✓'; color: var(--orange); font-weight: 700; }

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


/* ═══════════════════════════════════════════════
   22. QUOTE BAND
═══════════════════════════════════════════════ */
.qband {
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
  padding:    clamp(4rem, 8vw, 6.5rem) clamp(16px, 5vw, 40px);
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

/* Giant decorative quote mark */
.qband::before {
  content:        '"';
  position:       absolute;
  top:            -80px;
  left:           50%;
  transform:      translateX(-50%);
  font-family:    var(--fh);
  font-size:      min(18rem, 50vw);
  color:          rgba(255, 255, 255, .06);
  line-height:    1;
  pointer-events: none;
  white-space:    nowrap;
}

/* Dot-grid overlay */
.qband::after {
  content:           '';
  position:          absolute;
  inset:             0;
  opacity:           .08;
  background-image:
    linear-gradient(rgba(255, 255, 255, .20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .20) 1px, transparent 1px);
  background-size:   32px 32px;
  pointer-events:    none;
}

.qin {
  max-width: 760px;
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

/* Quote text */
.qtxt {
  font-family:   var(--fh);
  font-size:     clamp(1.7rem, 4vw, 3.1rem);
  font-weight:   700;
  color:         #fff;
  line-height:   1.2;
  margin-bottom: 1rem;
}
.qtxt em { font-style: italic; }

/* Attribution */
.qattr {
  font-family:    var(--fb);
  font-size:      .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .60);
}


/* ═══════════════════════════════════════════════
   23. ABOUT SECTION
═══════════════════════════════════════════════ */
.abt {
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  background: var(--cream);
}

.abtin {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 5vw, 5rem);
  align-items:           center;
}

/* Image block */
.aimg {
  border-radius: 22px;
  overflow:      hidden;
  box-shadow:    var(--s4);
  min-height:    400px;
  background:    var(--navy);
}
.aimg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  min-height: 400px;
}

/* Float badge on image */
.abadge {
  position:        absolute;
  bottom:          1.25rem;
  left:            1.25rem;
  background:      rgba(11, 15, 59, .92);
  backdrop-filter: blur(16px);
  border:          1px solid rgba(255, 255, 255, .10);
  border-radius:   14px;
  padding:         .9rem 1.1rem;
  display:         flex;
  align-items:     center;
  gap:             .75rem;
}
.abic {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      linear-gradient(135deg, #7A2EFF, #FF6A1A);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  flex-shrink:     0;
}
.abtxt span    { display: block; font-family: var(--fb); font-size: .64rem; color: rgba(255, 255, 255, .45); }
.abtxt strong  { font-family: var(--fb); font-size: .84rem; color: #fff; font-weight: 600; }

/* Float stat chip (top-right of image) */
.afloat {
  position:       absolute;
  top:            1.25rem;
  right:          -1rem;
  background:     #fff;
  border-radius:  14px;
  padding:        .9rem 1.1rem;
  box-shadow:     var(--s3);
  display:        flex;
  flex-direction: column;
  gap:            2px;
  z-index:        2;
}
.afloat .fv {
  font-family:             var(--fh);
  font-size:               1.9rem;
  font-weight:             800;
  background:              linear-gradient(135deg, #7A2EFF, #FF6A1A);
  background-clip:         text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height:             1;
}
.afloat .fl {
  font-family: var(--fb);
  font-size:   .68rem;
  font-weight: 500;
  color:       var(--tmuted);
}

/* Body copy */
.atxt > p {
  font-family:   var(--fb);
  font-size:     .90rem;
  color:         var(--tmuted);
  line-height:   1.85;
  margin-bottom: .9rem;
}

/* Skill / interest badge pills */
.abgs {
  display:   flex;
  flex-wrap: wrap;
  gap:       .50rem;
  margin:    1.25rem 0;
}
.abg {
  font-family:    var(--fb);
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        5px 13px;
  border-radius:  100px;
  background:     rgba(122, 46, 255, .06);
  border:         1px solid rgba(122, 46, 255, .18);
  color:          var(--purple);
}

/* Vision / Mission 2×2 grid */
.vmg {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .90rem;
  margin-top:            1.25rem;
}
.vmc {
  background:    #fff;
  border:        1px solid rgba(11, 15, 59, .07);
  border-radius: var(--rsm);
  padding:       1.1rem;
  box-shadow:    var(--s1);
}
.vmc h5 {
  font-family:    var(--fb);
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          var(--orange);
  margin-bottom:  .35rem;
}
.vmc p {
  font-family: var(--fb);
  font-size:   .79rem;
  color:       var(--tmuted);
  line-height: 1.7;
}

/* Wrapper for the image + floats */
.avis {
  position: relative;
}

@media (max-width: 768px) {
  .abtin               { grid-template-columns: 1fr; gap: 3rem; }
  .afloat              { right: 0; }
  .aimg, .aimg img     { min-height: 280px; }
}


/* ═══════════════════════════════════════════════
   24. CONTACT SECTION
═══════════════════════════════════════════════ */
.ctc {
  padding:    clamp(4rem, 8vw, 7rem) clamp(16px, 5vw, 40px);
  background: var(--cream);
}

.ctci {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 5vw, 5rem);
  align-items:           start;
}

/* Left info column */
.ctcinfo > p {
  font-family:   var(--fb);
  font-size:     .90rem;
  color:         var(--tmuted);
  line-height:   1.85;
  margin-bottom: 2rem;
}

/* Contact detail links */
.cdets {
  display:        flex;
  flex-direction: column;
  gap:            .70rem;
}
.cdi {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  padding:         .9rem 1.1rem;
  border-radius:   var(--rsm);
  background:      #fff;
  border:          1px solid rgba(11, 15, 59, .07);
  box-shadow:      var(--s1);
  transition:      border-color .3s, box-shadow .3s;
  text-decoration: none;
}
.cdi:hover {
  border-color: rgba(122, 46, 255, .18);
  box-shadow:   var(--s2);
}

/* Icon in contact detail */
.cdic {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  background:      rgba(122, 46, 255, .06);
  border:          1px solid rgba(122, 46, 255, .12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  flex-shrink:     0;
}
.cdtx span   { display: block; font-family: var(--fb); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tlight); margin-bottom: 2px; }
.cdtx strong { font-family: var(--fb); font-size: .84rem; font-weight: 500; color: var(--navy); }

/* Right form card */
.cfrm {
  background:    #fff;
  border:        1px solid rgba(11, 15, 59, .07);
  border-radius: var(--r);
  padding:       clamp(1.5rem, 3vw, 2.5rem);
  box-shadow:    var(--s2);
  position:      relative;
  overflow:      hidden;
}
.cfrm::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
}
.cfrm h3 {
  font-family:   var(--fh);
  font-size:     1.3rem;
  font-weight:   700;
  color:         var(--navy);
  margin-bottom: 1.5rem;
}

/* Form field group */
.fg { margin-bottom: .90rem; }
.fg label {
  display:        block;
  font-family:    var(--fb);
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--tmuted);
  margin-bottom:  6px;
}

/* Inputs & textarea */
.fg input,
.fg textarea,
.fg select {
  width:            100%;
  background:       var(--cream);
  border:           1.5px solid rgba(11, 15, 59, .10);
  border-radius:    var(--rsm);
  padding:          12px 15px;
  color:            var(--navy);
  font-family:      var(--fb);
  font-size:        .89rem;
  outline:          none;
  transition:       border-color .3s, box-shadow .3s;
  resize:           none;
  -webkit-appearance: none;
  appearance:       none;
}
.fg textarea { height: 106px; }
.fg input::placeholder,
.fg textarea::placeholder { color: var(--tlight); }
.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  border-color: var(--purple);
  box-shadow:   0 0 0 3px rgba(122, 46, 255, .08);
}

/* Submit button */
.bsub {
  width:          100%;
  background:     linear-gradient(135deg, #7A2EFF, #FF6A1A);
  color:          #fff;
  border:         none;
  padding:        14px;
  border-radius:  100px;
  font-family:    var(--fb);
  font-size:      .90rem;
  font-weight:    600;
  cursor:         pointer;
  letter-spacing: .03em;
  margin-top:     .50rem;
  box-shadow:     0 4px 24px rgba(122, 46, 255, .28);
  transition:     transform .3s, box-shadow .3s;
  min-height:     48px;
}
.bsub:hover {
  transform:  scale(1.02);
  box-shadow: 0 12px 32px rgba(122, 46, 255, .40);
}

/* Success state */
.form-success {
  display:    none;
  text-align: center;
  padding:    2rem;
  color:      var(--navy);
}
.form-success .fsi { font-size: 2.5rem; margin-bottom: .75rem; }
.form-success h4   { font-family: var(--fh); font-size: 1.3rem; margin-bottom: .5rem; }
.form-success p    { font-family: var(--fb); font-size: .85rem; color: var(--tmuted); }

@media (max-width: 768px) {
  .ctci { grid-template-columns: 1fr; gap: 3rem; }
}


/* ═══════════════════════════════════════════════
   25. FOOTER
═══════════════════════════════════════════════ */
footer {
  background:  var(--navy);
  padding:     clamp(2rem, 5vw, 3.5rem) clamp(16px, 5vw, 40px) clamp(1.25rem, 3vw, 2rem);
  border-top:  1px solid rgba(255, 255, 255, .06);
}

/* 4-column top grid */
.ftop {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   2rem 3rem;
  margin-bottom:         2.5rem;
  padding-bottom:        2.5rem;
  border-bottom:         1px solid rgba(255, 255, 255, .06);
}

/* Brand column */
.fbrand .flogo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  margin-bottom:   1rem;
}
.fbrand .flogo img { height: 50px; width: auto; object-fit: contain; }

.nlogo-name-f {
  display:        flex;
  flex-direction: column;
}
.nlogo-name-f span:first-child {
  font-family: var(--fh);
  font-size:   1.15rem;
  font-weight: 800;
  color:       #fff;
  line-height: 1;
}
.nlogo-name-f span:last-child {
  font-family:    var(--fb);
  font-size:      .60rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--orange);
  margin-top:     2px;
}

.fbrand p {
  font-family: var(--fb);
  font-size:   .80rem;
  color:       rgba(255, 255, 255, .45);
  line-height: 1.75;
  max-width:   240px;
}

/* Nav column */
.fcol h5 {
  font-family:    var(--fb);
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, .35);
  margin-bottom:  1rem;
}
.fcol a {
  font-family:     var(--fb);
  font-size:       .80rem;
  color:           rgba(255, 255, 255, .55);
  text-decoration: none;
  padding:         .3rem 0;
  display:         block;
  transition:      color .3s, transform .2s;
}
.fcol a:hover {
  color:     var(--orange);
  transform: translateX(4px);
}

/* Bottom bar */
.fbot {
  max-width:       1200px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     1.25rem;
  flex-wrap:       wrap;
  gap:             .75rem;
}
.fbot p {
  font-family: var(--fb);
  font-size:   .74rem;
  color:       rgba(255, 255, 255, .30);
}

/* Social icons */
.fsoc { display: flex; gap: .60rem; }
.fsoc a {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, .05);
  border:          1px solid rgba(255, 255, 255, .10);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .78rem;
  color:           rgba(255, 255, 255, .45);
  text-decoration: none;
  transition:      background .3s, color .3s, border-color .3s;
}
.fsoc a:hover {
  background:   rgba(255, 106, 26, .12);
  border-color: rgba(255, 106, 26, .40);
  color:        var(--orange);
}

/* Footer responsive */
@media (max-width: 768px) {
  .ftop { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .fbrand { grid-column: span 2; }
}
@media (max-width: 480px) {
  .ftop   { grid-template-columns: 1fr; }
  .fbrand { grid-column: span 1; }
  .fbot   { flex-direction: column; align-items: center; text-align: center; }
}


/* ═══════════════════════════════════════════════
   26. MODAL
═══════════════════════════════════════════════ */

/* Backdrop */
.mov {
  position:        fixed;
  inset:           0;
  z-index:         500;
  background:      rgba(11, 15, 59, .80);
  backdrop-filter: blur(10px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .3s;
  padding:         clamp(1rem, 4vw, 2rem);
}
.mov.on {
  opacity:        1;
  pointer-events: all;
}

/* Modal box */
.mbox {
  background:    #fff;
  border-radius: var(--r);
  padding:       clamp(1.5rem, 4vw, 2.5rem);
  max-width:     500px;
  width:         100%;
  position:      relative;
  overflow:      hidden;
  transform:     scale(.92) translateY(14px);
  transition:    transform .3s;
  box-shadow:    var(--s4);
  max-height:    90vh;
  overflow-y:    auto;
}
.mov.on .mbox {
  transform: scale(1) translateY(0);
}

/* Top colour strip */
.mbox::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
}

/* Close button */
.mcl {
  position:        absolute;
  top:             1rem;
  right:           1rem;
  background:      var(--cream);
  border:          1px solid rgba(11, 15, 59, .08);
  width:           32px;
  height:          32px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       1rem;
  color:           var(--tmuted);
  transition:      background .3s, color .3s;
  min-height:      auto;
}
.mcl:hover {
  background: var(--navy);
  color:      #fff;
}

/* Modal text */
.mbox h3 {
  font-family:   var(--fh);
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--navy);
  margin:        .5rem 0 .75rem;
}
.mbox p {
  font-family:   var(--fb);
  font-size:     .85rem;
  color:         var(--tmuted);
  line-height:   1.8;
  margin-bottom: 1.4rem;
}

/* Bullet list inside modal */
.mbul {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
}
.mbul li {
  display:     flex;
  gap:         .75rem;
  font-family: var(--fb);
  font-size:   .83rem;
  color:       var(--navy);
}
.mbul li::before {
  content:     '→';
  color:       var(--orange);
  flex-shrink: 0;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════
   27. FLOATING ACTION BUTTONS
═══════════════════════════════════════════════ */
.fab {
  position:       fixed;
  bottom:         1.5rem;
  right:          1.5rem;
  z-index:        300;
  display:        flex;
  flex-direction: column;
  gap:            .65rem;
  align-items:    flex-end;
}

.fab a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  text-decoration: none;
  font-size:       1.4rem;
  box-shadow:      0 6px 24px rgba(0, 0, 0, .25);
  transition:      transform .3s, box-shadow .3s;
}
.fab a:hover {
  transform:  scale(1.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
}

/* WhatsApp button */
.fab-wa {
  background: #25D366;
  color:      #fff;
}

/* Phone / contact button */
.fab-ph {
  background: linear-gradient(135deg, #7A2EFF, #FF6A1A);
  color:      #fff;
}

/* Tooltip label that appears on hover */
.fab-lbl {
  position:       absolute;
  right:          60px;
  background:     var(--navy);
  color:          #fff;
  font-family:    var(--fb);
  font-size:      .70rem;
  font-weight:    600;
  padding:        4px 10px;
  border-radius:  100px;
  white-space:    nowrap;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .2s;
}
.fab a:hover .fab-lbl {
  opacity: 1;
}