/* DoohStation Prospect Site - House Style */
:root {
    /* Colors - from logo */
    --ds-color-dark: #2C3540;
    --ds-color-steel: #4A5A6A;
    --ds-color-orange: #FF9E00;
    --ds-color-orange-deep: #FF4500;
    --ds-color-text: #1E252D;
    --ds-color-text-bold: #2C3E50;
    --ds-color-text-muted: #8A99A8;
    --ds-color-connector: #BAC5D0;
    --ds-color-bg: #F8F9FA;
    --ds-color-white: #FFFFFF;

    /* Gradients */
    --ds-gradient-orange: linear-gradient(135deg, #FF9E00 0%, #FF4500 100%);
    --ds-gradient-dark: linear-gradient(135deg, #4A5A6A 0%, #2C3540 100%);

    /* Typography */
    --ds-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ds-font-size-base: 1.1rem;
    --ds-line-height: 1.6;

    /* Layout */
    --ds-content-width: 1200px;
    --ds-radius: 6px;
    --ds-radius-lg: 8px;

    /* Spacing */
    --ds-sp-xs: 0.5rem;
    --ds-sp-sm: 1rem;
    --ds-sp-md: 2rem;
    --ds-sp-lg: 4rem;
    --ds-sp-xl: 6rem;

    /* Shadows */
    --ds-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
    --ds-shadow-md: 0 6px 24px rgba(255, 158, 0, 0.12);
    --ds-shadow-glow: 0 4px 20px rgba(255, 158, 0, 0.30);

    /* Overlays */
    --ds-overlay-hero: linear-gradient(135deg, rgba(44,53,64,0.85), rgba(30,37,45,0.70));
}

*, *::before, *::after { box-sizing: border-box; }

html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
    line-height: var(--ds-line-height);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ds-font-body);
    font-size: var(--ds-font-size-base);
    color: var(--ds-color-text);
    background-color: var(--ds-color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font-body);
    line-height: 1.2;
    margin-top: 0;
}

h1 { font-size: 3.0rem; font-weight: 300; color: var(--ds-color-text); letter-spacing: -1px; }
h1 strong { font-weight: 700; color: var(--ds-color-text-bold); }
h2 { font-size: 2.2rem; font-weight: 700; color: var(--ds-color-text-bold); }
h3 { font-size: 1.4rem; font-weight: 600; color: var(--ds-color-dark); }
h6 { font-size: 1.0rem; font-weight: 600; text-transform: uppercase; color: var(--ds-color-text-muted); }

a { color: var(--ds-color-orange); text-decoration: none; }
a:hover { color: var(--ds-color-orange-deep); }

/* Layout */
.section-content {
    max-width: var(--ds-content-width);
    margin: 0 auto;
    padding: var(--ds-sp-lg) var(--ds-sp-md);
}

.section-dark {
    background: var(--ds-gradient-dark);
    color: var(--ds-color-white);
}
.section-dark h2, .section-dark h3, .section-dark p { color: var(--ds-color-white); }

/* Buttons */
.ds-btn-primary {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--ds-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--ds-color-white);
    background: var(--ds-gradient-orange);
    border: none;
    border-radius: var(--ds-radius);
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}
.ds-btn-primary:hover {
    box-shadow: var(--ds-shadow-glow);
    transform: translateY(-2px);
    color: var(--ds-color-white);
}

.ds-btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--ds-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--ds-color-dark);
    background: transparent;
    border: 2px solid var(--ds-color-connector);
    border-radius: var(--ds-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.ds-btn-secondary:hover {
    background: var(--ds-color-dark);
    color: var(--ds-color-white);
}

.ds-btn-white {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--ds-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--ds-color-dark);
    background: var(--ds-color-white);
    border: none;
    border-radius: var(--ds-radius);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s;
}
.ds-btn-white:hover { transform: translateY(-2px); }

/* Feature node cards */
.ds-card {
    background: var(--ds-color-white);
    border: 1px solid var(--ds-color-connector);
    border-top: 3px solid var(--ds-color-orange);
    border-radius: var(--ds-radius);
    padding: var(--ds-sp-md);
    box-shadow: var(--ds-shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}
.ds-card:hover {
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-4px);
}
.ds-card h3 { margin-bottom: var(--ds-sp-xs); }
.ds-card p { color: var(--ds-color-steel); margin: 0; }

/* Feature grid */
.ds-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ds-sp-md);
}

/* Hero section */
.ds-hero {
    background-color: var(--ds-color-bg);
    padding: var(--ds-sp-xl) var(--ds-sp-md);
    text-align: center;
}
.ds-hero p {
    font-size: 1.3rem;
    color: var(--ds-color-steel);
    max-width: 700px;
    margin: var(--ds-sp-sm) auto var(--ds-sp-md);
}

/* CTA Band */
.ds-cta-band {
    background: var(--ds-gradient-dark);
    padding: var(--ds-sp-lg) var(--ds-sp-md);
    text-align: center;
}
.ds-cta-band h2 { color: var(--ds-color-white); margin-bottom: var(--ds-sp-md); }

/* Pricing */
.ds-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-sp-md);
}
.ds-pricing-card {
    background: var(--ds-color-white);
    border: 1px solid var(--ds-color-connector);
    border-radius: var(--ds-radius);
    padding: var(--ds-sp-md);
    text-align: center;
    box-shadow: var(--ds-shadow-sm);
}
.ds-pricing-card.featured { border-top: 3px solid var(--ds-color-orange); }
.ds-pricing-card h3 { margin-bottom: var(--ds-sp-sm); }
.ds-pricing-card ul { list-style: none; padding: 0; margin: var(--ds-sp-sm) 0 var(--ds-sp-md); text-align: left; }
.ds-pricing-card ul li { padding: var(--ds-sp-xs) 0; border-bottom: 1px solid var(--ds-color-bg); color: var(--ds-color-steel); }
.ds-pricing-card ul li::before { content: '\2713  '; color: var(--ds-color-orange); font-weight: 700; }

/* Contact form */
.ds-form { max-width: 600px; margin: 0 auto; }
.ds-form label { display: block; font-weight: 600; color: var(--ds-color-dark); margin-bottom: var(--ds-sp-xs); }
.ds-form input, .ds-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--ds-font-body);
    font-size: 1rem;
    border: 1px solid var(--ds-color-connector);
    border-radius: var(--ds-radius);
    margin-bottom: var(--ds-sp-sm);
    transition: border-color 0.2s;
}
.ds-form input:focus, .ds-form textarea:focus { outline: none; border-color: var(--ds-color-orange); }

/* Utility */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .ds-hero { padding: var(--ds-sp-lg) var(--ds-sp-sm); }
    .section-content { padding: var(--ds-sp-md) var(--ds-sp-sm); }
}