/* ═══════════════════════════════════════════════════════════════
   MOVA SOFTWARES — v5 IMAGE-HEAVY
   Sharp borders 8px · Rich gradients · Petrol blue
   Large images · Gallery · Dividers
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
      --primary: #084B5E;
      --primary-deep: #0C465A;
      --primary-mid: #0A6D86;
      --primary-light: #0EA5C7;
      --primary-pale: #E0F2F7;
      --primary-glow: rgba(8, 75, 94, 0.10);
      --primary-glow-s: rgba(8, 75, 94, 0.18);
      --primary-tx: #fff;

      --bg: #fff;
      --surface: #F5F7FA;
      --surface-2: #EDF0F4;
      --tx: #0A1A22;
      --tx-1: #2A3E4C;
      --tx-2: #5B7585;
      --tx-3: #8FA4B2;
      --bd: #DAE2E8;
      --bd-s: #ECF0F3;

      --glass: rgba(255, 255, 255, 0.55);
      --glass-bd: rgba(255, 255, 255, 0.3);
      --blur: 24px;

      --neo: 5px 5px 14px rgba(12, 70, 90, 0.06), -3px -3px 10px rgba(255, 255, 255, 0.8);
      --neo-h: 7px 7px 20px rgba(12, 70, 90, 0.09), -5px -5px 14px rgba(255, 255, 255, 0.9);

      --sh-s: 0 2px 8px rgba(12, 70, 90, 0.04);
      --sh-m: 0 8px 28px rgba(12, 70, 90, 0.06);
      --sh-l: 0 16px 50px rgba(12, 70, 90, 0.09);

      color-scheme: light;
}

[data-theme="dark"] {
      --primary: #0EA5C7;
      --primary-deep: #084B5E;
      --primary-mid: #0D8BA8;
      --primary-light: #38D2F0;
      --primary-pale: #0D1E24;
      --primary-glow: rgba(14, 165, 199, 0.12);
      --primary-glow-s: rgba(14, 165, 199, 0.20);
      --primary-tx: #0a1418;

      --bg: #090E11;
      --surface: #0E161B;
      --surface-2: #142128;
      --tx: #E8EFF3;
      --tx-1: #B0C4D0;
      --tx-2: #607B8B;
      --tx-3: #3A5060;
      --bd: #1C3040;
      --bd-s: #15252F;

      --glass: rgba(9, 14, 17, 0.7);
      --glass-bd: rgba(255, 255, 255, 0.05);

      --neo: 4px 4px 12px rgba(0, 0, 0, 0.3), -3px -3px 10px rgba(255, 255, 255, 0.02);
      --neo-h: 6px 6px 18px rgba(0, 0, 0, 0.4), -4px -4px 12px rgba(255, 255, 255, 0.03);

      --sh-s: 0 2px 8px rgba(0, 0, 0, 0.2);
      --sh-m: 0 8px 28px rgba(0, 0, 0, 0.25);
      --sh-l: 0 16px 50px rgba(0, 0, 0, 0.35);

      color-scheme: dark;
}

:root {
      --ff-d: 'Poppins', sans-serif;
      --ff-b: 'Plus Jakarta Sans', sans-serif;
      --fs-hero: clamp(2.6rem, 6.5vw, 5rem);
      --fs-h2: clamp(1.75rem, 4vw, 3rem);
      --fs-h3: clamp(1.1rem, 2vw, 1.3rem);
      --fs-body: clamp(0.94rem, 1.4vw, 1.05rem);
      --fs-sm: 0.875rem;
      --fs-xs: 0.75rem;
      --r: 8px;
      --r-sm: 6px;
      --r-lg: 12px;
      --r-full: 9999px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --tt: 0.4s;
      --max: 1180px;
      --px: 1.25rem;
}


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

html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
}

html.lenis,
html.lenis body {
      height: auto
}

body {
      font-family: var(--ff-b);
      font-size: var(--fs-body);
      color: var(--tx);
      background: var(--bg);
      line-height: 1.65;
      overflow-x: hidden;
      transition: background var(--tt), color var(--tt)
}

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

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

ul {
      list-style: none
}

button {
      cursor: pointer;
      border: none;
      background: none;
      font: inherit;
      color: inherit
}

::selection {
      background: var(--primary);
      color: var(--primary-tx)
}

.container {
      width: 100%;
      max-width: var(--max);
      margin-inline: auto;
      padding-inline: var(--px)
}

.section {
      padding: 5rem 0;

      @media(min-width:768px) {
            padding: 7rem 0
      }
}

.surface {
      background: var(--surface);
      transition: background var(--tt)
}

.section-head {
      max-width: 640px;
      margin-bottom: 3rem;

      &.center {
            text-align: center;
            margin-inline: auto
      }

      h2 {
            font-family: var(--ff-d);
            font-size: var(--fs-h2);
            font-weight: 800;
            line-height: 1.1;
            color: var(--tx);
            letter-spacing: -0.025em;
            margin-top: .75rem;
            transition: color var(--tt);

            em {
                  font-style: normal;
                  color: var(--primary)
            }
      }

      p {
            color: var(--tx-2);
            margin-top: .75rem;
            transition: color var(--tt)
      }
}

.chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: var(--fs-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--primary);
      padding: .3rem .8rem;
      background: var(--primary-glow);
      border: 1px solid var(--primary-glow-s);
      border-radius: var(--r-full);
      transition: all var(--tt)
}


/* ── BUTTONS ── */
.btn {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-family: var(--ff-b);
      font-weight: 600;
      font-size: var(--fs-sm);
      border-radius: var(--r);
      padding: .8rem 1.6rem;
      transition: all .4s var(--ease);
      white-space: nowrap
}

.btn-fill {
      background: linear-gradient(135deg, var(--primary-deep), var(--primary-mid));
      color: #fff;
      box-shadow: 0 4px 16px var(--primary-glow-s);

      &:hover {
            filter: brightness(1.12);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px var(--primary-glow-s)
      }
}

.btn-glass {
      background: var(--glass);
      color: var(--tx);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--bd);
      transition: all .4s var(--ease), background var(--tt), border var(--tt), color var(--tt);

      &:hover {
            border-color: var(--primary);
            color: var(--primary)
      }
}

.btn-glass-w {
      background: rgba(255, 255, 255, .08);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: var(--r);
      padding: .8rem 1.6rem;
      font-weight: 600;
      font-size: var(--fs-sm);

      &:hover {
            background: rgba(255, 255, 255, .15)
      }
}

.btn-wa {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: #fff;
      font-size: 1rem;
      padding: .9rem 1.8rem;
      border-radius: var(--r);

      &:hover {
            filter: brightness(1.08);
            transform: translateY(-2px)
      }
}


/* ── HEADER — Floating pill ── */
.hdr {
      position: fixed;
      top: .75rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      width: calc(100% - 2rem);
      max-width: 840px;
      transition: top .4s var(--ease)
}

.hdr-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      padding: 0 .75rem 0 1rem;
      background: var(--glass);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      border: 1px solid var(--glass-bd);
      border-radius: var(--r-full);
      box-shadow: var(--sh-m);
      transition: all var(--tt)
}

.logo {
      width: 4rem;
}

.nav-links {
      display: none;

      @media(min-width:768px) {
            display: flex;
            gap: 1.5rem
      }

      a {
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--tx-2);
            transition: color .2s;

            &:hover {
                  color: var(--primary)
            }
      }
}

.hdr-right {
      display: flex;
      align-items: center;
      gap: .5rem
}

.theme-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--tx-2);
      font-size: 1rem;
      background: var(--primary-glow);
      transition: all var(--tt);

      &:hover {
            color: var(--primary)
      }
}

.t-dark {
      display: none
}

[data-theme="dark"] {
      .t-light {
            display: none
      }

      .t-dark {
            display: block
      }
}

.hdr-cta {
      display: none;

      @media(min-width:768px) {
            display: inline-flex
      }

      align-items:center;
      font-weight:600;
      font-size:var(--fs-xs);
      padding:.45rem 1rem;
      border-radius:var(--r-full);
      background:linear-gradient(135deg, var(--primary-deep), var(--primary-mid));
      color:#fff;
      transition:all .35s var(--ease);

      &:hover {
            filter: brightness(1.12)
      }
}

.burger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      z-index: 1001;
      padding: 6px;

      @media(min-width:768px) {
            display: none
      }

      span {
            display: block;
            width: 20px;
            height: 1.5px;
            background: var(--tx);
            border-radius: 2px;
            transition: all .4s var(--ease)
      }
}

.burger.active span:first-child {
      transform: translateY(3.25px) rotate(45deg)
}

