/* Visual Polish V2 — presentation-only layer approved for the 2026-08-09 release. */
:root {
  --v2-ink: #0c111b;
  --v2-muted: #687081;
  --v2-paper: #f5f2eb;
  --v2-white: #ffffff;
  --v2-blue: #1559ff;
  --v2-blue-dark: #0d3dba;
  --v2-blue-wash: #dce6ff;
  --v2-line: rgba(12, 17, 27, 0.12);
  --v2-line-strong: rgba(12, 17, 27, 0.2);
  --v2-shadow: 0 24px 60px rgba(12, 17, 27, 0.1);
  --v2-radius-lg: 40px;
  --v2-radius-md: 28px;
  --v2-radius-sm: 18px;
}

html { background: var(--v2-paper); }
body,
.lp-layout {
  color: var(--v2-ink);
  background:
    radial-gradient(circle at 84% 2%, rgba(21, 89, 255, 0.055), transparent 34rem),
    var(--v2-paper);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

::selection { color: #fff; background: var(--v2-blue); }

/* Shared typography and actions */
.eyebrow,
.lp-eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--v2-blue);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.button,
.lp-button {
  min-height: 52px;
  padding-inline: 22px;
  border-radius: 999px;
  background: var(--v2-blue);
  border-color: var(--v2-blue);
  box-shadow: 0 16px 32px rgba(21, 89, 255, 0.22);
}

.button--ghost,
.lp-button-ghost {
  color: var(--v2-ink);
  border: 1px solid var(--v2-line);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: none;
}

.button:focus-visible,
.lp-button:focus-visible,
.lp-link:focus-visible,
.text-link:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(21, 89, 255, 0.46);
  outline-offset: 3px;
}

/* Homepage shell */
.top-strip { background: var(--v2-ink); }
.top-strip__inner { min-height: 30px; font-size: 0.72rem; letter-spacing: 0.04em; }
.site-header {
  background: rgba(245, 242, 235, 0.9);
  border-bottom-color: var(--v2-line);
  backdrop-filter: blur(18px);
}
.nav { height: 78px; }
.brand img { box-shadow: 0 8px 22px rgba(21, 89, 255, 0.18); }
.brand small { color: var(--v2-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-links { gap: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav-links a { padding: 10px 0; border-radius: 0; color: #353c49; font-size: 0.82rem; }
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--v2-blue); background: transparent; }
.link-call { color: var(--v2-ink); }
.menu-button { background: rgba(255, 255, 255, 0.5); border-color: var(--v2-line); }

.hero { padding: 58px 0 72px; }
.hero::before { display: none; }
.hero__grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.hero__copy { padding-top: 44px; }
.hero-title { max-width: 660px; margin-bottom: 24px; }
.hero-title span:first-child {
  color: var(--v2-ink);
  font-size: clamp(3.7rem, 5.6vw, 5.35rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.hero-title span:last-child {
  max-width: 650px;
  color: #9297a0;
  font-size: clamp(2.15rem, 3.35vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: normal;
}
.hero__lead { max-width: 590px; color: var(--v2-muted); font-size: 1.02rem; line-height: 1.65; }
.hero__actions { margin-bottom: 22px; }
.hero__stats { gap: 14px; }
.hero__stats div {
  padding: 15px 0 0;
  border: 0;
  border-top: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero__stats dt { color: var(--v2-ink); font-size: 1rem; }
.hero__stats dd { color: var(--v2-muted); font-size: 0.68rem; }

.hero-stage {
  min-height: 650px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.35), transparent 34%),
    linear-gradient(145deg, #dce6ff 0%, #a8b9e7 48%, #8297ce 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46), 0 30px 90px rgba(28, 50, 100, 0.16);
  isolation: isolate;
}
.hero-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 680px;
  height: 680px;
  top: -16%;
  right: -34%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.08), 0 0 0 140px rgba(255, 255, 255, 0.05);
}
.hero-stage__media { inset: 58px 18px 130px; z-index: 1; }
.hero-stage__halo {
  width: 78%;
  background: rgba(20, 37, 76, 0.16);
  filter: blur(24px);
  transform: translateY(130px) scaleY(0.23);
}
.hero-stage__media img {
  width: min(92%, 690px);
  max-height: 455px;
  filter: drop-shadow(0 34px 34px rgba(13, 27, 62, 0.28));
}
.hero-stage__info { z-index: 2; padding: 0 34px 24px; }
.hero-stage__info span { color: var(--v2-ink); font-size: 0.62rem; letter-spacing: 0.16em; }
.hero-stage__info h2 { font-size: clamp(2rem, 3.3vw, 3.15rem); letter-spacing: -0.055em; }
.hero-stage__info p { color: var(--v2-ink); font-size: 1.08rem; }
.hero-stage__controls { z-index: 2; padding: 0 26px 24px; }
.hero-stage__controls button { background: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.55); }
.hero-dots button::before { background: rgba(12, 17, 27, 0.3); }
.hero-dots button.is-active::before { background: var(--v2-white); }

.lead-form--hero {
  border-color: var(--v2-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.lead-form--hero input,
.lead-form--hero select {
  border-color: var(--v2-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}
.lead-form__head span { color: var(--v2-muted); }
.lead-form--hero .form-note a { color: var(--v2-blue); }

/* Homepage section rhythm */
.section { padding: 94px 0; }
.section--soft { background: rgba(255, 255, 255, 0.34); }
.section-heading { margin-bottom: 38px; }
.section-heading h2 {
  color: var(--v2-ink);
  font-size: clamp(2.55rem, 4.7vw, 4.45rem);
  line-height: 1;
  letter-spacing: -0.055em;
}
.experience-grid,
.needs-grid,
.offer-grid { gap: 18px; }
.experience-card,
.need-card,
.compare-card,
.offer-card {
  border-color: var(--v2-line);
  border-radius: var(--v2-radius-md);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: none;
}
.experience-card:hover,
.need-card:hover,
.compare-card:hover,
.offer-card:hover { box-shadow: var(--v2-shadow); }
.experience-card h3,
.need-card strong,
.compare-card h3 { color: var(--v2-ink); }
.experience-card p,
.compare-card p,
.offer-card p { color: var(--v2-muted); }
.journey-card__step,
.text-link { color: var(--v2-blue); }
.experience-card__chips span,
.segment-control,
.segment-control button,
.product-card__meta span { border-color: var(--v2-line); }
.segment-control { background: rgba(255, 255, 255, 0.46); }
.segment-control button.is-active { background: var(--v2-ink); }

.products-section { background: transparent; }
.product-grid { gap: 18px; }
.product-card {
  min-height: 0;
  border-color: var(--v2-line);
  border-radius: var(--v2-radius-md);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--v2-shadow); }
.product-card__media {
  min-height: 300px;
  background: linear-gradient(150deg, #edf1f8, #dce4f1);
}
.product-card:nth-child(3n + 1) .product-card__media { background: linear-gradient(150deg, #dce7ff, #b7c8ef); }
.product-card__media img { height: 270px; filter: drop-shadow(0 24px 22px rgba(16, 28, 58, 0.2)); }
.product-card__badge { background: var(--v2-ink); }
.product-card__content { padding: 23px 24px 26px; }
.product-card__content h3 { color: var(--v2-ink); font-size: 1.9rem; letter-spacing: -0.045em; }
.product-card__price { color: var(--v2-ink); }
.product-card__promo { color: var(--v2-blue); }

.caniệm-banner,
.canieniem-banner { border-color: var(--v2-line); background: rgba(255, 255, 255, 0.56); box-shadow: none; }
.showroom-proof,
.showroom-card { border-color: var(--v2-line); border-radius: var(--v2-radius-md); box-shadow: none; }
.showroom-proof img { filter: saturate(0.92) contrast(1.03); }
.showroom-proof figcaption { background: rgba(12, 17, 27, 0.78); }
.final-cta { background: var(--v2-ink); }
.site-footer { background: #090f1a; }
.mobile-cta { background: rgba(10, 17, 30, 0.9); border-color: rgba(255, 255, 255, 0.3); }
.mobile-cta__primary { background: var(--v2-blue); }

/* Landing pages: same visual language, unchanged semantic templates. */
.lp-header {
  min-height: 76px;
  border-bottom-color: var(--v2-line);
  background: rgba(245, 242, 235, 0.9);
  backdrop-filter: blur(18px);
}
.lp-header nav { gap: 28px; }
.lp-header nav a { color: #353c49; font-size: 0.8rem; }
.lp-header nav a:hover { color: var(--v2-blue); }
.lp-brand { color: var(--v2-ink); }
.lp-breadcrumb { color: var(--v2-muted); }
.lp-breadcrumb a,
.lp-link { color: var(--v2-blue); }
.lp-lead,
.lp-safe,
.lp-form-note,
.lp-info-card p,
.lp-timeline p,
.lp-footer { color: var(--v2-muted); }

.tpl-product-copy h1,
.tpl-price-intro h1,
.tpl-usecase-copy h1,
.tpl-local-copy h1,
.tpl-editorial-hero h1,
.tpl-editorial-hub h1 {
  color: var(--v2-ink);
  font-weight: 760;
  letter-spacing: -0.06em;
}
.tpl-local-copy h1 { color: #fff; }
.tpl-local-copy p { color: rgba(255, 255, 255, 0.82); }

.tpl-product-stage,
.lp-hero-bike,
.lp-detail-stage {
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 36px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(145deg, #dce6ff 0%, #a8b9e7 52%, #8297ce 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 24px 70px rgba(28, 50, 100, 0.14);
}
.tpl-product-stage::before,
.lp-detail-stage::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -32%;
  top: -40%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 0 0 56px rgba(255, 255, 255, 0.07), 0 0 0 112px rgba(255, 255, 255, 0.045);
}
.lp-detail-stage { position: relative; overflow: hidden; }
.tpl-product-stage img,
.lp-hero-bike img,
.lp-detail-stage img { filter: drop-shadow(0 26px 25px rgba(13, 27, 62, 0.24)); }
.tpl-product-stage figcaption,
.lp-hero-bike span { border-radius: 999px; background: rgba(255, 255, 255, 0.58); color: var(--v2-ink); }

.lp-lead-panel,
.lp-hero-form {
  border-color: var(--v2-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.lp-form input,
.lp-form select {
  border-color: var(--v2-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}
.lp-form button { border-radius: 12px; background: var(--v2-blue); }

.lp-section {
  border-color: var(--v2-line);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.58);
}
.lp-section-soft { background: rgba(255, 255, 255, 0.36); }
.lp-section-head h2 { color: var(--v2-ink); letter-spacing: -0.05em; }
.lp-product-grid,
.lp-info-grid,
.lp-compare-grid { gap: 18px; }
.lp-product-card,
.lp-info-card,
.lp-compare-card {
  border-color: var(--v2-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
}
.lp-product-card { transition: transform 0.24s ease, box-shadow 0.24s ease; }
.lp-product-card:hover { transform: translateY(-5px); box-shadow: var(--v2-shadow); }
.lp-product-media { min-height: 240px; background: linear-gradient(150deg, #edf1f8, #dce4f1); }
.lp-product-card:nth-child(3n + 1) .lp-product-media { background: linear-gradient(150deg, #dce7ff, #b7c8ef); }
.lp-product-media img { height: 220px; filter: drop-shadow(0 20px 18px rgba(16, 28, 58, 0.2)); }
.lp-product-badge { border-radius: 999px; background: var(--v2-ink); }
.lp-product-card h3 { color: var(--v2-ink); font-size: 1.75rem; letter-spacing: -0.045em; }
.lp-price strong { color: var(--v2-ink); }
.lp-chips span { border-color: var(--v2-line); border-radius: 999px; color: var(--v2-muted); }
.lp-info-card,
.lp-compare-card { box-shadow: none; }
.lp-timeline article { border-top-color: var(--v2-blue); background: rgba(255, 255, 255, 0.52); }
.lp-timeline article::before { color: var(--v2-blue); }
.lp-module-table--dark,
.lp-location-card,
.tpl-local-copy { background: var(--v2-ink); }
.lp-module-voucher,
.lp-final { background: linear-gradient(135deg, var(--v2-ink), #14223b); }
.lp-faq details { border-color: var(--v2-line); background: rgba(255, 255, 255, 0.62); }
.seo-article-section,
.tpl-editorial-summary,
.tpl-editorial-convert { border-color: var(--v2-line); background: rgba(255, 255, 255, 0.56); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 16px; }
  .hero-stage { min-height: 580px; }
}

@media (max-width: 760px) {
  body { background: var(--v2-paper); }
  .lp-header { min-height: 66px; }
  .lp-header nav { gap: 8px; }
  .tpl-product-copy h1,
  .tpl-price-intro h1,
  .tpl-usecase-copy h1,
  .tpl-local-copy h1,
  .tpl-editorial-hero h1,
  .tpl-editorial-hub h1 { font-size: clamp(2rem, 9.3vw, 2.5rem); line-height: 1.02; }
  .tpl-product-stage,
  .lp-hero-bike,
  .lp-detail-stage { min-height: 210px; border-radius: 26px; }
  .tpl-product-stage img,
  .lp-detail-stage img { height: 198px; }
  .lp-hero-bike img { height: 150px; }
  .lp-lead-panel,
  .lp-hero-form { border-radius: 22px; }
  .lp-section { border-radius: 22px; }
  .lp-product-media { min-height: 210px; }
  .lp-product-media img { height: 195px; }
  .lp-product-card h3 { font-size: 1.65rem; }
}

@media (max-width: 680px) {
  :root { --container: calc(100vw - 28px); }
  .top-strip__inner { justify-content: center; gap: 0; overflow: hidden; font-size: 0.66rem; }
  .top-strip__inner > *:not(:first-child) { display: none; }
  .site-header { position: sticky; }
  .nav { height: 70px; }
  .link-call { display: none; }
  .hero { padding: 38px 0 58px; }
  .hero__copy { padding: 0; }
  .hero-title { margin-bottom: 20px; }
  .hero-title span:first-child { font-size: clamp(2.35rem, 10.5vw, 2.9rem); line-height: 0.98; }
  .hero-title span:last-child { margin-top: 4px; font-size: clamp(2rem, 9.2vw, 2.55rem); line-height: 1; }
  .hero__lead { margin-bottom: 24px; font-size: 0.9rem; line-height: 1.58; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__actions .button { min-width: 0; padding-inline: 12px; font-size: 0.76rem; }
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
  .hero__stats div { padding-top: 12px; }
  .hero__stats dt { font-size: 0.82rem; }
  .hero__stats dd { font-size: 0.56rem; line-height: 1.35; }
  .hero-stage { min-height: 470px; margin-top: 14px; border-radius: 28px; }
  .hero-stage__media { inset: 62px 8px 112px; }
  .hero-stage__media img { width: 102%; max-height: 310px; }
  .hero-stage__info { padding: 0 22px 18px; }
  .hero-stage__info h2 { font-size: 1.8rem; }
  .hero-stage__info p { font-size: 0.9rem; }
  .hero-stage__controls { padding: 0 16px 14px; }
  .lead-form--hero { padding: 16px; border-radius: 22px; }
  .lead-form__head h2 { font-size: 1.35rem; }
  .lead-form__head > span { display: none; }
  .section { padding: 72px 0; }
  .section-heading h2 { font-size: clamp(2.4rem, 11.5vw, 3.05rem); }
  .experience-card,
  .need-card,
  .compare-card,
  .offer-card { border-radius: 22px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { border-radius: 24px; }
  .product-card__media { min-height: 265px; }
  .product-card__media img { height: 255px; }
  .product-card__content h3 { font-size: 1.75rem; }
  .showroom-proof,
  .showroom-card { border-radius: 22px; }
  .mobile-cta { left: 10px; right: 10px; bottom: 10px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}