
/* Vitorr Hall of Fame v3 — compact photos, premium celebration */
:root{
  --vh-ink:#101828;
  --vh-muted:#667085;
  --vh-line:#e5e7eb;
  --vh-bg:#f7f9fd;
  --vh-blue:#3156e8;
  --vh-violet:#6d3be7;
  --vh-gold:#b88914;
  --vh-gold-soft:#fff8e7;
  --vh-green:#17723a;
}
*{box-sizing:border-box}
body{
  background:
    radial-gradient(circle at 7% 0,rgba(49,86,232,.06),transparent 25%),
    radial-gradient(circle at 95% 3%,rgba(109,59,231,.06),transparent 27%),
    var(--vh-bg);
  color:var(--vh-ink);
}
.vh-shell{max-width:1180px;margin:auto;padding:26px 14px 68px}

/* ===== Hall header ===== */
.vh-hero{
  position:relative;overflow:hidden;text-align:center;padding:48px 22px 42px;
  border:1px solid #e7e8ef;border-radius:28px;
  background:linear-gradient(145deg,#fff 0%,#fcfbff 58%,#f5f7ff 100%);
  box-shadow:0 18px 50px rgba(31,42,95,.06)
}
.vh-hero:before,.vh-hero:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none
}
.vh-hero:before{width:250px;height:250px;left:-160px;top:-160px;background:rgba(49,86,232,.055)}
.vh-hero:after{width:290px;height:290px;right:-175px;bottom:-190px;background:rgba(109,59,231,.06)}
.vh-kicker{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  color:#91670a;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase
}
.vh-kicker:before,.vh-kicker:after{content:"";width:24px;height:1px;background:#c39422}
.vh-hero h1{
  position:relative;z-index:1;margin:9px auto 6px;
  font:800 clamp(38px,6vw,64px)/1.01 Poppins,Inter,sans-serif;
  letter-spacing:-.055em
}
.vh-hero h1 span{
  background:linear-gradient(90deg,var(--vh-blue),var(--vh-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.vh-hero p{
  position:relative;z-index:1;max-width:640px;margin:0 auto;
  color:var(--vh-muted);font-size:13px;font-weight:600;line-height:1.65
}
.vh-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:21px}
.vh-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;
  border:1px solid #d9deea;border-radius:12px;background:#fff;color:#172033;
  text-decoration:none;font-size:10px;font-weight:900;cursor:pointer;transition:.18s ease
}
.vh-btn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(31,42,95,.08)}
.vh-btn-primary{border:0;color:#fff;background:linear-gradient(135deg,var(--vh-blue),var(--vh-violet))}
.vh-stats{position:relative;z-index:1;display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin-top:25px}
.vh-stat{text-align:center}
.vh-stat b{display:block;font:800 20px Poppins}
.vh-stat small{display:block;color:#98a2b3;font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}

/* ===== Section ===== */
.vh-section{margin-top:32px}
.vh-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:15px}
.vh-head .eyebrow{color:#91670a;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.vh-head h2{margin:4px 0 0;font:800 clamp(26px,4vw,36px)/1.08 Poppins;letter-spacing:-.04em}
.vh-head p{margin:4px 0 0;color:var(--vh-muted);font-size:10px;font-weight:600}

/* ===== Featured success ===== */
.vh-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vh-featured-card{
  display:flex;align-items:center;gap:18px;min-height:190px;padding:21px;
  border:1px solid #e6d7a5;border-radius:24px;background:#fff;
  box-shadow:0 13px 34px rgba(74,55,10,.06);text-decoration:none;color:inherit;transition:.2s ease
}
.vh-featured-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(74,55,10,.095)}
.vh-featured-photo{
  width:104px;height:104px;flex:0 0 104px;border-radius:24px;object-fit:cover;
  background:#eef1f6;border:4px solid #fff;box-shadow:0 10px 24px rgba(16,24,40,.14)
}
.vh-featured-copy{min-width:0}
.vh-featured-tag{
  display:inline-flex;padding:6px 8px;border-radius:999px;background:var(--vh-gold-soft);
  border:1px solid #e8cf7b;color:#7c5900;font-size:7px;font-weight:900;letter-spacing:.07em;text-transform:uppercase
}
.vh-featured-copy h3{margin:10px 0 2px;font:800 28px/1.08 Poppins;letter-spacing:-.045em}
.vh-role{color:#475467;font-size:11px;font-weight:750;line-height:1.4}
.vh-verified{
  display:inline-flex;align-items:center;margin-top:9px;padding:6px 8px;border-radius:999px;
  background:#ecfdf3;border:1px solid #95dfae;color:#176c3b;font-size:7px;font-weight:900
}
.vh-exams{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.vh-exam{
  display:inline-flex;padding:6px 8px;border-radius:9px;background:#f2f3ff;border:1px solid #e1e3ff;
  color:#4e3abe;font-size:8px;font-weight:900
}
.vh-quote{margin-top:12px;padding-left:11px;border-left:3px solid #c39422;color:#655c4d;font-size:9px;font-style:italic;line-height:1.55}

/* ===== Regular cards — compact photo, no blank banner ===== */
.vh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vh-card{
  position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;
  border:1px solid #e2e6ee;border-radius:22px;background:#fff;
  box-shadow:0 9px 25px rgba(16,24,40,.045);transition:.2s ease
}
.vh-card:hover{transform:translateY(-3px);border-color:#d6d6eb;box-shadow:0 16px 34px rgba(43,46,95,.085)}
.vh-avatar-wrap{position:relative;flex:0 0 auto}
.vh-avatar{
  width:82px;height:82px;display:block;object-fit:cover;border-radius:20px;
  background:#eef1f6;border:3px solid #fff;box-shadow:0 8px 19px rgba(16,24,40,.13)
}
.vh-avatar-check{
  position:absolute;right:-4px;bottom:-4px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:#ecfdf3;border:2px solid #fff;color:#15803d;
  font-size:10px;font-weight:900;box-shadow:0 3px 8px rgba(16,24,40,.10)
}
.vh-card-main{min-width:0;flex:1}
.vh-featured-mini{display:inline-flex;margin-bottom:5px;padding:5px 7px;border-radius:999px;background:var(--vh-gold-soft);color:#7a5800;font-size:6px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.vh-card h3{margin:0;font:800 20px/1.12 Poppins;letter-spacing:-.036em}
.vh-card-role{margin-top:3px;color:#667085;font-size:9px;font-weight:700;line-height:1.45}
.vh-card .vh-exams{margin-top:9px}
.vh-card-quote{margin-top:9px;color:#756d7d;font-size:8px;font-style:italic;line-height:1.5}
.vh-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #eef0f4}
.vh-story-link{color:#5739d1;text-decoration:none;font-size:8px;font-weight:900}
.vh-share{
  width:33px;height:33px;display:grid;place-items:center;border:1px solid #e0e4ec;border-radius:10px;
  background:#fff;color:#5739d1;cursor:pointer
}
.vh-share svg{width:14px;height:14px}

/* ===== compact join CTA ===== */
.vh-cta{
  margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 23px;border:1px solid #e2e6ee;border-radius:21px;background:#fff;
  box-shadow:0 9px 26px rgba(16,24,40,.04)
}
.vh-cta small{color:#91670a;font-size:7px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.vh-cta h2{margin:4px 0 0;font:800 23px Poppins;letter-spacing:-.034em}
.vh-cta p{margin:2px 0 0;color:#667085;font-size:9px}

/* ===== user form ===== */
.vh-form{
  margin-top:30px;padding:22px;border:1px solid #e2e6ee;border-radius:22px;background:#fff;
  box-shadow:0 9px 26px rgba(16,24,40,.04)
}
.vh-form h2{margin:0;font:800 23px Poppins}
.vh-form>p{margin:4px 0 14px;color:#667085;font-size:9px}
.vh-photo-row{display:flex;gap:12px;align-items:center;padding:11px;border:1px solid #e6eaf1;border-radius:13px;background:#fafbfe}
.vh-photo-row img{width:56px;height:56px;object-fit:cover;border-radius:15px}
.vh-photo-row span{display:block;color:#667085;font-size:8px}
.vh-field{margin-top:10px}
.vh-field label{display:block;margin-bottom:5px;color:#475467;font-size:9px;font-weight:850}
.vh-input{width:100%;padding:10px 11px;border:1px solid #d8dee8;border-radius:10px;background:#fff;font:500 11px Inter}
.vh-hint{margin-top:4px;color:#98a2b3;font-size:8px}
.vh-consent{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px;border:1px solid #c9ead4;border-radius:11px;background:#f3fbf5;color:#2b6842;font-size:8px;line-height:1.5}
.vh-submit{width:100%;margin-top:11px}
.message{display:none;margin-top:10px;padding:10px;border-radius:10px;font-size:9px;font-weight:800}
.message.show{display:block}.message.ok{background:#ecfdf3;color:#166534}.message.bad{background:#fff1f2;color:#9f1239}
.vh-trust{margin-top:9px;color:#98a2b3;font-size:8px;line-height:1.5}

/* ===== Individual profile ===== */
.vhp-card{
  overflow:hidden;border:1px solid #e4e7ec;border-radius:28px;background:#fff;
  box-shadow:0 18px 50px rgba(16,24,40,.07)
}
.vhp-top{
  position:relative;padding:36px 34px 32px;background:
    linear-gradient(135deg,#102657 0%,#3156e8 54%,#6f36e8 100%);
  color:#fff;overflow:hidden
}
.vhp-top:after{
  content:"V";position:absolute;right:24px;top:-28px;font:800 170px/1 Poppins;color:rgba(255,255,255,.045)
}
.vhp-kicker{position:relative;z-index:1;font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#fde9a9}
.vhp-top h1{position:relative;z-index:1;margin:8px 0 3px;font:800 clamp(34px,5vw,54px)/1.02 Poppins;letter-spacing:-.05em;color:#fff}
.vhp-role{position:relative;z-index:1;color:#dbe7ff;font-size:12px;font-weight:700}
.vhp-exams{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.vhp-exam{padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);font-size:8px;font-weight:900}
.vhp-identity{
  display:flex;align-items:center;gap:18px;padding:20px 28px 18px;border-bottom:1px solid #edf0f4
}
.vhp-photo{
  width:104px;height:104px;flex:0 0 104px;object-fit:cover;border-radius:24px;
  background:#eef1f6;border:4px solid #fff;box-shadow:0 9px 24px rgba(16,24,40,.14)
}
.vhp-name{min-width:0;flex:1}
.vhp-name h2{margin:0;font:800 clamp(28px,4vw,42px)/1.07 Poppins;letter-spacing:-.045em}
.vhp-name .role{margin-top:4px;color:#667085;font-size:11px;font-weight:700}
.vhp-share{width:42px;height:42px;display:grid;place-items:center;border:1px solid #e0e4ec;border-radius:13px;background:#fff;color:#5739d1;cursor:pointer}
.vhp-share svg{width:18px;height:18px}
.vhp-body{padding:24px 28px 29px}
.vhp-verify{
  display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #a6dfb9;border-radius:14px;background:#f1fbf4;color:#176c3b;font-size:9px;line-height:1.55
}
.vhp-verify b{font:800 12px Poppins}
.vhp-quote{
  position:relative;margin:18px 0 0;padding:20px 22px 18px 52px;border-radius:18px;
  background:linear-gradient(135deg,#111b43,#332c83 60%,#5623aa);color:#fff
}
.vhp-quote:before{content:"“";position:absolute;left:16px;top:5px;font:800 58px/1 Georgia;color:#fde68a}
.vhp-quote p{margin:0;font:600 14px/1.7 Poppins}
.vhp-quote small{display:block;margin-top:8px;color:#c7d2fe;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.vhp-block{margin-top:18px;padding:18px;border:1px solid #e1e5ed;border-radius:17px;background:#fff}
.vhp-block-title{margin:0 0 10px;color:#475467;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.vhp-journey{white-space:pre-line;color:#475467;font-size:11px;line-height:1.8}
.vhp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* toast */
.vh-toast{
  position:fixed;left:50%;bottom:78px;z-index:99999;transform:translate(-50%,17px);opacity:0;
  background:#101828;color:#fff;padding:9px 13px;border-radius:999px;font-size:9px;font-weight:800;transition:.2s
}
.vh-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:960px){
  .vh-featured-grid{grid-template-columns:1fr}
  .vh-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .vh-shell{padding:16px 8px 52px}
  .vh-hero{padding:36px 17px 32px;border-radius:23px}
  .vh-hero h1{font-size:38px}
  .vh-stats{gap:24px}
  .vh-head{align-items:flex-start;flex-direction:column}
  .vh-featured-card{min-height:0;padding:17px}
  .vh-featured-photo{width:90px;height:90px;flex-basis:90px;border-radius:20px}
  .vh-featured-copy h3{font-size:23px}
  .vh-grid{grid-template-columns:1fr}
  .vh-card{padding:15px}
  .vh-avatar{width:74px;height:74px;border-radius:18px}
  .vh-cta{align-items:flex-start;flex-direction:column;padding:18px}
  .vhp-top{padding:28px 20px 25px}
  .vhp-identity{padding:17px 18px;gap:14px}
  .vhp-photo{width:86px;height:86px;flex-basis:86px;border-radius:20px}
  .vhp-name h2{font-size:29px}
  .vhp-body{padding:20px 18px 24px}
}
@media(max-width:430px){
  .vh-featured-card{align-items:flex-start;gap:13px}
  .vh-featured-photo{width:78px;height:78px;flex-basis:78px;border-radius:18px}
  .vh-featured-copy h3{font-size:21px}
  .vh-avatar{width:68px;height:68px}
  .vhp-identity{display:grid;grid-template-columns:76px 1fr auto}
  .vhp-photo{width:76px;height:76px;flex-basis:76px}
  .vhp-name h2{font-size:25px}
}


/* Individual Achiever Profile — larger, clearer portrait */
.vhp-identity .vhp-photo{
    width:160px;
    height:160px;
    min-width:160px;
    object-fit:cover;
    object-position:center;
    border-radius:28px;
    border:6px solid #fff;
    box-shadow:0 16px 38px rgba(15,23,42,.18);
}

@media (max-width:720px){
    .vhp-identity .vhp-photo{
        width:128px;
        height:128px;
        min-width:128px;
        border-radius:24px;
        border-width:5px;
    }
}

@media (max-width:430px){
    .vhp-identity .vhp-photo{
        width:112px;
        height:112px;
        min-width:112px;
        border-radius:22px;
    }
}
