:root{
  --bg:#050a12;
  --bg2:#08111d;
  --panel:#0b1623;
  --text:#f4f8fc;
  --muted:#8c9bab;
  --line:rgba(255,255,255,.09);
  --cyan:#62e6ff;
  --cyan2:#1bb8e6;
  --white:#fff;
  --max:1180px;
  --ease:cubic-bezier(.2,.75,.2,1)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:
    radial-gradient(circle at 10% 20%,rgba(98,230,255,.035),transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden
}

::selection{
  background:rgba(98,230,255,.28);
  color:#fff
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .3s var(--ease)
}

button,
input,
textarea,
select{
  font:inherit
}

.container{
  width:min(var(--max),calc(100% - 48px));
  margin:auto
}

.page-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:30
}

.cursor-orb{
  position:fixed;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(98,230,255,.11),transparent 68%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
  transition:opacity .3s
}

/* =========================
   HEADER
   ========================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  border-bottom:1px solid transparent;
  transition:.35s var(--ease)
}

.site-header.scrolled{
  background:rgba(5,10,18,.82);
  backdrop-filter:blur(18px);
  border-color:var(--line)
}

.nav{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:11px
}

.logo-mark{
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid rgba(98,230,255,.55);
  color:var(--cyan);
  font-family:'Space Grotesk';
  font-weight:700;
  font-size:21px;
  transform:skew(-8deg);
  box-shadow:0 0 28px rgba(98,230,255,.1)
}

.logo-word{
  font-family:'Space Grotesk';
  font-size:16px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1
}

.logo-word small{
  display:block;
  font-family:'DM Sans';
  font-size:7px;
  letter-spacing:.35em;
  color:var(--muted);
  margin-top:5px
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:13px;
  color:#c7d0da
}

.nav-links>a:not(.nav-button){
  position:relative;
  transition:color .3s var(--ease),transform .3s var(--ease)
}

.nav-links>a:not(.nav-button):hover{
  color:#fff;
  transform:translateY(-2px)
}

.nav-links>a:not(.nav-button):after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(98,230,255,.8);
  transition:.3s
}

.nav-links>a:hover:after{
  width:100%
}

.nav-button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1px solid var(--line);
  padding:13px 18px;
  transition:.35s var(--ease);
  position:relative;
  overflow:hidden
}

.nav-button:before,
.btn:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,.28) 50%,
    transparent 75%
  );
  transform:translateX(-120%);
  transition:transform .7s var(--ease)
}

.nav-button:hover:before,
.btn:hover:before{
  transform:translateX(120%)
}

.nav-button{
  background:rgba(98,230,255,.08);
  border-color:rgba(98,230,255,.28);
  color:#e9fbff
}

.nav-button:hover,
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 35px rgba(23,185,230,.16);
  background:var(--cyan);
  color:#031019
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  width:42px;
  height:42px
}

.menu-toggle i{
  display:block;
  width:23px;
  height:1px;
  background:#fff;
  margin:7px auto
}

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

.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:135px 0 80px;
  background:
    radial-gradient(
      circle at 76% 35%,
      rgba(25,151,190,.13),
      transparent 30%
    ),
    linear-gradient(180deg,#06101b 0%,#050a12 85%)
}

.hero:before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  right:-250px;
  top:8%;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(98,230,255,.09),
    transparent 62%
  );
  filter:blur(10px);
  animation:heroPulse 6s ease-in-out infinite;
  pointer-events:none
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(5,10,18,.55),
      transparent 48%,
      rgba(5,10,18,.2)
    ),
    linear-gradient(
      0deg,
      rgba(5,10,18,.6),
      transparent 40%
    );
  pointer-events:none;
  z-index:1
}

.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(98,230,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98,230,255,.045) 1px,
      transparent 1px
    );
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
  animation:gridMove 18s linear infinite
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(12px);
  pointer-events:none
}

.glow-a{
  width:480px;
  height:480px;
  right:0;
  top:20%;
  background:radial-gradient(
    circle,
    rgba(45,201,239,.18),
    transparent 68%
  );
  animation:float 8s ease-in-out infinite
}

.glow-b{
  width:260px;
  height:260px;
  left:30%;
  bottom:0;
  background:radial-gradient(
    circle,
    rgba(22,107,152,.15),
    transparent 70%
  );
  animation:float 10s ease-in-out -2s infinite
}

.hero-ring{
  position:absolute;
  border:1px solid rgba(98,230,255,.08);
  border-radius:50%;
  pointer-events:none
}

.ring-a{
  width:620px;
  height:620px;
  right:-250px;
  top:15%;
  animation:spin 28s linear infinite
}

.ring-b{
  width:390px;
  height:390px;
  right:-135px;
  top:31%;
  border-style:dashed;
  animation:spin 18s linear reverse infinite
}

.hero-dots{
  position:absolute;
  width:260px;
  height:260px;
  right:13%;
  top:22%;
  background-image:radial-gradient(
    rgba(98,230,255,.35) 1px,
    transparent 1px
  );
  background-size:18px 18px;
  mask-image:radial-gradient(
    circle,
    black,
    transparent 68%
  );
  animation:dotsFloat 7s ease-in-out infinite
}

.hero-inner{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:80px;
  align-items:center;
  position:relative;
  z-index:3
}

.hero-copy{
  position:relative
}

.eyebrow{
  font-size:10px;
  letter-spacing:.22em;
  color:#aebbc8;
  font-weight:700;
  margin:0 0 22px;
  display:flex;
  align-items:center;
  gap:10px
}

.eyebrow span{
  width:25px;
  height:1px;
  background:var(--cyan);
  display:inline-block;
  box-shadow:0 0 12px var(--cyan)
}

.hero h1,
.inner-hero h1{
  font-family:'Space Grotesk';
  font-size:clamp(54px,7vw,92px);
  line-height:.92;
  letter-spacing:-.055em;
  margin:0;
  font-weight:600;
  text-wrap:balance;
  text-shadow:0 12px 50px rgba(0,0,0,.35)
}

.hero h1 em,
.inner-hero h1 em{
  font-style:normal;
  color:var(--cyan);
  text-shadow:0 0 50px rgba(98,230,255,.2);
  position:relative;
  display:inline-block;
  animation:textGlow 4s ease-in-out infinite
}

.hero-lead{
  max-width:560px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:30px 0
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.hero-actions .btn{
  min-height:48px
}

.btn{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em
}

.btn-primary{
  background:var(--cyan);
  color:#031019;
  border-color:var(--cyan)
}

.btn-primary:hover{
  box-shadow:
    0 15px 45px rgba(98,230,255,.25),
    0 0 35px rgba(98,230,255,.12)
}

.btn-outline{
  background:transparent;
  color:#d9e2e9
}

.btn-outline:hover{
  border-color:rgba(98,230,255,.45);
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(0,0,0,.25)
}

.hero-meta{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:42px;
  color:#687888;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:.18em
}

.hero-meta i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--cyan)
}

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

.hero-art{
  position:relative;
  filter:drop-shadow(0 35px 70px rgba(0,0,0,.3))
}

.art-window{
  height:590px;
  border:1px solid rgba(98,230,255,.18);
  background:#0a121c;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 40px 100px rgba(0,0,0,.42),
    inset 0 0 80px rgba(98,230,255,.025);
  transform:perspective(1000px) rotateY(-4deg);
  transition:transform .5s var(--ease)
}

.art-window:hover{
  transform:perspective(1000px) rotateY(0) translateY(-4px)
}

.art-window:after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(98,230,255,.08);
  pointer-events:none
}

.art-top{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:100%;
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.18em;
  color:#8fa0ae
}

.skyline{
  position:absolute;
  inset:0
}

.skyline img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.65) contrast(1.05);
  opacity:.66;
  transform:scale(1.08);
  animation:skyZoom 12s ease-in-out infinite alternate
}

.art-gradient{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(4,12,20,.2),
      rgba(4,10,17,.15) 35%,
      #07111c 100%
    ),
    linear-gradient(
      90deg,
      rgba(98,230,255,.08),
      transparent 50%
    )
}

.scan{
  position:absolute;
  left:0;
  top:-20%;
  height:1px;
  width:100%;
  background:rgba(98,230,255,.55);
  box-shadow:0 0 30px var(--cyan);
  animation:scan 6s linear infinite
}

.float-card{
  position:absolute;
  z-index:4;
  border:1px solid rgba(98,230,255,.22);
  background:rgba(5,14,23,.73);
  backdrop-filter:blur(13px);
  box-shadow:
    0 20px 50px rgba(0,0,0,.38),
    0 0 30px rgba(98,230,255,.04)
}

.card-a{
  right:22px;
  top:27%;
  padding:16px 18px;
  width:170px;
  animation:float 6s ease-in-out infinite
}

.card-a:hover,
.card-b:hover{
  border-color:rgba(98,230,255,.45)
}

.card-a small{
  display:block;
  font-size:7px;
  letter-spacing:.17em;
  color:#90a1b0
}

.card-a strong{
  font-family:'Space Grotesk';
  font-size:34px;
  color:var(--cyan);
  display:block;
  margin:6px 0
}

.card-a span{
  font-size:8px;
  color:#aab7c2
}

.card-b{
  left:22px;
  bottom:23%;
  padding:12px 16px;
  font-size:8px;
  letter-spacing:.15em;
  animation:float 7s ease-in-out -2s infinite
}

.card-b b{
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--cyan);
  border-radius:50%;
  margin-right:7px;
  box-shadow:0 0 10px var(--cyan)
}

.art-caption{
  position:absolute;
  z-index:5;
  bottom:23px;
  left:23px;
  right:23px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  letter-spacing:.18em
}

.art-caption span{
  color:var(--cyan)
}

.art-caption i{
  height:1px;
  flex:1;
  background:rgba(255,255,255,.3)
}

.scroll-cue{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  font-size:8px;
  letter-spacing:.2em;
  color:#637383;
  display:flex;
  align-items:center;
  gap:12px
}

.scroll-cue span{
  height:32px;
  width:1px;
  background:linear-gradient(var(--cyan),transparent);
  animation:scrollLine 1.8s ease-in-out infinite
}

/* =========================
   TICKER
   ========================= */

