/*  */
:root{
  --brand-red: #f70000;
  --brand-red-2: #ff3b3b;
  --ink: #ffffff;
  --muted: #cfcfcf;

  --panel: #161616;
  --panel-2: #121212;

  --header-h: 72px;
  --header-pad-x: 28px;

  --hero-gap: clamp(24px, 5vw, 64px);
  --hero-w:    clamp(880px, 70vw, 1220px);
  --safe-right: clamp(420px, 34vw, 760px);

  --radius-xl: 26px;
  --radius-lg: 18px;

  --max-video-w: 3840px;
  --max-video-h: 2160px;
}

/*  */
*{box-sizing:border-box}
html, body{
  height:100%;
  margin:0;
  background:#000;
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/*  */
html, body{ cursor:url("../cursor/1m.png") 2 2, auto; }
a, button, [role="button"], .clickable,
input[type="button"], input[type="submit"], label, select{
  cursor:url("../cursor/2m.png") 16 2, pointer;
}
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
textarea, [contenteditable="true"]{ cursor:text; }

/*  */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h);
  z-index:9999;
  background:rgba(15,15,15,.88);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{ position:relative; height:100%; padding:0 var(--header-pad-x); }
.brand-link{
  position:absolute; left:var(--header-pad-x); top:50%; transform:translateY(-50%);
  color:var(--brand-red); text-decoration:none; font-weight:900;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(20px, 2.4vw, 32px); line-height:1;
}
.nav{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; gap:22px; white-space:nowrap; font-size:clamp(14px,1.1vw,16px);
}
.nav a{ color:#fff; text-decoration:none; opacity:.9; font-weight:600; }
.nav a:hover{ opacity:1; }
.actions{
  position:absolute; right:var(--header-pad-x); top:50%; transform:translateY(-50%);
  display:flex; gap:10px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px; border-radius:10px; text-decoration:none;
  font-weight:600; line-height:1; border:1px solid rgba(255,255,255,.18);
  color:#fff; background:rgba(0,0,0,.25);
}
.btn:hover{ background:rgba(255,255,255,.06); }
.btn-signup{ color:var(--brand-red); border-color:var(--brand-red); background:transparent; }
.btn-signup:hover{ background: color-mix(in srgb, var(--brand-red) 16%, transparent); }

/*  */
.bg-video{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:  min(100vw, var(--max-video-w));
  height: min(100vh, var(--max-video-h));
  object-fit: cover;
  object-position: 50% 50%;
  z-index:0; pointer-events:none; background:#000;
}
@media (min-aspect-ratio: 21/9){ .bg-video{ object-fit: contain; } }
@media (orientation: portrait){ .bg-video{ object-fit: contain; } }

/*  */
.content{
  position:relative; z-index:1;
  min-height:100%;
  padding-top:var(--header-h);
}

/*  */
.hero{
  width:min(var(--hero-w), calc(100vw - var(--safe-right) - var(--hero-gap)));
  margin-left:var(--hero-gap);
  margin-top:var(--hero-gap);
  margin-right:auto;
  margin-bottom:72px;
}
.hero-wrap{
  background:rgba(22,22,22,.86);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-xl);
  padding:36px 32px 44px;
  text-align:center;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 80px rgba(247,0,0,.08);
}
.hero-kicker{
  display:inline-flex; gap:10px; align-items:center;
  color:#e6e6e6; letter-spacing:.12em; font-weight:800; font-size:14px; opacity:.95;
}
.hero-kicker .accent{ color:#ffc533; }
.hero-title{
  margin:10px 0 8px;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(46px, 9vw, 96px); line-height:.95;
  color:var(--brand-red);
  text-shadow:0 0 24px rgba(247,0,0,.25);
}
/*  */
.hero-subbrand{
  color:#e6e6e6;
  font-weight:800; letter-spacing:.2em; font-size:14px; margin-bottom:8px;
}
.hero-sub{
  margin:12px auto 22px; max-width:900px;
  font-size:clamp(16px, 2.2vw, 20px); color:#ededed;
}
.hero-sub .red{ color:var(--brand-red); font-weight:800; }

/*  */
.features{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  margin-top: clamp(28px, 2.4vw, 44px);
}
.feature{
  position:relative; background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg);
  padding:20px 18px; backdrop-filter:blur(2px); min-height:120px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature .ico{ width:28px; height:28px; margin-bottom:8px; color:var(--brand-red); }
.feature h3{ margin:0 0 6px; font-size:20px; color:#fff; font-weight:800; }
.feature small{ color:#cfcfcf; }
.feature:hover{
  transform:translateY(-2px);
  border-color:rgba(247,0,0,.55);
  box-shadow:0 0 0 1px rgba(247,0,0,.28) inset, 0 10px 28px rgba(247,0,0,.16);
}

/*  */
.feature.is-active{
  border-color:var(--brand-red);
  box-shadow:0 0 0 2px rgba(247,0,0,.35) inset, 0 0 46px rgba(247,0,0,.22);
}
.feature.is-active::after{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  box-shadow:0 0 0 0 rgba(247,0,0,.30);
  animation:ping 1.15s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(247,0,0,.30) }
  100%{ box-shadow:0 0 0 16px rgba(247,0,0,0) }
}

/*  */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin:28px auto 0; height:56px; padding:0 28px;
  border-radius:14px; text-decoration:none; font-weight:900; letter-spacing:.02em;
  color:#fff; background:linear-gradient(180deg, var(--brand-red-2), var(--brand-red));
  border:1px solid rgba(247,0,0,.6);
  box-shadow:0 14px 40px rgba(247,0,0,.38), 0 0 0 1px rgba(255,255,255,.09) inset;
  transition:transform .15s ease, box-shadow .2s ease;
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 18px 46px rgba(247,0,0,.5), 0 0 0 1px rgba(255,255,255,.14) inset; }

/*  */
.auth-shell{
  display:grid; place-items:center;
  min-height:calc(100vh - var(--header-h));
  padding: clamp(16px, 4vw, 40px);
}
.auth-card{
  width:min(560px, 92vw);
  background:rgba(22,22,22,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:28px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 80px rgba(247,0,0,.08);
}
.auth-title{ margin:0 0 6px; font-size:28px; font-weight:900; letter-spacing:.02em; text-align:center; }
.auth-sub{ margin:0 0 18px; color:#e5e5e5; text-align:center; }
.field{ display:flex; flex-direction:column; gap:8px; margin:12px 0 }
.field label{ font-size:14px; color:#d8d8d8; text-align:left; }
.inp{
  height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:#0f0f0f; color:#fff; padding:0 12px; outline:none;
}
.inp:focus{ border-color:var(--brand-red) }
.btn-primary{
  margin-top:8px; height:48px; border-radius:12px; width:100%;
  border:1px solid rgba(247,0,0,.7);
  background:linear-gradient(180deg, var(--brand-red-2), var(--brand-red));
  color:#fff; font-weight:900;
}
.alt{ margin-top:10px; color:#d7d7d7; text-align:center; }
.alt a{ color:#fff; }

/*  */
.account-shell{
  width:min(1100px, calc(100vw - var(--hero-gap) * 2 - var(--safe-right) * .35));
  margin: var(--hero-gap) auto 96px var(--hero-gap);
}
.profile-card, .invite-card{
  background:rgba(22,22,22,.9);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 70pxrgba(247,0,0,.06);
}

/*  */
.account-page .account-shell{
  width:min(1080px, calc(100vw - 40px));
  margin: calc(var(--hero-gap) + 16px) auto 120px auto;
  padding: 0 8px;
}
.account-page .account-title{
  text-align:center;
  margin: -10px 0 22px;
  position:relative;
}
.account-page .account-title h1{
  margin:0;
  font-size: clamp(34px, 5vw, 52px);
  font-weight:900; letter-spacing:.02em;
}
.account-page .account-title::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60%; height:140%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(247,0,0,.18) 0%, rgba(247,0,0,0) 70%);
  filter:blur(22px); z-index:-1;
}

/*  */
.account-page .badge{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px; font-weight:800; border-radius:999px; font-size:13px;
  border:1px solid rgba(255,255,255,.12); color:#fff;
}
.account-page .badge.green{ background:rgba(7,170,80,.15); border-color:rgba(7,170,80,.45) }
.account-page .badge.gray{ background:rgba(255,255,255,.06) }

/*  */
.account-page .account-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

/*  */
.account-page .card{
  position:relative; overflow:hidden;
  background:rgba(22,22,22,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px; padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 70px rgba(247,0,0,.05);
}
.account-page .card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(247,0,0,.15));
  /*  */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  /*  */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events:none;
}
.account-page .card-head{
  font-weight:900; font-size:18px; color:#fff; margin-bottom:12px; letter-spacing:.02em;
}

/*  */
.account-page .kv{
  display:grid; grid-template-columns:160px 1fr; column-gap:14px; row-gap:10px;
}
.account-page .kv .k{ color:#d2d2d2; align-self:center; }
.account-page .kv .v{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:10px 12px;
}

/*  */
.account-page .chip{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px; border-radius:999px; font-weight:800;
  border:1px solid rgba(255,255,255,.12); color:#fff;
}
.account-page .chip.ok  { background:rgba(7,170,80,.15);  border-color:rgba(7,170,80,.45); }
.account-page .chip.warn{ background:rgba(255,77,77,.14); border-color:rgba(255,77,77,.42); }

/*  */
.account-page .cta.wide{ width:100%; margin-top:14px; display:inline-flex; justify-content:center; }

/*  */
.account-page .invite{ margin-top:16px; }
.account-page .invite .summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:8px 0 12px; flex-wrap:wrap;
}
.account-page .invite .stat{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.account-page .invite .stat .label{ color:#d2d2d2; }
.account-page .invite .stat .num{
  font-weight:900; font-size:18px; padding:6px 10px; border-radius:10px;
  background:#0e0e0e; border:1px solid rgba(255,255,255,.1);
}
.account-page .invite .stat .goal{ opacity:.85; }
.account-page .invite .stat .ok{ color:#18c37d; font-weight:800; }
.account-page .invite .stat .hint{ opacity:.85; }

/*  */
.account-page .invite .refline{
  display:flex; align-items:center; gap:10px;
  margin:6px 0 10px;
}
.account-page .invite .refline .label{ color:#d2d2d2; }
.account-page .invite .refline .ref-copy-link{
  color:var(--brand-red);
  text-decoration:underline;
  font-weight:900;
}
.account-page .invite .refline .ref-copy-link:hover{
  text-decoration:none;
  filter:saturate(1.15);
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace; }

.account-page .steps{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.account-page .step{
  position:relative; /*  */
  width:64px; height:64px; border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0e0e0e; border:1px solid rgba(255,255,255,.08); font-weight:900;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.account-page .step span{ font-size:20px; line-height:1; }
.account-page .step small{ opacity:.8; }

/*  */
.account-page .step.is-current{
  background:rgba(24,195,125,.12);
  border-color:rgba(24,195,125,.6);
  box-shadow:0 0 0 2px rgba(24,195,125,.25) inset, 0 0 26px rgba(24,195,125,.18);
  color:#dffbe9;
}
.account-page .step.is-current span{ color:#e8fff3; }
.account-page .step.is-current small{ color:#bff3d6; }
.account-page .step.is-current::after{
  content:"";
  position:absolute; inset:-3px; border-radius:22px;
  box-shadow:0 0 0 0 rgba(24,195,125,.25);
  animation:refStepPulse 1.8s ease-out infinite;
}
@keyframes refStepPulse{
  to{ box-shadow:0 0 0 14px rgba(24,195,125,0) }
}

.account-page .line{
  flex:1; height:2px;
  background:linear-gradient(90deg, rgba(247,0,0,0), rgba(247,0,0,.6), rgba(247,0,0,0));
  opacity:.5;
}
.account-page .btn-ghost{
  margin-left:auto; height:40px; padding:0 16px; border-radius:12px;
  border:1px dashed rgba(255,255,255,.22); background:transparent; color:#fff; opacity:.8;
}
.account-page .btn-ghost.ready{
  border:1px solid rgba(24,195,125,.6);
  background:rgba(24,195,125,.12);
  opacity:1; cursor:pointer;
}
.account-page .btn-ghost.ready:hover{
  box-shadow:0 0 0 1px rgba(24,195,125,.45) inset, 0 8px 24px rgba(24,195,125,.28);
  transform:translateY(-1px);
}

/*  */
.account-page .step.done{
  border-color: rgba(24,195,125,.65);
  background: radial-gradient(60% 60% at 50% 45%,
              rgba(24,195,125,.24) 0%,
              rgba(24,195,125,.12) 60%,
              rgba(24,195,125,.08) 100%);
  box-shadow: 0 0 0 1px rgba(24,195,125,.35) inset,
              0 10px 28px rgba(24,195,125,.18);
}
.account-page .step.done span,
.account-page .step.done small{ color:#fff; }

.account-page .step.done::after{
  content:"";
  position:absolute; inset:-3px; border-radius:22px;
  box-shadow:0 0 0 0 rgba(24,195,125,.22);
  animation:refStepPulse 1.6s ease-out infinite;
}

.account-page .line.done{
  background: linear-gradient(90deg,
              rgba(24,195,125,0),
              rgba(24,195,125,.85),
              rgba(24,195,125,0));
  opacity:.9;
}

/*  */
@media (max-width: 900px){
  .account-page .account-grid{ grid-template-columns:1fr; }
}

/*  */
.toasts{
  position:fixed;
  top:calc(var(--header-h) + 12px);
  right:16px;
  display:grid; gap:10px;
  z-index:10050;
}
.toasts.centered{ right:auto; left:50%; transform:translateX(-50%); }
.toast{
  --accent:#ff4d4d;
  background:#1b1b1f;
  border:1px solid rgba(255,255,255,.08);
  color:#e9e9e9;
  border-radius:14px;
  min-width:280px; max-width:min(420px, 90vw);
  padding:12px 14px 12px 12px;
  box-shadow:0 12px 38px rgba(0,0,0,.45), 0 0 60px rgba(247,0,0,.08);
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:flex-start;
  opacity:0; transform:translateY(-8px);
}
.toast.show{ animation:toastIn .24s ease-out forwards; }
.toast.hide{ animation:toastOut .22s ease-in forwards; }
@keyframes toastIn{ to{opacity:1; transform:translateY(0)} }
@keyframes toastOut{ to{opacity:0; transform:translateY(-8px)} }
.toast .ico{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:999px; border:1.5px solid var(--accent); color:var(--accent);
  margin-top:2px;
}
.toast .title{ font-weight:900; letter-spacing:.02em; color:var(--accent); line-height:1.2; }
.toast .text{ color:#e0e0e0; margin-top:2px; }
.toast .close{
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:10px; background:#242428; color:#fff; border:1px solid rgba(255,255,255,.08);
}

/*  */
.toast.success{ --accent:#18c37d; }
.toast.info{ --accent:#f70000; }   /*  */
.toast.warning{ --accent:#ffcc66; }
.toast.error, .toast.danger{ --accent: var(--brand-red) !important; }

/*  */
@media (max-width: 1200px){
  :root{
    --hero-w: clamp(820px, 84vw, 1200px);
    --safe-right: clamp(300px, 34vw, 640px);
  }
}
@media (max-width: 900px), (orientation: portrait){
  :root{ --safe-right: 0px; }
  .hero{ width: calc(100vw - var(--hero-gap) * 2); }
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .account-shell{ width: calc(100vw - var(--hero-gap) * 2); margin: var(--hero-gap) auto 96px auto; }
  .profile-card{ margin-bottom:18px; }
  .toasts{ right:12px; left:12px; }
}
@media (max-width: 560px){
  :root{ --header-pad-x:16px; --hero-gap:16px; }
  .nav{ gap:12px; font-size:14px; }
  .btn{ height:34px; padding:0 10px; }
  .brand-link{ font-size:clamp(18px, 5vw, 28px); }
  .hero-wrap{ padding:22px 16px 26px; border-radius:20px; }
  .features{ grid-template-columns:1fr; }
  .cta{ width:100%; }
}

/*  */
@media (prefers-reduced-motion: reduce){
  .feature.is-active::after{ animation: ping 2.4s ease-out infinite; }
  .account-page .step.is-current::after,
  .account-page .step.done::after{ animation-duration:2.4s; }
}