@import url('/brand/dachbyte/landing-experience.css?v=20260914.2');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --seller-ink: #090b10;
  --seller-ink-raised: #101520;
  --seller-panel: #131a27;
  --seller-line: rgba(244, 242, 236, .13);
  --seller-text: #f4f2ec;
  --seller-muted: #a6a9b4;
  --seller-primary: #ff8a3f;
  --seller-primary-soft: #ffb37a;
  --seller-success: #2dd9a8;
  --seller-risk: #ff5470;
  --seller-info: #6c93ff;
  --seller-ml: #ffe066;
  --seller-shopee: #ff5a2f;
  --seller-track: #6c93ff;
  --seller-magalu: #1683e8;
  --font-display: 'Exo 2', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --page-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--seller-ink); color: var(--seller-text); font: 500 20px/1.45 var(--font-body); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, rgba(255,138,63,.10), transparent 30%), radial-gradient(circle at 90% 20%, rgba(108,147,255,.10), transparent 24%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--seller-primary); outline-offset: 4px; }

.seller-shell { width: min(var(--page-width), calc(100% - 40px)); margin: 0 auto; }
.seller-brand { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--font-display); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.seller-brand__dach { color: var(--seller-text); }.seller-brand__byte { color: var(--seller-primary); }.seller-brand__line { color: var(--seller-primary-soft); font: 13px/1 var(--font-mono); letter-spacing: .15em; }
.seller-login { color: var(--seller-muted); font-size: 16px; font-weight: 700; }
.seller-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--seller-primary); background: var(--seller-primary); color: #201006; font: 800 16px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; transition: transform .2s, background .2s; }
.seller-button:hover { transform: translateY(-2px); background: var(--seller-primary-soft); }
.seller-button--ghost { border-color: var(--seller-line); background: transparent; color: var(--seller-text); }.seller-button--ghost:hover { border-color: var(--seller-primary); background: rgba(255,138,63,.08); }
.seller-menu { display: none; padding: 10px; border: 1px solid var(--seller-line); background: transparent; color: var(--seller-text); }

.seller-ticker { position: relative; z-index: 2; overflow: hidden; border-bottom: 1px solid var(--seller-line); background: rgba(255,138,63,.045); white-space: nowrap; }
.seller-ticker__track { display: inline-flex; min-width: max-content; animation: seller-ticker 34s linear infinite; }
.seller-ticker span { display: inline-flex; align-items: center; gap: 10px; padding: 9px 28px; color: var(--seller-muted); font: 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.seller-ticker b { color: var(--seller-primary-soft); font-weight: 400; }
@keyframes seller-ticker { to { transform: translateX(-50%); } }

.seller-hero { padding: 116px 0 88px; border-bottom: 1px solid var(--seller-line); }
.seller-hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr); gap: 64px; align-items: center; }
.seller-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--seller-primary-soft); font: 14px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }.seller-kicker::before { width: 8px; height: 8px; border-radius: 50%; background: var(--seller-primary); box-shadow: 0 0 16px var(--seller-primary); content: ''; }
h1, h2, h3, p { margin-top: 0; }
.seller-title { max-width: 760px; margin-bottom: 24px; font: 900 clamp(48px,6vw,78px)/.98 var(--font-display); letter-spacing: -.045em; }.seller-title em { color: var(--seller-primary); font-style: normal; }
.seller-lead { max-width: 650px; color: var(--seller-muted); font-size: 22px; line-height: 1.45; }.seller-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.seller-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 52px; border-top: 1px solid var(--seller-line); }.seller-proof div { padding: 20px 18px 0 0; }.seller-proof strong { display: block; color: var(--seller-primary-soft); font: 800 28px/1 var(--font-display); }.seller-proof span { display: block; margin-top: 7px; color: var(--seller-muted); font-size: 15px; line-height: 1.15; }
.seller-console { overflow: hidden; border: 1px solid var(--seller-line); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: 26px 26px 0 rgba(255,138,63,.09); }.seller-console__bar { display: flex; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--seller-line); color: var(--seller-muted); font: 13px/1 var(--font-mono); }.seller-console__live { color: var(--seller-success); }.seller-console__body { display: grid; gap: 1px; background: var(--seller-line); }.seller-console__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; background: var(--seller-ink-raised); }.seller-console__row b { font: 700 18px/1 var(--font-display); }.seller-status { padding: 5px 8px; border: 1px solid currentColor; font: 12px/1 var(--font-mono); text-transform: uppercase; }.seller-status--ok { color: var(--seller-success); }.seller-status--risk { color: var(--seller-risk); }.seller-status--info { color: var(--seller-info); }

