/* Kasvukumppanuus 3/7: palvelutasojen suhde, Kevyt-tason työ, Teho-tason kanavat ja mainosbudjetti */
/* =========================================================
   FEATURES GRID (mixed: kortit 1 & 5 tummia)
   ========================================================= */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 48px;
}
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: rgba(35, 46, 102, 0.18);
}
.feature .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--orange-50); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.feature h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.feature p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

.features-mixed {
  background: #f1f3fa; position: relative; overflow: hidden;
}
.features-mixed::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 62% at -3% 45%, rgba(245,128,36,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 58% at 104% 50%, rgba(216,35,205,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 44% at 50% 108%, rgba(230,70,68,0.10) 0%, transparent 55%);
}
.features-mixed .container { position: relative; z-index: 1; }
.features-mixed .feature { background: #fff; }
.features-mixed .feature:not(:nth-child(4n+1)) .ic {
  background: linear-gradient(135deg, rgba(252,181,73,0.18) 0%, rgba(216,35,205,0.13) 100%);
  color: #e64644;
}
.features-mixed .feature:nth-child(4n+1) {
  background: #090e24; border-color: rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.features-mixed .feature:nth-child(4n+1)::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 110% 110%, rgba(216,35,205,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at -10% -10%, rgba(245,128,36,0.14) 0%, transparent 55%);
  border-radius: inherit;
}
.features-mixed .feature:nth-child(4n+1):hover {
  background: #0d1530; border-color: rgba(255,255,255,0.14);
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.65);
}
.features-mixed .feature:nth-child(4n+1) .ic {
  background: var(--grad-tilt); color: #fff;
  box-shadow: 0 4px 18px rgba(230,70,68,0.45);
}
.features-mixed .feature:nth-child(4n+1) h3 { color: #fff; }
.features-mixed .feature:nth-child(4n+1) p  { color: rgba(255,255,255,0.58); }

/* =========================================================
   GROWTH LADDER: Ylläpito → KEVYT → TÄYSI
   ========================================================= */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 860px) { .ladder { grid-template-columns: 1fr; } }

.rung {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rung:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.rung-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 800;
  background: var(--navy-50); color: var(--navy);
}
.rung-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.rung h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.rung p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

/* perusta */
.rung--base .rung-step { background: var(--navy-50); color: var(--navy); }
/* kevyt: korostettu oranssi */
.rung--kevyt { border-color: rgba(245,128,36,0.4); }
.rung--kevyt .rung-step { background: var(--orange-50); color: var(--orange); }
/* täysi: dramaattinen tumma */
.rung--taysi {
  background: #090e24;
  border-color: rgba(252,181,73,0.45);
  box-shadow: 0 0 0 1px rgba(252,181,73,0.15), 0 20px 56px -12px rgba(10,14,36,0.6), 0 0 60px -18px rgba(245,128,36,0.3);
  overflow: hidden;
}
.rung--taysi::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,128,36,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(216,35,205,0.12) 0%, transparent 55%);
}
.rung--taysi > * { position: relative; z-index: 1; }
.rung--taysi .rung-step { background: var(--grad-tilt); color: #fff; box-shadow: 0 4px 16px rgba(230,70,68,0.45); }
.rung--taysi .rung-label { color: var(--orange-soft); }
.rung--taysi h3 { color: #fff; }
.rung--taysi p { color: rgba(255,255,255,0.62); }

/* opinionated huomautus tikapuiden alla */
.ladder-note {
  margin-top: 28px;
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: 16px;
  padding: 22px 26px;
}
.ladder-note-mark {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--grad-tilt); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ladder-note p { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; }
.ladder-note strong { color: var(--navy-dark); }

/* =========================================================
   TÄYSI CHANNELS: SEO / GEO / Google Ads
   ========================================================= */
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 860px) { .channels { grid-template-columns: 1fr; } }

.channel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.channel:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(35,46,102,0.18); }
.channel-top { display: flex; align-items: center; gap: 14px; }
.channel-ic {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-tilt); color: #fff;
  box-shadow: 0 6px 18px -4px rgba(230,70,68,0.4);
}
.channel-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.channel h3 { font-size: 21px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.channel p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

.channels-claim {
  margin-top: 28px; text-align: center;
  font-size: clamp(17px, 1.8vw, 22px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.4;
  max-width: 760px; margin-left: auto; margin-right: auto;
  color: var(--text);
}
.channels-claim .gr {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================
   MEDIA BUDGET CALLOUT: rehellinen mainosbudjetti
   ========================================================= */
.budget-callout {
  margin-top: 32px;
  background: #090e24;
  border-radius: 24px;
  padding: 44px 48px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
.budget-callout::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 12% 20%, rgba(245,128,36,0.2) 0%, transparent 55%),
    radial-gradient(ellipse 55% 60% at 95% 90%, rgba(216,35,205,0.18) 0%, transparent 55%);
}
.budget-callout > * { position: relative; z-index: 1; }
.budget-callout h3 {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.15; color: #fff; margin-bottom: 14px;
}
.budget-callout p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.66); }
.budget-dial {
  display: flex; flex-direction: column; gap: 12px;
}
.budget-dial-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 16px 18px;
}
.budget-dial-amount {
  font-size: 24px; font-weight: 900; letter-spacing: -0.03em;
  color: #fff; flex-shrink: 0; min-width: 78px;
}
.budget-dial-amount.zero { color: var(--orange-soft); }
.budget-dial-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.45; }
@media (max-width: 760px) {
  .budget-callout { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
}