:root {
  --app-accent: #6d5dfc;
  --app-accent-2: #00a8a8;
  --app-surface: rgba(255, 255, 255, .78);
  --app-shadow: 0 18px 50px rgba(49, 46, 129, .09);
}

[data-bs-theme="dark"] {
  --app-accent: #978cff;
  --app-accent-2: #45d3cf;
  --app-surface: rgba(28, 31, 41, .82);
  --app-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--app-accent) 14%, transparent) 0, transparent 30rem),
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--app-accent-2) 12%, transparent) 0, transparent 28rem),
    var(--bs-body-bg);
}

.page-shell { min-height: calc(100vh - 8rem); }
.glass-nav { backdrop-filter: blur(18px); background-color: color-mix(in srgb, var(--bs-tertiary-bg) 86%, transparent) !important; }
.navbar-brand { font-weight: 750; letter-spacing: -.025em; }
.brand-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .7rem; color: white; background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); box-shadow: 0 7px 18px color-mix(in srgb, var(--app-accent) 28%, transparent); }
.btn-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: .75rem; }
.language-switch { padding: .18rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); }
.language-switch .btn { min-width: 2.25rem; border-radius: .55rem; text-decoration: none; }

.card, .modal-content, .list-group-item { border-color: color-mix(in srgb, var(--bs-border-color) 72%, transparent); }
.card { border-radius: 1.2rem; box-shadow: var(--app-shadow); background: var(--app-surface); backdrop-filter: blur(12px); }
.content-card { overflow-wrap: anywhere; }
.object-card { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.object-card::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -3.5rem; bottom: -4rem; border-radius: 50%; background: color-mix(in srgb, var(--app-accent) 13%, transparent); }
.object-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.object-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: .85rem; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); }
.auth-card { max-width: 29rem; }
.hero-title { max-width: 48rem; font-weight: 760; letter-spacing: -.04em; }
.eyebrow { color: var(--app-accent); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.empty-state { max-width: 38rem; padding: 3rem 1.25rem; margin: 2rem auto; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 1.4rem; color: white; font-size: 1.8rem; background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); transform: rotate(-3deg); }
.hint { display: flex; gap: .55rem; align-items: flex-start; color: var(--bs-secondary-color); font-size: .9rem; }
.hint i { color: var(--app-accent); }
.form-control, .form-select { border-radius: .8rem; padding: .72rem .85rem; }
.btn { border-radius: .75rem; font-weight: 600; }
.btn-primary { border-color: transparent; background: linear-gradient(135deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 65%, var(--app-accent-2))); box-shadow: 0 8px 20px color-mix(in srgb, var(--app-accent) 20%, transparent); }
.welcome-step { height: 100%; padding: 1rem; border-radius: 1rem; background: var(--bs-tertiary-bg); }
.welcome-step i { color: var(--app-accent); font-size: 1.5rem; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.landing-page { overflow: hidden; }
.landing-nav { background-color: color-mix(in srgb, var(--bs-body-bg) 88%, transparent) !important; }
.landing-nav .nav-link { font-weight: 600; }
.landing-hero { min-height: 42rem; display: flex; align-items: center; }
.py-lg-6 { padding-top: 6rem; padding-bottom: 6rem; }
.section-space { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.section-tint { background: color-mix(in srgb, var(--bs-tertiary-bg) 78%, transparent); border-block: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent); }
.section-heading { max-width: 43rem; margin: 0 auto 2.5rem; text-align: center; }
.section-heading h2, .landing-page h2 { letter-spacing: -.035em; font-weight: 750; }
.scan-demo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 31rem; padding: 2rem; border-radius: 2rem; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--app-accent) 22%, transparent), transparent 44%), radial-gradient(circle at 80% 75%, color-mix(in srgb, var(--app-accent-2) 20%, transparent), transparent 40%), var(--bs-tertiary-bg); box-shadow: var(--app-shadow); }
.qr-sticker { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem; border-radius: 1rem; color: #17171b; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.16); transform: rotate(-5deg); }
.qr-sticker i { font-size: 5.8rem; line-height: 1; }
.qr-sticker span { font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.scan-arrow { padding: 1rem; color: var(--app-accent); font-size: 2rem; }
.phone-frame { width: 15rem; padding: .55rem; border: 2px solid color-mix(in srgb, var(--bs-body-color) 70%, transparent); border-radius: 2rem; background: #15151a; box-shadow: 0 26px 60px rgba(0,0,0,.3); transform: rotate(3deg); }
.phone-speaker { width: 3.5rem; height: .3rem; margin: .2rem auto .5rem; border-radius: 1rem; background: #555; }
.phone-screen { min-height: 25rem; padding: 1.1rem; border-radius: 1.35rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.mini-info { display: flex; flex-direction: column; padding: .75rem; border-radius: .8rem; font-size: .78rem; background: var(--bs-tertiary-bg); }
.step-card, .use-case-card, .benefit-card { position: relative; padding: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: 1.2rem; background: var(--app-surface); box-shadow: var(--app-shadow); }
.step-card > i, .use-case-card > i, .benefit-card > i { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: .9rem; color: var(--app-accent); font-size: 1.35rem; background: color-mix(in srgb, var(--app-accent) 11%, transparent); }
.step-number { position: absolute; top: 1.35rem; right: 1.4rem; color: color-mix(in srgb, var(--app-accent) 40%, transparent); font-size: 1.5rem; font-weight: 800; }
.use-case-card p, .benefit-card p { margin: 0; color: var(--bs-secondary-color); font-size: .9rem; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pain-card { padding: 1.5rem; border-radius: 1.2rem; }
.pain-card > span { display: inline-block; margin-bottom: 1rem; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.pain-card p { display: flex; gap: .65rem; margin-bottom: .8rem; }
.pain-before { background: color-mix(in srgb, var(--bs-danger) 9%, var(--bs-body-bg)); }
.pain-before i { color: var(--bs-danger); }
.pain-after { background: color-mix(in srgb, var(--bs-success) 9%, var(--bs-body-bg)); }
.pain-after i { color: var(--bs-success); }
.sample-card { max-width: 39rem; margin: auto; transform: rotate(-1deg); }
.benefit-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .55rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; background: var(--bs-body-bg); font-size: .9rem; font-weight: 600; }
.benefit-pill i { color: var(--bs-success); }
.browser-note { margin: 1.1rem 0 0; color: var(--bs-secondary-color); font-size: .8rem; text-align: center; }
.owner-feature { display: flex; flex-direction: column; align-items: center; gap: .6rem; height: 100%; padding: 1.25rem .5rem; border-radius: 1rem; text-align: center; background: var(--bs-body-bg); }
.owner-feature i { color: var(--app-accent); font-size: 1.5rem; }
.trial-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem; border: 1px solid color-mix(in srgb, var(--app-accent) 30%, transparent); border-radius: 1.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 10%, var(--bs-body-bg)), color-mix(in srgb, var(--app-accent-2) 9%, var(--bs-body-bg))); box-shadow: var(--app-shadow); }
.faq-wrap { max-width: 52rem; }
.accordion-item { border-color: var(--bs-border-color); background: transparent; }
.accordion-button { font-weight: 650; background: transparent; }
.accordion-button:not(.collapsed) { color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 8%, transparent); box-shadow: none; }
.final-cta { max-width: 47rem; margin: auto; padding: 3.5rem 1rem; }
.final-cta p { max-width: 35rem; }
.landing-footer a { color: var(--bs-secondary-color); text-decoration: none; }
.landing-footer a:hover { color: var(--app-accent); }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 48rem; margin-inline: auto; padding: 1.25rem 1.4rem; border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--bs-border-color)); border-radius: 1.2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 10%, var(--bs-body-bg)), var(--bs-body-bg)); }
.public-passport { max-width: 42rem; }
.demo-timeline { margin-left: .45rem; padding-left: 1.25rem; border-left: 2px solid color-mix(in srgb, var(--app-accent) 25%, var(--bs-border-color)); }
.demo-timeline > div { position: relative; display: flex; flex-direction: column; padding: .2rem 0 1.4rem; }
.demo-timeline > div:last-child { padding-bottom: .2rem; }
.demo-timeline span { position: absolute; left: -1.68rem; top: .35rem; width: .75rem; height: .75rem; border: 2px solid var(--bs-body-bg); border-radius: 50%; background: var(--app-accent); }
.demo-timeline small { color: var(--bs-secondary-color); }
.setup-score { min-width: 3.3rem; padding: .55rem .75rem; border-radius: .9rem; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); font-size: 1.05rem; font-weight: 800; text-align: center; }
.setup-guide .progress { height: .45rem; background: color-mix(in srgb, var(--app-accent) 10%, var(--bs-tertiary-bg)); }
.setup-guide .progress-bar { background: linear-gradient(90deg, var(--app-accent), var(--app-accent-2)); }
.setup-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.setup-step { display: flex; align-items: center; gap: .7rem; padding: .85rem; border: 1px solid var(--bs-border-color); border-radius: .9rem; color: var(--bs-body-color); text-decoration: none; background: var(--bs-body-bg); transition: border-color .18s ease, transform .18s ease; }
a.setup-step:hover { border-color: var(--app-accent); transform: translateY(-1px); }
.setup-step > i:first-child { color: var(--bs-secondary-color); }
.setup-step.done > i:first-child { color: var(--bs-success); }
.setup-step span { display: flex; flex-direction: column; }
.setup-step small { color: var(--bs-secondary-color); }
.setup-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--bs-success) 8%, var(--bs-body-bg)); }
.public-company { display: flex; align-items: center; gap: 1rem; max-width: 42rem; margin-inline: auto; padding: .85rem 1rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--app-surface); }
.company-logo { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; border-radius: .8rem; object-fit: contain; background: white; }
.logo-preview { display: grid; place-items: center; min-height: 10rem; padding: 1rem; border: 1px dashed var(--bs-border-color); border-radius: 1rem; background: var(--bs-tertiary-bg); }
.logo-preview img { max-width: 100%; max-height: 9rem; object-fit: contain; }
.label-preview-wrap { padding: 2rem; border-radius: 1.5rem; background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--app-accent) 18%, transparent), transparent 45%), var(--bs-tertiary-bg); }
.label-preview { display: flex; align-items: stretch; gap: .8rem; width: min(100%, 26rem); aspect-ratio: 7 / 4; margin: auto; padding: .8rem; border: 1px solid #d8d8dc; border-radius: .35rem; color: #17171b; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.16); transition: width .2s ease, aspect-ratio .2s ease; }
.label-preview[data-size="small"] { width: min(100%, 20rem); aspect-ratio: 5 / 3; }
.label-preview[data-size="large"] { width: min(100%, 30rem); aspect-ratio: 5 / 3; }
.label-preview img { width: auto; height: 100%; object-fit: contain; }
.label-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; padding-block: .35rem; }
.label-copy strong, .label-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-copy span { color: #666; font-size: .78rem; }
.label-copy small { margin-top: auto; font-size: .7rem; font-weight: 650; }
.label-copy em { color: #777; font-size: .58rem; font-style: normal; }

@media (max-width: 575.98px) {
  .navbar-brand span:last-child { font-size: .96rem; }
  .page-shell { padding-left: 1rem; padding-right: 1rem; }
  .hero-title { font-size: 2rem; }
  .card { border-radius: 1rem; }
  .section-space { padding-top: 4rem; padding-bottom: 4rem; }
  .landing-hero { padding-top: 3.5rem !important; text-align: center; }
  .landing-hero .eyebrow { justify-content: center; }
  .scan-demo { min-height: 24rem; padding: 1rem .5rem; }
  .qr-sticker { padding: .7rem; }
  .qr-sticker i { font-size: 3.8rem; }
  .scan-arrow { padding: .3rem; font-size: 1.25rem; }
  .phone-frame { width: 12rem; }
  .phone-screen { min-height: 20rem; padding: .8rem; text-align: left; }
  .before-after { grid-template-columns: 1fr; }
  .trial-panel { align-items: stretch; flex-direction: column; padding: 1.5rem; }
  .demo-banner { align-items: stretch; flex-direction: column; }
  .setup-steps { grid-template-columns: 1fr; }
  .setup-next { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}