/* --- CSS Variables (Your Brand) --- */
:root {
    --bg-dark: #004b49;    /* Your dark teal */
    --text-primary: #f5f5dc; /* Your beige/cream */
    --accent: #e2725b;      /* Your terracotta/orange */
    --text-dark: #333;
    --font-primary: 'Manrope', sans-serif;
}

/* --- Global & Font Styles --- */
/* Note: You mentioned 'TT Squares'. That's a specific font you'd need to own and host.
   I've used 'Manrope' from Google Fonts, which is very similar, modern, and clean.
   If you have the .woff2 font file for TT Squares, you can replace this.
*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

h2, h3 {
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
}

h2 { font-size: 2.8rem; line-height: 1.2; }
h3 { font-size: 2.2rem; }

p {
    font-size: 1.1rem;
    color: var(--text-primary);
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

section {
    padding: 80px 20px;
}

/* --- Header --- */
header {
    background: rgba(0, 75, 73, 0.8); /* Dark teal with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(245, 245, 220, 0.1);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-icon {
    height: 40px;
    width: auto;
}

.nav-button {
    background-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.nav-button:hover {
    background-color: #c9614c;
}

/* --- CTA Button Styles --- */
.cta-button {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.cta-button.primary {
    background-color: #000; /* Black button from your image */
    color: #fff;
    border-color: #000;
}
.cta-button.primary:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.cta-button.secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
}
.cta-button.secondary:hover {
    background: var(--text-primary);
    color: var(--text-dark);
}

.cta-button.large {
    font-size: 1.2rem;
    padding: 15px 35px;
}


/* --- Hero Section --- */
#hero {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

#hero .tagline {
    display: inline-block;
    background-color: var(--accent);
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 25px;
}

#hero h2 {
    color: #fff; /* White for main hero headline */
    font-size: 3.2rem;
    font-weight: 800;
}

#hero .subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* --- Offer Section --- */
#offer {
    background-color: #003a38; /* Slightly lighter dark */
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    text-align: left;
}

.offer-card {
    background: #005a58; /* Even lighter */
    padding: 30px;
    border-radius: 10px;
    border-top: 4px solid var(--accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.offer-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: left;
    margin-top: 0;
}
.offer-card p {
    font-size: 1rem;
    text-align: left;
    margin: 0;
    opacity: 0.9;
}

/* --- Method & Sample Sections --- */
#method {
    background-color: var(--text-primary); /* Beige background */
    color: var(--text-dark);
}
#method h3, #method p {
    color: var(--text-dark);
}

#sample {
    background-color: var(--bg-dark);
}

.feature-image {
    width: 100%;
    max-width: 900px;
    border-radius: 10px;
    border: 3px solid #fff;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#sample .feature-image {
    border: 3px solid var(--accent);
}
#sample .cta-button {
    margin-top: 40px;
}

/* --- Buy Section --- */
#buy {
    background-color: #003a38;
    text-align: center;
}
.price {
    font-size: 1.3rem;
    color: #fff;
}
.price strong {
    color: var(--accent);
    font-size: 1.6rem;
    font-weight: 700;
}
.steps {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 50px auto;
    max-width: 1000px;
    flex-wrap: wrap;
}
.step {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}
.step span {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.step p {
    font-size: 1.1rem;
    color: var(--text-primary);
    opacity: 1;
}
.queries {
    margin-top: 30px;
    font-size: 1rem;
    color: var(--text-primary);
    opacity: 0.7;
}

/* --- Footer --- */
footer {
    background: #000;
    color: #aaa;
    text-align: center;
    padding: 40px 20px;
}
.footer-logo {
    height: 50px;
    opacity: 0.8;
    margin-bottom: 15px;
}
footer p {
    color: #aaa;
    font-size: 0.9rem;
    margin: 5px 0;
}