:root{

  --bg:#030712;
  --bg-2:#07101d;

  --surface:#091423;
  --surface-2:#0e1b2d;
  --surface-3:#15253b;

  --white:#f7fbff;
  --white-hot:#ffffff;

  --text:#dce9f5;
  --text-soft:#afc0d1;
  --text-muted:#8297ac;
  --text-dim:#63788d;

  --blue:#3d82ff;
  --blue-bright:#5d9bff;

  --cyan:#28e6ff;
  --cyan-hot:#b7faff;

  --violet:#7560ff;

  --line:rgba(150,195,240,.14);
  --line-bright:rgba(40,230,255,.34);
}


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


html{
  scroll-behavior:smooth;
  background:#030712;
}


body{

  min-width:0;

  font-family:
    "DM Sans",
    sans-serif;

  color:
    var(--white);

  background:

    radial-gradient(
      circle at 15% 8%,
      rgba(44,111,255,.13),
      transparent 28%
    ),

    radial-gradient(
      circle at 85% 18%,
      rgba(40,230,255,.08),
      transparent 26%
    ),

    radial-gradient(
      circle at 55% 90%,
      rgba(117,96,255,.05),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #040913 0%,
      #02050b 58%,
      #050a14 100%
    );

  overflow-x:hidden;

  line-height:1.6;
}


body::after{

  content:"";

  position:fixed;

  inset:0;

  z-index:9997;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 54%,
      rgba(0,2,8,.18)
    );
}


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


button,
input,
textarea{
  font:inherit;
}


/* =========================
   BACKGROUND
========================= */

.ambient{

  position:fixed;

  border-radius:50%;

  pointer-events:none;

  z-index:-8;

  filter:blur(100px);
}


.ambient-blue{

  width:500px;
  height:500px;

  left:-210px;
  top:-220px;

  background:
    rgba(42,111,255,.16);

  animation:
    ambientBlue
    18s
    ease-in-out
    infinite
    alternate;
}


.ambient-cyan{

  width:420px;
  height:420px;

  right:-170px;
  top:100px;

  background:
    rgba(40,230,255,.10);

  animation:
    ambientCyan
    20s
    ease-in-out
    infinite
    alternate;
}


.ambient-violet{

  width:360px;
  height:360px;

  left:45%;
  bottom:-230px;

  background:
    rgba(117,96,255,.07);

  animation:
    ambientViolet
    18s
    ease-in-out
    infinite
    alternate;
}


@keyframes ambientBlue{

  to{
    transform:
      translate(125px,100px)
      scale(1.12);
  }
}


@keyframes ambientCyan{

  to{
    transform:
      translate(-105px,90px)
      scale(1.12);
  }
}


@keyframes ambientViolet{

  to{
    transform:
      translateY(-90px)
      scale(1.12);
  }
}


.background-grid{

  position:fixed;

  inset:-70px;

  z-index:-7;

  pointer-events:none;

  background-image:

    linear-gradient(
      rgba(110,160,225,.024) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(110,160,225,.024) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black,
      transparent 82%
    );

  animation:
    gridMove
    34s
    linear
    infinite;
}


@keyframes gridMove{

  to{
    transform:
      translate(72px,72px);
  }
}


#backgroundCanvas{

  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:-5;
}


/* =========================
   NAVBAR
========================= */

.navbar{

  width:min(92%,1320px);

  margin:15px auto;

  padding:13px 17px;

  position:sticky;

  top:10px;

  z-index:1000;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  border:
    1px solid
    var(--line);

  border-radius:15px;

  background:
    rgba(3,9,18,.78);

  backdrop-filter:blur(20px);

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.32);
}


.brand{

  display:flex;
  align-items:center;

  gap:9px;
}


.brand-mark{

  width:37px;
  height:37px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(40,230,255,.35);

  border-radius:9px;

  background:
    linear-gradient(
      145deg,
      #d4fbff,
      #5bcbff,
      #3b78ff
    );

  color:#03111b;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-weight:700;

  box-shadow:
    0 8px 26px
    rgba(40,230,255,.14);
}


.brand-name{

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:22px;

  font-weight:700;

  letter-spacing:-1px;
}


.brand-name span{
  color:var(--cyan);
}


.nav-links{

  display:flex;

  gap:3px;
}


.nav-links a{

  padding:
    8px 11px;

  border-radius:8px;

  color:
    #a9bacb;

  font-size:12px;

  font-weight:600;

  transition:.25s ease;
}


.nav-links a:hover{

  color:#ffffff;

  background:
    rgba(40,230,255,.05);
}


.nav-button{

  padding:
    11px 15px;

  display:inline-flex;

  align-items:center;

  gap:7px;

  border:
    1px solid
    rgba(40,230,255,.28);

  border-radius:9px;

  color:#03111b;

  background:
    linear-gradient(
      135deg,
      #c1fbff,
      #35e5ff,
      #4382ff
    );

  font-size:11px;

  font-weight:800;

  box-shadow:
    0 12px 30px
    rgba(40,230,255,.14);

  transition:.25s ease;
}


.nav-button:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 18px 38px
    rgba(40,230,255,.21);
}


/* =========================
   HERO
========================= */

.hero{

  position:relative;

  width:min(1400px,94%);

  min-height:87vh;

  margin:auto;

  padding:
    52px 2% 70px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(430px,.92fr);

  align-items:center;

  gap:30px;
}


.hero-content{

  min-width:0;

  max-width:770px;

  position:relative;

  z-index:30;

  animation:
    heroIn
    .9s
    cubic-bezier(.16,1,.3,1)
    both;
}


@keyframes heroIn{

  from{

    opacity:0;

    transform:
      translateX(-25px);

    filter:blur(7px);
  }

  to{

    opacity:1;

    transform:none;

    filter:blur(0);
  }
}


.hero-kicker{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:20px;

  color:#d8e7f3;

  font-size:10px;

  font-weight:800;

  letter-spacing:3px;
}


.kicker-line{

  width:34px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--blue)
    );

  box-shadow:
    0 0 14px
    rgba(40,230,255,.70);
}


.hero-title{

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(74px,9vw,126px);

  line-height:.82;

  letter-spacing:-7px;

  font-weight:700;

  color:
    #ffffff;

  text-shadow:
    0 0 20px
    rgba(255,255,255,.05);
}


.hero-title span{

  display:block;

  margin-top:5px;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #d8fbff 20%,
      #55ebff 47%,
      #3e89ff 76%,
      #b0c1ff 100%
    );

  background-size:220% 100%;

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

  animation:
    titleFlow
    7s
    ease-in-out
    infinite;
}


@keyframes titleFlow{

  0%,100%{
    background-position:0 50%;
  }

  50%{
    background-position:100% 50%;
  }
}


.hero-text{

  max-width:650px;

  margin-top:30px;

  color:
    #b8c9d9;

  font-size:16px;

  line-height:1.85;

  text-shadow:
    0 2px 16px
    rgba(0,0,0,.28);
}


.hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:11px;

  margin-top:30px;
}


.button{

  min-height:50px;

  padding:
    0 20px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  border:
    1px solid
    rgba(150,195,240,.15);

  border-radius:10px;

  font-size:12px;

  font-weight:800;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.button:hover{
  transform:
    translateY(-4px);
}


.button-primary{

  color:#03111b;

  border-color:transparent;

  background:
    linear-gradient(
      135deg,
      #c4fcff,
      #30e5ff,
      #4383ff
    );

  box-shadow:
    0 15px 36px
    rgba(40,230,255,.17);
}


.button-primary:hover{

  box-shadow:
    0 22px 48px
    rgba(40,230,255,.23);
}


.button-secondary{

  color:#eff8ff;

  background:
    rgba(255,255,255,.025);
}


.button-secondary:hover{

  border-color:
    rgba(40,230,255,.28);

  background:
    rgba(40,230,255,.045);
}


.hero-stats{

  display:flex;

  gap:40px;

  margin-top:46px;
}


.stat strong{

  display:block;

  color:#ffffff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:30px;

  font-weight:700;

  text-shadow:
    0 0 17px
    rgba(40,230,255,.07);
}


.stat span{

  display:block;

  margin-top:2px;

  color:
    #86a0b7;

  font-size:10px;

  font-weight:600;
}


/* =========================
   HERO VISUAL
========================= */

.hero-visual{

  position:relative;

  width:
    min(590px,46vw);

  aspect-ratio:
    1 / 1.04;

  margin:auto;

  isolation:isolate;

  overflow:visible;

  animation:
    visualIn
    1.05s
    .1s
    cubic-bezier(.16,1,.3,1)
    both;
}


@keyframes visualIn{

  from{

    opacity:0;

    transform:
      translateX(25px)
      scale(.94);

    filter:blur(8px);
  }

  to{

    opacity:1;

    transform:none;

    filter:blur(0);
  }
}


.visual-glow{

  position:absolute;

  left:50%;
  top:49%;

  width:78%;
  height:78%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.15),
      rgba(40,230,255,.10) 24%,
      rgba(61,130,255,.07) 42%,
      rgba(117,96,255,.035) 56%,
      transparent 73%
    );

  filter:blur(24px);

  animation:
    glowPulse
    4.5s
    ease-in-out
    infinite
    alternate;
}


@keyframes glowPulse{

  to{

    transform:
      translate(-50%,-50%)
      scale(1.08);

    opacity:.92;
  }
}


.visual-floor{

  position:absolute;

  left:50%;

  bottom:8%;

  width:68%;
  height:14%;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(40,230,255,.13),
      rgba(61,130,255,.05) 38%,
      transparent 72%
    );

  filter:blur(11px);
}


/* MONOLITH */

.monolith{

  position:absolute;

  left:50%;
  top:48%;

  width:48%;
  height:69%;

  transform:
    translate(-50%,-50%)
    perspective(900px)
    rotateY(-8deg);

  overflow:hidden;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(210,244,255,.10),
      rgba(8,18,30,.23) 44%,
      rgba(1,5,11,.82)
    );

  border:
    1px solid
    rgba(165,224,255,.16);

  box-shadow:

    inset:
      10px 0 30px
      rgba(255,255,255,.025),

    inset:
      -20px 0 40px
      rgba(0,0,0,.4),

    0 35px 90px
      rgba(0,0,0,.48),

    0 0 75px
      rgba(40,230,255,.08);

  backdrop-filter:blur(15px);

  animation:
    monolithFloat
    5s
    ease-in-out
    infinite
    alternate;
}


@keyframes monolithFloat{

  to{

    transform:
      translate(-50%,-53%)
      perspective(900px)
      rotateY(-5deg);
  }
}


.monolith-glass{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      116deg,
      transparent 28%,
      rgba(255,255,255,.055) 48%,
      transparent 63%
    );

  background-size:
    240% 100%;

  animation:
    glassSweep
    6s
    ease-in-out
    infinite;

  z-index:7;
}


@keyframes glassSweep{

  0%,18%{
    background-position:-130% 0;
  }

  55%,100%{
    background-position:130% 0;
  }
}


/* ENERGY */

.energy-container{

  position:absolute;

  inset:
    7% 10%;

  overflow:hidden;

  border-radius:18px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(210,249,255,.045),
      rgba(40,230,255,.02),
      transparent 70%
    );
}


.energy-stream{

  position:absolute;

  top:-28%;

  height:156%;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(241,254,255,.95) 11%,
      rgba(166,247,255,.94) 25%,
      var(--cyan) 48%,
      rgba(72,139,255,.65) 70%,
      transparent
    );

  filter:blur(2px);

  box-shadow:
    0 0 18px
      rgba(40,230,255,.60),

    0 0 42px
      rgba(61,130,255,.25);
}


.stream-1{

  left:22%;

  width:6px;

  transform:
    rotate(11deg);

  animation:
    energyOne
    3.1s
    linear
    infinite;
}


.stream-2{

  left:47%;

  width:13px;

  transform:
    rotate(-2deg);

  animation:
    energyTwo
    2.5s
    linear
    infinite;
}


.stream-3{

  left:74%;

  width:6px;

  transform:
    rotate(-12deg);

  animation:
    energyThree
    3.7s
    linear
    infinite;
}


@keyframes energyOne{

  from{
    transform:
      translateY(112%)
      rotate(11deg);
  }

  to{
    transform:
      translateY(-112%)
      rotate(11deg);
  }
}


@keyframes energyTwo{

  from{
    transform:
      translateY(120%)
      rotate(-2deg);
  }

  to{
    transform:
      translateY(-120%)
      rotate(-2deg);
  }
}


@keyframes energyThree{

  from{
    transform:
      translateY(118%)
      rotate(-12deg);
  }

  to{
    transform:
      translateY(-118%)
      rotate(-12deg);
  }
}


/* CORE */

.energy-core{

  position:absolute;

  left:42%;
  top:42%;

  width:70px;
  height:70px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      #ffffff 0,
      #dcfbff 13%,
      #6fefff 28%,
      rgba(40,230,255,.20) 50%,
      transparent 74%
    );

  filter:blur(4px);

  animation:
    corePulse
    3.2s
    ease-in-out
    infinite;
}


@keyframes corePulse{

  0%,100%{
    transform:scale(.68);
    opacity:.66;
  }

  50%{
    transform:scale(1.10);
    opacity:1;
  }
}


.energy-pulse{

  position:absolute;

  width:84px;
  height:84px;

  border:
    1px solid
    rgba(95,237,255,.20);

  border-radius:50%;
}


.pulse-1{

  left:35%;
  top:35%;

  animation:
    ringPulse
    3.8s
    ease-out
    infinite;
}


.pulse-2{

  left:50%;
  top:54%;

  animation:
    ringPulse
    4.4s
    .8s
    ease-out
    infinite;
}


@keyframes ringPulse{

  from{
    transform:scale(.55);
    opacity:.72;
  }

  to{
    transform:scale(1.85);
    opacity:0;
  }
}


/* REFLECTION */

.monolith-reflection{

  position:absolute;

  top:-10%;

  width:12%;
  height:120%;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(210,246,255,.11),
      transparent
    );

  filter:blur(2px);

  z-index:8;
}


.reflection-1{
  left:15%;
  transform:rotate(14deg);
}


.reflection-2{
  right:15%;
  transform:rotate(-13deg);
  opacity:.42;
}


/* EDGE */

.monolith-edge{

  position:absolute;

  z-index:10;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(210,248,255,.55),
      rgba(40,230,255,.95),
      transparent
    );

  box-shadow:
    0 0 10px
      rgba(40,230,255,.42),

    0 0 28px
      rgba(61,130,255,.15);
}


.edge-top{
  left:7%;
  right:7%;
  top:0;
  height:1px;
}


.edge-right{
  top:8%;
  bottom:8%;
  right:0;
  width:1px;
}


.edge-bottom{
  left:7%;
  right:7%;
  bottom:0;
  height:1px;
}


.edge-left{
  top:8%;
  bottom:8%;
  left:0;
  width:1px;
}


/* PARTICLES */

.floating-particle,
.energy-particle{

  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  background:
    #d8fbff;

  box-shadow:
    0 0 8px
      rgba(40,230,255,.95),

    0 0 18px
      rgba(61,130,255,.52);
}


.floating-particle{
  z-index:12;
}


.fp-1{
  left:10%;
  top:28%;
  animation:floatA 4.2s ease-in-out infinite;
}


.fp-2{
  right:10%;
  top:24%;
  animation:floatB 5.1s ease-in-out infinite;
}


.fp-3{
  left:7%;
  bottom:30%;
  animation:floatC 4.7s ease-in-out infinite;
}


.fp-4{
  right:8%;
  bottom:27%;
  animation:floatD 5.3s ease-in-out infinite;
}


