:root{
  --bg:#ffffff;--bg-soft:#f6f8ff;--bg-muted:#edf0fc;
  --text:#0c1124;--text-mid:#3d4a6a;--text-dim:#7a8aaa;--border:#dce3f4;
  --blue:#1a55ff;--blue-dk:#0935cc;--blue-lt:#e8edff;
  --dark:#06101f;--dark2:#0c1c3a;--dark-t:#b8ccee;
  --cyan:#00bdff;--amber:#FF9900;
  --sh-sm:0 2px 14px rgba(26,85,255,.07);
  --sh-md:0 8px 38px rgba(26,85,255,.13);
  --sh-lg:0 22px 70px rgba(26,85,255,.16);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.68;font-size:16px}

/* ─── NAV ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:66px;padding:0 6%;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);transition:height .3s}
.nav-logo{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:800;
  letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo .ac{color:var(--blue)}
.dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.2);animation:dp 2s ease-in-out infinite}
@keyframes dp{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.04)}}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-family:'Sora',sans-serif;font-size:.875rem;font-weight:600;
  letter-spacing:.06em;color:var(--text-mid);text-decoration:none;text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.nav-cta{padding:8px 18px;border-radius:8px;background:var(--blue);color:#fff;
  font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  letter-spacing:.04em;text-decoration:none;text-transform:uppercase;
  box-shadow:0 4px 16px rgba(26,85,255,.28);transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--blue-dk);transform:translateY(-1px)}

/* ─── HERO ─── */
#hero{min-height:100vh;padding:100px 6% 70px;display:flex;align-items:center;
  background:linear-gradient(148deg,#fff 0%,#eff4ff 55%,#e4eeff 100%);
  position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(26,85,255,.1) 1.5px,transparent 1.5px);
  background-size:34px 34px;pointer-events:none}
#hero::after{content:'';position:absolute;top:-160px;right:-160px;
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,85,255,.09) 0%,transparent 65%);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;
  gap:52px;align-items:center;max-width:1240px;margin:0 auto;width:100%}

.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:3px 11px;border-radius:100px;
  background:var(--blue-lt);border:1px solid rgba(26,85,255,.25);
  font-family:'Sora',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:.09em;color:var(--blue);text-transform:uppercase;margin-bottom:22px}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 3px rgba(26,85,255,.2);animation:dp 2s ease-in-out infinite}

h1.hn{font-family:'Sora',sans-serif;font-size:clamp(2rem,4vw,3.5rem);
  font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--text)}
