/*
Theme Name:  TechIntegry
Theme URI:   https://techintegry.com
Description: Integration Technology — Smart ERP & AI Solutions
Version:     2.0.0
Author:      TechIntegry
License:     GPL-2.0-or-later
Text Domain: techintegry
*/

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
  --primary:       #3D3DE8;
  --primary-dark:  #2929C8;
  --primary-light: #EEEEFF;
  --text-dark:     #111827;
  --text-body:     #374151;
  --text-muted:    #6B7280;
  --bg:            #FFFFFF;
  --bg-light:      #F9FAFB;
  --border:        #E5E7EB;
  --border-dark:   #D1D5DB;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,.07);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.10);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;
  --font:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --container:     1200px;
  --header-h:      72px;
  --section-py:    96px;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--text-body); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
svg { display: block; }

/* =============================================================
   3. TYPOGRAPHY
   ============================================================= */
h1,h2,h3,h4,h5 { font-weight: 700; color: var(--text-dark); line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.625rem); }
h3 { font-size: clamp(1.0625rem, 2vw, 1.25rem); }
h4 { font-size: 1.0625rem; }
p  { line-height: 1.7; color: var(--text-body); }
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.text-primary { color: var(--primary); }

/* =============================================================
   4. LAYOUT
   ============================================================= */
.container       { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1400px; }
.section    { padding-block: var(--section-py); }
.section-sm { padding-block: 56px; }
.section-lg { padding-block: 120px; }
.section-bg { background: var(--bg-light); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.gap-2 { gap:16px; }
.gap-3 { gap:24px; }

/* =============================================================
   5. BADGE
   ============================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary);
  font-size: .8125rem; font-weight: 600;
  padding: 5px 14px; border-radius: var(--radius-full);
}

/* =============================================================
   6. BUTTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .9375rem;
  padding: 12px 28px; border-radius: var(--radius-full);
  cursor: pointer; border: 2px solid transparent;
  transition: all .18s ease; white-space: nowrap; text-decoration: none;
}
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(61,61,232,.35); }
.btn-ghost  { background:transparent; color:var(--text-dark); border-color:var(--border-dark); }
.btn-ghost:hover  { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.btn-outline-white { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn-sm { padding:8px 20px; font-size:.875rem; }
.btn-lg { padding:15px 36px; font-size:1rem; }

/* =============================================================
   7. CARDS
   ============================================================= */
.card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; transition:box-shadow .2s,transform .2s; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.img-placeholder {
  background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-md);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.875rem; overflow:hidden;
}
.img-placeholder img { width:100%; height:100%; object-fit:cover; }

/* =============================================================
   8. FORMS
   ============================================================= */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:.875rem; font-weight:500; color:var(--text-dark); }
.form-input,.form-textarea,.form-select {
  width:100%; padding:11px 16px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text-dark); font-size:.9375rem;
  transition:border-color .15s; outline:none;
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted); }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(61,61,232,.1); }
.form-textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* =============================================================
   9. HEADER
   ============================================================= */
#site-header {
  position:sticky; top:0; z-index:1000;
  background:var(--bg); height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
#site-header.scrolled { border-bottom-color:var(--border); box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; height:var(--header-h); gap:32px; }

/* Logo */
.site-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; }
.logo-icon { width:32px; height:32px; background:var(--primary); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-icon svg { color:#fff; }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1.15; }
.logo-text-top { font-size:.8rem; font-weight:800; color:var(--primary); letter-spacing:.04em; text-transform:uppercase; }
.logo-text-bot { font-size:.65rem; font-weight:600; color:var(--text-dark); letter-spacing:.06em; text-transform:uppercase; }

/* Nav */
.primary-nav { display:flex; align-items:center; gap:4px; flex:1; }
.primary-nav > a { font-size:.9375rem; font-weight:500; color:var(--text-body); padding:8px 14px; border-radius:var(--radius-sm); transition:color .15s,background .15s; }
.primary-nav > a:hover,.primary-nav > a.current { color:var(--primary); background:var(--primary-light); }

/* Header right */
.header-right { display:flex; align-items:center; gap:14px; margin-inline-start:auto; flex-shrink:0; }
.lang-link { font-size:.9rem; font-weight:600; color:var(--text-muted); transition:color .15s; }
.lang-link:hover { color:var(--primary); }

/* Mobile toggle */
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--text-dark); border-radius:2px; transition:all .2s; }