.fp-5{
  left:46%;
  top:7%;
  animation:floatE 4s ease-in-out infinite;
}


.fp-6{
  left:49%;
  bottom:7%;
  animation:floatF 4.8s ease-in-out infinite;
}


@keyframes floatA{
  50%{
    transform:
      translate(18px,-18px)
      scale(1.3);
    opacity:.35;
  }
}


@keyframes floatB{
  50%{
    transform:
      translate(-14px,16px)
      scale(.72);
  }
}


@keyframes floatC{
  50%{
    transform:
      translate(15px,-12px)
      scale(1.15);
  }
}


@keyframes floatD{
  50%{
    transform:
      translate(-13px,-15px)
      scale(.8);
  }
}


@keyframes floatE{
  50%{
    transform:
      translateY(-15px)
      scale(1.28);
  }
}


@keyframes floatF{
  50%{
    transform:
      translateY(14px)
      scale(.8);
  }
}


.energy-particle{
  width:3px;
  height:3px;
}


.ep-1{
  left:23%;
  top:21%;
  animation:energyParticleA 2.8s linear infinite;
}


.ep-2{
  left:42%;
  top:58%;
  animation:energyParticleB 3.2s linear infinite;
}


.ep-3{
  left:64%;
  top:38%;
  animation:energyParticleC 2.6s linear infinite;
}


.ep-4{
  left:73%;
  top:69%;
  animation:energyParticleD 3.4s linear infinite;
}


.ep-5{
  left:34%;
  top:74%;
  animation:energyParticleE 2.9s linear infinite;
}


@keyframes energyParticleA{
  to{
    transform:
      translate(12px,190px);
    opacity:0;
  }
}


@keyframes energyParticleB{
  to{
    transform:
      translate(-13px,-185px);
    opacity:0;
  }
}


@keyframes energyParticleC{
  to{
    transform:
      translate(-8px,190px);
    opacity:0;
  }
}


@keyframes energyParticleD{
  to{
    transform:
      translate(10px,-180px);
    opacity:0;
  }
}


@keyframes energyParticleE{
  to{
    transform:
      translate(9px,-190px);
    opacity:0;
  }
}


/* LABELS */

.visual-label{

  position:absolute;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(143,199,242,.17);

  border-radius:9px;

  background:
    rgba(3,10,19,.80);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 14px 32px
    rgba(0,0,0,.28);

  z-index:20;

  animation:
    labelFloat
    4.6s
    ease-in-out
    infinite
    alternate;
}


.visual-label span{

  display:block;

  color:#8ba5bc;

  font-size:7px;

  letter-spacing:1.6px;

  font-weight:800;
}


.visual-label strong{

  display:block;

  margin-top:2px;

  color:#dcfaff;

  font-size:10px;

  font-weight:800;
}


.label-left{
  left:4%;
  top:23%;
}


.label-right{
  right:3%;
  bottom:23%;
  animation-delay:-2s;
}


@keyframes labelFloat{
  to{
    transform:
      translateY(-8px);
  }
}


/* =========================
   SERVICE STRIP
========================= */

.service-strip{

  width:min(1180px,90%);

  margin:auto;

  padding:
    18px 20px;

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:18px;

  border:
    1px solid
    var(--line);

  border-radius:11px;

  background:
    rgba(6,14,26,.65);

  color:#8ca2b8;

  font-size:9px;

  font-weight:800;

  letter-spacing:2.2px;
}


/* =========================
   SECTIONS
========================= */

.section{

  width:min(1220px,90%);

  margin:auto;

  padding:
    110px 0;
}


.section-heading{

  max-width:820px;

  margin-bottom:48px;
}


.section-number{

  color:#c7d8e6;

  font-size:10px;

  font-weight:800;

  letter-spacing:2.6px;
}


.section-heading h2{

  margin-top:10px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(42px,5.4vw,70px);

  line-height:.97;

  letter-spacing:-3px;

  color:#f5fbff;

  text-shadow:
    0 0 20px
    rgba(40,230,255,.03);
}


.section-heading p{

  max-width:680px;

  margin-top:18px;

  color:#a2b5c7;

  font-size:15px;

  line-height:1.8;
}


/* SERVICES */

.services-layout{

  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:18px;
}


.featured-service{

  position:relative;

  min-height:500px;

  padding:32px;

  border:
    1px solid
    rgba(130,180,225,.14);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(10,25,43,.94),
      rgba(4,12,22,.90)
    );

  overflow:hidden;

  transition:.35s ease;
}


.featured-service::before{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  right:-160px;
  top:-150px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(40,230,255,.11),
      transparent 70%
    );
}


.featured-service:hover{

  transform:
    translateY(-7px);

  border-color:
    rgba(40,230,255,.25);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.30),

    0 0 34px
    rgba(40,230,255,.035);
}


.service-index{

  color:#7692ac;

  font-size:10px;

  font-weight:800;
}


.service-icon{

  width:56px;
  height:56px;

  margin-top:70px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(40,230,255,.26);

  border-radius:14px;

  background:
    rgba(40,230,255,.05);

  color:
    var(--cyan);

  box-shadow:
    0 0 28px
    rgba(40,230,255,.07);

  font-size:15px;

  font-weight:800;
}


.featured-service h3{

  margin-top:26px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:32px;

  color:#f4fbff;
}


.featured-service p{

  max-width:440px;

  margin-top:13px;

  color:#9dafc0;

  font-size:14px;

  line-height:1.8;
}


.featured-service a{

  display:inline-block;

  margin-top:27px;

  color:#bdf8ff;

  font-size:11px;

  font-weight:800;
}


.services-list{

  display:grid;

  gap:10px;
}


.service-row{

  display:grid;

  grid-template-columns:
    60px 1fr 30px;

  align-items:center;

  gap:15px;

  padding:
    19px 18px;

  border:
    1px solid
    rgba(130,180,225,.10);

  border-radius:15px;

  background:
    rgba(7,17,30,.70);

  transition:.28s ease;
}


.service-row:hover{

  transform:
    translateX(6px);

  border-color:
    rgba(40,230,255,.24);

  background:
    rgba(40,230,255,.03);
}


.service-row-number{

  color:#718aa2;

  font-size:10px;

  font-weight:800;
}


.service-row h3{

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:17px;

  color:#f0f8ff;
}


.service-row p{

  margin-top:3px;

  color:#879caf;

  font-size:11px;
}


.service-row > a{

  color:
    var(--cyan);

  font-size:15px;
}


/* STATEMENT */

.statement-section{

  width:min(1100px,90%);

  margin:auto;

  padding:
    105px 0;

  text-align:center;
}


.statement-content{

  max-width:950px;

  margin:auto;
}


.statement-content h2{

  margin-top:16px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(52px,8vw,98px);

  line-height:.88;

  letter-spacing:-5px;

  color:#f7fcff;
}


.statement-content h2 span{

  background:
    linear-gradient(
      100deg,
      #b6faff,
      #38e7ff,
      #718fff
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


.statement-content p{

  max-width:650px;

  margin:
    28px auto 0;

  color:#9db0c2;

  font-size:15px;

  line-height:1.8;
}


/* WORK */

.work-grid{

  display:grid;

  grid-template-columns:
    1.35fr .825fr .825fr;

  gap:16px;
}


.work-card{

  position:relative;

  min-height:340px;

  padding:28px;

  overflow:hidden;

  border:
    1px solid
    rgba(130,180,225,.11);

  border-radius:19px;

  background:
    linear-gradient(
      145deg,
      #0c1726,
      #050c16
    );

  transition:.35s ease;
}


.work-main{
  min-height:440px;
}


.work-card:hover{

  transform:
    translateY(-8px);

  border-color:
    rgba(40,230,255,.24);
}


.work-orb{

  position:absolute;

  width:330px;
  height:330px;

  right:-140px;
  top:-110px;

  border-radius:50%;
}


.work-orb-blue{
  background:
    radial-gradient(
      circle,
      rgba(61,130,255,.14),
      transparent 70%
    );
}


.work-orb-violet{
  background:
    radial-gradient(
      circle,
      rgba(117,96,255,.14),
      transparent 70%
    );
}


.work-orb-cyan{
  background:
    radial-gradient(
      circle,
      rgba(40,230,255,.14),
      transparent 70%
    );
}


.work-card > *{
  position:relative;
}


.work-card > span{

  color:#8096ab;

  font-size:9px;

  font-weight:800;

  letter-spacing:2px;
}


.work-card h3{

  margin-top:8px;

  font-family:
    "Space Grotesk",
    sans-serif;

  color:#f3fbff;
}


.work-main h3{
  font-size:56px;
}


.work-card:not(.work-main) h3{
  font-size:38px;
}


.work-card p{

  max-width:300px;

  color:#91a4b6;

  font-size:12px;

  line-height:1.75;
}


.work-card a{

  display:inline-block;

  margin-top:18px;

  color:#b8f7ff;

  font-size:10px;

  font-weight:800;
}


.concept-note{

  margin-top:13px;

  color:#6e8297;

  font-size:10px;
}


/* PROCESS */

.process-grid{

  display:grid;

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


.process-item{

  padding:
    25px 20px;

  border-top:
    1px solid
    rgba(130,180,225,.14);

  border-right:
    1px solid
    rgba(130,180,225,.07);
}


.process-item:last-child{
  border-right:none;
}


.process-item > span{

  color:
    var(--cyan);

  font-size:10px;

  font-weight:800;
}


.process-item h3{

  margin-top:15px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:19px;

  color:#f0f8ff;
}


.process-item p{

  margin-top:8px;

  color:#8da0b3;

  font-size:12px;

  line-height:1.7;
}


/* PRICING */

.pricing-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:16px;
}


.pricing-card{

  position:relative;

  padding:30px;

  border:
    1px solid
    rgba(130,180,225,.10);

  border-radius:18px;

  background:
    rgba(6,14,25,.80);
}


.pricing-card > span{

  color:#7890a5;

  font-size:9px;

  font-weight:800;

  letter-spacing:2px;
}


.pricing-card h3{

  margin-top:15px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:36px;

  color:#f5fbff;
}


.pricing-card > p{

  margin-top:3px;

  color:#8ba0b3;

  font-size:12px;
}


.pricing-card ul{

  list-style:none;

  margin:24px 0;
}


.pricing-card li{

  margin:10px 0;

  color:#b1c0ce;

  font-size:12px;
}


.pricing-card li::before{

  content:"✓";

  margin-right:8px;

  color:
    var(--cyan);
}


.pricing-featured{

  border-color:
    rgba(40,230,255,.26);

  box-shadow:
    0 22px 65px
    rgba(40,230,255,.045);
}


.popular-label{

  position:absolute;

  top:14px;
  right:14px;

  padding:5px 8px;

  border-radius:999px;

  color:#03111b;

  background:
    var(--cyan);

  font-size:8px;

  font-weight:800;
}


/* CONTACT */

.contact-box{

  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:40px;

  padding:42px;

  border:
    1px solid
    rgba(130,180,225,.13);

  border-radius:22px;

  background:

    radial-gradient(
      circle at 0 40%,
      rgba(40,230,255,.065),
      transparent 31%
    ),

    rgba(6,14,24,.82);
}


.contact-content h2{

  margin-top:11px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(42px,4.8vw,64px);

  line-height:.93;

  letter-spacing:-3px;

  color:#f7fcff;
}


.contact-content > p{

  margin-top:17px;

  color:#93a7ba;

  font-size:14px;

  line-height:1.8;
}


.contact-details{

  display:grid;

  gap:17px;

  margin-top:30px;
}


.contact-details span{

  display:block;

  color:#6f879d;

  font-size:8px;

  letter-spacing:2px;

  font-weight:800;
}


.contact-details strong{

  display:block;

  margin-top:4px;

  color:#eaf7ff;

  font-size:13px;
}


#contactForm{

  display:grid;

  gap:12px;
}


#contactForm input,
#contactForm textarea{

  width:100%;

  padding:14px;

  border:
    1px solid
    rgba(130,180,225,.11);

  border-radius:10px;

  background:
    rgba(2,7,14,.76);

  color:#ffffff;

  outline:none;

  font-size:13px;
}


#contactForm input::placeholder,
#contactForm textarea::placeholder{
  color:#6f8499;
}


#contactForm input:focus,
#contactForm textarea:focus{

  border-color:
    rgba(40,230,255,.36);

  box-shadow:
    0 0 0 3px
    rgba(40,230,255,.045);
}


#contactForm textarea{

  min-height:155px;

  resize:vertical;
}


.form-message{

  min-height:18px;

  color:
    #a6f5ff;

  font-size:11px;

  line-height:1.6;
}


/* WHATSAPP */

.whatsapp-button{

  position:fixed;

  right:20px;
  bottom:20px;

  z-index:9000;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    9px 12px 9px 9px;

  border:
    1px solid
    rgba(34,197,94,.22);

  border-radius:14px;

  background:
    rgba(4,12,10,.94);

  backdrop-filter:blur(14px);

  box-shadow:
    0 16px 42px
    rgba(0,0,0,.36);
}


.whatsapp-icon{

  width:39px;
  height:39px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:#22c55e;

  color:#ffffff;
}


.whatsapp-text strong{
  display:block;
  font-size:9px;
}


.whatsapp-text small{

  display:block;

  margin-top:2px;

  color:#82b28f;

  font-size:8px;
}


/* FOOTER */

.footer{

  width:min(1220px,90%);

  margin:auto;

  padding:34px 0;

  display:grid;

  grid-template-columns:
    1.2fr 1fr 1fr;

  gap:20px;

  align-items:end;

  border-top:
    1px solid
    rgba(130,180,225,.08);
}


.footer p{

  margin-top:9px;

  color:#71859a;

  font-size:11px;
}


.footer-links{

  display:flex;

  gap:16px;
}


.footer-links a{

  color:#8499ad;

  font-size:10px;
}


.footer-copy{

  text-align:right;

  color:#71859a;

  font-size:10px;
}


/* =========================
   TABLET
========================= */

