/* ============================================================
   TOKO MATERIAL BANGUNAN — style.css v2
   Refined Industrial-Futuristic | DM Sans + Bebas Neue
   © 2025 — Custom structure, not a template
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* Brand palette */
  --amber:      #F59E0B;
  --amber-d:    #D97706;
  --amber-xd:   #B45309;
  --amber-pale: #FEF3C7;
  --ink:        #0C0A09;
  --ink-2:      #1C1917;
  --ink-3:      #292524;
  --stone:      #57534E;
  --stone-l:    #A8A29E;
  --fog:        #F5F5F4;
  --white:      #FFFFFF;
  --green:      #16A34A;
  --wa:         #25D366;

  /* Typography */
  --fh: 'Bebas Neue', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'DM Mono', monospace;

  /* Layout */
  --nav:  72px;
  --cont: 1240px;
  --r:    12px;
  --r-lg: 20px;

  /* Motion */
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);

  --vh: 1vh;
}

html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--fb);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }

/* ── CONTAINER ── */
.x-wrap {
  width:100%;
  max-width: var(--cont);
  margin:0 auto;
  padding:0 24px;
}

/* ── SCROLL PROGRESS ── */
.x-prog-bar {
  position:fixed; top:0; left:0;
  height:2px; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-d));
  z-index:9999;
  transition: width .1s linear;
}

/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */
.x-loader {
  position:fixed; inset:0;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.x-loader-inner { text-align:center; }
.x-loader-logo { margin-bottom:28px; animation: xLoaderPulse 1.4s ease-in-out infinite; }
@keyframes xLoaderPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.92)} }
.x-loader-track {
  width:200px; height:2px;
  background: rgba(255,255,255,.1);
  border-radius:99px; overflow:hidden;
  margin:0 auto 14px;
}
.x-loader-fill {
  height:100%;
  background: var(--amber);
  border-radius:99px;
  animation: xFillBar 1.1s var(--ease) forwards;
}
@keyframes xFillBar { from{width:0%} to{width:100%} }
.x-loader-txt {
  color: rgba(255,255,255,.4);
  font-size:12px;
  font-family: var(--fm);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ══════════════════════════════════════════
   WA FLOAT
══════════════════════════════════════════ */
.x-wafloat {
  position:fixed; bottom:24px; right:24px;
  background: var(--wa);
  color: var(--white);
  border-radius:50px;
  padding:13px 20px;
  display:flex; align-items:center; gap:8px;
  box-shadow: 0 8px 28px rgba(37,211,102,.4);
  z-index:999;
  font-weight:600; font-size:14px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.x-wafloat:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(37,211,102,.5);
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.x-nav {
  position:fixed; top:0; left:0; right:0;
  height: var(--nav);
  background: transparent;
  z-index:100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.x-nav-scrolled {
  background: rgba(12,10,9,.93);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.x-nav-inner {
  display:flex; align-items:center; gap:20px; height:100%;
}
.x-nav-logo {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.x-nav-brand { display:flex; flex-direction:column; line-height:1.1; }
.x-brand-main {
  font-family: var(--fh);
  font-size:18px; letter-spacing:.06em;
  color: var(--amber);
}
.x-brand-sub {
  font-size:9px; color:rgba(255,255,255,.45);
  letter-spacing:.1em; text-transform:uppercase;
  font-family: var(--fm);
}
.x-nav-links {
  display:flex; align-items:center; gap:2px; margin-left:auto;
}
.x-nav-links a {
  color:rgba(255,255,255,.7);
  font-size:13.5px; font-weight:500;
  padding:6px 13px; border-radius:6px;
  transition: color .2s, background .2s;
}
.x-nav-links a:hover { color:var(--white); background:rgba(255,255,255,.07); }
.x-nav-cta {
  display:flex; align-items:center; gap:7px;
  background: var(--amber);
  color: var(--ink);
  font-weight:700; font-size:13px;
  padding:9px 18px; border-radius:6px;
  white-space:nowrap; flex-shrink:0;
  transition: background .2s, transform .2s;
}
.x-nav-cta:hover { background: var(--amber-d); transform:translateY(-1px); }

.x-hamburger {
  display:none;
  background:none; border:none;
  flex-direction:column; gap:5px;
  padding:8px; margin-left:auto;
}
.x-hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--white); border-radius:2px;
  transition: all .25s ease;
}

/* ══════════════════════════════════════════
   MOBILE MENU
══════════════════════════════════════════ */
.x-mmenu {
  position:fixed; top:0; right:-300px;
  width:280px; max-width:85vw; height:100dvh;
  background: var(--ink-2);
  z-index:200;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.x-mmenu.x-open { right:0; }
.x-moverlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  z-index:199;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.x-moverlay.x-open { opacity:1; pointer-events:auto; }
.x-mmenu-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.x-mmenu-logo {
  display:flex; align-items:center; gap:8px;
  color:var(--white); font-weight:700;
  font-family:var(--fh); font-size:18px; letter-spacing:.06em;
}
.x-mmenu-close {
  background:rgba(255,255,255,.07); border:none;
  color:var(--white); width:32px; height:32px; border-radius:50%;
  font-size:14px; transition:background .2s;
}
.x-mmenu-close:hover { background:var(--amber); color:var(--ink); }
.x-mnav { display:flex; flex-direction:column; padding:12px 0; flex:1; }
.x-mnav-a {
  color:rgba(255,255,255,.7);
  padding:14px 24px;
  font-size:15px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition: color .2s, padding-left .2s;
}
.x-mnav-a:hover { color:var(--amber); padding-left:30px; }
.x-mwa {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--wa); color:var(--white);
  font-weight:700; font-size:14px;
  padding:15px 24px; margin:16px 20px;
  border-radius: var(--r);
  transition: background .2s;
}
.x-mwa:hover { background:#1ebe5d; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.x-hero {
  position:relative;
  min-height: 100dvh;
  min-height: calc(var(--vh,1vh)*100);
  display:flex; align-items:center;
  overflow:hidden;
}

/* background slides */
.x-hero-bg { position:absolute; inset:0; z-index:0; }
.x-hbg-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.x-hbg-slide.active { opacity:1; }

/* Layered overlays — no particle clutter */
.x-hero-veil {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    105deg,
    rgba(12,10,9,.88) 0%,
    rgba(12,10,9,.72) 50%,
    rgba(12,10,9,.45) 100%
  );
}
/* Subtle architectural grid */
.x-hero-grid {
  position:absolute; inset:0; z-index:2;
  background-image:
    linear-gradient(rgba(245,158,11,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,.04) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.6) 70%, transparent 100%);
}

/* Content */
.x-hero-inner {
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:1fr 400px;
  gap:64px;
  align-items:center;
  padding-top:calc(var(--nav) + 48px);
  padding-bottom:80px;
}

/* ── Left ── */
.x-hero-left {}

.x-hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  color:var(--amber);
  font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:50px;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:24px;
  font-family:var(--fm);
}
.x-eye-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  animation: xPulse 2s ease-in-out infinite;
}
@keyframes xPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.x-eye-check { margin-left:2px; }