.burger.active span:last-child {
      transform: translateY(-3.25px) rotate(-45deg)
}

.mob-nav {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s var(--ease);

      &.open {
            opacity: 1;
            pointer-events: all
      }

      ul {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: center
      }

      .mob-link {
            font-family: var(--ff-d);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--tx);

            &:hover {
                  color: var(--primary)
            }

            &.ac {
                  font-size: 1.1rem;
                  color: var(--primary);
                  margin-top: 1rem
            }
      }
}


/* ══════ HERO — Split layout, no carousel ══════ */
.hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: calc(56px + 2.5rem) var(--px) 2.5rem[];
      box-sizing: border-box;
}

.hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
}

.hero-grad {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 55% 50% at 70% 40%, var(--primary-glow-s), transparent), radial-gradient(ellipse 40% 35% at 20% 80%, rgba(124, 58, 237, .03), transparent);
      transition: background var(--tt);
      box-sizing: border-box;
}

.hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px)
}

.o1 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(8, 75, 94, .16), transparent 70%);
      top: -10%;
      right: -8%
}

.o2 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(14, 165, 199, .08), transparent 70%);
      bottom: 10%;
      left: -5%
}

.hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 2rem;
      align-items: center;
      width: 100%;
      max-width: var(--max);
      margin-inline: auto;
      box-sizing: border-box;

      @media(min-width:960px) {
            grid-template-columns: 1fr 1.1fr;
            gap: 3rem
      }
}

.hero-text {
      max-width: 560px;
      padding: 2rem;
      box-sizing: border-box;
}

.hero-chip {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--primary);
      background: var(--primary-glow);
      border: 1px solid var(--primary-glow-s);
      border-radius: var(--r-full);
      padding: .35rem 1rem;
      margin-bottom: 1.25rem;
      transition: all var(--tt)
}

.chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      animation: pd 2s ease infinite
}

@keyframes pd {

      0%,
      100% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, .4)
      }

      50% {
            box-shadow: 0 0 0 5px rgba(16, 185, 129, 0)
      }
}

.hero-title {
      font-family: var(--ff-d);
      font-size: 3rem;
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -.035em;
      color: var(--tx);
      margin-bottom: 1.5rem;
      transition: color var(--tt);
      box-sizing: border-box;

      .hl {
            display: block
      }

      .glow {
            background: linear-gradient(135deg, var(--primary-deep), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text
      }
}

.hero-desc {
      color: var(--tx-2);
      margin-bottom: 2rem;
      transition: color var(--tt);
      box-sizing: border-box;
}

.hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: 2rem
}

.hero-proof {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .55rem 1rem .55rem .55rem;
      background: var(--glass);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-bd);
      border-radius: var(--r-full);
      transition: all var(--tt)
}

.proof-avatars {
      display: flex
}

.av {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .65rem;
      font-weight: 700;
      color: #fff;
      margin-left: -7px;
      border: 2px solid var(--bg);
      transition: border-color var(--tt);

      &:first-child {
            margin-left: 0
      }
}

.av1 {
      background: #084B5E
}

.av2 {
      background: #0EA5C7
}

.av3 {
      background: #7c3aed
}

.av4 {
      background: #10b981
}

.av5 {
      background: var(--tx-3);
      font-size: .8rem
}

.hero-proof span {
      font-size: var(--fs-xs);
      color: var(--tx-2);

      strong {
            color: var(--tx)
      }
}

/* Hero visual — large image composition */
.hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;
      box-sizing: border-box;

      @media(min-width:960px) {
            min-height: 460px
      }
}

.hv-main {
      position: relative;
      z-index: 2;
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--sh-l);
      border: 1px solid var(--bd-s);
      transition: border var(--tt);
      width: 80%;

      @media(min-width:768px) {
            width: 100%;
      }
}

.hv-main img {
      object-fit: cover;
      width: 100%;
}

.hv-float {
      display: none;
      position: absolute;
      z-index: 3;
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--sh-l);
      border: 1px solid rgba(255, 255, 255, .1);

      @media(min-width:768px) {
            display: block;
            width: 170px;
            bottom: -5%;
            right: -3%
      }
}

.hv-f1 {
      bottom: -10%;
      right: -5%;
      width: 130px;
      height: 18rem;

      @media(min-width:768px) {
            width: 170px;
            bottom: -5%;
            right: -3%
      }
}

.hv-f1 img {
      width: 100%;
      object-fit: cover
}

.hv-f2 {
      top: 10%;
      left: -5%;
      width: 170px;
      height: 18rem;

      @media(min-width:768px) {
            width: 220px;
            top: 3%;
            left: -4%
      }
}

.hv-f2 img {
      width: 100%;
      object-fit: cover
}

/* Lateral social */
.hero-social {
      position: absolute;
      left: 1.2rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: .8rem;

      @media(min-width:1024px) {
            display: flex
      }

      a {
            color: var(--tx-3);
            font-size: 1rem;
            transition: color .2s;

            &:hover {
                  color: var(--primary)
            }
      }

      .soc-line {
            width: 1px;
            height: 40px;
            background: var(--bd);
            transition: background var(--tt)
      }
}


/* ══════ BRAND STRIP ══════ */
.brand-strip {
      padding: .75rem 0;
      overflow: hidden;
      background: linear-gradient(90deg, var(--primary-deep), var(--primary-mid), var(--primary-deep))
}

.brand-track {
      display: flex;
      align-items: center;
      gap: 2rem;
      width: max-content;
      animation: bscroll 40s linear infinite
}

.brand-item {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: var(--r-sm);
      overflow: hidden;

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

.brand-sep {
      font-family: var(--ff-d);
      font-size: var(--fs-xs);
      font-weight: 700;
      color: rgba(255, 255, 255, .5);
      text-transform: uppercase;
      letter-spacing: .06em;
      white-space: nowrap
}

@keyframes bscroll {
      0% {
            transform: translateX(0)
      }

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


/* ══════ STATS ══════ */
.stats-section {
      padding: 2.5rem 0;
      background: var(--surface);
      border-bottom: 1px solid var(--bd-s);
      transition: all var(--tt)
}

.stats-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;

      @media(min-width:768px) {
            grid-template-columns: repeat(4, 1fr)
      }
}

.stat {
      text-align: center
}

.stat-n {
      font-family: var(--ff-d);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 800;
      color: var(--primary);
      display: inline;
      line-height: 1
}

.stat-p {
      font-family: var(--ff-d);
      font-weight: 800;
      color: var(--primary);
      font-size: clamp(1.2rem, 2.5vw, 1.6rem)
}

.stat-l {
      display: block;
      font-size: var(--fs-xs);
      color: var(--tx-3);
      margin-top: .15rem;
      transition: color var(--tt)
}


/* ══════ SHOWCASE — Big image + text ══════ */
.showcase-grid {
      display: grid;
      gap: 2.5rem;
      align-items: center;

      @media(min-width:768px) {
            grid-template-columns: 1.2fr 1fr;
            gap: 3.5rem
      }
}

.showcase-img {
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--sh-l);
      border: 1px solid var(--bd-s);
      transition: border var(--tt);
      height: 30rem;

      img {
            width: 100%;
            object-fit: cover;
            display: block
      }
}

.showcase-text {
      h2 {
            font-family: var(--ff-d);
            font-size: var(--fs-h2);
            font-weight: 800;
            line-height: 1.1;
            color: var(--tx);
            margin-top: .75rem;

            em {
                  font-style: normal;
                  color: var(--primary)
            }
      }

      p {
            color: var(--tx-2);
            margin-top: .75rem;
            line-height: 1.75;

            strong {
                  color: var(--tx)
            }
      }
}

.showcase-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .5rem;
      margin-top: 1.5rem
}

.ss-card {
      text-align: center;
      padding: 1rem .5rem;
      border-radius: var(--r);
      border: 1px solid var(--bd);
      background: var(--bg);
      transition: all var(--tt), transform .4s var(--ease);

      &:hover {
            transform: translateY(-3px);
            box-shadow: var(--neo-h)
      }

      strong {
            font-family: var(--ff-d);
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--primary);
            display: block
      }

      span {
            font-size: var(--fs-xs);
            color: var(--tx-3);
            display: block;
            margin-top: .1rem
      }
}


/* ══════ IMAGE DIVIDER ══════ */
.img-divider {
      position: relative;
      height: 50vw;
      max-height: 500px;
      overflow: hidden;

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

      &.tall {
            max-height: 600px
      }
}

.img-divider-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%);
      transition: background var(--tt)
}

.grad-bottom {
      background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--bg) 100%) !important
}


