:root{ 
    /* Galaxy theme — cosmic violet/pink */
    --bg: #050512; /* main background */
    --text: #E9E4F5; /* main text */
    --muted: #A99FC4; /* secondary text */
    --accent: #9f5cff; /* primary accent (galaxy violet) */
    --accentHover: #ff70bb; /* hover accent (galaxy pink) */
    --accent2: #6c7cff; /* secondary accent (galaxy blue) */
    --nav: #0a0818; /* header background */
    --navBorder: rgba(198,127,255,.14);
    --card: rgba(20,16,42,.66); /* cards / sections */
    --cardHover: rgba(30,22,58,.8);
    --line: rgba(198,127,255,.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 14px; 
    font-size: clamp(32px, 4.4vw, 54px); 
    line-height: 1.12; 
    letter-spacing: -0.4px; 
    font-weight: 700;
}

.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: 40px 0; 
    border-top: 1px solid rgba(198,127,255,.12); 
    color: rgba(233,228,245,.8); 
    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);
    }
}

/* ===== GALAXY WEB STUDIO — global visual identity ===== */
:root {
  --galaxy-violet:#9f5cff;
  --galaxy-pink:#ff70bb;
  --galaxy-sunset:#ff9b62;
  --galaxy-blue:#6c7cff;
  --galaxy-bg:#050512;
  --galaxy-panel:rgba(8,8,25,.76);
  --galaxy-border:rgba(204,170,255,.22);
}
html { background: var(--galaxy-bg); }
body { background: transparent !important; color:#f7f3ff; position:relative; }
.galaxy-video-bg { position:fixed; inset:0; z-index:-3; overflow:hidden; background:#050512; }
.galaxy-video-bg video { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.08) brightness(.52); transform:scale(1.04); }
.galaxy-video-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,3,13,.62),rgba(5,4,18,.72) 46%,rgba(4,4,14,.8)); }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at 18% 18%,rgba(139,75,255,.18),transparent 33%),radial-gradient(circle at 82% 36%,rgba(255,101,175,.13),transparent 32%),radial-gradient(circle at 50% 88%,rgba(255,145,84,.08),transparent 35%); }
.header { background:rgba(5,5,18,.82) !important; border-bottom:1px solid var(--galaxy-border) !important; backdrop-filter:blur(16px); }
.brand img { width:auto !important; height:92px !important; max-width:260px; object-fit:contain; background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; filter:drop-shadow(0 4px 18px rgba(159,92,255,.35)); }
.brand-text strong { color:#fff !important; font-size:15px !important; }
.brand-text span { color:#d9c9ee !important; }
.nav a { color:#e7dcf5 !important; }
.nav a:hover,.nav a.active { color:#ffb0d6 !important; }
.hero { background:transparent !important; position:relative; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,4,16,.74),rgba(4,4,16,.26),rgba(4,4,16,.58)); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.section { background:transparent !important; }
.section:nth-of-type(even) { background:rgba(5,5,18,.28) !important; }
.card,.service-card,.testimonial-card,.pricing-card,.site-card,.service-split,.terms-content,.post,.contact-card,.benefit,.service-cta { background:var(--galaxy-panel) !important; border-color:var(--galaxy-border) !important; box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03) !important; backdrop-filter:blur(10px); }
h1,h2,h3,.price { text-shadow:0 0 26px rgba(159,92,255,.12); }
h2,h1,.price { background:linear-gradient(110deg,#8f6cff 0%,#e879c7 55%,#ffac75 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
a { color:#e6a2ff; }
.btn.primary,.btn.secondary,.service-cta .btn.primary { color:#fff !important; border:1px solid rgba(239,187,255,.45) !important; background:linear-gradient(120deg,rgba(122,76,255,.42),rgba(255,105,183,.3),rgba(255,151,91,.24)) !important; box-shadow:0 10px 28px rgba(103,52,190,.18); }
.btn:hover { transform:translateY(-1px); filter:brightness(1.12); }
.footer { background:rgba(4,4,14,.88) !important; border-top:1px solid var(--galaxy-border) !important; }
input,textarea,select { background:rgba(8,8,24,.82) !important; color:#fff !important; border-color:var(--galaxy-border) !important; }
@media (prefers-reduced-motion: reduce) { .galaxy-video-bg video { display:none; } .galaxy-video-bg { background:radial-gradient(circle at 35% 25%,#25134a,#070714 55%,#03030a); } }
@media (max-width:768px) { .galaxy-video-bg video { filter:saturate(.85) contrast(1.05) brightness(.42); } .brand img { height:60px !important; max-width:180px; } .brand-text { display:none !important; } }


/* Enhanced interactive galaxy background */
.galaxy-video-bg { position:fixed; inset:0; z-index:-4; overflow:hidden; background:#03030b; pointer-events:none; }
.galaxy-video-bg video { width:100%; height:100%; object-fit:cover; filter:saturate(1.35) contrast(1.16) brightness(.78); transform:scale(1.07); opacity:.95; }
.galaxy-video-bg::before { content:""; position:absolute; inset:-10%; z-index:1; background:
 radial-gradient(circle at var(--galaxy-x,50%) var(--galaxy-y,40%), rgba(179,73,255,.26), transparent 22%),
 radial-gradient(circle at calc(var(--galaxy-x,50%) + 12%) calc(var(--galaxy-y,40%) + 8%), rgba(255,112,149,.15), transparent 18%);
 mix-blend-mode:screen; transition:background-position .12s linear; }
.galaxy-video-bg::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(2,2,10,.28),rgba(5,3,17,.48) 48%,rgba(3,3,12,.58)); }
.galaxy-particles { position:fixed; inset:0; z-index:-3; width:100%; height:100%; pointer-events:none; opacity:.92; }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at var(--galaxy-x,50%) var(--galaxy-y,40%), rgba(121,54,255,.12), transparent 26%); }
.section, .service-cta, .footer { position:relative; }
.pricing-stack { display:grid; gap:1.5rem; }
.pricing-cards.three-packages { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.pricing-card .package-intro { min-height:3.5em; color:var(--text-muted,#c7c4d7); }
.pricing-card ul { text-align:left; }
.wide-offer-card { display:grid; grid-template-columns:1.05fr 1.35fr; gap:2rem; padding:2rem; border:1px solid rgba(199,126,255,.3); border-radius:22px; background:linear-gradient(135deg,rgba(19,13,42,.9),rgba(8,9,24,.9)); box-shadow:0 18px 55px rgba(0,0,0,.28); }
.wide-offer-card .price { margin:.35rem 0; }
.offer-note { margin-top:1rem; padding:1rem; border-left:3px solid #c568ff; background:rgba(197,104,255,.08); border-radius:0 10px 10px 0; }
.ngo-promo { display:grid; grid-template-columns:1.25fr auto; gap:2rem; align-items:center; padding:2.2rem; border-radius:24px; border:1px solid rgba(255,139,175,.35); background:linear-gradient(120deg,rgba(67,23,89,.88),rgba(18,17,47,.9)); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ngo-promo .price { font-size:2.1rem; margin:.25rem 0 .7rem; }
@media(max-width:900px){ .pricing-cards.three-packages{grid-template-columns:1fr;} .wide-offer-card,.ngo-promo{grid-template-columns:1fr;} }
@media(max-width:768px){ .galaxy-video-bg video{filter:saturate(1.25) contrast(1.12) brightness(.66);} .galaxy-particles{opacity:.7;} }
@media(prefers-reduced-motion:reduce){ .galaxy-particles{display:none;} }

/* NGO promotional advert */
.ngo-advert{position:relative;overflow:hidden;border:1px solid rgba(233,146,255,.45);background:linear-gradient(110deg,rgba(18,10,42,.92),rgba(49,17,72,.84));box-shadow:0 18px 60px rgba(123,55,190,.22)}
.ngo-advert:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,150,88,.18),transparent 38%);pointer-events:none}
.ngo-advert>*{position:relative;z-index:1}


/* v4: reliable previews, NGO carousel and service visibility plans */
.site-thumb{aspect-ratio:16/9;background:#080817;overflow:hidden}
.site-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .45s ease}
.site-card:hover .site-thumb img{transform:scale(1.035);filter:saturate(1.08) brightness(1.04)}
.ngo-showcase-section{overflow:hidden;padding-bottom:5rem}
.ngo-slider{width:100%;overflow:hidden;margin-top:2rem;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ngo-slider-track{display:flex;width:max-content;gap:2rem;animation:ngo-scroll 34s linear infinite;padding:1rem 0 2rem}
.ngo-slider:hover .ngo-slider-track,.ngo-slider:focus-within .ngo-slider-track{animation-play-state:paused}
.ngo-project-card{position:relative;display:block;flex:0 0 clamp(620px,72vw,980px);aspect-ratio:16/9;border-radius:28px;overflow:hidden;border:1px solid rgba(198,127,255,.45);box-shadow:0 24px 75px rgba(0,0,0,.42);background:#080817;text-decoration:none}
.ngo-project-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease}
.ngo-project-card:hover img{transform:scale(1.025);filter:saturate(1.08) brightness(1.05)}
.ngo-project-copy{position:absolute;left:0;right:0;bottom:0;padding:3.2rem 2.4rem 2rem;background:linear-gradient(transparent,rgba(4,3,16,.96));display:grid;gap:.35rem;color:#fff}
.ngo-project-copy strong{font-size:clamp(1.55rem,2.7vw,2.5rem)}
.ngo-project-copy span{color:#d8cbea;font-size:1.05rem}
@keyframes ngo-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 1rem))}}
.service-package-block{display:grid;gap:2.2rem;margin:2.5rem 0 4rem}
.service-store-card{margin-top:.3rem}
.visibility-plans{margin:4rem 0 2rem}
.visibility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.visibility-card{padding:2rem;border:1px solid rgba(181,127,255,.28);border-radius:20px;background:linear-gradient(145deg,rgba(18,14,42,.92),rgba(8,8,24,.92));box-shadow:0 16px 45px rgba(0,0,0,.24)}
.visibility-card.featured{border-color:rgba(255,153,190,.5);box-shadow:0 18px 55px rgba(145,67,220,.2)}
.visibility-card .price{font-size:1.8rem;margin:.5rem 0 1rem}
@media(max-width:900px){.visibility-grid{grid-template-columns:1fr}.ngo-project-card{flex-basis:84vw}}
@media(max-width:600px){.ngo-project-card{flex-basis:91vw;border-radius:20px}.ngo-project-copy{padding:2.6rem 1.25rem 1.25rem}.ngo-slider-track{gap:1rem;animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.ngo-slider-track{animation:none;overflow-x:auto}.ngo-project-card img{transition:none}}

/* ============================================================
   REFRESH v5 — polished galaxy components (homepage, gallery, NGO)
   ============================================================ */

/* --- Hero: richer, more premium --- */
.hero{ min-height: 82vh; }
.hero-inner{ padding: 72px 0; }
.hero .kicker{
  background: linear-gradient(110deg, rgba(159,92,255,.22), rgba(255,112,187,.16));
  border: 1px solid rgba(198,127,255,.4);
  color:#f3e9ff;
  box-shadow: 0 6px 22px rgba(159,92,255,.22);
}
.hero h1{ font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; line-height: 1.1; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 26px;
}
.hero-trust span{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 14px; color: rgba(240,232,255,.9); font-weight:600;
}
.hero-trust span::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: linear-gradient(120deg,#9f5cff,#ff70bb); box-shadow:0 0 10px rgba(255,112,187,.7);
}

/* --- Section rhythm --- */
.section{ padding: 74px 0; }
.section h2{ font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.section-eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:12px;
  background: linear-gradient(110deg,#9f5cff,#ff70bb 60%,#ff9b62);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* --- Benefit cards: glassy, glowing on hover --- */
.benefits-grid > *, .benefit-card{
  background: linear-gradient(160deg, rgba(20,16,42,.72), rgba(12,10,28,.66)) !important;
  border: 1px solid rgba(198,127,255,.2) !important;
  border-radius: 18px !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.benefits-grid > *:hover, .benefit-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,112,187,.5) !important;
  box-shadow: 0 22px 55px rgba(120,60,220,.3) !important;
}

/* --- Pricing cards: premium galaxy panels --- */
.pricing-card, .pricing-cards > *{
  background: linear-gradient(165deg, rgba(24,18,50,.82), rgba(12,10,30,.78)) !important;
  border: 1px solid rgba(198,127,255,.26) !important;
  border-radius: 22px !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
  position: relative;
}
.pricing-card:hover, .pricing-cards > *:hover{
  transform: translateY(-8px);
  border-color: rgba(255,112,187,.55) !important;
  box-shadow: 0 30px 70px rgba(130,60,230,.34) !important;
}
.pricing-card.featured, .pricing-card.popular{
  border-color: rgba(255,112,187,.6) !important;
  box-shadow: 0 24px 60px rgba(150,70,240,.3) !important;
}
.pricing-card .price{ font-size: clamp(30px,3.4vw,44px) !important; font-weight: 900 !important; }

/* --- Generic reveal for scroll --- */
@media (prefers-reduced-motion: no-preference){
  .reveal-up{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal-up.in{ opacity:1; transform:none; }
}

/* --- Buttons: shinier primary --- */
.btn.primary{
  background: linear-gradient(110deg,#9f5cff,#ff70bb) !important;
  border: none !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(159,92,255,.4);
}
.btn.primary:hover{
  filter: brightness(1.06) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255,112,187,.5);
}
.btn{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }

/* ============ NGO flagship hero ============ */
.ngo-hero{ min-height: 88vh; }
.ngo-hero::before{
  background: linear-gradient(115deg, rgba(12,8,32,.9), rgba(20,12,48,.6) 45%, rgba(255,112,187,.15)),
              radial-gradient(ellipse at 78% 30%, rgba(159,92,255,.4), transparent 60%),
              url("../images/hero-mountain.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}
.ngo-hero h1{
  font-size: clamp(34px, 4.8vw, 58px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
.ngo-hl{
  background: linear-gradient(110deg,#9f5cff,#ff70bb 55%,#ff9b62) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  position: relative;
}
.ngo-hero .kicker{
  background: linear-gradient(110deg, rgba(255,155,98,.24), rgba(255,112,187,.2)) !important;
  border-color: rgba(255,155,98,.5) !important;
  color: #ffe8d6 !important;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
}

/* NGO benefit tiles: distinct accent */
.ngo-showcase-section .section-eyebrow,
.ngo-hero + .section .section-eyebrow{ }
.benefit{
  background: linear-gradient(160deg, rgba(20,16,42,.7), rgba(12,10,28,.64));
  border: 1px solid rgba(198,127,255,.2);
  border-radius: 16px;
  padding: 22px;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.benefit:hover{
  transform: translateY(-5px);
  border-color: rgba(255,112,187,.5);
  box-shadow: 0 20px 50px rgba(120,60,220,.28);
}
.benefit strong{ display:block; margin-bottom:8px; font-size:17px; color:#f3e9ff; }

/* ============ Gallery — premium ============ */
.gallery-hero{ min-height: 66vh; }
.gallery-hero::before{
  background: linear-gradient(115deg, rgba(12,8,32,.88), rgba(20,12,48,.5) 50%, rgba(108,124,255,.15)),
              radial-gradient(ellipse at 75% 35%, rgba(159,92,255,.35), transparent 55%),
              url("../images/hero1.jpg") !important;
  background-size: cover !important; background-position: center !important;
}
.gallery-hero h1{ font-size: clamp(32px,4.6vw,56px) !important; font-weight:700 !important; line-height:1.12; }

.site-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr));
  gap: 26px;
}
.site-card{
  display:block; text-decoration:none; border-radius: 20px; overflow:hidden;
  background: linear-gradient(165deg, rgba(22,16,46,.8), rgba(12,10,28,.76));
  border: 1px solid rgba(198,127,255,.22);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.site-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,112,187,.55);
  box-shadow: 0 30px 70px rgba(130,60,230,.36);
}
.site-thumb{ aspect-ratio: 16/10; overflow:hidden; background:#080817; }
.site-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.site-card:hover .site-thumb img{ transform: scale(1.06); }
.site-meta{ padding: 20px 22px; }
.site-meta h3{ margin:0 0 4px; font-size: 20px; color:#f3e9ff; }
.site-meta p{ margin:0 0 12px; color:#c7bce0; font-size: 14px; }
.site-cta{
  display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px;
  background: linear-gradient(110deg,#9f5cff,#ff70bb);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ============ Live preview browser frames (v6) ============ */
.browser-frame{
  border-radius: 14px; overflow:hidden;
  background:#0d0b1e; border:1px solid rgba(198,127,255,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.browser-bar{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  background: linear-gradient(180deg,#1a1533,#141026);
  border-bottom:1px solid rgba(198,127,255,.18);
}
.browser-dots{ display:flex; gap:6px; }
.browser-dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.browser-dots i:nth-child(1){ background:#ff5f57; }
.browser-dots i:nth-child(2){ background:#febc2e; }
.browser-dots i:nth-child(3){ background:#28c840; }
.browser-url{
  flex:1; margin-left:8px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#c9bce6; font-size:12px; font-weight:600; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:7px;
}
.browser-url::before{ content:"🔒"; font-size:10px; opacity:.7; }
.browser-viewport{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a16;
}
/* live iframe scaled to look like a thumbnail */
.browser-viewport iframe{
  position:absolute; top:0; left:0;
  width:1440px; height:900px;
  transform: scale(.42); transform-origin: top left;
  border:0; pointer-events:none; background:#fff;
}
@media(max-width:900px){ .browser-viewport iframe{ transform:scale(.34); } }
@media(max-width:560px){ .browser-viewport iframe{ transform:scale(.5); width:760px; height:520px; } }
/* click overlay so whole card is clickable to the live site */
.browser-viewport .live-overlay{
  position:absolute; inset:0; z-index:2; cursor:pointer;
  background:linear-gradient(180deg, rgba(10,8,22,0) 60%, rgba(10,8,22,.25));
}
/* fallback image shown until iframe loads / if blocked */
.browser-viewport .prev-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}

/* Portfolio card wrapper using browser frame */
.portfolio-card{
  display:block; text-decoration:none;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.portfolio-card:hover{ transform: translateY(-8px); }
.portfolio-card:hover .browser-frame{ border-color: rgba(255,112,187,.55); box-shadow:0 30px 70px rgba(130,60,230,.36); }
.portfolio-meta{ padding:16px 6px 0; }
.portfolio-meta h3{ margin:0 0 3px; font-size:19px; color:#f3e9ff; }
.portfolio-meta p{ margin:0; color:#c2b6dc; font-size:14px; }
.portfolio-meta .open-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-weight:800; font-size:13px;
  background:linear-gradient(110deg,#9f5cff,#ff70bb); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}


/* ============ Process steps — galaxy theme (v6 fix) ============ */
.process-steps .step{
  background: linear-gradient(165deg, rgba(22,16,46,.78), rgba(12,10,28,.72)) !important;
  border: 1px solid rgba(198,127,255,.22) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.process-steps .step:hover{
  transform: translateY(-6px);
  border-color: rgba(255,112,187,.5) !important;
  box-shadow: 0 22px 55px rgba(120,60,220,.3) !important;
}
.process-steps .step-number{
  background: linear-gradient(135deg,#9f5cff,#ff70bb) !important;
  box-shadow: 0 8px 22px rgba(159,92,255,.4);
  font-weight: 900;
}
.process-steps .step h3{ color:#f3e9ff !important; }
.process-steps .step p{ color:#c4b8de !important; }

/* ============ Contact hero + FAQ (v6) ============ */
.contact-hero{ min-height: 56vh; }
.contact-hero::before{
  background: linear-gradient(115deg, rgba(12,8,32,.9), rgba(20,12,48,.55) 50%, rgba(255,112,187,.14)),
              radial-gradient(ellipse at 76% 32%, rgba(159,92,255,.34), transparent 58%),
              url("../images/hero1.jpg") !important;
  background-size: cover !important; background-position: center !important;
}
.contact-hero h1{ font-size: clamp(32px,4.4vw,54px) !important; font-weight:700 !important; line-height:1.12; }

.faq-list{ max-width: 800px; margin-top: 8px; }
.faq-item{
  background: linear-gradient(165deg, rgba(22,16,46,.7), rgba(12,10,28,.66));
  border: 1px solid rgba(198,127,255,.2);
  border-radius: 14px; margin-bottom: 12px; padding: 4px 20px;
  transition: border-color .25s ease;
}
.faq-item[open]{ border-color: rgba(255,112,187,.45); }
.faq-item summary{
  cursor:pointer; padding: 16px 0; font-weight:700; color:#f3e9ff; font-size:16px;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; color:#ff70bb; font-weight:400; transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0 0 16px; color:#c4b8de; line-height:1.6; }
.faq-item a{ color:#e6a2ff; }


/* ============ Homepage class & breathing room (v6) ============ */
.section.benefits, .section.mission, .section.process, .section.pricing-overview{ padding: 88px 0; }
.benefits-grid{ gap: 22px; }
.benefit{
  background: linear-gradient(165deg, rgba(22,16,46,.62), rgba(12,10,28,.58)) !important;
  border: 1px solid rgba(198,127,255,.16) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
}
.benefit strong{
  display:block; margin-bottom:10px; font-size:17px; color:#f5eeff;
  font-weight:800; letter-spacing:-.2px;
}
.benefit p{ color:#bcb0d8; line-height:1.6; font-size:14.5px; }
/* softer, more elegant hero */
.hero p{ font-size: 19px; line-height: 1.6; }
.hero-trust{ margin-top: 30px; gap: 12px 26px; }
/* section headings more refined */
.section h2{ letter-spacing:-.5px; margin-bottom: 10px; }
.section p.lead{ font-size: 17px; max-width: 62ch; }


/* ============ Footer fixes (v7) ============ */
.footer{ background: rgba(4,4,14,.9); margin-top: 40px; }
.footer-inner{ color: rgba(233,228,245,.82); }
.footer-copy{ color: rgba(233,228,245,.82); font-size: 14px; }
.footer-links{ font-size: 14px; }
.footer-links a{ color: rgba(233,228,245,.9); text-decoration: none; }
.footer-links a:hover{ color: #ff9bd6; text-decoration: underline; }

/* Spacing so last section isn't glued to footer */
main > section:last-of-type,
body > section:last-of-type{ padding-bottom: 84px; }

/* Remove divider lines between sections (user dislikes them) */
.section{ border-top: none !important; border-bottom: none !important; }
.section + .section{ border-top: none !important; }
hr{ display:none; }

/* ============ Hero text clipping fix (v7) ============ */
/* background-clip:text can cut descenders — add breathing room */
.hero h1, .ngo-hero h1, .gallery-hero h1, .contact-hero h1{
  padding-bottom: 0.12em;
  line-height: 1.15 !important;
  overflow: visible;
}
h1, h2{ padding-bottom: 0.06em; }
/* ensure hero content column has room and isn't clipped */
.hero-inner{ overflow: visible; }
.hero{ overflow: visible; }