/* =========================================================
   SEO.CSS — SEO, AEO & GEO page
   Needs index.css loaded first (vars, .btn, .wrap)
========================================================= */


/* =========================================================
   HERO SECTION
========================================================= */

/* SMM-matched sizing tokens (same values as smm.css) */
.seo-hero, .seo-changed, .seo-sec {
  --sk: min(1vw, 1.78vh, 17px);
  --fs-title: clamp(2rem, calc(var(--sk) * 3.6), 3.8rem);
  --fs-copy: clamp(0.88rem, calc(var(--sk) * 1.1), 1.08rem);
  --fs-h3: clamp(0.85rem, calc(var(--sk) * 1.15), 1.1rem);
  --fs-p: clamp(0.72rem, calc(var(--sk) * 0.9), 0.92rem);
  --fs-lead: clamp(0.95rem, calc(var(--sk) * 1.2), 1.15rem);
}

.seo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  min-height: 680px;
  padding-top: 88px;
  background: #060914;
}

.seo-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/image/seo.webp') right center / cover no-repeat;
  animation: seo-bg-in 1.2s ease-out both;
}

.seo-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,9,20,.82) 0%, rgba(6,9,20,.5) 30%, rgba(6,9,20,0) 52%),
    linear-gradient(to bottom, rgba(6,9,20,.55) 0%, rgba(6,9,20,0) 20%, rgba(6,9,20,0) 72%, rgba(6,9,20,.85) 100%);
}

@keyframes seo-bg-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.seo-hero > .wrap { width: 100%; margin: 0; }

.seo-hero__wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
}

.seo-hero__content { max-width: 560px; }

.seo-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #e6e6e6;
  margin-bottom: 20px;
}

.seo-hero__eyebrow::before {
  content: '';
  width: 44px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.seo-hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

.seo-hero__title span { display: block; color: var(--accent); }

.seo-hero__lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.seo-hero__copy {
  font-size: var(--fs-copy);
  color: #dcdfe8;
  max-width: 470px;
  margin-bottom: 28px;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

.seo-hero__btn {
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,107,0,.9), 0 0 26px rgba(255,107,0,.45);
  transition: all .3s cubic-bezier(.25,.8,.25,1);
}

.seo-hero__btn:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 0 40px rgba(255,107,0,.75), 0 10px 24px rgba(0,0,0,.5);
}


/* ---------- PLATFORM STRIP ---------- */

.seo-hero__platforms {
  position: relative;
  z-index: 2;
  padding: 18px 0 28px;
  border-top: none;
  background: transparent;
}

.seo-hero__platforms ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.seo-hero__platforms li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,.15);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  cursor: default;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.seo-hero__platforms li:first-child { border-left: none; padding-left: 0; }

.seo-hero__platforms svg {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  display: block;
  transition: transform .3s ease, filter .3s ease;
}

.seo-hero__platforms span { display: block; text-align: left; }

.seo-hero__platforms li:hover { transform: translateY(-4px); }

.seo-hero__platforms li:hover svg {
  animation: seo-flip .9s ease;
  filter: drop-shadow(0 0 12px rgba(255,107,0,.85));
}

@keyframes seo-flip {
  from { transform: perspective(500px) rotateY(0); }
  to   { transform: perspective(500px) rotateY(360deg); }
}


/* ---------- LOAD ANIMATIONS ---------- */

@keyframes seo-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.seo-js .seo-hero__eyebrow,
.seo-js .seo-hero__title,
.seo-js .seo-hero__lead,
.seo-js .seo-hero__copy,
.seo-js .seo-hero__btn {
  opacity: 0;
  animation: seo-fade-up .7s cubic-bezier(.2,.8,.2,1) forwards;
}

.seo-js .seo-hero__title { animation-delay: .12s; }
.seo-js .seo-hero__lead  { animation-delay: .24s; }
.seo-js .seo-hero__copy  { animation-delay: .32s; }
.seo-js .seo-hero__btn   { animation-delay: .42s; }

.seo-js .seo-hero__platforms li {
  opacity: 0;
  animation: seo-fade-up .6s ease forwards;
}

.seo-js .seo-hero__platforms li:nth-child(1) { animation-delay: .5s; }
.seo-js .seo-hero__platforms li:nth-child(2) { animation-delay: .58s; }
.seo-js .seo-hero__platforms li:nth-child(3) { animation-delay: .66s; }
.seo-js .seo-hero__platforms li:nth-child(4) { animation-delay: .74s; }
.seo-js .seo-hero__platforms li:nth-child(5) { animation-delay: .82s; }


/* =========================================================
   SECTION 2 — ONE FULL SCREEN, BALANCED LAYOUT
========================================================= */

.seo-changed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - 88px);
  height: auto;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #060914;
}

.seo-changed__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/image/seo1.webp') center bottom / cover no-repeat;
}

.seo-changed__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 30%, rgba(6,9,20,.7) 0%, rgba(6,9,20,.96) 85%),
    linear-gradient(to bottom, rgba(6,9,20,.9) 0%, rgba(6,9,20,.5) 50%, rgba(6,9,20,.95) 100%);
}

.seo-changed__wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(8px, 1.2vh, 16px);
  padding-bottom: clamp(12px, 2vh, 20px);
  text-align: center;
}


/* ---------- TOP CENTERED HEADER ---------- */

.seo-changed__header {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(28px, 4vh, 48px);
}

.seo-changed__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #e6e6e6;
  margin-bottom: 6px;
}

.seo-changed__eyebrow::before,
.seo-changed__eyebrow::after {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent, #ff6b00);
}

.seo-changed__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 6px;
}

.seo-changed__title span {
  display: inline;
  color: #ff6b00;
}

.seo-changed__copy {
  font-size: var(--fs-copy);
  line-height: 1.4;
  color: #dbe3f5;
  white-space: nowrap;
  margin: 0;
}


/* ---------- CARDS GRID ---------- */

.seo-changed__cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  align-items: stretch;
  perspective: 1200px;
  margin: clamp(8px, 1.2vh, 16px) 0;
}


/* ---------- CARD CONTAINER ---------- */

.seo-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;

  padding: clamp(12px, 1.2vw, 16px);
  border-radius: 14px;

  background: linear-gradient(160deg, rgba(12,24,65,.85) 0%, rgba(6,14,38,.92) 100%);
  border: 1.5px solid #2b62b3;
  box-shadow:
    0 0 15px rgba(25,80,180,.25),
    inset 0 0 15px rgba(30,80,180,.15);

  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.seo-card:hover {
  transform: translateY(-6px) rotateY(360deg);
  border-color: #5392ed;
  box-shadow:
    0 0 24px rgba(45,110,220,.45),
    0 0 50px rgba(255,107,0,.25);
}

.seo-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.seo-card__head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.seo-card__icon,
svg.seo-card__icon,
i.seo-card__icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: none;
  display: block;
  font-size: 24px;
  line-height: 28px;
  filter: drop-shadow(0 0 6px rgba(40,110,220,.4));
}

.seo-card__rule {
  width: 24px;
  height: 2px;
  background: #ff6b00;
  margin: 6px 0;
}

.seo-card__desc {
  font-size: var(--fs-p);
  line-height: 1.3;
  color: #e3ebff;
  min-height: 2.5em;
  margin: 0;
}


/* ---------- CARD PREVIEW ---------- */

.seo-card__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(6px, 1vh, 10px);
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(8,18,50,.9), rgba(5,10,30,.95));
  border: 1px solid rgba(50,110,200,.3);
}

.seo-card__label {
  font-size: var(--fs-p);
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.seo-card__tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-card__tag-list li {
  font-size: clamp(.68rem, calc(var(--sk) * .8), .82rem);
  color: #a8c8ff;
  background: rgba(30,70,150,.3);
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid rgba(70,130,220,.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.seo-card__tag-list i {
  font-size: .65rem;
  color: #4aa3ff;
}

.seo-card:hover .seo-card__icon {
  filter: drop-shadow(0 0 10px rgba(255,107,0,.8));
}


/* ---------- TYPEWRITER SEARCH BAR ---------- */

.seo-changed__searchbar {
  width: min(85%, 680px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8,24,70,.92), rgba(12,45,115,.88));
  border: 1.5px solid #3d88e0;
  color: #d3e8ff;
  font-size: var(--fs-h3);
  font-weight: 500;
  box-shadow: 0 0 15px rgba(30,90,190,.35), 0 0 30px rgba(255,107,0,.2);
}

.seo-changed__searchbar i:first-child {
  color: #4aa3ff;
  font-size: 1rem;
}

#typewriter-text {
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}

.typewriter-cursor {
  display: inline-block;
  color: #4aa3ff;
  font-weight: 300;
  animation: blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

.seo-changed__searchbar i:last-child {
  margin-left: auto;
  font-size: .8rem;
  color: #4aa3ff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .seo-hero { height: auto; min-height: 0; padding-top: 88px; }
  .seo-hero__bg { background-position: 68% center; }

  .seo-hero__shade {
    background: linear-gradient(to bottom, rgba(6,9,20,.78) 0%, rgba(6,9,20,.5) 50%, rgba(6,9,20,.85) 100%);
  }

  .seo-hero__content { max-width: 640px; margin: 0 auto; text-align: center; }
  .seo-hero__eyebrow { justify-content: center; }
  .seo-hero__copy { margin-left: auto; margin-right: auto; }
  .seo-hero__wrap { padding-top: 40px; padding-bottom: 40px; }
  .seo-hero__platforms ul { justify-content: center; flex-wrap: wrap; row-gap: 16px; }
  .seo-hero__platforms li { align-items: center; padding: 0 18px; }
  .seo-hero__platforms span { text-align: center; }

  /* Section 2 */
  .seo-changed { height: auto; min-height: 0; padding-top: 20px; }
  .seo-changed__header { padding-top: 0; }
  .seo-changed__copy { white-space: normal; }
  .seo-changed__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-card { transform: none; animation: none; }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
  .seo-hero { padding-top: 92px; }
  .seo-hero__title { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .seo-hero__eyebrow { font-size: .7rem; gap: 10px; }
  .seo-hero__eyebrow::before { width: 28px; }
  .seo-hero__btn { width: 100%; max-width: 340px; min-height: 48px; }
  .seo-hero__platforms li { padding: 0 12px; font-size: .7rem; }
  .seo-hero__platforms li:nth-child(4) { border-left: 1px solid rgba(255,255,255,.15); }
  .seo-hero__platforms svg { width: 26px; height: 26px; }

  /* Section 2 */
  .seo-changed__cards { grid-template-columns: 1fr; }
  .seo-changed__searchbar { width: 100%; padding: 8px 14px; gap: 8px; }
}


/* =========================================================
   ACCESSIBILITY & TOUCH NO-HOVER
========================================================= */

@media (hover: none) {
  .seo-hero__platforms li:hover { transform: none; }
  .seo-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-hero__bg { animation: none; }
  .seo-js .seo-hero__eyebrow,
  .seo-js .seo-hero__title,
  .seo-js .seo-hero__lead,
  .seo-js .seo-hero__copy,
  .seo-js .seo-hero__btn,
  .seo-js .seo-hero__platforms li {
    opacity: 1;
    animation: none;
  }
  .seo-hero__platforms li { transition: none; }
  .seo-hero__platforms li:hover svg { animation: none; }
  .seo-card,
  .seo-changed__searchbar { animation: none; }
  .seo-card:hover { transform: none; transition: none; }
}


/* =========================================================
   SECTIONS 3 - 12
   Same tokens as above (var(--accent), var(--display)) and the same
   card look as "Search has changed" (navy glass, blue / orange border, 360° flip).
========================================================= */

/* ---------- shared section shell ---------- */
.seo-sec {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vh - 88px);          /* one laptop screen; grows if content is taller */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 2.5vh, 36px) 0;
  background: #060914;
  border-top: 1px solid rgba(70,120,210,.22);
}
@supports (height: 100svh) {
  .seo-changed, .seo-sec { min-height: calc(100svh - 88px); }
}
.seo-sec > .wrap { width: 100%; margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.seo-sec__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center bottom; background-repeat: no-repeat; animation: seo-drift 26s ease-in-out infinite alternate; }
.seo-sec--night .seo-sec__bg { background-image: url('/image/seo-bg-night.webp'); }
.seo-sec--blue  .seo-sec__bg { background-image: url('/image/seo-bg-blue.webp'); }
.seo-sec__shade { position: absolute; inset: 0; z-index: -1; }
.seo-sec--night .seo-sec__shade { background: linear-gradient(90deg, rgba(6,9,20,.82) 0%, rgba(6,9,20,.5) 34%, rgba(6,9,20,.22) 100%), linear-gradient(to bottom, rgba(6,9,20,.5), rgba(6,9,20,0) 25%, rgba(6,9,20,0) 80%, rgba(6,9,20,.5)); }
.seo-sec--blue  .seo-sec__shade { background: linear-gradient(90deg, rgba(5,12,40,.68) 0%, rgba(5,12,40,.3) 36%, rgba(5,12,40,.1) 100%), linear-gradient(to bottom, rgba(5,12,40,.35), rgba(5,12,40,0) 25%, rgba(5,12,40,0) 80%, rgba(5,12,40,.45)); }
@keyframes seo-drift { from { transform: scale(1.02) translateX(-6px); } to { transform: scale(1.07) translateX(6px); } }

.seo-sec__grid {
  display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 2.18fr);
  gap: clamp(20px, 2.6vw, 44px); align-items: center;
}

/* ---------- scroll reveal (animation, so hover transforms stay untouched) ---------- */
.seo-js .seo-reveal { opacity: 0; }
.seo-js .seo-reveal.is-in { opacity: 1; animation: seo-reveal-in .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) backwards; }
@keyframes seo-reveal-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- left text block ---------- */
.seo-lt__eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: #e6e6e6; margin-bottom: 16px; }
.seo-lt__eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--accent); flex: none; }
.seo-lt__kicker { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #cfd8ee; margin: -6px 0 10px; }
.seo-lt__title { font-family: var(--display); font-weight: 800; font-size: var(--fs-title); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 16px; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.seo-lt__title span { display: block; color: var(--accent); }
.seo-lt__lead { font-size: var(--fs-lead); font-weight: 600; color: #fff; margin-bottom: 8px; }
.seo-lt__copy { font-size: var(--fs-copy); line-height: 1.55; color: #dbe3f5; max-width: 420px; margin-bottom: 12px; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.seo-lt__copy--wide { max-width: none; }
.seo-lt__btn { white-space: nowrap; margin-top: 10px; padding: 13px 26px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,107,0,.9), 0 0 26px rgba(255,107,0,.45); transition: all .3s cubic-bezier(.25,.8,.25,1); }
.seo-lt__btn:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 40px rgba(255,107,0,.75), 0 10px 24px rgba(0,0,0,.5); }

/* ---------- glass card (same look as .seo-card in section 2) ---------- */
.seo-gc {
  --c: #2b62b3; --glow: 25,80,180; --n: #4aa3ff;
  position: relative; min-width: 0;
  padding: clamp(11px, 1.4vh, 16px) clamp(12px, 1.1vw, 16px);
  border-radius: 14px; border: 1.5px solid var(--c);
  background: linear-gradient(160deg, rgba(12,24,65,.86) 0%, rgba(6,14,38,.93) 100%);
  box-shadow: 0 0 15px rgba(var(--glow), .3), inset 0 0 15px rgba(var(--glow), .14);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4,.2,.2,1), border-color .4s ease, box-shadow .4s ease;
  outline: none; text-align: left;
}
.seo-gc--o { --c: #e2641a; --glow: 255,107,0; --n: #ff6b00; background: linear-gradient(160deg, rgba(48,24,12,.82) 0%, rgba(10,12,30,.93) 70%); }
.seo-gc:hover, .seo-gc:focus-visible { transform: translateY(-6px) rotateY(360deg); border-color: var(--n); box-shadow: 0 0 26px rgba(var(--glow), .6), 0 0 50px rgba(var(--glow), .25); z-index: 2; }
.seo-gc__num { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.4rem); color: var(--n); line-height: 1; display: block; }
.seo-gc__icon { font-size: clamp(1.3rem, 2vw, 1.9rem); color: var(--n); filter: drop-shadow(0 0 8px rgba(var(--glow), .8)); }
.seo-gc__title { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; color: #fff; margin: 0; }
.seo-gc__rule { display: block; width: 24px; height: 2px; background: var(--n); margin: 7px 0; }
.seo-gc__text { font-size: var(--fs-p); line-height: 1.35; color: #d8e3fb; margin: 0; }

/* ---------- banner bar ---------- */
.seo-banner {
  --bc: #2b62b3; display: flex; align-items: center; gap: 18px; margin: 0;
  padding: clamp(9px, 1.5vh, 15px) clamp(14px, 2vw, 26px); border-radius: 12px;
  background: linear-gradient(90deg, rgba(10,18,44,.94), rgba(6,10,26,.94)); border: 1.5px solid var(--bc);
  font-family: var(--display); font-weight: 800; font-size: clamp(.92rem, calc(var(--sk) * 1.25), 1.15rem); line-height: 1.18; color: #fff;
}
.seo-banner > i { flex: none; font-size: clamp(1.4rem, 2.2vw, 2.1rem); color: var(--accent); padding-right: 18px; border-right: 1px solid rgba(255,255,255,.22); filter: drop-shadow(0 0 8px rgba(255,107,0,.7)); }
.seo-banner b { color: var(--accent); font-weight: 800; }
.seo-banner em { display: block; font-style: normal; color: #fff; }
.seo-banner--o { --bc: #e2641a; animation: seo-pulse 3s ease-in-out infinite; }
.seo-banner--b > i { color: #4aa3ff; filter: drop-shadow(0 0 8px rgba(74,163,255,.7)); }
@keyframes seo-pulse { 0%,100% { box-shadow: 0 0 14px rgba(255,107,0,.25); } 50% { box-shadow: 0 0 34px rgba(255,107,0,.55); } }

/* ---------- shared mini charts ---------- */
.seo-spark { display: block; width: 100%; height: auto; overflow: visible; }
.seo-spark__area { fill: rgba(74,163,255,.14); }
.seo-spark__line { fill: none; stroke: var(--lc, #4aa3ff); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgba(74,163,255,.6)); }
.seo-spark__dot { fill: #ffb066; filter: drop-shadow(0 0 5px rgba(255,150,60,.9)); }
.seo-gc--o .seo-spark__area { fill: rgba(255,107,0,.14); }
.seo-gc--o .seo-spark__line { stroke: #ff8a33; filter: drop-shadow(0 0 4px rgba(255,107,0,.6)); }
.seo-js .seo-reveal:not(.is-in) .seo-spark__line { stroke-dashoffset: 1; }
.seo-js .seo-reveal.is-in .seo-spark__line { animation: seo-draw 1.5s .35s ease-out backwards; }
@keyframes seo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.seo-bars { display: flex; align-items: flex-end; gap: 4px; height: var(--bh, 48px); }
.seo-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(to top, #1b4fb8, #4aa3ff); transform-origin: bottom; }
.seo-bars i:last-child { background: linear-gradient(to top, #d94f00, #ffb066); }
.seo-js .seo-reveal:not(.is-in) .seo-bars i { transform: scaleY(0); }
.seo-js .seo-reveal.is-in .seo-bars i { animation: seo-bar-up .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 70ms + 300ms); }
@keyframes seo-bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.seo-donut { position: relative; width: var(--ds, 70px); height: var(--ds, 70px); margin: 0 auto; }
.seo-donut svg { width: 100%; height: 100%; }
.seo-donut__bg { fill: none; stroke: rgba(74,163,255,.2); stroke-width: 13; }
.seo-donut__fg { fill: none; stroke: #ff8a33; stroke-width: 13; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255,107,0,.7)); }
.seo-donut span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; }

.seo-flow { stroke-dasharray: 9 11; animation: seo-flow 1.4s linear infinite; }
@keyframes seo-flow { to { stroke-dashoffset: -40; } }

/* =========================================================
   S3 — ONE STRATEGY. COMPLETE SEARCH VISIBILITY.
========================================================= */
.seo-exp__right { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); min-width: 0; }
.seo-exp__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.seo-exp__cards .seo-gc { min-height: clamp(112px, 17vh, 150px); padding-right: 12px; }
.seo-exp__cards .seo-gc__icon { position: absolute; top: clamp(10px, 1.4vh, 14px); right: 14px; font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.seo-exp__cards .seo-gc__title { margin-top: 8px; }
.seo-exp__stage svg { display: block; width: 100%; max-height: clamp(120px, 22vh, 190px); margin: 0 auto; overflow: visible; }
.seo-exp__panel rect { fill: rgba(14,30,78,.7); stroke: #4aa3ff; stroke-width: 1.5; }
.seo-exp__panel path { fill: none; stroke: #ff8a33; stroke-width: 3; stroke-linecap: round; }
.seo-exp__panel--r circle { fill: none; stroke: #4aa3ff; stroke-width: 6; }
.seo-exp__ring { fill: #05080f; stroke: #ff6b00; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(255,107,0,.8)); animation: seo-ring 3s ease-in-out infinite; }
.seo-exp__ring--b { stroke: #2f7bff; filter: drop-shadow(0 0 8px rgba(47,123,255,.8)); animation-delay: .8s; }
@keyframes seo-ring { 0%,100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
.seo-exp__word { font-family: var(--display); font-weight: 900; font-size: 118px; fill: url(#seoTxt); stroke: rgba(160,205,255,.65); stroke-width: 1.5; letter-spacing: 6px; animation: seo-wordglow 3.2s ease-in-out infinite; }
@keyframes seo-wordglow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* =========================================================
   S4 — ONE BRAND. MULTIPLE DISCOVERY CHANNELS.
========================================================= */
.seo-ch__right { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); min-width: 0; }
.seo-ch__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); align-items: start; }
.seo-chcard {
  padding: clamp(10px, 1.4vh, 14px) 12px 12px; border-radius: 14px; outline: none;
  background: linear-gradient(170deg, #f5f9ff 0%, #dce8ff 100%); color: #0b1a3a;
  border: 1.5px solid rgba(110,165,255,.9); box-shadow: 0 0 22px rgba(60,130,255,.45), 0 10px 24px rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.seo-chcard:nth-child(1) { margin-top: clamp(14px, 3.4vh, 34px); }
.seo-chcard:nth-child(2) { margin-top: clamp(8px, 2vh, 20px); }
.seo-chcard:nth-child(4) { margin-top: clamp(8px, 2vh, 20px); }
.seo-chcard:nth-child(5) { margin-top: clamp(14px, 3.4vh, 34px); }
.seo-chcard:hover, .seo-chcard:focus-visible { transform: translateY(-8px) scale(1.03); box-shadow: 0 0 36px rgba(255,107,0,.55), 0 16px 32px rgba(0,0,0,.45); }
.seo-chcard__logo { margin-bottom: 4px; color: #0b1a3a; }
.seo-chcard:hover .seo-chcard__logo { animation: seo-icon-flip .9s ease; }
@keyframes seo-icon-flip { from { transform: perspective(500px) rotateY(0); } to { transform: perspective(500px) rotateY(360deg); } }
.seo-chcard h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; margin: 0 0 4px; color: #0b1a3a; }
.seo-chcard p { font-size: var(--fs-p); line-height: 1.35; color: #3b4a6b; margin: 0 0 8px; min-height: 3.9em; }
.seo-chcard__mock { background: #fff; border: 1px solid #c8d8f5; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.seo-chcard__q { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: .58rem; color: #51638a; background: #eef3ff; border: 1px solid #cfdcf7; border-radius: 99px; padding: 3px 7px; }
.seo-chcard__q--chat { border-radius: 8px; line-height: 1.25; }
.seo-chcard__q--ai { justify-content: flex-start; gap: 4px; color: #2459c9; font-weight: 700; }
.seo-chcard__brand { font-size: .6rem; font-weight: 700; color: #0b1a3a; display: flex; align-items: center; gap: 4px; }
.seo-chcard__brand b { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #ff6b00; color: #fff; font-size: .55rem; }
.seo-chcard__mock > i { display: block; height: 5px; border-radius: 3px; background: #c9d7f2; }
.seo-chcard__mock > i:nth-of-type(2) { width: 78%; }
.seo-chcard__mock > i:nth-of-type(3) { width: 60%; }
.seo-chcard__mock > em { display: block; height: clamp(18px, 3vh, 30px); border-radius: 5px; background: linear-gradient(135deg, #7aa8ff, #1b4fb8 60%, #ff8a33); }

.seo-ch__hub { position: relative; height: clamp(120px, 19vh, 175px); }
.seo-ch__hub svg { position: absolute; inset: 0 0 20px 0; width: 100%; height: calc(100% - 20px); overflow: visible; }
.seo-ch__orb {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: clamp(80px, 12vh, 112px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(130,190,255,.9), rgba(30,80,200,.65) 55%, rgba(8,20,70,.9) 100%);
  border: 2px solid rgba(160,210,255,.9); box-shadow: 0 0 36px rgba(60,140,255,.9), inset 0 0 24px rgba(160,210,255,.5);
  color: #fff; font-family: var(--display); font-weight: 800; font-size: .72rem; line-height: 1.05; text-transform: uppercase; text-align: center; letter-spacing: .04em;
  animation: seo-orb 3s ease-in-out infinite;
}
.seo-ch__orb i { font-size: 1.3rem; margin-bottom: 2px; }
@keyframes seo-orb { 0%,100% { box-shadow: 0 0 26px rgba(60,140,255,.7), inset 0 0 24px rgba(160,210,255,.4); } 50% { box-shadow: 0 0 50px rgba(90,170,255,1), inset 0 0 30px rgba(160,210,255,.6); } }
.seo-ch__pad { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 58%; height: 30px; border-radius: 50%; border: 2px solid #ff6b00; background: radial-gradient(ellipse, rgba(255,107,0,.35), rgba(6,9,20,.9) 70%); box-shadow: 0 0 24px rgba(255,107,0,.8); }

/* =========================================================
   S5 — BEYOND KEYWORDS. BUILT FOR BUSINESS GROWTH.
========================================================= */
.seo-adv__right { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); min-width: 0; }
.seo-adv__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .62fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(10px, 1.6vh, 16px) clamp(8px, 1vw, 14px); align-items: stretch; }
.seo-adv__card { min-height: clamp(104px, 18vh, 150px); }
.seo-adv__card .seo-gc__icon { display: block; margin-bottom: 6px; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.seo-adv__card--1 { grid-column: 1; grid-row: 1; }
.seo-adv__card--2 { grid-column: 3; grid-row: 1; }
.seo-adv__card--3 { grid-column: 1; grid-row: 2; }
.seo-adv__card--4 { grid-column: 3; grid-row: 2; }
.seo-adv__chart { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; }
.seo-adv__chart svg { width: 100%; max-height: clamp(210px, 40vh, 320px); overflow: visible; }
.seo-adv__bars rect { transform-box: fill-box; transform-origin: bottom; filter: drop-shadow(0 0 6px rgba(74,163,255,.5)); }
.seo-adv__arrow { fill: none; stroke: #ff8a33; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; }
.seo-js .seo-adv__chart:not(.is-in) .seo-adv__bars rect { transform: scaleY(0); }
.seo-js .seo-adv__chart:not(.is-in) .seo-adv__arrow { stroke-dashoffset: 1; }
.seo-js .seo-adv__chart:not(.is-in) .seo-adv__head { opacity: 0; }
.seo-adv__chart.is-in .seo-adv__bars rect { animation: seo-bar-up 1s cubic-bezier(.2,.8,.2,1) backwards; }
.seo-adv__chart.is-in .seo-adv__bars rect:nth-child(2) { animation-delay: .1s; } .seo-adv__chart.is-in .seo-adv__bars rect:nth-child(3) { animation-delay: .2s; }
.seo-adv__chart.is-in .seo-adv__bars rect:nth-child(4) { animation-delay: .3s; } .seo-adv__chart.is-in .seo-adv__bars rect:nth-child(5) { animation-delay: .4s; }
.seo-adv__chart.is-in .seo-adv__arrow { animation: seo-draw 1.6s .6s ease-out backwards; }
.seo-adv__head { fill: #ffb066; animation: seo-wordglow 2.4s ease-in-out infinite; }

/* =========================================================
   S6 — VISIBILITY IS IMPORTANT. BUSINESS GROWTH MATTERS MORE.
========================================================= */
.seo-met__right { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); min-width: 0; }
.seo-met__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.seo-met__card { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: clamp(120px, 20vh, 168px); }
.seo-met__head { display: flex; align-items: flex-start; gap: 10px; }
.seo-met__head .seo-gc__icon { font-size: clamp(1.1rem, 1.6vw, 1.5rem); margin-top: 1px; }
.seo-met__chart { margin-top: auto; --bh: clamp(34px, 6vh, 56px); --ds: clamp(52px, 8vh, 72px); }

/* =========================================================
   S7 — NO GUESSWORK. A SYSTEM FOR SEARCH GROWTH.
========================================================= */
.seo-proc__wrap { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 26px); }
.seo-proc__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.seo-proc__visual { position: relative; width: clamp(200px, 26vw, 400px); height: clamp(110px, 20vh, 190px); flex: none; }
.seo-proc__laptop { position: absolute; left: 0; right: 14%; top: 0; bottom: 0; border: 2px solid #4aa3ff; border-radius: 12px 12px 4px 4px; padding: 14px 16px 8px; background: linear-gradient(160deg, rgba(14,34,92,.9), rgba(6,14,40,.95)); box-shadow: 0 0 30px rgba(60,130,255,.55); display: flex; align-items: flex-end; }
.seo-proc__target { position: absolute; right: 0; bottom: 6px; font-size: clamp(3rem, 6vw, 5rem); color: #ff6b00; filter: drop-shadow(0 0 18px rgba(255,107,0,.9)); animation: seo-float 4s ease-in-out infinite alternate; }
@keyframes seo-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.seo-proc__steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.seo-proc__step { display: flex; flex-direction: column; min-height: clamp(150px, 26vh, 230px); padding-top: clamp(12px, 1.8vh, 18px); }
.seo-proc__step:not(:last-child)::after { content: '›'; position: absolute; right: calc(clamp(14px, 1.8vw, 28px) / -2 - 10px); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: #4aa3ff; z-index: 3; }
.seo-proc__icon { align-self: center; margin: clamp(8px, 2vh, 20px) 0; font-size: clamp(2rem, 3.6vw, 3.2rem); color: var(--n); filter: drop-shadow(0 0 12px rgba(var(--glow), .85)); }
.seo-proc__step .seo-gc__title { text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-h3); }
.seo-proc__step .seo-gc__text { margin-top: 6px; }
.seo-proc__flow { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(8px, 1.4vh, 14px) clamp(14px, 2vw, 28px); border: 1.5px solid #2b62b3; border-radius: 999px; background: linear-gradient(90deg, rgba(10,18,44,.92), rgba(8,16,40,.92)); box-shadow: 0 0 20px rgba(40,100,220,.35); }
.seo-proc__pill { display: flex; align-items: center; gap: 10px; font-size: clamp(.85rem, calc(var(--sk) * 1.05), 1rem); font-weight: 600; color: #fff; }
.seo-proc__pill i { display: grid; place-items: center; width: clamp(30px, 3.4vw, 40px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #4aa3ff; color: #4aa3ff; font-size: .9rem; background: rgba(40,100,220,.18); }
.seo-proc__pill--o i { border-color: #ff6b00; color: #ff6b00; background: rgba(255,107,0,.15); }
.seo-proc__pill--o { color: #ffb066; }
.seo-proc__arrow { color: #8fb8ff; }

/* =========================================================
   S8 — THE RIGHT TOOLS. SMARTER SEARCH DECISIONS.
========================================================= */
.seo-tools__right { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); min-width: 0; }
.seo-tools__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.seo-tools__card { display: flex; flex-direction: column; gap: 6px; min-height: clamp(120px, 19vh, 160px); }
.seo-tools__head { display: flex; align-items: center; gap: 10px; }
.seo-tools__card .seo-spark { margin-top: auto; max-height: 44px; }
.seo-tools__books { display: flex; flex-direction: column; gap: 3px; margin-top: clamp(10px, 2vh, 24px); width: clamp(120px, 12vw, 180px); }
.seo-tools__books span { display: block; padding: 5px 10px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #cfe0ff; background: linear-gradient(90deg, rgba(40,90,200,.5), rgba(10,20,60,.7)); border-left: 3px solid #ff6b00; border-radius: 2px 6px 6px 2px; }
.seo-tools__books span:nth-child(2) { margin-left: 10px; } .seo-tools__books span:nth-child(3) { margin-left: 4px; } .seo-tools__books span:nth-child(4) { margin-left: 14px; }

/* =========================================================
   S9 — EVERY INDUSTRY. A SMARTER SEARCH STRATEGY.
========================================================= */
.seo-ind__wrap { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); }
.seo-ind__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.seo-ind__intro { max-width: 440px; font-size: var(--fs-copy); line-height: 1.55; color: #e6edff; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.seo-ind__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.seo-indcard { border-radius: 14px; overflow: hidden; outline: none; background: linear-gradient(170deg, #f7faff, #dbe7ff); border: 1.5px solid rgba(120,170,255,.95); box-shadow: 0 0 22px rgba(60,130,255,.4), 0 10px 22px rgba(0,0,0,.3); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.seo-indcard:hover, .seo-indcard:focus-visible { transform: translateY(-8px); box-shadow: 0 0 34px rgba(255,107,0,.5), 0 16px 30px rgba(0,0,0,.4); }
.seo-indcard__img { height: clamp(78px, 15vh, 128px); background: #0b1a4a center / cover no-repeat; transition: transform .6s ease; }
.seo-indcard:hover .seo-indcard__img { transform: scale(1.07); }
.seo-indcard { position: relative; }
.seo-indcard__img { position: relative; overflow: hidden; }
.seo-indcard__body { display: flex; align-items: flex-start; gap: 10px; padding: clamp(8px, 1.3vh, 12px) 12px; position: relative; background: inherit; }
.seo-indcard__body > i { flex: none; font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: #2b6be0; margin-top: 2px; }
.seo-indcard:nth-child(3n) .seo-indcard__body > i, .seo-indcard:nth-child(5) .seo-indcard__body > i { color: #ff6b00; }
.seo-indcard:hover .seo-indcard__body > i { animation: seo-icon-flip .9s ease; }
.seo-indcard h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; color: #0b1a3a; margin: 0 0 3px; }
.seo-indcard p { font-size: var(--fs-p); line-height: 1.35; color: #4a5a7d; margin: 0; }

/* =========================================================
   S10 — KNOW WHAT'S WORKING. SEE WHAT'S GROWING.
========================================================= */
.seo-rep__wrap { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); }
.seo-rep__top { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 2.18fr); gap: clamp(20px, 2.6vw, 44px); align-items: center; }
.seo-mon { border: 2px solid #3a63b8; border-radius: 14px; background: linear-gradient(160deg, rgba(9,20,56,.96), rgba(5,12,34,.97)); box-shadow: 0 0 36px rgba(50,120,255,.45), 0 20px 40px rgba(0,0,0,.45); padding: clamp(8px, 1.3vh, 14px); color: #fff; min-width: 0; }
.seo-mon__bar { display: flex; justify-content: space-between; align-items: center; font-size: clamp(.7rem, .9vw, .88rem); margin-bottom: 8px; }
.seo-mon__bar span { font-size: .66rem; color: #bcd0f5; border: 1px solid rgba(100,150,230,.5); border-radius: 6px; padding: 3px 8px; }
.seo-mon__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.seo-mon__kpis > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; background: rgba(24,50,120,.45); border: 1px solid rgba(80,130,230,.35); }
.seo-mon__kpis i { grid-row: 1 / span 3; font-size: 1.1rem; }
.seo-mon__kpis small { font-size: .58rem; color: #b6c8ee; }
.seo-mon__kpis b { font-size: clamp(.9rem, 1.3vw, 1.25rem); line-height: 1.1; }
.seo-mon__kpis em, .seo-mon__panel em { font-style: normal; font-size: .58rem; color: #25d3a6; }
.seo-mon__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.seo-mon__panel { padding: 8px 10px; border-radius: 9px; background: rgba(14,32,84,.55); border: 1px solid rgba(80,130,230,.3); min-width: 0; }
.seo-mon__panel > small { display: flex; justify-content: space-between; align-items: center; font-size: .6rem; color: #cfdcf8; margin-bottom: 5px; gap: 6px; }
.seo-mon__panel--wide { grid-column: 1 / span 2; }
.seo-mon__legend { font-size: .55rem; color: #9fb4e0; } .seo-mon__legend i { display: inline-block; width: 8px; height: 3px; background: #4aa3ff; margin: 0 3px 2px 6px; } .seo-mon__legend i.o { background: #ff9a2e; }
.seo-mon__two { position: relative; --lc: #4aa3ff; }
.seo-mon__two .seo-spark:nth-child(2) { position: absolute; inset: 0; --lc: #ff9a2e; }
.seo-mon__two .seo-spark:nth-child(2) .seo-spark__area, .seo-mon__two .seo-spark:nth-child(2) .seo-spark__dot { display: none; }
.seo-mon__two .seo-spark { max-height: clamp(44px, 9vh, 80px); }
.seo-mon__rank { list-style: none; display: grid; gap: 5px; font-size: .6rem; color: #d6e2fb; }
.seo-mon__rank li { display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 6px; }
.seo-mon__rank span { height: 6px; border-radius: 3px; background: rgba(74,163,255,.18); overflow: hidden; }
.seo-mon__rank span i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #2f7bff, #ffb066); }
.seo-mon__rank b { text-align: right; }
.seo-mon__panel .seo-bars { --bh: clamp(30px, 5.4vh, 46px); }
.seo-mon__panel--donut { --ds: clamp(48px, 8vh, 64px); }
.seo-mon__panel .seo-spark { max-height: 40px; }
.seo-mon__logos { display: flex; gap: 8px; margin-top: 4px; }
.seo-rep__kpis { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.seo-rep__kpi { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 4px; padding: 8px 10px; }
.seo-rep__kpi i { font-size: 1.1rem; color: var(--k); filter: drop-shadow(0 0 6px var(--k)); grid-row: 1 / span 2; }
.seo-rep__kpi span { font-size: var(--fs-p); font-weight: 600; line-height: 1.15; color: #fff; }
.seo-rep__kpi .seo-bars { --bh: 18px; grid-column: 2; }
.seo-rep__kpi .seo-bars i { background: linear-gradient(to top, rgba(80,140,255,.3), var(--k)); }
.seo-rep__kpi .seo-bars i:last-child { background: linear-gradient(to top, #d94f00, #ffb066); }
.seo-lt__kicker + .seo-lt__title { margin-top: 0; }

/* =========================================================
   S11 — QUESTIONS ABOUT SEARCH? LET'S MAKE IT CLEAR.
========================================================= */
.seo-faq__left { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.seo-faq__visual { position: relative; height: clamp(150px, 27vh, 250px); }
.seo-faq__q { position: absolute; left: 24%; bottom: -6px; font-family: var(--display); font-weight: 900; font-size: clamp(8rem, 24vh, 15rem); line-height: .85; background: linear-gradient(160deg, #cfe6ff 0%, #4aa3ff 45%, #1b4fb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(60,140,255,.85)); animation: seo-float 4s ease-in-out infinite alternate; }
.seo-faq__bub { position: absolute; display: grid; place-items: center; width: clamp(40px, 6vh, 56px); aspect-ratio: 1; border-radius: 14px; background: linear-gradient(160deg, #fff, #dbe8ff); box-shadow: 0 0 22px rgba(80,150,255,.7); animation: seo-float 3.6s ease-in-out infinite alternate; }
.seo-faq__bub--1 { left: 4%;  top: 6%;  animation-delay: .2s; } .seo-faq__bub--2 { left: 30%; top: -4%; animation-delay: .7s; }
.seo-faq__bub--3 { right: 6%; top: 8%; animation-delay: 1.1s; } .seo-faq__bub--4 { right: 2%; bottom: 18%; animation-delay: 1.6s; }
.seo-faq__list { display: grid; gap: clamp(5px, .9vh, 9px); min-width: 0; }
.seo-faqitem { border-radius: 12px; background: linear-gradient(170deg, #f8fbff, #e1ebff); border: 1.5px solid rgba(130,175,255,.9); box-shadow: 0 0 18px rgba(60,130,255,.3); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.seo-faqitem:hover { box-shadow: 0 0 28px rgba(255,107,0,.4); transform: translateX(-4px); }
.seo-faqitem h3 { margin: 0; }
.seo-faqitem__btn { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: clamp(8px, 1.4vh, 13px) 16px; background: none; border: 0; cursor: pointer; font: inherit; color: #0b1a3a; }
.seo-faqitem__num { flex: none; display: grid; place-items: center; width: 36px; height: 28px; border-radius: 7px; background: #cfe0ff; color: #1f4fc0; font-family: var(--display); font-weight: 700; font-size: .85rem; }
.seo-faqitem__q { flex: 1; font-weight: 600; font-size: clamp(.8rem, calc(var(--sk) * .95), .95rem); line-height: 1.25; }
.seo-faqitem__btn > i { flex: none; color: #2b6be0; transition: transform .35s ease; }
.seo-faqitem.is-open .seo-faqitem__btn > i { transform: rotate(180deg); }
.seo-faqitem.is-open .seo-faqitem__num { background: #ff6b00; color: #fff; }
.seo-faqitem__a { padding: 0 16px 12px 66px; animation: seo-faq-in .35s ease; }
.seo-faqitem__a p { font-size: clamp(.78rem, calc(var(--sk) * .9), .9rem); line-height: 1.5; color: #3b4a6b; margin: 0; }
@keyframes seo-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================
   S12 — READY TO BE DISCOVERED?
========================================================= */
.seo-cta__btns .btn { white-space: nowrap; }
.seo-cta__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
.seo-cta__ghost { padding: 12px 26px; border-radius: 12px; border: 1.5px solid #2fa8ff; background: rgba(8,24,70,.6); color: #fff; box-shadow: 0 0 18px rgba(47,168,255,.35); transition: all .3s ease; }
.seo-cta__ghost:hover { border-color: var(--accent); box-shadow: 0 0 26px rgba(255,107,0,.45); transform: translateY(-2px); }
.seo-cta__ghost i { margin-right: 8px; color: #4aa3ff; }
.seo-cta__brand { margin-top: clamp(12px, 3vh, 30px); display: flex; flex-direction: column; gap: 4px; }
.seo-cta__brand b { font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 1.9vw, 1.8rem); letter-spacing: .04em; color: #fff; }
.seo-cta__brand span { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: #cfdcf8; }
.seo-cta__right { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 22px); min-width: 0; }
.seo-cta__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); padding: 0 4%; }
.seo-cta__tiles span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(8px, 1.4vh, 14px) 6px; border-radius: 12px; border: 1.5px solid rgba(90,160,255,.9); background: linear-gradient(160deg, rgba(14,36,100,.85), rgba(6,16,50,.9)); box-shadow: 0 0 20px rgba(60,130,255,.55); animation: seo-float 3.4s ease-in-out infinite alternate; }
.seo-cta__tiles span:nth-child(2) { animation-delay: .4s; } .seo-cta__tiles span:nth-child(3) { animation-delay: .8s; } .seo-cta__tiles span:nth-child(4) { animation-delay: 1.2s; } .seo-cta__tiles span:nth-child(5) { animation-delay: 1.6s; }
.seo-cta__tiles small { font-size: clamp(.58rem, .7vw, .72rem); color: #fff; text-align: center; line-height: 1.15; }
.seo-cta__laptop { width: 100%; max-width: 640px; margin: 0 auto; }
.seo-cta__screen { border: 2px solid #3a63b8; border-bottom-width: 6px; border-radius: 14px 14px 4px 4px; background: linear-gradient(160deg, rgba(9,22,64,.96), rgba(5,12,36,.97)); box-shadow: 0 0 40px rgba(60,130,255,.55); padding: clamp(10px, 1.8vh, 18px); }
.seo-cta__search { display: flex; justify-content: space-between; align-items: center; max-width: 62%; margin: 0 auto clamp(8px, 1.6vh, 16px); padding: 6px 6px 6px 16px; border-radius: 10px; background: #eef3ff; color: #51638a; font-size: .8rem; }
.seo-cta__search i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #2b6be0; color: #fff; font-size: .8rem; }
.seo-cta__body { display: grid; grid-template-columns: 1fr clamp(96px, 28%, 150px); gap: 12px; align-items: end; }
.seo-cta__chart { position: relative; --bh: clamp(70px, 14vh, 130px); }
.seo-cta__chart .seo-spark { position: absolute; inset: 0; --lc: #ff8a33; max-height: none; height: 100%; }
.seo-cta__chart .seo-spark__area { display: none; }
.seo-cta__chips { list-style: none; display: grid; gap: 6px; }
.seo-cta__chips li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: rgba(24,56,140,.55); border: 1px solid rgba(80,140,240,.45); font-size: .68rem; color: #fff; }
.seo-cta__chips i { color: #4aa3ff; } .seo-cta__chips b { margin-left: auto; color: #25d3a6; }
.seo-cta__base { height: 10px; margin: 0 -4%; border-radius: 0 0 40px 40px; background: linear-gradient(to bottom, #2a3d6e, #0c142c); box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 24px rgba(255,107,0,.35); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width: 1181px) and (max-width: 1440px) {
  .seo-chcard p { min-height: 4.2em; }
  .seo-mon__kpis b { font-size: .95rem; }
}
@media (min-width: 1181px) and (max-height: 760px) {
  .seo-sec { padding: 20px 0; }
  .seo-lt__copy { margin-bottom: 8px; }
}

@media (max-width: 1180px) {
  .seo-sec { min-height: 0; padding: 48px 0; }
  .seo-sec__grid, .seo-rep__top { grid-template-columns: 1fr; gap: 26px; }
  .seo-sec--night .seo-sec__shade, .seo-sec--blue .seo-sec__shade { background: linear-gradient(to bottom, rgba(6,9,20,.78), rgba(6,9,20,.5) 50%, rgba(6,9,20,.7)); }
  .seo-lt__copy { max-width: 620px; }
  .seo-exp__cards, .seo-met__cards, .seo-tools__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-ch__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-chcard:nth-child(n) { margin-top: 0; }
  .seo-ch__hub { height: clamp(120px, 22vw, 170px); }
  .seo-ch__hub svg { display: none; }
  .seo-adv__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-adv__card--1, .seo-adv__card--2, .seo-adv__card--3, .seo-adv__card--4 { grid-column: auto; grid-row: auto; }
  .seo-adv__chart { grid-column: 1 / -1; grid-row: auto; order: 5; }
  .seo-adv__chart svg { max-height: 240px; }
  .seo-proc__top { flex-direction: column; align-items: flex-start; }
  .seo-proc__visual { align-self: flex-end; width: clamp(200px, 36vw, 320px); height: 130px; }
  .seo-proc__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-proc__step:not(:last-child)::after { display: none; }
  .seo-ind__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .seo-ind__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-indcard__img { height: clamp(100px, 20vw, 150px); }
  .seo-rep__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-faq__visual { height: 200px; max-width: 420px; }
  .seo-cta__laptop { max-width: 560px; }
}
@media (max-width: 760px) {
  .seo-ch__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-proc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-proc__flow { flex-wrap: wrap; justify-content: center; border-radius: 22px; row-gap: 10px; }
  .seo-mon__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-mon__grid { grid-template-columns: 1fr 1fr; }
  .seo-mon__panel--wide { grid-column: 1 / -1; }
  .seo-cta__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .seo-cta__body { grid-template-columns: 1fr; }
  .seo-cta__chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .seo-sec { padding: 40px 0; }
  .seo-lt__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .seo-exp__cards, .seo-met__cards, .seo-tools__cards, .seo-adv__stage { grid-template-columns: 1fr; }
  .seo-ch__cards { grid-template-columns: 1fr; }
  .seo-chcard p { min-height: 0; }
  .seo-proc__steps { grid-template-columns: 1fr; }
  .seo-proc__step { min-height: 0; }
  .seo-ind__cards { grid-template-columns: 1fr; }
  .seo-rep__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-banner { flex-direction: column; text-align: center; gap: 8px; }
  .seo-banner > i { border-right: 0; padding-right: 0; }
  .seo-faqitem__a { padding-left: 16px; }
  .seo-faqitem__btn { gap: 10px; padding: 10px 12px; }
  .seo-cta__btns { width: 100%; }
  .seo-cta__btns .btn { width: 100%; justify-content: center; min-height: 48px; }
  .seo-cta__search { max-width: 100%; }
  .seo-tools__books { display: none; }
}

@media (hover: none) {
  .seo-gc:hover, .seo-chcard:hover, .seo-indcard:hover, .seo-faqitem:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-sec__bg, .seo-banner--o, .seo-ch__orb, .seo-exp__ring, .seo-exp__word, .seo-adv__head, .seo-proc__target,
  .seo-faq__q, .seo-faq__bub, .seo-cta__tiles span, .seo-flow, .seo-adv__bars rect, .seo-adv__arrow { animation: none; }
  .seo-js .seo-reveal, .seo-js .seo-reveal.is-in { opacity: 1; animation: none; }
  .seo-js .seo-reveal:not(.is-in) .seo-spark__line { stroke-dashoffset: 0; }
  .seo-js .seo-reveal:not(.is-in) .seo-bars i { transform: none; }
  .seo-js .seo-reveal.is-in .seo-bars i, .seo-js .seo-reveal.is-in .seo-spark__line { animation: none; }
  .seo-gc, .seo-chcard, .seo-indcard, .seo-faqitem { transition: none; }
}



/* =========================================================
   SECTIONS 4 - 12 — COMPACT SPACING (heights), SMM FONT SIZES
========================================================= */
.seo-banner { gap: 16px; padding: clamp(8px, 1.2vh, 12px) clamp(12px, 1.8vw, 22px); font-size: clamp(.92rem, calc(var(--sk) * 1.25), 1.15rem); }
.seo-banner > i { font-size: clamp(1.2rem, 1.8vw, 1.8rem); padding-right: 14px; }

/* S4 */
.seo-ch__right { gap: clamp(6px, 1vh, 10px); }
.seo-ch__cards { gap: clamp(6px, .8vw, 12px); }
.seo-chcard { padding: clamp(8px, 1.2vh, 12px) 10px 10px; }
.seo-chcard:hover, .seo-chcard:focus-visible { transform: translateY(-6px) scale(1.02); }
.seo-chcard__logo { margin-bottom: 3px; }
.seo-chcard h3 { font-size: var(--fs-h3); margin: 0 0 3px; }
.seo-chcard p { font-size: var(--fs-p); line-height: 1.3; margin: 0 0 6px; min-height: 3.2em; }
.seo-chcard__mock { padding: 5px; gap: 3px; }
.seo-ch__hub { height: clamp(90px, 14vh, 135px); }
.seo-ch__hub svg { inset: 0 0 15px 0; height: calc(100% - 15px); }
.seo-ch__orb { bottom: 15px; width: clamp(68px, 9vh, 92px); font-size: .65rem; }
.seo-ch__orb i { font-size: 1.1rem; }
.seo-ch__pad { height: 22px; }
/* S5 */
.seo-adv__right { gap: clamp(6px, 1.2vh, 12px); }
.seo-adv__stage { grid-template-columns: minmax(0, 1fr) minmax(110px, .62fr) minmax(0, 1fr); gap: clamp(8px, 1.2vh, 12px) clamp(6px, .8vw, 12px); }
.seo-adv__card { min-height: clamp(90px, 14vh, 128px); }
.seo-adv__card .seo-gc__icon { margin-bottom: 4px; font-size: clamp(1.2rem, 1.8vw, 1.7rem); }
.seo-adv__chart svg { max-height: clamp(160px, 30vh, 240px); }
/* S6 */
.seo-met__right { gap: clamp(6px, 1.2vh, 12px); }
.seo-met__cards { gap: clamp(6px, .8vw, 12px); }
.seo-met__card { gap: 6px; min-height: clamp(100px, 16vh, 140px); }
/* S7 */
.seo-proc__wrap { gap: clamp(10px, 1.8vh, 18px); }
.seo-proc__top { gap: 20px; }
.seo-proc__visual { width: clamp(180px, 22vw, 320px); height: clamp(90px, 15vh, 140px); }
.seo-proc__laptop { padding: 10px 12px 6px; }
.seo-proc__target { font-size: clamp(2.5rem, 5vw, 4rem); }
.seo-proc__steps { gap: clamp(10px, 1.4vw, 20px); }
.seo-proc__step { min-height: clamp(120px, 20vh, 180px); padding-top: clamp(10px, 1.4vh, 14px); }
/* S8 */
.seo-tools__right { gap: clamp(6px, 1.2vh, 12px); }
.seo-tools__cards { gap: clamp(6px, .8vw, 12px); }
.seo-tools__card { gap: 4px; min-height: clamp(100px, 15vh, 135px); }
/* S9 */
.seo-ind__wrap { gap: clamp(8px, 1.4vh, 16px); }
.seo-ind__top { gap: 20px; }
.seo-ind__cards { gap: clamp(6px, .8vw, 12px); }
.seo-indcard__img { height: clamp(64px, 11vh, 100px); }
/* S10 */
.seo-rep__wrap { gap: clamp(6px, 1.2vh, 12px); }
.seo-rep__top { grid-template-columns: minmax(230px, .8fr) minmax(0, 2.2fr); gap: clamp(16px, 2vw, 36px); }
.seo-mon { padding: clamp(6px, 1vh, 10px); }
.seo-rep__kpis { gap: clamp(4px, .6vw, 8px); }
/* S11 */
.seo-faq__left { gap: 10px; }
.seo-faq__visual { height: clamp(120px, 20vh, 180px); }
.seo-faq__list { gap: clamp(4px, .7vh, 7px); }
/* S12 */
.seo-cta__right { gap: clamp(8px, 1.4vh, 16px); }
.seo-cta__tiles { gap: clamp(6px, .8vw, 10px); padding: 0 2%; }

/* =========================================================
   SECTION 3 — OUR SEARCH EXPERTISE (#seo-expertise)
   Background picture: /image/SEOHOME.webp  (glowing SEO podium)
   Layout like the design: text left, 3x2 cards top-right, SEO podium visible below the cards
========================================================= */
#seo-expertise { justify-content: flex-start; padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(110px, 30vh, 260px); }
/* laptop/desktop: exactly one screen (below the menu); only grows if content is really taller */
@media (min-width: 1181px) {
  /* only the CARDS must stay above the SEO podium (they are short), so no big bottom reserve: height stays one screen */
  #seo-expertise { box-sizing: border-box; min-height: calc(100vh - 88px); padding-bottom: clamp(16px, 3vh, 32px); }
  @supports (height: 100svh) { #seo-expertise { min-height: calc(100svh - 88px); } }
}

/* picture: one wide 2400 x 1100 image that fills the section (no small box, no cropped zoom) */
#seo-expertise .seo-sec__bg { animation: none; background: #060914 url('/image/seo-home-wide.webp') center bottom / cover no-repeat; }
#seo-expertise .seo-sec__shade { background: linear-gradient(90deg, rgba(6,9,20,.86) 0, rgba(6,9,20,.5) 30%, rgba(6,9,20,0) 52%), linear-gradient(0deg, rgba(6,9,20,.45) 0, rgba(6,9,20,0) 28%); }

/* two columns */
#seo-expertise > .wrap.seo-sec__grid { flex: none; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
#seo-expertise .seo-lt { padding-top: clamp(18px, 4.5vh, 48px); }   /* heading sits a little lower */
#seo-expertise .seo-lt__copy { max-width: 440px; }
#seo-expertise .seo-lt__btn { display: flex; align-items: center; justify-content: center; width: min(100%, 430px); margin-top: calc(var(--sk) * 1.2); padding: calc(var(--sk) * .95) 1rem; border-radius: 12px; font-size: var(--fs-h3); font-weight: 700; }

/* 3 x 2 cards */
#seo-expertise .seo-exp__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
#seo-expertise .seo-gc {
  --c: #2f8bff; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: clamp(112px, 19vh, 170px); padding: clamp(10px, 1.3vh, 16px) clamp(12px, 1.1vw, 16px);
  border-radius: 12px; border: 1.5px solid var(--c);
  background: linear-gradient(145deg, rgba(10,20,50,.9) 0%, rgba(6,12,32,.96) 100%);
  box-shadow: 0 0 18px rgba(47,139,255,.35);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 14%, transparent);
  transition: transform .35s ease, box-shadow .35s ease;
}
#seo-expertise .seo-gc--o { --c: #ff6b00; }
#seo-expertise .seo-gc--b { --c: #2f8bff; }
#seo-expertise .seo-gc:hover, #seo-expertise .seo-gc:focus-visible { transform: translateY(-5px); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 22%, transparent); }
#seo-expertise .seo-gc__main { min-width: 0; flex: 1; }
#seo-expertise .seo-gc__num { display: block; font: 800 clamp(1.1rem, calc(var(--sk) * 1.6), 1.6rem)/1 var(--display); color: var(--c); }
#seo-expertise .seo-gc__rule { display: block; width: 22px; height: 2px; background: var(--c); margin: 5px 0 7px; }
#seo-expertise .seo-gc__title { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 4px; }
#seo-expertise .seo-gc__text { font-size: var(--fs-p); line-height: 1.32; color: #cddbf5; margin: 0; }
#seo-expertise .seo-gc__icon { flex: none; font-size: clamp(2rem, calc(var(--sk) * 3.6), 3.4rem); color: transparent;
  background: linear-gradient(160deg, #8fd0ff 0%, #2f8bff 55%, #ff8a33 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(47,139,255,.7)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#seo-expertise .seo-gc:hover .seo-gc__icon { transform: scale(1.12) rotate(-4deg); }

@media (max-width: 1180px) {
  #seo-expertise { padding-top: 76px; padding-bottom: clamp(120px, 48vw, 420px); }
  #seo-expertise .seo-lt { padding-top: 0; }
  #seo-expertise > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-expertise .seo-exp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #seo-expertise .seo-sec__bg { background-size: 100% auto; background-position: center bottom; }
  #seo-expertise .seo-sec__shade { background: linear-gradient(180deg, rgba(6,9,20,.7), rgba(6,9,20,.35) 60%, rgba(6,9,20,.7)); }
  #seo-expertise .seo-lt__btn { width: 100%; }
}
@media (max-width: 560px) { #seo-expertise .seo-exp__cards { grid-template-columns: 1fr; } #seo-expertise .seo-gc { min-height: 0; } }
@media (hover: none) { #seo-expertise .seo-gc:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { #seo-expertise .seo-gc, #seo-expertise .seo-gc__icon { transition: none; } }

/* =========================================================
   SECTION 4 — THE NEW SEARCH ECOSYSTEM (#seo-channels)
   Background: /image/seo4-wide.webp (made from seo4.webp, "YOUR BRAND" sphere baked in)
   Card thumbnails: /image/seo-ch-google.webp, seo-ch-ai.webp, seo-ch-gemini.webp, seo-ch-bing.webp
========================================================= */
#seo-channels { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(14px, 2.5vh, 28px); }
#seo-channels .seo-sec__bg { animation: none; background: #060914 url('/image/seo4-wide.webp') center bottom / cover no-repeat; }
#seo-channels .seo-sec__shade { background: linear-gradient(90deg, rgba(6,9,20,.85) 0, rgba(6,9,20,.4) 24%, rgba(6,9,20,0) 44%); }
#seo-channels > .wrap.seo-sec__grid { flex: none; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.9fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
#seo-channels .seo-lt { padding-top: clamp(18px, 4vh, 44px); }
#seo-channels .seo-lt__copy { max-width: 360px; }
#seo-channels > .wrap.seo-ch__bar { flex: none; margin-top: auto; padding-top: clamp(10px, 2vh, 20px); }
#seo-channels .seo-banner { width: fit-content; max-width: 100%; background: rgba(3, 6, 16, .96); }   /* black only behind the text line */
@media (min-width: 1181px) {
  #seo-channels { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-channels { min-height: calc(100svh - 88px); } }
}

/* 5 cards in a gentle arc */
#seo-channels .seo-ch__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); align-items: start; }
#seo-channels .seo-chcard { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 14px; outline: none; transform: none; min-width: 0; }
#seo-channels .seo-chcard:hover, #seo-channels .seo-chcard:focus-visible { transform: none; box-shadow: none; }
#seo-channels .seo-chcard__face {
  position: relative; padding: clamp(10px, 1.4vh, 16px) clamp(10px, 1vw, 14px) clamp(10px, 1.4vh, 14px);
  border-radius: 14px; border: 1.5px solid #2f8bff;
  background: linear-gradient(170deg, rgba(14,28,72,.92) 0%, rgba(6,12,34,.96) 100%);
  box-shadow: 0 0 22px rgba(47,139,255,.45);
  box-shadow: 0 0 22px rgba(47,139,255,.45), inset 0 0 18px rgba(47,139,255,.12);
  transform: perspective(1200px) translateY(var(--ty, 0px)) rotateY(var(--ry, 0deg));
  transition: translate .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#seo-channels .seo-chcard:nth-child(1) .seo-chcard__face { --ry: 9deg;  --ty: 22px; }
#seo-channels .seo-chcard:nth-child(2) .seo-chcard__face { --ry: 4deg;  --ty: -4px; }
#seo-channels .seo-chcard:nth-child(3) .seo-chcard__face { --ry: 0deg;  --ty: -26px; }
#seo-channels .seo-chcard:nth-child(4) .seo-chcard__face { --ry: -4deg; --ty: -4px; }
#seo-channels .seo-chcard:nth-child(5) .seo-chcard__face { --ry: -9deg; --ty: 22px; }
#seo-channels .seo-chcard:hover .seo-chcard__face, #seo-channels .seo-chcard:focus-visible .seo-chcard__face { translate: 0 -8px; border-color: #ff8a33; box-shadow: 0 0 34px rgba(255,107,0,.55), 0 0 18px rgba(47,139,255,.5); }

#seo-channels .seo-chcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#seo-channels .seo-chcard--inline .seo-chcard__head { flex-direction: row; align-items: center; gap: 8px; }
#seo-channels .seo-chcard__logo { display: inline-flex; color: #fff; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#seo-channels .seo-chcard:hover .seo-chcard__logo { transform: rotate(-8deg) scale(1.12); }
#seo-channels .seo-chcard h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; color: #fff; margin: 0; }
#seo-channels .seo-chcard__rule { display: block; width: 22px; height: 2px; background: #ff6b00; margin: 8px 0; }
#seo-channels .seo-chcard p { font-size: var(--fs-p); line-height: 1.32; color: #dbe6ff; margin: 0 0 10px; min-height: 0; }

/* white "search result" mock inside each card */
#seo-channels .seo-chcard__mock { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #fafcff, #e3ecff); border: 1px solid #c8d8f5; color: #31405f; }
#seo-channels .seo-chcard__q { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 8px; border-radius: 99px; background: #fff; border: 1px solid #cfdcf7; font-size: .62rem; line-height: 1.2; color: #51638a; }
#seo-channels .seo-chcard__q i { color: #2b6be0; font-size: .6rem; }
#seo-channels .seo-chcard__q--ai { justify-content: flex-start; border-radius: 6px; font-weight: 700; color: #2459c9; }
#seo-channels .seo-chcard__bubble { padding: 6px 8px; border-radius: 10px; background: #dbe9ff; font-size: .62rem; line-height: 1.25; color: #31405f; }
#seo-channels .seo-chcard__brand { display: flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; color: #0b1a3a; }
#seo-channels .seo-chcard__brand b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #ff6b00; color: #fff; font-size: .55rem; }
#seo-channels .seo-chcard__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#seo-channels .seo-chcard__lines i { display: block; height: 5px; border-radius: 3px; background: #c9d7f2; }
#seo-channels .seo-chcard__lines i.hl { width: 70%; background: #3d8bff; }
#seo-channels .seo-chcard__lines i:nth-child(3) { width: 60%; }
#seo-channels .seo-chcard__row { display: grid; grid-template-columns: minmax(0, 1fr) 36%; gap: 8px; align-items: center; }
#seo-channels .seo-chcard__row img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; transition: transform .5s ease; }
#seo-channels .seo-chcard:hover .seo-chcard__row img { transform: scale(1.08); }

@media (max-width: 1180px) {
  #seo-channels { padding-top: 76px; }
  #seo-channels .seo-lt { padding-top: 0; }
  #seo-channels > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-channels .seo-sec__bg { background-position: 62% bottom; }
  #seo-channels .seo-sec__shade { background: linear-gradient(180deg, rgba(6,9,20,.75), rgba(6,9,20,.4) 55%, rgba(6,9,20,.8)); }
  #seo-channels .seo-ch__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  #seo-channels .seo-chcard__face { transform: none; }
  #seo-channels > .wrap.seo-ch__bar { margin-top: 24px; }
}
@media (max-width: 760px) { #seo-channels .seo-ch__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #seo-channels .seo-ch__cards { grid-template-columns: 1fr; } }
@media (hover: none) { #seo-channels .seo-chcard:hover .seo-chcard__face { translate: none; } }
@media (prefers-reduced-motion: reduce) { #seo-channels .seo-chcard__face, #seo-channels .seo-chcard__logo, #seo-channels .seo-chcard__row img { transition: none; } }

/* =========================================================
   SECTIONS 5, 7, 8 — same style as the reference sections (3 & 4)
   Background picture: /image/seo5.webp   (kept bright: only a light left-side shade)
   Each section = one screen tall (screen minus the 88px menu)
========================================================= */
#seo-advantage, #seo-process, #seo-tools { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(10px, 1.8vh, 20px); }
@media (min-width: 1181px) {
  #seo-advantage, #seo-process, #seo-tools { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-advantage, #seo-process, #seo-tools { min-height: calc(100svh - 88px); } }
}
#seo-advantage .seo-sec__bg, #seo-process .seo-sec__bg, #seo-tools .seo-sec__bg { animation: none; background: #060914 url('/image/seo5.webp') center / cover no-repeat; }
#seo-advantage .seo-sec__shade, #seo-process .seo-sec__shade, #seo-tools .seo-sec__shade {
  background: linear-gradient(90deg, rgba(6,9,20,.74) 0, rgba(6,9,20,.4) 34%, rgba(6,9,20,.1) 62%, rgba(6,9,20,0) 100%), linear-gradient(0deg, rgba(6,9,20,.5) 0, rgba(6,9,20,0) 24%);
}

/* two-column layout (text left, cards right) */
#seo-advantage > .wrap.seo-sec__grid, #seo-tools > .wrap.seo-sec__grid { flex: none; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.9fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
#seo-advantage .seo-lt, #seo-tools .seo-lt { padding-top: clamp(18px, 4vh, 44px); }
#seo-advantage .seo-lt__copy, #seo-tools .seo-lt__copy { max-width: 380px; }

/* full-width bottom bar */
.seo-sec > .wrap.seo-bar { flex: none; margin-top: auto; padding-top: clamp(10px, 2vh, 20px); }
.seo-sec > .wrap.seo-bar .seo-banner { width: 100%; }

/* glass cards, same look as section 3 */
#seo-advantage .seo-gc, #seo-process .seo-gc, #seo-tools .seo-gc,
#seo-advantage .seo-gc--b, #seo-process .seo-gc--b, #seo-tools .seo-gc--b { --c: #2f8bff; }
#seo-advantage .seo-gc--o, #seo-process .seo-gc--o, #seo-tools .seo-gc--o { --c: #ff6b00; }
#seo-advantage .seo-gc, #seo-process .seo-gc, #seo-tools .seo-gc {
  border-radius: 12px; border: 1.5px solid var(--c);
  background: linear-gradient(145deg, rgba(10,20,50,.88) 0%, rgba(6,12,32,.94) 100%);
  box-shadow: 0 0 18px rgba(47,139,255,.35);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 14%, transparent);
  transition: transform .35s ease, box-shadow .35s ease;
}
#seo-advantage .seo-gc:hover, #seo-process .seo-gc:hover, #seo-tools .seo-gc:hover,
#seo-advantage .seo-gc:focus-visible, #seo-process .seo-gc:focus-visible, #seo-tools .seo-gc:focus-visible {
  transform: translateY(-5px); border-color: var(--c);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 22%, transparent);
}
#seo-advantage .seo-gc__icon, #seo-process .seo-gc__icon, #seo-tools .seo-gc__icon { color: var(--c); filter: drop-shadow(0 0 8px var(--c)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#seo-advantage .seo-gc:hover .seo-gc__icon, #seo-tools .seo-gc:hover .seo-gc__icon { transform: scale(1.12) rotate(-4deg); }
#seo-advantage .seo-gc__rule, #seo-process .seo-gc__rule, #seo-tools .seo-gc__rule { background: var(--c); }
#seo-process .seo-gc__num { color: var(--c); }

/* S5 — Beyond Keywords */
#seo-advantage .seo-adv__card { min-height: clamp(118px, 19vh, 170px); padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.1vw, 16px); }
#seo-advantage .seo-adv__card .seo-gc__icon { font-size: clamp(1.7rem, calc(var(--sk) * 2.6), 2.6rem); margin-bottom: 6px; }

/* S7 — No Guesswork (title + visual on top, 5 steps, flow bar at the bottom) */
#seo-process > .wrap.seo-proc__wrap { flex: 1; justify-content: space-between; gap: clamp(10px, 2vh, 22px); }
#seo-process .seo-proc__step { min-height: clamp(150px, 24vh, 210px); }
#seo-process .seo-proc__icon { color: var(--c); filter: drop-shadow(0 0 12px var(--c)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#seo-process .seo-proc__step:hover .seo-proc__icon { transform: scale(1.1) rotate(-4deg); }
#seo-process .seo-proc__step:not(:last-child)::after { color: var(--c); text-shadow: 0 0 10px var(--c); }
#seo-process .seo-proc__flow { box-shadow: 0 0 22px rgba(47,139,255,.4); background: rgba(6,12,32,.82); }

/* S8 — The Right Tools */
#seo-tools .seo-tools__card { min-height: clamp(118px, 19vh, 160px); }

@media (max-width: 1180px) {
  #seo-advantage, #seo-process, #seo-tools { padding-top: 48px; }
  #seo-advantage > .wrap.seo-sec__grid, #seo-tools > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-advantage .seo-lt, #seo-tools .seo-lt { padding-top: 0; }
  #seo-advantage .seo-sec__bg, #seo-process .seo-sec__bg, #seo-tools .seo-sec__bg { background-position: 62% center; }
  #seo-advantage .seo-sec__shade, #seo-process .seo-sec__shade, #seo-tools .seo-sec__shade { background: linear-gradient(180deg, rgba(6,9,20,.62), rgba(6,9,20,.42) 50%, rgba(6,9,20,.68)); }
  .seo-sec > .wrap.seo-bar { margin-top: 24px; }
}
@media (hover: none) {
  #seo-advantage .seo-gc:hover, #seo-process .seo-gc:hover, #seo-tools .seo-gc:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #seo-advantage .seo-gc, #seo-process .seo-gc, #seo-tools .seo-gc, #seo-advantage .seo-gc__icon, #seo-process .seo-proc__icon, #seo-tools .seo-gc__icon { transition: none; }
}

/* =========================================================
   SECTIONS 5, 7, 8 — REDESIGN (backgrounds: /image/seo-bg-advantage.webp, seo-bg-process.webp, seo-bg-tools.webp)
   Each one fits one screen on laptop/desktop (screen height minus the 88px menu)
========================================================= */
#seo-advantage, #seo-process, #seo-tools { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(24px, 4.5vh, 52px); padding-bottom: clamp(10px, 1.8vh, 20px); }
@media (min-width: 1181px) {
  #seo-advantage, #seo-process, #seo-tools { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-advantage, #seo-process, #seo-tools { min-height: calc(100svh - 88px); } }
}
#seo-advantage .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-advantage.webp') center / cover no-repeat; }
#seo-process .seo-sec__bg { animation: none; background: radial-gradient(60% 70% at 85% 8%, rgba(47,139,255,.28) 0, transparent 70%), radial-gradient(50% 60% at 6% 100%, rgba(255,107,0,.16) 0, transparent 70%), linear-gradient(180deg, #071030 0%, #08163f 52%, #060c24 100%); }   /* plain colour, no picture */
#seo-tools     .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-tools.webp')     center / cover no-repeat; }
#seo-advantage .seo-sec__shade, #seo-process .seo-sec__shade, #seo-tools .seo-sec__shade { background: linear-gradient(90deg, rgba(5,10,30,.7) 0, rgba(5,10,30,.3) 30%, rgba(5,10,30,0) 52%); }
#seo-advantage > .wrap.seo-sec__grid, #seo-tools > .wrap.seo-sec__grid { flex: none; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.9fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
#seo-advantage > .wrap.seo-bar, #seo-tools > .wrap.seo-bar { flex: none; margin-top: auto; padding-top: clamp(10px, 2vh, 20px); }
#seo-advantage .seo-banner, #seo-tools .seo-banner { width: 100%; background: rgba(4, 8, 24, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#seo-advantage .seo-banner b { display: block; }

/* ---- S5: Beyond Keywords — 4 tilted glass cards around the rising bars ---- */
#seo-advantage .seo-adv__stage { grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(0, 1fr); gap: clamp(10px, 1.8vh, 18px) clamp(8px, 1vw, 14px); perspective: 1400px; }
#seo-advantage .seo-adv__card { margin: 0; padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; outline: none; transform: none; }
#seo-advantage .seo-adv--o { --c: #ff7a1a; }
#seo-advantage .seo-adv--b { --c: #2f8bff; }
#seo-advantage .seo-adv__face { position: relative; overflow: hidden; height: 100%; min-height: clamp(120px, 21vh, 185px); padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.2vw, 18px); border-radius: 14px; border: 1.5px solid var(--c);
  background: linear-gradient(150deg, rgba(14,30,80,.9) 0%, rgba(6,12,34,.95) 100%); box-shadow: 0 0 22px rgba(47,139,255,.4);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 16px color-mix(in srgb, var(--c) 14%, transparent);
  transform: perspective(1200px) rotateY(var(--ry, 0deg)); transition: translate .35s ease, box-shadow .35s ease; }
#seo-advantage .seo-adv__card--1 .seo-adv__face, #seo-advantage .seo-adv__card--3 .seo-adv__face { --ry: 9deg; }
#seo-advantage .seo-adv__card--2 .seo-adv__face, #seo-advantage .seo-adv__card--4 .seo-adv__face { --ry: -9deg; }
#seo-advantage .seo-adv__card:hover .seo-adv__face, #seo-advantage .seo-adv__card:focus-visible .seo-adv__face { translate: 0 -6px; box-shadow: 0 0 34px color-mix(in srgb, var(--c) 75%, transparent); }
#seo-advantage .seo-adv__ic { display: block; margin-bottom: 8px; font-size: clamp(1.5rem, calc(var(--sk) * 2.4), 2.3rem); color: var(--c); filter: drop-shadow(0 0 8px var(--c)); }
#seo-advantage .seo-adv__title { font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.12; color: #fff; margin: 0; }
#seo-advantage .seo-adv__rule { display: block; width: 24px; height: 2px; background: #ff6b00; margin: 7px 0; }
#seo-advantage .seo-adv__text { position: relative; z-index: 1; max-width: 62%; font-size: var(--fs-p); line-height: 1.32; color: #d8e3fb; margin: 0; }
#seo-advantage .seo-adv__deco { position: absolute; right: 12px; bottom: 10px; font-size: clamp(2.6rem, calc(var(--sk) * 4.6), 4.4rem); color: transparent; opacity: .85;
  background: linear-gradient(160deg, #9fd3ff, #2f8bff 60%, #1b4fb8); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 12px rgba(47,139,255,.7)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#seo-advantage .seo-adv--o .seo-adv__deco { background-image: linear-gradient(160deg, #ffd2a0, #ff8a33 60%, #d94f00); filter: drop-shadow(0 0 12px rgba(255,107,0,.7)); }
#seo-advantage .seo-adv__card:hover .seo-adv__deco { transform: scale(1.1) rotate(-4deg); }

/* ---- S7: No Guesswork — 5 step cards + flow pill ---- */
#seo-process > .wrap.seo-proc__wrap { flex: 1; justify-content: flex-start; gap: clamp(14px, 3vh, 32px); }
#seo-process .seo-proc__visual { display: none; }               /* the laptop + target now come from the background picture */
#seo-process .seo-proc__top { display: block; }
#seo-process .seo-proc__steps { gap: clamp(14px, 1.8vw, 28px); }
#seo-process .seo-proc__step { --c: #2f8bff; --n: #4aa3ff; min-height: clamp(150px, 27vh, 250px); padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1vw, 16px); border-radius: 14px; border: 1.5px solid var(--c); background: linear-gradient(160deg, rgba(10,22,66,.9), rgba(5,10,30,.95)); box-shadow: 0 0 22px rgba(47,139,255,.4); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 16px color-mix(in srgb, var(--c) 12%, transparent); }
#seo-process .seo-proc__step.seo-gc--o { --c: #ff7a1a; --n: #ff6b00; }
#seo-process .seo-proc__step:hover { transform: translateY(-6px); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 75%, transparent); }
#seo-process .seo-gc__num { color: var(--n); font-size: clamp(1.3rem, calc(var(--sk) * 2), 2rem); }
#seo-process .seo-gc__num::after { content: ''; display: block; width: 22px; height: 2px; background: var(--n); margin-top: 6px; }
#seo-process .seo-proc__icon { margin: auto 0; align-self: center; font-size: clamp(2.4rem, calc(var(--sk) * 4.6), 4.2rem); color: transparent; background: linear-gradient(160deg, #9fd3ff, #2f8bff 60%, #ff8a33); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 12px rgba(47,139,255,.7)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#seo-process .seo-proc__step:hover .seo-proc__icon { transform: scale(1.12) rotate(-4deg); }
#seo-process .seo-proc__step .seo-gc__title { margin-top: 4px; }
#seo-process .seo-proc__flow { margin-top: auto; background: rgba(4, 8, 24, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---- S8: The Right Tools — 3 x 2 tool cards ---- */
#seo-tools .seo-tools__cards { gap: clamp(8px, 1vw, 14px); }
#seo-tools .seo-tools__card { min-height: clamp(120px, 21vh, 175px); background: linear-gradient(150deg, rgba(14,30,80,.9) 0%, rgba(6,12,34,.95) 100%); }
#seo-tools .seo-tools__head .seo-gc__icon { font-size: clamp(1.4rem, calc(var(--sk) * 2.2), 2.1rem); }
#seo-tools .seo-gc__rule { margin: 2px 0 4px; background: #ff6b00; }

@media (max-width: 1180px) {
  #seo-advantage, #seo-process, #seo-tools { padding-top: 56px; padding-bottom: 40px; }
  #seo-advantage > .wrap.seo-sec__grid, #seo-tools > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-advantage .seo-sec__shade, #seo-process .seo-sec__shade, #seo-tools .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,30,.78), rgba(5,10,30,.55) 55%, rgba(5,10,30,.8)); }
  #seo-advantage .seo-adv__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #seo-advantage .seo-adv__face { --ry: 0deg !important; }
  #seo-advantage .seo-adv__text { max-width: 70%; }
  #seo-advantage > .wrap.seo-bar, #seo-tools > .wrap.seo-bar { margin-top: 24px; }
}
@media (max-width: 560px) { #seo-advantage .seo-adv__stage { grid-template-columns: 1fr; } }
@media (hover: none) { #seo-advantage .seo-adv__card:hover .seo-adv__face { translate: none; } #seo-process .seo-proc__step:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { #seo-advantage .seo-adv__face, #seo-advantage .seo-adv__deco, #seo-process .seo-proc__icon { transition: none; } }

/* =========================================================
   BACKGROUNDS YOU PROVIDED  ->  S6: /image/seo5.webp   S7: /image/seo-bg-process.webp   S8: /image/seo-bg-tools.webp
   S6 — Visibility Is Important (redesign)
========================================================= */
#seo-metrics { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(24px, 4.5vh, 52px); padding-bottom: clamp(10px, 1.8vh, 20px); }
@media (min-width: 1181px) {
  #seo-metrics { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-metrics { min-height: calc(100svh - 88px); } }
}
#seo-metrics .seo-sec__bg { animation: none; background: #060914 url('/image/seo5.webp') center / cover no-repeat; }
#seo-metrics .seo-sec__shade { background: linear-gradient(90deg, rgba(5,10,30,.7) 0, rgba(5,10,30,.3) 30%, rgba(5,10,30,0) 52%); }
#seo-metrics > .wrap.seo-sec__grid { flex: none; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.9fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
#seo-metrics > .wrap.seo-bar { flex: none; margin-top: auto; padding-top: clamp(10px, 2vh, 20px); }
#seo-metrics .seo-banner { width: 100%; background: rgba(4, 8, 24, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#seo-metrics .seo-banner b { display: block; }
#seo-metrics .seo-met__cards { gap: clamp(8px, 1vw, 14px); }
#seo-metrics .seo-met__card { min-height: clamp(140px, 24vh, 215px); background: linear-gradient(150deg, rgba(12,28,78,.88) 0%, rgba(5,12,34,.94) 100%); }
#seo-metrics .seo-gc--b { --c: #2f8bff; --glow: 47,139,255; }
#seo-metrics .seo-gc--o { --c: #ff7a1a; background: linear-gradient(150deg, rgba(12,28,78,.88) 0%, rgba(5,12,34,.94) 100%); }
#seo-metrics .seo-met__head .seo-gc__icon { font-size: clamp(1.4rem, calc(var(--sk) * 2.2), 2.1rem); }
#seo-metrics .seo-met__chart { --bh: clamp(46px, 9vh, 88px); --ds: clamp(60px, 11vh, 96px); }
#seo-metrics .seo-met__chart .seo-spark { max-height: clamp(50px, 10vh, 90px); }

/* S8 — the books are already in the provided picture, so hide the CSS books */
#seo-tools .seo-tools__books { display: none; }

@media (max-width: 1180px) {
  #seo-metrics { padding-top: 56px; padding-bottom: 40px; }
  #seo-metrics > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-metrics .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,30,.78), rgba(5,10,30,.55) 55%, rgba(5,10,30,.8)); }
  #seo-metrics > .wrap.seo-bar { margin-top: 24px; }
}

/* ---- S6 cards: richer glass panels + charts (like the design) ---- */
#seo-metrics .seo-met__cards { gap: clamp(8px, 1vw, 14px); }
#seo-metrics .seo-met__card { --c: #3d8bff; min-height: clamp(150px, 25vh, 225px); padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.1vw, 16px) clamp(8px, 1.2vh, 12px); border: 1.5px solid rgba(70,150,255,.85); border-radius: 14px;
  background: linear-gradient(160deg, rgba(14,34,96,.8) 0%, rgba(5,12,38,.92) 100%); box-shadow: 0 0 22px rgba(47,139,255,.4); box-shadow: 0 0 24px rgba(47,139,255,.45), inset 0 0 22px rgba(47,139,255,.12); }
#seo-metrics .seo-met__card:hover { box-shadow: 0 0 34px rgba(255,107,0,.5), 0 0 22px rgba(47,139,255,.5); border-color: #ff8a33; }
#seo-metrics .seo-met__head { align-items: center; gap: 12px; }
#seo-metrics .seo-met__head .seo-gc__icon { font-size: clamp(1.7rem, calc(var(--sk) * 2.8), 2.6rem); line-height: 1; }
#seo-metrics .seo-met__head .seo-gc__title { font-size: var(--fs-h3); }
#seo-metrics .seo-met__head .seo-gc__text { color: #cfe0ff; }
#seo-metrics .seo-met__chart { margin-top: auto; flex: 1; display: flex; align-items: flex-end; }
.seo-mc { display: block; width: 100%; height: auto; max-height: clamp(70px, 14vh, 130px); overflow: visible; }
.seo-mc__ln { stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgba(74,163,255,.7)); }
.seo-mc__dot { filter: drop-shadow(0 0 5px rgba(255,170,90,.9)); }
.seo-mc__bar { transform-box: fill-box; transform-origin: bottom; }
.seo-mc__ring { filter: drop-shadow(0 0 4px rgba(61,139,255,.8)); }
.seo-js .seo-reveal:not(.is-in) .seo-mc__ln { stroke-dashoffset: 1; }
.seo-js .seo-reveal.is-in .seo-mc__ln { animation: seo-draw 1.5s .35s ease-out backwards; }
.seo-js .seo-reveal:not(.is-in) .seo-mc__bar { transform: scaleY(0); }
.seo-js .seo-reveal.is-in .seo-mc__bar { animation: seo-bar-up .7s cubic-bezier(.2,.8,.2,1) backwards; }
.seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(2) { animation-delay: .06s; } .seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(3) { animation-delay: .12s; }
.seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(4) { animation-delay: .18s; } .seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(5) { animation-delay: .24s; }
.seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(6) { animation-delay: .3s; } .seo-js .seo-reveal.is-in .seo-mc__bar:nth-of-type(7) { animation-delay: .36s; }
.seo-js .seo-reveal:not(.is-in) .seo-mc__hb { transform: scaleX(0); }
.seo-mc__hb { transform-box: fill-box; transform-origin: left; }
.seo-js .seo-reveal.is-in .seo-mc__hb { animation: seo-hb .8s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes seo-hb { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .seo-js .seo-reveal .seo-mc__ln, .seo-js .seo-reveal .seo-mc__bar, .seo-js .seo-reveal .seo-mc__hb { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; } }

/* ---- S8 cards: logo + title, orange rule, text, small illustration (like the design) ---- */
#seo-tools .seo-tools__card { --c: #3d8bff; min-height: clamp(150px, 25vh, 215px); gap: 6px; padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.1vw, 16px) clamp(8px, 1.2vh, 12px); border: 1.5px solid var(--c); border-radius: 14px;
  background: linear-gradient(160deg, rgba(14,34,96,.8) 0%, rgba(5,12,38,.92) 100%); box-shadow: 0 0 22px rgba(47,139,255,.4); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 12%, transparent); }
#seo-tools .seo-tools__card.seo-gc--o { --c: #ff7a1a; }
#seo-tools .seo-tools__card:hover { box-shadow: 0 0 34px color-mix(in srgb, var(--c) 75%, transparent); }
#seo-tools .seo-tools__head { gap: 10px; align-items: center; }
#seo-tools .seo-tools__head > svg { flex: none; }
#seo-tools .seo-tools__head .seo-gc__title { font-size: var(--fs-h3); line-height: 1.12; }
.seo-tl { display: block; flex: none; }
.seo-tl--gsc { display: inline-grid; place-items: center; padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.25); }
#seo-tools .seo-gc__text { color: #d8e6ff; }
.seo-tools__art { margin-top: auto; }
.seo-ta { display: block; width: 100%; height: auto; max-height: clamp(50px, 11vh, 96px); overflow: visible; }

/* ---- S7: step cards like the design (neon outline, big drawn illustration) + one-line flow pill ---- */
#seo-process .seo-sec__shade { display: none; }
#seo-process .seo-proc__steps { list-style: none; margin: 0; padding: 0; }
#seo-process .seo-proc__step { min-height: clamp(200px, 33vh, 300px); padding: clamp(12px, 1.8vh, 20px) clamp(14px, 1.2vw, 20px); border-width: 2px; border-radius: 16px; background: linear-gradient(165deg, rgba(8,20,60,.9), rgba(4,9,28,.96));
  box-shadow: 0 0 22px rgba(47,139,255,.5); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 12%, transparent); }
#seo-process .seo-proc__step:hover { box-shadow: 0 0 40px color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 26px color-mix(in srgb, var(--c) 20%, transparent); }
#seo-process .seo-gc__num { font-size: clamp(1.6rem, calc(var(--sk) * 2.6), 2.5rem); }
#seo-process .seo-proc__art { flex: 1; display: grid; place-items: center; min-height: 0; padding: 4px 0; }
#seo-process .seo-proc__art svg { display: block; width: min(100%, clamp(120px, 11vw, 190px)); height: auto; max-height: clamp(70px, 14vh, 130px); filter: drop-shadow(0 0 10px rgba(47,139,255,.55)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#seo-process .seo-proc__step:hover .seo-proc__art svg { transform: scale(1.08) rotate(-2deg); }
#seo-process .seo-proc__step .seo-gc__title { font-size: clamp(1rem, calc(var(--sk) * 1.5), 1.4rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin-top: 0; }
#seo-process .seo-proc__step .seo-gc__text { font-size: var(--fs-p); line-height: 1.35; color: #e2ecff; }
#seo-process .seo-proc__step:not(:last-child)::after { content: '\203A'; font-size: 2rem; font-weight: 300; color: #cfe3ff; text-shadow: 0 0 10px rgba(120,180,255,.9); }
/* the five-step pill: ONE line */
#seo-process .seo-proc__flow, #seo-process .seo-proc__flow li { list-style: none; margin: 0; }
#seo-process .seo-proc__flow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; padding: clamp(8px, 1.5vh, 14px) clamp(16px, 2.2vw, 36px); border: 1.5px solid #2f8bff; border-radius: 999px; background: rgba(4, 10, 32, .9); box-shadow: 0 0 24px rgba(47,139,255,.45), inset 0 0 18px rgba(47,139,255,.1); }
#seo-process .seo-proc__pill { flex: none; white-space: nowrap; font-size: clamp(.9rem, calc(var(--sk) * 1.2), 1.15rem); font-weight: 600; }
#seo-process .seo-proc__pill i { width: clamp(34px, calc(var(--sk) * 3.4), 50px); font-size: clamp(.9rem, calc(var(--sk) * 1.3), 1.3rem); border-width: 2px; }
#seo-process .seo-proc__arrow { flex: none; color: #8fb8ff; }
@media (max-width: 1180px) { #seo-process .seo-proc__step { min-height: 190px; } }
@media (max-width: 860px) { #seo-process .seo-proc__flow { flex-wrap: wrap; justify-content: center; border-radius: 26px; row-gap: 10px; } }

/* =========================================================
   S9 — EVERY INDUSTRY. A SMARTER SEARCH STRATEGY.  (#seo-industries)
   Background: /image/seo-bg-industries.webp    Card photos: /image/seo-ind-*.webp (recommended 800 x 400 px)
   One screen tall; the 8 cards stretch to fill the screen height
========================================================= */
#seo-industries { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(10px, 1.8vh, 20px); }
@media (min-width: 1181px) {
  #seo-industries { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-industries { min-height: calc(100svh - 88px); } }
}
#seo-industries .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-industries.webp') center / cover no-repeat; }
#seo-industries .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,32,.55) 0, rgba(5,10,32,.2) 40%, rgba(5,10,32,.5) 100%); }
#seo-industries > .wrap.seo-ind__wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(10px, 1.8vh, 18px); }
#seo-industries .seo-ind__top { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 3vw, 48px); }
#seo-industries .seo-ind__top .seo-lt__title { margin-bottom: 0; }
#seo-industries .seo-ind__intro { max-width: 470px; font-size: var(--fs-copy); line-height: 1.5; color: #e6edff; margin: 0 0 4px; }

/* 4 x 2 cards that grow to fill the free height */
#seo-industries .seo-ind__cards { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); min-height: 0; }
#seo-industries .seo-indcard { display: flex; flex-direction: column; min-height: clamp(170px, 26vh, 270px); border-radius: 14px; border: 1.5px solid rgba(120,175,255,.95); background: #eef4ff;
  box-shadow: 0 0 22px rgba(60,130,255,.5), 0 10px 22px rgba(0,0,0,.3); }
#seo-industries .seo-indcard__img { flex: 1 1 auto; height: auto; min-height: clamp(80px, 14vh, 150px); background-color: #0b1a4a; background-size: cover; background-position: center; }
#seo-industries .seo-indcard__body { flex: none; align-items: center; gap: 12px; padding: clamp(8px, 1.4vh, 14px) 14px; background: linear-gradient(180deg, #f8fbff, #e4eeff); }
#seo-industries .seo-indcard__body > i { margin-top: 0; font-size: clamp(1.6rem, calc(var(--sk) * 2.6), 2.5rem); color: #2b6be0; }
#seo-industries .seo-indcard h3 { font-size: var(--fs-h3); line-height: 1.15; margin: 0 0 3px; }
#seo-industries .seo-indcard p { font-size: var(--fs-p); line-height: 1.3; color: #3b4d73; }
#seo-industries .seo-indcard:hover, #seo-industries .seo-indcard:focus-visible { box-shadow: 0 0 34px rgba(255,107,0,.55), 0 14px 28px rgba(0,0,0,.4); }

/* bottom bar */
#seo-industries .seo-banner { flex: none; width: 100%; background: rgba(4, 8, 24, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#seo-industries .seo-banner > i { font-size: clamp(1.8rem, 3vw, 3rem); }
#seo-industries .seo-banner b { color: #ff6b00; }

@media (max-width: 1180px) {
  #seo-industries { padding-top: 56px; padding-bottom: 40px; }
  #seo-industries .seo-ind__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  #seo-industries .seo-ind__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  #seo-industries .seo-indcard { min-height: 0; }
  #seo-industries .seo-indcard__img { flex: none; height: clamp(110px, 24vw, 180px); }
}
@media (max-width: 560px) { #seo-industries .seo-ind__cards { grid-template-columns: 1fr; } }

/* =========================================================
   S10 — KNOW WHAT'S WORKING. SEE WHAT'S GROWING.  (#seo-reporting)
   Background: /image/seo-bg-reporting.webp   (one screen tall)
========================================================= */
#seo-reporting { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(10px, 1.8vh, 20px); }
@media (min-width: 1181px) {
  #seo-reporting { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-reporting { min-height: calc(100svh - 88px); } }
}
#seo-reporting .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-reporting.webp') center / cover no-repeat; }
#seo-reporting .seo-sec__shade { background: linear-gradient(90deg, rgba(5,10,32,.82) 0, rgba(5,10,32,.45) 32%, rgba(5,10,32,.15) 60%, rgba(5,10,32,.3) 100%), linear-gradient(0deg, rgba(5,10,32,.55) 0, rgba(5,10,32,0) 30%); }
#seo-reporting > .wrap.seo-rep__wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(8px, 1.5vh, 16px); }
#seo-reporting .seo-rep__top { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.9fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
#seo-reporting .seo-lt__kicker { margin: 0 0 8px; color: #cfd8ee; }
#seo-reporting .seo-lt__lead { max-width: 440px; }
#seo-reporting .seo-lt__copy { max-width: 440px; }

/* the dashboard: bigger, slightly turned like a real monitor */
#seo-reporting .seo-mon-wrap { perspective: 1800px; min-width: 0; }
#seo-reporting .seo-mon { transform: rotateY(-7deg) rotateX(2deg); transform-origin: right center; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; padding: clamp(10px, 1.6vh, 18px); border-radius: 16px; font-size: clamp(.8rem, calc(var(--sk) * .95), 1rem); }
#seo-reporting .seo-mon:hover { transform: rotateY(-2deg) rotateX(0); }
#seo-reporting .seo-mon__bar { font-size: 1em; margin-bottom: 10px; }
#seo-reporting .seo-mon__bar span { font-size: .78em; }
#seo-reporting .seo-mon__kpis { gap: clamp(8px, .9vw, 14px); margin-bottom: clamp(8px, 1.2vh, 14px); }
#seo-reporting .seo-mon__kpis > div { padding: clamp(8px, 1.2vh, 12px) 12px; }
#seo-reporting .seo-mon__kpis i { font-size: clamp(1.2rem, calc(var(--sk) * 1.8), 1.8rem); }
#seo-reporting .seo-mon__kpis small { font-size: .74em; }
#seo-reporting .seo-mon__kpis b { font-size: clamp(1.1rem, calc(var(--sk) * 1.9), 1.8rem); }
#seo-reporting .seo-mon__kpis em, #seo-reporting .seo-mon__panel em { font-size: .72em; }
#seo-reporting .seo-mon__grid { gap: clamp(8px, .9vw, 14px); }
#seo-reporting .seo-mon__panel { padding: clamp(8px, 1.2vh, 12px) 12px; }
#seo-reporting .seo-mon__panel > small { font-size: .78em; margin-bottom: 8px; }
#seo-reporting .seo-mon__legend { font-size: .85em; }
#seo-reporting .seo-mon__two .seo-spark { max-height: clamp(70px, 14vh, 140px); }
#seo-reporting .seo-mon__rank { font-size: .78em; gap: 9px; }
#seo-reporting .seo-mon__rank li { grid-template-columns: 52px 1fr 34px; }
#seo-reporting .seo-mon__rank span { height: 8px; }
#seo-reporting .seo-mon__panel .seo-bars { --bh: clamp(48px, 9vh, 86px); }
#seo-reporting .seo-mon__panel .seo-spark { max-height: clamp(48px, 9vh, 80px); }
#seo-reporting .seo-mon__panel--donut { --ds: clamp(64px, 11vh, 100px); }
#seo-reporting .seo-mon__donutrow { display: flex; align-items: center; gap: 12px; }
#seo-reporting .seo-mon__dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .78em; color: #d6e2fb; }
#seo-reporting .seo-mon__dl i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* six KPI tiles (icon | divider | label + bars) */
#seo-reporting .seo-rep__kpis { gap: clamp(6px, .8vw, 12px); }
#seo-reporting .seo-rep__kpi { --c: #2f8bff; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; min-height: clamp(78px, 12vh, 112px); padding: clamp(8px, 1.2vh, 12px) 12px; border-width: 1.5px; border-radius: 14px; background: linear-gradient(160deg, rgba(14,34,96,.82), rgba(5,12,38,.92)); box-shadow: 0 0 20px rgba(47,139,255,.4); box-shadow: 0 0 22px color-mix(in srgb, var(--k) 40%, transparent), inset 0 0 16px color-mix(in srgb, var(--k) 10%, transparent); border-color: color-mix(in srgb, var(--k) 70%, #2f8bff); }
#seo-reporting .seo-rep__kpi > i { grid-row: 1 / span 2; font-size: clamp(1.6rem, calc(var(--sk) * 2.6), 2.5rem); }
#seo-reporting .seo-rep__kpi > span { align-self: end; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); font-size: var(--fs-p); font-weight: 700; line-height: 1.15; }
#seo-reporting .seo-rep__kpi .seo-bars { --bh: clamp(22px, 4vh, 38px); grid-column: 2; align-self: end; margin-left: 12px; }

/* bottom bar */
#seo-reporting .seo-banner { flex: none; width: 100%; background: rgba(4, 8, 24, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: clamp(1.05rem, calc(var(--sk) * 1.9), 1.9rem); }
#seo-reporting .seo-banner > i { font-size: clamp(1.8rem, 3vw, 3rem); }

@media (max-width: 1180px) {
  #seo-reporting { padding-top: 56px; padding-bottom: 40px; }
  #seo-reporting .seo-rep__top { grid-template-columns: 1fr; }
  #seo-reporting .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,32,.78), rgba(5,10,32,.5) 55%, rgba(5,10,32,.8)); }
  #seo-reporting .seo-mon { transform: none; }
  #seo-reporting .seo-rep__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) { #seo-reporting .seo-rep__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-reporting .seo-mon__donutrow { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { #seo-reporting .seo-mon { transition: none; } }

/* =========================================================
   S11 — QUESTIONS ABOUT SEARCH? LET'S MAKE IT CLEAR.  (#seo-faq)
   Background: /image/seo-bg-faq.webp  (laptop, "?" and search logos are in the picture)
   One screen tall; the 8 questions fill the height
========================================================= */
#seo-faq { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(12px, 2vh, 24px); }
@media (min-width: 1181px) {
  #seo-faq { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-faq { min-height: calc(100svh - 88px); } }
}
#seo-faq .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-faq.webp') center / cover no-repeat; }
#seo-faq .seo-sec__shade { background: linear-gradient(90deg, rgba(5,10,32,.55) 0, rgba(5,10,32,.2) 40%, rgba(5,10,32,0) 60%); }
#seo-faq > .wrap.seo-sec__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 56px); align-items: stretch; }
#seo-faq .seo-faq__left { justify-content: flex-start; }
#seo-faq .seo-faq__left .seo-lt { padding-top: clamp(8px, 2vh, 24px); }
#seo-faq .seo-faq__left .seo-lt__copy { max-width: 440px; font-size: clamp(.95rem, calc(var(--sk) * 1.3), 1.25rem); line-height: 1.45; }
#seo-faq .seo-faq__visual { display: none; }            /* the "?" and logo bubbles are already in the background picture */

/* question list: white glass rows, equal height, fills the screen */
#seo-faq .seo-faq__list { display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.1vh, 12px); }
#seo-faq .seo-faqitem { flex: 0 0 auto; border-radius: 14px; border: 1.5px solid rgba(150,195,255,.95); background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(226,237,255,.92)); box-shadow: 0 0 20px rgba(80,150,255,.45); }
#seo-faq .seo-faqitem:hover { box-shadow: 0 0 30px rgba(255,107,0,.45); transform: translateX(-4px); }
#seo-faq .seo-faqitem__btn { min-height: clamp(52px, 8.6vh, 76px); padding: clamp(6px, 1vh, 10px) clamp(14px, 1.4vw, 22px); gap: clamp(14px, 1.6vw, 24px); }
#seo-faq .seo-faqitem__num { width: clamp(46px, 3.8vw, 62px); height: clamp(34px, 4.8vh, 44px); border-radius: 9px; background: #cfe3ff; color: #1f4fc0; font-size: clamp(.95rem, calc(var(--sk) * 1.3), 1.3rem); }
#seo-faq .seo-faqitem.is-open .seo-faqitem__num { background: #cfe3ff; color: #1f4fc0; }
#seo-faq .seo-faqitem__q { font-size: clamp(.95rem, calc(var(--sk) * 1.25), 1.2rem); font-weight: 700; color: #0b1a5a; line-height: 1.25; }
#seo-faq .seo-faqitem__btn > i { font-size: 1.1rem; color: #1f5fe0; }
#seo-faq .seo-faqitem__a { padding: 0 clamp(14px, 1.4vw, 22px) clamp(10px, 1.6vh, 16px) calc(clamp(46px, 3.8vw, 62px) + clamp(14px, 1.4vw, 22px) + clamp(14px, 1.6vw, 24px)); }
#seo-faq .seo-faqitem__a p { font-size: clamp(.82rem, calc(var(--sk) * 1), .98rem); line-height: 1.5; color: #34456e; }

@media (max-width: 1180px) {
  #seo-faq { padding-top: 56px; padding-bottom: 40px; }
  #seo-faq > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-faq .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,32,.6), rgba(5,10,32,.3) 55%, rgba(5,10,32,.6)); }
  #seo-faq .seo-faqitem__a { padding-left: clamp(14px, 4vw, 22px); }
}
@media (hover: none) { #seo-faq .seo-faqitem:hover { transform: none; } }

/* =========================================================
   S12 — READY TO BE DISCOVERED?  (#seo-cta)
   Background: /image/seo-bg-industries.webp (blue city bokeh)   One screen tall
========================================================= */
#seo-cta { box-sizing: border-box; justify-content: flex-start; padding-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(12px, 2vh, 24px); }
@media (min-width: 1181px) {
  #seo-cta { min-height: calc(100vh - 88px); }
  @supports (height: 100svh) { #seo-cta { min-height: calc(100svh - 88px); } }
}
#seo-cta .seo-sec__bg { animation: none; background: #060914 url('/image/seo-bg-industries.webp') center / cover no-repeat; }
#seo-cta .seo-sec__shade { background: linear-gradient(90deg, rgba(5,10,32,.88) 0, rgba(5,10,32,.55) 36%, rgba(5,10,32,.12) 66%, rgba(5,10,32,.25) 100%), linear-gradient(0deg, rgba(5,10,32,.55) 0, rgba(5,10,32,0) 30%); }
#seo-cta > .wrap.seo-sec__grid { flex: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
#seo-cta .seo-lt__copy { max-width: 520px; font-size: var(--fs-copy); }

/* buttons */
#seo-cta .seo-cta__btns { gap: 12px; margin-top: 10px; align-items: flex-start; }
#seo-cta .seo-cta__btns .seo-lt__btn { width: min(100%, 520px); margin-top: 0; padding: calc(var(--sk) * 1.05) 1.2rem; font-size: var(--fs-h3); font-weight: 700; justify-content: center; border-radius: 14px; }
#seo-cta .seo-cta__ghost { width: min(100%, 340px); display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--sk) * .95) 1.2rem; font-size: var(--fs-h3); font-weight: 600; border-radius: 999px; border-color: #1fb6ff; }
#seo-cta .seo-cta__ghost i { font-size: 1.5rem; margin-right: 10px; color: #1fb6ff; }

/* brand block */
#seo-cta .seo-cta__brand { margin-top: clamp(14px, 3vh, 30px); gap: 6px; }
#seo-cta .seo-cta__brand b { font-size: clamp(1.8rem, calc(var(--sk) * 3.4), 3.1rem); font-weight: 800; letter-spacing: .01em; line-height: 1; }
#seo-cta .seo-cta__brand span { font-family: 'IBM Plex Mono', monospace; font-size: clamp(.62rem, calc(var(--sk) * .8), .8rem); letter-spacing: .34em; }

/* right side: five floating channel tiles joined by glowing lines to a big tilted laptop */
#seo-cta .seo-cta__right { gap: clamp(18px, 4vh, 44px); align-items: flex-end; }
#seo-cta .seo-cta__tiles { width: 100%; gap: clamp(8px, 1vw, 16px); padding: 0; align-items: start; }
#seo-cta .seo-cta__tiles span { position: relative; animation: none; padding: clamp(10px, 1.6vh, 18px) 8px clamp(8px, 1.2vh, 14px); border-radius: 14px; border: 1.5px solid rgba(110,170,255,.95);
  background: linear-gradient(165deg, rgba(20,44,120,.8), rgba(8,18,56,.88)); box-shadow: 0 0 22px rgba(80,150,255,.55), inset 0 0 14px rgba(80,150,255,.14); transition: translate .35s ease, box-shadow .35s ease; }
#seo-cta .seo-cta__tiles span:nth-child(1) { translate: 0 26px; } #seo-cta .seo-cta__tiles span:nth-child(2) { translate: 0 4px; } #seo-cta .seo-cta__tiles span:nth-child(3) { translate: 0 -8px; }
#seo-cta .seo-cta__tiles span:nth-child(4) { translate: 0 8px; }  #seo-cta .seo-cta__tiles span:nth-child(5) { translate: 0 30px; }
#seo-cta .seo-cta__tiles span:hover { box-shadow: 0 0 34px rgba(255,107,0,.6); }
#seo-cta .seo-cta__tiles svg { width: clamp(28px, calc(var(--sk) * 3.2), 46px); height: auto; }
#seo-cta .seo-cta__tiles small { font-size: clamp(.64rem, calc(var(--sk) * .85), .86rem); font-weight: 600; line-height: 1.15; }
#seo-cta .seo-cta__tiles span::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: clamp(18px, 4.5vh, 46px); transform: translateX(-50%); background: linear-gradient(180deg, #6fb5ff, rgba(111,181,255,0)); box-shadow: 0 0 8px #6fb5ff; }

#seo-cta .seo-cta__laptop { width: 100%; max-width: min(100%, 760px); margin: 0 0 0 auto; perspective: 1800px; }
#seo-cta .seo-cta__screen { transform: rotateY(-9deg) rotateX(3deg); transform-origin: right center; transition: transform .6s cubic-bezier(.2,.8,.2,1); padding: clamp(12px, 2vh, 22px); border-radius: 16px 16px 5px 5px; }
#seo-cta .seo-cta__laptop:hover .seo-cta__screen { transform: rotateY(-3deg) rotateX(0); }
#seo-cta .seo-cta__search { max-width: 66%; padding: 7px 7px 7px 18px; font-size: clamp(.8rem, calc(var(--sk) * 1.05), 1.05rem); font-weight: 600; color: #3b4a6b; }
#seo-cta .seo-cta__search i { width: clamp(30px, 3vw, 40px); height: clamp(30px, 3vw, 40px); font-size: 1rem; }
#seo-cta .seo-cta__body { grid-template-columns: 1fr clamp(130px, 30%, 190px); gap: 14px; }
#seo-cta .seo-cta__chart { --bh: clamp(90px, 17vh, 160px); }
#seo-cta .seo-cta__chips { gap: 8px; }
#seo-cta .seo-cta__chips li { padding: 8px 12px; font-size: clamp(.72rem, calc(var(--sk) * .9), .92rem); font-weight: 600; }
#seo-cta .seo-cta__base { height: 12px; }

@media (max-width: 1180px) {
  #seo-cta { padding-top: 56px; padding-bottom: 40px; }
  #seo-cta > .wrap.seo-sec__grid { grid-template-columns: 1fr; }
  #seo-cta .seo-sec__shade { background: linear-gradient(180deg, rgba(5,10,32,.82), rgba(5,10,32,.5) 55%, rgba(5,10,32,.8)); }
  #seo-cta .seo-cta__right { align-items: stretch; }
  #seo-cta .seo-cta__screen { transform: none; }
  #seo-cta .seo-cta__tiles span:nth-child(n) { translate: none; }
  #seo-cta .seo-cta__tiles span::after { display: none; }
}
@media (max-width: 760px) { #seo-cta .seo-cta__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } #seo-cta .seo-cta__search { max-width: 100%; } }
@media (max-width: 560px) { #seo-cta .seo-cta__btns .seo-lt__btn, #seo-cta .seo-cta__ghost { width: 100%; } }
@media (prefers-reduced-motion: reduce) { #seo-cta .seo-cta__screen, #seo-cta .seo-cta__tiles span { transition: none; } }





/* S5 banner: "Not Just an SEO Agency. Your Marketing Headquarters." on one line */
#seo-advantage .seo-banner em,
#seo-advantage .seo-banner b { display: inline; }
#seo-advantage .seo-banner em { margin-right: .35em; }