/* ════════════════════════════════════════
   BOOTSTRAP ICONS — inline, font-display:swap
   Only icons used on this page
════════════════════════════════════════ */
@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff");
}
[class^="bi-"]::before,
[class*=" bi-"]::before {
  font-family:"bootstrap-icons" !important;
  font-style:normal; font-weight:normal; font-variant:normal;
  text-transform:none; line-height:1;
  -webkit-font-smoothing:antialiased; display:inline-block;
}
.bi-arrow-right::before           {content:"\f138"}
.bi-graph-up-arrow::before        {content:"\f5e2"}
.bi-google::before                {content:"\f43c"}
.bi-facebook::before              {content:"\f344"}
.bi-linkedin::before              {content:"\f472"}
.bi-code-slash::before            {content:"\f2a3"}
.bi-megaphone-fill::before        {content:"\f4c8"}
.bi-megaphone::before             {content:"\f4c7"}
.bi-check-circle-fill::before     {content:"\f26b"}
.bi-x-circle::before              {content:"\f623"}
.bi-star-fill::before             {content:"\f588"}
.bi-lightning-charge-fill::before {content:"\f468"}
.bi-shield-check-fill::before     {content:"\f559"}
.bi-shield-check::before          {content:"\f558"}
.bi-globe2::before                {content:"\f404"}
.bi-globe::before                 {content:"\f403"}
.bi-envelope-fill::before         {content:"\f32f"}
.bi-envelope::before              {content:"\f32e"}
.bi-geo-alt-fill::before          {content:"\f3f1"}
.bi-geo-alt::before               {content:"\f3f0"}
.bi-clock-fill::before            {content:"\f294"}
.bi-clock::before                 {content:"\f293"}
.bi-clock-history::before         {content:"\f292"}
.bi-whatsapp::before              {content:"\f618"}
.bi-twitter-x::before             {content:"\f8c5"}
.bi-filetype-html::before         {content:"\f5c6"}
.bi-filetype-css::before          {content:"\f5c1"}
.bi-filetype-js::before           {content:"\f5ca"}
.bi-filetype-php::before          {content:"\f5ce"}
.bi-bootstrap::before             {content:"\f1cb"}
.bi-layers::before                {content:"\f45e"}
.bi-layers-fill::before           {content:"\f45d"}
.bi-wordpress::before             {content:"\f61b"}
.bi-cart3::before                 {content:"\f23a"}
.bi-database::before              {content:"\f2cc"}
.bi-git::before                   {content:"\f3ef"}
.bi-phone::before                 {content:"\f4d4"}
.bi-phone-landscape::before       {content:"\f4d3"}
.bi-instagram::before             {content:"\f437"}
.bi-funnel::before                {content:"\f39a"}
.bi-bar-chart::before             {content:"\f199"}
.bi-bar-chart-fill::before        {content:"\f198"}
.bi-repeat::before                {content:"\f517"}
.bi-palette::before               {content:"\f4cb"}
.bi-trophy::before                {content:"\f5e0"}
.bi-search::before                {content:"\f52a"}
.bi-activity::before              {content:"\f101"}
.bi-speedometer2::before          {content:"\f57e"}
.bi-graph-up::before              {content:"\f414"}
.bi-bug::before                   {content:"\f1da"}
.bi-code-square::before           {content:"\f2a5"}
.bi-award::before                 {content:"\f1af"}
.bi-image::before                 {content:"\f42e"}
.bi-person-check-fill::before     {content:"\f4e0"}
.bi-person-check::before          {content:"\f4df"}