/* ══════ CALCULATOR ══════ */
.calc-wrap {
      display: grid;
      gap: 1.5rem;
      border-radius: var(--r-lg);
      border: 1px solid var(--bd);
      background: var(--bg);
      padding: 2rem;
      box-shadow: var(--neo);
      transition: all var(--tt);

      @media(min-width:768px) {
            grid-template-columns: 1fr 1fr;
            padding: 2.5rem
      }
}

.calc-group {
      margin-bottom: 1.5rem;

      &:last-child {
            margin-bottom: 0
      }
}

.calc-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: .6rem;

      label {
            font-weight: 600;
            font-size: var(--fs-sm);
            color: var(--tx)
      }

      output {
            font-family: var(--ff-d);
            font-weight: 700;
            color: var(--primary)
      }
}

input[type="range"] {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: var(--surface-2);
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      transition: background var(--tt);

      &::-webkit-slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-deep), var(--primary-mid));
            box-shadow: 0 2px 8px var(--primary-glow-s);
            cursor: pointer;
            transition: transform .2s
      }

      &::-webkit-slider-thumb:hover {
            transform: scale(1.15)
      }

      &::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            border: none;
            cursor: pointer
      }
}

.calc-mm {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      color: var(--tx-3);
      margin-top: .35rem
}

.calc-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      border-radius: var(--r);
      background: linear-gradient(135deg, var(--primary-deep), #072c38);
      color: #fff
}

.cr-lbl {
      font-size: var(--fs-sm);
      opacity: .7
}

.cr-val {
      font-family: var(--ff-d);
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 800;
      margin: .25rem 0
}

.cr-year {
      font-size: var(--fs-sm);
      font-weight: 600;
      opacity: .55;
      margin-bottom: 1rem
}

.calc-right p {
      font-size: var(--fs-sm);
      opacity: .75;
      margin-bottom: 1.25rem;

      strong {
            opacity: 1
      }
}

.calc-right .btn-fill {
      background: #fff !important;
      color: var(--primary-deep) !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .15);

      &:hover {
            background: #f0f0f0 !important
      }
}


/* ══════ SERVICES — Image-heavy grid ══════ */
.svc-grid {
      display: grid;
      gap: 1rem;

      @media(min-width:768px) {
            grid-template-columns: repeat(2, 1fr)
      }
}

.svc-card {
      border-radius: var(--r-lg);
      position: relative;
      transition: all var(--tt), transform .5s var(--ease);
      will-change: transform;

      &:hover {
            transform: translateY(-4px)
      }

      h3 {
            font-family: var(--ff-d);
            font-size: var(--fs-h3);
            font-weight: 700;
            margin-bottom: .3rem
      }

      p {
            font-size: var(--fs-sm);
            line-height: 1.6
      }
}

.svc-ic {
      font-size: 1.8rem;
      display: block;
      margin-bottom: .75rem
}

.svc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem;
      margin-top: .75rem;

      span {
            font-size: var(--fs-xs);
            font-weight: 600;
            padding: .2rem .55rem;
            border-radius: var(--r-full)
      }
}

/* Image card */
.svc-img-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--bd);
      background: var(--bg);
      box-shadow: var(--neo);

      &:hover {
            box-shadow: var(--neo-h)
      }
}

.svc-card-img {
      position: relative;
      height: 260px;
      overflow: hidden;

      @media(min-width:768px) {
            height: 320px
      }

      img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s var(--ease)
      }
}

.svc-card:hover .svc-card-img img {
      transform: scale(1.05)
}

.svc-card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      background: linear-gradient(0deg, rgba(12, 70, 90, .92) 0%, transparent 100%);
      color: #fff;

      h3 {
            color: #fff
      }

      p {
            color: rgba(255, 255, 255, .75)
      }
}

/* Dark card */
.svc-dark {
      padding: 2rem;
      background: linear-gradient(135deg, var(--primary-deep), #072c38);
      color: #fff;
      box-shadow: var(--sh-m);

      .svc-ic {
            color: var(--primary-light)
      }

      p {
            color: rgba(255, 255, 255, .7)
      }

      .svc-tags span {
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .7)
      }
}

/* Wide gradient */
.svc-wide {
      padding: 0;
      background: linear-gradient(135deg, var(--primary-deep), var(--primary-mid));
      color: #fff;
      box-shadow: var(--sh-m);
      overflow: hidden;

      @media(min-width:768px) {
            grid-column: span 2
      }
}

