:root {
    color-scheme: dark;
    
    --ink-950: #08090B;   
    --ink-900: #0B0D10;   
    --ink-850: #101318;
    --ink-800: #14181E;   
    --ink-750: #1A1F26;   
    --ink-700: #212832;   
    --ink-600: #2B333F;   
    --ink-500: #3A4351;   
    --ink-400: #4E5867;
    
    --line-control: #667183;
    
    --paper:    #F3F1EA;
    --text:     #E7E4DB;
    --text-2:   #A6ADB8;
    --text-3:   #828A96;   
    
    --text-ph:  #8E96A2;
    
    --gold-900: #5C4826;
    --gold-800: #6E5730;
    --gold-700: #856A3E;  
    --gold-600: #A2854D;
    --gold-500: #C0A462;
    --gold-400: #D6C07C;  
    --gold-300: #E4D692;  
    --gold-200: #EADD97;  
    --gold-100: #F2E9BE;
    
    --on-gold: #0B0D10;
    
    --petrol-800: #14395A;
    --petrol-700: #1C4B72; 
    --petrol-600: #24647E;
    --petrol-500: #357F89; 
    --petrol-400: #4CA0A9;
    --petrol-300: #7CC2C8;
    
    --ok:      #57A183;
    --ok-dim:  rgba(87,161,131,.14);
    --warn:    #D6A44C;
    --warn-dim:rgba(214,164,76,.14);
    --bad:     #D97467;   
    --bad-dim: rgba(196,89,76,.14);
    
    --grad-gold:   linear-gradient(135deg, #856A3E 0%, #E4D692 48%, #7E6137 100%);
    --grad-gold-2: linear-gradient(90deg, #A2854D 0%, #EADD97 100%);
    --grad-petrol: linear-gradient(135deg, #1C4B72 0%, #357F89 100%);
    --grad-ink:    linear-gradient(180deg, #14181E 0%, #0B0D10 100%);
    
    --glass:      rgba(20, 24, 30, .72);
    --glass-line: rgba(214, 192, 124, .14);
    --glow-gold:  0 0 0 1px rgba(214,192,124,.22), 0 8px 32px -8px rgba(214,192,124,.28);
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow:     0 4px 16px -4px rgba(0,0,0,.5);
    --shadow-lg:  0 24px 64px -16px rgba(0,0,0,.7);
    
    --font-display: 'Literata', 'Iowan Old Style', Georgia, serif;
    --font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    
    --t-xs:  .75rem;
    --t-sm:  .875rem;
    --t-md:  1rem;
    --t-lg:  1.125rem;
    --t-xl:  clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --t-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --t-3xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    --t-4xl: clamp(2.6rem, 1.7rem + 3.8vw, 4.5rem);
    --t-hero:clamp(3rem, 1.8rem + 5.4vw, 6rem);
    
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
    --s-20: 80px; --s-24: 96px; --s-32: 128px;
    
    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
    --r-2xl: 30px; --r-pill: 999px;
    
    --ease:      cubic-bezier(.22, 1, .36, 1);      
    --ease-in:   cubic-bezier(.55, 0, 1, .45);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --ease-back: cubic-bezier(.34, 1.56, .64, 1);   
    --d-fast: 160ms; --d: 280ms; --d-slow: 520ms; --d-xl: 900ms;
    
    --w-page: 1200px;
    --w-narrow: 860px;
    --w-text: 68ch;
    --header-h: 68px;
}
@media (prefers-reduced-motion: reduce) {
    :root { --d-fast: 1ms; --d: 1ms; --d-slow: 1ms; --d-xl: 1ms; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-6));
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-ui);
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--text);
    background: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    
    min-height: 100vh;
}
body::before {
    content: '';
    position: fixed; inset: 0 0 auto 0; height: 60vh;
    background:
        radial-gradient(60% 100% at 50% 0%, rgba(133,106,62,.22) 0%, transparent 70%),
        radial-gradient(40% 80% at 85% 10%, rgba(28,75,114,.18) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
.scroll-x > :focus-visible,
.sup__chips > :focus-visible,
.cab-tabs > :focus-visible { outline-offset: -2px; }
.main:focus { outline: none; }
::selection { background: rgba(214,192,124,.28); color: var(--paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: var(--r-pill); border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--paper);
    text-wrap: balance;
    
    font-variation-settings: 'opsz' 48;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); font-family: var(--font-ui); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: var(--t-lg); font-family: var(--font-ui); font-weight: 700; }
p { color: var(--text-2); text-wrap: pretty; }
strong, b { color: var(--paper); font-weight: 700; }
small { font-size: var(--t-sm); }
code, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
.lead { font-size: var(--t-lg); color: var(--text-2); max-width: var(--w-text); }
.muted { color: var(--text-3); }
.gold { color: var(--gold-300); }
.grad-text {
    color: var(--gold-300);
    background: var(--grad-gold-2);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: .22em;
    margin-bottom: -.22em;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400);
}
.eyebrow::before {
    content: ''; width: 22px; height: 1px; background: var(--grad-gold-2);
}
.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--s-5); position: relative; z-index: 1; }
.container--narrow { max-width: var(--w-narrow); }
.container--tight  { max-width: 620px; }
.section { padding-block: clamp(var(--s-16), 9vw, var(--s-32)); position: relative; }
.section--alt::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, rgba(20,24,30,.6) 12%, rgba(20,24,30,.6) 88%, transparent);
    pointer-events: none;
}
.section__head { max-width: var(--w-text); margin-bottom: var(--s-12); display: grid; gap: var(--s-4); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hr { height: 1px; background: linear-gradient(90deg, transparent, var(--ink-600) 20%, var(--ink-600) 80%, transparent); border: 0; }
.card {
    position: relative;
    background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
    border: 1px solid var(--ink-600);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    transition: border-color var(--d) var(--ease), transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.card--flat { background: var(--ink-850); }
.card--glass { background: var(--glass); backdrop-filter: blur(14px); border-color: var(--glass-line); }
.card__h { font-size: var(--t-lg); font-family: var(--font-ui); font-weight: 700; margin-bottom: var(--s-2); }
.skip {
    position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
    padding: var(--s-3) var(--s-5);
    background: var(--ink-750); color: var(--paper);
    border: 1px solid var(--gold-700); border-radius: var(--r-md);
    font-size: var(--t-sm); font-weight: 700;
    transform: translateY(-200%);
    transition: transform var(--d-fast) var(--ease);
}
.skip:focus, .skip:focus-visible { transform: translateY(0); }
.btn {
    --btn-bg: var(--ink-750);
    --btn-fg: var(--paper);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 46px; padding-inline: var(--s-6);
    font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 700; letter-spacing: .01em;
    background: var(--btn-bg); color: var(--btn-fg);
    
    border: 1px solid var(--line-control); border-radius: var(--r-pill);
    cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
    transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
                box-shadow var(--d) var(--ease), background var(--d-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: var(--gold-700); }
.btn:active { transform: translateY(0); }
.btn--gold {
    background: var(--grad-gold-2); color: var(--on-gold); border-color: transparent; font-weight: 800;
}
.btn--gold:hover { box-shadow: var(--glow-gold); }
.btn--gold::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform var(--d-slow) var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink-800); }
.btn--sm { height: 36px; padding-inline: var(--s-4); font-size: var(--t-xs); }
.btn--lg { height: 54px; padding-inline: var(--s-8); font-size: var(--t-md); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 540px) {
    
    .btn-row { flex-direction: column; width: 100%; align-self: stretch; }
}
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.input {
    height: 50px; padding-inline: var(--s-4);
    background: var(--ink-700); border: 1px solid var(--line-control); border-radius: var(--r-md);
    color: var(--paper); width: 100%;
    transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(214,192,124,.14); background: var(--ink-750); }
.input::placeholder { color: var(--text-ph); }
.input--key { font-family: var(--font-mono); font-size: var(--t-lg); letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    height: 26px; padding-inline: var(--s-3);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
    border-radius: var(--r-pill); border: 1px solid var(--ink-600); background: var(--ink-800); color: var(--text-2);
}
.badge--gold { color: var(--gold-300); border-color: rgba(214,192,124,.32); background: rgba(214,192,124,.08); }
.badge--ok   { color: var(--ok);   border-color: rgba(87,161,131,.32);  background: var(--ok-dim); }
.badge--warn { color: var(--warn); border-color: rgba(214,164,76,.32);  background: var(--warn-dim); }
.badge--bad  { color: var(--bad);  border-color: rgba(196,89,76,.32);   background: var(--bad-dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.alert { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border: 1px solid var(--ink-600); border-radius: var(--r-md); background: var(--ink-800); }
.alert--warn { border-color: rgba(214,164,76,.4); background: var(--warn-dim); color: var(--warn); }
.alert--bad  { border-color: rgba(196,89,76,.4);  background: var(--bad-dim);  color: var(--bad); }
.hdr {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: var(--header-h);
    display: flex; align-items: center;
    background: transparent;
    transition: background var(--d) var(--ease), border-color var(--d) var(--ease), backdrop-filter var(--d) var(--ease);
    border-bottom: 1px solid transparent;
}
.hdr--stuck { background: rgba(11,13,16,.82); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--ink-600); }
.hdr__in { display: flex; align-items: center; gap: var(--s-5); width: 100%; }
.hdr__logo { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--paper); font-variation-settings: 'opsz' 24; }
.hdr__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-gold); display: grid; place-items: center; color: var(--on-gold); font-family: var(--font-display); font-weight: 800; font-size: 19px; box-shadow: 0 4px 16px -4px rgba(214,192,124,.5); flex: none; }
.hdr__nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.hdr__link { position: relative; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--text-2); border-radius: var(--r-sm); transition: color var(--d-fast) var(--ease); }
.hdr__link:hover { color: var(--paper); }
.hdr__link::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 4px; height: 1px; background: var(--grad-gold-2); transform: scaleX(0); transform-origin: left; transition: transform var(--d) var(--ease); }
.hdr__link:hover::after, .hdr__link[aria-current="page"]::after { transform: scaleX(1); }
.hdr__link[aria-current="page"] { color: var(--gold-300); }
.hdr__side { display: flex; align-items: center; gap: var(--s-3); }
.lang { display: inline-flex; padding: 3px; background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--r-pill); }
.hdr__nav .lang { margin-left: var(--s-3); }
.lang a { padding: 5px var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; color: var(--text-3); border-radius: var(--r-pill); transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { background: var(--grad-gold-2); color: var(--on-gold); }
.burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--ink-800); border: 1px solid var(--line-control); border-radius: var(--r-md); cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--paper); border-radius: 2px; position: relative; transition: transform var(--d) var(--ease), opacity var(--d) var(--ease); }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform var(--d) var(--ease); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
    .burger { display: inline-flex; }
    .hdr__nav {
        position: fixed; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--s-4) var(--s-5) var(--s-8);
        
        background: var(--ink-900); box-shadow: var(--shadow-lg);
        border-bottom: 1px solid var(--ink-600);
        
        transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
        transition: transform var(--d) var(--ease), opacity var(--d) var(--ease),
                    visibility 0s linear var(--d);
    }
    .hdr__nav[data-open="1"] {
        transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        transition: transform var(--d) var(--ease), opacity var(--d) var(--ease),
                    visibility 0s linear 0s;
    }
    .hdr__link { padding: var(--s-4) var(--s-2); font-size: var(--t-md); border-bottom: 1px solid var(--ink-700); border-radius: 0; }
    .hdr__link::after { display: none; }
    
    
    .hdr__side { margin-left: auto; }
    .hdr__nav .lang { margin: var(--s-5) 0 0; display: flex; }
    .hdr__nav .lang a { flex: 1; min-height: 44px; display: grid; place-items: center; font-size: var(--t-sm); }
}
.ftr { border-top: 1px solid var(--ink-600); background: var(--ink-950); padding-block: var(--s-16) var(--s-8); margin-top: var(--s-24); }
.ftr__grid { display: grid; gap: var(--s-8); grid-template-columns: 1.4fr repeat(3, 1fr); }
.ftr__title { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-4); }
.ftr__list { display: grid; gap: var(--s-2); }
.ftr__list a { font-size: var(--t-sm); color: var(--text-2); transition: color var(--d-fast) var(--ease); }
.ftr__list a:hover { color: var(--gold-300); }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--ink-700); font-size: var(--t-sm); color: var(--text-3); }
@media (max-width: 780px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr__grid { grid-template-columns: 1fr; } }
.main { padding-top: var(--header-h); position: relative; z-index: 1; }
.center-block { display: grid; place-items: center; min-height: calc(100vh - var(--header-h) - 200px); }
.nowrap { white-space: nowrap; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ftr__logo { margin-bottom: var(--s-4); }
.ftr__about { font-size: var(--t-sm); color: var(--text-3); max-width: 36ch; }
.hdr__progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    transform-origin: 0 50%;
    background: var(--grad-gold-2);
    opacity: .22;
    pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .hdr__progress {
        opacity: .9;
        transform: scaleX(0);
        animation: hdr-progress linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes hdr-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
    
    .hdr__progress { opacity: .35; }
}
html { overflow-x: clip; }
@supports not (overflow: clip) {
    html { overflow-x: hidden; }
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-vt-out var(--d-fast) var(--ease-in) both; }
::view-transition-new(root) { animation: mo-vt-in  var(--d)      var(--ease)    both; }
@keyframes mo-vt-out { to   { opacity: 0; transform: scale(.994); } }
@keyframes mo-vt-in  { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.hdr { view-transition-name: mo-hdr; }
@supports not (view-transition-name: none) {
    .js-anim body { animation: mo-page-in var(--d-fast) var(--ease) backwards; }
}
@keyframes mo-page-in { from { opacity: 0; } }
.js-anim [data-reveal]:not(.mo-done) {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0px), var(--rv-y, 0px), 0) scale(var(--rv-s, 1));
    filter: blur(var(--rv-b, 0px));
    transition:
        opacity   var(--rv-dur, var(--d-slow)) var(--ease) var(--rv-delay, 0ms),
        transform var(--rv-dur, var(--d-slow)) var(--ease) var(--rv-delay, 0ms),
        filter    var(--rv-dur, var(--d-slow)) var(--ease) var(--rv-delay, 0ms);
    will-change: opacity, transform;
}
.js-anim [data-reveal~="up"]    { --rv-y: 26px; }
.js-anim [data-reveal~="down"]  { --rv-y: -26px; }
.js-anim [data-reveal~="left"]  { --rv-x: -34px; }   
.js-anim [data-reveal~="right"] { --rv-x: 34px; }
.js-anim [data-reveal~="scale"] { --rv-s: .94; }
.js-anim [data-reveal~="blur"]  { --rv-b: 10px; }
.js-anim [data-reveal~="fade"]  { --rv-y: 0px; --rv-x: 0px; --rv-s: 1; }
.js-anim [data-reveal=""] { --rv-y: 26px; }
.js-anim [data-reveal].mo-in:not(.mo-done) {
    opacity: 1;
    --rv-x: 0px; --rv-y: 0px; --rv-s: 1; --rv-b: 0px;
}
.js-anim [data-reveal-stagger] > * { --rv-delay: calc(var(--rv-i, 0) * var(--rv-step, 70ms)); }
.mo-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}
.mo-word__i { display: inline-block; will-change: transform; }
.mo-readbar {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    height: 2px; z-index: 59;           
    pointer-events: none;
}
.mo-readbar__fill {
    height: 100%;
    background: var(--grad-gold-2);
    box-shadow: 0 0 12px -2px var(--gold-500);
    transform-origin: 0 50%;
    transform: scaleX(var(--mo-read, 0));   
}
@supports (animation-timeline: scroll()) {
    .mo-readbar__fill {
        transform: scaleX(1);
        animation: mo-read auto linear both;
        animation-timeline: scroll(root block);
    }
}
@keyframes mo-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hdr__link[data-active="1"] { color: var(--gold-300); }
.hdr__link[data-active="1"]::after { transform: scaleX(1); }
.mo-tilt {
    transition: transform var(--d-slow) var(--ease),
                border-color var(--d) var(--ease),
                box-shadow var(--d) var(--ease);
}
.mo-tilt.is-tilting { transition: transform 90ms linear, border-color var(--d) var(--ease), box-shadow var(--d) var(--ease); }
.mo-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.mo-sheen__spot {
    position: absolute; left: 0; top: 0;
    width: 360px; height: 360px; margin: -180px 0 0 -180px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--gold-300), transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: opacity var(--d) var(--ease);
    will-change: transform, opacity;
}
.mo-sheen--on .mo-sheen__spot { opacity: .10; }
.btn[data-magnetic], [data-magnetic] {
    transition: transform var(--d) var(--ease),
                border-color var(--d-fast) var(--ease),
                box-shadow var(--d) var(--ease),
                background var(--d-fast) var(--ease);
}
.btn[data-magnetic].is-magnet, [data-magnetic].is-magnet { transition: transform 80ms linear; }
.float      { animation: mo-float 6s var(--ease-soft) infinite; }
.pulse-soft { animation: mo-pulse 2.4s var(--ease-soft) infinite; }
.rise-in    { animation: mo-rise var(--d-slow) var(--ease) var(--rise-delay, 0ms) both; }
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 38%, var(--gold-100) 50%, transparent 62%);
    opacity: .16;
    transform: translate3d(-140%, 0, 0) skewX(-16deg);
    animation: mo-shine 5.5s var(--ease-soft) infinite;
    pointer-events: none;
}
@keyframes mo-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes mo-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
@keyframes mo-rise  { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes mo-shine {
    0%, 72% { transform: translate3d(-140%, 0, 0) skewX(-16deg); }
    100%    { transform: translate3d(180%, 0, 0)  skewX(-16deg); }
}
[data-count-to] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
@media (max-width: 700px) {
    .js-anim [data-reveal] { --rv-x: 0px; --rv-b: 0px; }
    .js-anim [data-reveal~="up"]   { --rv-y: 16px; }
    .js-anim [data-reveal=""]      { --rv-y: 16px; }   
    .js-anim [data-reveal~="down"] { --rv-y: -16px; }
    .js-anim [data-reveal-stagger] > * { --rv-delay: calc(var(--rv-i, 0) * var(--rv-step, 50ms)); }
    .mo-readbar { height: 2px; }
}
@media (hover: none), (pointer: coarse), (max-width: 899px) {
    .mo-tilt { transform: none !important; }
    .mo-sheen { display: none; }
    [data-magnetic] { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .js-anim [data-reveal],
    .js-anim [data-reveal]:not(.mo-done) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .mo-readbar { display: none; }
    .mo-tilt, [data-magnetic] { transform: none !important; }
    .mo-sheen { display: none; }
    .shine::after { animation: none; opacity: 0; }
    .float, .pulse-soft { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}