:root {
  --bg: #070605;
  --panel: rgba(20, 17, 12, 0.92);
  --line: rgba(212, 175, 55, 0.28);
  --gold: #e0c36a;
  --gold-deep: #b8922a;
  --text: #f6f1e7;
  --muted: #b3a790;
  --up: #3dce8b;
  --down: #ff6b6b;
  --flat: #c8bda8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, "Segoe UI", sans-serif;
}

body {
  position: relative;
  padding: 0 16px 40px;
}

.welcome {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 195, 106, 0.16), transparent 34%),
    #070605;
  cursor: pointer;
}

.welcome-case {
  position: relative;
  width: min(440px, 100%);
  padding: 54px 36px 40px;
  text-align: center;
}

.welcome-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.welcome-frame rect {
  fill: none;
  stroke: #e0c36a;
  stroke-width: 1.4;
  stroke-dasharray: 1460;
  stroke-dashoffset: 1460;
  animation: welcome-draw 1.7s ease forwards 0.15s;
}

.welcome-logo {
  position: relative;
  width: min(280px, 72vw);
  height: auto;
  opacity: 0;
  animation: welcome-rise 0.9s ease forwards 0.85s;
}

.welcome-line {
  position: relative;
  margin: 18px 0 0;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  animation: welcome-rise 0.8s ease forwards 1.35s;
}

.welcome-line::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, #f8e7b0, transparent);
}

.welcome-gem {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, #fff, #f8e7b0 55%, #e0c36a);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 8px rgba(240, 215, 140, 0.9));
  opacity: 0;
  animation: welcome-gem 1.4s ease-in-out infinite 1.5s;
}

.welcome-gem:nth-child(2) { top: 18px; left: 22px; }
.welcome-gem:nth-child(3) { top: 18px; right: 22px; animation-delay: 1.7s; }
.welcome-gem:nth-child(4) { bottom: 18px; left: 28px; animation-delay: 1.9s; }
.welcome-gem:nth-child(5) { bottom: 18px; right: 28px; width: 8px; height: 8px; animation-delay: 2.1s; }

.welcome.is-leaving {
  animation: welcome-leave 0.75s ease forwards;
  pointer-events: none;
}

body.welcome-on { overflow: hidden; }

body.welcome-on > :not(.welcome) {
  opacity: 0;
}

body.is-page-in > :not(.welcome) {
  animation: page-fade-in 0.95s ease forwards;
}

@keyframes welcome-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes welcome-gem {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

@keyframes welcome-leave {
  to { opacity: 0; visibility: hidden; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-frame rect,
  .welcome-logo,
  .welcome-line,
  .welcome-gem { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .welcome.is-leaving,
  body.is-page-in > :not(.welcome) { animation-duration: 0.2s; }
}

.glow {
  position: fixed;
  inset: -20vh auto auto 50%;
  width: 70vw;
  height: 50vh;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 68%);
  pointer-events: none;
}

.top, main, footer, .slider {
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.slider {
  margin: 18px auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #100e0b;
  aspect-ratio: 16 / 7;
}

.slider-viewport,
.slider-track,
.slider-track img {
  width: 100%;
  height: 100%;
}

.slider-track {
  display: flex;
  transition: transform 0.45s ease;
}

.slider-track img {
  flex: 0 0 100%;
  object-fit: cover;
  display: block;
}

.slider-glint {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.slider.is-glinting {
  box-shadow: inset 0 0 48px rgba(224, 195, 106, 0.42);
}

.slider.is-glinting .slider-glint { animation: slider-glint-fade 0.72s ease forwards; }

.slider-sheen {
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 224, 0.92), rgba(224, 195, 106, 0.55), transparent);
  transform: translateX(-170%);
}

.slider.is-glinting .slider-sheen { animation: slider-sheen 0.72s ease forwards; }

.slider-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8e7b0 55%, #e0c36a 100%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 8px rgba(240, 215, 140, 0.95));
  opacity: 0;
}

.slider-spark.pearl {
  width: 9px;
  height: 9px;
  background: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
}

.slider-spark:nth-child(2) { top: 22%; left: 18%; }
.slider-spark:nth-child(3) { top: 58%; left: 36%; }
.slider-spark:nth-child(4) { top: 28%; left: 54%; }
.slider-spark:nth-child(5) { top: 64%; left: 72%; }
.slider-spark:nth-child(6) { top: 24%; left: 86%; }

.slider.is-glinting .slider-spark { animation: slider-spark 0.72s ease forwards; }
.slider.is-glinting .slider-spark:nth-child(3) { animation-delay: 0.08s; }
.slider.is-glinting .slider-spark:nth-child(4) { animation-delay: 0.14s; }
.slider.is-glinting .slider-spark:nth-child(5) { animation-delay: 0.06s; }
.slider.is-glinting .slider-spark:nth-child(6) { animation-delay: 0.18s; }

@keyframes slider-glint-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slider-sheen {
  0% { transform: translateX(-170%); }
  100% { transform: translateX(320%); }
}

@keyframes slider-spark {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.2) rotate(18deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(36deg); }
}

@media (prefers-reduced-motion: reduce) {
  .slider.is-glinting,
  .slider.is-glinting .slider-glint,
  .slider.is-glinting .slider-sheen,
  .slider.is-glinting .slider-spark { animation: none; box-shadow: none; }
}

.slider-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 6, 5, 0.62);
  color: #f6f1e7;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.slider-nav.prev { left: 10px; }
.slider-nav.next { right: 10px; }

.slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 241, 231, 0.45);
  cursor: pointer;
}

.slider-dots button.active { background: var(--gold); }

@media (max-width: 720px) {
  .slider { aspect-ratio: 16 / 9; }
}

.top {
  position: sticky;
  top: 0;
  z-index: 15;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #070605;
}

.top-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 0 14px;
}

@media (max-width: 719px) {
  .top-bar { width: min(1100px, calc(100% - 32px)); }
}

.header-actions {
  position: relative;
  z-index: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo,
.ig-link,
.status { position: relative; z-index: 1; }

.jewel-glint {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glint-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 224, 0.72), rgba(224, 195, 106, 0.28), transparent);
  animation: glint-sheen 3.8s ease-in-out infinite;
}

.glint-star {
  position: absolute;
  width: 11px;
  height: 11px;
  background: linear-gradient(180deg, #fff 0%, #f8e7b0 55%, #e0c36a 100%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px rgba(240, 215, 140, 0.95));
  animation: glint-twinkle 2.6s ease-in-out infinite;
}

.glint-star.pearl {
  width: 8px;
  height: 8px;
  background: #fff;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95));
}

.glint-star:nth-child(3) { top: 22%; left: 8%; }
.glint-star:nth-child(4) { top: 64%; left: 28%; animation-delay: 0.6s; }
.glint-star:nth-child(5) { top: 18%; left: 50%; animation-delay: 1.2s; }
.glint-star:nth-child(6) { top: 62%; left: 72%; animation-delay: 0.4s; }
.glint-star:nth-child(7) { top: 24%; left: 90%; animation-delay: 1.6s; }

.glint-star.slide {
  top: 36%;
  left: 0;
  width: 18px;
  height: 18px;
  animation: glint-slide 5.2s ease-in-out infinite;
}

@keyframes glint-sheen {
  0% { transform: translateX(-140%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(280%); opacity: 0; }
}

@keyframes glint-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.55) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

@keyframes glint-slide {
  0% { left: -6%; opacity: 0; transform: scale(0.4) rotate(0deg); }
  16% { opacity: 1; }
  55% { left: 74%; opacity: 1; transform: scale(1) rotate(28deg); }
  100% { left: 96%; opacity: 0; transform: scale(0.35) rotate(50deg); }
}

.ig-link,
.wa-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f6f1e7;
}

.ig-link {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(20, 17, 12, 0.9);
  animation: ig-blink 1.15s ease-in-out infinite;
}

@keyframes ig-blink {
  0%, 100% {
    color: #f6f1e7;
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(20, 17, 12, 0.9);
    box-shadow: 0 0 0 0 rgba(225, 48, 108, 0);
  }
  50% {
    color: #fff;
    border-color: #fff;
    background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e 28%, #d62976 62%, #962fbf 85%, #4f5bd5);
    box-shadow: 0 0 0 6px rgba(214, 41, 118, 0.28), 0 0 22px rgba(250, 126, 30, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-link,
  .glint-sheen,
  .glint-star { animation: none; }
}

.ig-link svg,
.wa-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.quick-dock {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  align-items: center;
  gap: 10px;
}

.ig-link[hidden],
.wa-link[hidden],
.contact[hidden],
.map-button[hidden] { display: none; }

.wa-link {
  display: none;
}

.contact {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.contact .eyebrow { margin-bottom: 6px; }

#address-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.phone-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.map-button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d78c, #b8922a);
  color: #1a1408;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.copy {
  margin-top: 8px;
  letter-spacing: 0.02em;
}

@media (max-width: 820px) {
  body { padding-bottom: 96px; }

  .quick-dock { display: flex; }

  .wa-link {
    display: inline-flex;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  .wa-link svg { width: 32px; height: 32px; }

  .install-bar:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: min(1100px, 100%);
    margin: 12px auto 0;
  }
}

.install-bar,
.install-sheet[hidden],
.notify-bar[hidden] { display: none; }

.notify-bar:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: min(1100px, 100%);
  margin: 12px auto 0;
}

.notify-bar span {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notify-bar button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d78c, #b8922a);
  color: #1a1408;
  font-weight: 700;
  cursor: pointer;
}

.install-bar span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.install-bar button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(20, 17, 12, 0.9);
  color: #f6f1e7;
  cursor: pointer;
}

.install-bar svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.install-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}

.install-card {
  position: relative;
  width: min(420px, 100%);
  margin-bottom: 8px;
  padding: 22px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #14110c;
}

.install-card h2 {
  margin: 0 36px 12px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
}

.install-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.55;
}

.install-card li + li { margin-top: 8px; }

.install-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.logo {
  width: min(196px, 43vw);
  height: auto;
  display: block;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8a8172;
  box-shadow: 0 0 0 0 rgba(61, 206, 139, 0.6);
}

.status.live .dot {
  background: var(--up);
  animation: pulse 1.6s infinite;
}

.status.wait .dot { background: #e0b44c; }
.status.down .dot { background: var(--down); }

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(61, 206, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 206, 139, 0); }
}

.hero {
  margin: 28px 0 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(224, 195, 106, 0.08), transparent 42%),
    var(--panel);
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
}

h1, h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

h1 {
  margin: 4px 0 14px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.95;
}

h2 {
  margin: 28px 0 12px;
  font-size: 32px;
  color: var(--gold);
}

.hero-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-prices div, .card {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
}

.hero-prices div {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-prices span, .card .label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-prices strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(28px, 4vw, 42px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hero-prices { grid-template-columns: 1fr; }
  .hero-prices strong { font-size: 36px; }
}

.updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.16);
}

.card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.day-change {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 13px;
}

.hero .day-change {
  margin: -6px 0 12px;
  font-size: 18px;
}

.card .price {
  text-align: right;
}

.card .price b {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.up, .up b { color: var(--up); }
.down, .down b { color: var(--down); }
.flat b { color: var(--text); }

.card.flash {
  animation: flash 0.7s ease;
}

@keyframes flash {
  0% { border-color: var(--gold); background: rgba(224, 195, 106, 0.16); }
  100% { border-color: rgba(212, 175, 55, 0.16); }
}

.converter {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(224, 195, 106, 0.08), transparent 42%),
    var(--panel);
}

.converter h2 { margin-top: 4px; }

.hint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.converter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.converter-form label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.converter-form select,
.converter-form input {
  width: 100%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  background: #0c0b09;
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-size: 18px;
}

.calc-summary {
  margin: 16px 0 12px;
  font-size: 16px;
}

footer {
  margin-top: 36px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

footer p { margin: 0 0 6px; }
footer a { color: var(--gold); text-decoration: none; }

@media (max-width: 420px) {
  .card .price b { font-size: 16px; }
  .welcome { padding: 16px; }
  .welcome-case { padding: 42px 20px 32px; }
  .welcome-line { font-size: 11px; letter-spacing: 0.14em; }
}

@media (min-width: 720px) {
  body { padding: 28px 24px 56px; }
  .board { grid-template-columns: 1fr 1fr; }
  .card h3 { font-size: 17px; }
  .converter-form { grid-template-columns: 1.4fr 0.8fr; }
}

@media (min-width: 1040px) {
  .board { grid-template-columns: repeat(3, 1fr); }
}