/*
 * WB Profit — Precision System 2026
 * Shared visual layer for the public site, analytics workspace and Excel tool.
 * Product logic and data contracts stay untouched.
 */

:root {
  --p-bg: #f3f6f1;
  --p-bg-2: #e9eee7;
  --p-surface: #ffffff;
  --p-surface-soft: #f8faf7;
  --p-ink: #0b1210;
  --p-ink-2: #15201c;
  --p-muted: #68736d;
  --p-muted-2: #8a948e;
  --p-line: rgba(18, 38, 29, .12);
  --p-line-strong: rgba(18, 38, 29, .2);
  --p-accent: #b8ef45;
  --p-accent-bright: #d3ff72;
  --p-accent-deep: #668b0f;
  --p-teal: #0c917f;
  --p-violet: #665fc9;
  --p-coral: #d95f5b;
  --p-amber: #b9791c;
  --p-shadow-sm: 0 1px 1px rgba(16, 34, 26, .02), 0 8px 24px rgba(16, 34, 26, .045);
  --p-shadow-md: 0 1px 1px rgba(16, 34, 26, .025), 0 18px 54px rgba(16, 34, 26, .075);
  --p-shadow-lg: 0 34px 100px rgba(16, 34, 26, .14);
  --p-radius-sm: 10px;
  --p-radius: 14px;
  --p-radius-lg: 22px;
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  --p-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Keep legacy variables in sync with the final layer. */
  --ink: var(--p-ink);
  --ink2: var(--p-bg-2);
  --ink3: var(--p-surface);
  --glass: rgba(255, 255, 255, .7);
  --glass2: rgba(255, 255, 255, .88);
  --glass3: #fff;
  --hair: var(--p-line);
  --hair2: var(--p-line-strong);
  --txt: var(--p-ink);
  --txt2: #3f4a44;
  --muted: var(--p-muted);
  --muted2: var(--p-muted-2);
  --lime: var(--p-accent);
  --mint: var(--p-teal);
  --coral: var(--p-coral);
  --amber: var(--p-amber);
  --teal: #187f91;
  --violet: var(--p-violet);
}

html {
  background: var(--p-bg);
  scrollbar-gutter: stable;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body::selection {
  color: var(--p-ink);
  background: var(--p-accent-bright);
}

body :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #739e14;
  outline-offset: 3px;
}

.wbp-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 5000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--wbp-scroll, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--p-accent), #78d9b8);
  box-shadow: 0 0 16px rgba(184, 239, 69, .55);
}

/* Shared data-signal brand mark. */
body :is(.nav-logo .mark, .footer-brand .mark, .brand .mark, .mobile-bar .mb-mark, .tool-brand-mark) {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: #111a17 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(11, 18, 16, .16) !important;
}

body :is(.nav-logo .mark, .footer-brand .mark, .brand .mark, .mobile-bar .mb-mark, .tool-brand-mark)::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 0 100% / 20% 42% no-repeat,
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 40% 100% / 20% 68% no-repeat,
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 80% 100% / 20% 100% no-repeat;
  filter: drop-shadow(0 5px 6px rgba(159, 215, 41, .22));
}

/* -------------------------------------------------------------------------- */
/* Public landing                                                             */
/* -------------------------------------------------------------------------- */

body.premium-landing {
  display: block;
  min-height: 100%;
  color: var(--p-ink);
  background:
    radial-gradient(circle at 86% 4%, rgba(184, 239, 69, .18), transparent 31rem),
    var(--p-bg);
}

.premium-landing .bg-texture .grid {
  opacity: .7;
  background-size: 72px 72px;
  background-image:
    linear-gradient(to right, rgba(18, 38, 29, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 38, 29, .035) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .7) 40%, transparent 84%);
}

.premium-landing .bg-texture .noise { opacity: .01; }

.premium-landing .nav {
  top: 14px;
  right: auto;
  left: 50%;
  width: min(calc(100% - 28px), 1480px);
  height: 66px;
  padding: 0 12px 0 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(18, 38, 29, .12);
  border-radius: 16px;
  background: rgba(253, 254, 252, .88) !important;
  box-shadow: 0 18px 56px rgba(18, 38, 29, .08), inset 0 1px rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(145%);
}

.premium-landing .nav.premium-nav-scrolled {
  background: rgba(253, 254, 252, .96) !important;
  box-shadow: 0 16px 46px rgba(18, 38, 29, .12), inset 0 1px white;
}

.premium-landing .nav-logo {
  gap: 10px;
  min-width: 184px;
}

