:root {
  --bg: #06060f;
  --bg-soft: #0d0a1a;
  --card: rgba(19, 17, 43, .66);
  --card-solid: #131126;
  --line: rgba(146, 214, 255, .16);
  --line-strong: rgba(114, 238, 255, .35);
  --text: #f5f5ff;
  --muted: #a8a4c8;
  --dim: #6d6a92;
  --red: #ff2b9f;
  --red-bright: #29e7ff;
  --red-deep: #67165d;
  --cream: #f0f7ff;
  --mono: "DM Mono", monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; min-width: 320px; color: var(--text); background: radial-gradient(circle at 50% -10%, #291341 0%, transparent 31%), var(--bg); font-family: var(--sans); overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.section-shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.noise { position: fixed; z-index: 10; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.page-glow { position: fixed; pointer-events: none; width: 55vw; height: 45vw; border-radius: 50%; filter: blur(100px); opacity: .13; z-index: -1; }
.glow-one { background: #f82ca6; top: 16vh; left: -24vw; }
.glow-two { background: #3b48f4; top: 58vh; right: -30vw; }

/* Header */
.site-header { position: fixed; z-index: 20; top: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 30px; width: min(calc(100% - 48px), var(--max)); min-height: 62px; padding: 0 18px; border: 1px solid transparent; border-radius: 14px; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.site-header.scrolled { background: rgba(12, 9, 9, .76); border-color: rgba(255,255,255,.09); backdrop-filter: blur(18px); box-shadow: 0 12px 36px rgba(0,0,0,.2); }
.brand { display: inline-flex; align-items: center; flex: none; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .09em; }
.brand-dot { color: var(--red); }
.brand-mark { position: relative; display: inline-flex; align-items: end; gap: 2px; width: 22px; height: 22px; padding: 3px; background: var(--red); box-shadow: 3px 3px 0 rgba(109, 16, 21, .7); }
.brand-mark i { display: block; width: 4px; background: #170909; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 9px; }
.site-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 29px); }
.site-nav a { position: relative; color: var(--muted); font-size: 12px; font-weight: 500; transition: color .2s ease; }
.site-nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: -8px; transform: scaleX(0); background: var(--red); transform-origin: left; transition: transform .25s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }.site-nav a.active::after, .site-nav a:hover::after { transform: scaleX(1); }
.header-discord { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 12px; font-weight: 600; }.header-discord svg { width: 16px; height: 16px; color: var(--red-bright); }
.cart-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0; color: var(--text); border: 0; background: transparent; font-size: 12px; font-weight: 600; }.cart-toggle b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; color: #fff5f3; background: var(--red); border-radius: 50%; font-family: var(--mono); font-size: 9px; }.cart-toggle:hover { color: var(--red-bright); }
.menu-toggle { display: none; }

/* Shared pieces */
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #d9c9c7; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 14px; height: 1px; background: var(--red); box-shadow: 5px 0 0 rgba(215,53,53,.32); }
h1, h2, h3, p { margin-top: 0; }h1, h2, h3 { letter-spacing: -.04em; }h2 { margin-bottom: 17px; font-size: clamp(38px, 5vw, 62px); line-height: .98; }h1 em, h2 em { color: var(--red-bright); font-style: normal; } .section { padding-top: 147px; }
.section-heading { max-width: 680px; margin-bottom: 47px; }.section-heading > p:not(.eyebrow) { max-width: 580px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.72; }.split-heading { display: flex; justify-content: space-between; max-width: none; gap: 40px; }.split-heading > p { max-width: 386px !important; padding-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; padding: 0 18px; border: 1px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: .01em; transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }.button:hover { transform: translateY(-2px); }.button svg { width: 17px; height: 17px; }.button-primary { background: var(--red); box-shadow: 4px 4px 0 #74171c; }.button-primary:hover { background: var(--red-bright); box-shadow: 6px 6px 0 #74171c; }.button-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.025); }.button-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

/* Hero */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 770px; padding-top: 180px; overflow: hidden; }.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 1px; height: 55%; background: linear-gradient(transparent, rgba(217, 52, 52, .3), transparent); }.hero-world { position: absolute; z-index: -2; inset: 0 calc((100vw - min(100vw - 48px, var(--max))) / -2); overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(145, 20, 27, .18) 0, rgba(24, 10, 11, .07) 24%, transparent 47%), linear-gradient(180deg, #080707 0%, #090707 46%, #100909 100%); }.hero-world::before { content: ""; position: absolute; inset: 0; opacity: .65; background: linear-gradient(90deg, var(--bg) 0%, transparent 25%, transparent 75%, var(--bg) 100%), linear-gradient(180deg, rgba(8,7,7,.1) 42%, var(--bg) 100%); z-index: 3; }.world-grid { position: absolute; inset: 36% -15% -20%; background-image: linear-gradient(rgba(184,57,57,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(184,57,57,.13) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(440px) rotateX(62deg); transform-origin: bottom; opacity: .56; }.world-horizon { position: absolute; left: 0; right: 0; bottom: 20%; height: 11%; background: linear-gradient(90deg, transparent, #3d1014 29%, #861f27 50%, #3d1014 71%, transparent); filter: blur(16px); opacity: .48; }.world-mountain { position: absolute; bottom: 14%; width: 46%; height: 43%; opacity: .72; filter: drop-shadow(0 0 20px rgba(111,16,22,.23)); background-image: linear-gradient(149deg, transparent 0 18%, #150f10 18% 30%, #241315 30% 39%, #100c0d 39% 48%, #2c1518 48% 57%, #120d0e 57% 68%, #211214 68% 76%, transparent 76%), linear-gradient(27deg, transparent 0 18%, #0c0a0a 18% 31%, #291417 31% 46%, #110c0d 46% 58%, #36171a 58% 72%, transparent 72%); background-size: 76px 57px, 92px 67px; clip-path: polygon(0 82%, 11% 57%, 19% 58%, 28% 40%, 38% 45%, 46% 19%, 57% 32%, 64% 6%, 73% 38%, 80% 31%, 88% 62%, 100% 79%, 100% 100%, 0 100%); }.mountain-left { left: -5%; }.mountain-right { right: -5%; transform: scaleX(-1) scale(1.1); }.world-pillar { position: absolute; bottom: 20%; width: 27px; background: linear-gradient(90deg, #170d0e, #3e171a 58%, #0d0b0b); box-shadow: 0 0 0 1px rgba(213,57,58,.2), 0 -11px 0 -3px #411719; }.pillar-one { left: 24%; height: 25%; }.pillar-two { right: 20%; height: 17%; }.pillar-three { right: 31%; height: 30%; width: 16px; }.world-orb { position: absolute; top: 26%; left: 50%; width: 164px; height: 164px; transform: translateX(-50%); background: radial-gradient(circle, rgba(247,79,69,.14), rgba(206,36,37,.06) 28%, transparent 66%); border: 1px solid rgba(244,78,75,.08); border-radius: 50%; box-shadow: 0 0 90px 34px rgba(208, 35, 36, .06); }
.hero-content { width: 100%; max-width: 745px; }.hero h1 { margin-bottom: 21px; font-size: clamp(68px, 11vw, 153px); font-weight: 700; line-height: .82; letter-spacing: -.09em; text-shadow: 0 10px 30px rgba(0,0,0,.4); }.hero h1 em { display: inline-block; }.hero-copy { max-width: 420px; margin-bottom: 29px; color: #cec4c2; font-size: 17px; line-height: 1.5; }.hero-actions { display: flex; gap: 12px; }.hero-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-bottom: 42px; }.ip-copy { position: relative; display: grid; gap: 3px; min-width: 234px; padding: 14px 52px 14px 15px; overflow: hidden; color: var(--text); text-align: left; border: 1px solid var(--line); background: rgba(21,16,16,.6); backdrop-filter: blur(12px); transition: border-color .25s ease, transform .25s ease; }.ip-copy::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--red); }.ip-copy:hover { border-color: rgba(240, 68, 68, .6); transform: translateY(-2px); }.ip-label { color: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.ip-copy strong { font-family: var(--mono); font-size: 14px; font-weight: 500; }.copy-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--red-bright); }.copy-icon svg { width: 17px; height: 17px; }.scroll-cue { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.scroll-cue i { position: relative; display: inline-block; width: 33px; height: 1px; background: var(--red); }.scroll-cue i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--red); border-right: 1px solid var(--red); transform: rotate(45deg); }

/* Status */
/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.feature-card { position: relative; min-height: 229px; padding: 27px 24px 24px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); transition: background .3s ease, transform .3s ease; }.feature-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 0 0, rgba(219,46,46,.18), transparent 48%); transition: opacity .3s ease; }.feature-card:hover { z-index: 1; background: rgba(255,255,255,.04); transform: translateY(-5px); }.feature-card:hover::before { opacity: 1; }.feature-num { position: absolute; top: 25px; right: 22px; color: #453d3c; font-family: var(--mono); font-size: 10px; }.feature-icon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 30px; color: var(--red-bright); border: 1px solid rgba(239,68,68,.28); background: rgba(185,35,38,.1); }.feature-icon svg { width: 20px; height: 20px; }.feature-card h3 { position: relative; margin-bottom: 8px; font-size: 17px; }.feature-card p { position: relative; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

/* Store */
.product-section { padding-top: 159px; }.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.product-card { position: relative; display: flex; flex-direction: column; min-height: 510px; padding: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(12px); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }.product-card:hover { transform: translateY(-5px); border-color: rgba(239,68,68,.38); box-shadow: 0 20px 45px rgba(0,0,0,.2); }.product-card.featured { display: grid; grid-column: 1 / -1; grid-template-columns: 225px 1fr 1.2fr; grid-template-areas: "art title items" "art meta items" "art action items"; column-gap: 30px; align-items: center; min-height: 328px; border-color: rgba(244,75,74,.75); background: radial-gradient(circle at 16% 55%, rgba(237,56,57,.22), transparent 27%), linear-gradient(120deg, rgba(122,23,28,.72), rgba(29,16,17,.9) 47%, rgba(92,18,23,.55)); box-shadow: inset 0 0 50px rgba(235,50,51,.1), 0 18px 50px rgba(74,9,12,.34); animation: champion-glow 3.5s ease-in-out infinite; }.product-card.featured::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.09) 41%, transparent 48%); transform: translateX(-100%); animation: champion-sweep 4.8s ease-in-out infinite; }.product-card.featured .product-art { grid-area: art; height: calc(100% + 40px); min-height: 328px; margin: -20px 0 -20px -20px; background: radial-gradient(circle at 50% 48%, rgba(229,55,55,.32), transparent 34%), linear-gradient(130deg, #461317, #100c0d); }.product-card.featured .kit-emblem { right: 50%; top: 50%; width: 118px; height: 118px; transform: translate(50%, -50%) rotate(45deg); color: #fff6f2; border-color: rgba(255,225,218,.45); box-shadow: 0 0 0 8px rgba(232,54,55,.12), 0 0 50px rgba(238,60,61,.32), inset 0 0 28px rgba(235,50,51,.3); }.product-card.featured .kit-emblem svg { width: 48px; height: 48px; }.product-card.featured h3 { grid-area: title; z-index: 1; align-self: end; margin: 0; color: #fff4f1; font-size: clamp(28px, 3vw, 42px); }.product-card.featured .kit-count { grid-area: meta; z-index: 1; align-self: start; margin: 5px 0 0; color: #f0c0bc; }.product-card.featured .kit-items { grid-area: items; z-index: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; align-self: stretch; margin: 0; padding: 24px 0 20px 25px; border-top: 0; border-left: 1px solid rgba(255,226,221,.17); }.product-card.featured .buy-button { grid-area: action; z-index: 1; align-self: end; max-width: 185px; background: var(--red); box-shadow: 4px 4px 0 #6f161b; }.product-card.featured .price-badge { background: #fff1ed; color: #6f151a; }.signature-label { position: absolute; z-index: 3; left: 22px; top: 20px; color: #ffd4ce; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.product-art { position: relative; height: 126px; margin: -20px -20px 19px; overflow: hidden; background: linear-gradient(130deg, #211415, #110e0e); }.product-art::before { content: ""; position: absolute; inset: 0; opacity: .72; background-image: linear-gradient(45deg, rgba(204,50,51,.11) 25%, transparent 25%), linear-gradient(-45deg, rgba(204,50,51,.11) 25%, transparent 25%); background-size: 22px 22px; }.product-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #171111 0%, transparent 80%); }.kit-emblem { position: absolute; z-index: 1; right: 20px; top: 21px; display: grid; place-items: center; width: 79px; height: 79px; color: var(--cream); border: 1px solid rgba(255,255,255,.22); background: rgba(23,13,14,.5); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(216,46,47,.08), inset 0 0 23px rgba(213,40,41,.2); }.kit-emblem svg { width: 30px; height: 30px; transform: rotate(-45deg); }.kit-tier { position: absolute; z-index: 1; top: 18px; left: 19px; color: #c6b8b7; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.price-badge { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 6px 8px; color: #fcebea; font-family: var(--mono); font-size: 10px; background: var(--red); }.product-card h3 { margin-bottom: 5px; font-size: 20px; }.product-card p { margin-bottom: 16px; color: var(--muted); font-size: 11px; line-height: 1.65; }.product-card .kit-count { min-height: auto; color: #c7aaa6; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.kit-items { display: grid; gap: 5px; flex: 1; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }.kit-items li { position: relative; padding-left: 10px; color: #cfc1bf; font-size: 10px; line-height: 1.35; }.kit-items li::before { content: ""; position: absolute; left: 0; top: .48em; width: 3px; height: 3px; background: var(--red); }.buy-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 12px; color: #f8e8e7; border: 1px solid rgba(239,68,68,.35); background: rgba(200,42,43,.1); font-size: 11px; font-weight: 600; transition: background .2s ease, border-color .2s ease; }.buy-button:hover { background: var(--red); border-color: var(--red); }.buy-button svg { width: 15px; height: 15px; }@keyframes champion-glow { 50% { border-color: rgba(255,150,144,.95); box-shadow: inset 0 0 60px rgba(235,50,51,.16), 0 18px 56px rgba(149,18,22,.48); } }@keyframes champion-sweep { 10%, 58% { transform: translateX(-100%); } 82% { transform: translateX(180%); } 100% { transform: translateX(180%); } }

/* Crates */
.crate-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.crate-card { position: relative; min-height: 229px; padding: 15px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.014); text-align: center; transition: border-color .25s ease, transform .25s ease, background .25s ease; }.crate-card:hover { transform: translateY(-4px); border-color: rgba(237,70,70,.42); background: rgba(175,28,30,.07); }.crate-price { position: absolute; top: 11px; right: 11px; padding: 5px 6px; color: #fcebea; background: var(--red); font-family: var(--mono); font-size: 9px; }.crate-cube { position: relative; width: 73px; height: 73px; margin: 21px auto 23px; transform: rotate(30deg) skewY(-30deg) scaleY(.86); background: linear-gradient(135deg, #b3282d, #451317); box-shadow: inset 0 0 0 5px rgba(15,8,8,.35), 0 16px 22px rgba(0,0,0,.26); }.crate-cube::before, .crate-cube::after { content: ""; position: absolute; }.crate-cube::before { inset: 10px; border: 3px solid rgba(255,225,219,.57); box-shadow: inset 0 0 0 3px rgba(66,14,16,.6); }.crate-cube::after { width: 86px; height: 13px; left: -7px; top: 29px; background: rgba(255,218,211,.5); box-shadow: 0 0 0 3px rgba(64,14,16,.7); }.crate-card:nth-child(2) .crate-cube { background: linear-gradient(135deg, #725164, #281624); }.crate-card:nth-child(3) .crate-cube { background: linear-gradient(135deg, #84602c, #291e13); }.crate-card:nth-child(4) .crate-cube { background: linear-gradient(135deg, #995b30, #321d15); }.crate-card:nth-child(5) .crate-cube { background: linear-gradient(135deg, #e1433e, #611116); box-shadow: inset 0 0 0 5px rgba(15,8,8,.35), 0 0 25px rgba(233,59,55,.35); }.crate-card h3 { margin-bottom: 18px; font-size: 13px; }.crate-card .buy-button { min-height: 34px; padding: 0 9px; font-size: 10px; }

/* Cosmetics */
/* Goal */
.goal-section { padding-top: 54px; }.goal-card { position: relative; display: grid; grid-template-columns: 118px 1fr 1.16fr; align-items: center; gap: 40px; padding: 48px 58px; overflow: hidden; border: 1px solid rgba(234,71,71,.32); background: linear-gradient(110deg, rgba(100,19,23,.38), rgba(22,15,15,.82) 43%, rgba(43,17,18,.56)); }.goal-card::before { content: ""; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(237,78,78,.12); border-radius: 50%; right: -173px; top: -170px; box-shadow: 0 0 0 35px rgba(227,50,51,.025), 0 0 0 70px rgba(227,50,51,.025); }.goal-shine { position: absolute; width: 150px; height: 450px; top: -120px; left: 44%; background: linear-gradient(90deg, transparent, rgba(245,119,116,.07), transparent); transform: rotate(24deg); }.goal-key { position: relative; z-index: 1; width: 98px; height: 158px; filter: drop-shadow(0 0 18px rgba(234,57,58,.24)); transform: rotate(-37deg); }.key-ring { position: absolute; width: 67px; height: 67px; top: 0; left: 0; border: 12px solid #ec4b49; box-shadow: inset 0 0 0 5px #68181d, 0 0 0 6px rgba(233,65,64,.1); }.key-shaft { position: absolute; left: 50px; top: 48px; width: 20px; height: 107px; background: linear-gradient(90deg, #781d20, #f1514d 48%, #7d1b20); }.key-teeth { position: absolute; left: 45px; top: 110px; width: 35px; height: 48px; }.key-teeth i { position: absolute; display: block; width: 33px; height: 17px; background: #e74443; }.key-teeth i:nth-child(2) { top: 20px; width: 23px; }.key-teeth i:nth-child(3) { top: 40px; width: 15px; }.goal-copy, .goal-progress-wrap { position: relative; z-index: 1; }.goal-copy h2 { font-size: clamp(34px, 4vw, 53px); }.goal-copy p:not(.eyebrow) { max-width: 395px; margin-bottom: 0; color: #c0b2b1; font-size: 13px; line-height: 1.75; }.goal-progress-wrap { align-self: center; }.goal-values { display: flex; justify-content: space-between; margin-bottom: 14px; color: #c9b8b5; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }.goal-values strong { margin-left: 7px; color: #fff0ed; font-size: 18px; font-weight: 500; }.progress-track { height: 9px; overflow: hidden; border: 1px solid rgba(255,219,214,.18); background: rgba(10,6,6,.55); }.progress-track span { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, #951f25, var(--red-bright)); box-shadow: 0 0 15px rgba(236,65,65,.67); transition: width .7s cubic-bezier(.2,.8,.2,1); }.goal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: #ad9794; font-family: var(--mono); font-size: 9px; }.goal-footer > span { display: flex; align-items: center; gap: 7px; }.goal-footer i { width: 5px; height: 5px; background: var(--red); }.goal-footer a { display: inline-flex; align-items: center; gap: 6px; color: #f4d4d0; }.goal-footer svg { width: 13px; height: 13px; }

/* Support and footer */
.support { padding-top: 150px; padding-bottom: 100px; }.support-card { position: relative; display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 35px; min-height: 235px; padding: 38px 44px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }.support-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }.support-card h2 { margin-bottom: 11px; font-size: clamp(32px, 3.8vw, 49px); }.support-card p:not(.eyebrow) { max-width: 460px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.support-graphic { position: relative; display: grid; place-items: center; width: 95px; height: 95px; color: var(--red-bright); border: 1px solid rgba(229,57,58,.33); background: radial-gradient(circle, rgba(195,41,43,.2), transparent 67%); }.support-graphic span { position: absolute; border: 1px solid rgba(233,64,65,.2); transform: rotate(45deg); }.support-graphic span:nth-child(1) { width: 60px; height: 60px; }.support-graphic span:nth-child(2) { width: 80px; height: 80px; }.support-graphic span:nth-child(3) { width: 105px; height: 105px; }.support-graphic svg { width: 27px; height: 27px; }.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; min-height: 107px; border-top: 1px solid var(--line); }.footer-links { display: flex; justify-content: center; gap: 28px; }.footer-links a, .footer-links button { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: #ded1cf; border: 0; background: transparent; font-family: var(--mono); font-size: 10px; }.footer-links span { color: var(--dim); }.footer-links svg { width: 13px; height: 13px; color: var(--red); }.site-footer > p { margin: 0; color: var(--dim); font-family: var(--mono); font-size: 10px; }.toast { position: fixed; z-index: 40; bottom: 28px; left: 50%; padding: 12px 17px; color: #f9eae7; border: 1px solid rgba(238,70,70,.4); background: rgba(33,15,16,.93); box-shadow: 0 12px 35px rgba(0,0,0,.3); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .25s ease, transform .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.cart-backdrop { position: fixed; z-index: 29; inset: 0; background: rgba(0,0,0,.66); opacity: 0; pointer-events: none; transition: opacity .25s ease; }.cart-panel { position: fixed; z-index: 30; top: 0; right: 0; display: grid; grid-template-rows: auto 1fr auto; width: min(100%, 390px); height: 100dvh; padding: 25px; color: var(--text); border-left: 1px solid var(--line-strong); background: #110d0e; box-shadow: -28px 0 60px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.75,.25,1); }.cart-open { overflow: hidden; }.cart-open .cart-backdrop { opacity: 1; pointer-events: auto; }.cart-open .cart-panel { transform: none; }.cart-header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.cart-header span { color: var(--red-bright); font-family: var(--mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }.cart-header h2 { margin: 6px 0 0; font-size: 32px; }.cart-close { display: grid; place-items: center; width: 33px; height: 33px; color: var(--text); border: 1px solid var(--line); background: transparent; font-size: 24px; line-height: 1; }.cart-close:hover { border-color: var(--red); color: var(--red-bright); }.cart-items { display: grid; align-content: start; gap: 0; overflow: auto; }.cart-empty { margin: 28px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.cart-line { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 19px 0; border-bottom: 1px solid var(--line); }.cart-line span { color: var(--dim); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.cart-line h3 { margin: 4px 0 0; font-size: 15px; }.cart-line p { margin: 5px 0 0; color: var(--red-bright); font-family: var(--mono); font-size: 10px; }.cart-controls { display: flex; align-items: center; gap: 9px; align-self: center; }.cart-controls button { display: grid; place-items: center; width: 23px; height: 23px; color: #f6e6e3; border: 1px solid var(--line-strong); background: transparent; font-size: 15px; }.cart-controls b { min-width: 12px; text-align: center; font-family: var(--mono); font-size: 11px; }.cart-remove { grid-column: 1 / -1; justify-self: start; padding: 0; color: var(--muted); border: 0; background: transparent; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }.cart-remove:hover { color: var(--red-bright); }.cart-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 19px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 10px; }.cart-footer button { padding: 0; color: #f1d7d4; border: 0; background: transparent; font-family: inherit; font-size: inherit; text-transform: uppercase; }.cart-footer button:hover { color: var(--red-bright); }

/* Motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }.reveal.visible { opacity: 1; transform: none; }.feature-card { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1), background .3s ease; }.feature-card.visible { opacity: 1; transform: none; }.feature-card:nth-child(2), .product-card:nth-child(2), .crate-card:nth-child(2) { transition-delay: .05s; }.feature-card:nth-child(3), .product-card:nth-child(3), .crate-card:nth-child(3) { transition-delay: .1s; }.feature-card:nth-child(4), .product-card:nth-child(4), .crate-card:nth-child(4) { transition-delay: .15s; }.feature-card:nth-child(5), .product-card:nth-child(5), .crate-card:nth-child(5) { transition-delay: .2s; }.feature-card:nth-child(6), .product-card:nth-child(6), .crate-card:nth-child(6) { transition-delay: .25s; }.feature-card:nth-child(7), .product-card:nth-child(7), .crate-card:nth-child(7) { transition-delay: .3s; }.feature-card:nth-child(8) { transition-delay: .35s; }.product-card, .crate-card { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }.product-card.visible, .crate-card.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 980px) { .site-header { gap: 18px; }.site-nav { gap: 14px; }.header-discord span { display: none; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.product-grid { grid-template-columns: repeat(2, 1fr); }.crate-grid { grid-template-columns: repeat(3, 1fr); }.cosmetic-grid { grid-template-columns: repeat(2, 1fr); }.goal-card { grid-template-columns: 90px 1fr; gap: 28px; padding: 42px; }.goal-progress-wrap { grid-column: 1 / -1; }.support-card { grid-template-columns: 96px 1fr; }.support-card .button { grid-column: 2; justify-self: start; }.site-footer { grid-template-columns: auto 1fr; padding-block: 26px; }.site-footer > p { grid-column: 1 / -1; }.footer-links { justify-content: flex-end; } }
@media (max-width: 720px) { .section-shell { width: min(calc(100% - 32px), var(--max)); }.site-header { top: 10px; width: calc(100% - 32px); min-height: 56px; padding: 0 13px; }.site-header.scrolled { background: rgba(12, 9, 9, .95); }.menu-toggle { display: grid; gap: 5px; width: 34px; height: 34px; margin-left: auto; padding: 9px; border: 0; background: transparent; }.menu-toggle span:not(.sr-only) { display: block; width: 16px; height: 1px; background: #e9dddd; transition: transform .2s ease; }.site-header.menu-open .menu-toggle span:nth-child(2) { transform: translateY(3px) rotate(45deg); }.site-header.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }.site-nav { position: absolute; top: 64px; right: 0; display: grid; width: min(260px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); background: rgba(15,10,10,.98); box-shadow: 0 20px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }.site-header.menu-open .site-nav { opacity: 1; pointer-events: auto; transform: none; }.site-nav a { padding: 10px; }.site-nav a::after { display: none; }.header-discord { display: none; }.hero { min-height: 700px; padding-top: 162px; }.hero h1 { font-size: clamp(65px, 19vw, 115px); }.hero-copy { max-width: 290px; font-size: 15px; }.hero-actions { flex-wrap: wrap; }.hero-bottom { align-items: flex-start; }.scroll-cue { display: none; }.status-band { grid-template-columns: 1fr; gap: 17px; padding: 21px 18px; }.status-stats { grid-template-columns: repeat(3, 1fr); }.status-item { padding-left: 12px; }.status-item:first-child { padding-left: 0; border-left: 0; }.status-note { max-width: 285px; }.section { padding-top: 105px; }.goal-section { padding-top: 34px; }.section-heading { margin-bottom: 33px; }.split-heading { display: block; }.split-heading > p { padding-top: 0; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 180px; }.feature-icon { margin-bottom: 20px; }.product-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.product-card { min-height: 304px; padding: 14px; }.product-art { height: 100px; margin: -14px -14px 14px; }.kit-emblem { top: 14px; right: 15px; width: 60px; height: 60px; }.product-card h3 { font-size: 17px; }.product-card p { min-height: auto; font-size: 10px; }.kit-items { gap: 4px; }.kit-items li { font-size: 9px; }.crate-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.crate-card { min-height: 211px; }.cosmetic-grid { grid-template-columns: 1fr; gap: 9px; }.goal-card { grid-template-columns: 1fr; gap: 24px; padding: 31px 23px; }.goal-key { margin-left: 8px; transform: rotate(-37deg) scale(.82); transform-origin: left top; height: 124px; }.goal-progress-wrap { grid-column: auto; }.goal-footer { gap: 15px; }.goal-footer > span { max-width: 150px; }.support { padding-top: 105px; padding-bottom: 62px; }.support-card { grid-template-columns: 1fr; gap: 25px; padding: 29px 23px; }.support-card .button { grid-column: auto; }.site-footer { grid-template-columns: 1fr; gap: 23px; padding: 30px 0; }.footer-links { display: grid; justify-content: start; gap: 12px; }.site-footer > p { grid-column: auto; } }
@media (max-width: 385px) { .product-grid { grid-template-columns: 1fr; }.product-card { min-height: 290px; }.product-card p { min-height: auto; }.status-item strong { font-size: 10px; }.hero h1 { font-size: 62px; } }
@media (max-width: 980px) { .product-card.featured { grid-template-columns: 170px 1fr; grid-template-areas: "art title" "art meta" "items items" "action action"; min-height: 0; }.product-card.featured .product-art { min-height: 205px; height: calc(100% + 40px); }.product-card.featured .kit-items { min-height: 180px; padding: 22px 0 16px; border-top: 1px solid rgba(255,226,221,.17); border-left: 0; }.product-card.featured .buy-button { max-width: 220px; } }
@media (max-width: 720px) { .product-card.featured { display: flex; min-height: 0; }.product-card.featured .product-art { height: 152px; min-height: 0; margin: -14px -14px 16px; }.product-card.featured .kit-emblem { width: 80px; height: 80px; }.product-card.featured .kit-emblem svg { width: 34px; height: 34px; }.product-card.featured h3, .product-card.featured .kit-count, .product-card.featured .kit-items, .product-card.featured .buy-button { display: block; }.product-card.featured h3 { margin: 0 0 5px; font-size: 26px; }.product-card.featured .kit-count { margin: 0 0 14px; }.product-card.featured .kit-items { grid-template-columns: 1fr; min-height: 0; margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid rgba(255,226,221,.17); }.product-card.featured .buy-button { display: flex; max-width: none; }.signature-label { left: 15px; top: 15px; } }