/* =============================================================
   10. FOOTER
   ============================================================= */
#site-footer { background:var(--bg); border-top:1px solid var(--border); padding-top:60px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:48px; padding-bottom:48px; }
.footer-social { display:flex; gap:12px; margin-top:20px; }
.footer-social a {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:all .15s;
}
.footer-social a:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.footer-col h5 { font-size:.9375rem; font-weight:700; color:var(--text-dark); margin-bottom:18px; }
.footer-col ul { display:flex; flex-direction:column; gap:11px; }
.footer-col ul a { font-size:.9rem; color:var(--text-muted); transition:color .15s; }
.footer-col ul a:hover { color:var(--primary); }
.footer-bottom { border-top:1px solid var(--border); padding:20px 0; display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p { font-size:.875rem; color:var(--text-muted); }
.footer-lang { display:flex; gap:16px; }
.footer-lang a { font-size:.875rem; color:var(--text-muted); font-weight:500; transition:color .15s; }
.footer-lang a:hover,.footer-lang a.active { color:var(--primary); }

/* =============================================================
   11. HERO (homepage)
   ============================================================= */
.hero { padding:80px 0 64px; text-align:center; }
.hero .badge { margin-bottom:24px; }
.hero h1 { max-width:760px; margin-inline:auto; margin-bottom:20px; }
.hero-sub { max-width:580px; margin-inline:auto; margin-bottom:36px; font-size:1.0625rem; color:var(--text-muted); }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }
.hero-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.hero-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; background:var(--bg); }
.hero-card-img { background:var(--bg-light); border-radius:var(--radius-md); height:160px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-card h4 { margin-bottom:8px; font-size:1rem; }
.hero-card p  { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   12. SECTION HEADER
   ============================================================= */
.section-header { text-align:center; margin-bottom:52px; }
.section-header .badge { margin-bottom:16px; }
.section-header h2 { margin-bottom:12px; }
.section-header p  { max-width:520px; margin-inline:auto; color:var(--text-muted); font-size:1.0625rem; }
.section-header--left { text-align:left; }
.section-header--left p { margin-inline:0; }

/* =============================================================
   13. SERVICES GRID (homepage)
   ============================================================= */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.service-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--bg); transition:box-shadow .2s,transform .2s; }
.service-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.service-icon { width:44px; height:44px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--primary); }
.service-card h3 { font-size:1rem; margin-bottom:8px; }
.service-card p  { font-size:.875rem; color:var(--text-muted); line-height:1.6; margin-bottom:16px; }
.learn-more { font-size:.875rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px; transition:gap .15s; }
.learn-more:hover { gap:10px; }

/* =============================================================
   14. STATS / IMPACT
   ============================================================= */
.stats-section { background:var(--primary); border-radius:var(--radius-xl); padding:72px 56px; text-align:center; color:#fff; }
.stats-section .section-header .badge { background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); }
.stats-section .section-header h2 { color:#fff; }
.stats-section .section-header p  { color:rgba(255,255,255,.7); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:40px; }
.stat-number { font-size:clamp(2.5rem,5vw,3.75rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.03em; margin-bottom:8px; }
.stat-label  { font-size:.9375rem; color:rgba(255,255,255,.7); }

/* =============================================================
   15. WHY US
   ============================================================= */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--bg); }
.why-num  { font-size:1.5rem; font-weight:800; color:var(--primary); margin-bottom:12px; line-height:1; }
.why-card h3 { font-size:1.0625rem; margin-bottom:8px; }
.why-card p  { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   16. TESTIMONIALS
   ============================================================= */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testimonial-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--bg); }
.testimonial-text { font-size:.9375rem; color:var(--text-body); line-height:1.7; margin-bottom:20px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary); font-size:.875rem; flex-shrink:0; overflow:hidden; }
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; }
.testimonial-name  { font-size:.9rem; font-weight:600; color:var(--text-dark); }
.testimonial-title { font-size:.8125rem; color:var(--text-muted); }

