/* =========================================================
   OPERA PIXEL — ASSIS · Design System
   "A Ascensão do Artista" — Game UI / Glassmorphism / Dark
   ========================================================= */

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

:root{
  /* --- Brand tokens --- */
  --mango: #BF9706;
  --noturna: #141821;
  --vibranium: #222733;
  --prata: #819196;
  --branco: #ffffff;

  /* --- derived --- */
  --mango-100: #E9C64B;
  --mango-glow: rgba(191,151,6,.45);
  --mango-soft: rgba(191,151,6,.14);
  --bg-0: #0F1218;
  --bg-1: var(--noturna);
  --bg-2: var(--vibranium);
  --glass: rgba(34,39,51,.52);
  --glass-strong: rgba(34,39,51,.78);
  --glass-border: rgba(255,255,255,.09);
  --glass-hi: rgba(255,255,255,.06);
  --text-hi: var(--branco);
  --text-mid: #C6CCD3;
  --text-low: var(--prata);
  --line: rgba(129,145,150,.18);
  --success: #6FBF73;
  --danger: #C4574B;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-full: 999px;

  --shadow-1: 0 8px 30px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(191,151,6,.25), 0 10px 40px rgba(191,151,6,.18);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(191,151,6,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(129,145,150,.08), transparent 55%),
    var(--bg-0);
  color:var(--text-mid);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block;border-radius:var(--radius-md);}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-hi);margin:0 0 .5em;letter-spacing:-.01em;}
h1{font-weight:800;}
h2{font-weight:700;}
h3,h4{font-weight:600;}
p{margin:0 0 1em;}
:focus-visible{outline:2px solid var(--mango-100);outline-offset:3px;border-radius:6px;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mango-100);
  background:var(--mango-soft);
  border:1px solid rgba(191,151,6,.3);
  padding:6px 14px;border-radius:var(--radius-full);
}
.section{padding:96px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head p{color:var(--text-low);font-size:1.02rem;}

/* =============== BUTTONS =============== */
.btn{
  font-family:var(--font-display);
  font-weight:600;font-size:.92rem;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-full);
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(135deg,var(--mango-100),var(--mango));
  color:#1a1300;box-shadow:var(--shadow-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(191,151,6,.32);}
.btn-ghost{
  background:var(--glass-hi);
  color:var(--text-hi);
  border-color:var(--glass-border);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover{border-color:rgba(191,151,6,.5);color:var(--mango-100);}
.btn-sm{padding:10px 18px;font-size:.82rem;}
.btn-block{width:100%;}
.btn-icon{
  width:44px;height:44px;padding:0;border-radius:50%;
  background:var(--glass-hi);border:1px solid var(--glass-border);
  color:var(--text-hi);backdrop-filter:blur(12px);
}

/* =============== GLASS CARD =============== */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-1);
  position:relative;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card{padding:28px;}
.card-sm{padding:20px;border-radius:var(--radius-md);}

/* =============== NAVBAR =============== */
.navbar{
  position:fixed;top:16px;left:0;right:0;z-index:100;
}
.navbar-inner{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-radius:var(--radius-full);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--shadow-1);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:var(--text-hi);font-size:1.02rem;}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(145deg,var(--mango-100),var(--mango));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;color:#1a1300;font-size:1rem;
  box-shadow:0 4px 14px rgba(191,151,6,.4);
}
.brand small{display:block;font-family:var(--font-body);font-weight:500;color:var(--text-low);font-size:.68rem;letter-spacing:.05em;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--text-mid);transition:color .15s;}
.nav-links a:hover{color:var(--mango-100);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-toggle{display:none;}

/* =============== HERO =============== */
.hero{padding:170px 0 100px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1.06;}
.hero h1 .accent{color:var(--mango-100);}
.hero-lead{font-size:1.08rem;color:var(--text-mid);max-width:520px;}
.hero-cta{display:flex;gap:14px;margin:32px 0 36px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--text-hi);}
.hero-stat span{font-size:.78rem;color:var(--text-low);}

.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1;}
.blob-1{width:420px;height:420px;background:radial-gradient(circle,var(--mango) 0%,transparent 70%);top:-120px;right:-80px;}
.blob-2{width:340px;height:340px;background:radial-gradient(circle,var(--prata) 0%,transparent 70%);bottom:-140px;left:-100px;opacity:.18;}

/* Hero mock dashboard visual */
.hero-visual{position:relative;}
.mock-panel{padding:26px;}
.mock-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.mock-level{display:flex;align-items:center;gap:12px;}
.mock-progress{margin-top:18px;}
.float-card{
  position:absolute;padding:14px 16px;min-width:170px;
  animation:float 5s ease-in-out infinite;
}
.float-card.c1{top:-18px;right:-24px;animation-delay:.4s;}
.float-card.c2{bottom:-24px;left:-30px;animation-delay:1.1s;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.float-card{animation:none}}