/* ════════════════════════════════════════
   DESIGN SYSTEM
════════════════════════════════════════ */
:root {
  --bg:      #04060D;
  --bg2:     #070B17;
  --card:    #0E1528;
  --card2:   #111A30;
  --line:    rgba(255,255,255,.07);
  --line2:   rgba(255,255,255,.12);
  --teal:    #00E5CC;
  --blue:    #2979FF;
  --coral:   #FF5E57;
  --coral2:  #FF8A85;
  --lime:    #AAFF00;
  --lime2:   #C8FF57;
  --amber:   #FFB830;
  --amber2:  #FFD080;
  --violet:  #8B5CF6;
  --violet2: #A78BFA;
  --pink:    #FF2D78;
  --fg:      #EEF2FF;
  --fg2:     #A0ADCC;
  --fg3:     #7A8BAD;
  --gteal:   linear-gradient(135deg,#00E5CC,#2979FF);
  --gcoral:  linear-gradient(135deg,#FF5E57,#FF8533);
  --glime:   linear-gradient(135deg,#AAFF00,#00E5CC);
  --gamber:  linear-gradient(135deg,#FFB830,#FF5E57);
  --gviolet: linear-gradient(135deg,#8B5CF6,#2979FF);
  --ghero:   linear-gradient(120deg,#00E5CC 0%,#2979FF 40%,#FF5E57 80%,#FFB830 100%);
  --gmulti:  linear-gradient(90deg,#00E5CC,#2979FF,#8B5CF6,#FF5E57,#FFB830);
  --fh:      'Clash Display', sans-serif;
  --fb:      'Plus Jakarta Sans', sans-serif;
  --ease:    cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
html{font-size:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--fg);font-family:var(--fb);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.1}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--teal);color:#000}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px}

.C{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,5vw,48px)}
.sec{padding:clamp(64px,10vw,120px) 0}
.sec-sm{padding:clamp(40px,6vw,64px) 0}

/* Gradient text */
.gteal  {background:var(--gteal);  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gcoral {background:var(--gcoral); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glime  {background:var(--glime);  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gamber {background:var(--gamber); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gviolet{background:var(--gviolet);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ✅ FIX 1: heroShimmer used background-position (non-composited).
   Replaced with static gradient — looks great, zero jank */
.ghero{background:var(--ghero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-weight:700;font-size:.88rem;padding:13px 28px;border-radius:50px;cursor:pointer;border:none;transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s;white-space:nowrap;text-decoration:none}
.btn-teal{background:var(--gteal);color:#000;box-shadow:0 8px 28px rgba(0,229,204,.28)}
.btn-teal:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 48px rgba(0,229,204,.42);color:#000}
.btn-outline{background:transparent;color:var(--fg);border:1.5px solid rgba(255,255,255,.18)}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35);color:var(--fg);transform:translateY(-2px)}

/* Label chip */
.lchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--fb);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.lc-teal  {color:var(--teal);  border:1px solid rgba(0,229,204,.3);  background:rgba(0,229,204,.08)}
.lc-coral {color:var(--coral2);border:1px solid rgba(255,94,87,.28); background:rgba(255,94,87,.08)}
.lc-lime  {color:var(--lime2); border:1px solid rgba(170,255,0,.28); background:rgba(170,255,0,.07)}
.lc-amber {color:var(--amber2);border:1px solid rgba(255,184,48,.28);background:rgba(255,184,48,.07)}
.lc-violet{color:var(--violet2);border:1px solid rgba(139,92,246,.3);background:rgba(139,92,246,.08)}

.sh-title{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:700;margin-bottom:14px}
.sh-sub  {color:var(--fg2);font-size:clamp(.88rem,1.4vw,.98rem);max-width:500px;line-height:1.8}

/* Scroll reveal */
.js-ready [data-rv]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-ready [data-rv="up"]   {transform:translateY(32px)}
.js-ready [data-rv="left"] {transform:translateX(-30px)}
.js-ready [data-rv="right"]{transform:translateX(30px)}
.js-ready [data-rv="scale"]{transform:scale(.94)}
[data-rv].visible{opacity:1;transform:none}

/* ════════ NAVBAR ════════ */
#nav{position:fixed;inset-inline:0;top:0;z-index:990;padding:20px 0;transition:background .4s,padding .4s}
#nav.stuck{background:rgba(4,6,13,.92);backdrop-filter:blur(22px) saturate(150%);padding:12px 0;border-bottom:1px solid var(--line)}
@media (max-width:767px){#nav.stuck{backdrop-filter:blur(12px)}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--fh);font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;color:var(--fg);flex-shrink:0}
.logo em{font-style:normal;background:var(--gteal);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-dot{display:inline-block;width:7px;height:7px;background:var(--coral);border-radius:50%;margin-left:3px;vertical-align:super;animation:dotPop 2s ease-in-out infinite;will-change:transform}
@keyframes dotPop{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.nav-links{display:flex;align-items:center;list-style:none;gap:2px;flex:1;justify-content:center}
.nav-links a{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2);padding:7px 14px;border-radius:8px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.nav-end{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-cta{display:inline-flex}
.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line2);border-radius:10px;cursor:pointer;flex-shrink:0;padding:0}
.burger span{display:block;width:20px;height:1.8px;background:var(--fg);border-radius:2px;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* Mobile drawer */
.m-drawer{position:fixed;inset:0;z-index:980;background:rgba(4,6,13,.99);display:flex;flex-direction:column;padding:clamp(90px,15vh,120px) clamp(24px,6vw,48px) 40px;gap:0;transform:translate3d(100%,0,0);transition:transform .45s var(--ease);will-change:transform;overflow-y:auto;overscroll-behavior:contain}
.m-drawer.open{transform:translate3d(0,0,0)}
.m-drawer:not(.open){visibility:hidden;pointer-events:none}
.m-drawer.open{visibility:visible;pointer-events:auto}
.m-drawer a{font-family:var(--fh);font-size:clamp(1.8rem,8vw,3rem);font-weight:700;color:rgba(238,242,255,.55);padding:12px 0;border-bottom:1px solid var(--line);transition:color .2s}
.m-drawer a:hover,.m-drawer a:active{color:var(--teal)}
.m-drawer .m-cta{margin-top:28px;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.m-drawer{transition:none}}

/* Global reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .orb,.hero-mesh,.orbit,.ticker-track{animation:none !important}
}

/* ════════ HERO ════════ */
.hero{min-height:100vh;display:flex;align-items:center;padding:clamp(100px,15vh,140px) 0 clamp(56px,8vw,80px);position:relative;overflow:hidden}
.hero-mesh{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 60% at 10% 45%,rgba(0,229,204,.14) 0%,transparent 60%),radial-gradient(ellipse 55% 55% at 90% 20%,rgba(41,121,255,.11) 0%,transparent 55%),radial-gradient(ellipse 45% 60% at 65% 85%,rgba(255,94,87,.09) 0%,transparent 55%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);animation:meshDrift 16s ease-in-out infinite alternate;will-change:filter}
@media (max-width:767px){.hero-mesh{animation:none;background:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(0,229,204,.09) 0%,transparent 65%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}}
@media (min-width:768px) and (max-width:991px){.hero-mesh{animation:meshDrift 24s ease-in-out infinite alternate}}
@media (prefers-reduced-motion:reduce){.hero-mesh{animation:none}}
@keyframes meshDrift{0%{filter:hue-rotate(0deg) brightness(1)}100%{filter:hue-rotate(20deg) brightness(1.04)}}

.hero-grid-pat{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px}

.orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;animation:orbFloat ease-in-out infinite alternate;will-change:transform}
.orb-1{width:clamp(200px,35vw,420px);height:clamp(200px,35vw,420px);background:rgba(0,229,204,.14);top:-100px;left:-80px;animation-duration:14s}
.orb-2{width:clamp(150px,25vw,300px);height:clamp(150px,25vw,300px);background:rgba(41,121,255,.11);top:20%;right:-60px;animation-duration:11s;animation-delay:-4s}
.orb-3{width:clamp(120px,20vw,250px);height:clamp(120px,20vw,250px);background:rgba(255,94,87,.1);bottom:10%;left:25%;animation-duration:17s;animation-delay:-8s}
.orb-4{width:clamp(100px,16vw,200px);height:clamp(100px,16vw,200px);background:rgba(170,255,0,.08);bottom:-40px;right:20%;animation-duration:21s;animation-delay:-2s}
@media (max-width:767px){.orb-1,.orb-2,.orb-3,.orb-4{display:none}}
@media (min-width:768px) and (max-width:991px){.orb{filter:blur(48px)}.orb-1{width:220px;height:220px}.orb-2{width:160px;height:160px}.orb-3{width:140px;height:140px}.orb-4{width:110px;height:110px}}
@keyframes orbFloat{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.04)}100%{transform:translateY(8px) scale(.97)}}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(0,229,204,.1);border:1px solid rgba(0,229,204,.28);border-radius:50px;padding:7px 16px 7px 7px;margin-bottom:24px;animation:fadeUp .9s both}
.badge-flag{width:28px;height:28px;border-radius:50%;background:var(--gteal);display:flex;align-items:center;justify-content:center;font-size:.78rem}
.badge-txt{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.live-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;animation:dotPop 1.4s infinite;will-change:transform}

.hero-h1{font-size:clamp(2.8rem,7.5vw,6.6rem);font-weight:700;line-height:1;letter-spacing:-.025em}
.h1-plain{color:var(--fg);display:block}
.h1-grad{display:block}
.hero-desc{font-size:clamp(.9rem,1.5vw,1.08rem);color:var(--fg2);max-width:520px;line-height:1.82;margin:22px 0 36px;animation:fadeUp .9s .2s both}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;animation:fadeUp .9s .3s both}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:44px;animation:fadeUp .9s .4s both}
.trust-avs{display:flex}
.trust-avs .av{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--bg);font-family:var(--fh);font-weight:700;font-size:.74rem;display:flex;align-items:center;justify-content:center;margin-left:-10px}
.trust-avs .av:first-child{margin-left:0}
.trust-words{font-size:.84rem;color:var(--fg2)}
.trust-words strong{color:var(--fg)}

.hero-card{background:rgba(14,21,40,.92);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:clamp(20px,3vw,28px);position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;inset:-1px;border-radius:22px;background:linear-gradient(135deg,rgba(0,229,204,.25),transparent 45%,rgba(41,121,255,.18));z-index:-1}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.m-box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:16px 10px;text-align:center}
.m-val{font-family:var(--fh);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1;margin-bottom:4px}
.m-lbl{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:50px;font-size:.75rem;font-weight:600;border:1px solid}
.p-teal  {border-color:rgba(0,229,204,.3); background:rgba(0,229,204,.08); color:var(--teal)}
.p-blue  {border-color:rgba(41,121,255,.3);background:rgba(41,121,255,.08);color:#7BAAFF}
.p-coral {border-color:rgba(255,94,87,.3);  background:rgba(255,94,87,.08);  color:var(--coral2)}
.p-lime  {border-color:rgba(170,255,0,.28); background:rgba(170,255,0,.07);  color:var(--lime2)}
.p-amber {border-color:rgba(255,184,48,.28);background:rgba(255,184,48,.07); color:var(--amber2)}
.p-violet{border-color:rgba(139,92,246,.3); background:rgba(139,92,246,.08); color:var(--violet2)}
.live-bar{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.live-title{display:flex;align-items:center;gap:7px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-bottom:10px}
.live-title .ld{width:6px;height:6px;background:var(--lime);border-radius:50%;animation:dotPop 1.4s infinite;will-change:transform}
.live-row{display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:5px}
.live-row span{color:var(--fg2)}
.live-row strong{font-weight:700}
.pbar{height:5px;background:rgba(255,255,255,.07);border-radius:50px;margin-bottom:7px}
.pfill{height:100%;border-radius:50px}

/* Scroll indicator */
/* ✅ FIX 2: scrollAnim used height (non-composited).
   Replaced with transform:scaleY() — fully GPU composited */
.scroll-ind{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);animation:fadeUp 1s .8s both}
.scroll-line{width:1px;height:46px;background:linear-gradient(var(--teal),transparent);animation:scrollAnim 2s ease-in-out infinite;will-change:transform;transform-origin:top center}
@keyframes scrollAnim{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.6);opacity:.35}}

@keyframes fadeUp   {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}

/* ════════ RAINBOW LINE ════════ */
/* ✅ FIX 3: borderSlide used background-position (non-composited).
   Replaced with transform:translateX() on a pseudo child — GPU composited */
.rainbow-line{height:3px;overflow:hidden;position:relative;flex-shrink:0}
.rainbow-line::after{content:'';position:absolute;inset:0;width:300%;left:-100%;background:var(--gmulti);animation:rainbowSlide 6s linear infinite;will-change:transform}
@keyframes rainbowSlide{from{transform:translateX(0)}to{transform:translateX(33.333%)}}

/* ════════ TICKER ════════ */
.ticker-wrap{background:var(--bg2);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.ticker-track{display:flex;gap:0;animation:tickScroll 28s linear infinite;white-space:nowrap;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
.t-item{display:inline-flex;align-items:center;gap:16px;padding:0 32px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.t-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ════════ SERVICES ════════ */
.svc-section{background:var(--bg2)}
.svc-header{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);align-items:end;margin-bottom:52px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,30px);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;cursor:default}
.svc-card::after{content:'';position:absolute;inset-inline:0;top:0;height:3px;border-radius:20px 20px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);will-change:transform}
.svc-card:hover{transform:translateY(-8px)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-card.s-teal::after  {background:var(--gteal)}
.svc-card.s-coral::after {background:var(--gcoral)}
.svc-card.s-lime::after  {background:var(--glime)}
.svc-card.s-amber::after {background:var(--gamber)}
.svc-card.s-violet::after{background:var(--gviolet)}
.svc-card:hover.s-teal  {box-shadow:0 20px 60px rgba(0,229,204,.15); border-color:rgba(0,229,204,.2)}
.svc-card:hover.s-coral {box-shadow:0 20px 60px rgba(255,94,87,.14); border-color:rgba(255,94,87,.2)}
.svc-card:hover.s-lime  {box-shadow:0 20px 60px rgba(170,255,0,.12); border-color:rgba(170,255,0,.18)}
.svc-card:hover.s-amber {box-shadow:0 20px 60px rgba(255,184,48,.14);border-color:rgba(255,184,48,.2)}
.svc-card:hover.s-violet{box-shadow:0 20px 60px rgba(139,92,246,.18);border-color:rgba(139,92,246,.25)}
.svc-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:20px}
.svc-card.s-teal   .svc-ico{background:rgba(0,229,204,.12); color:var(--teal)}
.svc-card.s-coral  .svc-ico{background:rgba(255,94,87,.12);  color:var(--coral2)}
.svc-card.s-lime   .svc-ico{background:rgba(170,255,0,.1);   color:var(--lime2)}
.svc-card.s-amber  .svc-ico{background:rgba(255,184,48,.1);  color:var(--amber2)}
.svc-card.s-violet .svc-ico{background:rgba(139,92,246,.12); color:var(--violet2)}
.svc-card h3{font-size:clamp(1.05rem,2vw,1.2rem);margin-bottom:10px;font-weight:700}
.svc-card p {color:var(--fg2);font-size:clamp(.82rem,1.2vw,.9rem);line-height:1.72;margin-bottom:16px}
.tag-row{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.67rem;font-weight:600;padding:3px 11px;border-radius:50px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg3)}
.svc-card.wide{grid-column:span 2}
.svc-card.wide .svc-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}

/* ════════ STATS ════════ */
.stats-sec{position:relative;overflow:hidden;background:linear-gradient(160deg,#06091A 0%,#020A08 50%,#0A0608 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,229,204,.05),transparent 70%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.stat-col{text-align:center;padding:clamp(36px,6vw,60px) 20px;border-right:1px solid var(--line)}
.stat-col:last-child{border-right:none}
.stat-emoji{font-size:1.5rem;display:block;margin-bottom:10px}
.stat-num{font-family:var(--fh);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1;margin-bottom:6px}
.stat-lbl{font-size:.82rem;font-weight:600;color:var(--fg2)}

/* ════════ WHY US ════════ */
.why-sec{background:var(--bg)}
.why-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.why-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.wf-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;gap:13px;align-items:flex-start;transition:transform .3s var(--ease),border-color .3s}
.wf-card:hover{transform:translateY(-4px);border-color:rgba(0,229,204,.22)}
.wf-ico{width:40px;height:40px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.wf-card h3{font-size:.93rem;font-weight:700;margin-bottom:4px}
.wf-card p {font-size:.8rem;color:var(--fg2);margin:0;line-height:1.6}

.why-visual{position:relative;height:clamp(320px,40vw,480px);display:flex;align-items:center;justify-content:center}
.orbit{position:absolute;border-radius:50%;border:1px dashed;animation:spin linear infinite;will-change:transform}
.or-1{width:clamp(240px,30vw,320px);height:clamp(240px,30vw,320px);border-color:rgba(0,229,204,.18);animation-duration:28s}
.or-2{width:clamp(160px,22vw,220px);height:clamp(160px,22vw,220px);border-color:rgba(255,94,87,.18);animation-duration:18s;animation-direction:reverse}
.or-3{width:clamp(90px,13vw,130px); height:clamp(90px,13vw,130px); border-color:rgba(170,255,0,.18); animation-duration:10s}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.orbit-center{position:relative;z-index:2;width:clamp(80px,10vw,100px);height:clamp(80px,10vw,100px);border-radius:50%;background:var(--gteal);display:flex;align-items:center;justify-content:center;font-size:clamp(1.8rem,3vw,2.4rem);box-shadow:0 0 60px rgba(0,229,204,.45),0 0 120px rgba(0,229,204,.2)}
.orbit-planet{position:absolute;width:12px;height:12px;border-radius:50%}
.op-1{background:var(--teal); top:0;left:50%;transform:translateX(-50%)}
.op-2{background:var(--coral);bottom:0;left:50%;transform:translateX(-50%)}
.op-3{background:var(--lime); left:0;top:50%;transform:translateY(-50%)}
.op-4{background:var(--amber);right:0;top:50%;transform:translateY(-50%)}

/* ════════ PROCESS ════════ */
/* ✅ FIX 4: Removed JS fixProcGrid() entirely. Pure CSS handles all breakpoints.
   Eliminates forced reflow from window.innerWidth reads after DOM writes. */
.proc-sec{background:var(--bg2)}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0 16px;margin-top:56px;position:relative}
.proc-grid::before{content:'';position:absolute;top:38px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--teal) 25%,var(--coral) 50%,var(--lime) 75%,transparent)}
.proc-step{text-align:center;padding:0 8px}
.proc-icon{width:clamp(62px,7vw,76px);height:clamp(62px,7vw,76px);border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:700;position:relative;z-index:1;border:2px solid}
.proc-step:nth-child(1) .proc-icon{background:rgba(0,229,204,.12); border-color:rgba(0,229,204,.45);  color:var(--teal)}
.proc-step:nth-child(2) .proc-icon{background:rgba(41,121,255,.12);border-color:rgba(41,121,255,.45); color:#7BAAFF}
.proc-step:nth-child(3) .proc-icon{background:rgba(170,255,0,.1);  border-color:rgba(170,255,0,.38);  color:var(--lime2)}
.proc-step:nth-child(4) .proc-icon{background:rgba(255,184,48,.1); border-color:rgba(255,184,48,.4);  color:var(--amber2)}
.proc-step:nth-child(5) .proc-icon{background:rgba(255,94,87,.1);  border-color:rgba(255,94,87,.4);   color:var(--coral2)}
.proc-step h3{font-size:clamp(.9rem,1.4vw,1rem);font-weight:700;margin-bottom:8px}
.proc-step p {font-size:clamp(.78rem,1.1vw,.84rem);color:var(--fg2);line-height:1.65}

/* ════════ EXPERTISE ════════ */
.exp-sec{background:var(--bg)}
.exp-header{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);align-items:end;margin-bottom:40px}
.tab-bar{display:flex;flex-wrap:wrap;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:50px;padding:6px;width:fit-content;margin-bottom:36px}
.tab-btn{padding:9px 22px;border-radius:50px;font-family:var(--fb);font-size:.8rem;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--fg2);transition:background .28s,color .28s,box-shadow .28s}
.tab-btn.on{background:var(--gteal);color:#000;box-shadow:0 4px 18px rgba(0,229,204,.3)}
.tab-panel{display:none}
.tab-panel.on{display:block}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:11px}
.tech-pill{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center;font-size:.79rem;font-weight:700;cursor:default;transition:transform .28s var(--ease),border-color .28s,background .28s}
.tech-pill i{display:block;font-size:1.6rem;margin-bottom:7px}
.tech-pill:hover{transform:translateY(-5px);border-color:rgba(0,229,204,.3);background:rgba(0,229,204,.05)}

/* ════════ PRICING ════════ */
.price-sec{background:var(--bg2);position:relative;overflow:hidden}
.price-sec::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:min(700px,90vw);height:240px;background:radial-gradient(ellipse,rgba(0,229,204,.06),transparent 70%)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{background:var(--card2);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3.5vw,40px);position:relative;transition:transform .35s var(--ease)}
.price-card:hover{transform:translateY(-8px)}
.price-card.best{border-color:transparent;background:linear-gradient(var(--card2),var(--card2)) padding-box,var(--gteal) border-box;box-shadow:0 24px 72px rgba(0,229,204,.16)}
.best-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gteal);color:#000;font-family:var(--fb);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 16px;border-radius:50px;white-space:nowrap}
.plan-nm{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:10px}
.plan-price{font-family:var(--fh);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;line-height:1}
.plan-price sup{font-size:1.3rem;vertical-align:super}
.plan-price .per{font-size:.86rem;font-weight:400;color:var(--fg3)}
.plan-desc{color:var(--fg2);font-size:.83rem;margin:10px 0 20px}
.plan-list{list-style:none;padding:0;margin:0 0 24px}
.plan-list li{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;margin-bottom:8px;color:var(--fg2)}
.plan-list li i{flex-shrink:0;margin-top:3px;font-size:.88rem}
.plan-list li.yes{color:var(--fg)}
.plan-list li.yes i{color:var(--lime)}
.plan-list li.no{opacity:.35;text-decoration:line-through}

/* ════════ TESTIMONIALS ════════ */
.testi-sec{background:var(--bg)}
.testi-header{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);align-items:end;margin-bottom:48px}
.testi-grid{display:grid;grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:20px}
.t-card{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,30px);position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.t-card:hover{transform:translateY(-6px)}
.t-card:nth-child(1):hover{border-color:rgba(0,229,204,.25)}
.t-card:nth-child(2):hover{border-color:rgba(255,94,87,.22)}
.t-card:nth-child(3):hover{border-color:rgba(170,255,0,.2)}
.t-card::before{content:'"';position:absolute;top:-12px;right:16px;font-size:8rem;font-family:var(--fh);font-weight:700;color:rgba(255,255,255,.025);line-height:1}
/* ✅ FIX 5: .t-stars — aria-label is NOT prohibited on div.
   PageSpeed flagged it because there's no role. Add role="img" to make it valid. */
.t-stars{display:flex;gap:3px;margin-bottom:14px}
.t-stars i{color:var(--amber);font-size:.82rem}
.t-text{color:rgba(238,242,255,.8);font-size:clamp(.84rem,1.2vw,.9rem);line-height:1.8;margin-bottom:22px}
.t-author{display:flex;align-items:center;gap:13px}
.t-av{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;font-size:.95rem}
.t-name{font-weight:700;font-size:.88rem}
.t-role{font-size:.76rem;color:var(--fg2)}

