/* Generated by tools/build-rtl.js from ../product.css — do not edit. */
/* ==========================================================================
   Veliq — Product page
   Shares tokens, header, footer, buttons and logo with style.css (frozen).
   Design reference width: 1440px (approved 1024px screenshot × 1.40625)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero--product { height: 479px; }
.hero--product .hero-bg { width: 1911px; right: calc(50% - 971px); top: -410px; }
.hero--product .hero-fade {
  background: linear-gradient(-90deg,
    rgba(251, 248, 245, .97) 0,
    rgba(251, 248, 245, .95) calc(50% - 30px),
    rgba(251, 248, 245, .6) calc(50% + 10px),
    rgba(251, 248, 245, 0) calc(50% + 36px));
}
.hero--product .hero-inner { padding-top: 63px; padding-right: 11px; }
.ph-eyebrow { font-size: 13.5px; letter-spacing: .26em; color: #a28a69; }
.ph-title {
  margin-top: 16px;
  font-family: var(--serif); font-weight: 560;
  font-size: 67px; line-height: 66px; letter-spacing: -.022em;
  color: var(--ink);
  font-variation-settings: 'opsz' 60;
}
.ph-title em { font-style: italic; color: var(--gold-text); }
.ph-lead { margin-top: 9px; font-size: 19.1px; line-height: 31px; color: var(--ink); letter-spacing: -.005em; }
.ph-cta { margin-top: 37px; gap: 25px; }
.ph-cta .btn { height: 62px; font-size: 17px; }
.ph-cta .btn-gold { width: 200px; }
.ph-cta .btn-outline { width: 225px; }
.ph-note { margin-top: 18px; font-size: 14.7px; }

/* ---------- Modules card ---------- */
.modules { background: #f9f5f0; padding-bottom: 21px; position: relative; z-index: 2; }
.modules-card {
  width: min(1383px, calc(100% - 56px));
  margin: -4px auto 0;
  min-height: 208px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 0 22px 0 0;
  background: #fcfaf6;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(60, 40, 20, .03);
}
.module { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 2px 24px; position: relative; }
.module + .module::before { content: ""; position: absolute; right: 0; top: 30px; bottom: 28px; width: 1px; background: var(--line); }
.module .feature-icon svg { width: 31px; height: 31px; }
.module h3 { margin-top: 14px; font-family: var(--serif); font-weight: 560; font-size: 19.5px; line-height: 24px; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; }
.module p { margin-top: 8px; font-size: 14.2px; letter-spacing: -.005em; line-height: 20.5px; color: var(--muted); }

/* ---------- Product overview (dark) ---------- */
.overview {
  position: relative; height: 491px; overflow: hidden; color: #fff;
  background:
    radial-gradient(380px 420px at 30% 70%, rgba(95, 65, 40, .38), transparent 70%),
    linear-gradient(-90deg, #0b0f10 0%, #121212 30%, #17120e 45%, #111 70%, #111 100%);
}
.ov-plant { position: absolute; right: calc(50% - 211px); top: 3px; width: 85px; height: 488px; object-fit: cover; max-width: none;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30%); mask-image: linear-gradient(270deg, transparent 0, #000 45%); }
.ov-inner { position: relative; height: 100%; }
.ov-copy { position: absolute; right: 11px; top: 44px; width: 440px; }
.ov-copy .eyebrow { font-size: 13px; letter-spacing: .26em; }
.ov-copy h2 {
  margin-top: 23px;
  font-family: var(--serif); font-weight: 560;
  font-size: 67px; line-height: 60px; letter-spacing: -.022em;
  font-variation-settings: 'opsz' 60;
}
.ov-copy h2 em { font-style: italic; color: var(--gold-soft); }
.ov-lead { margin-top: 18px; max-width: 425px; font-size: 19px; line-height: 29.5px; color: #ebe8e3; letter-spacing: -.008em; }
.btn-ov { margin-top: 22px; width: 263px; height: 59px; font-size: 17px; }

.pd {
  position: absolute; right: 517px; top: 25px;
  width: 802px; height: 468px;
  border: 1.5px solid #5d5953; border-radius: 20px;
  background: #0f1010;
  display: flex;
  padding: 12px 0 16px 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
}
.pd-side { width: 155px; flex: none; padding: 31px 20px 0 0; }
.pd-side .dv-brand { padding-right: 7px; }
.pd-nav { margin-top: 24px; }
.pd-nav li { height: 29.8px; margin: 0 0 0 7px; font-size: 10.5px; gap: 9px; }
.pd-nav li.is-active { height: 34px; margin-bottom: -2px; margin-top: -2px; }
.pd-main { flex: 1; background: #fafafa; border-radius: 6px; color: var(--ink); overflow: hidden; }
.pd-search { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 18px; font-size: 13px; color: #6f6b66; }
.pd-search svg { width: 15px; height: 15px; color: #555; flex: none; }
.pd-search span { flex: 1; }
.pd-search .r2 { width: 14px; height: 14px; margin-right: 12px; }
.pd-tabs { height: 39px; background: #f3f3f2; display: flex; align-items: center; gap: 19px; padding-right: 17px; font-size: 12px; color: #77736e; border-top: 1px solid #eeecea; border-bottom: 1px solid #eeecea; }
.pd-tabs b { color: #1c1b19; font-weight: 600; }
.pd-product { display: flex; gap: 18px; margin: 20px 31px 0 17px; padding-bottom: 5px; border-bottom: 1px solid #ecebe8; }
.pd-img { width: 130px; height: 96px; background: #edebe7; border-radius: 6px; overflow: hidden; flex: none; }
.pd-img img { width: 100%; height: 100%; object-fit: contain; }
.pd-info { padding-top: 7px; flex: 1; }
.pd-name { display: flex; align-items: center; gap: 22px; font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: -.01em; color: #1c1b19; }
.pd-badge { font-size: 10.5px; font-weight: 500; color: #2f7a4e; background: #e5f3ea; border-radius: 4px; padding: 3px 9px; line-height: 12px; letter-spacing: 0; }
.pd-sub { font-size: 10px; line-height: 14px; color: #b9b4ad; }
.pd-subtabs { display: flex; gap: 24px; margin-top: 22px; font-size: 12px; color: #77736e; }
.pd-subtabs b { font-weight: 500; color: #1c1b19; position: relative; padding-bottom: 14px; }
.pd-subtabs b::after { content: ""; position: absolute; right: 0; left: -10px; bottom: 0; height: 2px; background: var(--gold); }
.pd-subtabs span { padding-bottom: 14px; }
.pd-cards { display: grid; grid-template-columns: 149px 197px 1fr; column-gap: 14px; padding: 14px 11px 0 6px; }
.pd-card { background: #fff; border: 1px solid #efedea; border-radius: 6px; height: 206px; padding: 13px 12px 0; }
.pd-card h5 { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 14px; color: #1f1e1c; display: flex; justify-content: space-between; align-items: center; }
.pd-card h5 a { font-size: 10px; font-weight: 500; color: var(--gold); display: inline-flex; align-items: center; gap: 3px; }
.pd-card h5 a svg { width: 10px; height: 10px; }
.pd-ring {
  width: 52px; height: 52px; margin: 17px 4px 0 0; border-radius: 50%;
  background: conic-gradient(#2e8b57 calc(var(--p) * 1%), #dcefe3 0);
  display: grid; place-items: center;
}
.pd-ring span { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #1f1e1c; }
.pd-checks { margin-top: 12px; }
.pd-checks li { display: flex; align-items: center; gap: 6px; height: 17px; font-size: 9.8px; color: #5b8d6b; white-space: nowrap; }
.pd-checks svg { width: 10px; height: 10px; color: #3f8358; flex: none; }
.pd-vis ul { margin-top: 5px; }
.pd-vis li { display: flex; align-items: center; height: 37.3px; font-size: 10px; white-space: nowrap; font-weight: 500; color: #2a2826; }
.ai { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; margin-left: 8px; flex: none; }
.ai svg { width: 15px; height: 15px; }
.ai-gpt { background: #111; }
.ai-gem { background: #eef3fe; }
.ai-cl { background: #e07a45; }
.ai-g { background: #f1f3f4; }
.bar { margin-right: auto; width: 54px; height: 4px; border-radius: 2px; background: linear-gradient(-90deg, #1c8946 calc(var(--v) * 1%), #e3e7e4 0); }
.bar-o { background: linear-gradient(-90deg, #eb6d2d calc(var(--v) * 1%), #f1e6df 0); }
.pd-vis em { font-style: normal; width: 27px; text-align: left; font-size: 10px; color: #6f6b66; margin-right: 6px; }
.pd-opps ul { margin-top: 9px; }
.pd-opps li > div { min-width: 0; }
.pd-opps li { display: flex; align-items: center; gap: 9px; height: 49px; }
.pd-opps img { width: 45px; height: 39px; object-fit: cover; border-radius: 4px; flex: none; }
.pd-opps b { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #22211f; line-height: 1.25; white-space: nowrap; }
.pd-opps span { display: block; margin-top: 3px; font-size: 9px; color: #8b8680; line-height: 1.2; }

/* ---------- How Veliq works ---------- */
.how { background: #faf8f2; min-height: 411px; padding: 29px 0 34px; }
.how-head { padding-right: 11px; }
.how-head .eyebrow { font-size: 13px; letter-spacing: .26em; color: #a28a69; }
.how-head h2 { margin-top: 8px; font-family: var(--serif); font-weight: 560; font-size: 53px; line-height: 56px; letter-spacing: -.02em; font-variation-settings: 'opsz' 60; }
.how-head p { font-size: 18px; line-height: 26px; color: var(--muted); }
.how-steps {
  width: min(1367px, calc(100% - 64px));
  margin: 34px max(32px, calc(50% - 681px)) 0 auto;
  padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.how-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: -13px; top: 29px; width: 26px; height: 24px;
  background: no-repeat center / 24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23b08a5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.how-steps .feature-icon { width: 59px; height: 59px; }
.how-steps .feature-icon svg { width: 32px; height: 32px; }
.how-steps small { margin-top: 6px; font-size: 12.5px; line-height: 13px; letter-spacing: .06em; color: #a58762; }
.how-steps h3 { margin-top: 8px; font-family: var(--serif); font-weight: 560; font-size: 20px; line-height: 23px; letter-spacing: -.012em; color: var(--ink); }
.how-steps p { margin-top: 12px; font-size: 14.5px; line-height: 21px; color: var(--muted); }


/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  .overview .pd { right: auto; left: 0; transform: scale(.86); transform-origin: left top; }
}

@media (max-width: 1200px) {
  .hero--product .hero-bg { right: calc(50% - 640px); }
  .hero--product .hero-fade { background: linear-gradient(-90deg, rgba(251,248,245,.97) 0, rgba(251,248,245,.93) 55%, rgba(251,248,245,0) 70%); }
  .ph-lead { max-width: 560px; }
  .modules-card { grid-template-columns: repeat(3, 1fr); padding: 0; }
  .module:nth-child(4)::before { display: none; }
  .module h3 { white-space: normal; }

  .overview { height: auto; padding: 56px 0; }
  .ov-plant { display: none; }
  .ov-inner { display: grid; gap: 40px; }
  .ov-copy, .overview .pd { position: static; transform: none; }
  .ov-copy { width: auto; max-width: 520px; }
  .overview .pd { width: 100%; max-width: 802px; margin: 0 auto; }

  .how-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; margin-right: auto; }
  .how-steps li:nth-child(3)::after { display: none; }

}

@media (max-width: 760px) {
  .hero--product { height: auto; padding-bottom: 48px; }
  .hero--product .hero-bg { width: 1100px; right: calc(50% - 300px); top: auto; bottom: -180px; opacity: .35; }
  .hero--product .hero-inner { padding-top: 40px; padding-right: 0; }
  .ph-title { font-size: 42px; line-height: 46px; }
  .ph-lead { font-size: 17px; line-height: 26px; }
  .ph-lead br { display: none; }
  .ph-cta { flex-wrap: wrap; gap: 14px; }
  .modules-card { width: calc(100% - 32px); grid-template-columns: repeat(2, 1fr); }
  .module:nth-child(odd)::before { display: none; }
  .module:nth-child(4)::before { display: block; }
  .overview .pd { display: none; }
  .ov-copy { right: 0; }
  .ov-copy h2 { font-size: 46px; line-height: 48px; }
  .how-head { padding-right: 0; }
  .module h3 { font-size: 17px; }
  .how-head h2 { font-size: 38px; line-height: 44px; }
  .how-steps { grid-template-columns: repeat(2, 1fr); width: calc(100% - 32px); }
  .how-steps li::after { display: none; }
}