@media(max-width:1000px){

  .navbar{
    flex-wrap:wrap;
  }


  .nav-links{

    width:100%;

    order:3;

    justify-content:center;

    overflow-x:auto;
  }


  .hero{

    grid-template-columns:1fr;

    text-align:center;

    padding-top:46px;
  }


  .hero-content{
    margin:auto;
  }


  .hero-kicker{
    justify-content:center;
  }


  .hero-text{

    margin-left:auto;
    margin-right:auto;
  }


  .hero-actions,
  .hero-stats{
    justify-content:center;
  }


  .hero-visual{

    width:
      min(600px,88vw);

    margin:
      5px auto 0;
  }


  .services-layout{
    grid-template-columns:1fr;
  }


  .featured-service{
    min-height:360px;
  }


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


  .work-main{

    grid-column:
      1 / -1;

    min-height:360px;
  }


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


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


  .pricing-card:last-child{
    grid-column:1 / -1;
  }


  .contact-box{
    grid-template-columns:1fr;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .navbar{

    width:94%;

    padding:
      11px 13px;
  }


  .brand-name{
    font-size:20px;
  }


  .nav-links{

    justify-content:flex-start;

    gap:0;
  }


  .nav-links a{

    padding:
      6px 7px;

    font-size:10px;

    white-space:nowrap;
  }


  .nav-button{
    display:none;
  }


  .hero{

    width:94%;

    min-height:auto;

    padding:
      50px 0 58px;
  }


  .hero-title{

    font-size:
      clamp(53px,15.5vw,82px);

    line-height:.86;

    letter-spacing:-4px;
  }


  .hero-text{

    font-size:14px;

    line-height:1.78;
  }


  .hero-actions{
    flex-direction:column;
  }


  .hero-actions .button{
    width:100%;
  }


  .hero-stats{
    gap:24px;
  }


  .stat strong{
    font-size:24px;
  }


  .hero-visual{

    width:
      min(100%,430px);

    aspect-ratio:
      1 / 1.08;

    margin-top:10px;
  }


  .monolith{

    width:49%;

    height:67%;
  }


  .visual-label{
    transform:scale(.84);
  }


  .label-left{
    left:1%;
  }


  .label-right{
    right:1%;
  }


  .service-strip{
    justify-content:center;
  }


  .section{
    padding:82px 0;
  }


  .section-heading h2{

    font-size:
      clamp(39px,11vw,57px);

    letter-spacing:-3px;
  }


  .section-heading p{
    font-size:14px;
  }


  .featured-service{
    min-height:350px;
  }


  .service-row{

    grid-template-columns:
      42px 1fr 22px;

    padding:
      16px 14px;
  }


  .service-row h3{
    font-size:15px;
  }


  .statement-section{

    width:94%;

    padding:75px 0;
  }


  .statement-content h2{

    font-size:
      clamp(44px,12vw,72px);

    letter-spacing:-4px;
  }


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


  .work-main{
    min-height:330px;
  }


  .work-card:not(.work-main){
    min-height:280px;
  }


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


  .process-item{
    border-right:none;
  }


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


  .pricing-card:last-child{
    grid-column:auto;
  }


  .contact-box{
    padding:24px;
  }


  .contact-content h2{

    font-size:
      clamp(40px,11vw,58px);
  }


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


  .footer-copy{
    text-align:left;
  }


  .whatsapp-button{

    width:56px;
    height:56px;

    padding:8px;

    border-radius:50%;

    justify-content:center;
  }


  .whatsapp-text{
    display:none;
  }
}


@media(max-width:390px){

  .hero-title{

    font-size:51px;

    letter-spacing:-3px;
  }


  .hero-text{
    font-size:13px;
  }


  .hero-stats{
    gap:18px;
  }


  .hero-visual{
    min-height:390px;
  }


  .visual-label{
    transform:
      scale(.72);
  }
}
/* =====================================================
   WETECH — BRIGHT UI TEXT POLISH
===================================================== */

/* NAVIGATION */
.nav-links a{
  color:#ffffff !important;
  font-weight:600;
  opacity:1;
}

.nav-links a:hover{
  color:#ffffff !important;
  text-shadow:
    0 0 12px rgba(40,230,255,.32);
}


/* BRAND */
.brand-name{
  color:#ffffff !important;
}

.brand-name span{
  color:#38e8ff !important;
}


/* SECTION LABELS */
.section-number{
  color:#ffffff !important;
  opacity:.92;
}


/* SERVICE STRIP */
.service-strip span{
  color:#ffffff !important;
  opacity:.88;
}


/* ALL SECTION HEADINGS */
.section-heading h2{
  color:#ffffff !important;

  text-shadow:
    0 0 18px rgba(255,255,255,.035);
}


/* SECTION DESCRIPTIONS */
.section-heading p{
  color:#d4e0eb !important;
}


/* SERVICE TITLES */
.featured-service h3,
.service-row h3{
  color:#ffffff !important;
}


/* SERVICE BODY TEXT */
.featured-service p,
.service-row p{
  color:#c4d2df !important;
}


/* SERVICE NUMBERS */
.service-index,
.service-row-number{
  color:#b9cde0 !important;
}


/* SERVICE LINKS */
.featured-service a,
.service-row > a{
  color:#63edff !important;
}


/* STATEMENT */
.statement-content h2{
  color:#ffffff !important;
}

.statement-content p{
  color:#c9d7e4 !important;
}


/* WORK */
.work-card > span{
  color:#c8d8e6 !important;
}

.work-card h3{
  color:#ffffff !important;
}

.work-card p{
  color:#c0cfdd !important;
}

.work-card a{
  color:#69edff !important;
}

.concept-note{
  color:#9bb0c2 !important;
}


/* PROCESS */
.process-item > span{
  color:#5ceaff !important;
}

.process-item h3{
  color:#ffffff !important;
}

.process-item p{
  color:#c4d2df !important;
}


/* PRICING */
.pricing-card > span{
  color:#c8d8e6 !important;
}

.pricing-card h3{
  color:#ffffff !important;
}

.pricing-card > p{
  color:#c2d0dc !important;
}

.pricing-card li{
  color:#d0dce7 !important;
}

.pricing-card li::before{
  color:#45eaff !important;
}


/* CONTACT */
.contact-content h2{
  color:#ffffff !important;
}

.contact-content > p{
  color:#ccd9e4 !important;
}

.contact-details span{
  color:#a8bed1 !important;
}

.contact-details strong{
  color:#ffffff !important;
}


/* FORM */
#contactForm input,
#contactForm textarea{
  color:#ffffff !important;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder{
  color:#8ea4b8 !important;
}


/* FOOTER */
.footer p{
  color:#a8bacb !important;
}

.footer-links a{
  color:#d4e0eb !important;
}

.footer-links a:hover{
  color:#ffffff !important;
}

.footer-copy{
  color:#a1b4c6 !important;
}


/* HERO STATS */
.stat strong{
  color:#ffffff !important;
}

.stat span{
  color:#b1c5d7 !important;
}


/* VISUAL LABELS */
.visual-label span{
  color:#a9c0d3 !important;
}

.visual-label strong{
  color:#eaffff !important;
}


/* MOBILE — KEEP TEXT BRIGHT */
@media(max-width:700px){

  .nav-links a{
    color:#ffffff !important;
  }

  .section-heading p,
  .featured-service p,
  .service-row p,
  .statement-content p,
  .work-card p,
  .process-item p,
  .pricing-card > p,
  .pricing-card li,
  .contact-content > p{
    color:#cbd9e5 !important;
  }
}
/* =========================================================
   WETECH — FINAL MOBILE RESPONSIVE POLISH
========================================================= */

/* tablet / smaller laptops */
@media (max-width:1100px){

  .hero{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .hero-content{
    width:min(820px,100%) !important;
    margin:auto !important;
  }

  .hero-kicker{
    justify-content:center !important;
  }

  .hero-text{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-actions,
  .hero-stats{
    justify-content:center !important;
  }

  .hero-visual{
    width:min(620px,88vw) !important;
    margin:0 auto !important;
  }

  .services-layout,
  .contact-box{
    grid-template-columns:1fr !important;
  }

  .work-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .work-main{
    grid-column:1 / -1 !important;
  }

  .process-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .pricing-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .pricing-card:last-child{
    grid-column:1 / -1 !important;
  }
}


/* phones */
@media (max-width:700px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .navbar{
    width:94% !important;
    margin:10px auto !important;
    padding:10px 12px !important;
  }

  .brand-mark{
    width:34px !important;
    height:34px !important;
  }

  .brand-name{
    font-size:19px !important;
  }

  .nav-links{
    width:100% !important;
    order:3 !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .nav-links::-webkit-scrollbar{
    display:none !important;
  }

  .nav-links a{
    flex:0 0 auto !important;
    padding:7px 8px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }

  .nav-button{
    display:none !important;
  }


  /* HERO */

  .hero{
    width:94% !important;
    min-height:auto !important;
    padding:42px 0 55px !important;
  }

  .hero-content{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
  }

  .hero-kicker{
    justify-content:center !important;
    flex-wrap:wrap !important;
    font-size:8px !important;
    letter-spacing:2.2px !important;
  }

  .hero-title{
    font-size:
      clamp(52px,15vw,82px) !important;
    line-height:.87 !important;
    letter-spacing:-3.8px !important;
    word-break:normal !important;
  }

  .hero-title span{
    margin-top:4px !important;
  }

  .hero-text{
    max-width:520px !important;
    margin:22px auto 0 !important;
    font-size:14px !important;
    line-height:1.75 !important;
  }

  .hero-actions{
    width:100% !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-top:24px !important;
  }

  .hero-actions .button{
    width:100% !important;
  }

  .hero-stats{
    justify-content:center !important;
    gap:22px !important;
    margin-top:32px !important;
  }

  .stat strong{
    font-size:23px !important;
  }

  .stat span{
    font-size:9px !important;
  }


  /* HERO VISUAL */

  .hero-visual{
    width:100% !important;
    max-width:430px !important;
    aspect-ratio:1 / 1.08 !important;
    margin:5px auto 0 !important;
  }

  .monolith{
    width:49% !important;
    height:67% !important;
  }

  .visual-label{
    transform:scale(.78) !important;
  }

  .label-left{
    left:0 !important;
  }

  .label-right{
    right:0 !important;
  }


  /* SERVICE STRIP */

  .service-strip{
    width:94% !important;
    justify-content:center !important;
    gap:12px 18px !important;
    padding:15px 13px !important;
  }

  .service-strip span{
    font-size:8px !important;
  }


  /* SECTIONS */

  .section{
    width:94% !important;
    padding:78px 0 !important;
  }

  .section-heading{
    margin-bottom:34px !important;
  }

  .section-number{
    font-size:8px !important;
  }

  .section-heading h2{
    font-size:
      clamp(38px,11vw,56px) !important;
    line-height:.95 !important;
    letter-spacing:-2.8px !important;
  }

  .section-heading p{
    margin-top:14px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }


  /* SERVICES */

  .featured-service{
    min-height:340px !important;
    padding:25px !important;
  }

  .service-icon{
    margin-top:45px !important;
  }

  .featured-service h3{
    font-size:27px !important;
  }

  .featured-service p{
    font-size:13px !important;
  }

  .service-row{
    grid-template-columns:40px 1fr 20px !important;
    gap:10px !important;
    padding:15px 13px !important;
  }

  .service-row h3{
    font-size:15px !important;
  }

  .service-row p{
    font-size:10px !important;
  }


  /* STATEMENT */

  .statement-section{
    width:94% !important;
    padding:70px 0 !important;
  }

  .statement-content h2{
    font-size:
      clamp(44px,12vw,72px) !important;
    letter-spacing:-3.5px !important;
  }

  .statement-content p{
    font-size:13px !important;
    line-height:1.75 !important;
  }


  /* WORK */

  .work-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .work-main{
    grid-column:auto !important;
    min-height:320px !important;
  }

  .work-card{
    min-height:275px !important;
    padding:24px !important;
  }

  .work-main h3{
    font-size:48px !important;
  }

  .work-card:not(.work-main) h3{
    font-size:34px !important;
  }


  /* PROCESS */

  .process-grid{
    grid-template-columns:1fr !important;
  }

  .process-item{
    padding:20px 0 !important;
    border-right:none !important;
  }


  /* PRICING */

  .pricing-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .pricing-card:last-child{
    grid-column:auto !important;
  }

  .pricing-card{
    padding:25px !important;
  }

  .pricing-card h3{
    font-size:33px !important;
  }


  /* CONTACT */

  .contact-box{
    grid-template-columns:1fr !important;
    gap:25px !important;
    padding:22px !important;
  }

  .contact-content h2{
    font-size:
      clamp(38px,11vw,56px) !important;
    letter-spacing:-2.6px !important;
  }

  .contact-content > p{
    font-size:13px !important;
  }

  #contactForm input,
  #contactForm textarea{
    font-size:13px !important;
  }


  /* FOOTER */

  .footer{
    width:94% !important;
    grid-template-columns:1fr !important;
    gap:15px !important;
  }

  .footer-links{
    flex-wrap:wrap !important;
    gap:12px !important;
  }

  .footer-copy{
    text-align:left !important;
  }


  /* WHATSAPP */

  .whatsapp-button{
    right:15px !important;
    bottom:15px !important;
    width:56px !important;
    height:56px !important;
    padding:8px !important;
    border-radius:50% !important;
    justify-content:center !important;
  }

  .whatsapp-text{
    display:none !important;
  }

}


/* very small phones */
@media (max-width:390px){

  .hero{
    padding-top:36px !important;
  }

  .hero-title{
    font-size:50px !important;
    letter-spacing:-3px !important;
  }

  .hero-text{
    font-size:13px !important;
  }

  .hero-stats{
    gap:16px !important;
  }

  .hero-visual{
    min-height:390px !important;
  }

  .monolith{
    width:50% !important;
  }

  .visual-label{
    transform:scale(.68) !important;
  }

  .section{
    padding:68px 0 !important;
  }

  .section-heading h2{
    font-size:39px !important;
  }

}
/* =========================================================
   WETECH — SECTION POLISH V1
   Services / Work / Process / Pricing / Contact / Footer
========================================================= */

/* =========================
   GLOBAL SECTION RHYTHM
========================= */

.section{
  position:relative;
}

.section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(54,230,255,.16),
      rgba(118,93,255,.10),
      transparent
    );

  opacity:.75;
}

.section-heading{
  position:relative;
}

.section-heading::after{
  content:"";
  display:block;

  width:70px;
  height:2px;

  margin-top:20px;

  background:
    linear-gradient(
      90deg,
      #35e7ff,
      #4c87ff,
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(54,230,255,.24);
}


/* =========================
   SERVICES
========================= */

.services-layout{
  align-items:stretch;
}

.featured-service{
  min-height:520px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(54,230,255,.08),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      rgba(11,25,43,.96),
      rgba(4,12,22,.92)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),

    0 22px 55px
    rgba(0,0,0,.18);
}

.featured-service::after{
  content:"01";

  position:absolute;

  right:24px;
  bottom:18px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:88px;
  font-weight:700;

  color:rgba(94,150,205,.045);

  line-height:1;

  pointer-events:none;
}

.service-icon{
  position:relative;

  box-shadow:
    inset 0 0 18px
    rgba(54,230,255,.05),

    0 0 25px
    rgba(54,230,255,.05);
}

.service-icon::after{
  content:"";

  position:absolute;
  inset:-7px;

  border-radius:18px;

  border:1px solid
    rgba(54,230,255,.06);

  animation:
    serviceIconPulse
    3.2s
    ease-in-out
    infinite;
}

@keyframes serviceIconPulse{
  0%,100%{
    transform:scale(.96);
    opacity:.35;
  }

  50%{
    transform:scale(1.05);
    opacity:.9;
  }
}

.service-row{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      100deg,
      rgba(8,19,33,.80),
      rgba(5,13,23,.64)
    );
}

.service-row::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:2px;

  background:
    linear-gradient(
      180deg,
      transparent,
      #35e7ff,
      transparent
    );

  opacity:0;

  transition:
    opacity .25s ease;
}

.service-row:hover::before{
  opacity:1;
}

.service-row > a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:
    rgba(54,230,255,.045);

  border:1px solid
    rgba(54,230,255,.10);
}


/* =========================
   MINDSET / STATEMENT
========================= */

.statement-section{
  position:relative;
}

.statement-section::before{
  content:"";
  position:absolute;

  left:50%;
  top:50%;

  width:min(720px,90vw);
  height:360px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(54,230,255,.055),
      rgba(78,131,255,.025) 38%,
      transparent 72%
    );

  filter:blur(18px);

  pointer-events:none;
}

.statement-content{
  position:relative;
}

.statement-content h2{
  text-shadow:
    0 0 24px
    rgba(255,255,255,.025);
}

.statement-content h2 span{
  text-shadow:
    0 0 28px
    rgba(54,230,255,.10);
}


/* =========================
   WORK
========================= */

.work-grid{
  perspective:1200px;
}

.work-card{
  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018),

    0 18px 48px
    rgba(0,0,0,.18);
}

.work-card::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      125deg,
      transparent 30%,
      rgba(255,255,255,.035) 49%,
      transparent 68%
    );

  background-size:230% 100%;

  transform:
    translateX(-100%);

  transition:
    transform .9s ease;

  pointer-events:none;
}