h1.hn .grad{background:linear-gradient(135deg,var(--blue) 30%,var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-sub{margin-top:18px;font-size:1rem;font-weight:400;color:var(--text-mid);line-height:1.78;max-width:460px}
.hero-sub strong{color:var(--text);font-weight:700}

.hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.chip{padding:5px 12px;border-radius:100px;background:#fff;border:1.5px solid var(--border);
  font-size:0.8125rem;font-weight:500;color:var(--text-mid);box-shadow:var(--sh-sm);transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--blue);color:var(--blue)}

.hero-btns{display:flex;gap:11px;margin-top:30px;flex-wrap:wrap}
.btn-p{padding:12px 28px;border-radius:9px;background:var(--blue);color:#fff;
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  text-decoration:none;box-shadow:0 6px 22px rgba(26,85,255,.32);transition:transform .2s,box-shadow .2s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(26,85,255,.42)}
.btn-o{padding:12px 28px;border-radius:9px;background:#fff;color:var(--text);
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  text-decoration:none;border:2px solid var(--border);transition:border-color .2s,color .2s}
.btn-o:hover{border-color:var(--blue);color:var(--blue)}

/* ─── HERO RIGHT PANEL ─── */
.hero-right{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center}
.profile-wrap{position:relative;width:400px;height:400px;flex-shrink:0}
.ring-a{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(26,85,255,.2);animation:spin 22s linear infinite}
.ring-a::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.ring-b{position:absolute;inset:17px;border-radius:50%;border:1px solid rgba(26,85,255,.1);animation:spin 15s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.pic{position:absolute;inset:46px;border-radius:50%;overflow:hidden;
  border:9px solid #fff;box-shadow:0 16px 50px rgba(26,85,255,.2),0 3px 12px rgba(0,0,0,.08)}
.pic img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:brightness(1.03) contrast(1.04)}
.fc{position:absolute;z-index:5;padding:8px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:8px;animation:flt 4s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fc-n{font-family:'Sora',sans-serif;font-size:1.125rem;font-weight:800;color:var(--blue);line-height:1}
/* ─── HERO EXPERTISE STRIP ─── */
.hero-expertise{width:100%;max-width:360px;padding:16px 18px;border-radius:var(--r);
  background:#fff;border:1.5px solid var(--border);box-shadow:var(--sh-sm)}
.hex-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:11px}
.hex-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hex-item{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 4px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--border);
  transition:border-color .2s,background .2s}
.hex-item:hover{border-color:rgba(26,85,255,.28);background:var(--blue-lt)}
.hex-item span{font-size:1rem;font-weight:500;color:var(--text-mid);text-align:center;line-height:1.3}

.fc-l{font-size:1rem;color:var(--text-dim);font-weight:500;margin-top:1px}

/* ─── INFO BANNER ─── */
.info-banner{width:320px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(145deg,var(--dark) 0%,var(--dark2) 100%);
  border:1px solid rgba(26,85,255,.2);box-shadow:var(--sh-lg)}
.ib-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:11px}
.ib-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(26,85,255,.45);flex-shrink:0}
.ib-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ib-name{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.ib-role{font-size:1rem;color:var(--dark-t);margin-top:2px}
.ib-status{margin-left:auto;display:flex;align-items:center;gap:5px;
  font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:600;color:#4ade80}
.ib-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 6px #22c55e;animation:dp 2s ease-in-out infinite}
.ib-skills{padding:14px 18px;display:flex;flex-direction:column;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.ib-skill{display:flex;align-items:center;gap:9px}
.ib-skill-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0;
  background:rgba(26,85,255,.14);border:1px solid rgba(26,85,255,.24);
  display:flex;align-items:center;justify-content:center}
.ib-skill-name{font-size:1rem;font-weight:500;color:#dce8ff;flex-shrink:0;width:96px}
.ib-bar{flex:1;height:3px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.ib-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.ib-pct{font-size:1rem;color:var(--dark-t);flex-shrink:0;width:28px;text-align:right}
.ib-stats{padding:13px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ib-stat{text-align:center;padding:8px 4px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.ib-stat-n{font-family:'Sora',sans-serif;font-size:1.125rem;font-weight:800;color:var(--cyan);line-height:1}
.ib-stat-l{font-size:1rem;color:var(--dark-t);margin-top:3px;line-height:1.2}

/* ─── STATS BAR (animated counters) ─── */
#stats{padding:50px 6%;background:var(--dark)}
.stats-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.st-item{text-align:center;padding:16px;border-right:1px solid rgba(255,255,255,.07)}
.st-item:last-child{border-right:none}
.st-big{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.st-big span{color:var(--cyan)}
.st-desc{font-size:1rem;color:var(--dark-t);margin-top:7px;font-weight:400}

/* ─── SECTION HELPERS ─── */
section{position:relative}
.container{max-width:1240px;margin:0 auto;padding:0 6%}
.sp{padding:104px 0}
.sh{text-align:center;margin-bottom:58px}
.ey{display:inline-block;font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  letter-spacing:.15em;color:var(--blue);text-transform:uppercase;margin-bottom:12px;position:relative}
.ey::before,.ey::after{content:'';position:absolute;top:50%;width:20px;height:1.5px;background:var(--blue);opacity:.4}
.ey::before{right:calc(100% + 8px)}.ey::after{left:calc(100% + 8px)}
h2.st{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
h2.st .grad{background:linear-gradient(135deg,var(--blue) 30%,var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ss{margin-top:13px;font-size:1rem;color:var(--text-mid);max-width:500px;margin-left:auto;margin-right:auto;line-height:1.76}
.dk h2.st{color:#fff}.dk .ss{color:var(--dark-t)}.dk .ey{color:var(--cyan)}
.dk .ey::before,.dk .ey::after{background:var(--cyan)}

/* ─── SERVICES ─── */
#services{background:var(--bg)}
/* 3-col grid — profile card takes 1 col on the right, service cards fill left */
.services-layout{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.svc-card{padding:28px 24px;border-radius:var(--r);background:#fff;border:1.5px solid var(--border);
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:rgba(26,85,255,.28)}
.svc-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0;transition:opacity .3s}
.svc-card:hover::after{opacity:1}
.si{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-lt);margin-bottom:16px;border:1.5px solid rgba(26,85,255,.16)}
.snum{position:absolute;top:16px;right:18px;font-family:'Sora',sans-serif;font-size:1rem;
  font-weight:800;color:rgba(26,85,255,.04);line-height:1;pointer-events:none}
.stit{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:700;
  letter-spacing:-.02em;color:var(--text);margin-bottom:8px}
.sd{font-size:1rem;color:var(--text-mid);line-height:1.72;margin-bottom:14px}
.sl{list-style:none;display:flex;flex-direction:column;gap:6px}
.sl li{font-size:1rem;color:var(--text-mid);display:flex;align-items:center;gap:8px}
.sl li::before{content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.stag{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:100px;
  background:var(--blue-lt);border:1px solid rgba(26,85,255,.18);
  font-family:'Sora',sans-serif;font-size:0.8125rem !important;font-size:1rem;font-weight:700;
  color:var(--blue);letter-spacing:.07em;text-transform:uppercase}
.svc-card.wide{grid-column:span 2}
.wi{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}

/* Sticky profile card in services section */
.svc-profile-card{
  position:sticky;top:86px;
  border-radius:var(--r);overflow:hidden;
  background:linear-gradient(145deg,var(--dark),#0e1d3e);
  border:1px solid rgba(26,85,255,.22);box-shadow:var(--sh-lg);
}
.spc-img{width:100%;height:220px;overflow:hidden;position:relative}
.spc-img-wrap{position:relative}
.spc-name-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.spc-avatar{width:52px;height:52px;flex-shrink:0;border-radius:50%;overflow:hidden;
  border:2.5px solid rgba(26,85,255,.35);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.spc-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.spc-img img{width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:brightness(.92) contrast(1.05) saturate(.85)}
.spc-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,var(--dark),transparent)}
.spc-body{padding:20px 18px}
.spc-name{font-family:'Sora',sans-serif;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.spc-role{font-size:.8rem;color:var(--dark-t);margin-top:4px}
.spc-divider{height:1px;background:rgba(255,255,255,.07);margin:14px 0}
.spc-avail{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:#4ade80}
.spc-avail::before{content:'';width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px #22c55e;animation:dp 2s ease-in-out infinite}
.spc-skills{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.spc-skill-row{display:flex;align-items:center;gap:8px}
.spc-skill-lbl{font-size:.75rem;font-weight:500;color:#b8d0f0;flex-shrink:0;width:76px}
.spc-bar{flex:1;height:3px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.spc-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.spc-pct{font-size:.72rem;color:var(--dark-t);flex-shrink:0;width:26px;text-align:right}
.spc-cta{display:block;margin-top:16px;padding:9px;border-radius:9px;
  background:var(--blue);color:#fff;font-family:'Sora',sans-serif;
  font-size:.82rem;font-weight:700;text-align:center;text-decoration:none;
  box-shadow:0 4px 14px rgba(26,85,255,.3);transition:background .2s,transform .2s}
.spc-cta:hover{background:var(--blue-dk);transform:translateY(-1px)}
.spc-links{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:8px}
.spc-link{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  font-size:.75rem;font-weight:600;color:#b8d0f0;text-decoration:none;
  transition:border-color .2s,color .2s}
.spc-link:hover{border-color:rgba(26,85,255,.5);color:#fff}

/* ─── PROCESS ─── */
#process{background:var(--dark)}
.pt{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:58px}
.pt::before{content:'';position:absolute;top:31px;left:10%;right:10%;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),var(--blue),transparent)}
.ps{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.ps-n{width:62px;height:62px;border-radius:50%;z-index:1;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;background:var(--dark);
  border:2px solid var(--blue);box-shadow:0 0 20px rgba(26,85,255,.26)}
.ps-t{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  color:#fff;letter-spacing:-.01em;margin-bottom:6px}
.ps-d{font-size:1rem;color:var(--dark-t);line-height:1.58}

/* ─── WHY ME ─── */
#why{background:var(--bg-soft)}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:stretch}
.wvb{border-radius:20px;background:linear-gradient(145deg,var(--dark),#0c1c40);
  border:1px solid rgba(26,85,255,.2);
  box-shadow:var(--sh-lg);position:relative;overflow:hidden;
  display:flex;flex-direction:column}
.wvb::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(26,85,255,.13) 1.5px,transparent 1.5px);
  background-size:26px 26px;pointer-events:none}
/* Portrait image top */
.wvb-img{width:100%;height:220px;overflow:hidden;position:relative;flex-shrink:0}
.wvb-img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:brightness(.85) contrast(1.05) saturate(.75)}
.wvb-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--dark) 100%)}
.wvb-body{padding:28px;flex:1;position:relative;z-index:1}
.wvb-title{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:800;
  color:#fff;letter-spacing:-.03em}
.wvb-sub{font-size:1rem;color:var(--dark-t);margin-top:5px}
/* Metrics grid inside why box */
.wvb-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}

.wvb-bars{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.wvb-bar-row{display:flex;align-items:center;gap:9px}
.wvb-bar-lbl{font-size:1rem;font-weight:500;color:var(--dark-t);flex-shrink:0;width:120px}
.wvb-bar-track{flex:1;height:4px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.wvb-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.wvb-bar-pct{font-size:1rem;color:var(--cyan);flex-shrink:0;width:28px;text-align:right;font-weight:600}
.wvb-quote{margin-top:16px;padding:12px 14px;border-radius:9px;background:rgba(255,255,255,.04);
  border-left:3px solid var(--blue);font-size:1rem;color:var(--dark-t);font-style:italic;line-height:1.6}
.wvb-cite{display:block;margin-top:5px;font-size:1rem;color:var(--cyan);font-style:normal;font-weight:600}
.wvb-m{padding:14px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-align:center}
.wvb-m-n{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:800;
  color:var(--cyan);line-height:1;letter-spacing:-.03em}
.wvb-m-l{font-size:1rem;color:var(--dark-t);margin-top:4px;line-height:1.3}
.wchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.wchip{padding:4px 10px;border-radius:100px;background:rgba(26,85,255,.13);
  border:1px solid rgba(26,85,255,.26);font-size:0.8125rem;font-weight:500;color:#a4beff}

/* Why items on right */
.wl{display:flex;flex-direction:column;gap:14px}
.wi2{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:12px;
  background:#fff;border:1.5px solid var(--border);transition:border-color .3s,transform .3s,box-shadow .3s}
.wi2:hover{border-color:rgba(26,85,255,.26);transform:translateX(5px);box-shadow:var(--sh-sm)}
.wic{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--blue-lt);
  border:1.5px solid rgba(26,85,255,.16);display:flex;align-items:center;justify-content:center}
.wt h4{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:-.01em;color:var(--text);margin-bottom:4px}
.wt p{font-size:1rem;color:var(--text-mid);line-height:1.64}

/* ─── PORTFOLIO IMAGES ─── */
#portfolio{background:var(--bg-muted)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.port-card{border-radius:var(--r);overflow:hidden;position:relative;
  border:1.5px solid var(--border);display:flex;flex-direction:column;
  box-shadow:var(--sh-sm);transition:transform .3s,box-shadow .3s;background:#fff}
.port-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.port-card img{width:100%;height:210px;object-fit:cover;display:block;
  transition:transform .4s}
.port-card:hover img{transform:scale(1.04)}
.port-card-body{padding:16px 18px;background:#fff;flex:1}
.port-cat{font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.port-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  color:var(--text);letter-spacing:-.01em}
.port-desc{font-size:1rem;color:var(--text-mid);margin-top:4px;line-height:1.6}
.port-tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font-size:0.8125rem;font-weight:600;color:var(--blue);
  text-decoration:none;cursor:pointer;transition:gap .2s}
.port-tag:hover{gap:9px}
.port-tag svg{flex-shrink:0}
/* Wide card */


/* ─── AMAZON ─── */
#amazon{background:var(--dark)}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch}
.al{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:24px}
.al li{display:flex;align-items:center;gap:11px;font-size:1rem;color:var(--dark-t);
  padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.05)}
.al li:last-child{border-bottom:none}
.ai{width:32px;height:32px;border-radius:8px;flex-shrink:0;background:rgba(255,153,0,.09);
  border:1px solid rgba(255,153,0,.2);display:flex;align-items:center;justify-content:center}
.abadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.abadge{padding:4px 10px;border-radius:100px;background:rgba(255,153,0,.07);
  border:1px solid rgba(255,153,0,.17);font-size:0.8125rem;font-weight:600;color:#ffb83f;
  display:flex;align-items:center;gap:5px}
.abadge::before{content:'';width:5px;height:5px;border-radius:50%;background:#FF9900}
.acard{border-radius:16px;overflow:hidden;background:var(--dark2);
  border:1px solid rgba(255,153,0,.13);box-shadow:0 20px 52px rgba(0,0,0,.36);display:flex;flex-direction:column}
.acard-img{width:100%;height:160px;overflow:hidden;flex-shrink:0}
.acard-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.1)}
.acard-img::after{content:''}
.acard-top{padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.05)}
.awm{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;
  color:#FF9900;letter-spacing:-.03em}
.atag{font-size:1rem;color:var(--dark-t);margin-top:4px}
.am{display:grid;grid-template-columns:1fr 1fr}
.amx{padding:16px 18px;border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:4px}
.amx:nth-child(2n){border-right:none}
.amx:nth-child(3),.amx:nth-child(4){border-bottom:none}
.amx-n{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:800;color:#FF9900;line-height:1;letter-spacing:-.03em}
.amx-l{font-size:1rem;color:var(--dark-t);margin-top:5px}
.atst{margin:16px 24px 24px;padding:14px 16px;border-radius:10px;
  background:rgba(255,153,0,.05);border-left:3px solid #FF9900}
.atst p{font-size:1rem;color:var(--dark-t);line-height:1.72;font-style:italic}
.atst cite{font-size:1rem;color:#FF9900;font-weight:600;font-style:normal;display:block;margin-top:6px}

/* ─── SKILLS ─── */
#skills{background:var(--bg-muted);overflow:hidden}
.mt{overflow:hidden;margin:13px 0}
.mr{display:flex;gap:11px;width:max-content;animation:mq 28s linear infinite}
.mr.rv{animation-direction:reverse;animation-duration:22s}
@keyframes mq{to{transform:translateX(-50%)}}
.spill{flex-shrink:0;padding:7px 14px;border-radius:100px;background:#fff;
  border:1.5px solid var(--border);font-size:0.8125rem;font-weight:500;color:var(--text-mid);
  white-space:nowrap;display:flex;align-items:center;gap:7px;box-shadow:var(--sh-sm)}
.spill svg{flex-shrink:0}


/* ─── CONTACT PRO ─── */
.contact-pro{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.cp-card{border-radius:18px;overflow:hidden;
  background:linear-gradient(145deg,var(--dark),#0e1d48);
  border:1px solid rgba(26,85,255,.22);box-shadow:var(--sh-lg)}
.cp-card-inner{padding:36px 32px}
.cp-available{display:inline-flex;align-items:center;gap:7px;
  font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  color:#4ade80;letter-spacing:.08em;margin-bottom:20px}
.cp-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px #22c55e;animation:dp 2s ease-in-out infinite;flex-shrink:0}
.cp-heading{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:800;
  color:#fff;line-height:1.15;letter-spacing:-.03em;margin-bottom:10px}
.cp-sub{font-size:1rem;color:var(--dark-t);line-height:1.72;margin-bottom:24px}
.cp-contact-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.cp-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.cp-row:hover{background:rgba(26,85,255,.2);border-color:rgba(26,85,255,.45)}
.cp-row-icon{width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:rgba(26,85,255,.25);border:1px solid rgba(26,85,255,.35);
  display:flex;align-items:center;justify-content:center}
.cp-row-body{flex:1}
.cp-row-lbl{font-size:0.8125rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dark-t);font-weight:600;font-family:'Sora',sans-serif}
.cp-row-val{font-size:1rem;font-weight:600;color:#fff;margin-top:2px}
.cp-arrow{flex-shrink:0}
.cp-btns{display:flex;gap:10px}
.cp-btn-primary{flex:1;padding:12px 20px;border-radius:9px;background:var(--blue);color:#fff;
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  text-align:center;text-decoration:none;
  box-shadow:0 4px 16px rgba(26,85,255,.35);transition:background .2s,transform .2s}
.cp-btn-primary:hover{background:var(--blue-dk);transform:translateY(-1px)}
.cp-btn-secondary{flex:1;padding:12px 20px;border-radius:9px;background:rgba(255,255,255,.07);
  color:#fff;font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  text-align:center;text-decoration:none;border:1px solid rgba(255,255,255,.14);
  transition:background .2s,border-color .2s}
.cp-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.cp-right{display:flex;flex-direction:column;gap:14px}
.cp-info-card{padding:20px 22px;border-radius:14px;background:#fff;
  border:1.5px solid var(--border);box-shadow:var(--sh-sm)}
.cp-info-title{display:flex;align-items:center;gap:8px;
  font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  color:var(--text);margin-bottom:14px}
.cp-info-body{display:flex;flex-direction:column;gap:10px}
.cp-response{display:flex;align-items:center;gap:12px}
.cp-resp-icon{width:34px;height:34px;border-radius:9px;flex-shrink:0;
  border:1px solid;display:flex;align-items:center;justify-content:center}
.cp-resp-lbl{font-size:0.8125rem;color:var(--text-dim);font-weight:500}
.cp-resp-val{font-size:1rem;font-weight:600;color:var(--text);margin-top:2px}
.cp-location-row{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--text-mid)}
.cp-stats-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cp-sm{text-align:center;padding:12px 4px;border-radius:9px;
  background:rgba(26,85,255,.06);border:1px solid rgba(26,85,255,.12)}
.cp-sm-n{font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:800;color:var(--blue);line-height:1}
.cp-sm-l{font-size:1rem;color:var(--text-dim);margin-top:4px}

/* contact plain image */
.cp-plain-img{border-radius:14px;overflow:hidden;border:1.5px solid var(--border);
  box-shadow:var(--sh-sm);line-height:0}
.cp-plain-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:13px}

/* contact work preview card */
.cp-work-card{border-radius:14px;overflow:hidden;border:1.5px solid var(--border);
  box-shadow:var(--sh-sm);background:#fff}
.cp-work-img{position:relative;height:150px;overflow:hidden}
.cp-work-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cp-work-card:hover .cp-work-img img{transform:scale(1.04)}
.cp-work-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,15,35,.85) 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:12px 14px}
.cp-work-label{display:flex;align-items:center;gap:6px;font-family:'Sora',sans-serif;
  font-size:0.8125rem;font-weight:700;color:#fff;background:rgba(26,85,255,.6);
  padding:5px 10px;border-radius:6px;width:fit-content;backdrop-filter:blur(6px)}
.cp-work-tags{display:flex;gap:6px;flex-wrap:wrap}
.cp-wtag{padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);font-size:0.8125rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.2)}
.cp-work-body{padding:14px 16px}
.cp-work-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:var(--text)}
.cp-work-sub{font-size:1rem;color:var(--text-mid);margin-top:4px;line-height:1.55}
.cp-work-btn{display:inline-flex;align-items:center;margin-top:10px;
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;
  color:var(--blue);text-decoration:none;transition:gap .2s}
.cp-work-btn:hover{gap:6px}
@media(max-width:960px){.contact-pro{grid-template-columns:1fr}}

/* ─── FOOTER (redesigned) ─── */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.06)}
.footer-top{
  max-width:1240px;margin:0 auto;padding:56px 6% 40px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px}
.ft-brand{}
.ft-logo{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:800;
  color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.ft-logo span{color:var(--blue)}
.ft-tagline{font-size:.93rem;color:var(--dark-t);line-height:1.7;max-width:220px}
.ft-socials{display:flex;gap:8px;margin-top:20px}
.ft-soc{width:34px;height:34px;border-radius:9px;
  background:rgba(26,85,255,.1);border:1px solid rgba(26,85,255,.2);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background .2s,transform .2s}
.ft-soc:hover{background:rgba(26,85,255,.28);transform:translateY(-2px)}
.ft-col-title{font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-links a{font-size:.82rem;color:var(--dark-t);text-decoration:none;
  transition:color .2s;display:flex;align-items:center;gap:6px}
.ft-links a:hover{color:var(--cyan)}
.ft-links a::before{content:'';width:4px;height:4px;border-radius:50%;
  background:rgba(26,85,255,.5);flex-shrink:0}
.ft-contact-item{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ft-contact-item:last-child{margin-bottom:0}
.ft-contact-icon{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(26,85,255,.1);border:1px solid rgba(26,85,255,.18);
  display:flex;align-items:center;justify-content:center}
.ft-contact-text{font-size:13px;color:var(--dark-t);line-height:1.4}
.ft-contact-text a{color:var(--cyan);text-decoration:none}
.ft-contact-text a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 6%;max-width:100%;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.fb-copy{font-size:.84rem;color:var(--dark-t)}
.fb-made{font-size:1.25rem;color:rgba(255,255,255,.25);display:flex;align-items:center;gap:5px}
.fb-badge{display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;
  background:rgba(26,85,255,.1);border:1px solid rgba(26,85,255,.2);
  font-family:'Sora',sans-serif;font-size:0.8125rem;font-weight:600;color:#6690ff}
.fb-badge::before{content:'';width:5px;height:5px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 6px #22c55e;animation:dp 2s infinite}

/* ─── REVEAL ─── */
.rv2{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv2.on{opacity:1;transform:none}

/* ─── RESPONSIVE ─── */

/* ════════════════════════════════════════════
   RESPONSIVE — ALL BREAKPOINTS
   ════════════════════════════════════════════ */

/* ── 1280px: slightly tighten gaps ── */
@media (max-width:1280px){
  .container{padding:0 5%}
  nav{padding:0 5%}
  #hero{padding:96px 5% 60px}
  .footer-top{padding:48px 5% 36px}
}

/* ── 1100px: tablet landscape ── */
@media (max-width:1100px){
  .hero-inner{gap:40px}
  .profile-wrap{width:290px;height:290px}
  .services-layout{grid-template-columns:1fr 260px}
  .wg{gap:48px}
  .ag{gap:48px}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:36px}
  .footer-top > div:last-child{grid-column:span 3}
}

/* ── 1024px: services go single col ── */
@media (max-width:1024px){
  .services-layout{grid-template-columns:1fr}
  .svc-profile-card{
    position:static;display:block;
    max-width:480px;margin:32px auto 0
  }
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── 960px: tablet portrait ── */
@media (max-width:960px){
  /* Nav */
  .nav-links{display:none}
  nav{height:60px}

  /* Hero */
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-right{order:-1}
  .profile-wrap{width:260px;height:260px}
  .fc{padding:5px 9px;font-size:.8rem}
  .fc-n{font-size:.85rem}
  .fc-l{font-size:.7rem}
  /* reposition floating cards to stay inside ring bounds */
  .fc:nth-child(1){top:-8px !important;left:-10px !important}
  .fc:nth-child(2){bottom:30px !important;right:-10px !important}
  .fc:nth-child(3){bottom:-8px !important;left:4px !important}
  .hero-chips{justify-content:center}
  .hero-btns{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}

  /* Stats */
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .st-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .st-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)}
  .st-item:nth-child(3),.st-item:nth-child(4){border-bottom:none}

  /* Services */
  .svc-card.wide{grid-column:span 2}
  .wi{grid-template-columns:1fr;gap:20px}

  /* Process */
  .pt{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .pt::before{display:none}

  /* Why Me */
  .wg{grid-template-columns:1fr;gap:40px}

  /* Amazon */
  .ag{grid-template-columns:1fr;gap:40px}

  /* Portfolio */
  .port-grid{grid-template-columns:repeat(2,1fr)}

  /* Contact */
  .contact-pro{grid-template-columns:1fr}
  .cp-card-inner{padding:28px 24px}
  .cp-heading{font-size:1.6rem}

  /* Footer */
  .footer-top{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-top > div:last-child{grid-column:span 2}
  .footer-bottom{flex-wrap:wrap;justify-content:center;gap:10px}
}

/* ── 768px: large mobile ── */
@media (max-width:768px){
  /* Sections */
  .sp{padding:72px 0}
  .sh{margin-bottom:44px}

  /* Hero */
  h1.hn{font-size:clamp(2rem,8vw,3rem)}
  .info-banner{max-width:100%}

  /* Services */
  .svc-grid{grid-template-columns:1fr}
  .svc-card.wide{grid-column:span 1}
  .wi{grid-template-columns:1fr}
  .svc-profile-card{max-width:100%}

  /* Process */
  .pt{grid-template-columns:repeat(2,1fr)}
  .ps-n{width:54px;height:54px;font-size:1rem}

  /* Stats */
  .stats-inner{grid-template-columns:repeat(2,1fr)}

  /* Portfolio */
  .port-grid{grid-template-columns:1fr}
  .port-card img{height:200px}

  /* Amazon card */
  .ag{grid-template-columns:1fr}
  .acard{max-width:100%}
  .am{grid-template-columns:repeat(2,1fr)}

  /* Why */
  .wg{grid-template-columns:1fr}
  .wl{gap:12px}

  /* Contact */
  .cp-btns{flex-direction:column}
  .cp-btn-primary,.cp-btn-secondary{text-align:center}
  .cc-grid{grid-template-columns:1fr}

  /* Footer */
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-top > div:last-child{grid-column:span 1}
  .ft-socials{flex-wrap:wrap}

  /* Marquee */
  .mt{margin:8px 0}
}

/* ── 480px: small mobile ── */
@media (max-width:480px){
  .svc-profile-card{max-width:100%;margin-top:24px}
  .spc-links{grid-template-columns:1fr 1fr 1fr}
  /* Nav */
  nav{padding:0 4%}
  .nav-logo{font-size:1rem}
  .nav-cta{padding:7px 14px;font-size:.75rem}

  /* Hero */
  #hero{padding:80px 4% 48px}
  h1.hn{font-size:clamp(1.9rem,9vw,2.6rem)}
  .hero-sub{font-size:.9rem}
  .hero-badge{font-size:.68rem}
  .chip{font-size:.72rem;padding:4px 10px}
  .btn-p,.btn-o{padding:11px 20px;font-size:.84rem;width:100%;text-align:center}
  .hero-btns{flex-direction:column;gap:8px}
  .profile-wrap{width:200px;height:200px}

  /* Stats */
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .st-big{font-size:2rem}
  .st-desc{font-size:.78rem}

  /* Sections */
  .container{padding:0 4%}
  .sp{padding:56px 0}
  .sh{margin-bottom:36px}
  h2.st{font-size:clamp(1.5rem,6vw,2rem)}

  /* Services */
  .svc-grid{grid-template-columns:1fr}
  .si{width:42px;height:42px}
  .stit{font-size:1rem}
  .snum{font-size:2rem}

  /* Process */
  .pt{grid-template-columns:1fr}
  .ps{padding:0 0 20px}
  .ps-n{width:48px;height:48px;margin-bottom:12px}

  /* Why */
  .wvb-body{padding:18px}
  .wvb-title{font-size:1.3rem}
  .wi2{padding:14px 16px;gap:12px}
  .wic{width:36px;height:36px}

  /* Portfolio */
  .port-grid{grid-template-columns:1fr}
  .port-card img{height:180px}

  /* Amazon */
  .amx-n{font-size:1.5rem}
  .am{grid-template-columns:repeat(2,1fr)}
  .acard-img{height:120px}

  /* Contact */
  .cp-card-inner{padding:22px 18px}
  .cp-heading{font-size:1.4rem}
  .cp-row{padding:10px 12px;gap:10px}
  .cp-row-icon{width:32px;height:32px}
  .cp-info-card{padding:16px 18px}
  .cp-stats-mini{grid-template-columns:repeat(2,1fr)}

  /* Footer */
  .footer-top{padding:36px 4% 28px}
  .footer-bottom{padding:14px 4%;flex-direction:column;text-align:center}
  .ft-links{gap:8px}

  /* Marquee speed */
  .mr{animation-duration:18s}
  .mr.rv{animation-duration:14s}
}

/* ── 360px: very small phones ── */
@media (max-width:360px){
  h1.hn{font-size:clamp(1.7rem,10vw,2.2rem)}
  h2.st{font-size:1.4rem}
  .hero-sub{font-size:.86rem}
  .svc-card{padding:20px 16px}
  .cp-card-inner{padding:18px 14px}
  .cp-heading{font-size:1.25rem}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .st-big{font-size:1.8rem}
  .footer-top{padding:28px 4%}
}


/* ─── HERO INFO CARD (replaces photo) ─── */
.hero-card{width:100%;max-width:400px}
.hero-card .ib-header{padding:20px 22px}
.hero-card .ib-skills{padding:18px 22px;gap:14px}
.hero-card .ib-stats{padding:16px 22px 20px;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-card .ib-skill-name{width:104px;font-size:.9rem}
.hero-card .ib-pct{font-size:.85rem;width:34px}
.hero-card .ib-name{font-size:1rem;line-height:1.25}
.hero-card .ib-role{font-size:.85rem}
.hero-card .ib-stat-l{font-size:.85rem}
.hero-card .ib-stat{padding:12px 4px}
.hero-card .ib-bar{height:4px}
.ib-mono{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  font-family:'Sora',sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.03em;
  border:2px solid rgba(255,255,255,.18)}

/* ─── AMAZON CARD ─── */
.amz-card{background:linear-gradient(145deg,#fff 60%,#fff8ec);border-color:rgba(255,153,0,.28)}
.amz-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.amz-ic{margin-bottom:0;flex-shrink:0;background:rgba(255,153,0,.08);border-color:rgba(255,153,0,.22)}
.amz-ht{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.amz-ht .stit{font-size:1.35rem;margin:0}
.amz-tag{margin-top:0;background:rgba(255,153,0,.1);border-color:rgba(255,153,0,.25);color:#a85900}
.amz-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;padding-top:16px;
  border-top:1px solid rgba(255,153,0,.2)}
.amz-list li::before{background:var(--amber)}
@media(max-width:700px){.amz-list{grid-template-columns:1fr}}
.hero-card{text-align:left}

/* ─── HERO CARD: LIGHT THEME ─── */
.hero-card{background:#fff;border:1.5px solid var(--border);box-shadow:var(--sh-lg)}
.hero-card .ib-header{border-bottom:1px solid var(--border)}
.hero-card .ib-name{color:var(--text)}
.hero-card .ib-role{color:var(--text-dim)}
.hero-card .ib-status{color:#16a34a}
.hero-card .ib-skills{border-bottom:1px solid var(--border)}
.hero-card .ib-skill-name{color:var(--text-mid)}
.hero-card .ib-bar{background:var(--blue-lt)}
.hero-card .ib-pct{color:var(--text-dim)}
.hero-card .ib-stat{background:var(--bg-soft);border:1px solid var(--border)}
.hero-card .ib-stat-n{color:var(--blue)}
.hero-card .ib-stat-l{color:var(--text-dim)}

/* ─── AMAZON SECTION (dark) — refined ─── */
.al{gap:12px;margin-top:26px}
.al li{align-items:center;gap:16px;padding:15px 18px;border-radius:14px;border-bottom:none;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  transition:transform .25s,border-color .25s,background .25s}
.al li:hover{transform:translateX(6px);border-color:rgba(255,153,0,.4);
  background:linear-gradient(135deg,rgba(255,153,0,.09),rgba(255,255,255,.02))}
.al .ai{width:42px;height:42px;border-radius:11px;background:rgba(255,153,0,.11);border-color:rgba(255,153,0,.28)}
.al .ai svg{width:20px;height:20px}
.al .at{display:flex;flex-direction:column;gap:3px}
.al .at strong{color:#fff;font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.al .at span{color:var(--dark-t);font-size:.9rem;line-height:1.55}

.acard{border-color:rgba(255,153,0,.22);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,153,0,.05)}
.acard-img{position:relative;height:190px}
.acard-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,28,58,0) 35%,var(--dark2) 100%)}
.acard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:6px 24px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.awm{font-size:1.9rem}
.atag{margin-top:0;padding:5px 12px;border-radius:100px;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#ffb83f;background:rgba(255,153,0,.1);border:1px solid rgba(255,153,0,.25)}
.am{padding:8px;gap:8px;background:transparent}
.amx,.amx:nth-child(2n),.amx:nth-child(3),.amx:nth-child(4){
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:center;
  padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.03);
  transition:border-color .25s,background .25s}
.amx:hover{border-color:rgba(255,153,0,.35);background:rgba(255,153,0,.06)}
.amx svg{grid-row:1/3;box-sizing:content-box;padding:9px;border-radius:10px;
  background:rgba(255,153,0,.1);border:1px solid rgba(255,153,0,.22)}
.amx-n{align-self:end}
.amx-l{margin-top:0;font-size:.85rem;align-self:start}
.atst{margin:auto 16px 16px;padding:16px 18px;border-radius:12px;border-left:3px solid #FF9900;
  background:linear-gradient(135deg,rgba(255,153,0,.09),rgba(255,153,0,.02))}
.atst p{font-size:.95rem}
.atst cite{font-size:.9rem}
@media(max-width:900px){.al li:hover{transform:none}}
.am{flex:1;grid-auto-rows:1fr}
.atst{margin-top:8px}