.x-hero-h1 {
  font-family:var(--fh);
  line-height:.95;
  margin-bottom:20px;
  display:flex; flex-direction:column; gap:2px;
}
.x-h1-line {
  display:block;
  font-size: clamp(52px, 7vw, 92px);
  color:var(--white);
  letter-spacing:.02em;
}
.x-h1-accent {
  color:var(--amber);
  -webkit-text-stroke:1px var(--amber-d);
}
.x-h1-light { color:rgba(255,255,255,.45); }

.x-hero-desc {
  color:rgba(255,255,255,.65);
  font-size:16px;
  max-width:520px;
  margin-bottom:32px;
  line-height:1.7;
}
.x-hero-desc strong { color:rgba(255,255,255,.9); font-weight:600; }

/* Actions */
.x-hero-actions { display:flex; align-items:center; gap:14px; margin-bottom:44px; flex-wrap:wrap; }

.x-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--amber);
  color:var(--ink);
  font-weight:700; font-size:14px;
  padding:13px 24px; border-radius: var(--r);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.x-btn-primary:hover {
  background:var(--amber-d);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(245,158,11,.35);
}
.x-btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.75);
  font-weight:600; font-size:14px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
  transition: color .2s, border-color .2s;
}
.x-btn-ghost:hover { color:var(--white); border-color:var(--amber); }
.x-btn-ghost span { transition:transform .2s; }
.x-btn-ghost:hover span { transform:translateX(4px); }

/* Stats */
.x-hero-stats {
  display:flex; align-items:center; gap:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  overflow:hidden;
}
.x-stat {
  display:flex; flex-direction:column; align-items:center;
  padding:14px 20px;
  flex:1;
}
.x-stat-n {
  font-family:var(--fh);
  font-size:28px;
  color:var(--amber);
  line-height:1;
}
.x-stat-s { font-size:12px; color:var(--amber-d); font-weight:700; margin-top:-2px; }
.x-stat-l { font-size:11px; color:rgba(255,255,255,.5); margin-top:3px; font-family:var(--fm); letter-spacing:.04em; }
.x-stat-div {
  width:1px; height:40px; align-self:center;
  background:rgba(255,255,255,.1);
}

/* ── Right ── */
.x-hcards { display:flex; flex-direction:column; gap:10px; }
.x-hcard {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  padding:16px 18px;
  backdrop-filter: blur(12px);
  transition: background .2s, border-color .2s, transform .2s;
  cursor:default;
}
.x-hcard:hover {
  background:rgba(245,158,11,.1);
  border-color:rgba(245,158,11,.3);
  transform:translateX(4px);
}
.x-hcard-ico {
  width:40px; height:40px; border-radius:8px;
  background:rgba(245,158,11,.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--amber); flex-shrink:0;
}
.x-hcard-info { flex:1; }
.x-hcard-info strong { display:block; color:var(--white); font-size:14px; font-weight:600; }
.x-hcard-info span { font-size:12px; color:rgba(255,255,255,.45); }
.x-hcard-arrow { color:rgba(255,255,255,.3); font-size:16px; }
.x-hcard:hover .x-hcard-arrow { color:var(--amber); }

.x-hdelivery {
  display:flex; align-items:center; gap:10px;
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.3);
  border-radius: var(--r);
  padding:12px 18px;
  color:rgba(255,255,255,.8);
  font-size:13px; font-weight:600;
}
.x-hdelivery svg { color:#4ade80; flex-shrink:0; }

/* Slide dots */
.x-hdots {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:4;
}
.x-hdot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none;
  transition: background .3s, width .3s;
}
.x-hdot.active { background:var(--amber); width:20px; border-radius:3px; }

/* ══════════════════════════════════════════
   TICKER
══════════════════════════════════════════ */
.x-ticker {
  background:var(--amber);
  overflow:hidden;
  padding:10px 0;
  border-top:1px solid var(--amber-d);
}
.x-ticker-track {
  display:flex; align-items:center; gap:24px;
  white-space:nowrap;
  animation: xTicker 28s linear infinite;
  width:max-content;
}
@keyframes xTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.x-ticker-track span {
  font-family:var(--fh);
  font-size:14px; letter-spacing:.08em;
  color:var(--ink);
}
.x-tick-dot { font-size:8px; color:var(--amber-xd); }

/* ══════════════════════════════════════════
   SECTIONS — BASE
══════════════════════════════════════════ */
.x-sec { padding:96px 0; }
.x-sec-dark { background:var(--ink-2); }
.x-sec-amber { background:var(--amber); }

.x-sec-head { text-align:center; margin-bottom:56px; max-width:640px; margin-left:auto; margin-right:auto; }
.x-sec-tag {
  display:inline-block;
  font-family:var(--fm);
  font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber);
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.25);
  padding:5px 14px; border-radius:50px;
  margin-bottom:16px;
}
.x-tag-light { color:var(--ink); background:rgba(12,10,9,.12); border-color:rgba(12,10,9,.2); }
.x-sec-h2 {
  font-family:var(--fh);
  font-size:clamp(36px,5vw,62px);
  line-height:.95;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:14px;
}
.x-sec-h2 em { font-style:normal; color:var(--amber); }
.x-h2-light { color:var(--white); }
.x-h2-light em { color:var(--amber); }
.x-sec-desc { color:var(--stone); font-size:16px; line-height:1.7; }

/* ══════════════════════════════════════════
   PRODUCTS
══════════════════════════════════════════ */
.x-ptabs {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-bottom:40px; justify-content:center;
}
.x-ptab {
  background:var(--fog); border:1px solid #E7E5E4;
  color:var(--stone); font-size:13px; font-weight:600;
  padding:8px 18px; border-radius:6px;
  transition: all .2s;
}
.x-ptab.active,
.x-ptab:hover {
  background:var(--amber);
  color:var(--ink);
  border-color:var(--amber-d);
}