/* =============== HEX AVATAR / SIGNATURE ELEMENT =============== */
.hex{
  --s: 64px;
  width:var(--s);height:calc(var(--s) * 1.02);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(150deg,var(--mango-100),var(--mango) 60%,#7a5f03);
  display:flex;align-items:center;justify-content:center;color:var(--noturna);
  font-family:var(--font-display);font-weight:800;position:relative;flex:none;
}
.hex::after{
  content:"";position:absolute;inset:3px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--vibranium);
}
.hex img, .hex .hex-inner{position:relative;z-index:1;width:78%;height:78%;object-fit:cover;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);}
.hex .hex-inner{display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--mango-100);}
.hex-sm{--s:44px;}
.hex-lg{--s:96px;}

/* =============== ICONS (line, single color) =============== */
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.icon-lg{width:30px;height:30px;}
.icon-wrap{
  width:48px;height:48px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--mango-soft);color:var(--mango-100);
  border:1px solid rgba(191,151,6,.25);
}

/* =============== FEATURE / MISSION GRID =============== */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.feature-card{transition:transform .2s ease, border-color .2s ease;}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(191,151,6,.35);}
.feature-card h3{font-size:1.05rem;}
.feature-card p{color:var(--text-low);font-size:.92rem;margin-bottom:0;}

/* =============== BADGES / CHIPS =============== */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--radius-full);
  background:var(--glass-hi);border:1px solid var(--glass-border);
  font-size:.78rem;color:var(--text-mid);font-weight:500;
}
.chip.is-mango{background:var(--mango-soft);border-color:rgba(191,151,6,.35);color:var(--mango-100);}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;}

.mango-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--mango-soft);border:1px solid rgba(191,151,6,.35);
  color:var(--mango-100);padding:6px 12px;border-radius:var(--radius-full);
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
}

/* =============== TABS =============== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.tab-btn{
  padding:10px 18px;border-radius:var(--radius-full);
  background:var(--glass-hi);border:1px solid var(--glass-border);
  color:var(--text-mid);font-size:.86rem;font-weight:600;cursor:pointer;font-family:var(--font-body);
  transition:all .15s;
}
.tab-btn.active{background:linear-gradient(135deg,var(--mango-100),var(--mango));color:#1a1300;border-color:transparent;}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:fadein .35s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =============== PROGRESS =============== */
.progress-track{width:100%;height:10px;border-radius:var(--radius-full);background:rgba(255,255,255,.07);overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--mango),var(--mango-100));}
.progress-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-low);margin-bottom:8px;}

.ring{position:relative;width:120px;height:120px;flex:none;}
.ring svg{transform:rotate(-90deg);width:100%;height:100%;}
.ring circle{fill:none;stroke-width:9;}
.ring .bg{stroke:rgba(255,255,255,.08);}
.ring .fg{stroke:url(#mangoGrad);stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-label b{font-family:var(--font-display);color:var(--text-hi);font-size:1.4rem;}
.ring-label span{font-size:.66rem;color:var(--text-low);text-transform:uppercase;letter-spacing:.06em;}

/* =============== ACCORDION (FAQ) =============== */
.accordion-item{border-bottom:1px solid var(--line);padding:20px 4px;}
.accordion-item:last-child{border-bottom:none;}
.accordion-q{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:16px;}
.accordion-q h4{margin:0;font-size:1rem;}
.accordion-q .plus{transition:transform .25s ease;color:var(--mango-100);flex:none;}
.accordion-item.open .plus{transform:rotate(45deg);}
.accordion-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:.92rem;color:var(--text-low);}
.accordion-item.open .accordion-a{max-height:240px;margin-top:12px;}

/* =============== TESTIMONIALS =============== */
.quote-mark{font-family:var(--font-display);font-size:2.6rem;color:var(--mango-100);line-height:.4;display:block;margin-bottom:14px;}

/* =============== PRICING =============== */
.price-card{position:relative;overflow:hidden;}
.price-card.is-highlight{border-color:rgba(191,151,6,.5);box-shadow:var(--shadow-glow);}
.price-tag{font-family:var(--font-display);font-size:2.3rem;color:var(--text-hi);}
.price-tag small{font-size:.9rem;color:var(--text-low);font-weight:500;}
.price-list li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-mid);padding:7px 0;}
.price-list .icon{color:var(--mango-100);margin-top:2px;}

/* =============== FOOTER =============== */
.footer{padding:70px 0 30px;border-top:1px solid var(--line);margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer h4{font-size:.85rem;color:var(--text-hi);margin-bottom:16px;}
.footer li{margin-bottom:10px;}
.footer a{color:var(--text-low);font-size:.88rem;}
.footer a:hover{color:var(--mango-100);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-low);flex-wrap:wrap;gap:10px;}
.social-row{display:flex;gap:10px;}

