/* ============================================================
   EDUSAMM — style-service-pages.css
   Jagatud stiilid kõigile 4 uuele teenuselehele.
   Laetakse PEALE style-base.css ja style-shared.css.
   ============================================================ */

/* ── SHARED HERO VISUAL HEADER ───────────────────────────────── */
.sv-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem;
}
.sv-title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  color: var(--ink); font-size: .95rem;
}
.sv-live {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); padding: .25rem .6rem; border-radius: 100px;
}
.sv-live .lp {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); animation: softpulse 1.6s ease-in-out infinite;
}

/* ── HERO VISUAL: OTSUSTEE (konversioonilehed) ──────────────── */
.sv-otsustee {
  background: linear-gradient(160deg, #ffffff 0%, var(--paper-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.6rem;
  position: relative; overflow: hidden;
}
.sv-otsustee::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(29,91,227,0.07), transparent 70%);
  pointer-events: none;
}
.sv-step-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .65rem; border-radius: var(--radius-sm);
  background: var(--paper-2); border: 1px solid var(--line);
}
.sv-step-row--active {
  background: var(--blue-soft); border-color: rgba(29,91,227,0.22);
}
.sv-step-row--goal {
  background: var(--blue); border-color: var(--blue);
}
.sv-sn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--paper-3); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .76rem;
}
.sv-sn--active { background: var(--blue); color: #fff; }
.sv-sn--goal { background: rgba(255,255,255,0.22); color: #fff; }
.sv-sl { font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.sv-step-row--active .sv-sl { color: var(--blue); font-weight: 600; }
.sv-step-row--goal .sv-sl { color: #fff; font-weight: 600; }
.sv-conn-row {
  display: flex; align-items: center; gap: .6rem;
  padding-left: .65rem; height: 22px;
}
.sv-vl {
  width: 2px; height: 22px; margin-left: 12px; border-radius: 2px; flex-shrink: 0;
}
.sv-vl--bad {
  background: repeating-linear-gradient(
    to bottom, #E5766D 0, #E5766D 4px, transparent 4px, transparent 8px
  );
}
.sv-vl--good { background: var(--blue); }
.sv-ct {
  font-size: .68rem; font-weight: 600; padding: .14rem .5rem; border-radius: 100px;
}
.sv-ct--bad { background: rgba(229,118,109,0.12); color: #C0392B; }
.sv-ct--good { background: var(--blue-soft); color: var(--blue); }

/* ── HERO VISUAL: REKLAAMISÜSTEEM (tasuline-reklaam) ────────── */
.sv-dashboard {
  background: linear-gradient(160deg, #ffffff 0%, var(--paper-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.6rem;
  position: relative; overflow: hidden;
}
.sv-dashboard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(29,91,227,0.07), transparent 70%);
  pointer-events: none;
}
.sv-channels {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .6rem;
}
.sv-channels--stack {
  grid-template-columns: 1fr; gap: .6rem; margin-bottom: 0;
}
.sv-ch-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem; box-shadow: var(--shadow);
}
.sv-ch-card--logo {
  display: flex; align-items: center; gap: .85rem;
}
.sv-ch-logo {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
}
.sv-ch-info { flex: 1; }
.sv-ch-name { font-weight: 700; color: var(--ink); font-size: .88rem; margin-bottom: .2rem; }
.sv-ch-tag { font-size: .66rem; color: var(--muted); margin-bottom: .4rem; }
.sv-ch-flow { font-size: .68rem; color: var(--blue); font-weight: 600; }
.sv-result {
  background: var(--blue); color: #fff; text-align: center;
  padding: .6rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-blue); margin-bottom: .65rem;
}
.sv-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; }
.sv-metric {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .35rem; text-align: center;
}
.sv-metric .m-l {
  display: block; font-size: .58rem; color: var(--muted);
  font-weight: 600; letter-spacing: .02em; margin-bottom: .2rem;
}
.sv-metric .m-v {
  display: block; font-family: 'Fraunces', serif; font-size: .9rem;
  color: var(--blue); font-weight: 600;
}

/* ── HERO VISUAL: POSITSIONEERIMISE KAART (brandi) ──────────── */
.sv-brand {
  background: linear-gradient(160deg, #ffffff 0%, var(--paper-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.6rem;
  position: relative; overflow: hidden;
}
.sv-brand::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(29,91,227,0.07), transparent 70%);
  pointer-events: none;
}
.sv-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.sv-profile {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem; box-shadow: var(--shadow);
}
.sv-prof-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; margin-bottom: .4rem;
}
.sv-prof-handle { font-size: .66rem; color: var(--muted); font-weight: 500; margin-bottom: .45rem; }
.sv-prof-row {
  font-size: .66rem; color: var(--ink-soft); padding: .2rem 0;
  border-bottom: 1px solid var(--line); line-height: 1.45;
}
.sv-prof-row:last-of-type { border-bottom: none; }
.sv-prof-row .bio-l { color: var(--muted); font-size: .62rem; }
.sv-prof-cta {
  margin-top: .5rem; background: var(--blue); color: #fff; text-align: center;
  padding: .28rem .5rem; border-radius: var(--radius-sm); font-size: .63rem; font-weight: 600;
}
.sv-pos-side { display: flex; flex-direction: column; gap: .45rem; }
.sv-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; }
.sv-pos-cell {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .45rem .5rem;
  font-size: .64rem; font-weight: 600; color: var(--ink-soft); text-align: center;
  transition: all .4s ease;
}
.pc-1 { animation: posCell 10s ease-in-out infinite 0s; }
.pc-2 { animation: posCell 10s ease-in-out infinite 2.5s; }
.pc-3 { animation: posCell 10s ease-in-out infinite 5s; }
.pc-4 { animation: posCell 10s ease-in-out infinite 7.5s; }
@keyframes posCell {
  0%, 15%   { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
  20%, 35%  { background: var(--blue); color: #fff; border-color: var(--blue); }
  40%, 100% { background: var(--paper-2); color: var(--ink-soft); border-color: var(--line); }
}
.sv-brand-arrow { text-align: center; color: var(--blue); font-size: 1rem; opacity: 0.45; }
.sv-brand-badge {
  background: var(--blue); color: #fff; text-align: center; padding: .5rem;
  border-radius: var(--radius-sm); font-weight: 700; font-size: .78rem;
  box-shadow: var(--shadow-blue); animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: var(--shadow-blue); }
  50% { box-shadow: 0 0 0 6px rgba(29,91,227,0.12), var(--shadow-blue); }
}

/* ── HERO VISUAL: AUTOMAATIKA VOOG (automatiseerimine) ──────── */
.sv-workflow {
  background: linear-gradient(160deg, #ffffff 0%, var(--paper-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.6rem;
  position: relative; overflow: hidden;
}
.sv-workflow::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(29,91,227,0.07), transparent 70%);
  pointer-events: none;
}
.sv-wf-steps { display: flex; flex-direction: column; gap: 0; }
.sv-wf-step {
  display: flex; align-items: center; gap: .65rem;
  padding: .46rem .6rem; border-radius: var(--radius-sm);
}
.sv-wf-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .78rem; font-weight: 700;
}
.sv-wf-label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.sv-wf-conn {
  position: relative; height: 14px; margin-left: .6rem; padding-left: 1.25rem;
}
.sv-wf-conn::before {
  content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--blue-tint), var(--blue)); opacity: 0.38;
}
.sv-wf-pulse {
  position: absolute; left: 20px; width: 2px; height: 7px;
  background: var(--blue); border-radius: 2px; top: -7px;
  animation: wfFlow 1.8s ease-in-out infinite;
}
@keyframes wfFlow {
  0%   { top: -7px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 14px; opacity: 0; }
}
.sv-wf-conn:nth-child(2)  .sv-wf-pulse { animation-delay: 0s; }
.sv-wf-conn:nth-child(4)  .sv-wf-pulse { animation-delay: .3s; }
.sv-wf-conn:nth-child(6)  .sv-wf-pulse { animation-delay: .6s; }
.sv-wf-conn:nth-child(8)  .sv-wf-pulse { animation-delay: .9s; }
.sv-wf-conn:nth-child(10) .sv-wf-pulse { animation-delay: 1.2s; }
.sv-wf-final {
  margin-top: .85rem; background: var(--blue); color: #fff; text-align: center;
  padding: .52rem .75rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .76rem; box-shadow: var(--shadow-blue);
}

