:root{
  --navy:#0b1526;
  --navy-2:#0f1e35;
  --blue:#2f7bf6;
  --blue-light:#59a3ff;
  --orange:#ff7a3d;
  --ink:#111827;
  --muted:#6b7688;
  --line:#e7eaf0;
  --bg-soft:#f6f8fb;
}
*{font-family:'Inter',sans-serif; box-sizing:border-box;}
body{color:var(--ink); background:#fff; overflow-x:hidden;}
a{text-decoration:none;}
h1,h2,h3,h4{font-weight:800; letter-spacing:-0.02em; color:var(--ink);}
p{color:var(--muted);}

/* BUTTONS */
.btn-brand{
  background:linear-gradient(135deg,var(--orange),#ff5f6d); color:#fff; border:none; font-weight:600;
  padding:.75rem 1.6rem; border-radius:8px; transition:.25s;
}
.btn-brand:hover{filter:brightness(1.08); color:#fff; transform:translateY(-2px);}
.btn-outline-brand{
  border:1.5px solid #d8dce3; color:var(--ink); font-weight:600; padding:.75rem 1.6rem; border-radius:8px; background:#fff; transition:.25s;
}
.btn-outline-brand:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.btn-light-brand{
  background:#fff; color:var(--navy); font-weight:700; padding:.75rem 1.6rem; border-radius:8px; border:none; transition:.25s;
}
.btn-light-brand:hover{transform:translateY(-2px); color:var(--navy);}
.btn-outline-light-brand{
  border:1.5px solid rgba(255,255,255,.35); color:#fff; font-weight:600; padding:.75rem 1.6rem; border-radius:8px; background:transparent; transition:.25s;
}
.btn-outline-light-brand:hover{background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px);}
.btn-link-brand{color:var(--blue); font-weight:700; padding:.75rem 0;}
.btn-link-brand:hover{color:#1f63d6;}

/* NAVBAR */
.navbar{padding:1rem 0; transition:.3s; background:rgba(255,255,255,0);}
.navbar.scrolled{background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.07); padding:.6rem 0;}
.navbar-brand img{height:34px; transition:.2s;}
.navbar .nav-link{color:#e9edf3; font-weight:500; font-size:.92rem; margin:0 .6rem; transition:.2s;}
.navbar.scrolled .nav-link{color:#2b3242;}
.navbar .nav-link:hover{color:var(--orange);}
.nav-phone{color:#fff; font-weight:600; font-size:.88rem; display:flex; align-items:center; gap:.4rem;}
.navbar.scrolled .nav-phone{color:var(--ink);}
.navbar-toggler{border:none; background:transparent; color:#fff;}
.navbar.scrolled .navbar-toggler{color:var(--ink);}

/* HERO */
.hero{
  background:radial-gradient(ellipse at 15% -10%, #16294a 0%, var(--navy) 45%), var(--navy);
  color:#fff; padding:150px 0 70px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-100px; right:-120px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(255,122,61,.28), transparent 70%); border-radius:50%; filter:blur(10px);
}
.eyebrow{
  background:rgba(255,122,61,.14); border:1px solid rgba(255,122,61,.35); color:#ffb187;
  border-radius:30px; padding:.4rem 1rem; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem;
}
.hero h1{font-size:2.9rem; line-height:1.12; color:#fff;}
.grad-text{background:linear-gradient(90deg,#59a3ff,#84d3ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lead{color:#aab4c6; font-size:1.03rem; max-width:540px;}
.stars{color:#ffb400; font-size:.9rem; letter-spacing:2px;}
.stars.small{font-size:.7rem;}
.small-txt{font-size:.75rem; color:#8b97b3;}
.fw-count span{font-size:1.4rem; font-weight:800; color:#fff;}
.vr{opacity:.2;}

.hero-visual{position:relative; padding:20px;}
.laptop-mock{
  background:#101d34; border:1px solid #223051; border-radius:16px; padding:14px; box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.browser-bar{display:flex; gap:6px; padding:8px 10px; background:#0b1526; border-radius:8px 8px 0 0;}
.browser-bar span{width:9px; height:9px; border-radius:50%; background:#2c3a5a;}
.browser-body{background:#0f1c33; padding:1.2rem; border-radius:0 0 8px 8px;}
.skeleton-line{height:12px; background:linear-gradient(90deg,#1c2b48,#26375a,#1c2b48); background-size:200% 100%; border-radius:6px; margin-bottom:10px; animation:shimmer 2s infinite;}
.skeleton-block{height:70px; background:linear-gradient(90deg,#1c2b48,#26375a,#1c2b48); background-size:200% 100%; border-radius:8px; animation:shimmer 2s infinite;}
.skeleton-box{height:40px; background:linear-gradient(90deg,#1c2b48,#26375a,#1c2b48); background-size:200% 100%; border-radius:6px; animation:shimmer 2s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.floating-tag{
  position:absolute; background:#101d34; border:1px solid #223051; color:#fff; padding:.5rem .9rem; border-radius:10px; font-size:.78rem; font-weight:600;
  display:flex; align-items:center; gap:.4rem; box-shadow:0 10px 30px rgba(0,0,0,.35); animation:floaty 3.5s ease-in-out infinite;
}
.tag-seo{top:-6px; left:0; color:#59d998;}
.tag-seo i{color:#59d998;}
.tag-secure{bottom:8px; left:-10px; color:#59a3ff; animation-delay:.5s;}
.tag-secure i{color:#59a3ff;}
.tag-responsive{top:40%; right:-14px; color:#ffb187; animation-delay:1s;}
.tag-responsive i{color:#ffb187;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.logo-strip{border-top:1px solid #1c2941; margin-top:50px; padding-top:24px; text-align:center;}
.logo-strip .tag{font-size:.7rem; letter-spacing:.1em; color:#5d6c8a; text-transform:uppercase; font-weight:700;}
.brand-name{color:#8b97b3; font-weight:700; font-size:.9rem; opacity:.75;}

/* SECTION GENERIC */
.section{padding:90px 0;}
.bg-soft{background:var(--bg-soft);}
.section-title{max-width:680px;}
.section-title h2{font-size:2rem;}
.eyebrow-badge{
  display:inline-block; background:#fff0e9; color:var(--orange); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem 1rem; border-radius:20px;
}
.eyebrow-badge.light{background:rgba(255,122,61,.14); color:#ffb187;}
.light-muted{color:#aab4c6;}

/* FEATURE CARDS */
.feature-card{border:1px solid var(--line); border-radius:16px; padding:2rem; height:100%; transition:.3s; background:#fff;}
.feature-card:hover{box-shadow:0 20px 40px rgba(20,30,60,.08); transform:translateY(-4px);}
.icon-circle{width:52px; height:52px; border-radius:14px; background:#fff0e9; color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem;}
.icon-circle.sm{width:44px; height:44px; font-size:1.2rem; border-radius:12px;}
.icon-circle.dark{background:rgba(255,122,61,.14); color:#ffb187;}
.feature-card h3{font-size:1.15rem; margin-bottom:.5rem;}
.feature-card p{font-size:.9rem; margin-bottom:0;}

/* SERVICE TILES */
.service-tile{border:1px solid var(--line); border-radius:14px; padding:1.5rem; height:100%; background:#fff; transition:.3s;}
.service-tile:hover{box-shadow:0 16px 34px rgba(20,30,60,.08); transform:translateY(-3px); border-color:var(--blue);}
.service-tile h4{font-size:1rem; margin-bottom:.4rem;}
.service-tile p{font-size:.82rem; margin-bottom:0;}

/* PROCESS */
.process-step{text-align:center; padding:1rem .5rem;}
.step-circle{
  width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 1rem; transition:.3s;
}
.process-step:hover .step-circle{border-color:var(--orange); background:#fff0e9; transform:scale(1.06);}
.process-step .idx{font-size:.7rem; font-weight:800; color:var(--orange); letter-spacing:.1em; margin-bottom:.3rem;}
.process-step h4{font-size:1rem;}
.process-step p{font-size:.8rem;}

/* ESSENTIALS */
.essentials-card{
  background:linear-gradient(160deg,#101d34,#0b1526); border:1px solid #223051; border-radius:20px; padding:2rem; box-shadow:0 30px 60px rgba(10,20,40,.3);
}
.badge-up{background:rgba(63,201,140,.15); color:#57d999; font-size:.72rem; font-weight:700; padding:.3rem .7rem; border-radius:20px;}
.gauge-mock{background:#0f1c33; border-radius:14px; padding:2rem; text-align:center; color:#59a3ff;}
.gauge-mock i{font-size:2.4rem;}
.gauge-num{font-size:2.2rem; font-weight:800; color:#fff; margin-top:.4rem;}
.mini-icon-box{background:#0f1c33; border-radius:10px; padding:.9rem; text-align:center; color:#ffb187; font-size:1.1rem;}
.check-pill{
  border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font-size:.85rem; font-weight:600; color:#2b3242;
  display:flex; align-items:center; gap:.5rem; background:#fff; height:100%;
}
.check-pill i{color:#2ec27e;}

/* DARK SECTION / MAINTENANCE */
.dark-section{background:var(--navy); color:#fff;}
.maint-tile{
  background:#111f39; border:1px solid #1f2c48; border-radius:12px; padding:1.2rem 1rem; text-align:center; height:100%; transition:.3s;
}
.maint-tile:hover{border-color:var(--orange); transform:translateY(-3px);}
.maint-tile span{display:block; font-size:.82rem; font-weight:600; color:#dfe4ee; margin-top:.6rem;}

/* PORTFOLIO */
.portfolio-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; height:100%; transition:.3s;}
.portfolio-card:hover{box-shadow:0 20px 40px rgba(20,30,60,.1); transform:translateY(-5px);}
.portfolio-thumb{
  height:170px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff;
}
.thumb-1{background:linear-gradient(135deg,#2f7bf6,#59a3ff);}
.thumb-2{background:linear-gradient(135deg,#2b3242,#4a5570);}
.thumb-3{background:linear-gradient(135deg,#ff7a3d,#ffb187);}
.thumb-4{background:linear-gradient(135deg,#2ec27e,#59d998);}
.thumb-5{background:linear-gradient(135deg,#a855f7,#d1a3ff);}
.thumb-6{background:linear-gradient(135deg,#0ea5e9,#67d1ff);}
.portfolio-body{padding:1.3rem;}
.portfolio-body .tag{font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange);}
.portfolio-body h4{font-size:1rem; margin:.4rem 0 .3rem;}
.portfolio-body p{font-size:.85rem; margin-bottom:0; color:var(--blue);}

/* STATS LIGHT */
.stat-box-light{padding:1.4rem;}
.stat-box-light .num span{font-size:2.2rem; font-weight:800; color:var(--ink);}
.stat-box-light .lbl{font-size:.85rem; color:var(--muted);}

/* TESTIMONIALS */
.testimonial-wrap{max-width:760px; margin:0 auto; position:relative;}
.testi-card-big{max-width:640px; text-align:center; padding:2rem;}
.quote-mark{font-size:2.4rem; color:#e2e7f0;}
.testi-card-big .quote{font-size:1.05rem; font-style:italic; color:#3d4658;}
.testi-avatar{width:46px; height:46px; border-radius:50%; background:#fff0e9; color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:1.2rem;}
.testi-name{font-weight:700; font-size:.92rem;}
.testi-role{color:var(--muted); font-size:.8rem;}
.carousel-control-prev, .carousel-control-next{width:44px; opacity:1;}
.testi-arrow{
  width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.carousel-indicators-custom{display:flex; justify-content:center; gap:.4rem; margin-top:1rem;}
.carousel-indicators-custom button{width:8px; height:8px; border-radius:50%; border:none; background:#d8dce3; padding:0;}
.carousel-indicators-custom button.active{background:var(--orange); width:22px; border-radius:6px; transition:.3s;}

/* FAQ */
.faq-accordion{max-width:840px; margin:0 auto;}
.accordion-item{border:1px solid var(--line); border-radius:12px !important; margin-bottom:.8rem; overflow:hidden;}
.accordion-button{font-weight:600; font-size:.95rem; color:var(--ink); padding:1.1rem 1.3rem;}
.accordion-button:not(.collapsed){background:#fff0e9; color:var(--orange); box-shadow:none;}
.accordion-button:focus{box-shadow:none; border-color:var(--line);}
.accordion-body{font-size:.88rem; color:var(--muted); padding:0 1.3rem 1.2rem;}

/* CTA BAND */
.cta-band{
  background:linear-gradient(120deg,var(--blue),#7b5cff); padding:80px 0; text-align:center;
}
.cta-band p{max-width:560px;}

/* CONTACT */
.contact-info .ci-item{display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink); margin-bottom:.9rem; font-weight:500;}
.contact-info .ci-item i{color:var(--orange);}
.contact-form-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:2rem; box-shadow:0 20px 50px rgba(20,30,60,.06);}
.contact-form-card label{font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; display:block;}
.contact-form-card .form-control, .contact-form-card .form-select{
  border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; font-size:.9rem; background:#fbfbfd;
}
.contact-form-card .form-control:focus, .contact-form-card .form-select:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,122,61,.15);
}

/* FOOTER */
footer{background:#080f1d; color:#8b97b3; padding:60px 0 20px;}
footer h5{color:#fff; font-size:.95rem; font-weight:700; margin-bottom:1rem;}
footer p{font-size:.85rem;}
footer a{color:#8b97b3; font-size:.88rem; display:block; margin-bottom:.6rem; transition:.2s;}
footer a:hover{color:var(--orange);}
.footer-logo{height:34px; filter:brightness(0) invert(1);}
.social-icon{
  width:36px; height:36px; border-radius:50%; background:#111f39; display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:.6rem; transition:.2s;
}
.social-icon:hover{background:var(--orange);}
.footer-bottom{border-top:1px solid #1c2941; margin-top:2.5rem; padding-top:1.5rem; font-size:.82rem;}

/* FLOATING BUTTONS */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:999; animation:pulseWA 2.4s infinite;
}
@keyframes pulseWA{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
.scroll-top{
  position:fixed; bottom:24px; left:24px; width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:999; opacity:0; visibility:hidden; transition:.3s;
}
.scroll-top.show{opacity:1; visibility:visible;}

/* REVEAL ANIMATIONS */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

@media(max-width:767px){
  .hero{padding:130px 0 50px;}
  .hero h1{font-size:2.1rem;}
  .section{padding:60px 0;}
  .floating-tag{display:none;}
}