/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --f1: #101C2C;
  --f2: #17283B;
  --f3: #20364A;
  --f4: #2B455A;
  --f5: #36566A;
  --f6: #426779;
  --f7: #50808E;
  --f8: #639AA3;
  --g1: #14B8A6;
  --g2: #2DD4BF;
  --g3: #5EEAD4;
  --g4: #99F6E4;
  --g5: #D9FBF3;
  --iv: #F8FAFC;
  --iv2: #E8EEF2;
  --iv3: #CCD7DF;
  --bdr: rgba(20, 184, 166, .14);
  --bdr2: rgba(20, 184, 166, .26);
  --bdr3: rgba(20, 184, 166, .42);
  --bdrw: rgba(248, 250, 252, .07);
  --bdrw2: rgba(248, 250, 252, .14);
  --sh: 0 4px 20px rgba(16, 28, 44, .30);
  --sh2: 0 12px 44px rgba(16, 28, 44, .42);
  --sh3: 0 30px 80px rgba(16, 28, 44, .52);
  --shg: 0 8px 32px rgba(20, 184, 166, .20);
  --FD: 'DM Serif Text', serif;
  --FB: 'Archivo', sans-serif;
  --FI: 'Spectral', serif;
  --ease: .4s cubic-bezier(.4, 0, .2, 1);
  --spring: .55s cubic-bezier(.34, 1.56, .64, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--FB);
  background: var(--f1);
  color: var(--iv);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--f2);
}

::-webkit-scrollbar-thumb {
  background: var(--g1);
  border-radius: 3px;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .025;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══ NAV ═══ */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 14px 28px;
  transition: var(--ease);
}

#nav.sc {
  padding: 8px 28px;
}

.nb {
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 1.4rem;
  background: rgba(31, 18, 13, 0.85);
  backdrop-filter: blur(24px);
  border: 1px solid var(--bdrw2);
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(13, 31, 23, .4);
  transition: var(--ease);
  max-width: 1400px;
  margin: 0 auto;
}

#nav.sc .nb {
  height: 54px;
  box-shadow: 0 14px 50px rgba(13, 31, 23, .55);
}

.logo {
  font-family: var(--FD);
  font-size: 1.4rem;
  color: var(--iv);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.logo-leaf {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--f5), var(--f6));
  border-radius: 50% 50% 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--g2);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(90, 170, 131, .3);
  transition: var(--spring);
}

.logo:hover .logo-leaf {
  transform: rotate(20deg) scale(1.1);
}

.nlinks {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .1rem;
  justify-content: center;
}

.na {
  font-family: var(--FB);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(248, 243, 232, .5);
  text-decoration: none;
  padding: .45rem .9rem;
  border-radius: 8px;
  transition: var(--ease);
  position: relative;
}

.na::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 18px;
  height: 2px;
  background: var(--g2);
  border-radius: 2px;
  transition: var(--spring);
}

.na:hover {
  color: var(--g2);
}

.na:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nright {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.csell {
  font-family: var(--FB);
  font-size: .85rem;
  font-weight: 600;
  background: var(--f3);
  border: 1px solid var(--bdrw);
  border-radius: 20px;
  padding: .34rem .85rem;
  color: var(--g2);
  cursor: pointer;
  outline: none;
  transition: var(--ease);
}

.csell:hover {
  border-color: var(--bdr);
  background: var(--f4);
}

.ib {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--bdrw);
  background: transparent;
  color: rgba(248, 243, 232, .42);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: var(--ease);
  position: relative;
  text-decoration: none;
}

.ib:hover {
  border-color: var(--bdr);
  color: var(--g2);
  background: rgba(201, 168, 76, .08);
  transform: translateY(-2px);
}

.ibadge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  font-size: .6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--f1);
  transition: var(--spring);
}

.ibadge.bump {
  animation: badgeBump .6s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes badgeBump {

  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.5) rotate(-15deg);
  }

  60% {
    transform: scale(.85) rotate(10deg);
  }
}

/* ═══ HERO ═══ */
#hero {
  width: 100%;
  padding-top: 90px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/7;
  min-height: 420px;
}

.hero-banner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--f3), var(--f5));
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }

  100% {
    transform: scale(1.15) translate(-20px, -15px);
  }
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13, 31, 23, .8) 100%);
  pointer-events: none;
}

.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(13, 31, 23, .45) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-sweep {
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .1), transparent);
  transform: skewX(-25deg);
  z-index: 2;
  pointer-events: none;
  animation: sweep 6s ease-in-out infinite;
}

@keyframes sweep {
  0% {
    left: -150%;
  }

  30% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

/* ═══ TICKER ═══ */
.ticker {
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g1) 100%);
  padding: .7rem 0;
  overflow: hidden;
  position: relative;
  transform: skewY(-1.5deg);
  margin-top: -1px;
}

.ticker-t {
  display: flex;
  animation: tk 38s linear infinite;
  width: max-content;
  transform: skewY(1.5deg);
}

.ticker-t:hover {
  animation-play-state: paused;
}

.ti {
  white-space: nowrap;
  font-family: var(--FB);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f1);
  display: flex;
  align-items: center;
  padding: 0 1.8rem;
  gap: 1.8rem;
}

.ti::after {
  content: '✦';
  font-size: .55rem;
  opacity: .6;
  color: var(--f1);
}

@keyframes tk {
  from {
    transform: skewY(1.5deg) translateX(0);
  }

  to {
    transform: skewY(1.5deg) translateX(-50%);
  }
}

/* ═══ SHOP ═══ */
#shop-section {
  position: relative;
  z-index: 1;
  background: var(--f1);
}

.shop-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.cat-nav {
  position: sticky;
  top: 90px;
  height: calc(100vh - 90px);
  background: var(--f2);
  border-right: 1px solid var(--bdrw2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.cat-nav::-webkit-scrollbar {
  width: 3px;
}

.cat-nav::-webkit-scrollbar-thumb {
  background: var(--f5);
  border-radius: 2px;
}

.cnav-top {
  padding: 2rem 1.4rem 1rem;
  border-bottom: 1px solid var(--bdrw);
}

.cnav-title {
  font-family: var(--FB);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .32);
  margin-bottom: 1rem;
}

.cnav-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--f3);
  border: 1px solid var(--bdrw);
  border-radius: 10px;
  padding: .6rem .9rem;
  transition: .3s;
}

.cnav-search:focus-within {
  border-color: var(--bdr2);
  background: var(--f4);
}

.cnav-search i {
  color: rgba(248, 243, 232, .3);
  font-size: .8rem;
  flex-shrink: 0;
}