/* ════════ CTA BAND ════════ */
.cta-band{background:linear-gradient(160deg,#06102A 0%,#020C08 60%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(800px,90vw);height:350px;background:radial-gradient(ellipse,rgba(0,229,204,.08) 0%,rgba(41,121,255,.05) 40%,transparent 70%)}
/* ✅ FIX 6: cta-band::after also used background-position (borderSlide).
   Replaced with a child .cta-stripe element using transform:translateX() */
.cta-stripe{position:absolute;inset-inline:0;top:0;height:2px;overflow:hidden}
.cta-stripe::after{content:'';position:absolute;top:0;left:-100%;width:300%;height:100%;background:var(--gmulti);animation:rainbowSlide 4s linear infinite;will-change:transform}
.cta-inner{position:relative;z-index:2;text-align:center;padding:clamp(56px,8vw,96px) 20px}
.cta-inner h2{font-size:clamp(1.8rem,5vw,3.8rem);font-weight:700;margin-bottom:14px}
.cta-inner p{color:var(--fg2);max-width:500px;margin:0 auto 32px}
.cta-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.cta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:28px;font-size:.8rem;color:var(--fg2)}
.ct{display:flex;align-items:center;gap:6px}
.ct i{color:var(--lime)}

/* ════════ CONTACT ════════ */
.contact-sec{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,6vw,64px);align-items:start}
.contact-label{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.contact-label::before{content:'';display:block;width:24px;height:2px;background:var(--gteal);border-radius:2px}
.ci-list{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.ci-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .25s}
.ci-item:hover{border-color:rgba(0,229,204,.25)}
.ci-ico{width:42px;height:42px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.ci-lbl{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);margin-bottom:2px}
.ci-val{font-weight:700;font-size:.9rem}
.ci-val a{color:var(--fg);transition:color .2s}
.ci-val a:hover{color:var(--teal)}
.form-box{background:var(--card);border:1px solid rgba(0,229,204,.18);border-radius:24px;padding:clamp(24px,4vw,44px);position:relative}
.form-box::before{content:'';position:absolute;inset:-1px;border-radius:24px;background:linear-gradient(135deg,rgba(0,229,204,.15),transparent 50%);z-index:-1}


/* ════════ FOOTER ════════ */
footer{background:var(--bg);border-top:1px solid var(--line)}
.foot-main{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(20px,4vw,48px);padding:clamp(48px,8vw,80px) 0 clamp(32px,5vw,48px)}
.foot-logo{font-family:var(--fh);font-size:clamp(1.5rem,2.5vw,1.8rem);font-weight:700;margin-bottom:12px}
.foot-logo em{font-style:normal;background:var(--gteal);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.foot-desc{color:var(--fg2);font-size:.84rem;max-width:265px;line-height:1.75;margin-bottom:20px}
.foot-soc{display:flex;gap:9px}
.foot-soc a{width:36px;height:36px;border-radius:10px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--fg2);font-size:.9rem;transition:background .22s,color .22s,box-shadow .22s,border-color .22s}
.foot-soc a:hover{background:var(--gteal);color:#000;border-color:transparent;box-shadow:0 5px 18px rgba(0,229,204,.3)}
.foot-col-h{font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);margin-bottom:16px}
.foot-links{list-style:none;padding:0}
.foot-links li{margin-bottom:9px}
.foot-links a{color:var(--fg2);font-size:.83rem;transition:color .2s}
.foot-links a:hover{color:var(--teal)}
.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.foot-copy{color:var(--fg3);font-size:.78rem}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px}
.foot-legal a{color:var(--fg3);font-size:.76rem;padding:4px 11px;border-radius:50px;border:1px solid var(--line);transition:color .2s,border-color .2s}
.foot-legal a:hover{color:var(--teal);border-color:rgba(0,229,204,.28)}