.ticker{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#07111b
}

.ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  gap:28px;
  padding:19px 0;
  animation:ticker 30s linear infinite
}

.ticker span{
  font-family:'Space Grotesk';
  font-size:12px;
  letter-spacing:.16em;
  color:#9aa9b6
}

.ticker b{
  color:var(--cyan);
  font-size:11px
}

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

.section{
  padding:130px 0;
  position:relative;
  overflow:hidden
}

.section:before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  left:-220px;
  top:15%;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(98,230,255,.055),
    transparent 68%
  );
  pointer-events:none
}

.about{
  background:linear-gradient(180deg,#050a12,#07101a);
  position:relative
}

.about-grid{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:80px
}

.section-index{
  display:flex;
  align-items:center;
  gap:13px;
  align-self:start;
  color:#647585;
  font-size:9px;
  letter-spacing:.2em
}

.section-index span{
  font-family:'Space Grotesk';
  color:var(--cyan);
  font-size:13px
}

.section-index i{
  height:1px;
  width:40px;
  background:var(--line)
}

.about-main{
  max-width:850px;
  position:relative
}

.about-main:after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:0;
  top:5%;
  border:1px solid rgba(98,230,255,.08);
  border-radius:50%;
  animation:spin 20s linear infinite;
  pointer-events:none
}

.about-main h2,
.section-head h2,
.content-grid h2,
.contact-info h2{
  font-family:'Space Grotesk';
  font-size:clamp(38px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0 0 28px;
  text-wrap:balance
}

.about-main h2 span,
.section-head h2 span,
.content-grid h2 span,
.contact-info h2 span{
  color:#687b8d
}

.about-main>p:not(.eyebrow){
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
  max-width:690px
}

.text-link{
  display:inline-flex;
  gap:15px;
  align-items:center;
  color:#eaf8fc;
  font-size:12px;
  font-weight:700;
  margin-top:20px;
  border-bottom:1px solid rgba(98,230,255,.35);
  padding-bottom:9px;
  position:relative;
  overflow:hidden
}

.text-link span{
  color:var(--cyan);
  transition:transform .35s var(--ease);
  display:inline-block
}

.text-link:hover{
  color:#fff;
  border-color:var(--cyan)
}

.text-link:hover span{
  transform:translate(5px,-3px)
}

/* =========================
   SECTION HEAD
   ========================= */

.section-head{
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:end;
  margin-bottom:55px
}

.section-head h2{
  margin-bottom:0
}

.section-head>p{
  max-width:360px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin:0
}

/* =========================
   SERVICE CARDS
   ========================= */

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.service-card{
  position:relative;
  min-height:330px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 55%
    );
  overflow:hidden;
  transition:.45s var(--ease);
  will-change:transform
}

.service-card:before{
  content:'';
  position:absolute;
  inset:auto -30% -55% -30%;
  height:180px;
  background:radial-gradient(
    circle,
    rgba(98,230,255,.15),
    transparent 67%
  );
  opacity:0;
  transition:.5s
}

.service-card:after,
.industry-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(98,230,255,.055) 50%,
      transparent 65%
    );
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
  pointer-events:none
}

.service-card:hover{
  transform:translateY(-8px);
  background:
    linear-gradient(
      145deg,
      rgba(98,230,255,.06),
      rgba(255,255,255,.015)
    );
  border-color:rgba(98,230,255,.18);
  box-shadow:
    inset 0 1px rgba(98,230,255,.2),
    0 25px 60px rgba(0,0,0,.18)
}

.service-card:hover:before{
  opacity:1
}

.service-card:hover:after,
.industry-card:hover:after{
  transform:translateX(120%)
}

.card-no{
  position:absolute;
  right:20px;
  top:20px;
  color:#536474;
  font-size:9px;
  letter-spacing:.15em
}

.service-icon{
  font-size:34px;
  color:var(--cyan);
  height:100px;
  display:flex;
  align-items:center;
  text-shadow:0 0 25px rgba(98,230,255,.25);
  transition:
    transform .45s var(--ease),
    text-shadow .45s var(--ease)
}

.service-card:hover .service-icon{
  transform:translateY(-5px) scale(1.05);
  text-shadow:0 0 35px rgba(98,230,255,.5)
}

.service-card h3{
  font-family:'Space Grotesk';
  font-size:21px;
  line-height:1.08;
  margin:0 0 13px;
  max-width:240px
}

.service-card p{
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  margin:0
}

.card-link{
  position:absolute;
  bottom:25px;
  font-size:10px;
  color:#c5d2dc;
  letter-spacing:.08em
}

.card-link b{
  color:var(--cyan);
  margin-left:7px;
  display:inline-block;
  transition:transform .35s var(--ease)
}

.service-card:hover .card-link b{
  transform:translate(5px,-3px)
}

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

.statement{
  min-height:650px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(24,143,179,.12),
      transparent 40%
    ),
    #07101a;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.statement-inner{
  text-align:center;
  position:relative
}

.statement-inner p{
  font-size:10px;
  letter-spacing:.35em;
  color:#728393
}

.statement-inner h2{
  font-family:'Space Grotesk';
  font-size:clamp(60px,10vw,140px);
  line-height:.82;
  letter-spacing:-.07em;
  margin:30px 0 50px;
  position:relative;
  z-index:2
}

.statement-inner h2 span{
  color:transparent;
  -webkit-text-stroke:1px rgba(98,230,255,.55)
}

.statement-ring{
  position:absolute;
  width:530px;
  height:530px;
  border:1px solid rgba(98,230,255,.12);
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-55%);
  box-shadow:0 0 90px rgba(98,230,255,.05);
  animation:spin 24s linear infinite
}

.statement-ring:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:var(--cyan);
  border-radius:50%;
  left:50%;
  top:-5px;
  box-shadow:0 0 25px var(--cyan)
}

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

