/* ══════════════════════════════════════════════════════
   R GLOBAL DIGITAL SOLUTIONS — Design System v3
   Color palette extracted from logo:
     Primary teal  #4A9EAD  (globe/R gradient mid)
     Deep blue     #2B5F7A  (logo bottom)
     Accent cyan   #6ECBD8  (light teal highlight)
     Dark bg       #0A1218
     Surface       #0F1C26
   ══════════════════════════════════════════════════════ */
:root {
  /* ── Light theme (default) ── */
  --accent:      #1F8FA0;
  --accent2:     #16707F;
  --accent-dim:  rgba(31,143,160,.10);
  --accent-glow: rgba(31,143,160,.06);
  --bg:          #F2F7FA;
  --surface:     #FFFFFF;
  --surface2:    #E5EEF4;
  --border:      rgba(31,143,160,.18);
  --border2:     rgba(31,143,160,.08);
  --text:        #0C1E2B;
  --muted:       #4A6878;
  --muted2:      #8AACBB;
  --fHead:       'Syne', sans-serif;
  --fBody:       'Outfit', sans-serif;
  --r:           12px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --pad:         clamp(1.25rem,5vw,4.5rem);
  --sec:         clamp(3rem,6vw,5.5rem);
  /* theme-specific vars */
  --nav-bg:      rgba(242,247,250,.92);
  --nav-sc:      rgba(242,247,250,.99);
  --mob-bg:      rgba(242,247,250,.98);
  --grain-op:    .25;
  --ptcl-op:     .15;
  --cta-bg:      linear-gradient(135deg,rgba(229,238,244,.97),rgba(213,230,241,.97));
  --cta-border:  rgba(31,143,160,.28);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --accent:      #6ECBD8;
  --accent2:     #4A9EAD;
  --accent-dim:  rgba(110,203,216,.10);
  --accent-glow: rgba(110,203,216,.07);
  --bg:          #0A1218;
  --surface:     #0F1C26;
  --surface2:    #142333;
  --border:      rgba(110,203,216,.12);
  --border2:     rgba(110,203,216,.06);
  --text:        #E8F4F7;
  --muted:       #7A9EAA;
  --muted2:      #3D6070;
  --nav-bg:      rgba(10,18,24,.82);
  --nav-sc:      rgba(10,18,24,.97);
  --mob-bg:      rgba(10,18,24,.97);
  --grain-op:    .6;
  --ptcl-op:     .35;
  --cta-bg:      linear-gradient(135deg,rgba(15,28,38,.95),rgba(20,35,51,.95));
  --cta-border:  rgba(110,203,216,.2);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html {
  scroll-behavior:smooth; -webkit-font-smoothing:antialiased;
  background:var(--bg); /* base bg so fixed GIF layers above it correctly */
}
body {
  position:relative; z-index:1; /* stacking context: #heroBg z:-1 sits above html bg but below body content */
  background:transparent;
  color:var(--text);
  font-family:var(--fBody); font-weight:300;
  line-height:1.7; overflow-x:hidden;
  cursor:auto;
}
a  { color:inherit; text-decoration:none; cursor:pointer }
ul { list-style:none }
img { max-width:100%; display:block }
button { cursor:pointer; font-family:inherit; border:none; background:none }

/* ── Grain overlay ── */
body::before {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  opacity:var(--grain-op);
}

/* ── Particles canvas ── */
#ptcl { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--ptcl-op) }

/* ── Scroll reveal ── */
.rv { opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease) }
.rv.d1 { transition-delay:.07s } .rv.d2 { transition-delay:.14s }
.rv.d3 { transition-delay:.21s } .rv.d4 { transition-delay:.28s }
.rv.on { opacity:1; transform:none }

/* ── Layout ── */
.sec  { padding:var(--sec) var(--pad); position:relative; z-index:2; background:var(--bg) }
.divider {
  height:1px; margin:0 var(--pad); position:relative; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(110,203,216,.15) 50%,transparent);
}

