/* ═══════════════════════════════════════════════════
   Zerone Technology — Light Theme
   Brand colors: #11A083 · #056D7B · #5B5B5B
   Font: Montserrat (Gotham Pro substitute)
═══════════════════════════════════════════════════ */

/* ── Reset & Design tokens ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:        #ffffff;
  --bg2:       #f3f9f7;
  --bg3:       #e6f4f1;
  --card:      #ffffff;
  --accent:    #11A083;
  --accent2:   #056D7B;
  --cyan:      #11A083;   /* remaps --cyan to brand green */
  --dark:      #5B5B5B;
  --text:      #1a2b29;
  --muted:     #6b7b79;
  --border:    rgba(17,160,131,0.14);
  --shadow:  0 4px 24px rgba(5,109,123,0.09);
  --shadow-lg: 0 12px 40px rgba(5,109,123,0.13);
  --radius:  16px;
  --radius-sm: 10px;
  --t:       0.25s ease;
}

html { scroll-behavior:smooth; }
body {
  font-family:'Montserrat','Inter',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; font-size:16px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
section { padding:80px 60px; }
ul { list-style:none; }

/* ── Gradient text ── */
.grad, .gtext {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
.main-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 60px; height:68px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t);
}
.main-nav.scrolled { box-shadow:0 2px 20px rgba(5,109,123,0.1); }

.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.05rem; letter-spacing:-.02em; color:var(--text);
}
.nav-logo img { height:36px; }

.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
  font-size:.83rem; font-weight:600; color:var(--muted);
  letter-spacing:.01em; transition:color var(--t); position:relative;
}
.nav-links a:not(.btn-nav):hover,
.nav-links a:not(.btn-nav).active { color:var(--accent); }
.nav-links a:not(.btn-nav).active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--accent); border-radius:2px;
}
.btn-nav {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  color:#fff !important; padding:10px 22px; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(17,160,131,0.28);
  transition:opacity var(--t), transform var(--t), box-shadow var(--t);
}
.btn-nav:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 20px rgba(17,160,131,0.38) !important; }
.btn-nav.active::after { display:none !important; }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.burger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:var(--t); }

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:999;
  background:rgba(255,255,255,0.98); backdrop-filter:blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; opacity:0; pointer-events:none; transition:opacity var(--t);
}
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a { font-size:1.4rem; font-weight:700; color:var(--text); transition:color var(--t); }
.mobile-menu a:hover { color:var(--accent); }
.close-menu { position:absolute; top:24px; right:24px; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--muted); }

/* ══════════════════════════════════
   HERO (index.html)
══════════════════════════════════ */
#hero {
  background:#ffffff !important;
}
#hero .hb1 {
  background:var(--accent) !important;
  opacity:.07 !important;
}
#hero .hb2 {
  background:var(--accent2) !important;
  opacity:.05 !important;
}
.orbit {
  border-color:rgba(17,160,131,0.12) !important;
}
.hero-tag {
  background:rgba(17,160,131,0.1) !important;
  border-color:rgba(17,160,131,0.22) !important;
  color:var(--accent2) !important;
}
.hero-inner h1 { color:var(--text); }
.hero-desc { color:var(--muted) !important; }
.hero-stats { border-top-color:var(--border) !important; }
.hstat span {
  background:linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
}
.hstat p { color:var(--muted); }

/* ══════════════════════════════════
   PAGE BANNER (inner pages)
══════════════════════════════════ */
.page-banner {
  padding:120px 60px 64px;
  background:linear-gradient(135deg, var(--bg2) 0%, #daeee9 100%) !important;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.b1 { background:radial-gradient(circle, rgba(17,160,131,0.12) 0%, transparent 70%) !important; }
.b2 { background:radial-gradient(circle, rgba(5,109,123,0.08) 0%, transparent 70%) !important; }
.page-banner-inner h1 { color:var(--text); }
.page-banner-inner p { color:var(--muted); }
.page-tag {
  background:rgba(17,160,131,0.1) !important;
  border:1px solid rgba(17,160,131,0.22) !important;
  color:var(--accent2) !important;
}

/* ══════════════════════════════════
   SECTION LABELS & TITLES
══════════════════════════════════ */
.section-label { color:var(--accent) !important; }
.section-title { color:var(--text); }
.section-header p { color:var(--muted); }

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn-primary {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; box-shadow:0 6px 20px rgba(17,160,131,0.28);
}
.btn-primary:hover { box-shadow:0 10px 28px rgba(17,160,131,0.38); transform:translateY(-2px); }

.btn-outline {
  border-color:var(--accent) !important; color:var(--accent) !important;
}
.btn-outline:hover { background:rgba(17,160,131,0.06) !important; transform:translateY(-2px); }

/* Pricing buttons */
.btn-price-o {
  border-color:var(--border) !important; color:var(--text) !important;
}
.btn-price-o:hover {
  border-color:var(--accent) !important;
  background:rgba(17,160,131,0.08) !important;
}
.btn-price-f {
  background:linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color:#fff !important;
  box-shadow:0 6px 20px rgba(17,160,131,0.28) !important;
}
.btn-price-f:hover { box-shadow:0 10px 28px rgba(17,160,131,0.42) !important; }

/* ══════════════════════════════════
   SERVICES GRID
══════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card-home, .svc-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:32px 28px;
  transition:all var(--t); position:relative; overflow:hidden;
}
.svc-card-home:hover, .svc-card:hover {
  border-color:rgba(17,160,131,0.3) !important;
  box-shadow:var(--shadow); transform:translateY(-3px);
}
.svc-icon {
  background:linear-gradient(135deg,rgba(17,160,131,0.12),rgba(5,109,123,0.12)) !important;
}
.svc-card-home h3, .svc-card h3 { color:var(--text); }
.svc-tag { color:var(--accent) !important; }
.svc-more { color:var(--accent2) !important; }

/* Services detail page */
.services-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.svc-card-icon {
  background:linear-gradient(135deg,rgba(17,160,131,0.12),rgba(5,109,123,0.12)) !important;
}
.svc-chip {
  background:rgba(17,160,131,0.1) !important;
  color:var(--accent2) !important;
  border-color:rgba(17,160,131,0.2) !important;
}

/* Process steps */
.step-num {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(17,160,131,0.25) !important;
}

/* ══════════════════════════════════
   REVIEWS
══════════════════════════════════ */
.reviews-section { background:var(--bg2) !important; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:32px 28px;
  transition:box-shadow var(--t), transform var(--t);
  box-shadow:none;
}
.review-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.review-stars { color:var(--accent) !important; }
.review-text { color:var(--muted) !important; }
.review-avatar {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
}
.review-name { color:var(--text) !important; }
.review-role { color:var(--muted) !important; }

/* ══════════════════════════════════
   PHILOSOPHY / MISSION
══════════════════════════════════ */
.philosophy-block, .mission-section {
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}
.phil-quote-mark { color:var(--accent) !important; opacity:.25 !important; }
.phil-stat strong {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
}
.rank-badge {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
}

/* ══════════════════════════════════
   PARTNERS
══════════════════════════════════ */
.partners-section {
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}
.partners-label { color:var(--muted) !important; }
.partner-chip {
  background:var(--bg2) !important; border-color:var(--border) !important;
  color:var(--muted) !important;
}
.partner-chip:hover { border-color:var(--accent) !important; color:var(--accent) !important; background:rgba(17,160,131,0.05) !important; }

/* ══════════════════════════════════
   PRICING
══════════════════════════════════ */
.price-card {
  background:var(--card) !important; border-color:var(--border) !important;
}
.price-card:hover { box-shadow:var(--shadow-lg) !important; transform:translateY(-5px); }
.price-card.pop {
  background:linear-gradient(135deg,rgba(17,160,131,0.06),rgba(5,109,123,0.04)) !important;
  border-color:rgba(17,160,131,0.35) !important;
  box-shadow:0 8px 32px rgba(17,160,131,0.12) !important;
}
.pop-badge {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
}
.price-name { color:var(--accent2) !important; }
.price-val { color:var(--text) !important; }
.price-feats li { color:var(--muted) !important; }
.price-feats li::before { color:var(--accent) !important; }

/* ══════════════════════════════════
   CONTACT FORM
══════════════════════════════════ */
.contact-item h5 { color:var(--muted) !important; }
.contact-item a, .contact-item p { color:var(--text) !important; }
.contact-item a:hover { color:var(--accent) !important; }
.contact-icon {
  background:linear-gradient(135deg,rgba(17,160,131,0.12),rgba(5,109,123,0.1)) !important;
}
.soc-btn {
  background:var(--bg2) !important; border-color:var(--border) !important; color:var(--muted) !important;
}
.soc-btn:hover { border-color:var(--accent) !important; color:var(--accent) !important; background:rgba(17,160,131,0.06) !important; }

.contact-form-wrap, .contacts-page-grid { color:var(--text); }
.form-group label { color:var(--muted) !important; }
.form-group input, .form-group select, .form-group textarea {
  background:var(--bg2) !important; border-color:var(--border) !important;
  color:var(--text) !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(17,160,131,0.1) !important;
}
.form-group select option { background:#fff; color:var(--text); }

/* Contact page specific */
.contact-card {
  background:var(--card) !important; border-color:var(--border) !important;
  box-shadow:none;
}
.contact-card:hover { border-color:rgba(17,160,131,0.3) !important; box-shadow:var(--shadow) !important; }
.contact-card-icon {
  background:linear-gradient(135deg,rgba(17,160,131,0.12),rgba(5,109,123,0.1)) !important;
}
.contact-card h4 { color:var(--muted) !important; }
.contact-card a, .contact-card p { color:var(--text) !important; }
.contact-card a:hover { color:var(--accent) !important; }

.soc-card {
  background:var(--bg2) !important; border-color:var(--border) !important; color:var(--muted) !important;
}
.soc-card:hover { border-color:var(--accent) !important; color:var(--accent) !important; background:rgba(17,160,131,0.06) !important; }

/* FAQ */
.faq-section { background:var(--bg2) !important; }
.faq-item { background:var(--card) !important; border-color:var(--border) !important; }
.faq-q { color:var(--text) !important; }
.faq-q:hover { background:rgba(17,160,131,0.04) !important; }
.faq-icon { color:var(--accent) !important; }
.faq-a { color:var(--muted) !important; }

/* Map */
.map-section { background:var(--bg) !important; }
.map-label { color:var(--accent2) !important; }
.map-title { color:var(--text) !important; }
.map-frame { border-color:var(--border) !important; }

/* ══════════════════════════════════
   STATS ROW
══════════════════════════════════ */
.stats-row {
  background:var(--bg3) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}
.stat-box { border-right-color:var(--border) !important; }
.stat-box strong {
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important;
}
.stat-box span { color:var(--muted) !important; }

/* ══════════════════════════════════
   CTA SECTION
══════════════════════════════════ */
.cta-section {
  background:linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%) !important;
}
.cta-section h2 { color:#fff; }
.cta-section p { color:rgba(255,255,255,0.82) !important; }
.cta-section .btn-primary {
  background:rgba(255,255,255,0.18) !important;
  border:1.5px solid rgba(255,255,255,0.4) !important;
  box-shadow:none !important;
}
.cta-section .btn-primary:hover { background:rgba(255,255,255,0.28) !important; }
.cta-section .btn-outline {
  border-color:rgba(255,255,255,0.6) !important;
  color:#fff !important;
}
.cta-section .btn-outline:hover { background:rgba(255,255,255,0.12) !important; }

/* ══════════════════════════════════
   BLOG
══════════════════════════════════ */
.blog-card {
  background:var(--card) !important; border-color:var(--border) !important;
}
.blog-card:hover { box-shadow:var(--shadow) !important; transform:translateY(-3px); border-color:rgba(17,160,131,0.28) !important; }
.blog-tag-chip {
  background:rgba(17,160,131,0.1) !important;
  color:var(--accent2) !important;
}
.blog-body h3 { color:var(--text) !important; }
.blog-body p { color:var(--muted) !important; }
.blog-read { color:var(--accent) !important; }
.blog-meta { color:var(--muted) !important; }

/* Blog hero card */
.blog-hero-card {
  background:var(--card) !important; border-color:var(--border) !important;
}
.blog-hero-card:hover { border-color:rgba(17,160,131,0.3) !important; }
.blog-hero-img { background:linear-gradient(135deg, var(--bg3), var(--bg2)) !important; }
.blog-hero-body h2 { color:var(--text) !important; }
.blog-hero-body p { color:var(--muted) !important; }
.blog-hero-meta { color:var(--muted) !important; }

/* Blog thumbnail backgrounds (light-friendly) */
.blog-thumb-bg-1 { background:linear-gradient(135deg,rgba(17,160,131,0.15),rgba(5,109,123,0.22)) !important; }
.blog-thumb-bg-2 { background:linear-gradient(135deg,rgba(5,109,123,0.12),rgba(17,160,131,0.18)) !important; }
.blog-thumb-bg-3 { background:linear-gradient(135deg,rgba(17,160,131,0.1),rgba(91,91,91,0.14)) !important; }
.blog-thumb-bg-4 { background:linear-gradient(135deg,rgba(91,91,91,0.12),rgba(17,160,131,0.14)) !important; }
.blog-thumb-bg-5 { background:linear-gradient(135deg,rgba(5,109,123,0.14),rgba(17,160,131,0.1)) !important; }

/* ══════════════════════════════════
   PORTFOLIO
══════════════════════════════════ */
.pf-card {
  background:var(--bg3) !important; border-color:var(--border) !important;
}
.pf-ph {
  color:rgba(17,160,131,0.12) !important;
  background:linear-gradient(135deg,var(--bg3),var(--bg2)) !important;
}
.pf-overlay { background:linear-gradient(to top,rgba(5,40,35,.9) 0%,transparent 60%) !important; }
.pf-cat { background:rgba(17,160,131,0.85) !important; color:#fff !important; }
.pf-overlay h4 { color:#fff; }
.pf-overlay span { color:rgba(17,255,200,0.85) !important; }

/* Filter bar */
.filter-btn { border-color:var(--border) !important; color:var(--muted) !important; }
.filter-btn.active, .filter-btn:hover { border-color:var(--accent) !important; color:var(--text) !important; background:rgba(17,160,131,0.08) !important; }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.main-footer { background:var(--text) !important; }
.footer-desc { color:rgba(255,255,255,0.45) !important; }
.footer-col h6 { color:rgba(255,255,255,0.35) !important; }
.footer-col a { color:rgba(255,255,255,0.6) !important; }
.footer-col a:hover { color:var(--accent) !important; }
.footer-bottom { color:rgba(255,255,255,0.3) !important; }
.footer-top { border-bottom-color:rgba(255,255,255,0.08) !important; }

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════
   BACK TO TOP
══════════════════════════════════ */
#back-top {
  position:fixed; bottom:28px; right:28px; z-index:99;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(17,160,131,0.3);
  opacity:0; pointer-events:none;
  transition:opacity var(--t), transform var(--t);
}
#back-top svg { width:18px; height:18px; stroke:currentColor; }
#back-top.visible { opacity:1; pointer-events:all; }
#back-top:hover { transform:translateY(-3px); }

/* ══════════════════════════════════
   PROJECT DETAIL PAGE
══════════════════════════════════ */
.proj-hero { background:linear-gradient(135deg, var(--bg2) 0%, #dceae7 100%) !important; }
.proj-hero h1 { color:var(--text); }
.proj-breadcrumb a { color:var(--muted) !important; }
.proj-tag {
  background:rgba(17,160,131,0.1) !important;
  border-color:rgba(17,160,131,0.22) !important;
  color:var(--accent2) !important;
}
.proj-meta-item h6 { color:var(--muted) !important; }
.proj-meta-item p { color:var(--text) !important; }
.proj-hero-visual { background:var(--card) !important; border-color:var(--border) !important; box-shadow:0 20px 60px rgba(5,109,123,0.12) !important; }
.browser-bar { background:var(--bg2) !important; border-color:var(--border) !important; }
.results-strip { background:var(--border) !important; border-color:var(--border) !important; }
.result-cell { background:var(--bg2) !important; }
.result-cell span { color:var(--muted) !important; }
.proj-section { background:var(--bg) !important; }
.proj-section.alt { background:var(--bg2) !important; }
.col-label { color:var(--accent2) !important; }
.col-h2 { color:var(--text) !important; }
.col-text { color:var(--muted) !important; }
.check-icon { background:linear-gradient(135deg,var(--accent),var(--accent2)) !important; }
.proj-mockup { background:var(--bg3) !important; border-color:var(--border) !important; }
.mock-cell { background:rgba(17,160,131,0.06) !important; border-color:rgba(17,160,131,0.12) !important; }
.mock-cell.accent { background:linear-gradient(135deg,rgba(17,160,131,0.14),rgba(5,109,123,0.1)) !important; }
.tech-card { background:var(--card) !important; border-color:var(--border) !important; }
.tech-card:hover { border-color:rgba(17,160,131,0.35) !important; box-shadow:var(--shadow) !important; }
.tech-card h5 { color:var(--text) !important; }
.tech-card p { color:var(--muted) !important; }
.tl-dot { background:linear-gradient(135deg,var(--accent),var(--accent2)) !important; box-shadow:0 0 0 4px var(--bg2) !important; }
.tl-body h5 { color:var(--text) !important; }
.tl-body p { color:var(--muted) !important; }
.timeline::before { background:var(--border) !important; }
.next-proj { background:var(--card) !important; border-color:var(--border) !important; }
.next-proj:hover { border-color:rgba(17,160,131,0.4) !important; box-shadow:var(--shadow) !important; }
.next-proj-label { color:var(--muted) !important; }
.next-proj-title { color:var(--text) !important; }
.next-proj-arr { background:linear-gradient(135deg,var(--accent),var(--accent2)) !important; }

/* ══════════════════════════════════
   MISC FIXES
══════════════════════════════════ */
/* Services process step hover */
.step:hover { background:rgba(17,160,131,0.04) !important; }
.step-num { color:var(--accent) !important; font-weight:800 !important; }

/* Proj mockup placeholder letter → teal tint */
.proj-mockup .big-letter { color:rgba(17,160,131,0.1) !important; }
.pf-ph { color:rgba(17,160,131,0.14) !important; }

/* Breadcrumb separator */
.proj-breadcrumb span { color:var(--border) !important; }

/* Blog hero meta link */
.blog-hero-meta span[style] { color:var(--accent) !important; }

/* Generic section backgrounds from inline style attr */
section[style*="var(--bg2)"] { background:var(--bg2) !important; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1024px){
  section { padding:60px 32px; }
  .main-nav { padding:0 32px; }
  .page-banner { padding:100px 32px 52px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  section { padding:52px 20px; }
  .main-nav { padding:0 20px; }
  .page-banner { padding:88px 20px 44px; }
  .burger { display:flex !important; }
  .nav-links { display:none !important; }
  .services-grid { grid-template-columns:1fr; }
  .reviews-grid { grid-template-columns:1fr; }
}