/* ============================================================
   IMRAN DEWAN — CLIENT ATTRACTION LAYER
   Loaded AFTER styles.css. Every class here is prefixed `at-`
   so it can never collide with the base design system.

   Rules of the house:
   - reuse the exact palette + neo-brutalist language
     (2.5px hard borders, hard offset shadows, Bebas + DM Sans)
   - NO filter: blur()  -> costs 24 FPS on this page
   - NO backdrop-filter -> costs 14 FPS on this page
   - hover motion only via transform / box-shadow
   - fully responsive, mobile-first
   - every hover moves nothing under prefers-reduced-motion
   ============================================================ */


/* ============================================================
   1. HERO TRUST BAR
   ============================================================ */
.at-trust{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:32px;
  opacity:0;animation:fade .8s .95s forwards;
}
.at-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border:2.5px solid var(--dk);border-radius:100px;
  background:#fff;color:var(--dk);box-shadow:3px 3px 0 var(--dk);
  white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.at-chip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dk)}
.at-chip.k{background:var(--dk);color:var(--cr);box-shadow:3px 3px 0 var(--gr)}
.at-chip.k:hover{box-shadow:6px 6px 0 var(--gr)}
.at-dot{
  width:9px;height:9px;border-radius:50%;background:var(--gr);
  border:1.5px solid var(--dk);display:inline-block;animation:pulse 2.2s infinite;
}


/* ============================================================
   2. WHY HIRE ME  (client fears, answered before they ask)
   ============================================================ */
.at-why{border-block:3px solid var(--dk);background:var(--cr)}
.at-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(20px,2.4vw,30px)}

.at-wcard{
  border:2.5px solid var(--dk);border-radius:24px;background:#fff;
  padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,32px);
  box-shadow:8px 8px 0 var(--dk);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.at-wcard:hover{transform:translate(-4px,-8px);box-shadow:14px 16px 0 var(--or)}
.at-wcard:nth-child(2):hover{box-shadow:14px 16px 0 var(--bl)}
.at-wcard:nth-child(3):hover{box-shadow:14px 16px 0 var(--gr)}

.at-ico{
  width:58px;height:58px;display:grid;place-items:center;font-size:27px;line-height:1;
  border:2.5px solid var(--dk);border-radius:16px;background:var(--sun);
  box-shadow:4px 4px 0 var(--dk);
}
.at-wcard:nth-child(2) .at-ico{background:var(--bl)}
.at-wcard:nth-child(3) .at-ico{background:var(--gr)}
.at-wcard h3{font-family:"Bebas Neue";font-size:clamp(27px,3vw,37px);line-height:1.04;
  letter-spacing:.01em;margin:22px 0 12px}
.at-wcard p{font-size:15px;line-height:1.66;color:var(--mut);flex:1}
.at-tag{
  display:inline-block;align-self:flex-start;margin-top:20px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border:2.5px solid var(--dk);border-radius:100px;background:var(--cr);
}


/* ============================================================
   3. PROCESS  (lower the barrier to actually messaging)
   ============================================================ */
.at-proc{background:var(--pu);color:var(--cr);border-block:3px solid var(--dk)}
.at-proc .head{border-bottom-color:rgba(255,244,229,.45)}
.at-proc .head .k{color:rgba(255,244,229,.82)}

.at-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:clamp(16px,2vw,24px)}
.at-step{
  background:var(--cr);color:var(--dk);border:2.5px solid var(--dk);border-radius:22px;
  padding:clamp(22px,2.6vw,32px);box-shadow:7px 7px 0 var(--dk);
  position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.at-step:hover{transform:translate(-3px,-7px);box-shadow:12px 16px 0 var(--sun)}
.at-step b{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;
  border:2.5px solid var(--dk);border-radius:50%;background:var(--gr);
  font-family:"Bebas Neue";font-size:26px;line-height:1;font-weight:400;
}
.at-step:nth-child(2) b{background:var(--or)}
.at-step:nth-child(3) b{background:var(--bl);color:#fff}
.at-step:nth-child(4) b{background:var(--sun)}
.at-step h3{font-family:"Bebas Neue";font-size:clamp(23px,2.4vw,31px);line-height:1.05;letter-spacing:.01em}
.at-step p{font-size:14.5px;line-height:1.6;color:var(--mut);margin-top:10px}

.at-reassure{
  display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:28px;background:var(--cr);color:var(--dk);
  border:2.5px solid var(--dk);border-radius:100px;padding:14px 26px;
  font-weight:700;font-size:14.5px;box-shadow:6px 6px 0 var(--dk);
}
.at-reassure i{
  font-style:normal;width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--gr);border:2px solid var(--dk);display:grid;place-items:center;
  font-size:12px;line-height:1;
}


/* ============================================================
   4. SERVICES / PACKAGES
   ============================================================ */
.at-svc{border-block:3px solid var(--dk);background:var(--cr)}
.at-grid-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.4vw,30px)}

