.seo-plan-page{
  --sp-ink:#10131a;
  --sp-muted:#596170;
  --sp-line:#e6eaf0;
  --sp-green:#82bd03;
  --sp-violet:#8125e4;
  --sp-lime:#e9ffb8;
  --sp-dark:#080b12;
  --sp-soft:#f6f8fb;
  background:#fff;
  color:var(--sp-ink);
  overflow:hidden;
}

.sp-wrap{
  width:min(1180px,calc(100% - 32px));
  margin-inline:auto;
}

.sp-hero{
  position:relative;
  min-height:calc(100vh - 10px);
  display:grid;
  align-items:center;
  padding:126px 0 70px;
  background:
    linear-gradient(135deg,rgba(233,255,184,.95),rgba(255,255,255,.96) 44%,rgba(240,233,255,.9)),
    #fff;
}

.sp-orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.sp-orbit span{
  position:absolute;
  border:1px solid rgba(16,19,26,.08);
  border-radius:999px;
  transform:rotate(-10deg);
}

.sp-orbit span:nth-child(1){width:56vw;height:56vw;right:-18vw;top:4vh}
.sp-orbit span:nth-child(2){width:34vw;height:34vw;left:-12vw;bottom:8vh}
.sp-orbit span:nth-child(3){width:18vw;height:18vw;right:19vw;bottom:13vh;background:rgba(130,189,3,.08)}

.sp-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}

.sp-kicker,
.sp-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#3f5d00;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sp-kicker i,
.sp-label::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--sp-green);
  box-shadow:0 0 0 7px rgba(130,189,3,.13);
}

.sp-hero h1,
.sp-section h2,
.sp-final h2{
  max-width:880px;
  margin:.28em 0 .34em;
  color:var(--sp-ink);
  font-family:var(--font-sans, Inter, system-ui, sans-serif);
  font-weight:850;
  letter-spacing:0;
  line-height:1.02;
}

.sp-hero h1{
  font-size:clamp(2.5rem,7.3vw,5.9rem);
}

.sp-section h2,
.sp-final h2{
  font-size:clamp(2rem,4.7vw,4.4rem);
}

.sp-hero p,
.sp-section p,
.sp-final p{
  max-width:760px;
  color:var(--sp-muted) !important;
  font-size:clamp(1.02rem,1.8vw,1.18rem);
}

.sp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.sp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  padding:0 10px 0 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.sp-btn span[aria-hidden]{
  display:grid;
  place-items:center;
  width:34px;
  height:28px;
  border-radius:999px;
  background:#111827;
  color:#fff;
}

.sp-btn--dark{
  background:#05070c;
  color:#fff;
  box-shadow:0 18px 45px rgba(5,7,12,.18);
}

.sp-btn--dark span[aria-hidden]{border:1px solid rgba(255,255,255,.24)}

.sp-btn--light{
  padding-inline:22px;
  background:#fff;
  color:#10131a;
  border-color:#dde4ed;
}

.sp-btn:hover{transform:translateY(-2px)}

.sp-dashboard{
  position:relative;
  padding:22px;
  border:1px solid rgba(16,19,26,.08);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:0 28px 70px rgba(22,31,50,.13);
  backdrop-filter:blur(18px);
}

.sp-score{
  min-height:220px;
  display:grid;
  align-content:end;
  padding:24px;
  border-radius:22px;
  background:
    radial-gradient(circle at 70% 28%,rgba(129,37,228,.24),transparent 34%),
    radial-gradient(circle at 24% 38%,rgba(130,189,3,.28),transparent 36%),
    #090d15;
  color:#fff;
}

.sp-score span,
.sp-score small{color:rgba(255,255,255,.72)}
.sp-score strong{font-size:clamp(2.2rem,5vw,4.1rem);line-height:.95}

.sp-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:12px 0;
}

.sp-metrics div,
.sp-dashboard li{
  border:1px solid var(--sp-line);
  border-radius:16px;
  background:#fff;
}

.sp-metrics div{padding:14px 10px;text-align:center}
.sp-metrics strong{display:block;font-size:1.55rem}
.sp-metrics span{color:var(--sp-muted);font-size:.82rem}
.sp-dashboard ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sp-dashboard li{padding:11px 13px;color:#2b3340;font-weight:650}

.sp-anchor-nav{
  position:sticky;
  top:78px;
  z-index:25;
  padding:9px 0;
  background:rgba(255,255,255,.86);
  border-block:1px solid rgba(16,19,26,.07);
  backdrop-filter:blur(14px);
}

.sp-anchor-nav .sp-wrap{
  display:flex;
  gap:8px;
  overflow-x:auto;
}

.sp-anchor-nav a{
  flex:0 0 auto;
  padding:9px 14px;
  border-radius:999px;
  color:#202632;
  font-weight:750;
  text-decoration:none;
}

.sp-anchor-nav a:hover,
.sp-anchor-nav a.is-active{
  background:#10131a;
  color:#fff;
}

.sp-section{
  padding:clamp(70px,9vw,120px) 0;
}

.sp-split{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(320px,1fr);
  gap:clamp(28px,5vw,70px);
  align-items:start;
}

.sp-problem-grid,
.sp-link-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.sp-problem-grid article,
.sp-months article,
.sp-link-grid a,
.sp-faq-list details{
  border:1px solid var(--sp-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 40px rgba(22,31,50,.06);
}

.sp-problem-grid article{padding:20px}
.sp-problem-grid span,
.sp-months span,
.sp-link-grid span{
  color:var(--sp-violet);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.sp-problem-grid h3,
.sp-months h3,
.sp-link-grid h3,
.sp-faq h3{
  margin:.35rem 0 .45rem;
  color:#10131a;
  font-weight:800 !important;
}

.sp-roadmap{background:#f7f9fc}
.sp-head{max-width:900px;margin-bottom:26px}

.sp-months{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.sp-months article{
  min-height:320px;
  display:flex;
  flex-direction:column;
  padding:24px;
}

.sp-months a,
.sp-link-grid a{
  color:#10131a;
  font-weight:850;
  text-decoration:none;
}

.sp-months a{margin-top:auto}

.sp-sticky{
  position:sticky;
  top:152px;
}

.sp-progress{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px 14px;
  max-width:420px;
  margin-top:24px;
  padding:16px;
  border:1px solid var(--sp-line);
  border-radius:18px;
  background:#fff;
}

.sp-progress span{font-weight:800}
.sp-progress div{
  grid-column:1 / -1;
  height:9px;
  border-radius:999px;
  background:#edf1f6;
  overflow:hidden;
}
.sp-progress i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--sp-green),var(--sp-violet));
  transition:width .25s ease;
}

.sp-task-list{display:grid;gap:10px}
.sp-task{
  display:grid;
  grid-template-columns:42px 110px 1fr;
  gap:13px;
  align-items:center;
  width:100%;
  padding:14px;
  border:1px solid var(--sp-line);
  border-radius:16px;
  background:#fff;
  color:#10131a;
  cursor:pointer;
  text-align:left;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.sp-task span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f1f5f9;
  font-weight:850;
}

.sp-task strong{font-size:.88rem}
.sp-task em{color:var(--sp-muted);font-style:normal}
.sp-task:hover{transform:translateX(3px);border-color:rgba(130,189,3,.4)}
.sp-task.is-done{background:#f8fff0;border-color:rgba(130,189,3,.45)}
.sp-task.is-done span{background:var(--sp-green);color:#fff}

.sp-service-links{
  background:
    radial-gradient(circle at 18% 20%,rgba(130,189,3,.13),transparent 28%),
    radial-gradient(circle at 80% 70%,rgba(129,37,228,.11),transparent 30%),
    #fff;
}

.sp-link-grid a{
  min-height:240px;
  padding:22px;
  transition:transform .25s ease,box-shadow .25s ease;
}

.sp-link-grid a:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(22,31,50,.11);
}

.sp-faq{background:#f7f9fc}
.sp-faq-list{display:grid;gap:10px}
.sp-faq-list details{padding:0;overflow:hidden}
.sp-faq-list summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
}
.sp-faq-list summary::-webkit-details-marker{display:none}
.sp-faq-list summary span{
  width:18px;
  height:18px;
  position:relative;
  flex:0 0 auto;
}
.sp-faq-list summary span::before,
.sp-faq-list summary span::after{
  content:"";
  position:absolute;
  inset:8px 0 auto;
  height:2px;
  background:#10131a;
}
.sp-faq-list summary span::after{transform:rotate(90deg)}
.sp-faq-list details[open] summary span::after{display:none}
.sp-faq-list p{padding:0 20px 20px;margin:0}

.sp-final{
  padding:clamp(76px,10vw,130px) 0;
  background:#080b12;
  color:#fff;
  text-align:center;
}
.sp-final .sp-wrap{
  display:grid;
  justify-items:center;
}
.sp-final h2{color:#fff}
.sp-final p{color:rgba(255,255,255,.72) !important}
.sp-final .sp-label{color:var(--sp-lime)}

[data-plan-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .58s ease,transform .58s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--plan-delay,0ms);
}
[data-plan-reveal].is-visible{
  opacity:1;
  transform:none;
}

@media (max-width:980px){
  .sp-hero__grid,
  .sp-split,
  .sp-months{
    grid-template-columns:1fr;
  }
  .sp-sticky{position:static}
}

@media (max-width:680px){
  .sp-hero{padding:94px 0 34px}
  .sp-hero__grid{gap:22px}
  .sp-dashboard{padding:12px;border-radius:22px}
  .sp-score{display:none}
  .sp-dashboard ul{display:none}
  .sp-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .sp-metrics div{padding:10px 6px}
  .sp-metrics strong{font-size:1.22rem}
  .sp-metrics span{font-size:.68rem}
  .sp-problem-grid,
  .sp-link-grid{
    grid-template-columns:1fr;
  }
  .sp-task{grid-template-columns:38px 1fr}
  .sp-task em{grid-column:2}
  .sp-anchor-nav{top:64px}
}

@media (prefers-reduced-motion:reduce){
  [data-plan-reveal],
  .sp-btn,
  .sp-task,
  .sp-link-grid a,
  .sp-progress i{
    transition:none !important;
  }
}
