/* ============================================================
   AmunRa IT — style.css  | prefix: ra7 | theme: dark
   ============================================================ */

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Sora:wght@600;800&display=swap');

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}

/* 3. ROOT TOKENS */
:root{
  --bg-base:#241409;
  --bg-card:#2f1c0e;
  --accent:#c8962e;
  --highlight:#2fb6a6;
  --text:#f4e9d8;
  --muted:#b39a7d;
  --border:#3d2814;

  --accent-soft:rgba(200,150,46,.14);
  --hi-soft:rgba(47,182,166,.14);
  --shadow:0 14px 40px rgba(0,0,0,.45);

  --ff-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --t:.25s ease;
  --maxw:1120px;
}

/* 4. BASE + SCROLLBAR */
html{scroll-behavior:smooth}
body{
  background:var(--bg-base);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:72px;
  overflow-x:hidden;
}
body::-webkit-scrollbar{width:11px}
body::-webkit-scrollbar-track{background:var(--bg-base)}
body::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill)}
body::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* 5. TYPOGRAPHY */
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.18;font-weight:800;color:var(--text)}
h1{font-size:1.9rem;letter-spacing:-.5px}
h2{font-size:1.5rem;margin-bottom:.7em}
h3{font-size:1.15rem;font-weight:600;margin-bottom:.4em}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}
.ra7_accent{color:var(--accent)}
.ra7_hi{color:var(--highlight)}
.ra7_lead{font-size:1.08rem;color:var(--muted)}
strong{color:var(--text)}
small{color:var(--muted)}

/* 6. CONTAINER + SECTION */
.ra7_container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}
.ra7_section{padding:46px 0}
.ra7_section--alt{background:linear-gradient(180deg,var(--bg-card),var(--bg-base))}
.ra7_eyebrow{font-family:var(--ff-display);font-size:.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--highlight);margin-bottom:.5em;display:block}

/* 7. BUTTONS */
.ra7_btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ff-display);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--r-pill);
  min-height:48px;transition:transform var(--t),box-shadow var(--t),background var(--t);
  text-align:center;
}
.ra7_btn--primary{background:linear-gradient(135deg,var(--accent),#e6b450);color:#241409;box-shadow:0 8px 22px var(--accent-soft)}
.ra7_btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(200,150,46,.4)}
.ra7_btn--hi{background:var(--highlight);color:#06201d}
.ra7_btn--hi:hover{transform:translateY(-2px)}
.ra7_btn--outline{border:1.5px solid var(--accent);color:var(--accent)}
.ra7_btn--outline:hover{background:var(--accent-soft)}
.ra7_btn--ghost{color:var(--muted);padding:14px 16px}
.ra7_btn--ghost:hover{color:var(--text)}
.ra7_btn--full{width:100%}
.ra7_btn--lg{font-size:1.1rem;padding:17px 32px}

/* 8. NAV */
.ra7_nav{position:sticky;top:0;z-index:50;background:rgba(36,20,9,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.ra7_nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.ra7_logo{display:flex;align-items:center;gap:.5em}
.ra7_logo img{height:38px;width:auto}
.ra7_nav-links{display:none;align-items:center;gap:22px}
.ra7_nav-links a{font-size:.95rem;color:var(--muted);transition:color var(--t)}
.ra7_nav-links a:hover{color:var(--text)}
.ra7_nav-cta{display:none}
.ra7_burger{display:flex;flex-direction:column;gap:5px;width:46px;height:46px;align-items:center;justify-content:center}
.ra7_burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--t)}
.ra7_mobile-nav{display:none;flex-direction:column;gap:4px;padding:10px 0 18px;border-top:1px solid var(--border)}
.ra7_mobile-nav.open{display:flex}
.ra7_mobile-nav a{padding:12px 6px;color:var(--muted);border-radius:var(--r-sm)}
.ra7_mobile-nav a:hover{color:var(--text);background:var(--accent-soft)}
.ra7_mobile-nav .ra7_btn{margin-top:8px}

/* 9. TICKER */
.ra7_ticker{background:var(--bg-card);border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap}
.ra7_ticker-track{display:inline-flex;gap:36px;padding:9px 0;animation:ra7scroll 28s linear infinite;will-change:transform}
.ra7_ticker-track span{font-size:.85rem;color:var(--muted);font-family:var(--ff-display)}
.ra7_ticker-track b{color:var(--accent)}
@keyframes ra7scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 10. HERO (Layout B — centred) */
.ra7_hero{position:relative;text-align:center;padding:54px 0 50px;background:
  radial-gradient(900px 380px at 50% -10%,var(--accent-soft),transparent 70%),
  radial-gradient(600px 320px at 80% 120%,var(--hi-soft),transparent 70%);
}
.ra7_hero h1{margin-bottom:.45em;max-width:18ch;margin-left:auto;margin-right:auto}
.ra7_hero .ra7_lead{max-width:54ch;margin:0 auto 1.6em}
.ra7_hero-cta{display:flex;flex-direction:column;gap:12px;max-width:340px;margin:0 auto}
.ra7_hero-note{margin-top:14px;font-size:.82rem;color:var(--muted)}
.ra7_hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.ra7_badge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 14px}

/* 11. TRUST STRIP */
.ra7_trust{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ra7_trust div{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;text-align:center}
.ra7_trust b{display:block;font-family:var(--ff-display);color:var(--accent);font-size:1.05rem}
.ra7_trust small{font-size:.78rem}

/* 12. CONTENT SECTIONS */
.ra7_card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.ra7_grid{display:grid;gap:16px}

/* steps */
.ra7_steps{counter-reset:s;display:grid;gap:14px}
.ra7_step{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 18px 18px 60px}
.ra7_step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:#241409;font-family:var(--ff-display);font-weight:800}
.ra7_step h3{margin-bottom:.25em}
.ra7_step p{font-size:.95rem;color:var(--muted);margin:0}

/* bonus 4-card grid */
.ra7_bonus-grid{display:grid;gap:14px}
.ra7_bonus-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;overflow:hidden}
.ra7_bonus-card--feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.ra7_bonus-card .ra7_tag{position:absolute;top:0;right:0;background:var(--accent);color:#241409;font-family:var(--ff-display);font-weight:700;font-size:.7rem;padding:5px 12px;border-bottom-left-radius:var(--r-md)}
.ra7_bonus-card .ra7_amt{font-family:var(--ff-display);font-weight:800;font-size:1.5rem;color:var(--accent);margin:.2em 0 .3em;line-height:1.1}
.ra7_bonus-card.ra7_bonus-card--crypto .ra7_amt{color:var(--highlight)}
.ra7_bonus-card small{display:block;color:var(--muted)}

/* games tile grid */
.ra7_games{display:grid;grid-template-columns:1fr;gap:10px}
.ra7_game{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 16px}
.ra7_game span{font-family:var(--ff-display);font-weight:600;font-size:.95rem}
.ra7_game b{color:var(--highlight);font-size:.82rem;font-family:var(--ff-display);white-space:nowrap}
.ra7_game .ra7_new{color:var(--accent);font-size:.68rem;border:1px solid var(--accent);border-radius:var(--r-pill);padding:2px 8px}

/* lobby counts */
.ra7_counts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ra7_counts div{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;text-align:center}
.ra7_counts b{display:block;font-family:var(--ff-display);font-size:1.35rem;color:var(--accent)}
.ra7_counts small{font-size:.74rem}

/* payments 2-col */
.ra7_pay{display:grid;grid-template-columns:1fr;gap:14px}
.ra7_pay-col h3{color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:.4em}
.ra7_pay-col.ra7_pay--wd h3{color:var(--highlight)}
.ra7_pay-col ul li{padding:9px 0;border-bottom:1px dashed var(--border);font-size:.92rem;display:flex;justify-content:space-between;gap:10px}
.ra7_pay-col ul li:last-child{border-bottom:0}
.ra7_pay-col ul li b{color:var(--muted);font-weight:600;white-space:nowrap}

/* tables */
.ra7_table{width:100%;border-collapse:collapse;font-size:.9rem}
.ra7_table th,.ra7_table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}
.ra7_table th{font-family:var(--ff-display);color:var(--accent);font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}
.ra7_table tr:last-child td{border-bottom:0}
.ra7_scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* generic lists */
.ra7_list li{position:relative;padding:7px 0 7px 26px;color:var(--muted)}
.ra7_list li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.ra7_check li{position:relative;padding:8px 0 8px 30px}
.ra7_check li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--highlight);font-weight:700}

/* stat block */
.ra7_stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ra7_stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;text-align:center}
.ra7_stat b{display:block;font-family:var(--ff-display);font-size:1.55rem;color:var(--accent)}
.ra7_stat small{font-size:.78rem}

