:root{ 
    /* Dark Teal Tech — business IT */
    --bg: #0B1F26; /* main background */
    --text: #E2E8F0; /* main text */
    --muted: #94A3B8; /* secondary text */
    --accent: #0F766E; /* primary accent */
    --accentHover: #14B8A6; /* hover accent */
    --accent2: #155E75; /* secondary accent */
    --nav: #0B1F26; /* header background */
    --navBorder: rgba(226,232,240,.12);
    --card: #132F3A; /* cards / sections */
    --cardHover: #163743;
    --line: rgba(226,232,240,.14);
    --white: #FFFFFF;
    --radius: 10px; /* modern, not too rounded */
    --shadow: 0 22px 55px rgba(0,0,0,.55);
    --shadowSoft: 0 14px 40px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{ 
    margin:0; 
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
}

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

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

/* Header (clean, editorial) */
.header{ 
    position: sticky; 
    top:0; 
    z-index: 999; 
    background: var(--nav); 
    border-bottom: 1px solid var(--navBorder); 
}

.header-inner{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:18px; 
    padding: 14px 0; 
    position: relative; 
}

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

.brand img{ 
    height: 84px; /* logo itself is bigger */
    width:auto; 
    display:block; 
    background:#fff; 
    padding: 4px 6px; 
    border: 1px solid var(--line); 
    box-shadow: var(--shadowSoft); 
}

.brand .brand-text{ 
    display:flex; 
    flex-direction:column; 
    line-height:1.05; 
    color: var(--text); 
}

.brand .brand-text strong{ font-size: 14px; letter-spacing:.2px; }

.brand .brand-text span{ font-size: 12px; color: var(--muted); }

.nav{ 
    display:flex; 
    align-items:center; 
    gap:18px; 
    font-weight: 650; 
    font-size: 14px; 
}

.nav a{ 
    opacity:.88; 
    padding: 8px 6px; 
}

.nav a:hover{ 
    opacity: 1; 
    text-decoration: underline; 
    text-underline-offset: 6px; 
    text-decoration-thickness: 2px; 
    text-decoration-color: var(--accent); 
}

.nav a.active{ 
    opacity: 1; 
    text-decoration: underline; 
    text-underline-offset: 6px; 
    text-decoration-thickness: 2px; 
    text-decoration-color: var(--accent); 
}

.nav-right{ display:flex; align-items:center; gap:14px; }

.iconbar{ display:flex; align-items:center; gap:10px; }

.iconbar a{ 
    width:34px; 
    height:34px; 
    display:grid; 
    place-items:center; 
    background: var(--card); 
    border: 1px solid var(--line); 
}

.iconbar a:hover{ border-color: rgba(226,232,240,.22); }

.iconbar svg{ width:18px; height:18px; fill: var(--text); }

.burger{ 
    display:none; 
    width:42px; 
    height:42px; 
    background: var(--card); 
    border: 1px solid var(--line); 
    color: var(--text); 
    cursor:pointer; 
}

/* Mobile nav */
@media (max-width: 880px){
    .nav{ 
        display:none; 
        position:absolute; 
        top:64px; 
        right:4%; 
        left:4%; 
        background: var(--card); 
        border: 1px solid var(--line); 
        padding: 10px 12px; 
        flex-direction:column; 
        align-items:stretch; 
        gap:10px; 
        box-shadow: var(--shadowSoft); 
    }
    .nav.open{ display:flex; }
    .burger{ display:block; }
    .nav-right{ gap:10px; }
}

/* Hero (keeps big hero vibe) */
.hero{ 
    position:relative; 
    min-height: 72vh; 
    display:flex; 
    align-items:center; 
    overflow:hidden; 
    background: #07161B; 
}

.hero::before{ 
    content:""; 
    position:absolute; 
    inset:0; 
    background: linear-gradient(90deg, rgba(10,18,35,.78), rgba(10,18,35,.35), rgba(10,18,35,.15)), url("../images/hero1.jpg"); 
    background-size: cover; 
    background-position: center; 
    transform: scale(1.02); 
}

.hero-inner{ 
    position:relative; 
    padding: 56px 0; 
    color: rgba(255,255,255,.95); 
}

.kicker{ 
    display:inline-flex; 
    gap:10px; 
    align-items:center; 
    padding: 8px 12px; 
    border-radius: 999px; 
    background: rgba(255,255,255,.10); 
    border: 1px solid rgba(255,255,255,.14); 
    font-weight: 700; 
    font-size: 12px; 
    letter-spacing:.3px; 
    margin-bottom: 16px; 
}

.hero h1{ 
    margin: 0 0 12px; 
    font-size: clamp(34px, 4.8vw, 58px); 
    line-height: 1.02; 
    letter-spacing: -0.7px; 
}

.hero p{ 
    margin: 0 0 22px; 
    max-width: 60ch; 
    font-size: 18px; 
    color: rgba(255,255,255,.86); 
    line-height: 1.55; 
}

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

.footer-link{ opacity:.85; }

.footer-link:hover{ text-decoration: underline; opacity:1; }

/* Buttons (base = light sections) */
.btn{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:10px; 
    padding: 12px 16px; 
    border-radius: 14px; 
    font-weight: 800; 
    letter-spacing:.2px; 
    cursor:pointer; 
    background: transparent; 
    border: 1px solid var(--line); 
    color: var(--text); 
    transition: border-color .2s ease, background .2s ease; 
}

.btn:hover{ border-color: var(--accent); background: var(--cardHover); }

/* Primary button */
.btn.primary{ 
    background: var(--accent); 
    border-color: var(--accent); 
    color: var(--white); 
}

.btn.primary:hover{ filter: brightness(0.96); }

/* Service CTA block (used on index pages) */
.service-cta{ 
    margin: 28px auto 0; 
    max-width: 1100px; 
    padding: 18px 18px; 
    border: 1px solid var(--line); 
    border-radius: 18px; 
    background: var(--card); 
    box-shadow: 0 12px 30px rgba(0,0,0,.06); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 18px; 
}

.service-cta h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: .2px; }

