<!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; }
}
</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">
<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>
<p class="hero-cinematic__stage-caption">
<em>Photograph: Starkiller SE hilt suspended in vertical composition against a seamless #0E0E0E void, tilted 12° right. Warm key light upper-right at 45° (500W tungsten with amber CTO gel); cold cyan-tinted kicker skimming the pommel from lower-left at ~15% intensity for chrome bite. Ember rim-light bleeds through the machined activation-switch seam. Framing: 4:5 vertical, hilt occupies the central column, 15% negative space top and bottom. Shot at f/11 for edge-to-edge grip texture.</em>
</p>
</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">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 01</span>
<p class="saber-core-card__stage-caption"><em>Photograph: baselit S-RGB hilt on stone-grey seamless, single warm key upper-left at 30°, chrome activation switch catches specular. Framing 4:3, hilt centred, blade retracted.</em></p>
</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">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 02</span>
<p class="saber-core-card__stage-caption"><em>Photograph: RGB-X hilt with brushed grip texture, seamless charcoal backdrop, single tungsten key upper-right, cold rim from behind hilt cap. Framing 4:3, hilt tilted 20° right.</em></p>
</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">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 03</span>
<p class="saber-core-card__stage-caption"><em>Photograph: Xenopixel V3 hilt on obsidian seamless, ember rim-light bleeding through the emitter throat from behind, cold cyan skimming the pommel. Framing 4:3, hilt centred, subtle blade glow just visible.</em></p>
</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">
<div class="saber-core-card__stage-fx" aria-hidden="true"></div>
<span class="saber-core-card__stage-label">Core 04</span>
<p class="saber-core-card__stage-caption"><em>Photograph: Proffie 2.2 hilt raised on machined stand against void, dramatic single warm key from far left at 60°, deep shadow right, chrome catches faint ember bounce. Framing 4:3, hilt centred with headroom.</em></p>
</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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 07 / Duelling</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: paired Ahsoka Tano CW-era duelling hilts crossed on charcoal linen, ember rim-light from lower-right skimming the curved emitter guards, cold key from upper-left at 45°. Framing 5:4 landscape, hilts centred with 12% headroom, tight aperture for grip-groove detail.</em></p>
</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">Ahsoka Tano — Clone Wars Duelling Pair</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$534.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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 08 / Collector</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: Starkiller SE hilt suspended above a distressed steel plate, ember panel-seam glow through the activation cage, warm key from upper-right at 30°, cold cyan kicker from behind emitter. Framing 5:4 landscape, hilt tilted 25° right, chrome catching orange rim, deep shadows both sides.</em></p>
</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">Starkiller SE — ARTSABERS Exclusive</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$449.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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 09 / Flagship</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: Darth Vader EP6 ROTJ hilt on jet-black felt, dramatic single warm key from directly above at 90° casting a hard shadow beneath, dim ember bloom from the activation switch reads as reactor-heat. Framing 5:4 landscape, hilt vertical-centre, pommel toward camera, tight enough to read the machined ribbing.</em></p>
</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">Darth Vader — EP6 Return of the Jedi</h3>
<div class="product-specimen-card__meta-row">
<span class="product-specimen-card__price">$619.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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 12 / Exclusive</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: Carbon Strike ARTSABERS Exclusive hilt in raw carbon-fibre grip, laid at a 30° diagonal on brushed steel. Warm side-light rakes across the fibre weave from lower-right, ember hot-spot only at the emitter throat. Framing 5:4 landscape, hilt fills 70% of frame.</em></p>
<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">Carbon Strike — 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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 13 / Character</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: Dark Hunter hilt lying flat on a coal-black granite slab, warm key at 20° from upper-right creating raking shadow across the machined ribs, cold rim from behind the pommel. Framing 5:4 landscape, hilt horizontal, tight top-down composition.</em></p>
<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">Dark Hunter — Bounty-hunter series</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">
<div class="product-specimen-card__stage-fx" aria-hidden="true"></div>
<span class="product-specimen-card__stage-label">Spec 14 / High Republic</span>
<p class="product-specimen-card__stage-caption"><em>Photograph: Elzar Mann High-Republic-era hilt held upright on a bronze-toned stand, single warm tungsten key from upper-left, cool blue fill from below reads as reflected blade-light. Framing 5:4 landscape, hilt vertically centred, subject fills middle third of frame.</em></p>
<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">Elzar Mann — 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">Ahsoka Pair</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 Starkiller SE 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">Starkiller SE</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 Vader ROTJ 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">Vader ROTJ</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">
<div class="brand-story__stage-fx" aria-hidden="true"></div>
<span class="brand-story__stage-label">Field 01 / Origin</span>
<p class="brand-story__stage-caption"><em>Photograph: founder in the Riga workshop, mid-30s, wearing a dark heavy work-shirt, seated at a machinist's bench with a partially-assembled hilt in gloved hands. Single overhead task-lamp warm key at 90°, cold ambient fill from the wall behind, dust particles catching light. Framing 3:4 vertical, three-quarter turn, deep-shadowed background reads as workshop.</em></p>
</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>