<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ARTSABERS — Every saber. Every core. Every duelling grade.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
/* Grounds — the ONE-GREY discipline */
--hull:#1E1E24;
--void:#0A0A0E;
--hull-plate:#26262E;
--hull-hover:#2A2A32;
--chrome-dim:#3A3A42;
/* Ember (light, scarce) */
--ember:#F26B36;
--ember-bright:#FF8850;
--ember-deep:#C04A20;
/* Text */
--text:#E8E8EE;
--neutral:#B0B0B8;
--steel-blue:#7A94D9;
/* Functional */
--success:#7FC97F;
--error:#BA1A1A;
/* Type */
--font-display:'Space Grotesk',system-ui,sans-serif;
--font-body:'Manrope',system-ui,sans-serif;
--size-display:128px;
--size-h1:84px;
--size-h2:60px;
--size-h3:40px;
--size-h4:24px;
--size-lead:20px;
--size-body:16px;
--size-small:14px;
--size-micro:11px;
--track-wider:0.14em;
--track-wide:0.08em;
/* Radii */
--radius-sm:4px;
--radius-md:6px;
--radius-lg:8px;
/* Shadows (heavy, cinematic) */
--shadow-plate:0 24px 64px -12px rgba(0,0,0,0.8),0 8px 16px -4px rgba(0,0,0,0.6);
--shadow-plate-hover:0 32px 80px -12px rgba(0,0,0,0.85),0 12px 24px -4px rgba(0,0,0,0.7);
/* Glow */
--glow-ember:0 0 0 1px rgba(242,107,54,0.3),0 8px 32px -4px rgba(242,107,54,0.45),0 0 48px -8px rgba(242,107,54,0.35);
--glow-ember-hot:0 -1px 0 0 var(--ember-bright),0 0 0 1px rgba(242,107,54,0.5),0 12px 40px -4px rgba(242,107,54,0.6),0 0 64px -8px rgba(255,136,80,0.5);
--seam-ember:linear-gradient(to right,transparent 0%,rgba(242,107,54,0) 8%,rgba(242,107,54,0.8) 50%,rgba(242,107,54,0) 92%,transparent 100%);
/* Layout */
--gutter:24px;
--frame:clamp(24px,4vw,72px);
--max:1440px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
font-size:var(--size-body);
line-height:1.6;
color:var(--text);
background:var(--hull);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
/* ---------- Shared utility marks ---------- */
.hud{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.eyebrow{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--ember);
}
.display{
font-family:var(--font-display);
font-weight:700;
text-transform:uppercase;
letter-spacing:var(--track-wider);
line-height:0.95;
color:var(--text);
}
.section-title{
font-family:var(--font-display);
font-weight:700;
font-size:var(--size-h2);
text-transform:uppercase;
letter-spacing:var(--track-wider);
line-height:1;
color:var(--text);
}
.section{
padding:120px var(--frame);
background:var(--hull);
position:relative;
}
.section__inner{max-width:var(--max);margin:0 auto}
.section__head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:32px;
margin-bottom:64px;
flex-wrap:wrap;
}
.section__head-copy{max-width:640px}
.section__head .eyebrow{margin-bottom:16px;display:block}
.section__head-lead{
font-size:var(--size-lead);
color:var(--neutral);
max-width:520px;
margin-top:20px;
}
/* Panel-seam glow — rare device */
.seam{
position:absolute;
left:0;right:0;
height:1px;
background:var(--seam-ember);
pointer-events:none;
}
.seam::after{
content:"";
position:absolute;
left:15%;right:15%;
top:-24px;
height:48px;
background:radial-gradient(ellipse at center,rgba(242,107,54,0.28) 0%,rgba(242,107,54,0) 65%);
filter:blur(6px);
pointer-events:none;
}
.seam--top{top:0}
.seam--bottom{bottom:0}
/* ============================================================
1. PROMO BAR
============================================================ */
.promo{
background:var(--hull);
padding:12px var(--frame);
position:relative;
overflow:hidden;
border-bottom:1px solid transparent;
}
.promo__seam{
position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--seam-ember);
opacity:0.7;
}
.promo__track{
display:flex;
align-items:center;
justify-content:center;
gap:48px;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--neutral);
}
.promo__dot{
width:3px;height:3px;
background:var(--chrome-dim);
border-radius:50%;
}
/* ============================================================
2. NAV
============================================================ */
.nav{
background:var(--hull);
padding:22px var(--frame);
position:sticky;top:0;z-index:50;
border-bottom:1px solid var(--chrome-dim);
backdrop-filter:blur(6px);
}
.nav__inner{
max-width:var(--max);
margin:0 auto;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:48px;
}
.nav__brand{
font-family:var(--font-display);
font-weight:700;
font-size:22px;
letter-spacing:var(--track-wider);
text-transform:uppercase;
color:var(--text);
position:relative;
}
.nav__brand::after{
content:"";
position:absolute;
right:-10px;top:6px;
width:6px;height:6px;
border-radius:50%;
background:var(--ember);
box-shadow:0 0 12px 2px rgba(242,107,54,0.7);
}
.nav__menu{
display:flex;justify-content:center;gap:36px;
}
.nav__menu-item{
font-family:var(--font-display);
font-weight:500;
font-size:13px;
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
position:relative;
padding:6px 0;
transition:color 0.2s;
}
.nav__menu-item:hover{color:var(--ember)}
.nav__menu-item--active::after{
content:"";
position:absolute;
left:0;right:0;bottom:-4px;
height:1px;background:var(--ember);
box-shadow:0 0 8px rgba(242,107,54,0.6);
}
.nav__utility{
display:flex;align-items:center;gap:20px;
}
.nav__icon{
width:20px;height:20px;
color:var(--text);
transition:color 0.2s;
}
.nav__icon:hover{color:var(--ember)}
.nav__cart{
display:flex;align-items:center;gap:8px;
padding:8px 14px;
border:1px solid var(--chrome-dim);
border-radius:var(--radius-sm);
font-family:var(--font-display);
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wide);
color:var(--text);
}
.nav__cart-count{color:var(--ember);font-weight:700}
/* ============================================================
3. HERO — CINEMATIC KEY ART
============================================================ */
.hero{
min-height:100vh;
background:var(--void);
position:relative;
padding:0 var(--frame);
display:flex;align-items:center;
overflow:hidden;
isolation:isolate;
}
/* Deep-space background — subtle starfield + nebula wash */
.hero__space{
position:absolute;inset:0;
background:
radial-gradient(ellipse 800px 600px at 78% 42%,rgba(242,107,54,0.14) 0%,rgba(242,107,54,0) 60%),
radial-gradient(ellipse 1400px 900px at 10% 90%,rgba(122,148,217,0.06) 0%,rgba(122,148,217,0) 55%),
radial-gradient(circle at 20% 30%,rgba(255,255,255,0.5) 0.5px,transparent 1px),
radial-gradient(circle at 65% 60%,rgba(255,255,255,0.4) 0.5px,transparent 1px),
radial-gradient(circle at 82% 15%,rgba(255,255,255,0.6) 0.5px,transparent 1px),
radial-gradient(circle at 45% 78%,rgba(255,255,255,0.3) 0.5px,transparent 1px),
radial-gradient(circle at 12% 62%,rgba(255,255,255,0.5) 0.5px,transparent 1px),
radial-gradient(circle at 92% 88%,rgba(255,255,255,0.4) 0.5px,transparent 1px),
radial-gradient(circle at 35% 12%,rgba(255,255,255,0.5) 0.5px,transparent 1px),
radial-gradient(circle at 55% 40%,rgba(255,255,255,0.35) 0.5px,transparent 1px),
var(--void);
z-index:-1;
}
.hero__inner{
max-width:var(--max);
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
padding:120px 0;
width:100%;
}
.hero__copy{position:relative;z-index:2}
.hero__eyebrow{
display:inline-flex;align-items:center;gap:12px;
margin-bottom:32px;
color:var(--steel-blue);
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
}
.hero__eyebrow::before{
content:"";
width:32px;height:1px;background:var(--ember);
box-shadow:0 0 8px rgba(242,107,54,0.7);
}
.hero__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(56px,8.5vw,128px);
line-height:0.92;
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
margin-bottom:32px;
}
.hero__title-ember{
display:inline;
color:var(--ember);
text-shadow:0 0 40px rgba(242,107,54,0.5);
}
.hero__sub{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-h4);
color:var(--neutral);
margin-bottom:48px;
max-width:520px;
line-height:1.35;
}
.hero__actions{
display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.hero__tagline{
position:absolute;
bottom:120px;left:0;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
display:flex;align-items:center;gap:16px;
}
.hero__tagline::before{
content:"";width:48px;height:1px;background:var(--chrome-dim);
}
.hero__art{
position:relative;
aspect-ratio:4/5;
border-radius:var(--radius-md);
overflow:hidden;
background:linear-gradient(155deg,#161620 0%,#0A0A0E 55%,#161620 100%);
box-shadow:var(--shadow-plate);
}
.hero__art-canvas{
position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 90% at 68% 50%,rgba(242,107,54,0.25) 0%,rgba(242,107,54,0) 60%),
radial-gradient(ellipse 40% 70% at 30% 55%,rgba(122,148,217,0.09) 0%,rgba(122,148,217,0) 60%);
}
/* stylised saber composition */
.hero__saber{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%) rotate(-24deg);
width:16px;height:78%;
background:linear-gradient(180deg,var(--chrome-dim) 0%,#4A4A54 20%,#5C5C68 50%,#4A4A54 80%,var(--chrome-dim) 100%);
border-radius:2px;
box-shadow:0 0 0 1px rgba(0,0,0,0.6);
}
.hero__blade{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-100%) rotate(-24deg);
transform-origin:50% 100%;
width:8px;height:62%;
background:linear-gradient(180deg,rgba(255,255,255,0.95) 0%,var(--ember-bright) 8%,var(--ember) 25%,var(--ember-deep) 90%);
border-radius:4px 4px 0 0;
box-shadow:
0 0 24px 4px rgba(242,107,54,0.7),
0 0 64px 12px rgba(242,107,54,0.4),
0 0 120px 24px rgba(242,107,54,0.25);
}
.hero__hilt-glow{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
width:60px;height:60px;
border-radius:50%;
background:radial-gradient(circle,rgba(242,107,54,0.4) 0%,rgba(242,107,54,0) 65%);
filter:blur(4px);
}
.hero__art-hud{
position:absolute;
left:24px;bottom:24px;right:24px;
display:flex;justify-content:space-between;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.hero__art-hud-dot{
width:6px;height:6px;background:var(--ember);
border-radius:50%;
display:inline-block;
margin-right:8px;
vertical-align:middle;
box-shadow:0 0 8px rgba(242,107,54,0.7);
}
.hero__art-corner{
position:absolute;
width:20px;height:20px;
border:1px solid var(--chrome-dim);
}
.hero__art-corner--tl{top:12px;left:12px;border-right:0;border-bottom:0}
.hero__art-corner--tr{top:12px;right:12px;border-left:0;border-bottom:0}
.hero__art-corner--bl{bottom:12px;left:12px;border-right:0;border-top:0}
.hero__art-corner--br{bottom:12px;right:12px;border-left:0;border-top:0}
/* ============================================================
Buttons — primary + ghost
============================================================ */
.btn{
display:inline-flex;align-items:center;gap:12px;
padding:18px 32px;
font-family:var(--font-display);
font-weight:700;
font-size:14px;
text-transform:uppercase;
letter-spacing:var(--track-wider);
border-radius:var(--radius-md);
transition:all 0.25s ease;
position:relative;
cursor:pointer;
}
.btn--primary{
background:var(--ember);
color:var(--void);
box-shadow:var(--glow-ember);
}
.btn--primary:hover{
background:var(--ember-bright);
box-shadow:var(--glow-ember-hot);
transform:translateY(-1px);
}
.btn--primary::after{
content:"→";
font-size:16px;line-height:1;
}
.btn--ghost{
background:transparent;
color:var(--ember);
border:1px solid var(--ember);
}
.btn--ghost:hover{
box-shadow:var(--glow-ember);
color:var(--ember-bright);
border-color:var(--ember-bright);
}
.btn--ghost::after{
content:"→";
font-size:16px;line-height:1;
}
.btn--sm{padding:12px 20px;font-size:12px}
/* ============================================================
4. TRUST BAR — HUD telemetry
============================================================ */
.trust{
background:var(--hull);
padding:32px var(--frame);
border-top:1px solid var(--chrome-dim);
border-bottom:1px solid var(--chrome-dim);
}
.trust__inner{
max-width:var(--max);margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
}
.trust__cell{
padding:8px 32px;
border-left:1px solid var(--chrome-dim);
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
position:relative;
}
.trust__cell:first-child{border-left:0;padding-left:0}
.trust__cell-dot{
display:inline-block;
width:5px;height:5px;
background:var(--ember);
border-radius:50%;
margin-right:12px;
vertical-align:middle;
box-shadow:0 0 6px rgba(242,107,54,0.65);
}
/* ============================================================
5. CHOOSE YOUR SABER CORE — SPEC HOLOGRAM
============================================================ */
.cores{background:var(--hull);position:relative}
.cores__grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
/* Hull-plate spec card */
.core-card{
background:var(--hull-plate);
border-radius:var(--radius-md);
padding:0;
overflow:hidden;
box-shadow:var(--shadow-plate);
position:relative;
transition:transform 0.35s ease,box-shadow 0.35s ease;
display:flex;flex-direction:column;
}
.core-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 30%,#5A5A62 50%,var(--chrome-dim) 70%,transparent 100%);
}
.core-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-plate-hover),inset 0 0 60px -20px rgba(242,107,54,0.25);
}
.core-card__art{
height:220px;
position:relative;
background:linear-gradient(160deg,#141419 0%,#0F0F14 50%,#1A1A21 100%);
overflow:hidden;
}
.core-card__art-glow{
position:absolute;inset:0;
background:radial-gradient(ellipse 60% 60% at 60% 50%,rgba(242,107,54,0.22) 0%,rgba(242,107,54,0) 55%);
}
.core-card__art-hilt{
position:absolute;
left:14%;top:50%;
transform:translateY(-50%) rotate(-8deg);
width:66%;height:14px;
background:linear-gradient(180deg,#3A3A44 0%,#4E4E58 30%,#5C5C68 50%,#4E4E58 70%,#2E2E36 100%);
border-radius:2px;
box-shadow:0 6px 24px -4px rgba(0,0,0,0.7);
}
.core-card__art-emitter{
position:absolute;
right:14%;top:50%;
transform:translateY(-50%) rotate(-8deg);
width:22px;height:8px;
background:linear-gradient(180deg,rgba(255,255,255,0.9) 0%,var(--ember) 50%,var(--ember-deep) 100%);
border-radius:2px;
box-shadow:0 0 24px 4px rgba(242,107,54,0.6);
}
.core-card__body{
padding:32px 28px 28px;
display:flex;flex-direction:column;flex:1;
}
.core-card__tier{
font-family:var(--font-display);
font-weight:700;
font-size:26px;
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
margin-bottom:6px;
}
.core-card__from{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--neutral);
margin-bottom:4px;
}
.core-card__price{
font-family:var(--font-display);
font-weight:700;
font-size:32px;
color:var(--ember);
margin-bottom:24px;
line-height:1;
}
.core-card__specs{
list-style:none;
border-top:1px solid var(--chrome-dim);
padding-top:20px;
margin-bottom:28px;
display:flex;flex-direction:column;gap:12px;
flex:1;
}
.core-card__spec{
display:flex;justify-content:space-between;gap:12px;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.core-card__spec-val{color:var(--text)}
.core-card__cta{
margin-top:auto;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-display);
font-weight:600;
font-size:12px;
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--ember);
padding:14px 0;
border-top:1px solid var(--chrome-dim);
transition:color 0.2s;
}
.core-card__cta:hover{color:var(--ember-bright)}
.core-card__cta::after{content:"→"}
/* ============================================================
6. FAN FAVOURITES — 3 across
============================================================ */
.favs{background:var(--hull)}
.favs__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.product-card{
background:var(--hull-plate);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-plate);
position:relative;
transition:transform 0.35s ease,box-shadow 0.35s ease;
display:flex;flex-direction:column;
}
.product-card::before{
content:"";
position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 20%,#5A5A62 50%,var(--chrome-dim) 80%,transparent 100%);
}
.product-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-plate-hover),inset 0 0 80px -24px rgba(242,107,54,0.3);
}
.product-card__art{
aspect-ratio:4/3;
position:relative;
background:linear-gradient(155deg,#141419 0%,#0C0C11 60%,#171720 100%);
overflow:hidden;
}
.product-card__art-glow{
position:absolute;inset:0;
background:radial-gradient(ellipse 55% 70% at 60% 55%,rgba(242,107,54,0.28) 0%,rgba(242,107,54,0) 60%);
}
.product-card__art-hilt{
position:absolute;
left:12%;top:50%;
transform:translateY(-50%) rotate(-12deg);
width:76%;height:16px;
background:linear-gradient(180deg,#3A3A44 0%,#4E4E58 30%,#68686E 50%,#4E4E58 70%,#2E2E36 100%);
border-radius:2px;
box-shadow:0 8px 32px -4px rgba(0,0,0,0.7);
}
.product-card__art-blade{
position:absolute;
left:52%;top:50%;
transform:translateY(-50%) rotate(-12deg);
transform-origin:0 50%;
width:40%;height:6px;
background:linear-gradient(90deg,rgba(255,255,255,0.9) 0%,var(--ember-bright) 6%,var(--ember) 25%,var(--ember-deep) 100%);
border-radius:0 3px 3px 0;
box-shadow:
0 0 16px 3px rgba(242,107,54,0.6),
0 0 40px 10px rgba(242,107,54,0.3);
}
.product-card__badge-core{
position:absolute;
top:16px;left:16px;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
padding:6px 10px;
border:1px solid var(--chrome-dim);
background:rgba(10,10,14,0.65);
backdrop-filter:blur(4px);
}
.product-card__badge-new{
position:absolute;
top:16px;right:16px;
font-family:var(--font-display);
font-weight:600;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
display:flex;align-items:center;gap:6px;
}
.product-card__badge-new::before{
content:"";
width:6px;height:6px;
background:var(--ember);
border-radius:50%;
box-shadow:0 0 8px rgba(242,107,54,0.7);
}
.product-card__body{
padding:28px 28px 28px;
display:flex;flex-direction:column;flex:1;
gap:12px;
}
.product-card__hud{
display:flex;justify-content:space-between;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.product-card__title{
font-family:var(--font-display);
font-weight:600;
font-size:22px;
color:var(--text);
line-height:1.15;
text-transform:uppercase;
letter-spacing:0.02em;
}
.product-card__foot{
display:flex;justify-content:space-between;align-items:center;
margin-top:auto;
padding-top:20px;
border-top:1px solid var(--chrome-dim);
}
.product-card__price{
font-family:var(--font-display);
font-weight:700;
font-size:26px;
color:var(--ember);
line-height:1;
}
.product-card__stars{
display:flex;gap:2px;color:var(--ember);
font-size:14px;
}
/* ============================================================
7. SHOP BY CHARACTER — MOVIE POSTER GRID
============================================================ */
.characters{background:var(--hull)}
.characters__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
gap:24px;
}
.char-tile{
aspect-ratio:5/6;
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
background:linear-gradient(160deg,#141419 0%,#0C0C11 100%);
cursor:pointer;
box-shadow:var(--shadow-plate);
transition:transform 0.35s ease;
}
.char-tile__art{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
}
.char-tile__art-glow{
position:absolute;inset:0;
background:radial-gradient(ellipse 60% 90% at 50% 50%,rgba(242,107,54,0.22) 0%,rgba(242,107,54,0) 65%);
opacity:0.9;
}
.char-tile__silhouette{
position:absolute;
left:50%;top:52%;
transform:translate(-50%,-50%);
width:70%;height:65%;
background:linear-gradient(180deg,#1E1E24 0%,#0A0A0E 100%);
clip-path:polygon(40% 0%,60% 0%,66% 22%,72% 55%,68% 90%,55% 100%,45% 100%,32% 90%,28% 55%,34% 22%);
filter:drop-shadow(0 0 24px rgba(242,107,54,0.15));
}
.char-tile__blade{
position:absolute;
left:50%;bottom:14%;
transform:translateX(-50%) rotate(0deg);
width:6px;height:70%;
background:linear-gradient(180deg,rgba(255,255,255,0.95),var(--ember-bright) 10%,var(--ember) 40%,var(--ember-deep) 100%);
border-radius:3px 3px 0 0;
box-shadow:
0 0 20px 4px rgba(242,107,54,0.55),
0 0 56px 12px rgba(242,107,54,0.28);
opacity:0.9;
}
.char-tile:hover{transform:translateY(-4px)}
.char-tile:hover .char-tile__seam{opacity:1}
.char-tile__seam{
position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--seam-ember);
opacity:0;
transition:opacity 0.3s ease;
}
.char-tile__seam::after{
content:"";
position:absolute;
left:10%;right:10%;top:-32px;height:32px;
background:radial-gradient(ellipse at bottom,rgba(242,107,54,0.35) 0%,rgba(242,107,54,0) 70%);
filter:blur(6px);
}
.char-tile__overlay{
position:absolute;
left:0;right:0;bottom:0;
padding:28px 28px 32px;
background:linear-gradient(to top,rgba(10,10,14,0.95) 0%,rgba(10,10,14,0.7) 50%,rgba(10,10,14,0) 100%);
z-index:2;
}
.char-tile__label{
font-family:var(--font-display);
font-weight:700;
font-size:32px;
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
line-height:1;
margin-bottom:8px;
}
.char-tile__count{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
display:flex;align-items:center;gap:10px;
}
.char-tile__count::before{
content:"";
width:20px;height:1px;background:var(--ember);
}
.char-tile__corner{
position:absolute;
width:16px;height:16px;
border:1px solid var(--chrome-dim);
z-index:2;
}
.char-tile__corner--tl{top:14px;left:14px;border-right:0;border-bottom:0}
.char-tile__corner--tr{top:14px;right:14px;border-left:0;border-bottom:0}
/* ============================================================
9. MISSION CONTROL — split-screen dramatic
============================================================ */
.mission{
background:var(--hull);
padding:140px var(--frame);
position:relative;
}
.mission__inner{max-width:var(--max);margin:0 auto}
.mission__head{
text-align:center;
margin-bottom:72px;
max-width:720px;
margin-left:auto;margin-right:auto;
}
.mission__head .eyebrow{margin-bottom:16px;display:block}
.mission__title{
font-family:var(--font-display);
font-weight:700;
font-size:var(--size-h2);
text-transform:uppercase;
letter-spacing:var(--track-wider);
line-height:1;
margin-bottom:20px;
}
.mission__lead{
font-size:var(--size-lead);
color:var(--neutral);
}
.mission__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:32px;
}
.mission__panel{
background:var(--hull-plate);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-plate);
position:relative;
min-height:520px;
display:flex;flex-direction:column;
}
.mission__panel::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 30%,#5A5A62 50%,var(--chrome-dim) 70%,transparent 100%);
}
.mission__panel-art{
height:280px;
position:relative;
background:linear-gradient(160deg,#141419 0%,#0A0A0E 100%);
overflow:hidden;
}
.mission__panel--factory .mission__panel-art{
background:
radial-gradient(ellipse 40% 60% at 22% 60%,rgba(242,107,54,0.35) 0%,rgba(242,107,54,0) 55%),
linear-gradient(160deg,#161620 0%,#080810 100%);
}
.mission__panel--cs .mission__panel-art{
background:
radial-gradient(ellipse 35% 55% at 72% 40%,rgba(242,107,54,0.35) 0%,rgba(242,107,54,0) 55%),
linear-gradient(200deg,#161620 0%,#080810 100%);
}
.mission__panel-art::after{
content:"";position:absolute;left:0;right:0;bottom:0;
height:80px;
background:linear-gradient(to top,var(--hull-plate) 0%,transparent 100%);
}
/* stylised factory silhouette */
.mission__panel-shape{
position:absolute;inset:0;
}
.mission__panel--factory .mission__panel-shape::before{
content:"";
position:absolute;
left:10%;bottom:12%;
width:80%;height:50%;
background:
linear-gradient(180deg,transparent 0%,transparent 30%,#0C0C11 30%,#0C0C11 100%);
clip-path:polygon(0% 100%,0% 60%,12% 60%,12% 40%,24% 40%,24% 55%,36% 55%,36% 30%,48% 30%,48% 55%,60% 55%,60% 45%,72% 45%,72% 60%,84% 60%,84% 50%,100% 50%,100% 100%);
}
.mission__panel--cs .mission__panel-shape::before{
content:"";
position:absolute;
left:35%;bottom:18%;
width:30%;height:50%;
background:linear-gradient(180deg,#1A1A22 0%,#0A0A0E 100%);
border-radius:50% 50% 42% 42%;
box-shadow:0 0 32px 4px rgba(242,107,54,0.15);
}
.mission__panel--cs .mission__panel-shape::after{
content:"";
position:absolute;
left:32%;bottom:56%;
width:36%;height:8%;
background:#1A1A22;
border-radius:8px 8px 2px 2px;
box-shadow:inset 0 -2px 0 var(--chrome-dim);
}
.mission__panel-body{
padding:36px 36px 28px;
flex:1;
display:flex;flex-direction:column;
}
.mission__panel-title{
font-family:var(--font-display);
font-weight:700;
font-size:var(--size-h3);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
line-height:1;
margin-bottom:20px;
}
.mission__panel-title-ember{color:var(--ember)}
.mission__panel-copy{
color:var(--neutral);
font-size:var(--size-body);
max-width:440px;
line-height:1.55;
}
.mission__panel-hud{
margin-top:auto;
padding-top:24px;
border-top:1px solid var(--chrome-dim);
display:flex;flex-wrap:wrap;gap:20px;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.mission__panel-hud-item{display:flex;align-items:center;gap:8px}
.mission__panel-hud-item::before{
content:"";width:5px;height:5px;background:var(--ember);border-radius:50%;
}
.mission__actions{
text-align:center;
margin-top:56px;
}
/* ============================================================
10. REVIEWS
============================================================ */
.reviews{background:var(--hull)}
.reviews__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
.review-card{
background:var(--hull-plate);
border-radius:var(--radius-md);
padding:36px 32px 32px;
box-shadow:var(--shadow-plate);
position:relative;
display:flex;flex-direction:column;
gap:20px;
}
.review-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 30%,#5A5A62 50%,var(--chrome-dim) 70%,transparent 100%);
}
.review-card__stars{
color:var(--ember);
font-size:20px;
letter-spacing:2px;
filter:drop-shadow(0 0 6px rgba(242,107,54,0.3));
}
.review-card__quote{
font-family:var(--font-body);
font-weight:500;
font-size:17px;
color:var(--text);
line-height:1.55;
flex:1;
}
.review-card__quote::before{
content:"\201C";
font-family:var(--font-display);
color:var(--ember);
font-size:32px;
vertical-align:-8px;
margin-right:4px;
opacity:0.7;
}
.review-card__foot{
padding-top:20px;
border-top:1px solid var(--chrome-dim);
display:flex;justify-content:space-between;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.review-card__name{color:var(--text);font-weight:600}
/* ============================================================
11. BRAND STORY
============================================================ */
.story{background:var(--hull);position:relative}
.story__grid{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:0;
align-items:stretch;
position:relative;
}
.story__seam{
position:absolute;
top:0;bottom:0;
left:calc(1.1 / 2.1 * 100%);
width:1px;
background:linear-gradient(to bottom,transparent 0%,transparent 15%,var(--ember) 50%,transparent 85%,transparent 100%);
z-index:2;
}
.story__seam::before{
content:"";
position:absolute;
left:-32px;right:-32px;
top:35%;bottom:35%;
background:radial-gradient(ellipse at center,rgba(242,107,54,0.35) 0%,rgba(242,107,54,0) 70%);
filter:blur(8px);
}
.story__image{
aspect-ratio:5/6;
background:linear-gradient(155deg,#141419 0%,#0A0A0E 60%,#181822 100%);
position:relative;
overflow:hidden;
border-radius:var(--radius-md) 0 0 var(--radius-md);
}
.story__image-inner{
position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 40% at 30% 30%,rgba(242,107,54,0.28) 0%,rgba(242,107,54,0) 60%),
radial-gradient(circle at 20% 30%,rgba(255,255,255,0.4) 0.5px,transparent 1px),
radial-gradient(circle at 65% 60%,rgba(255,255,255,0.3) 0.5px,transparent 1px),
radial-gradient(circle at 82% 15%,rgba(255,255,255,0.5) 0.5px,transparent 1px);
}
.story__image-silhouette{
position:absolute;
left:50%;top:55%;
transform:translate(-50%,-50%);
width:60%;height:70%;
background:linear-gradient(180deg,#0F0F14 0%,#080810 100%);
clip-path:polygon(38% 0%,62% 0%,68% 20%,72% 45%,68% 65%,74% 100%,26% 100%,32% 65%,28% 45%,32% 20%);
}
.story__image-corner{
position:absolute;
width:22px;height:22px;
border:1px solid var(--chrome-dim);
}
.story__image-corner--tl{top:16px;left:16px;border-right:0;border-bottom:0}
.story__image-corner--bl{bottom:16px;left:16px;border-right:0;border-top:0}
.story__copy{
background:var(--hull-plate);
padding:80px 64px;
display:flex;flex-direction:column;justify-content:center;
border-radius:0 var(--radius-md) var(--radius-md) 0;
box-shadow:var(--shadow-plate);
position:relative;
}
.story__copy::before{
content:"";
position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 30%,#5A5A62 50%,var(--chrome-dim) 70%,transparent 100%);
}
.story__eyebrow{margin-bottom:24px;display:block}
.story__title{
font-family:var(--font-display);
font-weight:700;
font-size:var(--size-h2);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
line-height:1;
margin-bottom:32px;
}
.story__body{
font-size:var(--size-lead);
line-height:1.55;
color:var(--neutral);
margin-bottom:32px;
}
.story__meta{
display:flex;gap:32px;flex-wrap:wrap;
padding:24px 0;
border-top:1px solid var(--chrome-dim);
border-bottom:1px solid var(--chrome-dim);
margin-bottom:32px;
}
.story__meta-item{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.story__meta-item strong{
color:var(--text);
font-weight:600;
display:block;
font-size:20px;
margin-top:6px;
}
/* ============================================================
12. EMAIL CAPTURE
============================================================ */
.subscribe{
background:var(--hull);
padding:120px var(--frame);
}
.subscribe__inner{
max-width:820px;margin:0 auto;
}
.subscribe__panel{
background:var(--hull-plate);
border-radius:var(--radius-md);
padding:80px 64px;
box-shadow:var(--shadow-plate),inset 0 0 80px -30px rgba(242,107,54,0.25);
text-align:center;
position:relative;
overflow:hidden;
}
.subscribe__panel::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 0%,var(--chrome-dim) 30%,#5A5A62 50%,var(--chrome-dim) 70%,transparent 100%);
}
.subscribe__panel::after{
content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent 20%,rgba(242,107,54,0.4) 50%,transparent 80%);
}
.subscribe__eyebrow{margin-bottom:20px;display:block}
.subscribe__title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(40px,5vw,68px);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--text);
line-height:1;
margin-bottom:20px;
}
.subscribe__title-ember{color:var(--ember)}
.subscribe__lead{
font-size:var(--size-lead);
color:var(--neutral);
margin-bottom:40px;
max-width:520px;
margin-left:auto;margin-right:auto;
}
.subscribe__form{
display:flex;
max-width:560px;
margin:0 auto;
gap:12px;
}
.subscribe__input{
flex:1;
background:var(--void);
border:0;
border-bottom:1px solid var(--chrome-dim);
padding:18px 20px;
color:var(--text);
font-size:var(--size-body);
font-family:var(--font-body);
border-radius:var(--radius-sm);
transition:border-color 0.2s,box-shadow 0.2s;
}
.subscribe__input::placeholder{color:var(--neutral)}
.subscribe__input:focus{
outline:0;
border-bottom-color:var(--ember);
box-shadow:0 4px 24px -6px rgba(242,107,54,0.4);
}
.subscribe__hud{
margin-top:32px;
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
/* ============================================================
13. FOOTER — DEEP VOID
============================================================ */
.footer{
background:var(--void);
padding:100px var(--frame) 40px;
color:var(--neutral);
position:relative;
border-top:1px solid var(--chrome-dim);
}
.footer__inner{max-width:var(--max);margin:0 auto}
.footer__grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
gap:56px;
padding-bottom:64px;
border-bottom:1px solid var(--chrome-dim);
}
.footer__brand-block{max-width:320px}
.footer__brand{
font-family:var(--font-display);
font-weight:700;
font-size:28px;
letter-spacing:var(--track-wider);
text-transform:uppercase;
color:var(--text);
margin-bottom:20px;
position:relative;
display:inline-block;
}
.footer__brand::after{
content:"";
position:absolute;
right:-10px;top:6px;
width:6px;height:6px;
border-radius:50%;
background:var(--ember);
box-shadow:0 0 12px 2px rgba(242,107,54,0.7);
}
.footer__tagline{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
margin-bottom:16px;
}
.footer__blurb{
font-size:14px;
color:var(--neutral);
line-height:1.6;
}
.footer__col-heading{
font-family:var(--font-display);
font-weight:600;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
margin-bottom:24px;
}
.footer__list{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer__list a{
font-size:14px;
color:var(--neutral);
transition:color 0.2s;
}
.footer__list a:hover{color:var(--ember)}
.footer__bottom{
padding-top:40px;
display:flex;
justify-content:space-between;
align-items:center;
gap:32px;
flex-wrap:wrap;
}
.footer__pay{
display:flex;gap:8px;
}
.footer__pay-mark{
height:24px;padding:0 10px;
border:1px solid var(--chrome-dim);
border-radius:var(--radius-sm);
display:inline-flex;align-items:center;
font-family:var(--font-display);
font-weight:600;
font-size:10px;
letter-spacing:var(--track-wider);
color:var(--neutral);
text-transform:uppercase;
}
.footer__meta{
font-family:var(--font-display);
font-weight:500;
font-size:var(--size-micro);
text-transform:uppercase;
letter-spacing:var(--track-wider);
color:var(--steel-blue);
}
.footer__nerdworks{color:var(--ember)}
/* ============================================================
Responsive
============================================================ */
@media (max-width:1100px){
.hero__inner{grid-template-columns:1fr;padding:100px 0}
.cores__grid{grid-template-columns:repeat(2,1fr)}
.favs__grid,.reviews__grid{grid-template-columns:repeat(2,1fr)}
.characters__grid{grid-template-columns:repeat(2,1fr)}
.trust__inner{grid-template-columns:repeat(2,1fr);gap:20px}
.trust__cell{padding:8px 16px}
.trust__cell:nth-child(3){border-left:0;padding-left:0}
.story__grid{grid-template-columns:1fr}
.story__image{border-radius:var(--radius-md) var(--radius-md) 0 0}
.story__copy{border-radius:0 0 var(--radius-md) var(--radius-md);padding:56px 40px}
.story__seam{display:none}
.footer__grid{grid-template-columns:1fr 1fr 1fr;gap:40px}
.footer__brand-block{grid-column:1/-1}
.mission__grid{grid-template-columns:1fr}
.nav__menu{display:none}
}
@media (max-width:720px){
.section{padding:80px var(--frame)}
.promo__track{gap:20px;font-size:10px}
.promo__track > span:nth-child(n+5){display:none}
.cores__grid,.favs__grid,.reviews__grid,.characters__grid{grid-template-columns:1fr}
.trust__inner{grid-template-columns:1fr}
.trust__cell{border-left:0;padding-left:0}
.section__head{flex-direction:column;align-items:flex-start}
.subscribe__form{flex-direction:column}
.subscribe__panel{padding:56px 28px}
.story__copy{padding:48px 28px}
.footer__grid{grid-template-columns:1fr 1fr;gap:32px}
.hero__tagline{position:static;margin-top:32px}
.mission{padding:80px var(--frame)}
.mission__grid{gap:24px}
}
</style>
</head>
<body>
<!-- ==================== 1. PROMO BAR ==================== -->
<div class="promo">
<div class="promo__track">
<span>Free shipping over $199</span>
<span class="promo__dot" aria-hidden="true"></span>
<span>New drops every week</span>
<span class="promo__dot" aria-hidden="true"></span>
<span>Global delivery in 7–10 days</span>
<span class="promo__dot" aria-hidden="true"></span>
<span>30-day money-back guarantee</span>
</div>
<div class="promo__seam" aria-hidden="true"></div>
</div>
<!-- ==================== 2. NAV ==================== -->
<nav class="nav">
<div class="nav__inner">
<a class="nav__brand" href="#">ARTSABERS</a>
<div class="nav__menu">
<a class="nav__menu-item nav__menu-item--active" href="#">Lightsabers</a>
<a class="nav__menu-item" href="#">Cosplay Helmets</a>
<a class="nav__menu-item" href="#">Parts & Accessories</a>
<a class="nav__menu-item" href="#">Offers & Deals</a>
<a class="nav__menu-item" href="#">Blog</a>
</div>
<div class="nav__utility">
<svg class="nav__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-label="Search"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
<svg class="nav__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-label="Account"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
<svg class="nav__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-label="Wishlist"><path d="M12 20s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11z"/></svg>
<a class="nav__cart" href="#">
Cart <span class="nav__cart-count">2</span>
</a>
</div>
</div>
</nav>
<!-- ==================== 3. HERO ==================== -->
<section class="hero">
<div class="hero__space" aria-hidden="true"></div>
<div class="hero__inner">
<div class="hero__copy">
<span class="hero__eyebrow">Transmission · 2026 catalogue</span>
<h1 class="hero__title">Every saber.<br>Every core.<br>Every <span class="hero__title-ember">duelling</span><br>grade.</h1>
<p class="hero__sub">Factory direct. Global. In your hands in 7–10 days.</p>
<div class="hero__actions">
<a class="btn btn--primary" href="#">Browse the catalogue</a>
<a class="btn btn--ghost" href="#">Choose your Saber Core</a>
</div>
<div class="hero__tagline">From factory floor to your door</div>
</div>
<div class="hero__art">
<div class="hero__art-corner hero__art-corner--tl" aria-hidden="true"></div>
<div class="hero__art-corner hero__art-corner--tr" aria-hidden="true"></div>
<div class="hero__art-corner hero__art-corner--bl" aria-hidden="true"></div>
<div class="hero__art-corner hero__art-corner--br" aria-hidden="true"></div>
<div class="hero__art-canvas" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3C/svg%3E" alt="A high-contrast cinematic key-art photograph of an ARTSABERS Xenopixel-Core lightsaber floating at a 24-degree diagonal against a deep-space void; a hot ember-orange plasma blade streams upward from the chrome-brushed hilt, casting rim-light on the metal grip; distant starfield and a faint nebula wash behind">
<div class="hero__hilt-glow" aria-hidden="true"></div>
<div class="hero__saber" aria-hidden="true"></div>
<div class="hero__blade" aria-hidden="true"></div>
<div class="hero__art-hud">
<span><span class="hero__art-hud-dot"></span>Model · Starkiller SE</span>
<span>Core · Xenopixel V3</span>
</div>
</div>
</div>
</section>
<!-- ==================== 4. TRUST BAR ==================== -->
<div class="trust">
<div class="trust__inner">
<div class="trust__cell"><span class="trust__cell-dot"></span>Global delivery · 7–10 days</div>
<div class="trust__cell"><span class="trust__cell-dot"></span>Real CS · 24-hr response</div>
<div class="trust__cell"><span class="trust__cell-dot"></span>1,100 sabers in catalogue</div>
<div class="trust__cell"><span class="trust__cell-dot"></span>30-day money-back</div>
</div>
</div>
<!-- ==================== 5. CHOOSE YOUR SABER CORE ==================== -->
<section class="section cores">
<div class="section__inner">
<div class="section__head">
<div class="section__head-copy">
<span class="eyebrow">Spec hologram · 04 tiers</span>
<h2 class="section-title">Choose your<br>Saber Core.</h2>
<p class="section__head-lead">Every saber ships with a Saber Core. Bluetooth and infinite blade colours come standard on our baselit tiers — spec pages competitors reserve for mid-tier and up.</p>
</div>
<a class="btn btn--ghost btn--sm" href="#">Compare all cores</a>
</div>
<div class="cores__grid">
<!-- S-RGB -->
<article class="core-card">
<div class="core-card__art">
<div class="core-card__art-glow" aria-hidden="true"></div>
<div class="core-card__art-hilt" aria-hidden="true"></div>
<div class="core-card__art-emitter" aria-hidden="true"></div>
</div>
<div class="core-card__body">
<div class="core-card__from">Tier · Baselit</div>
<h3 class="core-card__tier">S-RGB</h3>
<div class="core-card__price">$89<span style="font-size:14px;color:var(--neutral);margin-left:8px">from</span></div>
<ul class="core-card__specs">
<li class="core-card__spec"><span>Blade</span><span class="core-card__spec-val">Baselit</span></li>
<li class="core-card__spec"><span>Colours</span><span class="core-card__spec-val">Infinite</span></li>
<li class="core-card__spec"><span>Bluetooth</span><span class="core-card__spec-val">Yes</span></li>
<li class="core-card__spec"><span>Sound fonts</span><span class="core-card__spec-val">12</span></li>
</ul>
<a class="core-card__cta" href="#">Read specs</a>
</div>
</article>
<!-- RGB-X -->
<article class="core-card">
<div class="core-card__art">
<div class="core-card__art-glow" aria-hidden="true"></div>
<div class="core-card__art-hilt" aria-hidden="true"></div>
<div class="core-card__art-emitter" aria-hidden="true"></div>
</div>
<div class="core-card__body">
<div class="core-card__from">Tier · Baselit +</div>
<h3 class="core-card__tier">RGB-X</h3>
<div class="core-card__price">$149<span style="font-size:14px;color:var(--neutral);margin-left:8px">from</span></div>
<ul class="core-card__specs">
<li class="core-card__spec"><span>Blade</span><span class="core-card__spec-val">Baselit</span></li>
<li class="core-card__spec"><span>Colours</span><span class="core-card__spec-val">Infinite</span></li>
<li class="core-card__spec"><span>Bluetooth</span><span class="core-card__spec-val">Yes</span></li>
<li class="core-card__spec"><span>Sound fonts</span><span class="core-card__spec-val">20</span></li>
</ul>
<a class="core-card__cta" href="#">Read specs</a>
</div>
</article>
<!-- Xenopixel V3 -->
<article class="core-card">
<div class="core-card__art">
<div class="core-card__art-glow" aria-hidden="true"></div>
<div class="core-card__art-hilt" aria-hidden="true"></div>
<div class="core-card__art-emitter" aria-hidden="true"></div>
</div>
<div class="core-card__body">
<div class="core-card__from">Tier · Pixel blade</div>
<h3 class="core-card__tier">Xenopixel V3</h3>
<div class="core-card__price">$299<span style="font-size:14px;color:var(--neutral);margin-left:8px">from</span></div>
<ul class="core-card__specs">
<li class="core-card__spec"><span>Blade</span><span class="core-card__spec-val">Pixel</span></li>
<li class="core-card__spec"><span>Effects</span><span class="core-card__spec-val">34</span></li>
<li class="core-card__spec"><span>Sound fonts</span><span class="core-card__spec-val">34</span></li>
<li class="core-card__spec"><span>Duelling</span><span class="core-card__spec-val">Heavy</span></li>
</ul>
<a class="core-card__cta" href="#">Read specs</a>
</div>
</article>
<!-- Proffie 2.2 -->
<article class="core-card">
<div class="core-card__art">
<div class="core-card__art-glow" aria-hidden="true"></div>
<div class="core-card__art-hilt" aria-hidden="true"></div>
<div class="core-card__art-emitter" aria-hidden="true"></div>
</div>
<div class="core-card__body">
<div class="core-card__from">Tier · Programmable</div>
<h3 class="core-card__tier">Proffie 2.2</h3>
<div class="core-card__price">$499<span style="font-size:14px;color:var(--neutral);margin-left:8px">from</span></div>
<ul class="core-card__specs">
<li class="core-card__spec"><span>Blade</span><span class="core-card__spec-val">Pixel</span></li>
<li class="core-card__spec"><span>Programmable</span><span class="core-card__spec-val">Full</span></li>
<li class="core-card__spec"><span>Sound fonts</span><span class="core-card__spec-val">Unlimited</span></li>
<li class="core-card__spec"><span>Duelling</span><span class="core-card__spec-val">Heavy</span></li>
</ul>
<a class="core-card__cta" href="#">Read specs</a>
</div>
</article>
</div>
</div>
</section>
<!-- ==================== 6. FAN FAVOURITES ==================== -->
<section class="section favs">
<div class="seam seam--top" aria-hidden="true"></div>
<div class="section__inner">
<div class="section__head">
<div class="section__head-copy">
<span class="eyebrow">Specimen showcase · Fan-picked</span>
<h2 class="section-title">Fan favourites.</h2>
<p class="section__head-lead">The three sabers our collectors, duelists and cosplayers keep coming back for.</p>
</div>
<a class="btn btn--ghost btn--sm" href="#">Shop all lightsabers</a>
</div>
<div class="favs__grid">
<!-- Ahsoka -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Ahsoka Tano Clone Wars replica lightsaber shown at a dramatic 12-degree tilt on a dark hull-plate backdrop; brushed chrome hilt with black wrap-grip, ember rim-light hitting the emitter and a hot orange plasma blade extending to the right of frame" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · Xenopixel V3</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>Clone Wars</span>
<span>Heavy duel</span>
</div>
<h3 class="product-card__title">Ahsoka Tano<br>Duelling Saber</h3>
<div class="product-card__foot">
<div class="product-card__price">$534.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
<!-- Starkiller -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Starkiller SE lightsaber floating diagonally against deep hull-grey, backlit with intense ember glow along the blade; dramatic side-lit chrome hilt with visible mechanical detailing" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · 3-tier available</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>Original design</span>
<span>Flagship</span>
</div>
<h3 class="product-card__title">Starkiller SE<br>Force Unleashed</h3>
<div class="product-card__foot">
<div class="product-card__price">$449.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
<!-- Darth Vader -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Darth Vader Return of the Jedi replica lightsaber hilt in cinematic side profile; brushed chrome and black rubber grip with red activation stud; ember blade extending across frame, dramatic under-lit shadow" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · Proffie 2.2</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>Return of the Jedi</span>
<span>Heavy duel</span>
</div>
<h3 class="product-card__title">Darth Vader<br>EP6 ROTJ</h3>
<div class="product-card__foot">
<div class="product-card__price">$619.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ==================== 7. SHOP BY CHARACTER ==================== -->
<section class="section characters">
<div class="section__inner">
<div class="section__head">
<div class="section__head-copy">
<span class="eyebrow">Movie-poster grid · 40 named characters</span>
<h2 class="section-title">Shop by<br>character.</h2>
<p class="section__head-lead">Every character, every faction. If they wield a saber in the galaxy, we build the replica.</p>
</div>
<a class="btn btn--ghost btn--sm" href="#">See all characters</a>
</div>
<div class="characters__grid">
<!-- Jedi -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Cinematic silhouette of a hooded Jedi figure holding an ember-glowing lightsaber against a deep-space void; dramatic backlight rim, robe billowing, blade extending vertically" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">Jedi</div>
<div class="char-tile__count">128 sabers · light side</div>
</div>
</a>
<!-- Sith -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade" style="height:60%;bottom:20%"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Cinematic silhouette of a hooded Sith Lord in profile, ember lightsaber blade angled downward against a black void with distant nebula wash; heavy dramatic shadow across the face" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">Sith</div>
<div class="char-tile__count">86 sabers · dark side</div>
</div>
</a>
<!-- Mandalorian -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade" style="height:55%;bottom:22%;width:5px"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Mandalorian warrior silhouette in beskar armour holding the Darksaber; dramatic ember rim-light catching the shoulder plates; deep void background with distant starfield" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">Mandalorian</div>
<div class="char-tile__count">34 sabers · beskar</div>
</div>
</a>
<!-- Clone Wars -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Clone Wars era Jedi General in dynamic combat pose, silhouetted against ember-lit battlefield haze; twin sabers extending outward in a wide arc" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">Clone Wars</div>
<div class="char-tile__count">42 sabers · animated era</div>
</div>
</a>
<!-- Original Trilogy -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Original Trilogy Jedi figure in wide-legged combat stance against a Tatooine-orange horizon fading into deep space void; hero blade extending vertically" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">Original Trilogy</div>
<div class="char-tile__count">56 sabers · EP IV–VI</div>
</div>
</a>
<!-- New Republic -->
<a class="char-tile" href="#">
<div class="char-tile__art" aria-hidden="true">
<div class="char-tile__art-glow"></div>
<div class="char-tile__silhouette"></div>
<div class="char-tile__blade"></div>
</div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="New Republic era Jedi in modern combat gear against a starship-corridor backdrop; ember-lit blade illuminating chrome bulkhead panels" style="display:none">
<div class="char-tile__corner char-tile__corner--tl"></div>
<div class="char-tile__corner char-tile__corner--tr"></div>
<div class="char-tile__seam"></div>
<div class="char-tile__overlay">
<div class="char-tile__label">New Republic</div>
<div class="char-tile__count">38 sabers · post-empire</div>
</div>
</a>
</div>
</div>
</section>
<!-- ==================== 8. NEW ARRIVALS ==================== -->
<section class="section favs">
<div class="section__inner">
<div class="section__head">
<div class="section__head-copy">
<span class="eyebrow">Latest transmission · 03 new</span>
<h2 class="section-title">New arrivals.</h2>
<p class="section__head-lead">Fresh from the factory floor. Three sabers we've never carried before.</p>
</div>
<a class="btn btn--ghost btn--sm" href="#">See all new</a>
</div>
<div class="favs__grid">
<!-- Carbon Strike -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Carbon Strike — an ARTSABERS Exclusive design lightsaber in black anodised carbon-textured hilt with copper ember accents; dramatic side-lit against deep hull, blade extending to right of frame" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · Xenopixel V3</div>
<div class="product-card__badge-new">New</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>ARTSABERS Exclusive</span>
<span>Heavy duel</span>
</div>
<h3 class="product-card__title">Carbon Strike<br>Xenopixel Edition</h3>
<div class="product-card__foot">
<div class="product-card__price">$389.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
<!-- Dark Hunter -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Dark Hunter lightsaber — matte black hilt with brutalist industrial detailing; ember-red plasma blade cutting horizontally through deep-space void" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · Proffie 2.2</div>
<div class="product-card__badge-new">New</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>Original design</span>
<span>Heavy duel</span>
</div>
<h3 class="product-card__title">Dark Hunter<br>Proffie Edition</h3>
<div class="product-card__foot">
<div class="product-card__price">$579.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
<!-- Elzar Mann -->
<article class="product-card">
<div class="product-card__art">
<div class="product-card__art-glow" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" alt="Elzar Mann High Republic era lightsaber replica; polished chrome hilt with brass emitter details, ember blade extending in cinematic composition against dark hull-grey backdrop" style="display:none">
<div class="product-card__art-hilt" aria-hidden="true"></div>
<div class="product-card__art-blade" aria-hidden="true"></div>
<div class="product-card__badge-core">Core · Xenopixel V3</div>
<div class="product-card__badge-new">New</div>
</div>
<div class="product-card__body">
<div class="product-card__hud">
<span>High Republic</span>
<span>Heavy duel</span>
</div>
<h3 class="product-card__title">Elzar Mann<br>Jedi Master</h3>
<div class="product-card__foot">
<div class="product-card__price">$484.99</div>
<div class="product-card__stars">★★★★★</div>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ==================== 9. MISSION CONTROL ==================== -->
<section class="mission">
<div class="seam seam--top" aria-hidden="true"></div>
<div class="mission__inner">
<div class="mission__head">
<span class="eyebrow">Mission control · The reframe</span>
<h2 class="mission__title">Factory direct.<br>Real support.</h2>
<p class="mission__lead">Two things most factory-direct shops won't tell you honestly. We do.</p>
</div>
<div class="mission__grid">
<article class="mission__panel mission__panel--factory">
<div class="mission__panel-art">
<div class="mission__panel-shape" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3C/svg%3E" alt="Wide cinematic shot of a saber-assembly factory floor at night; rows of dark-hull assembly stations, ember-lit machinery casting orange rim-light across chrome parts, one lit workstation glowing warm in the middle distance" style="display:none">
</div>
<div class="mission__panel-body">
<h3 class="mission__panel-title"><span class="mission__panel-title-ember">Factory</span>-direct.</h3>
<p class="mission__panel-copy">Every saber ships directly from our partner factory in 7–10 days. Broader catalogue than we could ever warehouse — and honest about the timing.</p>
<div class="mission__panel-hud">
<div class="mission__panel-hud-item">Origin · Factory direct</div>
<div class="mission__panel-hud-item">Transit · 7–10 days</div>
<div class="mission__panel-hud-item">Coverage · US · CA · AU · NZ</div>
</div>
</div>
</article>
<article class="mission__panel mission__panel--cs">
<div class="mission__panel-art">
<div class="mission__panel-shape" aria-hidden="true"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3C/svg%3E" alt="Close-up of a customer-service operator in a dark hull-plated room, headset on, ember-lit console glowing warm on face and desk; cool blue HUD monitors in background, cinematic low-key lighting" style="display:none">
</div>
<div class="mission__panel-body">
<h3 class="mission__panel-title"><span class="mission__panel-title-ember">Real</span> customer service.</h3>
<p class="mission__panel-copy">24-hour initial response. Named single point of contact after you order. We're here when something goes wrong — most factory-direct shops aren't.</p>
<div class="mission__panel-hud">
<div class="mission__panel-hud-item">Response · 24-hr</div>
<div class="mission__panel-hud-item">Support · Named SPOC</div>
<div class="mission__panel-hud-item">Warranty · 30-day</div>
</div>
</div>
</article>
</div>
<div class="mission__actions">
<a class="btn btn--ghost" href="#">Read our promise</a>
</div>
</div>
</section>
<!-- ==================== 10. REVIEWS ==================== -->
<section class="section reviews">
<div class="section__inner">
<div class="section__head">
<div class="section__head-copy">
<span class="eyebrow">Transmissions · Owner reports</span>
<h2 class="section-title">Fan-to-fan.</h2>
<p class="section__head-lead">What collectors, duelists and cosplayers say after their saber lands.</p>
</div>
<span class="hud">Verified purchase · 4.8 avg</span>
</div>
<div class="reviews__grid">
<article class="review-card">
<div class="review-card__stars">★★★★★</div>
<p class="review-card__quote">Ordered a Starkiller SE. Landed in nine days, packaged like it was going to war. First saber I've bought where the CS person actually knew what a soundfont was.</p>
<div class="review-card__foot">
<span class="review-card__name">Marcus D.</span>
<span>Collector · Denver</span>
</div>
</article>
<article class="review-card">
<div class="review-card__stars">★★★★★</div>
<p class="review-card__quote">Been through three other shops. This is the only one that answered when a switch stopped registering. Named person, back to me inside a day, replacement part sent.</p>
<div class="review-card__foot">
<span class="review-card__name">Priya R.</span>
<span>Duelist · Sydney</span>
</div>
</article>
<article class="review-card">
<div class="review-card__stars">★★★★★</div>
<p class="review-card__quote">The Ahsoka replica for Comic-Con. Blade weight, sound font, ignition delay — every detail nailed. Cosplay photos looked frame-accurate.</p>
<div class="review-card__foot">
<span class="review-card__name">Jesse K.</span>
<span>Cosplayer · Toronto</span>
</div>
</article>
</div>
</div>
</section>
<!-- ==================== 11. BRAND STORY ==================== -->
<section class="section story">
<div class="section__inner">
<div class="story__grid">
<div class="story__seam" aria-hidden="true"></div>
<div class="story__image">
<div class="story__image-inner" aria-hidden="true"></div>
<div class="story__image-silhouette" aria-hidden="true"></div>
<div class="story__image-corner story__image-corner--tl"></div>
<div class="story__image-corner story__image-corner--bl"></div>
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3C/svg%3E" alt="Cinematic key-art of the ARTSABERS founder in silhouette against a deep-space void, holding an unlit saber hilt; dramatic ember rim-light catching one edge of the profile, distant starfield behind" style="display:none">
</div>
<div class="story__copy">
<span class="eyebrow story__eyebrow">Origin · Latvia 2020</span>
<h2 class="story__title">Fan-founded.<br>Fan-run.</h2>
<p class="story__body">Founded in Latvia in 2020 by a Star Wars fan who couldn't find a saber shop that treated him like one. Now part of Nerdworks. We sell every replica saber a fan could want — with the customer service most factory-direct shops won't give.</p>
<div class="story__meta">
<div class="story__meta-item">Catalogue<strong>1,100 SKUs</strong></div>
<div class="story__meta-item">Models<strong>~350 unique</strong></div>
<div class="story__meta-item">Since<strong>2020</strong></div>
</div>
<div>
<a class="btn btn--ghost" href="#">Our story</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== 12. EMAIL CAPTURE ==================== -->
<section class="subscribe">
<div class="subscribe__inner">
<div class="subscribe__panel">
<span class="eyebrow subscribe__eyebrow">Signal boost · Subscribe</span>
<h2 class="subscribe__title">Join<br>the <span class="subscribe__title-ember">comms</span>.</h2>
<p class="subscribe__lead">Get 10% off your first saber and early access to new drops. No spam, no urgency chrome — just the good transmissions.</p>
<form class="subscribe__form" onsubmit="event.preventDefault()">
<input class="subscribe__input" type="email" placeholder="your@email.com" aria-label="Email address">
<button class="btn btn--primary" type="submit">Subscribe</button>
</form>
<div class="subscribe__hud">Encrypted · Unsubscribe any time</div>
</div>
</div>
</section>
<!-- ==================== 13. FOOTER ==================== -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__grid">
<div class="footer__brand-block">
<div class="footer__brand">ARTSABERS</div>
<div class="footer__tagline">From factory floor to your door</div>
<p class="footer__blurb">Every character, every Saber Core, every duelling grade. Global 7–10 days. Real support after you order.</p>
</div>
<div>
<div class="footer__col-heading">Shop</div>
<ul class="footer__list">
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Cosplay Helmets</a></li>
<li><a href="#">Parts & Accessories</a></li>
<li><a href="#">Offers & Deals</a></li>
</ul>
</div>
<div>
<div class="footer__col-heading">Support</div>
<ul class="footer__list">
<li><a href="#">Contact us</a></li>
<li><a href="#">Shipping & delivery</a></li>
<li><a href="#">Warranty & returns</a></li>
<li><a href="#">Track your order</a></li>
</ul>
</div>
<div>
<div class="footer__col-heading">Company</div>
<ul class="footer__list">
<li><a href="#">Our story</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Wholesale</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
<div>
<div class="footer__col-heading">Connect</div>
<ul class="footer__list">
<li><a href="#">Instagram</a></li>
<li><a href="#">TikTok</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Threads</a></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<div class="footer__meta">© 2026 ARTSABERS · A <span class="footer__nerdworks">Nerdworks</span> brand</div>
<div class="footer__pay">
<span class="footer__pay-mark">Visa</span>
<span class="footer__pay-mark">Mastercard</span>
<span class="footer__pay-mark">Amex</span>
<span class="footer__pay-mark">Apple Pay</span>
<span class="footer__pay-mark">Klarna</span>
</div>
<div class="footer__meta">Unlicensed · Star Wars-inspired · No endorsement implied</div>
</div>
</div>
</footer>
</body>
</html>