/* Campino / Soroush advertising — visual refinement v2 */
.sp-page,
#soroush-modal {
  --sp-blue: #087bb7;
  --sp-blue-2: #2ca6dc;
  --sp-sky: #eaf7fc;
  --sp-ink: #241e2f;
  --sp-gold: #d79542;
  --sp-border: #d9e5eb;
  --sp-shadow: 0 22px 70px rgba(36, 30, 47, 0.1);
}

.sp-page { background: #fff; }
.sp-page .container { width: min(1160px, calc(100% - 64px)); }
.sp-section { padding: clamp(76px, 7vw, 112px) 0; }
.sp-page h2 { max-width: 760px; letter-spacing: -.035em; }
.sp-head { margin-bottom: 50px; }
.sp-kicker { gap: 9px; align-items: center; font-size: .82rem; letter-spacing: .02em; }
.sp-kicker::before { content: ''; width: 24px; height: 2px; background: var(--sp-gold); border-radius: 9px; }

.sp-hero {
  overflow: hidden;
  padding: 58px 0 88px;
  background:
    radial-gradient(circle at 84% 12%, rgba(44,166,220,.12), transparent 26%),
    radial-gradient(circle at 18% 88%, rgba(215,149,66,.1), transparent 24%),
    linear-gradient(145deg, #fff 0 42%, #f4f9fb 100%);
  border-bottom: 1px solid rgba(36,30,47,.08);
}
.sp-hero::before { content: ''; position: absolute; inset: 0; opacity: .24; pointer-events: none; background-image: radial-gradient(#8fc9df 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(90deg,#000,transparent 62%); }
.sp-hero-grid { position: relative; grid-template-columns: minmax(0,1.02fr) minmax(450px,.98fr); gap: clamp(44px,5vw,74px); }
.sp-hero h1 { max-width: 650px; font-size: clamp(2.55rem,3.45vw,3.85rem); line-height: 1.3; margin: 23px 0 18px; letter-spacing: -.055em; text-wrap: balance; }
.sp-hero h1 span { color: var(--sp-blue); }
.sp-hero-copy > p { max-width: 610px; font-size: 1rem; line-height: 2.05; }
.sp-btn { border-radius: 13px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.sp-btn--primary { background: linear-gradient(135deg, var(--sp-blue), #05659b); box-shadow: 0 12px 26px rgba(8,123,183,.23); }
.sp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(8,123,183,.3); }
.sp-btn--ghost:hover { background: var(--sp-sky); }

.message-flow { padding: 32px; border-radius: 30px; border-color: rgba(8,123,183,.18); box-shadow: 0 26px 70px rgba(36,30,47,.12); transform: none; }
.message-flow::after { content: ''; position: absolute; inset: 10px -10px -10px 10px; z-index: -1; border: 1px solid rgba(8,123,183,.12); border-radius: 30px; }
.flow-top strong { font-size: 1.12rem; }
.flow-stage { grid-template-columns: 1fr 32px 1fr 32px 1fr; }
.flow-card { min-height: 156px; display: flex; flex-direction: column; justify-content: center; border: 0; box-shadow: inset 0 0 0 1px var(--sp-border); }
.flow-card:nth-of-type(2) { box-shadow: 0 16px 34px rgba(8,123,183,.25); transform: translateY(-9px); }
.flow-line { background: repeating-linear-gradient(90deg,#79bddb 0 6px,transparent 6px 11px); }
.flow-result { border: 1px solid #d9ebf2; }

.fit { position: relative; }
.fit-grid { grid-template-columns: minmax(310px,.72fr) minmax(0,1.28fr); gap: 32px; }
.fit-axis { position: sticky; top: 112px; padding: 40px 36px; border-radius: 30px; box-shadow: 0 24px 55px rgba(36,30,47,.2); }
.fit-axis li { position: relative; padding-right: 26px; }
.fit-axis li::before { content: ''; position: absolute; right: 2px; top: 24px; width: 9px; height: 9px; border: 2px solid var(--sp-gold); border-radius: 50%; }
.fit-matrix { grid-template-columns: repeat(6,1fr); gap: 14px; align-items: stretch; }
.fit-card { grid-column: span 3; min-height: 190px; padding: 27px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--sp-border); }
.fit-card:nth-child(1), .fit-card:nth-child(4) { grid-column: span 4; }
.fit-card:nth-child(2), .fit-card:nth-child(3) { grid-column: span 2; }
.fit-card:nth-last-child(-n+2) { background: #fbf8f4; box-shadow: inset 0 0 0 1px #eadcc9; }

.readiness { background: linear-gradient(180deg,#f2f8fb,#fff); }
.ready-grid { grid-template-columns: minmax(0,1.35fr) 330px; gap: 42px; }
.checklist { grid-template-columns: repeat(2,1fr); gap: 0; border: 1px solid var(--sp-border); border-radius: 24px; overflow: hidden; background: #fff; }
.checklist label { margin: 0; min-height: 112px; border: 0; border-radius: 0; padding: 22px; box-shadow: inset 0 0 0 .5px var(--sp-border); transition: background .2s ease; }
.checklist label:has(input:checked) { background: #edf9f3; }
.ready-panel { border-radius: 28px; box-shadow: 0 26px 55px rgba(36,30,47,.2); }

.models { background: #fff; }
.model-stack { position: relative; gap: 0; border-right: 2px solid #cce4ef; margin-right: 22px; }
.model-row { position: relative; grid-template-columns: 210px repeat(3,1fr); overflow: visible; border: 0; border-bottom: 1px solid var(--sp-border); border-radius: 0; margin-right: 28px; }
.model-row::before { content: ''; position: absolute; right: -36px; top: 35px; width: 14px; height: 14px; border: 4px solid #fff; background: var(--sp-blue); border-radius: 50%; box-shadow: 0 0 0 1px #add6e7; }
.model-row > * { border: 0; padding: 28px 22px; }
.model-row h3 { background: transparent; color: var(--sp-ink); padding-right: 0; }
.source-note { border: 0; border-radius: 14px; margin-top: 28px; padding: 18px 20px; background: #f5fafc; font-size: .9rem; }
.source-note a { color: #086a9d; font-weight: 700; }

.workshop { position: relative; overflow: hidden; background: linear-gradient(135deg,#241e2f,#33283d); }
.workshop::before { content: ''; position: absolute; width: 420px; height: 420px; left: -140px; top: -180px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02); }
.workshop-grid { position: relative; grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr); align-items: center; gap: 70px; }
.recipe-row { background: transparent; border: 0; border-bottom: 1px solid #4a4051; border-radius: 0; padding: 16px 0; }
.recipe-row i { border-radius: 50%; background: transparent; border: 1px solid #58879c; color: #8ed4ef; }
.demo-message { padding: clamp(30px,4vw,48px); border-radius: 4px 30px 30px 30px; box-shadow: 0 28px 75px rgba(0,0,0,.23); }

.journey-track { grid-template-columns: repeat(7,minmax(140px,1fr)); gap: 0; overflow-x: auto; padding: 28px 6px 18px; scrollbar-width: thin; }
.journey-step { min-width: 150px; padding: 24px 14px; border-top: 2px solid #9fcfdf; }
.journey-step:nth-child(even) { background: #f7fbfd; }
.journey-step span { box-shadow: 0 0 0 6px #fff; }

.managed { background: #edf7fb; }
.managed-grid { grid-template-columns: 390px 1fr; gap: 0; align-items: stretch; }
.managed-intro { border-radius: 28px 0 28px 28px; padding: 46px 38px; background: linear-gradient(145deg,#087bb7,#075e8d); }
.managed-list { grid-template-columns: repeat(2,1fr); gap: 0; border: 1px solid #cfe1e9; border-radius: 0 28px 28px 28px; overflow: hidden; background: #fff; }
.managed-list div { border-radius: 0; margin: -1px 0 0 -1px; padding: 24px; }

.process-list { position: relative; gap: 0; border: 1px solid var(--sp-border); border-radius: 26px; overflow: hidden; }
.process-list article { min-height: 235px; border: 0; border-left: 1px solid var(--sp-border); border-radius: 0; padding: 30px 24px; }
.process-list article:last-child { border-left: 0; background: var(--sp-ink); color: #fff; }
.process-list article:last-child p { color: #d9d2df; }
.process-list span { font-size: 1.7rem; color: rgba(8,123,183,.42); }

.metrics { background: #241e2f; }
.metrics-grid { gap: 0; border: 1px solid #4d4455; border-radius: 28px; overflow: hidden; }
.metric-level { min-height: 260px; border: 0; border-left: 1px solid #4d4455; border-radius: 0; padding: 35px; background: transparent; }
.metric-level:last-child { border-left: 0; }
.metric-level:nth-child(2) { background: #302739; }

.cost { background: #fbfaf8; }
.budget-model { position: relative; grid-template-columns: repeat(4,1fr); gap: 18px; align-items: stretch; }
.budget-model::before { content: 'بودجه نهایی کمپین'; position: absolute; right: 50%; bottom: -25px; transform: translate(50%,100%); padding: 10px 22px; color: #fff; background: var(--sp-ink); border-radius: 999px; font-weight: 700; }
.budget-piece { min-height: 230px; border: 0; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sp-border); }
.budget-piece span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--sp-blue); }
.budget-plus { display: none; }

.expect-grid { grid-template-columns: 1fr; gap: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--sp-shadow); }
.expect-panel { display: grid; grid-template-columns: 220px 1fr; align-items: start; padding: 32px; border: 0; border-radius: 0; }
.expect-panel + .expect-panel { border-top: 1px solid var(--sp-border); }
.expect-panel ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 30px; margin: 0; }

.related-grid { grid-template-columns: repeat(12,1fr); gap: 14px; }
.related-card { position: relative; grid-column: span 4; min-height: 220px; overflow: hidden; padding: 28px; border-radius: 24px; background: #fff; }
.related-card:nth-child(1), .related-card:nth-child(6) { grid-column: span 6; background: #f5fafc; }
.related-card::before { content: ''; display: block; width: 44px; height: 44px; margin-bottom: 24px; border-radius: 13px; background: linear-gradient(135deg,#dff3fb,#bce4f3); box-shadow: inset 0 0 0 1px #abd8e9; }
.related-card::after { content: '↗'; position: absolute; left: 24px; top: 24px; color: var(--sp-blue); font-size: 1.25rem; }

.faq-wrap details { padding: 0; border: 1px solid var(--sp-border); border-radius: 16px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.faq-wrap summary { padding: 20px 22px; list-style: none; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: '+'; float: left; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sp-sky); color: var(--sp-blue); }
.faq-wrap details[open] summary::after { content: '−'; }
.faq-wrap details p { margin: 0; padding: 0 22px 22px; max-width: 760px; }

.sp-final { position: relative; overflow: hidden; padding: 86px 0; }
.sp-final::after { content: ''; position: absolute; left: -80px; top: -120px; width: 340px; height: 340px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }

@media (max-width: 1024px) {
  .sp-page .container { width: min(100% - 48px,1160px); }
  .sp-hero-grid, .fit-grid, .ready-grid, .workshop-grid, .managed-grid { grid-template-columns: 1fr; }
  .sp-hero-grid { gap: 46px; }
  .sp-hero-copy { max-width: 760px; }
  .message-flow { max-width: 760px; }
  .fit-axis, .ready-panel { position: static; }
  .fit-matrix { grid-template-columns: repeat(2,1fr); }
  .fit-card, .fit-card:nth-child(n) { grid-column: auto; }
  .managed-intro, .managed-list { border-radius: 26px; }
  .managed-list { margin-top: 16px; }
  .process-list { grid-template-columns: repeat(2,1fr); }
  .process-list article { border-bottom: 1px solid var(--sp-border); }
  .process-list article:last-child { grid-column: 1/-1; }
  .budget-model { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 700px) {
  .sp-page .container { width: min(100% - 32px,1160px); }
  .sp-section { padding: 68px 0; }
  .sp-hero { padding: 38px 0 64px; }
  .sp-hero h1 { font-size: clamp(2.05rem,10vw,2.75rem); line-height: 1.42; }
  .sp-hero-copy > p { font-size: .92rem; }
  .message-flow { transform: none; padding: 20px; border-radius: 22px; }
  .message-flow::after { display: none; }
  .flow-stage { grid-template-columns: 1fr; }
  .flow-line { width: 2px; height: 24px; background: repeating-linear-gradient(0deg,#79bddb 0 5px,transparent 5px 9px); }
  .flow-card { min-height: 130px; }
  .flow-card:nth-of-type(2) { transform: none; }
  .fit-matrix, .checklist, .managed-list, .metrics-grid, .expect-panel, .expect-panel ul { grid-template-columns: 1fr; }
  .model-stack { margin-right: 6px; }
  .model-row { grid-template-columns: 1fr; margin-right: 22px; }
  .model-row > * { padding: 18px 20px; }
  .journey-track { display: grid; grid-template-columns: 1fr; overflow: visible; padding-right: 20px; }
  .journey-step { border-top: 0; border-right: 2px solid #9fcfdf; padding: 0 30px 30px 12px; }
  .journey-step span { float: none; position: absolute; margin: 0; right: -20px; }
  .journey-step { position: relative; }
  .process-list, .budget-model { grid-template-columns: 1fr; }
  .process-list article, .process-list article:last-child { grid-column: auto; min-height: auto; border-left: 0; }
  .metric-level { min-height: auto; border-left: 0; border-bottom: 1px solid #4d4455; }
  .budget-model::before { position: static; transform: none; grid-row: 5; text-align: center; margin-top: 6px; }
  .budget-piece { min-height: auto; }
  .expect-panel { gap: 14px; }
  .related-grid { grid-template-columns: 1fr; }
  .related-card, .related-card:nth-child(n) { grid-column: auto; min-height: 200px; }
  .sp-final .container { text-align: right; }
}

@media (max-width: 360px) {
  .sp-page .container { width: min(100% - 24px,1160px); }
  .sp-btn { padding-inline: 15px; font-size: .92rem; }
  .message-flow { padding: 16px; }
  .flow-top { align-items: flex-start; gap: 8px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-btn, .related-card { transition: none; }
}