.process{
  background:#050a12
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  position:relative
}

.process-line{
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan),
      transparent
    );
  opacity:.35;
  margin:0 5% -1px
}

.process-item{
  padding:28px 18px 0;
  text-align:center;
  position:relative
}

.process-item>span{
  font-size:9px;
  letter-spacing:.15em;
  color:var(--cyan)
}

.process-icon{
  font-size:28px;
  height:65px;
  display:grid;
  place-items:center;
  color:#c9d6df
}

.process-item h3{
  font-family:'Space Grotesk';
  font-size:18px;
  margin:10px 0
}

.process-item p{
  font-size:11px;
  color:var(--muted);
  line-height:1.7
}

/* =========================
   INDUSTRIES
   ========================= */

.industries{
  background:#07101a
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.industry-card{
  min-height:250px;
  padding:28px;
  position:relative;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:.4s;
  will-change:transform;
  overflow:hidden
}

.industry-card:hover{
  background:rgba(98,230,255,.035);
  transform:translateY(-4px)
}

.industry-icon{
  font-size:27px;
  color:var(--cyan);
  transition:
    transform .45s var(--ease),
    text-shadow .45s var(--ease)
}

.industry-card:hover .industry-icon{
  transform:translateY(-5px) scale(1.05);
  text-shadow:0 0 35px rgba(98,230,255,.5)
}

.industry-no{
  position:absolute;
  right:20px;
  top:20px;
  color:#566777;
  font-size:9px
}

.industry-card h3{
  font-family:'Space Grotesk';
  font-size:22px;
  max-width:260px;
  margin:45px 0 10px
}

.industry-card p{
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  max-width:320px
}

.industry-card a{
  font-size:10px;
  color:#dbe6ed;
  position:absolute;
  bottom:24px
}

.industry-card a b{
  color:var(--cyan);
  margin-left:7px;
  display:inline-block;
  transition:transform .35s var(--ease)
}

.industry-card:hover a b{
  transform:translate(5px,-3px)
}

/* =========================
   PACKAGES
   ========================= */

.packages{
  background:#050a12
}

.package-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

.package-card{
  padding:27px;
  background:#08111c;
  border:1px solid var(--line);
  min-height:520px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:.45s;
  transform-style:preserve-3d;
  will-change:transform
}

.package-card:after{
  content:'';
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  right:-90px;
  top:-90px;
  background:radial-gradient(
    circle,
    rgba(98,230,255,.12),
    transparent 70%
  )
}

.package-card:hover{
  transform:translateY(-7px);
  border-color:rgba(98,230,255,.25);
  box-shadow:
    0 30px 75px rgba(0,0,0,.28),
    0 0 35px rgba(98,230,255,.05)
}

.package-card.featured{
  border-color:rgba(98,230,255,.38);
  box-shadow:0 25px 70px rgba(0,0,0,.22)
}

.package-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#687a89;
  letter-spacing:.15em
}

.package-top b{
  color:var(--cyan);
  font-size:7px;
  border:1px solid rgba(98,230,255,.3);
  padding:6px 7px
}

.package-card h3{
  font-family:'Space Grotesk';
  font-size:28px;
  margin:55px 0 12px
}

.package-card>p{
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  min-height:60px
}

.price{
  font-family:'Space Grotesk';
  font-size:31px;
  margin:25px 0;
  color:#eefaff
}

.price small{
  font:400 9px 'DM Sans';
  color:#6f8292
}

.package-card ul{
  list-style:none;
  padding:0;
  margin:0 0 25px;
  border-top:1px solid var(--line);
  flex:1
}

.package-card li{
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:10px;
  color:#b7c4cf;
  display:flex;
  gap:8px
}

.package-card li span{
  color:var(--cyan)
}

.package-btn{
  border:1px solid var(--line);
  padding:12px;
  font-size:10px;
  text-align:center;
  transition:.35s var(--ease)
}

.package-btn:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  transform:translateX(4px);
  background:rgba(98,230,255,.045)
}

/* =========================
   CTA
   ========================= */

.final-cta{
  padding-top:80px
}

.cta-box{
  min-height:480px;
  border:1px solid rgba(98,230,255,.16);
  position:relative;
  overflow:hidden;
  padding:80px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(98,230,255,.12),
      transparent 30%
    ),
    #07111c;
  box-shadow:inset 0 0 100px rgba(98,230,255,.025)
}

.cta-box h2{
  font-family:'Space Grotesk';
  font-size:clamp(48px,7vw,88px);
  line-height:.92;
  letter-spacing:-.06em;
  margin:0 0 24px
}

.cta-box h2 span{
  color:var(--cyan);
  text-shadow:0 0 35px rgba(98,230,255,.2)
}

.cta-box>p:not(.eyebrow){
  max-width:570px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
  margin-bottom:28px
}

.cta-orbit{
  position:absolute;
  width:470px;
  height:470px;
  border:1px solid rgba(98,230,255,.08);
  border-radius:50%;
  right:-130px;
  top:0;
  animation:spin 25s linear infinite
}

.cta-orbit:after{
  content:'';
  position:absolute;
  top:50%;
  left:-5px;
  width:9px;
  height:9px;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 30px var(--cyan)
}

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

.footer{
  padding:80px 0 25px;
  border-top:1px solid var(--line);
  background:#04080e
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr .7fr .9fr 1fr;
  gap:50px
}

.footer-text{
  color:#657686;
  font-size:12px;
  line-height:1.8;
  max-width:310px;
  margin-top:25px
}

.footer-label{
  color:#b5c1ca;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:3px 0 18px
}

.footer-grid>div:not(:first-child)>a,
.footer-grid>div:not(:first-child)>span{
  display:block;
  color:#718291;
  font-size:11px;
  margin:0 0 12px
}

.footer-grid a:hover{
  color:var(--cyan)
}

.footer-grid>div:last-child>p:not(.footer-label){
  color:#657686;
  font-size:11px;
  line-height:1.7
}

.footer-cta{
  display:inline-flex!important;
  color:var(--cyan)!important;
  border-bottom:1px solid rgba(98,230,255,.3);
  padding-bottom:8px
}

.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:65px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#4e5f6f;
  font-size:9px;
  letter-spacing:.08em
}

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

.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:40;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#20c86a;
  color:#fff;
  font-size:22px;
  box-shadow:0 15px 35px rgba(0,0,0,.35);
  transition:.3s;
  animation:waPulse 2.8s ease-in-out infinite
}

.wa-float:hover{
  animation:none;
  transform:scale(1.12);
  box-shadow:0 15px 40px rgba(32,200,106,.28)
}

/* =========================
   INNER PAGES
   ========================= */

.inner-hero{
  padding:190px 0 105px;
  min-height:500px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(98,230,255,.12),
      transparent 32%
    ),
    linear-gradient(180deg,#07111c,#050a12)
}

.inner-hero:before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-160px;
  top:20px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(98,230,255,.08),
    transparent 65%
  );
  animation:heroPulse 7s ease-in-out infinite
}

.inner-hero:after{
  content:'';
  position:absolute;
  right:-160px;
  top:80px;
  width:470px;
  height:470px;
  border:1px solid rgba(98,230,255,.1);
  border-radius:50%;
  animation:spin 24s linear infinite
}

.inner-hero h1{
  font-size:clamp(58px,8vw,104px);
  max-width:950px
}

.inner-hero> .container>p:last-of-type{
  max-width:650px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin-top:30px
}

.content-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}

.rich-copy>p,
.large-copy{
  color:var(--muted);
  font-size:18px;
  line-height:1.8
}

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  margin-top:45px;
  border:1px solid var(--line)
}

.feature-list>div{
  background:var(--bg);
  padding:25px;
  min-height:180px;
  transition:
    transform .4s var(--ease),
    background .4s var(--ease)
}

.feature-list>div:hover{
  transform:translateY(-5px);
  background:#07121d
}

.feature-list b{
  color:var(--cyan);
  font-size:10px
}

.feature-list h3{
  font-family:'Space Grotesk';
  font-size:18px;
  margin:24px 0 8px
}

.feature-list p{
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin:0
}

.service-grid-large{
  grid-template-columns:repeat(3,1fr)
}

.detail-grid{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:90px;
  align-items:start
}

.detail-icon{
  height:260px;
  border:1px solid rgba(98,230,255,.18);
  display:grid;
  place-items:center;
  font-size:75px;
  color:var(--cyan);
  background:
    radial-gradient(
      circle,
      rgba(98,230,255,.08),
      transparent 60%
    )
}

.package-grid-page{
  grid-template-columns:repeat(2,1fr);
  max-width:950px
}

.custom-note{
  margin-top:30px;
  padding:25px;
  border:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:12px
}

.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px
}

.contact-info>p:not(.eyebrow){
  color:var(--muted);
  line-height:1.8;
  font-size:14px;
  max-width:480px
}

.contact-items{
  margin:40px 0;
  border-top:1px solid var(--line)
}

.contact-items>a,
.contact-items>div{
  display:block;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.contact-items small{
  display:block;
  color:#617383;
  font-size:8px;
  letter-spacing:.2em;
  margin-bottom:7px
}

.contact-items strong{
  font-family:'Space Grotesk';
  font-size:16px
}

.form-card{
  padding:32px;
  background:#08111c;
  border:1px solid var(--line)
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

form label{
  display:block;
  color:#8999a7;
  font-size:10px;
  letter-spacing:.05em;
  margin-bottom:18px
}

form input,
form textarea,
form select{
  width:100%;
  margin-top:8px;
  background:#050b13;
  color:#edf7fc;
  border:1px solid var(--line);
  padding:14px 15px;
  outline:none;
  resize:vertical
}

form input:focus,
form textarea:focus,
form select:focus{
  border-color:rgba(98,230,255,.5);
  box-shadow:0 0 0 3px rgba(98,230,255,.05)
}

.submit-btn{
  border:0;
  width:100%;
  margin-top:5px;
  cursor:pointer
}

.hp-wrap{
  position:absolute;
  left:-9999px;
  opacity:0
}

.error{
  display:block;
  color:#ff8d8d;
  font-size:9px;
  margin-top:5px
}

.success-mark{
  width:60px;
  height:60px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  display:grid;
  place-items:center;
  font-size:24px;
  margin-bottom:35px
}

.error-code{
  font:600 15px 'Space Grotesk';
  color:var(--cyan);
  letter-spacing:.2em
}

.error-page{
  min-height:80vh
}

/* =========================
   REVEAL ANIMATION
   ========================= */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease)
}

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

.delay-1{
  transition-delay:.1s
}

.delay-2{
  transition-delay:.2s
}

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

@media(max-width:1050px){

  .hero-inner{
    grid-template-columns:1fr;
    gap:45px
  }

  .hero-copy{
    max-width:760px
  }

  .hero-art{
    max-width:700px;
    width:100%;
    margin:auto
  }

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

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

  .process-grid{
    grid-template-columns:repeat(5,180px);
    overflow-x:auto;
    padding-bottom:12px
  }

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

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

  .footer-grid>div:last-child{
    grid-column:2/4
  }

  .about-grid{
    gap:45px
  }

  .section-index{
    display:none
  }

  .content-grid,
  .contact-grid{
    gap:50px
  }
}

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

@media(max-width:760px){

  .container{
    width:calc(100% - 30px)
  }

  .nav{
    height:68px
  }

  .logo-mark{
    width:34px;
    height:34px
  }

  .logo-word{
    font-size:14px
  }

  .menu-toggle{
    display:block
  }

  .nav-links{
    position:absolute;
    left:12px;
    right:12px;
    top:68px;
    padding:18px;
    background:rgba(5,10,18,.96);
    border:1px solid var(--line);
    border-radius:14px;
    backdrop-filter:blur(18px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-shadow:0 25px 60px rgba(0,0,0,.45)
  }

  .nav-links.open{
    display:flex
  }

  .nav-links>a{
    padding:15px 7px;
    border-bottom:1px solid var(--line)
  }

  .nav-links>a:last-child{
    border-bottom:0
  }

  .nav-button{
    text-align:center;
    margin-top:8px
  }

  /* HERO MOBILE */

  .hero{
    min-height:auto;
    padding:118px 0 70px
  }

  .hero:before{
    width:420px;
    height:420px;
    right:-220px;
    top:5%
  }

  .hero-inner{
    display:flex;
    flex-direction:column;
    gap:38px;
    align-items:stretch
  }

  .hero-copy{
    width:100%
  }

  .eyebrow{
    font-size:9px;
    margin-bottom:18px
  }

  .hero h1{
    font-size:clamp(47px,14vw,67px);
    line-height:.94;
    letter-spacing:-.065em;
    max-width:100%
  }

  .hero-lead{
    font-size:14px;
    line-height:1.65;
    margin:22px 0
  }

  .hero-actions{
    gap:10px
  }

  .hero-actions .btn{
    flex:1 1 auto;
    min-width:135px
  }

  .hero-meta{
    margin-top:24px;
    flex-wrap:wrap
  }

  .hero-art{
    width:100%
  }

  .art-window{
    height:360px;
    transform:none
  }

  .card-a{
    width:130px;
    padding:12px;
    right:10px;
    top:20%
  }

  .card-a strong{
    font-size:28px
  }

  .card-b{
    left:10px;
    bottom:18%
  }

  .scroll-cue{
    display:none
  }

  /* ABOUT MOBILE FIX */

  .about-grid{
    grid-template-columns:1fr;
    gap:0
  }

  .section-index{
    display:flex;
    margin-bottom:25px
  }

  .about-main{
    max-width:100%
  }

  .about-main h2,
  .section-head h2,
  .content-grid h2,
  .contact-info h2{
    font-size:clamp(39px,11.5vw,55px);
    line-height:1;
    letter-spacing:-.055em
  }

  .about-main>p:not(.eyebrow){
    font-size:14px;
    line-height:1.75
  }

  .about-main:after{
    width:90px;
    height:90px;
    right:-25px;
    top:10%;
    opacity:.5
  }

  /* SECTIONS */

  .section{
    padding:78px 0
  }

  .section-head{
    display:block;
    margin-bottom:32px
  }

  .section-head>p{
    margin-top:20px;
    font-size:13px;
    line-height:1.7
  }

  /* SERVICES */

  .service-grid,
  .service-grid-large,
  .industry-grid{
    grid-template-columns:1fr
  }

  .service-card{
    min-height:280px;
    padding:24px
  }

  .industry-card{
    min-height:225px;
    padding:24px
  }

  /* STATEMENT */

  .statement{
    min-height:530px
  }

  .statement-ring{
    width:330px;
    height:330px
  }

  .statement-inner h2{
    font-size:clamp(55px,17vw,78px)
  }

  /* PROCESS */

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

  .process-line{
    display:none
  }

  .process-item{
    padding:20px 5px
  }

  /* PACKAGES */

  .package-grid,
  .package-grid-page{
    grid-template-columns:1fr
  }

  .package-card{
    min-height:450px
  }

  /* CTA */

  .cta-box{
    padding:48px 24px;
    min-height:430px
  }

  .cta-box h2{
    font-size:clamp(46px,13vw,66px)
  }

  .cta-orbit{
    width:330px;
    height:330px;
    right:-170px
  }

  /* FOOTER */

  .footer{
    padding-top:60px
  }

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

  .footer-grid>div:last-child{
    grid-column:auto
  }

  .footer-bottom{
    display:block;
    line-height:2;
    font-size:8px
  }

  .footer-bottom span{
    display:block
  }

  /* INNER PAGES */

  .inner-hero{
    padding:150px 0 80px
  }

  .inner-hero h1{
    font-size:clamp(53px,15vw,78px)
  }

  .content-grid,
  .contact-grid,
  .detail-grid{
    grid-template-columns:1fr;
    gap:35px
  }

  .feature-list{
    grid-template-columns:1fr
  }

  .detail-icon{
    height:190px
  }

  .form-row{
    grid-template-columns:1fr
  }

  .custom-note{
    display:block
  }

  .custom-note .text-link{
    margin-top:12px
  }

  .cursor-orb{
    display:none
  }

  .wa-float{
    width:50px;
    height:50px;
    right:16px;
    bottom:16px
  }
}

/* SMALL MOBILE */

@media(max-width:390px){

  .hero h1{
    font-size:46px
  }

  .hero-actions{
    flex-direction:column
  }

  .hero-actions .btn{
    width:100%
  }

  .art-window{
    height:330px
  }
}

/* =========================
   KEYFRAMES
   ========================= */

@keyframes gridMove{
  to{
    background-position:70px 70px
  }
}

@keyframes float{
  0%,100%{
    transform:translateY(0)
  }

  50%{
    transform:translateY(-12px)
  }
}

@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}

