/* iBlogger service modules: opportunities, smart ads, guarantee and benefits */
.desktop-nav .nav-link[data-access-note]::before {
  content: attr(data-access-note);
  position: absolute;
  top: calc(100% + 12px);
  right: 50%;
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-md);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.7;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, -5px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 40;
}
.desktop-nav .nav-link[data-access-note]:hover::before,
.desktop-nav .nav-link[data-access-note]:focus-visible::before { opacity: 1; transform: translate(50%, 0); }
.mobile-nav-links a { display: grid; gap: 2px; }
.mobile-nav-links small { color: var(--color-text-muted); font-size: .68rem; font-weight: 500; }

.solutions-section {
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 28%),
    linear-gradient(180deg, var(--color-background-alt), var(--color-background));
  overflow: hidden;
}
.solutions-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.solution-card {
  min-height: 430px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.solution-card::after { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; left: -65px; bottom: -70px; background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.solution-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.solution-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.solution-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--color-primary); background: var(--color-primary-soft); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); }
.solution-icon svg { width: 28px; height: 28px; }
.solution-badge { padding: 6px 9px; border-radius: 999px; background: var(--color-surface-subtle); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .69rem; font-weight: 750; }
.solution-card h3 { font-size: 1.32rem; margin-bottom: 11px; }
.solution-card > p { color: var(--color-text-secondary); font-size: .88rem; line-height: 1.95; }
.solution-card ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 8px 0 24px; color: var(--color-text-secondary); font-size: .82rem; }
.solution-card li { display: flex; align-items: center; gap: 8px; }
.solution-card li::before { content: "✓"; color: var(--color-primary); font-weight: 900; }
.solution-link { margin-top: auto; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-radius: 12px; background: var(--color-text-primary); color: var(--color-surface); font-weight: 800; font-size: .86rem; position: relative; z-index: 2; }
html[data-theme="dark"] .solution-link { background: var(--color-primary); color: var(--color-on-primary); }
.solution-link span { font-size: 1.15rem; transition: transform var(--transition-fast); }
.solution-link:hover span { transform: translateX(-4px); }
.solution-access-note { margin-top: 12px; min-height: 42px; display: grid; place-items: center; padding: 7px 10px; border: 1px dashed var(--color-border-strong); border-radius: 10px; color: var(--color-text-muted); font-size: .68rem; line-height: 1.65; text-align: center; opacity: .76; transition: opacity var(--transition-fast), background var(--transition-fast); }
.solution-card:hover .solution-access-note { opacity: 1; background: var(--color-primary-soft); }
.solution-access-note-public { border-style: solid; }
.section-inline-link { display: inline-flex; margin-top: 14px; color: var(--color-primary); font-weight: 800; font-size: .9rem; }

/* Shared service page shell */
.service-page { min-height: 100vh; background: var(--color-background); }
.service-header .header-inner { gap: 18px; }
.service-header .desktop-nav { margin-inline-end: auto; }
.service-account { display: flex; align-items: center; gap: 8px; }
.account-chip { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface); }
.account-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 900; font-size: .75rem; }
.account-chip strong { display: block; font-size: .78rem; line-height: 1.3; }
.account-chip small { display: block; color: var(--color-text-muted); font-size: .63rem; line-height: 1.3; }
.service-main { padding-bottom: 90px; }
.service-hero { padding: 70px 0 52px; position: relative; overflow: hidden; }
.service-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-primary) 13%, transparent) 1px, transparent 0); background-size: 25px 25px; mask-image: linear-gradient(to bottom, #000, transparent); opacity: .8; pointer-events: none; }
.service-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.7fr); gap: 46px; align-items: center; }
.service-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-text-muted); font-size: .8rem; margin-bottom: 20px; }
.service-breadcrumb a:hover { color: var(--color-primary); }
.service-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 850; font-size: .75rem; margin-bottom: 18px; }
.service-hero h1 { font-size: clamp(2.2rem,5vw,4rem); margin-bottom: 20px; font-weight: 930; }
.service-hero-copy { color: var(--color-text-secondary); font-size: 1.03rem; line-height: 2; max-width: 780px; }
.service-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.service-hero-panel { padding: 24px; border: 1px solid var(--color-border); border-radius: 25px; background: color-mix(in srgb, var(--color-surface) 95%, transparent); box-shadow: var(--shadow-lg); }
.hero-panel-icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: 18px; }
.hero-panel-icon svg { width: 34px; height: 34px; }
.service-hero-panel h2 { font-size: 1.1rem; margin-bottom: 8px; }
.service-hero-panel p { color: var(--color-text-muted); font-size: .84rem; line-height: 1.9; margin-bottom: 17px; }
.hero-mini-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.hero-mini-stats div { padding: 12px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface-subtle); }
.hero-mini-stats strong, .hero-mini-stats span { display: block; }
.hero-mini-stats strong { font-size: 1.05rem; }
.hero-mini-stats span { color: var(--color-text-muted); font-size: .68rem; }

.service-content { display: grid; gap: 24px; }
.service-card { border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); box-shadow: var(--shadow-sm); padding: 24px; }
.service-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.service-card-head h2, .service-card-head h3 { margin-bottom: 5px; }
.service-card-head p { color: var(--color-text-muted); margin-bottom: 0; font-size: .82rem; }
.notice-box { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); border-radius: 16px; background: var(--color-primary-soft); color: var(--color-text-secondary); font-size: .85rem; line-height: 1.9; }
.notice-symbol { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 900; }
.access-gate { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 19px; border: 1px solid var(--color-border-strong); border-radius: 18px; background: linear-gradient(135deg, var(--color-surface), var(--color-primary-soft)); box-shadow: var(--shadow-sm); }
.access-gate-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--color-text-primary); color: var(--color-surface); }
.access-gate h3 { margin: 0 0 4px; font-size: 1rem; }
.access-gate p { margin: 0; color: var(--color-text-muted); font-size: .79rem; }
.access-gate-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.is-locked { opacity: .54; filter: grayscale(.25); pointer-events: none; user-select: none; }

.field-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.field-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ui-field { display: grid; gap: 7px; }
.ui-field.full { grid-column: 1 / -1; }
.ui-field label { color: var(--color-text-secondary); font-size: .78rem; font-weight: 800; }
.ui-input, .ui-select, .ui-textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); color: var(--color-text-primary); outline: 0; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.ui-textarea { min-height: 112px; resize: vertical; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent); background: var(--color-surface); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.empty-state { padding: 35px 20px; text-align: center; border: 1px dashed var(--color-border-strong); border-radius: 18px; color: var(--color-text-muted); }
.empty-state strong { display: block; color: var(--color-text-primary); margin-bottom: 5px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 850; white-space: nowrap; }
.status-open { background: var(--color-success-soft); color: var(--color-success); }
.status-closed { background: var(--color-background-alt); color: var(--color-text-muted); }
.status-draft { background: var(--color-info-soft); color: var(--color-info); }
.status-active { background: var(--color-success-soft); color: var(--color-success); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tag { display: inline-flex; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-subtle); color: var(--color-text-muted); font-size: .66rem; }