.premium-landing .nav-logo .mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.premium-landing .nav-logo .name {
  color: var(--p-ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.premium-landing .nav-logo .name span { color: #84b11b; }
.premium-landing .nav-logo .sub { color: #7b857f; font-size: 8.5px; letter-spacing: .09em; }
.premium-landing .nav-links { gap: clamp(18px, 2.1vw, 34px); }
.premium-landing .nav-links a { color: #56615b; font-size: 12.5px; font-weight: 620; }
.premium-landing .nav-links a:hover { color: var(--p-ink); }

.premium-landing .btn,
.premium-landing .price-cta {
  min-height: 42px;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 690;
  letter-spacing: -.01em;
  transition: transform .2s var(--p-ease), border-color .2s, background .2s, color .2s, box-shadow .2s;
}

.premium-landing .btn:active { transform: translateY(1px) scale(.99); }

.premium-landing .btn-lime,
.premium-landing .price-cta {
  color: var(--p-ink);
  border-color: #9ed02f;
  background: linear-gradient(135deg, var(--p-accent-bright), #aee239);
  box-shadow: 0 10px 24px rgba(122, 164, 28, .14), inset 0 1px rgba(255, 255, 255, .72);
}

.premium-landing .btn-lime:hover,
.premium-landing .price-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(122, 164, 28, .22), inset 0 1px white;
}

.premium-landing .btn-ghost {
  color: #26312b;
  border-color: var(--p-line);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px white;
}

.premium-landing .btn-ghost::before { display: none; }
.premium-landing .btn-ghost:hover {
  color: var(--p-ink);
  border-color: var(--p-line-strong);
  background: #fff;
  transform: translateY(-2px);
}

.premium-landing .hero {
  display: grid;
  grid-template-columns: minmax(430px, .82fr) minmax(610px, 1.18fr);
  grid-template-rows: repeat(6, auto);
  column-gap: clamp(48px, 6vw, 104px);
  align-content: center;
  align-items: start;
  min-height: 960px;
  padding: 132px max(30px, calc((100vw - 1480px) / 2)) 88px;
  overflow: hidden;
  text-align: left;
  color: var(--p-ink);
  background:
    radial-gradient(circle at 86% 20%, rgba(184, 239, 69, .22), transparent 26rem),
    radial-gradient(circle at 6% 78%, rgba(34, 145, 127, .06), transparent 32rem),
    linear-gradient(145deg, #fbfcfa 0%, #f1f5ef 74%, #eaf0e7 100%);
}

.premium-landing .hero::before {
  display: none;
}

.premium-landing .hero::after {
  content: "01";
  position: absolute;
  right: max(28px, calc((100vw - 1480px) / 2));
  bottom: 38px;
  color: rgba(18, 38, 29, .09);
  font-family: var(--p-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  -webkit-text-stroke: 0;
}

.premium-landing .hero-tag {
  grid-column: 1;
  justify-self: start;
  margin: 0 0 22px;
  padding: 8px 12px;
  color: #59770f;
  border-color: rgba(104, 142, 16, .22);
  background: rgba(205, 251, 99, .2);
  font-family: var(--p-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
}

.premium-landing .hero-tag .dot {
  background: #83b61b;
  box-shadow: 0 0 0 5px rgba(131, 182, 27, .11);
}

.premium-landing .hero h1 {
  grid-column: 1;
  max-width: 670px;
  margin: 0;
  color: var(--p-ink);
  font-size: clamp(58px, 5.25vw, 86px);
  font-weight: 720;
  line-height: .94;
  letter-spacing: -.06em;
}

.premium-landing .hero h1 .lime {
  color: #6e9611;
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.premium-landing .hero > p {
  grid-column: 1;
  max-width: 610px;
  margin: 30px 0 0;
  color: #536059;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
}

.premium-landing .hero-actions {
  grid-column: 1;
  justify-content: flex-start;
  margin: 34px 0 0;
}

.premium-landing .hero-actions .btn {
  min-height: 50px;
  padding: 14px 19px;
  font-size: 13px;
}

.premium-landing .hero-note {
  grid-column: 1;
  justify-content: flex-start;
  margin-top: 18px;
  color: #69756e;
  font-size: 10.5px;
  line-height: 1.45;
}

.premium-landing .hero-note + .hero-note {
  max-width: 540px;
  margin-top: 8px !important;
  padding-top: 8px;
  border-top: 1px solid var(--p-line);
}

.premium-landing .hero-note .ck { color: #618b0d; }

.premium-landing .mockup-wrap {
  grid-column: 2;
  grid-row: 1 / span 7;
  align-self: center;
  width: min(100%, 790px);
  max-width: none;
  margin: 0;
  perspective: 1600px;
}

.premium-landing .mockup-glow {
  top: 2%;
  width: 82%;
  height: 92%;
  background: radial-gradient(ellipse at center, rgba(184, 239, 69, .2), transparent 70%);
  filter: blur(26px);
}

.premium-landing .mockup {
  position: relative;
  overflow: hidden;
  border-color: rgba(18, 38, 29, .17);
  border-radius: 19px;
  background: rgba(253, 254, 252, .94);
  box-shadow: var(--p-shadow-lg), inset 0 1px white;
  transform: rotateY(-2deg) rotateX(1deg);
  transform-origin: center;
  animation: pMockupFloat 7s var(--p-ease) infinite;
}

.premium-landing .mockup::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  transform: translateY(-105%);
  background: linear-gradient(to bottom, transparent 20%, rgba(211, 255, 114, .075) 50%, transparent 80%);
  animation: pDataScan 8s ease-in-out 1.5s infinite;
}

.premium-landing .mockup-bar {
  border-color: var(--p-line);
  background: #eef2ec;
}

.premium-landing .mockup-bar .url {
  color: #737e77;
  border-color: var(--p-line);
  background: rgba(255, 255, 255, .75);
  font-family: var(--p-mono);
}

.premium-landing .mock-sidebar {
  border-color: var(--p-line);
  background: #111916;
}

.premium-landing .mock-brand,
.premium-landing .mock-nav-item.active { color: var(--p-ink); }
.premium-landing .mock-nav-group { color: #6d7a73; }
.premium-landing .mock-nav-item { color: #aeb8b2; }
.premium-landing .mock-nav-item.active {
  border-color: rgba(184, 239, 69, .55);
  background: var(--p-accent);
}
.premium-landing .mock-content { background: #f5f7f3; }
.premium-landing .mock-card {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}
.premium-landing .mock-label, .premium-landing .mock-sub { color: var(--p-muted); }
.premium-landing .mock-val { color: var(--p-ink); font-family: var(--p-mono); }
.premium-landing .mock-bar-track, .premium-landing .mock-line { background: #e4e9e2; }
.premium-landing .mock-bar-fill {
  transform-origin: left;
  animation: pBarIn 1.2s var(--p-ease) both;
}

.premium-landing :is(.section, .how, .calc-section, .pricing, .faq, .insights-ticker) {
  padding-top: clamp(96px, 9vw, 144px);
  padding-bottom: clamp(96px, 9vw, 144px);
}

.premium-landing :is(.section, .how, .calc-section, .faq) {
  color: var(--p-ink);
  background: #f8faf7;
}

.premium-landing .section-title {
  max-width: 980px;
  color: var(--p-ink);
  font-size: clamp(42px, 4.7vw, 68px);
  font-weight: 710;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.premium-landing .section-title .lime {
  color: #6a900f;
  -webkit-text-stroke: 0;
}

.premium-landing .section-tag {
  color: #617f18;
  font-family: var(--p-mono);
  font-size: 10px;
  letter-spacing: .13em;
}

.premium-landing .section-sub {
  max-width: 720px;
  margin-top: 20px;
  color: #65716a;
  font-size: 16px;
  line-height: 1.7;
}

.premium-landing .trust-bar {
  border-block: 1px solid var(--p-line);
  background: #111916;
}

.premium-landing .trust-stat { color: white; }
.premium-landing .trust-stat .num { color: var(--p-accent); font-family: var(--p-mono); }
.premium-landing .trust-stat .lbl { color: #a9b5af; }

.premium-landing .problem {
  color: var(--p-ink);
  background: #e9eee7;
}

.premium-landing .problem-grid { gap: 14px; }
.premium-landing .problem-card {
  border-color: var(--p-line);
  border-radius: var(--p-radius-lg);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--p-shadow-sm);
}

.premium-landing .problem-card.good {
  color: white;
  border-color: rgba(184, 239, 69, .2);
  background:
    linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
    #101815;
  box-shadow: var(--p-shadow-md);
}

.premium-landing .problem-card.good p,
.premium-landing .problem-card.good li { color: #bdc7c1; }

.premium-landing .insights-ticker {
  color: var(--p-ink);
  background: #f4f7f2;
}

.premium-landing .ticker-grid { gap: 12px; }
.premium-landing .ticker-card {
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}

.premium-landing .ticker-card:hover {
  transform: translateY(-3px);
  border-color: var(--p-line-strong);
  box-shadow: var(--p-shadow-md);
}

.premium-landing .ticker-title { color: var(--p-ink); }
.premium-landing .ticker-detail { color: var(--p-muted); }

.premium-landing #features { background: #f8faf7 !important; }

.premium-landing .product-architecture {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 16px;
  margin-top: 54px;
}

.premium-landing .product-path {
  min-height: 520px;
  border-color: var(--p-line);
  border-radius: var(--p-radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--path-accent-rgb), .1), transparent 260px),
    #fff;
  box-shadow: var(--p-shadow-sm);
}

.premium-landing .product-path:hover {
  transform: translateY(-4px);
  box-shadow: var(--p-shadow-md);
}

.premium-landing .product-path h3 { letter-spacing: -.045em; }
.premium-landing .product-path > p { color: var(--p-muted); }
.premium-landing .product-path-bridge { color: var(--p-muted); font-family: var(--p-mono); }

.premium-landing .feature-grid { gap: 12px; }
.premium-landing .feature-card {
  color: var(--p-ink);
  min-height: 254px;
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: #fff;
  box-shadow: none;
}

.premium-landing .feature-card:first-child {
  color: white;
  border-color: rgba(184, 239, 69, .2);
  background: #111916;
}

.premium-landing .feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--p-line-strong);
  box-shadow: var(--p-shadow-md);
}

.premium-landing .feature-card p { color: var(--p-muted); }
.premium-landing .feature-card:first-child p { color: #abb6b0; }
.premium-landing .feature-ico {
  color: #618817;
  border-color: rgba(104, 145, 19, .18);
  background: rgba(184, 239, 69, .14);
}
.premium-landing .feature-chip {
  color: #5d7e14;
  border-color: rgba(104, 145, 19, .2);
  background: rgba(184, 239, 69, .11);
}

.premium-landing #excel-module { background: #e9eee7 !important; }

.premium-landing .how { background: #fafcf9; }
.premium-landing .how-grid { gap: 12px; }
.premium-landing .step {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: #fff;
  box-shadow: none;
}

.premium-landing .step:hover { border-color: var(--p-line-strong); box-shadow: var(--p-shadow-sm); }
.premium-landing .step::after { color: rgba(18, 38, 29, .04); -webkit-text-stroke: 0; }
.premium-landing .step-num { color: var(--p-ink); background: var(--p-accent); }
.premium-landing .step p, .premium-landing .step-sub { color: var(--p-muted); }

.premium-landing .metrics {
  color: white;
  background:
    linear-gradient(90deg, rgba(184, 239, 69, .065) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(184, 239, 69, .065) 1px, transparent 1px) 0 0 / 72px 72px,
    #101815 !important;
}

.premium-landing .metrics .section-title { color: white; }
.premium-landing .metrics .section-sub { color: #aeb9b3; }
.premium-landing .metric-chip {
  color: #e8eee9;
  border-color: rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .035);
}
.premium-landing .metric-chip:hover {
  color: var(--p-ink);
  border-color: var(--p-accent);
  background: var(--p-accent);
}
.premium-landing .metric-chip .val { color: var(--p-accent); font-family: var(--p-mono); }
.premium-landing .metric-chip:hover .val { color: var(--p-ink); }

.premium-landing .calc-section {
  background:
    radial-gradient(circle at 82% 10%, rgba(184, 239, 69, .14), transparent 26rem),
    #edf2eb;
}

.premium-landing .calc-grid { gap: 14px; }
.premium-landing .calc-card {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius-lg);
  background: #fff;
  box-shadow: var(--p-shadow-sm);
}
.premium-landing .calc-card h3 { color: var(--p-ink); }
.premium-landing :is(.calc-input, .calc-select, .calc-input-wrap) {
  color: var(--p-ink);
  border-color: var(--p-line-strong);
  background: var(--p-surface-soft);
}
.premium-landing .calc-kpi,
.premium-landing .calc-line { border-color: var(--p-line); }
.premium-landing .calc-kpi .v,
.premium-landing .calc-line .v { font-family: var(--p-mono); }
.premium-landing .calc-lock-overlay { color: white; background: rgba(12, 19, 16, .86); }

.premium-landing .pricing {
  color: var(--p-ink);
  background: #e9eee7;
}
.premium-landing :is(.bot-tariff-card, .price-card) {
  border-color: var(--p-line) !important;
  border-radius: var(--p-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--p-shadow-sm) !important;
}
.premium-landing .price-card.popular {
  color: white;
  border-color: rgba(184, 239, 69, .25) !important;
  background: #101815 !important;
  box-shadow: var(--p-shadow-md) !important;
}
.premium-landing :is(.price-period, .price-per-month, .price-total strong) {
  font-family: var(--p-mono);
}

.premium-landing .faq { background: #f8faf7; }
.premium-landing .faq-list { border-top: 1px solid var(--p-line); }
.premium-landing .faq-item { border-color: var(--p-line); }
.premium-landing .faq-q { color: var(--p-ink); }
.premium-landing .faq-a { color: var(--p-muted); }

.premium-landing .cta-final {
  min-height: 610px;
  color: white;
  background:
    radial-gradient(circle at 74% 26%, rgba(184, 239, 69, .15), transparent 28rem),
    linear-gradient(90deg, rgba(184, 239, 69, .045) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(184, 239, 69, .045) 1px, transparent 1px) 0 0 / 72px 72px,
    #0d1512;
}
.premium-landing .cta-final::before,
.premium-landing .cta-final::after { border-color: rgba(184, 239, 69, .14); }
.premium-landing .cta-final h2 { letter-spacing: -.055em; }

.premium-landing footer {
  color: #e9efeb;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: #0b1210;
}
.premium-landing footer a { color: #9eaaa3; }

.premium-landing .modal-overlay { background: rgba(7, 12, 10, .58); backdrop-filter: blur(8px); }
.premium-landing .modal {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius-lg);
  background: #fff;
  box-shadow: var(--p-shadow-lg);
}

/* -------------------------------------------------------------------------- */
/* Analytics workspace                                                        */
/* -------------------------------------------------------------------------- */

body.premium-dashboard {
  color: var(--p-ink);
  background:
    radial-gradient(circle at 90% -8%, rgba(184, 239, 69, .13), transparent 32rem),
    var(--p-bg);
}

.premium-dashboard .bg-texture .grid {
  opacity: .5;
  background-size: 72px 72px;
  background-image:
    linear-gradient(to right, rgba(18, 38, 29, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 38, 29, .035) 1px, transparent 1px);
}

.premium-dashboard .sidebar {
  width: 280px;
  padding: 20px 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  color: #eef3ef;
  background:
    linear-gradient(rgba(255, 255, 255, .018), rgba(255, 255, 255, 0)),
    #0c1411;
  box-shadow: 14px 0 44px rgba(15, 30, 23, .08);
}

.premium-dashboard .brand {
  margin-bottom: 8px;
  padding: 4px 10px 18px;
  color: white;
}
.premium-dashboard .brand .mark { width: 40px; height: 40px; border-radius: 11px; }
.premium-dashboard .brand .mark::before {
  inset: 8px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 0 100% / 20% 42% no-repeat,
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 40% 100% / 20% 68% no-repeat,
    linear-gradient(180deg, var(--p-accent-bright), #92c62a) 80% 100% / 20% 100% no-repeat;
  filter: drop-shadow(0 5px 6px rgba(159, 215, 41, .22));
}
.premium-dashboard .brand .name { color: white; font-size: 15px; letter-spacing: -.03em; }
.premium-dashboard .brand .name span { color: var(--p-accent); }
.premium-dashboard .brand .sub { color: #83918a; }

.premium-dashboard .workspace-switcher {
  margin: 0 2px 12px;
  padding: 7px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}
.premium-dashboard .workspace-switcher-label { color: #74827b; }
.premium-dashboard .workspace-choice {
  color: #c3cdc7;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
}
.premium-dashboard .workspace-choice:hover { background: rgba(255, 255, 255, .055); }
.premium-dashboard .workspace-choice[aria-pressed="true"] {
  color: var(--p-ink);
  border-color: rgba(184, 239, 69, .3);
  background: var(--p-accent);
  box-shadow: none;
}
.premium-dashboard .workspace-choice-copy small { color: #7f8d85; }
.premium-dashboard .workspace-choice[aria-pressed="true"] .workspace-choice-copy small { color: rgba(11, 18, 16, .62); }
.premium-dashboard .workspace-choice-icon { border-radius: 8px; }
.premium-dashboard .workspace-choice-state { font-family: var(--p-mono); }

.premium-dashboard .workspace-nav-meta,
.premium-dashboard .navgroup {
  color: #74817a;
  font-family: var(--p-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.premium-dashboard :is(.navitem, .navcat-btn) {
  min-height: 45px;
  margin: 1px 0;
  padding: 8px 10px;
  color: #aeb9b3;
  border-radius: 10px;
  font-size: 12.5px;
  transition: color .16s, background .16s, transform .16s;
}
.premium-dashboard :is(.navitem, .navcat-btn):hover {
  color: white;
  background: rgba(255, 255, 255, .055);
  transform: translateX(2px);
}
.premium-dashboard :is(.navitem, .navcat-btn).active {
  color: var(--p-ink);
  border-color: rgba(184, 239, 69, .45);
  background: var(--p-accent);
  box-shadow: none;
}
.premium-dashboard :is(.navitem, .navcat-btn) .ico {
  width: 30px;
  height: 30px;
  color: #aab6af;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}
.premium-dashboard :is(.navitem, .navcat-btn).active .ico {
  color: var(--p-ink);
  border-color: rgba(11, 18, 16, .08);
  background: rgba(11, 18, 16, .08);
}
.premium-dashboard .navcat-count {
  color: #8f9c95;
  background: rgba(255, 255, 255, .05);
  font-family: var(--p-mono);
}
.premium-dashboard .navcat-btn.active .navcat-count { color: var(--p-ink); background: rgba(11, 18, 16, .1); }

.premium-dashboard .navcat-flyout {
  color: white;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(12, 20, 17, .98);
  box-shadow: 0 28px 80px rgba(5, 12, 9, .35);
}
.premium-dashboard .navcat-flyout::before {
  border-color: rgba(255, 255, 255, .08);
  background: #0c1411;
}
.premium-dashboard .sidebar-foot {
  border-color: rgba(255, 255, 255, .07);
  color: #819088;
}

.premium-dashboard .main {
  min-width: 0;
  padding: 24px clamp(22px, 3vw, 48px) 88px;
  color: var(--p-ink);
  background: transparent;
}

.premium-dashboard .workspace-strip {
  position: sticky;
  top: 12px;
  z-index: 42;
  max-width: 1480px;
  margin: 0 auto 24px;
  padding: 14px 16px;
  color: white;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: rgba(13, 21, 18, .94);
  box-shadow: 0 16px 48px rgba(14, 29, 22, .14), inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px);
}
.premium-dashboard .workspace-kicker { color: var(--p-accent); font-family: var(--p-mono); }
.premium-dashboard .workspace-strip-identity strong { color: white; letter-spacing: -.03em; }
.premium-dashboard .workspace-strip-identity p { color: #9fada5; }
.premium-dashboard .workspace-orbit { border-color: rgba(184, 239, 69, .25); }
.premium-dashboard .workspace-orbit i { background: var(--p-accent); }
.premium-dashboard .workspace-mini-viz span { background: linear-gradient(to top, #78a817, var(--p-accent-bright)); }
.premium-dashboard .workspace-inline-switch {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}
.premium-dashboard .workspace-inline-switch button { color: #aab6af; }
.premium-dashboard .workspace-inline-switch button[aria-pressed="true"] {
  color: var(--p-ink);
  background: var(--p-accent);
}
.premium-dashboard .workspace-primary-action {
  color: var(--p-ink);
  border-color: #a0d031;
  background: var(--p-accent);
}

.premium-dashboard .section {
  width: min(100%, 1480px);
  margin-inline: auto;
}

.premium-dashboard .topbar {
  margin: 8px 0 22px;
  align-items: end;
}
.premium-dashboard .premium-section-hero {
  min-height: 128px;
  padding: 44px 24px 20px;
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--p-shadow-sm);
}
.premium-dashboard .premium-section-hero::before {
  inset: 0 auto 0 0;
  width: 3px;
  height: auto;
  background: var(--workspace-accent);
  mask-image: none;
}
.premium-dashboard .premium-section-hero::after {
  right: 22px;
  bottom: -18px;
  color: rgba(var(--workspace-accent-rgb), .035);
  -webkit-text-stroke: 0;
  font-size: 92px;
  opacity: 1;
}
.premium-dashboard .topbar h1 {
  color: var(--p-ink);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 710;
  line-height: 1.05;
  letter-spacing: -.05em;
}
.premium-dashboard .topbar .greet {
  max-width: 820px;
  margin-top: 8px;
  color: var(--p-muted);
  font-size: 13px;
  line-height: 1.55;
}

.premium-dashboard .grid { gap: 14px; }
.premium-dashboard .card {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--p-shadow-sm);
}
.premium-dashboard .card:hover {
  border-color: var(--p-line-strong);
  box-shadow: var(--p-shadow-md);
}
.premium-dashboard #reportGrid > .card.hero {
  color: white;
  border-color: rgba(184, 239, 69, .2);
  background:
    radial-gradient(circle at 85% 0, rgba(184, 239, 69, .13), transparent 16rem),
    #101815;
  box-shadow: var(--p-shadow-md);
}
.premium-dashboard #reportGrid > .card.hero .eyebrow { color: #aeb9b3; }
.premium-dashboard #reportGrid > .card.hero .big { color: white; }
.premium-dashboard #reportGrid > .card.hero .kpi {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
}
.premium-dashboard #reportGrid > .card.hero .kpi .l { color: #9daaa3; }

.premium-dashboard .eyebrow {
  color: #727d77;
  font-family: var(--p-mono);
  font-size: 9.5px;
  letter-spacing: .11em;
}
.premium-dashboard :is(.big, .kpi .v, .stat .v, .num, .calc-kpi .v, .calc-line .v) {
  font-family: var(--p-mono);
  letter-spacing: -.045em;
}
.premium-dashboard .big { color: var(--p-ink); }
.premium-dashboard .kpi {
  border-color: var(--p-line);
  border-radius: 10px;
  background: var(--p-surface-soft);
}
.premium-dashboard .kpi .l, .premium-dashboard .stat .l { color: var(--p-muted); }
.premium-dashboard .pos { color: var(--p-teal) !important; }
.premium-dashboard .neg { color: var(--p-coral) !important; }

.premium-dashboard :is(.btn, .pbtn, .rnp-preset, .cal-actions button) {
  min-height: 38px;
  border-radius: 9px;
  font-weight: 650;
}
.premium-dashboard .btn-primary,
.premium-dashboard #periodBar .pbtn.active,
.premium-dashboard .cal-apply {
  color: var(--p-ink);
  border-color: #9ed02f;
  background: var(--p-accent);
  box-shadow: none;
}
.premium-dashboard .btn-primary:hover { background: var(--p-accent-bright); }
.premium-dashboard .btn-ghost {
  color: #2e3933;
  border-color: var(--p-line-strong);
  background: rgba(255, 255, 255, .72);
}
.premium-dashboard .btn-ghost:hover { color: var(--p-ink); border-color: rgba(18, 38, 29, .3); background: #fff; }
.premium-dashboard #periodBar .pbtn {
  color: #4e5a53;
  border-color: var(--p-line);
  background: rgba(255, 255, 255, .7);
}

.premium-dashboard :is(input, select, textarea, .w-input, .calc-input, .calc-select, .calc-input-wrap) {
  color: var(--p-ink);
  border-color: var(--p-line-strong);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(18, 38, 29, .025);
}
.premium-dashboard :is(input, select, textarea):focus {
  border-color: #80a925;
  box-shadow: 0 0 0 3px rgba(184, 239, 69, .16);
}

.premium-dashboard .dropzone {
  border-color: rgba(93, 132, 12, .32);
  border-radius: var(--p-radius);
  background:
    linear-gradient(90deg, rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 24px 24px,
    #f8faf6;
}
.premium-dashboard .dropzone:hover {
  border-color: #80aa20;
  background-color: #f5faef;
}

.premium-dashboard :is(.bar-track, .rnp-track) { background: #e6ebe4; }
.premium-dashboard :is(.bar-fill, .rnp-fill) { background: linear-gradient(90deg, #7ca817, var(--p-accent)); }

.premium-dashboard canvas {
  filter: saturate(.9) contrast(1.02);
}

.premium-dashboard :is(table, .data-table) {
  color: var(--p-ink);
  font-size: 12px;
}
.premium-dashboard :is(thead th, .data-table th) {
  color: #59645e;
  border-color: var(--p-line);
  background: #eef2ec;
  font-family: var(--p-mono);
  font-size: 9.5px;
  letter-spacing: .035em;
}
.premium-dashboard :is(tbody td, .data-table td) { border-color: rgba(18, 38, 29, .075); }
.premium-dashboard tbody tr:hover { background: rgba(184, 239, 69, .055); }

.premium-dashboard .cal-pop {
  color: var(--p-ink);
  border-color: var(--p-line);
  background: #fff;
  box-shadow: var(--p-shadow-lg);
}
.premium-dashboard .cal-nav,
.premium-dashboard .cal-quick button {
  color: var(--p-ink);
  border-color: var(--p-line);
  background: var(--p-surface-soft);
}
.premium-dashboard .cal-day { color: var(--p-ink); }
.premium-dashboard .cal-day.cal-in-range { background: rgba(184, 239, 69, .25); }
.premium-dashboard .cal-day.cal-range-start,
.premium-dashboard .cal-day.cal-range-end,
.premium-dashboard .cal-day.cal-single { color: var(--p-ink); background: var(--p-accent); }

.premium-dashboard :is(.modal, .wizard, .w-card) {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius-lg);
  background: #fff;
  box-shadow: var(--p-shadow-lg);
}
.premium-dashboard :is(.modal-overlay, .wizard-overlay) {
  background: rgba(7, 12, 10, .58);
  backdrop-filter: blur(8px);
}

.premium-dashboard .insight-item {
  border-color: var(--p-line);
  border-radius: 10px;
  background: var(--p-surface-soft);
}
.premium-dashboard .empty { color: var(--p-muted); }
.premium-dashboard .status-dot { box-shadow: 0 0 0 5px currentColor; }
.premium-dashboard #loadbar { background: linear-gradient(90deg, var(--p-accent), #6ed2b4); }

/* -------------------------------------------------------------------------- */
/* Excel digitization tool                                                    */
/* -------------------------------------------------------------------------- */

body.wbp-tool {
  min-height: 100%;
  overflow-x: hidden;
  color: var(--p-ink);
  background:
    radial-gradient(circle at 92% -6%, rgba(184, 239, 69, .16), transparent 30rem),
    linear-gradient(90deg, rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 72px 72px,
    var(--p-bg);
}

.wbp-tool .app {
  max-width: 1580px;
  min-width: 0;
  padding: 20px clamp(16px, 2.5vw, 38px) 72px;
}

.wbp-tool :is(
  .upload-section,
  .upload-section > *,
  .charts-grid,
  .charts-grid > *,
  .top-articles-body,
  .top-articles-body > *,
  .kpi-grid,
  .kpi-grid > *,
  .card,
  .chart-card,
  .table-card
) {
  min-width: 0;
  max-width: 100%;
}

.wbp-tool header.top {
  position: sticky;
  top: 12px;
  z-index: 80;
  min-height: 84px;
  margin-bottom: 18px;
  padding: 14px 16px;
  flex-wrap: nowrap;
  color: white;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(13, 21, 18, .95);
  box-shadow: 0 18px 54px rgba(14, 29, 22, .16), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px);
}

.wbp-tool .tool-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
}

.wbp-tool .tool-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: white;
  text-decoration: none;
}

.wbp-tool .tool-brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.wbp-tool .tool-brand-copy {
  display: grid;
  line-height: 1.05;
}
.wbp-tool .tool-brand-copy strong { font-size: 13px; letter-spacing: -.03em; }
.wbp-tool .tool-brand-copy small { margin-top: 4px; color: #85938b; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.wbp-tool .tool-title {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.wbp-tool header.top h1 {
  color: white;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -.04em;
}
.wbp-tool header.top .subtitle {
  max-width: 900px;
  color: #9faca5;
  font-size: 11.5px;
  line-height: 1.45;
}

.wbp-tool .badge {
  margin-left: 6px;
  padding: 4px 7px;
  color: var(--p-ink);
  border: 1px solid rgba(184, 239, 69, .5);
  border-radius: 6px;
  background: var(--p-accent);
  font-family: var(--p-mono);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wbp-tool .header-actions { flex: 0 0 auto; }

.wbp-tool .card,
.wbp-tool .chart-card,
.wbp-tool .table-card,
.wbp-tool .kpi-card {
  color: var(--p-ink);
  border-color: var(--p-line);
  border-radius: var(--p-radius);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--p-shadow-sm);
}

.wbp-tool .upload-section { gap: 12px; margin-bottom: 12px; }
.wbp-tool .card { padding: 16px 18px; }
.wbp-tool .dropzone {
  min-height: 156px;
  display: grid;
  place-content: center;
  border: 1px dashed rgba(93, 132, 12, .42);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(18, 38, 29, .03) 1px, transparent 1px) 0 0 / 24px 24px,
    #f8faf6;
}
.wbp-tool .dropzone:hover,
.wbp-tool .dropzone.dragover {
  border-color: #729b16;
  background-color: #f3f9ec;
  box-shadow: inset 0 0 0 1px rgba(184, 239, 69, .3);
}
.wbp-tool .dropzone .dz-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 11px;
  background: var(--p-accent);
  font-size: 19px;
}
.wbp-tool .dropzone .dz-title { font-size: 13px; }
.wbp-tool .dropzone .dz-sub { max-width: 720px; color: var(--p-muted); font-size: 10.5px; line-height: 1.5; }

.wbp-tool .file-chip {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: var(--p-surface-soft);
}
.wbp-tool .file-chip-type { border-radius: 5px; }
.wbp-tool .file-chip-name { color: var(--p-ink); }
.wbp-tool .file-chip-name { min-width: 0; flex: 1 1 auto; }
.wbp-tool :is(.file-chip-type, .file-chip-date, .file-chip-rows, .file-chip-remove) { flex: 0 0 auto; }
.wbp-tool .file-chip-date { color: var(--p-teal); }

.wbp-tool .coverage-card { margin-bottom: 12px; }
.wbp-tool .coverage-strip { gap: 6px; }
.wbp-tool .cov-day {
  border-color: var(--p-line);
  border-radius: 9px;
  background: var(--p-surface-soft);
}
.wbp-tool .cov-day.cov-full { border-color: rgba(12, 145, 127, .22); background: rgba(12, 145, 127, .065); }
.wbp-tool .cov-day.cov-partial { border-color: rgba(185, 121, 28, .24); background: rgba(185, 121, 28, .065); }
.wbp-tool .cov-day.cov-none { border-color: rgba(217, 95, 91, .22); background: rgba(217, 95, 91, .055); }
.wbp-tool .cov-dot.on { background: var(--p-teal); }
.wbp-tool .cov-dot.off { background: var(--p-coral); }
.wbp-tool .coverage-warning {
  color: #6f4a0e;
  border-color: rgba(185, 121, 28, .24);
  border-radius: 10px;
  background: rgba(185, 121, 28, .07);
}

.wbp-tool .filters {
  position: sticky;
  top: 108px;
  z-index: 60;
  align-items: end;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid var(--p-line);
  border-radius: 13px;
  background: rgba(250, 252, 249, .92);
  box-shadow: var(--p-shadow-sm);
  backdrop-filter: blur(16px);
}
.wbp-tool .filter-group { gap: 5px; }
.wbp-tool .filter-group label {
  color: #727d77;
  font-family: var(--p-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
}

.wbp-tool :is(input[type="date"], input[type="text"], select) {
  min-height: 36px;
  color: var(--p-ink);
  border-color: var(--p-line-strong);
  border-radius: 8px;
  background: #fff;
}
.wbp-tool :is(input, select):focus {
  outline: none;
  border-color: #7ca51e;
  box-shadow: 0 0 0 3px rgba(184, 239, 69, .16);
}

.wbp-tool .btn {
  min-height: 36px;
  color: #2f3a34;
  border-color: var(--p-line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  font-weight: 650;
}
.wbp-tool .btn:hover { border-color: rgba(18, 38, 29, .28); background: var(--p-surface-soft); }
.wbp-tool .btn.primary {
  color: var(--p-ink);
  border-color: #9dce31;
  background: var(--p-accent);
}
.wbp-tool .btn.primary:hover { background: var(--p-accent-bright); }
.wbp-tool header.top .btn.primary {
  box-shadow: 0 8px 20px rgba(126, 169, 30, .14);
}

.wbp-tool .article-panel {
  border-color: var(--p-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--p-shadow-lg);
}
.wbp-tool .article-item:hover { background: rgba(184, 239, 69, .08); }
.wbp-tool .article-code { color: var(--p-teal); }

.wbp-tool .kpi-grid {
  gap: 9px;
  margin-bottom: 18px;
}
.wbp-tool .kpi-card {
  min-height: 100px;
  padding: 13px 14px;
  box-shadow: none;
}
.wbp-tool .kpi-card.primary {
  color: white;
  border-color: rgba(184, 239, 69, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(184, 239, 69, .14), transparent 8rem),
    #101815;
}
.wbp-tool .kpi-label {
  color: var(--p-muted);
  font-family: var(--p-mono);
  font-size: 8.5px;
  letter-spacing: .055em;
}
.wbp-tool .kpi-card.primary .kpi-label,
.wbp-tool .kpi-card.primary .kpi-sub { color: #9faca5; }
.wbp-tool .kpi-value {
  color: var(--p-ink);
  font-family: var(--p-mono);
  font-size: 19px;
  letter-spacing: -.045em;
}
.wbp-tool .kpi-card.primary .kpi-value { color: white; }
.wbp-tool .kpi-section-label { color: var(--p-ink); }

.wbp-tool .charts-grid { gap: 12px; }
.wbp-tool .chart-card {
  padding: 16px 16px 12px;
  box-shadow: none;
}
.wbp-tool .chart-card h3 {
  color: var(--p-ink);
  font-size: 13px;
  letter-spacing: -.02em;
}
.wbp-tool .chart-card h3 .hint { color: var(--p-muted); }
.wbp-tool canvas { filter: saturate(.9) contrast(1.02); }
.wbp-tool canvas { max-width: 100% !important; }

.wbp-tool .table-card { padding: 16px; box-shadow: none; }
.wbp-tool .table-scroll,
.wbp-tool .art-table-scroll {
  width: 100%;
  max-width: 100%;
  border-color: var(--p-line);
  border-radius: 9px;
}
.wbp-tool table { color: var(--p-ink); font-size: 11.5px; }
.wbp-tool thead th {
  color: #59645e;
  border-color: var(--p-line);
  background: #eef2ec;
  font-family: var(--p-mono);
  font-size: 9px;
  letter-spacing: .035em;
}
.wbp-tool tbody td { border-color: rgba(18, 38, 29, .075); }
.wbp-tool tbody tr:hover { background: rgba(184, 239, 69, .06); }
.wbp-tool thead th.sort-asc::after,
.wbp-tool thead th.sort-desc::after { color: #769f18; }

.wbp-tool .art-card {
  border-color: var(--p-line);
  border-radius: 10px;
}
.wbp-tool .art-card.expanded { border-color: rgba(104, 145, 19, .35); }
.wbp-tool .art-head { background: var(--p-surface-soft); }
.wbp-tool .art-head:hover { background: rgba(184, 239, 69, .07); }
.wbp-tool .art-code, .wbp-tool .art-caret { color: var(--p-teal); }
.wbp-tool .art-table .sticky-col,
.wbp-tool .art-table .spark-col { background: #fff; }
.wbp-tool .art-table thead th.sticky-col,
.wbp-tool .art-table thead th.spark-col { background: #eef2ec; }
.wbp-tool .spark rect { fill: #7fa91f; }

.wbp-tool footer.note {
  padding-top: 18px;
  border-top: 1px solid var(--p-line);
  color: var(--p-muted);
}

/* -------------------------------------------------------------------------- */
/* Motion and responsive rules                                                */
/* -------------------------------------------------------------------------- */

.wbp-motion [data-wbp-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--p-ease), transform .65s var(--p-ease);
  transition-delay: var(--wbp-delay, 0ms);
}
.wbp-motion [data-wbp-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pMockupFloat {
  0%, 100% { transform: rotateY(-2deg) rotateX(1deg) translateY(0); }
  50% { transform: rotateY(-1deg) rotateX(.5deg) translateY(-8px); }
}

@keyframes pDataScan {
  0%, 62% { transform: translateY(-105%); opacity: 0; }
  72% { opacity: 1; }
  92%, 100% { transform: translateY(105%); opacity: 0; }
}

@keyframes pBarIn {
  from { transform: scaleX(.08); opacity: .4; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 1260px) {
  .premium-landing .nav-links { display: none; }
  .premium-landing .nav-burger { display: flex; }
  .premium-landing .hero {
    grid-template-columns: minmax(380px, .78fr) minmax(520px, 1.22fr);
    column-gap: 36px;
  }
  .premium-landing .hero h1 { font-size: clamp(54px, 6vw, 74px); }
  .premium-landing .hero-actions .btn { padding-inline: 15px; font-size: 12px; }
}

@media (max-width: 1080px) {
  .premium-landing .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    padding-top: 142px;
  }
  .premium-landing .hero > :not(.mockup-wrap) { grid-column: 1; }
  .premium-landing .hero h1 { max-width: 820px; font-size: clamp(58px, 9vw, 92px); }
  .premium-landing .hero > p { max-width: 720px; }
  .premium-landing .mockup-wrap {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, 900px);
    margin-top: 54px;
  }
  .premium-landing .product-architecture { grid-template-columns: 1fr; }
  .premium-landing .product-path-bridge { min-height: 48px; }

  .wbp-tool header.top { align-items: flex-start; }
  .wbp-tool .tool-heading { align-items: flex-start; }
  .wbp-tool .tool-brand-copy { display: none; }
  .wbp-tool .tool-title { padding-left: 12px; }
}

@media (max-width: 900px) {
  .premium-dashboard .main { padding: 14px 14px 72px; }
  .premium-dashboard .workspace-strip { top: 8px; margin-bottom: 18px; }
  .premium-dashboard .mobile-bar {
    color: white;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(13, 21, 18, .95);
    box-shadow: 0 14px 42px rgba(14, 29, 22, .14);
  }
  .premium-dashboard .mobile-bar .burger { color: white; }
  .premium-dashboard .mobile-bar .mb-title { color: white; }
  .premium-dashboard .mobile-bar .mb-title span { color: var(--p-accent); }
  .premium-dashboard .sidebar { box-shadow: 20px 0 70px rgba(4, 10, 7, .28); }

  .wbp-tool header.top {
    position: relative;
    top: 0;
    flex-wrap: wrap;
  }
  .wbp-tool .filters {
    position: relative;
    top: 0;
  }
}

@media (max-width: 760px) {
  .premium-landing .nav {
    top: 8px;
    width: calc(100% - 16px);
    height: 60px;
    border-radius: 14px;
  }
  .premium-landing .nav-logo { min-width: 0; }
  .premium-landing .nav-logo .sub { display: none; }
  .premium-landing .nav-cta .btn-ghost { display: none; }
  .premium-landing .nav-cta .btn-lime { min-height: 38px; padding-inline: 13px; font-size: 11px; }
  .premium-landing .hero {
    padding: 112px 18px 72px;
  }
  .premium-landing .hero::before { inset: 82px 8px 18px; border-radius: 20px; }
  .premium-landing .hero h1 { font-size: clamp(48px, 16vw, 72px); }
  .premium-landing .hero > p { margin-top: 24px; font-size: 15px; }
  .premium-landing .hero-actions { display: grid; width: 100%; gap: 9px; }
  .premium-landing .hero-actions .btn { width: 100%; }
  .premium-landing .hero-note { gap: 8px 14px; }
  .premium-landing .mockup-wrap { margin-top: 38px; }
  .premium-landing .mockup { transform: none; animation: none; }
  .premium-landing :is(.section, .how, .calc-section, .pricing, .faq, .insights-ticker) {
    padding-top: 82px;
    padding-bottom: 82px;
  }
  .premium-landing .section-title { font-size: clamp(38px, 12vw, 54px); }
  .premium-landing .product-path { min-height: auto; }
  .premium-landing .feature-card { min-height: auto; }
  .premium-landing .cta-final { min-height: 540px; }

  .wbp-tool .app { padding: 10px 10px 52px; }
  .wbp-tool header.top { padding: 12px; border-radius: 13px; }
  .wbp-tool .tool-heading { width: 100%; }
  .wbp-tool .tool-brand-mark { width: 38px; height: 38px; }
  .wbp-tool .tool-title { min-width: 0; }
  .wbp-tool header.top h1 { font-size: 17px; }
  .wbp-tool header.top .subtitle { display: none; }
  .wbp-tool .header-actions { width: 100%; }
  .wbp-tool .header-actions .btn { width: 100%; }
  .wbp-tool .upload-section { grid-template-columns: 1fr; }
  .wbp-tool .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wbp-tool .charts-grid { grid-template-columns: 1fr; }
  .wbp-tool .filters { align-items: stretch; }
  .wbp-tool .filter-group { width: 100%; }
  .wbp-tool .filter-group .row { flex-wrap: wrap; }
  .wbp-tool #articleBtn { width: 100%; }
  .wbp-tool .article-panel { width: calc(100vw - 20px); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wbp-motion [data-wbp-reveal] { opacity: 1; transform: none; }
}
