:root{
	/* Color system */
	--color-bg: #242424;
	--color-surface: #121822;
	--color-elevated: rgba(255,255,255,0.06);
	--color-text: #e6edf3;
	--color-text-muted: #9fb3c8;
	--color-primary: #3bb2f6;
	--color-accent: #22d3ee;
	--color-border: #243041;
	--color-focus: #94f236;
	--shadow-soft: 0 6px 24px rgba(0,0,0,0.25);

	/* Typography */
	--font-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	--fs-300: 0.875rem;
	--fs-400: 1rem;
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-700: 2rem;
	--fs-800: 2.5rem;

	/* Layout */
	--container: 1200px;
	--radius: 12px;
	--radius-sm: 8px;
	--gap: 16px;
	--gap-lg: 24px;
}

/* Reset + base */
*{box-sizing:border-box}
html{color-scheme:dark}
body{
	margin:0;
	font-family:var(--font-base);
	color:var(--color-text);
	background:#242424;
	line-height:1.6;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:8px 12px;z-index:1000}
.skip-link:focus{left:8px;box-shadow:0 0 0 3px var(--color-focus)}

/* Layout helpers */
.container{max-width:var(--container);margin-inline:auto;padding:0 16px}
.section{padding:48px 0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#313131;backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--color-border)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:64px}
.site-header__brand img{filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5))}
.site-nav__list{display:flex;gap:12px;list-style:none;margin:0;padding:0}

/* Breadcrumbs */
.breadcrumbs{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:rgba(255,255,255,0.02)}
.breadcrumbs__list{display:flex;gap:8px;list-style:none;margin:0;padding:8px 0}
.breadcrumbs__item{color:var(--color-text-muted)}
.breadcrumbs__item a{color:var(--color-text)}
.breadcrumbs__item[aria-current="page"]{color:var(--color-text)}

/* Hero banner */
.hero{position:relative;isolation:isolate}
.hero__img{width:100%;height:clamp(280px,45vw,460px);object-fit:cover;display:block}
.hero__cta{
	/* Semi-transparent right-aligned on desktop, centered on mobile */
	position:absolute;inset:auto 5% 10% auto;max-width:min(560px, 90%);
	background:linear-gradient(180deg, rgba(18,24,34,0.92), rgba(18,24,34,0.82));
	border:1px solid var(--color-border);border-radius:var(--radius);
	padding:20px;box-shadow:var(--shadow-soft)
}
.hero__title{font-size:var(--fs-700);line-height:1.2;margin:0 0 8px}
.hero__subtitle{color:var(--color-text-muted);margin:0 0 16px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* Buttons */
.btn{--btn-bg:transparent;--btn-text:var(--color-text);--btn-border:var(--color-border);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);font-weight:600;line-height:1.2;transition:.2s ease;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus)}
.btn--primary{--btn-bg:var(--color-primary);--btn-text:#031019;--btn-border:transparent}
.btn--accent{--btn-bg:var(--color-accent);--btn-text:#051018;--btn-border:transparent}
.btn--ghost{--btn-bg:rgba(255,255,255,0.03)}
.btn--lg{padding:12px 18px;font-size:var(--fs-500)}
.btn--xl{padding:14px 22px;font-size:var(--fs-600)}

/* Copy blocks */
h1,h2,h3{line-height:1.2}
h1{font-size:var(--fs-800)}
h2{font-size:var(--fs-700);margin:0 0 12px}
h3{font-size:var(--fs-600);margin:24px 0 8px}
p{margin:12px 0;color:var(--color-text)}
.list{padding-left:18px}

/* Table: responsive pattern using data-label on cells */
.table{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--color-border);text-align:left}
.table thead th{background:rgba(255,255,255,0.04);color:var(--color-text-muted);font-weight:600}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:none}
.table-responsive{overflow-x:auto;border-radius:var(--radius);background:var(--color-elevated)}

/* Mobile table transformation */
@media (max-width: 640px){
	.table thead{display:none}
	.table tr{display:grid;grid-template-columns: 1fr;gap:6px;padding:10px 8px;border-bottom:1px solid var(--color-border)}
	.table th[scope="row"], .table td{display:flex;align-items:center;gap:8px;padding:6px 8px;background:transparent;border:0}
	.table td::before{content:attr(data-label) ": ";color:var(--color-text-muted);min-width:140px}
}

/* Slots grid */
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.slots__item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.slots__link{display:block}
.slots__item img{width:100%;height:auto;display:block}

@media (min-width: 480px){
	.slots{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (min-width: 768px){
	.slots{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (min-width: 1024px){
	.slots{grid-template-columns:repeat(6, minmax(0,1fr))}
}

/* CTA row */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}

/* Footer */
.site-footer{border-top:1px solid var(--color-border);background:rgba(255,255,255,0.02);padding:32px 0;margin-top:24px}
.footer-nav__list{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0 0 16px;padding:0}
.payments{display:flex;flex-wrap:wrap;gap:10px;align-items:center;opacity:.9}

/* Focus visibility */
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus)}

/* Mobile adjustments */
@media (max-width: 767px){
	.site-header__bar{min-height:56px}
	/* Center CTA overlay with proper width on mobile */
	.hero__cta{left:50%;right:auto;bottom:5%;top:auto;transform:translateX(-50%);text-align:center;width:min(560px,92%)}
	.hero__actions{flex-direction:column}
	/* Show mobile banner at its native proportion, no cropping */
	.hero__img{height:auto;object-fit:contain}
}

/* Avoid horizontal scroll issues on mobile */
html, body{max-width:100%;overflow-x:hidden}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	*{transition:none !important;animation:none !important}
}