/* ============================================================
   AVIRAJ WEB TECH — "Aurora Ocean" Theme (v2)
   Blue → Cyan → Teal : professional + colorful + AI-styled
   avirajwebtech.in | avirajdigitalservice@gmail.com
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');

:root{
  --primary:#1d4ed8; --primary-2:#06b6d4; --accent:#14b8a6; --orange:#f97316;
  --dark:#0f172a; --body:#3f4d63; --light:#f1f6fa; --white:#fff;
  --grad:linear-gradient(135deg,#1d4ed8,#0ea5e9 45%,#06b6d4 75%,#14b8a6);
  --grad-soft:linear-gradient(135deg,rgba(29,78,216,.08),rgba(6,182,212,.08));
  --grad2:linear-gradient(135deg,#f97316,#facc15);
  --grad3:linear-gradient(160deg,#020617,#0b2b6b 70%,#0e4f7c);
  --shadow:0 10px 30px rgba(15,23,42,.07);
  --shadow-lg:0 22px 48px rgba(15,23,42,.13);
  --radius:22px;
}
*{scrollbar-width:thin;scrollbar-color:var(--primary-2) #e8f4fb}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:linear-gradient(#1d4ed8,#06b6d4);border-radius:8px}
html{scroll-behavior:smooth}
body{font-family:'Poppins','Segoe UI',system-ui,sans-serif;color:var(--body);background:var(--white);overflow-x:hidden}
h1,h2,h3,h4,h5,h6{color:var(--dark);font-weight:800}
a{text-decoration:none}
.text-grad{background:var(--primary-2);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero .typed-row{display:inline-flex;align-items:center;margin-top:.4rem}
.typed-row .typed{color:#0ea5e9;font-weight:900;font-size:clamp(1.25rem,2.6vw,1.65rem);letter-spacing:.3px}
.typed-row .td-caret{font-style:normal;color:#06b6d4;font-weight:600;animation:blink2 1s steps(1) infinite;margin-left:2px}
@keyframes blink2{50%{opacity:0}}
.hl-strip{padding:2.2rem 0;background:#f7f9fc}

/* ---------- ADMIN DASHBOARD "bara photo" (CSS mockup) ---------- */
.adm-shot{max-width:560px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(15,23,42,.13),0 0 0 1px #e2eef8}
.adm-shot .win-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;background:var(--grad3);position:relative}
.wdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.adm-shot .wdot.r{background:#fb7185}.adm-shot .wdot.y{background:#fbbf24}.adm-shot .wdot.g{background:#34d399}
.wurl{flex:1;text-align:center;color:#9ec2e8;font-size:.72rem;background:rgba(255,255,255,.1);border-radius:50rem;padding:.3rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlive{color:#4ade80;font-size:.64rem;font-weight:800;white-space:nowrap}
.win-body{display:flex;min-height:330px}
.win-side{width:150px;background:linear-gradient(180deg,#0a1e4e,#0b2b6b);padding:.8rem .6rem;display:flex;flex-direction:column;gap:.28rem;flex:0 0 auto}
.wside-logo{color:#fff;font-weight:900;font-size:.95rem;margin-bottom:.55rem}
.wlnk{color:#9db6dd;font-size:.72rem;font-weight:600;padding:.42rem .55rem;border-radius:10px}
.wlnk.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(14,165,233,.3)}
.wsup{margin-top:auto;color:#67e8f9;font-size:.62rem;background:rgba(6,182,212,.15);border-radius:10px;padding:.45rem .5rem;text-align:center}
.win-main{flex:1;min-width:0;background:linear-gradient(180deg,#f5fafd,#eef5fb);padding:.85rem;display:flex;flex-direction:column;gap:.7rem}
.whead{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.whead b{font-size:.85rem;color:#123a63}
.wbtn{background:var(--grad);color:#fff;font-size:.66rem;font-weight:800;padding:.4rem .8rem;border-radius:50rem;white-space:nowrap}
.wcards{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.wcard{background:#fff;border-radius:14px;padding:.6rem .7rem;display:flex;align-items:center;gap:.55rem;box-shadow:0 6px 16px rgba(13,71,161,.08)}
.wcard i{font-style:normal;font-size:1.15rem;background:#e7f6ff;border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wcard b{display:block;font-size:1rem;color:#123a63;line-height:1}
.wcard span{font-size:.62rem;color:#7c8db0}
.wchart{background:#fff;border-radius:14px;padding:.7rem .8rem;box-shadow:0 6px 16px rgba(13,71,161,.08)}
.wchart-bars{display:flex;align-items:flex-end;gap:.45rem;height:86px}
.wchart-bars .bar{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#7dd3fc,#0ea5e9);min-height:12px}
.wchart-bars .bar.hot{background:linear-gradient(180deg,#fdba74,#f97316)}
.wchart-cap{font-size:.66rem;color:#7c8db0;margin-top:.5rem;text-align:center}
.wrows{display:flex;flex-direction:column;gap:.4rem}
.wrow{background:#fff;border-radius:12px;padding:.5rem .65rem;font-size:.72rem;color:#23456d;display:flex;align-items:center;gap:.5rem}
.wrow i{font-style:normal;color:#7c8db0;font-size:.66rem}
.wrow b{margin-left:auto;font-size:.62rem;padding:.18rem .55rem;border-radius:50rem}
.wrow b.ok{background:#dcfce7;color:#15803d}
.wrow b.wn{background:#fef3c7;color:#b45309}
.wshot-badge{text-align:center;margin-top:1.1rem;font-weight:800;color:#154a8a;font-size:.95rem}
.wshot-badge::before{content:'✨ '}

/* right-click protect toast */
#cop-note{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(14px);background:var(--grad3);color:#e0f2fe;font-size:.85rem;font-weight:700;padding:.65rem 1.4rem;border-radius:50rem;box-shadow:0 14px 40px rgba(2,6,23,.4);opacity:0;visibility:hidden;transition:.35s;z-index:2000;pointer-events:none;white-space:nowrap}
#cop-note.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* buttons */
.btn-brand{background:var(--grad);color:#fff;border:0;border-radius:12px;padding:.8rem 1.9rem;font-weight:700;box-shadow:0 6px 16px rgba(14,165,233,.22);transition:.3s}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,184,166,.35)}
.btn-outline-brand{border:2px solid var(--primary);color:var(--primary);border-radius:14px;padding:.72rem 1.8rem;font-weight:700;background:#fff;transition:.3s}
.btn-outline-brand:hover{background:var(--grad);color:#fff;border-color:transparent}
.btn-amber{background:var(--grad2);color:#fff;border-radius:12px;padding:.8rem 1.9rem;font-weight:700;box-shadow:0 6px 16px rgba(249,115,22,.22)}
.btn-amber:hover{color:#fff;transform:translateY(-3px)}
.btn-pay{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-weight:800;border-radius:12px;padding:.7rem 1.6rem;box-shadow:0 6px 16px rgba(21,128,61,.22);border:0;display:inline-flex;align-items:center;gap:.5rem}
.btn-pay:hover{color:#fff;transform:translateY(-3px)}

/* top bar + navbar */
.topbar{background:#0a2540;color:#c7d9ee;font-size:.84rem;padding:.45rem 0;white-space:nowrap}
.topbar .tb-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0}
.topbar .tb-l{display:inline-flex;align-items:center;gap:1.1rem;min-width:0}
.topbar a{color:#9fd4ff;font-weight:600;text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .tb-mail{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar .badge-live{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;border-radius:50rem;padding:.18rem .65rem;font-size:.72rem;font-weight:700;flex:0 0 auto}
.topbar .tb-r{display:inline-flex;align-items:center;flex:0 0 auto}
.navbar.av-navbar{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);box-shadow:0 4px 30px rgba(13,71,161,.08);transition:.3s;padding:.75rem 0}
.navbar.av-navbar.scrolled{padding:.4rem 0;box-shadow:0 10px 30px rgba(13,71,161,.14)}
.brand-text{font-weight:900;font-size:1.45rem;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:.55rem}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;box-shadow:0 6px 16px rgba(14,165,233,.3)}
.brand-text .a1{color:var(--dark)}
.brand-text .a2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.navbar .nav-link{font-weight:600;color:#1e3a5f;margin:0 .22rem;border-radius:12px;padding:.45rem .95rem!important;transition:.25s;font-size:.93rem}
.navbar .nav-link:hover,.navbar .nav-link.active{background:linear-gradient(90deg,rgba(29,78,216,.1),rgba(6,182,212,.12));color:var(--primary)}
.navbar.av-navbar .navbar-collapse{min-width:0}
.navbar.av-navbar .navbar-nav{flex-wrap:nowrap;min-width:0}
.navbar.av-navbar .nav-link{white-space:nowrap}

/* Get Free Quote — pinned far right on desktop, inline below menu on mobile */
@media (min-width:992px){
  .navbar.av-navbar .navbar-collapse{display:flex!important;align-items:center;justify-content:flex-end}
  .navbar.av-navbar .nav-cta{flex:0 0 auto;margin-left:1rem;padding:.6rem 1.25rem}
}
@media (max-width:991px){
  .navbar.av-navbar .nav-cta{display:block;width:fit-content;margin:.2rem 0 .6rem .75rem;padding:.55rem 1.2rem}
  .navbar.av-navbar .navbar-nav .nav-link{white-space:normal}
}

/* hero */
.hero{position:relative;padding:5rem 0 5.5rem;background:#fbfdfe;overflow:hidden}
.hero .blob{display:none}
.hero .b1{width:320px;height:320px;background:#7dd3fc;top:-90px;left:-90px}
.hero .b2{width:280px;height:280px;background:#a5f3fc;bottom:-70px;right:6%;animation-delay:2s}
.hero .b3{width:190px;height:190px;background:#fed7aa;top:18%;right:-50px;animation-delay:4s}
@keyframes blobFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.06)}}
.hero .chips .chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #d7e9f5;color:#123a63;font-weight:600;border-radius:14px;padding:.45rem 1.05rem;font-size:.84rem;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.3rem);font-weight:900;line-height:1.18}
.hero .typed{color:#0ea5e9;font-weight:900}
.hero .stat-box{flex:1 1 130px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:1.1rem 1rem;text-align:center}
.hero .stat-box h3{font-size:1.7rem;margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.float-mini{animation:none}
.carousel-hero img{max-height:420px;border-radius:22px;box-shadow:var(--shadow-lg)}
.card-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid #e3f2fa;border-radius:24px;box-shadow:var(--shadow)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* sections */
section{padding:4.5rem 0}
.sec-head{max-width:760px;margin:0 auto 2.6rem;text-align:center}
.sec-eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(90deg,rgba(6,182,212,.12),rgba(249,115,22,.12));color:var(--primary);font-weight:800;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;border-radius:50rem;padding:.42rem 1.2rem;margin-bottom:.9rem;border:1px solid rgba(6,182,212,.25)}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:900}
.sec-head p{color:#52648a;font-size:1.02rem}

.card-a{border:1px solid #e8f3fa;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:.35s;overflow:hidden}
.card-a:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#bfe6f5}
.icon-badge{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:18px;font-size:1.7rem;background:linear-gradient(135deg,#e0f2fe,#ccfbf1);color:var(--primary)}
.icon-badge.pink{background:linear-gradient(135deg,#ffedd5,#fee2e2);color:var(--orange)}
.icon-badge.org{background:linear-gradient(135deg,#cccffe,#e0f2fe);color:#4f46e5}

.bg-lav{background:#f7f9fc}
.bg-plain{background:#fff}
.bg-deep{background:#082147;color:#bfdbfe;position:relative;overflow:hidden}
.bg-deep::before{display:none}
.bg-deep>*{position:relative;z-index:1}
.bg-deep h2,.bg-deep h3{color:#fff}
.bg-deep .sec-eyebrow{background:rgba(255,255,255,.1);color:#a5f3fc;border-color:transparent}

/* ---------- why-choose-us advantage cards (light colored boxes) ---------- */
.adv-card{display:flex;gap:1.05rem;align-items:flex-start;background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:20px;padding:1.35rem;height:100%;transition:.35s;position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.06)}
.adv-card:hover{transform:translateY(-6px);border-color:rgba(15,23,42,.13);box-shadow:0 20px 44px rgba(15,23,42,.12)}
.adv-ic{width:58px;height:58px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;flex:0 0 auto;box-shadow:0 5px 14px rgba(15,23,42,.18)}
.adv-body{min-width:0;display:flex;flex-direction:column;gap:.3rem}
.adv-body h5{color:#123a63;font-size:1.05rem;margin:0;font-weight:800}
.adv-body p{color:#5b7186;font-size:.87rem;line-height:1.6;margin:0}
.adv-more{font-size:.75rem;font-weight:800;color:#0891b2;display:inline-flex;align-items:center;gap:.25rem;margin-top:.15rem}
.adv-more b{transition:.25s;flex-shrink:0}
.adv-card:hover .adv-more b{margin-left:4px}

/* ---------- CTA color box ---------- */
.cta-sec{background:#fff;padding:2.5rem 0 5rem}
.cta-box{background:var(--grad);border-radius:28px;padding:3.2rem 2.2rem 3rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 24px 55px rgba(2,132,199,.28)}
.cta-box::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.1);top:-130px;right:-90px;pointer-events:none}
.cta-box::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-100px;left:-60px;pointer-events:none}
.cta-box>*{position:relative;z-index:1}
.cta-box h2,.cta-box h3{color:#fff}
.cta-box p{color:rgba(255,255,255,.93)!important;margin:0 auto;max-width:680px}

/* ---------- pricing included boxes ---------- */
.inc-box{background:#fff;border:1px solid #e6f0f9;border-radius:16px;padding:1.25rem .6rem;height:100%;box-shadow:var(--shadow);transition:.3s}
.inc-box:hover{transform:translateY(-4px);border-color:#9fd8ef}
.inc-ic{font-size:2rem;background:linear-gradient(135deg,#eff6ff,#ecfeff);display:inline-flex;width:64px;height:64px;border-radius:18px;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,23,42,.08)}
.inc-box h6{color:#123a63;margin-top:.7rem}
.inc-box small{color:#64748b}
.adv-more b{transition:.25s;flex-shrink: 0;}
.adv-card:hover .adv-more b{margin-left:4px}

/* founder band (about page) */
.founder-band{display:flex;gap:2.2rem;align-items:center;background:#fff;border:1px solid #e4eef8;border-radius:26px;padding:2.2rem;box-shadow:var(--shadow)}
.fb-photo{flex:0 0 300px}
.fb-photo img{width:300px;height:340px;object-fit:cover;object-position:center top;border-radius:20px;box-shadow:0 18px 40px rgba(15,23,42,.18);border:4px solid #fff;outline:1px solid #e2eef8}
.fb-body{min-width:0}
.fb-body p{color:#5b7186;font-size:.95rem;line-height:1.7;margin-bottom:1rem;max-width:640px}
@media (max-width:767px){
  .founder-band{flex-direction:column;text-align:center;padding:1.6rem}
  .fb-photo{flex:0 0 auto;width:260px}
  .fb-photo img{width:260px;height:300px}
  .fb-body .sec-eyebrow{margin-left:0}
  .fb-body .d-flex{justify-content:center}
}

/* section banners */
.sec-banner{display:block;max-width:1020px;margin:0 auto 2.2rem;border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(15,23,42,.14),0 0 0 1px #e2eef8;width:100%}
.sec-banner:hover{box-shadow:0 24px 52px rgba(15,23,42,.2)}
@media (max-width:767px){.sec-banner{border-radius:16px;margin-bottom:1.6rem}}

/* services artwork cards */
.svc-card{overflow:hidden}
.svc-card:hover .svc-art img{transform:scale(1.05)}
.svc-art{position:relative;background:#0b2b6b}
.svc-art img{display:block;width:100%;height:200px;object-fit:cover;object-position:center;transition:.5s ease;border-bottom:1px solid #e8f3fa}
.svc-art-chip{position:absolute;left:12px;bottom:12px;background:rgba(6,20,40,.66);backdrop-filter:blur(6px);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:50rem;border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;gap:.35rem}
.price-chip{background:linear-gradient(135deg,#eff6ff,#ecfeff);color:#0d9488;font-size:.72rem;font-weight:800;padding:.28rem .65rem;border-radius:50rem;border:1px solid #bfe8f1;white-space:nowrap}

/* cat pills */
.cat-pill{text-align:center;background:#fff;border:1.5px solid #e2eef8;border-radius:20px;padding:1.15rem .6rem;transition:.3s;display:block;height:100%;color:var(--dark)}
.cat-pill:hover{border-color:var(--primary-2);transform:translateY(-6px);box-shadow:var(--shadow);color:var(--dark)}

/* process */
.step{text-align:center;padding:0 .8rem}
.step .num{width:64px;height:64px;margin:0 auto .9rem;display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--grad);color:#fff;font-weight:900;font-size:1.25rem;box-shadow:0 6px 16px rgba(14,165,233,.25)}
.step h5{font-size:1.02rem}

/* portfolio */
.port-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid #e8f3fa;height:100%}
.port-card .pimg{height:200px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:var(--grad);position:relative}
.port-card .pimg img{display:block;width:100%;height:200px;object-fit:cover;object-position:center;transition:.5s ease}
.port-card:hover .pimg img{transform:scale(1.05)}
.port-card:nth-child(3n+2) .pimg{background:var(--grad2)}
.port-card .pbody{background:#fff;padding:1.2rem 1.3rem}
.badge-soft{background:#e0f2fe;color:var(--primary);font-weight:700;font-size:.72rem;border-radius:50rem;padding:.35rem .8rem}

/* team */
.team-card{border:1px solid #e8f3fa;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;background:#fff;transition:.35s;height:100%}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.avatar{width:110px;height:110px;border-radius:32%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;margin:0 auto;box-shadow:0 10px 28px rgba(14,165,233,.28)}
.skill-chip{background:#eff9ff;border:1px solid #d7e9f5;color:#1e4f8f;font-size:.74rem;border-radius:10px;padding:.28rem .75rem;margin:.15rem;display:inline-block}

/* pricing */
.price-card{border:1px solid #e8f3fa;border-radius:26px;box-shadow:var(--shadow);background:#fff;height:100%;transition:.35s;position:relative}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.price-card.hl{background:var(--grad3);color:#bfdbfe;border:0}
.price-card.hl h3,.price-card.hl h5,.price-card.hl .p{color:#fff}
.price-card .ribbon{position:absolute;top:18px;right:-34px;transform:rotate(45deg);background:var(--grad2);color:#fff;font-size:.7rem;font-weight:800;padding:.3rem 2.4rem}
.price-card .p{font-size:2.2rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-card ul{list-style:none;padding:0}
.price-card ul li{padding:.42rem 0;border-bottom:1px dashed rgba(148,163,184,.3);color:#52648a}
.price-card.hl ul li{border-color:rgba(255,255,255,.15);color:#bfdbfe}

/* faq */
.faq-item{background:#fff;border:1.5px solid #e2eef8;border-radius:16px;margin-bottom:.9rem;overflow:hidden}
.faq-item summary{cursor:pointer;padding:1.05rem 1.3rem;font-weight:700;color:var(--dark);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::after{content:'+';font-size:1.4rem;color:#0ea5e9;transition:.3s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 1.3rem 1.1rem;color:#52648a}
.faq-item[open]{border-color:var(--primary-2);box-shadow:var(--shadow)}

/* service detail collapsible */
.s-details{margin-top:.8rem}
.s-details summary{cursor:pointer;font-weight:700;color:var(--primary);font-size:.86rem;list-style:none}
.s-details summary::-webkit-details-marker{display:none}
.s-details summary::before{content:'▾ ';}
.s-details[open] summary::before{content:'▴ ';}
.s-details[open] .s-details-body{padding:.8rem 1rem;background:#f4fbff;border:1px dashed #bfe6f5;border-radius:14px;font-size:.86rem;color:#41526f}
.s-details-body h4{font-size:.98rem}
.s-details-body ul{padding-left:1.1rem;margin:.4rem 0}
.s-details-body li{margin:.28rem 0}

/* testimonials */
.tst{background:#fff;border:1px solid #e8f3fa;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;height:100%;transition:.3s}
.tst:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.stars{color:var(--orange);letter-spacing:2px}

.tech-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid #e2eef8;border-radius:14px;padding:.55rem 1.2rem;font-weight:700;color:#1e4f8f;box-shadow:0 6px 18px rgba(13,71,161,.08);transition:.3s}
.tech-chip:hover{border-color:var(--primary-2);transform:translateY(-4px)}

/* blog */
.blog-date{font-size:.8rem;color:#7c8db0}
.blog-card .bimg{height:150px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#e0f2fe,#ccfbf1)}

/* forms */
.form-panel{border:1px solid #e8f3fa;border-radius:26px;box-shadow:var(--shadow-lg);background:#fff}
.form-control,.form-select{border-radius:14px;padding:.75rem 1rem;border:1.5px solid #dbe9f4;font-family:inherit}
.form-control:focus,.form-select:focus{border-color:var(--primary-2);box-shadow:0 0 0 .2rem rgba(6,182,212,.15)}
label{font-weight:600;color:#1e3a5f;font-size:.88rem}

/* ================= ADS ================= */
.ad-slot{margin:2.4rem auto;max-width:1140px;padding:0 1rem}
.ad-slot .ad-inner{border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg)}
.ad-slot .ad-inner img{width:100%;display:block}
.ad-slot .ad-inner>div:first-child{width:100%}
.ad-tag{position:absolute;top:10px;left:14px;background:rgba(15,23,42,.55);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:1px;padding:.2rem .6rem;border-radius:50rem;backdrop-filter:blur(6px);z-index:2}
.ad-slot.ad-sidelike{max-width:none}

/* ================= PAYMENT PAGE ================= */
.pay-hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:#e7f8f3;border:1px solid #a7e8d5;color:#0f766e;font-weight:800;font-size:.8rem;border-radius:50rem;padding:.45rem 1.1rem}
.pay-service-desc{font-size:.92rem;color:#41526f;line-height:1.8}
.pay-service-desc h4{color:var(--dark);font-size:1.05rem;margin-top:1.1rem}
.pay-service-desc ul{padding-left:1.15rem}
.pay-service-desc li{margin:.3rem 0}
.pay-amount-box{background:var(--grad3);color:#bfdbfe;border-radius:20px;padding:1.4rem}
.pay-amount-box .amt{font-size:2.2rem;font-weight:900;color:#fff}
.gw-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid #d7e9f5;border-radius:12px;padding:.5rem .9rem;font-weight:700;color:#1e4f8f;font-size:.82rem}

/* footer */
.footer{background:linear-gradient(180deg,#06122b,#0b2b6b);color:#a9c6e8;padding:4rem 0 0;position:relative;overflow:hidden}

/* -------- blog mini list (home) -------- */
.bm-item{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid #e4eef8;border-radius:16px;padding:.9rem 1.05rem;transition:.3s;box-shadow:0 6px 16px rgba(13,71,161,.06)}
.bm-item:hover{transform:translateX(6px);border-color:#9fd8ef;box-shadow:0 14px 30px rgba(13,71,161,.12)}
.bm-thumb{width:64px;height:64px;min-width:64px;border-radius:16px;background:linear-gradient(135deg,#e0f2fe,#ccfbf1);display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.bm-body{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.bm-date{font-size:.74rem;color:#7c8db0;font-weight:600}
.bm-date i{font-style:normal;margin:0 .3rem;opacity:.5}
.bm-title{font-weight:800;color:#123a63;font-size:.95rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-link{font-size:.8rem;font-weight:800;color:#0ea5e9}
.bm-link b{transition:.25s}
.bm-item:hover .bm-link b{margin-left:4px}
.footer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 92% 8%,rgba(6,182,212,.16),transparent 40%);pointer-events:none}
.footer .row{position:relative;z-index:1}
.f-brand .brand-mark{width:44px;height:44px}
.f-desc{margin:1rem 0 1.2rem;font-size:.92rem;line-height:1.75;color:#9db9dd;max-width:330px}
.f-trust{display:flex;gap:.45rem;flex-wrap:wrap}
.f-trust span{font-size:.72rem;font-weight:700;color:#7fd7ef;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);border-radius:50rem;padding:.32rem .8rem}
.f-head{color:#fff;font-weight:800;letter-spacing:.5px;padding-bottom:.55rem;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#0ea5e9,#06b6d4) 1;display:inline-block;margin-bottom:.8rem}
.f-links a{display:block;color:#9db9dd;padding:.26rem 0;font-size:.9rem;transition:.25s}
.f-links a::after{content:''}
.f-links a:hover{color:#67e8f9;transform:translateX(5px)}
.f-contact{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.fc-item{display:flex;gap:.75rem;align-items:flex-start;font-size:.88rem;color:#c9def5;line-height:1.45;min-width:0}
.fc-item b,.fc-item b a{overflow-wrap:anywhere;min-width:0}
.fc-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.09);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 auto}
.fc-item b a{color:#e2f3ff}
.fc-sub{color:#7ea3cd}
.f-news input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;padding:.55rem .85rem;font-size:.85rem;outline:0;min-width:0}
.f-news input::placeholder{color:#7ea3cd}
.f-news input:focus{border-color:#06b6d4;background:rgba(255,255,255,.15)}
.f-nbtn{background:var(--grad);color:#fff;border:0;border-radius:12px;font-weight:800;padding:.55rem 1.1rem;font-size:.85rem}
.f-news .f-nlabel{font-size:.78rem;font-weight:700;color:#a9c6e8;margin-bottom:.35rem;display:block}
.f-line{border-color:rgba(255,255,255,.12);position:relative;z-index:1}
.f-bottom{position:relative;z-index:1;color:#7ea3cd;font-size:.85rem}
.f-bottom a{color:#9db9dd;padding:0;font-size:.85rem}
.f-bottom a:hover{color:#67e8f9}
.soc{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;margin-right:.45rem;transition:.3s}
.soc:hover{background:var(--grad);transform:translateY(-4px);color:#fff!important}
.footer-bottom{background:rgba(0,0,0,.28)}

/* whatsapp float */
.wa-float{position:fixed;left:22px;bottom:24px;z-index:1050;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,.45);animation:pulse 2.4s infinite}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ================= AI SUPPORT WIDGET ================= */
.ai-float{position:fixed;right:22px;bottom:24px;z-index:1051;width:62px;height:62px;border-radius:20px;background:var(--grad);border:0;color:#fff;font-size:1.7rem;box-shadow:0 10px 28px rgba(14,165,233,.35);transition:.3s}
.ai-float:hover{transform:scale(1.08) rotate(-6deg)}
.ai-panel{position:fixed;right:22px;bottom:96px;width:372px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 135px);background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(2,6,23,.4);z-index:1052;display:none;flex-direction:column;overflow:hidden;border:1px solid #dbe9f4}
.ai-panel.open{display:flex;animation:pop .3s ease}
@keyframes pop{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.ai-head{background:var(--grad);color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem}
.ai-head .dot{width:10px;height:10px;border-radius:50%;background:#4ade80;display:inline-block;animation:pulse 1.6s infinite}
.ai-head small{opacity:.88}
.ai-avatar{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.ai-body{flex:1;overflow-y:auto;padding:1rem;background:linear-gradient(180deg,#f5fbff,#fff)}
.msg{max-width:84%;padding:.7rem 1rem;border-radius:16px;margin-bottom:.6rem;font-size:.88rem;line-height:1.5;word-wrap:break-word}
.msg.bot{background:#eef8fd;color:#123a63;border-bottom-left-radius:5px}
.msg.me{background:var(--grad);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.msg .msg-time{display:block;font-size:.64rem;opacity:.6;margin-top:.25rem}
.ai-quick{padding:.55rem 1rem;background:#fff;border-top:1px solid #e8f3fa;display:flex;gap:.4rem;overflow-x:auto}
.ai-quick button{white-space:nowrap;border:1.5px solid #d7e9f5;background:#f5fbff;color:#1e4f8f;font-size:.75rem;font-weight:700;border-radius:50rem;padding:.35rem .8rem}
.ai-quick button:hover{background:var(--grad);color:#fff;border-color:transparent}
.ai-foot{background:#fff;padding:.7rem;border-top:1px solid #e8f3fa;display:flex;gap:.5rem}
.ai-foot input{flex:1;border:1.5px solid #dbe9f4;border-radius:50rem;padding:.6rem 1rem;font-size:.9rem;outline:0}
.ai-foot input:focus{border-color:var(--primary-2)}
.ai-send{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;border:0;font-size:1.15rem}
.typing{display:inline-flex;gap:4px;padding:.75rem 1rem}
.typing span{width:7px;height:7px;background:#0ea5e9;border-radius:50%;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ================= PAGE LOADER (AI professional) ================= */
#pageLoader{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(circle at 30% 20%,#0b2b6b,#020617 70%);transition:opacity .5s ease,visibility .5s}
#pageLoader.hide{opacity:0;visibility:hidden;pointer-events:none}
/* fail-safe: agar JS (main.js) kabhi na chale to loader khud 3.6 sec me chhup jaye */
@keyframes plAuto{0%{opacity:1}80%,100%{opacity:0;visibility:hidden;pointer-events:none}}
#pageLoader{animation:plAuto 3.6s .1s forwards}
.pl-orb{position:relative;width:120px;height:120px;margin-bottom:1.6rem}
.pl-orb .ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#22d3ee;border-bottom-color:#3b82f6;animation:plSpin 1.1s linear infinite}
.pl-orb .ring:nth-child(2){inset:14px;border-top-color:#a5f3fc;border-bottom-color:transparent;animation-duration:1.6s;animation-direction:reverse}
.pl-orb .core{position:absolute;inset:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 0 40px rgba(34,211,238,.55);animation:plPulse 1.6s ease-in-out infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pl-title{font-weight:900;font-size:1.35rem;color:#e0f2fe;letter-spacing:.5px}
.pl-title span{background:linear-gradient(90deg,#22d3ee,#a5f3fc,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-dots{display:flex;gap:.45rem;margin-top:.85rem}
.pl-dots i{width:9px;height:9px;border-radius:50%;background:#22d3ee;animation:plBlink 1.2s infinite}
.pl-dots i:nth-child(2){animation-delay:.15s}.pl-dots i:nth-child(3){animation-delay:.3s}.pl-dots i:nth-child(4){animation-delay:.45s}.pl-dots i:nth-child(5){animation-delay:.6s}
@keyframes plBlink{0%,80%,100%{opacity:.2;transform:scale(.85)}40%{opacity:1;transform:scale(1.15)}}
.pl-tip{margin-top:.7rem;font-size:.78rem;color:#67a6d9;letter-spacing:.4px}
.pl-bar{width:210px;height:5px;border-radius:50rem;background:rgba(255,255,255,.12);overflow:hidden;margin-top:1rem}
.pl-bar b{display:block;height:100%;width:40%;border-radius:50rem;background:linear-gradient(90deg,#22d3ee,#3b82f6);animation:plSlide 1.1s ease-in-out infinite}
@keyframes plSlide{0%{transform:translateX(-105%)}100%{transform:translateX(340%)}}

/* reveals — by default VISIBLE (fail-safe). JS chalne par main.js 'pre' class lagakar animation deta hai */
.reveal.pre{opacity:0;transform:translateY(34px);transition:all .7s cubic-bezier(.2,.7,.3,1)}
.reveal.pre.in{opacity:1;transform:none}

/* ============ ADMIN PANEL ============ */
.adm-body{background:linear-gradient(180deg,#f2f7fd,#fdf8f4);min-height:100vh}
.adm-nav{width:262px;min-height:100vh;background:var(--grad3);position:fixed;top:0;left:0;z-index:1040;padding:1.2rem .9rem;overflow-y:auto}
.adm-nav .brand{color:#fff;font-weight:900;font-size:1.2rem}
.adm-nav label{color:#6b9bc9;font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;margin:.9rem .6rem .3rem;font-weight:800}
.adm-nav a.lnk{display:flex;align-items:center;gap:.7rem;color:#bcd6f2;padding:.6rem .9rem;border-radius:12px;font-size:.92rem;font-weight:600;transition:.25s}
.adm-nav a.lnk:hover,.adm-nav a.lnk.active{background:rgba(255,255,255,.12);color:#fff}
.adm-nav .q-card{background:rgba(255,255,255,.08);border-radius:16px;padding:.9rem;color:#bcd6f2;margin-top:1rem}
.adm-main{margin-left:262px;padding:1.6rem 2rem 3rem;min-width:0}
.stat-card{background:#fff;border:1px solid #e4eef8;border-radius:18px;box-shadow:var(--shadow);padding:1.2rem 1.4rem;display:flex;align-items:center;gap:1rem;transition:.3s;height:100%}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.stat-card .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;flex:0 0 auto}
.adm-card{background:#fff;border:1px solid #e4eef8;border-radius:20px;box-shadow:var(--shadow);padding:1.5rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm-table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:640px}
.adm-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:#7c8db0;border:0;padding:.4rem .9rem;white-space:nowrap}
.adm-table td{background:#fff;padding:.85rem .9rem;color:#1e3a5f;border-top:1px solid #edf3fa;border-bottom:1px solid #edf3fa;vertical-align:middle}
.adm-table td:first-child{border-left:1px solid #edf3fa;border-radius:14px 0 0 14px}
.adm-table td:last-child{border-right:1px solid #edf3fa;border-radius:0 14px 14px 0}
.adm-table tr:hover td{background:#f5fbff}
.badge-soft.new{background:#fef3c7;color:#b45309}
.badge-soft.done,.badge-soft.paid{background:#dcfce7;color:#15803d}
.badge-soft.pending{background:#fde8c8;color:#c2410c}
.badge-soft.contacted{background:#e0f2fe;color:#1d4ed8}
.badge-soft.in_progress{background:#ede9fe;color:#6d28d9}
.thumb{width:56px;height:56px;border-radius:12px;background:#e8f4fb;display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}

/* login */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 15%,#0b2b6b,#020617 70%)}

/* responsive */
@media (min-width: 992px) and (max-width: 1300px){
  body>.navbar.av-navbar .container{padding-left:.6rem;padding-right:.6rem}
  body>.navbar.av-navbar .brand-text{font-size:1rem}
  body>.navbar.av-navbar .brand-mark{width:34px;height:34px;font-size:1rem;border-radius:10px}
  body>.navbar.av-navbar .nav-link{padding:.45rem .38rem!important;font-size:.78rem;margin:0 .03rem}
  body>.navbar.av-navbar .nav-cta{padding:.48rem .8rem!important;font-size:.78rem;margin-left:.45rem}
}
@media (min-width: 1301px){
  body>.navbar.av-navbar .nav-link{font-size:.88rem;padding:.5rem .55rem}
}

@media (max-width: 991px){
  .adm-nav{transform:translateX(-110%);transition:.35s}
  .adm-nav.open{transform:none}
  .adm-main{margin-left:0;padding:1rem .9rem 3rem}
  .adm-top .btn{display:inline-flex}
  .hero{padding:3rem 0 4rem}
  .hero .blob{opacity:.35}
  section{padding:3rem 0}
}
@media (max-width: 767px){
  .ai-panel{right:14px;bottom:88px}
  .ai-float{right:14px;bottom:18px;width:56px;height:56px}
  .wa-float{left:14px;bottom:18px;width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
  section{padding:2.6rem 0}
  .sec-head{margin-bottom:1.8rem}
  .hero h1{font-size:1.72rem}
  .hero .stat-strip{gap:.55rem}
  .hero .stat-box{padding:.85rem .5rem;border-radius:14px}
  .hero .stat-box h3{font-size:1.3rem}
  .topbar{font-size:.74rem}
  .navbar.av-navbar{padding:.55rem 0}
  .brand-text{font-size:1.2rem}
  .price-card.hl{transform:none!important}
  .card-a,.price-card,.team-card{border-radius:18px}
  .ad-slot{margin:1.3rem auto;padding:0 .6rem}
  #pageLoader .pl-orb{width:96px;height:96px}
  .pl-title{font-size:1.1rem}
  .adm-main .adm-card{padding:1rem}
  /* hero admin mockup on mobile — flat, full width */
  .adm-shot{transform:none!important;max-width:340px}
  .win-side{width:112px}
  .win-side .wlnk{font-size:.62rem;padding:.35rem .4rem}
  .win-body{min-height:270px}
  .wcard{padding:.45rem .5rem}
  .wrow i{display:none}
  .typed-row .typed{font-size:1.05rem}
  .hl-strip .card-a{padding:1.1rem!important}
  .hl-strip .float-mini{animation:none}
  .adv-card{padding:1.05rem;gap:.8rem;border-radius:16px}
  .adv-ic{width:46px;height:46px;font-size:1.3rem;border-radius:13px}
  .adv-body h5{font-size:.98rem}
  .adv-body p{font-size:.82rem}
  .adv-more{display:none}
  /* footer: 2 column tight */
  .footer{padding:2.6rem 0 0}
  .f-bottom{flex-direction:column;text-align:center;gap:.4rem}
  .f-news input{font-size:.95rem}
  #cop-note{font-size:.72rem;padding:.5rem 1rem;bottom:80px}
}
@media (max-width: 575px){
  .container{padding-left:.85rem;padding-right:.85rem}
  .d-flex.gap-3{gap:.75rem!important}
  .step .num{width:52px;height:52px;font-size:1.05rem}
  .ad-slot .ad-inner>div{font-size:.9rem}
  .win-side{width:96px}
  .wside-logo{font-size:.8rem}
  .whead b{font-size:.72rem}
  .hero .stat-box{flex:1 1 100px}
  .topbar{font-size:.66rem;padding:.32rem 0}
  .topbar .tb-l{gap:.5rem}
  .topbar .badge-live{font-size:.58rem;padding:.12rem .42rem}
  .topbar .tb-phone a{font-size:.72rem}
}