.at-scard{
  border:2.5px solid var(--dk);border-radius:26px;background:#fff;
  box-shadow:8px 8px 0 var(--dk);padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.at-scard:hover{transform:translateY(-9px);box-shadow:8px 18px 0 var(--or)}
.at-scard:nth-child(2):hover{box-shadow:8px 18px 0 var(--pu)}
.at-scard:nth-child(3):hover{box-shadow:8px 18px 0 var(--bl)}
.at-scard.best{background:var(--cr);box-shadow:8px 8px 0 var(--or)}

.at-kicker{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
.at-scard h3{font-family:"Bebas Neue";font-size:clamp(33px,3.6vw,46px);line-height:1;letter-spacing:.01em;margin:14px 0 0}
.at-price{font-family:"Bebas Neue";font-size:clamp(42px,5vw,66px);line-height:1;margin:20px 0 0}
.at-price em{font-style:normal;color:var(--or)}
.at-price small{
  display:block;font-family:"DM Sans",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#7a7391;margin-top:10px;
}
/* local-currency equivalents — keeps the USD headline readable while still
   speaking to Nepal and India, who are the actual buyers here */
.at-cur{
  display:block;width:fit-content;font-family:"DM Sans",sans-serif;font-size:13px;
  font-weight:700;letter-spacing:.05em;color:var(--dk);background:#F1E9DA;
  border:2.5px solid var(--dk);border-radius:100px;padding:8px 16px;margin-top:13px;
}
.at-scard.best .at-cur{background:#fff}
.at-list{list-style:none;margin:24px 0 0;display:grid;gap:11px;flex:1}
.at-list li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.at-list li::before{
  content:"✓";position:absolute;left:0;top:0;font-weight:700;font-size:14px;color:var(--gr);
}
.at-btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  margin-top:28px;padding:15px 28px;border:2.5px solid var(--dk);border-radius:100px;
  background:var(--dk);color:var(--cr);font-weight:700;font-size:14.5px;
  box-shadow:5px 5px 0 var(--pu);transition:.35s var(--ease);cursor:pointer;
}
.at-btn:hover{transform:translate(-4px,-4px);box-shadow:9px 9px 0 var(--pu)}
.at-scard:nth-child(1) .at-btn{box-shadow:5px 5px 0 var(--or)}
.at-scard:nth-child(1) .at-btn:hover{box-shadow:9px 9px 0 var(--or)}
.at-scard:nth-child(3) .at-btn{box-shadow:5px 5px 0 var(--bl)}
.at-scard:nth-child(3) .at-btn:hover{box-shadow:9px 9px 0 var(--bl)}

.at-flag{
  position:absolute;top:-16px;right:22px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gr);color:var(--dk);border:2.5px solid var(--dk);border-radius:100px;
  padding:7px 15px;box-shadow:3px 3px 0 var(--dk);
}
/* "+" suffix on a counted stat (e.g. 100+) — lives here so styles.css stays untouched */
.at-plus b::after{content:"+"}

.at-fine{
  margin-top:clamp(26px,3vw,36px);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6b6480;text-align:center;
}


/* ============================================================
   5. PROOF — not promises (real live links instead of testimonials)
   ============================================================ */
.at-proof{border-block:3px solid var(--dk);background:var(--dk);color:var(--cr)}
.at-proof .head{border-bottom-color:#2f2749}
.at-proof .head .k{color:#948cba}

.at-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px)}
.at-pcard{
  border:2.5px solid var(--cr);border-radius:22px;background:#1a1330;
  padding:clamp(24px,2.6vw,30px);display:flex;flex-direction:column;
  box-shadow:7px 7px 0 var(--or);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.at-pcard:nth-child(2){box-shadow:7px 7px 0 var(--gr)}
.at-pcard:nth-child(3){box-shadow:7px 7px 0 var(--bl)}
.at-pcard:nth-child(4){box-shadow:7px 7px 0 var(--pu)}
.at-pcard:hover{transform:translate(-4px,-7px)}
.at-pcard .at-what{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#948cba;
}
.at-pcard h3{font-family:"Bebas Neue";font-size:clamp(30px,3.4vw,42px);line-height:1;margin:14px 0 12px;letter-spacing:.01em}
.at-pcard p{font-size:14.5px;line-height:1.6;color:#b6afd6;flex:1}
.at-open{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  padding:13px 22px;border:2.5px solid var(--cr);border-radius:100px;
  background:var(--cr);color:var(--dk);font-weight:700;font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;
  transition:.35s var(--ease);
}
.at-open:hover{background:var(--or);border-color:var(--or);color:var(--dk);gap:15px}
.at-open.off{background:transparent;color:#8079a8;border-color:#3d3560;cursor:default;letter-spacing:.08em}
.at-open.off:hover{gap:9px}


/* ============================================================
   6. CLOSING CONTACT CTA
   ============================================================ */
.at-cta{background:var(--or);color:var(--dk);border-block:3px solid var(--dk);text-align:center;
  padding:clamp(70px,10vw,130px) clamp(18px,3vw,32px)}
.at-cta .eyebrow{background:var(--dk);color:var(--cr);margin:0 auto 26px;transform:rotate(-2deg)}
.at-cta h2{font-family:"Bebas Neue";font-size:clamp(46px,9vw,132px);line-height:.86;max-width:15ch;margin:0 auto}
.at-cta .at-sub{max-width:58ch;margin:24px auto 0;font-size:clamp(15px,1.4vw,19px);line-height:1.62;font-weight:500}
.at-mail2{
  display:inline-block;margin-top:34px;font-family:"Bebas Neue";
  font-size:clamp(23px,3.8vw,54px);line-height:1.05;
  border-bottom:5px solid var(--dk);transition:.35s var(--ease);padding-bottom:5px;word-break:break-word;
}
.at-mail2:hover{color:#fff;border-color:#fff;letter-spacing:-.01em}

.at-check{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  max-width:960px;margin:40px auto 0;text-align:left;
}
.at-check div{
  background:var(--cr);border:2.5px solid var(--dk);border-radius:20px;
  padding:20px 22px;box-shadow:6px 6px 0 var(--dk);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.at-check div:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--dk)}
.at-check b{display:block;font-family:"Bebas Neue";font-size:clamp(24px,2.4vw,30px);line-height:1;margin-bottom:9px}
.at-check span{font-size:13.5px;line-height:1.6;color:var(--mut)}

.at-resp{
  display:inline-flex;align-items:center;gap:10px;margin-top:34px;
  background:var(--dk);color:var(--cr);border:2.5px solid var(--dk);border-radius:100px;
  padding:14px 26px;font-weight:700;font-size:13.5px;box-shadow:5px 5px 0 var(--gr);
  letter-spacing:.04em;
}
.at-resp .at-dot{border-color:var(--cr)}


/* ---- phone / WhatsApp link under the big email in #contact ---- */
.phone{display:inline-block;margin-top:20px;font-family:"Bebas Neue";
  font-size:clamp(21px,3vw,42px);letter-spacing:.02em;color:var(--dk);
  border-bottom:4px solid var(--or);padding-bottom:4px;transition:.35s var(--ease)}
.phone:hover{color:var(--pu);border-color:var(--gr)}
.phone::before{content:"WhatsApp";display:inline-block;vertical-align:middle;margin-right:13px;
  font-family:"DM Sans",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:var(--gr);color:var(--dk);border:2.5px solid var(--dk);
  border-radius:100px;padding:6px 13px;transform:translateY(-5px)}

/* backup address — deliberately quieter than the primary email */
.mail-alt{display:inline-block;margin-top:16px;font-family:"DM Sans",sans-serif;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--mut);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  transition:.3s var(--ease)}
.mail-alt::before{content:"backup  ";font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8b84a0;text-decoration:none}
.mail-alt:hover{color:var(--or)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:620px){
  .at-trust{gap:8px}
  .at-chip{font-size:10.5px;padding:8px 13px;letter-spacing:.06em}
  .at-check{grid-template-columns:1fr}
  .at-reassure{font-size:13.5px;padding:13px 20px}
  .at-flag{position:static;display:inline-block;margin-bottom:14px}
}

/* ============================================================
   ACCESSIBILITY — nothing may move on hover
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .at-chip:hover,.at-wcard:hover,.at-step:hover,.at-scard:hover,
  .at-btn:hover,.at-check div:hover,.at-pcard:hover,
  .at-open:hover,.at-mail2:hover{
    transform:none!important;
  }
  .at-trust{opacity:1!important;animation:none!important}
  .at-dot{animation:none!important}
}