.work-card:hover::after{
  transform:
    translateX(100%);
}

.work-main{
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(59,130,255,.075),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0c1829,
      #050c16
    );
}

.work-card h3{
  letter-spacing:-1px;
}

.work-card a{
  position:relative;
  z-index:2;
}


/* =========================
   PROCESS
========================= */

.process-grid{
  position:relative;

  border:
    1px solid
    rgba(130,180,225,.08);

  border-radius:18px;

  overflow:hidden;

  background:
    rgba(5,13,23,.45);
}

.process-item{
  position:relative;

  min-height:190px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.008),
      transparent
    );

  transition:
    background .25s ease,
    transform .25s ease;
}

.process-item:hover{
  background:
    rgba(54,230,255,.025);

  transform:
    translateY(-3px);
}

.process-item > span{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:31px;
  height:31px;

  border-radius:50%;

  border:1px solid
    rgba(54,230,255,.15);

  background:
    rgba(54,230,255,.035);

  box-shadow:
    inset 0 0 12px
    rgba(54,230,255,.04);
}

.process-item h3{
  margin-top:18px;
}


/* =========================
   PRICING
========================= */

.pricing-card{
  min-height:430px;

  display:flex;
  flex-direction:column;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015),

    0 20px 50px
    rgba(0,0,0,.16);
}

.pricing-card ul{
  flex:1;
}

.pricing-card .button{
  width:100%;
}

.pricing-featured{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(54,230,255,.08),
      transparent 34%
    ),
    rgba(6,17,29,.88);
}

.pricing-featured::before{
  content:"";

  position:absolute;
  left:16px;
  right:16px;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #35e7ff,
      transparent
    );

  box-shadow:
    0 0 16px
    rgba(54,230,255,.34);
}

.popular-label{
  box-shadow:
    0 0 18px
    rgba(40,230,255,.18);
}
```javascript
/* ==========================================================
   CONTACT FORM — WHATSAPP ENQUIRY
   ========================================================== */

const contactForm = document.getElementById("contactForm");
const formMessage = document.getElementById("formMessage");
const sendButton = document.getElementById("sendEnquiryBtn");

if (contactForm) {

  const showFormMessage = (message, type) => {

    if (!formMessage) return;

    formMessage.textContent = message;
    formMessage.dataset.type = type || "info";
    formMessage.style.opacity = "1";

  };


  const clearFormMessage = () => {

    if (!formMessage) return;

    formMessage.textContent = "";
    formMessage.dataset.type = "";
    formMessage.style.opacity = "0";

  };


  contactForm.addEventListener("submit", (event) => {

    event.preventDefault();

    clearFormMessage();


    const name =
      String(contactForm.elements.name?.value || "").trim();

    const email =
      String(contactForm.elements.email?.value || "").trim();

    const phone =
      String(contactForm.elements.phone?.value || "").trim();

    const service =
      String(contactForm.elements.service?.value || "").trim();

    const message =
      String(contactForm.elements.message?.value || "").trim();


    /* ------------------------------------------------------
       VALIDATION
    ------------------------------------------------------ */

    if (!name) {

      showFormMessage(
        "Please enter your name.",
        "error"
      );

      contactForm.elements.name.focus();

      return;

    }


    if (!email) {

      showFormMessage(
        "Please enter your email.",
        "error"
      );

      contactForm.elements.email.focus();

      return;

    }


    const emailPattern =
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/;


    if (!emailPattern.test(email)) {

      showFormMessage(
        "Please enter a valid email address.",
        "error"
      );

      contactForm.elements.email.focus();

      return;

    }


    if (!service) {

      showFormMessage(
        "Please select a service.",
        "error"
      );

      contactForm.elements.service.focus();

      return;

    }


    if (!message) {

      showFormMessage(
        "Please tell us about your project.",
        "error"
      );

      contactForm.elements.message.focus();

      return;

    }


    /* ------------------------------------------------------
       WHATSAPP MESSAGE
    ------------------------------------------------------ */

    const enquiryMessage = [
      "🚀 *NEW WETECH ENQUIRY*",
      "",
      "━━━━━━━━━━━━━━━━━━",
      "",
      `👤 *Name:* ${name}`,
      `📧 *Email:* ${email}`,
      `📱 *Phone / WhatsApp:* ${phone || "Not provided"}`,
      `💼 *Service:* ${service}`,
      "",
      "📝 *Project Details:*",
      message,
      "",
      "━━━━━━━━━━━━━━━━━━",
      "",
      "🌐 *Source:* Wetech Website"
    ].join("\n");


    const whatsappURL =
      `https://wa.me/918445209063?text=${encodeURIComponent(
        enquiryMessage
      )}`;


    /* ------------------------------------------------------
       BUTTON STATE
    ------------------------------------------------------ */

    const originalButtonHTML =
      sendButton
        ? sendButton.innerHTML
        : "";


    if (sendButton) {

      sendButton.disabled = true;

      sendButton.innerHTML =
        `Opening WhatsApp <span>↗</span>`;

    }


    /* ------------------------------------------------------
       OPEN WHATSAPP
    ------------------------------------------------------ */

    const whatsappWindow =
      window.open(
        whatsappURL,
        "_blank"
      );


    /*
     * Confirmation is shown regardless of whether
     * the browser blocks the new tab.
     */

    showFormMessage(
      "✓ Enquiry ready — WhatsApp opened.",
      "success"
    );


    /* ------------------------------------------------------
       RESTORE BUTTON
    ------------------------------------------------------ */

    window.setTimeout(() => {

      if (sendButton) {

        sendButton.disabled = false;

        sendButton.innerHTML =
          originalButtonHTML;

      }

    }, 1200);


  });

}
```

/* =========================
   WHATSAPP
========================= */

.whatsapp-button{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.whatsapp-button:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(34,197,94,.38);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.42);
}


/* =========================
   FOOTER
========================= */

.footer{
  position:relative;

  padding-top:40px;
}

.footer-links a{
  position:relative;

  transition:
    color .22s ease;
}

.footer-links a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0;
  height:1px;

  background:
    #36e7ff;

  box-shadow:
    0 0 8px
    rgba(54,230,255,.30);

  transition:
    width .22s ease;
}

.footer-links a:hover::after{
  width:100%;
}


/* =========================
   RESPONSIVE SECTION POLISH
========================= */