/* verdict */
.ra7_verdict{display:grid;gap:16px}
.ra7_verdict .ra7_pros,.ra7_verdict .ra7_cons{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:18px}
.ra7_verdict .ra7_pros h3{color:var(--highlight)}
.ra7_verdict .ra7_cons h3{color:var(--accent)}

.ra7_note{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:14px 16px;font-size:.9rem;color:var(--text)}
.ra7_note--hi{background:var(--hi-soft);border-left-color:var(--highlight)}

/* 13. FAQ */
.ra7_faq{display:grid;gap:10px}
.ra7_faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.ra7_faq-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:16px 18px;font-family:var(--ff-display);font-weight:600;font-size:1rem;color:var(--text);min-height:54px}
.ra7_faq-btn::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform var(--t)}
.ra7_faq-item.open .ra7_faq-btn::after{transform:rotate(45deg)}
.ra7_faq-ans{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 18px}
.ra7_faq-item.open .ra7_faq-ans{max-height:520px;padding-bottom:16px}
.ra7_faq-ans p{font-size:.93rem;color:var(--muted)}

/* 14. CTA BAND */
.ra7_ctaband{text-align:center;background:
  radial-gradient(700px 260px at 50% 0,var(--accent-soft),transparent 70%),var(--bg-card);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 22px}
.ra7_ctaband h2{margin-bottom:.4em}
.ra7_ctaband p{max-width:48ch;margin:0 auto 1.4em;color:var(--muted)}

/* 15. FOOTER */
.ra7_footer{background:var(--bg-card);border-top:1px solid var(--border);padding:40px 0 26px;margin-top:30px}
.ra7_footer-grid{display:grid;gap:26px}
.ra7_footer h4{font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:1em}
.ra7_footer-grid a{display:block;padding:6px 0;color:var(--muted);font-size:.92rem}
.ra7_footer-grid a:hover{color:var(--accent)}
.ra7_footer-logo img{height:40px;margin-bottom:12px}
.ra7_footer-logo p{font-size:.85rem;color:var(--muted)}
.ra7_footer-bottom{border-top:1px solid var(--border);margin-top:26px;padding-top:20px;font-size:.8rem;color:var(--muted)}
.ra7_footer-bottom p{margin-bottom:.7em}
.ra7_age{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-family:var(--ff-display);font-weight:800;font-size:.78rem;margin-right:8px;vertical-align:middle}

/* 16. STICKY MOBILE CTA */
.ra7_sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(36,20,9,.97);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
.ra7_sticky-txt{flex:1;min-width:0}
.ra7_sticky-txt b{display:block;font-family:var(--ff-display);font-size:.9rem;color:var(--accent);line-height:1.2}
.ra7_sticky-txt small{font-size:.72rem;color:var(--muted)}
.ra7_sticky .ra7_btn{padding:12px 20px;min-height:46px;white-space:nowrap}

/* 17. ANIMATIONS */
.ra7_fade{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.ra7_fade.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ra7_fade{opacity:1;transform:none;transition:none}
  .ra7_ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* below-fold perf */
.ra7_section--lazy{content-visibility:auto;contain-intrinsic-size:0 600px}

/* 18. RESPONSIVE (min-width only) */
@media (min-width:480px){
  h1{font-size:2.3rem}
  .ra7_hero-cta{flex-direction:row;max-width:none;justify-content:center}
  .ra7_bonus-grid{grid-template-columns:1fr 1fr}
  .ra7_games{grid-template-columns:1fr 1fr}
  .ra7_counts{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:768px){
  body{padding-bottom:0}
  .ra7_sticky{display:none}
  .ra7_nav-links{display:flex}
  .ra7_nav-cta{display:inline-flex}
  .ra7_burger{display:none}
  .ra7_mobile-nav{display:none!important}
  h1{font-size:2.7rem}
  h2{font-size:1.8rem}
  .ra7_section{padding:60px 0}
  .ra7_trust{grid-template-columns:repeat(4,1fr)}
  .ra7_pay{grid-template-columns:1fr 1fr}
  .ra7_verdict{grid-template-columns:1fr 1fr}
  .ra7_stats{grid-template-columns:repeat(4,1fr)}
  .ra7_steps--2{grid-template-columns:1fr 1fr}
  .ra7_footer-grid{grid-template-columns:1.6fr 1fr 1fr}
  .ra7_counts{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1024px){
  .ra7_container{padding:0 24px}
  h1{font-size:3.1rem}
  .ra7_hero{padding:78px 0 64px}
  .ra7_games{grid-template-columns:1fr 1fr}
  .ra7_bonus-grid{grid-template-columns:repeat(4,1fr)}
}
