@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap");

:root { --ink:#171717; --muted:#727477; --gold:#f3b72e; --gold-dark:#c98914; --red:#d83b32; --cream:#fff9eb; --paper:#fffdf8; --line:rgba(23,23,23,.1); --shadow:0 26px 70px rgba(120,78,18,.14); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 8% 12%,rgba(243,183,46,.2),transparent 25%),radial-gradient(circle at 92% 16%,rgba(216,59,50,.1),transparent 22%),linear-gradient(135deg,#fffdf7 0%,#fff8e9 52%,#fff4df 100%); color:var(--ink); font-family:"Baloo 2","Trebuchet MS",sans-serif; font-weight:700; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.points-container { width:min(1120px,calc(100% - 40px)); margin:0 auto; }
.points-header { position:sticky; top:0; z-index:10; background:rgba(255,249,235,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.nav-wrap { display:flex; align-items:center; gap:24px; min-height:82px; }
.points-brand { display:inline-flex; align-items:center; gap:11px; font-size:1.14rem; font-weight:900; letter-spacing:.08em; }
.brand-accent { color:var(--red); }
.points-brand-mark { display:grid; place-items:center; width:45px; height:45px; overflow:hidden; border:3px solid var(--gold); border-radius:50%; background:#151515; box-shadow:0 7px 0 rgba(201,137,20,.2); }
.points-brand-mark img { width:100%; height:100%; object-fit:cover; }
.points-nav { display:flex; align-items:center; gap:26px; margin-left:auto; color:var(--muted); font-size:.88rem; }
.points-nav a:hover,.points-nav .active { color:var(--ink); }
.points-nav .active { border-bottom:2px solid var(--red); }
.points-connect-button,.mini-connect { border:0; border-radius:999px; padding:.82rem 1.2rem; color:#fff; background:linear-gradient(135deg,var(--red),#ef6a37); box-shadow:0 12px 25px rgba(216,59,50,.22); }
.points-menu-toggle { display:none; width:42px; height:42px; padding:9px; border:0; border-radius:12px; background:rgba(255,255,255,.8); }
.points-menu-toggle span { display:block; height:3px; margin:4px 0; border-radius:99px; background:var(--ink); transition:transform .2s ease,opacity .2s ease; }
.points-header.menu-open .points-menu-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.points-header.menu-open .points-menu-toggle span:nth-child(2) { opacity:0; }
.points-header.menu-open .points-menu-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.points-hero { padding:88px 0 74px; }
.hero-grid { display:grid; grid-template-columns:1fr .82fr; gap:55px; align-items:center; }
.eyebrow { color:var(--red); font-size:.7rem; font-weight:900; letter-spacing:.14em; }
h1,h2,h3 { font-weight:900; line-height:1.05; }
h1 { margin-top:12px; max-width:650px; font-size:clamp(3.4rem,7vw,6.7rem); letter-spacing:-.03em; }
h1 span { color:var(--red); }
h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.02em; }
.hero-subtitle { margin-top:20px; font-size:1.35rem; }
.hero-description { max-width:590px; margin-top:10px; color:var(--muted); font-size:1.05rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:29px; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; padding:1rem 1.45rem; border-radius:999px; font-weight:900; transition:transform .2s ease,box-shadow .2s ease; }
.primary-button { color:#fff; background:linear-gradient(135deg,var(--red),#ef6a37); box-shadow:0 15px 30px rgba(216,59,50,.2); }
.secondary-button { border:1px solid rgba(216,59,50,.25); background:rgba(255,255,255,.62); color:var(--red); }
.primary-button:hover,.secondary-button:hover,.points-connect-button:hover,.mini-connect:hover { transform:translateY(-2px); }
.journey { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:32px; color:var(--muted); font-size:.78rem; }
.journey span { padding:7px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.journey b { color:var(--gold-dark); }
.hero-art { position:relative; display:grid; place-items:center; min-height:390px; }
.mascot-card { position:relative; z-index:1; display:grid; place-items:center; width:280px; height:280px; border:8px solid var(--gold); border-radius:42% 58% 52% 48%; background:#181818; box-shadow:16px 18px 0 rgba(216,59,50,.2),var(--shadow); transform:rotate(4deg); animation:float 5s ease-in-out infinite; }
.mascot-card img { width:220px; height:220px; border-radius:50%; object-fit:cover; }
.mascot-bubble { position:absolute; right:-66px; top:18px; padding:10px 13px; border-radius:15px 15px 15px 3px; background:#fff; color:var(--red); font-size:.7rem; line-height:1.1; transform:rotate(-8deg); }
.mascot-bubble strong { color:var(--ink); }
.mascot-spark { position:absolute; left:-25px; top:25px; color:var(--gold); font-size:2.4rem; }
.orbit { position:absolute; border:1px dashed rgba(216,59,50,.4); border-radius:50%; }
.orbit-one { width:360px; height:200px; transform:rotate(28deg); }.orbit-two { width:300px; height:300px; border-color:rgba(243,183,46,.55); }
.point { position:absolute; z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:var(--red); box-shadow:0 8px 16px rgba(216,59,50,.22); animation:pulse 2.6s ease-in-out infinite; }.point-one{left:8%;top:15%}.point-two{right:5%;bottom:19%;background:var(--gold-dark)}.point-three{left:18%;bottom:12%;background:#59b5ff}
.dashboard-section,.content-section,.faq-section { padding:80px 0; }
.dashboard-section { background:rgba(255,255,255,.35); }
.section-intro { max-width:680px; margin-bottom:30px; }.section-intro h2 { margin-top:10px; }.section-intro p:last-child { margin-top:12px; color:var(--muted); font-size:1.02rem; }
.dashboard-card { padding:28px; border:1px solid var(--line); border-radius:27px; background:rgba(255,255,255,.82); box-shadow:var(--shadow); }
.dashboard-card-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }.card-label { color:var(--red); font-size:.67rem; letter-spacing:.13em; }.dashboard-card h3 { margin-top:6px; font-size:1.55rem; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:20px; }.metric { min-height:140px; padding:18px; border-radius:17px; background:var(--cream); }.metric span,.metric small { display:block; color:var(--muted); font-size:.75rem; }.metric strong { display:block; margin:13px 0 5px; color:#b5a99a; font-size:2.2rem; line-height:1; }.metric small { font-size:.67rem; }.dashboard-note { margin-top:20px; color:var(--red); font-size:.82rem; text-align:center; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.step-card { position:relative; min-height:200px; padding:27px 24px; overflow:hidden; border:1px solid var(--line); border-radius:23px; background:#fff; box-shadow:0 13px 28px rgba(120,78,18,.08); }.step-number { color:var(--gold-dark); font-size:.75rem; letter-spacing:.12em; }.step-card h3 { margin-top:25px; font-size:1.35rem; }.step-card p { margin-top:11px; color:var(--muted); }.step-card::after { position:absolute; right:-22px; bottom:-32px; width:110px; height:110px; border-radius:50%; background:rgba(243,183,46,.16); content:""; }
.official-note { margin-top:24px; color:var(--muted); font-size:.8rem; }
.status-section { padding:82px 0; background:#181818; color:#fff; }.status-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.status-layout .eyebrow { color:var(--gold); }.status-layout p:last-child { max-width:480px; margin-top:15px; color:#c7c3ba; }.levels-card { padding:27px; border:1px solid rgba(255,255,255,.15); border-radius:25px; background:#242424; }.planned-badge { display:inline-block; margin-bottom:13px; padding:6px 9px; border-radius:999px; color:var(--gold); background:rgba(243,183,46,.12); font-size:.65rem; letter-spacing:.11em; }.level-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); }.level-row:last-child { border-bottom:0; }.level-row i { flex:1; border-top:1px dashed rgba(255,255,255,.23); }.level-row strong { color:var(--gold); font-size:.78rem; }
.rewards-section { padding:70px 0; }.reward-card { display:flex; align-items:flex-start; gap:25px; padding:35px; border:1px solid rgba(216,59,50,.18); border-radius:27px; background:linear-gradient(120deg,#fff,#fff2dd); }.reward-icon { display:grid; flex:none; place-items:center; width:58px; height:58px; border-radius:18px; color:#fff; background:var(--red); font-size:1.6rem; }.reward-card h2 { margin-top:8px; }.reward-card p { margin-top:12px; font-size:1.1rem; }.reward-card small { display:block; max-width:700px; margin-top:9px; color:var(--muted); }
.faq-list { display:grid; gap:10px; max-width:820px; }.faq-list details { padding:18px 21px; border:1px solid var(--line); border-radius:16px; background:#fff; }.faq-list summary { cursor:pointer; font-size:1.05rem; font-weight:900; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { float:right; color:var(--red); content:"+"; font-size:1.3rem; }.faq-list details[open] summary::after { content:"−"; }.faq-list p { max-width:700px; margin-top:12px; color:var(--muted); }
.points-footer { padding:28px 20px 36px; color:var(--muted); font-size:.78rem; text-align:center; border-top:1px solid var(--line); }
@keyframes float { 0%,100% { transform:rotate(4deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-10px); } } @keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@media (max-width:900px) { .points-nav { display:none; }.points-menu-toggle { display:block; margin-left:auto; }.points-header.menu-open .points-nav { position:absolute; top:100%; right:20px; left:20px; display:grid; gap:0; padding:10px; border:1px solid var(--line); border-radius:18px; background:#fff9eb; box-shadow:var(--shadow); }.points-header.menu-open .points-nav a { padding:12px 14px; }.hero-grid,.status-layout { grid-template-columns:1fr; }.hero-copy { text-align:center; }.hero-description { margin-right:auto; margin-left:auto; }.hero-actions,.journey { justify-content:center; }.hero-art { min-height:330px; }.dashboard-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .points-container { width:min(100% - 28px,1120px); }.points-header .nav-wrap { min-height:72px; }.points-connect-button { display:none; }.points-hero { padding:58px 0 44px; }.hero-art { min-height:280px; }.mascot-card { width:220px; height:220px; }.mascot-card img { width:170px; height:170px; }.mascot-bubble { right:-28px; }.orbit-one { width:280px; }.orbit-two { width:240px; height:240px; } h1 { font-size:clamp(3rem,16vw,5rem); }.dashboard-section,.content-section,.faq-section { padding:58px 0; }.dashboard-card,.reward-card { padding:21px; }.dashboard-card-top { align-items:flex-start; flex-direction:column; }.mini-connect { width:100%; }.dashboard-grid,.steps-grid { grid-template-columns:1fr; }.metric { min-height:120px; }.status-section { padding:60px 0; }.reward-card { flex-direction:column; }.journey { gap:5px; font-size:.68rem; }.journey b { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }