/* ═══════════════════════════════════════
   Rahul Mundhra — Performance Marketing Manager
   Portfolio Website Stylesheet
   © 2026 rahulmundhra.com
═══════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
:root{
  --bg:#0B0F19;--bg2:#0E1220;--bg3:#111827;--card:#131d2e;
  --bd:#1c2b44;--bd2:#243555;
  --t1:#F0F4FF;--t2:#8899BB;--t3:#3d5070;
  --blue:#3B82F6;--purple:#8B5CF6;--green:#10B981;--gold:#F59E0B;
  --grad:linear-gradient(135deg,#3B82F6,#8B5CF6);
  --f:'Poppins',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Geist Mono',monospace;
}
body{background:var(--bg);color:var(--t1);font-family:var(--f);font-weight:400;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--grad);border-radius:2px}

/* FADE-IN ANIMATION — CSS only, no JS needed */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.5)}}
@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ALL SECTIONS ALWAYS VISIBLE — animation is purely decorative */
.anim-1{animation:fadeUp .6s .1s both}
.anim-2{animation:fadeUp .6s .2s both}
.anim-3{animation:fadeUp .6s .3s both}
.anim-4{animation:fadeUp .6s .4s both}
.anim-5{animation:fadeUp .6s .5s both}

/* JS scroll reveal */
.will-animate{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.will-animate.shown{opacity:1;transform:none}

/* Reveal animation for new sections */
.reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-item.visible{opacity:1;transform:translateY(0)}

/* UTIL */
.wrap{max-width:1180px;margin:0 auto;padding:0 6%}
.sec{padding:96px 0}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.67rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.22);padding:.28rem .85rem;border-radius:100px;margin-bottom:1rem}
.sec-h{font-size:clamp(1.85rem,3vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:.7rem}
.sec-h em{font-style:italic;font-weight:500;color:var(--t2)}
.sec-sub{font-size:.92rem;color:var(--t2);max-width:520px;line-height:1.75;margin-bottom:2.8rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.9rem;border-radius:9px;font-family:var(--f);font-size:.88rem;font-weight:600;cursor:pointer;border:none;transition:all .25s ease}
.btn-grad{background:var(--grad);color:#fff}
.btn-grad:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,130,246,.32)}
.btn-ghost{background:transparent;color:var(--t1);border:1px solid var(--bd2)}
.btn-ghost:hover{border-color:var(--blue);background:rgba(59,130,246,.07);transform:translateY(-2px)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:999;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:rgba(11,15,25,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(59,130,246,.09);transition:background .3s}
#nav.scrolled{background:rgba(11,15,25,.97);border-color:rgba(59,130,246,.15)}
.nav-logo{font-size:1rem;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{font-size:.8rem;font-weight:500;color:var(--t2);transition:color .2s}
.nav-links a:hover{color:var(--t1)}
.nav-cta{background:var(--grad)!important;color:#fff!important;padding:.44rem 1.15rem;border-radius:7px;font-weight:600!important}
.hb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hb span{width:22px;height:2px;background:var(--t1);border-radius:2px;display:block;transition:all .3s}
.mob{display:none;position:fixed;inset:66px 0 0;background:rgba(11,15,25,.98);backdrop-filter:blur(20px);z-index:998;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}
.mob.open{display:flex}
.mob a{font-size:1.2rem;font-weight:600;color:var(--t1)}
.mob a:hover{color:var(--blue)}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;padding:90px 6% 70px;position:relative;overflow:hidden}
.hero-mesh{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 65% 55% at 72% 38%,rgba(59,130,246,.1) 0%,transparent 62%),radial-gradient(ellipse 40% 40% at 18% 72%,rgba(139,92,246,.07) 0%,transparent 58%)}
.hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(59,130,246,.12) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 80%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;max-width:1180px;margin:0 auto;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.24);color:var(--blue);padding:.3rem .85rem;border-radius:100px;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.3rem;animation:slideUp .65s ease both}
.dot-blink{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 2s infinite;flex-shrink:0}
h1.hero-name{font-size:clamp(3rem,5.5vw,5.5rem);font-weight:900;letter-spacing:-.045em;line-height:.95;margin-bottom:.55rem;animation:slideUp .65s .08s both}
h1.hero-name span{display:block;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-role{font-size:1rem;font-weight:500;color:var(--t2);margin-bottom:.8rem;animation:slideUp .65s .15s both}
.hero-tag{font-size:1.45rem;font-weight:700;letter-spacing:-.025em;line-height:1.25;margin-bottom:.85rem;animation:slideUp .65s .2s both}
.hero-tag em{font-style:italic;font-weight:400;color:var(--t2)}
.hero-sub{font-size:.92rem;color:var(--t2);max-width:455px;line-height:1.8;margin-bottom:2rem;animation:slideUp .65s .26s both}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;animation:slideUp .65s .32s both}
.hero-strip{display:flex;gap:2.5rem;margin-top:2.5rem;animation:slideUp .65s .38s both}
.hs-n{font-size:1.7rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs-l{font-size:.7rem;color:var(--t2);margin-top:.1rem;font-weight:500}
.hero-photo-col{display:flex;justify-content:center;align-items:center;animation:fadeIn .8s .15s both}
.photo-frame{position:relative;width:330px;max-width:100%}
.photo-glow{position:absolute;inset:-16px;border-radius:26px;background:var(--grad);filter:blur(22px);opacity:.2;z-index:0}
.photo-ring{position:absolute;inset:-2px;border-radius:22px;background:var(--grad);opacity:.55;z-index:1}
.photo-img{position:relative;z-index:2;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:20px;border:2px solid rgba(255,255,255,.04)}
.photo-stat{position:absolute;top:24px;right:-20px;z-index:3;background:var(--card);border:1px solid var(--bd2);padding:.72rem 1rem;border-radius:13px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.ps-n{font-size:1.35rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ps-l{font-size:.6rem;color:var(--t2);margin-top:.15rem;font-weight:500}
.photo-badge{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);z-index:3;background:var(--card);border:1px solid var(--bd2);padding:.5rem 1.15rem;border-radius:100px;white-space:nowrap;font-size:.66rem;color:var(--blue);font-weight:600;letter-spacing:.08em;box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* ═══════════════════════════════════════
   MARQUEE — SKILLS
═══════════════════════════════════════ */
.marquee-outer{
  overflow:hidden;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  padding:.9rem 0;
  background:var(--bg2);
}
.marquee-track{
  display:flex;
  white-space:nowrap;
  animation:scroll-left 30s linear infinite;
}
.mq-item{
  display:inline-flex;
  align-items:center;
  gap:1.4rem;
  padding:0 1.8rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--t2);
}
.mq-item::before{
  content:'◆';
  font-size:.4rem;
  color:var(--t3);
}

/* ═══════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════ */
.about-section{
  padding:5.5rem 0;
  border-bottom:1px solid var(--bd);
  background:var(--bg3);
}
.about-sec-tag{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin-bottom:.6rem;
}
.about-sec-tag span{
  font-family:var(--mono);
  font-size:.67rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--t2);
}
.about-sec-h{
  font-family:var(--serif);
  font-size:clamp(1.9rem,4.5vw,3.2rem);
  font-weight:400;
  line-height:1.12;
  margin-top:.8rem;
  margin-bottom:0;
  max-width:680px;
  color:var(--t1);
}
.about-sec-h em{font-style:italic;color:var(--t2)}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  margin-top:3rem;
  align-items:start;
}
.about-bio p{
  font-size:.95rem;
  line-height:1.85;
  color:var(--t2);
  margin-bottom:1.1rem;
}
.about-bio strong{color:var(--t1);font-weight:600}

.skills-inline{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1.6rem;
}
.skill-pill{
  font-family:var(--mono);
  font-size:.68rem;
  padding:.32rem .8rem;
  background:rgba(59,130,246,.08);
  color:var(--t2);
  border:1px solid rgba(59,130,246,.18);
  border-radius:4px;
  transition:color .2s,background .2s,border-color .2s;
}
.skill-pill:hover{
  color:var(--t1);
  background:rgba(59,130,246,.15);
  border-color:rgba(59,130,246,.38);
}

.about-pillars{display:flex;flex-direction:column;gap:0}
.about-pillar{
  border-top:1px solid var(--bd);
  padding:1.6rem 0;
}
.about-pillar:last-child{border-bottom:1px solid var(--bd)}
.about-pillar h4{
  font-size:.92rem;
  font-weight:600;
  color:var(--t1);
  margin-bottom:.45rem;
  display:flex;align-items:center;gap:.6rem;
}
.about-pillar h4::before{
  content:'';
  display:inline-block;
  width:5px;height:5px;
  background:var(--blue);
  border-radius:50%;flex-shrink:0;
}
.about-pillar p{font-size:.88rem;color:var(--t2);line-height:1.65}

/* RESULTS */
#results{background:var(--bg2)}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.rc{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:2rem;position:relative;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.rc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.07),rgba(139,92,246,.07));opacity:0;transition:opacity .3s}
.rc:hover{border-color:rgba(59,130,246,.44);transform:translateY(-6px);box-shadow:0 18px 44px rgba(59,130,246,.1)}
.rc:hover::before{opacity:1}
.rc-icon{width:44px;height:44px;border-radius:10px;background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.18);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.1rem}
.rc-num{font-size:2.8rem;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.3rem}
.rc-label{font-size:.94rem;font-weight:700;color:var(--t1);margin-bottom:.3rem}
.rc-sub{font-size:.77rem;color:var(--t2);line-height:1.55;position:relative;z-index:1}

/* ── Results: Tablet (2-col) ── */
@media (max-width: 768px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .rc {
    padding: 1.5rem;
  }
  .rc-num {
    font-size: 2.2rem;
  }
}

/* ── Results: Mobile (1-col) ── */
@media (max-width: 540px) {
  .res-grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
  .rc {
    overflow: visible;
    padding: 1.25rem;
    border-radius: 12px;
  }
  .rc-num {
    font-size: 2rem;
    white-space: nowrap;
  }
  .rc-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .rc-label { font-size: 0.88rem; }
  .rc-sub   { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════
   CLIENTS — Fixed: aspect ratio + smooth GPU scroll
═══════════════════════════════════════ */
#clients {
  background: #fff;
  padding: 60px 0;
}
.clients-title {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 2rem;
}

/* Mask container — hides overflow & fades edges */
.logos-outer {
  overflow: hidden;
  position: relative;
}
.logos-outer::before,
.logos-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}
.logos-outer::before {
  left: 0;
  background: linear-gradient(90deg, #fff 40%, transparent);
}
.logos-outer::after {
  right: 0;
  background: linear-gradient(270deg, #fff 40%, transparent);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: logos-marquee 18s linear infinite;
}
.logos-track:hover {
  animation-play-state: paused;
}

@keyframes logos-marquee {
  0%   { transform: translateX(0)     translateZ(0); }
  100% { transform: translateX(-50%)  translateZ(0); }
}

.logo-box {
  flex-shrink: 0;
  width: 160px;
  height: 72px;
  padding: 14px 20px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .28s ease, transform .25s ease, box-shadow .25s ease;
}
.logo-box:hover {
  border-color: #93C5FD;
  transform: scale(1.06);
  box-shadow: 0 4px 18px rgba(59,130,246,.2);
}
.logo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .logo-box {
    width: 130px;
    height: 60px;
    padding: 12px 16px;
  }
  .logos-outer::before,
  .logos-outer::after {
    width: 60px;
  }
}

/* CASE STUDIES */
#cases{background:var(--bg3)}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cs-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s}
.cs-card:hover{border-color:rgba(59,130,246,.44);transform:translateY(-7px);box-shadow:0 24px 56px rgba(0,0,0,.38)}
.cs-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg2);position:relative}
.cs-img img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s}
.cs-card:hover .cs-img img{transform:scale(1.06)}
.cs-badge{position:absolute;top:10px;left:10px;color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.24rem .65rem;border-radius:5px}
.cs-body{padding:1.4rem}
.cs-brand{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:.35rem}
.cs-title{font-size:.94rem;font-weight:700;line-height:1.3;margin-bottom:.4rem;color:var(--t1)}
.cs-desc{font-size:.76rem;color:var(--t2);line-height:1.6;margin-bottom:1rem}
.cs-kpis{display:flex;gap:.45rem;flex-wrap:wrap}
.kpi{flex:1;min-width:62px;border-radius:8px;padding:.55rem .45rem;border-width:1px;border-style:solid;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.kpi-n{font-size:1.15rem;font-weight:900;line-height:1}
.kpi-l{font-size:.55rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t2);text-align:center;line-height:1.3}