/* ── Typography ── */
.lbl {
  font-size:.67rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:.55rem; margin-bottom:.75rem;
}
.lbl::before { content:''; display:block; width:1.6rem; height:1px; background:var(--accent); flex-shrink:0 }
.secTitle {
  font-family:var(--fHead); font-weight:800;
  font-size:clamp(1.9rem,3.8vw,3.2rem); line-height:1.04;
  letter-spacing:-.038em; margin-bottom:.9rem;
}
.secBody { color:var(--muted); font-size:.97rem; line-height:1.8; max-width:560px }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.8rem 1.8rem;
  border-radius:8px; font-family:var(--fHead); font-weight:700; font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase; transition:all .25s var(--ease);
  cursor:pointer;
}
.btnP {
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0A1218; border:none;
}
.btnP:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 10px 28px rgba(110,203,216,.28) }
.btnG {
  background:transparent; color:var(--text);
  border:1.5px solid var(--border);
}
.btnG:hover { border-color:var(--accent); color:var(--accent) }

/* ── Tags ── */
.tag {
  display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:.22rem .65rem; border-radius:20px;
}
.tLog { background:rgba(110,203,216,.15); color:var(--accent) }
.tCon { background:rgba(74,158,173,.15);  color:#4A9EAD }
.tFin { background:rgba(255,180,80,.13);  color:#FFB450 }
.tAdv { background:rgba(180,130,255,.13); color:#B482FF }

/* ══════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════ */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad); height:66px;
  background:var(--nav-bg); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); transition:background .3s;
}
.topnav.scrolled { background:var(--nav-sc) }

.nLogo {
  font-family:var(--fHead); font-weight:800; font-size:1.25rem;
  letter-spacing:-.03em; display:flex; align-items:center; gap:.2rem;
}
.nLogo .r { color:var(--accent) }
.nLogo .dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-left:2px;
  animation:pulse 2.4s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 55%{opacity:.2;transform:scale(.45)} }

.nLinks { display:flex; gap:1.8rem; align-items:center }
.nLinks a {
  font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); position:relative; transition:color .22s;
}
.nLinks a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .22s;
}
.nLinks a:hover, .nLinks a.active { color:var(--text) }
.nLinks a:hover::after, .nLinks a.active::after { transform:scaleX(1) }

.nRight { display:flex; align-items:center; gap:.9rem }
.langWrap {
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; overflow:hidden;
}
.langBtn {
  padding:.32rem .78rem; font-size:.67rem; font-weight:600; letter-spacing:.08em;
  color:var(--muted); transition:all .22s; cursor:pointer;
}
.langBtn.active { background:var(--accent); color:#0A1218 }
.nCta {
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0A1218; padding:.46rem 1.15rem;
  border-radius:20px; font-size:.73rem; font-weight:700; letter-spacing:.04em;
  transition:all .22s; white-space:nowrap; cursor:pointer;
}
.nCta:hover { filter:brightness(1.1); transform:translateY(-1px) }

.hbg { display:none; flex-direction:column; gap:5px; padding:4px; cursor:pointer }
.hbg span { display:block; width:22px; height:1.5px; background:var(--text); border-radius:2px; transition:all .22s }

.mobMenu {
  display:none; position:fixed; inset:0; z-index:550;
  background:var(--mob-bg); backdrop-filter:blur(18px);
  flex-direction:column; align-items:center; justify-content:center; gap:2rem;
}
.mobMenu.open { display:flex }
.mobMenu a {
  font-family:var(--fHead); font-weight:700; font-size:2rem;
  letter-spacing:-.03em; color:var(--muted); transition:color .22s;
}
.mobMenu a:hover { color:var(--accent) }

/* ══════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════ */
.mqStrip {
  padding:.9rem 0; overflow:hidden; position:relative; z-index:2;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
}
.mqTrack { display:flex; gap:2rem; animation:mq 22s linear infinite; width:max-content }
.mqItem {
  font-family:var(--fHead); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:#0A1218;
  white-space:nowrap; display:flex; align-items:center; gap:.4rem;
}
.mqDot { width:4px; height:4px; border-radius:50%; background:rgba(10,18,24,.3) }
@keyframes mq { to { transform:translateX(-50%) } }

/* ══════════════════════════════════════════════════════
   SOLUTION CARDS
   ══════════════════════════════════════════════════════ */
.solGrid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5px; background:var(--border2);
  border:1.5px solid var(--border2); border-radius:var(--r); overflow:hidden;
}
.solCard {
  background:var(--surface); padding:2rem;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:background .25s var(--ease); color:inherit; text-decoration:none; cursor:pointer;
}
/* GIF thumbnail at top of solution card */
.solThumb {
  height:160px; overflow:hidden;
  margin:-2rem -2rem 1.2rem -2rem; /* bleed to card edges */
  border-bottom:1.5px solid var(--border2);
}
.solThumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s var(--ease);
}
.solCard:hover .solThumb img { transform:scale(1.04) }

.solCard::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(110,203,216,.07),transparent 55%);
  opacity:0; transition:opacity .25s;
}
.solCard:hover { background:var(--surface2) }
.solCard:hover::before { opacity:1 }
.solCard h3 {
  font-family:var(--fHead); font-weight:700; font-size:.95rem;
  line-height:1.3; margin:.7rem 0 .5rem;
}
.solCard p { font-size:.8rem; color:var(--muted); line-height:1.65; flex:1 }
.solFoot { margin-top:1.2rem; display:flex; align-items:center; justify-content:space-between }
.solArr {
  font-size:.74rem; font-weight:600; color:var(--accent);
  transition:gap .22s; display:flex; align-items:center; gap:.3rem;
}
.solCard:hover .solArr { gap:.55rem }
.solN { font-family:var(--fHead); font-weight:800; font-size:1.9rem; color:var(--border2); line-height:1 }

/* ══════════════════════════════════════════════════════
   BLOG CARDS
   ══════════════════════════════════════════════════════ */
.blogGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.blogCard {
  background:var(--surface); border:1.5px solid var(--border2);
  border-radius:var(--r); overflow:hidden; display:block;
  color:inherit; text-decoration:none; transition:all .25s var(--ease); cursor:pointer;
}
.blogCard:hover {
  border-color:rgba(110,203,216,.25);
  transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.blogThumb { height:178px; overflow:hidden; position:relative }
.blogThumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease) }
.blogCard:hover .blogThumb img { transform:scale(1.04) }
.blogThumbFb {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:2.6rem;
}
.blogBody { padding:1.3rem }
.blogMeta { font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:.45rem }
.blogCard h4 { font-family:var(--fHead); font-weight:700; font-size:.93rem; line-height:1.35; margin-bottom:.45rem }
.blogCard p { font-size:.8rem; color:var(--muted); line-height:1.65 }
.blogRead {
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.85rem;
  font-size:.73rem; color:var(--accent); font-weight:600; transition:gap .22s;
}
.blogCard:hover .blogRead { gap:.55rem }

/* ── Blog post ── */
.postBody { max-width:720px }
.postBody p { font-size:1.03rem; color:var(--muted); line-height:1.88; margin-bottom:1.5rem }
.postBody h3 { font-family:var(--fHead); font-weight:700; font-size:1.3rem; color:var(--text); margin:2.6rem 0 .9rem }
.postBody figure { margin:2rem 0 }
.postBody figure img { width:100%; border-radius:var(--r); border:1.5px solid var(--border) }
.postBody figcaption { font-size:.78rem; color:var(--muted2); text-align:center; margin-top:.6rem; font-style:italic }
.imgPlaceholder {
  width:100%; height:230px; background:var(--surface);
  border:1.5px dashed var(--border); border-radius:var(--r);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; color:var(--muted); font-size:.82rem;
}

