*{box-sizing:border-box}
:root{
    --navy:#1e3a78;
    --navy-dark:#11264f;
    --orange:#f5822d;
    --yellow:#f4c318;
    --bg:#f5f7fb;
    --bg-soft:#eef3fb;
    --text:#172033;
    --muted:#697387;
    --white:#ffffff;
    --border:#e4e8f1;
    --shadow:0 24px 70px rgba(20,39,82,.12);
    --radius:28px;
}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:'Manrope',system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.topline{
    background:linear-gradient(90deg,var(--navy),#27498d);
    color:#dbe6ff;
    font-size:13px;
}
.topline-inner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.site-header{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(228,232,241,.9);
}
.nav-wrap{
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    color:var(--navy);
}
.brand-mark{
    width:44px;
    height:44px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    box-shadow:0 10px 28px rgba(245,130,45,.24);
}
.brand-word{font-size:20px}
.nav{
    display:flex;
    gap:28px;
    color:#46546e;
    font-weight:600;
}
.nav a:hover{color:var(--navy)}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    border-radius:16px;
    padding:12px 18px;
    font-weight:800;
    font-size:15px;
    transition:.25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    box-shadow:0 14px 32px rgba(245,130,45,.26);
}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 12px 28px rgba(20,39,82,.09)}
.btn-outline{border:1px solid var(--border);background:#fff;color:var(--text)}
.btn-lg{padding:15px 24px;border-radius:18px}
.hero{
    padding:82px 0 56px;
    background:
      radial-gradient(circle at 8% 18%, rgba(245,130,45,.16), transparent 24%),
      radial-gradient(circle at 92% 8%, rgba(244,195,24,.18), transparent 26%),
      linear-gradient(180deg,#f9fbff 0%,#f5f7fb 100%);
    overflow:hidden;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.04fr .96fr;
    gap:52px;
    align-items:center;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:#eaf0ff;
    color:var(--navy);
    font-weight:800;
    font-size:13px;
}
.eyebrow.light{background:rgba(255,255,255,.14);color:#fff}
.hero h1,.section h1{
    font-size:clamp(42px,5.2vw,76px);
    line-height:1.03;
    margin:18px 0 18px;
    letter-spacing:-.04em;
}
.hero h1 span{color:var(--orange)}
.hero p{
    margin:0;
    max-width:630px;
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:28px 0 24px;
}
.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.hero-pills span{
    background:#fff;
    border:1px solid var(--border);
    color:#47516a;
    border-radius:999px;
    padding:10px 14px;
    font-size:13px;
    font-weight:700;
}
.hero-scene{
    position:relative;
    min-height:520px;
}
.glass-card{
    background:linear-gradient(160deg, rgba(20,42,92,.96), rgba(15,28,59,.94));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    color:#fff;
    border-radius:34px;
}
.profile-card{
    position:absolute;
    right:10px;
    top:20px;
    width:min(100%,440px);
    padding:28px;
    transform:rotate(2deg);
}
.profile-top{
    display:flex;
    align-items:center;
    gap:14px;
}
.avatar{
    width:56px;height:56px;border-radius:18px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#fff;font-weight:800;
}
.avatar.big{width:66px;height:66px;font-size:20px}
.profile-top h3{margin:0 0 4px;font-size:24px}
.profile-top p{margin:0;color:#d4def5;font-size:14px}
.level-badge{
    margin-left:auto;
    padding:10px 14px;
    border-radius:999px;
    color:#fff;font-weight:800;font-size:12px;
}
.level-badge.gold{background:linear-gradient(135deg,#efb328,#f2db64)}
.mini-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin:24px 0;
}
.mini-stats div{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:16px;
}
.mini-stats strong{display:block;font-size:24px}
.mini-stats span{display:block;margin-top:6px;font-size:12px;color:#ccd7f0}
.bars{
    height:144px;
    display:flex;
    align-items:flex-end;
    gap:10px;
}
.bars span{
    flex:1;
    border-radius:14px 14px 5px 5px;
    background:linear-gradient(180deg,var(--yellow),var(--orange));
}
.floating-banner{
    position:absolute;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:18px 20px;
    box-shadow:0 20px 45px rgba(20,39,82,.10);
}
.floating-banner small{
    display:block;
    color:var(--muted);
    margin-bottom:8px;
}
.floating-banner strong{
    display:block;
    color:var(--navy);
    font-size:18px;
    margin-bottom:4px;
}
.floating-banner span{font-size:13px;color:#566176}
.banner-left{left:0;top:64px;width:220px}
.banner-right{right:0;top:355px;width:220px}
.banner-bottom{left:30px;bottom:12px;width:270px}
.levels-row{display:flex;gap:8px;flex-wrap:wrap}
.level-chip{
    padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#fff
}
.level-chip.bronze{background:linear-gradient(135deg,#ab673d,#d3894f)}
.level-chip.silver{background:linear-gradient(135deg,#9da8ba,#c9d1de)}
.level-chip.gold{background:linear-gradient(135deg,#e5af24,#f0cc57)}
.stats-strip{
    padding:0 0 16px;
}
.stats-strip-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.stats-strip article{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:22px;
    box-shadow:0 10px 30px rgba(17,38,79,.05);
}
.stats-strip strong{
    display:block;
    font-size:28px;
    color:var(--navy);
    margin-bottom:8px;
}
.stats-strip span{color:var(--muted);line-height:1.6}
.section{padding:84px 0}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:32px;
}
.section-head.center{
    align-items:center;
    justify-content:center;
    text-align:center;
    flex-direction:column;
}
.section-head h2{
    margin:14px 0 0;
    font-size:42px;
    line-height:1.1;
    letter-spacing:-.03em;
}
.section-head p{
    max-width:420px;
    color:var(--muted);
    line-height:1.7;
    margin:0;
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.feature-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:28px;
    box-shadow:0 14px 35px rgba(17,38,79,.06);
}
.feature-card .num{
    display:inline-grid;
    place-items:center;
    width:46px;height:46px;
    border-radius:16px;
    background:#eef3ff;
    color:var(--navy);
    font-weight:800;
}
.feature-card h3{margin:18px 0 10px;font-size:22px}
.feature-card p{margin:0;color:var(--muted);line-height:1.75}
.section-alt{background:linear-gradient(180deg,#f0f5fd 0%,#f8fbff 100%)}
.split-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}
.info-panel{
    border-radius:32px;
    padding:34px;
}
.info-panel.dark{
    background:linear-gradient(150deg,var(--navy),var(--navy-dark));
    color:#fff;
    box-shadow:var(--shadow);
}
.info-panel.dark p,.info-panel.dark li{color:#d7e0f4}
.info-panel h2{
    margin:16px 0 12px;
    font-size:38px;
    line-height:1.1;
}
.info-panel p{line-height:1.75;color:var(--muted)}
.light-card{
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 14px 35px rgba(17,38,79,.06);
}
.tick-list{
    padding:0;
    margin:22px 0 0;
    list-style:none;
    display:grid;
    gap:12px;
}
.tick-list li{
    position:relative;
    padding-left:28px;
}
.tick-list li::before{
    content:'✓';
    position:absolute;
    left:0;top:0;
    color:#ffd06d;font-weight:800;
}
.info-boxes{
    display:grid;
    gap:14px;
    margin-top:20px;
}
.info-boxes div{
    padding:18px;
    border-radius:20px;
    background:#f8fafe;
    border:1px solid var(--border);
}
.info-boxes strong{display:block;color:var(--navy);margin-bottom:6px}
.info-boxes span{color:var(--muted)}
.levels-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.level-card{
    padding:32px;
    border-radius:30px;
    color:#fff;
    min-height:230px;
    box-shadow:var(--shadow);
}
.level-card strong{
    display:block;
    font-size:36px;
    margin:18px 0 14px;
}
.level-card p{margin:0;line-height:1.7;color:rgba(255,255,255,.88)}
.level-title{
    display:inline-flex;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    font-weight:800;
}
.level-card.bronze{background:linear-gradient(150deg,#a5643b,#d4894e)}
.level-card.silver{background:linear-gradient(150deg,#8d98ab,#c6cedb)}
.level-card.gold{background:linear-gradient(150deg,#e1a91b,#f0cb4d)}
.level-card.diamond{background:linear-gradient(150deg,#1495bd,#9eeeff)}
.how-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.how-grid article{
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    padding:28px;
}
.how-grid span{
    display:inline-grid;place-items:center;
    width:52px;height:52px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#fff;font-weight:800;
}
.how-grid h3{margin:18px 0 10px;font-size:22px}
.how-grid p{margin:0;color:var(--muted);line-height:1.7}
.cta-band{
    padding:0 0 84px;
}
.cta-band-inner{
    background:linear-gradient(135deg,var(--navy),#27498d);
    color:#fff;
    border-radius:36px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    box-shadow:var(--shadow);
}
.cta-band h2{
    margin:14px 0 0;
    font-size:38px;
    line-height:1.15;
    max-width:700px;
}
.auth-section{
    min-height:calc(100vh - 170px);
    display:grid;
    place-items:center;
    padding:56px 16px;
}
.auth-card{
    width:min(680px,100%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:32px;
    padding:34px;
    box-shadow:0 16px 40px rgba(17,38,79,.08);
}
.auth-card h1{
    font-size:38px;
    margin:0 0 8px;
    letter-spacing:-.03em;
}
.muted{color:var(--muted);line-height:1.7}
.form-grid{display:grid;gap:18px}
.form-grid label > span{
    display:block;
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
}
input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:16px;
    padding:15px 16px;
    font:inherit;
    color:var(--text);
    background:#fff;
}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:#9db0dd;
    box-shadow:0 0 0 4px rgba(30,58,120,.08);
}
.role-grid,.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.role-option{
    display:block;
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    background:#fbfcff;
    cursor:pointer;
}
.role-option input{width:auto;margin-right:8px}
.alert{
    background:#fff2f2;
    color:#b42318;
    border:1px solid #ffd2d2;
    border-radius:18px;
    padding:14px 16px;
    margin:18px 0;
}
.alert.success{
    background:#edfdf3;
    color:#027a48;
    border-color:#b7efcd;
}
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:26px;
}
.dashboard-grid article,
.blogger-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:24px;
}
.dashboard-grid strong{display:block;font-size:34px;color:var(--navy)}
.dashboard-grid span{display:block;margin-top:8px;color:var(--muted)}
.panel-links{
    display:flex;gap:12px;flex-wrap:wrap;margin-top:24px
}
.panel-links a{
    background:var(--navy);
    color:#fff;
    padding:13px 18px;
    border-radius:14px;
}
.table-wrap{
    overflow:auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 12px 32px rgba(17,38,79,.05);
}
table{width:100%;border-collapse:collapse}
th,td{padding:16px;text-align:left;border-bottom:1px solid var(--border)}
th{font-size:14px;background:#f8faff}
.admin-grid{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:22px;
    align-items:start;
}
.blogger-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.blogger-card h3{margin:14px 0 8px}
.blogger-card p{margin:0 0 10px;color:var(--muted)}
.pill{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:#eef3ff;
    color:var(--navy);
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
}
.site-footer{
    margin-top:30px;
    background:var(--navy-dark);
    color:#fff;
    padding:52px 0 18px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:28px;
}
.footer-grid h4{margin:4px 0 14px}
.footer-grid p,.footer-grid a,.footer-grid span{
    display:block;
    color:#cad4eb;
    line-height:1.9;
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.10);
    color:#cad4eb;
    font-size:14px;
}
@media (max-width: 1100px){
    .hero-grid,.split-section,.footer-grid,.admin-grid{grid-template-columns:1fr}
    .feature-grid,.levels-grid,.how-grid,.stats-strip-grid{grid-template-columns:1fr 1fr}
    .cta-band-inner{flex-direction:column;align-items:flex-start}
    .hero-scene{min-height:600px}
}
@media (max-width: 760px){
    .nav{display:none}
    .nav-wrap{min-height:76px}
    .feature-grid,.levels-grid,.how-grid,.stats-strip-grid,.blogger-grid,.dashboard-grid,.two-col,.role-grid{grid-template-columns:1fr}
    .section-head{flex-direction:column;align-items:flex-start}
    .section-head p{max-width:none}
    .hero{padding-top:56px}
    .hero h1,.section h1{font-size:42px}
    .hero-actions{flex-direction:column}
    .profile-card{position:relative;right:auto;top:auto;width:100%;transform:none}
    .floating-banner{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto;margin-top:14px}
    .hero-scene{min-height:auto}
    .topline-inner,.footer-bottom{flex-direction:column;align-items:flex-start}
}

.brand-logo-link{
    display:flex;
    align-items:center;
}
.brand-logo{
    width:178px;
    height:54px;
    object-fit:contain;
    object-position:left center;
}
.footer-logo-link{
    display:inline-flex;
    margin-bottom:18px;
}
.footer-logo{
    width:210px;
    height:68px;
    object-fit:contain;
    object-position:left center;
    filter:brightness(0) invert(1);
}
.language-switcher{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}
.language-switcher a{
    min-width:34px;
    padding:7px 8px;
    border-radius:10px;
    text-align:center;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
}
.language-switcher a.active{
    background:var(--navy);
    color:#fff;
}
@media(max-width:900px){
    .brand-logo{width:145px;height:46px}
    .language-switcher{order:3}
}
@media(max-width:760px){
    .topline{display:none}
    .nav-actions .btn-outline{display:none}
    .brand-logo{width:132px;height:42px}
    .language-switcher a{min-width:30px;padding:6px}
}

.catalog-hero{
    padding:72px 0 46px;
    background:
        radial-gradient(circle at 12% 10%,rgba(245,130,45,.14),transparent 26%),
        radial-gradient(circle at 90% 12%,rgba(244,195,24,.16),transparent 28%),
        linear-gradient(180deg,#fbfcff 0%,#f4f7fc 100%);
}
.catalog-hero h1{
    margin:16px 0 12px;
    font-size:clamp(44px,6vw,76px);
    letter-spacing:-.05em;
}
.catalog-hero p{
    max-width:680px;
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.75;
}
.catalog-section{padding-top:38px}
.catalog-toolbar{
    display:grid;
    grid-template-columns:1fr 220px auto;
    gap:12px;
    padding:16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 12px 34px rgba(17,38,79,.06);
}
.catalog-result-head{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:26px 0 18px;
}
.catalog-result-head strong{
    font-size:28px;
    color:var(--navy);
}
.catalog-result-head span{color:var(--muted)}
.creator-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.creator-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    box-shadow:0 16px 38px rgba(17,38,79,.07);
    transition:transform .25s ease, box-shadow .25s ease;
}
.creator-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 48px rgba(17,38,79,.11);
}
.creator-cover{
    position:relative;
    min-height:150px;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 18% 18%,rgba(255,255,255,.28),transparent 22%),
        linear-gradient(145deg,var(--navy),#2b529c);
}
.creator-cover::after{
    content:'';
    position:absolute;
    right:-32px;
    bottom:-48px;
    width:150px;
    height:150px;
    border:24px solid rgba(245,130,45,.78);
    border-radius:50%;
}
.creator-avatar{
    position:relative;
    z-index:2;
    width:82px;
    height:82px;
    border-radius:28px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#fff;
    font-size:30px;
    font-weight:800;
    box-shadow:0 16px 34px rgba(13,29,63,.22);
}
.creator-level{
    position:absolute;
    z-index:3;
    right:14px;
    top:14px;
    padding:8px 12px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    backdrop-filter:blur(10px);
}
.creator-level.bronze{background:linear-gradient(135deg,#a8633d,#d18a52)}
.creator-level.silver{background:linear-gradient(135deg,#8794a8,#c4ccd8)}
.creator-level.gold{background:linear-gradient(135deg,#dca91f,#efcc54)}
.creator-level.diamond{background:linear-gradient(135deg,#1495bd,#9eeeff);color:#062b36}
.creator-level.pending{background:rgba(255,255,255,.18)}
.creator-body{padding:22px}
.creator-body h3{
    margin:0 0 7px;
    font-size:20px;
    line-height:1.25;
}
.creator-handle{
    display:inline-block;
    color:var(--navy);
    font-weight:700;
    font-size:14px;
}
.creator-metric{
    margin:20px 0 12px;
    padding:15px;
    border-radius:18px;
    background:#f7f9fd;
    border:1px solid var(--border);
}
.creator-metric strong{
    display:block;
    color:var(--navy);
    font-size:28px;
}
.creator-metric span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
}
.creator-meta{
    color:var(--muted);
    font-size:12px;
    margin-bottom:16px;
}
.creator-action{width:100%}
.empty-state{
    padding:40px;
    text-align:center;
    background:#fff;
    border:1px dashed var(--border);
    border-radius:24px;
    color:var(--muted);
}
.table-input{
    min-width:140px;
    padding:10px 12px;
}
@media(max-width:1100px){
    .creator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
    .catalog-toolbar{grid-template-columns:1fr}
    .creator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
    .creator-grid{grid-template-columns:1fr}
}

.home-bloggers-section{
    background:linear-gradient(180deg,#f9fbff 0%,#f2f6fc 100%);
}
.home-blogger-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
}
.home-blogger-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    box-shadow:0 14px 35px rgba(17,38,79,.07);
    transition:.25s ease;
}
.home-blogger-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(17,38,79,.11);
}
.home-blogger-photo{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:linear-gradient(145deg,var(--navy),#2c55a1);
}
.home-blogger-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.home-blogger-fallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:54px;
    font-weight:800;
    background:
        radial-gradient(circle at 25% 20%,rgba(244,195,24,.34),transparent 24%),
        linear-gradient(145deg,var(--navy),#2c55a1);
}
.home-blogger-body{padding:18px}
.home-blogger-body h3{
    margin:0 0 6px;
    font-size:18px;
    line-height:1.25;
}
.home-blogger-body>a{
    color:var(--navy);
    font-size:13px;
    font-weight:700;
}
.home-blogger-followers{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border);
}
.home-blogger-followers strong{
    display:block;
    color:var(--navy);
    font-size:24px;
}
.home-blogger-followers span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}
.home-bloggers-action{
    display:flex;
    justify-content:center;
    margin-top:28px;
}
.creator-avatar-image{
    position:relative;
    z-index:2;
    width:82px;
    height:82px;
    object-fit:cover;
    border-radius:28px;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 16px 34px rgba(13,29,63,.22);
}
.admin-blogger-thumb{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:16px;
    display:block;
    margin-bottom:8px;
}
.table-file{
    min-width:180px;
    padding:8px;
    font-size:12px;
}
@media(max-width:1100px){
    .home-blogger-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
    .home-blogger-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
    .home-blogger-grid{grid-template-columns:1fr}
}


/* V8 — Blogger catalog with large portrait photos */
.creator-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}
.creator-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    box-shadow:0 18px 44px rgba(17,38,79,.08);
    transition:transform .25s ease,box-shadow .25s ease;
}
.creator-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 54px rgba(17,38,79,.12);
}
.creator-photo-wrap{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
    background:linear-gradient(145deg,var(--navy),#2c55a1);
}
.creator-photo{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:transform .35s ease;
}
.creator-card:hover .creator-photo{transform:scale(1.035)}
.creator-photo-fallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:72px;
    font-weight:800;
    background:radial-gradient(circle at 20% 20%,rgba(244,195,24,.28),transparent 26%),linear-gradient(145deg,var(--navy),#2c55a1);
}
.creator-photo-wrap .creator-level{
    position:absolute;
    top:16px;
    right:16px;
    z-index:3;
    padding:9px 14px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.creator-body{padding:22px 22px 24px}
.creator-body h3{margin:0 0 8px;font-size:22px;line-height:1.25}
.creator-handle{font-size:14px}
.creator-metric{margin:18px 0 12px;padding:16px}
.creator-metric strong{font-size:30px}
.creator-action{width:100%;min-height:52px;border-radius:16px}
@media(max-width:1100px){.creator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.creator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.creator-grid{grid-template-columns:1fr}.creator-photo-wrap{aspect-ratio:1/1.15}}


/* V9 — blogger account activation */
.claim-link{
    color:var(--navy);
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}
.claim-link:hover{color:var(--orange)}
.claim-card{max-width:720px}
.claim-admin-list{
    display:grid;
    gap:16px;
    margin-top:28px;
}
.claim-admin-card{
    display:grid;
    grid-template-columns:1fr minmax(320px,520px);
    gap:24px;
    align-items:center;
    padding:24px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 12px 32px rgba(17,38,79,.05);
}
.claim-admin-card h3{margin:10px 0 6px}
.claim-admin-card p{color:var(--muted)}
.claim-admin-actions{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:10px;
}
.claim-status{
    display:inline-flex;
    width:max-content;
    padding:7px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.claim-status.pending{background:#fff6da;color:#8c6500}
.claim-status.approved,
.claim-status.active{background:#e8faef;color:#087443}
.claim-status.rejected{background:#fff0f0;color:#b42318}
.claim-status.unclaimed{background:#eef2f8;color:#5d687b}
.blogger-dashboard-hero{
    display:flex;
    align-items:center;
    gap:24px;
    margin:28px 0;
    padding:28px;
    border-radius:30px;
    color:#fff;
    background:linear-gradient(135deg,var(--navy),#2a519b);
    box-shadow:var(--shadow);
}
.blogger-dashboard-hero h1{margin:0 0 8px;font-size:42px}
.blogger-dashboard-hero a{color:#ffe08c;font-weight:800}
.blogger-dashboard-hero .muted{color:#d8e1f5}
.blogger-dashboard-photo{
    width:128px;
    height:128px;
    flex:0 0 128px;
    border-radius:32px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#fff;
    font-size:44px;
    font-weight:800;
    border:4px solid rgba(255,255,255,.8);
}
.blogger-dashboard-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.dashboard-placeholder-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:22px;
}
.dashboard-placeholder-grid article{
    padding:26px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--border);
}
.dashboard-placeholder-grid h3{margin:0 0 10px}
.dashboard-placeholder-grid p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:1100px){
    .claim-link{display:none}
}
@media(max-width:760px){
    .claim-admin-card{grid-template-columns:1fr}
    .claim-admin-actions{grid-template-columns:1fr}
    .blogger-dashboard-hero{align-items:flex-start;flex-direction:column}
    .dashboard-placeholder-grid{grid-template-columns:1fr}
}


/* =========================================================
   V11 UI FIXES
   ========================================================= */

/* Prevent level labels from escaping into the page header */
.creator-level{
    position:static;
}
.creator-card-level{
    position:absolute;
    top:16px;
    right:16px;
    z-index:5;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 14px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    line-height:1;
    font-weight:800;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.creator-card-level.bronze{background:linear-gradient(135deg,#a8633d,#d18a52)}
.creator-card-level.silver{background:linear-gradient(135deg,#8794a8,#c4ccd8)}
.creator-card-level.gold{background:linear-gradient(135deg,#dca91f,#efcc54)}
.creator-card-level.pending{background:rgba(20,35,65,.72)}

/* Blogger images always fill the complete upper card area */
.creator-photo-wrap{
    position:relative;
    display:block;
    width:100%;
    height:360px;
    aspect-ratio:auto;
    overflow:hidden;
    background:#e9eef7;
}
.creator-photo{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:0 !important;
}
.creator-photo-fallback{
    width:100%;
    height:100%;
}
.creator-card{
    isolation:isolate;
}
.creator-card > .creator-body{
    position:relative;
    z-index:2;
    background:#fff;
}

/* Mobile hamburger */
.mobile-menu-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}
.mobile-menu-toggle span{
    width:21px;
    height:2px;
    border-radius:999px;
    background:var(--navy);
    transition:transform .2s ease,opacity .2s ease;
}
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}
.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
    border-top:1px solid var(--border);
    background:#fff;
    box-shadow:0 18px 40px rgba(17,38,79,.09);
}
.mobile-menu[hidden]{display:none !important}
.mobile-menu-inner{
    padding-top:18px;
    padding-bottom:22px;
}
.mobile-nav{
    display:grid;
}
.mobile-nav a{
    padding:15px 4px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-weight:800;
}
.mobile-language-switcher{
    display:flex;
    gap:8px;
    margin:18px 0;
}
.mobile-language-switcher a{
    flex:1;
    padding:10px;
    text-align:center;
    border:1px solid var(--border);
    border-radius:12px;
    font-weight:800;
}
.mobile-language-switcher a.active{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
}
.mobile-auth-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
body.menu-open{overflow:hidden}

/* Admin blogger filters */
.admin-blogger-filters{
    display:grid;
    grid-template-columns:minmax(230px,1.4fr) repeat(3,minmax(150px,.8fr)) auto auto;
    gap:10px;
    margin:26px 0 14px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 30px rgba(17,38,79,.05);
}
.admin-filter-result{
    margin:0 0 14px;
    color:var(--muted);
}
.admin-filter-result strong{
    color:var(--navy);
    font-size:22px;
}
.admin-blogger-identity{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:210px;
}
.admin-blogger-identity img,
.admin-blogger-identity > span{
    width:64px;
    height:64px;
    flex:0 0 64px;
    border-radius:18px;
    object-fit:cover;
    object-position:center;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#fff;
    font-weight:800;
}
.admin-blogger-identity strong,
.admin-blogger-identity small{
    display:block;
}
.admin-blogger-identity small{
    margin-top:5px;
    color:var(--muted);
}
.admin-level-badge{
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.admin-level-badge.bronze{background:#b87549}
.admin-level-badge.silver{background:#9ca7b8}
.admin-level-badge.gold{background:#d8a91f}
.admin-level-badge.diamond{background:#49bde0;color:#062b36}
.admin-level-badge.pending{background:#6d7789}

.switch-control{
    position:relative;
    display:inline-flex;
}
.switch-control input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.switch-control span{
    position:relative;
    display:block;
    width:48px;
    height:28px;
    border-radius:999px;
    background:#cfd5df;
    cursor:pointer;
    transition:.2s ease;
}
.switch-control span::after{
    content:'';
    position:absolute;
    top:4px;
    left:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 8px rgba(0,0,0,.18);
    transition:.2s ease;
}
.switch-control input:checked + span{
    background:var(--navy);
}
.switch-control input:checked + span::after{
    transform:translateX(20px);
}

@media(max-width:1100px){
    .admin-blogger-filters{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:900px){
    .desktop-nav,
    .desktop-actions{
        display:none !important;
    }
    .mobile-menu-toggle{
        display:flex;
    }
    .nav-wrap{
        min-height:76px;
    }
    .brand-logo{
        width:145px;
        height:46px;
    }
    .creator-photo-wrap{
        height:320px;
    }
}

@media(max-width:600px){
    .admin-blogger-filters{
        grid-template-columns:1fr;
    }
    .mobile-auth-actions{
        grid-template-columns:1fr;
    }
    .creator-photo-wrap{
        height:420px;
    }
}

/* V12 admin multilingual */


/* V13 profile approval, offers and notifications */
.notification-bell{
    position:relative;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}
.notification-bell b{
    position:absolute;
    right:-5px;
    top:-6px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--orange);
    color:#fff;
    font-size:10px;
}
.notification-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.notification-list,.offer-list,.profile-change-list{
    display:grid;
    gap:14px;
}
.notification-item{
    display:grid;
    grid-template-columns:12px 1fr;
    gap:14px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
}
.notification-item.unread{
    border-color:#adc0ed;
    background:#f7f9ff;
}
.notification-dot{
    width:10px;
    height:10px;
    margin-top:7px;
    border-radius:50%;
    background:#cbd2df;
}
.notification-item.unread .notification-dot{background:var(--orange)}
.notification-item strong{display:block;margin-bottom:6px}
.notification-item p{margin:0 0 8px;color:var(--muted)}
.notification-item small{color:var(--muted)}
.profile-edit-layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:24px;
    align-items:start;
}
.profile-current-card{
    position:sticky;
    top:120px;
    padding:22px;
    border-radius:26px;
    background:#fff;
    border:1px solid var(--border);
}
.profile-current-card img{
    width:100%;
    aspect-ratio:1/1.1;
    object-fit:cover;
    border-radius:20px;
}
.profile-current-card h2{margin:18px 0 6px}
.profile-current-card p{color:var(--navy)}
.profile-current-card span{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:#eef3ff;
    color:var(--navy);
    font-weight:800;
}
.profile-edit-form{width:100%;max-width:none}
.blogger-dashboard-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 22px;
}
.profile-change-tabs{
    display:flex;
    gap:8px;
    margin:22px 0;
}
.profile-change-tabs a{
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    font-weight:800;
}
.profile-change-tabs a.active{background:var(--navy);color:#fff}
.profile-change-card,.offer-card{
    padding:24px;
    border-radius:24px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:0 10px 30px rgba(17,38,79,.05);
}
.profile-change-values{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 20px;
    margin:18px 0;
    padding:18px;
    border-radius:18px;
    background:#f8faff;
}
.profile-change-values .wide{grid-column:1/-1}
.profile-change-preview{
    max-width:240px;
    max-height:280px;
    object-fit:cover;
    border-radius:18px;
}
.profile-change-actions,.offer-actions{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:10px;
    margin-top:16px;
}
.offer-actions{
    grid-template-columns:1fr auto auto auto;
}
.offer-actions textarea{grid-column:1/-1}
.offer-card h3{margin:10px 0}
.offer-company{color:var(--navy);font-weight:800}
.claim-status.accepted{background:#e8faef;color:#087443}
.claim-status.countered{background:#eef3ff;color:#27498d}
.claim-status.completed{background:#e9f8ff;color:#13617a}
@media(max-width:900px){
    .profile-edit-layout{grid-template-columns:1fr}
    .profile-current-card{position:static}
}
@media(max-width:700px){
    .notification-page-head{align-items:flex-start;flex-direction:column}
    .profile-change-values{grid-template-columns:1fr}
    .profile-change-values .wide{grid-column:auto}
    .profile-change-actions,.offer-actions{grid-template-columns:1fr}
}


/* V14 full moderation */
.content-card{
  padding:32px;border:1px solid var(--border);border-radius:26px;background:#fff;
  box-shadow:0 14px 40px rgba(17,38,79,.06);
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.account-status-banner{
  margin:22px 0;padding:20px 22px;border-radius:20px;border:1px solid var(--border);background:#f8faff
}
.account-status-banner.approved,.account-status-banner.active{background:#edfbf3;border-color:#b7e5c9}
.account-status-banner.changes_requested,.account-status-banner.rejected{background:#fff5f2;border-color:#f2c6bb}
.admin-review-note{
  margin-top:12px;padding:14px 16px;border-radius:14px;background:#fff4d8;color:#6d4e00;border:1px solid #f0d28d
}
.moderation-grid{display:grid;gap:16px;margin-top:22px}
.moderation-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);gap:22px;
  padding:24px;border:1px solid var(--border);border-radius:24px;background:#fff;
  box-shadow:0 12px 34px rgba(17,38,79,.05)
}
.moderation-card h3{margin:10px 0 6px}
.moderation-actions{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:end}
.moderation-actions textarea{grid-column:1/-1}
.claim-status.changes_requested{background:#fff4d8;color:#6d4e00}
@media(max-width:850px){
  .moderation-card{grid-template-columns:1fr}
  .moderation-actions{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

/* =========================================================
   V28 — Editorial playful redesign inspired by supplied video
   Brand palette remains MOST navy + orange/yellow
   ========================================================= */
:root{
  --navy:#173568;
  --navy-dark:#0f274e;
  --orange:#f07c2f;
  --yellow:#f7c52f;
  --cream:#f7efcf;
  --cream-2:#fff8df;
  --lime:#b9d85a;
  --coral:#ef5b3f;
  --ink:#16315c;
  --text:#183156;
  --muted:#6d765f;
  --border:rgba(23,53,104,.14);
  --shadow:0 18px 55px rgba(31,55,91,.12);
  --radius:30px;
}
body{
  background:var(--cream-2);
  color:var(--text);
  overflow-x:hidden;
}
.container{width:min(1260px,calc(100% - 42px))}
.topline{display:none}
.site-header{
  top:0;
  background:rgba(255,249,224,.92);
  border-bottom:1px solid rgba(23,53,104,.12);
  box-shadow:0 8px 28px rgba(25,49,88,.06);
}
.nav-wrap{min-height:74px}
.brand-logo{width:132px;height:auto;object-fit:contain}
.nav{gap:25px;font-size:14px;color:var(--navy)}
.nav a{position:relative}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:3px;
  border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--yellow));
  transform:scaleX(0);transform-origin:left;transition:.25s ease
}
.nav a:hover::after{transform:scaleX(1)}
.language-switcher,.mobile-language-switcher{
  background:rgba(255,255,255,.54);border:1px solid var(--border);border-radius:999px;padding:4px
}
.language-switcher a,.mobile-language-switcher a{border-radius:999px}
.btn{border-radius:999px;padding:12px 20px}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--yellow));color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff8df;color:var(--navy);border:1px solid rgba(23,53,104,.22)}
.btn-outline{background:transparent;border:1px solid rgba(23,53,104,.22);color:var(--navy)}
.notification-bell{border-radius:999px;background:#fff8df}

.hero{
  position:relative;
  padding:82px 0 76px;
  background:
    radial-gradient(circle at 6% 22%,rgba(247,197,47,.32) 0 7%,transparent 7.2%),
    radial-gradient(circle at 95% 15%,rgba(185,216,90,.32) 0 9%,transparent 9.2%),
    linear-gradient(135deg,#fff7d8 0%,#f7efcf 56%,#fff6d7 100%);
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:12px;
  background:linear-gradient(90deg,var(--navy) 0 34%,var(--orange) 34% 48%,var(--yellow) 48% 67%,var(--navy) 67%)
}
.hero-grid{grid-template-columns:1.02fr .98fr;gap:62px;align-items:center}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  background:transparent;color:var(--navy);padding:0;border-radius:0;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase
}
.eyebrow::before{content:'';width:14px;height:7px;border-radius:99px 99px 0 0;background:var(--orange)}
.hero h1,.section h1{
  font-size:clamp(54px,6.3vw,92px);line-height:.94;letter-spacing:-.065em;
  color:var(--navy);max-width:720px
}
.hero h1 span{
  display:inline-block;color:var(--orange);position:relative
}
.hero h1 span::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:13px;
  border-radius:999px;background:var(--yellow);z-index:-1;transform:rotate(-1deg)
}
.hero p{max-width:610px;color:#5f6e5f;font-size:17px;line-height:1.75}
.hero-actions{margin-top:30px}
.hero-pills{margin-top:28px}
.hero-pills span{
  background:transparent;border:1px solid rgba(23,53,104,.18);color:var(--navy);
  border-radius:999px;padding:9px 13px
}

.most-collage{min-height:535px;position:relative}
.collage-photo{position:absolute;margin:0;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.collage-photo img{width:100%;height:100%;object-fit:cover;display:block}
.collage-photo-main{width:235px;height:325px;right:150px;top:80px;border-radius:120px 120px 28px 28px;transform:rotate(3deg)}
.collage-photo-top{width:190px;height:235px;right:0;top:20px;border-radius:30px 90px 30px 30px;transform:rotate(-3deg)}
.collage-photo-bottom{width:180px;height:220px;right:10px;bottom:12px;border-radius:95px 28px 28px 28px;transform:rotate(4deg)}
.collage-photo-round{width:178px;height:178px;left:18px;bottom:45px;border-radius:50%;border:8px solid #fff8df}
.viral-chip{
  position:absolute;right:14px;top:176px;z-index:4;padding:14px 19px;border-radius:999px;
  background:var(--coral);color:#fff;font-weight:900;font-size:13px;transform:rotate(-5deg);box-shadow:0 14px 28px rgba(239,91,63,.26)
}
.shape{position:absolute;display:block;z-index:3}
.shape-one{width:55px;height:88px;left:7px;top:45px;border-radius:18px;background:var(--yellow)}
.shape-two{width:35px;height:35px;left:268px;bottom:27px;border-radius:9px;background:var(--lime)}
.shape-three{width:58px;height:22px;left:120px;bottom:9px;border-radius:999px;background:var(--orange);transform:rotate(-7deg)}
.collage-dot{position:absolute;width:49px;height:49px;right:58px;bottom:58px;border-radius:50%;background:var(--yellow);z-index:5}

.stats-strip{padding:54px 0 8px;background:var(--cream-2)}
.stats-strip-grid{gap:14px}
.stats-strip article{
  background:transparent;border:0;border-top:1px solid rgba(23,53,104,.18);
  box-shadow:none;border-radius:0;padding:21px 4px
}
.stats-strip strong{color:var(--orange);font-size:38px;letter-spacing:-.04em}
.stats-strip span{color:#66715e}
.section{padding:92px 0;background:var(--cream-2)}
.section-alt{background:#f3e9c5}
.section-head h2{font-size:clamp(38px,5vw,62px);color:var(--navy);letter-spacing:-.055em}
.section-head p{color:#66715e}
.feature-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.feature-card{
  min-height:270px;border:1px solid rgba(23,53,104,.12);border-radius:28px;
  background:#fff9e6;box-shadow:none;padding:28px;transition:.25s ease
}
.feature-card:nth-child(1){background:#f7c52f}
.feature-card:nth-child(2){background:#fffdf1}
.feature-card:nth-child(3){background:#b9d85a}
.feature-card:nth-child(4){background:#f07c2f;color:#fff}
.feature-card:hover{transform:translateY(-7px) rotate(-.5deg);box-shadow:var(--shadow)}
.feature-card .num{background:var(--navy);color:#fff;border-radius:999px}
.feature-card:nth-child(4) p{color:#fff4df}
.feature-card h3{color:var(--navy)}
.feature-card:nth-child(4) h3{color:#fff}
.feature-card p{color:#556254}
.split-section{gap:18px}
.info-panel{border-radius:34px;padding:42px;min-height:410px}
.info-panel.dark{background:var(--navy);box-shadow:none}
.info-panel.light-card{background:var(--yellow);border:0;box-shadow:none}
.info-panel.light-card p,.info-panel.light-card span{color:#4f5c4c}
.info-boxes>div{background:rgba(255,255,255,.48);border:0}
.levels-section{background:#fff7d8}
.levels-grid{gap:14px}
.level-card{border-radius:26px;box-shadow:none;border:1px solid rgba(23,53,104,.12)}
.level-card.bronze{background:linear-gradient(135deg,#bd6b3a,#e2925c);color:#fff}
.level-card.silver{background:linear-gradient(135deg,#94a0b1,#c6cfda);color:#fff}
.level-card.gold{background:linear-gradient(135deg,#e0a800,#f6c934);color:#fff}
.level-card.diamond{background:linear-gradient(135deg,#1495bd,#9eeeff);color:#062b36}
.level-card p{color:rgba(255,255,255,.86)}
.home-bloggers-section{background:#f3e9c5}
.home-blogger-grid{gap:14px}
.home-blogger-card{border-radius:28px;background:#fff9e6;border:0;box-shadow:none;overflow:hidden}
.home-blogger-card:hover{transform:translateY(-6px)}
.home-blogger-photo{height:330px}
.home-blogger-photo img{transition:.45s ease}
.home-blogger-card:hover img{transform:scale(1.05)}
.how-section{background:#fff7d8}
.how-grid{gap:14px}
.how-grid article{background:#fff;border:1px solid rgba(23,53,104,.12);border-radius:26px;box-shadow:none}
.how-grid article span{background:var(--yellow);color:var(--navy);border-radius:999px}
.cta-band{background:var(--navy);padding:72px 0;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;width:270px;height:270px;border-radius:50%;right:-80px;top:-110px;background:rgba(247,197,47,.2)}
.cta-band::after{content:'';position:absolute;width:190px;height:190px;border-radius:50%;left:-60px;bottom:-100px;background:rgba(240,124,47,.22)}
.cta-band-inner{position:relative;z-index:2}
.site-footer{background:var(--navy-dark);color:#fff7df;border-top:0}
.footer-grid{padding-top:58px}
.footer-grid p,.footer-grid a,.footer-grid span{color:#d8dfd5}
.footer-bottom{border-color:rgba(255,255,255,.12)}
.footer-logo{filter:brightness(0) invert(1)}

/* Global inner pages */
.catalog-hero,.auth-section{
  background:
    radial-gradient(circle at 93% 15%,rgba(247,197,47,.2),transparent 22%),
    linear-gradient(135deg,#fff7d8,#f5eccb)
}
.catalog-hero{padding:74px 0}
.catalog-hero h1{color:var(--navy);font-size:clamp(48px,7vw,82px);letter-spacing:-.06em}
.catalog-toolbar,.auth-card,.content-card,.company-admin-card,.profile-change-card,.offer-card,.moderation-card{
  background:#fffdf4!important;border:1px solid rgba(23,53,104,.12)!important;
  box-shadow:0 18px 50px rgba(23,53,104,.08)!important;border-radius:28px!important
}
.creator-card{background:#fffdf4;border:0;box-shadow:none;border-radius:28px;overflow:hidden}
.creator-card:hover{transform:translateY(-6px)}
.creator-photo-wrap{background:#eadfba}
.creator-action{background:var(--navy)}
.form-grid input,.form-grid select,.form-grid textarea,.catalog-toolbar input,.catalog-toolbar select{
  background:#fffdf4;border-color:rgba(23,53,104,.16);border-radius:16px
}
.claim-status,.company-status{border-radius:999px}

@media(max-width:1050px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .most-collage{max-width:680px;width:100%;margin:0 auto}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .stats-strip-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .container{width:min(100% - 28px,1260px)}
  .hero{padding:54px 0 58px}
  .hero h1,.section h1{font-size:clamp(48px,15vw,72px)}
  .most-collage{min-height:445px}
  .collage-photo-main{width:200px;height:275px;right:95px;top:70px}
  .collage-photo-top{width:145px;height:185px;right:0}
  .collage-photo-bottom{width:145px;height:180px;right:0}
  .collage-photo-round{width:135px;height:135px;left:0}
  .feature-grid,.stats-strip-grid,.split-section{grid-template-columns:1fr}
  .section{padding:68px 0}
  .section-head{align-items:flex-start;flex-direction:column}
  .home-blogger-photo{height:390px}
}
@media(max-width:480px){
  .most-collage{min-height:385px}
  .collage-photo-main{width:170px;height:235px;right:70px;top:65px}
  .collage-photo-top{width:120px;height:150px}
  .collage-photo-bottom{width:120px;height:150px}
  .collage-photo-round{width:110px;height:110px}
  .viral-chip{right:0;top:145px}
}

/* =========================================================
   V29 — Motion design in original MOST blue / orange palette
   Layout rhythm inspired by supplied reference video.
   ========================================================= */
:root{
  --navy:#1f4386;
  --navy-dark:#15336c;
  --orange:#f5822d;
  --yellow:#f7b91e;
  --bg:#f5f7fb;
  --bg-soft:#edf2fb;
  --surface:#ffffff;
  --surface-2:#f7f9fd;
  --text:#16233d;
  --muted:#6f7b91;
  --border:rgba(31,67,134,.13);
  --shadow:0 24px 70px rgba(23,51,108,.12);
  --motion-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
}
.container{width:min(1240px,calc(100% - 40px))}
.topline{display:block;background:linear-gradient(90deg,var(--navy-dark),var(--navy));color:#eaf1ff}
.site-header{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 28px rgba(24,54,113,.06);
  transition:min-height .35s var(--motion-ease),box-shadow .35s ease,background .35s ease;
}
.site-header.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 14px 42px rgba(23,51,108,.12)}
.site-header.is-scrolled .nav-wrap{min-height:68px}
.nav-wrap{min-height:82px;transition:min-height .35s var(--motion-ease)}
.brand-logo{width:132px}
.nav{color:#33486f}
.nav a::after{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.language-switcher,.mobile-language-switcher{background:#f7f9fd;border-color:var(--border)}
.btn{border-radius:16px}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--yellow));color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy);border:1px solid var(--border)}
.btn-outline{background:#fff;border:1px solid var(--border);color:var(--navy)}
.notification-bell{background:#f5f7fb}

.hero{
  position:relative;
  padding:92px 0 84px;
  background:
    radial-gradient(circle at 7% 20%,rgba(245,130,45,.17),transparent 22%),
    radial-gradient(circle at 95% 8%,rgba(247,185,30,.18),transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#f2f6fd 58%,#fff8ed 100%);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:auto -10% -160px 35%;height:310px;
  border-radius:50%;background:rgba(31,67,134,.055);transform:rotate(-7deg)
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(90deg,var(--navy) 0 53%,var(--orange) 53% 76%,var(--yellow) 76%);
}
.hero-grid{gap:68px}
.eyebrow{background:#edf3ff;color:var(--navy);padding:9px 14px;border-radius:999px;letter-spacing:.035em}
.eyebrow::before{background:var(--orange)}
.hero h1,.section h1{color:var(--navy);font-size:clamp(52px,6vw,88px)}
.hero h1 span{color:var(--orange)}
.hero h1 span::after{background:rgba(247,185,30,.48)}
.hero p{color:var(--muted)}
.hero-pills span{background:#fff;border-color:var(--border);color:#465879;box-shadow:0 8px 24px rgba(23,51,108,.05)}

.most-collage{perspective:1200px;transform-style:preserve-3d}
.collage-photo{border:5px solid #fff;box-shadow:0 26px 60px rgba(23,51,108,.17);will-change:transform}
.collage-photo-main{border-radius:110px 110px 30px 30px}
.collage-photo-top{border-radius:28px 82px 28px 28px}
.collage-photo-bottom{border-radius:92px 28px 28px 28px}
.collage-photo-round{border-color:#fff}
.viral-chip{background:var(--orange);box-shadow:0 14px 28px rgba(245,130,45,.3)}
.shape-one{background:var(--yellow)}
.shape-two{background:var(--navy)}
.shape-three{background:var(--orange)}
.collage-dot{background:var(--yellow)}

.stats-strip,.section{background:var(--bg)}
.section-alt,.home-bloggers-section{background:var(--bg-soft)}
.levels-section,.how-section{background:#fff}
.stats-strip article{border-top-color:var(--border)}
.stats-strip strong{color:var(--orange)}
.stats-strip span,.section-head p{color:var(--muted)}
.section-head h2{color:var(--navy)}
.feature-card{
  background:#fff;border:1px solid var(--border);box-shadow:0 12px 36px rgba(23,51,108,.055);
  transition:transform .45s var(--motion-ease),box-shadow .45s ease,border-color .45s ease;
}
.feature-card:nth-child(1){background:linear-gradient(145deg,#fff,#fff4e8)}
.feature-card:nth-child(2){background:linear-gradient(145deg,#fff,#f0f5ff)}
.feature-card:nth-child(3){background:linear-gradient(145deg,#fff,#fff9e9)}
.feature-card:nth-child(4){background:linear-gradient(145deg,var(--navy),#2d5aa6);color:#fff}
.feature-card:hover{transform:translateY(-10px) rotate(-.4deg);box-shadow:var(--shadow);border-color:rgba(245,130,45,.24)}
.feature-card .num{background:linear-gradient(135deg,var(--orange),var(--yellow));color:#fff}
.feature-card h3{color:var(--navy)}
.feature-card:nth-child(4) h3{color:#fff}
.feature-card p{color:var(--muted)}
.feature-card:nth-child(4) p{color:#dce7fb}
.info-panel.dark{background:linear-gradient(145deg,var(--navy-dark),var(--navy));box-shadow:0 24px 60px rgba(23,51,108,.18)}
.info-panel.light-card{background:linear-gradient(145deg,#fff,#fff4e8);border:1px solid rgba(245,130,45,.18)}
.info-panel.light-card p,.info-panel.light-card span{color:var(--muted)}
.info-boxes>div{background:#fff;border:1px solid var(--border)}
.home-blogger-card{background:#fff;border:1px solid var(--border);box-shadow:0 12px 34px rgba(23,51,108,.07)}
.how-grid article{background:#fff;border-color:var(--border);box-shadow:0 12px 34px rgba(23,51,108,.06)}
.how-grid article span{background:linear-gradient(135deg,var(--orange),var(--yellow));color:#fff}
.cta-band{background:linear-gradient(145deg,var(--navy-dark),var(--navy))}
.cta-band::before{background:rgba(247,185,30,.18)}
.cta-band::after{background:rgba(245,130,45,.2)}
.site-footer{background:var(--navy-dark);color:#eef4ff}
.footer-grid p,.footer-grid a,.footer-grid span{color:#cbd8f0}

/* Scroll reveal */
.motion-reveal{
  opacity:0;
  transform:translate3d(0,42px,0) scale(.985);
  transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.motion-reveal.from-left{transform:translate3d(-48px,0,0)}
.motion-reveal.from-right{transform:translate3d(48px,0,0)}
.motion-reveal.from-left.is-visible,.motion-reveal.from-right.is-visible{transform:translate3d(0,0,0)}
.motion-float{animation:mostFloat 5.2s ease-in-out infinite}
.motion-float:nth-child(2){animation-delay:-1.2s}
.motion-float:nth-child(3){animation-delay:-2.4s}
.motion-float:nth-child(4){animation-delay:-3.4s}
@keyframes mostFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes mostPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.viral-chip,.collage-dot{animation:mostPulse 3.8s ease-in-out infinite}

/* Horizontal kinetic strip */
.most-marquee{overflow:hidden;background:var(--navy);color:#fff;border-block:1px solid rgba(255,255,255,.08)}
.most-marquee-track{display:flex;width:max-content;gap:34px;padding:14px 0;animation:mostMarquee 24s linear infinite}
.most-marquee-track span{display:inline-flex;align-items:center;gap:16px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.most-marquee-track span::after{content:'•';color:var(--yellow);font-size:20px}
@keyframes mostMarquee{to{transform:translateX(-50%)}}

/* Subtle card tilt and page movement */
[data-tilt]{transform-style:preserve-3d;transition:transform .22s ease,box-shadow .22s ease}
.motion-progress{position:fixed;left:0;top:0;z-index:100;height:3px;width:0;background:linear-gradient(90deg,var(--orange),var(--yellow));box-shadow:0 2px 9px rgba(245,130,45,.38);pointer-events:none}

/* Keep all internal/public pages in original palette */
.catalog-hero,.auth-section,.admin-companies-page,.send-offer-page{
  background:
    radial-gradient(circle at 92% 4%,rgba(247,185,30,.12),transparent 24%),
    radial-gradient(circle at 6% 22%,rgba(245,130,45,.1),transparent 22%),
    linear-gradient(180deg,#f8faff,#f1f5fb)!important;
}
.content-card,.auth-card,.creator-card,.company-card,.offer,.company-admin-card,.moderation-card{
  background:#fff;border-color:var(--border);box-shadow:0 14px 42px rgba(23,51,108,.07)
}

@media(max-width:900px){
  .container{width:min(100% - 28px,1240px)}
  .topline{display:none}
  .hero{padding:56px 0 58px}
  .hero-grid{gap:34px}
  .motion-reveal.from-left,.motion-reveal.from-right{transform:translate3d(0,34px,0)}
  .most-marquee-track{animation-duration:18s}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .motion-reveal,.motion-reveal.from-left,.motion-reveal.from-right{opacity:1;transform:none}
}

/* =========================================================
   V30 — Original MOST white background tones
   Motion effects remain unchanged; only page surfaces are lightened.
   ========================================================= */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f9fd;
  --surface:#ffffff;
  --surface-2:#fbfcff;
}
body{background:#fff;color:var(--text)}
.hero{
  background:
    radial-gradient(circle at 7% 20%,rgba(245,130,45,.10),transparent 22%),
    radial-gradient(circle at 95% 8%,rgba(247,185,30,.11),transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#fbfcff 62%,#fffaf4 100%);
}
.stats-strip,.section{background:#fff}
.section-alt,.home-bloggers-section{background:#f8faff}
.levels-section,.how-section{background:#fff}
.catalog-hero,.auth-section,.admin-companies-page,.send-offer-page{
  background:
    radial-gradient(circle at 92% 4%,rgba(247,185,30,.07),transparent 24%),
    radial-gradient(circle at 6% 22%,rgba(245,130,45,.06),transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f9fbff 100%)!important;
}
.catalog-section,.contact-section,.companies-section,.bloggers-section{background:#fff}
.content-card,.auth-card,.creator-card,.company-card,.offer,.company-admin-card,.moderation-card,
.catalog-toolbar,.profile-change-card,.offer-card{
  background:#fff!important;
}
.site-header{background:rgba(255,255,255,.94)}
.site-header.is-scrolled{background:rgba(255,255,255,.98)}

/* =========================================================
   V31 — cinematic motion redesign, original MOST palette
   ========================================================= */
body.home-page, body{background:#fff}
.hero{min-height:760px;display:flex;align-items:center;isolation:isolate}
.hero-grid{min-height:610px}
.hero-copy>*{opacity:0;animation:heroCopyIn .95s var(--motion-ease) forwards}
.hero-copy .eyebrow{animation-delay:.08s}
.hero-copy h1{animation-delay:.18s}
.hero-copy p{animation-delay:.30s}
.hero-copy .hero-actions{animation-delay:.42s}
.hero-copy .hero-pills{animation-delay:.54s}
@keyframes heroCopyIn{from{opacity:0;transform:translate3d(-70px,34px,0) rotate(-1.6deg);filter:blur(9px)}to{opacity:1;transform:none;filter:none}}

.most-collage{min-height:590px;position:relative;transform-style:preserve-3d}
.most-collage .collage-photo{opacity:0;animation:heroCardLaunch 1.15s var(--motion-ease) forwards,heroDrift 7s ease-in-out infinite 1.3s;overflow:visible}
.most-collage .collage-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.most-collage .collage-photo figcaption{position:absolute;left:14px;bottom:12px;z-index:4;padding:7px 11px;border-radius:999px;background:rgba(16,42,86,.82);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(9px);opacity:0;transform:translateY(10px);transition:.35s ease}
.most-collage .collage-photo:hover figcaption{opacity:1;transform:none}
.most-collage .collage-photo-main{animation-delay:.12s,1.5s}
.most-collage .collage-photo-top{animation-delay:.28s,1.8s}
.most-collage .collage-photo-bottom{animation-delay:.40s,2.1s}
.most-collage .collage-photo-round{animation-delay:.54s,2.4s}
.most-collage .collage-photo-extra{animation-delay:.68s,2.7s}
@keyframes heroCardLaunch{
  0%{opacity:0;filter:blur(14px);transform:translate3d(var(--launch-x,80px),var(--launch-y,-80px),120px) rotate(var(--launch-r,12deg)) scale(.72)}
  65%{opacity:1;filter:blur(0);transform:translate3d(-8px,8px,0) rotate(-1deg) scale(1.035)}
  100%{opacity:1;filter:none;transform:none}
}
@keyframes heroDrift{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:.65deg}}
.collage-photo-main{--launch-x:110px;--launch-y:25px;--launch-r:9deg}
.collage-photo-top{--launch-x:-90px;--launch-y:-100px;--launch-r:-16deg}
.collage-photo-bottom{--launch-x:100px;--launch-y:110px;--launch-r:14deg}
.collage-photo-round{--launch-x:-130px;--launch-y:75px;--launch-r:-18deg}
.collage-photo-extra{--launch-x:75px;--launch-y:-120px;--launch-r:18deg}

.collage-photo-extra{position:absolute;right:0;top:215px;width:145px;height:188px;border-radius:28px 80px 28px 28px;z-index:5;border:5px solid #fff;box-shadow:0 26px 60px rgba(23,51,108,.17)}
.hero-orbit{position:absolute;border:1px solid rgba(31,67,134,.18);border-radius:50%;pointer-events:none;animation:orbitSpin 16s linear infinite}
.hero-orbit-one{width:520px;height:520px;right:5px;top:34px}
.hero-orbit-two{width:390px;height:390px;right:70px;top:95px;border-style:dashed;animation-direction:reverse;animation-duration:21s}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.hero-scroll-hint{position:absolute;right:42px;bottom:12px;width:30px;height:50px;border:1.5px solid rgba(31,67,134,.28);border-radius:999px}
.hero-scroll-hint i{position:absolute;left:50%;top:9px;width:5px;height:9px;border-radius:99px;background:var(--orange);transform:translateX(-50%);animation:scrollDot 1.7s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,19px)}}

/* Stronger alternating reveals */
.motion-reveal{opacity:0;filter:blur(8px);transform:translate3d(0,76px,0) scale(.94) rotate(.7deg);transition:opacity 1s var(--motion-ease),transform 1s var(--motion-ease),filter 1s ease}
.motion-reveal.from-left{transform:translate3d(-110px,28px,0) rotate(-2.5deg) scale(.95)}
.motion-reveal.from-right{transform:translate3d(110px,28px,0) rotate(2.5deg) scale(.95)}
.motion-reveal.from-top{transform:translate3d(0,-100px,0) rotate(-1deg) scale(.96)}
.motion-reveal.zoom-in{transform:translate3d(0,40px,0) scale(.78)}
.motion-reveal.is-visible{opacity:1;filter:none;transform:none}

.section{position:relative;overflow:hidden;padding-block:100px}
.section::before{content:'';position:absolute;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(245,130,45,.09),transparent 70%);left:-160px;top:12%;pointer-events:none}
.section:nth-of-type(even)::before{left:auto;right:-150px;background:radial-gradient(circle,rgba(31,67,134,.08),transparent 70%)}
.feature-grid,.levels-grid,.home-blogger-grid,.how-grid{perspective:1200px}
.feature-card,.level-card,.home-blogger-card,.how-grid article{transform-origin:center bottom}
.home-blogger-card:nth-child(odd){transform-origin:left bottom}
.home-blogger-card:nth-child(even){transform-origin:right bottom}

/* Premium section transitions */
.stats-strip{position:relative;z-index:3;background:#fff;border-bottom:1px solid var(--border)}
.section-alt{background:linear-gradient(180deg,#f8faff 0%,#fff 100%)}
.home-bloggers-section{background:linear-gradient(180deg,#fff 0%,#f7f9fd 48%,#fff 100%)}
.levels-section{background:#fff}
.how-section{background:linear-gradient(180deg,#f8faff 0%,#fff 100%)}

/* CTA must not merge into footer */
.cta-band{margin:70px auto 74px;width:min(1240px,calc(100% - 40px));border-radius:34px;overflow:hidden;box-shadow:0 28px 70px rgba(23,51,108,.19);background:linear-gradient(125deg,var(--navy-dark),var(--navy) 62%,#315eab)}
.cta-band+.site-footer{margin-top:0}
.site-footer{position:relative;background:#101f3f;border-top:10px solid #fff;padding-top:72px}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:-54px;height:54px;background:#fff;border-radius:0 0 48% 48%/0 0 100% 100%;pointer-events:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)}

@media(max-width:1100px){.collage-photo-extra{right:3%;top:245px;width:125px;height:160px}.hero-orbit-one{width:440px;height:440px}.hero-orbit-two{width:330px;height:330px}}
@media(max-width:900px){
  .hero{min-height:auto}.hero-grid{min-height:auto}.most-collage{min-height:520px}
  .collage-photo-extra{display:block;right:4%;top:250px;width:115px;height:145px}
  .hero-copy>*{animation-duration:.75s}
  .section{padding-block:72px}
  .cta-band{margin:45px auto 58px;width:min(100% - 28px,1240px);border-radius:26px}
}
@media(max-width:620px){
  .most-collage{min-height:470px}
  .collage-photo-extra{width:95px;height:120px;right:0;top:238px}
  .hero-orbit-one{width:340px;height:340px;right:-50px}.hero-orbit-two{width:270px;height:270px;right:-10px}
  .hero-scroll-hint{display:none}
  .motion-reveal,.motion-reveal.from-left,.motion-reveal.from-right,.motion-reveal.from-top,.motion-reveal.zoom-in{transform:translate3d(0,54px,0) scale(.95);filter:blur(5px)}
}

/* V31 entrance curtain, kinetic titles and micro-interactions */
.page-curtain{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.page-curtain span{background:var(--navy-dark);transition:transform 1.1s var(--motion-ease)}
.page-curtain span:first-child{transform-origin:left center}.page-curtain span:last-child{transform-origin:right center}
.page-curtain::after{content:'MOST';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:clamp(42px,8vw,110px);font-weight:900;letter-spacing:.18em;opacity:1;transition:opacity .45s ease .18s}
.page-curtain.is-opening span:first-child{transform:translateX(-101%)}
.page-curtain.is-opening span:last-child{transform:translateX(101%)}
.page-curtain.is-opening::after{opacity:0}
.kinetic-title{transform:translateX(var(--scroll-shift,0));transition:transform .18s linear}
.section-head,.info-panel,.home-blogger-grid{transform:translateX(var(--scroll-shift,0));transition:transform .18s linear}
.magnetic{will-change:transform;transition:transform .22s var(--motion-ease),box-shadow .25s ease,background .25s ease}
.btn-primary:hover{box-shadow:0 18px 38px rgba(245,130,45,.30)}
.btn-dark:hover{box-shadow:0 18px 38px rgba(23,51,108,.25)}
.home-blogger-photo{overflow:hidden}
.home-blogger-photo img{transition:transform .9s var(--motion-ease),filter .5s ease}
.home-blogger-card:hover .home-blogger-photo img{transform:scale(1.075) rotate(.8deg);filter:saturate(1.06)}
.feature-card::after,.level-card::after,.how-grid article::after,.home-blogger-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 65%);transform:translateX(-140%);transition:transform .95s var(--motion-ease);pointer-events:none}
.feature-card:hover::after,.level-card:hover::after,.how-grid article:hover::after,.home-blogger-card:hover::after{transform:translateX(140%)}
.feature-card,.level-card,.how-grid article,.home-blogger-card{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){.page-curtain{display:none}.kinetic-title,.section-head,.info-panel,.home-blogger-grid{transform:none!important}}

/* =========================================================
   V32 — Mobile Safari / incognito motion safety fix
   Keeps cinematic movement but prevents stuck blur/loader states.
   ========================================================= */
body.page-ready main,
body.page-ready .hero,
body.page-ready .hero-grid,
body.page-ready .hero-copy,
body.page-ready .most-collage,
body.page-ready .motion-reveal {
  visibility: visible !important;
}

body.page-ready .page-curtain,
body.page-ready .intro-overlay,
body.page-ready .page-loader,
body.page-ready .motion-overlay,
body.page-ready .cinematic-intro {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 767px) {
  /* iOS Safari can keep CSS filter layers composited after animation. */
  .hero-copy > *,
  .most-collage .collage-photo,
  .motion-reveal,
  .motion-reveal.from-left,
  .motion-reveal.from-right,
  .motion-reveal.from-top,
  .motion-reveal.zoom-in,
  .motion-reveal.is-visible {
    filter: none !important;
    -webkit-filter: none !important;
  }

  body.page-ready .hero-copy > *,
  body.page-ready .most-collage .collage-photo,
  body.page-ready .motion-reveal {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .page-curtain,
  .intro-overlay,
  .page-loader,
  .motion-overlay,
  .cinematic-intro {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================================================
   V33 — Mobile home blogger cards layout fix
   Equal card sizes, no overlap, CTA always visible.
   ========================================================= */
@media (max-width: 767px) {
  .home-bloggers-section {
    overflow: visible !important;
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  .home-bloggers-section .container {
    overflow: visible !important;
  }

  .home-bloggers-section .section-head {
    transform: none !important;
    margin-bottom: 28px !important;
  }

  .home-blogger-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    transform: none !important;
    perspective: none !important;
    overflow: visible !important;
  }

  .home-blogger-grid .home-blogger-card,
  .home-blogger-grid .home-blogger-card.motion-reveal,
  .home-blogger-grid .home-blogger-card.motion-reveal.from-left,
  .home-blogger-grid .home-blogger-card.motion-reveal.from-right,
  .home-blogger-grid .home-blogger-card.motion-reveal.from-top,
  .home-blogger-grid .home-blogger-card.motion-reveal.zoom-in,
  .home-blogger-grid .home-blogger-card.motion-reveal.is-visible {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: box-shadow .25s ease !important;
    transform-origin: center !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .home-blogger-grid .home-blogger-card:hover {
    transform: none !important;
  }

  .home-blogger-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .home-blogger-photo img,
  .home-blogger-card:hover .home-blogger-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .home-blogger-body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 205px !important;
    padding: 22px 24px 24px !important;
    background: #fff !important;
  }

  .home-blogger-body h3 {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  .home-blogger-body > a {
    display: inline-block !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }

  .home-blogger-followers {
    margin-top: auto !important;
    padding-top: 20px !important;
  }

  .home-blogger-followers strong {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }

  .home-blogger-followers span {
    margin-top: 8px !important;
    font-size: 15px !important;
  }

  .home-bloggers-action {
    position: relative !important;
    z-index: 20 !important;
    clear: both !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 34px 0 0 !important;
    padding: 0 0 4px !important;
    transform: none !important;
  }

  .home-bloggers-action .btn {
    position: relative !important;
    z-index: 21 !important;
    width: min(100%, 340px) !important;
    min-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .home-blogger-card::after {
    display: none !important;
  }
}

/* =========================================================
   V34 — production mobile layout system
   Stable iPhone/Android layout without overlap or hidden CTAs.
   ========================================================= */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  main {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .container,
  .admin-companies-container,
  .offerwrap,
  .auth-card {
    width: min(100% - 28px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,var(--orange),var(--yellow));
  }

  .nav-wrap {
    min-height: 82px !important;
    padding-top: 4px;
    gap: 14px !important;
  }

  .brand-logo {
    width: 152px !important;
    height: 48px !important;
  }

  .desktop-nav,
  .desktop-actions {
    display: none !important;
  }

  .mobile-menu-toggle {
    flex: 0 0 54px;
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
    border: 1px solid #dfe5ef !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(17,38,79,.07);
  }

  .mobile-menu {
    position: fixed !important;
    inset: 86px 0 auto 0 !important;
    z-index: 999 !important;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    background: rgba(255,255,255,.995) !important;
    border-top: 1px solid var(--border);
    box-shadow: 0 24px 50px rgba(17,38,79,.12);
  }

  .mobile-menu[hidden] { display: none !important; }
  .mobile-menu:not([hidden]) { display: block !important; }

  .mobile-menu-inner {
    padding: 20px 0 28px !important;
  }

  .mobile-nav,
  .mobile-auth-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mobile-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 0 16px;
    border-radius: 14px;
    color: var(--navy-dark);
    font-weight: 800;
    background: #f7f9fd;
  }

  .mobile-language-switcher {
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 16px 0;
  }

  .mobile-language-switcher a {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    font-weight: 800;
  }

  .mobile-language-switcher a.active {
    background: var(--navy);
    color: #fff;
  }

  .mobile-auth-actions .btn {
    width: 100%;
    min-height: 50px;
  }

  /* Global typography and sections */
  .section,
  .catalog-hero,
  .auth-section,
  .send-offer-page,
  .admin-companies-page {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .section h1,
  .catalog-hero h1,
  .auth-card h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere;
  }

  .section-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
  }

  .section-head h2,
  .cta-band h2 {
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    overflow-wrap: anywhere;
  }

  .section-head p {
    width: 100%;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* No mobile transform may affect document flow */
  .motion-reveal,
  .motion-reveal.from-left,
  .motion-reveal.from-right,
  .motion-reveal.from-top,
  .motion-reveal.zoom-in,
  .motion-reveal.is-visible,
  .kinetic-title,
  .section-head,
  .info-panel,
  .home-blogger-grid,
  [data-tilt],
  .magnetic {
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .page-curtain,
  .hero-scroll-hint,
  .hero-orbit,
  .most-marquee {
    display: none !important;
  }

  /* Hero */
  .hero {
    padding: 46px 0 48px !important;
    min-height: auto !important;
    background:
      radial-gradient(circle at 8% 8%,rgba(245,130,45,.10),transparent 26%),
      radial-gradient(circle at 95% 3%,rgba(244,195,24,.12),transparent 25%),
      #fff !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hero-copy {
    min-width: 0;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .98 !important;
    margin: 16px 0 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 24px 0 20px !important;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 54px;
  }

  .hero-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-pills span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 10px !important;
  }

  .hero-scene,
  .most-collage {
    position: relative !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 28px;
    background: linear-gradient(145deg,#eef3fb,#fff7ee);
  }

  .most-collage .shape,
  .most-collage .viral-chip,
  .most-collage .collage-dot {
    pointer-events: none;
  }

  .most-collage .collage-photo {
    position: absolute !important;
    margin: 0 !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    overflow: hidden !important;
    border: 4px solid #fff !important;
    box-shadow: 0 18px 40px rgba(17,38,79,.15) !important;
  }

  .most-collage .collage-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top;
  }

  .most-collage .collage-photo figcaption { display: none !important; }
  .collage-photo-main { left: 4% !important; top: 7% !important; width: 54% !important; height: 58% !important; border-radius: 24px !important; }
  .collage-photo-top { right: 4% !important; top: 4% !important; width: 38% !important; height: 35% !important; border-radius: 22px !important; }
  .collage-photo-bottom { right: 3% !important; top: 42% !important; width: 42% !important; height: 48% !important; border-radius: 24px !important; }
  .collage-photo-round { left: 8% !important; bottom: 3% !important; width: 29% !important; height: 29% !important; border-radius: 50% !important; }
  .collage-photo-extra { left: 39% !important; bottom: 5% !important; width: 25% !important; height: 27% !important; border-radius: 20px !important; }

  /* All grids */
  .stats-strip-grid,
  .feature-grid,
  .levels-grid,
  .split-section,
  .info-boxes,
  .how-grid,
  .creator-grid,
  .company-grid,
  .blogger-grid,
  .role-grid,
  .dashboard-grid,
  .two-col,
  .rates,
  .moderation-grid,
  .company-admin-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .stats-strip-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .stats-strip-grid article {
    min-width: 0;
    padding: 18px 13px !important;
  }

  .feature-card,
  .level-card,
  .how-grid article,
  .info-panel,
  .content-card,
  .company-card,
  .creator-card,
  .offer,
  .moderation-card,
  .company-admin-card,
  .auth-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 22px !important;
  }

  /* Home bloggers: compact, equal, stable cards */
  .home-bloggers-section {
    padding: 58px 0 64px !important;
    background: linear-gradient(180deg,#fff,#f7f9fd 55%,#fff) !important;
  }

  .home-blogger-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .home-blogger-card,
  .home-blogger-card.motion-reveal,
  .home-blogger-card.motion-reveal.is-visible {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #e4e8f1 !important;
    box-shadow: 0 10px 28px rgba(17,38,79,.07) !important;
    overflow: hidden !important;
  }

  .home-blogger-photo {
    flex: 0 0 auto;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
  }

  .home-blogger-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .creator-level {
    top: 10px !important;
    right: 10px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }

  .home-blogger-body {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    min-height: 154px !important;
    padding: 14px !important;
  }

  .home-blogger-body h3 {
    margin: 0 0 5px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-blogger-body > a {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-blogger-followers {
    margin-top: auto !important;
    padding-top: 12px !important;
  }

  .home-blogger-followers strong {
    font-size: 24px !important;
  }

  .home-blogger-followers span {
    font-size: 10px !important;
  }

  .home-bloggers-action {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
    padding: 0 !important;
    clear: both;
  }

  .home-bloggers-action .btn {
    display: flex !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  /* Public blogger cards */
  .creator-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .creator-photo-wrap {
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    height: auto !important;
  }

  .creator-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .creator-body {
    min-height: 0 !important;
    padding: 20px !important;
  }

  /* Forms and filters */
  .catalog-toolbar,
  .company-filter,
  .form-grid,
  .company-review-actions,
  .money,
  .blogger-dashboard-actions,
  .nav-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100%;
    font-size: 16px; /* prevents iOS zoom */
  }

  .catalog-toolbar input,
  .catalog-toolbar select,
  .company-filter input,
  .company-filter select,
  .form-grid input,
  .form-grid select {
    width: 100% !important;
    min-height: 52px !important;
  }

  .form-grid textarea,
  .company-review-form textarea,
  .company-admin-note {
    width: 100% !important;
    min-height: 130px !important;
  }

  .catalog-toolbar .btn,
  .company-filter button,
  .company-review-actions button,
  .money .btn,
  .blogger-dashboard-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
  }

  /* Tables */
  .table-wrap,
  .admin-table-wrap,
  .responsive-table {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
  }

  table {
    min-width: 720px;
  }

  /* CTA and footer are visually separated */
  .cta-band {
    width: min(100% - 28px, 100%) !important;
    margin: 48px auto 64px !important;
    padding: 38px 0 !important;
    border-radius: 26px !important;
  }

  .cta-band-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .site-footer {
    margin-top: 0 !important;
    padding-top: 52px !important;
    border-top: 12px solid #fff !important;
  }

  .site-footer::before { display: none !important; }

  .footer-grid {
    padding-top: 0 !important;
  }

  .footer-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .container,
  .admin-companies-container,
  .offerwrap,
  .auth-card {
    width: calc(100% - 22px) !important;
  }

  .brand-logo {
    width: 138px !important;
    height: 44px !important;
  }

  .mobile-menu-toggle {
    flex-basis: 50px;
    width: 50px !important;
    height: 50px !important;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 50px) !important;
  }

  .hero-pills {
    grid-template-columns: 1fr !important;
  }

  .hero-scene,
  .most-collage {
    height: 400px !important;
    min-height: 400px !important;
  }

  .home-blogger-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .home-blogger-body {
    min-height: 145px !important;
    padding: 12px !important;
  }

  .home-blogger-body h3 {
    font-size: 15px !important;
  }

  .home-blogger-followers strong {
    font-size: 22px !important;
  }
}

@media (max-width: 350px) {
  .home-blogger-grid,
  .stats-strip-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V35 — final mobile UI layer
   Clean header, stable hero, equal cards, no overlap.
   This block intentionally comes last and wins all older
   experimental mobile rules.
   ========================================================= */
@media (max-width: 900px) {
  :root { --mobile-gutter: 18px; }

  html, body { overflow-x: clip !important; }
  body { background:#fff !important; }
  .topline { display:none !important; }

  .container,
  .admin-companies-container,
  .offerwrap,
  .auth-card {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* Header: only logo + menu button are visible. */
  .site-header {
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    min-height:72px !important;
    background:#fff !important;
    border-bottom:1px solid #e8ecf4 !important;
    box-shadow:0 8px 26px rgba(17,38,79,.055) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .site-header::before { height:3px !important; }
  .nav-wrap {
    min-height:72px !important;
    padding:3px 0 0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  .brand-logo-link { flex:0 1 auto !important; min-width:0 !important; }
  .brand-logo {
    display:block !important;
    width:128px !important;
    height:auto !important;
    max-height:44px !important;
    object-fit:contain !important;
  }
  .desktop-nav,
  .nav-actions.desktop-actions,
  .desktop-actions { display:none !important; }
  .mobile-menu-toggle {
    display:inline-flex !important;
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    border:1px solid #dfe5ef !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(17,38,79,.07) !important;
  }
  .mobile-menu-toggle span {
    position:static !important;
    width:22px !important;
    height:2px !important;
    margin:0 !important;
    border-radius:2px !important;
    background:var(--navy) !important;
  }
  .mobile-menu {
    inset:72px 0 auto !important;
    max-height:calc(100dvh - 72px) !important;
  }

  /* Mobile hero: balanced text first, then a compact collage. */
  .hero {
    padding:34px 0 42px !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 96% 2%,rgba(244,195,24,.13),transparent 26%),
      radial-gradient(circle at 2% 18%,rgba(245,130,45,.09),transparent 26%),
      #fff !important;
  }
  .hero-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px !important;
    align-items:start !important;
  }
  .hero-copy { width:100% !important; min-width:0 !important; }
  .hero .eyebrow { font-size:11px !important; padding:8px 11px !important; }
  .hero h1 {
    max-width:12ch !important;
    margin:15px 0 14px !important;
    font-size:clamp(40px,11.4vw,56px) !important;
    line-height:.99 !important;
    letter-spacing:-.055em !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  .hero p {
    margin:0 !important;
    max-width:40ch !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
  .hero-actions {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:22px 0 18px !important;
  }
  .hero-actions .btn { min-height:52px !important; width:100% !important; }
  .hero-pills {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .hero-pills span {
    flex:1 1 calc(50% - 4px) !important;
    min-width:130px !important;
    min-height:42px !important;
    padding:8px 10px !important;
    font-size:11px !important;
  }
  .hero-scene,
  .most-collage {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / .92 !important;
    border-radius:26px !important;
    overflow:hidden !important;
    transform:none !important;
    translate:none !important;
    background:linear-gradient(145deg,#f2f5fb 0%,#fff7ee 100%) !important;
    box-shadow:inset 0 0 0 1px rgba(17,38,79,.04) !important;
  }
  .most-collage .collage-photo {
    animation:none !important;
    transition:none !important;
    translate:none !important;
    rotate:none !important;
    scale:1 !important;
    transform:none !important;
    border-width:3px !important;
    box-shadow:0 12px 28px rgba(17,38,79,.14) !important;
  }
  .collage-photo-main { left:4% !important; top:7% !important; width:54% !important; height:60% !important; border-radius:22px !important; }
  .collage-photo-top { right:4% !important; top:5% !important; width:38% !important; height:36% !important; border-radius:20px !important; }
  .collage-photo-bottom { right:4% !important; top:43% !important; width:42% !important; height:49% !important; border-radius:22px !important; }
  .collage-photo-round { left:7% !important; bottom:4% !important; width:29% !important; height:29% !important; }
  .collage-photo-extra { left:38% !important; bottom:5% !important; width:25% !important; height:28% !important; border-radius:18px !important; }
  .viral-chip { right:3% !important; top:39% !important; font-size:11px !important; padding:9px 12px !important; }
  .shape-one { width:58px !important; height:58px !important; }
  .shape-two { width:35px !important; height:35px !important; }
  .shape-three { width:44px !important; height:44px !important; }

  /* Stable document flow: mobile never receives desktop transform choreography. */
  .motion-reveal,
  .motion-reveal.from-left,
  .motion-reveal.from-right,
  .motion-reveal.from-top,
  .motion-reveal.zoom-in,
  .motion-reveal.is-visible,
  [data-tilt], .magnetic,
  .section-head, .info-panel, .home-blogger-grid {
    transform:none !important;
    translate:none !important;
    rotate:none !important;
    scale:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .page-curtain, .most-marquee, .hero-orbit, .hero-scroll-hint { display:none !important; }

  /* Consistent section rhythm. */
  .section,
  .catalog-hero,
  .auth-section,
  .send-offer-page,
  .admin-companies-page { padding:48px 0 !important; }
  .section-head { margin-bottom:24px !important; gap:12px !important; }
  .section-head h2, .cta-band h2 {
    font-size:clamp(29px,8.2vw,40px) !important;
    line-height:1.08 !important;
  }

  /* Home blogger cards: 2 columns on tablets, 1 on phones. */
  .home-bloggers-section {
    overflow:visible !important;
    padding:50px 0 58px !important;
    background:linear-gradient(180deg,#fff 0%,#f7f9fd 55%,#fff 100%) !important;
  }
  .home-bloggers-section .container { overflow:visible !important; }
  .home-blogger-grid {
    position:relative !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    align-items:stretch !important;
    overflow:visible !important;
    perspective:none !important;
  }
  .home-blogger-card,
  .home-blogger-card.motion-reveal,
  .home-blogger-card.motion-reveal.is-visible {
    position:relative !important;
    inset:auto !important;
    z-index:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid #e3e8f1 !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 12px 30px rgba(17,38,79,.075) !important;
    animation:none !important;
  }
  .home-blogger-card::after { display:none !important; }
  .home-blogger-photo {
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 5 !important;
    overflow:hidden !important;
    background:#edf1f7 !important;
  }
  .home-blogger-photo img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
    transform:none !important;
  }
  .home-blogger-body {
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:150px !important;
    padding:14px !important;
  }
  .home-blogger-body h3 {
    min-height:40px !important;
    margin:0 0 6px !important;
    font-size:16px !important;
    line-height:1.25 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .home-blogger-body > a {
    display:block !important;
    min-width:0 !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .home-blogger-followers {
    margin-top:auto !important;
    padding-top:12px !important;
    border-top:1px solid #edf0f5 !important;
  }
  .home-blogger-followers strong { font-size:24px !important; line-height:1 !important; }
  .home-blogger-followers span { display:block !important; margin-top:7px !important; font-size:10px !important; }
  .home-bloggers-action {
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    width:100% !important;
    margin:26px 0 0 !important;
    padding:0 !important;
    justify-content:center !important;
    clear:both !important;
  }
  .home-bloggers-action .btn { width:min(100%,360px) !important; min-height:52px !important; }

  /* Other grids and forms. */
  .feature-grid, .levels-grid, .split-section, .info-boxes, .how-grid,
  .creator-grid, .company-grid, .blogger-grid, .role-grid, .dashboard-grid,
  .two-col, .rates, .moderation-grid, .company-admin-grid, .footer-grid {
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .stats-strip-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .creator-photo-wrap { aspect-ratio:4 / 5 !important; height:auto !important; }
  .catalog-toolbar, .company-filter, .form-grid, .company-review-actions,
  .money, .blogger-dashboard-actions { grid-template-columns:1fr !important; width:100% !important; }
  input, select, textarea, button, .btn { font-size:16px !important; }
  .cta-band { margin:42px auto 56px !important; }
  .site-footer { border-top:10px solid #fff !important; }
}

@media (max-width: 620px) {
  :root { --mobile-gutter: 14px; }
  .brand-logo { width:122px !important; }
  .hero { padding-top:28px !important; }
  .hero h1 { font-size:clamp(38px,11.6vw,50px) !important; }
  .hero-pills { display:grid !important; grid-template-columns:1fr !important; }
  .hero-pills span { min-width:0 !important; }
  .hero-scene, .most-collage { aspect-ratio:1 / .96 !important; border-radius:22px !important; }
  .home-blogger-grid { grid-template-columns:1fr !important; gap:18px !important; }
  .home-blogger-body { min-height:180px !important; padding:20px !important; }
  .home-blogger-body h3 { min-height:0 !important; font-size:22px !important; }
  .home-blogger-body > a { font-size:14px !important; }
  .home-blogger-followers strong { font-size:32px !important; }
  .home-blogger-followers span { font-size:13px !important; }
  .stats-strip-grid { grid-template-columns:1fr 1fr !important; }
}

@media (max-width: 360px) {
  .stats-strip-grid { grid-template-columns:1fr !important; }
  .brand-logo { width:112px !important; }
}

/* =========================================================
   V37 — Company mini-sites + restored mobile home motion
   ========================================================= */
@media (max-width: 900px) {
  body.home-page .mobile-motion-item.motion-reveal,
  body.home-page .mobile-motion-item.motion-reveal.from-left,
  body.home-page .mobile-motion-item.motion-reveal.from-right,
  body.home-page .mobile-motion-item.motion-reveal.from-top,
  body.home-page .mobile-motion-item.motion-reveal.zoom-in {
    opacity: 0 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: translate3d(0, 48px, 0) scale(.965) !important;
    transition: opacity .72s var(--motion-ease), transform .72s var(--motion-ease), box-shadow .35s ease !important;
    transition-delay: var(--reveal-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  body.home-page .mobile-motion-item.mobile-from-left:not(.is-visible) {
    transform: translate3d(-34px, 38px, 0) scale(.965) rotate(-.6deg) !important;
  }

  body.home-page .mobile-motion-item.mobile-from-right:not(.is-visible) {
    transform: translate3d(34px, 38px, 0) scale(.965) rotate(.6deg) !important;
  }

  body.home-page .mobile-motion-item.mobile-zoom:not(.is-visible) {
    transform: translate3d(0, 34px, 0) scale(.90) !important;
  }

  body.home-page .mobile-motion-item.motion-reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0) !important;
  }

  body.home-page .stats-strip-grid article.mobile-motion-item,
  body.home-page .feature-card.mobile-motion-item,
  body.home-page .level-card.mobile-motion-item,
  body.home-page .how-grid article.mobile-motion-item,
  body.home-page .home-blogger-card.mobile-motion-item {
    backface-visibility: hidden;
  }

  body.home-page .mobile-motion-item.is-visible:nth-child(odd) {
    animation: mostMobileAlive 4.8s ease-in-out 1.2s infinite;
  }

  body.home-page .mobile-motion-item.is-visible:nth-child(even) {
    animation: mostMobileAliveAlt 5.4s ease-in-out 1.25s infinite;
  }
}

@keyframes mostMobileAlive {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes mostMobileAliveAlt {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .mobile-motion-item,
  body.home-page .mobile-motion-item.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   V39 — mobile home motion that is independent from old guards
   ========================================================= */
@media (max-width: 900px) {
  body.home-page .most-mobile-flow {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translate3d(var(--flow-x, 0), 54px, 0) scale(.94) rotate(var(--flow-r, 0deg)) !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition:
      opacity .82s cubic-bezier(.16,1,.3,1),
      transform .82s cubic-bezier(.16,1,.3,1),
      box-shadow .34s ease !important;
    transition-delay: var(--flow-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  body.home-page .most-mobile-flow.is-flow-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
  }

  body.home-page .stats-strip.most-mobile-flow,
  body.home-page .cta-band-inner.most-mobile-flow,
  body.home-page .split-section .info-panel.most-mobile-flow {
    transform: translate3d(0, 58px, 0) scale(.955) !important;
  }

  body.home-page .stats-strip.most-mobile-flow.is-flow-visible,
  body.home-page .cta-band-inner.most-mobile-flow.is-flow-visible,
  body.home-page .split-section .info-panel.most-mobile-flow.is-flow-visible {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  body.home-page .most-mobile-flow.is-flow-visible:nth-child(odd) {
    animation: mostV39MobileBreath 5.2s ease-in-out 1.1s infinite;
  }

  body.home-page .most-mobile-flow.is-flow-visible:nth-child(even) {
    animation: mostV39MobileBreathAlt 5.8s ease-in-out 1.2s infinite;
  }
}

@keyframes mostV39MobileBreath {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes mostV39MobileBreathAlt {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .most-mobile-flow,
  body.home-page .most-mobile-flow.is-flow-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.barter-story-note{margin:0 auto 18px;padding:14px 18px;border:1px solid rgba(20,149,189,.22);border-radius:18px;background:#ecfbff;color:#0f5d75;font-weight:850;text-align:center;max-width:820px}


/* =========================================================
   V63 — compact mobile creator grid
   Four creator cards fit as a clean 2×2 group on a phone screen.
   ========================================================= */
@media (max-width: 700px) {
  .home-bloggers-section {
    padding: 42px 0 48px !important;
  }

  .home-bloggers-section .section-head {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .home-bloggers-section .section-head h2 {
    margin-top: 7px !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.03 !important;
  }

  .home-bloggers-section .section-head > p {
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .home-blogger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .home-blogger-grid .home-blogger-card,
  .home-blogger-grid .home-blogger-card.motion-reveal,
  .home-blogger-grid .home-blogger-card.motion-reveal.is-visible {
    min-height: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(17, 38, 79, .07) !important;
  }

  .home-blogger-grid .home-blogger-photo {
    aspect-ratio: 1 / 1.03 !important;
  }

  .home-blogger-grid .creator-level {
    top: 7px !important;
    right: 7px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
  }

  .home-blogger-grid .home-blogger-body {
    min-height: 102px !important;
    padding: 10px !important;
  }

  .home-blogger-grid .home-blogger-body h3 {
    margin-bottom: 3px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 1 !important;
  }

  .home-blogger-grid .home-blogger-body > a {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .home-blogger-grid .home-blogger-followers {
    padding-top: 8px !important;
  }

  .home-blogger-grid .home-blogger-followers strong {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .home-blogger-grid .home-blogger-followers span {
    margin-top: 3px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .home-bloggers-action {
    margin-top: 18px !important;
  }

  .home-bloggers-action .btn {
    min-height: 48px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   V65 — 8 random premium creator cards
   Same V64 card design; 4 cards per desktop row.
   ========================================================= */
.home-blogger-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.home-blogger-card,
.home-blogger-card.motion-reveal,
.home-blogger-card.motion-reveal.is-visible {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.home-blogger-card::after { display: none !important; }

.home-blogger-card-link {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(18, 45, 91, .10);
  border-radius: inherit;
  background: #122d5b;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(20, 43, 85, .13);
  isolation: isolate;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.home-blogger-card-link::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: inherit;
  pointer-events: none;
}

.home-blogger-card:hover .home-blogger-card-link {
  transform: translateY(-8px);
  border-color: rgba(245, 130, 45, .42);
  box-shadow: 0 28px 62px rgba(20, 43, 85, .20);
}

.home-blogger-grid .home-blogger-photo {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5.35 !important;
  background:
    radial-gradient(circle at 78% 14%, rgba(245,130,45,.58), transparent 27%),
    linear-gradient(145deg, #244e91, #102a56) !important;
}

.home-blogger-grid .home-blogger-photo::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,18,43,.02) 28%, rgba(5,18,43,.18) 52%, rgba(5,18,43,.92) 100%),
    linear-gradient(125deg, rgba(245,130,45,.08), transparent 48%);
  pointer-events: none;
}

.home-blogger-grid .home-blogger-photo::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff832d, #ffc52f);
  box-shadow: 38px 0 0 rgba(255,255,255,.82);
  pointer-events: none;
}

.home-blogger-grid .home-blogger-photo > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.96) contrast(1.02);
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease !important;
}

.home-blogger-card:hover .home-blogger-photo > img {
  transform: scale(1.065) !important;
  filter: saturate(1.06) contrast(1.03) !important;
}

.home-blogger-grid .home-blogger-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 76% 22%, rgba(255,190,45,.36), transparent 24%),
    linear-gradient(145deg, #2b5ca6, #102a56);
  color: rgba(255,255,255,.92);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 900;
  letter-spacing: -.06em;
}

.home-blogger-grid .creator-level {
  position: absolute !important;
  z-index: 6 !important;
  top: 13px !important;
  right: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 999px !important;
  background: rgba(11,29,61,.58) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.home-blogger-grid .creator-level.gold { background: rgba(168,119,0,.76) !important; }
.home-blogger-grid .creator-level.silver { background: rgba(75,89,112,.75) !important; }
.home-blogger-grid .creator-level.bronze { background: rgba(139,75,39,.76) !important; }
.home-blogger-grid .creator-level.diamond { background: rgba(31,103,153,.78) !important; }

.home-blogger-surface {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 21px 18px 18px;
  color: #fff;
}

.home-blogger-identity { min-width: 0; }

.home-blogger-handle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(255,255,255,.74);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-blogger-handle svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.home-blogger-surface h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 7px 0 0 !important;
  color: #fff !important;
  font-size: clamp(17px, 1.55vw, 23px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-blogger-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.home-blogger-grid .home-blogger-followers {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
}

.home-blogger-grid .home-blogger-followers strong {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

.home-blogger-grid .home-blogger-followers small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.62);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.home-blogger-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 12px;
  background: rgba(255,255,255,.13);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, transform .25s ease;
}

.home-blogger-arrow svg { width: 17px; height: 17px; }
.home-blogger-card:hover .home-blogger-arrow { transform: translate(2px,-2px); background: linear-gradient(135deg,#f5822d,#f7bd29); }

@media (max-width: 1180px) {
  .home-blogger-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .home-bloggers-section { padding: 38px 0 46px !important; }
  .home-bloggers-section .section-head { margin-bottom: 15px !important; }
  .home-blogger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  .home-blogger-card,
  .home-blogger-card.motion-reveal,
  .home-blogger-card.motion-reveal.is-visible {
    border-radius: 18px !important;
  }

  .home-blogger-grid .home-blogger-photo {
    aspect-ratio: 4 / 5.15 !important;
  }

  .home-blogger-grid .home-blogger-photo::after {
    top: 10px;
    left: 10px;
    width: 19px;
    height: 2px;
    box-shadow: 24px 0 0 rgba(255,255,255,.78);
  }

  .home-blogger-grid .creator-level {
    top: 8px !important;
    right: 8px !important;
    min-height: 22px !important;
    padding: 4px 7px !important;
    font-size: 7px !important;
    letter-spacing: .06em !important;
  }

  .home-blogger-surface { padding: 14px 11px 11px; }
  .home-blogger-handle { gap: 4px; font-size: 8px; }
  .home-blogger-handle svg { width: 11px; height: 11px; flex-basis: 11px; }

  .home-blogger-surface h3 {
    margin-top: 5px !important;
    min-height: 28px;
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  .home-blogger-meta { gap: 7px; margin-top: 9px; padding-top: 9px; }
  .home-blogger-grid .home-blogger-followers strong { font-size: 17px !important; }
  .home-blogger-grid .home-blogger-followers small { margin-top: 3px; font-size: 6.5px; letter-spacing: .05em; }
  .home-blogger-arrow { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; }
  .home-blogger-arrow svg { width: 13px; height: 13px; }

  .home-blogger-card:hover .home-blogger-card-link { transform: none; }
  .home-bloggers-action { margin-top: 18px !important; }
}

@media (max-width: 360px) {
  .home-blogger-grid { gap: 8px !important; }
  .home-blogger-surface { padding-right: 9px; padding-left: 9px; }
  .home-blogger-surface h3 { font-size: 12px !important; }
  .home-blogger-grid .home-blogger-followers strong { font-size: 15px !important; }
}