/* ═══════════════════════════════════════
   SUPERPOWERS SECTION
═══════════════════════════════════════ */
.superpowers-section{
  padding:5.5rem 0;
  border-bottom:1px solid var(--bd);
  background:var(--bg);
}
.powers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--bd);
  margin-top:3rem;
}
.power-card{
  padding:2.2rem 1.8rem;
  border-right:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  transition:background .2s;
}
.power-card:nth-child(3),
.power-card:nth-child(6){border-right:none}
.power-card:nth-child(4),
.power-card:nth-child(5),
.power-card:nth-child(6){border-bottom:none}
.power-card:hover{background:var(--bg3)}
.power-num{
  font-family:var(--mono);
  font-size:.63rem;
  color:var(--t3);
  margin-bottom:1rem;
  letter-spacing:.1em;
}
.power-card h3{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:400;
  margin-bottom:.7rem;
  color:var(--t1);
}
.power-card p{font-size:.85rem;color:var(--t2);line-height:1.65}

/* ═══════════════════════════════════════
   INDUSTRIES MARQUEE
═══════════════════════════════════════ */
.ind-outer{
  overflow:hidden;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  padding:1rem 0;
  background:var(--bg2);
}
.ind-track{
  display:flex;
  white-space:nowrap;
  animation:scroll-left 20s linear infinite;
}
.ind-track span{
  display:inline-block;
  padding:0 1.8rem;
  font-family:var(--serif);
  font-size:1.4rem;
  font-style:italic;
  color:var(--t1);
}
.ind-track span.ind-dot{
  font-style:normal;
  font-family:var(--mono);
  font-size:.45rem;
  color:var(--t3);
  vertical-align:middle;
}

/* PROOF */
#proof{background:var(--bg2)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pf-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:border-color .3s,transform .3s}
.pf-card:hover{border-color:rgba(59,130,246,.38);transform:translateY(-4px)}
.pf-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg3)}
.pf-img img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s}
.pf-card:hover .pf-img img{transform:scale(1.04)}
.pf-lbl{padding:.8rem 1rem;font-size:.75rem;font-weight:500;color:var(--t2)}

/* SERVICES */
#services{background:var(--bg3)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.svc-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:2rem;position:relative;overflow:hidden;transition:border-color .3s,transform .25s,box-shadow .3s}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.svc-card:hover{border-color:rgba(59,130,246,.4);transform:translateY(-5px);box-shadow:0 14px 36px rgba(0,0,0,.28)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-icon{width:50px;height:50px;border-radius:12px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.25rem}
.svc-title{font-size:1rem;font-weight:700;margin-bottom:.45rem}
.svc-desc{font-size:.8rem;color:var(--t2);line-height:1.6}

/* ═══════════════════════════════════════
   CERTIFICATIONS SECTION
═══════════════════════════════════════ */
.cert-section{
  padding:4rem 0 5rem;
  border-bottom:1px solid var(--bd);
  background:var(--bg3);
}
.cert-section .wrap{
  margin-bottom:2rem;
  text-align:center;
}

/* Scrolling cert marquee — mirrors logos section */
.cert-outer{
  overflow:hidden;
  position:relative;
}
.cert-outer::before,
.cert-outer::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:110px;
  z-index:2;
  pointer-events:none;
}
.cert-outer::before{
  left:0;
  background:linear-gradient(90deg,var(--bg3) 40%,transparent);
}
.cert-outer::after{
  right:0;
  background:linear-gradient(270deg,var(--bg3) 40%,transparent);
}
.cert-track{
  display:flex;
  align-items:center;
  gap:1.5rem;
  width:max-content;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
  animation:cert-marquee 24s linear infinite;
}
.cert-track:hover{
  animation-play-state:paused;
}
@keyframes cert-marquee{
  0%  {transform:translateX(0) translateZ(0)}
  100%{transform:translateX(-50%) translateZ(0)}
}
.cert-box{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  padding:1.2rem 1.4rem;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  min-width:140px;
  transition:border-color .28s,transform .25s,box-shadow .25s;
  cursor:default;
}
.cert-box:hover{
  border-color:rgba(59,130,246,.4);
  transform:translateY(-5px);
  box-shadow:0 8px 24px rgba(59,130,246,.13);
}
.cert-box img{
  width:90px;
  height:90px;
  object-fit:contain;
  border-radius:50%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.cert-box span{
  font-size:.6rem;
  font-weight:600;
  color:var(--t2);
  text-align:center;
  max-width:110px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.4;
}

/* Case studies "See More" button */
.cs-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:2.8rem;
}
.cs-more-btn{
  font-size:.88rem;
  padding:.85rem 2.2rem;
  gap:.5rem;
}
.lang-row{margin-top:3rem}
.lang-label{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--t2);
  margin-bottom:.8rem;
}
.lang-list{display:flex;gap:.5rem;flex-wrap:wrap}

/* CTA */
#cta{background:var(--bg);padding:110px 6%;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:320px;border-radius:50%;background:radial-gradient(ellipse,rgba(59,130,246,.09) 0%,transparent 65%);pointer-events:none}
.cta-in{position:relative;z-index:1;max-width:660px;margin:0 auto}
.cta-h{font-size:clamp(2.2rem,4vw,3.5rem);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin-bottom:.9rem}
.cta-h span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-sub{font-size:.95rem;color:var(--t2);margin-bottom:2.3rem;line-height:1.7}
.cta-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem}
.testi-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:1.6rem;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.35);border-color:rgba(59,130,246,.38)}
.testi-top{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.testi-avatar-wrap{position:relative;flex-shrink:0;cursor:pointer;border-radius:50%;overflow:hidden;width:56px;height:56px;border:2px solid rgba(59,130,246,.35);transition:border-color .25s}
.testi-avatar-wrap:hover{border-color:var(--blue)}
.testi-avatar-wrap:hover .testi-zoom-hint{opacity:1}
.testi-avatar{width:56px;height:56px;object-fit:cover;border-radius:50%;display:block}
.testi-zoom-hint{position:absolute;inset:0;background:rgba(11,15,25,.6);display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.85rem;opacity:0;transition:opacity .2s}
.testi-meta{flex:1;min-width:0}
.testi-name{font-size:.88rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testi-role{font-size:.7rem;color:var(--t2);line-height:1.4;margin-top:.15rem}
.testi-relation{font-size:.65rem;color:var(--blue);margin-top:.3rem;font-weight:500}
.testi-quote{font-size:.82rem;color:var(--t2);line-height:1.65;font-style:italic;border-left:2px solid rgba(59,130,246,.35);padding-left:.85rem;margin:0}

/* ═══════════════════════════════════════
   UNIVERSAL IMAGE MODAL
═══════════════════════════════════════ */
.img-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(5,8,18,.88);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:1.5rem}
.img-modal.active{display:flex}
.img-modal-box{position:relative;max-width:860px;width:100%;background:var(--bg3);border:1px solid var(--bd2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.img-modal-box img{width:100%;height:auto;display:block}
.img-modal-caption{margin:0;padding:.7rem 1rem;font-size:.78rem;color:var(--t2);border-top:1px solid var(--bd);background:var(--bg2)}
.img-modal-close{position:absolute;top:.6rem;right:.7rem;z-index:2;background:rgba(11,15,25,.75);border:1px solid var(--bd2);color:var(--t1);width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.img-modal-close:hover{background:rgba(239,68,68,.7)}

/* CS Zoom cursor */
.cs-zoom{cursor:zoom-in}
.cs-zoom::after{content:'🔍';position:absolute;bottom:8px;right:10px;background:rgba(11,15,25,.7);color:#fff;font-size:.7rem;padding:.2rem .5rem;border-radius:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.cs-card:hover .cs-zoom::after{opacity:1}

/* Case study full modal */
.cs-modal-inner{position:relative;max-width:980px;width:100%;background:var(--bg3);border:1px solid var(--bd2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.cs-modal-inner img{width:100%;height:auto;display:block}

/* ═══════════════════════════════════════
   GLOBAL AVAILABILITY CARDS
═══════════════════════════════════════ */
.global-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:0}
.global-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1.6rem 1.2rem;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s}
.global-card:hover{border-color:rgba(59,130,246,.42);transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.global-icon{font-size:1.8rem;display:block;margin-bottom:.75rem}
.global-title{font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:.4rem}
.global-sub{font-size:.76rem;color:var(--t2);line-height:1.55}

/* ═══════════════════════════════════════
   CONTACT SECTION (from rahul_mundhra.html style)
═══════════════════════════════════════ */
.contact-section{
  padding:8rem 6% 6rem;
  text-align:center;
  border-top:1px solid var(--bd);
  background:var(--bg);
}
.contact-big{
  font-family:var(--serif);
  font-size:clamp(3rem,9vw,7rem);
  font-weight:400;
  line-height:1.03;
  margin-bottom:2.5rem;
  color:var(--t1);
}
.contact-big em{
  font-style:italic;
  color:var(--t2);
}
.contact-big a{
  border-bottom:3px solid var(--bd2);
  transition:border-color .2s,color .2s;
  color:var(--t1);
}
.contact-big a:hover{
  border-color:var(--blue);
  color:var(--blue);
}
.contact-btns{
  display:flex;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.contact-btn{
  display:inline-block;
  font-size:.82rem;
  font-weight:500;
  padding:.65rem 1.5rem;
  border-radius:100px;
  border:1px solid var(--bd2);
  color:var(--t1);
  transition:all .2s;
}
.contact-btn:hover{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  transform:translateY(-2px);
}
.contact-note{
  font-size:.88rem;
  color:var(--t2);
  max-width:420px;
  margin:0 auto;
  line-height:1.7;
}

/* ═══════════════════════════════════════
   CONTACT CENTERED ICONS (legacy)
═══════════════════════════════════════ */
.contact-icons{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.contact-icon-btn{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:.8rem 1.4rem;min-width:300px;max-width:420px;width:100%;transition:border-color .25s,background .25s,transform .2s}
.contact-icon-btn:hover{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.06);transform:translateY(-2px)}
.cib-icon{font-size:1.1rem;flex-shrink:0}
.cib-label{font-size:.84rem;color:var(--t2);transition:color .2s}
.contact-icon-btn:hover .cib-label{color:var(--t1)}

footer{background:var(--bg);border-top:1px solid var(--bd);padding:1.6rem 6%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem}
footer p{font-size:.68rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-photo-col{order:-1}
  .photo-frame{width:210px}
  .photo-stat{display:none}
  .hero-sub{margin:0 auto 2rem}
  .hero-btns,.hero-strip{justify-content:center}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .powers-grid{grid-template-columns:1fr 1fr}
  .power-card:nth-child(3){border-right:none}
  .power-card:nth-child(2){border-right:none}
  .power-card:nth-child(3),.power-card:nth-child(4){border-bottom:1px solid var(--bd)}
  .power-card:nth-child(5),.power-card:nth-child(6){border-bottom:none}
  .global-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:720px){
  #nav{padding:0 4%}
  .nav-links{display:none}
  .hb{display:flex}
  .cs-grid,.svc-grid,.pf-grid{grid-template-columns:1fr 1fr}
  .about-section,.superpowers-section,.cert-section{padding:4rem 0}
  .contact-section{padding:5rem 4% 4rem}
  .contact-big{font-size:clamp(2.5rem,7vw,5rem)}
}
@media(max-width:500px){
  .res-grid,.cs-grid,.svc-grid,.pf-grid{grid-template-columns:1fr}
  .powers-grid{grid-template-columns:1fr}
  .power-card{border-right:none!important;border-bottom:1px solid var(--bd)!important}
  .power-card:last-child{border-bottom:none!important}
  .hero-btns,.cta-btns{flex-direction:column;align-items:stretch;width:100%}
  .hero-btns .btn,.cta-btns .btn{justify-content:center}
  .testi-grid{grid-template-columns:1fr}
  .global-grid{grid-template-columns:1fr}
  .contact-icon-btn{min-width:0;width:100%}
  .contact-big{font-size:2.6rem}
}
@media(max-width:900px){
  .testi-grid{grid-template-columns:1fr 1fr}
  .global-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .testi-grid{grid-template-columns:1fr}
  .global-grid{grid-template-columns:1fr}
  .contact-icon-btn{min-width:0;width:100%}
}