html { background: #080f1b; scroll-behavior: smooth; }
body { margin: 0; }
#budiprvi-web-design {
      color-scheme: light dark;
      --bp-bg: light-dark(#f5f7fb, #080f1b);
      --bp-surface: light-dark(#ffffff, #111c2d);
      --bp-surface-2: light-dark(#edf2f8, #172337);
      --bp-ink: light-dark(#16243b, #f3f6fc);
      --bp-muted: light-dark(#53647c, #a6b5ca);
      --bp-line: light-dark(#dbe3ef, #28364b);
      --bp-green: #b9ff35;
      --bp-free: light-dark(#0c966c, #20e3a5);
      --bp-blue: light-dark(#2371ce, #50aaff);
      --bp-purple: light-dark(#6950db, #8065f5);
      --bp-radius: 20px;
      --bp-space: 40px;
      
      margin: 0 auto;
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--bp-ink);
      font-size: 15px;
      line-height: 1.55;
    }
    #budiprvi-web-design *, #budiprvi-web-design *::before, #budiprvi-web-design *::after { box-sizing: border-box; }
    #budiprvi-web-design [hidden] { display: none !important; }
    #budiprvi-web-design button, #budiprvi-web-design input { font: inherit; }
    #budiprvi-web-design button { color: inherit; }
    #budiprvi-web-design a { color: inherit; text-decoration: none; }
    #budiprvi-web-design h1, #budiprvi-web-design h2, #budiprvi-web-design h3, #budiprvi-web-design p { margin: 0; }
    #budiprvi-web-design button:focus-visible, #budiprvi-web-design a:focus-visible,
    #budiprvi-web-design input:focus-visible, #budiprvi-web-design summary:focus-visible {
      outline: 3px solid var(--bp-blue); outline-offset: 4px;
    }
    #budiprvi-web-design svg { width: 19px; height: 19px; flex: 0 0 auto; }
    #budiprvi-web-design .bp-site { background: var(--bp-bg); }
    #budiprvi-web-design .bp-wrap { max-width: 1192px; margin: 0 auto; padding-inline: var(--bp-space); }
    #budiprvi-web-design .bp-header {
      display: flex; align-items: center; gap: 24px; min-height: 88px;
      border-bottom: 1px solid var(--bp-line);
    }
    #budiprvi-web-design .bp-brand {
      border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center;
      gap: 10px; font-size: 25px; font-weight: 800; letter-spacing: -1px; white-space: nowrap;
    }
    #budiprvi-web-design .bp-brand-mark {
      display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px;
      background: var(--bp-green); color: #17200b;
    }
    #budiprvi-web-design .bp-brand-mark svg { width: 25px; height: 25px; stroke-width: 2.7; }
    #budiprvi-web-design .bp-brand-logo { display: block; width: 184px; height: auto; }
    #budiprvi-web-design .bp-brand-logo-light { display: none; }
    #budiprvi-web-design[data-brand-appearance="light"] .bp-brand-logo-dark { display: none; }
    #budiprvi-web-design[data-brand-appearance="light"] .bp-brand-logo-light { display: block; }
    #budiprvi-web-design .bp-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
    #budiprvi-web-design .bp-nav a { font-size: 13px; font-weight: 500; color: var(--bp-muted); padding-block: 12px; }
    #budiprvi-web-design .bp-nav a:hover { color: var(--bp-ink); }
    #budiprvi-web-design .bp-button {
      display: inline-flex; justify-content: center; align-items: center; gap: 9px;
      border: 1px solid var(--bp-line); border-radius: 12px; background: var(--bp-surface);
      padding: 12px 17px; font-size: 13px; line-height: 1.4; font-weight: 650;
      min-height: 44px; white-space: normal; text-align: center; transition: transform .15s, background .15s;
    }
    #budiprvi-web-design .bp-button:hover { transform: translateY(-2px); }
    #budiprvi-web-design .bp-button-primary { background: var(--bp-green); border-color: transparent; color: #17200b; }
    #budiprvi-web-design .bp-button-purple { background: var(--bp-purple); border-color: transparent; color: #fff; }
    #budiprvi-web-design .bp-button-quiet { background: transparent; }
    #budiprvi-web-design .bp-menu { display: none; padding: 10px; }
    #budiprvi-web-design .bp-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    #budiprvi-web-design .bp-hero {
      display: grid; grid-template-columns: .91fr 1.09fr; gap: 40px; align-items: center;
      padding-top: 76px; padding-bottom: 56px;
    }
    #budiprvi-web-design .bp-eyebrow {
      display: inline-flex; align-items: center; gap: 8px; color: var(--bp-muted);
      font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.7px; margin-bottom: 22px;
    }
    #budiprvi-web-design .bp-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--bp-free); border-radius: 50%; }
    #budiprvi-web-design .bp-hero h1 { font-size: clamp(40px, 5.3vw, 67px); font-weight: 780; line-height: 1.07; letter-spacing: -2.5px; }
    #budiprvi-web-design .bp-hero h1 span { color: var(--bp-blue); }
    #budiprvi-web-design .bp-hero-text > p { max-width: 430px; color: var(--bp-muted); margin-top: 24px; font-size: 16px; line-height: 1.8; }
    #budiprvi-web-design .bp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    #budiprvi-web-design .bp-hero-actions .bp-button { padding: 14px 19px; font-size: 14px; }
    #budiprvi-web-design .bp-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 25px; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-platforms span { display: inline-flex; align-items: center; gap: 6px; }
    #budiprvi-web-design .bp-platforms svg { width: 14px; height: 14px; }
    #budiprvi-web-design .bp-platform-description { display: block; margin-top: 11px; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-app-preview { position: relative; }
    #budiprvi-web-design .bp-app-preview::before {
      content: ""; position: absolute; inset: -30px -14px; pointer-events: none;
      background: radial-gradient(ellipse at 70% 35%, color-mix(in srgb, var(--bp-blue) 17%, transparent), transparent 68%);
    }
    #budiprvi-web-design .bp-app-window {
      position: relative; background: var(--bp-surface); border: 1px solid var(--bp-line);
      border-radius: var(--bp-radius); box-shadow: 0 28px 55px light-dark(#182d4912, #00000030);
    }
    #budiprvi-web-design .bp-app-chrome { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bp-line); padding: 14px 18px; }
    #budiprvi-web-design .bp-dots { display: flex; gap: 5px; }
    #budiprvi-web-design .bp-dots b { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-line); }
    #budiprvi-web-design .bp-app-chrome > span { flex: 1; text-align: center; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-app-chrome > svg { width: 13px; height: 13px; color: var(--bp-muted); }
    #budiprvi-web-design .bp-app-content { padding: 20px; }
    #budiprvi-web-design .bp-app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
    #budiprvi-web-design .bp-app-top h3 { font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.3px; }
    #budiprvi-web-design .bp-status { display: inline-flex; align-items: center; gap: 6px; color: var(--bp-free); font-size: 11px; font-weight: 600; }
    #budiprvi-web-design .bp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    #budiprvi-web-design .bp-app-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
    #budiprvi-web-design .bp-app-actions .bp-button { min-height: 38px; padding: 9px 8px; font-size: 11px; border-radius: 9px; }
    #budiprvi-web-design .bp-app-actions svg { width: 14px; height: 14px; }
    #budiprvi-web-design .bp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    #budiprvi-web-design .bp-metric { background: var(--bp-surface-2); padding: 12px; border-radius: 12px; }
    #budiprvi-web-design .bp-metric > span { display: block; color: var(--bp-muted); font-size: 11px; margin-bottom: 3px; }
    #budiprvi-web-design .bp-metric strong { font-size: 23px; line-height: 1.2; font-weight: 720; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
    #budiprvi-web-design .bp-free { color: var(--bp-free); }
    #budiprvi-web-design .bp-paid { color: var(--bp-blue); }
    #budiprvi-web-design .bp-chart { margin-top: 20px; }
    #budiprvi-web-design .bp-panel-heading { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
    #budiprvi-web-design .bp-panel-heading h3 { font-size: 12px; font-weight: 650; }
    #budiprvi-web-design .bp-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-legend span { display: inline-flex; align-items: center; gap: 5px; }
    #budiprvi-web-design .bp-legend i { width: 6px; height: 6px; border-radius: 2px; background: var(--bp-free); }
    #budiprvi-web-design .bp-legend .bp-paid i { background: var(--bp-blue); }
    #budiprvi-web-design .bp-bars {
      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 13px; height: 136px;
      background: repeating-linear-gradient(to top, var(--bp-line) 0, var(--bp-line) 1px, transparent 1px, transparent 33px);
      padding: 6px 7px 0; align-items: end;
    }
    #budiprvi-web-design .bp-bar { display: flex; flex-direction: column; justify-content: end; height: 100%; position: relative; }
    #budiprvi-web-design .bp-bar .bp-segment-paid { height: var(--paid); min-height: 3px; background: var(--bp-blue); border-radius: 5px 5px 0 0; }
    #budiprvi-web-design .bp-bar .bp-segment-free { height: var(--free); min-height: 3px; background: var(--bp-free); }
    #budiprvi-web-design .bp-chart-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; color: var(--bp-muted); font-size: 11px; padding-top: 8px; }
    #budiprvi-web-design .bp-chart-caption { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--bp-muted); margin-top: 10px; }
    #budiprvi-web-design .bp-app-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--bp-line); font-size: 11px; }
    #budiprvi-web-design .bp-next { display: inline-flex; align-items: center; gap: 5px; color: var(--bp-muted); }
    #budiprvi-web-design .bp-next svg { width: 13px; height: 13px; }
    #budiprvi-web-design .bp-preview-caption { position: relative; text-align: center; color: var(--bp-muted); font-size: 11px; margin-top: 14px; }
    #budiprvi-web-design .bp-trust-strip {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
      padding-top: 25px; padding-bottom: 25px; border-top: 1px solid var(--bp-line); border-bottom: 1px solid var(--bp-line);
    }
    #budiprvi-web-design .bp-trust-strip > div { display: flex; align-items: center; justify-content: center; gap: 12px; }
    #budiprvi-web-design .bp-trust-strip svg { width: 20px; height: 20px; color: var(--bp-blue); }
    #budiprvi-web-design .bp-trust-strip strong { display: block; font-size: 13px; font-weight: 650; }
    #budiprvi-web-design .bp-trust-strip p { color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-section { padding-top: 70px; padding-bottom: 10px; }
    #budiprvi-web-design .bp-section-heading { max-width: 600px; margin-bottom: 28px; }
    #budiprvi-web-design .bp-section-heading .bp-eyebrow { margin-bottom: 12px; }
    #budiprvi-web-design h2 { font-size: clamp(28px, 3.4vw, 39px); letter-spacing: -1.2px; line-height: 1.18; font-weight: 720; }
    #budiprvi-web-design .bp-section-heading > p { font-size: 14px; color: var(--bp-muted); margin-top: 13px; line-height: 1.75; }
    #budiprvi-web-design .bp-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    #budiprvi-web-design .bp-feature { background: var(--bp-surface); border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 24px; }
    #budiprvi-web-design .bp-feature-icon { color: var(--bp-blue); margin-bottom: 18px; }
    #budiprvi-web-design .bp-feature-icon svg { width: 25px; height: 25px; stroke-width: 1.7; }
    #budiprvi-web-design .bp-feature h3 { font-size: 16px; letter-spacing: -.3px; font-weight: 650; }
    #budiprvi-web-design .bp-feature > p { font-size: 12px; color: var(--bp-muted); margin-top: 9px; line-height: 1.8; }
    #budiprvi-web-design .bp-feature-detail { background: var(--bp-surface-2); border-radius: 12px; padding: 13px; margin-top: 22px; font-size: 11px; }
    #budiprvi-web-design .bp-mini-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
    #budiprvi-web-design .bp-mini-row + .bp-mini-row { margin-top: 10px; }
    #budiprvi-web-design .bp-mini-row > span { color: var(--bp-muted); }
    #budiprvi-web-design .bp-position { background: color-mix(in srgb, var(--bp-blue) 13%, var(--bp-surface)); color: var(--bp-blue); border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; }
    #budiprvi-web-design .bp-times { display: flex; flex-wrap: wrap; gap: 6px; }
    #budiprvi-web-design .bp-times span { background: var(--bp-surface); color: var(--bp-ink); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
    #budiprvi-web-design .bp-feature-detail .bp-status { font-size: 11px; }
    #budiprvi-web-design .bp-devices {
      display: grid; grid-template-columns: 1fr 1.1fr; gap: 35px; align-items: center;
      margin-top: 60px; padding: 36px; border-radius: calc(var(--bp-radius) + 4px);
      border: 1px solid var(--bp-line); background: var(--bp-surface);
    }
    #budiprvi-web-design .bp-devices h2 { font-size: 31px; }
    #budiprvi-web-design .bp-devices p { color: var(--bp-muted); font-size: 13px; line-height: 1.8; margin-top: 14px; }
    #budiprvi-web-design .bp-devices .bp-button { margin-top: 20px; }
    #budiprvi-web-design .bp-device-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
    #budiprvi-web-design .bp-device-groups { display: grid; gap: 24px; }
    #budiprvi-web-design .bp-device-group-label { display: block; margin-bottom: 13px; text-align: center; font-size: 11px; color: var(--bp-muted); }
    #budiprvi-web-design .bp-device-flow.bp-control-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 250px; margin-inline: auto; }
    #budiprvi-web-design .bp-device-flow::before { content: ""; position: absolute; height: 1px; background: var(--bp-line); width: 70%; left: 15%; top: 35px; }
    #budiprvi-web-design .bp-device { position: relative; text-align: center; }
    #budiprvi-web-design .bp-device-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 14px; background: var(--bp-surface-2); border-radius: 18px; }
    #budiprvi-web-design .bp-device-icon svg { color: var(--bp-blue); width: 29px; height: 29px; stroke-width: 1.5; }
    #budiprvi-web-design .bp-device strong { font-size: 12px; font-weight: 650; display: block; }
    #budiprvi-web-design .bp-device > span { color: var(--bp-muted); font-size: 11px; display: block; margin-top: 3px; }
    #budiprvi-web-design .bp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; list-style: none; padding: 0; margin: 0; }
    #budiprvi-web-design .bp-step-number { color: var(--bp-blue); font-size: 13px; font-weight: 700; display: block; margin-bottom: 10px; }
    #budiprvi-web-design .bp-steps h3 { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
    #budiprvi-web-design .bp-steps p { color: var(--bp-muted); font-size: 12px; line-height: 1.8; max-width: 285px; }
    #budiprvi-web-design .bp-plan {
      display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
      background: var(--bp-surface); border: 1px solid var(--bp-line); border-radius: calc(var(--bp-radius) + 4px); padding: 36px;
    }
    #budiprvi-web-design .bp-plan h2 { max-width: 380px; }
    #budiprvi-web-design .bp-plan p { font-size: 13px; line-height: 1.8; color: var(--bp-muted); margin-top: 14px; }
    #budiprvi-web-design .bp-plan .bp-button { margin-top: 22px; }
    #budiprvi-web-design .bp-plan-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
    #budiprvi-web-design .bp-plan-list li { display: flex; gap: 10px; align-items: center; font-size: 13px; }
    #budiprvi-web-design .bp-plan-list svg { color: var(--bp-free); width: 16px; height: 16px; }
    #budiprvi-web-design .bp-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; padding-top: 65px; padding-bottom: 65px; }
    #budiprvi-web-design .bp-faq h2 { font-size: 30px; }
    #budiprvi-web-design .bp-faq-intro p { color: var(--bp-muted); font-size: 13px; margin-top: 14px; }
    #budiprvi-web-design details { border-bottom: 1px solid var(--bp-line); }
    #budiprvi-web-design summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-block: 17px; list-style: none; font-size: 13px; font-weight: 600; }
    #budiprvi-web-design summary::-webkit-details-marker { display: none; }
    #budiprvi-web-design summary::after { content: "+"; color: var(--bp-muted); font-size: 20px; font-weight: 400; }
    #budiprvi-web-design details[open] summary::after { content: "−"; }
    #budiprvi-web-design details p { font-size: 12px; color: var(--bp-muted); line-height: 1.8; padding-bottom: 17px; }
    #budiprvi-web-design .bp-footer { padding-top: 28px; padding-bottom: 28px; border-top: 1px solid var(--bp-line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    #budiprvi-web-design .bp-footer .bp-brand { font-size: 20px; }
    #budiprvi-web-design .bp-footer .bp-brand-mark { width: 28px; height: 28px; border-radius: 9px; }
    #budiprvi-web-design .bp-footer .bp-brand-mark svg { width: 19px; height: 19px; }
    #budiprvi-web-design .bp-footer .bp-brand-logo { width: 142px; }
    #budiprvi-web-design .bp-footer p { color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-footer > span { color: var(--bp-muted); font-size: 11px; white-space: nowrap; }
    #budiprvi-web-design .bp-portal { padding-top: 30px; padding-bottom: 50px; }
    #budiprvi-web-design .bp-portal-header { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 23px; }
    #budiprvi-web-design .bp-portal-header h1 { font-size: 29px; line-height: 1.2; letter-spacing: -.8px; font-weight: 700; }
    #budiprvi-web-design .bp-portal-header p { color: var(--bp-muted); font-size: 12px; margin-top: 6px; }
    #budiprvi-web-design .bp-demo-label { color: var(--bp-muted); font-size: 11px; border: 1px solid var(--bp-line); border-radius: 7px; padding: 6px 10px; }
    #budiprvi-web-design .bp-portal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 23px; }
    #budiprvi-web-design .bp-portal-toolbar .bp-button { font-size: 12px; }
    #budiprvi-web-design .bp-note { color: var(--bp-muted); font-size: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bp-surface-2); margin-bottom: 18px; }
    #budiprvi-web-design .bp-portal-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 18px; }
    #budiprvi-web-design .bp-portal-panel { background: var(--bp-surface); border: 1px solid var(--bp-line); border-radius: var(--bp-radius); padding: 22px; }
    #budiprvi-web-design .bp-portal-panel > h2 { font-size: 17px; line-height: 1.4; font-weight: 650; letter-spacing: -.3px; }
    #budiprvi-web-design .bp-portal-panel > p { color: var(--bp-muted); font-size: 12px; margin-top: 5px; }
    #budiprvi-web-design .bp-portal-panel .bp-chart { margin-top: 0; }
    #budiprvi-web-design .bp-portal-panel .bp-panel-heading h3 { font-size: 16px; }
    #budiprvi-web-design .bp-portal-panel .bp-bars { height: 240px; gap: 20px; }
    #budiprvi-web-design .bp-portal-panel .bp-legend { font-size: 11px; }
    #budiprvi-web-design .bp-portal .bp-metric { padding: 19px; }
    #budiprvi-web-design .bp-portal .bp-metric > span { font-size: 12px; }
    #budiprvi-web-design .bp-portal .bp-metric strong { font-size: 29px; }
    #budiprvi-web-design .bp-portal .bp-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #budiprvi-web-design .bp-portal .bp-metric:last-child strong { font-size: 21px; }
    #budiprvi-web-design .bp-connected-list { display: grid; gap: 15px; margin-top: 22px; }
    #budiprvi-web-design .bp-connected-list > div { display: flex; align-items: center; gap: 12px; }
    #budiprvi-web-design .bp-connected-list > div > svg { color: var(--bp-blue); }
    #budiprvi-web-design .bp-connected-list strong { display: block; font-size: 12px; font-weight: 600; }
    #budiprvi-web-design .bp-connected-list small { color: var(--bp-muted); font-size: 11px; display: block; }
    #budiprvi-web-design .bp-connected-list .bp-status { margin-left: auto; font-size: 11px; white-space: nowrap; }
    #budiprvi-web-design .bp-table { width: 100%; border-collapse: collapse; margin-top: 17px; font-size: 12px; }
    #budiprvi-web-design .bp-table th { color: var(--bp-muted); font-size: 11px; font-weight: 500; text-align: left; padding-bottom: 10px; }
    #budiprvi-web-design .bp-table td { padding-block: 12px; border-top: 1px solid var(--bp-line); vertical-align: middle; }
    #budiprvi-web-design .bp-table th:last-child, #budiprvi-web-design .bp-table td:last-child { text-align: right; }
    #budiprvi-web-design .bp-table .bp-ad-code { display: block; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-tag { display: inline-block; color: var(--bp-blue); background: color-mix(in srgb, var(--bp-blue) 12%, var(--bp-surface)); font-size: 11px; border-radius: 6px; padding: 4px 7px; white-space: nowrap; }
    #budiprvi-web-design .bp-tag-ok { color: var(--bp-free); background: color-mix(in srgb, var(--bp-free) 11%, var(--bp-surface)); }
    #budiprvi-web-design .bp-tag-muted { color: var(--bp-muted); background: var(--bp-surface-2); }
    #budiprvi-web-design .bp-setting-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
    #budiprvi-web-design .bp-setting-row label { flex: 1; min-width: 100px; color: var(--bp-muted); font-size: 11px; }
    #budiprvi-web-design .bp-setting-row input { display: block; width: 100%; border-radius: 9px; border: 1px solid var(--bp-line); background: var(--bp-surface-2); color: var(--bp-ink); padding: 10px; font-size: 15px; margin-top: 5px; }
    #budiprvi-web-design .bp-free-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: 12px; }
    #budiprvi-web-design .bp-free-check input { width: 17px; height: 17px; accent-color: var(--bp-free); flex: 0 0 auto; margin: 2px 0 0; }
    #budiprvi-web-design .bp-schedule-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
    #budiprvi-web-design .bp-schedule-inputs label { font-size: 11px; color: var(--bp-muted); }
    #budiprvi-web-design .bp-schedule-inputs input { width: 100%; min-width: 0; display: block; padding: 8px; margin-top: 4px; border: 1px solid var(--bp-line); border-radius: 8px; background: var(--bp-surface-2); color: var(--bp-ink); font-size: 14px; }
    #budiprvi-web-design .bp-days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
    #budiprvi-web-design .bp-day { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid var(--bp-line); border-radius: 9px; font-size: 11px; background: var(--bp-surface-2); }
    #budiprvi-web-design .bp-day[aria-pressed="true"] { background: var(--bp-green); border-color: transparent; color: #17200b; }
    #budiprvi-web-design .bp-report { grid-column: 1 / -1; }
    #budiprvi-web-design .bp-report-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
    #budiprvi-web-design .bp-report-top h2 { font-size: 18px; }
    #budiprvi-web-design .bp-report-info { display: flex; flex-wrap: wrap; gap: 12px; color: var(--bp-muted); font-size: 11px; margin-top: 16px; }
    @media (max-width: 900px) {
      #budiprvi-web-design .bp-hero { gap: 26px; }
      #budiprvi-web-design .bp-app-content { padding: 16px; }
      #budiprvi-web-design .bp-feature { padding: 20px; }
      #budiprvi-web-design .bp-devices { padding: 28px; gap: 25px; }
      #budiprvi-web-design .bp-nav { gap: 16px; }
      #budiprvi-web-design .bp-portal-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 760px) {
      #budiprvi-web-design .bp-wrap { padding-inline: 25px; }
      #budiprvi-web-design .bp-header { flex-wrap: wrap; min-height: 76px; gap: 14px; padding-block: 15px; }
      #budiprvi-web-design .bp-nav { display: none; order: 3; width: 100%; margin: 0; padding-top: 10px; }
      #budiprvi-web-design .bp-nav.bp-menu-open { display: flex; justify-content: space-between; }
      #budiprvi-web-design .bp-menu { display: inline-flex; }
      #budiprvi-web-design .bp-hero { grid-template-columns: 1fr; padding-top: 48px; gap: 40px; padding-bottom: 36px; }
      #budiprvi-web-design .bp-hero h1 { font-size: clamp(40px, 7.7vw, 59px); }
      #budiprvi-web-design .bp-hero-text { max-width: 530px; }
      #budiprvi-web-design .bp-hero-text > p { max-width: 490px; font-size: 15px; }
      #budiprvi-web-design .bp-app-preview { max-width: 540px; width: 100%; margin-inline: auto; }
      #budiprvi-web-design .bp-trust-strip { gap: 16px; }
      #budiprvi-web-design .bp-trust-strip > div { flex-direction: column; align-items: flex-start; gap: 7px; }
      #budiprvi-web-design .bp-trust-strip strong { font-size: 12px; }
      #budiprvi-web-design .bp-trust-strip p { font-size: 11px; }
      #budiprvi-web-design .bp-feature-grid { grid-template-columns: 1fr; }
      #budiprvi-web-design .bp-feature { display: grid; grid-template-columns: 1fr .85fr; column-gap: 20px; }
      #budiprvi-web-design .bp-feature-icon { margin-bottom: 10px; }
      #budiprvi-web-design .bp-feature-detail { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; }
      #budiprvi-web-design .bp-devices { grid-template-columns: 1fr; gap: 30px; }
      #budiprvi-web-design .bp-device-flow { max-width: 440px; width: 100%; margin-inline: auto; }
      #budiprvi-web-design .bp-plan { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
      #budiprvi-web-design .bp-faq { grid-template-columns: 1fr; gap: 22px; }
      #budiprvi-web-design .bp-footer { flex-wrap: wrap; }
      #budiprvi-web-design .bp-portal-grid { grid-template-columns: 1fr; }
      #budiprvi-web-design .bp-portal .bp-metrics { grid-template-columns: 1fr 1fr; }
      #budiprvi-web-design .bp-portal-toolbar .bp-button { flex: 1 1 160px; }
      #budiprvi-web-design .bp-schedule-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 450px) {
      #budiprvi-web-design .bp-wrap { padding-inline: 20px; }
      #budiprvi-web-design .bp-brand { font-size: 23px; }
      #budiprvi-web-design .bp-brand-mark { width: 31px; height: 31px; border-radius: 10px; }
      #budiprvi-web-design .bp-brand-logo { width: 148px; }
      #budiprvi-web-design .bp-header { gap: 8px; }
      #budiprvi-web-design .bp-header-actions > .bp-button { padding: 10px 12px; font-size: 12px; }
      #budiprvi-web-design .bp-header-actions .bp-menu { padding: 10px; }
      #budiprvi-web-design .bp-hero h1 { font-size: clamp(36px, 10.5vw, 46px); letter-spacing: -1.5px; }
      #budiprvi-web-design .bp-hero-actions { flex-direction: column; }
      #budiprvi-web-design .bp-hero-actions .bp-button { width: 100%; }
      #budiprvi-web-design .bp-platforms { gap: 12px; }
      #budiprvi-web-design .bp-app-content { padding: 14px; }
      #budiprvi-web-design .bp-app-actions .bp-button { min-height: 44px; }
      #budiprvi-web-design .bp-metric { padding: 10px; }
      #budiprvi-web-design .bp-metric strong { font-size: 21px; }
      #budiprvi-web-design .bp-metric > span { font-size: 11px; }
      #budiprvi-web-design .bp-bars { gap: 10px; }
      #budiprvi-web-design .bp-trust-strip { grid-template-columns: 1fr; gap: 16px; }
      #budiprvi-web-design .bp-trust-strip > div { flex-direction: row; align-items: center; gap: 12px; }
      #budiprvi-web-design .bp-trust-strip p { font-size: 11px; }
      #budiprvi-web-design .bp-section { padding-top: 48px; }
      #budiprvi-web-design .bp-feature { display: block; padding: 22px; }
      #budiprvi-web-design .bp-feature-detail { margin-top: 18px; }
      #budiprvi-web-design .bp-devices { padding: 23px; margin-top: 40px; }
      #budiprvi-web-design .bp-devices h2 { font-size: 29px; }
      #budiprvi-web-design .bp-device-flow { gap: 6px; }
      #budiprvi-web-design .bp-device-icon { width: 56px; height: 56px; border-radius: 15px; }
      #budiprvi-web-design .bp-device-flow::before { top: 28px; }
      #budiprvi-web-design .bp-device strong { font-size: 11px; }
      #budiprvi-web-design .bp-steps { grid-template-columns: 1fr; gap: 25px; }
      #budiprvi-web-design .bp-step-number { margin-bottom: 5px; }
      #budiprvi-web-design .bp-steps p { max-width: none; }
      #budiprvi-web-design .bp-plan { padding: 23px; gap: 24px; }
      #budiprvi-web-design .bp-plan .bp-button { width: 100%; }
      #budiprvi-web-design .bp-plan-list li { font-size: 12px; }
      #budiprvi-web-design .bp-faq { padding-block: 48px; }
      #budiprvi-web-design .bp-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
      #budiprvi-web-design .bp-portal-panel { padding: 17px; }
      #budiprvi-web-design .bp-portal .bp-metric { padding: 16px; }
      #budiprvi-web-design .bp-portal-panel .bp-bars { gap: 13px; }
      #budiprvi-web-design .bp-schedule-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #budiprvi-web-design .bp-day { width: 33px; }
      #budiprvi-web-design .bp-table { font-size: 11px; }
    }
    @media (pointer: coarse) {
      #budiprvi-web-design .bp-nav a { min-height: 44px; }
      #budiprvi-web-design .bp-days { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); }
      #budiprvi-web-design .bp-day { width: 100%; height: 44px; }
      #budiprvi-web-design .bp-free-check { min-height: 44px; }
      #budiprvi-web-design .bp-setting-row input, #budiprvi-web-design .bp-schedule-inputs input { font-size: 16px; min-height: 44px; }
    }
    @media (max-width: 350px) {
      #budiprvi-web-design .bp-header .bp-brand-logo { width: 120px; }
      #budiprvi-web-design .bp-header-actions #bp-view-button > svg { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      #budiprvi-web-design .bp-button { transition: none; }
      #budiprvi-web-design .bp-button:hover { transform: none; }
    }
#budiprvi-web-design button, #budiprvi-web-design summary { cursor: pointer; }
#budiprvi-web-design .bp-development-note { border-left: 2px solid var(--bp-blue); padding-left: 12px; font-size: 12px; line-height: 1.7; margin-top: 16px; }
#budiprvi-web-design .bp-contact-copy a, #budiprvi-web-design .bp-footer-contact a { color: var(--bp-blue); text-decoration: underline; text-underline-offset: 4px; }
#budiprvi-web-design .bp-footer-contact { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
#budiprvi-web-design .bp-footer-contact span { color: var(--bp-muted); }
#budiprvi-web-design .bp-demo-explanation { line-height: 1.75; }
#budiprvi-web-design .bp-demo-explanation strong { color: var(--bp-ink); }
#budiprvi-web-design .bp-no-script { padding-block: 20px; color: var(--bp-muted); }
#budiprvi-web-design .bp-skip-link { position: absolute; left: 20px; top: -100px; z-index: 20; background: var(--bp-green); color: #17200b; padding: 12px 16px; border-radius: 10px; }
#budiprvi-web-design .bp-skip-link:focus { top: 15px; }
#budiprvi-web-design .bp-header-actions #bp-view-button { font-size: 12px; }
@media (max-width: 450px) {
  #budiprvi-web-design .bp-header .bp-brand-logo { width: 128px; }
  #budiprvi-web-design .bp-header-actions { gap: 6px; }
  #budiprvi-web-design .bp-header-actions #bp-view-button { padding: 10px 9px; }
  #budiprvi-web-design .bp-header-actions #bp-view-button > svg { display: none; }
}
@media (max-width: 350px) { #budiprvi-web-design .bp-header .bp-brand-logo { width: 108px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }