/* MACAUGG — premium landing (SEO-friendly), complex UI, subtle FX */
:root{
  --bg0:#050612;
  --bg1:#070818;
  --text:#eef0ff;
  --muted:rgba(238,240,255,.72);
  --line:rgba(238,240,255,.12);
  --glass:rgba(255,255,255,.045);
  --glass2:rgba(255,255,255,.06);

  --p1:#6b5bff;
  --p2:#ff3d98;
  --p3:#ffd27a;
  --g1:#14c986;

  --gold1:#f7d37a;
  --gold2:#caa253;

  --shadow: 0 24px 90px rgba(0,0,0,.58);
  --shadow2: 0 14px 46px rgba(0,0,0,.42);

  --r:20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(107,91,255,.26), transparent 58%),
    radial-gradient(780px 520px at 88% 14%, rgba(255,61,152,.18), transparent 60%),
    radial-gradient(860px 560px at 54% 92%, rgba(255,210,122,.10), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 55%, var(--bg0));
  line-height:1.55;
  padding-bottom: calc(90px + var(--safe-b));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; border-radius:14px; background:#0c1030; border:1px solid var(--line); z-index:1000}

.bgfx{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.55;
}
#fx{width:100%; height:100%}

.topbar{
  position:sticky; top:0; z-index:60;
  padding-top: var(--safe-t);
  background: linear-gradient(to bottom, rgba(5,6,18,.92), rgba(5,6,18,.52));
  border-bottom:1px solid rgba(238,240,255,.10);
  backdrop-filter: blur(14px);
}
.topbar__inner{
  height:58px;
  display:flex; align-items:center; gap:12px;
  padding: 0 14px;
}
.topbar__right{margin-left:auto; display:flex; gap:10px; align-items:center}

.brand{display:flex; align-items:center; gap:10px; font-weight:950}
.brand__text{
  letter-spacing:.14em;
  font-weight:1000;
  font-size:1.04rem;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand__mark{
  width:30px; height:30px; border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(107,91,255,.55), rgba(255,61,152,.35));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(107,91,255,.16);
}

.iconbtn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.iconbtn:hover{background:rgba(255,255,255,.08)}
.hamburger{width:18px; height:12px; display:inline-block; position:relative}
.hamburger::before,.hamburger::after,.hamburger span{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:rgba(238,240,255,.92);
}
.hamburger::before{top:0}
.hamburger::after{bottom:0}
.hamburger span{top:5px}

.pill{
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:950;
  padding: 9px 14px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .12s ease, background .12s ease;
}
.pill:hover{background: rgba(255,255,255,.08); transform: translateY(-1px)}
.pill--ghost{background: rgba(255,255,255,.03)}
.pill--grad{
  background: linear-gradient(135deg, rgba(107,91,255,.95), rgba(255,61,152,.92));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 46px rgba(107,91,255,.22);
  position:relative;
  overflow:hidden;
}
.pill--grad::after{
  content:"";
  position:absolute; inset:-40% -30%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  animation: sweep 5.4s ease-in-out infinite;
  opacity:.42;
}
@keyframes sweep{0%,62%{transform:translateX(-65%) rotate(8deg)} 100%{transform:translateX(65%) rotate(8deg)}}

.page{max-width: 1040px; margin: 0 auto; padding: 14px 14px 0}
.hero{padding: 12px 0 10px}
.hero__shell{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 18px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero__shell::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(10px 10px at 18% 22%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(8px 8px at 72% 18%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(12px 12px at 86% 42%, rgba(255,255,255,.06), transparent 60%);
  opacity:.55;
  mix-blend-mode: screen;
  pointer-events:none;
}

.hero__media{padding: 16px}
.frame{
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden;
  box-shadow: var(--shadow2);
  position:relative;
  isolation:isolate;
}
.frame__img{width:100%; height:auto}
.frame__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(520px 300px at 25% 18%, rgba(255,61,152,.10), transparent 60%),
    radial-gradient(520px 300px at 78% 22%, rgba(107,91,255,.12), transparent 62%),
    linear-gradient(180deg, transparent 54%, rgba(0,0,0,.55));
  z-index:2;
  pointer-events:none;
}
.badge{
  position:absolute; left:14px; bottom:14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
  font-weight:1000;
  letter-spacing:.12em;
  backdrop-filter: blur(10px);
  z-index:5;
}

/* GOLD ROTATING FRAME */
.fx-ring__outer{
  position:absolute; inset:-30px;
  border-radius: 30px;
  background: conic-gradient(from 0deg,
    rgba(247,211,122,0) 0%,
    rgba(247,211,122,.42) 12%,
    rgba(202,162,83,.14) 18%,
    rgba(247,211,122,0) 32%,
    rgba(247,211,122,.35) 55%,
    rgba(247,211,122,0) 70%,
    rgba(202,162,83,.14) 82%,
    rgba(247,211,122,.38) 92%,
    rgba(247,211,122,0) 100%);
  opacity:.55;
  animation: spin 10.5s linear infinite;
  z-index:1;
  pointer-events:none;
  mask: radial-gradient(circle at 50% 50%, transparent 60%, #000 66%);
}
.fx-ring__inner{
  position:absolute; inset: 10px;
  border-radius: 20px;
  border:1px solid rgba(247,211,122,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  z-index:3;
  pointer-events:none;
}
.fx-ring__spark{
  position:absolute; inset:0;
  background:
    radial-gradient(6px 6px at 18% 30%, rgba(247,211,122,.32), transparent 60%),
    radial-gradient(4px 4px at 70% 20%, rgba(247,211,122,.24), transparent 62%),
    radial-gradient(5px 5px at 85% 55%, rgba(247,211,122,.20), transparent 62%),
    radial-gradient(4px 4px at 30% 72%, rgba(247,211,122,.18), transparent 62%);
  opacity:.50;
  mix-blend-mode: screen;
  animation: floatSpark 7.2s ease-in-out infinite;
  z-index:4;
  pointer-events:none;
}
@keyframes spin{to{transform: rotate(360deg)}}
@keyframes floatSpark{0%,100%{transform: translateY(0)}50%{transform: translateY(-6px)}}

.hero__copy{
  padding: 18px 18px 16px 6px;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(238,240,255,.86);
  font-weight:950;
  letter-spacing:.04em;
  margin: 10px 0 10px;
}
.h1{
  margin: 0 0 6px;
  font-size: 2.35rem;
  line-height:1.05;
  letter-spacing:.10em;
  font-weight:1100;
}
.sub{
  margin: 0 0 12px;
  color: rgba(238,240,255,.84);
  font-weight:900;
}
.lead{
  margin: 0 0 14px;
  color: rgba(238,240,255,.76);
  font-size: 1.02rem;
}
.cta{display:flex; gap:12px; margin: 12px 0 14px}
.btn{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:1000;
  padding: 12px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{background: rgba(255,255,255,.08); transform: translateY(-1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(107,91,255,.95), rgba(255,61,152,.92));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 52px rgba(107,91,255,.24);
  position:relative;
  overflow:hidden;
  flex:1;
}
.btn--primary::after{
  content:"";
  position:absolute; inset:-40% -30%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  animation: sweep 5.4s ease-in-out infinite;
  opacity:.40;
}
.btn--soft{
  flex:1;
  background: rgba(255,61,152,.10);
  border-color: rgba(255,61,152,.22);
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.stat{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 10px;
}
.stat__n{
  font-weight:1100;
  font-size: 1.35rem;
  letter-spacing:.02em;
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__t{color: rgba(238,240,255,.70); font-weight:900; font-size:.92rem}

.infobox{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  margin-top: 8px;
}
.row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.row:last-child{border-bottom:0}
.row span{color: rgba(238,240,255,.70); font-weight:950}
.row b{font-weight:1050}

.note{margin: 10px 0 0; color: rgba(238,240,255,.60); font-weight:850; font-size:.92rem}

.section{padding: 18px 2px 24px}
.section__head{max-width: 860px}
.h2{font-size:1.55rem; line-height:1.2; margin: 0 0 10px}
.p{margin:0 0 12px; color: rgba(238,240,255,.78)}
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.card{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.card__top{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  margin-bottom: 10px;
}
.num{
  font-weight:1100;
  letter-spacing:.10em;
  color: rgba(238,240,255,.88);
}
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(238,240,255,.82);
  font-weight:950;
  font-size:.86rem;
}
.card h3{margin: 6px 0 8px; font-size: 1.06rem}
.card ul{margin:0; padding-left: 18px; color: rgba(238,240,255,.74)}
.card li{margin: 7px 0}

.callout{
  margin-top: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,210,122,.22);
  background: rgba(255,210,122,.08);
  padding: 12px 14px;
  color: rgba(238,240,255,.86);
  font-weight:900;
}

.faq{display:grid; gap:10px; max-width: 860px}
.qa{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
}
.qa summary{cursor:pointer; font-weight:1000}
.qa p{color: rgba(238,240,255,.74); margin: 10px 0 0}

.footer{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 18px 2px 18px;
  color: rgba(238,240,255,.80);
}
.footer__grid{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer__brand{font-weight:1100; letter-spacing:.10em}
.footer__small{color: rgba(238,240,255,.68); font-weight:850}
.footer__links{display:flex; gap:12px; flex-wrap:wrap}
.footer__links a{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:900;
}
.footer__bar{margin-top: 12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.muted{color: rgba(238,240,255,.60)}

.bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  padding-bottom: var(--safe-b);
  background: linear-gradient(to top, rgba(5,6,18,.96), rgba(5,6,18,.68));
  border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  z-index:70;
}
.navitem{
  padding: 12px 8px 10px;
  display:grid;
  place-items:center;
  gap:6px;
  color: rgba(238,240,255,.72);
  font-weight:950;
}
.navitem .ico{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.navitem.is-active{color:#fff}
.navitem.is-active .ico{
  background: linear-gradient(135deg, rgba(107,91,255,.30), rgba(255,61,152,.22));
  border-color: rgba(255,255,255,.14);
}
.navitem--cta .ico{
  background: linear-gradient(135deg, rgba(255,210,122,.18), rgba(255,61,152,.20));
  border-color: rgba(255,255,255,.14);
}

.drawer,.modal{position:fixed; inset:0; display:none; z-index:90}
.drawer[aria-hidden="false"], .modal[aria-hidden="false"]{display:block}
.backdrop{position:absolute; inset:0; background: rgba(0,0,0,.60)}
.panel{
  position:absolute; left:0; top:0; bottom:0;
  width: min(360px, 86vw);
  background: linear-gradient(180deg, rgba(11,15,42,.98), rgba(7,9,28,.98));
  border-right:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 14px;
}
.panel__head{display:flex; align-items:center; justify-content:space-between}
.panel__title{font-weight:1100}
.panel__body{display:grid; gap:10px; margin-top:12px}
.panel__body a{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:950;
}
.panel__body a:hover{background: rgba(255,255,255,.07)}
.panel__body hr{border:0; border-top:1px solid rgba(255,255,255,.10); margin:6px 0}
.tiny{font-size:.92rem; font-weight:850}

.modal__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(520px, 92vw);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(11,15,42,.98), rgba(7,9,28,.98));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg, rgba(107,91,255,.32), rgba(255,61,152,.22));
}
.modal__title{font-weight:1100}
.tag{
  margin-left:8px;
  font-size:.78rem;
  padding:.2rem .5rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.form{padding: 16px}
.field{display:grid; gap:8px; margin-bottom: 12px}
.field span{font-weight:1000}
.field input{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
.field input:focus{border-color: rgba(255,61,152,.55); box-shadow: 0 0 0 3px rgba(255,61,152,.18)}
.pw{display:flex; gap:8px; align-items:center}
.pw input{flex:1}
.pw__toggle{
  width: 48px; height: 46px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.check{display:flex; gap:10px; align-items:center; color: rgba(238,240,255,.78); font-weight:900; margin: 10px 0 12px}
.sep{display:flex; align-items:center; gap:12px; margin: 14px 0; color: rgba(238,240,255,.60); font-weight:950}
.sep::before,.sep::after{content:""; height:1px; background: rgba(255,255,255,.10); flex:1}

.toast{
  position:fixed; left:50%; bottom: calc(98px + var(--safe-b));
  transform: translateX(-50%);
  width: min(620px, 92vw);
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,15,42,.92);
  box-shadow: var(--shadow);
  color: rgba(238,240,255,.90);
  display:none;
  z-index:95;
}
.toast.show{display:block; animation: toastIn .18s ease-out}
@keyframes toastIn{from{transform:translateX(-50%) translateY(10px); opacity:.3} to{transform:translateX(-50%) translateY(0); opacity:1}}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero__shell{grid-template-columns: 1fr; gap: 8px}
  .hero__copy{padding: 0 16px 16px}
  .cards{grid-template-columns: 1fr}
  .page{max-width: 640px}
}
@media (prefers-reduced-motion: reduce){
  .pill--grad::after,.btn--primary::after,.fx-ring__outer,.fx-ring__spark{animation:none}
  .reveal{transition:none}
}