/* ── SECTION: 4 PARANDAME/PANEME PAIKA KAARTI ───────────────── */
.sp-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
@media (max-width: 680px) { .sp-cards { grid-template-columns: 1fr; } }
.sp-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sp-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-lg);
  border-color: rgba(29,91,227,0.25);
}
.sp-card-title {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin-bottom: .6rem;
  display: flex; align-items: center; gap: .65rem;
}
.sp-card-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}
.sp-card-text { font-size: .95rem; color: var(--body); line-height: 1.65; }

/* ── SECTION: 5 "MIDA SAAD" MINIKAARTI ─────────────────────── */
.sp-mini-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem;
}
@media (max-width: 840px) { .sp-mini-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .sp-mini-cards { grid-template-columns: 1fr; } }
.sp-mini {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.4rem; box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.sp-mini:hover { transform: translateY(-3px); border-color: rgba(29,91,227,0.3); }
.sp-mini-num {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem;
  color: var(--blue); line-height: 1; margin-bottom: .5rem; opacity: 0.32;
}
.sp-mini-title { font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: .35rem; }
.sp-mini-text { font-size: .88rem; color: var(--body); line-height: 1.6; }

/* ── SECTION: META + GOOGLE kanalite kaarti ─────────────────── */
.sp-channel-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 680px) { .sp-channel-cards { grid-template-columns: 1fr; } }
.sp-channel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
}
.sp-channel-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem;
  color: var(--ink); margin-bottom: .7rem;
}
.sp-channel-text {
  font-size: .98rem; color: var(--body); line-height: 1.65; margin-bottom: 1rem;
}
.sp-channel-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.sp-channel-list li {
  font-size: .95rem; color: var(--ink-soft);
  display: flex; align-items: flex-start; gap: .5rem;
}
.sp-channel-list li .chk {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700;
}

