/* ============================================================
   StarGround Technologies — Website
   Built on the StarGround Brand System (Edition 01 · 2026)
   Iteration 2 — research-informed (Studio Meyer 2026 trends,
   Adriana/Billingo/Számlázz patterns, WCAG 2.2 AA, EAA 2025)
   ============================================================ */

:root {
  /* Brand palette */
  --sg-blue: #0d6dfc;
  --sg-blue-deep: #0a52c2;
  --sg-blue-ink: #08378a;
  --sg-blue-soft: #e7f0ff;
  --sg-blue-glow: rgba(13, 109, 252, 0.18);

  --sg-ink: #0a0d14;
  --sg-graphite: #1c2230;
  --sg-slate: #3a4358;     /* body text — 10.8:1 on white ✓ AAA */
  --sg-mute: #5b6479;      /* meta text — 6.5:1 on white ✓ AA */
  --sg-mute-soft: #828aa0; /* decoration only */

  --sg-line: #e6e8ee;
  --sg-line-soft: #f1f2f6;
  --sg-paper: #ffffff;
  --sg-bone: #fafafb;
  --sg-cream: #f5f6f9;

  --sg-success: #15803d;
  --sg-warn: #b45309;
  --sg-error: #b91c1c;

  /* Radii */
  --sg-radius-sm: 8px;
  --sg-radius: 14px;
  --sg-radius-lg: 22px;
  --sg-radius-xl: 32px;

  /* Fonts */
  --sg-font-sans: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --sg-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --sg-font-serif: "Instrument Serif", "EB Garamond", Georgia, serif;

  /* Motion */
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Tap-target floor */
  --sg-tap: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
/* Safety net: never allow horizontal scrolling on the document.
   Any element that wants to bleed beyond viewport must opt-in. */
html, body { overflow-x: clip; }
body {
  font-family: var(--sg-font-sans);
  color: var(--sg-ink);
  background: var(--sg-paper);
  font-size: 16px;        /* desktop body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection {
  background: var(--sg-blue);
  color: white;
}

/* WCAG focus state — visible on all interactive */
:focus-visible {
  outline: 3px solid var(--sg-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.sg-skip {
  position: absolute;
  left: -10000px; top: 12px;
  background: var(--sg-ink); color: white;
  padding: 12px 16px; border-radius: 8px;
  font-weight: 500; font-size: 14px;
  z-index: 1000;
}
.sg-skip:focus { left: 12px; }

/* ============================================================
   NAV
   ============================================================ */
.sg-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sg-line);
}
.sg-nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px 32px;
  display: flex; align-items: center; gap: 32px;
  font-size: 14px;
  min-height: 64px;
}
.sg-nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  font-weight: 600; letter-spacing: -0.018em;
  font-size: 16px;
}
.sg-nav-brand img {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px -2px rgba(13, 109, 252, 0.45);
}
.sg-nav-brand .gr { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: var(--sg-blue); }
.sg-nav-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.sg-nav-links a {
  color: var(--sg-slate); text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color .15s ease;
  font-weight: 500;
}
/* Product links — InvoiceStar, Képzés — slightly stronger than site sections */
.sg-nav-links a.sg-nav-product {
  color: var(--sg-ink);
  font-weight: 600;
}
.sg-nav-links a.sg-nav-product:hover { color: var(--sg-blue); }
/* Subtle separator between products and site sections */
.sg-nav-sep {
  width: 1px; height: 18px;
  background: var(--sg-line);
  display: inline-block;
  margin: 0 4px;
}
.sg-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--sg-blue);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s var(--sg-ease);
}
.sg-nav-links a:hover { color: var(--sg-ink); }
.sg-nav-links a:hover::after { transform: scaleX(1); }
.sg-nav-links a.is-active { color: var(--sg-ink); }
.sg-nav-links a.is-active::after { transform: scaleX(1); }
.sg-nav-spacer { flex: 1; }
.sg-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sg-blue); color: white;
  padding: 11px 18px; border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  min-height: 40px;
  box-shadow: 0 6px 16px -8px rgba(13, 109, 252, 0.55);
  transition: background .2s var(--sg-ease), transform .2s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-nav-cta:hover {
  background: var(--sg-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(13, 109, 252, 0.65);
}
.sg-nav-cta .arrow { transition: transform .2s var(--sg-ease); }
.sg-nav-cta:hover .arrow { transform: translateX(3px); }

.sg-nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--sg-line);
  width: 44px; height: 44px; border-radius: 10px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--sg-ink);
  transition: background .15s ease, border-color .15s ease;
}
.sg-nav-toggle:hover { background: var(--sg-bone); border-color: var(--sg-ink); }
.sg-nav-toggle[aria-expanded="true"] {
  background: var(--sg-ink); color: white; border-color: var(--sg-ink);
}

/* ============================================================
   GENERAL SECTIONS / TYPOGRAPHY
   ============================================================ */
.sg-section { padding: 120px 32px; position: relative; }
.sg-section-tight { padding: 64px 32px; }
.sg-section-bone { background: var(--sg-bone); border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
.sg-wrap { max-width: 1280px; margin: 0 auto; }

.sg-eyebrow {
  font-family: var(--sg-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-mute);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
  font-weight: 500;
}
.sg-eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: var(--sg-ink);
}
.sg-eyebrow.is-blue { color: var(--sg-blue); }
.sg-eyebrow.is-blue::before { background: var(--sg-blue); }

.sg-h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02; letter-spacing: -0.038em;
  font-weight: 500;
  margin: 0 0 28px;
  text-wrap: balance;
}
.sg-h1 em, .sg-h1 .gr {
  font-style: italic; font-family: var(--sg-font-serif); font-weight: 400;
  color: var(--sg-blue);
}

.sg-h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.06; letter-spacing: -0.032em;
  font-weight: 500;
  margin: 0 0 20px;
  text-wrap: balance;
}
.sg-h2 em, .sg-h2 .gr { font-style: italic; font-family: var(--sg-font-serif); font-weight: 400; color: var(--sg-blue); }

.sg-h3 {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.22; letter-spacing: -0.02em;
  font-weight: 500; margin: 0 0 12px;
}
.sg-h3 em { font-style: italic; font-family: var(--sg-font-serif); font-weight: 400; }

.sg-lead {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  color: var(--sg-slate);
  max-width: 680px;
  margin: 0 0 48px;
  text-wrap: pretty;
}

.sg-body { font-size: 16px; color: var(--sg-slate); line-height: 1.65; }

.sg-divider { border: 0; height: 1px; background: var(--sg-line); margin: 0; }

/* ============================================================
   BUTTONS — 48px+ tap target floor
   ============================================================ */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px;
  min-height: var(--sg-tap);
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--sg-ease), background .2s var(--sg-ease),
              border-color .2s var(--sg-ease), color .2s var(--sg-ease),
              box-shadow .25s var(--sg-ease);
  white-space: nowrap;
}
.sg-btn .arrow { transition: transform .2s var(--sg-ease); display: inline-flex; }
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn:hover .arrow { transform: translateX(4px); }

.sg-btn-primary {
  background: var(--sg-blue); color: white;
  box-shadow: 0 8px 22px -10px rgba(13, 109, 252, 0.65);
}
.sg-btn-primary:hover {
  background: var(--sg-blue-deep);
  box-shadow: 0 14px 30px -12px rgba(13, 109, 252, 0.75);
}

.sg-btn-ink { background: var(--sg-ink); color: white; }
.sg-btn-ink:hover { background: var(--sg-blue); }

.sg-btn-ghost {
  background: transparent; color: var(--sg-ink);
  border-color: var(--sg-line);
}
.sg-btn-ghost:hover {
  border-color: var(--sg-ink);
  background: var(--sg-bone);
}

.sg-btn-link {
  background: transparent; color: var(--sg-ink);
  padding: 12px 0;
  min-height: auto;
  border-bottom: 1px solid var(--sg-ink);
  border-radius: 0;
}
.sg-btn-link:hover { color: var(--sg-blue); border-bottom-color: var(--sg-blue); transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.sg-hero {
  position: relative;
  padding: 56px 32px 96px;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 88% 14%, rgba(13, 109, 252, 0.10), transparent 60%),
    radial-gradient(600px 480px at 8% 88%, rgba(13, 109, 252, 0.04), transparent 60%),
    var(--sg-paper);
  border-bottom: 1px solid var(--sg-line);
}
.sg-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(13, 13, 20, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 13, 20, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}

.sg-hero-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: center;
  position: relative;
  min-height: min(78vh, 720px);
}

.sg-hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sg-font-mono);
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--sg-mute); text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.sg-hero-kicker .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--sg-blue);
  box-shadow: 0 0 0 0 rgba(13, 109, 252, 0.55);
  animation: pulse 2.2s var(--sg-ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 109, 252, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(13, 109, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 109, 252, 0); }
}

.sg-hero h1 {
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 0.98; letter-spacing: -0.038em; font-weight: 500;
  margin: 0 0 24px;
  text-wrap: balance;
}
.sg-hero h1 .gr {
  font-family: var(--sg-font-serif); font-style: italic; font-weight: 400;
  color: var(--sg-blue);
}