@keyframes dotsFloat{
  0%,100%{
    transform:translate(0,0)
  }

  50%{
    transform:translate(-10px,12px)
  }
}

@keyframes skyZoom{
  from{
    transform:scale(1.08)
  }

  to{
    transform:scale(1.15)
  }
}

@keyframes scan{
  from{
    top:-10%
  }

  to{
    top:110%
  }
}

@keyframes scrollLine{
  0%,100%{
    opacity:.25;
    transform:scaleY(.7);
    transform-origin:top
  }

  50%{
    opacity:1;
    transform:scaleY(1);
    transform-origin:top
  }
}

@keyframes ticker{
  to{
    transform:translateX(-50%)
  }
}

@keyframes heroPulse{
  0%,100%{
    transform:scale(.95);
    opacity:.55
  }

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

@keyframes textGlow{
  0%,100%{
    text-shadow:0 0 25px rgba(98,230,255,.12)
  }

  50%{
    text-shadow:0 0 55px rgba(98,230,255,.3)
  }
}

@keyframes waPulse{
  0%,100%{
    box-shadow:
      0 15px 35px rgba(0,0,0,.35),
      0 0 0 0 rgba(32,200,106,.28)
  }

  50%{
    box-shadow:
      0 15px 35px rgba(0,0,0,.35),
      0 0 0 10px rgba(32,200,106,0)
  }
}

/* =========================
   REDUCED MOTION
   ========================= */

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

  *,
  *:before,
  *:after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }

  .reveal{
    opacity:1;
    transform:none
  }

  .hero:before,
  .hero h1 em,
  .wa-float{
    animation:none!important
  }
}

/* =========================================================
   ZENTRON FUTURISTIC ANIMATED HERO
========================================================= */

.zt-hero {
    position: relative;
    min-height: 820px;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 35%, rgba(0, 229, 255, .12), transparent 25%),
        radial-gradient(circle at 25% 70%, rgba(139, 92, 246, .12), transparent 30%),
        #030712;
    color: #fff;
    isolation: isolate;
}

.zt-hero-container {
    min-height: 820px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 5;
}


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

.zt-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.zt-grid {
    position: absolute;
    inset: -50%;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: perspective(600px) rotateX(62deg);
    animation: gridMove 18s linear infinite;
    opacity: .5;
}

@keyframes gridMove {
    from {
        transform: perspective(600px) rotateX(62deg) translateY(0);
    }

    to {
        transform: perspective(600px) rotateX(62deg) translateY(70px);
    }
}


/* ================= GLOWING ORBS ================= */

.zt-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    animation: orbFloat 8s ease-in-out infinite;
}

.orb-1 {
    width: 350px;
    height: 350px;
    background: #00e5ff;
    top: 5%;
    right: 10%;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: #8b5cf6;
    bottom: 5%;
    left: 10%;
    animation-delay: -3s;
}

.orb-3 {
    width: 180px;
    height: 180px;
    background: #ec4899;
    top: 45%;
    right: 35%;
    animation-delay: -5s;
}

@keyframes orbFloat {

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

    50% {
        transform: translate3d(30px,-40px,0) scale(1.12);
    }

}


/* ================= ROTATING RINGS ================= */

.zt-ring {
    position: absolute;
    border: 1px solid rgba(0,229,255,.22);
    border-radius: 50%;
    animation: ringRotate 20s linear infinite;
}

.ring-1 {
    width: 600px;
    height: 600px;
    right: -200px;
    top: 80px;
}

.ring-2 {
    width: 850px;
    height: 850px;
    right: -320px;
    top: -50px;
    border-color: rgba(139,92,246,.16);
    animation-duration: 30s;
    animation-direction: reverse;
}

@keyframes ringRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ================= PARTICLES ================= */

.zt-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #7dd3fc;
    border-radius: 50%;
    box-shadow: 0 0 12px #00e5ff;
    animation: particleMove 6s linear infinite;
}

.zt-particles span:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; }
.zt-particles span:nth-child(2) { left: 18%; top: 70%; animation-delay: 1s; }
.zt-particles span:nth-child(3) { left: 32%; top: 35%; animation-delay: 2s; }
.zt-particles span:nth-child(4) { left: 45%; top: 15%; animation-delay: 3s; }
.zt-particles span:nth-child(5) { left: 55%; top: 80%; animation-delay: 1.5s; }
.zt-particles span:nth-child(6) { left: 70%; top: 25%; animation-delay: 4s; }
.zt-particles span:nth-child(7) { left: 82%; top: 65%; animation-delay: 2.5s; }
.zt-particles span:nth-child(8) { left: 90%; top: 35%; animation-delay: 3.5s; }
.zt-particles span:nth-child(9) { left: 60%; top: 50%; animation-delay: 5s; }
.zt-particles span:nth-child(10) { left: 25%; top: 85%; animation-delay: 4.5s; }
.zt-particles span:nth-child(11) { left: 75%; top: 85%; animation-delay: 1.8s; }
.zt-particles span:nth-child(12) { left: 40%; top: 55%; animation-delay: 3.8s; }

@keyframes particleMove {

    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(-120px);
        opacity: 0;
    }

}


/* ================= CONTENT ================= */

.zt-hero-content {
    width: 52%;
    position: relative;
    z-index: 10;
}

.zt-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border: 1px solid rgba(0,229,255,.25);
    border-radius: 50px;
    background: rgba(0,229,255,.06);
    backdrop-filter: blur(10px);
    color: #8be9ff;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    animation: fadeUp .8s ease both;
}

.zt-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 15px #22d3ee;
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {

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

    50% {
        transform: scale(1.8);
        opacity: .5;
    }

}


.zt-hero h1 {
    font-size: clamp(55px, 6vw, 92px);
    line-height: .98;
    letter-spacing: -4px;
    font-weight: 800;
    margin: 0 0 28px;
    animation: fadeUp 1s .15s ease both;
}

.zt-hero h1 span {
    display: block;
    background: linear-gradient(
        90deg,
        #22d3ee,
        #8b5cf6,
        #ec4899,
        #22d3ee
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        gradientMove 5s linear infinite,
        textGlow 3s ease-in-out infinite;
}

@keyframes gradientMove {

    0% {
        background-position: 0%;
    }

    100% {
        background-position: 300%;
    }

}

@keyframes textGlow {

    0%,100% {
        filter: drop-shadow(0 0 5px rgba(34,211,238,.1));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(139,92,246,.4));
    }

}


.zt-hero-content > p {
    max-width: 620px;
    color: #aab6c8;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
    animation: fadeUp 1s .3s ease both;
}


/* ================= BUTTONS ================= */

.zt-hero-buttons {
    display: flex;
    gap: 14px;
    animation: fadeUp 1s .45s ease both;
}

.zt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 23px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}

.zt-btn-primary {
    color: #001014 !important;
    background: linear-gradient(135deg,#22d3ee,#67e8f9);
    box-shadow: 0 0 35px rgba(34,211,238,.25);
}

.zt-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 55px rgba(34,211,238,.5);
}

.zt-btn-outline {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
}

.zt-btn-outline:hover {
    transform: translateY(-5px);
    border-color: #22d3ee;
    background: rgba(34,211,238,.08);
}


/* ================= STATS ================= */

.zt-hero-stats {
    display: flex;
    gap: 45px;
    margin-top: 50px;
    animation: fadeUp 1s .6s ease both;
}

.zt-hero-stats div {
    display: flex;
    flex-direction: column;
}

.zt-hero-stats strong {
    font-size: 25px;
    color: #fff;
}

.zt-hero-stats small {
    color: #728096;
    margin-top: 5px;
}


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

.zt-hero-visual {
    width: 48%;
    min-height: 600px;
    position: relative;
    perspective: 1000px;
    transition: transform .2s ease-out;
}

.zt-glow-main {
    position: absolute;
    width: 430px;
    height: 430px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(34,211,238,.22),
        rgba(139,92,246,.12),
        transparent 70%
    );
    filter: blur(10px);
}


/* ================= DASHBOARD ================= */

.zt-dashboard {
    position: absolute;
    width: 430px;
    height: 330px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotateY(-10deg) rotateX(5deg);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 24px;
    background: rgba(8,15,30,.68);
    backdrop-filter: blur(20px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.5),
        0 0 60px rgba(34,211,238,.12);
    animation: dashboardFloat 5s ease-in-out infinite;
}

@keyframes dashboardFloat {

    0%,100% {
        transform:
            translate(-50%,-50%)
            rotateY(-10deg)
            rotateX(5deg)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%,-50%)
            rotateY(-5deg)
            rotateX(8deg)
            translateY(-18px);
    }

}


.zt-dashboard-top {
    height: 42px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 7px;
}

.zt-dashboard-top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
}

.zt-dashboard-top span:first-child {
    background: #22d3ee;
}


.zt-dashboard-body {
    padding: 35px;
}

.zt-mini-label {
    color: #64748b;
    font-size: 11px;
    letter-spacing: 2px;
}

.zt-chart {
    height: 130px;
    display: flex;
    align-items: end;
    gap: 12px;
    margin-top: 30px;
}

.zt-chart .bar {
    flex: 1;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(
        to top,
        #06b6d4,
        #8b5cf6
    );
    animation: barPulse 2.5s ease-in-out infinite;
    transform-origin: bottom;
}

.b1 { height: 35%; animation-delay: .1s; }
.b2 { height: 55%; animation-delay: .3s; }
.b3 { height: 45%; animation-delay: .5s; }
.b4 { height: 75%; animation-delay: .7s; }
.b5 { height: 65%; animation-delay: .9s; }
.b6 { height: 95%; animation-delay: 1.1s; }

@keyframes barPulse {

    0%,100% {
        transform: scaleY(.85);
    }

    50% {
        transform: scaleY(1.08);
    }

}

.zt-growth {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.zt-growth strong {
    font-size: 25px;
    color: #22d3ee;
}

.zt-growth span {
    color: #64748b;
}


/* ================= FLOATING CARDS ================= */

.zt-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: rgba(10,18,35,.7);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    z-index: 10;
    white-space: nowrap;
}

.zt-float-card strong {
    display: block;
    font-size: 12px;
}

.zt-float-card small {
    display: block;
    color: #64748b;
    font-size: 10px;
    margin-top: 3px;
}

.float-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(34,211,238,.12);
    color: #22d3ee;
}

.float-icon.purple {
    background: rgba(139,92,246,.14);
    color: #a78bfa;
}

.float-icon.green {
    background: rgba(34,197,94,.12);
    color: #4ade80;
}

.card-one {
    left: 0;
    top: 22%;
    animation: cardFloat 4s ease-in-out infinite;
}

.card-two {
    right: -15px;
    top: 48%;
    animation: cardFloat 4.5s ease-in-out infinite -1.5s;
}

.card-three {
    left: 10%;
    bottom: 12%;
    animation: cardFloat 5s ease-in-out infinite -2s;
}

@keyframes cardFloat {

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

    50% {
        transform: translateY(-18px) rotate(2deg);
    }

}


/* ================= REVEAL ================= */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

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

}


/* ================= SCROLL ================= */

.zt-scroll {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #64748b;
    font-size: 9px;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.zt-scroll span {
    width: 20px;
    height: 32px;
    border: 1px solid #475569;
    border-radius: 20px;
    position: relative;
}

.zt-scroll span::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 7px;
    border-radius: 5px;
    background: #22d3ee;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    animation: scrollMove 1.5s infinite;
}

@keyframes scrollMove {

    0% {
        opacity: 0;
        transform: translate(-50%,0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%,12px);
    }

}


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

@media (max-width: 900px) {

    .zt-hero {
        min-height: auto;
        padding: 120px 0 80px;
    }

    .zt-hero-container {
        min-height: auto;
        flex-direction: column;
        text-align: center;
    }

    .zt-hero-content,
    .zt-hero-visual {
        width: 100%;
    }

    .zt-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .zt-hero h1 {
        font-size: clamp(45px, 12vw, 70px);
        letter-spacing: -2px;
    }

    .zt-hero-content > p {
        font-size: 16px;
    }

    .zt-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .zt-hero-visual {
        min-height: 480px;
        transform: none !important;
    }

    .zt-dashboard {
        width: min(430px, 88vw);
    }

    .card-one {
        left: 2%;
    }

    .card-two {
        right: 0;
    }

}

@media (max-width: 600px) {

    .zt-hero {
        padding-top: 105px;
    }

    .zt-badge {
        font-size: 9px;
    }

    .zt-hero h1 {
        font-size: 48px;
    }

    .zt-hero-content > p {
        padding: 0 8px;
    }

    .zt-hero-buttons {
        width: 100%;
        flex-direction: column;
    }

    .zt-btn {
        width: 100%;
    }

    .zt-hero-stats {
        gap: 22px;
        justify-content: center;
    }

    .zt-hero-stats strong {
        font-size: 20px;
    }

    .zt-hero-stats small {
        font-size: 10px;
    }

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

    .zt-dashboard {
        width: 90vw;
        height: 270px;
    }

    .zt-dashboard-body {
        padding: 22px;
    }

    .zt-chart {
        height: 90px;
        gap: 7px;
    }

    .zt-float-card {
        transform: scale(.8);
    }

    .card-one {
        left: -20px;
        top: 18%;
    }

    .card-two {
        right: -20px;
        top: 52%;
    }

    .card-three {
        left: 0;
        bottom: 5%;
    }

    .zt-ring {
        opacity: .5;
    }

}

/* =========================================================
   WHATSAPP PREMIUM FLOATING BUTTON
========================================================= */

.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 9999;
    text-decoration: none !important;

    background: #25d366;
    color: white;

    box-shadow:
        0 10px 35px rgba(0,0,0,.35),
        0 0 25px rgba(37,211,102,.35);

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

    animation: waFloat 3s ease-in-out infinite;
}


.wa-icon {
    position: relative;
    z-index: 2;
    font-size: 27px;
}


.wa-float:hover {
    transform: scale(1.12);
    box-shadow:
        0 15px 45px rgba(0,0,0,.4),
        0 0 40px rgba(37,211,102,.6);
}


.wa-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(37,211,102,.7);
    animation: waPulse 2s infinite;
}


@keyframes waFloat {

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

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

}


@keyframes waPulse {

    0% {
        transform: scale(1);
        opacity: .8;
    }

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

}


@media (max-width:600px) {

    .wa-float {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 18px;
    }

    .wa-icon {
        font-size: 24px;
    }

}

/* =========================================================
   ZENTRON ANIMATED SERVICES
========================================================= */

.zt-services {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 225, 255, .07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(130, 70, 255, .08),
            transparent 30%
        );
}


/* BACKGROUND */

.zt-services-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}


.service-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    animation: serviceOrbMove 10s ease-in-out infinite alternate;
}