/* ══════════════════════════════════════════════════════
   SOLUTION PAGE
   ══════════════════════════════════════════════════════ */
.spWrap { display:grid; grid-template-columns:1fr 330px; gap:3.5rem; align-items:start }
.spIntro { font-size:1.02rem; color:var(--muted); line-height:1.85; margin-bottom:2.2rem }
.spSecTitle {
  font-family:var(--fHead); font-weight:700; font-size:.87rem; color:var(--text);
  letter-spacing:.04em; margin:1.8rem 0 .7rem; padding-bottom:.4rem;
  border-bottom:1px solid var(--border);
}
.spBullets { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem }
.spBullets li {
  font-size:.88rem; color:var(--muted); line-height:1.7;
  padding-left:1.2rem; position:relative;
}
.spBullets li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-size:.76rem }
.spSidebar { position:sticky; top:86px; display:flex; flex-direction:column; gap:1.1rem }
.spCard { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:1.5rem }
.spCardLbl { font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem }
.spCard p { font-size:.8rem; color:var(--muted); line-height:1.65; margin-bottom:.9rem }
.spCard .btn { width:100%; justify-content:center; margin-bottom:.45rem; font-size:.74rem }
.spNavLink {
  display:flex; align-items:center; justify-content:space-between;
  padding:.58rem 0; border-bottom:1px solid var(--border2);
  font-size:.8rem; color:var(--muted); transition:color .2s; cursor:pointer;
}
.spNavLink:last-child { border-bottom:none }
.spNavLink:hover { color:var(--accent) }

/* ══════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════ */
.aboutHeroWrap { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center }
.featGrid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.featBox {
  padding:1.4rem; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--r); transition:all .25s;
}
.featBox:hover { border-color:rgba(110,203,216,.3); transform:translateY(-3px) }
.featIcon { font-size:1.35rem; margin-bottom:.55rem }
.featTitle { font-family:var(--fHead); font-weight:700; font-size:.84rem; margin-bottom:.25rem }
.featDesc { font-size:.75rem; color:var(--muted); line-height:1.55 }

.statsRow { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border2) }
.statBox { background:var(--bg); padding:3rem 2.8rem; transition:background .22s }
.statBox:hover { background:var(--surface) }
.statNum {
  font-family:var(--fHead); font-weight:800; font-size:4rem;
  line-height:1; color:var(--accent); letter-spacing:-.04em; margin-bottom:.5rem;
}
.statLbl { font-size:.86rem; color:var(--muted); line-height:1.6; max-width:190px }

.officesGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.officeCard {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r); padding:1.7rem; transition:all .25s;
}
.officeCard:hover { border-color:rgba(110,203,216,.25); transform:translateY(-3px) }
.officeTop { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.1rem }
.officeFlag { font-size:1.75rem; line-height:1 }
.officeCountry { font-family:var(--fHead); font-weight:700; font-size:.97rem }
.officeRole { font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:.12rem }
.officeDetail { display:flex; align-items:flex-start; gap:.5rem; font-size:.79rem; color:var(--muted); line-height:1.5; margin-bottom:.45rem }
.officeDetail a { color:var(--accent); transition:opacity .2s }
.officeDetail a:hover { opacity:.75 }

/* ══════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════ */
.contactWrap { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start }
.contactForm { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:2rem }
.fRow { margin-bottom:1.1rem }
.fRow label { display:block; font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem }
.fRow input, .fRow select, .fRow textarea {
  width:100%; background:rgba(110,203,216,.04); border:1.5px solid var(--border);
  border-radius:8px; padding:.72rem 1rem; color:var(--text);
  font-family:var(--fBody); font-size:.87rem; font-weight:300;
  transition:border-color .2s; -webkit-appearance:none;
}
.fRow input:focus, .fRow select:focus, .fRow textarea:focus { outline:none; border-color:var(--accent) }
.fRow textarea { resize:vertical; min-height:115px }
.fRow select { cursor:pointer }
.fRow select option { background:var(--surface) }
.fGrid { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.fSubmit {
  width:100%; padding:1rem; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0A1218; font-family:var(--fHead); font-weight:700;
  font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  transition:all .22s; margin-top:.4rem;
}
.fSubmit:hover { filter:brightness(1.1); transform:translateY(-2px) }

/* ══════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════ */
.ctaBand {
  position:relative; z-index:2; margin:0 var(--pad) var(--sec);
  background:var(--cta-bg);
  border:1.5px solid var(--cta-border); border-radius:18px;
  padding:4rem var(--pad); overflow:hidden;
  display:flex; justify-content:space-between; align-items:center; gap:2.5rem;
}
.ctaBand::before {
  content:''; position:absolute; top:-50%; right:-5%;
  width:440px; height:440px;
  background:radial-gradient(circle,rgba(110,203,216,.1),transparent 65%);
  pointer-events:none;
}
.ctaBand h2 {
  font-family:var(--fHead); font-weight:800;
  font-size:clamp(1.7rem,2.8vw,2.8rem); letter-spacing:-.03em; line-height:1.08;
  max-width:500px;
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
footer { position:relative; z-index:2; background:var(--bg); border-top:1.5px solid var(--border); padding:4.5rem var(--pad) 2rem }
.footTop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem }
.footBrand .nLogo { font-size:1.35rem; margin-bottom:.9rem }
.footBrand p { font-size:.8rem; color:var(--muted2); line-height:1.7; max-width:250px }
.footCol h5 { font-family:var(--fHead); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2rem }
.footCol li { margin-bottom:.5rem }
.footCol a { font-size:.79rem; color:var(--muted2); transition:color .2s; cursor:pointer }
.footCol a:hover { color:var(--accent) }
.footBottom {
  border-top:1.5px solid var(--border); padding-top:1.5rem;
  display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted2);
}

/* ══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════ */
.pageHero {
  padding:calc(66px + 3.5rem) var(--pad) 3.5rem;
  position:relative; z-index:2; background:var(--bg); border-bottom:1.5px solid var(--border);
}
.breadcrumb {
  font-size:.7rem; color:var(--muted2); margin-bottom:1.6rem;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.breadcrumb a { color:var(--muted2); transition:color .2s; cursor:pointer }
.breadcrumb a:hover { color:var(--accent) }
.breadcrumb span { opacity:.4 }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .footTop { grid-template-columns:1fr 1fr }
  .spWrap  { grid-template-columns:1fr; gap:2.5rem }
  .spSidebar { position:static }
}
@media(max-width:900px){
  .nLinks { display:none }
  .hbg    { display:flex }
  .solGrid  { grid-template-columns:1fr }
  .blogGrid { grid-template-columns:1fr }
  .aboutHeroWrap { grid-template-columns:1fr; gap:2.8rem }
  .officesGrid   { grid-template-columns:1fr }
  .statsRow      { grid-template-columns:1fr }
  .contactWrap   { grid-template-columns:1fr; gap:3rem }
  .ctaBand { flex-direction:column; align-items:flex-start; padding:2.5rem }
  .footTop { grid-template-columns:1fr 1fr }
  .footBottom { flex-direction:column; gap:.4rem; text-align:center }
}
@media(max-width:600px){
  .footTop  { grid-template-columns:1fr }
  .featGrid { grid-template-columns:1fr }
  .fGrid    { grid-template-columns:1fr }
  .ctaBand  { margin:0 1rem 4rem }
}

/* ══════════════════════════════════════════════════════
   ADDITIONAL — feat grid full width + blog post layout
   ══════════════════════════════════════════════════════ */
/* featGrid on about page: 4 across on desktop */
#aboutFeatures.featGrid { grid-template-columns: repeat(4,1fr) }
@media(max-width:900px){ #aboutFeatures.featGrid { grid-template-columns: 1fr 1fr } }
@media(max-width:600px){ #aboutFeatures.featGrid { grid-template-columns: 1fr } }

/* Blog post layout responsive */
@media(max-width:860px){
  .postLayout, section .sec > div[style*="grid-template-columns:1fr 290px"],
  section .sec > div[style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Img placeholder in blog posts */
.imgPlaceholder {
  width:100%; height:220px; border-radius:var(--r);
  background:var(--surface); border:1.5px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.5rem; color:var(--muted); font-size:.82rem;
  margin:1.5rem 0;
}

/* Misc utility */
.mt1 { margin-top:1rem }
.mb1 { margin-bottom:1rem }

/* ══════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════ */
.themeBtn {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; background:var(--surface);
  border:1.5px solid var(--border); color:var(--muted);
  transition:all .22s var(--ease); flex-shrink:0;
}
.themeBtn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim) }

/* ══════════════════════════════════════════════════════
   INDUSTRIES STRIP (homepage)
   ══════════════════════════════════════════════════════ */
.indRow {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.5rem;
}
.indItem {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1.15rem; background:var(--surface);
  border:1.5px solid var(--border); border-radius:8px;
  font-size:.8rem; color:var(--muted); font-weight:500; transition:all .22s;
  white-space:nowrap;
}
.indItem:hover { border-color:var(--accent); color:var(--text) }

/* ══════════════════════════════════════════════════════
   OUTCOMES ROW (homepage)
   ══════════════════════════════════════════════════════ */
.outRow {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border2);
  border:1.5px solid var(--border2); border-radius:var(--r); overflow:hidden;
}
.outBox {
  background:var(--surface); padding:1.8rem 1.6rem;
  transition:background .22s;
}
.outBox:hover { background:var(--surface2) }
.outNum {
  font-family:var(--fHead); font-weight:800; font-size:2.2rem;
  line-height:1; letter-spacing:-.04em; margin-bottom:.4rem;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.outLbl { font-size:.79rem; color:var(--muted); line-height:1.55 }
@media(max-width:900px){ .outRow { grid-template-columns:1fr 1fr } }
@media(max-width:600px){ .outRow { grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════ */
/* pageHero overrides inline background on all inner pages */
html:not([data-theme="dark"]) .pageHero {
  background:linear-gradient(160deg,rgba(31,143,160,.1) 0%,var(--bg) 68%) !important;
}
/* Globe rings on hero */
html:not([data-theme="dark"]) .gRing { border-color:rgba(31,143,160,.22) }
html:not([data-theme="dark"]) .gRing:nth-child(2) { border-color:rgba(31,143,160,.12) }
html:not([data-theme="dark"]) .gRing:nth-child(3) { border-color:rgba(31,143,160,.3) }
html:not([data-theme="dark"]) .gCore {
  background:radial-gradient(circle at 35% 35%,rgba(31,143,160,.12),rgba(22,112,127,.05));
  border-color:rgba(31,143,160,.38);
}
html:not([data-theme="dark"]) .gFloat {
  background:rgba(255,255,255,.96); border-color:var(--border); color:var(--text);
}
html:not([data-theme="dark"]) .gFloat .gN { color:var(--accent) }
html:not([data-theme="dark"]) .gFloat .gF3 { color:var(--accent) }
/* Mobile menu links in light mode */
html:not([data-theme="dark"]) .mobMenu a { color:var(--muted) }
html:not([data-theme="dark"]) .mobMenu a:hover { color:var(--accent) }
/* Blog thumb fallback in light mode */
html:not([data-theme="dark"]) .blogThumbFb {
  background:linear-gradient(135deg,var(--surface2),var(--surface)) !important;
}