/* FeedSync marketing site - dark "signal" theme, implemented from the Claude
   Design handoff (feedsync-plugin-website-redesign). The marketing surface owns
   its palette: deep-space navy canvas, blue->cyan gradient accents, mono
   microcopy. Scoped to body.marketing; /app and /admin stay on the light token
   system. Load order: tokens.css -> base.css -> marketing.css (overrides). */

body.marketing {
  --m-bg: #070b16;
  --m-line: rgba(125, 155, 255, 0.12);
  --m-line2: rgba(125, 155, 255, 0.24);
  --m-text: #e9eeff;
  --m-muted: #93a6cb;
  --m-faint: #5f7095;
  --m-blue2: #3d77ff;
  --m-cyan: #22d6f0;
  --m-green: #00e15a;
  --m-amber: #f9ab00;
  --m-card: linear-gradient(180deg, #0b1122, #0a0f1e);
  --m-grad: linear-gradient(135deg, #0a5cff, #3d77ff);
  --m-grad-text: linear-gradient(90deg, #3d77ff, #22d6f0);
  --m-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-disp: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--m-bg);
  color: var(--m-text);
  position: relative;
  overflow-x: clip;
}
/* Mobile browsers scroll the <html> viewport, so a body-only overflow-x does
   NOT stop side-scroll: the 1000px glow blobs, the hero pill hanging past its
   card and any min-width table would all widen the page. Clip at the root. */
html:has(body.marketing) { overflow-x: clip; }
body.marketing .m-page, body.marketing main { max-width: 100vw; overflow-x: clip; }

body.marketing ::selection { background: rgba(61, 119, 255, 0.32); color: #fff; }
body.marketing a { color: inherit; }
body.marketing a:hover { text-decoration: none; }
body.marketing :focus-visible { box-shadow: 0 0 0 3px rgba(61, 119, 255, 0.5); }
body.marketing h1, body.marketing h2, body.marketing h3 { color: #fff; }

/* ambient glow blobs behind everything */
.glow { position: absolute; z-index: 0; pointer-events: none; }
.glow--hero { top: -160px; left: 50%; transform: translateX(-46%); width: 1000px; height: 620px; background: radial-gradient(50% 55% at 50% 40%, rgba(0, 82, 255, 0.26), transparent 72%); filter: blur(20px); }
.glow--mid { top: 1500px; right: -200px; width: 760px; height: 620px; background: radial-gradient(50% 50% at 50% 50%, rgba(34, 214, 240, 0.10), transparent 72%); filter: blur(30px); }
.glow--btm { bottom: -160px; left: -160px; width: 820px; height: 640px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 82, 255, 0.16), transparent 70%); filter: blur(30px); }
.m-page { position: relative; z-index: 1; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

@keyframes m-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes m-floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes m-floatY2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes m-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

/* scroll-driven reveals: progressive enhancement (Chrome); elsewhere the 0s
   animation completes instantly and content is simply visible */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: m-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.marketing .hcard, body.marketing .hpill, body.marketing .live i { animation: none !important; }
}

/* logo: the official brand asset - a white plate on the dark canvas, so the
   corners get a slight radius */
.m-logo { display: inline-flex; align-items: center; flex: none; }
.m-logo__img { display: block; height: 36px; width: auto; border-radius: 8px; }
.m-logo__img--sm { height: 30px; border-radius: 7px; }
/* CSS-built mini tile - kept for the hero mock card's app logo */
.logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--m-grad); box-shadow: 0 4px 14px rgba(0, 82, 255, 0.4); }
.logo-bars { display: flex; flex-direction: column; gap: 2.5px; }
.logo-bars span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.logo-bars span:nth-child(1) { width: 13px; }
.logo-bars span:nth-child(2) { width: 9px; opacity: 0.72; }
.logo-bars span:nth-child(3) { width: 11px; opacity: 0.5; }
.grad { background: var(--m-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* sticky blurred header */
.m-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(7, 11, 22, 0.72); border-bottom: 1px solid var(--m-line); }
.m-header__inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 26px; }
.m-nav { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; }
.m-nav > a:not(.m-btn) { font-size: 14px; color: var(--m-muted); transition: color 0.15s ease; white-space: nowrap; }
.m-nav > a:not(.m-btn):hover { color: #fff; }
.m-nav__end { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* hamburger (mobile only) + the nav as a dropdown drawer under the header */
.m-burger { display: none; margin-left: auto; width: 42px; height: 42px; padding: 0; border-radius: 10px; border: 1px solid var(--m-line2); background: rgba(125, 155, 255, 0.05); cursor: pointer; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: none; }
.m-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #eaf0ff; transition: transform 0.2s ease, opacity 0.2s ease; }
.m-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.m-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 48rem) {
  .m-header { position: relative; }
  .m-header__inner { flex-wrap: wrap; }
  .m-burger { display: flex; }
  .m-nav {
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    flex: 1 1 100%; width: 100%; min-width: 0; padding: 12px 0 6px;
    border-top: 1px solid var(--m-line); margin-top: 12px;
  }
  .m-nav.is-open { display: flex; }
  .m-nav > a:not(.m-btn) { display: block; padding: 12px 6px; font-size: 16px; border-radius: 8px; white-space: normal; }
  .m-nav > a:not(.m-btn):hover { background: rgba(125, 155, 255, 0.05); }
  .m-nav__end { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 10px; }
  .m-nav__end .m-btn { width: 100%; }
  .m-nav__end .lang-switch { align-self: flex-start; }
}

/* HU/EN flag switcher (i18n.js toggles .is-active) - the active flag gets a
   glowing ring, inactive ones sit dimmed */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--m-line); border-radius: 999px; background: rgba(125, 155, 255, 0.04); }