.svc-wide-inner {
      display: grid;

      @media(min-width:768px) {
            grid-template-columns: 1fr 1fr;
            align-items: center
      }
}

.svc-wide-text {
      padding: 2rem;

      .svc-ic {
            color: var(--primary-light)
      }

      p {
            color: rgba(255, 255, 255, .75)
      }

      .svc-tags span {
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .7)
      }
}

.svc-wide-img {
      height: 220px;
      overflow: hidden;

      @media(min-width:768px) {
            height: 100%
      }

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


/* ══════ PORTFOLIO ══════ */
.portfolio-section {
      overflow: hidden
}

.portfolio-head {
      margin-bottom: 2.5rem
}

.pf-track-wrap {
      overflow: hidden
}

.pf-track {
      display: flex;
      gap: 1rem;
      padding-inline: var(--px);
      width: max-content
}

.pf-card {
      flex-shrink: 0;
      width: 300px;
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--bd);
      background: var(--bg);
      box-shadow: var(--neo);
      transition: all var(--tt), transform .5s var(--ease);

      &:hover {
            transform: translateY(-6px);
            box-shadow: var(--neo-h)
      }

      @media(min-width:768px) {
            width: 380px
      }
}

.pf-img {
      height: 220px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;

      @media(min-width:768px) {
            height: 260px
      }

      img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .7s var(--ease)
      }
}

.pf-card:hover .pf-img img {
      transform: scale(1.06)
}

.pf-info {
      padding: 1.25rem;

      h3 {
            font-family: var(--ff-d);
            font-weight: 700;
            color: var(--tx);
            margin-bottom: .2rem;
            transition: color var(--tt)
      }

      p {
            font-size: var(--fs-sm);
            color: var(--tx-2)
      }
}


/* ══════ GALLERY — Masonry-like ══════ */
.gallery-section {
      background: linear-gradient(180deg, var(--bg), var(--surface), var(--bg));
      transition: background var(--tt)
}

.gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .75rem;

      @media(min-width:768px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem
      }
}

.gal-item {
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--bd-s);
      box-shadow: var(--sh-s);
      transition: all var(--tt), transform .5s var(--ease);

      &:hover {
            transform: scale(1.02);
            box-shadow: var(--sh-m)
      }

      img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .7s var(--ease)
      }
}

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

.gal-tall {
      grid-row: span 2
}


/* ══════ MANIFESTO ══════ */
.manifesto-grid {
      display: grid;
      gap: 3rem;

      @media(min-width:768px) {
            grid-template-columns: 0.8fr 1fr;
            align-items: start;
            gap: 4rem
      }
}

.manifesto-img {
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--sh-l);
      border: 1px solid var(--bd-s);
      transition: border var(--tt);

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

.manifesto-text {
      h2 {
            font-family: var(--ff-d);
            font-size: var(--fs-h2);
            font-weight: 800;
            line-height: 1.1;
            color: var(--tx);
            margin-top: .75rem;

            em {
                  font-style: normal;
                  color: var(--primary)
            }
      }

      p {
            color: var(--tx-2);
            margin-top: .75rem;
            line-height: 1.75;

            strong {
                  color: var(--tx)
            }
      }
}

.pillars {
      display: grid;
      gap: .6rem;
      margin-top: 1.5rem
}

.pill-item {
      display: flex;
      gap: .85rem;
      padding: 1rem;
      border-radius: var(--r);
      border: 1px solid var(--bd);
      background: var(--bg);
      transition: all var(--tt), transform .4s var(--ease);

      &:hover {
            transform: translateX(4px);
            box-shadow: var(--neo-h)
      }

      h3 {
            font-family: var(--ff-d);
            font-size: .9rem;
            font-weight: 700;
            color: var(--tx);
            margin-bottom: .05rem
      }

      p {
            font-size: var(--fs-sm);
            color: var(--tx-2);
            line-height: 1.5;
            margin-top: 0
      }
}

.pill-ic {
      width: 36px;
      height: 36px;
      border-radius: var(--r-sm);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--primary-glow), var(--primary-glow-s));
      color: var(--primary);
      font-size: 1.1rem;
      transition: all var(--tt)
}


/* ══════ FAQ ══════ */
.faq-list {
      max-width: 700px;
      margin-inline: auto
}

.faq-item {
      border-bottom: 1px solid var(--bd);
      transition: border-color var(--tt)
}

