.sg-page {
  --sg-ink: #07131d;
  --sg-ink-soft: #0b2530;
  --sg-paper: #f4f7f8;
  --sg-white: #fff;
  --sg-muted: #627580;
  --sg-line: rgba(11, 37, 48, .14);
  --sg-dark-line: rgba(166, 197, 211, .18);
  --sg-orange: #ff7a1a;
  --sg-cyan: #55d8dc;
  color: var(--sg-ink-soft);
  background: var(--sg-paper);
  overflow: clip;
}

.sg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sg-tone--dark { color: #e6f0f3; background: var(--sg-ink); }
.sg-tone--light { color: var(--sg-ink-soft); background: var(--sg-paper); }
.sg-section { padding-block: clamp(76px, 8vw, 128px); }
.sg-eyebrow { margin: 0 0 14px; color: var(--sg-orange); font: 760 11px/1.2 var(--jz-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; }
.sg-section h2, .sg-final h2 { margin: 0; max-width: 780px; color: inherit; font-size: clamp(34px, 4.3vw, 66px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.sg-section__head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr); align-items: end; gap: 40px; margin-bottom: clamp(44px, 6vw, 78px); }
.sg-section__head > p { margin: 0; max-width: 560px; color: var(--sg-muted); font-size: 17px; line-height: 1.7; }
.sg-tone--dark .sg-section__head > p { color: #9eb2bc; }

.sg-hero { position: relative; min-height: min(860px, calc(100svh - 72px)); display: grid; align-items: center; padding-block: clamp(104px, 12vw, 170px) clamp(80px, 9vw, 130px); isolation: isolate; }
.sg-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 78% 25%, rgba(85,216,220,.14), transparent 28%), linear-gradient(125deg, rgba(255,122,26,.08), transparent 34%); }
.sg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.sg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); align-items: center; gap: clamp(48px, 8vw, 120px); }
.sg-hero__copy h1 { margin: 0; max-width: 930px; color: #fff; font-size: clamp(46px, 6.4vw, 94px); line-height: .92; letter-spacing: -.058em; text-wrap: balance; }
.sg-lede { margin: 30px 0 0; max-width: 720px; color: #a9bbc4; font-size: clamp(17px, 1.65vw, 22px); line-height: 1.65; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.sg-actions .jz-button { border-radius: 10px; }
.sg-download svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.sg-language-note { margin: 14px 0 0; color: #738b96; font-size: 12px; }

.sg-terminal { border: 1px solid rgba(85,216,220,.28); border-radius: 10px; background: rgba(3, 12, 19, .82); box-shadow: 0 38px 90px rgba(0,0,0,.34); overflow: hidden; }
.sg-terminal__bar { display: flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 15px; border-bottom: 1px solid var(--sg-dark-line); background: rgba(255,255,255,.035); }
.sg-terminal__bar > span { width: 8px; height: 8px; border-radius: 50%; background: #526771; }
.sg-terminal__bar > span:first-child { background: var(--sg-orange); }
.sg-terminal__bar > span:nth-child(2) { background: #c4a83c; }
.sg-terminal__bar > span:nth-child(3) { background: var(--sg-cyan); }
.sg-terminal__bar b { margin-inline-start: auto; color: #728993; font: 650 9px/1 var(--jz-mono, ui-monospace, monospace); letter-spacing: .11em; }
.sg-terminal__body { min-height: 330px; padding: 28px; }
.sg-terminal__body > p { margin: 0 0 24px; color: var(--sg-orange); font: 720 11px/1.2 var(--jz-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; }
.sg-terminal__output { min-height: 215px; color: #dbe8ed; font: 560 15px/1.8 var(--jz-mono, ui-monospace, monospace); white-space: pre-wrap; }
.sg-terminal__output::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-inline-start: 4px; vertical-align: -.14em; background: var(--sg-orange); animation: sg-cursor .78s steps(1) infinite; }

.sg-prepare-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sg-line); border-radius: 10px; overflow: hidden; background: var(--sg-white); }
.sg-prepare-grid article { position: relative; min-height: 270px; padding: 28px 24px; border-inline-end: 1px solid var(--sg-line); transition: transform .2s ease, background .2s ease; }
.sg-prepare-grid article:last-child { border-inline-end: 0; }
.sg-prepare-grid article:hover { z-index: 1; transform: translateY(-5px); background: #fff8f2; }
.sg-prepare-grid svg { width: 30px; height: 30px; margin-bottom: 58px; fill: none; stroke: var(--sg-orange); stroke-width: 1.55; transition: transform .2s ease; }
.sg-prepare-grid article:hover svg { transform: rotate(-4deg) scale(1.08); }
[dir="rtl"] .sg-prepare-grid article:hover svg { transform: rotate(4deg) scale(1.08); }
.sg-prepare-grid span { position: absolute; inset-block-start: 28px; inset-inline-end: 22px; color: #9dadb5; font: 700 10px/1 var(--jz-mono, ui-monospace, monospace); }
.sg-prepare-grid h3 { margin: 0 0 12px; color: var(--sg-ink); font-size: 20px; line-height: 1.16; }
.sg-prepare-grid p { margin: 0; color: var(--sg-muted); line-height: 1.65; }

.sg-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sg-step { position: relative; min-height: 265px; padding: 28px; border: 1px solid var(--sg-dark-line); border-radius: 10px; background: linear-gradient(145deg, rgba(15,33,47,.94), rgba(7,18,28,.98)); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sg-step:hover, .sg-step:focus-within { z-index: 3; border-color: rgba(255,122,26,.58); transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.24); }
.sg-step__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.sg-step__top > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,122,26,.44); border-radius: 10px; color: var(--sg-orange); font: 760 11px/1 var(--jz-mono, ui-monospace, monospace); }
.sg-step__top > svg { width: 30px; height: 30px; fill: none; stroke: var(--sg-cyan); stroke-width: 1.5; transition: transform .2s ease; }
.sg-step:hover .sg-step__top > svg { transform: translateY(-3px) rotate(-3deg); }
[dir="rtl"] .sg-step:hover .sg-step__top > svg { transform: translateY(-3px) rotate(3deg); }
.sg-step h3 { margin: 44px 0 12px; color: #fff; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.06; }
.sg-step > p { margin: 0; max-width: 620px; color: #98adb7; line-height: 1.7; }
.sg-tip { position: relative; margin-inline-start: auto; }
.sg-tip button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--sg-dark-line); border-radius: 10px; color: #9cb2bc; background: rgba(255,255,255,.025); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.sg-tip button:hover, .sg-tip button:focus-visible, .sg-tip.is-open button { color: var(--sg-orange); border-color: rgba(255,122,26,.58); background: rgba(255,122,26,.08); outline: none; }
.sg-tip button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sg-tooltip { position: absolute; z-index: 10; inset-block-start: calc(100% + 12px); inset-inline-end: 0; width: min(300px, calc(100vw - 56px)); padding: 16px; border: 1px solid rgba(255,122,26,.45); border-radius: 10px; color: #dce8ed; background: #122633; box-shadow: 0 20px 55px rgba(0,0,0,.44); font-size: 13px; line-height: 1.55; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; }
.sg-tip:hover .sg-tooltip, .sg-tip:focus-within .sg-tooltip, .sg-tip.is-open .sg-tooltip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.sg-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sg-rules article { min-height: 210px; padding: 26px; border: 1px solid var(--sg-line); border-radius: 10px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.sg-rules article:hover { transform: translateY(-4px); border-color: rgba(255,122,26,.42); box-shadow: 0 24px 60px rgba(13,36,46,.09); }
.sg-rules span { color: var(--sg-orange); font: 760 11px/1 var(--jz-mono, ui-monospace, monospace); }
.sg-rules h3 { margin: 42px 0 10px; color: var(--sg-ink); font-size: 23px; line-height: 1.1; }
.sg-rules p { margin: 0; color: var(--sg-muted); line-height: 1.65; }

.sg-score-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(48px, 8vw, 120px); }
.sg-score-layout h2 { color: #fff; }
.sg-score-callout { display: flex; align-items: center; gap: 20px; margin-top: 38px; padding: 20px; border: 1px solid rgba(255,122,26,.42); border-radius: 10px; background: rgba(255,122,26,.07); }
.sg-score-callout strong { color: var(--sg-orange); font-size: 48px; line-height: 1; }
.sg-score-callout span { max-width: 190px; color: #b7c7ce; line-height: 1.4; }
.sg-score-grid { display: grid; gap: 10px; }
.sg-score-grid article { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 20px; min-height: 86px; padding: 14px 18px; border: 1px solid var(--sg-dark-line); border-radius: 10px; background: rgba(255,255,255,.025); transition: border-color .2s ease, transform .2s ease; }
.sg-score-grid article:hover { border-color: rgba(85,216,220,.42); transform: translateX(4px); }
[dir="rtl"] .sg-score-grid article:hover { transform: translateX(-4px); }
.sg-score-grid article > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 10px; color: var(--sg-orange); background: rgba(255,122,26,.09); font: 760 17px/1 var(--jz-mono, ui-monospace, monospace); }
.sg-score-grid h3 { margin: 0 0 5px; color: #edf6f8; font-size: 18px; line-height: 1.2; }
.sg-score-grid p { margin: 0; color: var(--sg-cyan); font: 680 10px/1.2 var(--jz-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }

.sg-workflow { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); margin: 0; padding: 0 0 16px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.sg-workflow li { position: relative; min-height: 230px; padding: 24px 20px; border-block: 1px solid var(--sg-line); border-inline-start: 1px solid var(--sg-line); background: #fff; }
.sg-workflow li:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.sg-workflow li:last-child { border-inline-end: 1px solid var(--sg-line); border-start-end-radius: 10px; border-end-end-radius: 10px; }
.sg-workflow li::after { content: ""; position: absolute; inset-block-start: 70px; inset-inline-end: -6px; z-index: 2; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--sg-orange); box-shadow: 0 0 0 1px rgba(255,122,26,.45); }
.sg-workflow li:last-child::after { display: none; }
.sg-workflow span { color: var(--sg-orange); font: 760 10px/1 var(--jz-mono, ui-monospace, monospace); letter-spacing: .09em; }
.sg-workflow p { margin: 60px 0 0; color: var(--sg-muted); font-size: 14px; line-height: 1.55; }

.sg-faq-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(48px, 8vw, 120px); }
.sg-faq-layout h2 { color: #fff; }
.sg-faq details { border-block-start: 1px solid var(--sg-dark-line); }
.sg-faq details:last-child { border-block-end: 1px solid var(--sg-dark-line); }
.sg-faq summary { position: relative; padding: 24px 46px 24px 0; color: #eef7f9; font-size: 19px; font-weight: 680; cursor: pointer; list-style: none; }
[dir="rtl"] .sg-faq summary { padding: 24px 0 24px 46px; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; position: absolute; inset-inline-end: 4px; color: var(--sg-orange); font: 400 26px/1 sans-serif; transition: transform .2s ease; }
.sg-faq details[open] summary::after { transform: rotate(45deg); }
.sg-faq details p { margin: -4px 0 24px; padding-inline-end: 46px; color: #9fb3bc; line-height: 1.75; }

.sg-final { padding-block: clamp(78px, 9vw, 132px); }
.sg-final__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); align-items: end; gap: 56px; }
.sg-final p:not(.sg-eyebrow) { max-width: 720px; margin: 22px 0 0; color: var(--sg-muted); font-size: 17px; line-height: 1.7; }
.sg-final .sg-actions { justify-content: flex-end; }

.sg-page :is(a, button, summary):focus-visible { outline: 3px solid rgba(255,122,26,.4); outline-offset: 3px; }

@keyframes sg-cursor { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

@media (max-width: 1100px) {
  .sg-hero__grid, .sg-score-layout, .sg-faq-layout { grid-template-columns: 1fr; }
  .sg-terminal { max-width: 720px; }
  .sg-prepare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-prepare-grid article { border-block-end: 1px solid var(--sg-line); }
  .sg-prepare-grid article:nth-child(2n) { border-inline-end: 0; }
  .sg-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-final__inner { grid-template-columns: 1fr; }
  .sg-final .sg-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .sg-hero { min-height: auto; padding-block: 96px 72px; }
  .sg-hero__grid { gap: 48px; }
  .sg-hero__copy h1 { font-size: clamp(42px, 13vw, 64px); }
  .sg-section { padding-block: 72px; }
  .sg-section__head { grid-template-columns: 1fr; align-items: start; gap: 24px; margin-bottom: 42px; }
  .sg-section h2, .sg-final h2 { font-size: clamp(34px, 10vw, 48px); }
  .sg-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .sg-actions .jz-button { width: 100%; }
  .sg-terminal__body { min-height: 300px; padding: 22px; }
  .sg-terminal__output { min-height: 200px; font-size: 13px; }
  .sg-prepare-grid, .sg-steps, .sg-rules { grid-template-columns: 1fr; }
  .sg-prepare-grid article { min-height: auto; border-inline-end: 0; }
  .sg-step { min-height: 240px; }
  .sg-tooltip { position: fixed; inset: auto 18px 18px; width: auto; }
  .sg-score-grid article { grid-template-columns: 60px 1fr; }
  .sg-faq summary { font-size: 17px; }
  .sg-faq details p { padding-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-page *, .sg-page *::before, .sg-page *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}