/* /seo product page (SEO + GEO). Built on nx.css tokens (.home-page scope). */
.sg-hero { position: relative; overflow: hidden; color: #fff; padding-block: clamp(150px, 18vw, 230px) clamp(80px, 10vw, 130px);
  background: radial-gradient(900px 520px at 85% 10%, rgba(63,94,251,.38), transparent 60%), radial-gradient(700px 480px at 10% 90%, rgba(50,200,189,.22), transparent 60%), var(--nx-ink); }
.sg-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.sg-hero .nx-wrap { position: relative; z-index: 1; }
.sg-badge { display: inline-block; margin-inline-end: 12px; padding: 5px 12px; border-radius: 999px; font: 700 12px var(--nx-head); letter-spacing: .06em; color: var(--nx-ink); background: var(--nx-cyan); vertical-align: middle; }
.sg-kicker { color: rgba(255,255,255,.72); vertical-align: middle; }
.sg-hero__title { color: #fff; font-family: var(--nx-display); font-weight: 800; font-size: clamp(42px, 6.6vw, 104px); line-height: 1.02; letter-spacing: -.035em; margin: 26px 0 0; max-width: 20ch; }
.sg-hero__title em, .sg-close .nx-h2 em { font-style: normal; background: linear-gradient(100deg, var(--nx-cyan), #8ea2ff 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-hero__sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; color: rgba(255,255,255,.78); max-width: 52ch; margin: 26px 0 0; }
.sg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sg-hero__chips { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-hero__chips li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-size: 13px; color: rgba(255,255,255,.82); direction: ltr; }

.sg-why, .sg-inside, .sg-how, .sg-who, .sg-faq { padding-block: clamp(90px, 11vw, 150px); background: var(--nx-paper); }
.sg-inside, .sg-faq { background: var(--nx-mist); }
.sg-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 70px); border-top: 1px solid var(--nx-line); padding-top: 34px; }
.sg-why__item b { display: block; font: 800 clamp(21px, 1.8vw, 26px)/1.2 var(--nx-display); color: var(--nx-ink); letter-spacing: -.02em; }
.sg-why__item p { color: var(--nx-muted); font-size: 17px; line-height: 1.65; margin: 12px 0 0; }

.sg-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 70px); }
.sg-card { padding: clamp(24px, 2.4vw, 34px); border-radius: 22px; background: #fff; border: 1px solid var(--nx-line); transition: transform .4s var(--nx-ease), box-shadow .4s var(--nx-ease), border-color .4s; }
.sg-card:hover { transform: translateY(-6px); border-color: rgba(63,94,251,.35); box-shadow: 0 24px 50px -28px rgba(11,15,28,.35); }
.sg-card small { font: 700 13px var(--nx-head); letter-spacing: .1em; color: var(--nx-cobalt); }
.sg-card b { display: block; margin-top: 14px; font: 800 clamp(21px, 1.7vw, 25px)/1.2 var(--nx-display); color: var(--nx-ink); letter-spacing: -.02em; }
.sg-card p { margin: 12px 0 0; color: var(--nx-muted); font-size: 16px; line-height: 1.65; }

.sg-preview { padding-block: clamp(90px, 11vw, 150px); background: var(--nx-ink); color: #fff; }
.sg-preview .nx-h2 { color: #fff; } .sg-preview .nx-lead { color: rgba(255,255,255,.72); } .sg-preview .nx-kicker { color: rgba(255,255,255,.65); }
.sg-preview__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sg-mock { margin: 0; padding: 18px; border-radius: 24px; background: #fff; color: var(--nx-ink); box-shadow: 0 40px 90px -40px rgba(63,94,251,.6); }
.sg-mock__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--nx-line); }
.sg-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-line); }
.sg-mock__bar span { margin-inline-start: auto; font: 700 13px var(--nx-head); color: var(--nx-muted); }
.sg-mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.sg-mock__kpis div { padding: 12px; border-radius: 14px; background: var(--nx-mist); }
.sg-mock__kpis small { display: block; font-size: 12px; color: var(--nx-muted); }
.sg-mock__kpis span { display: block; height: 12px; width: 70%; margin-top: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--nx-cobalt), var(--nx-cyan)); opacity: .55; }
.sg-mock__kpis div:nth-child(4) span { background: linear-gradient(90deg, var(--nx-violet), var(--nx-cyan)); }
.sg-mock__chart { margin-top: 14px; height: 110px; border-radius: 14px; background: var(--nx-mist); overflow: hidden; }
.sg-mock__chart svg { width: 100%; height: 100%; display: block; }
.sg-mock__rows { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.sg-mock__rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--nx-line); }
.sg-mock__rows b { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.sg-mock__rows .t-up { color: #087f76; background: #e8fbf8; } .sg-mock__rows .t-ctr { color: #3f5efb; background: #eef1ff; } .sg-mock__rows .t-gap { color: #7457db; background: #f1edfc; }
.sg-mock__rows span { height: 8px; border-radius: 6px; background: var(--nx-line); }
.sg-mock__rows em { font-style: normal; font-size: 12px; font-weight: 700; color: #087f76; min-width: 26px; }
.sg-mock figcaption { margin-top: 12px; font-size: 12px; color: var(--nx-muted); text-align: center; }

.sg-steps { list-style: none; padding: 0; margin: clamp(40px, 5vw, 70px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; counter-reset: s; }
.sg-steps li { position: relative; padding: 30px 26px; border-radius: 22px; border: 1px solid var(--nx-line); background: var(--nx-mist); }
.sg-steps small { font: 800 44px/1 var(--nx-display); color: transparent; -webkit-text-stroke: 1.5px var(--nx-cobalt); }
.sg-steps b { display: block; margin-top: 16px; font: 800 24px var(--nx-display); color: var(--nx-ink); }
.sg-steps p { margin: 10px 0 0; color: var(--nx-muted); line-height: 1.65; font-size: 16px; }

.sg-who__wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.sg-who__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--nx-line); }
.sg-who__list li { padding: 22px 0; border-bottom: 1px solid var(--nx-line); font-size: 18px; line-height: 1.6; color: var(--nx-ink); }

.sg-faq__list { margin-top: clamp(36px, 5vw, 60px); max-width: 900px; }
.sg-faq__list details { border-bottom: 1px solid var(--nx-line); padding: 22px 0; }
.sg-faq__list summary { cursor: pointer; list-style: none; font: 700 clamp(18px, 1.5vw, 21px) var(--nx-head); color: var(--nx-ink); display: flex; justify-content: space-between; gap: 16px; }
.sg-faq__list summary::-webkit-details-marker { display: none; }
.sg-faq__list summary::after { content: "+"; color: var(--nx-cobalt); font-size: 26px; line-height: 1; transition: transform .3s var(--nx-ease); }
.sg-faq__list details[open] summary::after { transform: rotate(45deg); }
.sg-faq__list p { margin: 14px 0 0; color: var(--nx-muted); font-size: 17px; line-height: 1.7; max-width: 70ch; }

.sg-close { padding-block: clamp(100px, 12vw, 170px); color: #fff; text-align: center;
  background: radial-gradient(800px 420px at 50% 0%, rgba(63,94,251,.4), transparent 65%), var(--nx-ink); }
.sg-close .nx-h2 { color: #fff; } .sg-close .nx-lead { color: rgba(255,255,255,.72); margin-inline: auto; }
.sg-close .sg-hero__cta { justify-content: center; }

@media (max-width: 960px) {
  .sg-why__grid, .sg-cards, .sg-steps { grid-template-columns: 1fr; }
  .sg-preview__wrap, .sg-who__wrap { grid-template-columns: 1fr; }
  .sg-mock__kpis { grid-template-columns: repeat(2, 1fr); }
}


/* ── Hero: animated AI answer that cites the site ─────────────────────── */
.sg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.sg-ai { position: relative; min-height: 420px; }
.sg-ai__glow { position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(63,94,251,.55), rgba(50,200,189,.25) 45%, transparent 70%); filter: blur(40px); animation: sgPulse 6s ease-in-out infinite; }
@keyframes sgPulse { 50% { transform: scale(1.08); opacity: .75; } }
.sg-ai__card { position: relative; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.sg-ai__ask { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--nx-ink); font-size: 15px; font-weight: 600; }
.sg-ai__spark { flex: none; width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 0deg, var(--nx-cyan), var(--nx-cobalt), var(--nx-violet), var(--nx-cyan)); animation: sgSpin 4s linear infinite; }
@keyframes sgSpin { to { transform: rotate(360deg); } }
.sg-ai__caret { width: 2px; height: 18px; background: var(--nx-cobalt); animation: sgBlink 1s steps(1) infinite; }
@keyframes sgBlink { 50% { opacity: 0; } }
.sg-ai__answer { display: grid; gap: 10px; margin-top: 18px; }
.sg-ai__line { display: block; height: 10px; width: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.12)); transition: width .7s var(--nx-ease); }
.sg-ai[data-step="2"] .sg-ai__line, .sg-ai[data-step="3"] .sg-ai__line, .sg-ai[data-step="4"] .sg-ai__line { width: var(--w); }
.sg-ai__line:nth-child(2) { transition-delay: .15s; } .sg-ai__line:nth-child(3) { transition-delay: .3s; } .sg-ai__line:nth-child(4) { transition-delay: .45s; }
.sg-ai__sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sg-ai__src { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .5s var(--nx-ease), transform .5s var(--nx-ease), box-shadow .5s; }
.sg-ai__src:not(.sg-ai__src--you) { min-width: 74px; }
.sg-ai__src i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.sg-ai__src--you { color: var(--nx-ink); background: var(--nx-cyan); border-color: var(--nx-cyan); }
.sg-ai__src--you i { background: var(--nx-ink); }
.sg-ai[data-step="3"] .sg-ai__src, .sg-ai[data-step="4"] .sg-ai__src { opacity: 1; transform: none; }
.sg-ai__src:nth-child(2) { transition-delay: .12s; } .sg-ai__src:nth-child(3) { transition-delay: .24s; }
.sg-ai[data-step="3"] .sg-ai__src--you, .sg-ai[data-step="4"] .sg-ai__src--you { box-shadow: 0 0 0 6px rgba(50,200,189,.22), 0 10px 30px -8px rgba(50,200,189,.8); }
.sg-ai__rank { position: absolute; inset-inline-start: -6%; bottom: 8px; width: 46%; padding: 12px 14px 8px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--nx-ease), transform .6s var(--nx-ease); }
.sg-ai__rank small { font-size: 12px; font-weight: 700; color: var(--nx-muted); }
.sg-ai__rank svg { display: block; width: 100%; height: 54px; margin-top: 4px; overflow: visible; }
.sg-ai__path { fill: none; stroke: var(--nx-cobalt); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.4s var(--nx-ease) .2s; }
.sg-ai__lead { position: absolute; inset-inline-end: -4%; bottom: 96px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--nx-ink); border: 1px solid rgba(50,200,189,.5); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 20px 40px -20px rgba(50,200,189,.7); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .5s var(--nx-ease) .9s, transform .5s var(--nx-ease) .9s; }
.sg-ai__lead i { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 0 0 rgba(50,200,189,.7); animation: sgPing 1.6s ease-out infinite; }
@keyframes sgPing { to { box-shadow: 0 0 0 12px rgba(50,200,189,0); } }
.sg-ai[data-step="4"] .sg-ai__rank, .sg-ai[data-step="4"] .sg-ai__lead { opacity: 1; transform: none; }
.sg-ai[data-step="4"] .sg-ai__path { stroke-dashoffset: 0; }
.sg-ai[data-step="0"] .sg-ai__line, .sg-ai[data-step="0"] .sg-ai__src, .sg-ai[data-step="0"] .sg-ai__rank, .sg-ai[data-step="0"] .sg-ai__lead { transition-duration: .3s; transition-delay: 0s; }
@media (max-width: 960px) {
  .sg-hero__grid { grid-template-columns: 1fr; }
  .sg-ai { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .sg-ai__card { grid-column: 1 / -1; }
  .sg-ai__rank, .sg-ai__lead { position: relative; inset: auto; width: auto; bottom: auto; }
  .sg-ai__lead { font-size: 13px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-ai__glow, .sg-ai__spark, .sg-ai__caret, .sg-ai__lead i { animation: none; }
  .sg-ai *, .sg-ai { transition: none !important; }
}
@media (min-width: 961px) { .sg-cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 961px) and (max-width: 1180px) { .sg-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }