:root {
	--color-bg: #0f1115;
	--color-surface: #171a21;
	--color-text: #e6e6e9;
	--color-muted: #a8acb3;
	--color-primary: #7bd88f;
	--radius: 0.5rem;
	--container: 72rem;
}

@font-face {
	font-family: "Germania One";
	src: url("../fonts/GermaniaOne-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Akshar";
	src: url("../fonts/Akshar-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_24pt-Regular.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
	margin: 0;
	background: #48403e;
	color: var(--color-text);
	font: 400 0.875rem/1.6 "Akshar", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.container { max-width: var(--container); margin-inline: auto; padding: 0 1rem; }
.section { padding: 3rem 0; }
.section--hero { background: #1e1b18 url("../img/hero.png") center/cover no-repeat; padding: 4rem 0; min-height: 500px; display: flex; align-items: center; justify-content: flex-start; }
.section--hero .container{ max-width: 1200px; width: 100%;}
.site-header { position: sticky; top: 0; background: #1e1b18 url("../img/h-bg.png") center / contain repeat-x; border-bottom: 1px solid #1f2330;z-index: 3; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; min-height: 60px; }
.logo { font-family: "Germania One", serif; font-size: 1.5rem; color: var(--color-text); }
.logo img { height: 40px; width: auto; }

.site-nav { display: none; }
.site-nav[aria-expanded="true"], .site-nav.is-open { display: block; }
.site-nav__list { list-style: none; margin-left: 30px; padding: 0; display: flex; gap: 1rem; flex-direction: row-reverse;}
.site-nav a { color: #e7e1c3; outline: none; font-family: "Germania One", serif; letter-spacing: 1.2px; }

.site-search { display: none; align-items: center; gap: 0.5rem; background: #3a322f; border: 1px solid #5a4f49; border-radius: 0.75rem; padding: 0.5rem 0.75rem; min-width: 18rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.site-search__icon { width: 1rem; height: 1rem; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cdbf9a"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') center/contain no-repeat; background: #cdbf9a; display: inline-block; }
.site-search__input { background: transparent; border: 0; outline: none; color: #d9cdb1; width: 100%; font: inherit; }

.btn-login { background: #3a2f2a; color: #f4e8d0; border: 1px solid; border-image-source: linear-gradient(180deg, #5B4E4D 0%, #504443 72.12%, #2D2322 98.08%); border-image-slice: 1; border-radius: 0.75rem; padding: 0.5rem 0.85rem; font-family: "Germania One", serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.5); }

.header-button {
	background: linear-gradient(180deg, #715C56 30.97%, #5D4E4B 75.84%) ;
	color: #f4e8d0;
	border: 1px solid;
	border-image-source: linear-gradient(180deg, #5B4E4D 0%, #504443 72.12%, #2D2322 98.08%);
	/* border-image-slice: 1; */
	border-radius: 0.75rem;
	padding: 10px 15px;
	font-family: "Germania One", serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	font-size: 20px;
}
.btn-login:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.nav-toggle { background: var(--color-surface); color: var(--color-text); border: 1px solid #272b36; border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-family: "Germania One", serif; margin: 0 0 0.75rem; letter-spacing: 0.2px;color: #F2E9BA; }
h1 { font-size: 3rem; line-height: 1.2; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1rem; color: #ffffff; font-family: "Inter", sans-serif; }

p, li, a, span {font-family: "Inter", sans-serif;font-size: 16px; font-weight: 400;}

.features { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; background: var(--color-primary); color: #0b0e12; border-radius: var(--radius); font-weight: 600; }
.btn:focus-visible { outline: 2px solid #b3f0c0; outline-offset: 2px; }

.form { display: grid; grid-template-columns: 1fr; gap: 0.75rem; max-width: 28rem; }
.form__label { font-weight: 600; }
.form__input { background: var(--color-surface); color: var(--color-text); border: 1px solid #2a2f3c; border-radius: var(--radius); padding: 0.625rem 0.75rem; }
.form__input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.site-footer { border-top: 1px solid #1f2330; padding: 2rem 0; color: var(--color-muted); }

@media (min-width: 48rem) {
	.site-nav { display: block; }
	.nav-toggle { display: none; }
	.features { grid-template-columns: repeat(3, 1fr); }
	.logo img { height: 44px; margin-left: 45px; }
	.site-search { display: inline-flex; min-width: 26rem; }
} 

button, .btn, .btn-login, .header-button {
	cursor: pointer;
	transition: transform 120ms ease, filter 200ms ease, box-shadow 200ms ease;
}
button:hover, .btn:hover, .btn-login:hover, .header-button:hover {
	transform: translateY(-1px) scale(1.01);
	filter: brightness(1.03);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 10px rgba(0,0,0,0.25);
}
button:active, .btn:active, .btn-login:active, .header-button:active {
	transform: translateY(0) scale(0.99);
	filter: brightness(0.98);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.2);
}
@media (prefers-reduced-motion: reduce) {
	button, .btn, .btn-login, .header-button { transition: none; }
}
/* Mobile menu */
.hamburger { display: inline-flex; flex-direction: column; gap: 4px; background: rgba(0,0,0,0.3); border: 1px solid #413a36; border-radius: 0.5rem; padding: 0.5rem; }
.hamburger span { display: block; width: 22px; height: 2px; background: #e9dec7; border-radius: 2px; }

.tabs { display: none; background: #2b2420; border-top: 1px solid #433a35; border-bottom: 1px solid #3a312c; }
.tabs__list { list-style: none; margin: 0; padding: 0.5rem 1rem; display: flex; justify-content: space-around; gap: 1rem; }
.tabs a { color: #e9dec7; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid #6a5a50; background: linear-gradient(180deg, #4e3f38, #3e322c); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }

.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
.drawer { position: fixed; top: 0; left: 0; height: 100vh; width: 80vw; max-width: 320px; background: #2b2420; border-right: 1px solid #3a312c; transform: translateX(-100%); transition: transform 220ms ease; z-index: 50; padding: 1rem; }
.drawer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.drawer__nav a { color: #e9dec7; padding: 0.75rem 0.5rem; border-bottom: 1px solid #3a312c; }

.drawer.is-open { transform: translateX(0); }
.backdrop[hidden] { display: none; }

.drawer__close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.25rem; height: 2.25rem; background: transparent; color: #e9dec7; border: 1px solid #4a3f3a; border-radius: 0.5rem; font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; z-index: 100; pointer-events: auto; }
.drawer__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 47.99rem) {
	.site-search { display: none !important; }
	.tabs { display: block; }
    .logo-container {display: flex; align-items: center;}
    .header-button{font-size: 13px; padding: 5px 7px;}
    .drawer { width: 100vw; max-width: none; }
}

.section--hero,
.section--hero p {
	color: #9CB0B8;
	padding: 0.5rem;
    font-size: 1rem;
}

/* Hero H1 like screenshot */
.section--hero {
	color: #F2E9BA;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.05;
	border: none;
	padding: 0.25rem 0;
    -webkit-text-stroke: 0.4px #0e1a1c;
    text-shadow: 0 0 0 #0e1a1c, 0 5px 0 #0e1a1c, 0 0px 0 #0e1a1c, 0px 0 0 #0e1a1c, -1px 0 0 #0e1a1c, 1px 1px 0 #0e1a1c, -1px 1px 0 #0e1a1c, 1px -1px 0 #0e1a1c, -1px -1px 0 #0e1a1c, 0 10px 10px rgba(0, 0, 0, 0.5);
    font-size: 38px;
    text-align: center;
    font-family: "Germania One", serif;
}

/* Hero button with background image */
.section--hero .btn {
	background: url("../img/button.png") center/cover no-repeat;
	border: none;
	padding: 1rem 2rem;
	font-family: "Germania One", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #F2E9BA;
	text-shadow: 2px 2px 0 #235A2B, -2px -2px 0 #235A2B, 2px -2px 0 #235A2B, -2px 2px 0 #235A2B;
	border-radius: 0.5rem;
	min-width: 200px;
}

/* Update hero button with gradient border and box shadow */
.section--hero .btn {
	background: url("../img/button.png") center/cover no-repeat;
	border: 1.2px solid;
	border-image-slice: 1;
	padding: 1rem 4rem;
	font-family: "Germania One", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #F2E9BA;
	text-shadow: 2px 2px 0 #235A2B, -2px -2px 0 #235A2B, 2px -2px 0 #235A2B, -2px 2px 0 #235A2B;
	min-width: 200px;
	box-shadow: 0 4px 8px #c3ff8c, inset 0 1px 0 #c3ff8c;
    border-radius: 50px;
    max-width: 280px;
    margin: 0 auto;
}
.hero-class {
    max-width: 550px;
    text-align: center;
    background-image: url("../img/h-bg.png");
    background-repeat: repeat;
    background-size: contain;
    border-radius: 16px;
    padding: 20px 20px 0 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.3);
}
/* Mobile hero background */
@media (max-width: 47.99rem) {
	.section--hero {
		background: #1e1b18 url("../img/mob-ban.png") center/cover no-repeat;
        padding: 10rem 0 0 0;
        align-items: flex-end;
	}
    .section--hero h1 {
        font-size: 30px;
    }
}

/* Table Styles */
.table-wrapper {
	overflow-x: auto;
	margin: 2rem 0;
	border-radius: 0.75rem;
	border: 1px solid #3a312c;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.payments-table {
	width: 100%;
	border-collapse: collapse;
	background: #2b2420;
	font-size: 0.875rem;
}
.lexical-table {
	width: 100%;
	border-collapse: collapse;
	background: #2b2420;
	font-size: 0.875rem;
}

.payments-table th {
	background: linear-gradient(180deg, #4e3f38, #3e322c);
	color: #F2E9BA;
	padding: 1rem 0.75rem;
	text-align: left;
	font-family: "Germania One", serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #5a4f49;
	position: sticky;
	top: 0;
	z-index: 10;
}

.lexical-table th {
	background: linear-gradient(180deg, #4e3f38, #3e322c);
	color: #F2E9BA;
	padding: 1rem 0.75rem;
	text-align: left;
	font-family: "Germania One", serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #5a4f49;
}

.payments-table td {
	padding: 0.875rem 0.75rem;
	border-bottom: 1px solid #3a312c;
	color: #e9dec7;
	vertical-align: middle;
}

.lexical-table td {
	padding: 0.875rem 0.75rem;
	border-bottom: 1px solid #3a312c;
	color: #e9dec7;
	vertical-align: middle;
}

.payments-table tbody tr:hover {
	background: rgba(255,255,255,0.03);
}

.payments-table tbody tr:nth-child(even) {
	background: rgba(0,0,0,0.1);
}

.lexical-table tbody tr:hover {
	background: rgba(255,255,255,0.03);
}

.lexical-table tbody tr:nth-child(even) {
	background: rgba(0,0,0,0.1);
}

.status {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.status--active {
	background: linear-gradient(135deg, #61B712, #8DD54B);
	color: #0b0e12;
	box-shadow: 0 2px 4px rgba(97,183,18,0.3);
}

.status--new {
	background: linear-gradient(135deg, #FF6B35, #FF8E53);
	color: #ffffff;
	box-shadow: 0 2px 4px rgba(255,107,53,0.3);
}


/* Mobile table adjustments */
@media (max-width: 47.99rem) {
    .section--hero .hero-container{
        padding: 20px;
        gap: 15px;
    }
    .payments-table {
		font-size: 0.75rem;
	}
	
	.payments-table th,
	.payments-table td {
		padding: 0.5rem 0.375rem;
	}
	
	.payments-table th:nth-child(4),
	.payments-table td:nth-child(4) {
		display: none;
	}

	.lexical-table {
		font-size: 0.75rem;
	}

	.lexical-table th,
	.lexical-table td {
		padding: 0.5rem 0.375rem;
	}
}

/* Hero container background */
.section--hero .hero-container {
	background: url("../img/h-bg.png") center/cover no-repeat;
	border-radius: 0.75rem;
	padding: 2rem;
	position: relative;
	z-index: 1;
}

/* Update hero container with shadow and max-width */
.section--hero .hero-container {
	background: url("../img/h-bg.png") center/cover no-repeat;
	border-radius: 0.75rem;
	padding: 40px;
	position: relative;
	z-index: 1;
	max-width: 550px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 35px;
}
.logo-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lexical-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

@media (max-width: 767px){
    .section--hero .hero-container{
        padding: 20px;
        gap: 15px;
    }
    .section--hero{
        min-height: 390px;
        font-size: 35px;
    }
}