:root {
  --gold: #d3a437; --gold-dark: #b88620; --ink: #101820; --muted: #66717d;
  --light: #f5f6f7; --line: #e7e9ec; --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; color: var(--ink); font-family: "Inter", Arial, sans-serif; font-size: 14px; line-height: 1.6; }
a { text-decoration: none; }
img { max-width: 100%; }
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 14px #0b17200d; }
.navbar { min-height: 74px; }
.brand { display: flex; align-items: center; width: 238px; }
.brand-logo { display: block; width: 205px; max-height: 58px; object-fit: contain; }
.navbar-nav { gap: 20px; }
.nav-link { color: #18232c; font-size: 12px; font-weight: 600; padding: 26px 0 !important; position: relative; }
.nav-link:hover, .nav-link.active { color: var(--gold-dark); }
.nav-link.active:after { content: ""; position: absolute; bottom: 17px; left: 0; right: 0; height: 2px; background: var(--gold); }
.icon-search { background: transparent; border: 0; font-size: 18px; color: var(--ink); margin: 0 20px 0 5px; }
.btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; background: linear-gradient(135deg, #dfb647, #bf8e29); border: 0; border-radius: 28px; padding: 12px 22px; font-size: 12px; font-weight: 700; box-shadow: 0 5px 12px #bd8c291f; transition: transform .2s, box-shadow .2s; }
.btn-gold:hover, .btn-gold:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px #bd8c2940; }
.header-cta { min-width: 130px; padding: 11px 22px; }
.search-strip { display: none; border-top: 1px solid var(--line); background: #fff; }
.search-strip.open { display: block; }
.hero { min-height: 380px; position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 72% 45%, #34342f 0, #1b2021 38%, #0d1317 75%); }
.hero:after { content: ""; position: absolute; inset: auto 0 0; height: 25%; background: linear-gradient(0deg, #080d10b5, transparent); pointer-events: none; }
.hero-glow { position: absolute; width: 480px; height: 400px; right: 14%; top: -120px; background: #d3a43714; filter: blur(40px); border-radius: 50%; }
.hero-inner { display: grid; grid-template-columns: 43% 57%; align-items: center; min-height: 380px; position: relative; z-index: 1; }
.hero-copy { padding: 40px 0; max-width: 510px; }
.eyebrow { color: #c18d20; font-size: 10px; font-weight: 700; letter-spacing: .7px; margin: 0 0 7px; }
.gold-text { color: #f2c342; }
.hero h1 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.13; letter-spacing: -1.6px; font-weight: 800; margin: 0 0 12px; }
.hero h1 span, .promo-banner h2 span { display: block; color: #e9b83e; }
.hero-description { color: #f1f2f3; font-size: 14px; max-width: 400px; margin-bottom: 18px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.how-link { color: #fff; display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; }
.play-icon { border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; width: 28px; height: 28px; font-size: 16px; }
.hero-trust { color: #c8cdd1; font-size: 10px; margin-top: 26px; display: flex; gap: 8px; align-items: center; }
.hero-trust i { color: #e9b83e; font-size: 14px; }
.hero-trust span { height: 3px; width: 3px; border-radius: 50%; background: #9ca3a8; margin: 0 4px; }
.hero-visual { min-height: 350px; position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; padding-top: 12px; }
.hero-phone { overflow: hidden; border-radius: 22px; border: 3px solid #858783; background: #15191b; box-shadow: 0 20px 45px #0009; width: 25%; height: 220px; transform: perspective(800px) rotateY(-5deg); }
.hero-phone img { width: 100%; height: 100%; object-fit: cover; }
.phone-iphone { height: 250px; width: 27%; border-color: #aaa; z-index: 2; }
.phone-pixel { transform: perspective(800px) rotateY(5deg); }
.brand-labels { position: absolute; bottom: 18px; left: 3%; right: 0; display: flex; justify-content: space-around; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #fff; }
.google-g { font-size: 17px; font-weight: 800; color: #4c8bf5; }
.section { padding: 28px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 14px; }
.section h2, .section-heading h2 { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -.7px; font-weight: 800; margin: 0; line-height: 1.25; }
.text-link { background: none; border: 0; color: #b78217; font-size: 11px; font-weight: 700; white-space: nowrap; padding: 8px 0; }
.text-link:hover { color: #76520d; }
.category-card { border: 1px solid #edf0f2; background: #fff; padding: 0; overflow: hidden; text-align: left; border-radius: 9px; box-shadow: 0 5px 12px #15202b08; transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #15202b12; }
.category-image { height: 120px; display: flex; justify-content: center; align-items: center; background: linear-gradient(140deg, #f3f4f5, #fff); overflow: hidden; }
.category-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.category-content { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; background: #fff; }
.category-content h3 { font-size: 16px; font-weight: 800; margin: 0 0 3px; color: #111820; }
.category-content p { font-size: 10px; margin: 0; color: #3f4b55; }
.circle-arrow { width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--gold); color: #b78217; border-radius: 50%; display: grid; place-items: center; }
.benefits-bar { background: #f7f8f9; border-top: 1px solid #f1f2f3; border-bottom: 1px solid #f1f2f3; padding: 20px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefit { display: flex; align-items: center; gap: 11px; padding: 0 18px; border-right: 1px solid #e2e5e8; }
.benefit:first-child { padding-left: 0; }
.benefit:last-child { border-right: 0; }
.benefit-icon, .why-item > span { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; background: #f9f4e7; color: #a77716; font-size: 23px; }
.benefit strong, .why-item strong { display: block; font-size: 10px; font-weight: 800; }
.benefit small, .why-item small { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.how-section { padding: 28px 0 30px; border-bottom: 1px solid #edf0f2; }
.how-layout { display: grid; grid-template-columns: 29% 71%; gap: 20px; align-items: center; }
.how-intro p:not(.eyebrow) { font-size: 11px; color: #2e3943; margin: 10px 0 15px; max-width: 280px; }
.steps { display: flex; justify-content: space-between; align-items: center; gap: 9px; }
.step { position: relative; text-align: center; width: 22%; }
.step-number { position: absolute; z-index: 2; top: -5px; left: calc(50% - 42px); width: 24px; height: 24px; display: grid; place-items: center; background: var(--gold); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 800; }
.step-icon { width: 76px; height: 76px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f2f3f4, #fff); color: #101820; font-size: 29px; }
.step h3 { font-size: 11px; font-weight: 800; margin: 0 0 4px; }
.step p { color: #59636d; font-size: 10px; line-height: 1.45; max-width: 130px; margin: auto; }
.step-arrow { color: #7a8790; font-size: 12px; margin-top: -28px; }
.auctions-section { padding: 22px 0 25px; }
.auction-card { border: 1px solid #e8ebee; border-radius: 9px; overflow: hidden; background: #fff; height: 100%; box-shadow: 0 5px 12px #15202b08; }
.auction-photo { position: relative; height: 125px; background: #f1f3f4; overflow: hidden; display: flex; justify-content: center; }
.auction-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.timer-badge { position: absolute; top: 8px; right: 7px; z-index: 1; color: #fff; background: #111b20; border-radius: 12px; padding: 3px 8px; font-size: 8px; font-weight: 700; }
.auction-info { padding: 10px; }
.auction-info h3 { font-size: 11px; font-weight: 800; min-height: 18px; margin: 0 0 6px; }
.auction-info p { font-size: 10px; margin: 0 0 10px; }
.auction-info p strong { color: #b57d0e; }
.auction-info .btn { font-size: 9px; padding: 8px 10px; }
.demo-note { margin: 12px 0 0; color: #7a838b; font-size: 10px; }
.no-results { padding: 20px; text-align: center; color: var(--muted); }
.promo-banner { background: radial-gradient(ellipse at 62% 50%, #152f48 0, #0b1720 48%, #071017 100%); color: #fff; overflow: hidden; }
.promo-inner { min-height: 160px; position: relative; display: flex; align-items: center; justify-content: space-between; }
.promo-banner h2 { font-size: clamp(21px, 2.2vw, 29px); line-height: 1.2; font-weight: 800; letter-spacing: -.5px; margin: 0 0 8px; }
.promo-banner h2 span { display: inline; }
.promo-banner p:not(.eyebrow) { font-size: 11px; color: #d6dce1; margin: 0; }
.promo-phone { position: absolute; left: 48%; top: -35px; width: 210px; height: 235px; transform: rotate(13deg); opacity: .72; }
.promo-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; mix-blend-mode: screen; }
.promo-cta { position: relative; z-index: 2; }
.about-section { padding: 25px 0 28px; background: linear-gradient(100deg, #fff 50%, #fafbfc 50%); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 45px; }
.about-grid h2 { font-size: 17px; margin-bottom: 15px; letter-spacing: -.3px; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; }
.why-item { display: flex; align-items: center; gap: 10px; }
.why-item > span { width: 38px; height: 38px; flex-basis: 38px; font-size: 18px; }
.testimonial-card { position: relative; border: 1px solid #edf0f2; border-radius: 9px; background: #fff; padding: 15px 16px 12px 38px; box-shadow: 0 5px 20px #15202b05; }
.quote-mark { position: absolute; top: 6px; left: 13px; color: var(--gold); font-size: 30px; font-weight: 800; }
.testimonial-card > p { color: #69737c; font-size: 10px; line-height: 1.55; margin: 0 0 12px; }
.customer { display: flex; align-items: center; gap: 9px; }
.avatar { display: grid; place-items: center; background: #e9edf0; border-radius: 50%; width: 33px; height: 33px; color: #27333d; font-size: 10px; font-weight: 800; }
.customer strong, .customer small { display: block; font-size: 10px; }
.customer small { color: #77818a; font-size: 9px; }
.testimonial-controls { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 9px; }
.testimonial-controls > span { width: 5px; height: 5px; border-radius: 50%; background: #d9dde1; }
.testimonial-controls .active-dot { background: var(--gold); }
.testimonial-controls button { background: transparent; border: 0; color: #89939b; font-size: 10px; }
.sample-note { display: block; margin-top: 5px; color: #929ba2; font-size: 9px; }
.site-footer { background: #101b23; color: #fff; }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 78px; }
.footer-brand img { display: block; width: 180px; max-height: 52px; object-fit: contain; }
.footer-nav { display: flex; align-items: center; gap: 20px; }
.footer-nav a { color: #e1e5e8; font-size: 10px; }
.footer-nav a:hover { color: #e9b83e; }
.social-links { display: flex; gap: 13px; }
.social-links a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #1c2932; color: #fff; font-size: 12px; }
.social-links a:hover { background: var(--gold-dark); }
.footer-bottom { border-top: 1px solid #2a343b; padding-top: 11px; padding-bottom: 11px; display: flex; justify-content: space-between; color: #b7c0c6; font-size: 9px; }
.footer-bottom span:last-child { color: #d7ad4d; }
.back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--gold); color: #fff; box-shadow: 0 5px 16px #0002; display: none; }
.back-to-top.visible { display: grid; place-items: center; }
.product-modal { border: 0; border-radius: 14px; }
.product-modal .modal-header, .product-modal .modal-footer { border-color: #edf0f2; }
.product-modal .modal-body { color: #4d5963; font-size: 13px; }
@media (max-width: 991px) {
  .brand { width: auto; }.brand-logo { width: 175px; }
  .navbar-nav { gap: 5px; }.nav-link { padding: 10px 0 !important; }.nav-link.active:after { bottom: 3px; right: auto; width: 28px; }
  .icon-search { margin: 10px 0; text-align: left; }
  .hero-inner { grid-template-columns: 1fr 1fr; }.hero-visual { min-height: 300px; }.hero-phone { height: 185px; }.phone-iphone { height: 215px; }
  .benefit { padding: 0 10px; }.benefit-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; }
  .how-layout { grid-template-columns: 1fr; }.how-intro p:not(.eyebrow) { max-width: 520px; }
  .about-grid { gap: 25px; }.footer-nav { gap: 12px; }
}
@media (max-width: 767px) {
  .navbar { min-height: 65px; }.brand-logo { width: 165px; }.header-cta { margin: 5px 0 12px; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 12px; }.hero-copy { padding: 32px 0 12px; }.hero h1 { font-size: 37px; }
  .hero-visual { min-height: 245px; padding: 8px 8px 30px; gap: 10px; }.hero-phone { height: 160px; width: 26%; border-radius: 15px; }.phone-iphone { height: 185px; width: 28%; }.brand-labels { bottom: 5px; font-size: 10px; }
  .section { padding: 25px 0; }.section-heading { align-items: start; }.section-heading h2 { font-size: 22px; }.text-link { font-size: 10px; }
  .category-image { height: 100px; }.category-content { padding: 11px; }.category-content h3 { font-size: 13px; }.category-content p { font-size: 9px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; row-gap: 18px; }.benefit { border: 0; padding: 0 6px; }.benefit:first-child { padding-left: 6px; }.benefit strong { font-size: 10px; }
  .steps { flex-wrap: wrap; row-gap: 22px; }.step { width: 43%; }.step-arrow { display: none; }.step-icon { width: 65px; height: 65px; }
  .auction-photo { height: 110px; }.auction-info { padding: 8px; }.auction-info h3 { font-size: 10px; min-height: 30px; }.timer-badge { font-size: 7px; }
  .promo-inner { min-height: 190px; padding-top: 24px; padding-bottom: 24px; align-items: flex-start; flex-direction: column; gap: 14px; }.promo-phone { left: auto; right: 12%; top: 2px; width: 115px; height: 175px; opacity: .35; }.promo-banner h2 { font-size: 24px; }.promo-cta { padding: 10px 17px; }
  .about-section { background: #fff; }.about-grid { grid-template-columns: 1fr; gap: 28px; }.about-grid h2 { font-size: 18px; }
  .footer-main { padding-top: 22px; padding-bottom: 20px; flex-wrap: wrap; }.footer-brand { width: 100%; }.footer-nav { flex-wrap: wrap; justify-content: flex-start; }.footer-bottom { gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 32px; }.hero-description { font-size: 13px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 3px; }
  .category-content { align-items: flex-start; }.circle-arrow { width: 26px; height: 26px; flex-basis: 26px; }
  .benefit { align-items: flex-start; gap: 8px; }.benefit-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 17px; }
  .footer-nav { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }