:root { --page-bg:#071a1a; --panel:rgba(8,48,45,.72); --line:rgba(255,209,102,.26); --text:#fffaf0; --muted:#bfd9ca; --cyan:#70e5cc; --violet:#ff9d64; --amber:#ffd166; }
body { background:radial-gradient(circle at 88% 5%,rgba(255,187,86,.16),transparent 26%),radial-gradient(circle at 4% 38%,rgba(57,196,159,.13),transparent 28%),#071a1a; }
.text-gradient { background:linear-gradient(90deg,#fff4c4,#ffd166 46%,#ff9568); -webkit-background-clip:text; background-clip:text; }
.button-primary { background:linear-gradient(135deg,#ffe08a,#ff9b69 56%,#66d6ad); color:#093c36; box-shadow:0 18px 48px rgba(255,190,98,.18); }
.hero-backdrop { background-color:#061918; background-image:url("../../img/hero-rainforest-v1.png"); background-position:center; background-size:cover; }
.hero-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,14,15,.26),rgba(3,14,15,.13) 48%,rgba(3,14,15,.04)); }
.mock-phone { position:relative; width:min(88vw,350px); aspect-ratio:9/16; overflow:hidden; border:7px solid rgba(255,244,206,.66); border-radius:2.6rem; background:linear-gradient(160deg,#0aa6a2,#126e4f 52%,#094134); box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,208,102,.34); }
.mock-phone::before,.mock-phone::after { content:""; position:absolute; border-radius:999px; }
.mock-phone::before { top:-8%; right:-16%; width:72%; height:35%; background:rgba(255,213,111,.36); }
.mock-phone::after { bottom:-13%; left:-25%; width:105%; height:38%; background:rgba(2,66,54,.74); }
.screen-content { position:relative; z-index:1; display:grid; min-height:100%; grid-template-rows:auto 1fr auto; gap:1rem; padding:1.1rem; }
.screen-bar,.screen-action,.screen-panel { border:1px solid rgba(255,255,255,.34); background:rgba(4,71,60,.55); backdrop-filter:blur(8px); }
.screen-bar { display:flex; justify-content:space-between; padding:.7rem .85rem; border-radius:1rem; }
.screen-dot { display:block; width:1.1rem; height:1.1rem; border-radius:50%; background:#ffd166; box-shadow:1.65rem 0 0 #ff8f70,3.3rem 0 0 #8be3bb; }
.screen-panel { align-self:center; padding:.95rem; border-radius:1.4rem; box-shadow:0 16px 34px rgba(0,41,34,.35); }
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.tile { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:.8rem; background:linear-gradient(140deg,#e7ebed,#94a0a4 48%,#e4e8e9); }
.tile::before { content:""; position:absolute; inset:10%; border-radius:50%; background:var(--tile-color,#ffb864); box-shadow:inset -.35rem -.35rem 0 rgba(82,54,4,.18); }
.tile::after { content:""; position:absolute; top:-16%; right:-8%; width:86%; height:57%; transform:rotate(28deg); border-radius:.5rem; background:rgba(237,241,242,.94); }
.tile:nth-child(2)::after,.tile:nth-child(5)::after,.tile:nth-child(7)::after { display:none; }
.screen-action { margin:0 auto; width:72%; padding:.9rem; border-radius:1rem; background:linear-gradient(135deg,#ffcf69,#ff8e5d); }
.showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:2.25rem; }
.showcase-card { display:grid; justify-items:center; gap:1.25rem; transition:transform 240ms ease; }
.showcase-card:hover { transform:translateY(-.5rem); }
.showcase-card--scratch { animation:gallery-float 7s ease-in-out infinite; }
.showcase-card--map { animation:gallery-float 8s ease-in-out -2.1s infinite; }
.showcase-card--guide { animation:gallery-float 7.5s ease-in-out -4.3s infinite; }
.showcase-shot { position:relative; width:min(100%,320px); aspect-ratio:941/1672; overflow:hidden; border:7px solid rgba(255,244,206,.66); border-radius:2.6rem; background:#082b24; box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,208,102,.34); }
.showcase-shot::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(125deg,rgba(255,255,255,.19),transparent 22%,transparent 72%,rgba(255,209,102,.12)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); opacity:.55; transition:opacity 240ms ease; }
.showcase-shot img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 500ms cubic-bezier(.2,.75,.2,1),filter 500ms ease; }
.showcase-card:hover .showcase-shot::after { opacity:.9; }
.showcase-card:hover .showcase-shot img { transform:scale(1.035); filter:saturate(1.08) brightness(1.04); }
.showcase-phone { width:min(100%,320px); margin:0 auto; }
.portrait-screen { position:relative; width:min(100%,320px); aspect-ratio:9/16; overflow:hidden; border:7px solid rgba(255,244,206,.66); border-radius:2.6rem; box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,208,102,.34); }
.portrait-screen::before { content:""; position:absolute; inset:1rem; border:1px solid rgba(255,255,255,.22); border-radius:1.75rem; }
.portrait-screen--map { background:radial-gradient(circle at 79% 14%,rgba(255,224,123,.9) 0 7%,transparent 7.5%),radial-gradient(circle at 25% 73%,rgba(91,218,161,.72) 0 15%,transparent 15.5%),linear-gradient(155deg,#14a69b,#0a6257 56%,#d78a42); }
.portrait-screen--reward { background:radial-gradient(circle at 50% 34%,rgba(255,224,117,.86) 0 8%,rgba(255,190,76,.2) 8.5% 25%,transparent 25.5%),linear-gradient(160deg,#133d70,#0b7165 54%,#b75663); }
.screen-path { position:absolute; z-index:1; height:0; border-top:4px dashed rgba(255,238,181,.86); filter:drop-shadow(0 3px 0 rgba(4,68,58,.27)); transform-origin:left center; }
.screen-path--one { top:34%; left:17%; width:42%; transform:rotate(34deg); }
.screen-path--two { top:56%; left:49%; width:31%; transform:rotate(-43deg); }
.screen-stop { position:absolute; z-index:2; width:2.5rem; height:2.5rem; border:4px solid rgba(255,247,211,.9); border-radius:50%; background:linear-gradient(135deg,#ffe17a,#ff9568); box-shadow:0 0 0 .5rem rgba(255,216,111,.16),0 .6rem 1.1rem rgba(0,42,35,.3); }
.screen-stop--one { top:27%; left:12%; }
.screen-stop--two { top:53%; left:46%; background:linear-gradient(135deg,#8ce3bc,#16a991); }
.screen-stop--three { top:30%; right:12%; background:linear-gradient(135deg,#ffe398,#c77a42); }
.reward-light { position:absolute; z-index:1; top:18%; left:50%; width:7rem; height:7rem; transform:translateX(-50%); border-radius:50%; background:rgba(255,223,113,.44); filter:blur(1px); animation:reward-pulse 2.8s ease-in-out infinite; }
.reward-chest { position:absolute; z-index:2; top:43%; left:50%; width:11rem; height:7.5rem; transform:translateX(-50%); border:4px solid #ffe2a0; border-radius:.8rem  .8rem 1.4rem 1.4rem; background:linear-gradient(145deg,#ffb75e,#c76c40); box-shadow:inset 0 -.8rem 0 rgba(88,42,17,.18),0 1rem 1.8rem rgba(0,36,42,.36); }
.reward-chest::before { content:""; position:absolute; top:-2.35rem; left:-.25rem; width:calc(100% + .5rem); height:2.4rem; border:4px solid #ffe2a0; border-bottom:0; border-radius:1.4rem 1.4rem .35rem .35rem; background:linear-gradient(145deg,#ffd16f,#e3814a); }
.reward-chest i { position:absolute; top:0; bottom:0; left:50%; width:1.2rem; transform:translateX(-50%); background:rgba(255,234,163,.8); }
.reward-spark { position:absolute; z-index:3; width:.65rem; height:.65rem; border-radius:50%; background:#fff1a8; box-shadow:0 0 1.2rem #ffe670; animation:sparkle 2.2s ease-in-out infinite; }
.reward-spark--one { top:31%; left:23%; }
.reward-spark--two { top:27%; right:23%; animation-delay:.7s; }
.reward-spark--three { top:52%; right:17%; animation-delay:1.35s; }
.showcase-caption { width:min(100%,320px); border-top:1px solid rgba(255,222,137,.25); padding-top:1rem; text-align:center; }
.showcase-caption p { margin:0; color:#fffaf0; font-size:.88rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.showcase-caption span { display:block; margin-top:.4rem; color:#bcd8ca; font-size:.88rem; }
@keyframes gallery-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.8rem); } }
@keyframes reward-pulse { 0%,100% { opacity:.55; transform:translateX(-50%) scale(.9); } 50% { opacity:1; transform:translateX(-50%) scale(1.12); } }
@keyframes sparkle { 0%,100% { opacity:.35; transform:scale(.6); } 50% { opacity:1; transform:scale(1.2); } }
.trail-list { display:grid; gap:1.25rem; border-left:1px solid rgba(255,209,102,.3); padding-left:1.5rem; }
.trail-step { position:relative; display:grid; grid-template-columns:3.3rem 1fr; gap:1rem; }
.trail-step::before { content:""; position:absolute; top:.45rem; left:-1.86rem; width:.7rem; height:.7rem; border:3px solid #ffd166; border-radius:50%; background:#0c5e52; box-shadow:0 0 0 .35rem rgba(255,209,102,.09); }
.trail-number { color:#ffd166; font-size:.76rem; font-weight:900; letter-spacing:.16em; }
.trail-step h3 { margin:0; color:#fffaf0; font-size:1.05rem; font-weight:800; }
.trail-step p { margin:.45rem 0 0; color:#c8ded3; line-height:1.65; }
.how-it-plays-image { width:100%; margin:0; overflow:hidden; border:1px solid rgba(255,222,137,.42); border-radius:2rem; background:#0b4239; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 65px rgba(0,0,0,.25); }
.how-it-plays-image--wide { max-width:1024px; margin:3rem auto 0; }
.how-it-plays-image img { display:block; width:100%; height:auto; }
.play-steps { display:grid; gap:1rem; margin-top:1.25rem; }
.play-step { display:grid; grid-template-columns:2.1rem minmax(0,1fr); gap:.9rem; min-width:0; border:1px solid rgba(255,222,137,.2); border-radius:1.25rem; background:linear-gradient(135deg,rgba(13,91,77,.32),rgba(5,31,32,.45)); padding:1.35rem; }
.play-step > span { color:#ffd166; font-size:.78rem; font-weight:900; letter-spacing:.15em; line-height:1.6; }
.play-step h3 { margin:0; color:#fffaf0; font-size:1.05rem; font-weight:800; }
.play-step p { margin:.4rem 0 0; color:#c8ded3; line-height:1.65; }
.route-board { position:relative; min-height:500px; overflow:hidden; border:1px solid rgba(255,222,137,.42); border-radius:2rem; background:radial-gradient(circle at 84% 13%,rgba(255,216,118,.8) 0 5%,transparent 5.5%),radial-gradient(circle at 25% 77%,rgba(65,198,157,.55) 0 16%,transparent 16.5%),linear-gradient(150deg,#0d7771,#0a4d46 54%,#d7853f); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 65px rgba(0,0,0,.25); }
.route-board::before { content:""; position:absolute; inset:1.1rem; border:1px solid rgba(255,255,255,.18); border-radius:1.35rem; }
.route-line { position:absolute; z-index:1; height:0; border-top:4px dashed rgba(255,238,181,.76); filter:drop-shadow(0 3px 0 rgba(5,69,60,.26)); transform-origin:left center; }
.route-line--one { top:30%; left:17%; width:43%; transform:rotate(34deg); }
.route-line--two { top:55%; left:50%; width:33%; transform:rotate(-43deg); }
.route-node { position:absolute; z-index:2; width:2.8rem; height:2.8rem; border:4px solid rgba(255,245,202,.86); border-radius:50%; background:linear-gradient(135deg,#ffdf78,#ff8d68); box-shadow:0 0 0 .55rem rgba(255,213,112,.13),0 .7rem 1.3rem rgba(0,43,36,.28); }
.route-node--one { top:23%; left:12%; }
.route-node--two { top:50%; left:47%; background:linear-gradient(135deg,#87e1ba,#17aa92); }
.route-node--three { top:27%; right:12%; background:linear-gradient(135deg,#ffe391,#cb7a3c); }
.route-caption { position:absolute; right:1.5rem; bottom:1.5rem; z-index:2; border:1px solid rgba(255,255,255,.22); border-radius:1rem; background:rgba(4,54,47,.65); padding:1rem 1.15rem; backdrop-filter:blur(9px); }
.feature-stack { overflow:hidden; border:1px solid rgba(255,222,137,.22); border-radius:1.5rem; background:rgba(7,58,51,.35); }
.feature-row { display:grid; grid-template-columns:3rem minmax(0,1fr) minmax(10rem,.5fr); align-items:center; gap:1.5rem; padding:2rem; border-bottom:1px solid rgba(255,255,255,.1); transition:background 180ms ease; }
.feature-row:last-child { border-bottom:0; }
.feature-row:hover { background:rgba(255,255,255,.06); }
.feature-index { color:#ffd166; font-size:1.1rem; font-weight:900; }
.feature-row h3 { margin:0; color:#fffaf0; font-size:1.25rem; font-weight:900; }
.feature-row div p { margin:.45rem 0 0; color:#c8ded3; line-height:1.65; }
.feature-note { justify-self:end; color:#ffe0a0; font-size:.75rem; font-weight:800; letter-spacing:.15em; text-align:right; text-transform:uppercase; }
@media (min-width:768px) { .play-steps { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:1.5rem; } .play-step { min-height:10.5rem; } }
@media (max-width:767px) { .hero-backdrop::after { background:linear-gradient(180deg,rgba(5,22,23,.7),rgba(5,22,23,.96)); } .showcase-grid { grid-template-columns:1fr; gap:3rem; } .showcase-card--map { animation-delay:-1.2s; } .route-board { min-height:380px; } .feature-row { grid-template-columns:2.2rem 1fr; gap:1rem; padding:1.4rem; } .feature-note { grid-column:2; justify-self:start; text-align:left; } }
@media (prefers-reduced-motion:reduce) { .showcase-card,.reward-light,.reward-spark { animation:none; } }

@media(prefers-reduced-motion:reduce){.showcase-card{animation:none}.showcase-card,.showcase-shot img{transition:none}}