
.hero {
    
    padding-top: clamp(var(--s-10), 6vw, var(--s-20));
    padding-bottom: clamp(var(--s-16), 8vw, var(--s-24));
    overflow: hidden;              
}
.hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(60% 60% at 18% 30%, rgba(214,192,124,.10), transparent 70%),
        radial-gradient(55% 55% at 82% 18%, rgba(28,75,114,.20), transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.hero__in {
    display: grid;
    
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(var(--s-8), 4vw, var(--s-16));
    align-items: center;
}
.hero__text { display: grid; gap: var(--s-5); justify-items: start; }
.hero h1 {
    
    font-size: clamp(2.2rem, 1rem + 2.85vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    margin: 0;
}
.hero__line { display: block; }
.hero__line + .hero__line { margin-top: .12em; }
.hero__lead { font-size: clamp(var(--t-md), .95rem + .35vw, var(--t-xl)); max-width: 54ch; }
.hero__marks {
    display: flex; flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    font-size: var(--t-sm); color: var(--text-2);
}
.hero__marks li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__marks li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--grad-gold-2); flex: none;
}
.hero__note { font-size: var(--t-sm); max-width: 46ch; }
.hero__visual { position: relative; }
@media (max-width: 980px) {
    .hero__in { grid-template-columns: 1fr; }
    .hero__visual { margin-top: var(--s-4); }
    
    .hero h1 { font-size: clamp(1.35rem, -.19rem + 7.8vw, 3.3rem); }
}
.panel {
    position: relative;
    background: linear-gradient(180deg, rgba(26,31,38,.92), rgba(16,19,24,.96));
    border: 1px solid var(--ink-600);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.panel::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234,221,151,.5), transparent);
}
.console__bar,
.filters__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    background: rgba(11,13,16,.6);
    border-bottom: 1px solid var(--ink-600);
}
.console__title,
.filters__title {
    font-family: var(--font-ui); font-weight: 700; font-size: var(--t-sm);
    letter-spacing: .02em; color: var(--text);
}
.console__body { padding: var(--s-2) var(--s-5); }
.console__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px dashed rgba(43,51,63,.9);
}
.console__row:last-child { border-bottom: 0; }
.console__k { font-size: var(--t-sm); color: var(--text-2); }
.console__v {
    font-family: var(--font-mono); font-size: var(--t-md); font-weight: 500;
    color: var(--paper); white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--s-2);
}
.console__v--live  { color: var(--ok); font-size: var(--t-sm); }
.console__v--on    { color: var(--gold-300); font-size: var(--t-sm); }
.console__v--money { color: var(--gold-200); font-size: var(--t-xl); font-weight: 700; }
.console__note {
    padding: var(--s-3) var(--s-5) var(--s-5);
    font-size: var(--t-xs); border-top: 1px solid var(--ink-700); margin: 0;
}
.toast {
    position: absolute;
    
    left: calc(var(--s-6) * -1);
    bottom: calc(var(--s-16) * -1);
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    max-width: 320px;
    background: var(--glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
.toast__ico { font-size: var(--t-xl); line-height: 1; flex: none; }
.toast__body { display: grid; gap: 2px; min-width: 0; }
.toast__t { font-size: var(--t-sm); font-weight: 700; color: var(--paper); }
.toast__s { font-size: var(--t-xs); color: var(--text-3); }
.toast__sum {
    font-family: var(--font-mono); font-weight: 700; font-size: var(--t-md);
    color: var(--ok); margin-left: auto; flex: none;
}
@media (max-width: 560px) {
    .toast { position: static; max-width: none; margin-top: var(--s-4); }
}
.env { padding-block: var(--s-10); }
.env__title {
    font-size: var(--t-sm); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
    margin-bottom: var(--s-4);
}
.env__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
    display: inline-flex; align-items: center;
    height: 32px; padding-inline: var(--s-4);
    border: 1px solid var(--ink-600); border-radius: var(--r-pill);
    background: var(--ink-850);
    font-size: var(--t-sm); color: var(--text-2); white-space: nowrap;
    transition: border-color var(--d) var(--ease), color var(--d) var(--ease);
}
.chip:hover { border-color: var(--gold-700); color: var(--gold-300); }
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-5);
}
.split__col {
    padding: var(--s-8);
    border: 1px solid var(--ink-600);
    border-radius: var(--r-lg);
    background: var(--ink-850);
}
.split__col--after {
    border-color: rgba(214,192,124,.28);
    background: linear-gradient(180deg, rgba(20,24,30,.9), rgba(16,19,24,.9));
}
.split__h {
    font-family: var(--font-ui); font-size: var(--t-lg); font-weight: 700;
    margin-bottom: var(--s-5);
}
.split__col--after .split__h { color: var(--gold-300); }
.split__list { display: grid; gap: var(--s-4); }
.split__list li {
    position: relative; padding-left: var(--s-8);
    color: var(--text-2); font-size: var(--t-sm); line-height: 1.6;
}
.split__list li::before {
    content: '—';
    position: absolute; left: 0; top: 0;
    color: var(--bad); font-weight: 700;
}
.split__list--ok li::before { content: '✓'; color: var(--gold-400); }
.pillar { display: grid; gap: var(--s-3); align-content: start; }
.pillar__ico { font-size: 28px; line-height: 1; }
.pillar .badge { justify-self: start; }
.pillar:hover { border-color: var(--gold-700); box-shadow: var(--shadow); }
.rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-5);
    position: relative;
    counter-reset: rail;
}
.rail__item {
    position: relative;
    padding: var(--s-6) var(--s-5) var(--s-6) 0;
    border-top: 1px solid var(--ink-600);
    display: grid; gap: var(--s-2); align-content: start;
}
.rail__item::before {
    content: '';
    position: absolute; top: -1px; left: 0; width: 34px; height: 2px;
    background: var(--grad-gold-2);
}
.rail__n {
    font-size: var(--t-3xl); font-weight: 700; line-height: 1;
    color: var(--gold-700);
    transition: color var(--d) var(--ease);
}
.rail__item:hover .rail__n { color: var(--gold-500); }
.rail__tag {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-400);
}
.rail__h { font-family: var(--font-ui); font-size: var(--t-lg); font-weight: 700; }
.rail__item p { font-size: var(--t-sm); }
.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--s-6), 4vw, var(--s-12));
    align-items: center;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.duo__text { display: grid; gap: var(--s-6); }