@media(max-width:700px){

  .section::before{
    opacity:.5;
  }

  .section-heading::after{
    width:55px;
    margin-top:16px;
  }

  .featured-service{a
    min-height:370px;
  }

  .process-item{
    min-height:150px;
  }

  .pricing-card{
    min-height:400px;
  }

  .contact-details > div{
    padding:11px 12px;
  }

}
```css
/* ============================================================
   WETECH — PERFORMANCE + CINEMATIC ANIMATION UPGRADE
   ============================================================ */

/* ------------------------------------------------------------
   1. GPU / RENDERING OPTIMIZATION
------------------------------------------------------------ */

#backgroundCanvas,
.ambient,
.background-grid,
.hero-visual,
.visual-glow,
.visual-floor,
.monolith,
.monolith-glass,
.energy-stream,
.energy-core,
.energy-pulse,
.floating-particle,
.energy-particle,
.visual-label,
.featured-service,
.service-row,
.work-card,
.process-item,
.pricing-card,
.button,
.nav-button,
.whatsapp-button {
  will-change: transform;
}


/* ------------------------------------------------------------
   2. SMOOTH GLOBAL INTERACTION
------------------------------------------------------------ */

a,
button,
.button,
.nav-button,
.featured-service,
.service-row,
.work-card,
.process-item,
.pricing-card,
.whatsapp-button {
  -webkit-tap-highlight-color: transparent;
}


button,
.button,
.nav-button,
.whatsapp-button {
  cursor: pointer;
}


/* ------------------------------------------------------------
   3. HERO PERFORMANCE
------------------------------------------------------------ */

.hero-content,
.hero-visual {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.hero-content {
  transform: translateZ(0);
}


.hero-visual {
  transform: translateZ(0);
}


/* ------------------------------------------------------------
   4. HERO TITLE — LIGHT CINEMATIC SHIMMER
------------------------------------------------------------ */

.hero-title span {
  background-size: 240% 100%;

  animation:
    titleFlow 8s
    cubic-bezier(.45,0,.55,1)
    infinite;
}


/* ------------------------------------------------------------
   5. HERO BUTTON POLISH
------------------------------------------------------------ */

.button,
.nav-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.button::before,
.nav-button::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -120%;

  width: 70%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transform: skewX(-18deg);

  transition:
    left .7s
    cubic-bezier(.16,1,.3,1);

  pointer-events: none;

  z-index: -1;
}


.button:hover::before,
.nav-button:hover::before {
  left: 150%;
}


.button-primary,
.nav-button {
  box-shadow:
    0 12px 30px
    rgba(40,230,255,.12);
}


.button-primary:hover,
.nav-button:hover {
  box-shadow:
    0 18px 42px
    rgba(40,230,255,.20);
}


/* ------------------------------------------------------------
   6. SERVICE CARD — PREMIUM HOVER
------------------------------------------------------------ */

.featured-service,
.service-row {
  transform:
    translateZ(0);

  transition:
    transform .35s
      cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


.featured-service:hover {
  transform:
    translateY(-7px)
    translateZ(0);
}


.service-row:hover {
  transform:
    translateX(5px)
    translateZ(0);
}


.featured-service::after {
  transition:
    opacity .35s ease,
    transform .6s
      cubic-bezier(.16,1,.3,1);
}


.featured-service:hover::after {
  opacity: .85;
  transform:
    translate3d(-8px,-8px,0)
    scale(1.04);
}


/* ------------------------------------------------------------
   7. SERVICE ICON — ENERGY PULSE
------------------------------------------------------------ */

.service-icon {
  transform:
    translateZ(0);

  transition:
    transform .35s
      cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;
}


.featured-service:hover .service-icon {
  transform:
    translateY(-3px)
    scale(1.04)
    translateZ(0);

  border-color:
    rgba(40,230,255,.42);

  box-shadow:
    0 0 32px
    rgba(40,230,255,.12);
}


/* ------------------------------------------------------------
   8. WORK CARDS — CINEMATIC LIGHT SWEEP
------------------------------------------------------------ */

.work-card {
  transform:
    translateZ(0);

  transition:
    transform .38s
      cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .38s ease;
}


.work-card:hover {
  transform:
    translateY(-6px)
    translateZ(0);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.28),
    0 0 32px
    rgba(40,230,255,.035);
}


.work-card::after {
  pointer-events: none;

  will-change:
    transform;

  transition:
    transform .9s
      cubic-bezier(.16,1,.3,1);
}


/* ------------------------------------------------------------
   9. PROCESS CARDS
------------------------------------------------------------ */

.process-item {
  transition:
    transform .3s
      cubic-bezier(.16,1,.3,1),
    background .3s ease,
    border-color .3s ease;
}


.process-item:hover {
  transform:
    translateY(-4px)
    translateZ(0);

  background:
    rgba(40,230,255,.025);
}


/* ------------------------------------------------------------
   10. PRICING CARDS
------------------------------------------------------------ */

.pricing-card {
  transform:
    translateZ(0);

  transition:
    transform .38s
      cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .38s ease;
}


.pricing-card:hover {
  transform:
    translateY(-7px)
    translateZ(0);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.30),
    0 0 34px
    rgba(40,230,255,.035);
}


.pricing-featured:hover {
  box-shadow:
    0 28px 70px
    rgba(0,0,0,.34),
    0 0 45px
    rgba(40,230,255,.08);
}


/* ------------------------------------------------------------
   11. NAVBAR
------------------------------------------------------------ */

.navbar {
  transform:
    translateZ(0);

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}


.navbar:hover {
  border-color:
    rgba(40,230,255,.18);

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.35),
    0 0 30px
    rgba(40,230,255,.025);
}


.nav-links a {
  position: relative;

  transition:
    color .22s ease,
    background .22s ease;
}


.nav-links a::after {
  content: "";

  position: absolute;

  left: 11px;
  right: 11px;

  bottom: 3px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan),
      transparent
    );

  transform:
    scaleX(0);

  transform-origin:
    center;

  opacity: 0;

  transition:
    transform .25s ease,
    opacity .25s ease;
}


.nav-links a:hover::after {
  transform:
    scaleX(1);

  opacity: .8;
}


/* ------------------------------------------------------------
   12. ENERGY CORE — MORE CINEMATIC
------------------------------------------------------------ */

.energy-core {
  will-change:
    transform,
    opacity;

  filter:
    blur(3px);

  animation:
    corePulse 3.4s
    cubic-bezier(.45,0,.55,1)
    infinite;
}


.energy-pulse {
  will-change:
    transform,
    opacity;
}


.energy-stream {
  will-change:
    transform;

  backface-visibility:
    hidden;
}


/* ------------------------------------------------------------
   13. VISUAL LABELS
------------------------------------------------------------ */

.visual-label {
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}


.visual-label:hover {
  border-color:
    rgba(40,230,255,.30);

  background:
    rgba(3,10,19,.88);

  box-shadow:
    0 18px 42px
    rgba(0,0,0,.34),
    0 0 24px
    rgba(40,230,255,.045);
}


/* ------------------------------------------------------------
   14. CONTACT FORM — PREMIUM INPUTS
------------------------------------------------------------ */

#contactForm input,
#contactForm textarea {
  width: 100%;

  outline: none;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}


#contactForm input:focus,
#contactForm textarea:focus {
  border-color:
    rgba(40,230,255,.42) !important;

  background:
    rgba(40,230,255,.025);

  box-shadow:
    0 0 0 3px
    rgba(40,230,255,.045),
    0 12px 30px
    rgba(0,0,0,.16);

  transform:
    translateY(-1px);
}


#contactForm textarea {
  min-height: 150px;

  resize: vertical;
}


/* ------------------------------------------------------------
   15. WHATSAPP FORM MESSAGE
------------------------------------------------------------ */

#formMsg,
#formMessage {
  min-height: 22px;

  margin-top: 12px;

  color:
    #9defff;

  font-size: 12px;

  line-height: 1.6;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


/* ------------------------------------------------------------
   16. NEW WHATSAPP BUTTON / FORM BUTTON COMPATIBILITY
------------------------------------------------------------ */

#sendEnquiryBtn,
.btn,
.btn.primary,
.whatsapp {
  min-height: 50px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0 20px;

  border-radius: 10px;

  border:
    1px solid
    rgba(40,230,255,.20);

  color:
    #03111b;

  background:
    linear-gradient(
      135deg,
      #c4fcff,
      #30e5ff,
      #4383ff
    );

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .25s
      cubic-bezier(.16,1,.3,1),
    box-shadow .25s ease,
    border-color .25s ease,
    filter .25s ease;
}


#sendEnquiryBtn:hover,
.btn.primary:hover,
.whatsapp:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 42px
    rgba(40,230,255,.20);

  filter:
    brightness(1.04);
}


#sendEnquiryBtn:active,
.btn.primary:active,
.whatsapp:active {
  transform:
    translateY(-1px);
}


#sendEnquiryBtn:disabled {
  cursor:
    wait;

  opacity:
    .7;

  transform:
    none;
}


/* ------------------------------------------------------------
   17. SMALL CONTACT TEXT
------------------------------------------------------------ */

.small {
  color:
    #8ea4b8;

  font-size:
    11px;

  line-height:
    1.7;
}


/* ------------------------------------------------------------
   18. SCROLL REVEAL
   Used by the optimized script.js
------------------------------------------------------------ */

.wetech-reveal {
  opacity: 0;

  transform:
    translate3d(0,24px,0);

  transition:
    opacity .72s
      cubic-bezier(.16,1,.3,1)
      var(--reveal-delay,0ms),
    transform .72s
      cubic-bezier(.16,1,.3,1)
      var(--reveal-delay,0ms);

  will-change:
    opacity,
    transform;
}


.wetech-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0,0,0);
}


/* ------------------------------------------------------------
   19. SECTION HEADING REVEAL
------------------------------------------------------------ */

.section-heading.wetech-reveal {
  transform:
    translate3d(0,18px,0);
}


/* ------------------------------------------------------------
   20. MOBILE PERFORMANCE
------------------------------------------------------------ */

@media (max-width: 700px) {

  /*
   * Avoid expensive hover-style motion on touch devices.
   */

  .featured-service:hover,
  .service-row:hover,
  .work-card:hover,
  .process-item:hover,
  .pricing-card:hover,
  .button:hover,
  .nav-button:hover {
    transform:
      none;
  }


  .featured-service,
  .service-row,
  .work-card,
  .process-item,
  .pricing-card {
    will-change:
      auto;
  }


  /*
   * Smaller blur = considerably cheaper on phones.
   */

  .ambient {
    filter:
      blur(65px);
  }


  .visual-glow {
    filter:
      blur(18px);
  }


  .visual-floor {
    filter:
      blur(8px);
  }


  .energy-stream {
    filter:
      blur(1px);
  }


  .energy-core {
    filter:
      blur(2px);
  }


  /*
   * Reduce visual workload.
   */

  .floating-particle,
  .energy-particle {
    box-shadow:
      0 0 8px
      rgba(40,230,255,.65);
  }


  .visual-label {
    backdrop-filter:
      blur(9px);
  }


  .navbar {
    backdrop-filter:
      blur(14px);
  }


  #sendEnquiryBtn,
  .btn.primary,
  .whatsapp {
    width: 100%;
  }


  .wetech-reveal {
    transform:
      translate3d(0,16px,0);

    transition-duration:
      .55s;
  }

}


/* ------------------------------------------------------------
   21. VERY SMALL PHONES
------------------------------------------------------------ */

@media (max-width: 390px) {

  .ambient-blue {
    width: 340px;
    height: 340px;
  }


  .ambient-cyan {
    width: 300px;
    height: 300px;
  }


  .ambient-violet {
    width: 260px;
    height: 260px;
  }


  .visual-glow {
    opacity:
      .75;
  }


  .energy-stream {
    opacity:
      .85;
  }

}


/* ------------------------------------------------------------
   22. REDUCED MOTION ACCESSIBILITY
------------------------------------------------------------ */

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

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .wetech-reveal {
    opacity:
      1 !important;

    transform:
      none !important;
  }


  #backgroundCanvas {
    display:
      none !important;
  }

}


/* ------------------------------------------------------------
   23. HIDDEN TAB / LOW POWER FRIENDLY
------------------------------------------------------------ */

@media (max-width: 900px) {

  .background-grid {
    animation-duration:
      55s;
  }

  .ambient-blue,
  .ambient-cyan,
  .ambient-violet {
    animation-duration:
      26s;
  }

}


/* ------------------------------------------------------------
   24. FINAL GPU HINTS
------------------------------------------------------------ */

.hero-visual,
.monolith,
.visual-glow,
.energy-container,
.energy-stream,
.energy-core,
.energy-pulse,
.work-card::after,
.featured-service::before {
  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


/* ============================================================
   END — WETECH PERFORMANCE + CINEMATIC UPGRADE
   ============================================================ */
```
```css
/* ============================================================
   WETECH — ENQUIRY SELECT / FORM FINAL POLISH
   ============================================================ */

#contactForm input,
#contactForm select,
#contactForm textarea {
  width: 100%;
  box-sizing: border-box;

  color: #ffffff !important;

  background:
    rgba(3, 10, 19, 0.78);

  border:
    1px solid
    rgba(140, 170, 195, 0.16);

  border-radius:
    10px;

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    13px;

  line-height:
    1.5;

  outline:
    none;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}


/* ------------------------------------------------------------
   SELECT
------------------------------------------------------------ */

#contactForm select {
  appearance: none;
  -webkit-appearance: none;

  min-height:
    48px;

  padding:
    0 44px 0 14px;

  cursor:
    pointer;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #8ea4b8 50%
    ),
    linear-gradient(
      135deg,
      #8ea4b8 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 19px) 20px,
    calc(100% - 14px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}


/* ------------------------------------------------------------
   SELECT PLACEHOLDER
------------------------------------------------------------ */

#contactForm select:invalid {
  color:
    #6f8499 !important;
}


#contactForm select option {
  color:
    #ffffff;

  background:
    #07111d;
}


/* ------------------------------------------------------------
   INPUT / SELECT / TEXTAREA FOCUS
------------------------------------------------------------ */

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {

  border-color:
    rgba(40, 230, 255, .42) !important;

  background:
    rgba(40, 230, 255, .025);

  box-shadow:
    0 0 0 3px
    rgba(40, 230, 255, .045),
    0 12px 30px
    rgba(0, 0, 0, .16);

  transform:
    translateY(-1px);
}


/* ------------------------------------------------------------
   INVALID FIELD
------------------------------------------------------------ */

#contactForm input[aria-invalid="true"],
#contactForm select[aria-invalid="true"],
#contactForm textarea[aria-invalid="true"] {

  border-color:
    rgba(255, 100, 120, .55) !important;

  box-shadow:
    0 0 0 3px
    rgba(255, 100, 120, .06);
}


/* ------------------------------------------------------------
   PLACEHOLDERS
------------------------------------------------------------ */

#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color:
    #6f8499;

  opacity:
    1;
}


/* ------------------------------------------------------------
   TEXTAREA
------------------------------------------------------------ */

#contactForm textarea {

  min-height:
    155px;

  padding:
    14px;

  resize:
    vertical;
}


/* ------------------------------------------------------------
   FORM MESSAGE
------------------------------------------------------------ */

#formMessage {

  min-height:
    20px;

  margin:
    2px 0 0;

  font-size:
    11px;

  line-height:
    1.5;

  opacity:
    0;

  transition:
    opacity .25s ease,
    color .25s ease;
}


#formMessage[data-type="error"] {
  color:
    #ff9da9;
}


#formMessage[data-type="success"] {
  color:
    #9defff;
}


#formMessage[data-type="info"] {
  color:
    #8ea4b8;
}


/* ------------------------------------------------------------
   BUTTON DISABLED
------------------------------------------------------------ */

#sendEnquiryBtn:disabled {

  opacity:
    .72;

  cursor:
    wait;

  transform:
    none !important;
}


/* ------------------------------------------------------------
   BUTTON PRESS
------------------------------------------------------------ */

.button.is-pressed,
.nav-button.is-pressed,
.whatsapp-button.is-pressed {

  transform:
    translateY(1px) scale(.985);
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 700px) {

  #contactForm select {

    min-height:
      50px;

    font-size:
      13px;

  }


  #contactForm input,
  #contactForm select,
  #contactForm textarea {

    font-size:
      14px;

  }

}
```
```css
/* ============================================================
   ENQUIRY FORM — SELECT MATCH INPUT STYLE
   ============================================================ */

#contactForm select {
  width: 100%;
  min-height: 48px;

  padding: 0 42px 0 14px;

  box-sizing: border-box;

  appearance: none;
  -webkit-appearance: none;

  border: 1px solid rgba(140, 170, 195, 0.16);
  border-radius: 10px;

  background-color: rgba(3, 10, 19, 0.78);

  color: #ffffff;

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 13px;
  font-weight: 400;

  outline: none;

  cursor: pointer;

  transition:
    border-color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;

  /* Same dropdown arrow, integrated into field */
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #6f8499 50%
    ),
    linear-gradient(
      135deg,
      #6f8499 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}


/* Placeholder = EXACT same muted tone as inputs */

#contactForm select:invalid {
  color: #6f8499 !important;
}


/* Once an actual service is selected = white */

#contactForm select:valid {
  color: #ffffff !important;
}


/* Dropdown options */

#contactForm select option {
  color: #ffffff;
  background: #07111d;
}


/* First placeholder option */

#contactForm select option[value=""] {
  color: #6f8499;
}


/* Focus */

#contactForm select:focus {

  border-color:
    rgba(40, 230, 255, .42);

  background-color:
    rgba(40, 230, 255, .025);

  box-shadow:
    0 0 0 3px rgba(40, 230, 255, .045),
    0 12px 30px rgba(0, 0, 0, .16);

  transform:
    translateY(-1px);

}


/* Invalid */

#contactForm select[aria-invalid="true"] {

  border-color:
    rgba(255, 100, 120, .55);

  box-shadow:
    0 0 0 3px rgba(255, 100, 120, .06);

}


/* Confirmation / error message */

#formMessage {

  min-height: 20px;

  margin: 2px 0 0;

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 11px;

  line-height: 1.5;

  opacity: 0;

  transition:
    opacity .25s ease;

}


#formMessage[data-type="success"] {
  color: #9defff;
}


#formMessage[data-type="error"] {
  color: #ff9da9;
}


#formMessage[data-type="info"] {
  color: #8ea4b8;
}


/* Mobile */

@media (max-width: 700px) {

  #contactForm select {

    min-height: 50px;

    font-size: 14px;

  }

}
```
```css
/* ============================================================
   WETECH — FINAL ENQUIRY FORM FIX
   PASTE THIS AT THE VERY END OF style.css
   ============================================================ */


/* ------------------------------------------------------------
   WHAT DO YOU NEED — SAME LOOK AS OTHER FORM FIELDS
------------------------------------------------------------ */

#contactForm select[name="service"] {
  width: 100%;
  min-height: 48px;

  box-sizing: border-box;

  padding: 0 42px 0 14px;

  border: 1px solid rgba(140, 170, 195, 0.16);
  border-radius: 10px;

  background-color: rgba(3, 10, 19, 0.78);

  /* SAME MUTED COLOUR — NEVER WHITE */
  color: #6f8499 !important;

  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;

  outline: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;

  /* WETECH DROPDOWN ARROW */
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #6f8499 50%
    ),
    linear-gradient(
      135deg,
      #6f8499 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}


/* ------------------------------------------------------------
   SELECTED VALUE — STILL MUTED
------------------------------------------------------------ */

#contactForm select[name="service"]:valid {
  color: #6f8499 !important;
}


/* ------------------------------------------------------------
   DROPDOWN OPTIONS
------------------------------------------------------------ */

#contactForm select[name="service"] option {
  color: #6f8499 !important;
  background: #07111d !important;
}


/* ------------------------------------------------------------
   PLACEHOLDER
------------------------------------------------------------ */

#contactForm select[name="service"] option[value=""] {
  color: #6f8499 !important;
}


/* ------------------------------------------------------------
   SELECT FOCUS
------------------------------------------------------------ */

#contactForm select[name="service"]:focus {

  border-color:
    rgba(40, 230, 255, .42) !important;

  background-color:
    rgba(40, 230, 255, .025);

  box-shadow:
    0 0 0 3px rgba(40, 230, 255, .045),
    0 12px 30px rgba(0, 0, 0, .16);

  transform:
    translateY(-1px);

}


/* ------------------------------------------------------------
   ALL FORM FIELDS — SAME HEIGHT / FEEL
------------------------------------------------------------ */

#contactForm input,
#contactForm select[name="service"],
#contactForm textarea {

  font-family:
    "DM Sans",
    sans-serif;

}


/* ------------------------------------------------------------
   FORM MESSAGE
------------------------------------------------------------ */

#formMessage {

  display: block;

  width: 100%;

  min-height: 20px;

  margin-top: 4px;

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 11px;

  line-height: 1.5;

  opacity: 0;

  transition:
    opacity .25s ease;

}


/* SUCCESS */

#formMessage[data-type="success"] {

  color:
    #9defff !important;

}


/* ERROR */

#formMessage[data-type="error"] {

  color:
    #ff9da9 !important;

}


/* INFO */

#formMessage[data-type="info"] {

  color:
    #6f8499 !important;

}


/* ------------------------------------------------------------
   INVALID SELECT
------------------------------------------------------------ */

#contactForm select[name="service"][aria-invalid="true"] {

  border-color:
    rgba(255, 100, 120, .55) !important;

  box-shadow:
    0 0 0 3px rgba(255, 100, 120, .06);

}


/* ------------------------------------------------------------
   SUBMIT BUTTON
------------------------------------------------------------ */

#contactForm button[type="submit"] {

  cursor:
    pointer;

  transition:
    transform .2s ease,
    opacity .2s ease,
    box-shadow .2s ease;

}


#contactForm button[type="submit"]:disabled {

  opacity:
    .7;

  cursor:
    wait;

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 700px) {

  #contactForm select[name="service"] {

    min-height:
      50px;

    font-size:
      14px;

    padding-left:
      14px;

    padding-right:
      42px;

  }

}


/* ============================================================
   END — WETECH FINAL FORM OVERRIDE
   ============================================================ */
```
```css
/* ============================================================
   WETECH — DIRECT WHATSAPP CONTACT
   Paste at the END of style.css
   ============================================================ */

.whatsapp-contact-section {
  position: relative;
}

.whatsapp-contact-card {
  position: relative;
  overflow: hidden;

  min-height: 430px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 70px 40px;

  border: 1px solid rgba(120, 180, 220, 0.14);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(20, 210, 255, 0.09),
      transparent 48%
    ),
    rgba(5, 12, 22, 0.72);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* Ambient glow */

.whatsapp-contact-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(40, 230, 255, 0.13) 0%,
      rgba(40, 230, 255, 0.045) 35%,
      transparent 70%
    );

  filter: blur(12px);

  pointer-events: none;

  animation:
    whatsappGlow 5s ease-in-out infinite;
}


@keyframes whatsappGlow {

  0%,
  100% {
    opacity: .55;
    transform:
      translate(-50%, -50%)
      scale(.92);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

}


/* Content */

.whatsapp-contact-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 720px;

  text-align: center;
}


/* Heading */

.whatsapp-contact-content h2 {

  margin:
    18px 0 18px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(42px, 6vw, 76px);

  line-height:
    .98;

  letter-spacing:
    -0.045em;

}


.whatsapp-contact-content h2 span {

  display: block;

  background:
    linear-gradient(
      100deg,
      #ffffff,
      #78eaff,
      #ffffff
    );

  background-size:
    200% auto;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  animation:
    whatsappText 5s linear infinite;

}


@keyframes whatsappText {

  to {
    background-position:
      200% center;
  }

}


/* Description */

.whatsapp-contact-content p {

  max-width:
    540px;

  margin:
    0 auto 32px;

  color:
    rgba(190, 210, 225, .72);

  font-size:
    15px;

  line-height:
    1.7;

}


/* WhatsApp button */

.whatsapp-cta {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 15px;

  min-width: 310px;

  padding: 15px 18px;

  text-decoration: none;

  border: 1px solid
    rgba(100, 230, 255, .24);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(40, 230, 255, .12),
      rgba(80, 100, 255, .08)
    );

  box-shadow:
    0 15px 45px
    rgba(0, 0, 0, .22);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}


/* Hover */

.whatsapp-cta:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(100, 230, 255, .55);

  background:
    linear-gradient(
      135deg,
      rgba(40, 230, 255, .18),
      rgba(80, 100, 255, .12)
    );

  box-shadow:
    0 20px 55px
    rgba(20, 210, 255, .12);

}


/* Icon */

.whatsapp-cta-icon {

  width: 48px;
  height: 48px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    rgba(40, 230, 255, .10);

  border:
    1px solid
    rgba(100, 230, 255, .16);

  color:
    #8defff;

  font-size:
    19px;

}


/* Text */

.whatsapp-cta-text {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 3px;

  flex: 1;

}


.whatsapp-cta-text strong {

  color:
    #ffffff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    14px;

  letter-spacing:
    .01em;

}


.whatsapp-cta-text small {

  color:
    #6f8499;

  font-size:
    11px;

}


/* Arrow */

.whatsapp-cta-arrow {

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background:
    rgba(255, 255, 255, .035);

  color:
    #9defff;

  font-size:
    18px;

  transition:
    transform .3s ease;

}


.whatsapp-cta:hover
.whatsapp-cta-arrow {

  transform:
    translate(3px, -3px);

}


/* Small note */

.whatsapp-direct-note {

  display: block;

  margin-top:
    17px;

  color:
    rgba(130, 155, 175, .65);

  font-size:
    10px;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .whatsapp-contact-card {

    min-height:
      400px;

    padding:
      55px 20px;

    border-radius:
      22px;

  }


  .whatsapp-contact-content h2 {

    font-size:
      clamp(38px, 12vw, 54px);

  }


  .whatsapp-contact-content p {

    font-size:
      14px;

    margin-bottom:
      26px;

  }


  .whatsapp-cta {

    width:
      100%;

    min-width:
      0;

    box-sizing:
      border-box;

  }


  .whatsapp-cta-text strong {

    font-size:
      13px;

  }


  .whatsapp-direct-note {

    font-size:
      9px;

  }

}
```
/* ============================================================
   9XTECH — PREMIUM FINAL FOOTER
   PASTE THIS AT THE VERY END OF style.css
   ============================================================ */


/* ------------------------------------------------------------
   FOOTER RESET
------------------------------------------------------------ */

#site-footer.footer {

  position: relative;

  width: 100%;

  margin-top: 80px;

  padding: 0;

  background:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0),
      rgba(2, 8, 16, .72)
    );

  border-top:
    1px solid rgba(130, 180, 220, .10);

  overflow: hidden;

}


/* subtle top glow */

#site-footer.footer::before {

  content: "";

  position: absolute;

  top: -1px;
  left: 50%;

  width: 420px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(80, 225, 255, .55),
      transparent
    );

  box-shadow:
    0 0 35px
    rgba(60, 220, 255, .22);

}


/* ------------------------------------------------------------
   MAIN FOOTER
------------------------------------------------------------ */

.footer-main {

  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin:
    0 auto;

  padding:
    68px 0 58px;

  display: grid;

  grid-template-columns:
    1.7fr
    1fr
    1.15fr
    1.25fr;

  gap:
    50px;

  position: relative;

}


/* ------------------------------------------------------------
   BRAND
------------------------------------------------------------ */

.footer-brand {

  min-width: 0;

}


.footer-brand-link {

  display: inline-flex;

  align-items: center;

  text-decoration: none;

}


.footer-brand .brand-mark {

  width:
    42px;

  height:
    42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #8cecff,
      #278df5
    );

  color:
    #06101c;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    19px;

  font-weight:
    700;

  box-shadow:
    0 8px 30px
    rgba(40, 200, 255, .16);

}


.footer-brand .brand-name {

  margin-left:
    11px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    22px;

  font-weight:
    700;

  letter-spacing:
    -.04em;

  color:
    #f2f8fc;

}


.footer-brand .brand-name span {

  color:
    #63ddff;

}


.footer-brand > p {

  max-width:
    270px;

  margin:
    18px 0 0;

  color:
    rgba(155, 180, 200, .66);

  font-size:
    12px;

  line-height:
    1.7;

}


/* ------------------------------------------------------------
   FOOTER NAVIGATION
------------------------------------------------------------ */

.footer-navigation {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    11px;

}


.footer-heading {

  margin-bottom:
    7px;

  color:
    rgba(120, 150, 170, .58);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .16em;

}


.footer-navigation a {

  position:
    relative;

  color:
    rgba(205, 220, 230, .72);

  text-decoration:
    none;

  font-size:
    12px;

  line-height:
    1.4;

  transition:
    color .22s ease,
    transform .22s ease;

}


.footer-navigation a::before {

  content:
    "";

  position:
    absolute;

  left:
    -10px;

  top:
    50%;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    #63ddff;

  opacity:
    0;

  transform:
    translateY(-50%);

  transition:
    opacity .22s ease;

}


.footer-navigation a:hover {

  color:
    #ffffff;

  transform:
    translateX(4px);

}


.footer-navigation a:hover::before {

  opacity:
    1;

}


/* ------------------------------------------------------------
   CONTACT COLUMN
------------------------------------------------------------ */

.footer-contact a:first-of-type {

  color:
    #83e9ff;

}


.footer-phone {

  color:
    rgba(140, 165, 185, .62);

  font-size:
    11px;

}


/* ------------------------------------------------------------
   FOOTER BOTTOM
------------------------------------------------------------ */

.footer-bottom {

  width: min(
    1180px,
    calc(100% - 48px)
  );

  min-height:
    62px;

  margin:
    0 auto;

  border-top:
    1px solid rgba(130, 180, 220, .08);

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    20px;

  color:
    rgba(125, 150, 170, .52);

  font-size:
    9px;

  letter-spacing:
    .04em;

}


.footer-bottom > span:first-child {

  text-align:
    left;

}


.footer-bottom > a {

  justify-self:
    end;

  color:
    rgba(155, 180, 200, .65);

  text-decoration:
    none;

  font-size:
    9px;

  letter-spacing:
    .08em;

  transition:
    color .2s ease,
    transform .2s ease;

}


.footer-bottom > a:hover {

  color:
    #82eaff;

  transform:
    translateY(-2px);

}


/* ------------------------------------------------------------
   SYSTEM STATUS
------------------------------------------------------------ */

.footer-status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  white-space:
    nowrap;

}


.footer-status i {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #55e6a5;

  box-shadow:
    0 0 10px
    rgba(85, 230, 165, .65);

  animation:
    footerStatusPulse 2s ease-in-out infinite;

}


@keyframes footerStatusPulse {

  0%,
  100% {
    opacity: .55;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

}


/* ------------------------------------------------------------
   REMOVE OLD FOOTER SPACING / CONFLICTS
------------------------------------------------------------ */

#site-footer .footer-links {

  display:
    none !important;

}


#site-footer .footer-copy {

  display:
    none !important;

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 850px) {

  .footer-main {

    grid-template-columns:
      1.5fr 1fr;

    gap:
      42px 30px;

    padding:
      55px 0 45px;

  }

}


@media (max-width: 600px) {

  #site-footer.footer {

    margin-top:
      55px;

  }


  .footer-main {

    width:
      calc(100% - 36px);

    grid-template-columns:
      1fr 1fr;

    gap:
      38px 24px;

    padding:
      48px 0 40px;

  }


  .footer-brand {

    grid-column:
      1 / -1;

    padding-bottom:
      8px;

  }


  .footer-brand > p {

    max-width:
      290px;

  }


  .footer-bottom {

    width:
      calc(100% - 36px);

    min-height:
      auto;

    padding:
      18px 0 22px;

    grid-template-columns:
      1fr 1fr;

    gap:
      14px;

  }


  .footer-status {

    justify-self:
      end;

  }


  .footer-bottom > a {

    grid-column:
      1 / -1;

    justify-self:
      start;

  }

}


@media (max-width: 400px) {

  .footer-main {

    grid-template-columns:
      1fr;

  }


  .footer-brand {

    grid-column:
      auto;

  }


  .footer-bottom {

    grid-template-columns:
      1fr;

  }


  .footer-status {

    justify-self:
      start;

  }


  .footer-bottom > a {

    grid-column:
      auto;

  }

}


/* ============================================================
   END — 9XTECH FOOTER
   ============================================================ */
/* ============================================================
   9XTECH — FULL WIDTH FINAL FOOTER FIX
   PASTE AT THE VERY END OF style.css
   ============================================================ */

html,
body {
  overflow-x: hidden;
}


/* ------------------------------------------------------------
   FULL WIDTH FOOTER
------------------------------------------------------------ */

#site-footer.footer {

  position: relative;

  width: 100% !important;
  max-width: none !important;

  margin:
    100px 0 0 !important;

  padding:
    0 !important;

  left: auto !important;
  right: auto !important;

  border-top:
    1px solid rgba(100, 210, 255, .10);

  border-radius:
    0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, .45),
      rgba(2, 7, 15, .96)
    );

  overflow: hidden;

}


/* top cinematic light */

#site-footer.footer::before {

  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 700px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(82, 224, 255, .65),
      transparent
    );

  box-shadow:
    0 0 35px
    rgba(60, 220, 255, .20);

}


/* subtle ambient glow */

#site-footer.footer::after {

  content: "";

  position: absolute;

  top: -220px;
  left: 50%;

  width: 650px;
  height: 420px;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(30, 190, 255, .045),
      transparent 68%
    );

  pointer-events:
    none;

}


/* ------------------------------------------------------------
   FOOTER CONTENT — FULL WIDTH
------------------------------------------------------------ */

#site-footer .footer-main {

  position: relative;

  z-index: 2;

  width:
    min(1380px, calc(100% - 100px)) !important;

  max-width:
    none !important;

  margin:
    0 auto !important;

  padding:
    78px 0 68px !important;

  display:
    grid !important;

  grid-template-columns:
    2fr
    1fr
    1.25fr
    1.35fr !important;

  gap:
    80px !important;

  align-items:
    start;

}


/* ------------------------------------------------------------
   9XTECH BRAND
------------------------------------------------------------ */

#site-footer .footer-brand {

  padding-top:
    2px;

}


#site-footer .footer-brand-link {

  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    12px;

}


#site-footer .footer-brand .brand-mark {

  width:
    48px !important;

  height:
    48px !important;

  min-width:
    48px;

  border-radius:
    12px;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      135deg,
      #9ceeff,
      #278ef5
    );

  color:
    #06111d;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    20px;

  font-weight:
    700;

  box-shadow:
    0 10px 35px
    rgba(45, 205, 255, .16);

}


#site-footer .footer-brand .brand-name {

  margin:
    0 !important;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    25px;

  font-weight:
    700;

  letter-spacing:
    -.045em;

  color:
    #f4f9fc;

}


#site-footer .footer-brand .brand-name span {

  color:
    #63ddff !important;

}


#site-footer .footer-brand > p {

  max-width:
    330px;

  margin:
    20px 0 0;

  color:
    rgba(165, 190, 210, .68);

  font-size:
    13px;

  line-height:
    1.75;

}


/* ------------------------------------------------------------
   FOOTER COLUMNS
------------------------------------------------------------ */

#site-footer .footer-navigation {

  display:
    flex !important;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    13px;

}


#site-footer .footer-heading {

  margin:
    0 0 8px;

  color:
    rgba(120, 155, 178, .52);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .17em;

}


#site-footer .footer-navigation a {

  margin:
    0;

  color:
    rgba(210, 225, 235, .70);

  font-size:
    12px;

  text-decoration:
    none;

  transition:
    color .2s ease,
    transform .2s ease;

}


#site-footer .footer-navigation a:hover {

  color:
    #ffffff;

  transform:
    translateX(5px);

}


#site-footer .footer-contact a:first-of-type {

  color:
    #72e5ff;

}


#site-footer .footer-phone {

  color:
    rgba(145, 175, 195, .60);

  font-size:
    11px;

}


/* ------------------------------------------------------------
   BOTTOM BAR
------------------------------------------------------------ */

#site-footer .footer-bottom {

  position:
    relative;

  z-index:
    2;

  width:
    min(1380px, calc(100% - 100px)) !important;

  max-width:
    none !important;

  min-height:
    72px;

  margin:
    0 auto !important;

  padding:
    0 !important;

  border-top:
    1px solid rgba(125, 170, 200, .08);

  display:
    grid !important;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    30px;

  color:
    rgba(125, 150, 170, .52);

  font-size:
    10px;

}


#site-footer .footer-bottom > span:first-child {

  text-align:
    left;

}


#site-footer .footer-status {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  white-space:
    nowrap;

}


#site-footer .footer-status i {

  display:
    block;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #54e5a3;

  box-shadow:
    0 0 12px
    rgba(84, 229, 163, .65);

}


#site-footer .footer-bottom > a {

  justify-self:
    end;

  color:
    rgba(165, 190, 205, .65);

  text-decoration:
    none;

  font-size:
    10px;

  letter-spacing:
    .08em;

  transition:
    color .2s ease,
    transform .2s ease;

}


#site-footer .footer-bottom > a:hover {

  color:
    #72e5ff;

  transform:
    translateY(-2px);

}


/* ------------------------------------------------------------
   KILL OLD FOOTER RULES
------------------------------------------------------------ */

#site-footer .footer-links,
#site-footer .footer-copy {

  display:
    none !important;

}


/* ------------------------------------------------------------
   DESKTOP LARGE
------------------------------------------------------------ */

@media (min-width: 1400px) {

  #site-footer .footer-main,
  #site-footer .footer-bottom {

    width:
      min(1500px, calc(100% - 120px)) !important;

  }

}


/* ------------------------------------------------------------
   TABLET
------------------------------------------------------------ */

@media (max-width: 900px) {

  #site-footer .footer-main {

    width:
      calc(100% - 60px) !important;

    grid-template-columns:
      1.5fr 1fr 1fr !important;

    gap:
      45px;

  }

  #site-footer .footer-brand {

    grid-column:
      1 / -1;

  }

  #site-footer .footer-bottom {

    width:
      calc(100% - 60px) !important;

  }

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

  #site-footer.footer {

    margin-top:
      65px !important;

  }


  #site-footer .footer-main {

    width:
      calc(100% - 36px) !important;

    padding:
      52px 0 45px !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      40px 28px;

  }


  #site-footer .footer-brand {

    grid-column:
      1 / -1;

  }


  #site-footer .footer-brand .brand-mark {

    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px;

  }


  #site-footer .footer-brand .brand-name {

    font-size:
      22px;

  }


  #site-footer .footer-brand > p {

    font-size:
      12px;

  }


  #site-footer .footer-bottom {

    width:
      calc(100% - 36px) !important;

    min-height:
      auto;

    padding:
      20px 0 24px !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      15px;

  }


  #site-footer .footer-status {

    justify-self:
      end;

  }


  #site-footer .footer-bottom > a {

    grid-column:
      1 / -1;

    justify-self:
      start;

  }

}


/* ------------------------------------------------------------
   SMALL MOBILE
------------------------------------------------------------ */

@media (max-width: 420px) {

  #site-footer .footer-main {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-brand {

    grid-column:
      auto;

  }


  #site-footer .footer-bottom {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-status {

    justify-self:
      start;

  }


  #site-footer .footer-bottom > a {

    grid-column:
      auto;

  }

}


/* ============================================================
   END — FULL WIDTH 9XTECH FOOTER
   ============================================================ */
/* ============================================================
   9XTECH — FINAL LAYOUT / EMPTY SPACE / FOOTER FIX
   PASTE THIS AT THE VERY END OF style.css
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL
------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden !important;
}


/* ------------------------------------------------------------
   CONTACT SECTION — REMOVE UNNECESSARY GIANT HEIGHT
------------------------------------------------------------ */

#contact.section {
  min-height: auto !important;
  height: auto !important;

  margin-bottom: 0 !important;
  padding-bottom: 70px !important;
}


/* Contact card should actually use the available width */

#contact .whatsapp-contact-card {
  width: 100% !important;
  max-width: none !important;

  min-height: 390px !important;

  box-sizing: border-box;

  margin: 0 !important;
}


/* Remove accidental inherited positioning */