.seller-section { padding: 96px 0; border-bottom: 1px solid var(--seller-line); }.seller-section--tight { padding: 64px 0; }.seller-section__head { display: grid; grid-template-columns: 1fr minmax(280px,.65fr); gap: 48px; align-items: end; margin-bottom: 42px; }.seller-section__tag { color: var(--seller-primary-soft); font: 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }.seller-section h2 { margin: 14px 0 0; font: 800 clamp(34px,4vw,54px)/1 var(--font-display); letter-spacing: -.035em; }.seller-section__head p { margin: 0; color: var(--seller-muted); font-size: 20px; }
.seller-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--seller-line); background: var(--seller-line); gap: 1px; }.seller-card { min-height: 430px; padding: 34px; background: var(--seller-ink); transition: background .25s, transform .25s; }.seller-card:hover { z-index: 1; background: var(--seller-ink-raised); transform: translateY(-4px); }.seller-card__index { color: var(--seller-primary); font: 14px/1 var(--font-mono); }.seller-card h3 { margin: 38px 0 14px; font: 800 29px/1.05 var(--font-display); }.seller-card p { color: var(--seller-muted); font-size: 19px; }.seller-card__features { display: grid; gap: 9px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--seller-line); list-style: none; }.seller-card__features li { display: flex; gap: 10px; color: rgba(244,242,236,.82); font-size: 16px; line-height: 1.25; }.seller-card__features li::before { color: var(--seller-primary); content: '›'; }.seller-card a { display: inline-block; margin-top: 30px; color: var(--seller-primary-soft); font: 700 16px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.seller-journey { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--seller-line); }.seller-journey__step { position: relative; padding: 34px; }.seller-journey__step + .seller-journey__step { border-left: 1px solid var(--seller-line); }.seller-journey__step + .seller-journey__step::before { position: absolute; top: 50%; left: -10px; width: 19px; height: 19px; border: 1px solid var(--seller-primary); background: var(--seller-ink); color: var(--seller-primary); font: 15px/17px var(--font-mono); text-align: center; content: '›'; transform: translateY(-50%); }.seller-journey__step span { color: var(--seller-primary); font: 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }.seller-journey__step h3 { margin: 22px 0 10px; font: 800 27px/1 var(--font-display); }.seller-journey__step p { margin: 0; color: var(--seller-muted); font-size: 18px; }
.seller-showcase { --module-accent: var(--seller-primary); --module-soft: rgba(255,138,63,.12); padding: 108px 0; border-bottom: 1px solid var(--seller-line); scroll-margin-top: 74px; }.seller-showcase--shopee { --module-accent: var(--seller-shopee); --module-soft: rgba(255,90,47,.12); background: var(--seller-ink-raised); }.seller-showcase--tracking { --module-accent: var(--seller-track); --module-soft: rgba(108,147,255,.12); }
.seller-showcase__layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 72px; align-items: center; }.seller-showcase--reverse .seller-showcase__visual { order: 2; }.seller-showcase--reverse .seller-showcase__copy { order: 1; }
.seller-showcase__copy .seller-section__tag { color: var(--module-accent); }.seller-showcase__copy h2 { margin: 14px 0 22px; font: 850 clamp(38px,4.3vw,60px)/.98 var(--font-display); letter-spacing: -.04em; }.seller-showcase__copy h2 em { color: var(--module-accent); font-style: normal; }.seller-showcase__lead { margin: 0 0 28px; color: var(--seller-muted); font-size: 20px; }.seller-showcase__points { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }.seller-showcase__points li { display: flex; align-items: center; gap: 12px; color: rgba(244,242,236,.86); font-size: 17px; }.seller-showcase__points li::before { width: 7px; height: 7px; border-radius: 50%; background: var(--module-accent); box-shadow: 0 0 12px var(--module-accent); content: ''; }.seller-showcase__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }.seller-showcase__actions .seller-button { border-color: var(--module-accent); background: var(--module-accent); }.seller-showcase__actions .seller-button--ghost { background: transparent; color: var(--seller-text); }
.seller-showcase__visual { overflow: hidden; min-height: 470px; border: 1px solid color-mix(in srgb, var(--module-accent) 38%, transparent); background: radial-gradient(circle at 82% 8%, var(--module-soft), transparent 32%), #090d15; box-shadow: 0 30px 80px rgba(0,0,0,.34); }.seller-demo__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--seller-line); }.seller-demo__title { font: 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }.seller-demo__live { color: var(--module-accent); font: 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.seller-demo__tabs { display: grid; grid-template-columns: repeat(3,1fr); padding: 12px; border-bottom: 1px solid var(--seller-line); gap: 8px; }.seller-demo__tab { padding: 11px 8px; border: 1px solid transparent; background: transparent; color: var(--seller-muted); font: 700 13px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }.seller-demo__tab:hover, .seller-demo__tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--module-accent) 52%, transparent); background: var(--module-soft); color: var(--seller-text); }
.seller-demo__panel { padding: 24px; }.seller-demo__panel[hidden] { display: none; }.seller-demo__kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 20px; }.seller-demo__kpi { padding: 17px; border: 1px solid var(--seller-line); background: rgba(255,255,255,.025); }.seller-demo__kpi span { display: block; color: var(--seller-muted); font: 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.seller-demo__kpi strong { display: block; margin-top: 12px; color: var(--module-accent); font: 800 26px/1 var(--font-display); }
.seller-demo__list { display: grid; gap: 9px; }.seller-demo__row { display: grid; grid-template-columns: minmax(0,1fr) 90px 86px; gap: 12px; align-items: center; padding: 14px 15px; border: 1px solid var(--seller-line); background: rgba(255,255,255,.02); }.seller-demo__row b { overflow: hidden; font: 700 15px/1.1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }.seller-demo__bar { height: 5px; background: rgba(255,255,255,.08); }.seller-demo__bar i { display: block; width: var(--bar,60%); height: 100%; background: var(--module-accent); box-shadow: 0 0 9px var(--module-accent); }.seller-demo__badge { justify-self: end; padding: 5px 7px; border: 1px solid currentColor; color: var(--module-accent); font: 10px/1 var(--font-mono); text-transform: uppercase; }
.seller-demo__board { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.seller-demo__column { min-height: 220px; padding: 12px; border: 1px solid var(--seller-line); background: rgba(255,255,255,.02); }.seller-demo__column > span { color: var(--seller-muted); font: 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.seller-demo__ticket { margin-top: 11px; padding: 12px; border-left: 2px solid var(--module-accent); background: var(--module-soft); }.seller-demo__ticket b { display: block; font: 700 14px/1.2 var(--font-display); }.seller-demo__ticket small { display: block; margin-top: 7px; color: var(--seller-muted); font: 11px/1.2 var(--font-mono); }
.seller-demo__route { position: relative; display: grid; gap: 0; padding-left: 28px; }.seller-demo__route::before { position: absolute; top: 13px; bottom: 13px; left: 8px; width: 1px; background: color-mix(in srgb, var(--module-accent) 50%, transparent); content: ''; }.seller-demo__stop { position: relative; padding: 12px 0 17px 15px; }.seller-demo__stop::before { position: absolute; top: 15px; left: -24px; width: 9px; height: 9px; border: 2px solid #090d15; border-radius: 50%; background: var(--module-accent); box-shadow: 0 0 12px var(--module-accent); content: ''; }.seller-demo__stop b { display: block; font: 700 16px/1 var(--font-display); }.seller-demo__stop span { display: block; margin-top: 7px; color: var(--seller-muted); font: 11px/1 var(--font-mono); }
.seller-scenarios { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.seller-scenario { padding: 26px; border-left: 2px solid var(--seller-primary); background: rgba(255,255,255,.035); }.seller-scenario strong { display: block; margin-bottom: 10px; font: 800 23px/1 var(--font-display); }.seller-scenario p { margin: 0; color: var(--seller-muted); font-size: 18px; }
.seller-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }.seller-flow__step { padding-top: 18px; border-top: 1px solid var(--seller-line); }.seller-flow__step b { color: var(--seller-primary); font: 14px/1 var(--font-mono); }.seller-flow__step h3 { margin: 15px 0 10px; font: 800 26px/1 var(--font-display); }.seller-flow__step p { margin: 0; color: var(--seller-muted); font-size: 18px; }
.seller-cta { padding: 70px; background: var(--seller-panel); text-align: center; }.seller-cta h2 { margin: 0 auto 18px; max-width: 760px; font: 900 clamp(34px,4vw,56px)/1 var(--font-display); }.seller-cta p { max-width: 580px; margin: 0 auto 28px; color: var(--seller-muted); font-size: 20px; }.seller-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.seller-footer { position: relative; z-index: 1; padding: 40px 5%; border-top: 1px solid var(--seller-line); background: #070b13; }.seller-footer::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent 0 68%, var(--seller-primary) 68% 72%, transparent 72%); content: ''; }.seller-footer .seller-shell { width: min(1400px, 100%); }.seller-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }.seller-footer__brand { color: #f3f5f8; font: 800 18px/1 var(--font-display); letter-spacing: -.02em; }.seller-footer__brand .seller-footer__dach { color: #f3f5f8; }.seller-footer__brand .seller-footer__byte { color: var(--seller-primary); }.seller-footer__copy { color: var(--seller-muted); font: 10px/1.4 var(--font-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; }.seller-footer__links { display: flex; justify-content: flex-end; gap: 24px; }.seller-footer__links a { color: var(--seller-muted); font: 10px/1.4 var(--font-mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }.seller-footer__links a:hover { color: var(--seller-primary); }

/* Magalu keeps the DACHBYTE identity and only changes product accents. */
html[data-dachbyte-app="seller-magalu"] { --seller-primary: #1683e8; --seller-primary-soft: #7bc9ff; --seller-info: #39c7f3; }
html[data-dachbyte-app="seller-magalu"] body::before { background: linear-gradient(135deg, rgba(22,131,232,.13), transparent 30%), radial-gradient(circle at 90% 20%, rgba(57,199,243,.11), transparent 24%); }

@media (max-width: 850px) { .seller-shell { width: min(100% - 28px, var(--page-width)); }.seller-hero { padding: 76px 0 62px; }.seller-hero__grid, .seller-section__head, .seller-showcase__layout { grid-template-columns: 1fr; gap: 38px; }.seller-showcase--reverse .seller-showcase__visual, .seller-showcase--reverse .seller-showcase__copy { order: initial; }.seller-showcase { padding: 72px 0; }.seller-showcase__visual { min-height: 0; }.seller-console { max-width: 620px; }.seller-grid, .seller-scenarios, .seller-flow, .seller-journey { grid-template-columns: 1fr; }.seller-card { min-height: auto; }.seller-journey__step + .seller-journey__step { border-top: 1px solid var(--seller-line); border-left: 0; }.seller-journey__step + .seller-journey__step::before { top: -10px; left: 34px; transform: none; }.seller-proof { grid-template-columns: 1fr; gap: 12px; }.seller-proof div { padding-top: 12px; }.seller-section { padding: 68px 0; }.seller-cta { padding: 46px 24px; }.seller-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }.seller-footer__links { justify-content: center; }.seller-title { font-size: clamp(43px,13vw,64px); } }
@media (max-width: 560px) { .seller-ticker span { padding-inline: 20px; }.seller-demo__tabs { grid-template-columns: 1fr; }.seller-demo__row { grid-template-columns: minmax(0,1fr) 72px; }.seller-demo__row .seller-demo__bar { display: none; }.seller-demo__board { grid-template-columns: 1fr; }.seller-demo__column { min-height: 0; }.seller-demo__kpis { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.seller-ticker__track { animation: none; }.seller-button, .seller-card { transition: none; } }