/* =============== APP SHELL (dashboard pages) =============== */
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}
.app-sidebar{
  padding:26px 18px;border-right:1px solid var(--glass-border);
  background:var(--glass);backdrop-filter:blur(18px);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;
}
.side-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-md);
  color:var(--text-mid);font-size:.88rem;font-weight:500;margin-bottom:4px;transition:all .15s;
}
.side-nav a:hover{background:var(--glass-hi);color:var(--text-hi);}
.side-nav a.active{background:var(--mango-soft);color:var(--mango-100);}
.side-nav a .icon{color:inherit;}
.side-card{margin-top:auto;}

.app-main{padding:26px 34px 60px;max-width:1180px;}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;
  position:sticky;top:0;padding:14px 0;z-index:20;
}
.topbar-title h1{font-size:1.5rem;margin-bottom:2px;}
.topbar-title span{font-size:.85rem;color:var(--text-low);}
.topbar-actions{display:flex;align-items:center;gap:14px;}

/* Notification bell */
.bell-wrap{position:relative;}
.bell-dot{
  position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--mango-100);border:2px solid var(--bg-1);
}
.notif-panel{
  position:absolute;top:56px;right:0;width:340px;
  padding:10px;display:none;z-index:200;
}
.notif-panel.open{display:block;animation:fadein .2s ease;}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.notif-head h4{margin:0;font-size:.9rem;}
.notif-item{display:flex;gap:12px;padding:10px;border-radius:var(--radius-sm);transition:background .15s;}
.notif-item:hover{background:var(--glass-hi);}
.notif-item .icon-wrap{width:38px;height:38px;}
.notif-item p{margin:0;font-size:.82rem;color:var(--text-mid);}
.notif-item time{font-size:.7rem;color:var(--text-low);}

/* =============== MISSION CARDS =============== */
.mission-card{display:flex;flex-direction:column;gap:14px;}
.mission-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.mission-diff{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-low);}

/* =============== TABLE / LIST =============== */
.data-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);}
.data-row:last-child{border-bottom:none;}

/* =============== CALENDAR =============== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.cal-head{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-low);text-align:center;padding-bottom:8px;}
.cal-cell{
  min-height:96px;border-radius:var(--radius-sm);padding:10px;
  background:var(--glass-hi);border:1px solid var(--glass-border);
  font-size:.75rem;color:var(--text-low);position:relative;
}
.cal-cell.today{border-color:rgba(191,151,6,.5);box-shadow:0 0 0 1px rgba(191,151,6,.25) inset;}
.cal-cell .day-num{font-family:var(--font-display);color:var(--text-hi);font-size:.85rem;display:block;margin-bottom:6px;}
.cal-cell .cal-tag{
  display:block;margin-top:4px;padding:4px 7px;border-radius:8px;font-size:.66rem;
  background:var(--mango-soft);color:var(--mango-100);
}
.cal-cell.empty{background:transparent;border:1px dashed rgba(255,255,255,.06);}

.roadmap-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);}
.roadmap-item:last-child{border-bottom:none;}
.roadmap-num{
  font-family:var(--font-display);font-weight:800;color:var(--mango-100);font-size:.85rem;
  width:38px;height:38px;border-radius:50%;background:var(--mango-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* =============== FORMS =============== */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;color:var(--text-low);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--glass-hi);border:1px solid var(--glass-border);color:var(--text-hi);
  font-family:var(--font-body);font-size:.9rem;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mango);outline:none;}
.switch{position:relative;width:44px;height:26px;border-radius:var(--radius-full);background:rgba(255,255,255,.1);cursor:pointer;flex:none;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--prata);transition:all .2s;}
.switch.on{background:var(--mango-soft);}
.switch.on::after{left:21px;background:var(--mango-100);}

/* =============== UTIL =============== */
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}.gap-24{gap:24px;}
.mt-0{margin-top:0;}.mb-0{margin-bottom:0;}
.text-low{color:var(--text-low);}
.text-mango{color:var(--mango-100);}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* =============== RESPONSIVE =============== */
.mobile-only{display:none;}
@media (max-width: 980px){
  .mobile-only{display:inline-flex;}
  .hero-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:150;transform:translateX(-110%);transition:transform .25s ease;width:260px;}
  .app-sidebar.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
}
@media (max-width: 720px){
  .nav-links{display:none;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cal-grid{grid-template-columns:repeat(7,minmax(40px,1fr));}
  .cal-cell{min-height:64px;padding:6px;font-size:.62rem;}
  .app-main{padding:20px 16px 50px;}
}