.faq-item summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.1rem 0;
      cursor: pointer;
      font-weight: 600;
      font-size: var(--fs-body);
      color: var(--tx);
      list-style: none;
      transition: color .2s;

      &::-webkit-details-marker {
            display: none
      }

      &:hover {
            color: var(--primary)
      }
}

.faq-ic {
      flex-shrink: 0;
      font-size: 1rem;
      color: var(--primary);
      transition: transform .4s var(--ease)
}

.faq-item[open] .faq-ic {
      transform: rotate(45deg)
}

.faq-body {
      padding-bottom: 1.1rem;

      p {
            color: var(--tx-2);
            line-height: 1.75;
            font-size: var(--fs-sm)
      }
}


/* ══════ CTA ══════ */
.cta-block {
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center
}

.cta-img-bg {
      position: absolute;
      inset: 0;

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

.cta-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(12, 70, 90, .92), rgba(8, 40, 56, .88))
}

.cta-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 3rem 1.5rem;
      max-width: 560px;
      color: #fff;

      h2 {
            font-family: var(--ff-d);
            font-size: var(--fs-h2);
            font-weight: 800;
            margin-bottom: .75rem;

            em {
                  font-style: normal;
                  color: var(--primary-light)
            }
      }

      p {
            color: rgba(255, 255, 255, .6);
            margin-bottom: 2rem
      }
}

.cta-btns {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      justify-content: center
}


/* ══════ FOOTER ══════ */
.site-footer {
      background: var(--surface);
      border-top: 1px solid var(--bd);
      padding: 3rem 0 2rem;
      transition: all var(--tt)
}

.footer-grid {
      display: grid;
      gap: 2rem;
      margin-bottom: 2.5rem;

      @media(min-width:768px) {
            grid-template-columns: 2fr 1fr 1.5fr
      }
}

.footer-brand p {
      color: var(--tx-2);
      font-size: var(--fs-sm);
      line-height: 1.6;
      margin-top: .75rem
}

.footer-nav {
      h4 {
            font-family: var(--ff-d);
            font-weight: 700;
            color: var(--tx);
            font-size: var(--fs-sm);
            margin-bottom: .75rem
      }

      ul {
            display: flex;
            flex-direction: column;
            gap: .4rem
      }

      a {
            font-size: var(--fs-sm);
            color: var(--tx-2);

            &:hover {
                  color: var(--primary)
            }
      }
}

.footer-contact {
      h4 {
            font-family: var(--ff-d);
            font-weight: 700;
            color: var(--tx);
            font-size: var(--fs-sm);
            margin-bottom: .75rem
      }

      address {
            font-style: normal;
            font-size: var(--fs-sm);
            color: var(--tx-2);
            line-height: 1.75
      }

      a {
            color: var(--primary);

            &:hover {
                  opacity: .7
            }
      }
}

.footer-bottom {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      align-items: center;
      padding-top: 2rem;
      border-top: 1px solid var(--bd);
      font-size: var(--fs-xs);
      color: var(--tx-3);

      @media(min-width:768px) {
            flex-direction: row;
            justify-content: space-between
      }
}

.footer-soc {
      display: flex;
      gap: .6rem;

      a {
            width: 32px;
            height: 32px;
            border-radius: var(--r-sm);
            background: var(--primary-glow);
            color: var(--tx-2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            transition: all .2s;

            &:hover {
                  background: var(--primary);
                  color: #fff
            }
      }
}


/* ══════ MARQUEE ══════ */
.marquee {
      padding: .85rem 0;
      overflow: hidden;
      border-top: 1px solid var(--bd-s);
      border-bottom: 1px solid var(--bd-s);
      background: var(--surface)
}

.marquee-track {
      display: flex;
      align-items: center;
      gap: 2rem;
      width: max-content;
      animation: mq 35s linear infinite
}

@keyframes mq {
      0% {
            transform: translateX(0)
      }

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


/* ══════ GSAP STATES ══════ */
[data-anim="reveal"] {
      opacity: 0
}

[data-anim="stagger"]>* {
      opacity: 0
}

.hero-float,
.hv-float {
      opacity: 0
}

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

      *,
      *::before,
      *::after {
            animation-duration: .01ms !important;
            transition-duration: .01ms !important
      }

      [data-anim],
      [data-anim]>*,
      .hero-float,
      .hv-float {
            opacity: 1 !important;
            transform: none !important
      }
}