/* =====================================================================
   iTrend Solution — PREMIUM ENTERPRISE LAYER  (orange-free)
   Palette: purple + blue + green on a white base, with dark/light themes.
   Loaded after index.css; overrides legacy "orange" tokens with blue.
   ===================================================================== */

:root {
  /* ===== LOGO brand system — mixed gradient from the iTrend logo
           (purple → magenta → orange, the logo's own colours) ===== */
  --pp: #7c2e85;          /* soft plum-purple  */
  --pi: #b3417f;          /* soft magenta bridge */
  --pa: #ee942f;          /* soft warm amber  */
  --pg: #f0ad55;          /* light soft amber */
  --grad-brand: linear-gradient(100deg, #7c2e85 0%, #b3417f 45%, #ee942f 100%);
  --ink-900: #0a0a14;     /* hero / overlay night */
  --card-bg: rgba(255, 255, 255, 0.62);
  --card-line: rgba(255, 255, 255, 0.78);

  /* index.css derives every brand gradient/link from --primary / --accent / --orange* */
  --primary: #7c2e85;
  --primary-dark: #4f1f56;
  --accent: #ee942f;
  --orange-2: #ee942f;
  --orange-soft: rgba(124, 46, 133, 0.09);
  --orange-soft-2: rgba(124, 46, 133, 0.15);
}

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
  --surface: #131a2c;
  --bg: #0a0e1a; --bg-base: #0a0e1a; --bg-soft: #0e1424;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
  --glass-line: rgba(255,255,255,0.08);
  --text-dark: #e9edf8; --text-mid: #c2cae0; --text-soft: #97a2bf; --text-mute: #6f7a98;
  --card-bg: rgba(255,255,255,0.055);
  --card-line: rgba(255,255,255,0.10);
  --orange-soft: rgba(238,148,47,0.16);
  --orange-soft-2: rgba(238,148,47,0.24);
  --shadow-glass: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-glass-lg: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] body { background: var(--bg-base); }
