:root {
  color-scheme: dark;
  --traffic-page-bg: #230e15;
  --traffic-panel: #301820;
  --traffic-text: #fff6f8;
  --traffic-muted: #e5ccd3;
  --traffic-border: rgba(255, 255, 255, 0.16);
  --traffic-footer: #16070c;
  --traffic-eyebrow: #e5ccd3;
}

html[data-theme="light"] {
  color-scheme: light;
  --traffic-page-bg: #f1f0eb;
  --traffic-panel: #ffffff;
  --traffic-text: #133b4b;
  --traffic-muted: #526d78;
  --traffic-border: #cbd8dd;
  --traffic-footer: #133b4b;
  --traffic-eyebrow: #397f9b;
}

* { box-sizing: border-box; }
html { background: var(--traffic-page-bg); font: 20px "Segoe UI", "Helvetica Neue", Arial, sans-serif; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--traffic-page-bg); color: var(--traffic-text); }
.traffic-showcase-main { width: min(1500px, calc(100% - clamp(1.5rem, 5vw, 5rem))); margin: 0 auto; padding: 6.7rem 0 2.4rem; }
.traffic-workspace { border: 1px solid var(--traffic-border); border-radius: 24px; background: var(--traffic-panel); padding: clamp(1rem, 2.2vw, 2rem); box-shadow: 0 24px 80px rgba(12, 27, 35, 0.16); }
.traffic-workspace-head { max-width: 920px; margin-bottom: 1.25rem; }
.traffic-eyebrow { margin: 0 0 .45rem; color: var(--traffic-eyebrow); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.traffic-workspace h1 { margin: 0; max-width: 850px; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.045em; }
.traffic-workspace-head > p:last-child { margin: .8rem 0 0; color: var(--traffic-muted); line-height: 1.55; }
.traffic-frame-shell { overflow: hidden; height: min(860px, 82vh); min-height: 620px; border: 1px solid var(--traffic-border); border-radius: 18px; background: #101820; }
.traffic-frame-shell iframe { display: block; width: 100%; height: 100%; border: 0; background: #101820; }
.traffic-method-note { margin: .85rem .15rem 0; color: var(--traffic-muted); font-size: .76rem; line-height: 1.5; }
.traffic-showcase-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem max(1.5rem, calc((100vw - 1500px) / 2)); background: var(--traffic-footer); color: #f5f7f8; font-size: .78rem; }
.traffic-showcase-footer a { color: #dceaf0; text-underline-offset: .2em; }
.traffic-showcase-footer a:hover, .traffic-showcase-footer a:focus-visible { color: #8bd4f0; }
@media (max-width: 700px) {
  .traffic-showcase-main { width: calc(100% - 1rem); padding-top: 5.4rem; }
  .traffic-workspace { padding: .65rem; border-radius: 18px; }
  .traffic-workspace-head { padding: .45rem .35rem; }
  .traffic-frame-shell { height: 78vh; min-height: 560px; border-radius: 13px; }
  .traffic-showcase-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }