/* =========================================================
01. RESET
========================================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: "Inter", Arial, Helvetica, sans-serif;
background:
radial-gradient(circle at top right, rgba(193, 255, 114, 0.08), transparent 22%),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 24%),
linear-gradient(180deg, #050505 0%, #0b0b0c 46%, #0d0d0f 100%);
color: #f3f5f7;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}

body.nav-open {
overflow: hidden;
}

a {
color: inherit;
text-decoration: none;
}

img {
max-width: 100%;
display: block;
}

button,
input,
textarea {
font: inherit;
}

/* =========================================================
02. LAYOUT
========================================================= */

.container {
width: min(1240px, calc(100% - 96px));
margin: 0 auto;
}

.container.narrow {
width: min(860px, calc(100% - 96px));
margin: 0 auto;
}

.page-section {
padding: 110px 0 100px;
}

.content-block {
max-width: 760px;
}

.content-spacer {
margin-top: 18px !important;
}

/* =========================================================
04. SHARED TYPOGRAPHY
========================================================= */

.section-kicker {
display: inline-block;
margin-bottom: 14px;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c1ff72;
}

.section-heading {
max-width: 760px;
margin-bottom: 34px;
}

.section-heading h1,
.section-heading h2,
.content-block h1 {
margin: 0 0 14px;
font-family: "Sora", Arial, Helvetica, sans-serif;
font-size: 3.2rem;
line-height: 0.96;
letter-spacing: -0.065em;
font-weight: 500;
color: #f8fafc;
}

.section-heading p,
.content-block p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 1.02rem;
}

/* =========================================================
06. BUTTONS
========================================================= */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 12px;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.btn:hover {
transform: translateY(-1px);
}

.btn-primary-dark {
position: relative;
padding: 0 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: linear-gradient(180deg, #202024 0%, #111115 54%, #08080a 100%);
color: #f7f9fb;
box-shadow:
0 16px 30px rgba(0, 0, 0, 0.34),
0 8px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.09);
overflow: hidden;
}

.btn-primary-dark::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 11px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
pointer-events: none;
}

.btn-primary-dark-text {
position: relative;
z-index: 2;
}

.btn-primary-dark:hover {
background: #ffffff;
color: #070709;
border-color: rgba(255, 255, 255, 0.88);
box-shadow:
0 18px 32px rgba(0, 0, 0, 0.22),
0 10px 20px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-primary-green {
position: relative;
padding: 0 20px;
border: 1px solid rgba(193, 255, 114, 0.22);
border-radius: 12px;
background: #c1ff72;
color: #0a0a0a;
box-shadow:
0 16px 30px rgba(121, 181, 28, 0.18),
0 8px 16px rgba(121, 181, 28, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.btn-primary-green-text {
position: relative;
z-index: 2;
}

.btn-primary-green:hover {
background: #0a0a0a;
color: #f5f7fa;
border-color: rgba(255, 255, 255, 0.12);
box-shadow:
0 18px 32px rgba(0, 0, 0, 0.36),
0 10px 20px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* =========================================================
08. CONTACT
========================================================= */

.contact-layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 28px;
align-items: start;
}

.contact-copy h1 {
margin: 0 0 14px;
font-family: "Sora", Arial, Helvetica, sans-serif;
font-size: 3.2rem;
line-height: 0.98;
letter-spacing: -0.06em;
font-weight: 500;
}

.contact-copy p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 1.02rem;
}

.contact-meta-list {
display: grid;
gap: 12px;
margin-top: 28px;
}

.contact-meta-item {
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}

.contact-meta-label {
display: block;
margin-bottom: 6px;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c1ff72;
}

.contact-form-shell {
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.contact-form {
display: grid;
gap: 16px;
}

.form-row {
display: grid;
gap: 8px;
}

.form-row label {
font-family: "Montserrat", Arial, Helvetica, sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}

.form-row input,
.form-row textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
outline: none;
resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
border-color: rgba(193, 255, 114, 0.5);
}

.contact-submit {
width: 100%;
margin-top: 4px;
}

.form-alert {
margin-bottom: 16px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.95rem;
}

.form-alert.is-success {
border-color: rgba(193, 255, 114, 0.35);
background: rgba(193, 255, 114, 0.08);
color: #efffd7;
}

.form-alert.is-error {
border-color: rgba(255, 120, 120, 0.28);
background: rgba(255, 120, 120, 0.08);
color: #ffd6d6;
}

/* =========================================================
09. FOOTER
========================================================= */

.site-footer {
padding: 28px 0 40px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner p {
margin: 0;
color: rgba(255, 255, 255, 0.52);
font-size: 0.94rem;
}

/* =========================================================
10. TABLET
========================================================= */

@media (max-width: 1100px) {
.container {
width: min(100% - 64px, 1240px);
}

```
.container.narrow {
    width: min(100% - 64px, 860px);
}

.contact-layout {
    grid-template-columns: 1fr;
}
```

}

/* =========================================================
11. MOBILE
========================================================= */

@media (max-width: 767px) {
.container,
.container.narrow {
width: calc(100% - 32px);
}

```
.page-section {
    padding: 72px 0 72px;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading h1,
.section-heading h2,
.content-block h1,
.contact-copy h1 {
    font-size: 2.25rem;
    line-height: 1.02;
}

.btn {
    width: auto;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.67rem;
    letter-spacing: 0.045em;
    white-space: nowrap;
    flex: 0 0 auto;
}

.contact-meta-list {
    margin-top: 22px;
}

.contact-form-shell {
    padding: 20px;
}

.site-footer {
    padding: 24px 0 32px;
}

.footer-inner p {
    font-size: 0.9rem;
}
```

}