/* ── SECTION: AUTOMAATIKA VOO NÄIDE ─────────────────────────── */
.sp-flow {
  display: flex; flex-direction: column; gap: 0;
  max-width: 620px; margin: 0 auto;
}
.sp-flow-step {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.1rem 1.4rem; box-shadow: var(--shadow);
  transition: border-color .25s ease;
}
.sp-flow-step:hover { border-color: rgba(29,91,227,0.3); }
.sp-flow-num {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.sp-flow-title { font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: .2rem; }
.sp-flow-text { font-size: .88rem; color: var(--body); line-height: 1.55; }
.sp-flow-conn {
  height: 12px; width: 2px; background: var(--blue-tint);
  margin-left: calc(1.4rem + 17px); opacity: 0.4; border-radius: 2px;
}

/* ── AUTOMATISEERIMISE HERO: SAMM-KAARDID ────────────────────── */
.sv-wf-cards { display: flex; flex-direction: column; gap: 0; }
.sv-wfc {
  display: flex; align-items: flex-start; gap: .6rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .6rem .75rem;
  box-shadow: var(--shadow);
}
.sv-wfc-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .68rem; margin-top: .05rem;
}
.sv-wfc-title {
  font-weight: 700; color: var(--ink); font-size: .78rem; margin-bottom: .15rem;
}
.sv-wfc-text { font-size: .68rem; color: var(--body); line-height: 1.45; }
.sv-wf-arrow {
  text-align: center; color: var(--blue-tint); font-size: .8rem;
  line-height: 1; padding: .18rem 0; opacity: 0.7;
}
.sv-wf-badge-row {
  margin-top: .65rem; background: var(--blue); border-radius: var(--radius-sm);
  padding: .65rem .75rem; box-shadow: var(--shadow-blue);
  display: flex; align-items: flex-start; gap: .55rem;
}
.sv-wf-check {
  font-size: .95rem; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: .05rem;
}
.sv-wf-badge-title {
  font-weight: 700; color: #fff; font-size: .75rem; margin-bottom: .15rem;
}
.sv-wf-badge-sub {
  font-size: .65rem; color: rgba(255,255,255,0.78); line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .sv-live .lp, .sv-brand-badge, .sv-pos-cell, .sv-wf-pulse { animation: none !important; }
  .pc-1, .pc-2, .pc-3, .pc-4 { animation: none !important; background: var(--blue-soft) !important; color: var(--blue) !important; }
}