* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, sans-serif;
background: linear-gradient(180deg, #08111f 0%, #0c1d33 100%);
color: #ffffff;
line-height: 1.6;
}

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

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

.container {
width: min(92%, 1200px);
margin: 0 auto;
}

.section {
padding: 88px 0;
}

.section-soft {
padding: 78px 0;
}

.eyebrow {
display: inline-block;
margin-bottom: 14px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(240, 194, 77, 0.35);
background: rgba(240, 194, 77, 0.08);
color: #f2cc69;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
}

.section-title {
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.08;
margin-bottom: 16px;
text-align: center;
}

.section-title.left {
text-align: left;
}

.header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(7, 12, 20, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}

.brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.logo {
height: 58px;
width: auto;
object-fit: contain;
}

.brand-name {
font-size: 1.7rem;
font-weight: 800;
color: #f1c44a;
letter-spacing: 0.02em;
white-space: nowrap;
}

.nav-links {
display: flex;
align-items: center;
gap: 28px;
}

.nav-links a {
color: #f5f7fb;
font-weight: 600;
font-size: 0.97rem;
}

.nav-links a:hover {
color: #f1c44a;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 22px;
border-radius: 999px;
font-weight: 700;
border: 1px solid transparent;
transition: 0.25s ease;
}

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

.primary {
background: linear-gradient(135deg, #f4cb54, #dca51d);
color: #0b1220;
box-shadow: 0 10px 24px rgba(220, 165, 29, 0.28);
}

.secondary {
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.16);
}

.full-btn {
width: 100%;
margin-top: 16px;
}

.hero {
padding: 86px 0 74px;
}

.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 48px;
}

.hero-copy h1 {
font-size: clamp(3rem, 6vw, 5.4rem);
line-height: 0.98;
margin-bottom: 18px;
}

.hero-text {
font-size: 1.08rem;
color: #c9d4e5;
max-width: 620px;
}

.hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}

.hero-image-wrap {
display: flex;
justify-content: center;
}

.hero-image {
width: 100%;
max-width: 520px;
border-radius: 24px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.services-grid,
.pricing-grid,
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 26px;
}

.card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 26px 22px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.service-card {
min-height: 220px;
}

.icon {
width: 56px;
height: 56px;
object-fit: contain;
margin-bottom: 14px;
}

.card h3 {
font-size: 1.24rem;
margin-bottom: 10px;
}

.card p,
.about-copy p,
.faq-item p,
.contact-card p {
color: #c9d4e5;
}

.pricing-card {
min-height: 100%;
}

.price {
font-size: 2.2rem;
font-weight: 800;
color: #f4cb54;
margin: 10px 0 12px;
}

.plan-desc {
margin-bottom: 10px;
}

.feature-list {
list-style: none;
margin-top: 14px;
}

.feature-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
color: #d2dcec;
}

.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #4fd199;
font-weight: 900;
}

.featured {
border: 2px solid rgba(244, 203, 84, 0.58);
box-shadow: 0 18px 40px rgba(244, 203, 84, 0.14);
}

.about-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 40px;
align-items: center;
}

.about-image-wrap {
display: flex;
justify-content: center;
}

.founder {
width: 100%;
max-width: 500px;
border-radius: 22px;
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}

.about-copy p {
margin-bottom: 14px;
font-size: 1.04rem;
}

.faq-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 24px;
}

.center-block {
text-align: center;
}

.center-buttons {
justify-content: center;
}

.contact-card h3 {
margin-bottom: 12px;
}

.footer {
padding: 24px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(6, 10, 18, 0.92);
}

.footer-inner {
display: flex;
justify-content: space-between;
gap: 16px;
color: #c9d4e5;
font-size: 0.95rem;
}

@media (max-width: 1024px) {
.hero-grid,
.about-grid,
.services-grid,
.pricing-grid,
.contact-grid,
.faq-list {
grid-template-columns: 1fr;
}

.section-title.left {
text-align: center;
}

.about-copy {
text-align: center;
}
}

@media (max-width: 768px) {
.nav {
flex-wrap: wrap;
justify-content: center;
padding: 14px 0;
}

.brand {
width: 100%;
justify-content: center;
}

.brand-name {
font-size: 1.35rem;
}

.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}

.btn {
width: 100%;
}

.hero-buttons {
flex-direction: column;
}

.hero-copy h1 {
font-size: 2.8rem;
}

.footer-inner {
flex-direction: column;
text-align: center;
}
}
/* =========================
CONTACT PAGE / FORM
========================= */
.contact-page {
min-height: 100vh;
}

.contact-shell {
max-width: 980px;
}

.contact-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 26px;
padding: 36px;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}

.contact-intro {
margin-bottom: 26px;
}

.contact-title {
font-size: clamp(2.2rem, 4.8vw, 4rem);
line-height: 1.05;
margin-bottom: 12px;
color: #ffffff;
}

.contact-subtitle {
color: #c9d4e5;
font-size: 1.05rem;
max-width: 700px;
}

.contact-form {
margin-top: 8px;
}

.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
border-radius: 14px;
padding: 14px 16px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #a8b6cc;
}

.form-group input:focus,
.form-group textarea:focus {
border-color: rgba(244, 203, 84, 0.7);
box-shadow: 0 0 0 4px rgba(244, 203, 84, 0.12);
background: rgba(255, 255, 255, 0.08);
}

.form-group textarea {
resize: vertical;
min-height: 150px;
}

.form-submit {
margin-top: 8px;
min-width: 220px;
}

.form-status {
margin-top: 16px;
min-height: 24px;
font-weight: 700;
color: #c9d4e5;
}

@media (max-width: 768px) {
.contact-card {
padding: 24px 18px;
}

.form-grid {
grid-template-columns: 1fr;
gap: 14px;
}

.form-submit {
width: 100%;
}
}