#contact .whatsapp-contact-content {
  position: relative !important;

  width: 100% !important;
  max-width: 850px !important;

  margin: 0 auto !important;

  left: auto !important;
  right: auto !important;
}


/* ------------------------------------------------------------
   FOOTER — BREAK OUT OF ANY PARENT CONTAINER
------------------------------------------------------------ */

#site-footer.footer {

  position: relative !important;

  /* FULL BROWSER WIDTH */
  width: 100vw !important;
  max-width: none !important;

  /* Break out of centred page/container */
  margin-left: calc(50% - 50vw) !important;

  margin-right: 0 !important;

  margin-top: 0 !important;

  padding: 0 !important;

  box-sizing: border-box;

  border-radius: 0 !important;

  min-height: 0 !important;

  height: auto !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;

  overflow: hidden !important;
}


/* ------------------------------------------------------------
   FOOTER MAIN — USE THE WHOLE WIDTH
------------------------------------------------------------ */

#site-footer .footer-main {

  position: relative !important;

  width: min(1450px, calc(100vw - 100px)) !important;

  max-width: none !important;

  margin: 0 auto !important;

  padding: 75px 0 65px !important;

  box-sizing: border-box;

  display: grid !important;

  grid-template-columns:
    2.2fr
    1fr
    1.25fr
    1.35fr !important;

  gap: 70px !important;

  align-items: start !important;
}


/* ------------------------------------------------------------
   BRAND
------------------------------------------------------------ */

#site-footer .footer-brand {
  width: 100% !important;
}

#site-footer .footer-brand-link {
  display: inline-flex !important;

  align-items: center !important;

  gap: 12px !important;

  text-decoration: none !important;
}


/* 9XTECH MARK */

#site-footer .footer-brand .brand-mark {

  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  background:
    linear-gradient(
      135deg,
      #9ceeff,
      #278ef5
    ) !important;

  color: #06111d !important;

  font-family:
    "Space Grotesk",
    sans-serif !important;

  font-size: 20px !important;

  font-weight: 700 !important;
}


/* 9XTECH TEXT */

#site-footer .footer-brand .brand-name {

  margin: 0 !important;

  color: #f4f9fc !important;

  font-family:
    "Space Grotesk",
    sans-serif !important;

  font-size: 25px !important;

  font-weight: 700 !important;

  letter-spacing: -.045em !important;
}

#site-footer .footer-brand .brand-name span {

  color: #63ddff !important;
}


/* DESCRIPTION */

#site-footer .footer-brand > p {

  max-width: 340px !important;

  margin: 20px 0 0 !important;

  color:
    rgba(165, 190, 210, .68) !important;

  font-size: 13px !important;

  line-height: 1.75 !important;
}


/* ------------------------------------------------------------
   FOOTER COLUMNS
------------------------------------------------------------ */

#site-footer .footer-navigation {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

  gap: 13px !important;

  width: 100% !important;

  min-width: 0 !important;
}


#site-footer .footer-heading {

  margin:
    0 0 9px !important;

  color:
    rgba(120, 155, 178, .52) !important;

  font-family:
    "Space Grotesk",
    sans-serif !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  letter-spacing: .17em !important;
}


#site-footer .footer-navigation a {

  display: inline-block !important;

  color:
    rgba(210, 225, 235, .72) !important;

  font-size: 12px !important;

  line-height: 1.4 !important;

  text-decoration: none !important;

  white-space: normal !important;

  transition:
    color .2s ease,
    transform .2s ease !important;
}


#site-footer .footer-navigation a:hover {

  color: #ffffff !important;

  transform:
    translateX(5px) !important;
}


#site-footer .footer-contact a:first-of-type {

  color:
    #72e5ff !important;
}


#site-footer .footer-phone {

  color:
    rgba(145, 175, 195, .60) !important;

  font-size: 11px !important;
}


/* ------------------------------------------------------------
   BOTTOM BAR
------------------------------------------------------------ */

#site-footer .footer-bottom {

  position: relative !important;

  width: min(1450px, calc(100vw - 100px)) !important;

  max-width: none !important;

  min-height: 72px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  box-sizing: border-box;

  display: grid !important;

  grid-template-columns:
    1fr
    auto
    1fr !important;

  align-items: center !important;

  gap: 30px !important;

  border-top:
    1px solid rgba(125, 170, 200, .09) !important;
}


#site-footer .footer-bottom > span:first-child {

  text-align: left !important;
}


#site-footer .footer-status {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  white-space: nowrap !important;
}


#site-footer .footer-bottom > a {

  justify-self: end !important;

  color:
    rgba(165, 190, 205, .65) !important;

  text-decoration: none !important;

  font-size: 10px !important;

  letter-spacing: .08em !important;
}


/* Old footer elements OFF */

#site-footer .footer-links,
#site-footer .footer-copy {
  display: none !important;
}


/* ------------------------------------------------------------
   IMPORTANT:
   PREVENT PARENT SECTION FROM CLIPPING FULL WIDTH FOOTER
------------------------------------------------------------ */

main {
  overflow: visible !important;
}

.section {
  overflow: visible;
}


/* ------------------------------------------------------------
   REMOVE ACCIDENTAL HUGE EMPTY HEIGHT FROM CONTACT CTA
------------------------------------------------------------ */

.whatsapp-contact-section {

  min-height: auto !important;

  height: auto !important;

}


.whatsapp-contact-card {

  box-sizing: border-box;

}


/* ------------------------------------------------------------
   DESKTOP
------------------------------------------------------------ */

@media (min-width: 1200px) {

  #site-footer .footer-main,
  #site-footer .footer-bottom {

    width:
      min(1450px, calc(100vw - 120px)) !important;

  }

}


/* ------------------------------------------------------------
   TABLET
------------------------------------------------------------ */

@media (max-width: 900px) {

  #site-footer .footer-main {

    width:
      calc(100vw - 70px) !important;

    grid-template-columns:
      1.4fr 1fr 1fr !important;

    gap:
      45px !important;

  }


  #site-footer .footer-brand {

    grid-column:
      1 / -1 !important;

  }


  #site-footer .footer-bottom {

    width:
      calc(100vw - 70px) !important;

  }

}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

  #contact.section {

    padding-bottom:
      45px !important;

  }


  #site-footer.footer {

    width:
      100vw !important;

    margin-left:
      calc(50% - 50vw) !important;

  }


  #site-footer .footer-main {

    width:
      calc(100vw - 36px) !important;

    padding:
      52px 0 45px !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      40px 25px !important;

  }


  #site-footer .footer-brand {

    grid-column:
      1 / -1 !important;

  }


  #site-footer .footer-bottom {

    width:
      calc(100vw - 36px) !important;

    min-height:
      auto !important;

    padding:
      20px 0 24px !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      15px !important;

  }


  #site-footer .footer-status {

    justify-self:
      end !important;

  }


  #site-footer .footer-bottom > a {

    grid-column:
      1 / -1 !important;

    justify-self:
      start !important;

  }

}


/* ------------------------------------------------------------
   SMALL MOBILE
------------------------------------------------------------ */

@media (max-width: 420px) {

  #site-footer .footer-main {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-brand {

    grid-column:
      auto !important;

  }


  #site-footer .footer-bottom {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-status {

    justify-self:
      start !important;

  }


  #site-footer .footer-bottom > a {

    grid-column:
      auto !important;

  }

}


/* ============================================================
   END — 9XTECH FULL BLEED FIX
   ============================================================ */
/* ============================================================
   9XTECH — FINAL CONTACT + FOOTER ALIGNMENT FIX
   PASTE AT VERY END OF style.css
   ============================================================ */


/* ============================================================
   CONTACT — PERFECT CENTER
   ============================================================ */

#contact {
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;

  padding-top: 80px !important;
  padding-bottom: 80px !important;

  box-sizing: border-box !important;
}


/* Main contact box */

#contact .contact-box {

  width: min(1180px, calc(100% - 80px)) !important;

  max-width: 1180px !important;

  margin: 0 auto !important;

  position: relative !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

}


/* Contact content */

#contact .contact-content {

  width: 100% !important;

  max-width: 850px !important;

  margin: 0 auto !important;

  text-align: center !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}


/* Heading */

#contact .contact-content h2 {

  max-width: 850px !important;

  margin-left: auto !important;
  margin-right: auto !important;

}


/* Description */

#contact .contact-content > p {

  max-width: 650px !important;

  margin-left: auto !important;
  margin-right: auto !important;

}


/* Section label */

#contact .contact-content .section-number {

  display: block !important;

  width: max-content !important;

  margin-left: auto !important;
  margin-right: auto !important;

}


/* WhatsApp card */

#contact .whatsapp-contact-card {

  position: relative !important;

  width: min(620px, 100%) !important;

  max-width: 620px !important;

  margin: 35px auto 0 !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;

  box-sizing: border-box !important;

}


/* If card is directly inside contact-content */

#contact .contact-content .whatsapp-contact-card {

  align-self: center !important;

}


/* Details */

#contact .contact-details {

  width: 100% !important;

  max-width: 620px !important;

  margin: 30px auto 0 !important;

  display: flex !important;

  justify-content: center !important;

  gap: 55px !important;

}


/* ============================================================
   FOOTER — RESET THE OLD BROKEN BREAKOUT
   ============================================================ */

#site-footer.footer,
.footer {

  position: relative !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  left: auto !important;
  right: auto !important;

  transform: none !important;

  box-sizing: border-box !important;

  border-radius: 0 !important;

  overflow: hidden !important;

}


/* IMPORTANT:
   Remove the old 100vw breakout behaviour
*/

#site-footer.footer {

  margin-left: 0 !important;

  margin-right: 0 !important;

}


/* ============================================================
   FOOTER MAIN — PROPER CENTERED WIDTH
   ============================================================ */

#site-footer .footer-main {

  width: min(1240px, calc(100% - 80px)) !important;

  max-width: 1240px !important;

  margin: 0 auto !important;

  padding: 75px 0 65px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    1.7fr
    1fr
    1.25fr
    1.25fr !important;

  column-gap: 70px !important;

  row-gap: 40px !important;

  align-items: start !important;

}


/* ============================================================
   FOOTER BRAND — NO MORE CUTTING
   ============================================================ */

#site-footer .footer-brand {

  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}


#site-footer .footer-brand-link {

  display: inline-flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin: 0 !important;

}


#site-footer .footer-brand > p {

  max-width: 320px !important;

  margin: 18px 0 0 !important;

  line-height: 1.7 !important;

}


/* ============================================================
   FOOTER NAVIGATION
   ============================================================ */

#site-footer .footer-navigation {

  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 13px !important;

}


#site-footer .footer-navigation a {

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

  white-space: normal !important;

}


/* ============================================================
   FOOTER BOTTOM — PERFECT ALIGNMENT
   ============================================================ */

#site-footer .footer-bottom {

  width: min(1240px, calc(100% - 80px)) !important;

  max-width: 1240px !important;

  min-height: 70px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    1fr
    auto
    1fr !important;

  align-items: center !important;

  gap: 30px !important;

}


/* Copyright */

#site-footer .footer-bottom > span:first-child {

  justify-self: start !important;

  text-align: left !important;

}


/* System status */

#site-footer .footer-status {

  justify-self: center !important;

}


/* Back to top */

#site-footer .footer-bottom > a {

  justify-self: end !important;

}


/* ============================================================
   REMOVE ANY OLD TRANSFORMS / NEGATIVE POSITIONS
   ============================================================ */

#site-footer *,
#contact * {

  box-sizing: border-box;

}


#site-footer .footer-main,
#site-footer .footer-bottom,
#contact .contact-box,
#contact .contact-content,
#contact .whatsapp-contact-card {

  position: relative !important;

  left: auto !important;

  right: auto !important;

  transform: none !important;

}


/* ============================================================
   DESKTOP — EXTRA LARGE
   ============================================================ */

@media (min-width: 1400px) {

  #site-footer .footer-main,
  #site-footer .footer-bottom {

    width: min(1320px, calc(100% - 100px)) !important;

    max-width: 1320px !important;

  }


  #contact .contact-box {

    width: min(1200px, calc(100% - 100px)) !important;

    max-width: 1200px !important;

  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  #contact .contact-box {

    width:
      calc(100% - 50px) !important;

  }


  #contact .contact-content {

    max-width:
      700px !important;

  }


  #contact .contact-details {

    gap:
      35px !important;

  }


  #site-footer .footer-main {

    width:
      calc(100% - 50px) !important;

    grid-template-columns:
      1.4fr 1fr 1fr !important;

    column-gap:
      40px !important;

  }


  #site-footer .footer-brand {

    grid-column:
      1 / -1 !important;

  }


  #site-footer .footer-bottom {

    width:
      calc(100% - 50px) !important;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

  #contact {

    padding-top:
      55px !important;

    padding-bottom:
      55px !important;

  }


  #contact .contact-box {

    width:
      calc(100% - 32px) !important;

  }


  #contact .contact-content {

    width:
      100% !important;

  }


  #contact .contact-content h2 {

    font-size:
      clamp(34px, 10vw, 52px) !important;

  }


  #contact .whatsapp-contact-card {

    width:
      100% !important;

    max-width:
      100% !important;

  }


  #contact .contact-details {

    flex-direction:
      column !important;

    align-items:
      center !important;

    gap:
      20px !important;

  }


  #site-footer.footer {

    width:
      100% !important;

    margin-left:
      0 !important;

  }


  #site-footer .footer-main {

    width:
      calc(100% - 36px) !important;

    padding:
      52px 0 45px !important;

    grid-template-columns:
      1fr 1fr !important;

    column-gap:
      25px !important;

    row-gap:
      40px !important;

  }


  #site-footer .footer-brand {

    grid-column:
      1 / -1 !important;

  }


  #site-footer .footer-bottom {

    width:
      calc(100% - 36px) !important;

    min-height:
      auto !important;

    padding:
      20px 0 25px !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:
      15px !important;

  }


  #site-footer .footer-status {

    justify-self:
      end !important;

  }


  #site-footer .footer-bottom > a {

    grid-column:
      1 / -1 !important;

    justify-self:
      start !important;

  }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

  #site-footer .footer-main {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-brand {

    grid-column:
      auto !important;

  }


  #site-footer .footer-bottom {

    grid-template-columns:
      1fr !important;

  }


  #site-footer .footer-status {

    justify-self:
      start !important;

  }

}


/* ============================================================
   FINAL 9XTECH
   ============================================================ */
/* =========================================================
   9XTECH — FINAL FOOTER FULL-WIDTH FIX
   Paste at the VERY END of style.css
========================================================= */

/* Footer itself */
#site-footer.footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 90px 5vw 28px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Main footer = LEFT TO RIGHT FULL WIDTH */
#site-footer .footer-main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns:
    minmax(220px, 1.5fr)
    minmax(140px, 1fr)
    minmax(180px, 1.2fr)
    minmax(220px, 1fr);
  column-gap: 70px;
  align-items: start;
  box-sizing: border-box;
}

/* Brand column */
#site-footer .footer-brand {
  min-width: 0;
  width: 100%;
}

#site-footer .footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
}

#site-footer .footer-brand .brand-mark {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
}

#site-footer .footer-brand .brand-name {
  font-size: 25px;
  line-height: 1;
  white-space: nowrap;
}

#site-footer .footer-brand p {
  max-width: 230px;
  margin: 22px 0 0;
  line-height: 1.7;
}

/* Every footer navigation column */
#site-footer .footer-navigation {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
}

/* Heading */
#site-footer .footer-heading {
  display: block;
  margin: 0 0 8px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Links */
#site-footer .footer-navigation a,
#site-footer .footer-contact span {
  display: block;
  width: auto;
  max-width: 100%;
  line-height: 1.45;
  text-decoration: none;
  box-sizing: border-box;
}