.sg-hero-tag {
  font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5;
  color: var(--sg-slate); max-width: 540px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.sg-hero-tag strong { color: var(--sg-ink); font-weight: 600; }

.sg-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.sg-hero-reassure {
  font-size: 13px; color: var(--sg-mute);
  margin: 0 0 28px;
  font-weight: 500;
}

.sg-hero-proof {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 20px 28px;
  padding-top: 28px; border-top: 1px solid var(--sg-line);
  max-width: 580px;
  font-size: 14px; color: var(--sg-slate);
}
.sg-hero-proof li { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.sg-hero-proof svg { width: 18px; height: 18px; color: var(--sg-blue); flex-shrink: 0; }

.sg-hero-visual {
  display: flex; justify-content: center; align-items: center;
  position: relative;
}
.sg-hero-mark {
  width: min(420px, 100%); aspect-ratio: 1;
  background: var(--sg-blue);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow:
    0 60px 120px -40px rgba(13, 109, 252, 0.45),
    0 30px 60px -30px rgba(13, 109, 252, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: float 8s var(--sg-ease) infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.sg-hero-mark img {
  width: auto; height: auto;
  max-width: 58%; max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.18));
}
.sg-hero-mark::before {
  content: ""; position: absolute; inset: -32px;
  border-radius: 999px;
  border: 1px solid rgba(13, 109, 252, 0.18);
}
.sg-hero-mark::after {
  content: ""; position: absolute; inset: -76px;
  border-radius: 999px;
  border: 1px dashed rgba(13, 109, 252, 0.22);
  animation: spin 90s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Floating constellation chips around the mark */
.sg-hero-chip {
  position: absolute;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid var(--sg-line);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--sg-slate); text-transform: uppercase;
  box-shadow: 0 12px 30px -16px rgba(13, 13, 20, 0.18);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-weight: 500;
  z-index: 2;
  isolation: isolate;
}
.sg-hero-chip .sw {
  width: 8px; height: 8px;
  flex-shrink: 0;                 /* keep the 1:1 ratio when the chip text wraps */
  border-radius: 50%;
  background: var(--sg-blue);
}
.sg-hero-chip-2 { top: 10%; right: -22%; animation: drift 10s ease-in-out -1.5s infinite reverse; max-width: 240px; white-space: normal; line-height: 1.35; }
.sg-hero-chip-3 { top: 50%; left: -28%;  animation: drift 7.5s ease-in-out -1s infinite; max-width: 260px; white-space: normal; line-height: 1.35; }
.sg-hero-chip-4 { bottom: 12%; right: -8%; animation: drift 9s ease-in-out -2s infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ============================================================
   TRUST BAND — under the hero
   ============================================================ */
.sg-trust {
  border-bottom: 1px solid var(--sg-line);
  background: var(--sg-paper);
}
.sg-trust-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.sg-trust-item {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px;
}
.sg-trust-item svg { width: 28px; height: 28px; color: var(--sg-blue); flex-shrink: 0; }
.sg-trust-item strong { display: block; font-weight: 600; color: var(--sg-ink); letter-spacing: -0.012em; }
.sg-trust-item span { display: block; color: var(--sg-slate); font-size: 13px; margin-top: 1px; }

/* ============================================================
   PROBLEM FRAMING (PAS) — new in the funnel rewrite
   ============================================================ */
.sg-problem-inner {
  max-width: 780px; margin: 0 auto;
  text-align: center;
}
.sg-problem-inner .sg-eyebrow {
  justify-content: center;
}
.sg-problem-inner .sg-h2 {
  margin-bottom: 24px;
}
.sg-problem-inner .sg-lead {
  margin-left: auto; margin-right: auto;
  margin-bottom: 32px;
}
.sg-problem-list {
  list-style: none; padding: 0; margin: 0 auto 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 720px;
  text-align: left;
}
.sg-problem-list li {
  padding: 14px 18px 14px 44px;
  background: var(--sg-bone);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  font-size: 14.5px; color: var(--sg-slate); line-height: 1.5;
  position: relative;
  display: flex; align-items: center;   /* center text when sibling wraps to 2 lines */
}
.sg-problem-list li::before {
  content: "—";
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--sg-blue); font-weight: 700;
}
.sg-problem-list li strong { color: var(--sg-ink); font-weight: 600; }
/* "The answer" — a plain centered paragraph that resolves the problem
   framing above. No card, no badge — just a clear sentence with the
   product name marked in brand blue. */
.sg-problem-bridge {
  font-size: 17px; color: var(--sg-slate); line-height: 1.65;
  max-width: 600px; margin: 0 auto;
  text-align: center;
  text-wrap: pretty;
}
.sg-problem-bridge strong {
  color: var(--sg-ink);
  font-weight: 600;
}

/* ============================================================
   TESTIMONIAL placeholder — honest "ide kerülnek" framing
   ============================================================ */
.sg-testi-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
}
.sg-testi-card {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 36px 36px 28px;
  position: relative;
}
.sg-testi-mark {
  position: absolute; top: 12px; right: 28px;
  font-family: var(--sg-font-serif); font-style: italic;
  font-size: 88px; color: var(--sg-blue);
  line-height: 1; opacity: 0.16;
  pointer-events: none; user-select: none;
}
.sg-testi-quote {
  font-family: var(--sg-font-serif); font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55;
  color: var(--sg-slate);
  margin: 0 0 24px;
}
.sg-testi-quote em { color: var(--sg-ink); font-style: italic; }
.sg-testi-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--sg-line);
}
.sg-testi-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  display: grid; place-items: center;
  font-family: var(--sg-font-mono); font-size: 18px;
  font-weight: 600;
}
.sg-testi-foot strong {
  display: block; font-weight: 600; color: var(--sg-ink);
  font-size: 14.5px; letter-spacing: -0.012em;
}
.sg-testi-foot span {
  display: block; color: var(--sg-mute); font-size: 13px;
  margin-top: 2px;
}

/* ============================================================
   FOOTER STRIPS — combined Knowledge + Roadmap teaser
   ============================================================ */
.sg-foot-strips {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.sg-foot-strip {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: 32px 28px 26px;
}
.sg-foot-strip h3 {
  font-size: 22px; letter-spacing: -0.022em;
  margin: 0 0 10px;
  color: var(--sg-ink);
  font-weight: 600;
}
.sg-foot-strip h3 em {
  font-family: var(--sg-font-serif); font-style: italic; font-weight: 400;
  color: var(--sg-blue);
}
.sg-foot-strip p {
  font-size: 14.5px; color: var(--sg-slate);
  line-height: 1.55; margin: 0 0 18px;
}

/* ============================================================
   PERSONA ROUTER
   ============================================================ */
.sg-personas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.sg-persona {
  display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  text-decoration: none; color: inherit;
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-persona:hover {
  transform: translateY(-2px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.16);
}
.sg-persona-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  display: grid; place-items: center; flex-shrink: 0;
}
.sg-persona-ico svg { width: 24px; height: 24px; }
.sg-persona-body strong {
  display: block; font-weight: 600; color: var(--sg-ink);
  letter-spacing: -0.014em; font-size: 16px;
  margin-bottom: 2px;
}
.sg-persona-body span {
  display: block; color: var(--sg-slate); font-size: 14px;
  line-height: 1.4;
}
.sg-persona-arrow {
  color: var(--sg-mute); font-size: 18px;
  transition: transform .2s var(--sg-ease), color .2s var(--sg-ease);
}
.sg-persona:hover .sg-persona-arrow {
  color: var(--sg-blue); transform: translateX(4px);
}

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.sg-roi {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
  background: linear-gradient(135deg, var(--sg-ink), var(--sg-graphite));
  color: white;
  border-radius: var(--sg-radius-lg);
  padding: 48px 56px;
  position: relative; overflow: hidden;
}
.sg-roi::before {
  content: ""; position: absolute;
  right: -100px; top: -100px;
  width: 300px; height: 300px; border-radius: 999px;
  background: radial-gradient(circle, rgba(13, 109, 252, 0.4), transparent 60%);
  pointer-events: none;
}
.sg-roi-text { position: relative; z-index: 1; }
.sg-roi-text .sg-eyebrow { color: #9bc1ff; }
.sg-roi-text .sg-eyebrow::before { background: #9bc1ff; }
.sg-roi-text h2 { color: white; }
.sg-roi-text h2 em { color: #9bc1ff; }
.sg-roi-lead { color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.55; margin: 0; }

.sg-roi-form {
  display: grid; gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--sg-radius);
  padding: 20px;
  position: relative; z-index: 1;
}
.sg-roi-field {
  display: grid; grid-template-columns: 1fr 110px 60px; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.sg-roi-field label { font-size: 14px; color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.sg-roi-field input {
  font-family: var(--sg-font-mono); font-size: 18px; font-weight: 500;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  width: 100%;
  text-align: right;
  -moz-appearance: textfield;
}
.sg-roi-field input::-webkit-outer-spin-button,
.sg-roi-field input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sg-roi-field input:focus {
  outline: none; border-color: var(--sg-blue);
  box-shadow: 0 0 0 3px rgba(13, 109, 252, 0.3);
  background: rgba(255, 255, 255, 0.12);
}
.sg-roi-unit {
  font-family: var(--sg-font-mono); font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
}

.sg-roi-out {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px; margin-top: 8px;
}
.sg-roi-out-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
}
.sg-roi-out-row .lbl { color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.sg-roi-out-row .val {
  font-size: 28px; letter-spacing: -0.02em; font-weight: 500;
  color: #9bc1ff;
  font-feature-settings: "tnum";
}
.sg-roi-note {
  font-family: var(--sg-font-mono); font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin: 8px 0 0; letter-spacing: 0.04em;
}

/* ============================================================
   PAGEHEAD CTAs (workshop)
   ============================================================ */
.sg-pagehead-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 32px;
}

/* ============================================================
   AGENDA (workshop program)
   ============================================================ */
.sg-agenda {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; gap: 18px;
  counter-reset: agenda;
}
.sg-agenda > li {
  display: grid; grid-template-columns: 160px 1fr; gap: 32px;
  padding: 28px 28px 26px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  position: relative;
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-agenda > li:hover {
  transform: translateY(-2px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.18);
}
.sg-agenda-time {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 6px;
}
.sg-agenda-time strong {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 500; letter-spacing: -0.028em;
  color: var(--sg-ink); line-height: 1;
  font-feature-settings: "tnum";
}
.sg-agenda-time span {
  font-family: var(--sg-font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--sg-blue);
  text-transform: uppercase; font-weight: 500;
  margin-top: 2px;
}
.sg-agenda-body h3 {
  font-size: 22px; letter-spacing: -0.022em; font-weight: 600;
  margin: 0 0 10px; color: var(--sg-ink);
}
.sg-agenda-body p {
  font-size: 15.5px; color: var(--sg-slate); line-height: 1.6;
  margin: 0 0 14px;
}
.sg-agenda-body ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.sg-agenda-body ul li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; color: var(--sg-slate); line-height: 1.5;
}
.sg-agenda-body ul li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--sg-blue); font-weight: 700;
}

/* ============================================================
   WORKSHOP FORM
   ============================================================ */
.sg-workshop-grid {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start;
}
.sg-workshop-grid > div:first-child { position: sticky; top: 100px; }

.sg-mini-trust {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; gap: 12px;
  font-size: 14px; color: var(--sg-slate);
}
.sg-mini-trust li { display: flex; align-items: center; gap: 10px; }
.sg-mini-trust svg { width: 18px; height: 18px; color: var(--sg-blue); flex-shrink: 0; }

.sg-workshop-form {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 32px 32px 28px;
}
.sg-workshop-form .sg-field input,
.sg-workshop-form .sg-field textarea,
.sg-workshop-form .sg-field select {
  font-family: inherit; font-size: 16px;
  padding: 14px 16px; min-height: 48px;
  border: 1px solid var(--sg-line); border-radius: 10px;
  background: white; color: var(--sg-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.sg-workshop-form .sg-field input:focus,
.sg-workshop-form .sg-field textarea:focus,
.sg-workshop-form .sg-field select:focus {
  outline: none; border-color: var(--sg-blue);
  box-shadow: 0 0 0 4px rgba(13, 109, 252, 0.14);
}
.sg-workshop-form .sg-field {
  display: grid; gap: 6px; margin-bottom: 16px;
}
.sg-workshop-form .sg-field label,
.sg-workshop-form .sg-field-group legend {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--sg-mute); text-transform: uppercase; font-weight: 500;
}
.sg-workshop-form .req { color: var(--sg-blue); }
.sg-workshop-form .sg-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
.sg-workshop-form .sg-field-row .sg-field { margin-bottom: 0; }

.sg-field-group {
  border: 0; margin: 0 0 18px; padding: 0;
}
.sg-field-group legend { margin-bottom: 10px; padding: 0; }

.sg-radio-card {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .15s ease, background .15s ease;
}
.sg-radio-card:last-child { margin-bottom: 0; }
.sg-radio-card:hover { border-color: var(--sg-slate); }
.sg-radio-card input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px;
  border: 2px solid var(--sg-line);
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0; cursor: pointer;
  background: white;
  flex-shrink: 0;
  transition: border-color .15s ease;
}
.sg-radio-card input[type="radio"]:checked {
  border-color: var(--sg-blue);
}
.sg-radio-card input[type="radio"]:checked::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sg-blue);
}
.sg-radio-card:has(input:checked) {
  border-color: var(--sg-blue);
  background: var(--sg-blue-soft);
}
.sg-radio-card-body strong {
  display: block; font-weight: 600; color: var(--sg-ink);
  font-size: 15px; letter-spacing: -0.012em;
}
.sg-radio-card-body span {
  display: block; font-size: 13.5px; color: var(--sg-slate);
  line-height: 1.4; margin-top: 2px;
}