.cnav-search input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--FB);
  font-size: .84rem;
  color: var(--iv);
  width: 100%;
}

.cnav-search input::placeholder {
  color: rgba(248, 243, 232, .25);
}

.cnav-list {
  padding: 1rem .8rem;
  flex: 1;
}

.cnav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--ease);
  margin-bottom: .25rem;
  border: 1px solid transparent;
  position: relative;
}

.cnav-item:hover {
  background: rgba(201, 168, 76, .06);
  border-color: rgba(201, 168, 76, .1);
  transform: translateX(3px);
}

.cnav-item.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, .14), rgba(201, 168, 76, .05));
  border-color: var(--bdr2);
  box-shadow: inset 0 0 20px rgba(201, 168, 76, .05);
}

.cnav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 65%;
  background: linear-gradient(var(--g1), var(--g3));
  border-radius: 2px;
}

.cnav-icon {
  font-size: 1.1rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.cnav-name {
  font-family: var(--FB);
  font-size: .93rem;
  font-weight: 500;
  color: rgba(248, 243, 232, .6);
  transition: .3s;
  flex: 1;
}

.cnav-item.active .cnav-name {
  color: var(--g2);
  font-weight: 700;
}

.cnav-item:hover .cnav-name {
  color: var(--g2);
}

.cnav-cnt {
  font-family: var(--FB);
  font-size: .6rem;
  font-weight: 600;
  background: var(--f3);
  border: 1px solid var(--bdrw);
  color: rgba(248, 243, 232, .32);
  padding: .12rem .5rem;
  border-radius: 20px;
  flex-shrink: 0;
  display: none;
}

.cnav-item.active .cnav-cnt {
  background: rgba(201, 168, 76, .18);
  border-color: var(--bdr);
  color: var(--g2);
}

.cnav-bottom {
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--bdrw);
}

.cnav-sort {
  width: 100%;
  background: var(--f3);
  border: 1px solid var(--bdrw);
  border-radius: 10px;
  padding: .65rem .9rem;
  font-family: var(--FB);
  font-size: .82rem;
  color: var(--iv);
  outline: none;
  cursor: pointer;
  transition: .3s;
}

.cnav-sort:focus {
  border-color: var(--bdr2);
}

.cat-main {
  background: var(--f1);
  overflow-y: auto;
  padding: 0;
}

.cat-section-blk {
  padding: 4rem 3rem 0;
  scroll-margin-top: 90px;
}

.cat-blk-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--bdrw);
}

.cbh-eyebrow {
  font-family: var(--FB);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g1);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .6rem;
}

.cbh-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--g1);
}

.cbh-name {
  font-family: var(--FD);
  font-size: clamp(2.2rem, 4vw, 4rem);
  color: var(--iv);
  line-height: .92;
  letter-spacing: -.01em;
}

.cbh-sub {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .4);
  margin-top: .45rem;
}

.cbh-count {
  font-family: var(--FB);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .35);
  background: var(--f3);
  border: 1px solid var(--bdrw);
  padding: .4rem 1.1rem;
  border-radius: 20px;
  display: none;
}

/* Product Grid */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.3rem;
  padding-bottom: 5rem;
}

.prod-grid .pc-wrap:nth-child(6n+1) {
  grid-column: span 5;
}

.prod-grid .pc-wrap:nth-child(6n+2) {
  grid-column: span 4;
}

.prod-grid .pc-wrap:nth-child(6n+3) {
  grid-column: span 3;
}

.prod-grid .pc-wrap:nth-child(6n+4) {
  grid-column: span 3;
}

.prod-grid .pc-wrap:nth-child(6n+5) {
  grid-column: span 5;
}

.prod-grid .pc-wrap:nth-child(6n+6) {
  grid-column: span 4;
}

.pc-wrap {
  perspective: 1000px;
  position: relative;
}

.pc {
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .4s, box-shadow .4s;
  box-shadow: 0 8px 30px rgba(13, 31, 23, .4), inset 0 1px 0 rgba(248, 243, 232, .04);
  position: relative;
  height: 100%;
}

.pc-wrap:hover .pc {
  transform: translateY(-8px) rotateX(2deg);
  border-color: var(--bdr2);
  box-shadow: 0 24px 70px rgba(13, 31, 23, .6), 0 0 40px rgba(201, 168, 76, .12);
}

.pc-img {
  height: 260px;
  background: var(--f2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.pc-img-bg {
  position: absolute;
  inset: 0;
  opacity: .14;
  transition: .5s;
}

.pc-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(13, 31, 23, .5));
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  z-index: 1;
}

.pc-wrap:hover .pc-img img {
  transform: scale(1.08) translateY(-5px);
}

.pc-tag {
  position: absolute;
  top: 11px;
  left: 11px;
  font-family: var(--FB);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .68rem;
  border-radius: 5px;
  z-index: 2;
}

.pc-wish {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13, 31, 23, .7);
  border: 1px solid var(--bdrw);
  color: rgba(248, 243, 232, .42);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  transition: var(--ease);
  z-index: 2;
  backdrop-filter: blur(6px);
}

.pc-wish:hover,
.pc-wish.on {
  background: rgba(201, 168, 76, .15);
  color: var(--g2);
  border-color: var(--bdr);
  transform: scale(1.1);
}

.pc-body {
  padding: 1.1rem 1.3rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pc-cat {
  font-family: var(--FB);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .8;
}

.pc-name {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--iv);
  line-height: 1.35;
  margin-bottom: .7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s;
}

.pc-wrap:hover .pc-name {
  color: var(--g2);
}

.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pc-price {
  font-family: var(--FD);
  font-size: 1.5rem;
}

.pc-add {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--f4);
  border: 1px solid var(--bdrw);
  color: rgba(248, 243, 232, .45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
}

.pc-add::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  transform: scale(0);
  border-radius: 50%;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.pc-add i {
  position: relative;
  z-index: 1;
  transition: var(--spring);
}

.pc-add:hover {
  border-color: var(--g1);
  transform: translateY(-2px);
}

.pc-add:hover::before {
  transform: scale(1.8);
  border-radius: 11px;
}

.pc-add:hover i {
  color: var(--f1);
  transform: rotate(90deg);
}

.pc-add.added::before {
  transform: scale(2.5);
  border-radius: 11px;
}

.pc-add.added i {
  color: var(--f1);
  transform: rotate(360deg);
}

/* Flying product animation */
.fly-clone {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(201, 168, 76, .4);
  overflow: hidden;
  background: var(--f3);
  border: 2px solid var(--g1);
  transition: none;
}

.fly-clone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Heart burst animation */
.heart-particle {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  color: var(--g2);
  font-size: 1rem;
  animation: heartFly .8s ease-out forwards;
}

@keyframes heartFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* ═══ ABOUT ═══ */
#about {
  background: var(--f2);
  padding: 9rem 0;
  position: relative;
  overflow: hidden;
}

#about::before {
  content: 'ABOUT';
  position: absolute;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--FD);
  font-size: 18rem;
  color: rgba(201, 168, 76, .04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.about-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-vis {
  position: relative;
}

.ab-big {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 24px 4px 24px 4px;
  border: 1px solid var(--bdrw2);
  box-shadow: var(--sh3);
  display: block;
  transition: transform .6s ease;
}

.about-wrap:hover .ab-big {
  transform: perspective(1000px) rotateY(2deg) scale(.98);
}

.ab-sm {
  position: absolute;
  bottom: 2.5rem;
  right: -2.5rem;
  width: 190px;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid var(--g1);
  box-shadow: 0 0 50px rgba(201, 168, 76, .25), var(--sh3);
  transition: transform .45s;
}

.about-vis:hover .ab-sm {
  transform: translate(-4px, -8px) rotate(3deg);
}

.ab-chip {
  position: absolute;
  top: 2rem;
  left: -1.5rem;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-radius: 14px;
  padding: 1.2rem 1.6rem;
  box-shadow: var(--shg);
}

.abn {
  font-family: var(--FD);
  font-size: 2.4rem;
  color: var(--f1);
  display: block;
  line-height: 1;
}

.abl {
  font-family: var(--FB);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13, 31, 23, .7);
  margin-top: 4px;
  display: block;
}

.sec-eye {
  font-family: var(--FB);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--g1);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: .9rem;
}

.sec-eye::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--g1);
}

.about-h {
  font-family: var(--FD);
  font-size: clamp(2.5rem, 4vw, 4.6rem);
  color: var(--iv);
  line-height: .94;
  letter-spacing: -.01em;
  margin-bottom: 1.8rem;
}

.about-h em {
  font-style: italic;
  color: var(--g2);
}

.about-p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.12rem;
  color: rgba(248, 243, 232, .46);
  line-height: 1.85;
  margin-bottom: 2.8rem;
  max-width: 460px;
}

.about-items {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  margin-bottom: 2.8rem;
}

.ai {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: .6rem;
  border-radius: 14px;
  transition: .3s;
}

.ai:hover {
  background: rgba(201, 168, 76, .04);
}

.ai-ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .1);
  border: 1px solid var(--bdr);
  color: var(--g2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: var(--spring);
}

.ai:hover .ai-ic {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border-color: var(--g1);
  transform: scale(1.1) rotate(-5deg);
}

.ai-t {
  font-family: var(--FB);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--iv);
  margin-bottom: 3px;
}

.ai-d {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .42);
  line-height: 1.55;
}

/* ═══ WHY ═══ */
#why {
  background: var(--f1);
  padding: 10rem 0;
  position: relative;
}

.why-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4rem;
}

.why-hd {
  text-align: center;
  margin-bottom: 4.5rem;
}

.why-hl {
  font-family: var(--FD);
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--iv);
}

.why-hl em {
  font-style: italic;
  color: var(--g2);
}

.why-asym {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 1.5rem;
}

.wc-hero {
  background: linear-gradient(135deg, var(--f3), var(--f4));
  border: 1px solid var(--bdr2);
  border-radius: 20px;
  padding: 3.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wc-hero .wc-ic {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  box-shadow: var(--shg);
}

.wc-hero .wc-t {
  font-family: var(--FD);
  font-size: 2.4rem;
  color: var(--iv);
  margin-bottom: 1rem;
}

.wc-hero .wc-d {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(248, 243, 232, .6);
  line-height: 1.7;
}

.why-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.wc-compact {
  background: var(--f2);
  border: 1px solid var(--bdrw2);
  border-radius: 16px;
  padding: 1.8rem;
  transition: var(--ease);
}

.wc-compact:hover {
  border-color: var(--bdr);
  transform: translateY(-4px);
}

.wc-compact .wc-ic {
  font-size: 1.4rem;
  color: var(--g2);
  margin-bottom: .8rem;
}

.wc-compact .wc-t {
  font-family: var(--FB);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--iv);
  margin-bottom: .4rem;
}

.wc-compact .wc-d {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1rem;
  color: rgba(248, 243, 232, .4);
  line-height: 1.6;
}

/* ═══ REVIEWS ═══ */
#reviews {
  background: var(--f3);
  padding: 10rem 0;
  position: relative;
  overflow: hidden;
}

.rev-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(201, 168, 76, .07), transparent 65%);
  pointer-events: none;
}

.rev-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
  z-index: 1;
}

.rev-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4rem;
}

.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.rv {
  background: var(--f2);
  border: 1px solid var(--bdrw2);
  border-radius: 18px;
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
  transition: var(--ease);
}

.rv::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(248, 243, 232, .03), transparent 50%);
  pointer-events: none;
}

.rv:hover {
  border-color: var(--bdr);
  transform: translateY(-6px) rotate(.5deg);
  box-shadow: 0 22px 60px rgba(13, 31, 23, .5), var(--shg);
}

.rv-qt {
  font-family: var(--FD);
  font-size: 5rem;
  color: rgba(201, 168, 76, .15);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}

.rv-hd {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.2rem;
}

.rv-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f5), var(--f6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--FD);
  font-size: 1.5rem;
  color: var(--g2);
  flex-shrink: 0;
  border: 2px solid rgba(201, 168, 76, .2);
}

.rv-nm {
  font-family: var(--FB);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--iv);
}

.rv-rl {
  font-family: var(--FB);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .32);
}

.rv-txt {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(248, 243, 232, .6);
  line-height: 1.78;
}

.rv-prod {
  font-family: var(--FB);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g1);
  margin-top: 1.1rem;
  opacity: .8;
}

/* ═══ FAQ ═══ */
#faq {
  background: var(--f2);
  padding: 10rem 0;
  position: relative;
  overflow: hidden;
}

.faq-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4rem;
}

.faq-g {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start;
}

.faq-side {
  position: sticky;
  top: 100px;
}

.faq-hl {
  font-family: var(--FD);
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--iv);
  line-height: .92;
  letter-spacing: -.01em;
  margin-bottom: 1.2rem;
}

.faq-hl em {
  font-style: italic;
  color: var(--g2);
}

.faq-p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(248, 243, 232, .4);
  line-height: 1.85;
  margin-bottom: 2.5rem;
}

.faq-deco {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: .9rem 1.4rem;
  background: rgba(201, 168, 76, .08);
  border: 1px solid var(--bdr);
  border-radius: 14px;
}

.faq-deco i {
  color: var(--g2);
  font-size: 1.4rem;
}

.faq-deco span {
  font-family: var(--FB);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g2);
}

.fq {
  background: var(--f3);
  border: 1.5px solid var(--bdrw2);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .85rem;
  transition: var(--ease);
}

.fq.op {
  border-color: var(--bdr2);
  box-shadow: 0 0 30px rgba(201, 168, 76, .1);
}

.fq-q {
  padding: 1.4rem 1.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
  transition: .3s;
}

.fq-q:hover {
  background: rgba(201, 168, 76, .04);
}

.fq-qt {
  font-family: var(--FB);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--iv);
  flex: 1;
}

.fq.op .fq-qt {
  color: var(--g2);
}

.fq-ic {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--bdrw);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: rgba(248, 243, 232, .35);
  flex-shrink: 0;
  transition: var(--spring);
  background: var(--f4);
}

.fq.op .fq-ic {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border-color: var(--g1);
  transform: rotate(45deg);
  box-shadow: var(--shg);
}

.fq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, padding .3s;
}

.fq.op .fq-a {
  max-height: 280px;
  padding: 0 1.7rem 1.5rem;
}

.fq-a p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.12rem;
  color: rgba(248, 243, 232, .42);
  line-height: 1.78;
}

/* ═══ NEWSLETTER ═══ */
#subscribe {
  background: var(--f1);
  padding: 10rem 0;
  position: relative;
  overflow: hidden;
}

#subscribe::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(201, 168, 76, .08), transparent 60%);
  pointer-events: none;
}

#subscribe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(201, 168, 76, .02) 80px, rgba(201, 168, 76, .02) 81px);
  pointer-events: none;
}

.sub-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--g2), transparent 70%);
  opacity: .5;
  filter: blur(1px);
  z-index: 0;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) translateX(0) scale(.4);
    opacity: 0;
  }

  10% {
    opacity: .6;
  }

  90% {
    opacity: .4;
  }

  100% {
    transform: translateY(-100px) translateX(40px) scale(1.2);
    opacity: 0;
  }
}

.sub-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 0 2rem;
}

.sub-card-3d {
  position: relative;
  transform-style: preserve-3d;
  animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {

  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }

  50% {
    transform: translateY(-12px) rotateX(2deg);
  }
}

.sub-eyebrow {
  font-family: var(--FB);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 1.3rem;
}

.sub-eyebrow::before,
.sub-eyebrow::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .5));
}

.sub-eyebrow::after {
  background: linear-gradient(90deg, rgba(201, 168, 76, .5), transparent);
}

.sub-hl {
  font-family: var(--FD);
  font-size: clamp(2.8rem, 6vw, 6rem);
  color: var(--iv);
  line-height: .92;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}

.sub-hl em {
  font-style: italic;
  color: var(--g2);
  position: relative;
  display: inline-block;
}

.sub-hl em::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .3), transparent);
  border-radius: 4px;
  animation: underlineShine 3s ease-in-out infinite;
}

@keyframes underlineShine {

  0%,
  100% {
    transform: scaleX(.7);
    opacity: .5;
  }

  50% {
    transform: scaleX(1.1);
    opacity: 1;
  }
}

.sub-d {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(248, 243, 232, .42);
  margin-bottom: 3rem;
  line-height: 1.78;
}

.sub-box {
  background: linear-gradient(135deg, var(--f2), var(--f3));
  border: 1px solid var(--bdrw2);
  border-radius: 24px;
  padding: 3rem;
  text-align: left;
  box-shadow: var(--sh3);
  position: relative;
  overflow: hidden;
}

.sub-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 168, 76, .05) 60deg, transparent 120deg);
  animation: rotateGlow 8s linear infinite;
  pointer-events: none;
}

.sub-box>* {
  position: relative;
  z-index: 2 !important;
}

.sfl {
  font-family: var(--FB);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .35);
  display: block;
  margin-bottom: .4rem;
}

.sfi {
  background: var(--f3);
  border: 1px solid var(--bdrw);
  border-radius: 10px;
  padding: .85rem 1.15rem;
  color: var(--iv);
  font-family: var(--FB);
  font-size: 1.05rem;
  width: 100%;
  outline: none;
  transition: .3s;
}

.sfi:focus {
  border-color: var(--bdr2);
  background: var(--f4);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .08);
}

.sfi::placeholder {
  color: rgba(248, 243, 232, .22);
}

.sfrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .95rem;
}

.sfg {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.sfck {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.sfck input {
  accent-color: var(--g1);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

.sfck label {
  font-family: var(--FB);
  font-size: .95rem;
  color: rgba(248, 243, 232, .38);
  line-height: 1.55;
}

.btn-sub {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border: none;
  padding: 1.1rem;
  border-radius: 10px;
  font-family: var(--FB);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--ease);
  box-shadow: var(--shg);
  position: relative;
  overflow: hidden;
  z-index: 3;
}

.btn-sub::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, .3);
  border-radius: 50%;
  transition: width .6s, height .6s;
}

.btn-sub:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(201, 168, 76, .4);
}

.btn-sub:hover::before {
  width: 400px;
  height: 400px;
}

.btn-sub:active {
  transform: translateY(-1px) scale(.98);
}

.sub-ul {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .28);
  margin-top: 1.2rem;
}

.sub-ul a {
  color: var(--g2);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, .3);
}

/* Newsletter success animation */
.newsletter-success {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}

.newsletter-success.show {
  opacity: 1;
  pointer-events: all;
}

.ns-bg {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 23, .92);
  backdrop-filter: blur(20px);
}

.ns-box {
  position: relative;
  background: linear-gradient(135deg, var(--f3), var(--f4));
  border: 1px solid var(--bdr3);
  border-radius: 24px;
  padding: 3.5rem 4rem;
  text-align: center;
  box-shadow: 0 0 100px rgba(201, 168, 76, .3), var(--sh3);
  max-width: 480px;
  width: 90%;
}