/* WA Float */
.wa-float{position:fixed;bottom:26px;right:26px;z-index:970;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.45rem;box-shadow:0 8px 28px rgba(37,211,102,.38);transition:transform .25s var(--ease),box-shadow .25s;will-change:transform}
.wa-float:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 14px 42px rgba(37,211,102,.55);color:#fff}

/* Cookie banner */
.ck-bar{position:fixed;bottom:0;inset-inline:0;z-index:980;background:rgba(14,21,40,.97);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:16px clamp(16px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--fg2)}
.ck-bar a{color:var(--teal)}
.ck-bar button{background:var(--gteal);color:#000;border:none;border-radius:50px;padding:8px 22px;font-weight:800;font-size:.8rem;cursor:pointer;flex-shrink:0}

/* ════════════════════════════════════════
   RESPONSIVE — tablet ≤ 991px
════════════════════════════════════════ */
@media (max-width:991px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .hero-card{margin-top:24px}
  .svc-header{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-card.wide{grid-column:span 2}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-col:nth-child(2){border-right:none}
  .stat-col:nth-child(3){border-top:1px solid var(--line);border-right:1px solid var(--line)}
  .stat-col:nth-child(4){border-top:1px solid var(--line)}
  .why-inner{grid-template-columns:1fr}
  .why-visual{height:280px}
  .why-feat-grid{grid-template-columns:1fr 1fr}
  /* ✅ Process grid — CSS breakpoints (no JS needed) */
  .proc-grid{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .proc-grid::before{display:none}
  .exp-header{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .price-card.best{grid-column:span 2}
  .testi-header{grid-template-columns:1fr}
  
  .contact-grid{grid-template-columns:1fr}
  .ci-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .foot-main{grid-template-columns:1fr 1fr;gap:28px}
}

/* ════════════════════════════════════════
   RESPONSIVE — mobile ≤ 767px
════════════════════════════════════════ */
@media (max-width:767px){
  .hero-h1{font-size:clamp(2.4rem,11vw,3.8rem)}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{justify-content:center;text-align:center}
  .hero-trust{flex-direction:column;align-items:flex-start;gap:10px}
  .metric-row{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:1fr}
  .svc-card.wide{grid-column:auto}
  .svc-card.wide .svc-inner{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-col{border-right:none !important}
  .stat-col:nth-child(odd){border-right:1px solid var(--line) !important}
  .why-feat-grid{grid-template-columns:1fr}
  .why-visual{display:none}
  /* ✅ Process grid mobile */
  .proc-grid{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .tech-grid{grid-template-columns:repeat(3,1fr)}
  .tab-bar{border-radius:16px}
  .price-grid{grid-template-columns:1fr}
  .price-card.best{grid-column:auto}
  .contact-grid{grid-template-columns:1fr}
  .ci-list{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr;gap:22px}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center}
  .cta-inner{padding:56px 20px}
  .wa-float{width:48px;height:48px;font-size:1.3rem;bottom:18px;right:18px}
  .ck-bar{flex-direction:column;text-align:center}
}

/* ════════════════════════════════════════
   RESPONSIVE — small mobile ≤ 480px
════════════════════════════════════════ */
@media (max-width:480px){
  .metric-row{grid-template-columns:repeat(2,1fr)}
  .metric-row .m-box:last-child{grid-column:span 2}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  /* ✅ Process grid small mobile */
  .proc-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat-col{border-right:none !important;border-top:1px solid var(--line)}
  .stat-col:first-child{border-top:none}
}

/* ════════ Large desktop ≥ 1400px ════════ */
@media (min-width:1400px){.C{max-width:1380px}}