.service-orb-1 {
    width: 260px;
    height: 260px;
    background: #00e5ff;
    top: 15%;
    left: -100px;
}


.service-orb-2 {
    width: 300px;
    height: 300px;
    background: #7c3cff;
    right: -120px;
    top: 35%;
    animation-delay: -3s;
}


.service-orb-3 {
    width: 180px;
    height: 180px;
    background: #00aaff;
    bottom: 5%;
    left: 45%;
    animation-delay: -6s;
}


@keyframes serviceOrbMove {

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

    50% {
        transform: translate3d(40px, -30px, 0) scale(1.12);
    }

    100% {
        transform: translate3d(-30px, 40px, 0) scale(.92);
    }

}



/* =========================================================
   HEADER
========================================================= */

.zt-services-head {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 55px;
}


.zt-services-head h2 {
    max-width: 700px;
    margin: 12px 0 15px;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -2px;
}


.zt-services-head h2 span {
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6,
            #d946ef
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    background-size: 200% auto;

    animation:
        serviceGradient 5s linear infinite;
}


@keyframes serviceGradient {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }

}


.zt-services-description {
    max-width: 600px;
    margin: 0;

    color: rgba(220,230,245,.68);
    line-height: 1.7;
}


.zt-services-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 15px;

    padding: 15px 22px;

    border: 1px solid rgba(0,225,255,.45);
    border-radius: 999px;

    color: #fff;
    text-decoration: none;

    background:
        rgba(0,225,255,.04);

    box-shadow:
        inset 0 0 20px rgba(0,225,255,.03),
        0 0 25px rgba(0,225,255,.05);

    transition:
        .35s ease;
}


.zt-services-button span {
    font-size: 20px;

    transition:
        transform .35s ease;
}


.zt-services-button:hover {
    border-color: #00e5ff;

    background:
        rgba(0,225,255,.09);

    box-shadow:
        0 0 35px rgba(0,225,255,.16);

    transform: translateY(-3px);
}


.zt-services-button:hover span {
    transform: translate(5px,-5px);
}



/* =========================================================
   SERVICE GRID
========================================================= */

.zt-service-showcase {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 18px;
}



/* =========================================================
   SERVICE CARD
========================================================= */

.zt-service-card {
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 24px;

    border-radius: 24px;

    border:
        1px solid rgba(90,150,255,.25);

    background:
        linear-gradient(
            145deg,
            rgba(13,27,55,.9),
            rgba(4,11,28,.88)
        );

    color: inherit;
    text-decoration: none;

    isolation: isolate;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;

    animation:
        serviceCardFloat 6s ease-in-out infinite;
}


.zt-service-card:nth-child(2) {
    animation-delay: -1s;
}


.zt-service-card:nth-child(3) {
    animation-delay: -2s;
}


.zt-service-card:nth-child(4) {
    animation-delay: -3s;
}


.zt-service-card:nth-child(5) {
    animation-delay: -4s;
}


.zt-service-card:nth-child(6) {
    animation-delay: -5s;
}


.zt-service-card:nth-child(7) {
    animation-delay: -2.5s;
}


.zt-service-card:nth-child(8) {
    animation-delay: -4.5s;
}


@keyframes serviceCardFloat {

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

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

}


.zt-service-card:hover {
    transform:
        translateY(-12px)
        scale(1.015);

    border-color:
        rgba(0,225,255,.75);

    box-shadow:
        0 20px 70px rgba(0,0,0,.45),
        0 0 35px rgba(0,225,255,.12),
        inset 0 0 40px rgba(0,225,255,.035);

    animation-play-state: paused;
}



/* moving shine */

.zt-service-card::before {
    content: "";

    position: absolute;

    width: 180%;
    height: 80px;

    left: -140%;
    top: 40%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform:
        rotate(-25deg);

    transition:
        left .8s ease;

    pointer-events: none;
}


.zt-service-card:hover::before {
    left: 120%;
}



/* top light */

.zt-service-card::after {
    content: "";

    position: absolute;

    top: -1px;
    left: 15%;

    width: 70%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00e5ff,
            #8b5cf6,
            transparent
        );

    filter:
        drop-shadow(
            0 0 10px #00e5ff
        );

    opacity: .8;
}



/* =========================================================
   CARD LIGHT
========================================================= */

.zt-service-light {
    position: absolute;

    width: 180px;
    height: 180px;

    top: 80px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,225,255,.18),
            transparent 70%
        );

    filter: blur(15px);

    opacity: .6;

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


.zt-service-card:nth-child(even)
.zt-service-light {
    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.20),
            transparent 70%
        );
}


.zt-service-card:hover
.zt-service-light {

    transform:
        translateX(-50%)
        scale(1.5);

    opacity: 1;
}



/* =========================================================
   NUMBER
========================================================= */

.zt-service-number {
    position: relative;
    z-index: 4;

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

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

    letter-spacing: 2px;

    color:
        #00e5ff;
}


.zt-service-card:nth-child(even)
.zt-service-number {
    color:
        #9d7aff;
}



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

.zt-service-visual {
    position: relative;

    height: 190px;

    display: grid;
    place-items: center;

    margin-top: 5px;
}


.zt-service-visual-glow {
    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,225,255,.25),
            transparent 70%
        );

    filter: blur(20px);

    animation:
        visualGlow 3s ease-in-out infinite;
}


.zt-service-card:nth-child(even)
.zt-service-visual-glow {
    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.28),
            transparent 70%
        );
}


@keyframes visualGlow {

    0%,100% {
        transform: scale(.85);
        opacity: .6;
    }

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

}



/* =========================================================
   ICON
========================================================= */

.zt-service-icon {
    position: relative;
    z-index: 3;

    width: 105px;
    height: 105px;

    display: grid;
    place-items: center;

    border-radius: 28px;

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

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

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(0,225,255,.16),
            rgba(40,80,160,.10)
        );

    border:
        1px solid rgba(0,225,255,.5);

    box-shadow:
        0 0 35px rgba(0,225,255,.20),
        inset 0 0 25px rgba(0,225,255,.08);

    backdrop-filter:
        blur(15px);

    animation:
        serviceIconFloat 4s ease-in-out infinite;

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.zt-service-card:nth-child(even)
.zt-service-icon {

    border-color:
        rgba(139,92,246,.65);

    box-shadow:
        0 0 35px rgba(139,92,246,.22),
        inset 0 0 25px rgba(139,92,246,.10);

}


.zt-service-card:hover
.zt-service-icon {

    transform:
        translateY(-8px)
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 0 55px rgba(0,225,255,.35),
        inset 0 0 35px rgba(0,225,255,.12);

}


@keyframes serviceIconFloat {

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

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

}



/* =========================================================
   ROTATING RINGS
========================================================= */

.zt-service-orbit {
    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    border:
        1px solid rgba(0,225,255,.30);

    animation:
        serviceOrbit 8s linear infinite;
}


.zt-service-orbit::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 8px;
    left: 50%;

    border-radius: 50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 15px #00e5ff;
}


.orbit-two {
    width: 115px;
    height: 115px;

    border-color:
        rgba(139,92,246,.30);

    animation:
        serviceOrbitReverse 6s linear infinite;
}


.orbit-two::after {
    background:
        #9d7aff;

    box-shadow:
        0 0 15px #9d7aff;
}


@keyframes serviceOrbit {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes serviceOrbitReverse {

    to {
        transform:
            rotate(-360deg);
    }

}



/* =========================================================
   PARTICLES
========================================================= */

.service-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #00e5ff;

    box-shadow:
        0 0 12px #00e5ff;

    animation:
        serviceParticle 4s ease-in-out infinite;
}


.particle-one {
    top: 30px;
    left: 18%;
}


.particle-two {
    top: 70px;
    right: 14%;

    animation-delay:
        -1s;
}


.particle-three {
    bottom: 25px;
    left: 25%;

    animation-delay:
        -2s;
}


.particle-four {
    bottom: 50px;
    right: 24%;

    animation-delay:
        -3s;
}