.sg-coupon {
  background: var(--sg-bone);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.sg-check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 14.5px; color: var(--sg-ink);
  font-weight: 500;
}
.sg-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--sg-line);
  border-radius: 5px;
  display: grid; place-items: center;
  margin: 0; cursor: pointer;
  background: white;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease;
}
.sg-check input[type="checkbox"]:checked {
  border-color: var(--sg-blue);
  background: var(--sg-blue);
}
.sg-check input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.sg-coupon-input { margin-top: 12px; margin-bottom: 0; }

.sg-form-note {
  font-family: var(--sg-font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--sg-mute);
  margin: 12px 0 0; text-align: center;
}
.sg-form-note a { color: var(--sg-blue); text-decoration: none; border-bottom: 1px solid currentColor; }

.sg-field-hint {
  font-size: 12.5px; color: var(--sg-mute);
  margin-top: 4px; line-height: 1.4;
}

/* ============================================================
   WORKSHOP SUCCESS PANEL
   ============================================================ */
.sg-workshop-success {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 40px 36px 32px;
  text-align: center;
  animation: fade-up .5s var(--sg-ease);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.sg-workshop-success[hidden] { display: none !important; }
.sg-workshop-success-mark {
  width: 56px; height: 56px; margin: 0 auto 18px;
  background: rgba(21, 128, 61, 0.1);
  color: var(--sg-success);
  border-radius: 999px;
  display: grid; place-items: center;
}
.sg-workshop-success-mark svg { width: 28px; height: 28px; }
.sg-workshop-success h3 {
  font-size: 24px; letter-spacing: -0.022em;
  font-weight: 600; margin: 0 0 10px;
  color: var(--sg-ink);
}
.sg-workshop-success > p {
  font-size: 16px; color: var(--sg-slate); line-height: 1.55;
  margin: 0 0 24px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

.sg-workshop-pay {
  background: var(--sg-bone);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: 24px 24px 20px;
  margin-top: 8px;
}
.sg-workshop-pay[hidden] { display: none !important; }
.sg-workshop-pay-lead {
  font-size: 15px; color: var(--sg-ink); line-height: 1.5;
  margin: 0 0 16px;
}
.sg-workshop-pay-lead strong { color: var(--sg-ink); }

.sg-workshop-coupon-note {
  background: var(--sg-blue-soft);
  border: 1px solid rgba(13, 109, 252, 0.18);
  border-radius: var(--sg-radius);
  padding: 20px 22px;
  margin-top: 8px;
  text-align: left;
}
.sg-workshop-coupon-note[hidden] { display: none !important; }
.sg-workshop-coupon-note p {
  margin: 0; font-size: 14.5px; color: var(--sg-ink); line-height: 1.55;
}

.sg-workshop-success-back {
  margin: 24px 0 0;
  font-family: var(--sg-font-mono); font-size: 12px;
  letter-spacing: 0.1em; color: var(--sg-mute);
  text-transform: uppercase; font-weight: 500;
}
.sg-workshop-success-back a {
  color: var(--sg-mute); text-decoration: none;
  border-bottom: 1px solid var(--sg-line);
  padding-bottom: 1px;
}
.sg-workshop-success-back a:hover { color: var(--sg-ink); border-bottom-color: var(--sg-ink); }

/* big variant button (for the prominent Stripe pay CTA) */
.sg-btn-lg {
  min-height: 56px; padding: 16px 28px;
  font-size: 16px;
}

/* ============================================================
   WORKSHOP "COMING SOON" — info block, no booking yet
   ============================================================ */
.sg-workshop-coming {
  max-width: 720px; margin: 0 auto;
  text-align: center;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 56px 48px 48px;
}
.sg-workshop-coming-mark {
  width: 64px; height: 64px; margin: 0 auto 24px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  border-radius: 999px;
  display: grid; place-items: center;
}
.sg-workshop-coming-mark svg { width: 30px; height: 30px; }
.sg-workshop-coming .sg-eyebrow { margin-bottom: 18px; }
.sg-workshop-coming .sg-h2 { margin-bottom: 22px; }
.sg-workshop-coming-lead {
  font-size: 17px; line-height: 1.6;
  color: var(--sg-slate);
  max-width: 560px; margin: 0 auto 16px;
}
.sg-workshop-coming-lead:last-of-type { margin-bottom: 28px; }

@media (max-width: 820px) {
  .sg-workshop-coming { padding: 40px 24px 32px; }
}

/* ============================================================
   HOMEPAGE WORKSHOP TEASER
   ============================================================ */
.sg-workshop-teaser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--sg-ink); color: white;
  border-radius: var(--sg-radius-lg);
  padding: 48px 56px;
  position: relative; overflow: hidden;
}
.sg-workshop-teaser::after {
  content: ""; position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px; border-radius: 999px;
  background: radial-gradient(circle, rgba(13, 109, 252, 0.4), transparent 60%);
  pointer-events: none;
}
.sg-workshop-teaser-text { position: relative; z-index: 1; }
.sg-workshop-teaser .sg-eyebrow { color: #9bc1ff; }
.sg-workshop-teaser .sg-eyebrow::before { background: #9bc1ff; }
.sg-workshop-teaser h2 { color: white; margin: 0 0 18px; }
.sg-workshop-teaser h2 em { color: #9bc1ff; }
.sg-workshop-teaser p {
  font-size: 17px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 520px;
}
.sg-workshop-teaser .ctas { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.sg-workshop-teaser .sg-btn-ghost {
  color: white; border-color: rgba(255, 255, 255, 0.28);
}
.sg-workshop-teaser .sg-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08); border-color: white;
}
.sg-workshop-stats {
  position: relative; z-index: 1;
  display: grid; gap: 16px;
}
.sg-workshop-stat {
  display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sg-workshop-stat:last-child { border-bottom: 0; }
.sg-workshop-stat .n {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500; letter-spacing: -0.024em;
  color: #9bc1ff; line-height: 1;
  font-feature-settings: "tnum";
}
.sg-workshop-stat .l strong {
  display: block; font-weight: 600; color: white;
  font-size: 15px; letter-spacing: -0.014em;
  margin-bottom: 2px;
}
.sg-workshop-stat .l span {
  display: block; color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px; line-height: 1.45;
}

/* ============================================================
   PRICING TIERS
   ============================================================ */

/* Billing cadence toggle (Havi / Éves -17%) */
.sg-cadence-wrap {
  display: flex; justify-content: center;
  margin-top: 8px;
}
.sg-cadence-toggle {
  position: relative;
  display: inline-flex; align-items: center;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 6px 18px -10px rgba(13, 13, 20, 0.12);
}
.sg-cadence-slider {
  position: absolute; top: 4px; bottom: 4px;
  background: var(--sg-ink);
  border-radius: 999px;
  transition: left .35s var(--sg-ease), width .35s var(--sg-ease);
  z-index: 0;
  box-shadow: 0 6px 16px -8px rgba(13, 13, 20, 0.4);
}
.sg-cadence-option {
  position: relative; z-index: 1;
  appearance: none; background: transparent; border: 0;
  font-family: inherit;
  font-size: 14px; font-weight: 500;
  color: var(--sg-mute);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .25s var(--sg-ease);
  letter-spacing: -0.005em;
}
.sg-cadence-option:hover { color: var(--sg-ink); }
.sg-cadence-option.is-active { color: white; }
.sg-cadence-savings {
  font-family: var(--sg-font-mono);
  font-size: 10.5px; letter-spacing: 0.04em; font-weight: 600;
  background: var(--sg-blue); color: white;
  padding: 2px 7px; border-radius: 999px;
  line-height: 1.4;
}
.sg-cadence-option.is-active .sg-cadence-savings { background: var(--sg-blue); }

.sg-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 32px;
}
.sg-tier {
  position: relative;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: 32px 28px 28px;
  display: grid; gap: 16px;
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-tier:hover {
  transform: translateY(-3px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.2);
}
.sg-tier.is-featured {
  background: var(--sg-ink); color: white; border-color: var(--sg-ink);
  box-shadow: 0 30px 60px -30px rgba(13, 13, 20, 0.4);
}
.sg-tier.is-featured:hover {
  box-shadow: 0 36px 70px -32px rgba(13, 13, 20, 0.5);
}
.sg-tier-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--sg-blue); color: white;
  font-family: var(--sg-font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  font-weight: 600;
  transition: opacity .25s var(--sg-ease), transform .25s var(--sg-ease);
}
/* "Legnépszerűbb" is a nudge specifically for monthly visitors —
   when Éves is selected, everyone is already on the best deal. */
.sg-tiers[data-cadence="annual"] .sg-tier-badge {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
}
.sg-tier-name {
  font-family: var(--sg-font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--sg-mute); text-transform: uppercase; font-weight: 500;
}
.sg-tier.is-featured .sg-tier-name { color: #9bc1ff; }
.sg-tier-price {
  font-size: 16px; color: var(--sg-slate); margin: 0;
  display: flex; align-items: baseline; gap: 6px;
}
.sg-tier-price strong {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500; letter-spacing: -0.028em;
  color: var(--sg-ink); line-height: 1;
  font-variant-numeric: tabular-nums;   /* digits same width → no jitter mid-tween */
  font-feature-settings: "tnum";
}
.sg-tier.is-featured .sg-tier-price { color: rgba(255, 255, 255, 0.65); }
.sg-tier.is-featured .sg-tier-price strong { color: white; }
.sg-tier-price span { font-family: var(--sg-font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--sg-mute); text-transform: uppercase; }
.sg-tier.is-featured .sg-tier-price span { color: rgba(255, 255, 255, 0.55); }
/* Sub-line under the price: cadence + annual total when "Éves" is active */
.sg-tier-cadence {
  margin: -8px 0 0;
  font-size: 13px; line-height: 1.4;
  color: var(--sg-mute);
  transition: opacity .18s var(--sg-ease), transform .18s var(--sg-ease);
}
.sg-tier-cadence.is-swapping {
  opacity: 0;
  transform: translateY(-2px);
}
.sg-tier-cadence strong {
  font-weight: 600; color: var(--sg-slate);
  font-feature-settings: "tnum";
}
.sg-tier.is-featured .sg-tier-cadence { color: rgba(255, 255, 255, 0.55); }
.sg-tier.is-featured .sg-tier-cadence strong { color: rgba(255, 255, 255, 0.85); }
.sg-tier ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  border-top: 1px solid var(--sg-line);
  padding-top: 18px;
  font-size: 14.5px; color: var(--sg-slate);
}
.sg-tier.is-featured ul { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); }
.sg-tier ul li {
  position: relative; padding-left: 22px;
}
.sg-tier ul li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--sg-blue); font-weight: 700;
}
.sg-tier.is-featured ul li::before { color: #9bc1ff; }
.sg-tier ul li strong { color: var(--sg-ink); font-weight: 600; font-feature-settings: "tnum"; }
.sg-tier.is-featured ul li strong { color: white; }
.sg-tier-cta {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--sg-mute); text-transform: uppercase; font-weight: 500;
  border-top: 1px solid var(--sg-line);
  padding-top: 14px;
}
.sg-tier.is-featured .sg-tier-cta { color: #9bc1ff; border-top-color: rgba(255, 255, 255, 0.15); }
.sg-tier-note {
  font-size: 13.5px; color: var(--sg-slate);
  max-width: 760px; margin: 24px auto 0;
  text-align: center; line-height: 1.55;
}
.sg-tier-note strong { color: var(--sg-ink); font-weight: 600; }

/* "Try the demo first" — explicit free-demo CTA below the pricing tiers */
.sg-try-demo {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 24px; align-items: center;
  background: var(--sg-paper);
  border: 1px solid var(--sg-blue);
  border-radius: var(--sg-radius-lg);
  padding: 24px 28px;
  margin-top: 40px;
  box-shadow: 0 16px 36px -20px rgba(13, 109, 252, 0.35);
}
.sg-try-demo-icon {
  width: 56px; height: 56px;
  background: var(--sg-blue-soft);
  color: var(--sg-blue);
  border-radius: 999px;
  display: grid; place-items: center;
}
.sg-try-demo-icon svg { width: 28px; height: 28px; }
.sg-try-demo-text strong {
  display: block;
  font-size: 17px; font-weight: 600; letter-spacing: -0.014em;
  color: var(--sg-ink); margin-bottom: 4px;
}
.sg-try-demo-text span {
  display: block;
  font-size: 14.5px; line-height: 1.55;
  color: var(--sg-slate);
  max-width: 620px;
}

/* persona router — 2-card variant */
.sg-personas-2 { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   OUTCOMES
   ============================================================ */
.sg-outcomes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 40px;
}
.sg-outcome {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: 28px 24px 26px;
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-outcome:hover {
  transform: translateY(-3px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.18);
}
.sg-outcome-ico {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.sg-outcome-ico svg { width: 22px; height: 22px; }
.sg-outcome h3 {
  font-size: 17px; line-height: 1.25; letter-spacing: -0.016em;
  font-weight: 600; margin: 0 0 8px; color: var(--sg-ink);
}
.sg-outcome p { font-size: 14.5px; color: var(--sg-slate); margin: 0; line-height: 1.55; }

/* ============================================================
   TESTIMONIAL (placeholder until real quotes)
   ============================================================ */
.sg-testimonial {
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 40px 48px;
  margin-top: 40px;
  position: relative;
  display: grid; gap: 20px;
}
.sg-testimonial-mark {
  position: absolute; top: 12px; right: 32px;
  font-family: var(--sg-font-serif); font-style: italic;
  font-size: 96px; color: var(--sg-blue);
  line-height: 1; opacity: 0.18; user-select: none;
  pointer-events: none;
}
.sg-testimonial-quote {
  font-family: var(--sg-font-serif); font-style: italic;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.45;
  color: var(--sg-ink);
  margin: 0; max-width: 760px;
}
.sg-testimonial-quote em {
  font-style: italic; color: var(--sg-blue);
}
.sg-testimonial-meta {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--sg-line);
  font-family: var(--sg-font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sg-mute);
  font-weight: 500;
}

/* ============================================================
   PRODUCT BADGE — "01" / first product marker
   ============================================================ */
.sg-product-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  background: var(--sg-blue); color: white;
  border-radius: 999px;
  font-family: var(--sg-font-mono); font-size: 10px;
  letter-spacing: 0.08em; font-weight: 600;
  margin-right: 6px;
}

/* ============================================================
   ROADMAP — termékcsalád list
   ============================================================ */
.sg-roadmap {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start;
}
.sg-roadmap-text { position: sticky; top: 100px; }
.sg-roadmap-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--sg-line);
}
.sg-roadmap-list li {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--sg-line);
}
.sg-roadmap-list .n {
  font-family: var(--sg-font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--sg-mute); font-weight: 500;
}
.sg-roadmap-list strong {
  display: block; font-weight: 600; color: var(--sg-ink);
  font-size: 17px; letter-spacing: -0.014em; margin-bottom: 2px;
}
.sg-roadmap-list span:not(.n):not(.status) {
  display: block; color: var(--sg-slate); font-size: 14.5px; line-height: 1.5;
}
.sg-roadmap-list .status {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--sg-line);
  color: var(--sg-mute);
  white-space: nowrap;
}
.sg-roadmap-list li.is-live .status {
  background: rgba(21, 128, 61, 0.1);
  color: #15803d; border-color: rgba(21, 128, 61, 0.25);
}
.sg-roadmap-list .status.is-link {
  background: var(--sg-ink); color: white; border-color: var(--sg-ink);
  text-decoration: none;
  transition: background .2s var(--sg-ease);
}
.sg-roadmap-list .status.is-link:hover { background: var(--sg-blue); border-color: var(--sg-blue); }

/* ============================================================
   PHOTO PLACEHOLDER — for future images (team, office, contact)
   ============================================================ */
.sg-photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--sg-bone), var(--sg-cream));
  border: 1px dashed var(--sg-line);
  border-radius: var(--sg-radius);
  display: grid; place-items: center;
  overflow: hidden;
}
/* Slots that already hold a real image get a solid border + no placeholder bg */
.sg-photo-slot:has(img) {
  border-style: solid;
  background: var(--sg-line-soft);
}
.sg-photo-slot.is-square { aspect-ratio: 1; border-radius: 999px; }
.sg-photo-slot.is-portrait { aspect-ratio: 3 / 4; }
.sg-photo-slot.is-wide { aspect-ratio: 16 / 9; }
.sg-photo-slot::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(13, 109, 252, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 109, 252, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.sg-photo-slot .ph-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sg-font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sg-mute); font-weight: 500;
  padding: 6px 12px;
  background: white; border: 1px solid var(--sg-line);
  border-radius: 999px;
}
.sg-photo-slot .ph-label svg {
  width: 14px; height: 14px; color: var(--sg-blue);
}
.sg-photo-slot img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; z-index: 2;
}

/* ============================================================
   PRODUCT: INVOICESTAR
   ============================================================ */
.sg-product { background: var(--sg-bone); border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
.sg-product-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center;
}
/* Grid items default to min-width:auto which lets long words / balanced
   headlines push the track wider than the container. Force them to honour
   the track width — without this the H2 italic word ("asszisztense.")
   bleeds past viewport on mobile. */
.sg-product-grid > * { min-width: 0; }
.sg-product-text { }
.sg-product-text h2 {
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04;
  letter-spacing: -0.034em; font-weight: 500; margin: 0 0 22px;
}
.sg-product-text h2 em, .sg-product-text h2 .gr {
  font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: var(--sg-blue);
}
.sg-product-lead { font-size: 18px; line-height: 1.6; color: var(--sg-slate); max-width: 520px; margin: 0 0 32px; }
.sg-product-lead strong { color: var(--sg-ink); font-weight: 600; }

.sg-product-points {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
}
.sg-product-points li {
  padding: 16px 18px 16px 50px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  position: relative;
}
.sg-product-points li::before {
  content: "✓";
  position: absolute; left: 16px; top: 18px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--sg-blue); color: white;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  line-height: 1;
}
.sg-product-points strong { display: block; font-weight: 600; color: var(--sg-ink); margin-bottom: 3px; font-size: 15.5px; letter-spacing: -0.012em; }
.sg-product-points span { display: block; color: var(--sg-slate); font-size: 14.5px; line-height: 1.55; }

.sg-product-ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* === App mock — realistic interface === */
.sg-app-mock {
  background: var(--sg-ink); color: white;
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  box-shadow:
    0 40px 80px -28px rgba(13, 13, 20, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--sg-font-sans);
  position: relative;
}
.sg-app-mock-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--sg-font-mono); font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.sg-app-mock-bar .dots { display: flex; gap: 6px; }
.sg-app-mock-bar .dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.sg-app-mock-bar .addr {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-app-mock-bar .tab {
  background: rgba(13, 109, 252, 0.18); color: #9bc1ff;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--sg-font-sans); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600;
}
.sg-app-mock-body {
  padding: 0;
}
.sg-mock-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr 0.7fr 0.6fr 0.7fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  align-items: center;
  color: rgba(255, 255, 255, 0.88);
}
.sg-mock-row.is-head {
  font-family: var(--sg-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5); text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  padding-top: 11px; padding-bottom: 11px;
}
.sg-mock-row.is-attention { background: rgba(180, 83, 9, 0.08); border-left: 2px solid #f59e0b; padding-left: 18px; }
.sg-mock-row .num { font-family: var(--sg-font-mono); color: rgba(255, 255, 255, 0.75); font-size: 12px; }
.sg-mock-row .conf {
  font-family: var(--sg-font-mono); font-size: 11.5px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px;
}
.sg-mock-row .conf.high { background: rgba(21, 128, 61, 0.18); color: #6ee7a0; }
.sg-mock-row .conf.mid  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.sg-mock-row .conf.low  { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }

.sg-app-mock-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: rgba(13, 109, 252, 0.08);
  border-top: 1px solid rgba(13, 109, 252, 0.2);
}
.sg-mock-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.86);
}
.sg-mock-pill .pill {
  background: var(--sg-blue); color: white;
  font-family: var(--sg-font-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
  font-weight: 600;
}
.sg-mock-btn {
  background: var(--sg-blue); color: white;
  border: 0; border-radius: 999px;
  padding: 9px 16px; font-family: inherit; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: default;
}

/* ============================================================
   FEATURES (bento-aware)
   ============================================================ */
.sg-features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 56px;
}
.sg-feature {
  padding: 28px 24px 26px;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  background: var(--sg-paper);
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-feature:hover {
  transform: translateY(-3px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.2);
}
.sg-feature .ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.sg-feature .ico svg { width: 22px; height: 22px; }
.sg-feature h3 {
  font-size: 18px; line-height: 1.25; letter-spacing: -0.018em;
  font-weight: 600; margin: 0 0 8px;
  color: var(--sg-ink);
}
.sg-feature p { font-size: 15px; color: var(--sg-slate); margin: 0; line-height: 1.55; }

/* ============================================================
   STEPS
   ============================================================ */
.sg-steps { display: grid; gap: 0; margin-top: 32px; border-top: 2px solid var(--sg-ink); }
.sg-step {
  display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 40px;
  padding: 36px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--sg-line);
  border-radius: 8px;
  align-items: start;
  transition: background-color .25s var(--sg-ease);
}
.sg-step:hover { background-color: var(--sg-bone); }
.sg-step .n {
  font-family: var(--sg-font-mono); font-size: 12px; color: var(--sg-mute); letter-spacing: 0.14em;
  padding-top: 6px; font-weight: 500;
  transition: color .25s var(--sg-ease);
}
.sg-step:hover .n { color: var(--sg-blue); }
.sg-step h3 {
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.024em;
  font-weight: 500; margin: 0 0 12px;
  color: var(--sg-ink);
}
.sg-step h3 em { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: var(--sg-blue); }
.sg-step p { font-size: 16px; color: var(--sg-slate); margin: 0; line-height: 1.6; }

/* ============================================================
   TWOCOL — integrations & security pattern
   ============================================================ */
.sg-twocol {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;
}
.sg-twocol-text { position: sticky; top: 100px; }

.sg-secgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.sg-sec {
  padding: 26px 24px;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  background: var(--sg-paper);
  transition: transform .25s var(--sg-ease), border-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-sec:hover {
  transform: translateY(-2px);
  border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.16);
}
.sg-sec-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--sg-blue-soft); color: var(--sg-blue);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.sg-sec-ico svg { width: 20px; height: 20px; }
.sg-sec h3 { font-size: 17px; letter-spacing: -0.016em; font-weight: 600; color: var(--sg-ink); margin: 0 0 6px; }
.sg-sec p { font-size: 14.5px; color: var(--sg-slate); margin: 0; line-height: 1.55; }

/* ============================================================
   QUOTE / FEATURE CARD
   ============================================================ */
.sg-feature-card {
  background: var(--sg-ink); color: white;
  border-radius: var(--sg-radius-lg);
  padding: 56px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.sg-feature-card::after {
  content: ""; position: absolute;
  right: -160px; bottom: -160px;
  width: 400px; height: 400px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(13, 109, 252, 0.5) 0%, transparent 60%);
}
.sg-feature-card .t {
  font-size: clamp(24px, 3vw, 38px); line-height: 1.18; letter-spacing: -0.024em;
  font-weight: 500; margin: 0;
  position: relative; z-index: 1;
  max-width: 760px;
}
.sg-feature-card .t em { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: #9bc1ff; }
.sg-feature-card .ctas { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.sg-feature-card .sg-btn-primary { box-shadow: 0 14px 30px -12px rgba(13, 109, 252, 0.75); }
.sg-feature-card .sg-btn-ghost { color: white; border-color: rgba(255, 255, 255, 0.28); }
.sg-feature-card .sg-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: white; }

/* ============================================================
   FAQ
   ============================================================ */
.sg-faq-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;
}
.sg-faq-grid > div:first-child { position: sticky; top: 100px; }

.sg-faq { display: grid; gap: 0; border-top: 1px solid var(--sg-line); }
.sg-faq details {
  border-bottom: 1px solid var(--sg-line);
  padding: 4px 0;
}
.sg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 48px 22px 0;
  font-size: 17px; font-weight: 500; letter-spacing: -0.014em;
  color: var(--sg-ink);
  position: relative;
  transition: color .15s ease;
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--sg-line);
  border-radius: 999px;
  font-size: 16px; font-weight: 400; line-height: 1;
  transition: transform .25s var(--sg-ease), background .25s var(--sg-ease), color .25s var(--sg-ease);
}
.sg-faq summary:hover { color: var(--sg-blue); }
.sg-faq summary:hover::after { border-color: var(--sg-blue); color: var(--sg-blue); }
.sg-faq details[open] summary::after {
  content: "−"; background: var(--sg-ink); color: white; border-color: var(--sg-ink);
}
.sg-faq details p {
  margin: 0 0 22px;
  padding-right: 48px;
  font-size: 15.5px; line-height: 1.65;
  color: var(--sg-slate);
}

/* ============================================================
   KNOWLEDGE TEASER
   ============================================================ */
.sg-kn-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center;
}
.sg-kn-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  padding: 26px;
  background: var(--sg-paper);
  transition: transform .2s var(--sg-ease), border-color .2s var(--sg-ease), box-shadow .2s var(--sg-ease);
}
.sg-kn-card:hover {
  transform: translateY(-2px); border-color: var(--sg-ink);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.18);
}
.sg-kn-card .meta {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--sg-blue); text-transform: uppercase; margin-bottom: 12px;
  font-weight: 500;
}
.sg-kn-card h3 { font-size: 19px; letter-spacing: -0.018em; margin: 0 0 8px; color: var(--sg-ink); font-weight: 600; }
.sg-kn-card p { font-size: 14.5px; color: var(--sg-slate); margin: 0 0 16px; line-height: 1.55; }
.sg-kn-card .more { font-size: 13.5px; font-weight: 500; color: var(--sg-ink); display: inline-flex; align-items: center; gap: 6px; }
.sg-kn-card:hover .more { color: var(--sg-blue); }
.sg-kn-card:hover .more .arrow { transform: translateX(4px); }
.sg-kn-card .arrow { transition: transform .2s var(--sg-ease); }

.sg-kn-list { display: grid; gap: 12px; }

/* ============================================================
   TEAM
   ============================================================ */
.sg-team {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
}
.sg-team-card {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: 32px 28px 28px;
  background: var(--sg-paper);
  position: relative;
  transition: border-color .2s var(--sg-ease), transform .2s var(--sg-ease), box-shadow .2s var(--sg-ease);
}
.sg-team-card:hover {
  border-color: var(--sg-ink); transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px rgba(13, 13, 20, 0.2);
}
.sg-team-card .avatar {
  width: 64px; height: 64px;
  border-radius: 999px; background: var(--sg-blue);
  display: grid; place-items: center;
  margin-bottom: 24px;
  font-family: var(--sg-font-mono); font-size: 21px;
  color: white; letter-spacing: -0.01em;
  font-weight: 500;
  box-shadow: 0 12px 28px -10px rgba(13, 109, 252, 0.5);
}
.sg-team-card .sg-team-photo {
  width: 80px; height: 80px;
  margin-bottom: 22px;
  border-style: solid;
  border-color: var(--sg-line);
}
.sg-team-card .sg-team-photo .ph-label {
  font-size: 9.5px; padding: 4px 8px;
  letter-spacing: 0.1em;
}
.sg-team-card .sg-team-photo .ph-label svg { width: 11px; height: 11px; }
.sg-team-card .role {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--sg-blue); text-transform: uppercase;
  margin: 0 0 6px; font-weight: 500;
}
.sg-team-card h3 {
  font-size: 21px; letter-spacing: -0.022em; font-weight: 600;
  margin: 0 0 14px; color: var(--sg-ink);
}
.sg-team-card p {
  font-size: 14.5px; line-height: 1.6; color: var(--sg-slate);
  margin: 0;
}

/* ============================================================
   VALUES
   ============================================================ */
.sg-values {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 40px;
}
.sg-value {
  padding-top: 18px;
  border-top: 2px solid var(--sg-ink);
}
.sg-value .n {
  font-family: var(--sg-font-mono); font-size: 11px; color: var(--sg-mute);
  letter-spacing: 0.14em; margin-bottom: 14px; font-weight: 500;
}
.sg-value .h {
  font-size: 21px; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-weight: 500;
  color: var(--sg-ink);
}
.sg-value .h em { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: var(--sg-blue); }
.sg-value .b {
  font-size: 14.5px; color: var(--sg-slate); line-height: 1.55;
}

/* ============================================================
   CONTACT
   ============================================================ */
.sg-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.sg-contact-card {
  background: var(--sg-bone); border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  padding: 40px;
}
.sg-contact-card h3 { font-size: 22px; margin: 0 0 12px; letter-spacing: -0.022em; color: var(--sg-ink); }

.sg-contact-intro {
  font-size: 15px; line-height: 1.55; color: var(--sg-slate);
  margin: 0 0 22px;
}

/* Chat-first contact card — Chatwoot is the central channel. The card
   leads with "open the chat" and offers e-mail as a secondary path
   (which also lands in the same Chatwoot inbox). */
.sg-contact-chat { text-align: center; }
.sg-contact-chat-ico {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--sg-blue-soft);
  color: var(--sg-blue);
}
.sg-contact-chat-ico svg { width: 28px; height: 28px; }
.sg-contact-chat h3 { margin-bottom: 10px; }
.sg-contact-chat .sg-contact-intro {
  margin-left: auto; margin-right: auto;
  max-width: 400px;
}
.sg-contact-chat .sg-btn-lg {
  width: 100%;
  justify-content: center;
}
.sg-contact-or {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 22px;
  font-family: var(--sg-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sg-mute);
}
.sg-contact-or::before, .sg-contact-or::after {
  content: ""; flex: 1; height: 1px; background: var(--sg-line);
}
.sg-contact-email-big {
  display: inline-block;
  font-size: 17px; font-weight: 500; color: var(--sg-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  word-break: break-word;
}
.sg-contact-email-big:hover { color: var(--sg-blue-deep); }
.sg-contact-fallback {
  font-size: 13.5px; color: var(--sg-mute); line-height: 1.5;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--sg-line);
}
.sg-contact-fallback a {
  color: var(--sg-blue); font-weight: 500;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.sg-form { display: grid; gap: 18px; }
.sg-field { display: grid; gap: 6px; }
.sg-field label {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--sg-mute); text-transform: uppercase;
  font-weight: 500;
}
.sg-field input, .sg-field textarea, .sg-field select {
  font-family: inherit; font-size: 16px;
  padding: 14px 16px;
  min-height: 48px;
  border: 1px solid var(--sg-line); border-radius: 10px;
  background: white; color: var(--sg-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sg-field input:focus, .sg-field textarea:focus, .sg-field select:focus {
  outline: none; border-color: var(--sg-blue);
  box-shadow: 0 0 0 4px rgba(13, 109, 252, 0.14);
}
.sg-field textarea { resize: vertical; min-height: 130px; }

/* Submit button loading + status banner + success card for the contact form.
   The form posts JSON to the Cloudflare Worker; on success the form is
   replaced by the success card, on error a status banner appears under
   the submit button. */
.sg-btn[data-cf-submit][aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}
.sg-form-status {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px; line-height: 1.5;
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid rgba(185, 28, 28, 0.2);
  color: var(--sg-error);
}
.sg-form-success {
  text-align: center;
  padding: 32px 28px 28px;
}
.sg-form-success-mark {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--sg-blue-soft);
  color: var(--sg-blue);
}
.sg-form-success-mark svg { width: 28px; height: 28px; }
.sg-form-success h4 {
  margin: 0 0 8px;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--sg-ink);
}
.sg-form-success p {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: var(--sg-slate);
}

.sg-contact-info { display: grid; gap: 0; }
.sg-contact-photo { margin-bottom: 24px; }
.sg-contact-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sg-line);
}
.sg-contact-row:first-child { padding-top: 0; }
.sg-contact-row:last-child { border-bottom: 0; }
.sg-contact-row .lbl {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--sg-mute); text-transform: uppercase;
  font-weight: 500;
}
.sg-contact-row .v {
  font-size: 18px; letter-spacing: -0.012em;
}
.sg-contact-row .v a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sg-line); padding-bottom: 2px; }
.sg-contact-row .v a:hover { color: var(--sg-blue); border-bottom-color: var(--sg-blue); }

/* ============================================================
   KNOWLEDGE GRID
   ============================================================ */
/* Knowledge base: denser layout so 3-column grid scales to many articles
   without ballooning the page. Same tokens, less padding. */
.sg-pagehead-compact { padding-bottom: 56px; }
.sg-pagehead-compact .sg-pagehead-inner p { max-width: 560px; }

.sg-kn-section { padding-top: 48px; padding-bottom: 80px; }
.sg-kn-header { margin-bottom: 20px; }
.sg-kn-header .sg-h3 { margin: 0; }