/* Services should not become tiny vertical words */
#site-footer .footer-navigation a {
  white-space: normal;
}

/* Contact column */
#site-footer .footer-contact {
  padding-left: 0;
}

#site-footer .footer-contact a:first-of-type {
  white-space: nowrap;
}

/* Phone */
#site-footer .footer-phone {
  white-space: nowrap;
}

/* Bottom footer = full width */
#site-footer .footer-bottom {
  width: 100%;
  max-width: 1400px;
  margin: 65px auto 0;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  box-sizing: border-box;
}

/* Copyright */
#site-footer .footer-bottom > span:first-child {
  justify-self: start;
}

/* System status */
#site-footer .footer-status {
  justify-self: center;
  white-space: nowrap;
}

/* Back to top */
#site-footer .footer-bottom > a {
  justify-self: end;
  white-space: nowrap;
  text-decoration: none;
}


/* =========================================================
   LARGE SCREEN — USE MORE HORIZONTAL SPACE
========================================================= */

@media (min-width: 1200px) {

  #site-footer.footer {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  #site-footer .footer-main,
  #site-footer .footer-bottom {
    max-width: 1500px;
  }

  #site-footer .footer-main {
    grid-template-columns:
      minmax(260px, 1.6fr)
      minmax(170px, 1fr)
      minmax(210px, 1.15fr)
      minmax(260px, 1fr);

    column-gap: 90px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  #site-footer.footer {
    padding: 70px 6vw 25px;
  }

  #site-footer .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 45px;
  }

  #site-footer .footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  #site-footer .footer-status {
    justify-self: end;
  }

  #site-footer .footer-bottom > a {
    justify-self: start;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  #site-footer.footer {
    padding: 60px 22px 22px;
  }

  #site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 42px 25px;
  }

  #site-footer .footer-brand {
    grid-column: 1 / -1;
  }

  #site-footer .footer-brand p {
    max-width: 280px;
  }

  #site-footer .footer-bottom {
    margin-top: 45px;
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }

  #site-footer .footer-bottom > span:first-child,
  #site-footer .footer-status,
  #site-footer .footer-bottom > a {
    justify-self: start;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  #site-footer .footer-main {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  #site-footer .footer-brand {
    grid-column: auto;
  }

  #site-footer .footer-navigation {
    width: 100%;
  }
}
/* =========================================================
   9XTECH — FINAL FOOTER FIX
   FULL WIDTH / PROPER ALIGNMENT
========================================================= */

/* Remove any parent constraint around the footer */
#site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

/* Footer itself stretches from left edge to right edge */
.footer {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-top: 0 !important;
  padding-left: clamp(32px, 6vw, 100px) !important;
  padding-right: clamp(32px, 6vw, 100px) !important;
}

/* Main footer content */
.footer-main {
  width: 100% !important;
  max-width: 1400px;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns:
    minmax(220px, 1.5fr)
    minmax(150px, 1fr)
    minmax(180px, 1.2fr)
    minmax(190px, 1fr) !important;

  gap: clamp(40px, 6vw, 100px) !important;

  align-items: start !important;
  box-sizing: border-box;
}

/* Brand column */
.footer-brand {
  min-width: 0 !important;
  width: 100% !important;
}

.footer-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: fit-content !important;
}

.footer-brand .brand-mark {
  flex-shrink: 0 !important;
}

.footer-brand .brand-name {
  white-space: nowrap !important;
}

/* Footer navigation columns */
.footer-navigation {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.footer-navigation a,
.footer-navigation span {
  max-width: 100%;
}

/* Headings */
.footer-heading {
  display: block !important;
  margin-bottom: 22px !important;
  white-space: nowrap !important;
}

/* Footer links */
.footer-navigation a {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 14px !important;
  white-space: normal !important;
}

/* Contact column */
.footer-contact {
  align-items: flex-start !important;
}

.footer-contact a {
  white-space: nowrap !important;
}

.footer-phone {
  white-space: nowrap !important;
}

/* Bottom line */
.footer-bottom {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 55px auto 0 !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;

  gap: 30px !important;
  box-sizing: border-box;
}

/* Back to top stays on right */
.footer-bottom > a {
  justify-self: end !important;
  white-space: nowrap !important;
}

/* Status stays in center */
.footer-status {
  justify-self: center !important;
  white-space: nowrap !important;
}

/* Copyright stays left */
.footer-bottom > span:first-child {
  justify-self: start !important;
}


/* =========================================================
   CONTACT SECTION — CENTER
========================================================= */

.whatsapp-contact-section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.whatsapp-contact-card {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

.whatsapp-contact-content {
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.whatsapp-cta {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  .footer-main {
    grid-template-columns:
      1.4fr
      1fr
      1fr !important;
  }

  .footer-contact {
    grid-column: 1 / -1 !important;
    margin-top: 20px !important;
  }

}


@media (max-width: 700px) {

  .footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 42px 28px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .footer-contact {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  .footer-bottom {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
  }

  .footer-bottom > span:first-child,
  .footer-status,
  .footer-bottom > a {
    justify-self: center !important;
  }

}


@media (max-width: 480px) {

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

  .footer-brand,
  .footer-contact {
    grid-column: auto !important;
  }

  .footer-navigation {
    width: 100% !important;
  }

}
/* =========================================================
   9XTECH — FULL WIDTH FOOTER / FINAL OVERRIDE
========================================================= */

/* FOOTER MUST BREAK OUT OF ANY NARROW PARENT */
#site-footer,
.footer {
  position: relative !important;

  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;

  left: 0 !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}


/* FOOTER INNER AREA */
#site-footer .footer-main,
.footer .footer-main {
  width: calc(100% - 80px) !important;
  max-width: none !important;

  margin: 0 40px !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(260px, 1.5fr)
    minmax(180px, 1fr)
    minmax(220px, 1.2fr)
    minmax(220px, 1fr) !important;

  column-gap: 70px !important;
  row-gap: 50px !important;

  align-items: start !important;
  justify-content: stretch !important;

  box-sizing: border-box !important;
}


/* BRAND */
#site-footer .footer-brand,
.footer .footer-brand {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}


/* BRAND LOGO */
#site-footer .footer-brand-link,
.footer .footer-brand-link {
  display: inline-flex !important;
  align-items: center !important;

  width: fit-content !important;
  max-width: none !important;

  white-space: nowrap !important;
}


/* ALL FOOTER COLUMNS */
#site-footer .footer-navigation,
.footer .footer-navigation {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  box-sizing: border-box !important;
}


/* FOOTER HEADINGS */
#site-footer .footer-heading,
.footer .footer-heading {
  display: block !important;

  width: auto !important;
  margin-bottom: 22px !important;

  white-space: nowrap !important;
}


/* FOOTER LINKS */
#site-footer .footer-navigation a,
.footer .footer-navigation a {
  display: block !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin-bottom: 14px !important;

  white-space: normal !important;
}


/* PROJECT / CONTACT COLUMN */
#site-footer .footer-contact,
.footer .footer-contact {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}


#site-footer .footer-contact a,
.footer .footer-contact a {
  white-space: nowrap !important;
}


/* PHONE */
#site-footer .footer-phone,
.footer .footer-phone {
  white-space: nowrap !important;
}


/* =========================================================
   FOOTER BOTTOM — FULL WIDTH
========================================================= */

#site-footer .footer-bottom,
.footer .footer-bottom {
  width: calc(100% - 80px) !important;
  max-width: none !important;

  margin: 60px 40px 0 !important;
  padding-top: 22px !important;

  display: grid !important;

  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;
  gap: 30px !important;

  box-sizing: border-box !important;
}


#site-footer .footer-bottom > span:first-child,
.footer .footer-bottom > span:first-child {
  justify-self: start !important;
  text-align: left !important;
}


#site-footer .footer-status,
.footer .footer-status {
  justify-self: center !important;
  white-space: nowrap !important;
}


#site-footer .footer-bottom > a,
.footer .footer-bottom > a {
  justify-self: end !important;
  white-space: nowrap !important;
}


/* =========================================================
   REMOVE ACCIDENTAL CONSTRAINTS
========================================================= */

#site-footer *,
.footer * {
  box-sizing: border-box;
}


/* =========================================================
   DESKTOP — USE THE WHOLE SCREEN
========================================================= */

@media (min-width: 1101px) {

  #site-footer .footer-main,
  .footer .footer-main {
    grid-template-columns:
      1.6fr
      1fr
      1.25fr
      1.15fr !important;

    column-gap: clamp(50px, 5vw, 110px) !important;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  #site-footer .footer-main,
  .footer .footer-main {

    grid-template-columns:
      1.3fr
      1fr
      1fr !important;

    column-gap: 45px !important;

  }

  #site-footer .footer-contact,
  .footer .footer-contact {
    grid-column: 1 / -1 !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  #site-footer,
  .footer {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
  }


  #site-footer .footer-main,
  .footer .footer-main {

    width: calc(100% - 40px) !important;

    margin-left: 20px !important;
    margin-right: 20px !important;

    grid-template-columns: 1fr 1fr !important;

    column-gap: 25px !important;
    row-gap: 40px !important;
  }


  #site-footer .footer-brand,
  .footer .footer-brand {
    grid-column: 1 / -1 !important;
  }


  #site-footer .footer-contact,
  .footer .footer-contact {
    grid-column: 1 / -1 !important;
  }


  #site-footer .footer-bottom,
  .footer .footer-bottom {

    width: calc(100% - 40px) !important;

    margin-left: 20px !important;
    margin-right: 20px !important;

    grid-template-columns: 1fr !important;

    gap: 18px !important;

    text-align: center !important;
  }


  #site-footer .footer-bottom > span:first-child,
  .footer .footer-bottom > span:first-child,

  #site-footer .footer-status,
  .footer .footer-status,

  #site-footer .footer-bottom > a,
  .footer .footer-bottom > a {
    justify-self: center !important;
    text-align: center !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  #site-footer .footer-main,
  .footer .footer-main {
    grid-template-columns: 1fr !important;
  }

  #site-footer .footer-brand,
  .footer .footer-brand,
  #site-footer .footer-contact,
  .footer .footer-contact {
    grid-column: auto !important;
  }

}
/* =====================================================
   9XTECH FINAL FOOTER
===================================================== */

#site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 90px 5vw 35px !important;

  position: relative !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
}


/* FULL WIDTH FOOTER CONTENT */

#site-footer .footer-main {
  width: 100% !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    2fr
    1fr
    1.35fr
    1.25fr !important;

  gap: 70px !important;

  align-items: start !important;
}


/* BRAND */

#site-footer .footer-brand {
  width: 100% !important;
  min-width: 0 !important;
}

#site-footer .footer-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}


/* NAV COLUMNS */

#site-footer .footer-navigation {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#site-footer .footer-heading {
  margin-bottom: 20px !important;
  white-space: nowrap !important;
}

#site-footer .footer-navigation a {
  margin-bottom: 14px !important;
}


/* CONTACT */

#site-footer .footer-contact {
  width: 100% !important;
}

#site-footer .footer-phone {
  white-space: nowrap !important;
}


/* BOTTOM */

#site-footer .footer-bottom {
  width: 100% !important;
  max-width: 1500px !important;

  margin: 65px auto 0 !important;
  padding-top: 22px !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;

  align-items: center !important;
  gap: 30px !important;
}

#site-footer .footer-bottom > span:first-child {
  justify-self: start !important;
}

#site-footer .footer-status {
  justify-self: center !important;
}

#site-footer .footer-bottom > a {
  justify-self: end !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

  #site-footer {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  #site-footer .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 45px !important;
  }

  #site-footer .footer-contact {
    grid-column: 1 / -1 !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

  #site-footer {
    padding: 65px 24px 30px !important;
  }

  #site-footer .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 25px !important;
  }

  #site-footer .footer-brand {
    grid-column: 1 / -1 !important;
  }

  #site-footer .footer-contact {
    grid-column: 1 / -1 !important;
  }

  #site-footer .footer-bottom {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
  }

  #site-footer .footer-bottom > span:first-child,
  #site-footer .footer-status,
  #site-footer .footer-bottom > a {
    justify-self: center !important;
  }

}


@media (max-width: 450px) {

  #site-footer .footer-main {
    grid-template-columns: 1fr !important;
  }

  #site-footer .footer-brand,
  #site-footer .footer-contact {
    grid-column: auto !important;
  }

}
/* =========================================================
   FINAL 9xTECH FOOTER FIX
   ========================================================= */

.footer {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box;
}

.footer-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 58px 30px;
  box-sizing: border-box;
}

.footer-main {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(260px, 1.4fr)
    minmax(150px, 0.8fr)
    minmax(190px, 1fr)
    minmax(230px, 1fr);
  gap: 70px;
  align-items: start;
}

.footer-brand {
  min-width: 0;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-brand .brand-mark {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 24px;
  font-weight: 700;
}

.footer-brand .brand-name {
  font-size: 25px;
  white-space: nowrap;
}

.footer-brand p {
  max-width: 260px;
  margin-top: 22px;
  line-height: 1.7;
}

.footer-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.footer-heading {
  margin-bottom: 7px;
  white-space: nowrap;
}

.footer-navigation a,
.footer-navigation span {
  max-width: 100%;
}

.footer-contact {
  align-items: flex-start;
}

.footer-bottom {
  width: 100%;
  margin-top: 70px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  box-sizing: border-box;
}

.footer-bottom > :last-child {
  justify-self: end;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}


/* =========================================================
   CONTACT → FOOTER SPACING
   ========================================================= */

.whatsapp-contact-section {
  width: 100%;
  box-sizing: border-box;
}

.whatsapp-contact-card {
  width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .footer-inner {
    padding: 65px 28px 28px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 35px;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-bottom > :last-child {
    justify-self: start;
  }

}


@media (max-width: 560px) {

  .footer-inner {
    padding: 55px 20px 25px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-brand p {
    max-width: 300px;
  }

  .footer-bottom {
    margin-top: 45px;
  }

}
/* =========================================================
   FINAL 9xTECH FOOTER FIX
   ========================================================= */

.footer {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box;
}

.footer-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 58px 30px;
  box-sizing: border-box;
}

.footer-main {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(260px, 1.4fr)
    minmax(150px, 0.8fr)
    minmax(190px, 1fr)
    minmax(230px, 1fr);
  gap: 70px;
  align-items: start;
}

.footer-brand {
  min-width: 0;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-brand .brand-mark {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 24px;
  font-weight: 700;
}

.footer-brand .brand-name {
  font-size: 25px;
  white-space: nowrap;
}

.footer-brand p {
  max-width: 260px;
  margin-top: 22px;
  line-height: 1.7;
}

.footer-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.footer-heading {
  margin-bottom: 7px;
  white-space: nowrap;
}

.footer-navigation a,
.footer-navigation span {
  max-width: 100%;
}

.footer-contact {
  align-items: flex-start;
}

.footer-bottom {
  width: 100%;
  margin-top: 70px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  box-sizing: border-box;
}

.footer-bottom > :last-child {
  justify-self: end;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}


/* =========================================================
   CONTACT → FOOTER SPACING
   ========================================================= */

.whatsapp-contact-section {
  width: 100%;
  box-sizing: border-box;
}

.whatsapp-contact-card {
  width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .footer-inner {
    padding: 65px 28px 28px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 35px;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-bottom > :last-child {
    justify-self: start;
  }

}


@media (max-width: 560px) {

  .footer-inner {
    padding: 55px 20px 25px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-brand p {
    max-width: 300px;
  }

  .footer-bottom {
    margin-top: 45px;
  }

}