.service-cta p{ margin: 0; color: var(--muted); line-height: 1.55; }

@media (max-width: 720px){ 
    .service-cta{ flex-direction: column; align-items: flex-start; } 
    .service-cta .btn{ width: 100%; } 
}

/* Hero buttons (white on dark hero ONLY) */
.hero .btn{ 
    border-color: rgba(255,255,255,.35); 
    color: rgba(255,255,255,.95); 
    background: transparent; 
}

.hero .btn:hover{ 
    border-color: rgba(255,255,255,.55); 
    background: rgba(255,255,255,.12); 
}

/* Sections */
.section{ padding: 56px 0; }

.section h2{ 
    margin: 0 0 12px; 
    font-size: 28px; 
    letter-spacing:-0.3px; 
}

.section p.lead{ 
    margin: 0 0 26px; 
    color: var(--muted); 
    font-size: 16px; 
    line-height: 1.65; 
    max-width: 75ch; 
}

.split{ 
    display:grid; 
    grid-template-columns: 1.2fr .8fr; 
    gap: 22px; 
    align-items: stretch; 
}

@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }

.card{ 
    background: var(--card); 
    border: 1px solid var(--line); 
    border-radius: var(--radius); 
    box-shadow: var(--shadowSoft); 
    overflow:hidden; 
}

.card.pad{ padding: 22px; }

.card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Services grid (kept for later, now light-theme compatible) */
.services-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