[data-theme="dark"] .pro-navbar.floating-navbar { background: rgba(11,15,26,0.82) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .pro-navbar.floating-navbar.scrolled { background: rgba(8,11,20,0.96) !important; }
[data-theme="dark"] .marquee-strip { background: linear-gradient(180deg,#0e1424,#0a0e1a); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .marquee-track span:not(.dot) { background: linear-gradient(180deg,#e9edf8,#97a2bf); -webkit-background-clip:text; background-clip:text; }
[data-theme="dark"] .dark-canvas > section.band { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
[data-theme="dark"] .page-hero { background: #0a0e1a; }
[data-theme="dark"] .glass-modal-wrap .modal-content { background: rgba(18,24,40,0.94); }
[data-theme="dark"] .modal-form input,
[data-theme="dark"] .modal-form select,
[data-theme="dark"] .modal-form textarea { background: rgba(255,255,255,0.06); color: var(--text-dark); border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .modal-form input:focus,
[data-theme="dark"] .modal-form select:focus,
[data-theme="dark"] .modal-form textarea:focus { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .glass { background: var(--card-bg); border-color: var(--card-line); }

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--text-dark);
  cursor: pointer; font-size: 1.05rem; transition: transform .3s ease, background .3s ease, color .3s ease;
}
.theme-toggle:hover { transform: rotate(18deg) scale(1.08); color: var(--pa); }
.theme-toggle .bi-sun-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }
[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; color: #ffd76a; }

/* ---------- Typography ---------- */
body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }
.section-title, .page-hero-title, .hero-pro-title, .modal-title,
h1, h2, h3, .stat-number {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Generic premium glass card */
.glass {
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(31,38,135,0.10), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Recolour legacy purple/blue orbs + icons → green */
.orb-1 { background: rgba(124,46,133,0.40) !important; }
.orb-2 { background: rgba(238,148,47,0.30) !important; }
.orb-3 { background: rgba(124,46,133,0.30) !important; }
.dept-chip .dept-icon { background: linear-gradient(135deg, rgba(124,46,133,0.16), rgba(238,148,47,0.16)) !important; }

/* =====================================================================
   NAV CTA
   ===================================================================== */
.nav-cta {
  border: none; background: var(--grad-brand); color: #fff; font-weight: 700;
  padding: 0.6rem 1.4rem; border-radius: 999px; font-size: 0.92rem;
  box-shadow: 0 8px 22px rgba(124,46,133,0.38);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124,46,133,.45); filter: brightness(1.05); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero-pro { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--ink-900); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-pro-inner, .hero-scroll { position: relative; z-index: 2; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42; filter: saturate(1.05) contrast(1.04);
  transform-origin: center; animation: heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.hero-mesh {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(55% 70% at 18% 16%, rgba(124,46,133,0.50), transparent 62%),
    radial-gradient(50% 65% at 82% 78%, rgba(238,148,47,0.34), transparent 62%),
    radial-gradient(45% 55% at 50% 6%, rgba(238,148,47,0.20), transparent 62%),
    linear-gradient(90deg, rgba(10,10,20,0.70) 0%, rgba(10,10,20,0.46) 30%, rgba(10,10,20,0.46) 70%, rgba(10,10,20,0.70) 100%),
    linear-gradient(180deg, rgba(10,10,20,0.42) 0%, rgba(10,10,20,0.58) 55%, rgba(10,10,20,0.88) 100%);
  animation: meshShift 16s ease-in-out infinite alternate;
}
.hero-grid-overlay { z-index: 1; }
@keyframes meshShift { 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.08) translate(-1.5%,-1%);} }
.hero-grid-overlay {
  position: absolute; inset: 0; opacity: 0.16;
  background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 80%);
}
/* Vertical padding only — the shorthand would zero out .container's side padding.
   Override Bootstrap's 1320px .container cap so the hero fills wide displays. */
.hero-pro-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding-block: 9rem 7rem; max-width: min(1600px, 92vw); }
/* Single centred column — the hero is text-only, so it is balanced rather than left-hugging. */
.hero-pro-content { max-width: 1240px; margin-inline: auto; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #bdedd2; font-size: .82rem; font-weight: 600; backdrop-filter: blur(8px); }
.hero-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--pa); box-shadow: 0 0 0 0 rgba(238,148,47,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 10px rgba(238,148,47,0);} 100%{box-shadow:0 0 0 0 rgba(238,148,47,0);} }
.hero-pro-title { margin: 1.6rem auto 1.3rem; font-size: clamp(2.05rem, 4.6vw, 3.9rem); line-height: 1.1; font-weight: 800; color: #fff; max-width: 34ch; text-wrap: balance; }
.hero-pro-sub { color: #c9cede; font-size: clamp(.97rem,1.3vw,1.15rem); line-height: 1.7; max-width: 88ch; margin: 0 auto 2.6rem; text-wrap: pretty; }
.hero-pro-sub strong { color: #fff; }
.hero-pro-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: center; }
.hero-pro-cta .btn-ghost, .hero-pro-cta .btn-primary-glow { margin-top: 0; }
.hero-pro .btn-ghost { background: rgba(255,255,255,0.07); color: #fff !important; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.hero-pro .btn-ghost:hover { background: rgba(255,255,255,0.16); color: #fff !important; border-color: rgba(255,255,255,.4); }
.hero-trust-row { display: flex; align-items: center; gap: .5rem; margin-top: 2.2rem; flex-wrap: wrap; }
.trust-flag { font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.trust-note { color: #9aa3bd; font-size: .85rem; margin-left: .5rem; }
.hero-pro-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.hstat { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 18px; padding: 1.5rem 1.3rem; text-align: center; backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,.35); transition: transform .35s ease, background .35s ease; }
.hstat:hover { transform: translateY(-4px); background: rgba(255,255,255,0.12); }
.hstat .stat-number { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 800; margin: 0 0 .3rem; background: linear-gradient(100deg,#cf87d4,#ee942f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hstat p { color: #b9c0d6; font-size: .82rem; margin: 0; font-weight: 500; }
.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; }
.hero-scroll span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: #fff; border-radius: 2px; animation: scrolldot 1.8s infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translateY(0);} 40%{opacity:1;} 80%{opacity:0;transform:translateY(14px);} 100%{opacity:0;} }

/* =====================================================================
   TRUST
   ===================================================================== */
.trust-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1.2rem; margin-top: 2.5rem; }
.trust-card { padding: 1.8rem 1rem; text-align: center; transition: transform .35s ease, box-shadow .35s ease; }
.trust-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(238,148,47,.18); }
.trust-card i { font-size: 1.7rem; background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }
.trust-card .stat-number { font-size: 2rem; font-weight: 800; color: var(--pp); margin: .6rem 0 .2rem; }
[data-theme="dark"] .trust-card .stat-number { color: #cf87d4; }
.trust-card p { color: var(--text-soft); font-size: .82rem; margin: 0; font-weight: 500; }

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.product-card { padding: 2rem 1.8rem; transition: transform .4s ease, box-shadow .4s ease; position: relative; overflow: hidden; }
.product-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(135deg, rgba(124,46,133,.08), rgba(238,148,47,.08)); transition: opacity .4s ease; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(31,38,135,.16); }
.product-card:hover::after { opacity: 1; }
.product-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-size: 1.5rem; margin-bottom: 1.1rem; box-shadow: 0 10px 24px rgba(124,46,133,.35); }
.product-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .6rem; position: relative; z-index: 1; }
.product-card p { color: var(--text-mid); font-size: .92rem; line-height: 1.6; margin: 0 0 1.1rem; position: relative; z-index: 1; }
.product-tags { display: flex; flex-wrap: wrap; gap: .45rem; position: relative; z-index: 1; }
.product-tags span { font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: var(--orange-soft); color: var(--pa); border: 1px solid rgba(238,148,47,.18); }
[data-theme="dark"] .product-tags span { color: #8fb4ff; }

/* =====================================================================
   WORLD MAP
   ===================================================================== */
/* ---- Brochure world map (correct baked-in locations + labels) ---- */
.worldmap {
  position: relative; margin: 2.5rem auto 0; max-width: 1060px; border-radius: 24px;
  overflow: hidden; padding: 1.6rem 1.6rem;
  background: linear-gradient(160deg, #f4f1fb 0%, #eaf0ff 100%);
  border: 1px solid var(--card-line);
  box-shadow: 0 30px 80px rgba(31,38,135,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="dark"] .worldmap { background: linear-gradient(160deg, #141d34 0%, #0d1322 100%); border-color: rgba(255,255,255,.08); }
.worldmap-img {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  /* Recolour the map's baked-in orange markers/routes toward brand blue. */
  filter: saturate(1.05);
}
[data-theme="dark"] .worldmap-img { filter: saturate(1.08) brightness(1.05); }
.worldmap-sheen {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation: sheen 6.5s ease-in-out infinite;
}
[data-theme="dark"] .worldmap-sheen { background: linear-gradient(100deg, transparent, rgba(127,176,255,.14), transparent); }
@keyframes sheen { 0% { left: -40%; } 55%,100% { left: 110%; } }

.presence-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; margin: 1.6rem auto 0; max-width: 820px; }
.presence-legend span { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--text-mid); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pa); box-shadow: 0 0 0 3px rgba(238,148,47,.18); }
.lg-dot.hub { background: var(--pp); box-shadow: 0 0 0 3px rgba(124,46,133,.2); }

.presence-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin: 2.2rem auto 0; max-width: 900px; text-align: center; }
.presence-stats strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.2rem; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] .presence-stats strong { background: linear-gradient(100deg,#cf87d4,#ee942f); -webkit-background-clip:text; background-clip:text; }
.presence-stats span { color: var(--text-soft); font-size: .85rem; font-weight: 500; }

/* =====================================================================
   WHY CHOOSE / INDUSTRIES
   ===================================================================== */
.why-choose-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.reason-card { padding: 1.8rem; transition: transform .35s ease, box-shadow .35s ease; }
.reason-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(31,38,135,.14); }
.reason-card i { font-size: 1.8rem; color: var(--pa); }
.reason-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: .8rem 0 .4rem; }
.reason-card p { color: var(--text-mid); font-size: .9rem; line-height: 1.6; margin: 0; }
.industries-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 2.5rem; }
.industry-chip { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem; transition: transform .3s ease, box-shadow .3s ease; }
.industry-chip:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(124,46,133,.16); }
.industry-chip i { font-size: 1.4rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.industry-chip span { font-weight: 600; color: var(--text-dark); font-size: .92rem; }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band { padding: 1rem 0 3rem; }
.cta-band .cta-inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 3.5rem 2rem; background: var(--grad-brand); color: #fff; border: none; box-shadow: 0 30px 80px rgba(124,46,133,.35); }
.cta-band .cta-inner h2 { font-size: clamp(1.6rem,3.5vw,2.6rem); font-weight: 800; margin: 0 0 .8rem; color: #fff; }
.cta-band .cta-inner h2 em { font-style: normal; color: #d9f0ff; }
.cta-band .cta-inner p { color: rgba(255,255,255,.9); font-size: 1.05rem; margin: 0 0 1.8rem; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.cta-band .btn-primary-glow { background: #fff !important; color: var(--pp) !important; }
.cta-band .btn-primary-glow::before { display: none; }
.cta-band .btn-primary-glow .arrow { color: var(--pp) !important; }
.cta-band .btn-ghost { margin-top: 0; background: rgba(255,255,255,.14); color: #fff !important; border-color: rgba(255,255,255,.4); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.26); color: #fff !important; }
.page-hero-cta { margin-top: 1.8rem; }
.page-hero-cta .btn-primary-glow { margin-top: 0; }
.contact-quick { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.contact-quick .btn-ghost { margin-top: 0; }
.inline-link { color: var(--pa); font-weight: 700; text-decoration: none; }
.inline-link:hover { color: var(--pp); }

/* =====================================================================
   FLASH / HONEYPOT / FIELD ERROR
   ===================================================================== */
.flash-toast { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 1080; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border-radius: 12px; font-weight: 600; font-size: .92rem; color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.25); animation: toastIn .4s ease, toastOut .4s ease 5s forwards; }
.flash-ok { background: linear-gradient(100deg,#16a34a,#22c55e); }
.flash-err { background: linear-gradient(100deg,#dc2626,#ef4444); }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,-16px);} to{opacity:1;transform:translate(-50%,0);} }
@keyframes toastOut { to{opacity:0;transform:translate(-50%,-16px);visibility:hidden;} }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.modal-form .field-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }

/* =====================================================================
   ERROR PAGES
   ===================================================================== */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding: 6rem 1.5rem;
  background:
    radial-gradient(1000px 600px at 15% 12%, rgba(124,46,133,0.16), transparent 60%),
    radial-gradient(900px 520px at 88% 72%, rgba(238,148,47,0.12), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-base) 100%); }
.error-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .14; }
.error-orb-1 { width: 420px; height: 420px; background: var(--pp); top: -80px; left: -80px; }
.error-orb-2 { width: 380px; height: 380px; background: var(--pa); bottom: -100px; right: -60px; }
.error-inner { position: relative; z-index: 1; max-width: 600px; }
.error-code { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(6rem,18vw,11rem); font-weight: 800; line-height: 1; background: linear-gradient(100deg,var(--primary),var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.error-heading { color: var(--text-dark); font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 800; margin: .5rem 0 1rem; }
.error-message { color: var(--text-soft); font-size: 1.05rem; line-height: 1.7; margin: 0 auto 2rem; max-width: 460px; }
.error-detail { color: #b91c1c; background: rgba(200,30,44,0.06); border: 1px solid rgba(200,30,44,0.16); padding: 1rem; border-radius: 10px; text-align: left; overflow: auto; font-size: .8rem; }
.error-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.error-actions .btn-primary-glow, .error-actions .btn-ghost { margin-top: 0; }

/* 404/500 in dark mode — keep it on the site's dark ground with the same brand glows */
[data-theme="dark"] .error-page {
  background:
    radial-gradient(1000px 600px at 15% 12%, rgba(124,46,133,0.32), transparent 60%),
    radial-gradient(900px 520px at 88% 72%, rgba(238,148,47,0.18), transparent 65%),
    #0a0e1a; }
[data-theme="dark"] .error-detail { color: #ff9b9b; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
  .hero-pro-inner { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 7rem 4rem; text-align: center; }
  .hero-pro-cta, .hero-trust-row { justify-content: center; }
  .hero-pro-title, .hero-pro-sub { margin-left: auto; margin-right: auto; }
  /* Text is centred here, so the left-weighted scrim becomes an even wash. */
  .hero-mesh { background:
    radial-gradient(55% 70% at 12% 18%, rgba(124,46,133,0.55), transparent 62%),
    radial-gradient(50% 65% at 88% 72%, rgba(238,148,47,0.38), transparent 62%),
    linear-gradient(180deg, rgba(10,10,20,0.62) 0%, rgba(10,10,20,0.72) 55%, rgba(10,10,20,0.9) 100%); }
  .trust-grid { grid-template-columns: repeat(3,1fr); }
  .products-grid, .why-choose-grid { grid-template-columns: repeat(2,1fr); }
  .industries-grid { grid-template-columns: repeat(3,1fr); }
  .presence-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .hero-pro-stats { grid-template-columns: repeat(2,1fr); }
  .hero-pro-cta { flex-direction: column; align-items: stretch; }
  .hero-pro-cta .btn-ghost, .hero-pro-cta .btn-primary-glow { width: 100%; justify-content: center; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .products-grid, .why-choose-grid, .industries-grid { grid-template-columns: 1fr; }
  .presence-stats { grid-template-columns: repeat(2,1fr); }
  .node-label { display: none; }
  .map-node.hub .node-label { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .hero-scroll span, .node-dot, .worldmap-sheen { animation: none !important; }
}

/* =====================================================================
   PROFESSIONAL NAVBAR  (refined, gocomet-grade)
   ===================================================================== */
/* Full-width sticky bar (gocomet-style) */
.pro-navbar.floating-navbar {
  margin: 0 !important; max-width: none; width: 100%;
  border-radius: 0 !important; border: none;
  border-bottom: 1px solid rgba(31,38,135,0.08);
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 2px 14px rgba(31,38,135,0.05);
  padding: 0.5rem 0 !important;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.pro-navbar.floating-navbar.scrolled {
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 6px 24px rgba(31,38,135,0.10);
  padding: 0.3rem 0 !important;
}
[data-theme="dark"] .pro-navbar.floating-navbar { border-bottom-color: rgba(255,255,255,0.08); }
.pro-navbar .navbar-logo { height: 42px; transition: height .3s ease; }
.pro-navbar.scrolled .navbar-logo { height: 36px; }

.nav-center { gap: 0.1rem; }
.floating-navbar .nav-link {
  font-weight: 600 !important; font-size: 0.94rem; color: var(--text-mid) !important;
  padding: 0.55rem 1rem !important; border-radius: 10px; position: relative;
  display: inline-flex; align-items: center; gap: .32rem;
  transition: color .2s ease, background .2s ease;
}
.floating-navbar .nav-link .bi-chevron-down { font-size: .68rem; transition: transform .25s ease; }
.has-mega:hover .nav-link .bi-chevron-down { transform: rotate(180deg); }
.floating-navbar .nav-link:hover { color: var(--pp) !important; background: rgba(124,46,133,0.06); }
.floating-navbar .nav-link.active { color: var(--pp) !important; }
[data-theme="dark"] .floating-navbar .nav-link:hover,
[data-theme="dark"] .floating-navbar .nav-link.active { color: #cf87d4 !important; background: rgba(255,255,255,0.06); }
.nav-actions { gap: .7rem; }
.navbar-toggler { border: none !important; color: var(--text-dark); font-size: 1.6rem; box-shadow: none !important; }

/* ---- MEGA MENU ---- */
.has-mega { position: relative; }
.has-mega::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } /* hover bridge */
.mega-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 470px; padding: 1rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--card-line);
  box-shadow: 0 26px 64px rgba(31,38,135,0.20);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease; z-index: 1000;
}
[data-theme="dark"] .mega-panel { background: #131a2c; border-color: rgba(255,255,255,0.1); }
.has-mega:hover .mega-panel, .has-mega:focus-within .mega-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.mega-grid a { display: flex; flex-direction: column; padding: .7rem .85rem; border-radius: 11px; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.mega-grid a:hover { background: var(--orange-soft); transform: translateY(-1px); }
.mega-grid strong { color: var(--text-dark); font-size: .92rem; font-weight: 700; }
.mega-grid span { color: var(--text-soft); font-size: .76rem; margin-top: .12rem; }
.mega-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; padding: .8rem .9rem; border-radius: 12px; background: var(--orange-soft); }
.mega-cta span { font-weight: 600; font-size: .88rem; color: var(--text-dark); }
.mega-cta .btn-primary-glow { margin: 0 !important; padding: .55rem 1.1rem; font-size: .85rem; }

/* Mega menu collapses inline on mobile */
@media (max-width: 991px) {
  .has-mega::after { display: none; }
  .mega-panel { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    box-shadow: none; border: none; background: transparent; padding: .1rem 0 .4rem .8rem; }
  .mega-grid { grid-template-columns: 1fr; gap: .1rem; }
  .mega-grid a { padding: .5rem .4rem; }
  .mega-cta { display: none; }
  .nav-actions { margin-top: .8rem; gap: .8rem; }
  .nav-actions .nav-cta { flex: 1; }
}

/* =====================================================================
   SCROLL-REVEAL / LAZY-LOAD ANIMATIONS  (smooth, gocomet-style)
   ===================================================================== */
body { opacity: 0; animation: pageFade .6s ease forwards; }
@keyframes pageFade { to { opacity: 1; } }

/* Lightweight in-house reveal (complements AOS) */
.lz { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.lz.in { opacity: 1; transform: none; }
.lz-1 { transition-delay: .08s; } .lz-2 { transition-delay: .16s; } .lz-3 { transition-delay: .24s; } .lz-4 { transition-delay: .32s; }

img { }
img[loading="lazy"] { background: linear-gradient(110deg, rgba(124,46,133,.06), rgba(238,148,47,.06)); }

@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; animation: none; }
  .lz { opacity: 1; transform: none; transition: none; }
  .hero-video { animation: none !important; }
}

/* =====================================================================
   CAREERS BAND (home page focus)
   ===================================================================== */
.careers-band { position: relative; }
.careers-cta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.career-perk { padding: 1.9rem 1.6rem; text-align: left; transition: transform .35s ease, box-shadow .35s ease; }
.career-perk:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(31,38,135,.14); }
.career-perk .perk-emoji { font-size: 2rem; display: block; margin-bottom: .7rem; }
.career-perk h4 { font-size: 1.12rem; font-weight: 700; color: var(--text-dark); margin: 0 0 .5rem; }
.career-perk p { color: var(--text-mid); font-size: .92rem; line-height: 1.6; margin: 0; }
.careers-spotlight { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; margin-top: 1rem; }
.careers-spotlight .cs-media { border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(31,38,135,.18); }
.careers-spotlight .cs-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) {
  .careers-cta-grid { grid-template-columns: 1fr; }
  .careers-spotlight { grid-template-columns: 1fr; }
}

/* =====================================================================
   BACK-TO-TOP  +  EASY-NAV polish
   ===================================================================== */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 1050;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 1.2rem; color: #fff;
  background: var(--grad-brand); box-shadow: 0 10px 28px rgba(124,46,133,.45);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { filter: brightness(1.08); transform: translateY(-3px); }

/* Skip link for keyboard / screen-reader users (accessibility) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--pp); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Keyboard focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pa); outline-offset: 2px;
}

/* =====================================================================
   FULL FLUID RESPONSIVENESS  (desktop ⇄ tablet ⇄ mobile)
   Mobile-first safety net + tuned breakpoints. Layouts auto-shrink
   and re-expand cleanly in both directions.
   ===================================================================== */

/* Never let media overflow the viewport */
img, video, svg, iframe { max-width: 100%; }
.worldmap, .hero-pro, .dark-canvas { max-width: 100vw; }

.careers-cta-grid.perks-2col { grid-template-columns: 1fr 1fr; margin-top: 0; }

/* ---- Large desktop (≥1400px): a touch more breathing room ---- */
@media (min-width: 1400px) {
  .hero-pro-title { font-size: 3.9rem; }
  .hero-pro-content { max-width: 1320px; }
}

/* ---- Laptop / small desktop (≤1199px) ---- */
@media (max-width: 1199px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-pro-inner { gap: 2.4rem; }
}

/* ---- Tablet landscape (≤991px) ---- */
@media (max-width: 991px) {
  .hero-pro { min-height: auto; }
  .hero-pro-inner { grid-template-columns: 1fr; gap: 2.4rem; padding-block: 7.5rem 4rem; text-align: center; }
  .hero-pro-cta, .hero-trust-row { justify-content: center; }
  .hero-pro-title, .hero-pro-sub { margin-left: auto; margin-right: auto; }
  .hero-pro-stats { max-width: 520px; margin: 0 auto; }
  .why-choose-grid, .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .careers-spotlight { grid-template-columns: 1fr; }
  .presence-stats { grid-template-columns: repeat(2, 1fr); }
  /* Collapsed mobile menu: stack nav items with comfortable tap targets */
  .floating-navbar .navbar-collapse { margin-top: .6rem; padding-top: .4rem; border-top: 1px solid var(--glass-line); }
  .floating-navbar .navbar-nav { gap: .1rem; align-items: stretch !important; }
  .floating-navbar .nav-link { padding: .7rem .8rem !important; }
  .floating-navbar .nav-cta, .floating-navbar .theme-toggle { margin: .5rem 0 0 !important; }
  .floating-navbar .nav-cta { width: 100%; }
}

/* ---- Tablet portrait (≤768px) ---- */
@media (max-width: 768px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .dark-canvas > section { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cta-band .cta-inner { padding: 2.6rem 1.4rem; }
  .careers-cta-grid.perks-2col { grid-template-columns: 1fr; }
}

/* ---- Mobile (≤576px) ---- */
@media (max-width: 576px) {
  .hero-pro-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-pro-stats { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .hstat { padding: 1.1rem .8rem; }
  .hero-pro-cta { flex-direction: column; align-items: stretch; }
  .hero-pro-cta .btn-ghost, .hero-pro-cta .btn-primary-glow { width: 100%; justify-content: center; }
  .why-choose-grid, .industries-grid, .trust-grid, .presence-stats { grid-template-columns: 1fr 1fr; }
  .presence-legend { gap: .5rem 1rem; }
  .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .cta-band .cta-actions { flex-direction: column; }
  .cta-band .cta-actions .btn-primary-glow, .cta-band .cta-actions .btn-ghost { width: 100%; justify-content: center; }
  .flash-toast { width: calc(100% - 24px); justify-content: center; }
}

/* ---- Very small phones (≤380px) ---- */
@media (max-width: 380px) {
  .trust-grid, .why-choose-grid, .industries-grid, .presence-stats { grid-template-columns: 1fr; }
  /* keep the hero stats horizontal (2×2) even on the smallest phones */
  .hero-pro-stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .hstat { padding: .95rem .6rem; }
  .hstat .stat-number { font-size: 1.5rem; }
  .hstat p { font-size: .76rem; }
  .trust-flag { font-size: 1.15rem; }
}

/* =====================================================================
   DARK-MODE FIXES  (legacy elements that hardcoded light surfaces)
   ===================================================================== */
/* Logo: light theme → original (dark/colored); dark theme → invert to white */
.navbar-logo, .footer-logo-img { transition: filter .3s ease; }
[data-theme="dark"] .navbar-logo,
[data-theme="dark"] .footer-logo-img {
  filter: brightness(0) invert(1);
}

/* Footer newsletter input was white w/ now-light text → unreadable */
[data-theme="dark"] .newsletter-form input {
  background: rgba(255,255,255,0.07) !important; color: var(--text-dark) !important;
  border-color: rgba(255,255,255,0.16);
}
[data-theme="dark"] .newsletter-form input:focus { background: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .newsletter-form input::placeholder { color: var(--text-mute); }

/* Select dropdown arrow was a dark SVG → invisible on dark inputs */
[data-theme="dark"] .modal-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c2cae0' d='M1 1l5 5 5-5'/></svg>");
}

/* Hovered chips that flipped to white (hiding light text) */
[data-theme="dark"] .dept-chip:hover,
[data-theme="dark"] .market-chip:hover { background: rgba(255,255,255,0.10) !important; }

/* Breadcrumb chip on inner-page heroes */
[data-theme="dark"] .breadcrumb-nav { background: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .breadcrumb-nav a, [data-theme="dark"] .breadcrumb-nav .current { color: var(--text-mid) !important; }

/* Inner-page hero grid overlay → lighten so it reads on dark */
[data-theme="dark"] .page-hero::before { opacity: .25; }

/* Modal close + eyebrow legibility */
[data-theme="dark"] .modal-eyebrow { color: #cf87d4 !important; }
[data-theme="dark"] .modal-close { color: var(--text-mid); }

/* Footer top border / newsletter divider on dark */
[data-theme="dark"] .footer-newsletter { border-color: rgba(255,255,255,0.08); }

/* =====================================================================
   CONTACT CARDS — clean spacing between label and address/email
   ===================================================================== */
.contact-card { align-items: center; }
.contact-card .cc-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; text-align: left; }
.contact-card .cc-body h5 { margin: 0 0 .15rem; }
.contact-card .cc-body p { margin: 0; line-height: 1.7; text-align: left; }
.contact-card .cc-body a { word-break: break-word; text-align: left; }
.contact-info { gap: 1.3rem; }

/* =====================================================================
   LEGAL PAGES (Privacy / Terms)
   ===================================================================== */
.legal-doc { max-width: 880px; margin: 0 auto; }
.legal-card { padding: 2.4rem 2.4rem; }
.legal-card p { color: var(--text-mid); line-height: 1.75; margin: 0 0 1.1rem; }
.legal-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin: 1.8rem 0 .7rem; }
.legal-card ul { color: var(--text-mid); line-height: 1.7; padding-left: 1.2rem; margin: 0 0 1.1rem; }
.legal-card li { margin-bottom: .4rem; }
.legal-card a { color: var(--pa); font-weight: 600; text-decoration: none; }
.legal-card a:hover { color: var(--pp); text-decoration: underline; }
@media (max-width: 576px) { .legal-card { padding: 1.6rem 1.3rem; } }

/* =====================================================================
   NAVBAR — remove hover/active underline + larger, dual-mode logo
   ===================================================================== */
.floating-navbar .nav-link::after,
.floating-navbar .nav-link.active::after { display: none !important; content: none !important; }

/* Bigger navbar logo, crisp in both themes */
.pro-navbar .navbar-logo { height: 54px !important; width: auto; object-fit: contain; }
.pro-navbar.scrolled .navbar-logo { height: 46px !important; }
.footer-logo-img { height: 52px; width: auto; object-fit: contain; }
@media (max-width: 575px) { .pro-navbar .navbar-logo { height: 44px !important; } }

/* Light theme → original colored logo; Dark theme → invert to clean white.
   (Re-asserted here so it always wins over earlier rules.) */
[data-theme="light"] .navbar-logo, [data-theme="light"] .footer-logo-img { filter: none; }
[data-theme="dark"] .navbar-logo, [data-theme="dark"] .footer-logo-img { filter: brightness(0) invert(1); }

/* =====================================================================
   GLOBAL MOBILE SCALE-DOWN — keep everything comfortable on phones
   (root font-size shrink scales all rem sizing proportionally)
   ===================================================================== */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .dark-canvas > section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .section-title { font-size: clamp(1.35rem, 5.6vw, 1.9rem) !important; line-height: 1.2; }
  .section-desc { font-size: .92rem !important; }
  .section-label { font-size: .72rem !important; }
  .page-hero { padding-top: 6rem !important; padding-bottom: 2.6rem !important; }
  .page-hero-title { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
  .page-hero-subtitle { font-size: .95rem !important; }
  .hero-pro-title { font-size: clamp(1.75rem, 7.4vw, 2.3rem) !important; }
  .hero-pro-sub { font-size: .97rem !important; }
  .cta-band .cta-inner { padding: 2.4rem 1.3rem; }
  .cta-band .cta-inner h2 { font-size: clamp(1.35rem, 5.6vw, 1.9rem); }
  .cta-band .cta-inner p { font-size: .96rem; }
  .leadership-card { padding: 1.6rem !important; gap: 1.4rem !important; }
  .legal-card { padding: 1.5rem 1.2rem; }
  .about-grid { gap: 2rem !important; }
  .trust-card .stat-number { font-size: 1.6rem; }
  .footer-grid { gap: 1.6rem !important; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  .dark-canvas > section { padding-top: 2.3rem !important; padding-bottom: 2.3rem !important; padding-left: .95rem !important; padding-right: .95rem !important; }
  .hero-pro-inner { padding-block: 6.5rem 3rem; }
  .hero-badge { font-size: .72rem; }
  .worldmap { padding: 1rem .7rem !important; }
  .glass, .reason-card, .trust-card, .career-perk, .industry-chip, .product-card, .contact-card { border-radius: 16px; }
  .leadership-card { grid-template-columns: 1fr !important; text-align: center; }
  .leadership-card .leader-img { margin: 0 auto; }
  .timeline-body h4 { font-size: 1.02rem; }
  .stat-number { font-size: 1.7rem; }
  .marquee-track span { font-size: .8rem; }
  .modal-form { gap: .6rem; }
  .btn-primary-glow, .btn-ghost { padding: .85rem 1.4rem; font-size: .92rem; }
}

@media (max-width: 360px) {
  html { font-size: 13.5px; }
}

/* =====================================================================
   HERO — stop layout shift / scroll-jump from the cycling typewriter
   ===================================================================== */
/* Prevent the browser from auto-adjusting scroll when content reflows */
html, body { overflow-anchor: none; }
/* Reserve a stable line so the typing/erasing text never resizes the title */
.typewriter-pro {
  display: inline-block;
  min-height: 1.15em;
  min-width: 1ch;
  vertical-align: top;
}
.hero-pro-title { min-height: 2.3em; }

/* Paired CTA buttons — identical size & height, on one line */
.cta-actions--pair { flex-wrap: nowrap; align-items: stretch; }
.cta-actions--pair .btn-primary-glow,
.cta-actions--pair .btn-ghost {
  flex: 0 0 auto; min-width: 210px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 0.95rem 1.6rem !important; margin-top: 0 !important; line-height: 1.2;
}
@media (max-width: 480px) {
  .cta-actions--pair { flex-direction: column; align-items: center; }
  .cta-actions--pair .btn-primary-glow,
  .cta-actions--pair .btn-ghost { width: 100%; max-width: 320px; }
}

/* =====================================================================
   WORLD MAP — animated marching-ants route flow (draw.io style)
   ===================================================================== */
.worldmap-inner { position: relative; display: block; }
.worldmap .routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.worldmap .route-flow path {
  stroke: #16a34a; stroke-width: 0.38; stroke-linecap: round; opacity: .85;
  /* refined round-dot dotted line that traces the map's routes */
  stroke-dasharray: 0.01 1.7;
  animation: marchAnts 1.6s linear infinite;
}
.worldmap .route-flow path:nth-child(2){ animation-delay: .12s; }
.worldmap .route-flow path:nth-child(3){ animation-delay: .24s; }
.worldmap .route-flow path:nth-child(4){ animation-delay: .36s; }
.worldmap .route-flow path:nth-child(5){ animation-delay: .48s; }
.worldmap .route-flow path:nth-child(6){ animation-delay: .60s; }
/* dot period (dot + gap = 1.71) → seamless flow toward the hub */
@keyframes marchAnts { to { stroke-dashoffset: -1.71; } }
@media (prefers-reduced-motion: reduce) { .worldmap .route-flow path { animation: none !important; } }

/* What We Do — showcase title */
.showcase-title { text-align: center; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; margin: 3rem 0 1.6rem; color: var(--text-dark); }
.showcase-title em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* What We Do showcase — even grid (no masonry gaps with 6 images) */
#what-we-do .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
#what-we-do .gallery-item,
#what-we-do .gallery-item.wide,
#what-we-do .gallery-item.tall { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4 / 3 !important; }
@media (max-width: 768px) { #what-we-do .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { #what-we-do .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }

/* =====================================================================
   NAV ACTIONS — professional email link + primary CTA
   ===================================================================== */
.nav-actions { gap: 1rem; }
.nav-cta, .nav-cta:hover, .nav-cta:focus { text-decoration: none !important; }
.nav-cta { display: inline-flex; align-items: center; gap: .4rem; }
.nav-cta i { font-size: .85rem; transition: transform .25s ease; }
.nav-cta:hover i { transform: translateX(3px); }
/* Email shown as a subtle, refined pill — never underlined */
.nav-phone, .nav-phone:hover, .nav-phone:focus { text-decoration: none !important; }
.nav-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text-mid); font-weight: 600; font-size: .88rem;
  white-space: nowrap; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--card-line); background: var(--glass-bg);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-phone i { font-size: 1rem; color: var(--pp); }
.nav-phone:hover { color: var(--pp); border-color: rgba(124,46,133,.4); background: var(--orange-soft); }
/* Hide the email text earlier, drop the whole link on tablet/mobile to keep the bar clean */
@media (max-width: 1150px) { .nav-phone span { display: none; } }
@media (max-width: 991px)  { .nav-phone { display: none; } .nav-actions .nav-cta { width: 100%; justify-content: center; } }

/* =====================================================================
   CAREERS "Life at iTrend" — true masonry (no gaps)
   ===================================================================== */
#culture .gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 1rem;
  grid-template-columns: none;
}
#culture .gallery-item,
#culture .gallery-item.wide,
#culture .gallery-item.tall {
  display: block; width: 100%; margin: 0 0 1rem;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  aspect-ratio: auto !important;
  grid-column: auto !important; grid-row: auto !important;
}
#culture .gallery-item img {
  position: static; width: 100%; height: auto; display: block;
}
@media (max-width: 900px) { #culture .gallery-grid { column-count: 2; } }
@media (max-width: 560px) { #culture .gallery-grid { column-count: 2; column-gap: .6rem; } }

/* Contact map — refined container (graceful while the iframe loads) */
.map-embed { overflow: hidden; background: linear-gradient(160deg, rgba(124,46,133,.06), rgba(238,148,47,.04)); box-shadow: 0 20px 50px rgba(31,38,135,.10); }
[data-theme="dark"] .map-embed { background: rgba(255,255,255,.03); }
@media (max-width: 576px) { .map-embed iframe { height: 300px; } }

/* About teaser link (home) */
.about-more-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; font-weight: 700; color: var(--pp); text-decoration: none; }
.about-more-link i { transition: transform .25s ease; }
.about-more-link:hover { color: var(--pi); }
.about-more-link:hover i { transform: translateX(4px); }

/* World-map overlay pin (e.g. Brazil shipping destination) */
.map-pin { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.map-pin-dot {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--pp); box-shadow: 0 0 0 4px rgba(124,46,133,.22), 0 0 0 0 rgba(124,46,133,.5);
  animation: pinPulse 2.2s ease-out infinite;
}
@keyframes pinPulse { 70% { box-shadow: 0 0 0 4px rgba(124,46,133,.22), 0 0 0 14px rgba(124,46,133,0); } 100% { box-shadow: 0 0 0 4px rgba(124,46,133,.22), 0 0 0 0 rgba(124,46,133,0); } }
.map-pin-label {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: var(--pp);
  background: rgba(255,255,255,.92); padding: .12rem .5rem; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
[data-theme="dark"] .map-pin-label { background: rgba(20,30,25,.9); color: #cf87d4; }
@media (prefers-reduced-motion: reduce) { .map-pin-dot { animation: none; } }

/* =====================================================================
   Consistent CTA button sizing across ALL pages (careers, about, home)
   ===================================================================== */
.cta-actions .btn-primary-glow,
.cta-actions .btn-ghost {
  padding: 0.85rem 1.6rem !important;
  margin-top: 0 !important;
  min-width: 188px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2; font-size: .94rem;
}
.page-hero-cta .btn-primary-glow { padding: 0.85rem 1.7rem !important; }
@media (max-width: 480px) {
  .cta-actions .btn-primary-glow,
  .cta-actions .btn-ghost { width: 100%; max-width: 320px; min-width: 0; }
}

/* Brazil shipping route flow (matches the map's other routes) */
.worldmap .routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.brazil-route {
  /* Match the map's existing (baked-in) routes: thin, gray, fine dashes */
  stroke: #8b909c; stroke-width: 0.3; stroke-linecap: butt;
  stroke-dasharray: 0.9 0.7; opacity: .8;
}

/* Mandatory-field indicators in forms */
.req { color: #e11d48; font-weight: 700; }
.form-legend { margin: 0 0 .2rem; font-size: .8rem; color: var(--text-soft); }
.form-legend .req { margin-right: .2rem; }

/* =====================================================================
   TESTIMONIALS / CLIENT FEEDBACK
   ===================================================================== */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.testi-card { padding: 1.8rem; display: flex; flex-direction: column; gap: .9rem; margin: 0; }
.testi-stars { color: #f5a623; font-size: .95rem; letter-spacing: 1px; }
.testi-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text-dark); font-weight: 500; }
.testi-card figcaption { display: flex; align-items: center; gap: .8rem; margin-top: .2rem; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-brand); flex-shrink: 0; }
.testi-meta { display: flex; flex-direction: column; line-height: 1.3; }
.testi-meta strong { color: var(--text-dark); font-size: .95rem; }
.testi-meta span { color: var(--text-soft); font-size: .82rem; }
@media (max-width: 760px) { .testi-grid { grid-template-columns: 1fr; } }

/* Anchored sections clear the fixed navbar on jump/scroll */
section[id], [id].showcase-title { scroll-margin-top: 90px; }

/* Footer — 3-column layout (brand / company / contact) */
.footer-grid { grid-template-columns: 1.7fr 1fr 1.4fr !important; gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr !important; } }

/* Awards & Recognition — even gallery grid */
#awards .gallery-grid.awards-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
#awards .gallery-item, #awards .gallery-item.wide, #awards .gallery-item.tall { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 3/2 !important; }
@media (max-width: 768px){ #awards .gallery-grid.awards-grid { grid-template-columns: repeat(2,1fr); gap: .7rem; } }
/* keep two compact columns on phones so the section isn't an over-long single stack */
@media (max-width: 460px){ #awards .gallery-grid.awards-grid { grid-template-columns: repeat(2,1fr); gap: .6rem; } }

/* =====================================================================
   NAVBAR — fit all items on one line (7 links + CTA)
   ===================================================================== */
.pro-navbar .navbar-logo { height: 44px !important; }
.pro-navbar.scrolled .navbar-logo { height: 38px !important; }
.pro-navbar .nav-center { gap: 0 !important; }
.pro-navbar .nav-link { padding: 0.5rem 0.7rem !important; font-size: 0.88rem; white-space: nowrap; }
.pro-navbar .nav-actions { gap: .6rem; }
.pro-navbar .nav-cta { padding: 0.5rem 1.05rem; font-size: 0.86rem; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1140px) {
  .pro-navbar .nav-link { padding: 0.45rem 0.55rem !important; font-size: 0.84rem; }
  .pro-navbar .navbar-brand { margin-right: .6rem !important; }
}

/* =====================================================================
   FEEDBACK FORM + star rating input
   ===================================================================== */
.feedback-card { max-width: 680px; margin: 2.2rem auto 0; padding: 2rem 2rem; }
.feedback-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 1.1rem; color: var(--text-dark); text-align: center; }
.rating-input { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .2rem; flex-wrap: wrap; }
.rating-label { font-weight: 600; color: var(--text-mid); font-size: .92rem; }
/* Star radios: render right-to-left so :hover/:checked fill left-ward */
.rating-input .stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rating-input .stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input .stars label { font-size: 1.5rem; color: #d6d3de; cursor: pointer; transition: color .15s ease; line-height: 1; }
.rating-input .stars label:hover, .rating-input .stars label:hover ~ label,
.rating-input .stars input:checked ~ label { color: #f5a623; }
[data-theme="dark"] .rating-input .stars label { color: #3a4258; }

/* =====================================================================
   GLOBAL BUTTON SIZING — more compact / professional site-wide
   (equal-size CTA pairs keep their own !important sizing)
   ===================================================================== */
.btn-primary-glow, .btn-ghost { padding: 0.72rem 1.4rem !important; font-size: 0.9rem; margin-top: 0; }
.btn-ghost { margin-top: 0; }
.page-hero-cta .btn-primary-glow { padding: 0.75rem 1.5rem !important; }
.modal-form .btn-primary-glow { padding: 0.8rem 1.4rem !important; }
/* keep the paired/cta-band buttons balanced */
.cta-actions--pair .btn-primary-glow, .cta-actions--pair .btn-ghost,
.cta-actions .btn-primary-glow, .cta-actions .btn-ghost { padding: 0.8rem 1.5rem !important; }

/* Navbar with 8 links — keep one line on desktop */
@media (min-width: 992px) {
  .pro-navbar .nav-link { padding: 0.5rem 0.6rem !important; font-size: 0.85rem; }
  .pro-navbar .navbar-brand { margin-right: .5rem !important; }
  .pro-navbar .nav-cta { padding: 0.48rem 0.95rem; font-size: 0.82rem; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .pro-navbar .nav-link { padding: 0.45rem 0.48rem !important; font-size: 0.8rem; }
}

/* JS handles smooth in-page scroll (rAF easing) — disable CSS smooth so they don't fight (was causing slow/janky scroll) */
html { scroll-behavior: auto !important; }

/* =====================================================================
   NAVBAR hover vs active — make them distinct (no double-highlight)
   Hover = text-colour change only.  Active = filled pill (current page).
   ===================================================================== */
.floating-navbar .nav-link:hover { color: var(--pp) !important; background: transparent !important; }
.floating-navbar .nav-link.active { color: var(--pp) !important; background: var(--orange-soft) !important; font-weight: 700; }
[data-theme="dark"] .floating-navbar .nav-link:hover { color: #e9b3ff !important; background: transparent !important; }
[data-theme="dark"] .floating-navbar .nav-link.active { color: #e9b3ff !important; background: rgba(255,255,255,0.08) !important; }

/* ---- Button loading spinner + flash auto-dismiss ---- */
.btn-spin{display:inline-block;width:.85em;height:.85em;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite;vertical-align:-2px;margin-right:.35em}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.flash-toast{transition:opacity .45s ease, transform .45s ease}
.flash-toast.flash-hide{opacity:0;transform:translateY(-10px)}

/* Feedback form submit: don't stretch full width — keep it a normal, centered button */
.feedback-card .btn-primary-glow { justify-self: center; width: auto; min-width: 230px; }

/* Dynamic navbar item — surfaces the current "missing" section while scrolling */
.pro-navbar .nav-dynamic{opacity:0;transform:translateY(-4px);transition:opacity .28s ease, transform .28s ease}
.pro-navbar .nav-dynamic.show{opacity:1;transform:none}
.pro-navbar .nav-dynamic[hidden]{display:none}

/* Form actions row (submit + reset) */
.form-actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.2rem}
.btn-reset{display:inline-flex;align-items:center;gap:.4rem;padding:.72rem 1.2rem;border-radius:12px;border:1px solid rgba(124,46,133,.22);background:#fff;color:#6b7280;font-weight:600;font-size:.9rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s;font-family:inherit}
.btn-reset:hover{border-color:var(--pi);color:var(--pi);background:rgba(179,65,127,.04)}
.feedback-card .form-actions{justify-content:flex-start}

/* Clear (×) button on the résumé file-upload — inline beside "Change", no overlap */
.file-upload-clear{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid rgba(31,38,135,.14);background:#fff;color:#9aa3b2;display:inline-grid;place-items:center;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.file-upload-clear:hover{border-color:#dc2626;color:#dc2626;background:#fff5f5}
.file-upload-clear[hidden]{display:none}
.file-upload-clear .bi{font-size:.72rem}

/* Keep the Apply / form action buttons (Submit + Reset) on one line */
.modal-form .form-actions{flex-wrap:nowrap;align-items:stretch}
.modal-form .form-actions .btn-primary-glow{flex:1 1 auto;justify-content:center;white-space:nowrap}
.modal-form .form-actions .btn-reset{flex:0 0 auto;white-space:nowrap}
@media(max-width:380px){.modal-form .form-actions .btn-primary-glow .arrow{display:none}}
/* Wide modal: don't stretch the submit button across 940px — size both to content
   and right-align the pair, with the primary action last. */
.modal-wide .modal-form .form-actions{justify-content:flex-end;gap:.7rem}
.modal-wide .modal-form .form-actions .btn-primary-glow{flex:0 0 auto;width:auto;order:2}
.modal-wide .modal-form .form-actions .btn-reset{order:1}
@media(max-width:767px){
  .modal-wide .modal-form .form-actions{flex-wrap:wrap;justify-content:stretch}
  .modal-wide .modal-form .form-actions .btn-primary-glow{flex:1 1 auto}
}

/* Drag-over state for the résumé upload box */
.file-upload.dragover{border-color:var(--pi)!important;background:rgba(179,65,127,.06)!important}
.file-upload.dragover .file-upload-icon{color:var(--pi)}

/* Open-roles search */
.jobs-search{position:relative;display:flex;align-items:center;max-width:560px;margin:0 auto 2rem}
.jobs-search .bi-search{position:absolute;left:1rem;color:var(--pi);font-size:1rem;pointer-events:none}
.jobs-search input{width:100%;padding:.85rem 1rem .85rem 2.6rem;border:1px solid rgba(31,38,135,.16);border-radius:14px;font-size:.95rem;font-family:inherit;background:rgba(255,255,255,.9);color:var(--text-dark);transition:border-color .2s,box-shadow .2s}
.jobs-search input:focus{outline:none;border-color:var(--pi);box-shadow:0 0 0 3px rgba(179,65,127,.12)}
.jobs-search .jobs-count{position:absolute;right:1rem;font-size:.78rem;font-weight:600;color:var(--text-mute);pointer-events:none}
.jobs-empty{grid-column:1/-1;text-align:center;color:var(--text-mid);padding:1.5rem 0}
.jobs-empty[hidden]{display:none}

/* One-line breathing space below the message field, before the action buttons */
.modal-form .form-spacer{height:.55rem}

/* Breathing space below the "Tell us about your goals" heading on the contact page */
.contact-form-card .contact-title-gap{height:1.1rem}

/* ===== Network-issue modal (connection lost) ===== */
.net-modal-overlay{position:fixed;inset:0;z-index:20000;display:none;align-items:center;justify-content:center;background:rgba(15,18,30,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1.2rem}
.net-modal-overlay.show{display:flex}
.net-modal{background:#fff;border-radius:20px;max-width:400px;width:100%;padding:2rem 1.8rem;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:netPop .25s cubic-bezier(.16,1,.3,1)}
@keyframes netPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.net-modal-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;background:linear-gradient(135deg,#fee2e2,#fff1f2);color:#ef4444;font-size:1.7rem}
.net-modal h4{margin:0 0 .5rem;font-size:1.22rem;font-weight:700;color:#0f172a}
.net-modal p{margin:0 0 1.4rem;color:#64748b;font-size:.93rem;line-height:1.55}
.net-modal-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.net-modal-actions button{padding:.62rem 1.4rem;border-radius:12px;font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:transform .15s,box-shadow .2s,background .2s}
.net-retry{background:linear-gradient(135deg,var(--pi),var(--orange));color:#fff;box-shadow:0 6px 18px rgba(179,65,127,.3)}
.net-retry:hover{transform:translateY(-1px)}
.net-dismiss{background:#fff;border-color:#e2e8f0;color:#475569}
.net-dismiss:hover{background:#f8fafc}
@media (prefers-reduced-motion:reduce){.net-modal{animation:none}}

/* Network modal — professional polish (pulse ring + reassurance note) */
.net-modal{position:relative;overflow:hidden}
.net-modal::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pi),var(--orange))}
.net-modal-icon{position:relative;background:linear-gradient(135deg,#fee2e2,#fff5f5)}
.net-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(239,68,68,.45);animation:netRing 1.8s ease-out infinite}
@keyframes netRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.net-modal-note{margin:1.1rem 0 0!important;padding-top:1rem;border-top:1px solid #f1f5f9;font-size:.8rem!important;color:#94a3b8!important;display:flex;align-items:center;justify-content:center;gap:.4rem}
.net-modal-note .bi{color:#22c55e}
.net-retry .bi{font-size:.85rem;margin-right:.05rem}
@media (prefers-reduced-motion:reduce){.net-ring{animation:none;opacity:0}}

/* ===== Mobile: tighten Glimpse heading/gallery spacing (was a big empty gap) ===== */
@media (max-width: 600px) {
  .gallery-block { margin-top: 1.4rem; }
  .showcase-title { margin: 1.6rem 0 1rem; }
}

/* ===== Mobile: comfortable, touch-friendly buttons (min 44–48px tap targets) ===== */
@media (max-width: 600px) {
  .btn-primary-glow,
  .btn-ghost,
  .nav-cta,
  .btn-secondary,
  .btn-reset,
  .net-modal-actions button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .98rem;
    line-height: 1.1;
  }
  /* Primary CTAs read better full-width on a phone; Reset stays beside the submit.
     min-width:0 lets Submit shrink so it + Reset fit the row (no overflow). */
  .modal-form .btn-primary-glow,
  .feedback-card .btn-primary-glow { flex: 1 1 auto; width: auto; min-width: 0; }
  /* Keep Submit + Reset on one tidy, equal-height row */
  .modal-form .form-actions,
  .feedback-card .form-actions { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .modal-form .form-actions > .btn-primary-glow,
  .modal-form .form-actions > .btn-reset,
  .feedback-card .form-actions > .btn-primary-glow,
  .feedback-card .form-actions > .btn-reset {
    height: 50px; min-height: 50px;       /* identical height — no misalignment */
    padding-top: 0; padding-bottom: 0;
    white-space: nowrap;
  }
  .modal-form .form-actions > .btn-reset,
  .feedback-card .form-actions > .btn-reset { flex: 0 0 auto; }
  /* Bigger tap area for the hamburger menu */
  .navbar-toggler {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
  }
  /* Footer social icons → full 44px tap targets */
  .footer-socials a { width: 44px; height: 44px; }
}

/* ===== Mobile: keep SHORT icon-card grids horizontal (2-up) instead of long stacks =====
   Only compact icon+label cards. Text-heavy cards (why-grid, testimonials) stay
   full-width so their copy stays readable. */
@media (max-width: 600px) {
  .dept-grid,                      /* Careers → Teams (8 icon cards) */
  .careers-cta-grid.perks-2col,    /* Home → Careers perks (4 icon cards) */
  .markets-grid {                  /* short region cards */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .7rem;
  }
}
@media (max-width: 380px) {
  .dept-grid, .careers-cta-grid.perks-2col, .markets-grid { gap: .55rem; }
}

/* ===== Mobile: form fields — fix tiny text + iOS zoom-on-focus =====
   The root font scales down on phones, which made 0.95rem inputs render at ~13px
   (tiny text in a tall box) and triggered iOS Safari's zoom-when-focused jump.
   Pin fields to 16px so text stays proportionate and the page never zooms on tap. */
@media (max-width: 600px) {
  .modal-form input,
  .modal-form select,
  .modal-form textarea {
    font-size: 16px;          /* must be ≥16px to stop iOS zoom-on-focus */
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
  }
  /* selects keep room on the right for the custom dropdown arrow (don't let text overlap it) */
  .modal-form select { padding-right: 2.4rem; }
  .modal-form textarea { min-height: 92px; }
  .modal-form { gap: 0.7rem; }
}

/* ===== Mobile: Apply Now CTA in the collapsed menu — compact & centred (not full-width) ===== */
@media (max-width: 991px) {
  #mainNavbar .nav-actions { width: 100%; justify-content: center; margin-top: .6rem; }
  #mainNavbar .nav-actions .nav-cta {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: .62rem 1.9rem !important;
    font-size: .9rem !important;
    min-height: 44px;
  }
}