/* =========================================================
   Nelgates – Website Design Landing Page
   ========================================================= */
:root{
  --blue-900:#06225a;
  --blue-800:#0a2f73;
  --blue-700:#0b3f95;
  --blue-600:#0d54c0;
  --blue-500:#1668dc;
  --blue-400:#2f8cf0;
  --cyan:#2fb3ea;
  --sky-50:#eef5fd;
  --sky-100:#e2eefb;
  --ink:#111827;
  --text:#4b5563;
  --muted:#8a94a6;
  --line:#d7e3f3;
  --gold-1:#f8d77c;
  --gold-2:#d99a1e;
  --gold-3:#b8740c;
  --white:#fff;
  --grad-blue:linear-gradient(135deg,#0a3a8c 0%,#1062d1 55%,#1a78e8 100%);
  --grad-text:linear-gradient(180deg,#2a8cf2 0%,#0b3f95 100%);
  --ff-head:'Montserrat',sans-serif;
  --ff-body:'Poppins',sans-serif;
  --shadow:0 18px 40px -18px rgba(10,47,115,.35);
  --container:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);color:var(--text);background:#fff;font-size:15px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--ink);line-height:1.15}
.section-title{font-size:clamp(26px,3.4vw,40px);font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:.5px}
.eyebrow{font-family:var(--ff-head);font-weight:700;font-size:14px;color:var(--blue-600);letter-spacing:1px;text-transform:uppercase;text-align:center}
.lead{max-width:760px;margin:12px auto 0;text-align:center;font-size:14px;color:var(--text)}

/* Image slot – shows a labelled placeholder until you add your own image */
.img-slot{position:relative;background:repeating-linear-gradient(45deg,#e6eef9 0 12px,#f2f6fc 12px 24px);border-radius:10px;overflow:hidden;min-height:120px}
.img-slot::before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:600 12px/1.3 var(--ff-body);color:#7b8db0;text-align:center;padding:10px}
.img-slot img{position:relative;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0}
.img-slot.has-img img{opacity:1}
.img-slot.has-img{background:none;min-height:0}
.img-slot.has-img::before{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px var(--ff-body);padding:12px 26px;border-radius:2px;cursor:pointer;border:1.5px solid transparent;transition:.25s}
.btn-primary{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.btn-primary:hover{background:var(--blue-800);border-color:var(--blue-800)}
.btn-outline{background:#fff;color:var(--blue-600);border-color:var(--blue-600)}
.btn-outline:hover{background:var(--blue-600);color:#fff}
.btn-cyan{background:var(--cyan);color:#fff;font-weight:600}
.btn-cyan:hover{background:#1d97cc}
.btn-white{background:#fff;color:var(--blue-700);font-weight:600}
.btn-white:hover{background:var(--sky-100)}

/* Dot pattern decor */
.dots{position:absolute;width:110px;height:110px;background-image:radial-gradient(#b9c8de 1.6px,transparent 1.6px);background-size:12px 12px;opacity:.8}

/* ================= HERO ================= */
.hero{position:relative;background:var(--grad-blue);color:#fff;padding:26px 0 0;overflow:hidden}
.hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:200px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.hero-watermark{position:absolute;right:6%;top:150px;font:900 520px/0.8 var(--ff-head);color:rgba(255,255,255,.05);pointer-events:none;user-select:none}
.hero-watermark.left{left:14%;right:auto;top:340px;font-size:300px}
.site-logo{display:inline-flex;flex-direction:column;align-items:center;color:#fff;position:relative;z-index:3}
.site-logo .logo-img{width:150px;min-height:52px;background-color:rgba(255,255,255,.12)}
.site-logo .logo-text{font:800 20px var(--ff-head);letter-spacing:.3px}
.hero-head{text-align:center;position:relative;z-index:2;margin-top:10px}
.hero-head .kicker{font:500 15px var(--ff-head);letter-spacing:6px;text-transform:uppercase;opacity:.95}
.hero-head h1{color:#fff;font-weight:800;font-size:clamp(40px,8vw,96px);letter-spacing:3px;text-transform:uppercase;line-height:1}
.hero-laptop{position:relative;z-index:2;max-width:760px;margin:30px auto 0}
.hero-laptop .img-slot{aspect-ratio:16/10;background-color:#0d1a2e;border-radius:14px 14px 4px 4px;box-shadow:0 40px 60px -30px rgba(0,0,0,.6)}

.hero-intro{text-align:center;padding:30px 0 80px}
.hero-intro h2{font-size:clamp(28px,4vw,46px);font-weight:700;text-transform:uppercase}
.hero-intro .sub{font:500 clamp(17px,2vw,24px) var(--ff-body);color:var(--ink);margin-top:6px;display:inline-flex;align-items:center;gap:8px}
.hero-intro .sub svg{width:26px;height:26px}
.hero-intro p{max-width:680px;margin:16px auto 28px;font-size:14px}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ================= EXPERIENCE ================= */
.experience{position:relative;padding:50px 0 100px;border-top:1px solid #eef1f6}
.experience .dots.d1{right:5%;top:40px}
.experience .dots.d2{left:2%;bottom:60px}
.stats{display:flex;justify-content:center;gap:50px;margin-top:40px;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:8px;padding:18px 34px;border:1px solid var(--line);border-left:none;position:relative;min-width:290px;background:#fff}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--line),transparent)}
.stat .num{font:800 clamp(70px,9vw,120px)/1 var(--ff-head);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-3px}
.stat .num sup{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.5em;vertical-align:top;position:relative;top:-.1em;letter-spacing:0}
.stat .label{font:400 22px/1.15 var(--ff-head);color:#9aa6b8}

/* ================= QUOTE ================= */
.quote{position:relative;padding:60px 0 80px}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:70%;background:linear-gradient(180deg,#e6f0fb 0%,#f3f7fd 100%)}
.quote .container{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.quote-left{position:relative;padding-top:40px}
.quote-left h2{font-size:clamp(20px,2vw,26px);font-weight:700;text-transform:uppercase}
.quote-left h2 span{display:block;font-size:clamp(34px,4vw,50px);font-weight:800;color:var(--blue-500);line-height:1.05}
.quote-left .img-slot{margin-top:20px;max-width:420px;aspect-ratio:1/1;background-color:transparent}
.quote-form{background:linear-gradient(160deg,var(--blue-700),var(--blue-800));padding:40px 46px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;color:#c8d6f3;font-size:13px;margin-bottom:6px}
.input-wrap{position:relative}
.input-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#b5c3db;pointer-events:none}
.field input,.field select,.field textarea{width:100%;border:none;outline:none;background:#fff;font:14px var(--ff-body);color:var(--ink);padding:12px 14px 12px 40px;height:46px;border-radius:0}
.field input:not([data-icon]){padding-left:14px}
.field select{appearance:none;padding-left:14px;cursor:pointer}
.field .select-wrap::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-30%);border:6px solid transparent;border-top:8px solid var(--blue-700)}
.field textarea{height:110px;resize:vertical;padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(47,179,234,.5)}
.quote-form .btn{display:flex;margin:24px auto 0;padding:12px 30px}
.form-msg{color:#bdf3c8;text-align:center;margin-top:12px;font-size:14px;display:none}

/* ================= SERVICES SLIDER ================= */
.services-band{background:var(--grad-blue);padding:60px 0 40px;color:#fff;position:relative;overflow:hidden}
.services-band .bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.services-band .b1{width:70px;height:70px;left:7%;top:50%}
.services-band .b2{width:40px;height:40px;right:14%;top:45%}
.services-band .section-title{color:#fff}
.services-band .tagline{text-align:center;font:500 16px var(--ff-head);letter-spacing:4px;text-transform:uppercase;margin-top:6px}
.slider{position:relative;margin-top:36px;height:480px}
.slide{position:absolute;top:50%;left:50%;width:min(780px,80vw);aspect-ratio:16/9.3;transform:translate(-50%,-50%) scale(.72);opacity:0;transition:transform .6s ease,opacity .6s ease,filter .6s;border:6px solid #fff;background:#fff;box-shadow:0 30px 50px -25px rgba(0,0,0,.5)}
.slide .img-slot{width:100%;height:100%;border-radius:0}
.slide.is-active{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3}
.slide.is-prev{transform:translate(-118%,-50%) scale(.62);opacity:1;z-index:2;filter:brightness(.92)}
.slide.is-next{transform:translate(18%,-50%) scale(.62);opacity:1;z-index:2;filter:brightness(.92)}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.slider-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
.slider-dots button.active{background:#fff;width:22px;border-radius:5px}

/* ================= SERVICES GRID ================= */
.services-grid{padding:80px 0}
.services-grid .container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.service-card{background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--blue-500);padding:20px 22px 26px;box-shadow:0 10px 30px -22px rgba(10,47,115,.5);transition:.3s}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.service-card .no{font:800 46px/1 var(--ff-head);color:transparent;-webkit-text-stroke:1.2px #c9d6ea}
.service-card h3{font-size:19px;font-weight:700;margin:8px 0 14px}
.service-card p{font-size:13px;text-align:justify;color:var(--text)}
.services-side{grid-column:3;grid-row:1/4;background:linear-gradient(180deg,#e9f1fb,#f7fafe);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px;overflow:visible}
.services-side .img-slot{width:115%;aspect-ratio:4/3;margin-right:-30%;background-color:transparent}
.services-side p{font-size:13px;margin:26px 0 22px;max-width:300px}

/* ================= PRICING ================= */
.pricing{padding:30px 0 80px}
.pricing h2{margin-top:6px}
.plans{margin-top:44px;display:grid;gap:26px}
.plan{display:grid;grid-template-columns:240px 1fr;box-shadow:0 14px 30px -20px rgba(10,47,115,.6)}
.plan-head{background:linear-gradient(170deg,var(--blue-800),var(--blue-900));color:#fff;text-align:center;padding:26px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.plan-head h3{color:#fff;font-weight:700;font-size:23px;letter-spacing:2.5px;text-transform:uppercase;line-height:1.25}
.plan-head .from{font-size:12px;letter-spacing:2px;color:#9fb5dc;margin:6px 0 8px;font-weight:600}
.price-badge{position:relative;padding:8px 22px;font:800 34px/1 var(--ff-head);color:#fff;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);border-radius:6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(0,0,0,.6);text-shadow:0 2px 2px rgba(120,70,0,.5)}
.price-badge::before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,240,190,.55);border-radius:4px}
.plan-body{background:#fff;border:4px solid var(--blue-500);border-left:none;padding:24px 30px;display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;align-content:center;position:relative}
.plan-body::before{content:"";position:absolute;left:24px;top:22px;bottom:22px;border-left:1px solid #dfe6f0}
.plan-body ul{list-style:none;padding-left:24px}
.plan-body li{position:relative;padding:6px 0 6px 22px;font-size:13px;color:#384152;line-height:1.4}
.plan-body li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:10px;border:solid var(--blue-600);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ================= CTA ================= */
.cta{padding:10px 0 80px}
.cta-box{background:var(--grad-blue);color:#fff;text-align:center;padding:56px 24px;position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-box h2{color:#fff;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.cta-box p{opacity:.9;font-size:14px;margin:10px 0 24px}

/* ================= TESTIMONIALS ================= */
.testimonials{background:linear-gradient(180deg,#eaf2fc,#f4f8fe);padding:70px 0 100px}
.testimonials .container{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.testimonials h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;text-transform:uppercase;line-height:1.2}
.testimonials .intro p{margin-top:20px;max-width:440px;font-size:14px;text-align:justify}
.t-wrap{position:relative}
.t-card{background:#fff;padding:0 30px 34px;position:relative;box-shadow:var(--shadow);display:none;margin-top:40px}
.t-card.active{display:block;animation:fadeUp .5s ease}
.t-card::after{content:"";position:absolute;left:60px;bottom:-14px;border:14px solid transparent;border-bottom:none;border-top-color:#fff}
.t-top{display:flex;gap:20px;align-items:flex-end}
.t-top .img-slot{width:150px;height:150px;flex:none;margin-top:-40px;border:5px solid #fff;border-radius:0;box-shadow:0 10px 20px -10px rgba(0,0,0,.3)}
.t-top .who{padding-bottom:40px}
.t-top .who strong{display:block;font:600 17px var(--ff-head);color:var(--ink)}
.stars{color:#f5b301;letter-spacing:2px;font-size:16px}
.t-title{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.t-title h4{font-size:16px;font-weight:700}
.t-title .qmark{font:900 90px/0.6 Georgia,serif;color:var(--blue-500);height:46px}
.t-card p{font-size:13.5px;text-align:justify;margin-top:10px}
.t-nav{position:absolute;right:-30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.t-nav button{width:7px;height:7px;border-radius:50%;border:none;background:#b9c9e3;cursor:pointer}
.t-nav button.active{background:var(--blue-500);height:18px;border-radius:4px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ================= FOOTER ================= */
.site-footer{background:linear-gradient(180deg,var(--blue-800),var(--blue-900));color:#c8d4ea;text-align:center;padding:60px 0 46px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:-10%;right:-10%;top:-120px;height:200px;background:rgba(255,255,255,.04);border-radius:50%}
.site-footer .site-logo{margin-bottom:20px}
.site-footer p{max-width:900px;margin:0 auto;font-size:13.5px}
.socials{display:flex;justify-content:center;gap:16px;margin-top:26px}
.socials a{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:#fff;color:var(--blue-700);transition:.25s}
.socials a:hover{background:var(--cyan);color:#fff}
.socials svg{width:20px;height:20px}
.copyright{margin-top:24px;font-size:12px;opacity:.6}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:991px){
  .quote::before{width:100%}
  .quote .container{grid-template-columns:1fr}
  .quote-left{text-align:center;padding-top:0}
  .quote-left .img-slot{margin:20px auto 0;max-width:320px}
  .services-grid .container{grid-template-columns:1fr 1fr}
  .services-side{grid-column:1/-1;grid-row:auto}
  .services-side .img-slot{width:80%;margin-right:0}
  .plan{grid-template-columns:200px 1fr}
  .testimonials .container{grid-template-columns:1fr}
  .t-nav{right:-18px}
  .slider{height:380px}
}
@media (max-width:640px){
  .hero::after{height:90px}
  .dots{display:none}
  .hero-head .kicker{letter-spacing:3px;font-size:12px}
  .stats{gap:20px}
  .stat{min-width:0;width:100%;justify-content:center;padding:14px}
  .quote-form{padding:28px 20px}
  .services-grid .container{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
  .plan-body{border-left:4px solid var(--blue-500);border-top:none;grid-template-columns:1fr;padding:18px}
  .plan-body::before{display:none}
  .plan-body ul{padding-left:0}
  .slider{height:220px}
  .slide.is-prev,.slide.is-next{opacity:0}
  .t-top{flex-direction:column;align-items:flex-start}
  .t-top .who{padding-bottom:0}
  .t-nav{display:none}
}

/* Transparent PNG slots: keep natural shape once image is added */
.img-slot.fit.has-img{aspect-ratio:auto!important;box-shadow:none;border-radius:0;background:none}
.img-slot.fit.has-img img{height:auto;object-fit:contain}
.site-logo .logo-img.has-img{width:110px}
.site-footer .site-logo .logo-img.has-img{width:130px}
.quote-left .img-slot.fit.has-img{margin-top:10px;max-width:440px}
.quote-left .img-slot.fit.has-img img{-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
.services-side .img-slot.fit.has-img{width:125%;margin-right:-35%}
.slide .img-slot img{object-position:top center}
/* Testimonial initials avatar (shown until a client photo is added) */
.img-slot.avatar{background:linear-gradient(135deg,var(--blue-500),var(--blue-800))}
.img-slot.avatar::before{font:800 44px var(--ff-head);color:#fff;letter-spacing:2px}