.x-pgrid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.x-pcard {
  background:var(--white);
  border:1px solid #E7E5E4;
  border-radius: var(--r-lg);
  overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.x-pcard:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.1);
  border-color:var(--amber);
}
.x-pimg { position:relative; overflow:hidden; aspect-ratio:4/3; }
.x-pimg img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease);
}
.x-pcard:hover .x-pimg img { transform:scale(1.05); }
.x-pbadge {
  position:absolute; top:12px; left:12px;
  background:var(--amber); color:var(--ink);
  font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:4px;
  font-family:var(--fm); letter-spacing:.06em; text-transform:uppercase;
}
.x-pbadge-2 { background:var(--ink); color:var(--white); }
.x-pbody { padding:18px; }
.x-pcat {
  font-family:var(--fm);
  font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--amber-d); font-weight:500;
  display:block; margin-bottom:6px;
}
.x-pbody h3 {
  font-size:16px; font-weight:700;
  color:var(--ink); margin-bottom:6px; line-height:1.3;
}
.x-pbody p { font-size:13px; color:var(--stone); line-height:1.6; margin-bottom:14px; }
.x-pfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.x-pprice { font-size:12px; color:var(--stone); font-weight:600; }
.x-pbtn {
  display:inline-flex;
  background:var(--amber);
  color:var(--ink);
  font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:6px;
  transition: background .2s;
  white-space:nowrap;
}
.x-pbtn:hover { background:var(--amber-d); }

.x-pcta {
  text-align:center; margin-top:48px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.x-pcta p { color:var(--stone); font-size:15px; }
.x-pcta strong { color:var(--ink); }

/* ══════════════════════════════════════════
   KEUNGGULAN
══════════════════════════════════════════ */
.x-fgrid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  overflow:hidden;
}
.x-fcard {
  position:relative;
  background:rgba(255,255,255,.03);
  padding:36px 28px;
  transition: background .25s;
  overflow:hidden;
}
.x-fcard::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0;
  transition: opacity .3s;
}
.x-fcard:hover { background:rgba(245,158,11,.06); }
.x-fcard:hover::before { opacity:1; }
.x-fcard-num {
  font-family:var(--fm);
  font-size:11px; color:rgba(255,255,255,.2);
  letter-spacing:.1em;
  margin-bottom:16px;
}
.x-fcard-ico {
  width:52px; height:52px; border-radius: var(--r);
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--amber);
  margin-bottom:16px;
}
.x-fcard h3 {
  font-size:17px; font-weight:700;
  color:var(--white); margin-bottom:8px; line-height:1.3;
}
.x-fcard p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.7; }

/* ══════════════════════════════════════════
   LAYANAN
══════════════════════════════════════════ */
.x-lgrid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.x-lcard {
  position:relative; border-radius: var(--r-lg);
  overflow:hidden; height:360px;
}
.x-lcard img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.x-lcard:hover img { transform:scale(1.07); }
.x-loverlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,10,9,.94) 0%, rgba(12,10,9,.5) 60%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px;
  transition: background .3s;
}
.x-lic {
  width:48px; height:48px; border-radius: var(--r);
  background:rgba(245,158,11,.2);
  border:1px solid rgba(245,158,11,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--amber); margin-bottom:12px;
}
.x-loverlay h3 { color:var(--white); font-size:20px; font-weight:700; margin-bottom:8px; }
.x-loverlay p { color:rgba(255,255,255,.65); font-size:13.5px; line-height:1.6; margin-bottom:16px; }
.x-lbtn {
  display:inline-flex;
  color:var(--amber); font-size:13px; font-weight:700;
  border-bottom:1px solid rgba(245,158,11,.4);
  padding-bottom:2px;
  transition: color .2s, border-color .2s;
}
.x-lbtn:hover { color:var(--white); border-color:rgba(255,255,255,.4); }

/* ══════════════════════════════════════════
   HOW TO ORDER
══════════════════════════════════════════ */
.x-steps {
  display:flex; align-items:flex-start; gap:0;
  position:relative;
}
.x-step {
  flex:1;
  text-align:center;
  padding:32px 20px;
  background:rgba(12,10,9,.1);
  border-radius: var(--r-lg);
  transition: background .2s, transform .2s;
}
.x-step:hover { background:rgba(12,10,9,.18); transform:translateY(-4px); }
.x-step-n {
  font-family:var(--fm);
  font-size:11px; color:rgba(12,10,9,.4);
  letter-spacing:.1em; margin-bottom:14px;
}
.x-step-ico {
  width:64px; height:64px; border-radius:50%;
  background:rgba(12,10,9,.12);
  border:1.5px solid rgba(12,10,9,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  margin:0 auto 14px;
}
.x-step h3 { font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.x-step p { font-size:13.5px; color:rgba(12,10,9,.65); line-height:1.65; }
.x-step-arr {
  font-size:24px; color:rgba(12,10,9,.35);
  align-self:center; flex-shrink:0;
  padding:0 8px;
}
.x-steps-cta { text-align:center; margin-top:40px; }
.x-btn-white {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--white);
  font-weight:700; font-size:15px;
  padding:14px 32px; border-radius: var(--r);
  transition: background .2s, transform .2s;
}
.x-btn-white:hover { background:var(--ink-3); transform:translateY(-2px); }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.x-tcard {
  background:var(--white);
  border:1px solid #E7E5E4;
  border-radius: var(--r-lg);
  padding:28px;
  height:100%;
  transition: border-color .2s, box-shadow .2s;
}
.x-tcard:hover { border-color:var(--amber); box-shadow:0 8px 32px rgba(245,158,11,.12); }
.x-tstars {
  color:var(--amber); font-size:15px;
  letter-spacing:2px; margin-bottom:14px;
}
.x-tcard p {
  font-size:14px; color:var(--stone);
  line-height:1.7; margin-bottom:20px;
  font-style:italic;
}
.x-tauthor { display:flex; align-items:center; gap:12px; }
.x-tavatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--amber);
  color:var(--ink); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); letter-spacing:.04em;
  flex-shrink:0;
}
.x-tauthor strong { display:block; font-size:14px; color:var(--ink); }
.x-tauthor span { font-size:12px; color:var(--stone-l); }