.lang-switch__opt { display: inline-flex; padding: 2px; border-radius: 6px; line-height: 0; opacity: 0.4; border: 1px solid transparent; transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.lang-switch__opt:hover { opacity: 1; }
.lang-switch__opt.is-active { opacity: 1; border-color: rgba(120, 150, 255, 0.55); box-shadow: 0 0 10px rgba(61, 119, 255, 0.35); }
.lang-flag { display: block; width: 21px; height: 14px; object-fit: cover; border-radius: 3px; }

/* buttons */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border-radius: 11px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.m-btn--primary { color: #fff; background: var(--m-grad); border: 1px solid rgba(120, 150, 255, 0.35); box-shadow: 0 10px 30px rgba(0, 82, 255, 0.42); }
.m-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 82, 255, 0.6); text-decoration: none; }
.m-btn--ghost { color: #dbe4ff; background: rgba(125, 155, 255, 0.05); border: 1px solid var(--m-line2); }
.m-btn--ghost:hover { transform: translateY(-2px); background: rgba(125, 155, 255, 0.1); text-decoration: none; }
.m-btn--sm { padding: 11px 18px; border-radius: 10px; font-size: 14px; }

/* mono kicker with glowing dash */
.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--m-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--m-blue2); text-transform: uppercase; }
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--m-blue2); box-shadow: 0 0 8px rgba(61, 119, 255, 0.8); }

.section-h { font-family: var(--m-disp); font-weight: 800; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.04; letter-spacing: -0.025em; margin: 18px 0 0; }
.section-lead { color: var(--m-muted); font-size: 16px; line-height: 1.62; margin: 16px 0 0; }

