:root {
  --teal: #149A9B;
  --teal-d: #0e7a7b;
  --teal-2: #1bbcbd;
  --r: 18px;
  --navy: #0a0a0a;
  --navy-2: #111111;
  --navy-3: #161616;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --card: rgba(255, 255, 255, 0.04);
  --card-b: rgba(20, 154, 155, 0.2);
  --nav-scrolled: rgba(10, 10, 10, 0.97);
  --hero-bg: #0a0a0a;
  --section-alt: #111111;
  --section-alt2: #161616;
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-placeholder: rgba(255, 255, 255, 0.32);
  --footer-bg: #080808;
  --footer-border: rgba(255, 255, 255, 0.06);
  --proc-card: rgba(255, 255, 255, 0.04);
  --badge-bg: rgba(20, 154, 155, 0.1);
  --badge-border: rgba(20, 154, 155, 0.3);
  --pre-bg: #0a0a0a;
  --ts-line: rgba(20, 154, 155, 0.3);
  --ts-card-bg: #1a1a1a;
}
[data-theme="light"] {
  --navy: #ffffff;
  --navy-2: #f7f9fc;
  --navy-3: #f0f4f8;
  --text: #0a0a0a;
  --muted: rgba(10, 10, 10, 0.52);
  --card: #ffffff;
  --card-b: rgba(20, 154, 155, 0.18);
  --nav-scrolled: rgba(255, 255, 255, 0.98);
  --hero-bg: #ffffff;
  --section-alt: #f7f9fc;
  --section-alt2: #f0f4f8;
  --input-bg: #f7f9fc;
  --input-border: rgba(10, 10, 10, 0.1);
  --input-placeholder: rgba(10, 10, 10, 0.35);
  --footer-bg: #0a0a0a;
  --footer-border: rgba(255, 255, 255, 0.07);
  --proc-card: #ffffff;
  --badge-bg: rgba(20, 154, 155, 0.07);
  --badge-border: rgba(20, 154, 155, 0.25);
  --pre-bg: #0a0a0a;
  --ts-line: rgba(20, 154, 155, 0.35);
  --ts-card-bg: #ffffff;
}
*, *::before, *::after {box-sizing:border-box; margin:0; padding:0}
html {scroll-behavior:smooth}
body {font-family:'Plus Jakarta Sans', sans-serif; background:var(--navy); color:var(--text); overflow-x:hidden; transition:background .35s, color .35s}
h1, h2, h3, h4, h5, h6 {font-family:'Outfit', sans-serif}
a {text-decoration:none}
img {max-width:100%; display:block}
.svc-card, .about-stat-card, .about-feat-card, .ind-card, .port-card, .testi, .vtesti-card, .r-badge, .st-box, .t-pill, .proc-wrap, .ts-card {will-change:transform, opacity;}
::selection {background:var(--teal); color:#fff}
::-webkit-scrollbar {width:5px}
::-webkit-scrollbar-track {background:var(--navy)}
::-webkit-scrollbar-thumb {background:var(--teal); border-radius:9px}
#preloader {position:fixed; inset:0; background:var(--pre-bg); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .6s, visibility .6s}
#preloader.hide {opacity:0; visibility:hidden; pointer-events:none}
.pre-logo {font-family:'Outfit', sans-serif; font-size:2.6rem; font-weight:800; color:var(--teal); letter-spacing:-1px}
.pre-logo span {color:#fff}
.pre-track {width:220px; height:3px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden}
.pre-bar {height:100%; width:0; background:linear-gradient(90deg, var(--teal), var(--teal-2)); border-radius:99px}
.pre-txt {font-size:.72rem; color:rgba(255,255,255,1); letter-spacing:2px}
.cur {width:10px; height:10px; background:var(--teal); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .12s}
.cur-ring {width:34px; height:34px; border:1.5px solid rgba(20,154,155,.5); border-radius:50%; position:fixed; pointer-events:none; z-index:9997; transform:translate(-50%, -50%)}

@media(hover:none) {
.cur, .cur-ring {display:none}
}

#themeToggle {position:fixed; bottom:80px; right:24px; width:42px; height:42px; border-radius:10px; background:var(--teal); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:.95rem; z-index:998; cursor:pointer; box-shadow:0 8px 22px rgba(20,154,155,.35); transition:all .3s}
#themeToggle:hover {transform:translateY(-3px) rotate(20deg); background:var(--teal-d)}
#nav {position:fixed; top:0; left:0; right:0; z-index:1000; padding:14px 0; transition:all .4s}
#nav.scrolled {background:var(--nav-scrolled); backdrop-filter:blur(22px); padding:9px 0; box-shadow:0 4px 40px rgba(0,0,0,.5)}
[data-theme="light"] #nav.scrolled {box-shadow:0 2px 24px rgba(0,0,0,.08); border-bottom:1px solid rgba(0, 0, 0, .06)}
.nav-brand {font-family:'Outfit', sans-serif; font-size:1.6rem; font-weight:800; color:var(--teal)!important; letter-spacing:-1px}
.nav-brand b {color:var(--text); font-weight:800}
.navbar-nav .nav-link {color:var(--text)!important; font-weight:500; font-size:.88rem; padding:6px 12px!important; border-radius:6px; position:relative; transition:color .25s}
.navbar-nav .nav-link::after {content:''; position:absolute; bottom:0; left:12px; right:12px; height:2px; background:var(--teal); transform:scaleX(0); transition:transform .25s; border-radius:2px}
.navbar-nav .nav-link:hover {color:var(--teal)!important}
.navbar-nav .nav-link:hover::after {transform:scaleX(1)}
.btn-cta {background:var(--teal); color:#fff!important; font-weight:700; padding:9px 22px; border-radius:9px; font-size:.87rem; border:none; transition:all .25s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; justify-content:center}
.btn-cta:hover {background:var(--teal-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,154,155,.35)}
.btn-out {border:1.5px solid var(--teal); color:var(--teal)!important; background:transparent; font-weight:600; padding:9px 22px; border-radius:9px; font-size:.87rem; transition:all .25s; display:inline-flex; align-items:center; gap:6px}
.btn-out:hover {background:var(--teal); color:#fff!important; transform:translateY(-2px)}
.btn-cta i, .btn-out i {font-size:.9rem; line-height:1; display:flex; align-items:center}
.navbar-toggler {border:1px solid var(--teal); padding:5px 9px}
.navbar-toggler-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20,154,155,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
section {padding:40px 0; position:relative; overflow:hidden}
.sec-tag {display:inline-block; background:var(--badge-bg); border:1px solid var(--badge-border); color:var(--teal); padding:4px 14px; border-radius:99px; font-size:.74rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; font-weight:700}
.sec-title {font-family:'Outfit', sans-serif; font-size:clamp(1.75rem,3.5vw,2.65rem); font-weight:800; color:var(--text); line-height:1.15; margin-bottom:14px}
.sec-sub {color:var(--text); font-size:.96rem; line-height:1.8; max-width:560px}
.tl {width:50px; height:4px; background:var(--teal); border-radius:2px; margin:12px 0 20px}
.tl.cx {margin:12px auto 20px}
.blob {position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0}
.container, .row {position:relative; z-index:1}
#hero {min-height:100vh; background:var(--hero-bg); position:relative; overflow:hidden; padding:0}
[data-theme="dark"] #hero {background:radial-gradient(ellipse 80% 55% at 65% 40%,rgba(20,154,155,.07) 0%,transparent 68%), #0a0a0a}
[data-theme="light"] #hero {background:#fff}
.hero-grid {position:absolute; inset:0; background-image:linear-gradient(rgba(20,154,155,.04) 1px,transparent 1px), linear-gradient(90deg, rgba(20, 154, 155, .04) 1px, transparent 1px); background-size:54px 54px; pointer-events:none; z-index:0}
[data-theme="light"] .hero-grid {background-image:linear-gradient(rgba(20,154,155,.05) 1px,transparent 1px), linear-gradient(90deg, rgba(20, 154, 155, .05) 1px, transparent 1px)}
.hero-banner-slider {position:relative; z-index:1}
.hero-slide {min-height:100vh; display:flex; align-items:center; padding-top:86px; padding-bottom:60px; position:relative}
.hero-banner-slider .owl-dots {position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:10}
.hero-banner-slider .owl-dot span {background:rgba(255,255,255,.25)!important; width:8px!important; height:8px!important; margin:0 4px!important; transition:all .3s!important}
[data-theme="light"] .hero-banner-slider .owl-dot span {background:rgba(0,0,0,.2)!important}
.hero-banner-slider .owl-dot.active span, .hero-banner-slider .owl-dot:hover span {background:var(--teal)!important; width:24px!important; border-radius:4px!important}
.hero-banner-slider .owl-nav {position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; padding:0 16px; z-index:10}
.hero-banner-slider .owl-nav button {pointer-events:all; background:rgba(20,154,155,.1)!important; border:1px solid rgba(20, 154, 155, .35)!important; color:var(--teal)!important; border-radius:10px!important; width:44px!important; height:44px!important; display:flex!important; align-items:center!important; justify-content:center!important; transition:all .25s!important; backdrop-filter:blur(8px)}
.hero-banner-slider .owl-nav button:hover {background:var(--teal)!important; color:#fff!important}
.hero-badge {display:inline-flex; align-items:center; gap:8px; background:var(--badge-bg); border:1px solid var(--badge-border); padding:6px 16px; border-radius:99px; font-size:.76rem; color:var(--teal); letter-spacing:.5px; margin-bottom:20px; font-weight:600}
.badge-dot {width:8px; height:8px; background:var(--teal); border-radius:50%; animation:blink 1.3s infinite; display:inline-block; flex-shrink:0}

@keyframes blink {
0%, 100% {opacity:1}
50% {opacity:.25}
}

.hero-title {font-family:'Outfit', sans-serif; font-size:clamp(2.2rem,5vw,4.1rem); font-weight:800; line-height:1.07; color:var(--text); margin-bottom:18px}
.hero-title .t {color:var(--teal)}
.hero-p {color:var(--text); font-size:1rem; line-height:1.78; max-width:500px; margin-bottom:30px}
.hero-nums {display:flex; gap:36px; margin-top:38px; flex-wrap:wrap}
.hn-num {font-family:'Outfit', sans-serif; font-size:1.9rem; font-weight:800; color:var(--text)}
.hn-lbl {font-size:.76rem; color:var(--teal); margin-top:2px}
.hero-typing-strip {position:absolute; bottom:0; left:0; right:0; background:rgba(20,154,155,.07); border-top:1px solid rgba(20, 154, 155, .13); padding:12px 24px; font-family:'Outfit', sans-serif; font-size:.95rem; font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center; z-index:5; backdrop-filter:blur(6px)}
[data-theme="light"] .hero-typing-strip {background:rgba(20,154,155,.05); border-top-color:rgba(20, 154, 155, .12)}
.typing-pre {color:var(--text)}
.typing-text {color:var(--teal); min-width:240px}
.typing-cursor {color:var(--teal); animation:blink-cursor .7s step-end infinite; font-weight:300}

@keyframes blink-cursor {
0%, 100% {opacity:1}
50% {opacity:0}
}

.hero-graphic-wrap {position:relative; display:flex; align-items:center; justify-content:center; height:440px}
.hg-center {position:relative; z-index:3; display:flex; align-items:center; justify-content:center; width:130px; height:130px; background:var(--navy-2); border:2px solid rgba(20,154,155,.35); border-radius:50%; box-shadow:0 0 40px rgba(20, 154, 155, .15)}
[data-theme="light"] .hg-center {background:#fff; box-shadow:0 4px 32px rgba(0,0,0,.08)}
.hg-center-img {width:70px; height:70px; object-fit:contain; padding:10px}
.hg-glow-ring {position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(20,154,155,.2); animation:pulse-ring 3s ease-in-out infinite}

@keyframes pulse-ring {
0%, 100% {transform:scale(1); opacity:.5}
50% {transform:scale(1.07); opacity:1}
}

.hg-orbit {position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.hg-planet {position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; transform:rotate(var(--deg)) translateY(-165px) rotate(calc(-1 * var(--deg))); animation:planet-float 4s ease-in-out infinite var(--delay)}

@keyframes planet-float {
0%, 100% {transform:rotate(var(--deg)) translateY(-165px) rotate(calc(-1 * var(--deg)))}
50% {transform:rotate(var(--deg)) translateY(-172px) rotate(calc(-1 * var(--deg)))}
}

.hg-planet img {width:65px; height:65px; padding:10px; background:var(--navy-2); border:1px solid rgba(20,154,155,.3); border-radius:14px; box-shadow:0 4px 20px rgba(0, 0, 0, .3); object-fit:contain; transition:transform .25s}
[data-theme="light"] .hg-planet img {background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.1)}
.hg-planet:hover img {transform:scale(1.15)}
.hg-planet span {font-size:.63rem; font-weight:700; color:var(--teal); font-family:'Outfit', sans-serif; letter-spacing:.5px; text-transform:uppercase}
.hg-fc-cards {position:absolute; z-index:5}
.h-fc {position:absolute; background:var(--navy-2); backdrop-filter:blur(14px); border:1px solid var(--card-b); border-radius:13px; padding:10px 14px; min-width:145px; display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.3)}
[data-theme="light"] .h-fc {background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.1)}
.h-fc:first-child {top:-80px; right:-40px; animation:hfc 5s ease-in-out infinite}
.h-fc-2 {bottom:-60px; left:-30px; animation:hfc 5s ease-in-out infinite 1.2s}

@keyframes hfc {
0%, 100% {transform:translateY(0)}
50% {transform:translateY(-8px)}
}

.h-fc-img {width:36px; height:36px; object-fit:contain}
.hfc-t {font-family:'Outfit', sans-serif; font-size:.75rem; font-weight:700; color:var(--text)}
.hfc-v {font-size:.68rem; color:var(--teal); font-weight:600; margin-top:1px}
.slide2-illo {position:relative; display:flex; flex-direction:column; align-items:center; gap:20px}
.s2-phone-frame {width:200px; height:360px; background:var(--navy-2); border:3px solid rgba(20,154,155,.4); border-radius:32px; display:flex; align-items:center; justify-content:center; box-shadow:0 24px 60px rgba(0, 0, 0, .5), 0 0 0 8px rgba(20, 154, 155, .06); overflow:hidden}
[data-theme="light"] .s2-phone-frame {background:#f7f9fc; box-shadow:0 24px 60px rgba(0,0,0,.12)}
.s2-screen {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; width:100%}
.s2-main-icon {width:100px; height:100px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(20,154,155,.3)); animation:float-icon 4s ease-in-out infinite}

@keyframes float-icon {
0%, 100% {transform:translateY(0)}
50% {transform:translateY(-8px)}
}

.s2-screen-content {width:100%; display:flex; flex-direction:column; gap:6px}
.s2-bar {height:6px; border-radius:3px; background:rgba(20,154,155,.25)}
.s2-bar-1 {width:80%}
.s2-bar-2 {width:60%}
.s2-bar-3 {width:70%}
.s2-badges {display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.s2-badge {display:flex; align-items:center; gap:6px; padding:7px 12px; background:var(--card); border:1px solid var(--card-b); border-radius:9px; font-size:.75rem; font-weight:600; color:var(--text)}
[data-theme="light"] .s2-badge {background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.06)}
.s2-badge img {width:20px; height:20px; object-fit:contain}
.s2-stat-float {display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--teal); border-radius:12px; color:#fff; font-size:.82rem; font-weight:700; box-shadow:0 8px 24px rgba(20,154,155,.4); animation:hfc 4s ease-in-out infinite}
.s2-stat-float img {width:20px; height:20px; filter:brightness(0) invert(1)}
.s3-grid {display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:360px}
.s3-card {background:var(--card); border:1px solid var(--card-b); border-radius:18px; padding:22px 18px; text-align:center; transition:all .3s}
[data-theme="light"] .s3-card {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06)}
.s3-card:hover {transform:translateY(-5px); border-color:var(--teal)}
.s3-card img {width:52px; height:52px; object-fit:contain; margin:0 auto 10px}
.s3-card.s3-highlight {background:rgba(20,154,155,.12); border-color:rgba(20, 154, 155, .5)}
.s3-num {font-family:'Outfit', sans-serif; font-size:1.6rem; font-weight:800; color:var(--text)}
.s3-card.s3-highlight .s3-num {color:var(--teal)}
.s3-lbl {font-size:.75rem; color:var(--text); margin-top:2px}
#services {background:var(--section-alt)}
.svc-card {background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:50px 24px 24px; transition:all .35s; position:relative; height:100%}
[data-theme="light"] .svc-card {background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.06); border-color:rgba(20, 154, 155, .12)}
.svc-card::before {content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(20,154,155,.07),transparent); opacity:0; transition:opacity .35s; border-radius:var(--r)}
.svc-card:hover {transform:translateY(-8px); border-color:rgba(20,154,155,.5); box-shadow:0 20px 50px rgba(0, 0, 0, .3)}
[data-theme="light"] .svc-card:hover {box-shadow:0 20px 50px rgba(20,154,155,.1)}
.svc-card:hover::before {opacity:1}
.svc-ico-wrap {width:68px; height:68px; border-radius:16px; background:var(--card); border:1px solid var(--card-b); display:flex; align-items:center; justify-content:center; transition:all .35s; position:absolute; top:-34px; left:24px; box-shadow:0 4px 20px rgba(0,0,0,.3)}
[data-theme="light"] .svc-ico-wrap {background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.1); border-color:rgba(20, 154, 155, .2)}
.svc-card:hover .svc-ico-wrap {background:rgba(20,154,155,.15); transform:rotate(5deg) scale(1.08); border-color:rgba(20, 154, 155, .45)}
.svc-flat-icon {width:38px; height:38px; object-fit:contain; transition:transform .3s}
.svc-card:hover .svc-flat-icon {transform:scale(1.1)}
.svc-t {font-family:'Outfit', sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:10px}
.svc-p {font-size:.85rem; color:var(--text); line-height:1.72}
.svc-more {display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-size:.8rem; font-weight:700; margin-top:14px; transition:gap .25s}
.svc-card:hover .svc-more {gap:10px}
.svc-more i {font-size:.8rem; line-height:1; display:flex; align-items:center}
#about {background:var(--section-alt2)}
.about-stat-card {background:var(--card); border:1px solid var(--card-b); border-radius:16px; padding:24px 16px; text-align:center; transition:all .3s; position:relative; overflow:hidden}
[data-theme="light"] .about-stat-card {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06)}
.about-stat-card::after {content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--teal); transform:scaleX(0); transition:transform .35s}
.about-stat-card:hover {transform:translateY(-6px); border-color:var(--teal)}
.about-stat-card:hover::after {transform:scaleX(1)}
.asc-icon img {width:48px; height:48px; object-fit:contain; margin:0 auto 10px}
.asc-num {font-family:'Outfit', sans-serif; font-size:2.2rem; font-weight:800; color:var(--teal)}
.asc-lbl {font-size:.8rem; color:var(--text); margin-top:4px; font-weight:600}
.about-feat-card {background:var(--card); border:1px solid var(--card-b); border-radius:18px; padding:28px 22px; height:100%; position:relative; overflow:hidden; transition:all .35s}
[data-theme="light"] .about-feat-card {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); border-color:rgba(20, 154, 155, .12)}
.about-feat-card:hover {transform:translateY(-6px); border-color:rgba(20,154,155,.5); box-shadow:0 20px 50px rgba(0, 0, 0, .25)}
[data-theme="light"] .about-feat-card:hover {box-shadow:0 20px 50px rgba(20,154,155,.1)}
.afc-num {font-family:'Outfit', sans-serif; font-size:3.5rem; font-weight:900; color:rgba(20,154,155,.1); line-height:1; margin-bottom:8px; transition:color .3s}
.about-feat-card:hover .afc-num {color:rgba(20,154,155,.2)}
.afc-icon img {width:48px; height:48px; object-fit:contain; margin-bottom:12px}
.afc-t {font-family:'Outfit', sans-serif; font-size:1rem; font-weight:700; color:var(--text); margin-bottom:10px}
.afc-p {font-size:.84rem; color:var(--text); line-height:1.72; margin-bottom:16px}
.afc-line {width:32px; height:3px; background:var(--teal); border-radius:2px; transition:width .35s}
.about-feat-card:hover .afc-line {width:60px}
.about-ticker-wrap {overflow:hidden; border:1px solid var(--card-b); border-radius:14px; padding:14px 0; background:var(--card)}
[data-theme="light"] .about-ticker-wrap {background:#f7f9fc}
.about-ticker {display:flex; gap:0; width:max-content; animation:ticker-scroll 28s linear infinite}
.about-ticker:hover {animation-play-state:paused}
.about-ticker span {display:inline-flex; align-items:center; gap:8px; padding:0 28px; font-family:'Outfit', sans-serif; font-weight:700; font-size:.9rem; color:var(--text); white-space:nowrap; border-right:1px solid var(--card-b)}
.about-ticker span img {width:22px; height:22px; object-fit:contain; opacity:.7}
.about-ticker span:hover {color:var(--teal)}

@keyframes ticker-scroll {
0% {transform:translateX(0)}
100% {transform:translateX(-50%)}
}

#tech {background:var(--navy)}
.t-group-lbl {font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:11px; font-family:'Outfit', sans-serif}
.t-pill {display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--card-b); border-radius:9px; padding:9px 14px; font-size:.83rem; color:var(--text); font-weight:500; transition:all .25s; margin:3px; cursor:default}
[data-theme="light"] .t-pill {background:#fff; border-color:rgba(0,0,0,.08); box-shadow:0 1px 8px rgba(0, 0, 0, .05); color:#0a0a0a}
.t-pill:hover {border-color:var(--teal); color:var(--teal); transform:translateY(-3px)}
.t-pill img {width:18px; height:18px; object-fit:contain}
#industries {background:var(--section-alt)}
.ind-card {text-align:center; padding:24px 14px 20px; background:var(--card); border:1px solid var(--card-b); border-radius:16px; transition:all .3s; height:100%}
[data-theme="light"] .ind-card {background:#fff; border-color:rgba(0,0,0,.07); box-shadow:0 1px 12px rgba(0, 0, 0, .05)}
.ind-card:hover {border-color:var(--teal); transform:translateY(-6px); box-shadow:0 14px 36px rgba(0,0,0,.2)}
[data-theme="light"] .ind-card:hover {box-shadow:0 14px 36px rgba(20,154,155,.1)}
.ind-flat-icon {width:56px; height:56px; object-fit:contain; margin:0 auto 12px; transition:transform .3s}
.ind-card:hover .ind-flat-icon {transform:scale(1.18) translateY(-2px)}
.ind-t {font-family:'Outfit', sans-serif; font-size:.85rem; color:var(--text)}
#stats {position:relative; padding:40px 0; background:url(https://static.vecteezy.com/system/resources/previews/004/272/479/non_2x/programming-code-coding-or-hacker-background-programming-code-icon-made-with-binary-code-digital-binary-data-and-streaming-digital-code-matrix-background-with-digits-1-0-illustration-vector.jpg); background-attachment:fixed; background-size:cover; background-position:center; z-index:1;}
#stats::before {content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgb(0 0 0 / 61%); z-index:-1;}
.st-box {text-align:center; padding:14px}
.st-icon {width:48px; height:48px; object-fit:contain; margin:0 auto 10px; opacity:1}
.st-big {font-family:'Outfit', sans-serif; font-size:2.7rem; font-weight:800; color:#fff}
.st-lbl {font-size:.86rem; color:rgba(255,255,255,.85); margin-top:4px}
#process {background:var(--section-alt2); overflow:visible; padding:40px 0 40px}
.ts-icon {position:absolute; right:10px; top:10px;}
.timeline-wrap {padding:45px 0 100px;}
.timeline-wrap::-webkit-scrollbar {height:4px}
.timeline-wrap::-webkit-scrollbar-thumb {background:var(--teal); border-radius:4px}
.timeline-track {display:flex; align-items:center; justify-content:center; position:relative; min-width:900px; max-width:1100px; margin:0 auto; padding:0 60px; padding-top:180px; padding-bottom:180px;}
.timeline-line {position:absolute; top:50%; left:60px; right:60px; height:3px; background:var(--ts-line); transform:translateY(-50%); z-index:0; transform-origin:left center;}
.timeline-step {position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; flex:1; min-width:0;}
.ts-dot {width:70px; height:70px; border-radius:50%; background:var(--navy-2); border:3px solid var(--teal); display:flex; align-items:center; justify-content:center; position:relative; z-index:4; transition:all .35s; box-shadow:0 0 0 8px rgba(20,154,155,.1), 0 0 24px rgba(20, 154, 155, .2); flex-shrink:0;}
[data-theme="light"] .ts-dot {background:#fff; box-shadow:0 0 0 6px rgba(20,154,155,.08), 0 4px 16px rgba(20, 154, 155, .15)}
.ts-dot img {width:40px; height:40px; object-fit:contain}
.timeline-step:hover .ts-dot {background:var(--teal); transform:scale(1.18); box-shadow:0 0 0 10px rgba(20,154,155,.15), 0 0 30px rgba(20, 154, 155, .35)}
.timeline-step:hover .ts-dot img {filter:brightness(0) invert(1)}
.ts-dot-last {background:var(--teal)!important; box-shadow:0 0 0 8px rgba(20,154,155,.2), 0 0 30px rgba(20, 154, 155, .4)!important}
.ts-dot-last img {filter:brightness(0) invert(1)!important}
.ts-card {background:var(--ts-card-bg); border:1px solid var(--card-b); border-radius:18px; padding:22px 18px; width:210px; transition:all .35s; position:absolute;}
[data-theme="light"] .ts-card {background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.08)}
.ts-card:hover {border-color:var(--teal); box-shadow:0 20px 50px rgba(0,0,0,.25)}
[data-theme="light"] .ts-card:hover {box-shadow:0 20px 50px rgba(20,154,155,.12)}
.ts-card.ts-top {bottom:calc(100% + 24px); left:50%; transform:translateX(-50%);}
.ts-card.ts-top:hover {transform:translateX(-50%) translateY(-6px)}
.ts-card.ts-bottom {top:calc(100% + 24px); left:50%; transform:translateX(-50%);}
.ts-card.ts-bottom:hover {transform:translateX(-50%) translateY(6px)}
.timeline-step::before {content:''; position:absolute; left:50%; width:2px; background:linear-gradient(to bottom,rgba(20,154,155,.5), rgba(20, 154, 155, .1)); z-index:1; margin-left:-1px;}
.timeline-step:nth-child(even)::before {bottom:calc(50% + 27px); height:24px;}
.timeline-step:nth-child(odd)::before {top:calc(50% + 27px); height:24px;}
.ts-num {font-family:'Outfit', sans-serif; font-size:2rem; font-weight:900; color:rgba(20,154,155,.15); line-height:1; margin-bottom:8px}
.ts-icon img {width:40px; height:40px; object-fit:contain; margin-bottom:8px}
.ts-title {font-family:'Outfit', sans-serif; font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:6px}
.ts-desc {font-size:.78rem; color:var(--text); line-height:1.65}
.timeline-mobile {display:none}
.proc-wrap {display:flex; gap:16px; align-items:flex-start; padding:20px 22px; background:var(--proc-card); border:1px solid var(--card-b); border-radius:15px; margin-bottom:14px; transition:all .3s}
[data-theme="light"] .proc-wrap {background:#fff; border-color:rgba(0,0,0,.07); box-shadow:0 2px 12px rgba(0, 0, 0, .05)}
.proc-wrap:hover {border-color:var(--teal); transform:translateX(5px)}
.proc-icon-num {position:relative; flex-shrink:0; width:54px; height:54px; display:flex; align-items:center; justify-content:center}
.proc-icon-num img {width:40px; height:40px; object-fit:contain}
.proc-n {font-family:'Outfit', sans-serif; font-size:.65rem; font-weight:800; color:var(--teal); position:absolute; top:-4px; right:-4px; background:var(--navy); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(20,154,155,.3); line-height:1}
[data-theme="light"] .proc-n {background:#fff}
.proc-t {font-family:'Outfit', sans-serif; font-size:1rem; font-weight:700; color:var(--text); margin-bottom:5px}
.proc-p {font-size:.84rem; color:var(--text); line-height:1.7}
#portfolio {background:var(--section-alt)}
.portfolio-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:32px; max-width:1200px; width:100%;}
.port-card {position:relative; height:200px; cursor:pointer; overflow:hidden;}
.port-image-wrapper {position:absolute; inset:0; background:#f5f5f5; overflow:hidden;}
.port-image-wrapper img {width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);}
.port-card:hover .port-image-wrapper img {transform:scale(1.12) rotate(2deg);}
.port-content {position:absolute; inset:0; background:linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); display:flex; flex-direction:column; justify-content:space-between; padding:24px; opacity:0; transition:opacity 0.5s ease; z-index:2;}
.port-card:hover .port-content {opacity:1;}
.port-info-top {display:flex; justify-content:space-between; align-items:flex-start;}
.port-category {font-size:11px; text-transform:uppercase; letter-spacing:2px; color:rgba(255, 255, 255, 0.7); font-weight:600; padding:6px 12px; background:rgba(255, 255, 255, 0.1); border-radius:4px; backdrop-filter:blur(10px);}
.port-year {font-size:12px; color:rgba(255, 255, 255, 0.6); font-weight:500;}
.port-info-bottom {display:flex; justify-content:space-between; align-items:flex-end;}
.port-title {font-family:'Playfair Display', serif; font-size:28px; color:#ffffff; font-weight:700; line-height:1.1; margin:0;}
.port-arrow {width:44px; height:44px; background:rgba(255, 255, 255, 0.15); border:1px solid rgba(255, 255, 255, 0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:18px; transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter:blur(10px);}
.port-card:hover .port-arrow {background:rgba(255, 255, 255, 0.25); transform:translate(6px, -6px); border-color:rgba(255, 255, 255, 0.5);}
.port-accent {position:absolute; top:0; right:0; width:120px; height:120px; background:linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent); transform:rotate(45deg) translate(40px, -40px); z-index:1; pointer-events:none;}
.port-accent-line {position:absolute; bottom:0; left:0; width:100%; height:2px; background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); opacity:0; transition:opacity 0.5s ease; z-index:3;}
.port-card:hover .port-accent-line {opacity:1;}
.port-tags {display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; opacity:0; transform:translateY(10px); transition:all 0.5s ease;}
.port-card:hover .port-tags {opacity:1; transform:translateY(0);}
.port-tag {font-size:10px; padding:4px 10px; background:rgba(255, 255, 255, 0.15); color:rgba(255, 255, 255, 0.8); border-radius:3px; backdrop-filter:blur(10px); text-transform:uppercase; letter-spacing:0.5px;}
.port-counter {position:absolute; top:20px; left:20px; font-family:'Playfair Display', serif; font-size:48px; color:rgba(255, 255, 255, 0.08); font-weight:700; z-index:1; line-height:1;}
.port-card::before {content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 60%); opacity:0; transition:opacity 0.5s ease; pointer-events:none; z-index:1;}
.port-card:hover::before {opacity:1;}

@media (max-width: 768px) {
.port-title {font-size:20px;}
.port-content {padding:16px;}
.port-counter {font-size:36px;}
}

@media (max-width: 480px) {
.portfolio-grid {grid-template-columns:1fr; gap:24px;}
.port-card {aspect-ratio:3 / 4;}
}

#testimonials {background:var(--navy)}
.vtesti-label {display:flex; align-items:center; gap:10px; font-family:'Outfit', sans-serif; font-weight:700; font-size:1.05rem; color:var(--text); margin-bottom:16px}
.vtesti-owl-wrap {margin-bottom:60px}
.vtesti-owl .owl-stage-outer {overflow:visible!important}
.vtesti-owl .owl-nav button {background:rgba(20,154,155,.1)!important; border:1px solid var(--teal)!important; color:var(--teal)!important; border-radius:8px!important; width:36px!important; height:36px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; transition:all .25s!important; margin-top:-20px;}
.vtesti-owl .owl-nav button:hover {background:var(--teal)!important; color:#fff!important}
.vtesti-card {background:var(--card); border:1px solid var(--card-b); border-radius:18px; overflow:hidden; cursor:pointer; transition:all .35s; height:100%;}
[data-theme="light"] .vtesti-card {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06)}
.vtesti-card:hover {transform:translateY(-6px); border-color:rgba(20,154,155,.45); box-shadow:0 20px 50px rgba(0, 0, 0, .3)}
[data-theme="light"] .vtesti-card:hover {box-shadow:0 20px 50px rgba(20,154,155,.12)}
.vtesti-thumb {position:relative; height:160px; background:linear-gradient(135deg,#0a1830,#0f2040); display:flex; align-items:center; justify-content:center; overflow:hidden;}
[data-theme="light"] .vtesti-thumb {background:linear-gradient(135deg,#d4eafc,#c8e8e8)}
.vtesti-avatar {object-fit:contain;}
.vtesti-play-btn {position:absolute; width:50px; height:50px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; padding-left:4px; transition:all .35s; box-shadow:0 8px 24px rgba(20,154,155,.5); z-index:3;}
.vtesti-card:hover .vtesti-play-btn {transform:scale(1.2); box-shadow:0 12px 32px rgba(20,154,155,.65)}
.vtesti-gradient {position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),transparent); z-index:1}
.vtesti-info {padding:0 16px 16px 16px}
.vtesti-stars {color:#f5c518; font-size:2rem; margin-bottom:8px}
.vtesti-quote {font-size:.87rem; color:var(--text); line-height:1.65; font-style:italic; margin-bottom:12px}
.vtesti-person strong {display:block; font-family:'Outfit', sans-serif; font-weight:700; color:var(--text); font-size:.9rem}
.vtesti-person span {font-size:.75rem; color:var(--text)}
.vtesti-modal {position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; display:none; align-items:center; justify-content:center; padding:20px}
.vtesti-modal.active {display:flex}
.vtesti-modal-inner {position:relative; width:100%; max-width:840px; aspect-ratio:16/9}
.vtesti-modal-inner iframe {width:100%; height:100%; border-radius:12px; border:2px solid rgba(20,154,155,.3)}
.vtesti-close {position:absolute; top:-50px; right:0; width:40px; height:40px; background:rgba(255,255,255,.1); border:none; border-radius:50%; color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s}
.vtesti-close:hover {background:var(--teal)}
.testi {background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:20px 24px; height:100%; position:relative}
[data-theme="light"] .testi {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); border-color:rgba(0,0,0,.06)}
.testi-quote-icon {margin-bottom:10px; display:none;}
.testi-quote-icon img {width:24px; height:24px; object-fit:contain; opacity:.5}
.testi-stars {color:#f5c518; font-size:2rem; margin-bottom:12px}
.testi-txt {font-size:.9rem; color:var(--text); line-height:1.8; font-style:italic; margin-bottom:18px}
.testi-auth {display:flex; align-items:center; gap:12px}
.av {width:46px; height:46px; border-radius:50%; background:rgba(20,154,155,.1); border:2px solid var(--teal); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center}
.av img {width:100%; height:100%; object-fit:contain; padding:4px}
.av-n {font-family:'Outfit', sans-serif; font-weight:700; color:var(--text); font-size:.9rem}
.av-r {font-size:.76rem; color:var(--text)}
.r-badge {display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:var(--card); border:1px solid var(--card-b); border-radius:12px; padding:16px 12px; transition:all .25s; text-align:center; height:100%}
[data-theme="light"] .r-badge {background:#fff; box-shadow:0 1px 10px rgba(0,0,0,.06); border-color:rgba(0, 0, 0, .07)}
.r-badge:hover {border-color:var(--teal); transform:translateY(-4px)}
.r-icon {width:32px; height:32px; object-fit:contain; margin:0 auto}
.r-stars {color:#f5c518; font-size:1.5rem}
.r-lbl {font-size:1rem; color:var(--text)}
#clients {background:var(--section-alt); padding:68px 0}
.cli-item {display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card); border:1px solid var(--card-b); border-radius:11px; padding:0 18px; transition:all .25s; cursor:default; flex-direction:column}
[data-theme="light"] .cli-item {background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.05); border-color:rgba(0, 0, 0, .07)}
.cli-item:hover {border-color:var(--teal)}
.cli-icon {width:125px; height:125px; object-fit:contain; transition:}
.cli-item:hover .cli-icon {opacity:1}
.cli-item span {font-family:'Outfit', sans-serif; font-weight:800; font-size:.78rem; color:var(--text); transition:color .25s; text-align:center; line-height:1.2}
.cli-item:hover span {color:var(--teal)}
#contact {background:var(--section-alt2)}
.inp-wrap {position:relative}
.inp-icon {position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:.9rem; pointer-events:none; z-index:1; line-height:1; display:flex; align-items:center}
.inp-wrap .form-control, .inp-wrap select {padding-left:36px!important}
.form-c .form-control, .form-c select {background:var(--input-bg); border:1px solid var(--input-border); color:var(--text); border-radius:9px; padding:11px 15px; font-size:.9rem; font-family:'Plus Jakarta Sans', sans-serif; transition:border-color .25s, box-shadow .25s; width:100%}
.form-c textarea {padding-left:15px!important}
.form-c .form-control:focus, .form-c select:focus {border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,154,155,.1); background:var(--input-bg); outline:none; color:var(--text)}
[data-theme="light"] .form-c .form-control, [data-theme="light"] .form-c select {background:#f7f9fc; border-color:rgba(0,0,0,.1); color:#0a0a0a}
[data-theme="light"] .form-c .form-control:focus, [data-theme="light"] .form-c select:focus {background:#fff}
.form-c .form-control::placeholder {color:var(--input-placeholder)}
.form-c select option {background:var(--navy-2); color:var(--text)}
[data-theme="light"] .form-c select option {background:#fff; color:#0a0a0a}
.ci-card {background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:26px}
[data-theme="light"] .ci-card {background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.07); border-color:rgba(0, 0, 0, .06)}
.ci-row {display:flex; align-items:flex-start; gap:13px; margin-bottom:20px}
.ci-ico {width:42px; height:42px; min-width:42px; border-radius:10px; background:rgba(20,154,155,.08); border:1px solid rgba(20, 154, 155, .2); display:flex; align-items:center; justify-content:center}
.ci-flat-icon {width:22px; height:22px; object-fit:contain}
.ci-lbl {font-size:.73rem; color:var(--text); margin-bottom:2px}
.ci-val {font-size:.87rem; color:var(--text); font-weight:500; line-height:1.5}
.soc {width:37px; height:37px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255, 255, 255, .1); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:.86rem; transition:all .25s}
[data-theme="light"] .soc {background:transparent; border-color:var(--teal); color:var(--teal)}
.soc:hover {background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-3px)}
#footer {background:var(--footer-bg); padding:62px 0 26px; border-top:1px solid var(--footer-border)}
.f-brand {font-family:'Outfit', sans-serif; font-size:1.65rem; font-weight:800; color:var(--teal)}
.f-brand b {color:#fff; font-weight:800}
.f-tag {font-size:.83rem; color:rgba(255,255,255,1); margin-top:9px; line-height:1.72; max-width:240px}
.f-hd {font-family:'Outfit', sans-serif; font-size:.75rem; letter-spacing:1.8px; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:16px}
.f-links {list-style:none; margin:0; padding:0}
.f-links li {margin-bottom:8px}
.f-links a {color:rgba(255,255,255,1); font-size:.84rem; transition:color .2s; display:flex; align-items:center; gap:5px}
.f-links a i {font-size:.7rem; opacity:.6}
.f-links a:hover {color:var(--teal)}
.f-btm {border-top:1px solid rgba(255,255,255,.07); margin-top:44px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.f-btm p {font-size:.76rem; color:rgba(255,255,255,1); margin:0}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background:var(--teal)!important}
.owl-theme .owl-nav button {background:rgba(20,154,155,.1)!important; border:1px solid var(--teal)!important; color:var(--teal)!important; border-radius:8px!important; width:36px!important; height:36px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; transition:all .25s!important}
.owl-theme .owl-nav button:hover {background:var(--teal)!important; color:#fff!important}
.owl-theme .owl-nav button span {font-size:1.2rem!important; line-height:1!important}
.owl-carousel .owl-stage-outer {overflow:visible !important;}
#btt {position:fixed; bottom:24px; right:24px; width:42px; height:42px; border-radius:10px; background:var(--teal); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:.9rem; z-index:999; cursor:pointer; opacity:0; pointer-events:none; transition:all .3s; box-shadow:0 8px 22px rgba(20,154,155,.35)}
#btt.show {opacity:1; pointer-events:all}
#btt:hover {transform:translateY(-3px)}

@media(max-width:1100px) {
.timeline-track {padding:0 30px; min-width:760px}
.timeline-track {padding-top:160px; padding-bottom:160px}
.ts-card {width:180px}
}

@media(max-width:991px) {
.hero-slide {padding-top:100px}
section {padding:40px 0}
.hero-graphic-wrap {height:320px}
.hg-planet {transform:rotate(var(--deg)) translateY(-120px) rotate(calc(-1 * var(--deg)))}
@keyframes planet-float {0%, 100% {transform:rotate(var(--deg)) translateY(-120px) rotate(calc(-1 * var(--deg)))}50% {transform:rotate(var(--deg)) translateY(-126px) rotate(calc(-1 * var(--deg)))}}
.h-fc {display:none}
.s3-grid {max-width:100%}
.timeline-wrap {display:none}
.timeline-mobile {display:block}
#process {padding:60px 0}
}

@media(max-width:767px) {
.hero-title {font-size:2rem}
.hero-nums {gap:20px}
.hn-num {font-size:1.5rem}
.hero-typing-strip {font-size:.82rem}
.hero-graphic-wrap {height:260px}
.hg-center {width:90px; height:90px}
.hg-center-img {width:50px; height:50px}
.s3-grid {grid-template-columns:1fr 1fr; gap:10px}
.port-filter-tabs {display:none}
section {padding:40px 0}
}

@media(max-width:575px) {
.hero-graphic-wrap {display:none}
}