/* SEO un GEO (tpl-seo.php). Same grid, type scale and section rhythm as the other service pages. */
:is(.sg-hero__glow, .sg-eng-sec__glow, .sg-time__glow, .sg-pr__glow){ --gc:transparent; --blur:200px; background:none !important; filter:none !important; }
:is(.sg-hero__glow, .sg-eng-sec__glow, .sg-time__glow, .sg-pr__glow)::before{
  content:""; position:absolute; inset:calc(var(--blur) * -2); border-radius:50%; pointer-events:none; opacity:var(--glow-k, 0.72);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--gc) 97%, transparent) calc(100% - var(--blur) * 4), color-mix(in srgb, var(--gc) 84%, transparent) calc(100% - var(--blur) * 3), color-mix(in srgb, var(--gc) 69%, transparent) calc(100% - var(--blur) * 2.5), color-mix(in srgb, var(--gc) 50%, transparent) calc(100% - var(--blur) * 2), color-mix(in srgb, var(--gc) 31%, transparent) calc(100% - var(--blur) * 1.5), color-mix(in srgb, var(--gc) 16%, transparent) calc(100% - var(--blur)), color-mix(in srgb, var(--gc) 6%, transparent) calc(100% - var(--blur) * 0.5), transparent);
}

.sg-sec{ padding-bottom:calc(var(--sec-y) + clamp(0px, 1.25vw, 24px)); overflow:hidden; }
.sg-sec .sec-head{ margin-bottom:clamp(32px, 5.4vw, 104px); }
.sg-sec .sec-head__main{ align-items:flex-start; }
.sg-sec .sec-head__label{ padding-top:24px; }
.sg-sec .sec-head .h2{ --hw:12.67em; }
.sg-sec .sec-head__aside{ width:360px; margin-top:14px; font-size:16px; line-height:1.5; }
.sg-def{ color:var(--ink) !important; font-size:17px !important; }
.sg .faq__intro .h2{ --hw:7em; }
.sg-serp__fav{ display:inline-block; flex:none; width:calc(14 * var(--u, 1px)); height:calc(14 * var(--u, 1px)); border-radius:50%; background:var(--signal); box-shadow:inset 0 0 0 calc(3 * var(--u, 1px)) #ffd9c4; vertical-align:middle; }

/* ---------- Hero ---------- */
.sg-hero{ position:relative; overflow:hidden; padding:clamp(110px, 9.27vw, 178px) 0 clamp(32px, 1.98vw, 38px); }
.sg-hero__decor{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.sg-hero__glow{ position:absolute; border-radius:50%; --blur:260px; }
.sg-hero__glow--signal{ right:-12%; top:-30%; width:52%; height:81%; --gc:rgba(233, 80, 6, 0.3); animation:sg-breathe 9s var(--ease-in-out) infinite alternate; }
.sg-hero__glow--slate{ left:-19.8%; top:46.8%; width:57%; height:81%; --gc:rgba(52, 81, 99, 0.55); animation:sg-breathe 11s var(--ease-in-out) infinite alternate-reverse; }
@keyframes sg-breathe{ from{ transform:scale(0.92); opacity:0.75; } to{ transform:scale(1.08); opacity:1; } }
.sg-hero__grid{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:min(100% - var(--gutter) * 2, var(--container)); padding:0; display:flex; justify-content:space-between; }
.sg-hero__grid i{ width:1px; height:100%; background:rgba(187, 205, 218, 0.07); }
.sg-hero__inner{ position:relative; z-index:1; }
.sg-hero__main{ display:grid; grid-template-columns:minmax(0, 770fr) minmax(0, 730fr); align-items:start; }

.sg-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; font-weight:500; line-height:20px; }
.sg-crumbs li{ color:var(--white); }
.sg-crumbs li + li::before{ content:"/"; margin-right:10px; color:rgba(187, 205, 218, 0.35); }
.sg-crumbs a{ color:rgba(187, 205, 218, 0.7); transition:color var(--dur-fast) var(--ease-out); }
.sg-crumbs a:hover{ color:var(--white); }

.sg-hero__h1{ margin:30px 0 0 -0.083em; font-size:clamp(44px, 5vw, 96px); font-weight:600; line-height:1; letter-spacing:-0.04em; color:var(--white); }
.sg-hero__line{ display:block; overflow:hidden; padding:0.1em 0 0.26em; margin:-0.1em 0 -0.26em; }
.sg-hero__line > span{ display:inline-block; }
.sg-hero__intro{ max-width:580px; margin-top:clamp(24px, 2.3vw, 44px); font-size:clamp(16px, 0.3vw + 13.2px, 19px); line-height:1.55; color:rgba(187, 205, 218, 0.85); }
.sg-hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px, 2.7vw, 52px); }

.sg-hero__visual-wrap{ margin-top:calc(-1 * clamp(0px, 1.46vw, 28px)); container-type:inline-size; }
.sg-hero__visual{ position:relative; width:calc(100% + 10px); aspect-ratio:740 / 642; }
.sg-serp, .sg-chart, .sg-ai{ --u:calc((100cqw + 10px) / 740); }

.sg-serp{
  position:absolute; left:0; top:4%; width:72.97%; padding:calc(22 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u));
  border-radius:calc(22 * var(--u)); background:var(--white); color:var(--ink);
  box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(5, 10, 13, 0.45);
}
.sg-serp__bar{ display:flex; align-items:center; gap:calc(12 * var(--u)); height:calc(48 * var(--u)); padding:0 calc(18 * var(--u)); border-radius:calc(24 * var(--u)); background:var(--paper); }
.sg-serp__icon{ display:grid; color:var(--muted); }
.sg-serp__icon svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.sg-serp__q{ font-size:calc(16 * var(--u)); font-weight:500; line-height:1; white-space:nowrap; overflow:hidden; }
.sg-serp__caret{ width:calc(2 * var(--u)); height:calc(20 * var(--u)); margin-left:calc(-10 * var(--u)); background:var(--signal); animation:sg-caret 1s steps(1) infinite; }
@keyframes sg-caret{ 50%{ opacity:0; } }
.sg-serp__tabs{ display:flex; gap:calc(18 * var(--u)); padding:calc(16 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)); border-bottom:1px solid rgba(6, 10, 13, 0.08); }
.sg-serp__tabs b, .sg-serp__tabs i{ height:calc(8 * var(--u)); border-radius:calc(4 * var(--u)); background:var(--paper); width:calc(44 * var(--u)); }
.sg-serp__tabs b{ background:var(--ink); width:calc(34 * var(--u)); }
.sg-serp__list{ --row:calc(80 * var(--u)); position:relative; height:calc(var(--row) * 5); margin-top:calc(8 * var(--u)); }
.sg-serp__row{
  position:absolute; left:0; right:0; top:0; height:calc(var(--row) - 8 * var(--u));
  display:flex; align-items:flex-start; gap:calc(12 * var(--u)); padding:calc(12 * var(--u)) calc(12 * var(--u));
  border-radius:calc(14 * var(--u)); border:1px solid transparent;
  transform:translateY(calc(var(--i) * var(--row))); transition:transform 1s var(--ease-in-out), background-color 400ms, border-color 400ms;
}
.sg-serp__n{
  display:grid; place-items:center; flex:none; min-width:calc(26 * var(--u)); height:calc(26 * var(--u)); padding:0 calc(6 * var(--u)); border-radius:calc(13 * var(--u));
  background:var(--paper); font-size:calc(12 * var(--u)); font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums;
}
.sg-serp__body{ display:flex; flex-direction:column; gap:calc(7 * var(--u)); flex:1; min-width:0; padding-top:calc(3 * var(--u)); }
.sg-serp__sk{ display:block; }
.sg-serp__sk i{ display:block; height:calc(7 * var(--u)); border-radius:calc(4 * var(--u)); background:#e3e8ec; }
.sg-serp__sk--head i{ height:calc(6 * var(--u)); background:#eef1f4; }
.sg-serp__sk--title i{ height:calc(11 * var(--u)); background:#c9d4dd; }
.sg-serp__row.is-you{ z-index:2; background:#fff6f1; border-color:rgba(233, 80, 6, 0.35); box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(233, 80, 6, 0.14); }
.sg-serp__row.is-you .sg-serp__n{ background:var(--signal); color:var(--white); font-weight:600; }
.sg-serp__url{ display:flex; align-items:center; gap:calc(8 * var(--u)); font-size:calc(12 * var(--u)); line-height:1; color:var(--muted); }
.sg-serp__title{ font-size:calc(16 * var(--u)); font-weight:600; line-height:1.25; letter-spacing:-0.01em; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-serp__row.is-you .sg-serp__sk i{ background:#f4dfd3; }

.sg-chart{
  position:absolute; left:66.2%; top:0; width:calc(250 * var(--u)); padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  border-radius:calc(22 * var(--u)); background:var(--white); color:var(--ink);
  box-shadow:0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(5, 10, 13, 0.4);
}
.sg-chart__label{ font-size:calc(13 * var(--u)); font-weight:500; line-height:calc(17 * var(--u)); color:var(--muted); }
.sg-chart__value{ margin-top:calc(4 * var(--u)); font-size:calc(36 * var(--u)); font-weight:600; letter-spacing:-0.03em; line-height:1.1; color:var(--signal-text); font-variant-numeric:tabular-nums; }
.sg-chart__svg{ display:block; width:100%; height:calc(56 * var(--u)); margin-top:calc(8 * var(--u)); overflow:visible; }
.sg-chart__line{ fill:none; stroke:var(--signal); stroke-width:2.5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.sg-chart__area{ fill:rgba(233, 80, 6, 0.1); stroke:none; }
.sg-chart__note{ margin-top:calc(8 * var(--u)); font-size:calc(12 * var(--u)); line-height:calc(16 * var(--u)); color:var(--muted); }

.sg-ai{
  position:absolute; left:37.8%; top:62.5%; width:calc(460 * var(--u)); padding:calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  border-radius:calc(22 * var(--u)); background:rgba(14, 21, 27, 0.96); border:1px solid rgba(255, 255, 255, 0.1);
  box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(5, 10, 13, 0.5); color:var(--white); z-index:3;
}
.sg-ai__head{ display:flex; align-items:center; gap:calc(10 * var(--u)); font-size:calc(14 * var(--u)); font-weight:600; line-height:calc(18 * var(--u)); }
.sg-ai__spark{ display:grid; place-items:center; width:calc(28 * var(--u)); height:calc(28 * var(--u)); border-radius:50%; background:rgba(233, 80, 6, 0.16); color:var(--signal); }
.sg-ai__spark svg{ width:calc(15 * var(--u)); height:calc(15 * var(--u)); }
.sg-ai__q{ margin:calc(14 * var(--u)) 0 0 auto; width:fit-content; max-width:88%; padding:calc(9 * var(--u)) calc(14 * var(--u)); border-radius:calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); background:rgba(255, 255, 255, 0.08); font-size:calc(14 * var(--u)); line-height:calc(19 * var(--u)); color:var(--white); }
.sg-ai__a{ margin-top:calc(12 * var(--u)); font-size:calc(14.5 * var(--u)); line-height:calc(21 * var(--u)); color:rgba(187, 205, 218, 0.92); }
.sg-ai__w{ display:inline; }
.sg-ai__w.is-dom{ color:var(--white); font-weight:600; background:linear-gradient(transparent 62%, rgba(233, 80, 6, 0.55) 62%); }
.sg-ai__src{ display:flex; flex-wrap:wrap; gap:calc(6 * var(--u)); margin-top:calc(14 * var(--u)); padding-top:calc(12 * var(--u)); border-top:1px solid rgba(255, 255, 255, 0.08); }
.sg-ai__chip{ display:inline-flex; align-items:center; gap:calc(6 * var(--u)); padding:calc(5 * var(--u)) calc(10 * var(--u)); border-radius:var(--r-pill); background:rgba(255, 255, 255, 0.06); font-family:var(--mono); font-size:calc(11 * var(--u)); line-height:calc(14 * var(--u)); color:rgba(187, 205, 218, 0.75); }
.sg-ai__chip.is-you{ background:rgba(233, 80, 6, 0.16); color:var(--white); }

.sg-hero__bar{ display:grid; grid-template-columns:repeat(4, 1fr); margin:clamp(40px, 7vw, 132px) 0 0; padding-top:35px; border-top:1px solid rgba(255, 255, 255, 0.1); }
.sg-hero__bar dt{ font-size:14px; font-weight:500; line-height:18px; color:rgba(187, 205, 218, 0.6); }
.sg-hero__bar dd{ max-width:300px; margin-top:8px; font-size:18px; font-weight:500; line-height:1.4; color:var(--white); }

/* ---------- What is SEO: four layers ---------- */
.sg-layers{ position:relative; padding-top:56px; }
.sg-layers__track{ position:absolute; left:32px; right:170px; top:19px; height:2px; background:rgba(6, 10, 13, 0.1); border-radius:2px; overflow:hidden; }
.sg-layers__track i{ position:absolute; inset:0; background:var(--signal); transform-origin:left; transform:scaleX(var(--p, 1)); }
.sg-layers__end{
  position:absolute; right:0; top:0; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 10px;
  border-radius:var(--r-pill); background:var(--ink); color:var(--white); font-size:15px; font-weight:600; white-space:nowrap;
  transition:background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.sg-layers__end svg{ width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(255, 255, 255, 0.12); }
.sg-layers.is-done .sg-layers__end{ background:var(--signal-btn); box-shadow:0 0 0 6px rgba(233, 80, 6, 0.14); }
.sg-layers__list{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
.sg-layer{ position:relative; display:flex; flex-direction:column; gap:16px; padding:32px 28px; border-radius:28px; overflow:visible; transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.sg-layer__dot{ position:absolute; left:26px; top:-44px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid rgba(6, 10, 13, 0.2); transition:background-color 300ms, border-color 300ms, box-shadow 300ms; }
.sg-layer.is-lit .sg-layer__dot{ background:var(--signal); border-color:var(--signal); box-shadow:0 0 0 5px rgba(233, 80, 6, 0.16); }
.sg-layer__top{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.sg-layer__icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(233, 80, 6, 0.1); color:var(--signal); }
.sg-layer__icon svg{ width:24px; height:24px; }
.sg-layer__q{ font-size:13px; line-height:18px; color:var(--signal-text); }
.sg-layer__title{ font-size:clamp(24px, 0.4vw + 20px, 28px); font-weight:600; line-height:1.2; letter-spacing:-0.02em; }
.sg-layer__text{ font-size:16px; line-height:1.5; color:var(--muted); }
.sg-layer__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
.sg-layer__chips li{ padding:6px 12px; border-radius:var(--r-pill); background:var(--paper); font-size:13px; font-weight:500; line-height:17px; }
@media (hover: hover) and (pointer: fine){
  .sg-layer:hover{ transform:var(--lift); box-shadow:0 30px 60px rgba(6, 10, 13, 0.08); }
}

/* ---------- Google vs AI ---------- */
.sg-eng-sec__glow{ position:absolute; border-radius:50%; --blur:260px; pointer-events:none; z-index:0; }
.sg-eng-sec__glow--a{ right:-14%; top:-22%; width:46%; height:56%; --gc:rgba(233, 80, 6, 0.2); }
.sg-eng-sec__glow--b{ left:-16%; top:50%; width:52%; height:56%; --gc:rgba(52, 81, 99, 0.5); }
.sg-eng-sec .h2{ color:var(--white); }
.sg-eng{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(var(--span, 5), auto); column-gap:24px; }
.sg-eng__col{ display:grid; grid-row:span var(--span, 5); grid-template-rows:subgrid; padding:36px 36px 14px; border-radius:28px; background:rgba(255, 255, 255, 0.04); border:1px solid rgba(255, 255, 255, 0.1); }
.sg-eng__col--ai{ background:linear-gradient(160deg, rgba(233, 80, 6, 0.12), rgba(255, 255, 255, 0.03) 55%); border-color:rgba(233, 80, 6, 0.28); }
.sg-eng__head{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"name vis" "num vis"; align-items:end; column-gap:24px; padding-bottom:28px; }
.sg-eng__name{ grid-area:name; font-size:15px; font-weight:500; color:var(--mist); }
.sg-eng__num{ grid-area:num; display:flex; align-items:baseline; gap:14px; margin-top:10px; }
.sg-eng__num strong{ font-size:clamp(64px, 5vw, 104px); font-weight:600; letter-spacing:-0.05em; line-height:0.95; color:var(--white); font-variant-numeric:tabular-nums; }
.sg-eng__col--ai .sg-eng__num strong{ color:var(--signal); }
.sg-eng__num span{ max-width:180px; font-size:16px; line-height:1.35; color:rgba(187, 205, 218, 0.85); }
.sg-eng__vis{ grid-area:vis; width:clamp(150px, 13vw, 220px); }
.sg-eng__vis--links{ display:grid; gap:7px; }
.sg-eng__vis--links i{ display:block; height:7px; width:var(--w); border-radius:4px; background:rgba(255, 255, 255, 0.14); transform-origin:left; }
.sg-eng__vis--links i.is-you{ background:var(--signal); box-shadow:0 0 14px rgba(233, 80, 6, 0.6); }
.sg-eng__bubble{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:16px 16px 16px 4px; background:rgba(255, 255, 255, 0.07); color:var(--signal); }
.sg-eng__bubble svg{ width:18px; height:18px; flex:none; }
.sg-eng__bubble i{ display:block; height:7px; border-radius:4px; background:rgba(255, 255, 255, 0.18); flex:1; }
.sg-eng__bubble i + i{ flex:0.6; }
.sg-eng__pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sg-eng__pills b{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--r-pill); background:rgba(255, 255, 255, 0.08); font-family:var(--mono); font-size:11px; font-weight:400; color:var(--white); }
.sg-eng__pills b i{ display:block; width:44px; height:6px; border-radius:3px; background:rgba(255, 255, 255, 0.2); }
.sg-eng__pills b.is-you{ background:rgba(233, 80, 6, 0.2); --u:1px; }
.sg-eng__rows{ display:contents; }
.sg-eng__row{ display:grid; gap:6px; align-content:start; padding:20px 0 22px; border-top:1px solid rgba(255, 255, 255, 0.1); }
.sg-eng__row dt{ font-size:12px; line-height:16px; color:rgba(187, 205, 218, 0.65); }
.sg-eng__row dd{ font-size:17px; line-height:1.45; color:var(--white); }

/* ---------- Deliverables ---------- */
.sg-get__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.sg-card{ display:flex; flex-direction:column; gap:14px; min-height:300px; padding:32px; border-radius:28px; transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow); }
.sg-card__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.sg-card__icon{ display:grid; place-items:center; width:52px; height:52px; flex:none; border-radius:50%; background:var(--white); color:var(--signal); box-shadow:0 6px 18px rgba(6, 10, 13, 0.06); }
.sg-card__icon svg{ width:24px; height:24px; }
.sg-card__out{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:var(--r-pill); background:var(--white); font-size:12px; line-height:16px; color:var(--ink); text-align:right; }
.sg-card__out svg{ width:16px; height:16px; flex:none; padding:3px; border-radius:50%; background:var(--signal); color:var(--white); }
.sg-card__title{ font-size:clamp(24px, 0.4vw + 20px, 28px); font-weight:600; line-height:1.25; letter-spacing:-0.02em; }
.sg-card__text{ font-size:16px; line-height:1.5; color:var(--muted); }
.sg-card.is-pop .sg-card__icon svg{ animation:sg-pop 0.9s var(--ease-out) 1; }
@keyframes sg-pop{ 0%, 30%{ transform:none; } 55%{ transform:scale(1.18) rotate(-6deg); } 100%{ transform:none; } }
@media (hover: hover) and (pointer: fine){
  .sg-card:hover{ transform:var(--lift); background:var(--white); box-shadow:0 30px 60px rgba(6, 10, 13, 0.1); }
  .sg-card:hover .sg-card__icon{ background:var(--signal); color:var(--white); }
}

/* ---------- Timeline ---------- */
.sg-time__glow{ position:absolute; left:46.9%; top:30%; width:62.5%; height:70%; border-radius:50%; --gc:rgba(6, 10, 13, 0.5); --blur:260px; pointer-events:none; z-index:0; }
.sg-time .h2{ color:var(--white); }
.sg-time .sec-head__aside{ color:rgba(255, 255, 255, 0.82); }
.sg-time__body{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 560fr) minmax(0, 870fr); column-gap:4.67%; align-items:start; }
.sg-step{ position:relative; display:flex; gap:20px; padding:26px 0; border-top:1px solid rgba(255, 255, 255, 0.14); }
.sg-step:not(:last-child)::before{ content:""; position:absolute; left:21.5px; top:48px; width:1px; height:calc(100% + 1px); background:rgba(255, 255, 255, 0.14); }
.sg-step__fill{ position:absolute; left:21px; top:48px; width:2px; height:calc(100% + 1px); background:var(--signal); transform-origin:top; transform:scaleY(0); box-shadow:0 0 10px rgba(233, 80, 6, 0.6); }
.sg-step__num{
  position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  background:#22394a; border:1px solid rgba(255, 255, 255, 0.22); font-size:16px; font-weight:600; color:var(--white);
  transition:background-color 400ms var(--ease-out), border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.sg-step.is-lit .sg-step__num{ border-color:var(--signal); background:#3b2a24; box-shadow:0 0 0 5px rgba(233, 80, 6, 0.16); }
.sg-step.is-final.is-lit .sg-step__num{ background:var(--signal); box-shadow:0 0 24px rgba(233, 80, 6, 0.55); }
.sg-step__body{ display:flex; flex-direction:column; gap:6px; max-width:460px; }
.sg-step__when{ font-size:13px; line-height:17px; color:#ffb48f; }
.sg-step__title{ font-size:24px; font-weight:600; line-height:31px; letter-spacing:-0.01em; color:var(--white); }
.sg-step__text{ font-size:16px; line-height:1.5; color:rgba(255, 255, 255, 0.78); }

.sg-curve{ position:sticky; top:120px; margin:0; padding:26px 28px 22px; border-radius:28px; background:rgba(6, 10, 13, 0.35); border:1px solid rgba(255, 255, 255, 0.12); }
.sg-curve figcaption{ font-size:14px; line-height:18px; color:rgba(255, 255, 255, 0.8); }
.sg-curve__svg{ display:block; width:100%; height:auto; margin-top:20px; overflow:visible; }
.sg-curve__grid{ stroke:rgba(255, 255, 255, 0.07); stroke-width:1; }
.sg-curve__base{ stroke:rgba(255, 255, 255, 0.22); stroke-width:1; }
.sg-curve__area{ fill:url(#sg-curve-fill); }
.sg-curve__line{ fill:none; stroke:var(--signal); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sg-curve__tick{ font-family:var(--mono); font-size:11px; fill:rgba(255, 255, 255, 0.5); }
.sg-curve__mark text{ font-family:var(--font); font-size:11px; font-weight:600; fill:var(--white); pointer-events:none; }
.sg-curve__dot{ fill:#22394a; stroke:rgba(255, 255, 255, 0.45); stroke-width:1.5; transition:fill 400ms, stroke 400ms; }
.sg-curve__halo{ fill:rgba(233, 80, 6, 0.3); opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity 400ms; }
.sg-curve__mark.is-lit .sg-curve__dot{ fill:var(--signal); stroke:var(--signal); }
.sg-curve__mark.is-lit .sg-curve__halo{ opacity:1; animation:sg-halo 2.4s var(--ease-out) infinite; }
@keyframes sg-halo{ 0%{ transform:scale(0.8); opacity:0.9; } 70%{ transform:scale(1.6); opacity:0; } 100%{ transform:scale(1.6); opacity:0; } }

.sg-promise{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:clamp(48px, 5vw, 96px); }
.sg-promise__col{ padding:34px 36px 20px; border-radius:28px; background:rgba(6, 10, 13, 0.3); border:1px solid rgba(255, 255, 255, 0.12); }
.sg-promise__col--yes{ background:rgba(255, 255, 255, 0.07); }
.sg-promise__title{ font-size:24px; font-weight:600; line-height:31px; color:var(--white); }
.sg-promise ul{ margin-top:14px; }
.sg-promise li{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid rgba(255, 255, 255, 0.12); font-size:17px; font-weight:500; line-height:1.4; color:var(--white); }
.sg-promise__icon{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--signal); color:var(--white); }
.sg-promise__icon svg{ width:14px; height:14px; }
.sg-promise__col--no li{ color:rgba(255, 255, 255, 0.78); }
.sg-promise__col--no .sg-promise__icon{ background:rgba(255, 255, 255, 0.12); color:rgba(255, 255, 255, 0.85); }

/* ---------- Case ---------- */
.sg-case__body{ display:grid; grid-template-columns:minmax(0, 470fr) minmax(0, 960fr); column-gap:4.67%; align-items:center; }
.sg-case__stats{ display:grid; }
.sg-case__stat{ display:flex; flex-direction:column-reverse; gap:4px; padding:22px 0; border-top:1px solid #d3dce3; }
.sg-case__stat dd{ font-size:clamp(44px, 3.2vw + 8px, 68px); font-weight:600; letter-spacing:-0.04em; line-height:1; font-variant-numeric:tabular-nums; }
.sg-case__stat.is-accent dd{ color:var(--signal-text); }
.sg-case__stat dt{ font-size:16px; line-height:1.4; color:var(--muted); }
.sg-case__text{ margin:20px 0 28px; padding-top:22px; border-top:1px solid #d3dce3; font-size:17px; line-height:1.55; }
.sg-case__media{ position:relative; padding:4% 7% 9% 3%; }
.sg-case__browser{ overflow:hidden; border-radius:18px; border:1px solid #d3dce3; background:var(--white); box-shadow:0 30px 70px rgba(5, 10, 13, 0.18); }
.sg-case__bar{ position:relative; display:flex; align-items:center; gap:6px; height:40px; padding:0 16px; background:var(--paper); }
.sg-case__bar i{ width:10px; height:10px; border-radius:50%; background:rgba(6, 10, 13, 0.15); }
.sg-case__bar span{ position:absolute; left:50%; top:10px; width:min(270px, 50%); height:20px; transform:translateX(-50%); display:grid; place-items:center; border-radius:10px; background:var(--white); font-size:11px; color:var(--muted); }
.sg-case__shot{ aspect-ratio:16 / 10; overflow:hidden; background:#0f3d30; }
.sg-case__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.sg-case__phone{ position:absolute; right:0; bottom:0; width:21%; aspect-ratio:780 / 1688; overflow:hidden; border-radius:22px; border:6px solid var(--ink); background:var(--ink); box-shadow:0 30px 60px rgba(5, 10, 13, 0.35); }
.sg-case__phone img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.sg-case__chip{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 10px; border-radius:var(--r-pill); background:var(--white); box-shadow:0 18px 40px rgba(5, 10, 13, 0.16); font-size:15px; font-weight:600; line-height:20px; }
.sg-case__chip svg{ width:30px; height:30px; padding:6px; border-radius:50%; background:var(--signal); color:var(--white); }

/* ---------- Prices ---------- */
.sg-pr__glow{ position:absolute; right:-12%; top:20%; width:50%; height:70%; border-radius:50%; --gc:rgba(233, 80, 6, 0.18); --blur:260px; pointer-events:none; z-index:0; }
.sg-pr .h2{ color:var(--white); }
.sg-pr__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; align-items:start; }
.sg-pr .price-card__desc{ min-height:72px; }
.sg-pr .price-card__price strong{ font-variant-numeric:tabular-nums; }
.sg-pr__note{ position:relative; z-index:1; max-width:640px; margin-top:32px; font-size:16px; line-height:1.5; color:rgba(187, 205, 218, 0.85); }

/* ---------- Responsive ---------- */
@media (max-width: 1440px){
  .sg-sec .sec-head__aside{ width:320px; }
  .sg-layer{ padding:28px 24px; }
}
@media (max-width: 1180px){
  .sg-hero__main{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:32px; }
  .sg-hero__bar{ grid-template-columns:repeat(2, 1fr); row-gap:28px; }
  .sg-sec .sec-head__main{ flex-direction:column; gap:20px; }
  .sg-sec .sec-head__aside{ margin-top:0; width:auto; max-width:560px; }
  .sg-layers__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sg-layers__track, .sg-layers__end, .sg-layer__dot{ display:none; }
  .sg-layers{ padding-top:0; }
  .sg-get__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sg-time__body{ grid-template-columns:minmax(0, 1fr); row-gap:48px; }
  .sg-curve{ position:relative; top:auto; }
  .sg-case__body{ grid-template-columns:minmax(0, 1fr); row-gap:40px; }
  .sg-case__info{ max-width:640px; }
  .sg-pr__grid{ grid-template-columns:minmax(0, 1fr); max-width:620px; }
}
@media (max-width: 1024px){
  .sg-sec{ padding-bottom:var(--sec-y); }
  .sg-sec .sec-head{ margin-bottom:28px; }
  .sg-sec .sec-head__label{ padding-top:0; }
  .sg-sec .sec-head .h2{ font-size:clamp(30px, 9.2vw, 36px); }

  .sg-hero{ padding:120px 0 40px; }
  .sg-hero__grid{ display:none; }
  .sg-hero__main{ grid-template-columns:minmax(0, 1fr); row-gap:32px; }
  .sg-hero__h1{ margin-top:16px; font-size:clamp(44px, 11.3vw, 72px); }
  .sg-hero__intro{ margin-top:20px; font-size:18px; }
  .sg-hero__ctas{ flex-direction:column; align-items:flex-start; margin-top:28px; }
  .sg-hero__visual-wrap{ margin-top:0; }
  .sg-hero__visual{ width:100%; aspect-ratio:600 / 760; }
  .sg-serp, .sg-chart, .sg-ai{ --u:calc(100cqw / 600); }
  .sg-serp{ top:0; width:100%; }
  .sg-chart{ left:auto; right:calc(-6 * var(--u)); top:auto; bottom:calc(270 * var(--u)); width:calc(240 * var(--u)); }
  .sg-ai{ left:auto; right:0; top:auto; bottom:0; width:calc(540 * var(--u)); }
  .sg-hero__bar{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 20px; margin-top:56px; padding-top:26px; }
  .sg-hero__bar dd{ font-size:16px; }

  .sg-layers__list, .sg-get__grid{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .sg-layer, .sg-card{ min-height:0; padding:28px; border-radius:28px; }
  .sg-card__top{ margin-bottom:10px; }

  .sg-eng{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; row-gap:16px; }
  .sg-eng__col{ grid-row:auto; grid-template-rows:none; padding:28px 24px 8px; }
  .sg-eng__head{ grid-template-columns:1fr; grid-template-areas:"vis" "name" "num"; row-gap:14px; padding-bottom:20px; }
  .sg-eng__vis{ width:min(220px, 70%); }
  .sg-eng__row{ padding:16px 0 18px; }
  .sg-eng__row dd{ font-size:16px; }

  .sg-step{ flex-direction:column; gap:16px; padding:24px 0 26px; }
  .sg-step:not(:last-child)::before, .sg-step__fill{ display:none; }
  .sg-step__title{ font-size:22px; line-height:1.3; }
  .sg-curve{ padding:20px 18px 16px; border-radius:22px; }
  .sg-promise{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .sg-promise__col{ padding:26px 24px 12px; }
  .sg-promise li{ font-size:16px; padding:16px 0; }

  .sg-case__media{ padding:10% 8% 14% 0; }
  .sg-case__phone{ border-width:4px; border-radius:14px; width:24%; }
  .sg-case__chip{ font-size:13px; padding:8px 14px 8px 8px; }
  .sg-case__chip svg{ width:26px; height:26px; }
  .sg-case__bar{ height:24px; padding:0 8px; gap:3px; }
  .sg-case__bar i{ width:6px; height:6px; }
  .sg-case__bar span{ top:5px; height:14px; font-size:8px; }
  .sg-case__browser{ border-radius:10px; }

  .sg-pr .price-card{ padding:30px 24px; }
  .sg-pr .price-card__name{ font-size:28px; }
  .sg-pr .price-card__price strong{ font-size:44px; }
  .sg-pr .price-card__desc{ min-height:0; }
}
.sg-serp.no-tr .sg-serp__row{ transition:none !important; }