/* Homepage-only styles (index.php) */
/* Hero */
.hero { position:relative; padding:120px 0 100px; overflow:hidden; }
.hero-bg {
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(15,111,255,.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 60%, rgba(0,212,170,.12) 0%, transparent 60%);
}
.hero-grid {
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.hero-content { position:relative;text-align:center;max-width:760px;margin:auto; }
.hero-title { font-size:clamp(2.4rem,6vw,4rem);font-weight:900;line-height:1.1;margin-bottom:22px; }
.hero-title .line2 { color:var(--primary); }
.hero-small { color:var(--muted);font-size:1rem;font-weight:700;letter-spacing:.02em;margin:-8px 0 20px; }
.hero-sub { color:var(--muted);font-size:1.15rem;max-width:600px;margin:0 auto 40px; }
/* Bolded key terms — "web development" & "site design" pop against muted copy */
.hero-sub strong, .section-sub strong { color:var(--white);font-weight:800; }
.cta-section p strong { color:var(--white);font-weight:800; }
.hero-btns { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.hero-visual { position:relative;max-width:900px;margin:64px auto 0;padding:0; }
.hero-visual img { width:100%;height:auto;display:block;border-radius:16px; }
.hero-stats { display:flex;justify-content:center;gap:48px;margin-top:56px;flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num { font-size:2rem;font-weight:900;color:var(--white); }
.stat-num span { color:var(--primary); }
.stat-lbl { color:var(--muted);font-size:.85rem;margin-top:4px; }

/* Trust bar */
.trust-bar { background:var(--dark2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;overflow:hidden; }
.marquee-track { display:flex;gap:60px;white-space:nowrap;animation:marquee 22s linear infinite; }
.marquee-item { display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600;font-size:.9rem;flex-shrink:0; }
.marquee-icon { font-size:1.2rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Services */
/* Intro / about prose */
#about { padding-bottom:40px; }
.about-intro { max-width:860px; margin:0 auto; }
.about-intro .section-title { margin-bottom:32px; }
.about-intro p { color:var(--muted); font-size:1.02rem; line-height:1.85; margin-bottom:20px; }
.about-intro p:last-child { margin-bottom:0; }

.services-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px; }
.service-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;transition:transform .25s,box-shadow .25s; }
.service-card:hover { transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--primary); }
.service-icon { width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,rgba(15,111,255,.18),rgba(0,212,170,.12));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px; }
.service-title { font-size:1.15rem;font-weight:800;margin-bottom:10px; }
$1.service-more { display:inline-block;margin-top:14px;font-size:.88rem;font-weight:700;color:var(--primary-text); }
.service-more:hover { text-decoration:underline; }

/* Dev section */
.dev-layout { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center; }
.dev-features-list { list-style:none;margin-bottom:36px; }
.dev-features-list li { display:flex;gap:14px;margin-bottom:20px; }
.dev-icon-wrap { width:42px;height:42px;border-radius:10px;background:rgba(15,111,255,.15);border:1px solid rgba(15,111,255,.25);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0; }
.dev-feat-title { font-weight:700;font-size:.95rem;margin-bottom:4px; }
.dev-feat-desc { color:var(--muted);font-size:.88rem; }
.code-window { background:#0d1117;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); }
.code-topbar { display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161b22;border-bottom:1px solid var(--border); }
.dot { width:11px;height:11px;border-radius:50%; }
.dot-r{background:#ff5f57} .dot-y{background:#febc2e} .dot-g{background:#28c840}
.code-tabs { display:flex;gap:2px;margin-left:12px; }
.code-tab { font-size:.75rem;padding:3px 12px;border-radius:4px 4px 0 0;color:var(--muted); }
.code-tab.active { background:#1c2333;color:var(--white); }
.code-body { padding:24px;font-family:'Cascadia Code','Fira Code','Consolas',monospace;font-size:.82rem;line-height:1.8; }
.c-kw{color:#ff7b72} .c-fn{color:#d2a8ff} .c-str{color:#a5d6ff} .c-cm{color:#8b949e} .c-num{color:#f0883e} .c-prop{color:#79c0ff} .c-acc{color:#56d364}

/* Process */
.process-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;position:relative; }
.process-grid::before { content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.35; }
.process-step { text-align:center;position:relative;padding-top:16px; }
.step-num { width:54px;height:54px;border-radius:50%;background:var(--card);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:900;color:var(--primary);margin:0 auto 18px; }
.step-title { font-weight:700;margin-bottom:8px; }
.step-desc { color:var(--muted);font-size:.88rem; }

/* Hosting teaser */
.hosting-teaser { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; }
.hosting-teaser-chips { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.hosting-chip { display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-size:.9rem;font-weight:600; }
.hosting-chip span { font-size:1.2rem; }

/* Testimonials */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px; }
.testi-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:transform .25s; }
.testi-card:hover { transform:translateY(-4px); }
.stars { color:#fbbf24;font-size:1rem;margin-bottom:14px;letter-spacing:2px; }
.testi-text { font-size:.93rem;color:var(--text);margin-bottom:20px;line-height:1.7; }
.testi-author { display:flex;align-items:center;gap:12px; }
.testi-avatar { width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0; }
.av1{background:linear-gradient(135deg,#0f6fff,#00d4aa)} .av2{background:linear-gradient(135deg,#a855f7,#ec4899)} .av3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.testi-name { font-weight:700;font-size:.93rem; }
.testi-role { color:var(--muted);font-size:.8rem; }

/* FAQ */
.faq-list { max-width:740px;margin:auto; }
.faq-item { border:1px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden;background:var(--card); }
.faq-q { padding:18px 22px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:.95rem;user-select:none;transition:background .2s; }
.faq-q:hover { background:rgba(255,255,255,.04); }
.faq-arrow { font-size:1.1rem;transition:transform .3s;color:var(--muted); }
.faq-body { max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s;color:var(--muted);font-size:.92rem;line-height:1.7; }
.faq-body-inner { padding:0 22px 20px; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-item.open .faq-body { max-height:300px; }

/* CTA */
.cta-section { padding:96px 0;background:linear-gradient(135deg,rgba(15,111,255,.18) 0%,rgba(0,212,170,.1) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center; }
.cta-section .section-title { font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:18px; }
.cta-section p { color:var(--muted);font-size:1.05rem;max-width:560px;margin:0 auto 40px; }

@media (max-width:900px) { .dev-layout,.hosting-teaser{grid-template-columns:1fr} .process-grid::before{display:none} }
@media (max-width:640px) { .hero-stats{gap:28px} .hero-visual{margin-top:40px} }