@keyframes serviceParticle {

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

        opacity: .5;
    }

    50% {
        transform:
            translateY(-18px)
            scale(1.5);

        opacity: 1;
    }

}



/* =========================================================
   CONTENT
========================================================= */

.zt-service-content {
    position: relative;
    z-index: 5;

    margin-top: auto;
}


.zt-service-content h3 {
    margin: 0 0 10px;

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

    font-size: 22px;

    line-height: 1.15;

    color: #fff;
}


.zt-service-content p {
    min-height: 48px;

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color:
        rgba(220,230,245,.62);
}



/* =========================================================
   BOTTOM
========================================================= */

.zt-service-bottom {
    display: flex;

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

    margin-top: 20px;
}


.zt-service-bottom > span:first-child {

    color:
        #00e5ff;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .3s ease;
}


.zt-service-bottom b {
    display: inline-block;

    margin-left: 5px;

    transition:
        transform .3s ease;
}


.zt-service-arrow {

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(0,225,255,.55);

    color:
        #00e5ff;

    font-size: 18px;

    transition:
        .35s ease;
}


.zt-service-card:hover
.zt-service-bottom > span:first-child {
    transform:
        translateX(4px);
}


.zt-service-card:hover
.zt-service-bottom b {
    transform:
        translateX(5px);
}


.zt-service-card:hover
.zt-service-arrow {

    transform:
        rotate(45deg)
        scale(1.08);

    background:
        #00e5ff;

    color:
        #03101c;

    box-shadow:
        0 0 25px rgba(0,225,255,.4);
}



/* =========================================================
   BOTTOM FEATURES
========================================================= */

.zt-service-features {

    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 35px;

    margin-top: 55px;

    padding-top: 30px;

    border-top:
        1px solid rgba(120,150,190,.13);
}


.zt-service-features > div {

    display: grid;

    grid-template-columns:
        auto auto;

    column-gap: 12px;

    align-items: center;
}


.zt-service-features > div > span {

    grid-row:
        span 2;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color:
        #00e5ff;

    border:
        1px solid rgba(0,225,255,.25);

    background:
        rgba(0,225,255,.05);

    box-shadow:
        0 0 20px rgba(0,225,255,.06);

    animation:
        featurePulse 3s ease-in-out infinite;
}


.zt-service-features strong {

    color: #fff;

    font-size: 14px;
}


.zt-service-features small {

    color:
        rgba(220,230,245,.45);

    font-size: 11px;

}


.zt-service-features > i {

    width: 1px;
    height: 35px;

    background:
        rgba(120,150,190,.2);
}


@keyframes featurePulse {

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

    50% {
        transform: scale(1.08);
    }

}



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

@media (max-width:1100px) {

    .zt-service-showcase {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .zt-service-card {
        min-height: 420px;
    }

}



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

@media (max-width:700px) {

    .zt-services-head {

        display: block;

        margin-bottom: 35px;

    }


    .zt-services-head h2 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }


    .zt-services-description {

        font-size: 14px;

        margin-top: 15px;

    }


    .zt-services-button {

        margin-top: 25px;

    }


    .zt-service-showcase {

        grid-template-columns:
            1fr;

        gap: 16px;

    }


    .zt-service-card {

        min-height: 400px;

        border-radius: 22px;

    }


    .zt-service-visual {

        height: 175px;

    }


    .zt-service-icon {

        width: 92px;
        height: 92px;

        font-size: 36px;

    }


    .zt-service-orbit {

        width: 130px;
        height: 130px;

    }


    .orbit-two {

        width: 105px;
        height: 105px;

    }


    .zt-service-features {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 22px;

        justify-content: stretch;

    }


    .zt-service-features > i {

        display: none;

    }


    .zt-service-features > div {

        justify-content: start;

    }


    .service-orb {

        filter: blur(65px);

    }

}



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

@media (max-width:420px) {

    .zt-services-head h2 {

        font-size: 37px;

    }


    .zt-service-card {

        min-height: 390px;

        padding: 20px;

    }


    .zt-service-content h3 {

        font-size: 20px;

    }


    .zt-service-content p {

        font-size: 13px;

    }


    .zt-service-features {

        grid-template-columns:
            1fr;

    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .zt-service-card,
    .zt-service-icon,
    .zt-service-orbit,
    .zt-service-visual-glow,
    .service-orb,
    .service-particle,
    .zt-service-features > div > span {

        animation: none !important;

    }

}

/* =========================================================
   PORTFOLIO PAGE
   ========================================================= */

/* Service detail spacing */
.detail-grid > div:last-child h2{
  font-size:clamp(42px,5vw,72px);
  line-height:1.05;
  margin:0 0 32px;
  max-width:850px;
}

.detail-grid > div:last-child .large-copy{
  max-width:800px;
  font-size:19px;
  line-height:1.9;
}

@media (max-width:768px){
  .detail-grid > div:last-child h2{
    font-size:clamp(38px,10vw,54px);
    margin-bottom:24px;
  }

  .detail-grid > div:last-child .large-copy{
    font-size:17px;
    line-height:1.8;
  }
}

.detail-grid > div:last-child .large-copy{
  color:#c7d2dc;
}

.detail-grid > div:last-child h2{
  color:#f4f7fa;
}

.detail-grid > div:last-child h2,
.detail-grid > div:last-child h2 span{
    color:#ffffff !important;
}

.detail-grid > div:last-child .large-copy{
    color:#dbe5ec !important;
}

.detail-grid{
    opacity:1 !important;
}

.detail-grid > div:last-child h2{
    color:#ffffff !important;
}

.detail-grid > div:last-child h2 span{
    color:#8fe9ff !important;
}

.detail-grid > div:last-child .large-copy{
    color:#dbe5ec !important;
}

@media (max-width:768px){
    .detail-grid{
        opacity:1 !important;
        position:relative !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:35px !important;
    }

    .detail-grid > div:last-child{
        position:relative;
        z-index:5;
    }

    .detail-grid > div:last-child h2{
        color:#ffffff !important;
    }

    .detail-grid > div:last-child h2 span{
        color:#8fe9ff !important;
    }

    .detail-grid > div:last-child .large-copy{
        color:#dbe5ec !important;
    }
}

@media (max-width:768px){
    .detail-grid{
        gap:15px !important;
    }

    .detail-icon{
        margin-bottom:0 !important;
    }

    .detail-grid > div:last-child h2{
        margin-top:0 !important;
        margin-bottom:18px !important;
    }
}

@media (max-width:768px){
    .detail-grid{
        display:block !important;
        gap:0 !important;
    }

    .detail-grid .detail-icon{
        display:none !important;
    }

    .detail-grid > div:last-child{
        margin:0 !important;
        padding:0 !important;
    }

    .detail-grid > div:last-child h2{
        margin-top:0 !important;
    }
}

.menu-toggle i{
    display:block !important;
    width:23px !important;
    height:2px !important;
    background:#fff !important;
    margin:5px auto !important;
}

@media (max-width:768px){
    .menu-toggle{
        height:50px !important;
        min-height:50px !important;
        overflow:visible !important;
    }

    .menu-toggle i{
        display:block !important;
        height:2px !important;
        margin:5px auto !important;
    }
}

@media (max-width:768px){
    .menu-toggle{
        position:relative !important;
        width:42px !important;
        height:42px !important;
    }

    .menu-toggle i{
        display:none !important;
    }

    .menu-toggle::before{
        content:"" !important;
        position:absolute !important;
        left:9px !important;
        top:12px !important;
        width:24px !important;
        height:2px !important;
        background:#fff !important;
        box-shadow:0 8px 0 #fff, 0 16px 0 #fff !important;
    }
}

.zt-hero-stats strong{
    font-size:42px !important;
    line-height:1.1;
}

.zt-hero-stats small{
    font-size:15px !important;
    line-height:1.4;
}

@media (max-width:768px){
    .zt-hero-stats strong{
        font-size:34px !important;
    }

    .zt-hero-stats small{
        font-size:13px !important;
    }
}