/* =============================================================
   17. CONTACT SECTION
   ============================================================= */
.contact-section-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; }
.contact-section-left .badge { margin-bottom:16px; }
.contact-section-left h2 { margin-bottom:16px; }
.contact-section-left > p { color:var(--text-muted); margin-bottom:32px; font-size:1.0625rem; }
.contact-form-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-md); }
.contact-form-card .form-group { margin-bottom:16px; }
.contact-quote-link { display:flex; align-items:center; gap:12px; font-size:.9375rem; font-weight:600; color:var(--text-dark); }
.email-pill { background:var(--bg-light); border:1px solid var(--border); padding:5px 12px; border-radius:var(--radius-full); font-size:.875rem; color:var(--primary); font-weight:500; }

/* =============================================================
   18. PARTNERS
   ============================================================= */
.partners-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:32px 0; }
.partners-logos { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.partner-logo { height:32px; opacity:.45; filter:grayscale(1); transition:opacity .2s,filter .2s; }
.partner-logo:hover { opacity:1; filter:grayscale(0); }

/* =============================================================
   19. BLOG CARDS
   ============================================================= */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s,transform .2s; background:var(--bg); }
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.blog-card-img { aspect-ratio:16/9; background:var(--bg-light); overflow:hidden; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; }
.blog-card-body { padding:22px; }
.blog-card-meta { font-size:.8125rem; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.blog-card h3 { font-size:1rem; margin-bottom:8px; color:var(--text-dark); line-height:1.4; }
.blog-card > .blog-card-body > p { font-size:.875rem; color:var(--text-muted); margin-bottom:14px; }
.read-link { font-size:.875rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:5px; }

/* =============================================================
   20. CTA BANNER
   ============================================================= */
.cta-banner { background:var(--primary); border-radius:var(--radius-xl); padding:72px 56px; text-align:center; color:#fff; }
.cta-banner h2 { color:#fff; margin-bottom:16px; }
.cta-banner p  { color:rgba(255,255,255,.75); max-width:540px; margin-inline:auto; margin-bottom:32px; font-size:1.0625rem; }

/* =============================================================
   21. FAQ
   ============================================================= */
.faq-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; background:var(--bg); border:none; cursor:pointer; text-align:left; font-size:.9375rem; font-weight:600; color:var(--text-dark); gap:16px; transition:background .15s; }
.faq-question:hover { background:var(--bg-light); }
.faq-icon { flex-shrink:0; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--border-dark); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text-muted); transition:all .15s; font-style:normal; }
.faq-item.open .faq-icon { background:var(--primary); border-color:var(--primary); color:#fff; }
.faq-answer { display:none; padding:0 24px 20px; font-size:.9375rem; color:var(--text-muted); line-height:1.7; background:var(--bg); }
.faq-item.open .faq-answer { display:block; }
.faq-explore { text-align:center; margin-top:24px; }

/* =============================================================
   22. SERVICE / INDUSTRY ALTERNATING ROWS
   ============================================================= */
.alt-row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-block:64px; border-bottom:1px solid var(--border); }
.alt-row:last-of-type { border-bottom:none; }
.alt-row--flip .alt-row-text { order:2; }
.alt-row--flip .alt-row-img  { order:1; }
.alt-row-text .badge { margin-bottom:12px; }
.alt-row-text h2 { font-size:clamp(1.5rem,3vw,2.125rem); margin-bottom:14px; }
.alt-row-text p  { color:var(--text-muted); margin-bottom:24px; font-size:1.0625rem; }

/* Feature Cards (3-col inside service pages) */
.feature-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px; }
.feature-card { border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; }
.feature-card h4 { color:var(--primary); font-size:.9375rem; margin-bottom:8px; }
.feature-card p  { font-size:.8125rem; color:var(--text-muted); }

