:root{
  --primary:#F5540D;
  --primary-dark:#D8460A;
  --dark:#14161B;
  --body:#5B6470;
  --muted:#8A93A1;
  --border:#ECEEF1;

  --blue:#2F6FED;
  --blue-tint:#F0F6FF;
  --green:#16A34A;
  --green-tint:#F1FBF6;
  --purple:#7C3AED;
  --purple-tint:#F8F6FF;
  --orange-tint:#FEF5F2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--body);
  font-size:15.5px;
  line-height:1.7;
  background:#fff;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--dark);
  font-weight:800;
  letter-spacing:-0.02em;
}
a{text-decoration:none;}
.container-xl{max-width:1240px;}

.text-primary-o{color:var(--primary)!important;}
.bg-primary-o{background:var(--primary)!important;}

/* ===== Preloader ===== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-mark{
  width:160px; height:56px; border-radius:16px; background:var(--dark);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:24px;
  position:relative; animation:preloaderPulse 1.1s ease-in-out infinite;
}
.preloader-mark::after{content:"";position:absolute; right:-8px; top:-8px; width:20px; height:20px; background:var(--primary); border-radius:6px; transform:rotate(20deg);}
.preloader-mark::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:2.5px solid transparent; border-top-color:var(--primary); border-right-color:var(--primary);
  animation:preloaderSpin .9s linear infinite;
}
@keyframes preloaderSpin{to{transform:rotate(360deg);}}
@keyframes preloaderPulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(245,84,13,.28);}
  50%{transform:scale(1.08); box-shadow:0 0 0 14px rgba(245,84,13,0);}
}
@media (prefers-reduced-motion: reduce){ .preloader-mark::before{animation:none;} }

/* ===== Scroll progress bar ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1100;
  background:linear-gradient(90deg, var(--primary), #FF9457);
  transition:width .1s linear;
}

/* ===== Reveal-on-scroll animations ===== */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:var(--d,0s);}
.reveal-left{opacity:0; transform:translateX(-40px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:var(--d,0s);}
.reveal-right{opacity:0; transform:translateX(40px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:var(--d,0s);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); transition-delay:var(--d,0s);}
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-scale{opacity:1; transform:none; transition:none;}
}

/* ===== Buttons ===== */
.btn{font-weight:600; font-size:14.5px; border-radius:8px; padding:12px 22px; transition:.25s ease; position:relative; overflow:hidden;}
.btn-primary-o{background:var(--primary); border:1px solid var(--primary); color:#fff;}
.btn-primary-o:hover{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; transform:translateY(-2px); box-shadow:0 12px 24px rgba(245,84,13,.28);}
.btn-outline-dark-o{background:#fff; border:1px solid #E3E5E9; color:var(--dark);}
.btn-outline-dark-o:hover{background:#F7F8FA; color:var(--dark); transform:translateY(-2px); box-shadow:0 10px 20px rgba(20,22,27,.08);}
.btn-white-o{background:#fff; color:var(--primary); border:1px solid #fff;}
.btn-white-o:hover{background:#FFEDE7; color:var(--primary-dark); transform:translateY(-2px);}
.btn-outline-white-o{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);}
.btn-outline-white-o:hover{background:rgba(255,255,255,.12); color:#fff; transform:translateY(-2px);}
.btn-sm-o{padding:9px 16px; font-size:13.5px; border-radius:7px;}

/* button shine sweep */
.btn-primary-o::before, .btn-white-o::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary-o:hover::before, .btn-white-o:hover::before{left:130%;}

.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); margin-bottom:12px;
}
.eyebrow::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--primary); display:inline-block; animation:pulseDot 1.8s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(1.6); opacity:.5;}}

