/* Sellerpad v6 – compact header, minimal sizing, logo/photo slots */

/* ---------- Global scale-down (~10%) ---------- */
html{font-size:14.4px;scroll-padding-top:70px}
.container{width:min(1140px,100% - 56px)}
.section{padding:84px 0}
.section-head{margin-bottom:44px;max-width:680px}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
.section-head p{font-size:1rem;margin-top:14px}
.btn{padding:12px 22px;font-size:.95rem;border-radius:12px}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:10px}
.svc{padding:22px 20px;gap:10px}
.svc h3{font-size:1.05rem}
.brand{padding:22px 16px;font-size:1.35rem}
.brand-track .brand{min-width:210px}
.brand-track{gap:16px}
.mp-badge,.cs-badge{width:44px;height:44px;border-radius:13px;font-size:1.25rem}
.avatar{width:46px;height:46px}
.card{border-radius:18px}

/* ---------- Header ---------- */
.header{padding:12px 0}
.logo img{height:38px}
.nav{gap:16px}
.nav-link{padding:8px 10px;font-size:.86rem;border-radius:8px}
.nav-link .icon{width:12px;height:12px}
.nav-cta{gap:10px}
.nav-cta .btn{padding:9px 16px;font-size:.84rem}
.header.scrolled{
  background:rgba(13,29,50,.96);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  padding:7px 0;
  border-bottom:1px solid rgba(142,197,244,.18);
  box-shadow:0 8px 28px -12px rgba(0,0,0,.55);
}
.header.scrolled .logo img{height:30px}
.header.scrolled .nav-link{font-size:.82rem;padding:7px 9px}
.header.scrolled .nav-cta .btn{padding:7px 14px;font-size:.8rem}
.logo img,.nav-link,.nav-cta .btn{transition:height .25s,padding .25s,font-size .25s}

/* ---------- Hero a touch tighter ---------- */
.hero .container{transform-origin:top center}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.hero p.lead,.hero .lead{font-size:1rem}

/* ---------- Logo / photo slots ---------- */
[data-logo].has-logo,[data-photo].has-photo{font-size:0}
[data-logo].has-logo img{display:block;max-width:100%;object-fit:contain}
.brand.has-logo{filter:none;padding:16px 20px;min-height:68px}
.brand.has-logo img{height:34px;width:auto;max-width:150px;opacity:.85;transition:opacity .25s,transform .25s}
.brand.has-logo:hover img{opacity:1;transform:scale(1.05)}
.brand.has-logo i{display:none}
.mk-ico.has-logo,.mp-badge.has-logo,.cs-badge.has-logo,.o-in i.has-logo{background:#fff!important;padding:5px}
.mk-ico.has-logo img,.mp-badge.has-logo img,.cs-badge.has-logo img,.o-in i.has-logo img{width:100%;height:100%}
.avatar.has-photo{padding:0;overflow:hidden;background:#dbe8f6}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Listing makeover ---------- */
.makeover{margin-top:52px;display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;padding:30px;border-radius:22px;background:#fff;border:1px solid #DCE8F5;box-shadow:0 18px 44px -26px rgba(15,42,74,.35)}
.makeover h3{font-size:1.35rem;line-height:1.25;color:#0F2A4A;margin:8px 0 10px;letter-spacing:-.02em}
.makeover p{color:#52667D;font-size:.92rem}
.makeover ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.makeover li{position:relative;padding-left:22px;color:#274260;font-size:.9rem;font-weight:600}
.makeover li::before{content:"✓";position:absolute;left:0;color:#16A34A;font-weight:800}
.mo-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mo-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;border:1px solid #DCE8F5;background:#F6FAFE;color:#0F2A4A}
.mo-card.after{background:#fff;border-color:#8EC5F4;box-shadow:0 14px 34px -18px rgba(92,165,232,.8)}
.mo-card b{font-size:.84rem;line-height:1.35}
.mo-card small{color:#52667D;font-size:.76rem}
.mo-tag{position:absolute;top:10px;left:10px;z-index:1;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#E7EEF6;color:#52667D}
.mo-card.after .mo-tag{background:#16A34A;color:#fff}
.mo-img{aspect-ratio:1/1;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#E4ECF5,#CBD9E8);color:#8DA3BB}
.mo-card.after .mo-img{background:linear-gradient(145deg,#CFE6FB,#8EC5F4);color:#fff}
.mo-img .icon{width:38px;height:38px}
.mo-img.has-photo{font-size:0}
.mo-img.has-photo img{width:100%;height:100%;object-fit:cover}
.mo-lines{display:grid;gap:5px}
.mo-lines i{height:6px;border-radius:4px;background:#DCE6F1}
.mo-lines i:nth-child(2){width:70%}.mo-lines i:nth-child(3){width:50%}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .makeover{grid-template-columns:1fr;padding:22px}
  .section{padding:68px 0}
}
@media (max-width:560px){
  html{font-size:14.4px}
  .container{width:min(100% - 36px,1140px)}
  .logo img{height:34px}
  .header.scrolled .logo img{height:28px}
  .mo-cards{gap:10px}
  .brand.has-logo img{height:28px}
}

/* ======== v7: floating pill header (like reference) ======== */
.header{padding:14px 0;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.header .container.nav{
  width:min(1180px,100% - 40px);
  padding:7px 8px 7px 22px;
  border-radius:999px;
  background:rgba(8,18,34,.62);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
  transition:background .3s,box-shadow .3s,padding .3s,border-color .3s;
}
.header.scrolled{padding:10px 0}
.header.scrolled .container.nav{background:rgba(7,15,28,.92);border-color:rgba(255,255,255,.16);box-shadow:0 14px 34px -14px rgba(0,0,0,.7);padding:5px 6px 5px 20px}
.logo img,.header.scrolled .logo img{height:34px}
.header.scrolled .logo img{height:30px}
.nav-link,.header.scrolled .nav-link{padding:9px 16px;font-size:.88rem;font-weight:600;border-radius:999px;color:#DCE8F5}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-link.active{color:#fff;background:rgba(255,255,255,.12)}
.nav-cta .btn,.header.scrolled .nav-cta .btn{background:#fff;color:#0B1830;border-radius:999px;padding:11px 20px;font-size:.86rem;box-shadow:none;animation:none}
.nav-cta .btn::before{display:none}
.nav-cta .btn:hover{background:#DDEBFA;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,255,255,.4)}
.menu-toggle{border-radius:999px;width:42px;height:42px}
.dropdown{top:calc(100% + 16px);border-radius:20px}
@media (max-width:1020px){
  .header .container.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,18,34,.9)}
  .nav-link,.header.scrolled .nav-link{border-radius:12px}
}