/* Core Features (4-col) */
.core-features { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.core-feature { border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; text-align:center; }
.core-feature h4 { font-size:.9rem; margin-bottom:6px; }
.core-feature p  { font-size:.8125rem; color:var(--text-muted); }

/* =============================================================
   23. PAGE BANNER (inner pages)
   ============================================================= */
.page-banner { padding:64px 0 56px; border-bottom:1px solid var(--border); }
.page-banner .badge { margin-bottom:16px; }
.page-banner h1 { margin-bottom:16px; }
.page-banner p  { max-width:600px; color:var(--text-muted); font-size:1.0625rem; }

/* =============================================================
   24. ABOUT PAGE
   ============================================================= */
.about-grid  { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.process-step-num { font-size:2rem; font-weight:800; color:var(--primary); margin-bottom:12px; }
.process-step h3 { font-size:1.0625rem; margin-bottom:8px; }
.process-step p  { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   25. OFFICE LOCATIONS
   ============================================================= */
.offices-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.office-item { background:var(--bg); padding:40px; }
.office-country { font-size:1.25rem; font-weight:800; color:var(--text-dark); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.office-address { font-size:.9375rem; color:var(--text-muted); margin-bottom:16px; line-height:1.6; }
.office-phone { display:inline-flex; align-items:center; gap:8px; background:var(--primary-light); color:var(--primary); font-size:.875rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); }

/* =============================================================
   26. PROJECTS / CARDS GRID
   ============================================================= */
.projects-grid,.resources-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.project-card,.resource-card { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s,transform .2s; background:var(--bg); }
.project-card:hover,.resource-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.project-card-img { aspect-ratio:16/9; background:var(--bg-light); overflow:hidden; }
.project-card-img img { width:100%; height:100%; object-fit:cover; }
.project-card-body,.resource-card-body { padding:22px; }
.project-card .badge,.resource-card .badge { margin-bottom:12px; font-size:.75rem; }
.project-card h3,.resource-card h3 { font-size:1rem; margin-bottom:8px; }
.project-card p,.resource-card p   { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   27. GLOSSARY
   ============================================================= */
.glossary-letter { font-size:1.5rem; font-weight:800; color:var(--primary); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--primary-light); }
.glossary-terms  { display:flex; flex-direction:column; gap:20px; margin-bottom:48px; }
.glossary-term h3 { font-size:1rem; margin-bottom:6px; }
.glossary-term p  { font-size:.9rem; color:var(--text-muted); }

/* =============================================================
   28. 404
   ============================================================= */
.error-404-section { min-height:calc(100svh - var(--header-h) - 300px); display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 24px; }
.error-404-inner .badge { margin-bottom:24px; }
.error-404-inner h1 { font-size:clamp(2rem,5vw,3.25rem); margin-bottom:16px; }
.error-404-inner > p { max-width:480px; margin-inline:auto; margin-bottom:36px; color:var(--text-muted); font-size:1.0625rem; }
.error-404-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =============================================================
   29. SINGLE POST
   ============================================================= */
.post-meta { display:flex; align-items:center; gap:16px; font-size:.875rem; color:var(--text-muted); margin-bottom:20px; flex-wrap:wrap; }
.entry-content { font-size:1.0625rem; line-height:1.85; color:var(--text-body); max-width:720px; }
.entry-content h2 { margin-top:2.5rem; margin-bottom:1rem; }
.entry-content h3 { margin-top:2rem; margin-bottom:.75rem; }
.entry-content p  { margin-bottom:1.25rem; }
.entry-content ul,.entry-content ol { margin-bottom:1.25rem; padding-inline-start:1.5rem; }
.entry-content ul { list-style:disc; }
.entry-content ol { list-style:decimal; }
.entry-content li { margin-bottom:.5rem; }
.entry-content a  { color:var(--primary); text-decoration:underline; }
.entry-content img { border-radius:var(--radius-md); margin-block:1.5rem; }
.entry-content blockquote { border-left:4px solid var(--primary); padding-left:20px; margin-block:1.5rem; color:var(--text-muted); font-style:italic; }

/* =============================================================
   30. MISC
   ============================================================= */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-40 { margin-top:40px; }
.mb-40 { margin-bottom:40px; }
.load-more-wrap { text-align:center; margin-top:40px; }

/* =============================================================
   31. RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  :root { --section-py:72px; }
  .footer-grid   { grid-template-columns:1fr 1fr; gap:32px; }
  .why-grid      { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .core-features { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  :root { --section-py:56px; --header-h:64px; }
  .primary-nav { display:none; }
  .menu-toggle { display:flex; }
  .primary-nav.open { display:flex; flex-direction:column; position:fixed; inset:var(--header-h) 0 0; background:var(--bg); border-top:1px solid var(--border); padding:24px; gap:4px; overflow-y:auto; z-index:999; }
  .primary-nav.open a { padding:14px 16px; font-size:1rem; border-radius:var(--radius-md); }
  .hero-cards,.feature-cards,.core-features,.process-grid { grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4,.services-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; gap:24px; }
  .why-grid   { grid-template-columns:1fr 1fr; }
  .testimonials-grid,.blog-grid,.projects-grid,.resources-grid { grid-template-columns:1fr; }
  .alt-row    { grid-template-columns:1fr; gap:32px; }
  .alt-row--flip .alt-row-text,.alt-row--flip .alt-row-img { order:unset; }
  .contact-section-grid { grid-template-columns:1fr; gap:40px; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .offices-grid { grid-template-columns:1fr; }
  .form-row   { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .stats-section,.cta-banner { padding:48px 28px; border-radius:var(--radius-lg); }
}
@media (max-width: 480px) {
  :root { --section-py:48px; }
  .why-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:center; }
  .footer-grid  { grid-template-columns:1fr; }
  .lang-link    { display:none; }
  .error-404-actions { flex-direction:column; align-items:center; }
}

/* =============================================================
   32. ALT-ROW BEM ALIASES (services / industries hub)
   ============================================================= */
.alt-row__text  { }
.alt-row__visual{ }
.alt-row--flip .alt-row__text   { order:2; }
.alt-row--flip .alt-row__visual { order:1; }
.alt-row__text .badge { margin-bottom:12px; }
.alt-row__text h2 { font-size:clamp(1.5rem,3vw,2.125rem); margin-bottom:14px; }
.alt-row__text p  { color:var(--text-muted); margin-bottom:24px; font-size:1.0625rem; }
/* image placeholder inside alt-row */
.alt-row__visual .img-placeholder { aspect-ratio:1/.85; width:100%; }

/* =============================================================
   33. CHECK LIST (bullet with blue tick)
   ============================================================= */
.check-list { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.check-list li { display:flex; align-items:flex-start; gap:10px; font-size:.9375rem; color:var(--text-body); line-height:1.5; }
.check-list li svg { flex-shrink:0; margin-top:2px; }

/* =============================================================
   34. BADGE PILLS (certifications etc.)
   ============================================================= */
.badge-pill { display:inline-flex; align-items:center; background:var(--bg-light); border:1px solid var(--border); color:var(--text-body); font-size:.8rem; font-weight:600; padding:4px 12px; border-radius:var(--radius-full); }
.about-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }

/* =============================================================
   35. SERVICE ICON CARD (visual side in services hub)
   ============================================================= */
.service-icon-card { background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-xl); aspect-ratio:1/.85; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.sic-icon { width:80px; height:80px; background:var(--primary-light); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.sic-label { font-size:1.0625rem; font-weight:600; color:var(--text-dark); }

/* =============================================================
   36. ABOUT PAGE — STAT CARD
   ============================================================= */
.about-stat-card { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.asc-item { background:var(--bg); padding:32px; display:flex; flex-direction:column; gap:6px; }
.asc-item strong { font-size:2rem; font-weight:800; color:var(--primary); line-height:1; }
.asc-item span   { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   37. ABOUT GRID SUB-ELEMENTS
   ============================================================= */
.about-grid__text .badge  { margin-bottom:16px; }
.about-grid__text h2      { margin-bottom:16px; }
.about-grid__text > p     { color:var(--text-muted); margin-bottom:16px; font-size:1.0625rem; }
.about-grid__visual       { display:flex; align-items:flex-start; }

/* Partner logos on About */
.partner-logos-strip { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; padding:40px 0; }
.partner-logo-item { height:28px; opacity:.4; filter:grayscale(1); transition:opacity .2s,filter .2s; }
.partner-logo-item:hover { opacity:1; filter:grayscale(0); }

/* About image row */
.about-img-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px; }
.about-img-box { aspect-ratio:4/3; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.about-img-box img { width:100%; height:100%; object-fit:cover; }

/* Mission / Values two-col */
.mission-values-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:0; }
.mv-col { background:var(--bg); padding:40px; }
.mv-col h3 { font-size:1.25rem; margin-bottom:16px; }
.mv-col p  { font-size:.9375rem; color:var(--text-muted); line-height:1.7; }

/* Process steps */
.process-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ps-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
.ps-num  { font-size:1.75rem; font-weight:800; color:var(--primary); margin-bottom:12px; line-height:1; }
.ps-card h3 { font-size:1.0625rem; margin-bottom:8px; }
.ps-card p  { font-size:.875rem; color:var(--text-muted); }

/* How We Work (image + text) */
.how-we-work-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.hww-img { aspect-ratio:1; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-xl); }

/* =============================================================
   38. TEAM
   ============================================================= */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.team-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; background:var(--bg); text-align:center; }
.team-avatar { width:64px; height:64px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; color:var(--primary); margin:0 auto 16px; overflow:hidden; }
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.team-card h3   { font-size:1.0625rem; margin-bottom:4px; }
.team-role      { font-size:.8125rem; color:var(--primary); font-weight:600; display:block; margin-bottom:12px; }
.team-card p    { font-size:.875rem; color:var(--text-muted); }

/* =============================================================
   39. OFFICE CARDS (about page)
   ============================================================= */
.office-card { padding:40px; }
.office-flag { font-size:2rem; margin-bottom:12px; }
.office-card h3 { font-size:1.25rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.office-card p  { font-size:.9375rem; color:var(--text-muted); margin-bottom:16px; line-height:1.6; }
.office-card a  { display:inline-flex; align-items:center; background:var(--primary-light); color:var(--primary); font-size:.875rem; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); transition:background .15s; }
.office-card a:hover { background:var(--primary); color:#fff; }

/* =============================================================
   40. CTA BANNER INNER
   ============================================================= */
.cta-inner { max-width:620px; margin-inline:auto; }
.cta-inner h2 { color:#fff; margin-bottom:16px; }
.cta-inner p  { color:rgba(255,255,255,.75); margin-bottom:32px; font-size:1.0625rem; }

/* =============================================================
   41. STATS SECTION — stat-item variant
   ============================================================= */
.stats-section .badge { background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); }
.stats-section h2 { color:#fff; }
.stats-section > .container > p { color:rgba(255,255,255,.7); }
.stat-item { }
.stat-item strong { display:block; font-size:clamp(2.5rem,5vw,3.75rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.03em; margin-bottom:8px; }
.stat-item span   { display:block; font-size:.9375rem; color:rgba(255,255,255,.7); }

/* =============================================================
   42. FAQ TABS (FAQs page)
   ============================================================= */
.faq-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-full); padding:6px; width:fit-content; margin:0 auto 40px; }
.faq-tab  { padding:8px 22px; border-radius:var(--radius-full); font-size:.9rem; font-weight:500; color:var(--text-muted); border:none; background:none; cursor:pointer; transition:all .15s; }
.faq-tab:hover    { color:var(--text-dark); }
.faq-tab.active   { background:var(--bg); color:var(--primary); font-weight:600; box-shadow:var(--shadow-sm); }

/* =============================================================
   43. RESOURCES HUB CARDS
   ============================================================= */
.resources-hub-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.res-hub-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 20px; background:var(--bg); text-align:center; transition:box-shadow .2s,transform .2s; display:block; text-decoration:none; }
.res-hub-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.res-hub-icon { width:48px; height:48px; background:var(--primary-light); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--primary); margin:0 auto 14px; }
.res-hub-card h3    { font-size:1rem; margin-bottom:6px; }
.res-hub-card span  { font-size:.8125rem; color:var(--text-muted); }

/* =============================================================
   44. GLOSSARY ACCORDION
   ============================================================= */
.glossary-list { display:flex; flex-direction:column; }
.glossary-item { border-bottom:1px solid var(--border); }
.glossary-item:first-child { border-top:1px solid var(--border); }
.glossary-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; font-size:1.0625rem; font-weight:600; color:var(--text-dark); gap:16px; }
.glossary-icon { font-size:1.25rem; font-weight:300; color:var(--text-muted); flex-shrink:0; line-height:1; }
.glossary-item.open .glossary-icon { color:var(--primary); }
.glossary-body { display:none; padding-bottom:20px; }
.glossary-item.open .glossary-body { display:block; }
.glossary-body p { font-size:.9375rem; color:var(--text-muted); margin-bottom:12px; line-height:1.7; }
.glossary-body-tags { display:flex; flex-wrap:wrap; gap:8px; }
.glossary-tag { font-size:.8rem; background:var(--bg-light); border:1px solid var(--border); color:var(--text-muted); padding:3px 10px; border-radius:var(--radius-full); }

/* =============================================================
   45. BLOG SINGLE / NEWS TEMPLATE
   ============================================================= */
.single-layout { display:grid; grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
.post-header { padding:56px 0 40px; }
.post-breadcrumb { font-size:.875rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.post-breadcrumb a { color:var(--primary); }
.post-breadcrumb span { color:var(--text-muted); }
.post-header .badge { margin-bottom:12px; }
.post-header h1 { margin-bottom:16px; font-size:clamp(1.75rem,4vw,2.75rem); }
.post-header .post-subtitle { font-size:1.25rem; color:var(--text-muted); margin-bottom:0; font-weight:400; line-height:1.5; }
.post-featured-img { aspect-ratio:16/7; background:var(--bg-light); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:48px; }
.post-featured-img img { width:100%; height:100%; object-fit:cover; }
.related-section { border-top:1px solid var(--border); padding-top:56px; margin-top:56px; }
.related-section .section-header { text-align:left; }

/* =============================================================
   46. NEWS CARDS
   ============================================================= */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .2s,transform .2s; background:var(--bg); }
.news-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.news-card-img  { aspect-ratio:16/9; background:var(--bg-light); overflow:hidden; }
.news-card-img img { width:100%; height:100%; object-fit:cover; }
.news-card-body { padding:22px; }
.news-card-date { font-size:.8125rem; color:var(--text-muted); margin-bottom:8px; }
.news-card h3   { font-size:1rem; margin-bottom:8px; color:var(--text-dark); line-height:1.4; }
.news-card p    { font-size:.875rem; color:var(--text-muted); margin-bottom:14px; }

/* =============================================================
   47. BREADCRUMB (page-level)
   ============================================================= */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--text-muted); margin-bottom:16px; }
.breadcrumb a { color:var(--primary); }
.breadcrumb span:last-child { color:var(--text-dark); font-weight:500; }

/* =============================================================
   48. SECTION PADDING HELPERS
   ============================================================= */
.py-96  { padding-block:96px; }
.py-72  { padding-block:72px; }
.py-56  { padding-block:56px; }
.bg-light { background:var(--bg-light); }

/* =============================================================
   49. RESPONSIVE — additional
   ============================================================= */
@media (max-width: 1024px) {
  .resources-hub-grid { grid-template-columns:repeat(3,1fr); }
  .team-grid  { grid-template-columns:repeat(2,1fr); }
  .how-we-work-grid { grid-template-columns:1fr; gap:40px; }
  .about-img-row { grid-template-columns:1fr 1fr; }
  .process-steps-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  .resources-hub-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid  { grid-template-columns:1fr 1fr; }
  .mission-values-grid { grid-template-columns:1fr; }
  .about-img-row { grid-template-columns:1fr; }
  .process-steps-grid { grid-template-columns:1fr; }
  .faq-tabs { width:100%; border-radius:var(--radius-lg); }
  .about-stat-card { grid-template-columns:1fr; }
  .news-grid { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .resources-hub-grid { grid-template-columns:1fr 1fr; }
  .team-grid  { grid-template-columns:1fr; }
}