/* ══════════════════════════════════════════
   BRANDS
══════════════════════════════════════════ */
.x-brands { background:var(--fog); padding:44px 0; }
.x-brands-label {
  text-align:center;
  font-family:var(--fm);
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--stone); margin-bottom:20px;
}
.x-brands-row {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
}
.x-brands-row span {
  background:var(--white);
  border:1px solid #E7E5E4;
  border-radius: var(--r);
  padding:10px 22px;
  font-family:var(--fh);
  font-size:15px; font-weight:400; letter-spacing:.08em;
  color:var(--stone);
  transition: border-color .2s, color .2s, transform .2s;
  cursor:default;
}
.x-brands-row span:hover { border-color:var(--amber); color:var(--amber-xd); transform:translateY(-2px); }

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.x-faq-list { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.x-faq-item {
  background:var(--white); border:1px solid #E7E5E4;
  border-radius: var(--r); overflow:hidden;
  transition: border-color .2s;
}
.x-faq-item.x-open { border-color:rgba(245,158,11,.4); }
.x-faq-q {
  width:100%; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; gap:12px;
  font-size:15px; font-weight:600; color:var(--ink);
  text-align:left; transition: color .2s;
}
.x-faq-q:hover { color:var(--amber-d); }
.x-faq-item.x-open .x-faq-q { color:var(--amber-d); }
.x-faq-arr { color:var(--amber); font-size:20px; flex-shrink:0; line-height:1; font-weight:400; }
.x-faq-a {
  max-height:0; overflow:hidden;
  transition: max-height .35s var(--ease), padding .3s;
}
.x-faq-item.x-open .x-faq-a { max-height:200px; }
.x-faq-a p { padding:0 22px 18px; font-size:14px; color:var(--stone); line-height:1.75; }

/* ══════════════════════════════════════════
   CTA
══════════════════════════════════════════ */
.x-cta-sec { position:relative; overflow:hidden; padding:100px 0; }
.x-cta-bg {
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}
.x-cta-bg::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(12,10,9,.94), rgba(180,83,9,.8));
}
.x-cta-inner {
  position:relative; z-index:1;
  text-align:center; max-width:660px; margin:0 auto;
}
.x-cta-tag {
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);
  font-family:var(--fm);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 16px; border-radius:50px;
  margin-bottom:20px;
}
.x-cta-h2 {
  font-family:var(--fh);
  font-size:clamp(40px,6vw,72px);
  line-height:.95; letter-spacing:.02em;
  color:var(--white); margin-bottom:16px;
}
.x-cta-inner > p { color:rgba(255,255,255,.7); font-size:17px; margin-bottom:36px; line-height:1.65; }
.x-cta-actions { display:flex; flex-direction:column; align-items:center; gap:20px; }
.x-btn-lg { padding:15px 32px; font-size:16px; }
.x-cta-info {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.6); font-size:14px; font-weight:500;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.x-footer { background:var(--ink); padding:72px 0 0; }
.x-footer-inner {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:48px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.x-footer-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.x-footer-brand p {
  color:rgba(255,255,255,.45); font-size:13px; line-height:1.7; margin-bottom:20px;
}
.x-footer-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wa); color:var(--white);
  font-weight:700; font-size:13px;
  padding:9px 18px; border-radius: var(--r);
  transition: background .2s;
}
.x-footer-wa:hover { background:#1ebe5d; }
.x-footer-col h4 {
  font-family:var(--fh); font-size:15px; letter-spacing:.06em;
  color:var(--white); margin-bottom:16px;
}
.x-footer-col ul { display:flex; flex-direction:column; gap:10px; }
.x-footer-col ul li a {
  color:rgba(255,255,255,.45); font-size:13px;
  transition: color .2s, padding-left .2s;
}
.x-footer-col ul li a:hover { color:var(--amber); padding-left:4px; }
.x-footer-contacts { display:flex; flex-direction:column; gap:14px; }
.x-footer-contacts div {
  display:flex; align-items:flex-start; gap:10px;
  color:rgba(255,255,255,.45); font-size:13px; line-height:1.5;
}
.x-footer-bottom {
  background:rgba(0,0,0,.25); padding:18px 0;
}
.x-footer-bottom p { color:rgba(255,255,255,.25); font-size:12px; text-align:center; font-family:var(--fm); }

/* ══════════════════════════════════════════
   SWIPER OVERRIDES
══════════════════════════════════════════ */
.swiper-pagination-bullet { background:#D4D4D0; opacity:1; }
.swiper-pagination-bullet-active { background:var(--amber) !important; }

/* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
.x-reveal {
  opacity:0; transform:translateY(24px);
  transition:
    opacity .6s var(--ease),
    transform .6s var(--ease);
}
.x-d1 { transition-delay:.05s; }
.x-d2 { transition-delay:.15s; }
.x-d3 { transition-delay:.25s; }
.x-d4 { transition-delay:.35s; }
.x-revealed { opacity:1; transform:translateY(0); }

@keyframes xFadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1024px
══════════════════════════════════════════ */
@media (max-width:1024px) {
  .x-nav-links { display:none; }
  .x-nav-cta { display:none; }
  .x-hamburger { display:flex; }

  .x-hero-inner { grid-template-columns:1fr; gap:0; text-align:center; }
  .x-hero-right { display:none; }
  .x-hero-eyebrow { justify-content:center; }
  .x-hero-desc { margin:0 auto 32px; }
  .x-hero-actions { justify-content:center; }
  .x-hero-stats { max-width:480px; margin:0 auto; }

  .x-pgrid { grid-template-columns:repeat(2,1fr); }
  .x-fgrid { grid-template-columns:repeat(2,1fr); }
  .x-lgrid { grid-template-columns:1fr; }
  .x-lcard { height:320px; }
  .x-steps { flex-direction:column; gap:4px; }
  .x-step-arr { transform:rotate(90deg); align-self:center; }
  .x-footer-inner { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 640px
══════════════════════════════════════════ */
@media (max-width:640px) {
  :root { --nav:64px; }
  .x-sec { padding:64px 0; }

  .x-hero {
    min-height:100dvh;
    min-height:calc(var(--vh,1vh)*100);
    align-items:flex-start;
    padding-top:calc(var(--nav) + 20px);
  }
  .x-hero-inner { padding-bottom:64px; padding-top:0; }
  .x-h1-line { font-size:clamp(44px,10vw,62px); }
  .x-hero-actions { flex-direction:column; align-items:stretch; }
  .x-btn-ghost { align-self:center; }
  .x-hero-stats {
    flex-wrap:wrap; border-radius: var(--r);
  }
  .x-stat { padding:12px 14px; min-width:calc(50% - 0.5px); }

  .x-pgrid { grid-template-columns:1fr; }
  .x-fgrid { grid-template-columns:1fr; }
  .x-steps { gap:8px; }
  .x-step-arr { display:none; }
  .x-footer-inner { grid-template-columns:1fr; gap:32px; }

  .x-wafloat span { display:none; }
  .x-wafloat { padding:14px; border-radius:50%; }

  .x-cta-sec { padding:72px 0; }
  .x-btn-lg { width:100%; justify-content:center; }
}