/* Opportunities */
.filter-toolbar { display: grid; grid-template-columns: minmax(240px,1.4fr) repeat(2,minmax(180px,.7fr)) auto; gap: 12px; align-items: end; }
.check-control { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-subtle); font-size: .77rem; font-weight: 750; }
.check-control input { accent-color: var(--color-primary); width: 17px; height: 17px; }
.results-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 20px 0 12px; color: var(--color-text-muted); font-size: .8rem; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.opportunity-card { display: flex; flex-direction: column; min-height: 330px; padding: 20px; border: 1px solid var(--color-border); border-radius: 19px; background: var(--color-surface); box-shadow: var(--shadow-xs); transition: transform var(--transition-fast), box-shadow var(--transition-normal), border-color var(--transition-fast); }
.opportunity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.opportunity-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand-token { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--color-text-primary); color: var(--color-surface); font-weight: 900; }
.opportunity-card h3 { font-size: 1.05rem; margin-bottom: 9px; }
.opportunity-card > p { color: var(--color-text-secondary); font-size: .78rem; line-height: 1.85; }
.opportunity-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 14px 0; }
.opportunity-meta div { padding: 9px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface-subtle); }
.opportunity-meta span, .opportunity-meta strong { display: block; }
.opportunity-meta span { color: var(--color-text-muted); font-size: .62rem; }
.opportunity-meta strong { font-size: .75rem; margin-top: 2px; }
.opportunity-card .button { margin-top: auto; width: 100%; }

/* Smart ads */
.smart-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 20px; align-items: start; }
.smart-sidebar { position: sticky; top: calc(var(--header-height) + 18px); }
.order-list { display: grid; gap: 9px; max-height: 620px; overflow: auto; padding-inline-end: 3px; }
.order-item { width: 100%; display: grid; gap: 6px; padding: 13px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface-subtle); text-align: right; transition: border-color var(--transition-fast), background var(--transition-fast); }
.order-item:hover, .order-item.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.order-item-head { display: flex; justify-content: space-between; gap: 8px; }
.order-item strong { font-size: .79rem; }
.order-item small { color: var(--color-text-muted); font-size: .65rem; }
.smart-workspace { display: grid; gap: 20px; }
.smart-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.summary-tile { min-height: 95px; padding: 14px; border: 1px solid var(--color-border); border-radius: 15px; background: var(--color-surface-subtle); }
.summary-tile span, .summary-tile strong { display: block; }
.summary-tile span { color: var(--color-text-muted); font-size: .68rem; }
.summary-tile strong { font-size: 1.2rem; margin-top: 5px; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.recommendation-card { padding: 17px; border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-surface-subtle); }
.recommendation-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.recommendation-avatar { width: 48px; height: 48px; border-radius: 14px; }
.match-score { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--color-primary); font-size: .7rem; font-weight: 900; }
.recommendation-card h3 { font-size: .9rem; margin-bottom: 3px; }
.recommendation-card p { color: var(--color-text-muted); font-size: .68rem; margin-bottom: 12px; }

/* Guarantee */
.role-switcher { display: inline-flex; padding: 5px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-subtle); }
.role-tab { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-muted); font-weight: 800; }
.role-tab.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.role-panel[hidden] { display: none; }
.guarantee-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.guarantee-info-card { padding: 21px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface-subtle); }
.guarantee-info-card h3 { font-size: 1rem; margin-bottom: 8px; }
.guarantee-info-card p { color: var(--color-text-secondary); font-size: .8rem; line-height: 1.9; }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; counter-reset: step; }
.process-step { min-height: 170px; padding: 18px; border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-surface); position: relative; }
.process-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 900; margin-bottom: 14px; }
.process-step h3 { font-size: .9rem; }
.process-step p { color: var(--color-text-muted); font-size: .72rem; line-height: 1.8; }
.offer-list { display: grid; gap: 10px; }
.offer-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 15px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-subtle); }
.offer-item h3 { font-size: .86rem; margin-bottom: 4px; }
.offer-item p { margin: 0; color: var(--color-text-muted); font-size: .7rem; }
.offer-price { font-weight: 900; color: var(--color-primary); white-space: nowrap; }

/* Benefits */
.benefits-hero-page .service-hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(340px,.65fr); }
.benefit-role-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 25px 0 0; }
.benefit-role-tab { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-secondary); font-weight: 800; }
.benefit-role-tab.is-active { background: var(--color-text-primary); color: var(--color-surface); border-color: var(--color-text-primary); }
html[data-theme="dark"] .benefit-role-tab.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.benefit-role-panel[hidden] { display: none; }
.role-benefit-layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 20px; align-items: stretch; }
.role-benefit-highlight { min-height: 430px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 24px; background: linear-gradient(145deg, var(--color-deep), var(--color-charcoal) 58%, #2B3139); color: #fff; position: relative; overflow: hidden; }
.role-benefit-highlight::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; top: -100px; left: -100px; background: rgba(14,203,129,.18); }
.role-benefit-highlight h2 { font-size: 2rem; margin-bottom: 12px; position: relative; }
.role-benefit-highlight p { color: rgba(255,255,255,.75); line-height: 2; position: relative; }
.role-benefit-highlight .button { align-self: flex-start; margin-top: 20px; position: relative; }
.role-benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.role-benefit-card { padding: 20px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.role-benefit-card .solution-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 15px; }
.role-benefit-card h3 { font-size: .94rem; margin-bottom: 7px; }
.role-benefit-card p { margin: 0; color: var(--color-text-muted); font-size: .75rem; line-height: 1.85; }
.trust-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.trust-strip-item { padding: 22px; text-align: center; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.trust-strip-item strong { display: block; font-size: 1.35rem; color: var(--color-primary); }
.trust-strip-item span { color: var(--color-text-muted); font-size: .75rem; }

/* Service modal and toast */
.service-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; }
.service-modal[hidden] { display: none; }
.service-modal-backdrop { position: absolute; inset: 0; background: var(--color-overlay); backdrop-filter: blur(5px); }
.service-modal-panel { position: relative; width: min(100%, 600px); max-height: min(90dvh,760px); overflow: auto; padding: 26px; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.service-modal-close { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface-subtle); }
.service-modal-head { padding-inline-end: 42px; margin-bottom: 22px; }
.service-modal-head p { color: var(--color-text-muted); font-size: .8rem; }
.service-toast-region { position: fixed; left: 18px; bottom: 18px; z-index: 1200; display: grid; gap: 10px; width: min(390px,calc(100vw - 36px)); }
.service-toast { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-lg); animation: serviceToastIn .25s ease both; }
.service-toast strong { display: block; font-size: .83rem; }
.service-toast span { color: var(--color-text-muted); font-size: .72rem; }
@keyframes serviceToastIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1180px) {
  .solutions-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-header .desktop-nav { display: none; }
  .service-header .menu-toggle { display: inline-grid; }
  .opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .service-hero-grid { grid-template-columns: 1fr; }
  .service-hero-panel { max-width: 620px; }
  .smart-layout { grid-template-columns: 1fr; }
  .smart-sidebar { position: static; }
  .order-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .role-benefit-layout { grid-template-columns: 1fr; }
  .role-benefit-highlight { min-height: 320px; }
}
@media (max-width: 768px) {
  .service-header .account-chip { display: none; }
  .service-hero { padding-top: 46px; }
  .service-hero h1 { font-size: clamp(2rem,11vw,3rem); }
  .field-grid, .field-grid.two { grid-template-columns: 1fr; }
  .filter-toolbar { grid-template-columns: 1fr 1fr; }
  .filter-toolbar .ui-field:first-child { grid-column: 1 / -1; }
  .access-gate { grid-template-columns: auto 1fr; }
  .access-gate-actions { grid-column: 1 / -1; }
  .access-gate-actions .button { flex: 1; }
  .smart-summary { grid-template-columns: repeat(2,1fr); }
  .guarantee-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .solutions-grid, .opportunity-grid, .recommendation-grid, .order-list, .role-benefit-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 390px; }
  .service-hero-actions .button { width: 100%; }
  .filter-toolbar { grid-template-columns: 1fr; }
  .filter-toolbar .ui-field:first-child { grid-column: auto; }
  .process-steps { grid-template-columns: 1fr; }
  .smart-summary { grid-template-columns: 1fr 1fr; }
  .service-card { padding: 18px; border-radius: 18px; }
  .service-card-head { flex-direction: column; }
  .service-modal { padding: 0; place-items: end center; }
  .service-modal-panel { width: 100%; max-height: 94dvh; border-radius: 24px 24px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .hero-mini-stats, .smart-summary { grid-template-columns: 1fr; }
  .service-account .button { display: none; }
  .offer-item { grid-template-columns: 1fr; }
  .role-switcher { width: 100%; }
  .role-tab { flex: 1; }
}
.service-page .footer-grid { grid-template-columns: 1.4fr .8fr .8fr; }
@media (max-width: 768px) { .service-page .footer-grid { grid-template-columns: repeat(2,1fr); } .service-page .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 620px) { .service-page .footer-grid { grid-template-columns: 1fr; } .service-page .footer-brand { grid-column: auto; } }


/* Disabled premium services: shown only after blogger verification */
a[data-disabled-service="true"] {
  cursor: not-allowed !important;
  opacity: .7;
  filter: saturate(.55);
}
a[data-disabled-service="true"]:hover,
a[data-disabled-service="true"]:focus-visible,
a[data-disabled-service="true"].is-note-visible {
  opacity: 1;
  filter: none;
}
a.button[data-disabled-service="true"] {
  overflow: visible;
}

/* Desktop navigation subtitle */
.desktop-nav .nav-link[data-disabled-service="true"]::before {
  content: attr(data-disabled-message);
}
.desktop-nav .nav-link[data-disabled-service="true"]:hover::before,
.desktop-nav .nav-link[data-disabled-service="true"]:focus-visible::before,
.desktop-nav .nav-link[data-disabled-service="true"].is-note-visible::before {
  opacity: 1;
  transform: translate(50%, 0);
}

/* Mobile menu subtitle: hidden until hover, keyboard focus or touch */
.mobile-nav-links a[data-disabled-service="true"] .disabled-mobile-note {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-primary);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.75;
  transition: max-height var(--transition-normal), margin-top var(--transition-fast), opacity var(--transition-fast);
}
.mobile-nav-links a[data-disabled-service="true"]:hover .disabled-mobile-note,
.mobile-nav-links a[data-disabled-service="true"]:focus-visible .disabled-mobile-note,
.mobile-nav-links a[data-disabled-service="true"].is-note-visible .disabled-mobile-note {
  max-height: 72px;
  margin-top: 5px;
  opacity: 1;
}

/* Disabled solution cards */
.solution-card.is-service-disabled {
  cursor: default;
}
.solution-card.is-service-disabled .solution-link {
  cursor: not-allowed;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .solution-card.is-service-disabled .solution-link {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}
.solution-card.is-service-disabled .solution-link span {
  transform: none !important;
}
.solution-card.is-service-disabled .solution-access-note {
  min-height: 0;
  max-height: 0;
  margin-top: 0;
  padding-block: 0;
  border-width: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transition: max-height var(--transition-normal), min-height var(--transition-normal), margin-top var(--transition-normal), padding var(--transition-normal), border-width var(--transition-fast), opacity var(--transition-fast);
}
.solution-card.is-service-disabled:hover .solution-access-note,
.solution-card.is-service-disabled:focus-within .solution-access-note,
.solution-card.is-service-disabled.is-note-visible .solution-access-note {
  min-height: 42px;
  max-height: 80px;
  margin-top: 12px;
  padding: 7px 10px;
  border-width: 1px;
  opacity: 1;
}

/* Other disabled links, such as footer and benefit call-to-action buttons */
a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a) {
  position: relative;
}
a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a)::after {
  content: attr(data-disabled-message);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: max-content;
  max-width: min(280px, 82vw);
  padding: 8px 11px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-md);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.75;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a):hover::after,
a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a):focus-visible::after,
a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a).is-note-visible::after {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a)::after {
    right: 50%;
    transform: translate(50%, -5px);
  }
  a[data-disabled-service="true"]:not(.nav-link):not(.solution-link):not(.mobile-nav-links a).is-note-visible::after {
    transform: translate(50%, 0);
  }
}


/* Verification-only service access — exact requested hover treatment. */
.desktop-nav .nav-link[data-disabled-service="true"]{position:relative!important;cursor:not-allowed!important}
.desktop-nav .nav-link[data-disabled-service="true"]::before{
  content:attr(data-disabled-message)!important;
  width:max-content!important;
  max-width:310px!important;
  padding:8px 11px!important;
  border-radius:11px!important;
  background:var(--color-surface-elevated)!important;
  border:1px solid var(--color-border)!important;
  color:var(--color-text-primary)!important;
  box-shadow:var(--shadow-md)!important;
  font-size:.67rem!important;
  font-weight:750!important;
  line-height:1.65!important;
  white-space:normal!important;
  pointer-events:none!important;
}

.home-page .v4-service-card[data-disabled-service="true"]{
  position:relative!important;
  cursor:not-allowed!important;
  opacity:1!important;
  filter:none!important;
  overflow:hidden!important;
}
.home-page .v4-service-card[data-disabled-service="true"]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:18;
  background:linear-gradient(180deg,rgba(18,20,38,.06),rgba(18,20,38,.58));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.home-page .v4-service-card[data-disabled-service="true"]::after{
  content:attr(data-disabled-message)!important;
  position:absolute!important;
  inset:auto 18px 18px 18px!important;
  z-index:19!important;
  width:auto!important;
  max-width:none!important;
  padding:12px 14px!important;
  border:1px solid rgba(255,255,255,.32)!important;
  border-radius:14px!important;
  background:rgba(19,21,39,.82)!important;
  color:#fff!important;
  box-shadow:0 14px 36px rgba(12,14,28,.22)!important;
  backdrop-filter:blur(12px)!important;
  font-size:.76rem!important;
  font-weight:800!important;
  line-height:1.75!important;
  text-align:center!important;
  white-space:normal!important;
  opacity:0!important;
  transform:translateY(8px)!important;
  pointer-events:none!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
.home-page .v4-service-card[data-disabled-service="true"]:hover::before,
.home-page .v4-service-card[data-disabled-service="true"]:focus-visible::before,
.home-page .v4-service-card[data-disabled-service="true"].is-note-visible::before{opacity:1!important}
.home-page .v4-service-card[data-disabled-service="true"]:hover::after,
.home-page .v4-service-card[data-disabled-service="true"]:focus-visible::after,
.home-page .v4-service-card[data-disabled-service="true"].is-note-visible::after{opacity:1!important;transform:translateY(0)!important}
.home-page .v4-service-card[data-disabled-service="true"] .v4-card-link{pointer-events:none!important}
html[data-theme="dark"] .home-page .v4-service-card[data-disabled-service="true"]::after{
  background:rgba(6,8,18,.88)!important;
  border-color:rgba(255,255,255,.16)!important;
}

html[data-theme="dark"] .desktop-nav .nav-link[data-disabled-service="true"]::before{background:#171b31!important;border-color:#303654!important;color:#f5f7ff!important;box-shadow:0 16px 42px rgba(0,0,0,.38)!important}

/* Active authenticated-service hover treatment.
   Links remain fully clickable; only the explanatory message is visual. */
a[data-auth-hover]{
  cursor:pointer!important;
  opacity:1!important;
  filter:none!important;
}

/* Desktop header: keep the compact tooltip while preserving navigation. */
.desktop-nav .nav-link[data-auth-hover]{
  position:relative!important;
  cursor:pointer!important;
}
.desktop-nav .nav-link[data-auth-hover]::before{
  content:attr(data-auth-hover)!important;
}

/* Generic service buttons/cards outside the homepage three-card module. */
a[data-auth-hover]:not(.nav-link):not(.v4-service-card):not(.mobile-nav-links a){
  position:relative;
}
a[data-auth-hover]:not(.nav-link):not(.v4-service-card):not(.mobile-nav-links a)::after{
  content:attr(data-auth-hover);
  position:absolute;
  top:calc(100% + 8px);
  right:50%;
  z-index:90;
  width:max-content;
  max-width:min(310px,84vw);
  padding:9px 12px;
  border:1px solid var(--color-border);
  border-radius:11px;
  background:var(--color-surface-elevated);
  color:var(--color-text-primary);
  box-shadow:var(--shadow-md);
  font-size:.7rem;
  font-weight:750;
  line-height:1.7;
  text-align:center;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(50%,-5px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
}
a[data-auth-hover]:not(.nav-link):not(.v4-service-card):not(.mobile-nav-links a):hover::after,
a[data-auth-hover]:not(.nav-link):not(.v4-service-card):not(.mobile-nav-links a):focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(50%,0);
}

/* Homepage "برای هر همکاری، یک مسیر روشن" cards:
   exact full-card dark overlay behavior from the user-supplied reference/video. */
.home-page .v4-service-card[data-auth-hover]{
  position:relative!important;
  isolation:isolate!important;
  cursor:pointer!important;
  opacity:1!important;
  filter:none!important;
  overflow:hidden!important;
}
.home-page .v4-service-card[data-auth-hover]::before,
.home-page .v4-service-card[data-auth-hover]::after{
  content:none!important;
  display:none!important;
}
.home-page .v4-service-card .v4-auth-note{
  position:absolute!important;
  inset:0!important;
  z-index:40!important;
  display:grid!important;
  place-items:center!important;
  width:auto!important;
  max-width:none!important;
  padding:30px!important;
  border:0!important;
  border-radius:inherit!important;
  background:rgba(18,20,19,.88)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-align:center!important;
  white-space:normal!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
  pointer-events:none!important;
  transition:opacity .22s ease,visibility .22s ease!important;
}
.home-page .v4-service-card .v4-auth-note-inner{
  display:block!important;
  max-width:22rem!important;
  direction:rtl!important;
  text-align:center!important;
}
.home-page .v4-service-card .v4-auth-note-text{
  color:#fff!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.9!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
}
.home-page .v4-service-card .v4-auth-note-tail{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
.home-page .v4-service-card .v4-auth-note-emoji{
  display:inline-block!important;
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  margin:0!important;
  border-radius:50%!important;
  object-fit:cover!important;
  vertical-align:middle!important;
  box-shadow:0 2px 10px rgba(0,0,0,.18)!important;
}
.home-page .v4-service-card[data-auth-hover]:hover,
.home-page .v4-service-card[data-auth-hover]:focus-visible{
  transform:translateY(-4px)!important;
  box-shadow:0 18px 48px rgba(30,34,30,.08)!important;
}
.home-page .v4-service-card[data-auth-hover]:hover img,
.home-page .v4-service-card[data-auth-hover]:focus-visible img{
  transform:none!important;
}
.home-page .v4-service-card[data-auth-hover]:hover .v4-auth-note,
.home-page .v4-service-card[data-auth-hover]:focus-visible .v4-auth-note,
.home-page .v4-service-card[data-auth-hover].is-note-visible .v4-auth-note{
  opacity:1!important;
  visibility:visible!important;
}
@media (max-width:760px){
  .home-page .v4-service-card .v4-auth-note{
    padding:22px!important;
  }
  .home-page .v4-service-card .v4-auth-note-inner{
    max-width:16rem!important;
  }
  .home-page .v4-service-card .v4-auth-note-emoji{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important;
  }
  .home-page .v4-service-card .v4-auth-note-tail{
    gap:6px!important;
  }
  .home-page .v4-service-card .v4-auth-note-text{
    font-size:15px!important;
    line-height:1.9!important;
  }
}

/* Mobile drawer links stay active and preserve their normal descriptive subtitles. */
.mobile-nav-links a[data-auth-hover]{
  cursor:pointer!important;
  opacity:1!important;
  filter:none!important;
}