:root {
  --background: #081328;
  --foreground: #f7fbff;
  --primary: #8eff47;
  --primary-dark: #3f9d20;
  --muted: #a9bad7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

main {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #081328 0%, #0b1730 55%, #071120 100%);
  background-size: 44px 44px, 44px 44px, auto;
}

.sky-glow { position: absolute; border-radius: 999px; filter: blur(100px); opacity: .24; pointer-events: none; }
.sky-glow-one { width: 560px; height: 560px; background: #425dff; top: 60px; right: -180px; }
.sky-glow-two { width: 430px; height: 430px; background: #56ff65; top: 540px; left: -280px; opacity: .11; }

.site-header {
  width: min(1180px, calc(100% - 36px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 40;
  border-bottom: 1px solid rgba(155,196,255,.18);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: white; text-decoration: none; font: 900 1.15rem/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1.1px; }
.brand em { color: var(--primary); font-style: normal; }
.brand-gem { width: 36px; height: 36px; display: grid; place-items: center; color: #0c1d30; background: var(--primary); border: 3px solid #cfffb2; border-radius: 9px; transform: rotate(-5deg); box-shadow: 0 5px 0 var(--primary-dark); font-size: 1rem; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: #b9c8df; font-size: .94rem; font-weight: 800; text-decoration: none; transition: color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--primary); }
.menu-button { display: none; width: 43px; height: 43px; border: 1px solid #355785; border-radius: 10px; background: #102245; color: white; place-items: center; cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { width: 20px; height: 2px; display: block; position: relative; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-button.is-open .menu-icon { background: transparent; }
.menu-button.is-open .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-button.is-open .menu-icon::after { top: 0; transform: rotate(-45deg); }

.hero { width: min(1180px, calc(100% - 36px)); min-height: 590px; margin: 0 auto; display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: 40px; position: relative; z-index: 1; }
.hero-copy { padding: 62px 0 74px; }
.eyebrow, .section-kicker { color: var(--primary); font-size: .8rem; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; color: #d8ffc2; border: 1px solid #6aca42; border-radius: 7px; background: rgba(92,203,55,.12); box-shadow: inset 0 0 15px rgba(142,255,71,.08); }
.hero h1 { margin: 24px 0 18px; color: white; font: 900 clamp(4rem, 8vw, 7.3rem)/.82 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; text-shadow: 0 6px 0 #173054, 0 14px 30px rgba(0,0,0,.35); }
.hero h1 span { color: var(--primary); -webkit-text-stroke: 2px #cfffb4; text-shadow: 0 6px 0 #328814, 0 12px 30px rgba(93,255,49,.22); }
.hero-copy > p { max-width: 560px; margin: 0 0 30px; color: #b7c8e1; font-size: 1.08rem; line-height: 1.7; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px; color: #071524; background: var(--primary); border: 3px solid #d5ffbd; border-radius: 11px; box-shadow: 0 6px 0 var(--primary-dark), 0 15px 30px rgba(70,212,35,.18); font-weight: 900; text-decoration: none; text-transform: uppercase; transition: transform .18s ease, filter .18s ease; }
.hero-button:hover { filter: brightness(1.06); transform: translateY(-2px); }
.hero-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--primary-dark); }
.hero-trust { margin-top: 23px; display: flex; align-items: center; gap: 8px; color: #8ea2c2; font-size: .88rem; font-weight: 700; }
.hero-trust span { width: 20px; height: 20px; display: grid; place-items: center; color: #071524; background: var(--primary); border-radius: 50%; font-size: .72rem; }

.hero-showcase { min-height: 490px; display: grid; place-items: center; position: relative; isolation: isolate; }
.hero-showcase::before { content: ""; width: min(450px, 90%); aspect-ratio: 1; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(120,88,255,.44), rgba(33,77,140,.12) 54%, transparent 70%); filter: blur(6px); }
.showcase-ring { width: min(390px, 82%); aspect-ratio: 1; position: absolute; border: 2px solid rgba(155,198,255,.2); border-radius: 50%; box-shadow: inset 0 0 70px rgba(73,111,255,.11), 0 0 60px rgba(42,84,200,.13); animation: spin 18s linear infinite; }
.showcase-ring::before, .showcase-ring::after { content: ""; width: 12px; height: 12px; position: absolute; top: 25px; left: 77px; background: var(--primary); border: 3px solid #d7ffc1; transform: rotate(45deg); box-shadow: 0 0 18px var(--primary); }
.showcase-ring::after { inset: auto 48px 73px auto; background: #6f6cff; border-color: #b9b8ff; box-shadow: 0 0 18px #6f6cff; }
@keyframes spin { to { transform: rotate(360deg); } }
.floating-chip { position: absolute; z-index: 3; padding: 9px 14px; color: white; background: #152b51; border: 1px solid #426899; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.25); font-weight: 900; font-size: .78rem; line-height: 1; letter-spacing: 1.5px; }
.chip-one { top: 92px; right: 18px; color: #e4c7ff; border-color: #8f5cd6; transform: rotate(4deg); }
.chip-two { bottom: 98px; left: 0; color: #c9ffad; border-color: #5cb837; transform: rotate(-5deg); }

.fruit-art { width: 100%; aspect-ratio: 1; display: block; position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.34)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.fruit-art-large { width: min(430px, 88%); filter: drop-shadow(0 24px 24px rgba(0,0,0,.42)); animation: fruitFloat 4s ease-in-out infinite; }
@keyframes fruitFloat { 0%,100% { transform: translateY(4px) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

.store-section { position: relative; z-index: 2; padding: 74px max(18px, calc((100vw - 1180px) / 2)) 92px; background: linear-gradient(180deg, rgba(12,29,58,.66), #0a1730 18%, #0a1730 88%, rgba(8,19,40,.5)); border-top: 1px solid rgba(92,132,189,.2); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
.section-heading h2, .how-section h2 { margin: 9px 0 0; font: 900 clamp(2.1rem, 5vw, 3.8rem)/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1.2px; }
.section-heading > p { max-width: 330px; margin: 0; color: #91a6c6; font-size: .94rem; line-height: 1.6; text-align: right; }
.fruit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fruit-card { --fruit-accent: var(--primary); position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(24,52,94,.98), rgba(11,27,55,.98)); border: 1px solid color-mix(in srgb, var(--fruit-accent) 52%, #2a466f); border-radius: 15px; box-shadow: 0 7px 0 rgba(3,10,24,.8), 0 18px 35px rgba(1,8,21,.18), inset 0 1px rgba(255,255,255,.07); transition: transform .22s ease, border-color .22s ease; }
.fruit-card:hover { transform: translateY(-6px); border-color: var(--fruit-accent); }
.fruit-card:hover .fruit-art { transform: scale(1.07) rotate(2deg); }
.rarity-badge { position: absolute; z-index: 5; top: 13px; left: 13px; padding: 6px 9px; color: white; background: rgba(7,17,35,.82); border: 1px solid color-mix(in srgb, var(--fruit-accent) 65%, white); border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: .75rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.fruit-stage { min-height: 205px; padding: 19px 26px 4px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--fruit-accent) 20%, transparent), transparent 63%); }
.fruit-halo { width: 130px; height: 130px; position: absolute; border-radius: 50%; background: var(--fruit-accent); filter: blur(50px); opacity: .18; }
.card-content { padding: 10px 18px 19px; }
.card-content h3 { margin: 0; font: 900 1.28rem/1, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .6px; }
.card-content p { min-height: 67px; margin: 9px 0 16px; color: #a8b9d2; font-size: .88rem; line-height: 1.5; }
.unlock-button, .get-code-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--fruit-accent); color: #071524; border: 2px solid color-mix(in srgb, var(--fruit-accent) 55%, white); border-radius: 9px; box-shadow: 0 5px 0 color-mix(in srgb, var(--fruit-accent) 52%, #081328); font-size: .84rem; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.unlock-button:hover, .get-code-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.unlock-button:active, .get-code-button:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--fruit-accent) 52%, #081328); }
.noscript-message { padding: 20px; color: white; background: #7b2438; border-radius: 10px; }

.how-section { width: min(850px, calc(100% - 36px)); margin: 0 auto; padding: 102px 0; text-align: center; }
.how-section h2 { margin-top: 13px; }
.how-section p { max-width: 600px; margin: 18px auto 0; color: #9eb1cf; font-size: 1rem; line-height: 1.7; }
footer { min-height: 100px; padding: 26px max(18px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #050d1b; border-top: 1px solid #1c365a; }
footer p { margin: 0; color: #8095b5; font-size: .9rem; }
.footer-brand { transform: scale(.9); transform-origin: left center; }

.modal-overlay { position: fixed; inset: 0; z-index: 100; padding: 14px; display: grid; place-items: center; background: rgba(2,8,20,.78); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease; }
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open { opacity: 1; }
.fruit-modal { --fruit-accent: var(--primary); width: min(440px, 100%); max-height: calc(100vh - 28px); padding: 0 25px 25px; position: relative; overflow: auto; color: white; background: linear-gradient(160deg, #172d55, #08152c 74%); border: 2px solid color-mix(in srgb, var(--fruit-accent) 56%, #41608e); border-radius: 18px; box-shadow: 0 22px 90px rgba(0,0,0,.65), 0 0 45px color-mix(in srgb, var(--fruit-accent) 14%, transparent); transform: translateY(16px) scale(.97); transition: transform .18s ease; }
.modal-overlay.is-open .fruit-modal { transform: translateY(0) scale(1); }
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; position: absolute; top: 14px; right: 14px; z-index: 10; padding: 0 0 3px; color: white; background: rgba(5,14,31,.75); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.modal-art-wrap { height: 250px; margin: 0 -25px 20px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--fruit-accent) 24%, transparent), transparent 66%); }
.modal-art-wrap .fruit-art-large { width: 230px; }
.modal-halo { width: 160px; height: 160px; position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fruit-accent) 50%, transparent); box-shadow: 0 0 50px color-mix(in srgb, var(--fruit-accent) 17%, transparent), inset 0 0 25px rgba(255,255,255,.05); }
.modal-rarity { position: absolute; bottom: 12px; padding: 6px 12px; color: var(--fruit-accent); background: rgba(5,14,31,.9); border: 1px solid var(--fruit-accent); border-radius: 7px; font-size: .75rem; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.modal-copy { text-align: center; }
.modal-copy h2 { margin: 0; font: 900 2.25rem/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .7px; }
.modal-copy p { margin: 12px 0 0; color: #aebfda; font-size: .95rem; line-height: 1.6; }
.get-code-button { margin-top: 22px; min-height: 51px; font-size: .88rem; }
.modal-note { margin: 12px 0 0; color: #8498b8; font-size: .8rem; text-align: center; }

@media (max-width: 960px) {
  .hero { min-height: auto; grid-template-columns: 1fr .78fr; }
  .hero h1 { font-size: clamp(3.8rem, 9.8vw, 6rem); }
  .hero-showcase { min-height: 420px; }
  .fruit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-header { height: 68px; }
  .menu-button { display: grid; }
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 18px; flex-direction: column; align-items: stretch; gap: 6px; background: rgba(8,19,40,.98); border: 1px solid #2a4773; border-radius: 0 0 14px 14px; box-shadow: 0 20px 35px rgba(0,0,0,.35); }
  .nav-links.nav-open { display: flex; }
  .nav-links a { padding: 12px 10px; }
  .hero { display: flex; flex-direction: column; gap: 0; text-align: center; }
  .hero-copy { padding: 60px 0 18px; }
  .hero-copy > p { margin-inline: auto; }
  .hero-trust { justify-content: center; }
  .hero-showcase { width: 100%; min-height: 370px; }
  .showcase-ring { width: 310px; }
  .fruit-art-large { width: 330px; }
  .chip-one { top: 55px; right: 7%; }
  .chip-two { bottom: 54px; left: 4%; }
  .store-section { padding-top: 60px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 14px; text-align: left; }
  .fruit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .fruit-stage { min-height: 180px; padding-inline: 18px; }
  .card-content p { min-height: 82px; }
  footer { flex-direction: column; justify-content: center; text-align: center; }
}

@media (max-width: 440px) {
  .site-header, .hero { width: min(100% - 24px, 1180px); }
  .brand { font-size: 1rem; }
  .brand-gem { width: 33px; height: 33px; }
  .hero-copy { padding-top: 48px; }
  .hero h1 { font-size: 3.65rem; }
  .hero-showcase { min-height: 325px; }
  .fruit-art-large { width: 285px; }
  .showcase-ring { width: 268px; }
  .floating-chip { padding: 7px 9px; font-size: .7rem; }
  .fruit-grid { grid-template-columns: 1fr; }
  .fruit-stage { min-height: 245px; padding-inline: 58px; }
  .card-content { padding-inline: 20px; }
  .card-content p { min-height: auto; }
  .how-section { padding: 80px 0; }
}

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