@media (max-width: 900px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{ 
    background: var(--card); 
    color: var(--text); 
    border-radius: var(--radius); 
    padding: 22px; 
    box-shadow: var(--shadowSoft); 
    border: 1px solid var(--line); 
    transition: transform .16s ease, background .16s ease; 
}

.service-card:hover{ background: var(--cardHover); transform: translateY(-2px); }

.service-card h3{ margin: 0 0 10px; font-size: 18px; letter-spacing:-0.2px; }

.service-card p{ margin:0 0 14px; color: var(--muted); line-height:1.6; }

.tag{ 
    display:inline-flex; 
    padding: 6px 10px; 
    border-radius: 999px; 
    background: rgba(15,118,110,.12); 
    border: 1px solid rgba(15,118,110,.22); 
    font-size: 12px; 
    font-weight: 800; 
    letter-spacing:.2px; 
    color: var(--text); 
}

/* Mission block */
.mission{ 
    background: linear-gradient(180deg, rgba(15,118,110,.06), rgba(15,118,110,.02)); 
    border-top: 1px solid var(--line); 
    border-bottom: 1px solid var(--line); 
}

/* Contact */
.form{ display:grid; gap: 12px; }

.input, select, textarea{ 
    width:100%; 
    padding: 12px 12px; 
    border-radius: 14px; 
    border: 1px solid rgba(226,232,240,.16); 
    background: var(--card); 
    font: inherit; 
    outline: none; 
}

textarea{ min-height: 130px; resize: vertical; }

.input:focus, select:focus, textarea:focus{ 
    border-color: rgba(15,118,110,.45); 
    box-shadow: 0 0 0 4px rgba(15,118,110,.15); 
}

/* Footer */
.footer{ 
    padding: 26px 0; 
    border-top: 1px solid var(--line); 
    color: rgba(28,28,28,.75); 
    font-size: 13px; 
}

.footer-inner{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:14px; 
    flex-wrap:wrap; 
}

/* Blog-style service blocks (one connected box) */
.service-split{ 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 0; 
    align-items: stretch; 
    margin-top: 36px; 
    border: 1px solid var(--line); 
    box-shadow: var(--shadowSoft); 
    overflow: hidden; 
    border-radius: 0; 
}

.service-media{ overflow: hidden; }

.service-media img{ 
    width:100%; 
    height:100%; 
    min-height: 360px; 
    object-fit: cover; 
    display:block; 
}

.service-content{ 
    background: var(--card); 
    padding: 34px; 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
    color: var(--text); 
}

.service-content h3{ margin: 0 0 12px; font-size: 24px; letter-spacing: -0.3px; }

.service-content p{ margin: 0 0 14px; color: var(--muted); line-height: 1.7; }

.service-content .price{ 
    margin-top: 10px; 
    font-weight: 800; 
    font-size: 15px; 
    letter-spacing: .2px; 
    color: var(--accent); 
}

.service-split.reverse .service-media{ order: 2; }

.service-split.reverse .service-content{ order: 1; }

@media (max-width: 900px){ 
    .service-split{ grid-template-columns: 1fr; } 
    .service-split.reverse .service-media{ order: 0; } 
    .service-media img{ min-height: 240px; } 
}

/* Website gallery cards */
.site-grid{ 
    display:grid; 
    grid-template-columns:repeat(3, minmax(0, 1fr)); 
    gap:18px; 
    margin-top:18px; 
}

.site-card{ 
    display:block; 
    text-decoration:none; 
    color:inherit; 
    border:1px solid rgba(226,232,240,.10); 
    border-radius:18px; 
    overflow:hidden; 
    box-shadow:0 6px 18px rgba(0,0,0,.06); 
    transition:transform .18s ease, box-shadow .18s ease; 
    background: var(--card); 
}

.site-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.10)}

.site-thumb{aspect-ratio:16/10;overflow:hidden;background:#f2f2f2}

.site-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}

.site-card:hover .site-thumb img{transform:scale(1.03)}

.site-meta{padding:14px 14px 16px}

.site-meta h3{margin:0 0 6px;font-size:1.05rem;line-height:1.2}

.site-meta p{margin:0 0 10px;font-size:.95rem;opacity:.8}

.site-cta{font-weight:700;font-size:.95rem}

@media (max-width: 900px){ .site-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }

@media (max-width: 560px){ .site-grid{grid-template-columns:1fr;} }

.contact-info p { display: flex; align-items: center; gap: 8px; }

.contact-info p { display: flex; align-items: center; gap: 8px; }

.contact-info i { font-size: 16px; }

.contact-info { margin-top: 14px; }

.contact-line { display:flex; align-items:center; gap:10px; margin:0 0 10px; }

.contact-line:last-child { margin-bottom:0; }

.ci { width:18px; height:18px; flex:0 0 18px; opacity:.8; }

/* Blog */
.blog-grid .site-thumb img{object-fit:cover}

.post{max-width: 900px; margin: 0 auto}

.post h1{margin-bottom: 8px}

.post-meta{margin-top:0;margin-bottom:16px}

.post-images{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 18px}

.post-images img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(226,232,240,.08)}

@media (min-width: 760px){ .post-images{grid-template-columns:1fr 1fr} }

.post h2{margin-top:22px}

.post-back,.blog-back{margin-top:22px}

/* Blog post images */
.post-hero, .post-mid{ margin: 18px 0; }

.post-hero img, .post-mid img{ 
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 16px; 
}

/* HOMEPAGE COMPONENTS - Updated to use Dark Teal Tech Theme */
.benefits-grid, .mission-grid, .testimonial-strip, .process-steps, .pricing-cards {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.benefit {
    background: var(--card);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent);
    border: 1px solid var(--line);
    box-shadow: var(--shadowSoft);
}

.benefit strong {
    color: var(--text);
    display: block;
    margin-bottom: 0.5rem;
}

.benefit p {
    color: var(--muted);
    margin: 0;
}

.mission-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.mission-item {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadowSoft);
}

.mission-item h3 {
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.mission-item p {
    color: var(--muted);
}

/* Testimonial Strip - Centered Slider */
.testimonial-strip {
    background: linear-gradient(135deg, rgba(15,118,110,0.08), rgba(15,118,110,0.03));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.testimonial-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}

.testimonial-text {
    font-size: 1.25rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--text);
    margin-bottom: 1.5rem;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-author {
    font-weight: 600;
    color: var(--accent);
    font-size: 1.1rem;
}

.testimonial-role {
    color: var(--muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

.testimonial-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(15,118,110,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

.process-steps {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
    gap: 2rem;
}

.step {
    background: var(--card);
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadowSoft);
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.step h3 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.step p {
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

.pricing-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pricing-card {
    background: var(--card);
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadowSoft);
    text-align: center;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.pricing-card.featured {
    border: 2px solid var(--accent);
    transform: scale(1.05);
    background: var(--cardHover);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-4px);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.35rem 1.5rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent);
    margin: 1.5rem 0 0.5rem;
}

.price-note {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 1.5rem 0;
}

.pricing-card li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

.pricing-card li:before {
    content: "✓";
    color: var(--accent);
    margin-right: 0.75rem;
    font-weight: bold;
}

/* Service CTA button */
.service-cta .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.service-cta .btn.primary:hover {
    background: var(--accentHover);
    border-color: var(--accentHover);
    color: white;
}

@media (max-width: 768px) {
    .pricing-card.featured {
        transform: none;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
    
    .benefits-grid, .mission-grid, .pricing-cards, .process-steps {
        grid-template-columns: 1fr;
    }
    
    .testimonial-text {
        font-size: 1.1rem;
        min-height: 140px;
    }
    
    .step {
        padding: 1.5rem;
    }
}

/* ========================================== */
/* MOBILE OPTIMIZATION FOR ALL PAGES */
/* Add this to EVERY HTML file's style section */
/* ========================================== */

/* 1. Foundation fixes for ALL devices */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. Touch-friendly EVERYWHERE (44px min for iOS) */
.btn, button, 
.nav a, 
.burger, 
.testimonial-dot, 
input[type="submit"], 
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* For text buttons/links that can't be 44px */
.nav a, 
a:not(.btn):not(button) {
    padding: 8px 4px;
}

/* 3. Mobile Typography Scale */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.5;
    }
    
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.3;
    }
    
    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    }
    
    .lead, p, li {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .price {
        font-size: 2rem;
    }
}

/* 4. Prevent iOS form zoom */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px !important;
    }
    
    input, select, textarea {
        padding: 12px 14px;
    }
}

/* 5. Gallery page specific */
@media (max-width: 768px) {
    .site-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .site-card {
        margin-bottom: 1rem;
    }
    
    .site-thumb {
        aspect-ratio: 16/9;
    }
}

/* 6. Blog page specific */
@media (max-width: 768px) {
    .post {
        padding: 1rem;
    }
    
    .post h1 {
        font-size: 1.75rem;
    }
    
    .post-images {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .post-hero img, 
    .post-mid img {
        border-radius: 12px;
    }
}

/* 7. Services page specific */
@media (max-width: 900px) {
    .service-split {
        grid-template-columns: 1fr;
    }
    
    .service-media img {
        min-height: 200px;
        max-height: 250px;
    }
    
    .service-content {
        padding: 1.5rem;
    }
}

/* 8. Universal container fixes */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .section {
        padding: 3rem 0;
    }
    
    .hero-inner {
        padding: 3rem 1rem;
    }
}

/* 9. Universal layout stacking */
@media (max-width: 768px) {
    .split, 
    .cta-row,
    .footer-inner,
    .service-cta {
        flex-direction: column;
    }
    
    .split {
        gap: 2rem;
    }
    
    .cta-row {
        gap: 1rem;
    }
    
    .cta-row .btn,
    .service-cta .btn {
        width: 100%;
        text-align: center;
    }
    
    .service-cta {
        text-align: center;
        padding: 1.5rem;
    }
    
    .service-cta .btn {
        margin-top: 1rem;
    }
}

/* 10. Universal grid fixes */
@media (max-width: 768px) {
    .benefits-grid,
    .mission-grid,
    .pricing-cards,
    .testimonial-strip,
    .process-steps,
    .site-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pricing-card.featured {
        transform: none;
        order: -1;
    }
}

/* 11. Navigation & header fixes */
@media (max-width: 880px) {
    .header-inner {
        padding: 12px 1rem;
    }
    
    .brand img {
        height: 60px;
    }
    
    .nav {
        top: 70px;
        left: 1rem;
        right: 1rem;
        border-radius: 12px;
    }
    
    .nav a {
        padding: 12px 16px;
        font-size: 1rem;
    }
}

/* 12. Text overflow prevention */
h1, h2, h3, h4, p, .btn, .price, .testimonial-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 13. iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
    
    input, textarea {
        font-size: 16px;
    }
}

/* 14. Safe areas for iPhone X+ notch */
@supports (padding: max(0px)) {
    .header,
    .hero,
    .section,
    .footer {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .hero {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    
    .footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* 15. Performance optimizations */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    .card, 
    .service-card,
    .pricing-card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
}