/* ============================================================
   Fintara — shared stylesheet
   Pages keep the design-system inline styles from the source;
   this file adds base reset, nav/dropdown behaviour, GSAP
   reveal states and light responsive rules.
   ============================================================ */
:root{
  --ink:#07231B; --ink-2:#0F3A2C; --green:#0F6B45;
  --mint:#A9E8C4; --cream:#F2EFE6; --muted:#4E6456;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);font-family:'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--green)}
a:hover{color:var(--ink)}
svg{display:block}
img{max-width:100%}

/* keep every top-level nav label on a single line (no mid-item wrap) */
.nav-links > a,
.nav-links .nav-services > a,
.nav-links .lang-toggle{white-space:nowrap}

/* ---- Services dropdown (was DC hover state) ---- */
.nav-services{position:relative;display:inline-flex}
.nav-services .dropdown{
  position:absolute;top:100%;left:-16px;padding-top:12px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-services:hover .dropdown,
.nav-services:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
/* sticky global header — nav lifted out of the hero so it stays fixed page-wide */
.site-header{position:sticky;top:0;z-index:50;background:#07231B;box-shadow:0 2px 24px rgba(7,35,27,.30)}

.drop-item{transition:background .15s ease}
.drop-item:hover{background:var(--cream)!important}

/* subtle lift on cards / buttons that opt in */
.lift{transition:transform .28s ease,box-shadow .28s ease;will-change:transform}
.lift:hover{transform:translateY(-4px)}
.btn{transition:transform .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px)}

/* ---- GSAP reveal init states ---- */
.js [data-reveal],
.js [data-hero],
.js [data-step]{opacity:0}

/* watermark logos never intercept clicks */
.watermark{pointer-events:none}

/* ---- Social icons ---- */
.social-ico,.social-ico-d{display:inline-flex;transition:color .18s ease,transform .18s ease}
.social-ico:hover,.social-ico-d:hover{transform:translateY(-2px)}
.social-ico{color:rgba(242,239,230,.5)}
.social-ico:hover{color:var(--mint)}
.social-ico-d{color:var(--green)}
.social-ico-d:hover{color:var(--ink)}

/* ---- Light responsive ---- */
@media (max-width:900px){
  /* collapse the nav on mobile but keep the language switcher reachable */
  .nav-links{gap:0!important}
  .nav-links > :not(.lang-switch){display:none!important}
}

/* ---- Language switcher (custom dropdown, matches the dark/green nav) ---- */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-toggle{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(242,239,230,.08);
  border:1px solid rgba(242,239,230,.22);
  border-radius:999px;color:rgba(242,239,230,.9);
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:8px 13px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.lang-toggle:hover,.lang-toggle:focus-visible,
.lang-switch.open .lang-toggle{
  border-color:rgba(169,232,196,.6);
  background:rgba(242,239,230,.12);
  color:var(--cream);outline:none;
}
.lang-caret{font-size:9px;opacity:.75;transition:transform .2s ease}
.lang-switch.open .lang-caret{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:100%;right:0;margin:10px 0 0;padding:6px;
  min-width:160px;list-style:none;z-index:60;
  background:linear-gradient(165deg,#0F3A2C 0%,#07231B 100%);
  border:1px solid rgba(242,239,230,.15);border-radius:13px;
  box-shadow:0 16px 40px rgba(7,35,27,.42);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-opt{
  padding:9px 12px;border-radius:9px;white-space:nowrap;
  font-size:13px;font-weight:500;color:rgba(242,239,230,.8);
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.lang-opt:hover{background:rgba(242,239,230,.09);color:var(--cream)}
.lang-opt[aria-selected="true"]{color:var(--mint);font-weight:600}
@media (max-width:820px){
  .grid-2,.grid-3,.grid-4,.hero-grid{grid-template-columns:1fr!important}
  .svc-split{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-hero],.js [data-step]{opacity:1!important}
}

/* mobile hamburger menu */
.nav-burger{display:none}
.mobile-menu{display:none}
@media (max-width:820px){
  .site-header .nav{gap:14px!important;padding-left:22px!important;padding-right:22px!important}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:1px solid rgba(242,239,230,.2);background:transparent;border-radius:11px;cursor:pointer;flex:none}
  .nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:#F2EFE6;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;z-index:55;padding:8px 22px 20px;background:#07231B;border-top:1px solid rgba(242,239,230,.08);box-shadow:0 24px 44px rgba(7,35,27,.4);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .mobile-menu a{padding:13px 4px;font-size:15px;font-weight:500;color:rgba(242,239,230,.85);text-decoration:none;border-bottom:1px solid rgba(242,239,230,.07)}
  .mobile-menu a:hover{color:#F2EFE6}
  .mobile-menu .mm-cta{margin-top:14px;padding:14px;text-align:center;color:#07231B;background:#A9E8C4;border-radius:999px;font-weight:600;border-bottom:none}
}
CSS
echo "css appended. .nav-burger rules: $(grep -c 'nav-burger' styles.css)"
/* footer columns reflow on small screens (grid uses inline template) */
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:36px 28px!important;padding-left:24px!important;padding-right:24px!important}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr!important;gap:30px!important}
}
CSS
echo "footer-grid CSS lines: $(grep -c footer-grid styles.css)"
node i18n-build.js 2>&1 | grep -E "hits|sitemap"
echo "verify class present per lang:"; for l in en de ru; do f=$([ $l = en ] && echo index.html || echo $l/index.html); echo "$l: $(grep -c 'class=\"footer-grid\"' $f)"; done
/* single job page — sticky sidebar + responsive grid */
.job-aside{position:sticky;top:96px;align-self:start}
@media (max-width:820px){
  .job-grid{grid-template-columns:1fr!important;gap:36px!important}
  .job-aside{position:static!important;top:auto!important}
}
CSS
echo "job-aside CSS: $(grep -c job-aside styles.css)"
echo "=== add new label translations ==="
node -e '
const fs=require("fs");global.window={};require("./i18n-dict.js");const D=global.window.FINTARA_I18N;
const T=[
["Own a portfolio of UAE SME clients end to end, in a modern cloud-first stack.","Betreuen Sie ein Portfolio von KMU-Kunden in den VAE von A bis Z, in einem modernen, cloud-first Stack.","Gestiona una cartera de clientes pyme de los EAU de principio a fin, en un stack moderno y cloud-first.","Gestisci un portafoglio di clienti PMI degli EAU dall\x27inizio alla fine, in uno stack moderno e cloud-first.","Ведите портфель клиентов из числа МСБ ОАЭ от начала до конца в современном облачном стеке."],
["Role details","Stellendetails","Detalles del puesto","Dettagli posizione","О вакансии"],
["Type","Art","Tipo","Tipo","Тип"],
["Location","Standort","Ubicación","Sede","Локация"],
["Setup","Modell","Modalidad","Modalità","Формат"],
["Experience","Erfahrung","Experiencia","Esperienza","Опыт"],
["Team","Team","Equipo","Team","Команда"]
];
let n=0;for(const [en,de,es,it,ru] of T){D.de[en]=de;D.es[en]=es;D.it[en]=it;D.ru[en]=ru;n++;}
fs.writeFileSync("i18n-dict.js","/* Fintara i18n dictionary — source-English keyed. Generated; do not edit by hand. */\n"+"window.FINTARA_I18N = "+JSON.stringify({de:D.de,es:D.es,it:D.it,ru:D.ru})+";\n");
console.log("added",n,"label keys × 4 langs");
'
node i18n-build.js 2>&1 | grep -E "hits|untranslated"