.filters__list { padding: var(--s-2) var(--s-5); margin: 0; }
.filters__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px dashed rgba(43,51,63,.9);
}
.filters__row dt { font-size: var(--t-sm); color: var(--text-3); }
.filters__row dd {
    margin: 0; font-family: var(--font-mono); font-size: var(--t-sm);
    color: var(--text); text-align: right;
}
.filters__out {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5);
    background: rgba(11,13,16,.5);
    border-top: 1px solid var(--ink-600);
}
.filters__outk { font-size: var(--t-sm); color: var(--text-2); }
.filters__outv { font-family: var(--font-mono); font-size: var(--t-2xl); font-weight: 700; }
.filters__note {
    margin: 0; padding: 0 var(--s-5) var(--s-5);
    font-size: var(--t-xs); background: rgba(11,13,16,.5);
}
.ticks { display: grid; gap: var(--s-3); }
.ticks li {
    position: relative; padding-left: var(--s-6);
    font-size: var(--t-sm); color: var(--text-2); line-height: 1.6;
}
.ticks li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    color: var(--gold-400); font-weight: 700;
}
.ticks--lg li { font-size: var(--t-md); color: var(--text); }
.briefs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.brief { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-right: var(--s-12); }
.brief__ico { font-size: 24px; line-height: 1; }
.brief__h { font-family: var(--font-ui); font-size: var(--t-md); font-weight: 700; }
.brief p { font-size: var(--t-sm); }
.brief__n {
    position: absolute; top: var(--s-5); right: var(--s-5);
    font-size: var(--t-2xl); font-weight: 700; color: var(--ink-400);
    transition: color var(--d) var(--ease);
}
.brief:hover .brief__n { color: var(--gold-600); }
.btn-row--center { justify-content: center; margin-top: var(--s-10); }
.proof { position: relative; }
.stats { text-align: center; }
.stat { display: grid; gap: var(--s-2); padding: var(--s-6) var(--s-3); }
.stat__v {
    font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
    font-weight: 700; line-height: 1;
    background: var(--grad-gold-2);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-300);          
}
.stat__l { font-size: var(--t-md); font-weight: 600; color: var(--text); }
.stat__h { font-size: var(--t-xs); line-height: 1.5; }
.proof__note {
    max-width: var(--w-text); margin: var(--s-10) auto 0;
    text-align: center; font-size: var(--t-sm);
}
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-5);
    align-items: stretch;
}
.plan { display: flex; flex-direction: column; gap: var(--s-4); }
.plan .badge { align-self: flex-start; }
.plan__h { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.plan__num { font-size: var(--t-3xl); font-weight: 700; line-height: 1; color: var(--paper); }
.plan__cur {
    font-family: var(--font-ui); font-weight: 700;
    font-size: var(--t-2xl); line-height: 1; color: var(--paper);
}
.plan--hot .plan__cur { color: var(--gold-200); }
.plan__or { font-size: var(--t-sm); }
.plan__alt { font-size: var(--t-lg); color: var(--text-2); }
.plan__sub { font-size: var(--t-sm); }
.plan .btn { margin-top: auto; }
.plan--hot {
    border-color: rgba(214,192,124,.4);
    background: linear-gradient(180deg, rgba(26,31,38,.98), rgba(16,19,24,.98));
    box-shadow: var(--glow-gold);
}
.plan--hot .plan__num { color: var(--gold-200); }
.incl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s-3) var(--s-8);
}
.incl__i {
    position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-8);
    border-bottom: 1px solid var(--ink-700);
    font-size: var(--t-sm); color: var(--text-2);
}
.incl__i::before {
    content: '✓'; position: absolute; left: 0; top: var(--s-3);
    color: var(--gold-400); font-weight: 700;
}
.extra { display: grid; gap: var(--s-2); align-content: start; }
.extra__ico { font-size: 22px; line-height: 1; }
.extra p { font-size: var(--t-sm); }
.steps { display: grid; gap: var(--s-5); max-width: var(--w-narrow); }
.steps__item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s-5); align-items: start;
    padding: var(--s-5) 0;
    border-top: 1px solid var(--ink-700);
}
.steps__n {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--gold-800); border-radius: 50%;
    background: rgba(214,192,124,.06);
    font-size: var(--t-lg); font-weight: 700; color: var(--gold-300);
}
.steps__h { font-family: var(--font-ui); font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s-2); }
.steps__item p { font-size: var(--t-sm); margin: 0; }
.safes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.safe { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.safe__ico { font-size: 24px; line-height: 1.2; }
.safe p { font-size: var(--t-sm); }
.qa { display: grid; gap: var(--s-3); }
.qa__i {
    border: 1px solid var(--ink-600);
    border-radius: var(--r-md);
    background: var(--ink-850);
    transition: border-color var(--d) var(--ease), background var(--d) var(--ease);
}
.qa__i[open] { border-color: rgba(214,192,124,.28); background: var(--ink-800); }
.qa__i:hover { border-color: var(--ink-500); }
.qa__q {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    font-family: var(--font-ui); font-weight: 700; font-size: var(--t-md);
    color: var(--text); cursor: pointer; list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
    content: '';
    margin-left: auto; flex: none;
    width: 12px; height: 12px;
    background:
        linear-gradient(var(--gold-400), var(--gold-400)) center / 100% 2px no-repeat,
        linear-gradient(var(--gold-400), var(--gold-400)) center / 2px 100% no-repeat;
    transition: transform var(--d) var(--ease);
}
.qa__i[open] .qa__q::after { transform: rotate(90deg); background-size: 0 0, 2px 100%; }
.qa__q:hover { color: var(--gold-300); }
.qa__q > .qa__t {
    font: inherit; letter-spacing: inherit; color: inherit;
    margin: 0; padding: 0; text-wrap: inherit;
}
.qa__a {
    padding: 0 var(--s-6) var(--s-5);
    font-size: var(--t-sm); line-height: 1.7; color: var(--text-2);
    max-width: var(--w-text);
}
.band {
    position: relative; overflow: hidden;
    padding: clamp(var(--s-8), 5vw, var(--s-16));
    border: 1px solid var(--glass-line);
    border-radius: var(--r-2xl);
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(214,192,124,.10), transparent 60%),
        linear-gradient(180deg, var(--ink-800), var(--ink-900));
    box-shadow: var(--shadow-lg);
}
.band__h { font-size: var(--t-3xl); line-height: 1.06; letter-spacing: -.02em; margin-bottom: var(--s-4); }
.band .lead { margin-bottom: var(--s-6); }
.band--cta { text-align: center; }
.band--cta .lead, .band--cta .band__h { margin-inline: auto; }
.band--cta .lead { max-width: 56ch; }
.cta__note { margin-top: var(--s-6); font-size: var(--t-sm); }
.ideas {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(var(--s-6), 4vw, var(--s-12));
    align-items: center;
}
@media (max-width: 900px) { .ideas { grid-template-columns: 1fr; } }
.ideas__text { display: grid; gap: var(--s-4); justify-items: start; }
.ideas__text p { max-width: 52ch; }
.ideas__note { font-size: var(--t-sm); }
.ideas__quotes { display: grid; gap: var(--s-3); }
.quote {
    padding: var(--s-4) var(--s-5);
    border-left: 2px solid var(--gold-700);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--ink-850);
    font-family: var(--font-display);
    font-size: var(--t-md); font-style: italic; color: var(--text-2);
}
.page-head {
    padding-top: clamp(var(--s-10), 6vw, var(--s-16));
    padding-bottom: clamp(var(--s-8), 4vw, var(--s-12));
    position: relative;
}
.page-head::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 100%;
    background: radial-gradient(70% 100% at 20% 0%, rgba(214,192,124,.08), transparent 70%);
    pointer-events: none; z-index: 0;
}
.page-head + .section { padding-top: clamp(var(--s-6), 3vw, var(--s-10)); }
.page-head h1 {
    font-size: var(--t-4xl); line-height: 1.03; letter-spacing: -.025em;
    margin: var(--s-4) 0 var(--s-5);
    max-width: 20ch;
}
.page-head .lead { font-size: var(--t-lg); }
.page-head--center { text-align: center; }
.page-head--center h1 { margin-inline: auto; }
.page-head--center .lead { margin-inline: auto; max-width: 62ch; }
.page-head--center .eyebrow { justify-content: center; }
.page-head--center::before { background: radial-gradient(80% 100% at 50% 0%, rgba(214,192,124,.08), transparent 70%); }
.fsec { padding-block: clamp(var(--s-10), 5vw, var(--s-16)); }
.fgroup {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: var(--s-4); align-items: center;
    margin-bottom: var(--s-8);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--ink-600);
}
.fgroup__ico {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border: 1px solid var(--gold-800); border-radius: var(--r-md);
    background: rgba(214,192,124,.06);
    font-size: 24px;
}
.fgroup__h { font-size: var(--t-2xl); margin-bottom: var(--s-1); }
.fgroup p { font-size: var(--t-sm); margin: 0; }
.fgroup__n { font-size: var(--t-3xl); font-weight: 700; color: var(--ink-400); line-height: 1; }
@media (max-width: 620px) {
    .fgroup { grid-template-columns: 44px minmax(0, 1fr); }
    .fgroup__ico { width: 44px; height: 44px; font-size: 20px; }
    .fgroup__n { display: none; }
}
.feat { display: grid; gap: var(--s-2); align-content: start; }
.feat__h { font-family: var(--font-ui); font-size: var(--t-md); font-weight: 700; color: var(--gold-300); }
.feat p { font-size: var(--t-sm); }
.feat:hover { border-color: var(--ink-500); }
.limits__list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.limits__list li {
    position: relative; padding-left: var(--s-6);
    font-size: var(--t-sm); color: var(--text-2); line-height: 1.6;
}
.limits__list li::before {
    content: '·'; position: absolute; left: 0; top: -.15em;
    color: var(--warn); font-size: var(--t-xl); font-weight: 700;
}
.contact { display: flex; flex-direction: column; gap: var(--s-3); }
.contact__ico { font-size: 30px; line-height: 1; }
.contact__btn { align-self: start; margin-top: auto; font-family: var(--font-mono); }
.contact__hours { margin-top: var(--s-6); font-size: var(--t-sm); }
.contact__hours strong { color: var(--text); }
.login { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.login__hint { font-size: var(--t-xs); }
.login__foot { text-align: center; margin-top: var(--s-5); font-size: var(--t-sm); }
.login__foot a { color: var(--gold-300); }
.errpage { text-align: center; }
.errpage__code {
    font-size: clamp(4rem, 3rem + 8vw, 9rem); font-weight: 700; line-height: 1;
    color: var(--ink-700);
    margin-bottom: var(--s-4);
}
.errpage__lead { margin: 0 auto var(--s-6); }
@media (max-width: 620px) {
    
    .page-head h1 { font-size: var(--t-3xl); }
    .split__col { padding: var(--s-6); }
    .qa__q { padding: var(--s-4) var(--s-5); font-size: var(--t-sm); }
    .qa__a { padding: 0 var(--s-5) var(--s-4); }
    .steps__item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); }
    .steps__n { width: 36px; height: 36px; font-size: var(--t-md); }
    .brief { padding-right: var(--s-6); }
    .brief__n { position: static; }
}
.console {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.console__v--num {
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.filters {
    display: flex;
    flex-direction: column;
    font-variant-numeric: tabular-nums;
}
.filters__list { flex: 1; }
.split__col--before {
    background: var(--ink-900);
    border-color: var(--ink-700);
}
.split__col--before .split__h { color: var(--text-2); }
.limits {
    border-color: var(--ink-500);
    padding: var(--s-8);
}
.cta { padding-bottom: clamp(var(--s-12), 6vw, var(--s-20)); }
.plan--hot { padding-top: var(--s-10); }
.plan__flag {
    position: absolute;
    top: calc(var(--s-3) * -1);
    left: var(--s-6);
    right: auto;
    box-shadow: 0 6px 20px -6px rgba(214,192,124,.55);
    z-index: 2;
}
.fnav {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    
    background: rgba(11, 13, 16, .82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-block: 1px solid var(--ink-700);
}
@supports not (backdrop-filter: blur(1px)) {
    .fnav { background: var(--ink-900); }
}
.fnav__row {
    display: flex;
    gap: var(--s-2);
    margin: 0 -6px;
    
    padding: var(--s-3) 6px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.fnav__row::-webkit-scrollbar { display: none; }
.fnav__row > li { flex: 0 0 auto; }
.fnav__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 7px var(--s-4);
    border: 1px solid var(--ink-600);
    border-radius: var(--r-pill);
    background: var(--ink-850);
    color: var(--text-2);
    font-size: var(--t-sm);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.fnav__pill:hover { color: var(--text); border-color: var(--gold-700); }
.fnav__n {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.fnav__pill[aria-current="true"] {
    color: var(--gold-300);
    border-color: rgba(214, 192, 124, .42);
    background: rgba(214, 192, 124, .08);
}
.fnav__pill[aria-current="true"] .fnav__n { color: var(--gold-300); }
.fnav__progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    transform: scaleX(var(--fnav-p, 0));
    transform-origin: left;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-300));
    will-change: transform;
}
.fsec { scroll-margin-top: 60px; }
@media (max-width: 720px) {
    .fnav__row { padding: var(--s-2) 6px; gap: 6px; }
    .fnav__pill { padding: 6px var(--s-3); font-size: var(--t-xs); }
    .fsec { scroll-margin-top: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .fnav__pill { transition: none; }
}
.sup {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: 80;
    font-family: var(--font-ui);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-3);
}
.sup__fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-pill);
    background: var(--glass);
    backdrop-filter: blur(14px);
    color: var(--paper);
    font: 600 var(--t-sm) / 1 var(--font-ui);
    cursor: pointer;
    box-shadow: var(--shadow), var(--glow-gold);
    transition: transform var(--d) var(--ease-back),
                box-shadow var(--d) var(--ease),
                border-color var(--d) var(--ease),
                opacity var(--d) var(--ease),
                visibility 0s linear 0s;
}
.sup__fab::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-gold);
    opacity: .9;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    transition: opacity var(--d) var(--ease);
}
.sup__fab:hover { transform: translateY(-2px); }
.sup__fab:hover::before { opacity: 1; }
.sup__fab:active { transform: translateY(0); }
.sup__fab-ico {
    display: inline-flex;
    color: var(--gold-300);
    transition: transform var(--d-slow) var(--ease);
}
.sup__fab:hover .sup__fab-ico { transform: rotate(12deg) scale(1.08); }
.sup__fab-txt { white-space: nowrap; }
.sup__fab::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--gold-400);
    opacity: 0;
    pointer-events: none;
    animation: supPulse 6s var(--ease) 2.5s infinite;
}
@keyframes supPulse {
    0%   { opacity: .55; transform: scale(1); }
    14%  { opacity: 0;   transform: scale(1.16); }
    100% { opacity: 0;   transform: scale(1.16); }
}
.sup.is-open .sup__fab {
    opacity: 0;
    transform: translateY(8px) scale(.94);
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--d) var(--ease-back),
                box-shadow var(--d) var(--ease),
                border-color var(--d) var(--ease),
                opacity var(--d) var(--ease),
                visibility 0s linear var(--d);
}
.sup__panel {
    
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(384px, calc(100vw - var(--s-8)));
    max-height: min(620px, calc(100vh - var(--s-24)));
    border: 1px solid var(--glass-line);
    border-radius: var(--r-xl);
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-lg), var(--glow-gold);
    overflow: hidden;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.96);
    transform-origin: 100% 100%;
    transition: opacity var(--d) var(--ease),
                transform var(--d) var(--ease-back),
                visibility 0s linear var(--d);
}
.sup.is-open .sup__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    
    transition-delay: 0s, 0s, 0s;
}
.sup__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--ink-700);
    background: linear-gradient(180deg, rgba(214,192,124,.06), transparent);
}
.sup__ava {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--grad-petrol);
    color: var(--gold-200);
    box-shadow: inset 0 0 0 1px var(--glass-line);
}
.sup__ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sup__ttl b { font-size: var(--t-sm); font-weight: 700; color: var(--paper); }
.sup__ttl i { font-style: normal; font-size: var(--t-xs); color: var(--text-3); }
.sup__x {
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--d-fast) var(--ease),
                background var(--d-fast) var(--ease),
                border-color var(--d-fast) var(--ease);
}
.sup__x:hover { color: var(--paper); background: var(--ink-750); border-color: var(--ink-600); }
.sup__log {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    scrollbar-width: thin;
    scrollbar-color: var(--ink-600) transparent;
}
.sup__log > :first-child { margin-block-start: auto; }
.sup__log::-webkit-scrollbar { width: 6px; }
.sup__log::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: var(--r-pill); }
.sup__row { display: flex; }
.sup__row--bot { justify-content: flex-start; }
.sup__row--me  { justify-content: flex-end; }
.sup__bubble {
    max-width: 86%;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-lg);
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: supIn var(--d) var(--ease) both;
}
@keyframes supIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.sup__row--bot .sup__bubble {
    background: var(--ink-800);
    border: 1px solid var(--ink-700);
    border-bottom-left-radius: var(--r-xs);
}
.sup__row--me .sup__bubble {
    background: linear-gradient(135deg, var(--gold-900), var(--gold-800));
    border: 1px solid var(--gold-700);
    color: var(--paper);
    border-bottom-right-radius: var(--r-xs);
}
.sup__row--bad .sup__bubble {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    color: var(--paper);
}
.sup__bubble ul { margin: var(--s-2) 0 0; padding-left: 1.2em; list-style: disc; }
.sup__bubble li { margin-bottom: var(--s-1); }
.sup__bubble li::marker { color: var(--gold-500); }
.sup__bubble a  { color: var(--gold-300); }
.sup__dots { display: inline-flex; gap: 5px; padding: 3px 0; }
.sup__dots span {
    width: 6px; height: 6px;
    border-radius: var(--r-pill);
    background: var(--gold-400);
    animation: supDot 1.2s var(--ease-soft) infinite;
}
.sup__dots span:nth-child(2) { animation-delay: .16s; }
.sup__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes supDot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-4px); }
}
.sup__caret {
    display: inline-block;
    width: 2px; height: 1em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: var(--gold-300);
    animation: supBlink 1s steps(2, start) infinite;
}
@keyframes supBlink { 50% { opacity: 0; } }
.sup__chips {
    display: flex;
    gap: var(--s-2);
    padding: 0 var(--s-4) var(--s-3);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.sup__chips::-webkit-scrollbar { display: none; }
.sup__chips:empty { display: none; }
.sup__chip {
    flex: none;
    padding: var(--s-2) var(--s-3);
    
    border: 1px solid var(--line-control);
    border-radius: var(--r-pill);
    background: var(--ink-850);
    color: var(--text-2);
    font: 500 var(--t-xs) / 1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--d-fast) var(--ease),
                border-color var(--d-fast) var(--ease),
                transform var(--d-fast) var(--ease);
}
.sup__chip:hover {
    color: var(--gold-200);
    border-color: var(--gold-700);
    transform: translateY(-1px);
}
.sup__form {
    display: flex;
    align-items: flex-end;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--ink-700);
    background: var(--ink-900);
}
.sup__input {
    flex: 1;
    min-height: 40px;
    max-height: 132px;
    padding: var(--s-3);
    border: 1px solid var(--line-control);
    border-radius: var(--r-md);
    background: var(--ink-800);
    color: var(--text);
    font: 400 var(--t-sm) / 1.45 var(--font-ui);
    resize: none;
    transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.sup__input::placeholder { color: var(--text-3); }
.sup__input:focus {
    outline: none;
    border-color: var(--gold-600);
    box-shadow: 0 0 0 3px rgba(214,192,124,.14);
}
.sup__send {
    flex: none;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--gold-700);
    border-radius: var(--r-md);
    background: var(--grad-gold-2);
    color: var(--ink-950);
    cursor: pointer;
    transition: transform var(--d-fast) var(--ease-back), filter var(--d-fast) var(--ease);
}
.sup__send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sup__send[disabled] { opacity: .4; cursor: default; transform: none; filter: none; }
.sup__note {
    margin: 0;
    padding: 0 var(--s-4) var(--s-3);
    background: var(--ink-900);
    font-size: var(--t-xs);
    color: var(--text-3);
}
.sup__note a { color: var(--gold-400); }
@media (max-width: 560px) {
    .sup { right: var(--s-4); bottom: var(--s-4); left: var(--s-4); align-items: stretch; }
    .sup__fab { justify-content: center; }
    .sup__panel {
        position: fixed;
        inset: 0;
        width: auto;
        max-height: none;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        transform: translateY(24px);
        transform-origin: 50% 100%;
        
        background: var(--ink-900);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sup__log { padding-bottom: var(--s-5); }
    .sup__form { padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); }
}
@media print { .sup { display: none; } }
.sup__bubble strong { color: var(--paper); font-weight: 700; }
.ftr { padding-bottom: calc(var(--s-8) + 62px); }
