:root{
  --uc-bg:#f4f3ef;
  --uc-surface:#ffffff;
  --uc-surface-soft:#ecebe6;
  --uc-ink:#111214;
  --uc-muted:#6d6f73;
  --uc-line:rgba(17,18,20,.12);
  --uc-red:#e33a34;
  --uc-red-deep:#c92f2a;
  --uc-dark:#0d0f12;
  --uc-dark-soft:#171a1f;
  --uc-max:1280px;
  --uc-radius:24px;
  --uc-shadow:0 22px 70px rgba(18,20,24,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--uc-bg);
  color:var(--uc-ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.menuOpen{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%}

.homeShell{overflow:hidden}
.homeContainer{
  width:min(calc(100% - 48px),var(--uc-max));
  margin-inline:auto;
}

/* ---------- shared section language ---------- */
.homeSection{padding:112px 0}
.sectionHead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:40px;
  margin-bottom:42px;
}
.sectionKicker,
.heroKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  color:var(--uc-red);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.sectionKicker::before,
.heroKicker::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:currentColor;
}
.sectionHead h2{
  margin:0;
  max-width:840px;
  font-size:clamp(38px,4.7vw,68px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:800;
}
.sectionLead{
  max-width:660px;
  margin:19px 0 0;
  color:var(--uc-muted);
  font-size:15px;
  line-height:1.7;
}
.textLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid currentColor;
  color:var(--uc-ink);
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
  transition:color .2s ease,gap .2s ease;
}
.textLink:hover{color:var(--uc-red);gap:14px}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:58px 0 30px;
  background:
    linear-gradient(rgba(17,18,20,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.03) 1px,transparent 1px),
    var(--uc-bg);
  background-size:48px 48px;
}
.hero::before{
  content:"";
  position:absolute;
  width:720px;
  height:720px;
  left:-330px;
  top:-330px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,58,52,.12),rgba(227,58,52,0) 68%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-260px;
  top:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(17,18,20,.055),rgba(17,18,20,0) 70%);
  pointer-events:none;
}
.heroGrid{
  position:relative;
  z-index:1;
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
  align-items:center;
  gap:64px;
}
.heroCopy{
  position:relative;
  z-index:2;
  padding:20px 0 28px;
}
.heroBrandLogo{
  width:min(188px,48vw);
  height:auto;
  display:block;
  margin:0 0 30px;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.11));
}
.hero h1{
  margin:0;
  max-width:610px;
  font-size:clamp(52px,5.7vw,80px);
  line-height:.92;
  letter-spacing:-.064em;
  font-weight:850;
}
.hero h1 .heroAccent{color:var(--uc-red)}
.heroText{
  max-width:570px;
  margin:24px 0 0;
  color:#5a5d62;
  font-size:15px;
  line-height:1.72;
}
.heroActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}
.primaryButton,
.secondaryButton{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.primaryButton{
  background:var(--uc-ink);
  color:#fff;
  box-shadow:0 14px 30px rgba(17,18,20,.13);
}
.primaryButton:hover{transform:translateY(-2px);background:#25272b;box-shadow:0 18px 36px rgba(17,18,20,.17)}
.secondaryButton{border:1px solid var(--uc-line);background:rgba(255,255,255,.58);color:var(--uc-ink)}
.secondaryButton:hover{transform:translateY(-2px);border-color:rgba(17,18,20,.28);background:#fff}

.heroFacts{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid var(--uc-line);
}
.heroFact{
  min-width:108px;
  padding-right:22px;
  margin-right:22px;
  border-right:1px solid var(--uc-line);
}
.heroFact:last-child{border-right:0;margin-right:0;padding-right:0}
.heroFact strong{display:block;font-size:19px;line-height:1;font-weight:850;letter-spacing:-.04em}
.heroFact span{display:block;margin-top:6px;color:var(--uc-muted);font-size:9px;font-weight:760;letter-spacing:.1em;text-transform:uppercase}

/* hero showcase */
.heroVisual{
  position:relative;
  min-width:0;
  padding-top:6px;
}
.heroVisualTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 4px 12px;
}
.heroVisualLabel,
.heroProductCounter{
  color:#74777c;
  font-size:9px;
  line-height:1;
  font-weight:820;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.heroProductCounter{font-variant-numeric:tabular-nums}
.heroStage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(185px,.36fr) minmax(0,.64fr);
  min-height:468px;
  overflow:hidden;
  border:1px solid rgba(17,18,20,.09);
  border-radius:30px;
  background:#fff;
  box-shadow:0 30px 85px rgba(17,18,20,.12);
  isolation:isolate;
}
.heroStageCopy{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  min-width:0;
  padding:34px 28px 32px;
  background:var(--uc-dark);
  color:#fff;
}
.heroStageCopy::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 30% 15%,rgba(227,58,52,.24),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 42%);
}
.heroStageEyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:auto;
  color:#9ea1a7;
  font-size:8px;
  font-weight:820;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.heroStageEyebrow::before{content:"";width:18px;height:1px;background:#ff6964}
.heroProductCategory{
  margin-bottom:9px;
  color:#ff6f69;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.heroProductName{
  max-width:250px;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.02;
  font-weight:820;
  letter-spacing:-.045em;
}
.heroProductPrice{margin-top:10px;color:#fff;font-size:18px;line-height:1;font-weight:900;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.heroStageText{
  max-width:240px;
  margin:14px 0 0;
  color:#aeb1b6;
  font-size:10px;
  line-height:1.6;
}
.heroProductLink{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:22px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:11px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:10px;
  font-weight:800;
  backdrop-filter:blur(8px);
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.heroProductLink:hover{background:#fff;color:#111;border-color:#fff;transform:translateY(-2px)}
.heroStageMedia{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(237,236,231,.92)),
    #ecebe6;
}
.heroStageMedia::after{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  right:-110px;
  bottom:-130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,58,52,.13),rgba(227,58,52,0) 68%);
  pointer-events:none;
}
.heroStageGrid{
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(17,18,20,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(140deg,#000 10%,transparent 92%);
}

.heroNewBadge{
  position:absolute;
  z-index:5;
  top:22px;
  left:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:31px;
  padding:0 12px 0 10px;
  border:1px solid rgba(17,18,20,.09);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(17,18,20,.08);
  color:#17181a;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.heroNewBadgeDot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--uc-red);
  box-shadow:0 0 0 4px rgba(227,58,52,.10);
}
.heroScaleMark{
  position:absolute;
  z-index:1;
  top:23px;
  right:24px;
  color:rgba(17,18,20,.10);
  font-size:58px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.08em;
}
.heroProductImage{
  position:relative;
  z-index:2;
  width:82%;
  height:82%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 28px 26px rgba(17,18,20,.16));
  transition:transform .48s cubic-bezier(.2,.7,.2,1),opacity .18s ease;
}
.heroStage:hover .heroProductImage{transform:translateY(-5px) rotate(-.45deg) scale(1.018)}

.heroSelectorMobileHint{display:none}
.heroSelector{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.heroSelectorButton{
  appearance:none;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:68px;
  padding:7px;
  border:1px solid var(--uc-line);
  border-radius:14px;
  background:rgba(255,255,255,.58);
  color:var(--uc-ink);
  text-align:left;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.heroSelectorButton:hover{transform:translateY(-2px);background:#fff;border-color:rgba(17,18,20,.22)}
.heroSelectorButton.isActive{background:#fff;border-color:rgba(17,18,20,.26);box-shadow:0 10px 26px rgba(17,18,20,.08)}
.heroSelectorThumb{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  background:#ebeae5;
}
.heroSelectorThumb img{width:100%;height:100%;display:block;object-fit:contain;padding:5px}
.heroSelectorMeta{min-width:0}
.heroSelectorCategory{
  display:block;
  overflow:hidden;
  margin-bottom:4px;
  color:var(--uc-red);
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.heroSelectorName{
  display:block;
  overflow:hidden;
  color:#24262a;
  font-size:9px;
  line-height:1.25;
  font-weight:760;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.heroSelectorIndex{color:#a1a3a7;font-size:8px;font-weight:800;font-variant-numeric:tabular-nums}
.heroSelectorButton.isActive .heroSelectorIndex{color:var(--uc-red)}

/* ---------- integrated catalog selection ---------- */
.catalogSelection{
  position:relative;
  z-index:2;
  margin-top:22px;
  padding:26px 0 54px;
  border-top:1px solid var(--uc-line);
}
.catalogHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.catalogTitle{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.catalogTitle::before{content:"";width:22px;height:2px;background:var(--uc-red)}
.catalogHint{color:var(--uc-muted);font-size:11px}

.catalogRail{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:3px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.catalogTrack{
  display:flex;
  width:max-content;
  gap:10px;
  will-change:transform;
  animation:catalogMarquee 38s linear infinite;
}
.catalogRail:hover .catalogTrack,
.catalogRail:focus-within .catalogTrack{
  animation-play-state:paused;
}
.catalogGroup{
  display:flex;
  flex:none;
  gap:10px;
}
.catalogCard{
  width:250px;
  min-width:250px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 28px;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--uc-line);
  border-radius:15px;
  background:rgba(255,255,255,.72);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.catalogCard:hover{transform:translateY(-3px);background:#fff;border-color:rgba(17,18,20,.24)}
.catalogThumb{width:72px;height:72px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:#e9e8e3}
.catalogThumb img{width:100%;height:100%;object-fit:contain;padding:7px}
.catalogMeta{min-width:0}
.catalogCategory{display:block;overflow:hidden;margin-bottom:5px;color:var(--uc-red);font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
.catalogName{display:block;overflow:hidden;color:#1b1d20;font-size:11px;line-height:1.25;font-weight:750;white-space:nowrap;text-overflow:ellipsis}
.catalogPrice{display:block;margin-top:5px;color:#111214;font-size:10px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.catalogArrow{color:#7d7f82;font-size:15px;transition:transform .2s ease,color .2s ease}
.catalogCard:hover .catalogArrow{color:var(--uc-red);transform:translateX(2px)}

@keyframes catalogMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 5px),0,0)}
}

/* ---------- series ---------- */
.seriesSection{background:var(--uc-dark);color:#fff}
.seriesSection .sectionKicker{color:#ff6863}
.seriesSection .sectionLead{max-width:620px;color:#96999f}
.seriesSection .textLink{color:#fff}
.seriesGrid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:188px;
  gap:11px;
}
.seriesCard{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:#181b20;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease;
}
/*
   13 aktif seri için bilinçli ritim:
   4 + 3 + 4 + 2 kart. Her satır 12 kolonu tam doldurur,
   böylece bölüm tek başına kalan bir kartla bitmez. Yeni kategori eklenirse
   varsayılan 3 kolonluk genişlik kullanılır.
*/
.seriesCard{grid-column:span 3}
.seriesCard:nth-child(n+5):nth-child(-n+7){grid-column:span 4}
.seriesCard:nth-child(n+8):nth-child(-n+11){grid-column:span 3}
.seriesCard:nth-child(n+12):nth-child(-n+13){grid-column:span 6}
.seriesCard img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
  filter:saturate(.94) contrast(1.02);
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.seriesCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(6,8,10,.03) 24%,rgba(6,8,10,.18) 53%,rgba(6,8,10,.88) 100%);
  pointer-events:none;
}
.seriesCard:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.seriesCard:hover img{transform:scale(1.055);filter:saturate(1.03) contrast(1.03)}
.seriesMeta{
  position:absolute;
  z-index:2;
  left:16px;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.seriesCopy{min-width:0}
.seriesName{
  display:block;
  max-width:100%;
  color:#fff;
  font-size:14px;
  line-height:1.14;
  font-weight:820;
  letter-spacing:-.025em;
}
.seriesCount{display:block;margin-top:5px;color:rgba(255,255,255,.62);font-size:8px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.seriesArrow{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(15,17,20,.36);
  color:#fff;
  font-size:11px;
  backdrop-filter:blur(7px);
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.seriesCard:hover .seriesArrow{background:#fff;border-color:#fff;color:#111;transform:translate(1px,-1px)}

/* Bazı kapaklarda odak noktası merkezde olmadığı için kontrollü kırpma. */
.seriesCard--anime-serisi img{object-position:center 34%}
.seriesCard--fast-furious-serisi img{object-position:center 44%}
.seriesCard--sponsor-markalar-serisi img{object-position:center 45%}
.seriesCard--futbol-serisi img{object-position:center 26%}
.seriesCard--pokemon-serisi img{object-position:center 38%}

/* ---------- featured products ---------- */
.featuredSection{background:#fff}
.productGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.productCard{min-width:0}
.productVisual{
  position:relative;
  display:block;
  aspect-ratio:1/1.12;
  overflow:hidden;
  border-radius:20px;
  background:#f0efeb;
}
.productVisual img{width:100%;height:100%;display:block;object-fit:contain;padding:20px;transition:transform .48s cubic-bezier(.2,.7,.2,1)}
.productCard:hover .productVisual img{transform:scale(1.035) rotate(-.45deg)}
.productVisualTag{position:absolute;left:13px;top:13px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.82);color:#202226;font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.productInfo{padding:14px 2px 0}
.productCategory{margin-bottom:7px;color:var(--uc-red);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.productRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
.productName{margin:0;font-size:15px;line-height:1.3;font-weight:750;letter-spacing:-.025em}
.homeProductPrice{margin-top:6px;color:#111214;font-size:13px;font-weight:900;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.addCartBtn{appearance:none;border:0;padding:0;background:none;color:#4f5256;font-size:10px;font-weight:750;cursor:pointer;white-space:nowrap;transition:color .2s ease}
.addCartBtn:hover{color:var(--uc-red)}

/* ---------- customs ---------- */
.customSection{background:var(--uc-bg)}
.customGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.customCard{
  position:relative;
  min-width:0;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:24px;
  background:#dcdcd8;
  isolation:isolate;
}
.customCard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.customCard:hover img{transform:scale(1.045)}
.customCard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.02) 32%,rgba(0,0,0,.82) 100%)}
.customMeta{position:absolute;z-index:2;left:22px;right:20px;bottom:20px;color:#fff}
.customSeries{display:block;margin-bottom:7px;color:#ff7771;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.customTitleRow{display:flex;align-items:end;justify-content:space-between;gap:18px}
.customTitle{display:block;font-size:18px;line-height:1.14;font-weight:800;letter-spacing:-.03em}
.customHandle{display:block;margin-top:5px;color:#c8c9cc;font-size:10px}
.customArrow{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.07);transition:background .2s ease,color .2s ease,transform .2s ease}
.customCard:hover .customArrow{background:#fff;color:#111;transform:rotate(-5deg)}

/* ---------- service / CTA ---------- */
.contactBand{padding:0 0 112px;background:var(--uc-bg)}
.contactPanel{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:48px;
  padding:50px 54px;
  border-radius:28px;
  background:var(--uc-red);
  color:#fff;
}
.contactPanel::after{content:"64";position:absolute;right:190px;top:-32px;color:rgba(255,255,255,.095);font-size:190px;line-height:1;font-weight:900;letter-spacing:-.1em;pointer-events:none}
.contactPanelText{position:relative;z-index:1}
.contactPanelLabel{display:block;margin-bottom:10px;color:#ffd6d4;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.contactPanel h3{margin:0;max-width:780px;font-size:clamp(29px,3.7vw,48px);line-height:1.02;letter-spacing:-.045em}
.contactPanel p{margin:13px 0 0;color:#ffe3e1;font-size:13px;line-height:1.65}
.contactButton{position:relative;z-index:1;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;border-radius:13px;background:#fff;color:#16181b;font-size:12px;font-weight:850;box-shadow:0 14px 36px rgba(114,13,10,.17);white-space:nowrap;transition:transform .2s ease}
.contactButton:hover{transform:translateY(-2px)}

/* ---------- footer ---------- */
.homeFooter{
  position:relative;
  overflow:hidden;
  padding:72px 0 24px;
  background:#0b0d10;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.07);
}
.homeFooter::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-220px;
  top:-330px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,58,52,.11),transparent 68%);
  pointer-events:none;
}
.footerTop{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  align-items:start;
  gap:72px;
  padding-bottom:58px;
}
.footerIdentity{max-width:570px}
.footerBrand{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#fff;
}
.footerBrandMark{
  width:44px;
  height:28px;
  display:grid;
  place-items:center;
}
.footerBrandMark img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.footerBrandName{
  font-size:24px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.045em;
}
.footerStatement{
  max-width:500px;
  margin:24px 0 0;
  color:#a5a9af;
  font-size:14px;
  line-height:1.75;
}
.footerScale{
  display:inline-flex;
  align-items:center;
  margin-top:24px;
  color:#62676f;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
}
.footerScale::before{
  content:"";
  width:22px;
  height:1px;
  margin-right:10px;
  background:var(--uc-red);
}
.footerNav{
  display:grid;
  grid-template-columns:repeat(2,minmax(130px,1fr));
  gap:56px;
}
.footerNavGroup{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}
.footerNavTitle{
  margin-bottom:5px;
  color:#62676f;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.footerNavGroup a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#c7c9cd;
  font-size:12px;
  line-height:1.35;
  font-weight:650;
  transition:color .2s ease,transform .2s ease;
}
.footerNavGroup a span{
  color:#666b72;
  font-size:10px;
  transition:color .2s ease,transform .2s ease;
}
.footerNavGroup a:hover{
  color:#fff;
  transform:translateX(2px);
}
.footerNavGroup a:hover span{
  color:var(--uc-red);
  transform:translate(1px,-1px);
}
.footerNavGroup .footerWhatsApp{
  display:inline-flex !important;
  align-items:center;
  gap:8px !important;
  color:#fff !important;
}
.footerWhatsApp .footerWaIcon{
  width:15px;
  height:15px;
  flex:0 0 auto;
  fill:currentColor;
  transition:color .2s ease,transform .2s ease;
}
.footerWhatsAppLabel{
  color:inherit !important;
  font-size:12px !important;
}
.footerWhatsApp .footerExternalArrow{
  color:#666b72;
  font-size:10px !important;
}
.footerWhatsApp:hover{
  color:#fff !important;
}
.footerWhatsApp:hover .footerWaIcon{
  color:#25d366;
  transform:scale(1.04);
}
.footerWhatsApp:hover .footerExternalArrow{
  color:#25d366 !important;
}

.footerInstagram{
  display:inline-flex !important;
  align-items:center;
  gap:8px !important;
  color:#c7c9cd !important;
}
.footerInstagram svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:color .2s ease,transform .2s ease;
}
.footerInstagramHandle{
  color:inherit !important;
  font-size:12px !important;
}
.footerInstagram .footerExternalArrow{
  color:#666b72;
  font-size:10px !important;
}
.footerInstagram:hover{
  color:#fff !important;
}
.footerInstagram:hover svg{
  color:#ee3631;
  transform:scale(1.04);
}
.footerInstagram:hover .footerExternalArrow{
  color:#ee3631;
}
.footerContactNote{
  color:#62676f;
  font-size:9px;
  line-height:1.5;
}
.footerBottom{
  position:relative;
  z-index:1;
  min-height:52px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.075);
  color:#62676f;
  font-size:9px;
  line-height:1.5;
}
.footerDeveloper{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.footerDeveloper a{
  position:relative;
  color:#aeb2b8;
  font-weight:700;
  transition:color .2s ease;
}
.footerDeveloper a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:var(--uc-red);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.footerDeveloper a:hover{color:#fff}
.footerDeveloper a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.emptyState{grid-column:1/-1;padding:28px;border:1px dashed var(--uc-line);border-radius:16px;color:var(--uc-muted);font-size:13px}
.is-image-missing{opacity:.08}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.isVisible{opacity:1;transform:none}

@media(max-width:1100px){
  .heroGrid{grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr);gap:38px}
  .heroStage{grid-template-columns:minmax(170px,.35fr) minmax(0,.65fr);min-height:450px}
  .heroStageCopy{padding:30px 24px 28px}
  .heroSelectorButton{grid-template-columns:52px minmax(0,1fr)}
  .heroSelectorThumb{width:52px;height:52px}
  .heroSelectorIndex{display:none}
  .catalogTrack{animation-duration:34s}
  .productGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}
}

@media(max-width:820px){
  .homeContainer{width:min(calc(100% - 32px),var(--uc-max))}
  .homeSection{padding:82px 0}
  .sectionHead{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  .sectionHead h2{font-size:clamp(38px,9vw,58px)}
  .sectionLead{margin-top:14px}
  .textLink{width:max-content}

  .hero{padding-top:42px}
  .heroGrid{min-height:auto;grid-template-columns:1fr;gap:42px}
  .heroCopy{padding:18px 0 0}
  .heroBrandLogo{width:168px;margin-bottom:26px}
  .hero h1{max-width:690px;font-size:clamp(50px,10vw,74px)}
  .heroText{max-width:650px}
  .heroVisual{min-height:0}
  .heroStage{grid-template-columns:minmax(205px,.34fr) minmax(0,.66fr);min-height:450px}
  .heroStageCopy{padding:30px 26px}
  .heroSelectorButton{grid-template-columns:58px minmax(0,1fr) auto}
  .heroSelectorThumb{width:58px;height:58px}
  .heroSelectorIndex{display:block}
  .catalogSelection{margin-top:38px;padding-bottom:42px}
  .catalogTrack{animation-duration:30s}
  .catalogCard{width:244px;min-width:244px}

  .seriesGrid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:190px;gap:10px}
  .seriesCard,.seriesCard:nth-child(n+5):nth-child(-n+7),.seriesCard:nth-child(n+8):nth-child(-n+11),.seriesCard:nth-child(n+12):nth-child(-n+13){grid-column:span 2}
  .seriesCard:last-child:nth-child(3n+1){grid-column:1/-1}
  .customGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contactPanel{grid-template-columns:1fr;padding:42px 34px;gap:28px}
  .contactPanel::after{right:-20px}
  .contactButton{width:max-content}
  .footerTop{grid-template-columns:1fr;gap:44px;padding-bottom:46px}
  .footerIdentity{max-width:620px}
  .footerNav{max-width:470px}
}

@media(max-width:560px){
  .homeContainer{width:calc(100% - 24px)}
  .homeSection{padding:68px 0}
  .sectionKicker,.heroKicker{font-size:9px}
  .sectionHead h2{font-size:42px}

  .hero{padding-top:28px;background-size:36px 36px}
  .heroGrid{gap:34px}
  .heroBrandLogo{width:145px;margin-bottom:22px}
  .hero h1{font-size:47px;line-height:.94}
  .heroText{margin-top:20px;font-size:14px;line-height:1.68}
  .heroActions{margin-top:26px}
  .primaryButton,.secondaryButton{min-height:48px;padding-inline:16px;font-size:11px}
  .heroFacts{margin-top:31px;padding-top:18px}
  .heroFact{min-width:0;padding-right:14px;margin-right:14px}
  .heroFact strong{font-size:17px}.heroFact span{font-size:7px}
  .heroVisualTopline{margin-inline:1px}
  .heroStage{grid-template-columns:1fr;min-height:0;border-radius:24px}
  .heroStageMedia{order:1;min-height:320px}
  .heroStageCopy{order:2;min-height:245px;padding:25px 23px 24px}
  .heroStageEyebrow{margin-bottom:42px}
  .heroProductName{max-width:none;font-size:29px}
  .heroStageText{max-width:300px}
  .heroProductImage{width:79%;height:79%}
  .heroScaleMark{top:18px;right:20px;font-size:48px}
  .heroNewBadge{top:18px;left:18px;min-height:29px;padding-inline:9px 11px}
  .heroStage{touch-action:pan-y}
  .heroSelectorMobileHint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:12px 2px 8px;
    color:#8a8d92;
    font-size:8px;
    line-height:1;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .heroSwipeCue{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#26282c;
  }
  .heroSwipeArrow{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:1px solid rgba(17,18,20,.12);
    border-radius:50%;
    background:rgba(255,255,255,.72);
    color:var(--uc-red);
    font-size:12px;
    box-shadow:0 7px 20px rgba(17,18,20,.06);
    animation:heroSwipeNudge 1.8s ease-in-out infinite;
  }
  .heroSelector{
    position:relative;
    display:flex;
    overflow-x:auto;
    gap:8px;
    margin-top:0;
    padding:0 48px 9px 1px;
    scroll-snap-type:x mandatory;
    scroll-padding-left:1px;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
  }
  .heroSelector::after{content:"";flex:0 0:34px}
  .heroSelector::-webkit-scrollbar{display:none}
  .heroSelectorButton{
    flex:0 0 min(78vw,290px);
    scroll-snap-align:start;
    scroll-snap-stop:always;
    grid-template-columns:54px minmax(0,1fr) auto;
  }
  .heroSelectorThumb{width:54px;height:54px}
  .catalogHead{align-items:flex-end}.catalogHint{display:none}
  .catalogTrack{animation-duration:26s}
  .catalogCard{width:228px;min-width:228px;grid-template-columns:64px minmax(0,1fr) 24px}.catalogThumb{width:64px;height:64px}

  .seriesGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:176px;gap:9px}
  .seriesCard,.seriesCard:nth-child(n+5):nth-child(-n+7),.seriesCard:nth-child(n+8):nth-child(-n+11),.seriesCard:nth-child(n+12):nth-child(-n+13){grid-column:span 1}
  .seriesCard:last-child:nth-child(odd){grid-column:1/-1}
  .seriesMeta{left:13px;right:11px;bottom:12px}
  .seriesName{font-size:13px}
  .seriesCount{font-size:7px}
  .seriesArrow{width:27px;height:27px}
  .productGrid{grid-template-columns:1fr 1fr;gap:30px 10px}
  .productVisual{border-radius:15px}.productVisual img{padding:12px}.productVisualTag{display:none}
  .productInfo{padding-top:10px}.productCategory{font-size:8px}.productName{font-size:13px}.productRow{grid-template-columns:1fr}.addCartBtn{width:max-content;margin-top:2px}
  .customGrid{grid-template-columns:1fr;gap:10px}.customCard{grid-column:auto;aspect-ratio:4/5}
  .contactBand{padding-bottom:68px}.contactPanel{padding:34px 25px;border-radius:22px}.contactPanel h3{font-size:34px}.contactButton{width:100%}
  .homeFooter{padding:56px 0 20px}
  .footerTop{gap:38px;padding-bottom:38px}
  .footerBrandMark{width:39px;height:25px}
  .footerBrandName{font-size:22px}
  .footerStatement{margin-top:20px;font-size:13px;line-height:1.7}
  .footerScale{font-size:8px;letter-spacing:.12em}
  .footerNav{grid-template-columns:1fr 1fr;gap:32px}
  .footerBottom{align-items:flex-start;flex-direction:column;gap:8px;padding-top:18px}
  .footerDeveloper{white-space:normal}
}

@media(max-width:390px){
  .productGrid{grid-template-columns:1fr}
  .productVisual{aspect-ratio:1/1}
}

@keyframes heroSwipeNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}

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

/* ---------- footer alignment refinements ---------- */
.footerBrand{
  min-height:40px;
  gap:9px;
  align-items:center;
}
.footerBrandMark{
  width:48px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.footerBrandMark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.footerBrandName{
  display:flex;
  align-items:center;
  min-height:31px;
  line-height:31px;
  transform:translateY(2px);
}
.footerDeveloper{
  font-size:13px;
  line-height:1.4;
  gap:5px;
}
.footerDeveloper a{
  font-size:13px;
  font-weight:780;
}

@media(max-width:640px){
  .footerBrandMark{
    width:43px;
    height:28px;
  }
  .footerBrandName{
    min-height:28px;
    line-height:28px;
    transform:translateY(1px);
  }
  .footerDeveloper,
  .footerDeveloper a{
    font-size:12px;
  }
}


/* ---------- footer brand lock: icon + wordmark must stay on one line ---------- */
.footerBrand{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:max-content !important;
  white-space:nowrap !important;
  min-height:0 !important;
  line-height:1 !important;
}
.footerBrandMark{
  display:block !important;
  width:45px !important;
  height:auto !important;
  flex:0 0 45px !important;
  line-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.footerBrandMark img{
  display:block !important;
  width:45px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  filter:none !important;
}
.footerBrandName{
  display:block !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:-.045em !important;
  transform:none !important;
}

@media(max-width:640px){
  .footerBrand{gap:6px !important;}
  .footerBrandMark,
  .footerBrandMark img{
    width:40px !important;
  }
  .footerBrandMark{flex-basis:40px !important;}
  .footerBrandName{font-size:22px !important;}
}

/* =========================================================
   HOME SEO / DECAL EXPERTISE LAYER
   Visible, people-first content that also strengthens topic clarity.
   ========================================================= */
.heroSeoPrefix{
  display:block;
  margin:0 0 14px;
  color:var(--uc-red);
  font-size:clamp(13px,1.15vw,17px);
  line-height:1.1;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.decalGuideSection{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--uc-line);
  background:
    linear-gradient(rgba(17,18,20,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,18,20,.026) 1px,transparent 1px),
    #f3f1ed;
  background-size:48px 48px;
}
.decalGuideSection::after{
  content:"DECAL";
  position:absolute;
  right:-34px;
  top:22px;
  color:rgba(17,18,20,.025);
  font-size:clamp(120px,18vw,280px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.08em;
  pointer-events:none;
}
.decalGuideGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.83fr) minmax(560px,1.17fr);
  gap:72px;
  align-items:start;
}
.decalGuideIntro h2{
  max-width:620px;
  margin:14px 0 0;
  font-size:clamp(38px,4.3vw,62px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:850;
}
.decalGuideIntro > p{
  max-width:610px;
  margin:24px 0 0;
  color:#595c61;
  font-size:15px;
  line-height:1.8;
}
.decalGuideLinks{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:28px;
}
.decalGuideLinks a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid rgba(17,18,20,.35);
  color:var(--uc-ink);
  font-size:12px;
  font-weight:800;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.decalGuideLinks a:hover{
  color:var(--uc-red);
  border-color:var(--uc-red);
  gap:12px;
}
.decalGuideCards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.decalGuideCard{
  min-height:270px;
  display:flex;
  flex-direction:column;
  padding:26px 24px 24px;
  border:1px solid rgba(17,18,20,.10);
  border-radius:20px;
  background:rgba(255,255,255,.67);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 38px rgba(17,18,20,.04);
}
.decalGuideIndex{
  color:var(--uc-red);
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}
.decalGuideCard h3{
  margin:52px 0 0;
  font-size:19px;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:850;
}
.decalGuideCard p{
  margin:13px 0 0;
  color:#676a6f;
  font-size:12px;
  line-height:1.72;
}

@media(max-width:1080px){
  .decalGuideGrid{grid-template-columns:1fr;gap:42px}
  .decalGuideIntro > p{max-width:760px}
}

@media(max-width:700px){
  .heroSeoPrefix{
    margin-bottom:10px;
    font-size:10px;
    letter-spacing:.11em;
  }
  .decalGuideCards{grid-template-columns:1fr}
  .decalGuideCard{min-height:auto;padding:22px 20px}
  .decalGuideCard h3{margin-top:28px}
  .decalGuideIntro h2{font-size:36px}
  .decalGuideIntro > p{font-size:13px;line-height:1.72}
  .decalGuideSection::after{display:none}
}