/* ===== Navbar ===== */
.navbar-hb{
  padding:16px 0; background:linear-gradient(180deg, #FFF8F5, #FFFFFF); transition:.3s ease; position:sticky; top:0; z-index:1000;
  border-bottom:1px solid transparent;
}
.navbar-hb.scrolled{
  box-shadow:0 4px 22px rgba(20,22,27,.06); border-bottom:1px solid var(--border);
  padding:11px 0; background:rgba(255,248,245,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--dark);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:17px; position:relative; overflow:hidden;
  transition:transform .35s ease;
}
.navbar-brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
.brand-mark::after{content:""; position:absolute; right:-6px; top:-6px; width:16px; height:16px; background:var(--primary); border-radius:4px; transform:rotate(20deg);}
.brand-text{font-weight:800; font-size:20px; color:var(--dark); letter-spacing:-.02em;}
.brand-text span{color:var(--primary);}
.brand-suffix{font-weight:600; font-size:11.5px; color:var(--muted); letter-spacing:0; text-transform:none; vertical-align:middle;}
@media (max-width:575.98px){.brand-suffix{display:none;}}
.nav-hb{
  background:#F7F8FA; border-radius:999px; padding:5px; gap:2px;
}
.nav-hb .nav-link{
  font-weight:600; font-size:14.5px; color:#3A3F47; padding:8px 16px!important; position:relative;
  border-radius:999px; transition:color .25s ease, background .25s ease;
}
.nav-hb .nav-link.active, .nav-hb .nav-link:hover{color:var(--primary); background:#fff; box-shadow:0 3px 10px rgba(20,22,27,.07);}
.nav-hb .nav-item.dropdown.show .nav-link{color:var(--primary); background:#fff; box-shadow:0 3px 10px rgba(20,22,27,.07);}
@media (max-width:991.98px){
  .nav-hb{background:none; border-radius:0; padding:0;}
  .nav-hb .nav-link.active, .nav-hb .nav-link:hover{box-shadow:none;}
}
.nav-hb .nav-item.dropdown .dropdown-menu{border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(20,22,27,.08); padding:8px;}
.nav-hb .dropdown-item{border-radius:6px; font-size:14px; font-weight:500; padding:8px 12px; transition:.2s;}
.nav-hb .dropdown-item:hover{background:var(--orange-tint); color:var(--primary); padding-left:16px;}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(180deg,#FFF6F3 0%, #FFFFFF 78%);
  padding:24px 0 40px;
  overflow:hidden;
  position:relative;
  min-height:92vh;
  min-height:92svh;
  width:100%;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(20,22,27,.07) 1.6px, transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 38%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 38%, #000 35%, transparent 78%);
}
.hero::after{
  content:""; position:absolute; left:-12%; bottom:-22%; width:560px; height:560px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(245,84,13,.16), transparent 70%);
  filter:blur(6px); animation:auroraDrift 18s ease-in-out infinite;
}
.hero > .container{width:100%; position:relative; z-index:1;}
@media (max-width:767.98px){
  .hero{min-height:auto; padding:28px 0 40px;}
}
@media (prefers-reduced-motion: reduce){ .hero::after{animation:none;} }
.hero h1{font-size:2.7rem; line-height:1.14; margin-bottom:18px;}
@media (min-width:1200px){ .hero h1{font-size:3.35rem;} }
.hero p.lead-o{font-size:16px; color:var(--body); max-width:460px; margin-bottom:28px;}
@media (min-width:1200px){ .hero p.lead-o{font-size:17px; max-width:480px;} }

/* scroll-down cue */
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  z-index:2; transition:color .25s ease, transform .25s ease;
}
.scroll-cue:hover{color:var(--primary); transform:translateX(-50%) translateY(-3px);}
.scroll-cue-mouse{width:24px; height:38px; border:2px solid currentColor; border-radius:14px; position:relative; opacity:.65;}
.scroll-cue-mouse span{
  position:absolute; left:50%; top:6px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:currentColor;
  animation:scrollCueDrop 1.7s ease-in-out infinite;
}
@keyframes scrollCueDrop{0%{opacity:1; transform:translateY(0);}70%{opacity:0; transform:translateY(12px);}100%{opacity:0; transform:translateY(0);}}
@media (max-width:767.98px){ .scroll-cue{display:none;} }
@media (prefers-reduced-motion: reduce){ .scroll-cue-mouse span{animation:none;} }
.avatar-stack{display:flex;}
.avatar-stack img, .avatar-stack .av{
  width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-left:-10px; object-fit:cover;
  background:#D8DEE8; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#556;
  transition:transform .25s ease;
}
.avatar-stack .av:hover{transform:translateY(-4px);}
.avatar-stack .av:first-child{margin-left:0;}
.trust-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px;}
.trust-row .stars{color:#FFB627; font-size:13px; letter-spacing:1px;}
.trust-row small{color:var(--muted); font-weight:600; font-size:13px;}

/* hero visual */
.hero-visual{position:relative; height:420px; transform-style:preserve-3d; transition:transform .2s ease-out; will-change:transform;}
@media (min-width:1200px){ .hero-visual{height:500px;} }
.hv-laptop{
  position:absolute; left:14%; top:26%; width:60%; background:#fff; border-radius:12px 12px 4px 4px;
  box-shadow:0 30px 60px rgba(20,22,27,.14); border:1px solid #EFF1F4; overflow:hidden; z-index:3;
}
.hv-laptop .bar{background:#F5F6F8; padding:8px 12px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #EEE;}
.hv-laptop .bar span{width:7px; height:7px; border-radius:50%; background:#D8DCE2;}
.hv-laptop .screen{padding:16px; }
.hv-laptop .screen .top-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.hv-laptop .screen .brand{display:flex; align-items:center; gap:6px; font-weight:800; font-size:12px; color:var(--dark);}
.hv-laptop .screen .brand .dot{width:16px;height:16px;border-radius:5px;background:var(--dark);display:inline-block;position:relative;}
.hv-laptop .screen .brand .dot::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;background:var(--primary);border-radius:2px;}
.hv-laptop .screen .pill{background:var(--primary); color:#fff; font-size:9px; font-weight:700; padding:4px 9px; border-radius:20px; animation:pillGlow 2.4s ease-in-out infinite;}
@keyframes pillGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,84,13,.35);}50%{box-shadow:0 0 0 6px rgba(245,84,13,0);}}
.hv-laptop .screen .lines{display:flex; flex-direction:column; gap:7px;}
.hv-laptop .screen .lines i{display:block; height:8px; border-radius:4px; background:#F1F2F5; position:relative; overflow:hidden;}
.hv-laptop .screen .lines i::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation:shimmer 2.6s ease-in-out infinite;
}
.hv-laptop .screen .lines i:nth-child(2)::after{animation-delay:.2s;}
.hv-laptop .screen .lines i:nth-child(3)::after{animation-delay:.4s;}
.hv-laptop .screen .lines i:nth-child(4)::after{animation-delay:.6s;}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.hv-laptop .base{height:10px; background:linear-gradient(180deg,#e7e9ec,#d3d6db); border-radius:0 0 8px 8px;}

.hv-phone{
  position:absolute; right:6%; bottom:6%; width:78px; height:150px; background:#16181D; border-radius:16px;
  padding:5px; box-shadow:0 24px 40px rgba(20,22,27,.22); z-index:4; animation:floaty 4.4s ease-in-out infinite;
}
.hv-phone .screen{background:#fff; width:100%; height:100%; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.hv-phone .screen .brand-mark{width:26px; height:26px; border-radius:7px; font-size:12px;}

.hv-servers{
  position:absolute; right:16%; top:18%; width:88px; z-index:2;
}
.hv-servers .row-u{background:#1B1E24; border-radius:6px; padding:7px 9px; margin-bottom:6px; box-shadow:0 14px 24px rgba(20,22,27,.18); display:flex; align-items:center; justify-content:space-between;}
.hv-servers .row-u span{width:5px; height:5px; border-radius:50%; background:var(--primary); animation:blink 1.6s ease-in-out infinite;}
.hv-servers .row-u:nth-child(2) span{animation-delay:.3s;}
.hv-servers .row-u:nth-child(3) span{animation-delay:.6s;}
.hv-servers .row-u:nth-child(4) span{animation-delay:.9s;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hv-servers .row-u i{display:block; width:34px; height:3px; background:#3A3F47; border-radius:2px;}

.hv-globe{
  position:absolute; right:2%; bottom:2%; width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #3A3F47, #101216 68%);
  box-shadow:0 16px 30px rgba(20,22,27,.25); z-index:1; animation:spinGlobe 14s linear infinite;
}
@keyframes spinGlobe{0%{background-position:0 0;}100%{background-position:0 0;}}
.hv-globe::before{
  content:""; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0/25% 100%;
  animation:globeSheen 6s linear infinite;
}
@keyframes globeSheen{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.hv-globe::after{content:""; position:absolute; right:16px; top:20px; width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(245,84,13,.25);}

.hv-badge{
  position:absolute; width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px rgba(20,22,27,.12); z-index:5; font-size:15px; animation:floaty 3.6s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hv-badge:hover{transform:scale(1.14) translateY(-4px); box-shadow:0 16px 30px rgba(20,22,27,.2);}
.hv-b1{top:2%; left:44%; color:var(--primary); animation-delay:0s;}
.hv-b2{top:16%; right:2%; color:#22C55E; animation-delay:.4s;}
.hv-b3{left:2%; top:44%; color:var(--purple); animation-delay:.8s;}
.hv-b4{left:6%; bottom:10%; color:var(--primary); animation-delay:1.2s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion: reduce){ .hv-badge, .hv-phone, .hv-globe, .hv-globe::before{animation:none;} }

/* ===== Feature strip ===== */
.feature-strip{
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 50px rgba(20,22,27,.05);
  padding:26px 10px; margin-top:-8px; position:relative; z-index:5;
}
.feature-item{display:flex; align-items:flex-start; gap:12px; padding:6px 14px; border-radius:12px; transition:transform .3s ease, box-shadow .3s ease;}
.feature-item:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(20,22,27,.06);}
.feature-item .ic{
  width:44px; height:44px; min-width:44px; border-radius:11px; background:var(--orange-tint); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:19px; transition:transform .35s ease, background .3s ease, color .3s ease;
}
.feature-item:hover .ic{transform:rotate(-8deg) scale(1.08); background:var(--primary); color:#fff;}
.feature-item h6{font-weight:700; font-size:14.5px; margin-bottom:2px; color:var(--dark);}
.feature-item p{font-size:12.8px; color:var(--muted); margin:0; line-height:1.4;}

/* ===== Section titles ===== */
.section-pad{padding:80px 0;}
.section-title{font-size:2rem; margin-bottom:10px; position:relative; display:inline-block; padding-bottom:16px;}
.section-title::after{
  content:""; position:absolute; left:50%; bottom:0; height:3px; width:0; border-radius:3px; margin-left:-23px;
  background:linear-gradient(90deg, var(--primary), #FF9457);
  transition:width .7s cubic-bezier(.16,.84,.44,1) .2s;
}
.reveal.in-view .section-title::after{width:46px;}
@media (prefers-reduced-motion: reduce){ .section-title::after{transition:none; width:46px;} }
.section-sub{color:var(--muted); font-size:15.5px; max-width:520px;}

/* ===== Ambient aurora backdrops ===== */
.section-aurora{position:relative; isolation:isolate;}
.section-aurora::before, .section-aurora::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.4; pointer-events:none;
  animation:auroraDrift 17s ease-in-out infinite;
}
.section-aurora::before{width:420px; height:420px; left:-140px; top:-100px; background:radial-gradient(circle, var(--primary), transparent 70%);}
.section-aurora::after{width:380px; height:380px; right:-120px; bottom:-100px; background:radial-gradient(circle, var(--blue), transparent 70%); animation-delay:-8.5s;}
@keyframes auroraDrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-18px) scale(1.1);}}
@media (prefers-reduced-motion: reduce){ .section-aurora::before, .section-aurora::after{animation:none;} }

/* ===== Services ===== */
.svc-block{border-radius:22px; padding:46px; margin-bottom:26px; position:relative; overflow:hidden; transition:transform .4s ease, box-shadow .4s ease; opacity:0; transform:translateY(46px);}
.svc-block.in-view{animation:blockRise .75s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes blockRise{to{opacity:1; transform:translateY(0);}}
.svc-block:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(20,22,27,.08);}
.svc-block:last-child{margin-bottom:0;}
@media (prefers-reduced-motion: reduce){ .svc-block{opacity:1; transform:none;} .svc-block.in-view{animation:none;} }
.svc-badge{
  width:38px; height:38px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:14px; margin-bottom:14px; transition:transform .3s ease;
}
.svc-block:hover .svc-badge{transform:scale(1.1) rotate(-6deg);}
.svc-title{font-size:1.5rem; margin-bottom:10px;}
.svc-desc{font-size:14.8px; margin-bottom:18px; max-width:460px;}
.svc-list{list-style:none; padding:0; margin:0 0 20px;}
.svc-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.3px; color:#3E4550; margin-bottom:10px; opacity:0; transform:translateX(-12px); transition:opacity .5s ease, transform .5s ease; transition-delay:var(--d,0s);}
.svc-block.in-view .svc-list li{opacity:1; transform:none;}
.svc-list li i{margin-top:3px; font-size:14px; flex-shrink:0;}
.svc-list li b{color:var(--dark); font-weight:700;}
.tag-pill{
  display:inline-block; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px; background:#fff;
  margin:0 8px 8px 0; border:1px solid; transition:transform .25s ease;
}
.tag-pill:hover{transform:translateY(-3px);}
.svc-graphic{
  height:280px; border-radius:16px; position:relative; display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease-out; will-change:transform;
}

/* theme colors */
.theme-orange{background:var(--orange-tint);} .theme-orange .svc-badge{background:var(--primary);}
.theme-orange .svc-list i{color:var(--primary);} .theme-orange .tag-pill{color:var(--primary); border-color:#FBD3C4;}
.theme-orange .btn-learn{color:var(--primary); border-color:var(--primary);}

.theme-blue{background:var(--blue-tint);} .theme-blue .svc-badge{background:var(--blue);}
.theme-blue .svc-list i{color:var(--blue);} .theme-blue .tag-pill{color:var(--blue); border-color:#C6D9FB;}
.theme-blue .btn-learn{color:var(--blue); border-color:var(--blue);}

.theme-green{background:var(--green-tint);} .theme-green .svc-badge{background:var(--green);}
.theme-green .svc-list i{color:var(--green);} .theme-green .tag-pill{color:var(--green); border-color:#BFEBCE;}
.theme-green .btn-learn{color:var(--green); border-color:var(--green);}

.theme-purple{background:var(--purple-tint);} .theme-purple .svc-badge{background:var(--purple);}
.theme-purple .svc-list i{color:var(--purple);} .theme-purple .tag-pill{color:var(--purple); border-color:#D9CCFB;}
.theme-purple .btn-learn{color:var(--purple); border-color:var(--purple);}

.btn-learn{background:#fff; font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:8px; border:1.5px solid; display:inline-flex; align-items:center; gap:6px; transition:.25s ease;}
.btn-learn:hover{filter:brightness(0.98); transform:translateX(4px);}
.btn-learn i{transition:transform .25s ease;}
.btn-learn:hover i{transform:translateX(3px);}

/* --- service graphic: email --- */
.g-email{position:relative; width:100%; height:100%;}
.g-email .ring{position:absolute; left:50%; top:50%; width:210px; height:210px; margin:-105px 0 0 -105px; border:2px dashed #F6C7B4; border-radius:50%; animation:spinSlow 18s linear infinite;}
@keyframes spinSlow{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.g-email .envelope{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:170px; height:112px;
  background:var(--primary); border-radius:12px; box-shadow:0 24px 40px rgba(245,84,13,.28);
  animation:floaty 5s ease-in-out infinite;
}
.g-email .envelope::before, .g-email .envelope::after{content:""; position:absolute; top:0; width:0; height:0; border-style:solid;}
.g-email .envelope::before{left:0; border-width:56px 85px 0 0; border-color:#ff7a45 transparent transparent transparent;}
.g-email .envelope::after{right:0; border-width:56px 0 0 85px; border-color:#ff7a45 transparent transparent transparent;}
.g-email .card{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:78px; height:96px; background:#fff; border-radius:10px;
  box-shadow:0 18px 30px rgba(20,22,27,.16); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:var(--primary);
}
.g-email .plane{position:absolute; right:14%; top:12%; font-size:26px; color:var(--primary); transform:rotate(20deg); animation:planeFly 3.2s ease-in-out infinite;}
@keyframes planeFly{0%,100%{transform:rotate(20deg) translate(0,0);}50%{transform:rotate(20deg) translate(6px,-8px);}}

/* --- email platforms panel --- */
.email-platforms-panel{margin-top:40px; padding-top:40px; border-top:1px dashed rgba(245,84,13,.28);}
.mini-divider{display:inline-flex; gap:6px; margin-bottom:14px;}
.mini-divider::before, .mini-divider::after{content:""; width:18px; height:3px; background:var(--primary); border-radius:2px; display:inline-block; animation:dividerPulse 1.8s ease-in-out infinite;}
.mini-divider::after{animation-delay:.3s;}
@keyframes dividerPulse{0%,100%{opacity:1; transform:scaleX(1);}50%{opacity:.4; transform:scaleX(.6);}}
.platforms-title{font-size:1.7rem;}

.platform-row{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; padding:46px 30px 10px; position:relative;}
.platform-row::before{
  content:""; position:absolute; left:9%; right:9%; top:50%; height:2px; z-index:0; opacity:0;
  background-image:repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 18px);
  background-size:26px 2px; transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.65,0,.35,1) .15s;
}
.platform-row.in-view::before{transform:scaleX(1); opacity:.45; animation:dashFlow 1.1s linear infinite .15s;}
@keyframes dashFlow{to{background-position:26px 0;}}

.flow-dot{
  position:absolute; top:50%; left:9%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--primary); box-shadow:0 0 8px 2px rgba(245,84,13,.5); opacity:0; z-index:0;
  animation:flowAlong 3.3s ease-in-out infinite;
}
@keyframes flowAlong{
  0%{left:9%; opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{left:91%; opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .flow-dot{animation:none; display:none;} .platform-row::before{animation:none;} }

.platform-col{position:relative; flex:1 1 140px; display:flex; justify-content:center; max-width:180px; z-index:1;}
.platform-num{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%); font-size:38px; font-weight:800; z-index:0;
  user-select:none; line-height:1; white-space:nowrap;
  background:linear-gradient(180deg,#F7DECF,#F0C9B0); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.platform-hex{
  width:100%; max-width:150px; aspect-ratio:1/.88; background:#fff;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 20px 40px rgba(20,22,27,.08); position:relative; z-index:1;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  animation:hexBob 3.8s ease-in-out infinite; animation-delay:var(--float-d,0s);
}
@keyframes hexBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.platform-hex:hover{transform:translateY(-10px) rotate(-3deg) scale(1.07)!important; box-shadow:0 30px 54px rgba(20,22,27,.18); animation-play-state:paused;}
.platform-hex.offset-up{margin-top:-14px;}
.platform-hex.offset-down{margin-top:14px;}
.platform-hex i{font-size:26px; transition:transform .35s ease;}
.platform-hex:hover i, .platform-hex:hover .platform-cpanel{transform:scale(1.15) rotate(8deg);}
.platform-hex .icon-wrap{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .35s ease;
}
.platform-hex .platform-cpanel{
  width:38px; height:38px; border-radius:50%; background:#FF6C2C; color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:transform .35s ease;
}
.platform-hex.accent-google .icon-wrap{background:#EAF1FE;} .platform-hex.accent-google i{color:#4285F4;}
.platform-hex.accent-google{box-shadow:0 20px 40px rgba(66,133,244,.16);}
.platform-hex.accent-ms .icon-wrap{background:#EEF0FC;} .platform-hex.accent-ms i{color:#5059C9;}
.platform-hex.accent-ms{box-shadow:0 20px 40px rgba(80,89,201,.16);}
.platform-hex.accent-zoho .icon-wrap{background:#FCEAEA;} .platform-hex.accent-zoho i{color:#C8202F;}
.platform-hex.accent-zoho{box-shadow:0 20px 40px rgba(200,32,47,.16);}
.platform-hex.accent-cpanel .icon-wrap{background:#FFE9DC;}
.platform-hex.accent-cpanel{box-shadow:0 20px 40px rgba(255,108,44,.2);}

.platform-name{font-size:12.5px; font-weight:700; color:var(--dark); text-align:center; max-width:110px; margin:0 auto; line-height:1.3; overflow-wrap:break-word;}
.platform-sub-title{font-size:1.25rem; margin-bottom:12px;}
.platform-sub-desc{font-size:14.5px; color:var(--body); max-width:520px;}

.platform-illustration{position:relative; height:150px;}
.pi-ring{position:absolute; border:2px dashed #F6C7B4; border-radius:50%;}
.pi-ring-1{width:120px; height:120px; left:8%; top:8%; animation:spinSlow 20s linear infinite;}
.pi-ring-2{width:80px; height:80px; left:22%; top:22%; animation:spinSlow 14s linear infinite reverse;}
.pi-bubble{
  position:absolute; right:10%; top:14%; width:64px; height:64px; border-radius:16px; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 16px 28px rgba(47,111,237,.28);
  animation:floaty 4.2s ease-in-out infinite;
}
.pi-shield{
  position:absolute; left:14%; bottom:6%; width:52px; height:52px; border-radius:50%; background:#fff; color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 14px 26px rgba(20,22,27,.14);
  animation:floaty 3.6s ease-in-out infinite; animation-delay:.4s;
}
.pi-fly{
  position:absolute; left:20%; top:46%; font-size:16px; color:var(--primary); opacity:0;
  animation:flyEnvelope 3.6s ease-in-out infinite;
}
@keyframes flyEnvelope{
  0%{opacity:0; transform:translate(0,0) scale(.7) rotate(0deg);}
  12%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0; transform:translate(150px,-46px) scale(1) rotate(18deg);}
}
@media (prefers-reduced-motion: reduce){
  .platform-hex{animation:none;}
  .pi-fly{animation:none; display:none;}
}
@media (max-width:767.98px){
  .platform-hex.offset-up, .platform-hex.offset-down{margin-top:0;}
  .platform-num{font-size:28px; top:-32px;}
  .platform-row::before, .flow-dot{display:none;}
}

/* --- service graphic: wordpress --- */
.g-wp{position:relative; width:88%; height:88%;}
.g-wp .card{background:#fff; border-radius:14px; box-shadow:0 24px 44px rgba(20,22,27,.12); height:100%; padding:0; overflow:hidden; transform:rotate(-1.5deg); transition:transform .4s ease;}
.svc-block:hover .g-wp .card{transform:rotate(0deg);}
.g-wp .bar{background:#F5F6F8; padding:8px 12px; display:flex; gap:6px; border-bottom:1px solid #EEE;}
.g-wp .bar span{width:7px;height:7px;border-radius:50%;background:#D8DCE2;}
.g-wp .body-o{padding:22px; display:flex; align-items:center; justify-content:space-between; height:calc(100% - 34px);}
.g-wp .txt h5{font-size:16px; margin-bottom:6px;}
.g-wp .txt p{font-size:11.5px; color:var(--muted); margin-bottom:0; max-width:150px;}
.g-wp .wp-badge{
  width:64px; height:64px; border-radius:50%; background:var(--blue); color:#fff; font-size:30px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 24px rgba(47,111,237,.3); flex-shrink:0;
  animation:floaty 4.6s ease-in-out infinite;
}
.g-wp .pot{position:absolute; right:14px; bottom:-14px; font-size:30px;}
.g-wp .books{position:absolute; left:16px; bottom:-10px; width:70px; }
.g-wp .books i{display:block; height:9px; border-radius:2px; margin-bottom:3px;}

/* --- service graphic: dashboard --- */
.g-dash{width:94%; height:94%; background:#fff; border-radius:14px; box-shadow:0 24px 44px rgba(20,22,27,.1); overflow:hidden; transform:rotate(1deg); transition:transform .4s ease;}
.svc-block:hover .g-dash{transform:rotate(0deg);}
.g-dash .bar{background:#F5F6F8; padding:8px 12px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #EEE; font-size:10.5px; font-weight:700; color:var(--muted);}
.g-dash .bar .active-tab{color:var(--green);}
.g-dash .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px;}
.g-dash .stat{background:#F8FBF9; border:1px solid #EAF3EC; border-radius:8px; padding:8px 10px; transition:transform .25s ease;}
.g-dash .stat:hover{transform:translateY(-3px);}
.g-dash .stat b{display:block; font-size:14px; color:var(--dark);}
.g-dash .stat span{font-size:9.5px; color:var(--muted); font-weight:600;}
.g-dash .chart-row{display:grid; grid-template-columns:1.3fr 1fr; gap:8px; padding:0 12px 12px;}
.g-dash .chart-box{background:#F8FBF9; border:1px solid #EAF3EC; border-radius:8px; padding:8px 10px;}
.g-dash .chart-box span{font-size:9.5px; color:var(--muted); font-weight:700;}
.g-dash .chart-box svg polyline{stroke-dasharray:220; stroke-dashoffset:220; animation:drawLine 2s ease forwards .3s;}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.g-dash .mini-stats{display:flex; flex-direction:column; gap:8px;}
.g-dash .mini-stats .stat{flex:1;}

/* --- service graphic: domain --- */
.g-domain{position:relative; width:88%;}
.g-domain .bar-pill{
  background:#fff; border-radius:12px; box-shadow:0 20px 40px rgba(20,22,27,.12); padding:14px 18px; display:flex; align-items:center; gap:10px;
}
.g-domain .bar-pill .dot{width:7px; height:7px; border-radius:50%; background:#D8DCE2;}
.g-domain .bar-pill span{font-size:12.5px; font-weight:600; color:var(--dark); margin-left:6px;}
.g-domain .check{
  position:absolute; right:-16px; top:-16px; width:44px; height:44px; border-radius:50%; background:var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 14px 26px rgba(124,58,237,.32);
  animation:popCheck .5s cubic-bezier(.34,1.56,.64,1) .4s both;
}
@keyframes popCheck{0%{transform:scale(0);}100%{transform:scale(1);}}
.g-domain .cloud{position:absolute; left:6%; bottom:-38px; font-size:44px; color:#fff; animation:floaty 4.8s ease-in-out infinite;}
.g-domain .rack{
  position:absolute; right:8%; bottom:-42px; width:54px; background:var(--purple); border-radius:8px; padding:6px; box-shadow:0 16px 30px rgba(124,58,237,.28);
}
.g-domain .rack i{display:block; height:5px; background:rgba(255,255,255,.35); border-radius:2px; margin-bottom:5px;}
.g-domain .dots-deco{position:absolute; right:0; top:0; width:70px; height:70px; background-image:radial-gradient(#D9CCFB 1.6px, transparent 1.6px); background-size:10px 10px; opacity:.7;}

/* --- service graphic: sms --- */
.g-sms{position:relative; width:100%; height:100%;}
.g-sms .phone{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:230px; background:#16181D; border-radius:22px; padding:8px; box-shadow:0 26px 44px rgba(20,22,27,.24);
  animation:floaty 5.2s ease-in-out infinite;
}
.g-sms .phone .screen{background:#fff; height:100%; border-radius:16px; padding:14px 10px; display:flex; align-items:center;}
.g-sms .phone .bubble{background:#F3F4F6; border-radius:10px; padding:10px; font-size:9.6px; color:#3E4550; line-height:1.5;}
.g-sms .plane{position:absolute; right:14%; top:12%; font-size:24px; color:var(--primary); transform:rotate(25deg); animation:planeFly 3.4s ease-in-out infinite;}

/* ===== Why choose ===== */
.why-item{text-align:center; padding:20px 12px; border-radius:14px; transition:transform .3s ease, box-shadow .3s ease;}
.why-item:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(20,22,27,.06);}
.why-item .ic{
  width:52px; height:52px; border-radius:14px; background:var(--orange-tint); color:var(--primary); font-size:22px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; transition:transform .35s ease, background .3s ease, color .3s ease;
  position:relative;
}
.why-item .ic::before{
  content:""; position:absolute; inset:-6px; border-radius:18px; border:1.5px solid rgba(245,84,13,.3);
  opacity:0; transform:scale(.85); transition:opacity .35s ease, transform .35s ease;
}
.why-item:hover .ic{background:var(--primary); color:#fff; transform:scale(1.1) rotate(6deg);}
.why-item:hover .ic::before{opacity:1; transform:scale(1);}
.why-item h6{font-weight:700; font-size:14.5px; margin-bottom:4px; color:var(--dark);}
.why-item p{font-size:12.6px; color:var(--muted); margin:0;}

/* ===== Testimonials ===== */
.testi-wrap{position:relative;}
.testi-track{display:flex; gap:22px; transition:transform .45s cubic-bezier(.4,0,.2,1);}
.testi-viewport{overflow:hidden;}
.testi-card{
  flex:0 0 calc((100% - 44px)/3); background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px;
  box-shadow:0 14px 34px rgba(20,22,27,.05); transition:transform .35s ease, box-shadow .35s ease;
}
.testi-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(20,22,27,.1);}
.testi-card i.bi-quote{font-size:22px; color:var(--primary); opacity:.5;}
.testi-card p.q{font-size:14.3px; color:#3E4550; margin:12px 0 20px;}
.testi-foot{display:flex; align-items:center; gap:10px;}
.testi-foot .av{
  width:40px; height:40px; border-radius:50%; background:#E7E9ED; display:flex; align-items:center; justify-content:center; font-weight:700; color:#556; font-size:13px;
  position:relative; transition:transform .3s ease;
  box-shadow:0 0 0 0 rgba(245,84,13,0);
}
.testi-card:hover .testi-foot .av{transform:scale(1.08); box-shadow:0 0 0 3px rgba(245,84,13,.15);}
.testi-foot h6{font-size:13.5px; margin:0; color:var(--dark); font-weight:700;}
.testi-foot small{font-size:11.5px; color:var(--muted);}
.testi-foot .co{font-weight:700; font-size:12px;}
.testi-nav-btn{
  width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--dark); box-shadow:0 8px 18px rgba(20,22,27,.06); transition:.2s;
}
.testi-nav-btn:hover{background:var(--primary); color:#fff; border-color:var(--primary); transform:scale(1.08);}
.testi-dots{display:flex; justify-content:center; gap:7px; margin-top:24px;}
.testi-dots span{width:7px; height:7px; border-radius:50%; background:#E3E5E9; cursor:pointer; transition:.3s;}
.testi-dots span.active{background:var(--primary); width:20px; border-radius:4px;}

/* ===== Blog ===== */
.blog-wrap{position:relative;}
.blog-viewport{overflow:hidden;}
.blog-track{display:flex; gap:22px; transition:transform .45s cubic-bezier(.4,0,.2,1);}
.blog-track .blog-card{flex:0 0 calc((100% - 44px)/3);}
@media (max-width:991.98px){ .blog-track .blog-card{flex:0 0 calc((100% - 22px)/2);} }
@media (max-width:767.98px){ .blog-track .blog-card{flex:0 0 100%;} }
.blog-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; height:100%;
  display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(20,22,27,.05);
  transition:transform .35s ease, box-shadow .35s ease;
}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(20,22,27,.1);}
.blog-card-cover{
  height:150px; display:flex; align-items:center; justify-content:center; font-size:44px; color:#fff;
  position:relative; overflow:hidden; flex-shrink:0;
}
.blog-card-cover i{position:relative; z-index:1; transition:transform .4s ease;}
.blog-card:hover .blog-card-cover i{transform:scale(1.12) rotate(-6deg);}
.blog-card-cover::after{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.6px, transparent 1.6px); background-size:14px 14px;
}
.cover-orange{background:linear-gradient(135deg, var(--primary), #FF9457);}
.cover-blue{background:linear-gradient(135deg, var(--blue), #6FA0FF);}
.cover-purple{background:linear-gradient(135deg, var(--purple), #B18CFF);}
.blog-card-body{padding:24px; display:flex; flex-direction:column; flex:1;}
.blog-tag{
  display:inline-block; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary); background:var(--orange-tint); padding:5px 11px; border-radius:20px; margin-bottom:12px;
}
.blog-title{font-size:1.05rem; line-height:1.35; margin-bottom:10px;}
.blog-excerpt{font-size:13.6px; color:var(--body); margin-bottom:16px; flex:1;}
.blog-meta{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:14px;}
.blog-meta .dot{color:var(--border);}
.blog-card.accent-orange .btn-learn{color:var(--primary); border-color:var(--primary);}
.blog-card.accent-blue .btn-learn{color:var(--blue); border-color:var(--blue);}
.blog-card.accent-purple .btn-learn{color:var(--purple); border-color:var(--purple);}

/* ===== Blog article page ===== */
.article-hero{
  position:relative; overflow:hidden; color:#fff; padding:150px 0 56px;
}
.article-hero::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px); background-size:16px 16px;
}
.article-hero > .container{position:relative; z-index:1;}
.breadcrumb-line{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.75); margin-bottom:18px; flex-wrap:wrap;}
.breadcrumb-line a{color:rgba(255,255,255,.75); transition:color .2s ease;}
.breadcrumb-line a:hover{color:#fff;}
.breadcrumb-line i{font-size:10px; opacity:.7;}
.breadcrumb-line span{color:#fff;}
.article-tag{background:rgba(255,255,255,.18); color:#fff;}
.article-title{color:#fff; font-size:2.1rem; line-height:1.22; max-width:780px; margin-bottom:20px;}
@media (min-width:1200px){ .article-title{font-size:2.5rem;} }
.article-meta-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:600; color:rgba(255,255,255,.85);}
.article-meta-row .dot{color:rgba(255,255,255,.4);}
.article-meta-row i{margin-right:5px;}

.article-body{max-width:760px; margin:0 auto; font-size:16px; line-height:1.85;}
.article-body h2{font-size:1.5rem; margin:2.2em 0 .7em;}
.article-body h3{font-size:1.2rem; margin:1.8em 0 .6em;}
.article-body p{margin-bottom:1.3em;}
.article-body ul, .article-body ol{margin:0 0 1.3em; padding-left:1.3em;}
.article-body li{margin-bottom:.5em;}
.article-body li::marker{color:var(--primary);}
.article-body strong{color:var(--dark);}
.article-body blockquote{
  margin:1.8em 0; padding:18px 24px; border-left:3px solid var(--primary); background:var(--orange-tint);
  border-radius:0 12px 12px 0; font-size:15.5px; color:var(--dark); font-weight:600;
}
.article-share{display:flex; align-items:center; gap:12px; margin:2.4em 0; padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.article-share span{font-size:13px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:.04em;}
.article-cta-panel{max-width:760px; margin:3em auto 0;}
.related-posts{margin-top:64px;}
.related-posts .section-title{font-size:1.5rem; padding-bottom:12px;}
@media (max-width:767.98px){
  .article-hero{padding:126px 0 44px;}
  .article-title{font-size:1.65rem;}
}

/* ===== CTA banner ===== */
.cta-banner{
  background:linear-gradient(120deg, #F5540D, #FF7A3D, #F5540D); background-size:200% 200%;
  animation:gradientShift 6s ease infinite;
  border-radius:22px; padding:44px 46px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;
  position:relative; overflow:hidden;
}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.cta-banner::before{
  content:""; position:absolute; right:-10px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08);
}
.cta-banner .rocket-ic{
  width:58px; height:58px; border-radius:50%; background:#fff; color:var(--primary); font-size:24px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:floaty 3s ease-in-out infinite;
}
.cta-banner h3{color:#fff; font-size:1.55rem; margin-bottom:4px;}
.cta-banner p{color:rgba(255,255,255,.9); margin:0; font-size:14.5px;}
.cta-dots{position:absolute; right:40px; bottom:14px; width:70px; height:50px; background-image:radial-gradient(rgba(255,255,255,.5) 1.6px, transparent 1.6px); background-size:10px 10px; opacity:.6;}

/* ===== Footer ===== */
.site-footer{padding-top:70px;}
.site-footer h6{font-weight:700; font-size:14.5px; color:var(--dark); margin-bottom:18px;}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer ul li{margin-bottom:11px;}
.site-footer ul li a{color:var(--muted); font-size:13.8px; font-weight:500; transition:.2s; display:inline-block;}
.site-footer ul li a:hover{color:var(--primary); transform:translateX(3px);}
.site-footer p.desc{font-size:13.8px; color:var(--muted); max-width:260px; margin:14px 0 18px;}
.social-ic{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center;
  color:var(--dark); font-size:13.5px; margin-right:8px; margin-bottom:8px; transition:.25s ease;
}
.social-ic:hover{background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-4px);}
.contact-line{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:13.6px; color:var(--muted);}
.contact-line i{color:var(--primary); margin-top:2px;}
.footer-bottom{border-top:1px solid var(--border); margin-top:40px; padding:20px 0; text-align:center; font-size:13px; color:var(--muted);}

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%; background:var(--dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; z-index:900; border:none;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s ease; box-shadow:0 12px 24px rgba(20,22,27,.2);
}
.back-to-top.show{opacity:1; visibility:visible; transform:none;}
.back-to-top:hover{background:var(--primary); transform:translateY(-4px);}

/* ===== Contact modal ===== */
.contact-modal-content{border:none; border-radius:20px; overflow:hidden; box-shadow:0 40px 90px rgba(20,22,27,.28);}
.contact-modal-close{
  position:absolute; top:16px; right:16px; z-index:5; width:32px; height:32px; border-radius:50%;
  background-color:rgba(255,255,255,.9)!important; background-size:12px!important; opacity:1; box-shadow:0 6px 16px rgba(20,22,27,.15);
}
.contact-modal-side{
  background:linear-gradient(150deg, #1B1E24, #14161B 60%); color:#fff; padding:44px 36px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; min-height:100%;
}
.contact-modal-side::before{
  content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,84,13,.35), transparent 70%);
}
.contact-modal-side h4{color:#fff; font-size:1.45rem; margin-bottom:12px; position:relative;}
.contact-modal-side p{color:rgba(255,255,255,.65); font-size:13.8px; margin-bottom:22px; position:relative;}
.contact-modal-side .contact-line{color:rgba(255,255,255,.85); position:relative;}
.contact-modal-side .contact-line i{color:var(--primary);}
.contact-modal-socials{display:flex; gap:10px; margin-top:20px; position:relative;}
.contact-modal-socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13.5px; transition:.25s ease;
}
.contact-modal-socials a:hover{background:var(--primary); border-color:var(--primary); transform:translateY(-3px);}
#contactModal .form-label{color:var(--dark); margin-bottom:6px;}
#contactModal .form-control{
  border:1px solid var(--border); border-radius:9px; padding:10px 14px; font-size:14.3px; transition:.2s ease;
}
#contactModal .form-control:focus{border-color:var(--primary); box-shadow:0 0 0 .18rem rgba(245,84,13,.15);}
#contactModal .modal-dialog{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
@media (max-width:767.98px){
  .contact-modal-side{padding:34px 26px; min-height:auto;}
}

@media (max-width:991.98px){
  .hero h1{font-size:2.1rem;}
  .hero-visual{height:320px; margin-top:30px;}
  .section-pad{padding:56px 0;}
  .svc-block{padding:30px;}
  .svc-graphic{height:220px; margin-top:24px;}
  .testi-card{flex:0 0 calc((100% - 22px)/2);}
  .cta-banner{padding:34px;}
}
@media (max-width:767.98px){
  .testi-card{flex:0 0 100%;}
  .feature-item{padding:12px 8px;}
  .cta-banner{flex-direction:column; text-align:center; justify-content:center;}
  .cta-banner .d-flex{justify-content:center;}
}

/* ===== Custom cursor (desktop only) ===== */
.cursor-dot, .cursor-ring{
  position:fixed; left:0; top:0; z-index:10000; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0;
  transition:opacity .25s ease;
}
.cursor-dot{
  width:4px; height:4px; background:var(--primary);
}
.cursor-ring{
  width:22px; height:22px; border:1.5px solid rgba(245,84,13,.45);
  transition:opacity .25s ease, transform .18s cubic-bezier(.16,.84,.44,1), width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}
body.has-custom-cursor .cursor-dot, body.has-custom-cursor .cursor-ring{opacity:1;}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor .btn{cursor:none;}
.cursor-ring.is-hovering{
  width:34px; height:34px; background:rgba(245,84,13,.08); border-color:rgba(245,84,13,.7);
}
.cursor-ring.is-down{transform:translate(-50%,-50%) scale(.85);}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{display:none;}
}