:root {
  color-scheme: light;
  --ink: #171816;
  --ink-soft: #343631;
  --paper: #f4f1eb;
  --paper-2: #ede9e1;
  --muted: #797a73;
  --line: #d7d2c9;
  --gold: #c39e60;
  --gold-light: #e5c58d;
  --dark: #151715;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', 'Helvetica Neue', sans-serif;
  --display: 'Manrope', 'Helvetica Neue', sans-serif;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1336px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px; background: var(--dark); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.topline { height: 34px; display: flex; align-items: center; justify-content: center; gap: 24px; background: var(--dark); color: var(--gold-light); }
.topline p { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .23em; }
.topline p span { padding: 0 5px; color: #92754a; }
.topline-rule { width: 46px; height: 1px; background: #80683f; }

.site-header { position: relative; z-index: 20; background: rgba(244, 241, 235, .95); border-bottom: 1px solid rgba(23, 24, 22, .09); }
.header-inner { width: min(1424px, calc(100% - 80px)); height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.095em; line-height: 1; }
.wordmark span { font-weight: 500; letter-spacing: -.08em; }
.wordmark i { margin-left: 1px; color: var(--gold); font-size: 29px; font-style: normal; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3.2vw, 54px); margin-left: auto; }
.main-nav a, .header-contact { font-size: 12px; font-weight: 600; transition: color .2s ease; }
.main-nav a { color: #3e3f3a; }
.main-nav a:hover, .footer-nav a:hover { color: #94713b; }
.header-contact { min-width: 165px; height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 16px; border: 1px solid #a47f46; color: #775620; transition: background .2s ease, color .2s ease; }
.header-contact:hover { background: #a47f46; color: #fff; }
.header-contact .arrow { font-size: 16px; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 610px; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: #e7e1d8; }
.hero-image, .hero-shade { position: absolute; z-index: -1; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.hero-shade { background: linear-gradient(90deg, rgba(242, 238, 231, .99) 0%, rgba(242, 238, 231, .96) 29%, rgba(242, 238, 231, .69) 49%, rgba(242, 238, 231, .08) 73%, rgba(19, 19, 18, .08) 100%); }
.hero-content { position: relative; padding-top: 12px; padding-bottom: 22px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: #5d5d57; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.eyebrow-line { width: 38px; height: 1px; display: inline-block; background: var(--gold); }
.hero h1, .section-heading h2, .wholesale-copy h2, .approach-heading h2, .contact-inner h2, .faq-grid h2 { margin: 0; font-family: var(--display); font-size: clamp(45px, 5.45vw, 78px); font-weight: 600; letter-spacing: -.075em; line-height: 1.06; }
.hero h1 em, .section-heading h2 em, .wholesale-copy h2 em, .approach-heading h2 em, .contact-inner h2 em, .faq-grid h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; }
.hero h1 { max-width: 710px; font-size: clamp(52px, 6vw, 86px); }
.hero h1 em { letter-spacing: -.075em; }
.hero-description { max-width: 420px; margin: 25px 0 26px; color: #62625d; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 21px; border: 1px solid transparent; font-size: 11px; font-weight: 700; letter-spacing: .015em; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 16px; line-height: 1; }
.button-dark { background: var(--ink); color: #f8f5ee; }
.button-dark:hover { background: #31322e; }
.button-outline { border-color: rgba(33, 34, 31, .48); color: var(--ink); background: rgba(246, 242, 235, .25); }
.button-outline:hover { border-color: var(--ink); background: rgba(246, 242, 235, .75); }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 44px; color: #686962; font-size: 10px; letter-spacing: .02em; }
.note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(195, 158, 96, .18); }
.hero-index { position: absolute; right: 34px; bottom: 30px; display: flex; align-items: center; gap: 11px; color: rgba(250, 248, 243, .84); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.hero-index-line { width: 32px; height: 1px; background: var(--gold-light); }
.scroll-cue { position: absolute; left: max(22px, calc((100% - 1450px) / 2)); bottom: 30px; display: flex; align-items: center; gap: 13px; color: #5b5b55; font-size: 8px; font-weight: 700; letter-spacing: .17em; writing-mode: vertical-rl; }
.scroll-cue i { width: 1px; height: 35px; background: var(--gold); }

.service-strip { background: #eae6de; border-bottom: 1px solid var(--line); }
.service-grid { min-height: 86px; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 7vw, 112px); }
.service-item { display: flex; align-items: center; gap: 13px; color: #383934; font-size: 11px; font-weight: 600; }
.service-number { color: #9a7b4a; font-family: var(--serif); font-size: 13px; font-style: italic; }
.service-divider { width: 1px; height: 20px; background: #c9c3b9; }

.section-space { padding-block: 112px 122px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 48px; }
.section-heading .eyebrow, .approach-heading .eyebrow, .faq-grid .eyebrow { margin-bottom: 23px; }
.section-heading h2, .approach-heading h2, .faq-grid h2 { font-size: clamp(40px, 4.6vw, 62px); }
.section-intro { max-width: 355px; margin: 0 0 5px; color: var(--muted); font-size: 13px; line-height: 1.9; }

.offers-section { background: #ece8e0; }
.offers-heading { margin-bottom: 38px; }
.spotlight-card { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 445px; overflow: hidden; background: #f7f4ed; border: 1px solid #ddd7cd; }
.spotlight-photo { position: relative; min-height: 445px; overflow: hidden; background: #211a1b; }
.spotlight-photo::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg, rgba(12,12,12,.55), transparent 38%), linear-gradient(90deg, rgba(16,13,14,.09), transparent 45%); }
.spotlight-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 70% center; }
.spotlight-photo-label { position: absolute; z-index: 1; top: 22px; left: 24px; color: #f4e6d0; font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.spotlight-photo-index { position: absolute; z-index: 1; right: 21px; bottom: 5px; color: rgba(255,255,255,.13); font-family: var(--display); font-size: 130px; font-weight: 800; letter-spacing: -.11em; line-height: 1; }
.spotlight-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.product-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: #83755f; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.product-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #b18a50; }
.spotlight-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(42px, 4.5vw, 64px); font-weight: 600; letter-spacing: -.075em; line-height: .99; }
.spotlight-copy h3 em { font-family: var(--serif); font-weight: 400; }
.spotlight-description { max-width: 400px; margin: 18px 0; color: #77776f; font-size: 12px; line-height: 1.8; }
.spotlight-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.spotlight-specs span { padding: 7px 9px; border: 1px solid #ded8cd; color: #6e6f68; font-size: 7px; font-weight: 700; letter-spacing: .09em; }
.spotlight-price { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 1px 0 17px; padding-top: 13px; border-top: 1px solid #ded8cd; color: #77776f; font-size: 10px; }
.spotlight-price strong { color: var(--ink); font-family: var(--display); font-size: 14px; }
.illustration-note { margin: 12px 0 0; color: #8a8a82; font-size: 9px; line-height: 1.6; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid #dfd9cf; background: #f7f4ed; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(35, 32, 25, .09); }
.product-photo { position: relative; height: 248px; overflow: hidden; background: #e8e2d9; }
.product-photo::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, rgba(19,18,17,.15), transparent 36%, rgba(19,18,17,.1)); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.product-card:hover .product-photo img { transform: scale(1.04); }
.samsung-photo img { object-position: 70% 43%; }
.redmi-photo img { object-position: 84% 78%; transform: scale(1.15); }
.redmi-photo.product-photo img { transform: scale(1.15); }
.product-card-sale:hover .redmi-photo img { transform: scale(1.21); }
.accessory-photo img { object-position: 93% 82%; transform: scale(1.13); }
.product-badge { position: absolute; z-index: 1; top: 15px; left: 15px; padding: 8px 10px; background: rgba(248,246,240,.93); color: #393934; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.product-badge-sale { background: #772b33; color: #fff3e7; }
.product-info { padding: 19px 18px 17px; }
.product-info .product-kicker { margin-bottom: 7px; font-size: 8px; }
.product-info h3 { min-height: 46px; margin: 0 0 8px; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; padding: 10px 0; border-top: 1px solid #e0dbd2; color: #85857e; font-size: 9px; }
.product-meta strong { color: #3a3b36; font-family: var(--display); font-size: 11px; }
.product-meta .sale-price { color: #792f36; font-size: 14px; }
.sale-price-line { display: flex; align-items: center; gap: 9px; margin: 2px 0 1px; }
.sale-price-line del { color: #8c8b84; font-size: 11px; text-decoration-color: #8b3440; text-decoration-thickness: 1.5px; }
.sale-price-line span { color: #9b716f; font-size: 8px; }
.product-cta { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px solid #e0dbd2; color: #71552c; font-size: 10px; font-weight: 700; }
.product-cta span { font-size: 15px; transition: transform .2s; }
.product-cta:hover span { transform: translate(2px, -2px); }
.demo-disclaimer { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; padding: 15px 17px; border: 1px solid #d8c8bb; background: #f1e7dd; }
.demo-icon { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border-radius: 50%; background: #7e3038; color: #fff4e9; font-family: var(--display); font-size: 11px; font-weight: 700; }
.demo-disclaimer p { margin: 0; color: #6e5f58; font-size: 9px; line-height: 1.7; }
.demo-disclaimer strong { color: #4e3534; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card { min-width: 0; }
.category-link { display: block; }
.category-visual { position: relative; height: clamp(260px, 32vw, 408px); overflow: hidden; background: #e6dfd5; }
.category-visual::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, rgba(26, 26, 24, .08), transparent 30%, rgba(24, 24, 22, .12)); pointer-events: none; }
.category-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.category-card:hover .category-visual img { transform: scale(1.045); }
.category-phone img { object-position: 73% 42%; }
.category-audio img { object-position: 51% 75%; transform: scale(1.22); }
.category-audio:hover img { transform: scale(1.28); }
.category-accessories img { object-position: 91% 84%; transform: scale(1.18); }
.category-accessories:hover img { transform: scale(1.24); }
.category-count { position: absolute; z-index: 1; top: 19px; left: 19px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.category-arrow { position: absolute; z-index: 2; right: 17px; bottom: 17px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; color: #fff; font-size: 17px; transition: background .2s, color .2s; }
.category-card:hover .category-arrow { background: #fff; color: var(--ink); }
.category-copy { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px 0; }
.category-copy h3 { margin: 0 0 5px; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
.category-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.category-mini-arrow { color: #967647; font-size: 15px; transition: transform .2s; }
.category-card:hover .category-mini-arrow { transform: translate(2px, -2px); }
.availability-note { display: flex; gap: 10px; margin: 33px 0 0; color: #797a73; font-size: 10px; line-height: 1.7; }
.availability-note span { color: #b79358; font-size: 12px; }

.wholesale-section { position: relative; min-height: 560px; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: var(--dark); color: #f3f0e9; }
.wholesale-image, .wholesale-overlay { position: absolute; z-index: -1; inset: 0; }
.wholesale-image img { width: 100%; height: 100%; object-fit: cover; object-position: 77% 55%; opacity: .45; filter: saturate(.55); }
.wholesale-overlay { background: linear-gradient(90deg, rgba(19,20,18,.98), rgba(19,20,18,.91) 47%, rgba(19,20,18,.39) 100%), linear-gradient(0deg, rgba(19,20,18,.3), transparent 55%); }
.wholesale-inner { position: relative; min-height: 560px; display: flex; align-items: center; }
.wholesale-copy { max-width: 650px; padding: 78px 0 100px; }
.eyebrow-light { color: #d7c9ad; }
.wholesale-copy h2, .contact-inner h2 { font-size: clamp(42px, 5.4vw, 70px); }
.wholesale-copy h2 em, .contact-inner h2 em { color: var(--gold-light); }
.wholesale-copy > p:not(.eyebrow) { max-width: 435px; margin: 22px 0 29px; color: #cbc9c0; font-size: 13px; line-height: 1.9; }
.button-gold { background: var(--gold-light); color: #201e19; }
.button-gold:hover { background: #f0d39f; }
.wholesale-stamp { position: absolute; right: 38px; bottom: 83px; width: 122px; height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(226, 196, 145, .5); border-radius: 50%; color: #e5c58d; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .16em; transform: rotate(-13deg); }
.wholesale-stamp i { width: 30px; height: 1px; background: var(--gold); }
.wholesale-foot { position: absolute; right: 0; bottom: 28px; left: 0; display: flex; justify-content: space-between; color: #c1bdae; font-size: 8px; font-weight: 600; letter-spacing: .15em; }

.approach-section { background: #eeebe4; }
.approach-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 10vw, 150px); }
.approach-heading { align-self: start; }
.approach-heading h2 { font-size: clamp(39px, 4.2vw, 58px); }
.approach-body { padding-top: 4px; }
.approach-lead { max-width: 515px; margin: 0 0 37px; color: #5d5e58; font-family: var(--display); font-size: 17px; line-height: 1.65; letter-spacing: -.025em; }
.approach-points { border-top: 1px solid #d4d0c7; }
.approach-point { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid #d4d0c7; }
.approach-point > span { padding-top: 2px; color: #a18250; font-family: var(--serif); font-size: 13px; font-style: italic; }
.approach-point h3 { margin: 0 0 5px; font-family: var(--display); font-size: 13px; font-weight: 700; }
.approach-point p { margin: 0; color: #7a7b74; font-size: 11px; line-height: 1.7; }

.contact-section { position: relative; overflow: hidden; background: #1a1c19; color: #f5f1e9; }
.contact-inner { position: relative; min-height: 400px; display: grid; grid-template-columns: 1fr .62fr; align-items: center; gap: 70px; padding-block: 83px; }
.contact-inner .eyebrow { margin-bottom: 23px; }
.contact-action { position: relative; z-index: 1; padding-top: 25px; }
.contact-action > p { max-width: 345px; margin: 0 0 22px; color: #c4c3bc; font-size: 12px; line-height: 1.85; }
.contact-caption { display: block; margin-top: 15px; color: #9c9d96; font-size: 9px; }
.contact-ornament { position: absolute; right: 4px; bottom: -83px; color: rgba(240,236,225,.035); font-family: var(--display); font-size: clamp(200px, 31vw, 410px); font-weight: 800; letter-spacing: -.14em; line-height: .9; pointer-events: none; }

.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(52px, 12vw, 175px); }
.faq-grid h2 { font-size: clamp(39px, 4.3vw, 57px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 21px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: 13px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: #a08150; font-size: 20px; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details p { max-width: 590px; margin: -2px 0 21px; color: #70716a; font-size: 12px; line-height: 1.8; }

.site-footer { background: #151715; color: #e9e6df; }
.footer-main { display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 50px; padding-block: 57px 49px; }
.wordmark-light { color: #f4f1eb; }
.footer-brand p { margin: 13px 0 0; color: #9c9e97; font-size: 10px; line-height: 1.8; }
.footer-label { margin: 4px 0 19px; color: #bc9b64; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-nav a { color: #dad8d1; font-size: 10px; transition: color .2s; }
.footer-nav a span { color: #c4a46e; }
.footer-country { margin: 1px 0 0; color: #8e908a; font-size: 10px; }
.footer-bottom { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(242,239,230,.13); color: #92948c; font-size: 8px; letter-spacing: .05em; }
.footer-bottom a { color: #d2c6af; }
.footer-bottom > span:nth-child(2) { letter-spacing: .16em; }

.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 76px 0 28px; padding-top: 57px; border-top: 1px solid var(--line); }
.catalog-heading .eyebrow { margin-bottom: 15px; }
.catalog-heading h3 { margin: 0; font-family: var(--display); font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.075em; line-height: 1; }
.catalog-heading h3 em { font-family: var(--serif); font-weight: 400; }
.catalog-heading > p { max-width: 360px; margin: 0 0 2px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { min-height: 35px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #d9d4ca; border-radius: 99px; background: transparent; color: #64655e; font: 600 10px var(--body); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.filter-chip:hover, .filter-chip.is-active { border-color: #242521; background: #242521; color: #f5f1e9; }
.filter-chip span { color: #b99a66; font-size: 9px; }
.catalog-search { width: min(100%, 250px); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #d9d4ca; background: #f7f4ed; }
.catalog-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 10px var(--body); }
.catalog-search input::placeholder { color: #92928b; }
.catalog-search:focus-within { outline: 2px solid #ae8547; outline-offset: 3px; }
.catalog-search > span { color: #94754a; font-size: 21px; line-height: 1; }
.catalog-summary { display: flex; justify-content: space-between; gap: 15px; margin: 0 0 12px; color: #888981; font-size: 8px; letter-spacing: .09em; }
.catalog-summary > span:last-child { text-align: right; }
.product-grid[hidden], .catalog-empty[hidden] { display: none; }
.product-description { min-height: 34px; margin: 0 0 9px; color: #777870; font-size: 9px; line-height: 1.65; }
.product-configuration { margin: 0 0 9px; color: #65665f; font-size: 8px; letter-spacing: .015em; }
.product-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 1px; padding: 8px 0 5px; border-top: 1px solid #e0dbd2; color: #8a8376; font-size: 8px; }
.product-source span { color: #967647; font-size: 13px; transition: transform .2s; }
.product-source:hover span { transform: translate(2px, -2px); }
.catalog-empty { margin: 0; padding: 38px 20px; border: 1px dashed #d1cbc0; color: #777870; text-align: center; font-size: 12px; }
.product-art { display: grid; place-items: center; isolation: isolate; background: var(--art-bg, radial-gradient(circle at 50% 40%, #d8cabb, #b8aaa0 78%)); }
.product-art::after { z-index: -1; background: linear-gradient(180deg, rgba(14,14,14,.04), transparent 48%, rgba(14,14,14,.1)); }
.product-art-image::after { z-index: 1; background: linear-gradient(180deg, rgba(14,14,14,.11), transparent 38%, rgba(14,14,14,.2)); pointer-events: none; }
.product-art-image > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.product-art .product-badge { z-index: 3; }
.product-art .art-device { position: relative; z-index: 1; width: 126px; height: 213px; display: block; overflow: hidden; border: 5px solid var(--phone-edge, #d9d6d1); border-radius: 27px; background: linear-gradient(145deg, var(--phone-a, #25282c), var(--phone-b, #101112)); box-shadow: 20px 27px 35px rgba(20,18,17,.29), inset 0 0 0 1px rgba(255,255,255,.25); transform: rotate(-8deg); }
.product-art .art-device::before { position: absolute; top: 10px; left: 10px; width: 48px; height: 54px; content: ''; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(13,14,14,.21); box-shadow: inset 0 0 14px rgba(0,0,0,.14); }
.product-art .art-device::after { position: absolute; top: 19px; right: 12px; left: 12px; bottom: 12px; content: ''; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 42%), radial-gradient(ellipse at 70% 65%, rgba(231,199,156,.5), transparent 36%), linear-gradient(155deg, var(--screen-a, #4d4d52), var(--screen-b, #141619)); }
.art-lenses { position: absolute; z-index: 2; top: 17px; left: 17px; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.53); border-radius: 50%; background: #202831; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.art-lenses:nth-child(2) { top: 37px; }
.art-lenses:nth-child(3) { top: 17px; left: 34px; }
.art-caption { position: absolute; z-index: 2; right: 17px; bottom: 16px; color: rgba(255,255,255,.83); font-family: var(--display); font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.art-iphone-max { --art-bg: radial-gradient(circle at 50% 47%, #9e6869, #563f40 69%, #2f2d2d); --phone-edge: #d7babc; --phone-a: #8e434c; --phone-b: #451e27; --screen-a: #b16a68; --screen-b: #2b131b; }
.art-iphone { --art-bg: radial-gradient(circle at 48% 46%, #d2c5b0, #938879 76%); --phone-edge: #e1d5c6; --phone-a: #bcac98; --phone-b: #7f7368; --screen-a: #b5a58f; --screen-b: #282728; }
.art-galaxy-ultra { --art-bg: radial-gradient(circle at 50% 45%, #7d8c8d, #343b3d 76%); --phone-edge: #bcc5c4; --phone-a: #24343a; --phone-b: #131b20; --screen-a: #728d89; --screen-b: #10191a; }
.art-galaxy { --art-bg: radial-gradient(circle at 52% 44%, #8d9da0, #424b4d 76%); --phone-edge: #dadad2; --phone-a: #70888e; --phone-b: #394c50; --screen-a: #8ca5a4; --screen-b: #202a32; }
.art-galaxy-a { --art-bg: radial-gradient(circle at 51% 44%, #c3b9a4, #68665c 76%); --phone-edge: #d7cfbd; --phone-a: #ac9674; --phone-b: #686050; --screen-a: #a8ab8e; --screen-b: #26302c; }
.art-redmi-max { --art-bg: radial-gradient(circle at 53% 44%, #9b7d72, #4e3937 77%); --phone-edge: #d8b9a6; --phone-a: #b97961; --phone-b: #6f3835; --screen-a: #d39472; --screen-b: #271b24; }
.art-redmi { --art-bg: radial-gradient(circle at 50% 43%, #a1a898, #4d554f 76%); --phone-edge: #d2d9cd; --phone-a: #778b78; --phone-b: #394e48; --screen-a: #a9b79c; --screen-b: #202a2a; }
.art-galaxy-ultra .art-device { width: 130px; height: 218px; border-radius: 20px; transform: rotate(7deg); }
.art-galaxy-ultra .art-device::before { top: 11px; left: 13px; width: 14px; height: 14px; border-radius: 50%; background: #273236; box-shadow: 0 24px #273236, 0 48px #273236, 0 0 0 2px #adbcbb, 0 24px 0 2px #adbcbb, 0 48px 0 2px #adbcbb; }
.art-galaxy-ultra .art-lenses { display: none; }
.art-charger, .art-audio, .art-case, .art-powerbank, .art-cable { --art-bg: radial-gradient(circle at 50% 42%, #d9d0c1, #a8a093 78%); --phone-edge: #f0ede6; --phone-a: #ece8dd; --phone-b: #c4beb1; --screen-a: #f3f0e7; --screen-b: #c8c1b3; }
.art-charger .art-device { width: 94px; height: 130px; border: 0; border-radius: 25px; background: linear-gradient(145deg, #fffefa, #b7b4ad); box-shadow: 17px 22px 27px rgba(20,18,17,.2), inset -5px -5px 11px rgba(40,36,30,.09); transform: rotate(8deg); }
.art-charger .art-device::before { top: -9px; left: 32px; width: 8px; height: 31px; border: 0; border-radius: 5px; background: #d7d4ca; box-shadow: 21px 0 #d7d4ca; }
.art-charger .art-device::after { top: 23px; right: 25px; bottom: 22px; left: 25px; border: 1px solid rgba(80,77,69,.12); border-radius: 12px; background: linear-gradient(145deg, #fcfbf8, #dedbd3); }
.art-charger .art-lenses { display: none; }
.art-audio .art-device { width: 153px; height: 106px; border: 2px solid #ece9e0; border-radius: 28px; background: linear-gradient(145deg, #fffefa, #bbb8b0); transform: rotate(-6deg); }
.art-audio .art-device::before { top: 10px; left: 8px; width: 133px; height: 24px; border: 0; border-bottom: 1px solid rgba(50,48,42,.17); border-radius: 10px; background: transparent; }
.art-audio .art-device::after { top: 58px; right: 52px; bottom: 34px; left: 52px; border-radius: 10px; background: #99978f; }
.art-audio .art-lenses { display: none; }
.art-case .art-device { width: 138px; height: 220px; border: 7px solid #b7926a; border-radius: 29px; background: linear-gradient(145deg, #e4c5a0, #a98361); transform: rotate(9deg); }
.art-case .art-device::before { top: 11px; left: 11px; width: 47px; height: 53px; border: 1px solid rgba(77,53,34,.18); border-radius: 15px; background: rgba(87,59,40,.15); }
.art-case .art-device::after { inset: auto; top: 74px; left: 49px; width: 33px; height: 57px; border: 5px solid rgba(255,255,255,.5); border-radius: 45%; background: transparent; }
.art-case .art-lenses { display: none; }
.art-powerbank .art-device { width: 124px; height: 184px; border: 2px solid #e4dfd5; border-radius: 23px; background: linear-gradient(145deg, #555a60, #252a2e); transform: rotate(-8deg); }
.art-powerbank .art-device::before { top: 20px; left: 36px; width: 48px; height: 7px; border: 0; border-radius: 8px; background: rgba(234,226,208,.72); }
.art-powerbank .art-device::after { top: 53px; right: 17px; bottom: 21px; left: 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent); }
.art-powerbank .art-lenses { display: none; }
.art-cable .art-device { width: 135px; height: 135px; border: 13px solid #e9e4da; border-radius: 50%; background: transparent; box-shadow: 15px 20px 25px rgba(20,18,17,.17), inset 0 0 0 1px rgba(30,30,30,.15); transform: rotate(20deg); }
.art-cable .art-device::before { top: 51px; left: 49px; width: 14px; height: 14px; border: 5px solid #e9e4da; border-radius: 4px; background: #b9b1a4; }
.art-cable .art-device::after { top: 21px; right: 29px; bottom: auto; left: auto; width: 13px; height: 24px; border: 4px solid #e9e4da; border-radius: 6px; background: #b9b1a4; }
.art-cable .art-lenses { display: none; }
.catalog-heading + .catalog-controls + .catalog-summary + .product-grid .product-card-accessory { grid-column: auto; }

:focus-visible { outline: 2px solid #ae8547; outline-offset: 4px; }

@media (min-width: 1500px) {
  .hero { min-height: 670px; }
}

@media (max-width: 900px) {
  .shell { width: min(100% - 56px, 720px); }
  .header-inner { width: calc(100% - 52px); height: 74px; gap: 20px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 10px; }
  .header-contact { min-width: unset; height: 40px; padding-inline: 12px; font-size: 10px; }
  .hero { min-height: 585px; }
  .hero-shade { background: linear-gradient(90deg, rgba(242,238,231,.99), rgba(242,238,231,.92) 37%, rgba(242,238,231,.57) 68%, rgba(242,238,231,.04)); }
  .hero h1 { font-size: clamp(50px, 8vw, 72px); }
  .service-grid { gap: 25px; }
  .service-item { font-size: 10px; }
  .section-space { padding-block: 85px 94px; }
  .spotlight-card { grid-template-columns: 1fr; }
  .spotlight-photo { min-height: 370px; }
  .spotlight-copy { padding: 33px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-art { height: 238px; }
  .category-grid { gap: 12px; }
  .category-visual { height: 300px; }
  .category-copy h3 { font-size: 15px; }
  .category-copy p { font-size: 10px; }
  .wholesale-section, .wholesale-inner { min-height: 510px; }
  .wholesale-stamp { right: 15px; }
  .approach-grid { gap: 50px; }
  .contact-inner { gap: 40px; }
  .faq-grid { gap: 60px; }
}

@media (max-width: 640px) {
  .shell { width: calc(100% - 40px); }
  .topline { height: 30px; gap: 12px; }
  .topline p { font-size: 8px; letter-spacing: .17em; }
  .topline-rule { display: none; }
  .header-inner { width: calc(100% - 40px); height: 68px; }
  .wordmark { font-size: 25px; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-left: auto; border: 1px solid #d8d3c9; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 16px; height: 1px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 16px 25px rgba(22, 22, 20, .08); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 13px 2px; border-bottom: 1px solid #e1dcd3; font-size: 12px; }
  .main-nav a:last-child { border-bottom: 0; }
  .header-contact { height: 38px; gap: 8px; padding-inline: 10px; font-size: 9px; }
  .header-contact .arrow { display: none; }
  .hero { min-height: 690px; align-items: flex-start; }
  .hero-image img { object-position: 62% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(242,238,231,.99) 0%, rgba(242,238,231,.98) 35%, rgba(242,238,231,.75) 52%, rgba(242,238,231,.05) 100%); }
  .hero-content { padding-top: 73px; }
  .eyebrow { gap: 10px; margin-bottom: 19px; font-size: 8px; letter-spacing: .17em; }
  .eyebrow-line { width: 25px; }
  .hero h1 { font-size: clamp(47px, 12vw, 66px); line-height: 1.02; }
  .hero-description { max-width: 325px; margin: 17px 0 20px; font-size: 13px; line-height: 1.7; }
  .hero-actions { gap: 9px; }
  .button { min-height: 46px; gap: 13px; padding-inline: 13px; font-size: 10px; }
  .hero-note { margin-top: 24px; font-size: 9px; }
  .hero-index { right: 17px; bottom: 18px; color: #f9f7f1; font-size: 8px; }
  .scroll-cue { display: none; }
  .service-grid { min-height: 74px; justify-content: space-between; gap: 9px; }
  .service-item { align-items: flex-start; flex-direction: column; gap: 3px; max-width: 105px; font-size: 9px; line-height: 1.4; }
  .service-number { font-size: 11px; }
  .service-divider { height: 28px; }
  .section-space { padding-block: 70px 78px; }
  .spotlight-photo { min-height: 270px; }
  .spotlight-copy { padding: 27px 21px; }
  .spotlight-copy h3 { font-size: 47px; }
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .product-art { height: min(78vw, 330px); }
  .product-photo { height: min(78vw, 350px); }
  .product-info { padding: 17px 16px 14px; }
  .product-info h3 { min-height: 0; }
  .catalog-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 55px; padding-top: 38px; }
  .catalog-heading h3 { font-size: 39px; }
  .catalog-controls { align-items: stretch; flex-direction: column-reverse; gap: 13px; }
  .catalog-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; }
  .filter-chip { flex: 0 0 auto; }
  .catalog-search { width: 100%; }
  .catalog-summary { align-items: flex-start; font-size: 7px; }
  .catalog-summary > span:last-child { max-width: 150px; }
  .product-description { min-height: 0; }
  .demo-disclaimer { margin-top: 14px; padding: 13px; }
  .demo-disclaimer p { font-size: 8px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .section-heading h2, .approach-heading h2, .faq-grid h2 { font-size: clamp(39px, 9.8vw, 54px); }
  .section-intro { max-width: 360px; font-size: 12px; }
  .category-grid { grid-template-columns: 1fr; gap: 27px; }
  .category-visual { height: min(96vw, 430px); }
  .category-copy { padding-top: 14px; }
  .category-copy h3 { font-size: 17px; }
  .category-copy p { font-size: 10px; }
  .availability-note { margin-top: 25px; font-size: 9px; }
  .wholesale-section, .wholesale-inner { min-height: 555px; }
  .wholesale-image img { object-position: 68% center; }
  .wholesale-overlay { background: linear-gradient(90deg, rgba(19,20,18,.96), rgba(19,20,18,.75)), linear-gradient(0deg, rgba(19,20,18,.65), transparent 100%); }
  .wholesale-copy { padding: 65px 0 100px; }
  .wholesale-copy h2, .contact-inner h2 { font-size: clamp(42px, 10.3vw, 59px); }
  .wholesale-copy > p:not(.eyebrow) { max-width: 345px; font-size: 12px; }
  .wholesale-stamp { right: 4px; bottom: 80px; width: 84px; height: 84px; font-size: 9px; }
  .wholesale-stamp i { width: 22px; }
  .wholesale-foot { bottom: 24px; font-size: 7px; }
  .approach-grid { grid-template-columns: 1fr; gap: 27px; }
  .approach-lead { margin-bottom: 25px; font-size: 15px; }
  .approach-point { grid-template-columns: 34px 1fr; gap: 8px; padding: 17px 0; }
  .contact-inner { min-height: 425px; grid-template-columns: 1fr; gap: 12px; padding-block: 65px; }
  .contact-action { padding-top: 0; }
  .contact-action > p { max-width: 335px; font-size: 11px; }
  .contact-ornament { right: -10px; bottom: -32px; font-size: 230px; }
  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .faq-list summary { align-items: flex-start; padding: 18px 0; font-size: 12px; line-height: 1.6; }
  .faq-list summary > span { flex: 0 0 auto; margin-top: -4px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 22px; padding-block: 45px 35px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { min-height: 64px; flex-wrap: wrap; justify-content: space-between; gap: 7px 14px; padding-block: 12px; font-size: 7px; }
  .footer-bottom > span:nth-child(2) { display: none; }
}

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