:root{
  --ink:#0B2027;
  --teal-950:#0F4C5C;
  --teal-800:#12606F;
  --teal-700:#0F7C8A;
  --teal-500:#1AA8B8;
  --teal-100:#DCEEEF;
  --mint-50:#F5FAF7;
  --mint-100:#E9F5EF;
  --paper:#FCFBF6;
  --gold-700:#B6650F;
  --gold-600:#C97A1B;
  --gold-500:#EFA23B;
  --gold-300:#F8CE84;
  --line:#D8E6DF;
  --line-dark:rgba(255,255,255,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--mint-50);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
section{scroll-margin-top:84px;}
::selection{background:var(--gold-300);color:var(--ink);}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold-500);
  outline-offset:3px;
  border-radius:6px;
}
.break-safe{overflow-wrap:anywhere; word-break:break-word;}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(245,250,247,0);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  background:rgba(252,251,246,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px -18px rgba(15,76,92,.35);
}
.logo-word{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.4rem;color:var(--teal-950);}
.nav-link{
  position:relative; color:var(--teal-950); font-weight:500; font-size:.95rem;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.is-current::after{transform:scaleX(1);}
.mobile-menu{display:none; flex-direction:column;}
.mobile-menu.is-open{display:flex;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--teal-700); color:#fff;
  box-shadow:0 10px 24px -10px rgba(15,124,138,.65);
}
.btn-primary:hover{background:var(--teal-800); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(15,124,138,.75);}
.btn-primary:active{transform:translateY(0px) scale(.98);}
.btn-ghost{
  background:transparent; color:var(--teal-950); border:1.5px solid var(--teal-950);
}
.btn-ghost:hover{background:var(--teal-950); color:#fff; transform:translateY(-2px);}
.btn-disabled{
  background:var(--mint-100); color:#8AA39E; border:1.5px dashed #B9CDC6;
  cursor:not-allowed; user-select:none;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:#5A3208; box-shadow:0 10px 24px -10px rgba(201,122,27,.55);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(201,122,27,.7);}

/* ---------- Hero ---------- */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--teal-100); color:var(--teal-800);
  border-radius:999px; padding:.4rem .9rem; font-weight:600; font-size:.85rem;
}
.trust-strip{color:#4C6B67; font-size:.85rem;}
.trust-strip span{display:inline-flex; align-items:center; gap:.35rem;}

.hero-visual-wrap{position:relative; min-height:460px; display:flex; align-items:center; justify-content:center;}
.hero-glow{
  position:absolute; inset:-10% -10% -10% -10%;
  background:radial-gradient(closest-side, var(--teal-100) 0%, rgba(233,245,239,0) 70%);
  filter:blur(6px);
  z-index:0;
}

.device-frame{
  position:relative; z-index:2; width:78%; max-width:280px;
  border:8px solid var(--ink); border-radius:38px; overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(15,32,39,.5), 0 0 0 2px rgba(255,255,255,.5);
  animation:float 5s ease-in-out infinite;
  background:#EAF5FE;
}
.device-frame img{display:block; width:100%; height:auto;}
.device-frame::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85));
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}

.coin-chip{
  position:absolute; z-index:3; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.5rem .9rem; display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; color:var(--teal-950);
  box-shadow:0 14px 30px -14px rgba(15,32,39,.35);
  animation:bob 4s ease-in-out infinite; animation-delay:.4s;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-8px) rotate(1deg);}}
.coin-chip img{width:20px;height:20px;}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ---------- Loop diagram ---------- */
.loop-wrap{position:relative; width:100%; max-width:560px; margin:0 auto; aspect-ratio:1/1;}
.loop-ring{position:absolute; inset:10%; border-radius:50%; border:2px dashed var(--teal-100); animation:ring-spin 90s linear infinite;}
@keyframes ring-spin{to{transform:rotate(360deg);}}
.loop-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; z-index:2; pointer-events:none;
}
.loop-node{
  position:absolute; width:150px; text-align:center; z-index:3;
  transform:translate(-50%,-50%);
}
.loop-node .dot{
  width:52px; height:52px; border-radius:999px; background:var(--paper); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto .6rem; font-size:1.3rem;
  box-shadow:0 10px 22px -12px rgba(15,32,39,.25); cursor:pointer;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.loop-node h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;color:var(--teal-950);margin-bottom:.15rem;}
.loop-node p{font-size:.8rem;color:#4C6B67;line-height:1.35;}
.loop-node.is-active .dot{
  background:var(--gold-500); border-color:var(--gold-600); transform:scale(1.12);
  box-shadow:0 0 0 7px rgba(239,162,59,.28), 0 10px 22px -10px rgba(201,122,27,.6);
}
.loop-node.n1{top:10%; left:50%;}
.loop-node.n2{top:50%; left:90%;}
.loop-node.n3{top:90%; left:50%;}
.loop-node.n4{top:50%; left:10%;}

@media (max-width:767px){
  .loop-wrap{aspect-ratio:auto; max-width:420px;}
  .loop-ring{display:none;}
  .loop-center{display:none;}
  .loop-node{position:static; width:100%; text-align:left; display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; padding-left:1.5rem; border-left:2px dashed var(--teal-100); transform:none;}
  .loop-node .dot{margin:0; flex-shrink:0;}
}

/* ---------- Rewards (energetic band) ---------- */
.rewards-band{background:radial-gradient(120% 140% at 15% 0%, #14606F 0%, var(--teal-950) 55%, #0A363F 100%); color:#fff;}
.voucher-card{
  background:#fff; color:var(--ink); border-radius:18px; padding:1.1rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  box-shadow:0 18px 30px -18px rgba(0,0,0,.4);
}
.voucher-card:hover{transform:rotate(-1.5deg) translateY(-4px) scale(1.02); box-shadow:0 26px 44px -18px rgba(0,0,0,.5);}
.voucher-brand{font-weight:800; font-size:1.05rem; color:#111;}
.voucher-amt{font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.15rem; color:var(--teal-950);}

.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex; gap:2.5rem; width:max-content; animation:scroll-x 26s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-item{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;color:rgba(255,255,255,.55); white-space:nowrap;}

/* ---------- Quiet content panel (privacy, about, contact) ---------- */
.quiet-panel{border:1px solid var(--line); border-radius:28px; background:var(--paper);}
.privacy-item{display:flex; gap:.9rem;}
.privacy-item .ico{
  width:38px; height:38px; border-radius:10px; background:var(--mint-100); color:var(--teal-800);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.prose-quiet p{color:#345C58; line-height:1.75; margin-bottom:1.1rem;}
.prose-quiet h3{font-family:'Fredoka',sans-serif; font-weight:600; color:var(--teal-950); font-size:1.15rem; margin-top:2rem; margin-bottom:.6rem;}
.prose-quiet ul{list-style:disc; padding-left:1.3rem; color:#345C58; margin-bottom:1.1rem;}
.prose-quiet li{margin-bottom:.4rem; line-height:1.6;}
.prose-quiet a{color:var(--teal-700); text-decoration:underline; text-underline-offset:2px;}
.prose-quiet a:hover{color:var(--teal-950);}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid var(--line);
  padding:1.3rem 0;
}
.faq-item:first-child{padding-top:0;}
.faq-item:last-child{border-bottom:none; padding-bottom:0;}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem; color:var(--teal-950);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:999px; background:var(--mint-100);
  display:flex; align-items:center; justify-content:center; color:var(--teal-800);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.faq-item[open] summary .faq-icon{transform:rotate(45deg); background:var(--gold-500); color:#fff;}
.faq-item p{margin-top:.8rem; color:#4C6B67; line-height:1.65; padding-right:2.2rem;}
.faq-item[open] summary{color:var(--teal-800);}

/* ---------- Footer ---------- */
footer a{color:#BFE0DC;}
footer a:hover{color:#fff;}

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