<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ARTSABERS — Every saber. Every core. Every duelling grade.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap">
<style>
:root {
/* Surfaces (semantic — for backgrounds only) */
--surface: #131313;
--surface-container-lowest: #0E0E0E;
--surface-container-low: #1C1B1B;
--surface-container: #201F1F;
--surface-container-high: #2A2A2A;
--surface-container-highest: #353534;
--surface-bright: #393939;
/* Outlines & warm dim text */
--outline: #A28C86;
--outline-variant: #54433E;
--on-surface: #E5E2E1;
--on-surface-variant: #DAC1BB;
/* Ember heat (chromatic — accents only) */
--primary-light: #FFC4B4;
--primary: #FF9C80;
--primary-container: #FF9C80;
--on-primary-fixed: #3B0900;
--primary-fixed-dim: #FFB5A0;
/* Functional only */
--tertiary: #7AE3D1;
--error: #FFB4AB;
--error-container: #93000A;
/* Type families */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
/* Radius — zero everywhere */
--radius-none: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--container: 1440px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--surface); }
body { background: var(--surface); color: var(--on-surface); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input { font-family: inherit; background: transparent; border: none; outline: none; color: inherit; }
/* ============================================================
BLOCK: promo-bar
============================================================ */
.promo-bar { background: var(--surface); position: relative; padding: 12px 32px; text-align: center; }
.promo-bar__text { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--on-surface-variant); font-weight: 500; }
.promo-bar__sep { padding: 0 20px; opacity: 0.4; color: var(--outline); }
.promo-bar__dot { color: var(--primary); }
.promo-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 128, 0.28) 50%, transparent 100%); pointer-events: none; }
/* ============================================================
BLOCK: primary-nav
============================================================ */
.primary-nav { background: var(--surface); position: sticky; top: 0; z-index: 50; }
.primary-nav__inner { max-width: 1440px; margin: 0 auto; padding: 24px 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; }
.primary-nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface); display: inline-flex; align-items: baseline; gap: 6px; }
.primary-nav__brand-mark { width: 6px; height: 6px; background: var(--primary); display: inline-block; align-self: center; }
.primary-nav__menu { display: flex; gap: 40px; justify-content: center; align-items: center; }
.primary-nav__link { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface); transition: color 200ms ease; }
.primary-nav__link:hover { color: var(--primary); }
.primary-nav__utility { display: flex; gap: 20px; align-items: center; }
.primary-nav__icon { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface-variant); padding: 8px 4px; transition: color 200ms ease; display: inline-flex; align-items: center; gap: 6px; }
.primary-nav__icon:hover { color: var(--on-surface); }
.primary-nav__cart-count { color: var(--primary); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.primary-nav__loc-indicator { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--outline); }
.primary-nav::after { content: ''; display: block; height: 1px; background: rgba(84, 67, 62, 0.35); }
@media (max-width: 900px) {
.primary-nav__menu { display: none; }
.primary-nav__inner { grid-template-columns: auto auto; }
.primary-nav__loc-indicator { display: none; }
}
/* ============================================================
BLOCK: hero-cinematic
============================================================ */
.hero-cinematic { background: var(--surface-container-lowest); position: relative; min-height: 100vh; overflow: hidden; padding: 96px 32px 128px; display: flex; align-items: center; }
.hero-cinematic__blueprint { position: absolute; inset: 0; background-image:
linear-gradient(to right, rgba(57, 57, 57, 0.10) 1px, transparent 1px),
linear-gradient(to bottom, rgba(57, 57, 57, 0.10) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
mask-image: radial-gradient(ellipse 90% 70% at 30% 50%, black 30%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 50%, black 30%, transparent 90%);
}
.hero-cinematic__bloom { position: absolute; right: -10%; top: 40%; width: 60%; height: 60%; background: radial-gradient(ellipse at center, rgba(255, 156, 128, 0.10), transparent 65%); pointer-events: none; transform: translateY(-50%); }
.hero-cinematic__inner { position: relative; max-width: 1440px; margin: 0 auto; width: 100%; z-index: 3; }
.hero-cinematic__copy { max-width: 680px; }
.hero-cinematic__meta { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 40px; display: flex; gap: 12px; align-items: center; }
.hero-cinematic__meta-dot { width: 6px; height: 6px; background: var(--primary); display: inline-block; }
.hero-cinematic__title { font-family: var(--font-display); font-size: clamp(56px, 8.6vw, 128px); font-weight: 700; line-height: 0.88; text-transform: uppercase; letter-spacing: -0.015em; color: var(--on-surface); margin-bottom: 40px; }
.hero-cinematic__title-accent { color: var(--on-surface-variant); font-weight: 500; }
.hero-cinematic__sub { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--on-surface-variant); max-width: 480px; margin-bottom: 56px; letter-spacing: 0.02em; line-height: 1.4; }
.hero-cinematic__ctas { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.hero-cinematic__cta-primary { display: inline-flex; align-items: center; justify-content: center; padding: 20px 40px; background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%); color: var(--on-primary-fixed); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; transition: box-shadow 200ms ease, transform 100ms ease; }
.hero-cinematic__cta-primary:hover { box-shadow: 0 0 32px rgba(255, 156, 128, 0.45); }
.hero-cinematic__cta-primary:active { transform: translateY(2px); }
.hero-cinematic__cta-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 20px 32px; background: transparent; color: var(--on-surface); border: 1px solid rgba(162, 140, 134, 0.28); font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 200ms ease; }
.hero-cinematic__cta-ghost:hover { background: var(--surface-container-high); }
.hero-cinematic__stage { position: absolute; inset: 0; background: var(--surface-container-low); overflow: hidden; z-index: 1; }
.hero-cinematic__stage-fx { position: absolute; inset: 0; background:
radial-gradient(ellipse 45% 60% at 62% 50%, rgba(255, 156, 128, 0.16), transparent 65%),
radial-gradient(ellipse 35% 45% at 20% 25%, rgba(122, 227, 209, 0.03), transparent 70%),
radial-gradient(ellipse 60% 40% at 78% 82%, rgba(255, 156, 128, 0.06), transparent 60%),
linear-gradient(180deg, rgba(14, 14, 14, 0.35) 0%, transparent 30%, transparent 70%, rgba(14, 14, 14, 0.55) 100%);
}
.hero-cinematic__vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 14, 0.92) 0%, rgba(14, 14, 14, 0.78) 28%, rgba(14, 14, 14, 0.40) 62%, rgba(14, 14, 14, 0.18) 100%); pointer-events: none; z-index: 2; }
.hero-cinematic__stage-caption { position: absolute; bottom: 32px; left: 32px; max-width: 480px; font-family: var(--font-body); font-style: italic; font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); z-index: 3; letter-spacing: 0.005em; }
.hero-cinematic__stage-label { position: absolute; top: 32px; right: 32px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); z-index: 3; }
.hero-cinematic__corner { position: absolute; width: 20px; height: 20px; border: 1px solid rgba(162, 140, 134, 0.6); z-index: 3; }
.hero-cinematic__corner--tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.hero-cinematic__corner--tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.hero-cinematic__corner--bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.hero-cinematic__corner--br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.hero-cinematic__callout { position: absolute; z-index: 3; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface); }
.hero-cinematic__callout::before { content: ''; position: absolute; width: 8px; height: 8px; background: var(--primary); box-shadow: 0 0 12px rgba(255, 156, 128, 0.6); }
.hero-cinematic__callout::after { content: ''; position: absolute; height: 1px; background: rgba(255, 156, 128, 0.4); transform-origin: left center; }
.hero-cinematic__callout--a { top: 30%; right: 22%; }
.hero-cinematic__callout--a::before { top: -6px; left: -62px; }
.hero-cinematic__callout--a::after { top: -2px; left: -58px; width: 50px; transform: rotate(-28deg); }
.hero-cinematic__callout--b { top: 62%; right: 30%; }
.hero-cinematic__callout--b::before { top: -6px; left: -62px; }
.hero-cinematic__callout--b::after { top: -2px; left: -58px; width: 50px; transform: rotate(28deg); }
.hero-cinematic__telemetry { position: absolute; bottom: 32px; right: 32px; display: grid; grid-template-columns: auto 1fr auto; column-gap: 16px; row-gap: 8px; max-width: 340px; z-index: 4; background: rgba(14, 14, 14, 0.65); padding: 16px 20px; }
.hero-cinematic__telemetry-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-surface-variant); }
.hero-cinematic__telemetry-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.4); transform: translateY(-6px); }
.hero-cinematic__telemetry-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--on-surface); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
.hero-cinematic__title { font-size: clamp(48px, 12vw, 92px); }
.hero-cinematic__telemetry { display: none; }
.hero-cinematic__stage-caption { display: none; }
.hero-cinematic__callout { display: none; }
.hero-cinematic__stage-label { display: none; }
}
/* ============================================================
BLOCK: hud-trust-bar
============================================================ */
.hud-trust-bar { background: var(--surface); padding: 32px 32px; position: relative; }
.hud-trust-bar__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.hud-trust-bar__item { position: relative; padding: 0 32px; text-align: center; }
.hud-trust-bar__item:not(:last-child)::after { content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 1px; background: rgba(84, 67, 62, 0.35); }
.hud-trust-bar__value { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.hud-trust-bar__label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 500; }
.hud-trust-bar__dot { color: var(--primary); }
@media (max-width: 1024px) {
.hud-trust-bar__inner { grid-template-columns: 1fr 1fr; gap: 24px 0; }
.hud-trust-bar__item:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
.hud-trust-bar__inner { grid-template-columns: 1fr; }
.hud-trust-bar__item::after { display: none !important; }
.hud-trust-bar__item { padding: 12px 16px; }
}
/* ============================================================
Shared page section header (spec-sheet asymmetric)
============================================================ */
.section-header { max-width: 1440px; margin: 0 auto; padding: 96px 32px 48px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.section-header__eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 20px; display: flex; gap: 12px; align-items: center; }
.section-header__eyebrow-index { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.section-header__title { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 76px); font-weight: 700; line-height: 0.94; text-transform: uppercase; letter-spacing: -0.005em; color: var(--on-surface); }
.section-header__aside { display: grid; grid-template-columns: auto 1fr auto; column-gap: 16px; row-gap: 6px; align-content: end; padding-bottom: 12px; }
.section-header__aside-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface-variant); }
.section-header__aside-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.35); transform: translateY(-6px); }
.section-header__aside-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--on-surface); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
.section-header { grid-template-columns: 1fr; padding: 64px 24px 32px; gap: 32px; }
}
/* ============================================================
BLOCK: saber-core-card (4-across archive grid)
============================================================ */
.saber-core-grid { max-width: 1440px; margin: 0 auto; padding: 24px 32px 128px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.saber-core-card { background: var(--surface-container); display: flex; flex-direction: column; padding: 24px; transition: background 200ms ease; }
.saber-core-card:hover { background: var(--surface-container-high); }
.saber-core-card__stage { position: relative; aspect-ratio: 4/3; background: var(--surface-container-lowest); margin: -24px -24px 24px -24px; overflow: hidden; }
.saber-core-card__stage-fx { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 30% at 55% 45%, rgba(255, 156, 128, 0.10), transparent 60%); }
.saber-core-card__stage-label { position: absolute; top: 16px; left: 16px; font-family: var(--font-display); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); }
.saber-core-card__stage-caption { position: absolute; bottom: 16px; left: 16px; right: 16px; font-family: var(--font-body); font-style: italic; font-size: 11px; line-height: 1.5; color: var(--on-surface-variant); }
.saber-core-card__tier-badge { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.saber-core-card__tier-badge-num { color: var(--primary); font-weight: 600; }
.saber-core-card__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--on-surface); line-height: 1; margin-bottom: 8px; }
.saber-core-card__price { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.saber-core-card__price-from { color: var(--on-surface-variant); font-weight: 400; }
.saber-core-card__specs { background: var(--surface-container-highest); padding: 16px; margin: 0 -8px 20px; display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 10px; }
.saber-core-card__spec-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-variant); }
.saber-core-card__spec-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.35); transform: translateY(-5px); }
.saber-core-card__spec-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; color: var(--on-surface); font-variant-numeric: tabular-nums; text-align: right; }
.saber-core-card__cta { margin-top: auto; padding: 14px 20px; background: transparent; color: var(--on-surface); border: 1px solid rgba(162, 140, 134, 0.28); font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-align: left; display: flex; justify-content: space-between; align-items: center; transition: background 200ms ease, color 200ms ease; }
.saber-core-card__cta:hover { background: var(--surface-container-high); color: var(--primary); }
@media (max-width: 1180px) {
.saber-core-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.saber-core-grid { grid-template-columns: 1fr; padding: 24px 24px 80px; }
}
/* ============================================================
BLOCK: product-specimen-card (3-across product row)
============================================================ */
.product-specimen-grid { max-width: 1440px; margin: 0 auto; padding: 24px 32px 128px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.product-specimen-card { background: var(--surface-container-highest); display: flex; flex-direction: column; position: relative; transition: background 200ms ease; }
.product-specimen-card:hover { background: var(--surface-container-high); }
.product-specimen-card__stage { position: relative; aspect-ratio: 5/4; background: var(--surface-container-low); overflow: hidden; }
.product-specimen-card__stage-fx { position: absolute; inset: 0; background:
radial-gradient(ellipse 60% 35% at 60% 55%, rgba(255, 156, 128, 0.14), transparent 65%),
radial-gradient(ellipse 30% 50% at 20% 30%, rgba(255, 156, 128, 0.04), transparent 70%);
}
.product-specimen-card__stage-label { position: absolute; top: 20px; left: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); }
.product-specimen-card__stage-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; font-family: var(--font-body); font-style: italic; font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); }
.product-specimen-card__tag { position: absolute; top: 20px; right: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary); font-weight: 600; }
.product-specimen-card__body { padding: 28px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.product-specimen-card__eyebrow { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.product-specimen-card__eyebrow-core { color: var(--on-surface); font-weight: 600; }
.product-specimen-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.005em; color: var(--on-surface); line-height: 1.15; margin-bottom: 16px; }
.product-specimen-card__meta-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 16px; }
.product-specimen-card__price { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.product-specimen-card__rating { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-specimen-card__rating-star { color: var(--primary); letter-spacing: 0; }
.product-specimen-card__specs { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 9px; margin-bottom: 24px; }
.product-specimen-card__spec-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-variant); }
.product-specimen-card__spec-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.30); transform: translateY(-5px); }
.product-specimen-card__spec-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.10em; color: var(--on-surface); font-variant-numeric: tabular-nums; text-align: right; text-transform: uppercase; }
.product-specimen-card__cta { margin-top: auto; padding: 14px 20px; background: transparent; color: var(--on-surface); border: 1px solid rgba(162, 140, 134, 0.28); font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-align: left; display: flex; justify-content: space-between; align-items: center; transition: background 200ms ease; }
.product-specimen-card__cta:hover { background: var(--surface-container); color: var(--primary); }
@media (max-width: 1024px) {
.product-specimen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.product-specimen-grid { grid-template-columns: 1fr; padding: 24px 24px 80px; }
}
/* ============================================================
BLOCK: faction-tile (3x2 movie-poster grid)
============================================================ */
.faction-band { background: var(--surface-container-lowest); padding-top: 0; padding-bottom: 128px; }
.faction-tile-grid { max-width: 1440px; margin: 0 auto; padding: 24px 32px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.faction-tile { position: relative; aspect-ratio: 5/6; background: var(--surface-container-low); overflow: hidden; cursor: pointer; display: block; }
.faction-tile__stage-fx { position: absolute; inset: 0; background:
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 156, 128, 0.08), transparent 60%),
linear-gradient(180deg, transparent 30%, rgba(14, 14, 14, 0.65) 78%, rgba(14, 14, 14, 0.9) 100%);
}
.faction-tile__index { position: absolute; top: 20px; left: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); z-index: 2; }
.faction-tile__count { position: absolute; top: 20px; right: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface-variant); z-index: 2; font-variant-numeric: tabular-nums; }
.faction-tile__count-num { color: var(--on-surface); font-weight: 600; }
.faction-tile__caption { position: absolute; top: 60px; left: 20px; right: 20px; font-family: var(--font-body); font-style: italic; font-size: 11px; line-height: 1.5; color: var(--on-surface-variant); z-index: 2; opacity: 0.85; }
.faction-tile__label { position: absolute; bottom: 24px; left: 24px; right: 24px; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 42px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface); line-height: 1; z-index: 2; }
.faction-tile__label-sub { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; color: var(--on-surface-variant); font-weight: 500; }
.faction-tile__corner { position: absolute; width: 16px; height: 16px; border: 1px solid rgba(162, 140, 134, 0.4); z-index: 3; opacity: 0; transition: opacity 200ms ease; }
.faction-tile__corner--tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.faction-tile__corner--tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.faction-tile__corner--bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.faction-tile__corner--br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.faction-tile:hover .faction-tile__corner { opacity: 1; }
.faction-tile:hover .faction-tile__stage-fx { background:
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 156, 128, 0.16), transparent 60%),
linear-gradient(180deg, transparent 20%, rgba(14, 14, 14, 0.55) 75%, rgba(14, 14, 14, 0.85) 100%);
}
@media (max-width: 1024px) {
.faction-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.faction-tile-grid { grid-template-columns: 1fr; padding: 24px 24px 0; }
}
/* ============================================================
BLOCK: mission-control-panels (Factory-direct + CS split)
============================================================ */
.mission-control { background: var(--surface-container-low); padding: 96px 32px 128px; position: relative; }
.mission-control::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 128, 0.35) 50%, transparent 100%); }
.mission-control__inner { max-width: 1440px; margin: 0 auto; }
.mission-control__header { margin-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.mission-control__eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 20px; display: flex; gap: 12px; align-items: center; }
.mission-control__eyebrow-index { color: var(--primary); font-weight: 600; }
.mission-control__section-title { font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 76px); font-weight: 700; line-height: 0.94; text-transform: uppercase; color: var(--on-surface); }
.mission-control__lead { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--on-surface-variant); max-width: 460px; padding-bottom: 8px; }
.mission-control__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.mission-control__panel { background: var(--surface-container); position: relative; display: flex; flex-direction: column; }
.mission-control__panel-stage { position: relative; aspect-ratio: 4/3; background: var(--surface-container-low); overflow: hidden; }
.mission-control__panel-stage-fx { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 30% 40%, rgba(255, 156, 128, 0.16), transparent 65%); }
.mission-control__panel-stage-label { position: absolute; top: 20px; left: 20px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); z-index: 2; }
.mission-control__panel-stage-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; font-family: var(--font-body); font-style: italic; font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); z-index: 2; }
.mission-control__panel-body { padding: 32px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.mission-control__panel-eyebrow { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); display: flex; gap: 10px; align-items: center; }
.mission-control__panel-eyebrow-dot { width: 6px; height: 6px; background: var(--primary); display: inline-block; }
.mission-control__panel-title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--on-surface); letter-spacing: -0.005em; }
.mission-control__panel-copy { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--on-surface-variant); }
.mission-control__panel-hud { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 20px 0 0; }
.mission-control__panel-hud-label { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 4px; }
.mission-control__panel-hud-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--on-surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.mission-control__cta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; background: var(--surface-container-lowest); flex-wrap: wrap; }
.mission-control__cta-copy { font-family: var(--font-body); font-size: 14px; color: var(--on-surface-variant); max-width: 620px; }
.mission-control__cta-copy-strong { color: var(--on-surface); font-weight: 600; }
.mission-control__cta-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 18px 36px; background: transparent; color: var(--on-surface); border: 1px solid rgba(162, 140, 134, 0.28); font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 200ms ease; }
.mission-control__cta-ghost:hover { background: var(--surface-container-high); }
@media (max-width: 1024px) {
.mission-control__header { grid-template-columns: 1fr; gap: 24px; }
.mission-control__panels { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: testimonial-card
============================================================ */
.testimonial-band { background: var(--surface); padding-top: 0; padding-bottom: 128px; }
.testimonial-grid { max-width: 1440px; margin: 0 auto; padding: 24px 32px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.testimonial-card { background: var(--surface-container); padding: 40px 32px 0; display: flex; flex-direction: column; position: relative; }
.testimonial-card__rating { display: flex; gap: 4px; margin-bottom: 24px; align-items: center; }
.testimonial-card__star { width: 14px; height: 14px; background: var(--primary); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.testimonial-card__rating-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-variant); margin-left: 12px; font-variant-numeric: tabular-nums; }
.testimonial-card__mark { position: absolute; top: 32px; right: 32px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tertiary); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.testimonial-card__mark-dot { width: 6px; height: 6px; background: var(--tertiary); display: inline-block; }
.testimonial-card__quote { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--on-surface); font-weight: 500; margin-bottom: 32px; }
.testimonial-card__meta { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 8px; margin-left: -32px; margin-right: -32px; padding: 24px 32px; background: var(--surface-container-highest); }
.testimonial-card__meta-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface-variant); }
.testimonial-card__meta-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.3); transform: translateY(-5px); }
.testimonial-card__meta-value { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--on-surface); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
.testimonial-grid { grid-template-columns: 1fr; }
}
/* ============================================================
BLOCK: brand-story-split
============================================================ */
.brand-story { background: var(--surface-container-low); padding: 96px 32px 128px; }
.brand-story__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
.brand-story__stage { position: relative; aspect-ratio: 3/4; background: var(--surface-container-low); overflow: hidden; }
.brand-story__stage-fx { position: absolute; inset: 0; background:
radial-gradient(ellipse 40% 55% at 30% 55%, rgba(255, 156, 128, 0.14), transparent 60%),
radial-gradient(ellipse 60% 30% at 60% 15%, rgba(255, 156, 128, 0.04), transparent 65%);
}
.brand-story__stage-label { position: absolute; top: 24px; left: 24px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--outline); z-index: 2; }
.brand-story__stage-caption { position: absolute; bottom: 24px; left: 24px; right: 24px; font-family: var(--font-body); font-style: italic; font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); z-index: 2; }
.brand-story__panel { background: var(--surface-container); padding: 64px 56px; display: flex; flex-direction: column; }
.brand-story__eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 20px; display: flex; gap: 12px; align-items: center; }
.brand-story__eyebrow-index { color: var(--primary); font-weight: 600; }
.brand-story__title { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 60px); font-weight: 700; line-height: 0.98; text-transform: uppercase; color: var(--on-surface); margin-bottom: 24px; letter-spacing: -0.005em; }
.brand-story__body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--on-surface-variant); margin-bottom: 32px; }
.brand-story__body strong { color: var(--on-surface); font-weight: 600; }
.brand-story__timeline { display: grid; grid-template-columns: auto 1fr auto; column-gap: 16px; row-gap: 12px; margin-bottom: 40px; padding: 24px 0; }
.brand-story__timeline-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-surface-variant); }
.brand-story__timeline-dots { border-bottom: 1px dotted rgba(162, 140, 134, 0.35); transform: translateY(-5px); }
.brand-story__timeline-value { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--on-surface); font-variant-numeric: tabular-nums; font-weight: 500; }
.brand-story__cta { align-self: flex-start; padding: 18px 36px; background: transparent; color: var(--on-surface); border: 1px solid rgba(162, 140, 134, 0.28); font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 200ms ease; }
.brand-story__cta:hover { background: var(--surface-container-high); }
@media (max-width: 1024px) {
.brand-story__inner { grid-template-columns: 1fr; }
.brand-story__panel { padding: 40px 32px; }
}
/* ============================================================
BLOCK: warm-capture-band (MANDATORY pre-footer)
============================================================ */
.warm-capture { background: var(--primary-light); color: var(--on-primary-fixed); padding: 96px 32px; position: relative; }
.warm-capture__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.warm-capture__eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--on-primary-fixed); opacity: 0.7; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.warm-capture__eyebrow-dot { width: 6px; height: 6px; background: var(--on-primary-fixed); display: inline-block; }
.warm-capture__title { font-family: var(--font-display); font-size: clamp(44px, 6vw, 88px); font-weight: 700; line-height: 0.94; text-transform: uppercase; color: var(--on-primary-fixed); margin-bottom: 20px; letter-spacing: -0.005em; }
.warm-capture__sub { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--on-primary-fixed); opacity: 0.82; max-width: 460px; }
.warm-capture__form { display: grid; grid-template-columns: 1fr auto; gap: 0; align-items: end; }
.warm-capture__field { display: flex; flex-direction: column; gap: 8px; padding-right: 24px; }
.warm-capture__field-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-primary-fixed); font-weight: 600; opacity: 0.7; }
.warm-capture__field-input { padding: 12px 0; border-bottom: 1px solid rgba(59, 9, 0, 0.4); font-family: var(--font-body); font-size: 18px; color: var(--on-primary-fixed); }
.warm-capture__field-input::placeholder { color: rgba(59, 9, 0, 0.5); }
.warm-capture__cta { padding: 18px 36px; background: transparent; color: var(--on-primary-fixed); border: 1px solid rgba(59, 9, 0, 0.5); font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 200ms ease, color 200ms ease; align-self: end; margin-bottom: 4px; }
.warm-capture__cta:hover { background: var(--on-primary-fixed); color: var(--primary-light); }
.warm-capture__fineprint { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; color: var(--on-primary-fixed); opacity: 0.6; margin-top: 20px; grid-column: 1 / -1; }
@media (max-width: 900px) {
.warm-capture__inner { grid-template-columns: 1fr; gap: 40px; }
.warm-capture { padding: 64px 24px; }
}
/* ============================================================
BLOCK: site-footer
============================================================ */
.site-footer { background: var(--surface-container-lowest); padding: 96px 32px 40px; }
.site-footer__inner { max-width: 1440px; margin: 0 auto; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 64px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__brand-mark { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface); display: inline-flex; align-items: baseline; gap: 6px; }
.site-footer__brand-mark-dot { width: 6px; height: 6px; background: var(--primary); display: inline-block; align-self: center; }
.site-footer__brand-line { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-surface-variant); max-width: 260px; line-height: 1.6; }
.site-footer__brand-tag { font-family: var(--font-body); font-size: 12px; color: var(--outline); letter-spacing: 0.02em; }
.site-footer__col-title { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 600; margin-bottom: 20px; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__link { font-family: var(--font-body); font-size: 14px; color: var(--on-surface); transition: color 200ms ease; }
.site-footer__link:hover { color: var(--primary); }
.site-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; padding: 32px 0 0; align-items: center; border-top: 1px solid rgba(84, 67, 62, 0.35); }
.site-footer__legal { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--outline); }
.site-footer__pay { display: flex; gap: 16px; align-items: center; }
.site-footer__pay-chip { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface-variant); padding: 6px 10px; background: var(--surface-container); font-weight: 600; }
.site-footer__parent { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--outline); text-align: right; }
.site-footer__parent-mark { color: var(--on-surface-variant); }
@media (max-width: 1024px) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__bottom { grid-template-columns: 1fr; text-align: left; }
.site-footer__parent { text-align: left; }
}
/* Real-imagery blend — soften atmosphere-fx when a stage carries a real background-image */
.hero-cinematic__stage[style*="background-image"] .hero-cinematic__stage-fx,
.saber-core-card__stage[style*="background-image"] .saber-core-card__stage-fx,
.product-specimen-card__stage[style*="background-image"] .product-specimen-card__stage-fx,
.brand-story__stage[style*="background-image"] .brand-story__stage-fx { opacity: 0.55; mix-blend-mode: screen; }
.hero-cinematic__stage[style*="background-image"] .hero-cinematic__vignette { background: linear-gradient(90deg, rgba(14, 14, 14, 0.85) 0%, rgba(14, 14, 14, 0.60) 30%, rgba(14, 14, 14, 0.20) 65%, rgba(14, 14, 14, 0.05) 100%); }
</style>
</head>
<body>
<!-- 1 · PROMO BAR -->
<div class="promo-bar">
<span class="promo-bar__text">
<span class="promo-bar__dot">◆</span> Global delivery · 7–10 days
<span class="promo-bar__sep">·</span>
New drops every Friday
<span class="promo-bar__sep">·</span>
30-day money-back guarantee
<span class="promo-bar__sep">·</span>
XenoConfigurator app on iOS & Android
</span>
</div>
<!-- 2 · PRIMARY NAV -->
<nav class="primary-nav">
<div class="primary-nav__inner">
<a href="#" class="primary-nav__brand">
Artsabers<span class="primary-nav__brand-mark"></span>
</a>
<div class="primary-nav__menu">
<a href="#" class="primary-nav__link">Lightsabers</a>
<a href="#" class="primary-nav__link">Cosplay Helmets</a>
<a href="#" class="primary-nav__link">Parts & Accessories</a>
<a href="#" class="primary-nav__link">Offers</a>
<a href="#" class="primary-nav__link">Journal</a>
</div>
<div class="primary-nav__utility">
<span class="primary-nav__loc-indicator">Shipping · US $</span>
<a href="#" class="primary-nav__icon">Search</a>
<a href="#" class="primary-nav__icon">Account</a>
<a href="#" class="primary-nav__icon">Cart <span class="primary-nav__cart-count">02</span></a>
</div>
</div>
</nav>
<!-- 3 · HERO — CINEMATIC KEY ART -->
<section class="hero-cinematic">
<div class="hero-cinematic__stage" aria-hidden="false" style="background-image: url(https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg); background-size: cover; background-position: center 30%;">
<div class="hero-cinematic__stage-fx" aria-hidden="true"></div>
<div class="hero-cinematic__vignette" aria-hidden="true"></div>
<span class="hero-cinematic__stage-label">Plate 01 / Hilt Reference</span>
<div class="hero-cinematic__corner hero-cinematic__corner--tl" aria-hidden="true"></div>
<div class="hero-cinematic__corner hero-cinematic__corner--tr" aria-hidden="true"></div>
<div class="hero-cinematic__corner hero-cinematic__corner--bl" aria-hidden="true"></div>
<div class="hero-cinematic__corner hero-cinematic__corner--br" aria-hidden="true"></div>
<div class="hero-cinematic__callout hero-cinematic__callout--a">Neopixel emitter</div>
<div class="hero-cinematic__callout hero-cinematic__callout--b">Recessed activation switch</div>
</div>
<div class="hero-cinematic__blueprint" aria-hidden="true"></div>
<div class="hero-cinematic__bloom" aria-hidden="true"></div>
<div class="hero-cinematic__inner">
<div class="hero-cinematic__copy">
<div class="hero-cinematic__meta">
<span class="hero-cinematic__meta-dot"></span>
<span>ARTSABERS · Est. Latvia 2020 · Series MMXXVI · No. 01</span>
</div>
<h1 class="hero-cinematic__title">
Every saber.<br>
Every core.<br>
<span class="hero-cinematic__title-accent">Every duelling grade.</span>
</h1>
<p class="hero-cinematic__sub">
Factory direct. Global. In your hands in 7–10 days. Hundreds of hilts across five Saber Core tiers, backed by real customer service — not the factory-direct silence you know from the last shop.
</p>
<div class="hero-cinematic__ctas">
<a href="#" class="hero-cinematic__cta-primary">Browse the catalogue</a>
<a href="#" class="hero-cinematic__cta-ghost">Configure a build →</a>
</div>
</div>
</div>
<div class="hero-cinematic__telemetry">
<span class="hero-cinematic__telemetry-label">Series</span>
<span class="hero-cinematic__telemetry-dots"></span>
<span class="hero-cinematic__telemetry-value">STK-SE 03</span>
<span class="hero-cinematic__telemetry-label">Core</span>
<span class="hero-cinematic__telemetry-dots"></span>
<span class="hero-cinematic__telemetry-value">Xenopixel V3</span>
<span class="hero-cinematic__telemetry-label">Blade</span>
<span class="hero-cinematic__telemetry-dots"></span>
<span class="hero-cinematic__telemetry-value">92cm · Heavy</span>
</div>
</section>
<!-- 4 · HUD TRUST BAR -->
<section class="hud-trust-bar">
<div class="hud-trust-bar__inner">
<div class="hud-trust-bar__item">
<div class="hud-trust-bar__value">7–10 <span class="hud-trust-bar__dot">·</span> days</div>
<div class="hud-trust-bar__label">Global delivery</div>
</div>
<div class="hud-trust-bar__item">
<div class="hud-trust-bar__value">24 <span class="hud-trust-bar__dot">·</span> hour</div>
<div class="hud-trust-bar__label">Named-SPOC response</div>
</div>
<div class="hud-trust-bar__item">
<div class="hud-trust-bar__value">1,100 <span class="hud-trust-bar__dot">·</span> catalogue</div>
<div class="hud-trust-bar__label">Sabers, cores & grades</div>
</div>
<div class="hud-trust-bar__item">
<div class="hud-trust-bar__value">30 <span class="hud-trust-bar__dot">·</span> day</div>
<div class="hud-trust-bar__label">Money-back guarantee</div>
</div>
</div>
</section>
<!-- 5 · CHOOSE YOUR SABER CORE — SPEC HOLOGRAM -->
<section style="background: var(--surface);">
<header class="section-header">
<div>
<div class="section-header__eyebrow">
<span class="section-header__eyebrow-index">02</span>
<span>Choose your Saber Core</span>
</div>
<h2 class="section-header__title">
Four tiers.<br>One archive.
</h2>
</div>
<div class="section-header__aside">
<span class="section-header__aside-label">Tier ladder</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">S-RGB → Proffie 2.2</span>
<span class="section-header__aside-label">Bluetooth stack</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Standard from S-RGB</span>
<span class="section-header__aside-label">Duelling grades</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Light · Heavy</span>
</div>
</header>
<div class="saber-core-grid">
<div class="saber-core-card">
<div class="saber-core-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hammer-Double-Bladed-Lightsaber-5.jpg); background-size: cover; background-position: center;">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 01</span>
</div>
<div class="saber-core-card__tier-badge">
<span class="saber-core-card__tier-badge-num">01</span>
<span>Entry archive tier</span>
</div>
<h3 class="saber-core-card__title">S-RGB</h3>
<p class="saber-core-card__price"><span class="saber-core-card__price-from">From</span> $89.00</p>
<div class="saber-core-card__specs">
<span class="saber-core-card__spec-label">Blade</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Baselit</span>
<span class="saber-core-card__spec-label">Colours</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Infinite RGB</span>
<span class="saber-core-card__spec-label">Sound fonts</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">12</span>
<span class="saber-core-card__spec-label">Bluetooth</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Standard</span>
</div>
<a href="#" class="saber-core-card__cta"><span>Read spec sheet</span><span>→</span></a>
</div>
<div class="saber-core-card">
<div class="saber-core-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Black-Hela-Lightsaber-4.jpg); background-size: cover; background-position: center;">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 02</span>
</div>
<div class="saber-core-card__tier-badge">
<span class="saber-core-card__tier-badge-num">02</span>
<span>Enthusiast tier</span>
</div>
<h3 class="saber-core-card__title">RGB-X</h3>
<p class="saber-core-card__price"><span class="saber-core-card__price-from">From</span> $149.00</p>
<div class="saber-core-card__specs">
<span class="saber-core-card__spec-label">Blade</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Baselit</span>
<span class="saber-core-card__spec-label">Colours</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Infinite RGB</span>
<span class="saber-core-card__spec-label">Sound fonts</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">24</span>
<span class="saber-core-card__spec-label">Bluetooth</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Standard</span>
</div>
<a href="#" class="saber-core-card__cta"><span>Read spec sheet</span><span>→</span></a>
</div>
<div class="saber-core-card">
<div class="saber-core-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-V2-Lightsaber-5.jpg); background-size: cover; background-position: center;">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 03</span>
</div>
<div class="saber-core-card__tier-badge">
<span class="saber-core-card__tier-badge-num">03</span>
<span>Duelist tier</span>
</div>
<h3 class="saber-core-card__title">Xenopixel V3</h3>
<p class="saber-core-card__price"><span class="saber-core-card__price-from">From</span> $299.00</p>
<div class="saber-core-card__specs">
<span class="saber-core-card__spec-label">Blade</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Pixel</span>
<span class="saber-core-card__spec-label">Effects</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Blast · Lockup</span>
<span class="saber-core-card__spec-label">Sound fonts</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">34</span>
<span class="saber-core-card__spec-label">Bluetooth</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Standard</span>
</div>
<a href="#" class="saber-core-card__cta"><span>Read spec sheet</span><span>→</span></a>
</div>
<div class="saber-core-card">
<div class="saber-core-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Mando-Black-Lightsaber-3.jpg); background-size: cover; background-position: center;">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 04</span>
</div>
<div class="saber-core-card__tier-badge">
<span class="saber-core-card__tier-badge-num">04</span>
<span>Programmer tier</span>
</div>
<h3 class="saber-core-card__title">Proffie 2.2</h3>
<p class="saber-core-card__price"><span class="saber-core-card__price-from">From</span> $499.00</p>
<div class="saber-core-card__specs">
<span class="saber-core-card__spec-label">Blade</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Pixel</span>
<span class="saber-core-card__spec-label">Programmable</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Full stack</span>
<span class="saber-core-card__spec-label">Sound fonts</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Unlimited</span>
<span class="saber-core-card__spec-label">Bluetooth</span>
<span class="saber-core-card__spec-dots"></span>
<span class="saber-core-card__spec-value">Standard</span>
</div>
<a href="#" class="saber-core-card__cta"><span>Read spec sheet</span><span>→</span></a>
</div>
</div>
</section>
<!-- 6 · FAN FAVOURITES — SPECIMEN SHOWCASE -->
<section style="background: var(--surface-container-low);">
<header class="section-header">
<div>
<div class="section-header__eyebrow">
<span class="section-header__eyebrow-index">03</span>
<span>Fan favourites · Q3 2026</span>
</div>
<h2 class="section-header__title">
Three hilts,<br>on the workbench.
</h2>
</div>
<div class="section-header__aside">
<span class="section-header__aside-label">Rotation</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Weekly · Fridays</span>
<span class="section-header__aside-label">Curator</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Duelling desk</span>
<span class="section-header__aside-label">Filter</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Sold + reviewed</span>
</div>
</header>
<div class="product-specimen-grid">
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/08/Anakin-Skywalker-EP3-1.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 07 / Duelling</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">Xenopixel V3</span>
<span>· Heavy duelling</span>
</div>
<h3 class="product-specimen-card__title">Anakin Skywalker — EP3 Duelling Grade</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$459.99</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> 4.9 · 218
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Length</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">28cm hilt</span>
<span class="product-specimen-card__spec-label">Blade</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">82cm pixel</span>
<span class="product-specimen-card__spec-label">Illumination</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Fast LED</span>
<span class="product-specimen-card__spec-label">Sound</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Smooth swing</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Luke-Skywalker-ROTJ-Weathered-Lightsaber-3.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 08 / Collector</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">Proffie 2.2</span>
<span>· 3-core available</span>
</div>
<h3 class="product-specimen-card__title">Luke Skywalker ROTJ — Weathered</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$419.99</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> 5.0 · 94
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Length</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">31cm hilt</span>
<span class="product-specimen-card__spec-label">Blade</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">92cm pixel</span>
<span class="product-specimen-card__spec-label">Illumination</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Neopixel</span>
<span class="product-specimen-card__spec-label">Sound</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">SFX v3.2</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/08/Ordo-V2-Double-Bladed-Lightsaber-4.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 09 / Flagship</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">Xenopixel V3</span>
<span>· Heavy duelling</span>
</div>
<h3 class="product-specimen-card__title">Ordo V2 — Double-Bladed</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$549.99</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> 4.9 · 347
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Length</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">30cm hilt</span>
<span class="product-specimen-card__spec-label">Blade</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">92cm pixel</span>
<span class="product-specimen-card__spec-label">Illumination</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Neopixel</span>
<span class="product-specimen-card__spec-label">Sound</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Reactor hum</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
</div>
</section>
<!-- 7 · SHOP BY FACTION — 3x2 MOVIE POSTER GRID -->
<section class="faction-band">
<header class="section-header">
<div>
<div class="section-header__eyebrow">
<span class="section-header__eyebrow-index">04</span>
<span>Shop by faction</span>
</div>
<h2 class="section-header__title">
Every side<br>of the galaxy.
</h2>
</div>
<div class="section-header__aside">
<span class="section-header__aside-label">Factions</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">06 canonical</span>
<span class="section-header__aside-label">Character replicas</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">~40 named</span>
<span class="section-header__aside-label">Bundles</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Helmet + saber</span>
</div>
</header>
<div class="faction-tile-grid">
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 01</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">64</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: Jedi robed cosplayer three-quarter turned toward camera holding a green pixel blade angled 45° upward, deep charcoal environment, single warm key from behind saber blade creating rim silhouette, cold cyan fill camera-left at 20%. Framing 5:6 vertical portrait, subject centred with tall headroom.</em></p>
<h3 class="faction-tile__label">
Jedi
<span class="faction-tile__label-sub">Order · Light Side · Council-era</span>
</h3>
</a>
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 02</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">78</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: Sith cosplayer in hooded robe crouched facing camera, red pixel blade ignited and pointed downward-forward, ember key light spilling from the blade up onto the face, deep void backdrop with faint smoke. Framing 5:6 vertical portrait, low-angle, dominant hilt occupying lower third.</em></p>
<h3 class="faction-tile__label">
Sith
<span class="faction-tile__label-sub">Order · Dark Side · Rule of two</span>
</h3>
</a>
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 03</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">52</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: Mandalorian cosplayer in full beskar armour with darksaber held horizontally across the chest, ember rim-light on the shoulder pauldrons from upper-right, cool fill from lower-left brings out the visor detail. Framing 5:6 vertical portrait, mid-crop from helmet to waist.</em></p>
<h3 class="faction-tile__label">
Mandalorian
<span class="faction-tile__label-sub">Beskar · Darksaber · Tribe</span>
</h3>
</a>
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 04</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">41</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: Clone-era Jedi General figure back-lit against a slate wall, two curved-hilt sabers ignited (one blue, one green), dust particles suspended in the warm side-light. Framing 5:6 vertical portrait, subject full-body, dramatic action pose.</em></p>
<h3 class="faction-tile__label">
Clone Wars
<span class="faction-tile__label-sub">TCW · Generals · Duelling</span>
</h3>
</a>
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 05</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">86</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: farmboy-Luke cosplayer holding an ANH Skywalker hilt at his hip, sunset amber key from camera-right, extended chrome catches the warm tone. Framing 5:6 vertical portrait, three-quarter turn, mid-thigh crop.</em></p>
<h3 class="faction-tile__label">
Original Trilogy
<span class="faction-tile__label-sub">EP4 · EP5 · EP6</span>
</h3>
</a>
<a href="#" class="faction-tile">
<div class="faction-tile__stage-fx" aria-hidden="true"></div>
<div class="faction-tile__corner faction-tile__corner--tl"></div>
<div class="faction-tile__corner faction-tile__corner--tr"></div>
<div class="faction-tile__corner faction-tile__corner--bl"></div>
<div class="faction-tile__corner faction-tile__corner--br"></div>
<span class="faction-tile__index">Faction 06</span>
<span class="faction-tile__count"><span class="faction-tile__count-num">29</span> · SKUs</span>
<p class="faction-tile__caption"><em>Photograph: post-Rebellion figure in mid-swing with a yellow-blade hilt, cinematic slow-shutter blur on the blade only, sharp on the hands and face, cold ambient light with warm blade-cast reflection on the cheek. Framing 5:6 vertical portrait, upper-body crop, dynamic diagonal composition.</em></p>
<h3 class="faction-tile__label">
New Republic
<span class="faction-tile__label-sub">Post-EP6 · Mando-era</span>
</h3>
</a>
</div>
</section>
<!-- 8 · NEW ARRIVALS -->
<section style="background: var(--surface);">
<header class="section-header">
<div>
<div class="section-header__eyebrow">
<span class="section-header__eyebrow-index">05</span>
<span>New arrivals · Week 27</span>
</div>
<h2 class="section-header__title">
Off the bench,<br>onto the archive.
</h2>
</div>
<div class="section-header__aside">
<span class="section-header__aside-label">Freshly logged</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">03 · this Friday</span>
<span class="section-header__aside-label">First-run stock</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Factory-direct</span>
<span class="section-header__aside-label">Warranty</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">12 months</span>
</div>
</header>
<div class="product-specimen-grid">
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Black-Smasher-Lightsaber-5.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 12 / Exclusive</span>
<span class="product-specimen-card__tag">◆ Newly logged</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">Xenopixel V3</span>
<span>· ARTSABERS Exclusive</span>
</div>
<h3 class="product-specimen-card__title">Black Smasher — First run of 200</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$389.00</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> Pre-launch
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Grip</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Carbon weave</span>
<span class="product-specimen-card__spec-label">Weight</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">1.1 kg</span>
<span class="product-specimen-card__spec-label">Fonts</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">34 · Custom</span>
<span class="product-specimen-card__spec-label">Ship</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">7–10 days</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Gold-Solaris-Lightsaber-5.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 13 / Character</span>
<span class="product-specimen-card__tag">◆ Newly logged</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">Proffie 2.2</span>
<span>· Heavy duelling</span>
</div>
<h3 class="product-specimen-card__title">Gold Solaris — Duelling Grade</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$524.00</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> Pre-launch
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Grip</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Machined alloy</span>
<span class="product-specimen-card__spec-label">Weight</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">1.3 kg</span>
<span class="product-specimen-card__spec-label">Blade</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">92cm pixel</span>
<span class="product-specimen-card__spec-label">Ship</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">7–10 days</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
<article class="product-specimen-card">
<div class="product-specimen-card__stage" style="background-image: url(https://nerdworks.uk/wp-content/uploads/2025/09/Red-Tai-Ji-Lightsaber-4.jpg); background-size: cover; background-position: center;">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 14 / High Republic</span>
<span class="product-specimen-card__tag">◆ Newly logged</span>
</div>
<div class="product-specimen-card__body">
<div class="product-specimen-card__eyebrow">
<span class="product-specimen-card__eyebrow-core">RGB-X</span>
<span>· Light duelling</span>
</div>
<h3 class="product-specimen-card__title">Red Tai Ji — High Republic era</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$219.00</span>
<span class="product-specimen-card__rating">
<span class="product-specimen-card__rating-star">★★★★★</span> Pre-launch
</span>
</div>
<div class="product-specimen-card__specs">
<span class="product-specimen-card__spec-label">Grip</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">Etched brass</span>
<span class="product-specimen-card__spec-label">Weight</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">0.9 kg</span>
<span class="product-specimen-card__spec-label">Fonts</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">24</span>
<span class="product-specimen-card__spec-label">Ship</span>
<span class="product-specimen-card__spec-dots"></span>
<span class="product-specimen-card__spec-value">7–10 days</span>
</div>
<a href="#" class="product-specimen-card__cta"><span>View archive record</span><span>→</span></a>
</div>
</article>
</div>
</section>
<!-- 9 · MISSION CONTROL — Factory-direct + Real customer service -->
<section class="mission-control">
<div class="mission-control__inner">
<div class="mission-control__header">
<div>
<div class="mission-control__eyebrow">
<span class="mission-control__eyebrow-index">06</span>
<span>Factory floor · Response desk</span>
</div>
<h2 class="mission-control__section-title">Two rooms.<br>One promise.</h2>
</div>
<p class="mission-control__lead">
We build direct with our partner factory and answer directly to you. No dropship silence after the invoice — a real human, named, replies within 24 hours whether you're picking a Core or chasing a fault.
</p>
</div>
<div class="mission-control__panels">
<div class="mission-control__panel">
<div class="mission-control__panel-stage">
<div class="mission-control__panel-stage-fx" aria-hidden="true"></div>
<span class="mission-control__panel-stage-label">Room 01 / Factory</span>
<p class="mission-control__panel-stage-caption"><em>Photograph: partner-factory bench in dark blueish-grey environment, technician's gloved hands mid-assembly on a hilt fixture, ember rim-light from the workshop lamp above at 45°, cold specular kicker on the machinist's magnifying visor. Framing 4:3 landscape, over-shoulder composition.</em></p>
</div>
<div class="mission-control__panel-body">
<div class="mission-control__panel-eyebrow">
<span class="mission-control__panel-eyebrow-dot"></span>
<span>Origin · Factory direct</span>
</div>
<h3 class="mission-control__panel-title">Factory direct.<br>No middle chain.</h3>
<p class="mission-control__panel-copy">
Every saber ships directly from our partner factory in 7–10 days. We don't warehouse in the US — that's how we carry a broader catalogue than the shops that do, at prices that don't include a third markup.
</p>
<div class="mission-control__panel-hud">
<div>
<div class="mission-control__panel-hud-label">Ship window</div>
<div class="mission-control__panel-hud-value">7 – 10 days</div>
</div>
<div>
<div class="mission-control__panel-hud-label">Origin</div>
<div class="mission-control__panel-hud-value">Direct build</div>
</div>
<div>
<div class="mission-control__panel-hud-label">Warranty</div>
<div class="mission-control__panel-hud-value">12 months</div>
</div>
</div>
</div>
</div>
<div class="mission-control__panel">
<div class="mission-control__panel-stage">
<div class="mission-control__panel-stage-fx" aria-hidden="true"></div>
<span class="mission-control__panel-stage-label">Room 02 / Response</span>
<p class="mission-control__panel-stage-caption"><em>Photograph: customer-service operator at a dark walnut desk with a headset on, side-profile turned three-quarters toward camera, warm desk-lamp key from lower-left casting glow across the face and paperwork, cold fill from a laptop screen. Framing 4:3 landscape, mid-torso crop, deep negative-space right.</em></p>
</div>
<div class="mission-control__panel-body">
<div class="mission-control__panel-eyebrow">
<span class="mission-control__panel-eyebrow-dot"></span>
<span>Support · Real people</span>
</div>
<h3 class="mission-control__panel-title">Real customer service.<br>Named point of contact.</h3>
<p class="mission-control__panel-copy">
24-hour initial response. One human, named, on your order from purchase to arrival. If something goes wrong — because sometimes it does — we're the shop that's still here when you send the message.
</p>
<div class="mission-control__panel-hud">
<div>
<div class="mission-control__panel-hud-label">Response</div>
<div class="mission-control__panel-hud-value">24 hour</div>
</div>
<div>
<div class="mission-control__panel-hud-label">Support</div>
<div class="mission-control__panel-hud-value">Named SPOC</div>
</div>
<div>
<div class="mission-control__panel-hud-label">Guarantee</div>
<div class="mission-control__panel-hud-value">30-day back</div>
</div>
</div>
</div>
</div>
</div>
<div class="mission-control__cta-row">
<p class="mission-control__cta-copy">
<span class="mission-control__cta-copy-strong">Read our full delivery & support commitment.</span> No small print, no dropship excuses — the whole promise on one page.
</p>
<a href="#" class="mission-control__cta-ghost">Read our promise →</a>
</div>
</div>
</section>
<!-- 10 · REVIEWS — HULL-PLATE TESTIMONIALS -->
<section class="testimonial-band">
<header class="section-header">
<div>
<div class="section-header__eyebrow">
<span class="section-header__eyebrow-index">07</span>
<span>Operator feedback</span>
</div>
<h2 class="section-header__title">
Read the wear<br>marks first.
</h2>
</div>
<div class="section-header__aside">
<span class="section-header__aside-label">Verified reviews</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">1,842</span>
<span class="section-header__aside-label">Average</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">4.87 / 5.00</span>
<span class="section-header__aside-label">Source</span>
<span class="section-header__aside-dots"></span>
<span class="section-header__aside-value">Post-arrival forms</span>
</div>
</header>
<div class="testimonial-grid">
<article class="testimonial-card">
<div class="testimonial-card__rating">
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__rating-value">5.0 · verified</span>
</div>
<div class="testimonial-card__mark">
<span class="testimonial-card__mark-dot"></span>
<span>Excellent</span>
</div>
<p class="testimonial-card__quote">
“First factory-direct shop I've bought from where someone actually replied. Hilt arrived on day nine, exactly as photographed, and the Xenopixel V3 config was already burned to my saved font. Nothing dropped in the box, nothing missing from the message chain.”
</p>
<div class="testimonial-card__meta">
<span class="testimonial-card__meta-label">Reviewer</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Marcus H.</span>
<span class="testimonial-card__meta-label">Order</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Anakin EP3</span>
<span class="testimonial-card__meta-label">Persona</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Duelist · CA</span>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-card__rating">
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__rating-value">5.0 · verified</span>
</div>
<div class="testimonial-card__mark">
<span class="testimonial-card__mark-dot"></span>
<span>Excellent</span>
</div>
<p class="testimonial-card__quote">
“I bought the Luke ROTJ Weathered for a con build and cracked the emitter cage two days after arrival. Emailed at 11pm expecting the usual dropship radio-silence — reply from Sam by 8am next day, replacement out on the same run. That's what changed my mind.”
</p>
<div class="testimonial-card__meta">
<span class="testimonial-card__meta-label">Reviewer</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Priya R.</span>
<span class="testimonial-card__meta-label">Order</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Luke ROTJ</span>
<span class="testimonial-card__meta-label">Persona</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Cosplayer · AU</span>
</div>
</article>
<article class="testimonial-card">
<div class="testimonial-card__rating">
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__star"></span>
<span class="testimonial-card__rating-value">5.0 · verified</span>
</div>
<div class="testimonial-card__mark">
<span class="testimonial-card__mark-dot"></span>
<span>Excellent</span>
</div>
<p class="testimonial-card__quote">
“Number thirty-eight in the collection and the Ordo V2 is the one my friends ask me to light up. Ordered on a Sunday, arrived nine days later in the US, packaging was proper, not a scratch on the machined ribbing. Money-back window came and went — not needed.”
</p>
<div class="testimonial-card__meta">
<span class="testimonial-card__meta-label">Reviewer</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Josh K.</span>
<span class="testimonial-card__meta-label">Order</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Ordo V2</span>
<span class="testimonial-card__meta-label">Persona</span>
<span class="testimonial-card__meta-dots"></span>
<span class="testimonial-card__meta-value">Collector · US</span>
</div>
</article>
</div>
</section>
<!-- 11 · BRAND STORY -->
<section class="brand-story">
<div class="brand-story__inner">
<div class="brand-story__stage" style="background-image: url(https://artsabers.com/wp-content/uploads/sites/10/2026/07/70f87cc29f23055e9700f4ab529a38a6.jpg); background-size: cover; background-position: center;">
<div class="brand-story__stage-fx" aria-hidden="true"></div>
<span class="brand-story__stage-label">Field 01 / Origin</span>
</div>
<div class="brand-story__panel">
<div class="brand-story__eyebrow">
<span class="brand-story__eyebrow-index">08</span>
<span>The archive · Origin</span>
</div>
<h2 class="brand-story__title">
From factory floor<br>to your door.
</h2>
<p class="brand-story__body">
Founded in <strong>Latvia, 2020</strong> by a fan who was tired of shops that took the payment and vanished. Now part of Nerdworks. We carry every replica saber a fan could want — every character, every Saber Core, every duelling grade — and back it with the customer service most factory-direct shops won't give.
</p>
<div class="brand-story__timeline">
<span class="brand-story__timeline-label">Founded</span>
<span class="brand-story__timeline-dots"></span>
<span class="brand-story__timeline-value">Riga · 2020</span>
<span class="brand-story__timeline-label">Acquired</span>
<span class="brand-story__timeline-dots"></span>
<span class="brand-story__timeline-value">Nerdworks · 2024</span>
<span class="brand-story__timeline-label">Catalogue</span>
<span class="brand-story__timeline-dots"></span>
<span class="brand-story__timeline-value">1,100 SKUs</span>
<span class="brand-story__timeline-label">Territory</span>
<span class="brand-story__timeline-dots"></span>
<span class="brand-story__timeline-value">US · CA · AU · NZ</span>
</div>
<a href="#" class="brand-story__cta">Read our story →</a>
</div>
</div>
</section>
<!-- 12 · WARM CAPTURE BAND -->
<section class="warm-capture">
<div class="warm-capture__inner">
<div>
<div class="warm-capture__eyebrow">
<span class="warm-capture__eyebrow-dot"></span>
<span>Comms channel · 09</span>
</div>
<h2 class="warm-capture__title">
Join the comms.
</h2>
<p class="warm-capture__sub">
Ten percent off your first saber, plus early access to Friday drops and the ARTSABERS Exclusive first-run notices. Named-SPOC service starts the moment you subscribe.
</p>
</div>
<form class="warm-capture__form" onsubmit="return false;">
<div class="warm-capture__field">
<label for="capture-email" class="warm-capture__field-label">Frequency · your email</label>
<input id="capture-email" type="email" class="warm-capture__field-input" placeholder="operator@your-domain.com">
</div>
<button class="warm-capture__cta">Open channel →</button>
<p class="warm-capture__fineprint">We won't spam the archive. One drop-notice per Friday, unsubscribe in one click, we don't share the list.</p>
</form>
</div>
</section>
<!-- 13 · FOOTER -->
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__top">
<div class="site-footer__brand">
<a href="#" class="site-footer__brand-mark">
Artsabers<span class="site-footer__brand-mark-dot"></span>
</a>
<p class="site-footer__brand-line">
From factory floor to your door.<br>Hundreds of sabers. One trusted retailer.
</p>
<span class="site-footer__brand-tag">A Nerdworks brand · Est. Riga 2020</span>
</div>
<div>
<div class="site-footer__col-title">Shop</div>
<div class="site-footer__links">
<a href="#" class="site-footer__link">Lightsabers</a>
<a href="#" class="site-footer__link">Cosplay Helmets</a>
<a href="#" class="site-footer__link">Parts & Accessories</a>
<a href="#" class="site-footer__link">Bundles</a>
<a href="#" class="site-footer__link">Offers & Deals</a>
<a href="#" class="site-footer__link">Under $100</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Support</div>
<div class="site-footer__links">
<a href="#" class="site-footer__link">Delivery & timing</a>
<a href="#" class="site-footer__link">Returns & guarantee</a>
<a href="#" class="site-footer__link">Contact your SPOC</a>
<a href="#" class="site-footer__link">XenoConfigurator app</a>
<a href="#" class="site-footer__link">Duelling grade guide</a>
<a href="#" class="site-footer__link">Care & maintenance</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Company</div>
<div class="site-footer__links">
<a href="#" class="site-footer__link">Our story</a>
<a href="#" class="site-footer__link">The promise</a>
<a href="#" class="site-footer__link">ARTSABERS Exclusive</a>
<a href="#" class="site-footer__link">Sister brand · Saber 66</a>
<a href="#" class="site-footer__link">Wholesale</a>
<a href="#" class="site-footer__link">Press</a>
</div>
</div>
<div>
<div class="site-footer__col-title">Connect</div>
<div class="site-footer__links">
<a href="#" class="site-footer__link">Instagram</a>
<a href="#" class="site-footer__link">TikTok</a>
<a href="#" class="site-footer__link">YouTube</a>
<a href="#" class="site-footer__link">Facebook</a>
<a href="#" class="site-footer__link">Threads</a>
<a href="#" class="site-footer__link">The Journal</a>
</div>
</div>
</div>
<div class="site-footer__bottom">
<div class="site-footer__legal">© 2026 ARTSABERS · Not affiliated with Lucasfilm Ltd</div>
<div class="site-footer__pay">
<span class="site-footer__pay-chip">Visa</span>
<span class="site-footer__pay-chip">Mastercard</span>
<span class="site-footer__pay-chip">Amex</span>
<span class="site-footer__pay-chip">Apple Pay</span>
<span class="site-footer__pay-chip">Stripe</span>
</div>
<div class="site-footer__parent">
Operated by <span class="site-footer__parent-mark">Nerdworks Ltd</span>
</div>
</div>
</div>
</footer>
</body>
</html>