.ns-envelope {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  position: relative;
  animation: envFly 1.2s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes envFly {
  0% {
    transform: translateY(-100px) scale(.5) rotate(-30deg);
    opacity: 0;
  }

  60% {
    transform: translateY(15px) scale(1.1) rotate(10deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.ns-envelope::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-radius: 18px;
  box-shadow: var(--shg);
}

.ns-envelope i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--f1);
}

.ns-envelope::after {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
  background: linear-gradient(135deg, var(--g3), var(--g4));
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  animation: checkPop .6s .8s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes checkPop {
  from {
    transform: translateX(-50%) rotate(-45deg) scale(0);
  }

  to {
    transform: translateX(-50%) rotate(-45deg) scale(1);
  }
}

.ns-title {
  font-family: var(--FD);
  font-size: 2rem;
  color: var(--iv);
  margin-bottom: .5rem;
  animation: fuUp .6s 1s both;
}

.ns-sub {
  font-family: var(--FB);
  font-size: .92rem;
  color: rgba(248, 243, 232, .55);
  margin-bottom: 1.5rem;
  animation: fuUp .6s 1.2s both;
}

.ns-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
}

.ns-confetti span {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--g2);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  opacity: 0;
}

.newsletter-success.show .ns-confetti span {
  animation: confettiBurst 1.2s .8s ease-out forwards;
}

@keyframes confettiBurst {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(var(--cx), var(--cy)) scale(1.2);
    opacity: 0;
  }
}

@keyframes fuUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ CONTACT ═══ */
#contact {
  background: var(--f3);
  padding: 10rem 0;
  position: relative;
  overflow: hidden;
}

#contact::before {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201, 168, 76, .06), transparent 65%);
  pointer-events: none;
}

.con-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
  z-index: 1;
}

.con-top {
  text-align: center;
  margin-bottom: 5rem;
}

.con-g {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  align-items: start;
}

.con-info-hl {
  font-family: var(--FD);
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  color: var(--iv);
  margin-bottom: 2.2rem;
  line-height: .95;
  letter-spacing: -.01em;
}

.ci {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
  padding: .6rem;
  border-radius: 12px;
  transition: .3s;
}

.ci:hover {
  background: rgba(201, 168, 76, .05);
}

.ci-ic {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(201, 168, 76, .1);
  border: 1px solid var(--bdr);
  color: var(--g2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  border-radius: 12px;
  transition: var(--spring);
}

.ci:hover .ci-ic {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border-color: var(--g1);
  transform: scale(1.1) rotate(-5deg);
}

.ci-l {
  font-family: var(--FB);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .32);
  margin-bottom: 4px;
}

.ci-v {
  font-family: var(--FB);
  font-size: 1rem;
  color: var(--iv);
  font-weight: 400;
}

.con-fb {
  background: var(--f2);
  border: 1px solid var(--bdrw2);
  border-radius: 22px;
  padding: 2.8rem;
  box-shadow: var(--sh2);
  position: relative;
  overflow: hidden;
}

.con-fb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--g1), var(--g3), var(--g1));
  background-size: 200% 100%;
  animation: stripFlow 4s linear infinite;
}

@keyframes stripFlow {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 200% 0;
  }
}

.con-fb h4 {
  font-family: var(--FD);
  font-size: 2rem;
  color: var(--iv);
  margin-bottom: 2rem;
  letter-spacing: -.01em;
}

.cfl {
  font-family: var(--FB);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .32);
  display: block;
  margin-bottom: .38rem;
}

.cfi {
  background: var(--f3);
  border: 1px solid var(--bdrw);
  border-radius: 10px;
  padding: .82rem 1.1rem;
  color: var(--iv);
  font-family: var(--FB);
  font-size: 1rem;
  width: 100%;
  outline: none;
  transition: .3s;
}

.cfi:focus {
  border-color: var(--bdr2);
  background: var(--f4);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .06);
}

.cfi::placeholder {
  color: rgba(248, 243, 232, .2);
}

.cfrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .95rem;
}

/* ═══ FOOTER ═══ */
footer {
  background: var(--f1);
  border-top: 1px solid var(--bdrw);
}

.f-strip {
  height: 3px;
  background: linear-gradient(90deg, var(--f5), var(--g1), var(--g3), var(--g1), var(--f5));
  background-size: 300% 100%;
  animation: fstrip 7s linear infinite;
}

@keyframes fstrip {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 300% 0;
  }
}

.f-info {
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--bdrw);
  padding: .95rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.f-pills {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.fpill {
  font-family: var(--FB);
  font-size: .85rem;
  font-weight: 700;
  padding: .25rem .82rem;
  border-radius: 5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid;
}

.fpill.g {
  color: var(--g2);
  border-color: var(--bdr);
  background: rgba(201, 168, 76, .07);
}

.fpill.f {
  color: var(--f8);
  border-color: rgba(93, 170, 131, .25);
  background: rgba(93, 170, 131, .07);
}

.fpill.w {
  color: rgba(248, 243, 232, .5);
  border-color: var(--bdrw2);
  background: rgba(255, 255, 255, .03);
}

.f-info-txt {
  font-family: var(--FB);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .22);
}

.f-main {
  max-width: 1360px;
  margin: 0 auto;
  padding: 5rem 4rem 3.5rem;
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr;
  gap: 4.5rem;
  border-bottom: 1px solid var(--bdrw);
}

.f-brand {
  font-family: var(--FD);
  font-size: 1.5rem;
  color: var(--iv);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .01em;
}

.f-brand-leaf {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--f5), var(--f6));
  border-radius: 50% 50% 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--g2);
}

.f-desc {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, 0.521);
  line-height: 1.82;
  max-width: 350px;
  margin-bottom: 1.8rem;
}

.f-soc {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
}

.fsc {
  width: 40px;
  height: 40px;
  background: var(--f3);
  border: 1px solid var(--bdrw);
  color: rgba(248, 243, 232, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--ease);
  text-decoration: none;
}

.fsc:hover {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border-color: var(--g1);
  transform: translateY(-3px);
  box-shadow: var(--shg);
}

.fch {
  font-family: var(--FB);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .75);
  margin-bottom: 1.3rem;
}

.flks {
  display: flex;
  flex-direction: column;
  gap: .62rem;
}

.flk {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.12rem;
  color: rgba(248, 243, 232, .65);
  cursor: pointer;
  transition: .3s;
  text-decoration: none;
}

.flk:hover {
  color: var(--g2);
  transform: translateX(5px);
}

.f-bot {
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.4rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.f-copy {
  font-family: var(--FB);
  font-size: .92rem;
  color: rgba(248, 243, 232, .55);
  letter-spacing: .06em;
}

/* ═══ DRAWERS ═══ */
.ov {
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 23, .85);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: .32s;
  z-index: 2000;
}

.ov.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  width: 430px;
  max-width: 95vw;
  background: var(--f2);
  border-left: 1px solid var(--bdrw2);
  transform: translateX(100%);
  transition: transform .44s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(13, 31, 23, .5);
}

.drawer.open {
  transform: translateX(0);
}

.dr-h {
  padding: 1.5rem;
  border-bottom: 1px solid var(--bdrw2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--f3);
}

.dr-title {
  font-family: var(--FD);
  font-size: 1.3rem;
  color: var(--iv);
}

.dr-x {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--bdrw);
  background: var(--f4);
  color: rgba(248, 243, 232, .4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  transition: var(--ease);
}

.dr-x:hover {
  background: rgba(201, 168, 76, .15);
  color: var(--g2);
  border-color: var(--bdr);
  transform: rotate(90deg);
}

.dr-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.dr-body::-webkit-scrollbar {
  width: 3px;
}

.dr-body::-webkit-scrollbar-thumb {
  background: var(--g1);
  border-radius: 2px;
}

.dr-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--bdrw);
  animation: slideInR .4s both;
}

@keyframes slideInR {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dr-img {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  background: var(--f3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--bdrw);
}

.dr-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dr-nm {
  font-family: var(--FB);
  font-weight: 600;
  font-size: .85rem;
  color: var(--iv);
  margin-bottom: 4px;
  line-height: 1.3;
}

.dr-pr {
  font-family: var(--FD);
  font-size: 1.1rem;
  color: var(--g2);
}

.dr-rm {
  background: var(--f4);
  border: 1px solid var(--bdrw);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: rgba(248, 243, 232, .35);
  transition: var(--ease);
  margin-left: auto;
  flex-shrink: 0;
}

.dr-rm:hover {
  background: rgba(201, 168, 76, .15);
  color: var(--g2);
  border-color: var(--bdr);
}

.dr-foot {
  padding: 1.5rem;
  border-top: 1px solid var(--bdrw2);
  background: var(--f3);
}

.empty-s {
  text-align: center;
  padding: 4rem;
  color: rgba(248, 243, 232, .3);
}

.empty-s i {
  font-size: 2.8rem;
  margin-bottom: 1.2rem;
  display: block;
  opacity: .2;
  animation: emptyFloat 3s ease-in-out infinite;
}

@keyframes emptyFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.empty-s p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
}

/* ═══ POLICY DOCUMENT STYLES ═══ */
.pol-doc {
  position: relative;
}

.pol-head {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bdrw2);
}

.pol-ic {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--f1);
  box-shadow: var(--shg);
}

.pol-head h2 {
  font-family: var(--FD);
  font-size: 2.2rem;
  color: var(--iv);
  line-height: 1.1;
  margin-bottom: .4rem;
}

.pol-head p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .4);
}

.pol-sec {
  margin-bottom: 1.8rem;
  padding: 1.2rem 1.4rem;
  background: var(--f3);
  border-radius: 14px;
  border-left: 3px solid var(--g1);
}

.pol-sec-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .6rem;
}

.pol-num {
  font-family: var(--FD);
  font-size: 1.2rem;
  color: var(--g2);
  background: rgba(201, 168, 76, .1);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--bdr);
}

.pol-sec h3 {
  font-family: var(--FB);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--iv);
}

.pol-sec p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .55);
  line-height: 1.65;
  padding-left: 42px;
}

/* ═══ CHECKOUT ═══ */
.co-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
}

.co-steps {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  position: relative;
  padding: 0 10px;
}

.co-steps::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--bdrw2);
  z-index: 0;
}

.co-steps::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 20px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  z-index: 1;
  transition: width .5s;
}

.co-steps.active::after {
  width: 50%;
}

.co-steps.done::after {
  width: 100%;
}

.co-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  position: relative;
}

.co-step-ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--f2);
  border: 2px solid var(--bdrw2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: rgba(248, 243, 232, .3);
  transition: var(--spring);
}

.co-step.active .co-step-ic {
  border-color: var(--g1);
  color: var(--g2);
  transform: scale(1.1);
}

.co-step.done .co-step-ic {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-color: var(--g1);
  color: var(--f1);
}

.co-step span {
  font-family: var(--FB);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .4);
}

.co-step.active span,
.co-step.done span {
  color: var(--iv);
}

.co-summary {
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}

.co-sec-title {
  font-family: var(--FB);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .4);
  margin-bottom: 1.2rem;
}

.co-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: .8rem;
  font-size: .92rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--bdrw);
}

.co-item:last-of-type {
  border-bottom: none;
}

.co-item-name {
  color: rgba(248, 243, 232, .5);
  font-family: var(--FI);
  font-style: italic;
  padding-right: 1rem;
}

.co-item-price {
  font-weight: 600;
  color: var(--iv);
  font-family: var(--FB);
  white-space: nowrap;
}

.co-totals {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 2px solid var(--bdrw2);
}

.co-tot-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .6rem;
  font-family: var(--FB);
  font-size: .9rem;
}

.co-tot-l {
  color: rgba(248, 243, 232, .4);
  letter-spacing: .05em;
}

.co-tot-v {
  color: var(--iv);
}

.co-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .8rem;
}

.co-grand-l {
  font-family: var(--FB);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g2);
}

.co-grand-v {
  font-family: var(--FD);
  font-size: 2.2rem;
  color: var(--g2);
}

.co-pay-badge {
  margin-top: 1.5rem;
  background: rgba(201, 168, 76, .08);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.co-pay-badge i {
  font-size: 1.3rem;
  color: var(--g2);
}

.co-pay-t {
  font-family: var(--FB);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .3);
}

.co-pay-v {
  font-family: var(--FB);
  font-size: .95rem;
  font-weight: 600;
  color: var(--g2);
}

.co-form {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

.co-input-grp {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

/* ═══ ORDER POPUP ═══ */
#orderPop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: .4s;
}

#orderPop.show {
  opacity: 1;
  pointer-events: all;
}

.op-bg {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 23, .92);
  backdrop-filter: blur(20px);
}

.op-box {
  position: relative;
  background: linear-gradient(135deg, var(--f3), var(--f4));
  border: 1px solid var(--bdr3);
  border-radius: 24px;
  padding: 3.5rem 4rem;
  text-align: center;
  box-shadow: 0 0 100px rgba(201, 168, 76, .25), var(--sh3);
  animation: popIn .6s cubic-bezier(.34, 1.56, .64, 1) both;
  max-width: 480px;
  width: 90%;
  overflow: hidden;
}

.op-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 168, 76, .06) 60deg, transparent 120deg);
  animation: rotateGlow 8s linear infinite;
  pointer-events: none;
}

.op-box>* {
  position: relative;
  z-index: 1;
}

@keyframes popIn {
  from {
    transform: scale(.6) translateY(40px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes rotateGlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.op-check {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--g1);
  opacity: 0;
  animation: ringExpand 1.2s .3s ease-out infinite;
}

@keyframes ringExpand {
  0% {
    transform: scale(.5);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.op-check-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--f1);
  box-shadow: var(--shg);
  animation: checkPop .6s .3s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes checkPop {
  from {
    transform: scale(0) rotate(-180deg);
  }

  to {
    transform: scale(1) rotate(0);
  }
}

.op-check i {
  animation: checkDraw .6s .8s both;
}

@keyframes checkDraw {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  60% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.op-title {
  font-family: var(--FD);
  font-size: 2rem;
  color: var(--iv);
  margin-bottom: .5rem;
  animation: fuUp .6s 1s both;
}

.op-sub {
  font-family: var(--FB);
  font-size: .9rem;
  color: rgba(248, 243, 232, .55);
  margin-bottom: 1.8rem;
  font-weight: 400;
  animation: fuUp .6s 1.2s both;
}

.op-id-box {
  background: rgba(201, 168, 76, .12);
  border: 1px solid var(--bdr2);
  border-radius: 14px;
  padding: 1.2rem 2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin-bottom: 1.8rem;
  animation: fuUp .6s 1.4s both;
}

.op-id-label {
  font-family: var(--FB);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .7);
}

.op-id-val {
  font-family: var(--FD);
  font-size: 1.7rem;
  color: var(--g2);
  letter-spacing: .06em;
}

.op-stages {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  animation: fuUp .6s 1.6s both;
}

.op-stage {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--FB);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .35);
}

.op-stage i {
  font-size: .85rem;
  color: var(--g2);
}

.op-stage.done {
  color: var(--g2);
}

.op-stage.done i {
  animation: stageBlink .6s both;
}

@keyframes stageBlink {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.op-timer {
  font-family: var(--FB);
  font-size: .78rem;
  color: rgba(248, 243, 232, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  animation: fuUp .6s 1.8s both;
}

.op-progress {
  width: 100%;
  height: 3px;
  background: rgba(201, 168, 76, .15);
  border-radius: 2px;
  margin-top: 1.5rem;
  overflow: hidden;
}

.op-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  border-radius: 2px;
  transition: width linear;
  position: relative;
}

.op-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
  border-radius: 2px;
}

.op-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
}

.op-confetti span {
  position: absolute;
  width: 8px;
  height: 14px;
  top: 30%;
  left: 50%;
  opacity: 0;
  animation: confettiFall 2.5s 1s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(1.2);
    opacity: 0;
  }
}

/* ═══ TOAST ═══ */
.toast-c {
  position: fixed;
  bottom: 2.2rem;
  right: 2.2rem;
  z-index: 9996;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.toast-i {
  background: var(--f3);
  color: var(--iv);
  padding: .9rem 1.4rem;
  border-radius: 12px;
  border-left: 4px solid var(--g1);
  box-shadow: var(--sh2);
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--FB);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .03em;
  animation: tIn .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes tIn {
  from {
    opacity: 0;
    transform: translateX(28px) scale(.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ═══ UTILITY BUTTONS ═══ */
.btn-main {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--f1);
  border: none;
  padding: 15px 32px;
  font-family: var(--FB);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: var(--shg);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-main::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, .25);
  border-radius: 50%;
  transition: width .6s, height .6s;
}

.btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(201, 168, 76, .4);
}

.btn-main:hover::before {
  width: 400px;
  height: 400px;
}

.btn-ghost-d {
  background: transparent;
  border: 1.5px solid var(--bdrw2);
  color: rgba(248, 243, 232, .55);
  padding: 14px 26px;
  font-family: var(--FB);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--ease);
}

.btn-ghost-d:hover {
  border-color: var(--bdr2);
  color: var(--g2);
}

.btn-sec-l {
  background: rgba(201, 168, 76, .08);
  border: 1px solid var(--bdr);
  color: var(--g2);
  padding: 14px 26px;
  font-family: var(--FB);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.btn-sec-l:hover {
  background: rgba(201, 168, 76, .14);
  border-color: var(--bdr2);
  transform: translateY(-2px);
}

/* ═══ SCROLL REVEAL ═══ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal.on {
  opacity: 1;
  transform: translateY(0);
}

.rd1 {
  transition-delay: .1s;
}

.rd2 {
  transition-delay: .2s;
}

.rd3 {
  transition-delay: .3s;
}

/* ═══ PRODUCT DETAIL PAGE ═══ */
.pdp-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8rem 4rem 6rem;
}

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 3rem;
  font-family: var(--FB);
  font-size: .82rem;
  color: rgba(248, 243, 232, .4);
}

.pdp-breadcrumb a {
  color: rgba(248, 243, 232, .5);
  text-decoration: none;
  transition: .3s;
}

.pdp-breadcrumb a:hover {
  color: var(--g2);
}

.pdp-breadcrumb span {
  color: rgba(248, 243, 232, .25);
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 6rem;
}

.pdp-img-wrap {
  position: sticky;
  top: 100px;
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  border-radius: 24px;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  overflow: hidden;
}

.pdp-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201, 168, 76, .06), transparent 70%);
}

.pdp-img {
  max-width: 100%;
  max-height: 450px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(13, 31, 23, .5));
  position: relative;
  z-index: 1;
}

.pdp-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--FB);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g2);
  background: rgba(201, 168, 76, .08);
  border: 1px solid var(--bdr);
  padding: .4rem 1rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.pdp-name {
  font-family: var(--FD);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  color: var(--iv);
  line-height: 1;
  margin-bottom: 1.2rem;
  letter-spacing: -.01em;
}

.pdp-id {
  font-family: var(--FB);
  font-size: .78rem;
  color: rgba(248, 243, 232, .3);
  margin-bottom: 1.5rem;
  letter-spacing: .08em;
}

.pdp-price {
  font-family: var(--FD);
  font-size: 2.6rem;
  color: var(--g2);
  margin-bottom: 2rem;
}

.pdp-desc {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(248, 243, 232, .55);
  line-height: 1.85;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.pdp-qty-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.pdp-qty-label {
  font-family: var(--FB);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, .4);
}

.pdp-qty {
  display: flex;
  align-items: center;
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  border-radius: 12px;
  overflow: hidden;
}

.pdp-qty button {
  width: 44px;
  height: 48px;
  background: transparent;
  border: none;
  color: var(--iv);
  font-size: 1.1rem;
  cursor: pointer;
  transition: .3s;
}

.pdp-qty button:hover {
  background: rgba(201, 168, 76, .1);
  color: var(--g2);
}

.pdp-qty input {
  width: 60px;
  height: 48px;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  color: var(--iv);
  font-family: var(--FB);
  font-size: 1.1rem;
  font-weight: 600;
}

.pdp-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.pdp-actions .btn-main {
  flex: 1;
  min-width: 200px;
  justify-content: center;
}

.pdp-wish-btn {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  color: rgba(248, 243, 232, .4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: var(--ease);
  flex-shrink: 0;
}

.pdp-wish-btn:hover,
.pdp-wish-btn.on {
  background: rgba(201, 168, 76, .15);
  color: var(--g2);
  border-color: var(--bdr);
}

.pdp-not-found {
  text-align: center;
  padding: 12rem 2rem;
}

.pdp-not-found i {
  font-size: 4rem;
  color: rgba(248, 243, 232, .15);
  margin-bottom: 2rem;
  display: block;
}

.pdp-not-found h2 {
  font-family: var(--FD);
  font-size: 2.5rem;
  color: var(--iv);
  margin-bottom: 1rem;
}

.pdp-not-found p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(248, 243, 232, .4);
  margin-bottom: 2.5rem;
}

.related-section {
  margin-top: 6rem;
}

.related-hd {
  margin-bottom: 3rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--bdrw);
}

.related-hd h3 {
  font-family: var(--FD);
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--iv);
  line-height: 1;
}

.related-hd p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 243, 232, .4);
  margin-top: .5rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}

.related-grid .pc-wrap {
  grid-column: span 1 !important;
}

/* ═══ WISHLIST PAGE ═══ */
.wl-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8rem 4rem 6rem;
}

.wl-hd {
  margin-bottom: 4rem;
  text-align: center;
}

.wl-hd h2 {
  font-family: var(--FD);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--iv);
  line-height: .95;
  margin-bottom: 1rem;
}

.wl-hd h2 em {
  font-style: italic;
  color: var(--g2);
}

.wl-hd p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(248, 243, 232, .4);
}

.wl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.wl-card {
  background: var(--f3);
  border: 1px solid var(--bdrw2);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .4s, box-shadow .4s;
}

.wl-card:hover {
  transform: translateY(-6px);
  border-color: var(--bdr2);
  box-shadow: 0 20px 60px rgba(13, 31, 23, .5);
}

.wl-card-img {
  height: 200px;
  background: var(--f2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
}

.wl-card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(13, 31, 23, .5));
}

.wl-card-body {
  padding: 1.2rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wl-card-cat {
  font-family: var(--FB);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g2);
  margin-bottom: 6px;
}

.wl-card-name {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--iv);
  line-height: 1.35;
  margin-bottom: .7rem;
  cursor: pointer;
}

.wl-card-name:hover {
  color: var(--g2);
}

.wl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.wl-card-price {
  font-family: var(--FD);
  font-size: 1.4rem;
  color: var(--g2);
}

.wl-card-actions {
  display: flex;
  gap: .5rem;
}

.wl-card-actions button {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--f4);
  border: 1px solid var(--bdrw);
  color: rgba(248, 243, 232, .45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: var(--ease);
}

.wl-card-actions button:hover {
  border-color: var(--g1);
  color: var(--g2);
  background: rgba(201, 168, 76, .1);
}

.wl-empty {
  text-align: center;
  padding: 6rem 2rem;
}

.wl-empty i {
  font-size: 4rem;
  color: rgba(248, 243, 232, .15);
  margin-bottom: 2rem;
  display: block;
}

.wl-empty h3 {
  font-family: var(--FD);
  font-size: 2rem;
  color: var(--iv);
  margin-bottom: 1rem;
}

.wl-empty p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(248, 243, 232, .4);
  margin-bottom: 2.5rem;
}

/* ═══ PAGE HEADER (for standalone pages) ═══ */
.page-hd {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8rem 4rem 3rem;
  text-align: center;
}

.page-hd .sec-eye {
  justify-content: center;
}

.page-hd h2 {
  font-family: var(--FD);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  color: var(--iv);
  line-height: .95;
  letter-spacing: -.01em;
}

.page-hd h2 em {
  font-style: italic;
  color: var(--g2);
}

.page-hd p {
  font-family: var(--FI);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(248, 243, 232, .4);
  max-width: 600px;
  margin: 1rem auto 0;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1300px) {

  .prod-grid .pc-wrap:nth-child(6n+1),
  .prod-grid .pc-wrap:nth-child(6n+2),
  .prod-grid .pc-wrap:nth-child(6n+4),
  .prod-grid .pc-wrap:nth-child(6n+5) {
    grid-column: span 6;
  }

  .prod-grid .pc-wrap:nth-child(6n+3),
  .prod-grid .pc-wrap:nth-child(6n+6) {
    grid-column: span 6;
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(max-width:1200px) {
  .shop-wrap {
    grid-template-columns: 240px 1fr;
  }

  .prod-grid .pc-wrap {
    grid-column: span 6 !important;
  }

  .pdp-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .pdp-img-wrap {
    position: relative;
    top: 0;
  }
}

@media(max-width:1100px) {
  .f-main {
    grid-template-columns: 1fr 1fr;
  }

  .rev-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:900px) {
  .shop-wrap {
    grid-template-columns: 1fr;
  }

  .cat-nav {
    position: relative;
    top: 0;
    height: auto;
  }

  .about-wrap,
  .con-g,
  .faq-g {
    grid-template-columns: 1fr;
  }

  .faq-side {
    position: relative;
    top: 0;
  }

  .ab-sm {
    right: 1rem;
  }

  #hero {
    aspect-ratio: 16/9;
    min-height: 300px;
  }

  .nlinks {
    display: none;
  }

  .co-layout {
    grid-template-columns: 1fr;
  }

  .pdp-wrap,
  .wl-wrap,
  .page-hd {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media(max-width:640px) {

  .f-main,
  .f-info,
  .f-bot {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #nav {
    padding: 10px 16px;
  }

  .nb {
    padding: 0 16px;
    gap: .5rem;
  }

  .about-wrap,
  .con-wrap,
  .faq-wrap,
  .why-wrap,
  .rev-wrap {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sfrow,
  .cfrow,
  .co-row {
    grid-template-columns: 1fr;
  }

  .rev-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .f-main {
    grid-template-columns: 1fr;
  }

  .cat-section-blk {
    padding: 3rem 1.5rem 0;
  }

  .prod-grid .pc-wrap {
    grid-column: span 12 !important;
  }

  .op-box {
    padding: 2.5rem 1.8rem;
  }

  .ns-box {
    padding: 2.5rem 1.8rem;
  }

  .sub-box {
    padding: 2rem 1.5rem;
  }

  .wl-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .pdp-wrap,
  .wl-wrap,
  .page-hd {
    padding: 6rem 1.5rem 4rem;
  }
}