/* ==========================================================================
   BE HERO — public site (Ronin-style layout adapted to the academy)
   Left rail that expands · pill tabs · statue cards · banners · big wordmark
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

:root { --rail-w: 112px; --rail-x: 20px; }

body.site { overflow-x: hidden; background: var(--bg); }
.wrap { width: min(1240px, 100%); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100%); margin-inline: auto; }
section { position: relative; }

.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(38, 66, 150, .22), transparent 70%),
    radial-gradient(45% 40% at 95% 12%, rgba(70, 40, 110, .14), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(200, 160, 80, .08), transparent 70%),
    var(--bg);
}

/* Section rhythm */
.sec { padding-top: clamp(64px, 8vw, 110px); }
.lead { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: #CDD0DA; max-width: 560px; }
.h1 { font-size: clamp(34px, 4.6vw, 66px); }
.h2 { font-size: clamp(26px, 2.8vw, 40px); }

/* ---------------------------------------------------------------- Top ticker */
.ticker { position: relative; z-index: 95; height: 28px; overflow: hidden; background: #000; border-bottom: 1px solid rgba(200, 160, 80, .25); }
.ticker__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; height: 28px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #F0F0F0; }
.ticker i { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- Left rail */
.rail {
  position: fixed; z-index: 90; left: var(--rail-x); top: 44px; bottom: 16px; width: var(--rail-w);
  display: flex; flex-direction: column; padding: 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 30px;
  background: rgba(5, 9, 22, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  overflow: hidden; transition: width .6s var(--ease), background .35s;
}
.rail.is-open { width: 404px; background: rgba(6, 10, 24, .94); }
.rail__logo { width: var(--rail-w); flex: none; display: grid; justify-items: center; gap: 6px; padding-bottom: 14px; }
.rail__logo img { width: 42px; height: 42px; transition: transform .6s var(--ease); }
.rail__logo:hover img { transform: rotate(-8deg) scale(1.06); }
.rail__logo span { font-family: var(--f-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.rail__body { flex: 1; min-height: 0; display: flex; }
.rail__col { width: var(--rail-w); flex: none; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5vh, 14px); }
.rail__extra {
  flex: none; width: 250px; display: grid; grid-template-columns: repeat(2, 1fr); align-content: start;
  gap: clamp(6px, 1.5vh, 14px) 6px; padding-right: 26px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.rail.is-open .rail__extra { opacity: 1; pointer-events: auto; }
.rail__item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text); text-align: center; }
.rail__ic {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease);
}
.rail__lb { font-size: 12.5px; font-weight: 500; line-height: 1.15; max-width: 100px; }
.rail__item:hover .rail__ic { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.rail__item.is-current .rail__ic { border-color: var(--gold); color: var(--gold); background: rgba(200, 160, 80, .12); }
.rail__more .rail__ic { background: transparent; border-color: rgba(255, 255, 255, .75); }
.rail.is-open .rail__more .rail__ic { background: var(--text); color: var(--ink); }
.rail__extra .rail__item { opacity: 0; transform: translateX(-14px); transition: opacity .35s, transform .55s var(--ease); }
.rail.is-open .rail__extra .rail__item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 140ms); }
.rail__close { position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: none; border: 0; opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; }
.rail__close:hover { background: rgba(255, 255, 255, .08); }
.rail.is-open .rail__close { opacity: 1; pointer-events: auto; transition-delay: .25s; }
.rail__foot { width: var(--rail-w); flex: none; display: grid; place-items: center; padding-top: 12px; }
.rail__login { display: grid; place-items: center; height: 46px; padding: 0 20px; border-radius: 999px; background: #F2F2F2; color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s; }
.rail__login:hover { background: var(--gold); }
@media (max-height: 760px) {
  .rail__ic { width: 46px; height: 46px; }
  .rail__lb { font-size: 11.5px; }
  .rail__logo span { display: none; }
}
@media (max-height: 600px) { .rail__lb { display: none; } }

.scrim { position: fixed; inset: 0; z-index: 85; background: rgba(2, 4, 10, .55); opacity: 0; pointer-events: none; transition: opacity .4s; }
body.rail-open .scrim { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- Page + tabs */
.page { padding: 0 32px 0 calc(var(--rail-x) + var(--rail-w) + 32px); }
.mbar { display: none; }

.tabs { position: sticky; top: 10px; z-index: 50; display: flex; justify-content: center; padding-top: 14px; pointer-events: none; }
.tabs__in { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: auto; }
.tabs__a {
  position: relative; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 12, 28, .62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 500; color: #F5F5F5; white-space: nowrap; transition: border-color .25s;
}
.tabs__a:hover { border-color: rgba(255, 255, 255, .4); }
.tabs__blob {
  position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px;
  background: #EDEDED; mix-blend-mode: difference; pointer-events: none; opacity: 0;
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s;
}
.tabs__blob.is-on { opacity: 1; }

/* ---------------------------------------------------------------- Shared bits */
.disc {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #EFD08A, #9C7A33 75%); color: var(--ink);
  box-shadow: 0 0 0 6px rgba(200, 160, 80, .1);
}
.shead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px 28px; margin-bottom: 28px; }
.shead__t { display: flex; align-items: center; gap: 14px; }
.shead__t .display { font-size: clamp(24px, 2.5vw, 36px); text-transform: none; line-height: 1.1; }
.shead__s { margin: 12px 0 0; color: #C9CCD6; font-size: 16px; max-width: 640px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C9CCD6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(3, 6, 15, .35); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot--on { background: #4FB286; animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(79, 178, 134, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(79, 178, 134, 0); } }
.meter { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, #9C7A33, var(--gold-hi)); transform-origin: left; }

/* Card base + hover effects (spotlight + gold edge that follows the cursor) */
.card, .tier, .board, .feat, .faq__item, .banner, .ascent, .step, .tile, .rowcard, .phero__card, .media-card { position: relative; isolation: isolate; }
[data-card]::before, [data-card]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
[data-card]::after { z-index: 5; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .07), transparent 45%); }
[data-card]::before {
  z-index: 6; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 196, 120, .95), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-card]:hover::before, [data-card]:hover::after { opacity: 1; }
[data-tilt] { transform-style: preserve-3d; }

/* ---------------------------------------------------------------- Hero */
.hero { display: grid; justify-items: center; text-align: center; gap: 18px; padding-top: clamp(28px, 4vw, 56px); }
.hero__title { font-size: clamp(34px, 5.4vw, 84px); line-height: .95; letter-spacing: .01em; }
.hero__sub { margin: 0; font-size: clamp(15px, 1.3vw, 19px); color: #DADCE3; }
.stage { position: relative; width: min(1120px, 100%); margin-top: 30px; perspective: 1400px; }
.stage__frame { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9); }
.stage__video { width: 100%; height: 100%; object-fit: cover; }
.stage__corner { position: absolute; z-index: 0; width: 84px; height: 84px; border-radius: 14px; background: linear-gradient(135deg, #D9B465, #8E6E2C); }
.stage__corner::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(3, 6, 15, .35); border-radius: 8px; }
.stage__corner--a { top: -10px; left: -10px; }
.stage__corner--b { right: -10px; bottom: -10px; }
.stage__label { position: absolute; left: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(3, 6, 15, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- Quest ticker */
.qticker { margin-top: clamp(40px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.qticker__track { display: flex; gap: 14px; width: max-content; animation: marquee 70s linear infinite; padding: 4px 0; }
.qticker:hover .qticker__track { animation-play-state: paused; }
.qcard { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .3s var(--ease); }
.qcard:hover { border-color: rgba(200, 160, 80, .5); transform: translateY(-3px); }
.qcard__ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); flex: none; }
.qcard__t b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.qcard__t small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.qcard .exp { margin-left: 10px; }

/* ---------------------------------------------------------------- Bento (disciplines) */
.bento { display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: 22px; }
.card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color .3s, box-shadow .4s; }
.card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.card--feature { grid-row: span 2; min-height: 540px; justify-content: center; align-items: flex-start; padding: 48px; background: #000; }
.card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.9); }
.card--feature:hover .card__bg { transform: scale(1.06); filter: saturate(1.1); }
.card--feature .tag { position: absolute; top: 18px; left: 50%; translate: -50% 0; background: rgba(0, 0, 0, .5); }
.card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent 60%); }
.card__big { font-size: clamp(52px, 6.4vw, 104px); line-height: .9; text-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.card__big small { display: block; margin-top: 12px; font-family: var(--f); font-size: 13px; font-weight: 600; letter-spacing: .4em; color: var(--gold); }
.orn { position: absolute; width: 64px; height: 64px; z-index: 1; opacity: .8; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23C8A050' stroke-width='2.4'%3E%3Cpath d='M3 61V3h58'/%3E%3Cpath d='M11 61V11h50'/%3E%3Cpath d='M19 44V19h25v14H31v-7'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .6s var(--ease); }
.orn--tl { top: 14px; left: 14px; }
.orn--tr { top: 14px; right: 14px; transform: rotate(90deg); }
.orn--br { bottom: 14px; right: 14px; transform: rotate(180deg); }
.orn--bl { bottom: 14px; left: 14px; transform: rotate(270deg); }
.card--feature:hover .orn--tl { transform: translate(-4px, -4px); }
.card--feature:hover .orn--tr { transform: rotate(90deg) translate(-4px, -4px); }
.card--feature:hover .orn--br { transform: rotate(180deg) translate(-4px, -4px); }
.card--feature:hover .orn--bl { transform: rotate(270deg) translate(-4px, -4px); }
.card__head { padding: 20px 20px 14px; }
.card--disc .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.card__t { margin: 12px 0 6px; font-size: 19px; font-weight: 700; }
.card__p { margin: 0; color: var(--muted); font-size: 14px; }
.card__img { margin: auto 0 0; height: 180px; overflow: hidden; border-top: 1px solid var(--line); }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform 1.2s var(--ease); }
.card:hover .card__img img { transform: scale(1.08); }

/* ---------------------------------------------------------------- Tiers (goal horizons) */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 310px)); justify-content: center; align-items: center; }
.tier { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #0B0D14; border: 1px solid rgba(255, 255, 255, .06); transition: opacity .35s, filter .35s; }
.tier__img { margin: 0; aspect-ratio: 4 / 3.1; overflow: hidden; }
.tier__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1.2s var(--ease); }
.tier:hover .tier__img img { transform: scale(1.07); }
.tier__body { display: grid; gap: 10px; justify-items: start; padding: 22px; }
.tier__name { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tier__big { font-size: 34px; }
.tier__body p { margin: 0; color: var(--muted); font-size: 14px; }
.tier__btn { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.tier__btn svg { transition: transform .35s var(--ease); }
.tier__btn:hover { background: var(--text); color: var(--ink); }
.tier__btn:hover svg { transform: translateX(4px); }
.tier--hot { z-index: 2; margin: -22px -6px; border: 1px solid rgba(200, 160, 80, .55); background: linear-gradient(180deg, #121A33 0%, #2B2516 100%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 6px rgba(200, 160, 80, .08); }
.tier--hot .tier__img { aspect-ratio: 4 / 3.3; }
.tier--hot .tier__btn { background: var(--ink); border-color: var(--ink); color: var(--text); }
.tier--hot .tier__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tier__badge { position: absolute; z-index: 3; top: 14px; right: 14px; padding: 5px 10px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; }
.tiers:hover .tier:not(:hover) { opacity: .62; filter: saturate(.6); }

/* ---------------------------------------------------------------- Ranks board */
.ranks { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.board { border-radius: 20px; background: var(--card); border: 1px solid var(--line); padding: 16px 20px 8px; }
.board__bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 14px; border-bottom: 1px solid var(--line); }
.board__tab { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.board__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--gold); }
.board__meta { font-size: 13px; color: var(--muted); }
.board__row { display: grid; grid-template-columns: 1.5fr 1fr .6fr 1.6fr; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 10px; font-size: 14.5px; transition: background .2s; }
.board__row:last-child { border-bottom: 0; }
.board__row:not(.board__row--head):hover { background: rgba(255, 255, 255, .035); }
.board__row--head { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-top: 12px; }
.board__rank { display: flex; align-items: center; gap: 12px; }
.board__rank svg { color: var(--gold); flex: none; }
.board__rank b { font-weight: 600; }
.board__latin { color: var(--muted); font-style: italic; }
.board__lv { font-variant-numeric: tabular-nums; color: #DADCE3; }
.board__xp { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.ascent { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 420px; padding: 26px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.ascent__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.ascent:hover .ascent__img { transform: scale(1.06); }
.ascent__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 55%); }
.ascent__t { font-size: 64px; }
.ascent__s { color: #D0D2DA; font-size: 14px; }

/* ---------------------------------------------------------------- Banners */
.banner { display: flex; align-items: center; min-height: 460px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(115deg, #0E1530 0%, #0A0F22 55%, #170F0E 100%); }
.banner__body { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; padding: clamp(28px, 4.4vw, 60px); max-width: 640px; }
.banner .shead__t h2 { font-size: clamp(24px, 2.5vw, 36px); text-transform: none; line-height: 1.1; }
.banner__media { position: absolute; inset: -8% 0; z-index: -2; }
.banner__media img, .banner__media video { width: 100%; height: 100%; object-fit: cover; }
.banner__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 6, 15, .88) 0%, rgba(3, 6, 15, .4) 45%, transparent 70%); }
.banner--temple { min-height: clamp(420px, 44vw, 560px); background: #000; }
.banner__quote { margin: 18px 0 0; padding: 10px 16px; border-radius: 6px; background: rgba(3, 6, 15, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: clamp(24px, 3vw, 46px); }
.banner--trial { min-height: 500px; }
.banner__statue { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 64%; }
.banner__statue img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.banner__p { margin: 0; color: #D6D8DF; font-size: 16px; }
.banner--oath { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; }
.banner--oath .banner__body { align-self: center; }
.banner__side { position: relative; min-height: 420px; }
.banner__side video, .banner__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.oath { list-style: none; counter-reset: o; margin: 0; padding: 0; display: grid; gap: 14px; }
.oath li { display: flex; align-items: baseline; gap: 16px; font-family: var(--f-display); font-size: clamp(19px, 2.1vw, 28px); line-height: 1.15; }
.oath li::before { counter-increment: o; content: counter(o, upper-roman); min-width: 30px; color: var(--gold); font-size: .62em; }

/* ---------------------------------------------------------------- Inside the academy */
.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.feat { display: flex; flex-direction: column; gap: 16px; min-height: 250px; padding: 16px 16px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.feat__ui { flex: 1; display: grid; align-content: center; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.feat__t { margin: 0 4px; font-size: 17px; font-weight: 700; }
.mini-q { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 13px; }
.mini-q i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: transparent; flex: none; }
.mini-q.is-done i { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.mini-q.is-done span { color: var(--muted); text-decoration: line-through; }
.mini-q span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat__ui--streak { justify-items: center; text-align: center; }
.streak-n { font-size: 60px; color: var(--gold); line-height: 1; }
.streak-dots { display: flex; gap: 6px; }
.streak-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .1); animation: lit 4.2s calc(var(--d) * .3s) infinite; }
@keyframes lit { 0%, 8% { background: rgba(255, 255, 255, .1); } 14%, 80% { background: var(--gold); box-shadow: 0 0 10px rgba(200, 160, 80, .6); } 92%, 100% { background: rgba(255, 255, 255, .1); } }
.feat__ui--level { grid-template-columns: 64px 1fr; align-items: center; gap: 14px; }
.lvl { display: grid; gap: 8px; }
.lvl span { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.lvl small { color: var(--muted); }
.feat__ui--deed { grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px; }
.feat__ui--deed .exp { grid-column: 2; }
.deed-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--c-iyilik); background: rgba(224, 120, 143, .14); grid-row: span 2; }
.deed-t b { display: block; font-size: 14px; }
.deed-t small { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.faq__item { border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary b { display: block; font-size: 16px; font-weight: 700; }
.faq__item summary small { display: -webkit-box; margin-top: 6px; color: var(--muted); font-size: 14px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.faq__item[open] summary small { display: none; }
.faq__item summary svg { flex: none; transition: transform .35s var(--ease); color: var(--gold); }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item p { margin: 0; padding: 0 22px 20px; color: #CFD2DB; }

/* ---------------------------------------------------------------- Inner page hero */
.phero { padding-top: 30px; }
.phero__card { display: flex; align-items: center; min-height: clamp(380px, 50vh, 540px); border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(115deg, #0E1530 0%, #070B1A 60%); }
.phero__img { position: absolute; z-index: 0; top: -6%; bottom: -6%; right: 0; width: 62%; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.phero--wide .phero__img { width: 100%; }
.phero--wide .phero__img img { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, #000 60%); }
.phero--wide .phero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 15, .9) 0%, rgba(3, 6, 15, .45) 45%, transparent 75%); }
.phero__body { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: start; padding: clamp(28px, 4.4vw, 60px); max-width: 600px; }
.phero__body h1 { font-size: clamp(34px, 4.4vw, 64px); text-transform: none; line-height: 1; }

/* ---------------------------------------------------------------- Inner page blocks */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tile { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.tile h3 { margin: 6px 0 0; font-size: 19px; font-weight: 700; }
.tile p { margin: 0; color: var(--muted); font-size: 14.5px; }
.tile__ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(200, 160, 80, .12); color: var(--gold); }
.tile .exp--lg b { font-size: 28px; }
.step { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.step__n { font-family: var(--f-display); font-size: 64px; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(200, 160, 80, .75); }
.step small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.step h3 { margin: 0; font-size: 20px; font-weight: 700; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }
.rowcard { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.rowcard h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.rowcard h3 small { margin-left: 8px; font-size: 13px; font-weight: 500; font-style: italic; color: var(--muted); }
.rowcard p { margin: 0; color: var(--muted); font-size: 14.5px; }
.rowcard__n { font-family: var(--f-display); font-size: 28px; color: var(--gold); }
.rowcard svg { color: var(--gold); }
.rowcard__req { display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--muted); }
.stack { display: grid; gap: 14px; }
.cards-disc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.cards-disc .card__img { height: 220px; border-top: 0; border-bottom: 1px solid var(--line); margin: 0; }
.cards-disc .card__head { padding: 18px; }
.cards-disc ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: #CFD2DB; }
.cards-disc li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.media-card { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #000; min-height: 380px; }
.media-card video, .media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final { text-align: center; }
.final__inner { display: grid; justify-items: center; gap: 22px; }

/* ---------------------------------------------------------------- Auth / apply */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding-top: 30px; }
.auth__media { position: relative; min-height: 640px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.auth__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 6, 15, .85), transparent 50%); }
.auth__quote { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; margin: 0; font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; }
.auth__panel { display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 26px; border: 1px solid var(--line); background: var(--card); }
.auth__box { width: min(440px, 100%); display: grid; gap: 20px; }
.auth__box .crest { width: 60px; }
.auth__box h1 { font-size: 40px; text-transform: none; }
.auth__box > p { margin: 0; color: var(--muted); }
.auth__alt { margin: 0; font-size: 14px; color: var(--muted); }
.auth__alt a { color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; }

/* ---------------------------------------------------------------- Footer */
.ftr { position: relative; margin-top: clamp(90px, 10vw, 150px); padding-top: 44px; border-top: 1px solid var(--line); overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.ftr small { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ftr__nav { display: grid; gap: 4px; justify-items: start; }
.ftr__nav a { font-size: 22px; font-weight: 700; transition: color .2s, transform .3s var(--ease); }
.ftr__nav a:hover { transform: translateX(6px); }
.ftr__nav a.is-on, .ftr__nav a:hover { color: var(--gold); }
.ftr__line { margin: 0 0 18px; font-family: var(--f-display); font-size: 22px; }
.ftr__meta p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #CFD2DB; font-size: 14px; }
.ftr__meta a { color: var(--gold); }
.ftr__mark {
  display: flex; align-items: center; justify-content: center; margin: 56px auto 0; user-select: none;
  font-family: var(--f-display); font-size: clamp(64px, 16vw, 280px); line-height: .82; letter-spacing: -.01em;
}
.ftr__mark span { display: inline-block; background: linear-gradient(180deg, #A2A7B6 0%, #4A4F60 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .5s var(--ease); }
.ftr__mark span:hover { transform: translateY(-8%); }
.ftr__mark .sp { width: .28em; }
.ftr__mark img { width: auto; height: .86em; margin-left: .04em; filter: drop-shadow(0 0 40px rgba(200, 160, 80, .35)); transition: transform 1s var(--ease); }
.ftr__mark img:hover { transform: rotate(-10deg) scale(1.04); }
.ftr__legal { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 28px; font-size: 12.5px; color: var(--faint); }

/* Reveal defaults (JS animates these in) */
.js:not(.reduced) [data-rise], .js:not(.reduced) [data-in] { opacity: 0; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1280px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-disc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .tabs__a { padding: 8px 12px; font-size: 14px; }
  .ranks { grid-template-columns: minmax(0, 1fr); }
  .ascent { min-height: 300px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .card--feature { grid-column: span 2; grid-row: auto; min-height: 440px; }
}

@media (max-width: 1023px) {
  :root { --rail-x: 10px; }
  .page { padding: 0 16px 104px; }
  .tabs { display: none; }
  .ticker { height: 24px; }
  .ticker span { height: 24px; font-size: 11px; }

  .mbar {
    position: sticky; top: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; background: rgba(3, 6, 15, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .mbar__brand { display: flex; align-items: center; gap: 10px; }
  .mbar__brand b { font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }

  .rail {
    top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto;
    padding: 8px 4px; border-radius: 26px; background: rgba(6, 10, 24, .88);
  }
  .rail.is-open { width: auto; }
  .rail__logo, .rail__foot, .rail__close { display: none; }
  .rail__body { flex-direction: column-reverse; }
  .rail__col { width: 100%; flex-direction: row; justify-content: space-around; gap: 0; }
  .rail__col > .rail__item { flex: 1 1 0; min-width: 0; }
  .rail__ic { width: 44px; height: 44px; }
  .rail__lb { display: block !important; max-width: 100%; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail__extra { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 14px 4px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .3s, padding .4s; }
  .rail.is-open .rail__extra { max-height: 320px; padding: 14px 0 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .rail__extra .rail__item { transform: translateY(10px); }

  .hero__title { font-size: clamp(30px, 9vw, 56px); }
  .stage { margin-top: 18px; }
  .stage__frame { border-radius: 16px; }
  .stage__corner { width: 54px; height: 54px; border-radius: 10px; }
  .stage__corner--a { top: -7px; left: -7px; }
  .stage__corner--b { right: -7px; bottom: -7px; }

  .shead { grid-template-columns: 1fr; }
  .shead .cta { justify-self: start; }
  .tiers { grid-template-columns: minmax(0, 420px); gap: 18px; }
  .tier--hot { margin: 0; }
  .tiers:hover .tier:not(:hover) { opacity: 1; filter: none; }
  .tier__img, .tier--hot .tier__img { aspect-ratio: 16 / 10; }
  .banner__statue { width: 100%; opacity: .45; }
  .banner__statue img { -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); }
  .banner--oath { grid-template-columns: 1fr; }
  .banner__side { min-height: 320px; order: -1; }
  .banner__side video, .banner__side img { -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%); mask-image: linear-gradient(0deg, transparent, #000 40%); }
  .phero__img { width: 100%; opacity: .5; }
  .phero__img img { -webkit-mask-image: none; mask-image: none; }
  .phero__card { min-height: 360px; align-items: flex-end; }
  .grid4, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__media { display: none; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__grid .ftr__col:first-child { grid-column: span 2; }
}

@media (max-width: 680px) {
  .sec { padding-top: 56px; }
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .card--feature { grid-column: auto; min-height: 380px; padding: 28px; }
  .card__img { height: 200px; }
  .board { padding: 12px 10px 4px; }
  .board__row { grid-template-columns: 1.3fr .5fr 1fr; font-size: 13.5px; padding: 9px 4px; gap: 8px; }
  .hide-sm { display: none; }
  .board__xp { grid-template-columns: 1fr; gap: 6px; }
  .board__rank { gap: 8px; }
  .feats { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .grid4, .grid3, .grid2 { grid-template-columns: 1fr; }
  .cards-disc { grid-template-columns: 1fr; }
  .rowcard { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .rowcard__req { grid-column: 2; justify-items: start; }
  .banner, .banner--trial, .banner--temple { min-height: 400px; border-radius: 20px; }
  .banner--trial { align-items: flex-end; }
  .banner__quote { font-size: 22px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__grid .ftr__col:first-child { grid-column: auto; }
  .ftr__mark { font-size: 17.5vw; margin-top: 40px; }
  .ftr__legal { flex-direction: column; gap: 4px; }
}