/* ============================== hero ============================== */
.hero { padding: 96px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.hero h1 { font-family: var(--m-disp); font-weight: 800; font-size: clamp(42px, 5.2vw, 66px); line-height: 1.03; letter-spacing: -0.025em; margin: 22px 0 0; }
.hero__lede { color: var(--m-muted); font-size: 18px; line-height: 1.62; max-width: 490px; margin: 24px 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; }
.hero__note { font-family: var(--m-mono); font-size: 11.5px; color: var(--m-faint); margin: 26px 0 0; letter-spacing: 0.02em; }

/* floating sync-card mock */
.hero__viz { position: relative; }
.hero__viz::before { content: ""; position: absolute; inset: -34px -14px; background: radial-gradient(60% 60% at 58% 42%, rgba(0, 82, 255, 0.3), transparent 72%); filter: blur(24px); z-index: 0; }
.hcard { position: relative; z-index: 1; border-radius: 18px; border: 1px solid var(--m-line2); background: linear-gradient(180deg, rgba(16, 24, 44, 0.94), rgba(9, 14, 28, 0.94)); box-shadow: 0 30px 80px rgba(0, 10, 40, 0.55); padding: 20px; animation: m-floatY 7s ease-in-out infinite; }
.hcard__head { display: flex; align-items: center; gap: 11px; }
.hcard__title { display: flex; flex-direction: column; line-height: 1.2; }
.hcard__name { font-size: 13px; font-weight: 600; color: #eaf0ff; }
.hcard__src { font-family: var(--m-mono); font-size: 10px; color: var(--m-faint); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 225, 90, 0.1); border: 1px solid rgba(0, 225, 90, 0.28); font-family: var(--m-mono); font-size: 10px; color: #7bf0ab; white-space: nowrap; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 8px var(--m-green); animation: m-pulse 2.4s ease-in-out infinite; }
.hcard__rule { height: 1px; background: var(--m-line); margin: 16px 0; }
.hcard__rows { display: flex; flex-direction: column; gap: 10px; }
.hrow { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--m-line); background: rgba(125, 155, 255, 0.03); }
.hrow__thumb { width: 42px; height: 42px; border-radius: 10px; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hrow__thumb--a { background: linear-gradient(140deg, #25467f, #152a4d); }
.hrow__thumb--b { background: linear-gradient(140deg, #155e6b, #0f3a48); }
.hrow__thumb--c { background: linear-gradient(140deg, #3a2f6e, #241f47); }
.hrow__info { flex: 1; min-width: 0; }
.hrow__name { font-size: 13px; font-weight: 600; color: #eaf0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow__code { font-family: var(--m-mono); font-size: 10px; color: var(--m-faint); margin-top: 2px; }
.hrow__end { text-align: right; flex: none; }
.hrow__price { font-family: var(--m-mono); font-size: 12px; color: #cdd9f5; }
.tag { display: inline-block; margin-top: 5px; font-family: var(--m-mono); font-size: 8px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; }
.tag--upd { background: rgba(61, 119, 255, 0.14); border: 1px solid rgba(61, 119, 255, 0.32); color: #9dc0ff; }
.tag--new { background: rgba(0, 225, 90, 0.12); border: 1px solid rgba(0, 225, 90, 0.32); color: #6ef0a8; }
.tag--sync { background: rgba(34, 214, 240, 0.1); border: 1px solid rgba(34, 214, 240, 0.3); color: #8fe6f5; }
.hcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--m-line); font-family: var(--m-mono); font-size: 10px; }
.hcard__foot .l { color: var(--m-faint); }
.hcard__foot .r { color: var(--m-muted); white-space: nowrap; }
.hpill { position: absolute; left: -24px; bottom: -24px; z-index: 2; display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 13px; border: 1px solid var(--m-line2); background: linear-gradient(180deg, #0e1830, #0b1122); box-shadow: 0 18px 44px rgba(0, 10, 40, 0.6); animation: m-floatY2 6s ease-in-out infinite; font-family: var(--m-mono); }
.hpill__label { font-size: 10px; letter-spacing: 0.14em; color: var(--m-muted); text-transform: uppercase; }
.hpill__counts { display: flex; gap: 11px; font-size: 11px; white-space: nowrap; }
.t-green { color: #6ef0a8; }
.t-blue { color: #9dc0ff; }
.t-amber { color: #ffcf6b; }
.t-red { color: #ff9aa4; }

/* ============================== partner strip ============================== */
/* Centered trust bar; wraps gracefully when the (longer) HU strings need two
   rows instead of pushing a dangling right-aligned second line. */
.strip { border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); background: rgba(125, 155, 255, 0.02); }
.strip .wrap { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.strip__brand { display: flex; align-items: center; gap: 14px; }
.strip__label { font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--m-faint); text-transform: uppercase; }
.strip__brand img { height: 20px; width: auto; opacity: 0.92; display: block; }
.strip__items { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; font-family: var(--m-mono); font-size: 11px; color: var(--m-muted); }
.strip__items > span { display: inline-flex; align-items: center; gap: 8px; }
.strip__items i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.dot--green { background: var(--m-green); }
.dot--blue { background: var(--m-blue2); }
.dot--cyan { background: var(--m-cyan); }

/* ============================== features ============================== */
.feats { padding: 112px 0 40px; }
.feats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.feats__head > div { max-width: 620px; }
.feats__head > p { color: var(--m-muted); font-size: 16px; line-height: 1.62; max-width: 380px; margin: 0; }
.feats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 48px; }
.fcard { grid-column: span 2; position: relative; overflow: hidden; padding: 26px; border-radius: 16px; border: 1px solid var(--m-line); background: var(--m-card); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.fcard--lg { grid-column: span 3; padding: 28px; }
.fcard:hover { transform: translateY(-4px); border-color: var(--m-line2); box-shadow: 0 22px 60px rgba(0, 40, 120, 0.35), 0 0 0 1px rgba(61, 119, 255, 0.18); }
.fcard__top { display: flex; align-items: center; gap: 14px; }
.fic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; color: #9dc0ff; background: linear-gradient(135deg, rgba(61, 119, 255, 0.16), rgba(34, 214, 240, 0.08)); border: 1px solid rgba(61, 119, 255, 0.28); box-shadow: 0 0 20px rgba(0, 82, 255, 0.15); }
.fkicker { font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--m-faint); }
.fcard h3 { font-family: var(--m-disp); font-weight: 700; font-size: 19px; margin: 16px 0 8px; }
.fcard--lg h3 { font-size: 22px; margin-top: 18px; }
.fcard p { color: var(--m-muted); font-size: 14px; line-height: 1.58; margin: 0; }
.fcard--lg p { font-size: 14.5px; line-height: 1.6; }

/* feature-card inner mocks */
.fdrop { margin-top: 22px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--m-line2); border-radius: 12px; background: rgba(61, 119, 255, 0.04); }
.fdrop__file { width: 32px; height: 38px; border-radius: 6px; border: 1px solid var(--m-line2); flex: none; background: rgba(125, 155, 255, 0.05); }
.fdrop__name { font-family: var(--m-mono); font-size: 12px; color: #cdd9f5; }
.fdrop__meta { font-family: var(--m-mono); font-size: 10px; color: var(--m-faint); margin-top: 2px; }
.fdrop__ok { margin-left: auto; font-family: var(--m-mono); font-size: 10px; color: #6ef0a8; padding: 4px 9px; border-radius: 6px; background: rgba(0, 225, 90, 0.1); border: 1px solid rgba(0, 225, 90, 0.28); white-space: nowrap; }
.fchips { margin-top: 22px; display: flex; gap: 9px; flex-wrap: wrap; }
.chip { font-family: var(--m-mono); font-size: 12px; padding: 8px 13px; border-radius: 9px; white-space: nowrap; }
.chip--green { background: rgba(0, 225, 90, 0.1); border: 1px solid rgba(0, 225, 90, 0.28); color: #6ef0a8; }
.chip--blue { background: rgba(61, 119, 255, 0.12); border: 1px solid rgba(61, 119, 255, 0.3); color: #9dc0ff; }
.chip--amber { background: rgba(249, 171, 0, 0.1); border: 1px solid rgba(249, 171, 0, 0.28); color: #ffcf6b; }
.ftimes { margin-top: 18px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ftimes span { font-family: var(--m-mono); font-size: 11px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--m-line); color: var(--m-faint); }
.ftimes .is-on { border-color: rgba(61, 119, 255, 0.4); background: rgba(61, 119, 255, 0.12); color: #9dc0ff; }
.fmap { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-family: var(--m-mono); font-size: 12px; }
.fmap > div { display: flex; align-items: center; gap: 9px; }
.fmap .src { color: #7fe0ff; }
.fmap .arr { color: var(--m-blue2); }
.fmap .dst { color: #eaf0ff; }
.fskips { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; font-family: var(--m-mono); font-size: 11.5px; }
.fskips > div { display: flex; align-items: center; gap: 8px; }
.fskips i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-amber); flex: none; }
.fskips .k { color: #ffcf6b; }
.fskips .m { color: var(--m-muted); }

/* ============================== how it works ============================== */
.how { padding: 100px 0; }
.how__lead { color: var(--m-muted); font-size: 17px; line-height: 1.6; margin: 16px 0 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 60px 0 0; position: relative; list-style: none; padding: 0; }
.steps::before { content: ""; position: absolute; top: 27px; left: 9%; right: 9%; height: 1px; background: linear-gradient(90deg, transparent, var(--m-line2) 12%, var(--m-line2) 88%, transparent); z-index: 0; }
.step { position: relative; z-index: 1; }
.step__num { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--m-disp); font-weight: 700; font-size: 18px; color: #fff; background: var(--m-grad); box-shadow: 0 0 0 7px var(--m-bg), 0 0 0 8px var(--m-line), 0 8px 30px rgba(0, 82, 255, 0.5); }
.step h3 { font-family: var(--m-disp); font-weight: 700; font-size: 19px; margin: 22px 0 8px; }
.step p { color: var(--m-muted); font-size: 14px; line-height: 1.58; margin: 0; }

/* ============================== showcase (browser mock) ============================== */
.sc { padding: 40px 0 110px; }
.sc__head { max-width: 680px; }
.sc-frame { margin-top: 44px; border-radius: 18px; border: 1px solid var(--m-line2); background: linear-gradient(180deg, #0b1122, #090e1c); box-shadow: 0 40px 120px rgba(0, 8, 30, 0.65); overflow: hidden; }
.sc-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--m-line); background: rgba(125, 155, 255, 0.03); }
.sc-dots { display: flex; gap: 7px; flex: none; }
.sc-dots span { width: 11px; height: 11px; border-radius: 50%; opacity: 0.85; }
.sc-dots span:nth-child(1) { background: #ff5f57; }
.sc-dots span:nth-child(2) { background: #febc2e; }
.sc-dots span:nth-child(3) { background: #28c840; }
.sc-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px; border-radius: 8px; background: rgba(7, 11, 22, 0.6); border: 1px solid var(--m-line); font-family: var(--m-mono); font-size: 11px; color: var(--m-muted); }
.sc-url i { width: 11px; height: 11px; border-radius: 3px; background: var(--m-grad); flex: none; }
.sc-conn { font-family: var(--m-mono); font-size: 10px; color: #7bf0ab; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 8px var(--m-green); animation: m-pulse 2.4s ease-in-out infinite; }
.sc-body { display: grid; grid-template-columns: 206px 1fr; }
.sc-side { border-right: 1px solid var(--m-line); padding: 16px 12px; background: rgba(7, 11, 22, 0.4); display: flex; flex-direction: column; gap: 4px; }
.sc-side__label { font-family: var(--m-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--m-faint); padding: 6px 10px; text-transform: uppercase; }
.sc-side > div:not(.sc-side__label) { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; color: var(--m-muted); font-size: 13px; }
.sc-side > div.is-active { color: #fff; font-weight: 600; background: rgba(61, 119, 255, 0.12); border: 1px solid rgba(61, 119, 255, 0.28); }
.sc-side svg { flex: none; }
.sc-main { min-width: 0; padding: 20px 24px; }
.sc-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-run__title { font-family: var(--m-disp); font-weight: 700; font-size: 18px; color: #fff; }
.sc-run__meta { font-family: var(--m-mono); font-size: 11px; color: var(--m-faint); margin-top: 3px; }
.sc-run .m-btn { margin-left: auto; padding: 10px 16px; border-radius: 9px; font-size: 13px; box-shadow: 0 8px 22px rgba(0, 82, 255, 0.4); }

/* tabs: reset base.css button styling, gradient underline on the active tab */
.sc-tabs { display: flex; gap: 2px; margin: 20px 0 0; border-bottom: 1px solid var(--m-line); }
.sc-tab { position: relative; border: none; background: transparent; cursor: pointer; padding: 12px 16px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--m-muted); box-shadow: none; transition: color 0.15s ease; }
.sc-tab:hover { color: #fff; background: transparent; transform: none; box-shadow: none; }
.sc-tab.is-active { color: #fff; }
.sc-tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--m-grad-text); box-shadow: 0 0 12px rgba(61, 119, 255, 0.8); }
.sc-pane { padding: 20px 0 4px; }

/* mapping pane */
.sc-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.sc-chips__label { font-family: var(--m-mono); font-size: 11px; color: var(--m-faint); margin-right: 4px; }
.sc-chips span:not(.sc-chips__label) { font-family: var(--m-mono); font-size: 11px; padding: 5px 10px; border-radius: 7px; background: rgba(125, 155, 255, 0.05); border: 1px solid var(--m-line); color: #7fe0ff; }
.sc-scroll { overflow-x: auto; }
.sc-mhead, .sc-mrow { display: grid; grid-template-columns: 1fr 34px 1.15fr 120px; align-items: center; min-width: 520px; }
.sc-mhead { padding: 0 4px 10px; font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--m-faint); border-bottom: 1px solid var(--m-line); text-transform: uppercase; }
.sc-mhead span:last-child { text-align: right; }
.sc-mrow { padding: 12px 4px; border-bottom: 1px solid var(--m-line); }
.sc-mrow .src { font-family: var(--m-mono); font-size: 13px; color: #7fe0ff; }
.sc-mrow .arr { color: var(--m-blue2); font-size: 15px; }
.sc-mrow .dst { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: 8px; background: rgba(125, 155, 255, 0.05); border: 1px solid var(--m-line); font-size: 13px; color: #eaf0ff; max-width: 230px; }
.sc-mrow .dst i { color: var(--m-faint); font-size: 10px; font-style: normal; }
.sc-mrow .conf { text-align: right; }
.sc-conf { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 6px; white-space: nowrap; display: inline-block; }
.sc-conf--auto { background: rgba(0, 225, 90, 0.1); border: 1px solid rgba(0, 225, 90, 0.28); color: #6ef0a8; }
.sc-conf--edited { background: rgba(61, 119, 255, 0.14); border: 1px solid rgba(61, 119, 255, 0.35); color: #9dc0ff; }
.sc-conf--manual { background: rgba(249, 171, 0, 0.12); border: 1px solid rgba(249, 171, 0, 0.3); color: #ffcf6b; }

/* preview pane */
.sc-notice { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px; background: rgba(249, 171, 0, 0.07); border: 1px solid rgba(249, 171, 0, 0.22); margin-bottom: 18px; }
.sc-notice svg { flex: none; }
.sc-notice span { font-size: 13px; color: #ffd98a; }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sc-stat { padding: 18px; border-radius: 12px; }
.sc-stat__n { font-family: var(--m-disp); font-weight: 800; font-size: 32px; line-height: 1; }
.sc-stat__l { font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--m-muted); margin-top: 6px; text-transform: uppercase; }
.sc-stat--create { border: 1px solid rgba(0, 225, 90, 0.28); background: rgba(0, 225, 90, 0.06); }
.sc-stat--create .sc-stat__n { color: #6ef0a8; }
.sc-stat--update { border: 1px solid rgba(61, 119, 255, 0.3); background: rgba(61, 119, 255, 0.07); }
.sc-stat--update .sc-stat__n { color: #9dc0ff; }
.sc-stat--skip { border: 1px solid rgba(249, 171, 0, 0.28); background: rgba(249, 171, 0, 0.06); }
.sc-stat--skip .sc-stat__n { color: #ffcf6b; }
.sc-phead, .sc-prow { display: grid; grid-template-columns: 1.5fr 110px 100px 1fr; align-items: center; min-width: 520px; }
.sc-phead { padding: 16px 4px 10px; font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--m-faint); border-bottom: 1px solid var(--m-line); text-transform: uppercase; }
.sc-prow { padding: 11px 4px; border-bottom: 1px solid var(--m-line); }
.sc-prow .p { font-size: 13px; color: #eaf0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-prow .c { font-family: var(--m-mono); font-size: 11px; color: var(--m-muted); }
.sc-prow .f { font-family: var(--m-mono); font-size: 11px; color: var(--m-faint); }
.sc-badge { font-family: var(--m-mono); font-size: 9px; letter-spacing: 0.06em; font-weight: 600; padding: 3px 7px; border-radius: 5px; white-space: nowrap; text-transform: uppercase; }
.sc-badge--new { background: rgba(0, 225, 90, 0.1); border: 1px solid rgba(0, 225, 90, 0.28); color: #6ef0a8; }
.sc-badge--upd { background: rgba(61, 119, 255, 0.14); border: 1px solid rgba(61, 119, 255, 0.35); color: #9dc0ff; }
.sc-badge--skip { background: rgba(249, 171, 0, 0.12); border: 1px solid rgba(249, 171, 0, 0.3); color: #ffcf6b; }

/* sync-log pane */
.sc-log { border-radius: 12px; border: 1px solid var(--m-line); background: #060a14; padding: 16px 18px; font-family: var(--m-mono); font-size: 12.5px; line-height: 1.4; overflow-x: auto; }
.sc-log > div { display: flex; align-items: center; gap: 12px; padding: 5px 0; white-space: nowrap; }
.sc-log .t { color: var(--m-faint); flex: none; }
.sc-log i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sc-log .d-green { background: var(--m-green); box-shadow: 0 0 8px var(--m-green); }
.sc-log .d-blue { background: var(--m-blue2); box-shadow: 0 0 8px var(--m-blue2); }
.sc-log .d-amber { background: var(--m-amber); box-shadow: 0 0 8px var(--m-amber); }
.sc-log .d-red { background: #ff5c6a; box-shadow: 0 0 8px #ff5c6a; }
.sc-log .k { flex: none; width: 52px; font-weight: 600; }
.sc-log .m { color: var(--m-muted); }
.sc-log__foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-family: var(--m-mono); font-size: 11px; color: var(--m-muted); }

/* ============================== pricing ============================== */
.pricing { padding: 100px 0; border-top: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(125, 155, 255, 0.02), transparent); }
.pricing__head { max-width: 660px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; align-items: start; }
.plan { position: relative; border-radius: 16px; padding: 28px 24px; background: linear-gradient(180deg, #0c1226, #0a0f1e); border: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 20px; }
.plan--featured { background: linear-gradient(#0c1428, #0a1020) padding-box, linear-gradient(160deg, #3d77ff, #22d6f0) border-box; border: 1.5px solid transparent; box-shadow: 0 0 0 1px rgba(61, 119, 255, 0.12), 0 26px 70px rgba(0, 50, 140, 0.42); }
.plan__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--m-mono); font-size: 9.5px; letter-spacing: 0.14em; font-weight: 600; color: #fff; padding: 5px 12px; border-radius: 999px; background: var(--m-grad); box-shadow: 0 6px 18px rgba(0, 82, 255, 0.5); white-space: nowrap; text-transform: uppercase; }
.plan__name { font-family: var(--m-disp); font-weight: 700; font-size: 19px; color: #fff; }
.plan__price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 9px; min-height: 40px; }
.plan__free { font-family: var(--m-disp); font-weight: 800; font-size: 38px; color: #fff; line-height: 1; }
.plan__amount { font-family: var(--m-disp); font-weight: 800; font-size: 34px; color: #fff; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.plan__per { font-family: var(--m-mono); font-size: 11px; color: var(--m-muted); padding-bottom: 7px; }
.plan__rule { height: 1px; background: var(--m-line); }
.plan__limits { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan__limits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #cdd9f5; }
.plan__limits svg { color: var(--m-cyan); flex: none; margin-top: 2px; width: 15px; height: 15px; }
.plan .m-btn { padding: 12px; border-radius: 10px; font-size: 14px; margin-top: auto; }
/* struck-through regular price on its OWN line above the launch price */
.plan__was { flex-basis: 100%; font-family: var(--m-mono); font-size: 13px; color: var(--m-faint); text-decoration: line-through; line-height: 1; }
/* full-width "Individual" block under the four plans */
.plan-wide { margin-top: 18px; display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; border: 1px dashed var(--m-line2); background: rgba(125, 155, 255, 0.03); }
.plan-wide__info { flex: 1 1 380px; }
.plan-wide p { margin: 6px 0 0; color: var(--m-muted); font-size: 14.5px; line-height: 1.6; }
.plan-wide .m-btn { flex: none; }
.pricing-launch { text-align: center; font-family: var(--m-mono); font-size: 11.5px; color: #ffcf6b; margin: 26px 0 0; }
.pricing-note { text-align: center; color: var(--m-faint); font-size: 13px; margin: 12px 0 0; }

/* ============================== CTA band ============================== */
.cta { padding: 40px 0 110px; }
.cta__card { max-width: 1080px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--m-line2); background: radial-gradient(120% 130% at 50% 0%, rgba(0, 82, 255, 0.22), transparent 58%), linear-gradient(180deg, #0c1428, #090e1c); padding: 84px 40px; text-align: center; box-shadow: 0 40px 120px rgba(0, 20, 60, 0.5); }
.cta__card::before { content: ""; position: absolute; top: -90px; left: 50%; transform: translateX(-50%); width: 520px; height: 280px; background: radial-gradient(50% 60% at 50% 40%, rgba(34, 214, 240, 0.16), transparent 70%); filter: blur(20px); pointer-events: none; }
.cta__card h2 { position: relative; font-family: var(--m-disp); font-weight: 800; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.03; letter-spacing: -0.02em; margin: 0; }
.cta__card p { position: relative; color: var(--m-muted); font-size: 17px; line-height: 1.6; max-width: 520px; margin: 20px auto 0; }
.cta__card .m-btn { position: relative; margin-top: 34px; padding: 16px 30px; border-radius: 12px; font-size: 16px; }
.cta__note { position: relative; font-family: var(--m-mono); font-size: 11px; color: var(--m-faint); margin-top: 20px; }

/* ============================== footer ============================== */
.m-footer { border-top: 1px solid var(--m-line); padding: 64px 0 40px; }
.m-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.m-footer__brand p { color: var(--m-muted); font-size: 14px; line-height: 1.6; max-width: 300px; margin: 18px 0 0; }
.m-footer__works { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.m-footer__works span { font-family: var(--m-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--m-faint); text-transform: uppercase; }
.m-footer__works img { height: 17px; width: auto; opacity: 0.8; display: block; }
.m-footer__col strong { display: block; font-family: var(--m-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--m-faint); font-weight: 400; text-transform: uppercase; }
.m-footer__col a { display: block; font-size: 14px; color: var(--m-muted); margin-top: 12px; transition: color 0.15s ease; }
.m-footer__col a:first-of-type { margin-top: 18px; }
.m-footer__col a:hover { color: #fff; }
.m-footer__rule { height: 1px; background: var(--m-line); margin: 44px 0 22px; }
/* partner projects line (Gaelta) */
.m-footer__other { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--m-faint); margin-bottom: 12px; }
.m-footer__other a { color: var(--m-muted); transition: color 0.15s ease; white-space: nowrap; }
.m-footer__other a:hover { color: #fff; }
.m-footer__hint { color: var(--m-faint); font-size: 11.5px; }
.m-footer__sep { color: var(--m-faint); }
.m-footer__legal { font-family: var(--m-mono); font-size: 11px; color: var(--m-faint); }
.m-footer__legal a { color: var(--m-muted); }
.m-footer__legal a:hover { color: #fff; }

/* ============================== legal pages ============================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 64px 32px 96px; }
.legal-wrap h1 { font-family: var(--m-disp); font-weight: 800; font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; }
.legal-wrap h2 { font-family: var(--m-disp); font-weight: 700; font-size: 20px; margin: 34px 0 0; }
.legal-wrap h3 { font-family: var(--m-disp); font-weight: 700; font-size: 16.5px; margin: 24px 0 0; color: #eaf0ff; }
.legal-wrap p { color: var(--m-muted); line-height: 1.7; margin: 12px 0 0; font-size: 15px; }
.legal-wrap strong { color: #eaf0ff; }
.legal-wrap a { color: var(--m-blue2); }
.legal-wrap a:hover { text-decoration: underline; }
.legal-wrap ul { list-style: disc; padding-left: 1.3rem; margin: 12px 0 0; }
.legal-wrap ol { list-style: decimal; padding-left: 1.3rem; margin: 12px 0 0; }
.legal-wrap li { color: var(--m-muted); line-height: 1.65; margin-top: 6px; font-size: 15px; }
.legal-wrap li::marker { color: var(--m-blue2); }
.legal-wrap .doc-meta { font-family: var(--m-mono); font-size: 12px; color: var(--m-faint); margin: 10px 0 0; }
.legal-wrap .tablewrap { overflow-x: auto; margin: 16px 0 0; }
.legal-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.legal-wrap th, .legal-wrap td { text-align: left; padding: 10px 12px; border: 1px solid var(--m-line); color: var(--m-muted); vertical-align: top; line-height: 1.55; }
.legal-wrap th { color: #eaf0ff; font-weight: 600; background: rgba(125, 155, 255, 0.04); }
.legal-wrap .updated { font-family: var(--m-mono); font-size: 12px; color: var(--m-faint); margin: 10px 0 0; }

/* ============================== error pages (nginx error_page) ============================== */
.errpage { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; position: relative; z-index: 1; }
.errpage__card { text-align: center; max-width: 480px; }
.errpage__logo { display: inline-flex; margin-bottom: 26px; }
.errpage__code { font-family: var(--m-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--m-blue2); }
.errpage__title { font-family: var(--m-disp); font-weight: 800; font-size: clamp(30px, 5vw, 44px); color: #fff; margin: 10px 0 0; letter-spacing: -0.02em; line-height: 1.05; }
.errpage__text { color: var(--m-muted); margin: 14px 0 0; line-height: 1.6; }
.errpage__en { color: var(--m-faint); font-size: 13.5px; margin: 6px 0 0; }
.errpage__cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================== cookie consent bar ============================== */
.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.cookiebar__inner { pointer-events: auto; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--m-line2); background: linear-gradient(180deg, #0e1830, #0b1122); box-shadow: 0 18px 44px rgba(0, 10, 40, 0.6); }
.cookiebar__text { margin: 0; font-size: 13.5px; color: var(--m-muted); line-height: 1.5; flex: 1 1 320px; }
.cookiebar__text a { color: var(--m-blue2); }
.cookiebar__text a:hover { text-decoration: underline; }
.cookiebar__prefs { flex: 1 1 100%; display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: 13px; color: #cdd9f5; }
.cookiebar__prefs label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cookiebar__prefs input { accent-color: var(--m-blue2); width: 15px; height: 15px; }
.cookiebar__note { font-family: var(--m-mono); font-size: 10.5px; color: var(--m-faint); }
.cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 40rem) {
  .cookiebar__actions { margin-left: 0; width: 100%; }
  .cookiebar__actions .m-btn { flex: 1; }
}

/* ============================== responsive ============================== */
@media (max-width: 68rem) {
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  /* the pill hangs 24px past the card edge on desktop; once the hero stacks,
     keep it inside the column so it can never widen the page */
  .hero__viz { max-width: 560px; }
  .hpill { left: 0; }
  .feats__grid { grid-template-columns: repeat(2, 1fr); }
  .fcard, .fcard--lg { grid-column: span 1; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .sc-body { grid-template-columns: 1fr; }
  .sc-side { display: none; }
  .m-footer__grid { grid-template-columns: 1fr 1fr; }
  .m-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .m-header__inner { padding: 12px 20px; gap: 14px; }
  .hero { padding: 64px 0 64px; }
  .hpill { left: 8px; bottom: -18px; padding: 10px 13px; gap: 10px; }
  .feats { padding: 80px 0 24px; }
  .feats__grid, .steps, .plans, .sc-stats { grid-template-columns: 1fr; }
  .how, .pricing { padding: 72px 0; }
  .sc { padding: 24px 0 80px; }
  .sc-main { padding: 16px; }
  .sc-run .m-btn { margin-left: 0; }
  .cta__card { padding: 60px 22px; }
  .m-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .legal-wrap { padding: 44px 20px 72px; }
  /* phone-width overflow sources: the pill must not hang outside the card, the
     header CTA must shrink, mock tables scroll INSIDE their own container, the
     mono log wraps, and the glow blobs never exceed the viewport */
  .hero__viz { max-width: 100%; }
  .hero__viz::before { inset: -20px 0; }
  .hpill { position: static; margin: 12px 0 0; width: fit-content; max-width: 100%; }
  .m-logo__img { height: 30px; }
  .sc-scroll { max-width: 100%; }
  .sc-log > div { white-space: normal; flex-wrap: wrap; }
  .glow { max-width: 100vw; }
  .glow--hero { width: 100vw; left: 0; transform: none; }
  .glow--mid, .glow--btm { display: none; }
  .hero__cta .m-btn { flex: 1 1 100%; }
  .strip .wrap { padding-left: 16px; padding-right: 16px; }
}