.sg-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sg-article {
  display: grid; grid-template-rows: auto auto 1fr auto;
  text-decoration: none; color: inherit;
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius);
  padding: 22px 22px 20px;
  background: var(--sg-paper);
  transition: transform .2s var(--sg-ease), border-color .2s var(--sg-ease), box-shadow .2s var(--sg-ease);
}
.sg-article.is-featured {
  background: var(--sg-ink); color: white;
  border-color: var(--sg-ink);
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center;
  padding: 32px 36px;
}
.sg-article:hover { transform: translateY(-2px); border-color: var(--sg-ink); box-shadow: 0 18px 40px -24px rgba(13, 13, 20, 0.18); }
.sg-article.is-featured:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -28px rgba(13, 13, 20, 0.45); }
.sg-article .meta {
  font-family: var(--sg-font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--sg-blue); text-transform: uppercase; margin-bottom: 10px;
  font-weight: 500;
}
.sg-article.is-featured .meta { color: #9bc1ff; font-size: 11px; margin-bottom: 14px; }
.sg-article h3 {
  font-size: 17px; line-height: 1.3; letter-spacing: -0.018em; font-weight: 600;
  margin: 0 0 8px; color: var(--sg-ink);
}
.sg-article.is-featured h3 {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15;
  letter-spacing: -0.026em; font-weight: 500; color: white; margin-bottom: 12px;
}
.sg-article p {
  font-size: 14px; color: var(--sg-slate); margin: 0 0 16px; line-height: 1.5;
  /* line-clamp keeps grid rows visually even when titles wrap differently */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-article.is-featured p {
  color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.55;
  max-width: 460px; margin-bottom: 20px;
  -webkit-line-clamp: 3;
}
.sg-article .more {
  font-size: 13px; font-weight: 500; color: var(--sg-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.sg-article.is-featured .more { color: white; font-size: 14px; }
.sg-article .more .arrow { transition: transform .2s var(--sg-ease); }
.sg-article:hover .more .arrow { transform: translateX(4px); }
.sg-article .visual {
  display: grid; place-items: center;
  aspect-ratio: 1.4 / 1;
  background:
    radial-gradient(circle at 30% 30%, rgba(13, 109, 252, 0.35), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border-radius: var(--sg-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sg-article .visual img { width: 50%; max-width: 180px; }

/* Slim inline "Hamarosan" placeholder — replaces the old big box. */
.sg-kn-soon {
  margin: 24px 0 0;
  padding: 16px 20px;
  font-size: 14px; color: var(--sg-slate);
  background: var(--sg-bone);
  border: 1px dashed var(--sg-line);
  border-radius: var(--sg-radius);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  line-height: 1.5;
}
.sg-kn-soon .lbl {
  font-family: var(--sg-font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--sg-mute); text-transform: uppercase; font-weight: 500;
  padding: 4px 10px; background: var(--sg-paper); border: 1px solid var(--sg-line);
  border-radius: 999px; flex-shrink: 0;
}
.sg-kn-soon a {
  color: var(--sg-blue); font-weight: 500;
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   FOOTER
   ============================================================ */
.sg-foot {
  padding: 96px 32px 48px;
  background: var(--sg-ink);
  color: white;
  position: relative; overflow: hidden;
}
.sg-foot::before {
  content: ""; position: absolute;
  right: -120px; top: -80px;
  width: 320px; height: 320px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.sg-foot::after {
  content: ""; position: absolute;
  right: -240px; top: -200px;
  width: 540px; height: 540px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.sg-foot-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  position: relative; z-index: 1;
}
.sg-foot h4 {
  font-family: var(--sg-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6);
  font-weight: 500; margin: 0 0 18px;
}
.sg-foot .big {
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2;
  letter-spacing: -0.024em; font-weight: 500;
  max-width: 380px; margin: 0 0 28px;
}
.sg-foot .big em { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: #9bc1ff; }
.sg-foot ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, 0.78);
}
.sg-foot ul a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.sg-foot ul a:hover { color: white; border-bottom-color: rgba(255, 255, 255, 0.4); }
.sg-foot .brand-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.018em;
}
.sg-foot .brand-row img {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px -2px rgba(13, 109, 252, 0.65);
}
.sg-foot .brand-row .gr { font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: #9bc1ff; }

.sg-foot-meta {
  max-width: 1280px; margin: 64px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.sg-foot-meta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sg-blue); display: inline-block; margin-right: 8px; vertical-align: 1px; }

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.sg-pagehead {
  padding: 72px 32px 88px;
  border-bottom: 1px solid var(--sg-line);
  background:
    radial-gradient(700px 480px at 85% 15%, rgba(13, 109, 252, 0.08), transparent 60%),
    var(--sg-paper);
}
.sg-pagehead-inner {
  max-width: 1280px; margin: 0 auto;
}
.sg-pagehead h1 {
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.02; letter-spacing: -0.036em; font-weight: 500;
  margin: 0 0 24px;
  text-wrap: balance;
}
.sg-pagehead h1 em, .sg-pagehead h1 .gr {
  font-family: var(--sg-font-serif); font-style: italic; font-weight: 400; color: var(--sg-blue);
}
.sg-pagehead p {
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5;
  color: var(--sg-slate); max-width: 720px;
  margin: 0;
}
.sg-breadcrumbs {
  font-family: var(--sg-font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--sg-mute); text-transform: uppercase;
  margin-bottom: 28px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-weight: 500;
}
.sg-breadcrumbs a { color: inherit; text-decoration: none; }
.sg-breadcrumbs a:hover { color: var(--sg-ink); }
.sg-breadcrumbs .sep { color: var(--sg-line); }

/* ============================================================
   ARTICLE LAYOUT
   ============================================================ */
.sg-article-body {
  max-width: 720px; margin: 0 auto;
  font-size: 17px; line-height: 1.7; color: var(--sg-slate);
}
.sg-article-body h2 {
  font-size: 28px; letter-spacing: -0.024em; color: var(--sg-ink);
  margin: 48px 0 12px; font-weight: 500;
}
.sg-article-body h3 {
  font-size: 22px; letter-spacing: -0.02em; color: var(--sg-ink);
  margin: 32px 0 10px; font-weight: 500;
}
.sg-article-body p { margin: 0 0 18px; }
.sg-article-body ul { padding-left: 22px; margin: 0 0 18px; }
.sg-article-body ul li { margin-bottom: 8px; }
.sg-article-body blockquote {
  border-left: 3px solid var(--sg-blue);
  margin: 24px 0; padding: 8px 0 8px 20px;
  font-family: var(--sg-font-serif); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.45; color: var(--sg-ink);
}

/* Sub-processor table on the privacy page */
.sg-subproc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14.5px;
}
.sg-subproc-table th,
.sg-subproc-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sg-line);
  vertical-align: top;
}
.sg-subproc-table thead th {
  font-family: var(--sg-font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sg-mute); font-weight: 500;
  border-bottom: 1.5px solid var(--sg-line);
}
.sg-subproc-table tbody td:first-child { color: var(--sg-ink); font-weight: 500; }
.sg-subproc-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .sg-subproc-table { font-size: 13px; }
  .sg-subproc-table th, .sg-subproc-table td { padding: 9px 8px; }
}

/* ============================================================
   UTILS / RESPONSIVE
   ============================================================ */
.sg-mt-0 { margin-top: 0 !important; }
.sg-mt-sm { margin-top: 16px; }
.sg-mt-md { margin-top: 32px; }
.sg-mt-lg { margin-top: 64px; }

.hide-sm { /* visible on desktop */ }

@media (max-width: 1080px) {
  .sg-section { padding: 96px 28px; }
  .sg-section-tight { padding: 56px 28px; }
  .sg-hero { padding: 48px 28px 80px; }
  .sg-hero-inner { gap: 48px; }
  .sg-features { grid-template-columns: repeat(2, 1fr); }
  .sg-outcomes { grid-template-columns: repeat(2, 1fr); }
  .sg-values { grid-template-columns: repeat(2, 1fr); }
  .sg-team { grid-template-columns: repeat(2, 1fr); }
  .sg-personas { grid-template-columns: 1fr; }
  .sg-personas-2 { grid-template-columns: 1fr; }
  .sg-tiers { grid-template-columns: 1fr; gap: 16px; }
  .sg-articles { grid-template-columns: repeat(2, 1fr); }
  .sg-article.is-featured { padding: 28px 28px; gap: 28px; }
  .sg-try-demo { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; text-align: center; }
  .sg-try-demo-icon { margin: 0 auto; }
  .sg-try-demo-text span { max-width: none; }
  .sg-try-demo .sg-btn { justify-self: center; }
  .sg-workshop-grid { grid-template-columns: 1fr; gap: 40px; }
  .sg-workshop-grid > div:first-child { position: static; }
  .sg-workshop-teaser { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
  .sg-agenda > li { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .sg-agenda-time { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; }
  .sg-agenda-time strong { font-size: 22px; }
  .sg-product-grid { gap: 48px; }
  .sg-twocol { grid-template-columns: 1fr; gap: 40px; }
  .sg-twocol-text { position: static; }
  .sg-testi-grid { grid-template-columns: 1fr; gap: 32px; }
  .sg-foot-strips { grid-template-columns: 1fr; gap: 18px; }
  .sg-roadmap { grid-template-columns: 1fr; gap: 32px; }
  .sg-roadmap-text { position: static; }
  .sg-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .sg-faq-grid > div:first-child { position: static; }
  .sg-feature-card { grid-template-columns: 1fr; gap: 24px; padding: 40px; }
  .sg-foot-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .sg-foot-inner > :nth-child(4) { grid-column: 1 / -1; }
  .sg-trust-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sg-secgrid { grid-template-columns: 1fr; }
  .sg-mock-row { grid-template-columns: 1.2fr 1.4fr 0.7fr 0.6fr 0.7fr; }
  .sg-mock-row .hide-sm { display: none; }
  .sg-testimonial { padding: 32px 36px; }
  .sg-testimonial-mark { font-size: 72px; right: 24px; top: 8px; }
}

@media (max-width: 820px) {
  body { font-size: 17px; }              /* mobile typography bump per research */

  .sg-nav-inner { padding: 10px 16px; gap: 12px; min-height: 60px; }
  .sg-nav-links { display: none; }
  .sg-nav-links.is-open {
    display: flex; flex-direction: column;
    align-items: stretch;              /* override default :center alignment */
    position: absolute; top: 100%; left: 0; right: 0;
    background: white; padding: 16px 20px 24px;
    border-bottom: 1px solid var(--sg-line);
    gap: 4px;
    box-shadow: 0 24px 40px -20px rgba(13, 13, 20, 0.2);
  }
  .sg-nav-links.is-open a {
    padding: 14px 2px; font-size: 17px;
    text-align: left;
    border-bottom: 1px solid var(--sg-line-soft);
  }
  /* Active link underline indicator — full-width feels cleaner in stacked nav */
  .sg-nav-links.is-open a::after { display: none; }
  .sg-nav-links.is-open a.is-active {
    color: var(--sg-blue);
    font-weight: 600;
  }
  .sg-nav-links.is-open a:last-child { border-bottom: 0; }
  .sg-nav-links.is-open .sg-nav-sep {
    width: auto; height: auto; background: none;
    margin: 4px 0 0;
    display: block;
    font-family: var(--sg-font-mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--sg-mute);
    text-transform: uppercase;
    padding-top: 12px;
    border-top: 1px solid var(--sg-line);
  }
  .sg-nav-links.is-open .sg-nav-sep::before { content: "Az oldalon"; }
  .sg-nav-toggle {
    display: inline-flex;
    order: 99;              /* push to the end of the flex row → right side */
    margin-left: auto;       /* fallback when spacer is hidden / collapses */
  }
  .sg-nav-cta { display: none; }

  .sg-section { padding: 72px 20px; }
  .sg-section-tight { padding: 40px 20px; }
  .sg-hero { padding: 32px 20px 56px; }
  .sg-hero-inner {
    grid-template-columns: 1fr; gap: 40px; min-height: 0;
  }
  .sg-hero-visual { order: 2; padding: 16px 0; }
  .sg-hero-mark { max-width: 200px; }
  .sg-hero-mark::before { inset: -18px; }
  .sg-hero-mark::after { inset: -42px; }
  .sg-hero-chip { display: none; }
  .sg-hero-text { order: 1; }
  .sg-hero-kicker { font-size: 11px; }
  .sg-hero h1 { font-size: clamp(34px, 8.5vw, 56px); }
  .sg-hero-tag { font-size: 17px; }
  /* Each button gets full width and stacks. Stops "Csomagok megnézése →"
     from clipping when forced into a 50/50 row. */
  .sg-hero-ctas { flex-direction: column; align-items: stretch; }
  .sg-hero-ctas .sg-btn { width: 100%; }
  .sg-hero-proof { padding-top: 20px; gap: 14px 22px; font-size: 14px; }

  .sg-trust-inner { padding: 20px 20px; grid-template-columns: 1fr 1fr; gap: 16px; }
  .sg-trust-item { font-size: 13px; gap: 10px; }
  .sg-trust-item svg { width: 22px; height: 22px; }
  .sg-trust-item strong { font-size: 13.5px; }
  .sg-trust-item span { font-size: 12px; }

  .sg-product-grid { grid-template-columns: 1fr; gap: 40px; }
  .sg-product-text h2 { font-size: clamp(30px, 7vw, 40px); }
  .sg-product-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .sg-product-ctas .sg-btn { width: 100%; }

  /* App mock — mobile: simplified columns */
  .sg-mock-row { grid-template-columns: 1.4fr 0.8fr 0.7fr; padding: 12px 16px; font-size: 12.5px; gap: 12px; }
  .sg-mock-row > :nth-child(2),   /* hide partner on mobile */
  .sg-mock-row > :nth-child(3),   /* hide bruttó */
  .sg-mock-row > :nth-child(5) {  /* hide ÁFA */
    display: none;
  }
  .sg-mock-row .conf { font-size: 11px; min-width: 38px; padding: 2px 6px; }
  .sg-app-mock-bar { padding: 10px 14px; font-size: 11px; }
  .sg-app-mock-foot { padding: 12px 14px; flex-direction: column; align-items: stretch; gap: 10px; }
  .sg-mock-pill { font-size: 12px; }
  .sg-mock-btn { width: 100%; justify-content: center; padding: 11px 16px; min-height: 40px; }

  .sg-features { grid-template-columns: 1fr; gap: 14px; }
  .sg-outcomes { grid-template-columns: 1fr; gap: 14px; }
  .sg-roi { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
  .sg-roi-field { grid-template-columns: 1fr 90px 50px; gap: 8px; padding: 10px 12px; }
  .sg-roi-field label { font-size: 13px; }
  .sg-roi-field input { font-size: 16px; padding: 7px 10px; }
  .sg-roi-out-row .val { font-size: 22px; }
  .sg-values { grid-template-columns: 1fr; gap: 16px; }
  .sg-team { grid-template-columns: 1fr; }
  .sg-persona { padding: 18px 20px; grid-template-columns: 44px 1fr 20px; gap: 14px; }
  .sg-persona-ico { width: 44px; height: 44px; }
  .sg-problem-list { grid-template-columns: 1fr; gap: 10px; }
  .sg-testi-card { padding: 28px 24px 22px; }
  .sg-testi-mark { display: none; }
  .sg-foot-strip { padding: 24px 22px 20px; }
  .sg-workshop-teaser { padding: 28px 24px; }
  .sg-workshop-form { padding: 24px 20px; }
  .sg-workshop-form .sg-field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .sg-workshop-form .sg-field-row .sg-field { margin-bottom: 16px; }
  .sg-pagehead-ctas { gap: 10px; flex-direction: column; align-items: stretch; }
  .sg-pagehead-ctas .sg-btn { width: 100%; }
  .sg-roadmap-list li { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; }
  .sg-roadmap-list .status { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
  .sg-testimonial { padding: 28px 24px; }
  .sg-testimonial-mark { display: none; }
  .sg-testimonial-meta { flex-direction: column; align-items: flex-start; }
  .sg-step {
    grid-template-columns: 50px 1fr; padding: 24px 12px; gap: 16px;
    margin: 0 -12px;       /* tighter negative margin on mobile so the row */
                            /* doesn't push past the section padding */
  }
  .sg-step > div:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  .sg-step p { font-size: 15.5px; }
  .sg-kn-grid { grid-template-columns: 1fr; gap: 24px; }
  .sg-foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sg-foot-inner > :first-child { grid-column: 1 / -1; }
  .sg-foot-meta { flex-direction: column; gap: 8px; text-align: left; }
  .sg-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .sg-contact-card { padding: 28px 24px; }
  .sg-articles { grid-template-columns: 1fr; }
  .sg-article { padding: 20px 20px 18px; }
  .sg-article.is-featured { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .sg-article .visual { aspect-ratio: 1.6 / 1; }
  .sg-kn-section { padding-top: 32px; padding-bottom: 56px; }
  .sg-kn-header { margin-bottom: 14px; }
  .sg-feature-card { padding: 32px 24px; }
  .sg-feature-card .ctas { flex-direction: column; align-items: stretch; }
  .sg-feature-card .ctas .sg-btn { width: 100%; }
  .sg-pagehead { padding: 48px 20px 64px; }
  .sg-faq summary { font-size: 16px; padding: 18px 44px 18px 0; }
  .sg-faq details p { padding-right: 0; font-size: 15px; }
}

/* ============================================================
   PHONE-SPECIFIC TUNING (≤ 520px)
   The 820px breakpoint catches all "mobile + tablet". This block
   tightens spacing and typography for the real-phone size range
   (iPhone SE 375, iPhone 14 390, iPhone 14 Pro Max 430).
   ============================================================ */
@media (max-width: 520px) {
  body { font-size: 16.5px; }

  /* Section padding — give back vertical real estate on phones */
  .sg-section { padding: 60px 18px; }
  .sg-section-tight { padding: 36px 18px; }
  .sg-hero { padding: 28px 18px 48px; }
  .sg-hero-inner { gap: 28px; }

  /* Headline scale — slightly smaller min so long Hungarian words
     ("Mesterséges Intelligencia minden könyvelőnek.") never feel
     squeezed against the edge. */
  .sg-hero h1 { font-size: clamp(32px, 8.2vw, 48px); line-height: 1.04; }
  .sg-h1 { font-size: clamp(32px, 8.2vw, 56px); }
  .sg-h2 { font-size: clamp(26px, 7.2vw, 38px); }
  .sg-product-text h2 { font-size: clamp(26px, 7.2vw, 38px); }
  .sg-h3 { font-size: clamp(18px, 4.6vw, 22px); }

  /* Body / lead text */
  .sg-lead { font-size: 16px; line-height: 1.55; margin-bottom: 32px; }
  .sg-hero-tag { font-size: 16px; }
  .sg-hero-kicker { font-size: 10.5px; letter-spacing: 0.14em; }

  /* Decorative hero mark — give the icon more breathing room */
  .sg-hero-mark { max-width: 168px; }
  .sg-hero-visual { padding: 8px 0 4px; }

  /* Trust band always 1 column on phones — 2-col was cramping the
     labels at 375. */
  .sg-trust-inner { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px; }

  /* Pricing tiers — slightly less padding on phones */
  .sg-tier { padding: 24px 22px; }
  .sg-tier-name { font-size: 14px; }
  .sg-tier-price strong { font-size: clamp(34px, 9vw, 44px); }

  /* Footer brand block + columns — bigger text on phones for tap reach */
  .sg-foot { padding: 56px 18px 32px; }
  .sg-foot-inner { gap: 28px; }
  .sg-foot ul li { padding: 6px 0; }

  /* Contact form spacing */
  .sg-contact-card { padding: 24px 20px; }
  .sg-contact-info { padding: 4px 0; }
  .sg-contact-row { padding: 14px 0; }

  /* Pagehead breadcrumb + title for sub-pages */
  .sg-pagehead { padding: 36px 18px 48px; }
  .sg-pagehead h1 { font-size: clamp(32px, 8.2vw, 56px); }

  /* Reveal: slightly less drop so animation feels lighter on phones */
  html.sg-js-anim .sg-reveal { transform: translateY(12px); }
}

/* Very narrow phones (iPhone SE 1st gen, old Android) */
@media (max-width: 360px) {
  .sg-section, .sg-section-tight, .sg-hero, .sg-pagehead { padding-left: 14px; padding-right: 14px; }
  .sg-hero h1 { font-size: clamp(28px, 8vw, 40px); }
  .sg-h2 { font-size: clamp(24px, 6.8vw, 32px); }
  .sg-tier { padding: 22px 18px; }
}

/* ============================================================
   STICKY CTA — appears after scroll, dismissible
   Desktop: bottom-right pill. Mobile: full-width bottom bar.
   Smooth fade + slide via opacity/transform — the [hidden] attribute
   is overridden so it doesn't trigger display:none (which breaks
   transitions). Visibility delay so the element exits cleanly.
   ============================================================ */
.sg-mobile-cta {
  position: fixed;
  z-index: 70;
  display: flex; align-items: center;
  gap: 10px;                /* gap between × and the CTA button */
  opacity: 1;
  visibility: visible;
  /* Bar lives bottom-left (Chatwoot launcher owns bottom-right). The
     animation slides it in horizontally from a small left-offset. */
  transform: translateX(0);
  transition:
    opacity .35s var(--sg-ease),
    transform .45s var(--sg-ease),
    visibility 0s linear 0s;
}
.sg-mobile-cta[hidden] {
  display: flex;            /* override the default display:none from [hidden] */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-28px) scale(.96);
  pointer-events: none;
  transition:
    opacity .35s var(--sg-ease),
    transform .45s var(--sg-ease),
    visibility 0s linear .45s; /* delay visibility until after the fade-out */
}
.sg-mobile-cta .sg-btn {
  pointer-events: auto;
  min-height: 64px;          /* match Chatwoot launcher's 64px height */
  box-shadow: 0 14px 36px -10px rgba(13, 109, 252, 0.55), 0 0 0 1px rgba(13, 109, 252, 0.4);
}
.sg-sticky-close {
  pointer-events: auto;
  background: white; border: 1px solid var(--sg-line);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--sg-slate);
  font-size: 22px; line-height: 1;
  flex-shrink: 0;            /* never let the close button get squeezed */
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 6px 16px -6px rgba(13, 13, 20, 0.18);
}
.sg-sticky-close:hover {
  color: var(--sg-ink);
  border-color: var(--sg-ink);
}

/* Match the Chatwoot launcher's defaults exactly: 20px from the edge,
   20px from the bottom, 64px tall. The CTA sits bottom-left, the chat
   bubble bottom-right — same height, same offsets, mirror image. */
@media (min-width: 641px) {
  .sg-mobile-cta {
    left: 20px; bottom: 20px;
    max-width: 480px;
  }
}
@media (max-width: 640px) {
  .sg-mobile-cta {
    left: 20px; bottom: 20px;
    width: auto;
    /* 20px left margin + 84px reserved on the right for the chat bubble */
    max-width: calc(100% - 104px);
  }
  .sg-mobile-cta .sg-btn {
    flex: 0 1 auto;               /* shrink to content rather than fill */
    min-width: 0;                 /* allow shrink at very narrow widths */
    font-size: 15px;
    padding-left: 14px; padding-right: 14px;
    white-space: nowrap;          /* keep on one line */
    overflow: hidden;
    text-overflow: ellipsis;      /* belt-and-suspenders if it ever clips */
  }
}
/* Avoid footer overlap when the bar is showing — taller pill needs
   slightly more room, applies on all viewport widths now. */
body.sg-has-sticky-cta { padding-bottom: 100px; }

/* Drop the price suffix on phones — the pill shares the bottom row with
   the chat launcher, so we need to keep it short enough to never reach
   the launcher's corner. Above 480px (tablets, desktop) the full
   "Csomagok megnézése · 24 990 Ft-tól →" fits comfortably. */
@media (max-width: 480px) {
  .sg-cta-price { display: none; }
}

/* Reveal on scroll — only hide if JS confirms it can animate.
   No-JS / FOUC safe: content is visible by default. */
html.sg-js-anim .sg-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--sg-ease), transform .8s var(--sg-ease);
}
html.sg-js-anim .sg-reveal.is-visible { opacity: 1; transform: none; }

/* Reduced motion — WCAG SC 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.sg-js-anim .sg-reveal { opacity: 1; transform: none; }
}