/* ==========================================================================
   Omeecron Exports — Main Stylesheet
   ========================================================================== */

:root {
  --navy-950: #061428;
  --navy-900: #0a1d3a;
  --navy-800: #0f2a52;
  --navy-700: #16386b;
  --brand: #0ea5dd;
  --brand-600: #0a8cc0;
  --brand-700: #08709b;
  --brand-ink: #0779ab;      /* brand blue for text/buttons: 4.8:1 on white */
  --teal-ink: #0d7a6f;
  --wa-ink: #15803d;
  --brand-50: #e8f7fd;
  --brand-100: #cdeefa;
  --teal: #19c2a7;
  --gold: #e3a83b;
  --gold-50: #fdf5e6;
  --rose: #f2a3a3;

  --ink: #13233d;
  --ink-2: #33445f;
  --muted: #5f6f87;
  --line: #e3eaf2;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --bg-tint: #eef6fb;

  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(10, 29, 58, .06), 0 2px 8px rgba(10, 29, 58, .05);
  --shadow: 0 10px 30px -10px rgba(10, 29, 58, .18), 0 4px 10px -4px rgba(10, 29, 58, .08);
  --shadow-lg: 0 30px 60px -20px rgba(10, 29, 58, .30), 0 10px 20px -10px rgba(10, 29, 58, .12);

  --container: 1240px;
  --gutter: 24px;
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* "clip" (not "hidden") so body never becomes a scroll container — that would break the sticky header */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.light { color: #7fd6f5; }
.section-title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); margin-bottom: 18px; }
.section-title em, .hero-title em, .page-hero h1 em {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, var(--brand) 0%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .1em; margin-right: -.1em;
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 640px; }
.section-head { margin-bottom: 56px; }
.section-head.center { text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--brand-ink); --b-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--b-bg); color: var(--b-fg);
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  box-shadow: 0 10px 24px -10px rgba(7,121,171,.75);
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--brand-700), var(--teal-ink));
  opacity: 0; transition: opacity .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(14,165,221,.8); }
.btn:hover::after { opacity: 1; }
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-ghost { --b-bg: transparent; --b-fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.btn-ghost::after { background: rgba(255,255,255,.1); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-outline { --b-bg: transparent; --b-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-outline::after { background: var(--bg-tint); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn-white { --b-bg: #fff; --b-fg: var(--navy-900); box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); }
.btn-white::after { background: var(--brand-50); }
.btn-gold { --b-bg: var(--gold); --b-fg: var(--navy-950); box-shadow: 0 12px 26px -12px rgba(227,168,59,.8); }
.btn-gold::after { background: linear-gradient(100deg, #f0bb55, #e3a83b); }
.btn-sm { padding: 10px 18px; font-size: .85rem; }
.btn-whatsapp { --b-bg: var(--wa-ink); box-shadow: 0 12px 26px -12px rgba(21,128,61,.75); }
.btn-whatsapp::after { background: #116b33; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand-ink); }
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-950); color: #b7c6dc; font-size: .82rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 42px; }
.topbar-info, .topbar-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--brand); }
.topbar-tag { display: inline-flex; align-items: center; gap: 8px; color: #dbe6f5; }
.topbar-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(25,194,167,.2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px -18px rgba(10,29,58,.35); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { width: 50px; height: 50px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; color: var(--navy-900); }
.brand-name span { color: var(--brand-ink); }
.site-footer .brand-name span { color: #5fd0f7; }
.brand-sub { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-weight: 600; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  position: relative; padding: 10px 13px; font-weight: 600; font-size: .93rem; color: var(--ink); white-space: nowrap;
  border-radius: 10px; transition: color .2s, background .2s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.main-nav a:hover { color: var(--brand-ink); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--brand-ink); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s, background .3s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(14,165,221,.35), transparent 60%),
              radial-gradient(800px 500px at -10% 110%, rgba(25,194,167,.22), transparent 60%),
              linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color: #c9d6ea;
  padding: 96px 0 140px;
}
.hero-grid-bg {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.hero-routes { position: absolute; right: -80px; top: 40px; width: 760px; z-index: -1; opacity: .55; pointer-events: none; }
.hero-routes path { fill: none; stroke: url(#routeGrad); stroke-width: 1.4; stroke-dasharray: 4 8; animation: dash 30s linear infinite; }
.hero-routes circle { fill: var(--brand); }
@keyframes dash { to { stroke-dashoffset: -600; } }

.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #e3edf9; font-size: .85rem; font-weight: 600;
  margin-bottom: 26px; backdrop-filter: blur(6px);
}
.hero-badge b { background: linear-gradient(100deg, var(--brand-ink), var(--teal-ink)); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-title { color: #fff; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 24px; }
.hero-title em { background: linear-gradient(100deg, #5fd0f7 0%, #59e6cf 100%); -webkit-background-clip: text; background-clip: text; }
.hero-text { font-size: 1.15rem; max-width: 560px; color: #b6c5dc; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-actions .btn-brochure { padding-left: 20px; padding-right: 20px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 40px; justify-content: start; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }
.hero-stats strong { display: block; font-size: 2.1rem; color: #fff; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero-stats strong sup { font-size: .55em; color: var(--brand); top: -.7em; }
.hero-stats > div > span { font-size: .85rem; color: #93a6c3; display: block; margin-top: 6px; }

.hero-visual { position: relative; height: 580px; }
.hv-card { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid rgba(255,255,255,.08); background: var(--navy-800); }
.hv-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hv-card:hover img { transform: scale(1.06); }
.hv-1 { width: 62%; height: 72%; right: 0; top: 0; }
.hv-2 { width: 50%; height: 46%; left: 0; top: 18%; z-index: 2; }
.hv-3 { width: 46%; height: 40%; left: 14%; bottom: 0; z-index: 3; }
.hv-4 { width: 42%; height: 30%; right: 4%; bottom: 2%; z-index: 1; }
.hv-float {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.96); color: var(--ink); padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: floaty 6s ease-in-out infinite;
}
.hv-float .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--teal)); }
.hv-float .ic .icon { width: 22px; height: 22px; }
.hv-float strong { display: block; font-size: .98rem; line-height: 1.2; }
.hv-float small { color: var(--muted); font-size: .76rem; }
.hv-float.f1 { left: -28px; top: 2%; }
.hv-float.f2 { right: -10px; top: 64%; animation-delay: -3s; }
.hv-float.f2 .ic { background: linear-gradient(135deg, var(--gold), #f3c56b); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; color: #fff; }

/* ---------- Trust strip ---------- */
.trust { position: relative; z-index: 3; margin-top: -70px; }
.trust-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  display: grid; grid-template-columns: 230px 1fr; align-items: center; overflow: hidden;
}
.trust-card > * { min-width: 0; }
.trust-label { padding: 28px 32px; background: linear-gradient(135deg, var(--brand-50), #fff); height: 100%; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.trust-label strong { color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.trust-label span { font-size: .82rem; color: var(--muted); }
.trust-list { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: center; gap: 18px; padding: 22px 30px; }
.cert b { white-space: nowrap; }
.cert { display: flex; align-items: center; gap: 12px; }
.cert-seal {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(from 180deg, var(--brand-ink), var(--teal-ink), var(--brand-ink));
  color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .02em; position: relative; text-align: center; line-height: 1.05;
}
.cert-seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.6); }
.cert-seal.gold { background: conic-gradient(from 180deg, var(--gold), #f5cf7c, var(--gold)); color: var(--navy-950); }
.cert-seal.navy { background: conic-gradient(from 180deg, var(--navy-800), var(--navy-700), var(--navy-800)); }
.cert b { display: block; color: var(--ink); font-size: .92rem; line-height: 1.2; }
.cert small { color: var(--muted); font-size: .75rem; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; position: relative; }
.section.soft { background: var(--bg-soft); }
.section.tint { background: linear-gradient(180deg, var(--bg-tint), #fff); }
.section.dark {
  background: radial-gradient(900px 500px at 100% 0%, rgba(14,165,221,.22), transparent 60%),
              linear-gradient(160deg, var(--navy-950), var(--navy-900));
  color: #b6c5dc;
}
.section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.section.dark .lead { color: #9fb2cf; }
.section.dark .section-title em { background: linear-gradient(100deg, #5fd0f7, #59e6cf); -webkit-background-clip: text; background-clip: text; }

/* ---------- About split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.about-media { position: relative; padding: 0 40px 60px 0; }
.about-media .m-main { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.4; }
.about-media .m-main img { width: 100%; height: 100%; object-fit: cover; }
.about-media .m-sub {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
  border: 8px solid #fff; box-shadow: var(--shadow-lg);
}
.about-media .m-sub img { width: 100%; height: 100%; object-fit: cover; }
.about-media .m-badge {
  position: absolute; left: -24px; bottom: 90px; background: var(--navy-900); color: #fff; padding: 22px 24px; border-radius: 20px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px; max-width: 250px;
}
.about-media .m-badge strong { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--brand); letter-spacing: -.03em; }
.about-media .m-badge span { font-size: .84rem; line-height: 1.35; color: #c9d6ea; }
.about-media::before {
  content: ""; position: absolute; top: -30px; left: -30px; width: 160px; height: 160px; z-index: -1;
  background-image: radial-gradient(var(--brand) 2px, transparent 2px); background-size: 16px 16px; opacity: .35;
}
.check-list { display: grid; gap: 14px; margin: 28px 0 36px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); }
.check-list .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex: none; margin-top: 1px; }
.check-list .tick .icon { width: 14px; height: 14px; stroke-width: 3; }
.check-list.cols { grid-template-columns: 1fr 1fr; }
.section.dark .check-list li { color: #c9d6ea; }
.section.dark .check-list .tick { background: rgba(14,165,221,.15); color: #5fd0f7; }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.mini-stat { padding: 18px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); }
.mini-stat strong { display: block; font-size: 1.6rem; color: var(--ink); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.mini-stat span { font-size: .8rem; color: var(--muted); }

/* ---------- Divisions ---------- */
.divisions { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.division {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 560px; color: #fff; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 44px; box-shadow: var(--shadow-lg);
}
.division > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.division::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,20,40,.25) 0%, rgba(6,20,40,.35) 30%, rgba(6,20,40,.8) 58%, rgba(6,20,40,.96) 100%); }
.division.cos::before { background: linear-gradient(180deg, rgba(30,12,36,.28) 0%, rgba(30,14,40,.38) 30%, rgba(24,12,38,.82) 58%, rgba(18,10,36,.96) 100%); }
.division:hover > img { transform: scale(1.06); }
.division .tag { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: rgba(6,20,40,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: auto; border: 1px solid rgba(255,255,255,.25); }
.division h3 { color: #fff; font-size: 2.1rem; margin: 0 0 12px; }
.division p { color: #e3e9f2; max-width: 460px; }
.division h3, .division p { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.division .btn { align-self: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.chip { padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(6px); }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cat-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat-card .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.cat-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat-card:hover .ph img { transform: scale(1.08); }
.cat-card .ph .seg {
  position: absolute; top: 14px; left: 14px; box-shadow: 0 4px 12px -4px rgba(6,20,40,.35); padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.92); color: var(--brand-700);
}
.cat-card .ph .seg.cos { color: #b04a7a; }
.cat-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.cat-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.cat-card p { font-size: .9rem; color: var(--muted); margin-bottom: 16px; flex: 1; }
.cat-card .link-arrow { font-size: .88rem; }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  position: relative; padding: 36px 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; overflow: hidden;
}
.feature::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.feature:hover::after { transform: scaleX(1); }
.feature .f-ic {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--brand-50), #fff); color: var(--brand-600); border: 1px solid var(--brand-100);
  transition: background .4s, color .4s;
}
.feature:hover .f-ic { background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; }
.feature .f-ic .icon { width: 28px; height: 28px; }
.feature h3 { font-size: 1.18rem; margin-bottom: 10px; }
.feature p { font-size: .94rem; color: var(--muted); margin: 0; }
.section.dark .feature { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.section.dark .feature p { color: #9fb2cf; }
.section.dark .feature .f-ic { background: rgba(14,165,221,.12); border-color: rgba(14,165,221,.25); color: #5fd0f7; }
.section.dark .feature:hover { background: rgba(255,255,255,.07); }

/* ---------- Capacity / counters ---------- */
.capacity { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.cap { padding: 40px 30px; border-right: 1px solid rgba(255,255,255,.1); position: relative; }
.cap:last-child { border-right: 0; }
.cap .num { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; }
.cap .num small { font-size: .45em; font-weight: 700; color: #5fd0f7; margin-left: 4px; letter-spacing: 0; }
.cap .unit { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #5fd0f7; font-weight: 700; margin-bottom: 10px; display: block; }
.cap p { margin: 0; font-size: .92rem; color: #9fb2cf; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; counter-reset: step; }
.steps::before {
  content: ""; position: absolute; top: 38px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 16px); opacity: .5;
}
.step { text-align: center; position: relative; padding: 0 6px; }
.step .s-num {
  width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: #fff; border: 2px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow);
  transition: background .4s, color .4s, transform .4s var(--ease);
}
.step .s-num .icon { width: 30px; height: 30px; }
.step .s-num::after {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-900); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; border: 3px solid #fff;
}
.step:hover .s-num { background: linear-gradient(135deg, var(--brand), var(--teal)); color: #fff; transform: translateY(-4px); }
.step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- Private label band ---------- */
.pl-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pl-visual .pv { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.pl-visual .pv img { width: 100%; height: 100%; object-fit: cover; }
.pl-visual .pv.tall { grid-row: span 2; }
.pl-visual .pv:nth-child(2) { aspect-ratio: 4/3; }
.pl-visual .pv:nth-child(3) { aspect-ratio: 4/3; }

/* ---------- Markets ---------- */
.markets-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.world { position: relative; }
.world svg { width: 100%; height: auto; }
.world .land { fill: rgba(255,255,255,.14); }
.world .hub { fill: var(--gold); }
.world .dest { fill: #5fd0f7; }
.world .pulse { fill: none; stroke: var(--gold); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: pulse 2.4s ease-out infinite; }
.world .arc { fill: none; stroke: url(#arcGrad); stroke-width: 1.6; stroke-dasharray: 5 6; animation: dash 26s linear infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
.region-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.region {
  padding: 18px 20px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.region:hover { background: rgba(14,165,221,.12); border-color: rgba(14,165,221,.4); transform: translateY(-3px); }
.region strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 2px; }
.region span { font-size: .82rem; color: #93a6c3; line-height: 1.5; display: block; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; gap: 16px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; cursor: zoom-in; background: var(--bg-soft); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery figure:hover img { transform: scale(1.08); }
.gallery figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; color: #fff; font-size: .82rem; font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(6,20,40,.85)); opacity: 0; transform: translateY(8px); transition: all .4s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }
.gallery .g-w2 { grid-column: span 2; }
.gallery .g-w3 { grid-column: span 3; }
.gallery .g-h2 { grid-row: span 2; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6,20,40,.92); display: none; align-items: center; justify-content: center; padding: 40px; backdrop-filter: blur(6px); }
.lightbox.open { display: flex; animation: fadeIn .3s; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; border-radius: 16px; box-shadow: var(--shadow-lg); }
.lightbox .lb-cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #c9d6ea; font-size: .92rem; }
.lightbox button { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255,255,255,.22); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Testimonial-like quote / promise ---------- */
.promise {
  position: relative; padding: 56px; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(135deg, var(--brand-50), #fff 60%, var(--gold-50));
  border: 1px solid var(--line);
}
.promise blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.35; color: var(--ink); font-weight: 400; }
.promise blockquote em { color: var(--brand-700); }
.promise .q-mark { position: absolute; top: 6px; left: 46px; font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--brand); opacity: .18; pointer-events: none; }
.promise blockquote { position: relative; margin-top: 34px; }
.promise .who { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-size: .92rem; }
.promise .who strong { color: var(--ink); display: block; }

/* ---------- CTA ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); padding: 72px 64px;
  background: radial-gradient(600px 320px at 92% 0%, rgba(25,194,167,.35), transparent 60%),
              linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 45%, var(--brand-700) 100%);
  color: #e8f7fd; display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center;
  box-shadow: 0 30px 60px -25px rgba(10,29,58,.6);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000);
}
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); margin-bottom: 12px; }
.cta-band p { margin: 0; font-size: 1.08rem; color: #eef4fb; max-width: 600px; }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 110px 0 120px; color: #c9d6ea;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-900) 50%, var(--navy-800));
}
.page-hero .bg { position: absolute; inset: 0; z-index: -2; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(800px 400px at 85% 0%, rgba(14,165,221,.35), transparent 60%), linear-gradient(90deg, rgba(6,20,40,.95) 0%, rgba(6,20,40,.6) 100%);
}
.page-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.8rem); max-width: 820px; margin-bottom: 18px; }
.page-hero h1 em { background: linear-gradient(100deg, #5fd0f7, #59e6cf); -webkit-background-clip: text; background-clip: text; }
.page-hero p { font-size: 1.12rem; max-width: 640px; color: #b6c5dc; margin: 0; }
.crumbs { display: flex; gap: 10px; align-items: center; font-size: .85rem; margin-bottom: 22px; color: #93a6c3; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }

/* ---------- Product catalogue ---------- */
.catalog-bar {
  position: sticky; top: calc(var(--header-h) + 12px); z-index: 20; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 14px; border-radius: 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow);
  margin-bottom: 40px;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-2);
  transition: background .25s, color .25s;
}
.tab:hover { background: var(--bg-soft); }
.tab.active { background: var(--navy-900); color: #fff; }
.tab .count { display: inline-block; margin-left: 6px; font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: rgba(14,165,221,.15); color: var(--brand-700); }
.tab.active .count { background: rgba(255,255,255,.18); color: #fff; }
.search { position: relative; flex: 1; max-width: 340px; min-width: 220px; }
.search input { width: 100%; padding: 11px 16px 11px 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); outline: none; transition: border-color .2s, background .2s; }
.search input:focus { border-color: var(--brand); background: #fff; }
.search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; }

.catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pcard {
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pcard .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pcard:hover .ph img { transform: scale(1.07); }
.pcard .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(6,20,40,.35)); }
.pcard .ph .seg { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--brand-700); }
.pcard .ph .seg.cos { color: #b04a7a; }
.pcard .ph .n { position: absolute; bottom: 12px; left: 14px; z-index: 2; color: #fff; font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(6,20,40,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pcard .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.pcard h3 { font-size: 1.2rem; margin-bottom: 6px; }
.pcard .desc { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.pcard ul { display: grid; gap: 7px; margin-bottom: 20px; flex: 1; }
.pcard li { display: flex; gap: 10px; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.pcard li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; background: var(--brand); }
.pcard li.more { color: var(--muted); font-style: italic; }
.pcard li.more::before { background: var(--line); }
.pcard li mark { background: rgba(227,168,59,.3); color: inherit; border-radius: 3px; padding: 0 2px; }
.pcard .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--line); }
.pcard .formats { font-size: .75rem; color: var(--muted); line-height: 1.4; }
.pcard .formats b { color: var(--ink); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.pcard .toggle-more { background: none; border: 0; padding: 0; color: var(--brand-ink); font-weight: 700; font-size: .84rem; cursor: pointer; text-align: left; margin: -10px 0 18px; }
.empty { grid-column: 1/-1; text-align: center; padding: 80px 20px; color: var(--muted); }
.empty .icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--brand); }

/* ---------- Tables ---------- */
.table-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 16px 22px; text-align: left; font-size: .93rem; }
table.data thead th { background: var(--navy-900); color: #fff; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
table.data tbody tr { border-bottom: 1px solid var(--line); transition: background .2s; }
table.data tbody tr:last-child { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg-soft); }
table.data td:first-child { font-weight: 700; color: var(--ink); }
table.data td.cap-val { color: var(--brand-700); font-weight: 700; white-space: nowrap; }

/* ---------- Info cards / documents ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.doc {
  display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.doc:hover { border-color: var(--brand-100); transform: translateY(-3px); box-shadow: var(--shadow); }
.doc .d-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); flex: none; }
.doc strong { display: block; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.doc span { font-size: .8rem; color: var(--muted); line-height: 1.4; display: block; }

.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.term { padding: 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.term h4 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; margin-bottom: 16px; }
.term h4 .icon { color: var(--brand); width: 24px; height: 24px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--ink-2); }

/* ---------- Values / mission ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mv { padding: 40px 34px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; }
.mv .big { position: absolute; right: 26px; top: 18px; font-family: var(--font-display); font-size: 4.5rem; font-weight: 600; font-style: italic; color: var(--brand); opacity: .14; line-height: 1; pointer-events: none; }
.mv .f-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--teal)); }
.mv .f-ic .icon { width: 26px; height: 26px; }
.mv h3 { font-size: 1.3rem; }
.mv p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Sister concern */
.sister {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 36px 40px; border-radius: var(--radius-xl);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sister img { width: 86px; height: 86px; border-radius: 22px; background: var(--bg-soft); padding: 6px; }
.sister h3 { font-size: 1.4rem; margin-bottom: 6px; }
.sister p { margin: 0; color: var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.contact-info { display: grid; gap: 16px; }
.c-item { display: flex; gap: 18px; padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.c-item:hover { border-color: var(--brand-100); box-shadow: var(--shadow); }
.c-item .c-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), var(--teal)); flex: none; }
.c-item .c-ic .icon { width: 24px; height: 24px; }
.c-item h4 { font-size: 1rem; margin-bottom: 4px; }
.c-item p, .c-item a { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.c-item a:hover { color: var(--brand-600); }

.form-card { padding: 44px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: 1.6rem; margin-bottom: 6px; }
.form-card > p { color: var(--muted); margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.field label .req { color: #c93c3c; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-soft); outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s; font-size: .95rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(14,165,221,.12); }
.field .err { color: #d04848; font-size: .78rem; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e07272; }
.field.invalid .err { display: block; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 16px; }
.form-success { display: none; padding: 16px 20px; border-radius: 12px; background: #e9f9f4; color: #137a62; font-weight: 600; margin-top: 18px; border: 1px solid #bfeedf; }
.form-success.show { display: block; animation: fadeIn .4s; }
.map { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); height: 420px; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

/* FAQ */
.faq { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; }
.faq details { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--shadow); border-color: var(--brand-100); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; flex: none; transition: transform .3s, background .3s, color .3s; color: var(--brand-600); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq .ans { padding: 0 26px 24px; color: var(--muted); }
.faq .ans p:last-child { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #93a6c3; padding-top: 90px; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(14,165,221,.18), transparent 70%); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 50px; padding-bottom: 60px; position: relative; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: #93a6c3; }
.footer-about { margin: 22px 0 26px; font-size: .93rem; max-width: 360px; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 22px; letter-spacing: 0; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { font-size: .93rem; transition: color .2s, padding .2s; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-contact li { display: flex; gap: 12px; font-size: .92rem; line-height: 1.55; }
.footer-contact .icon { color: var(--brand); margin-top: 3px; width: 18px; height: 18px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #c9d6ea; transition: background .3s, transform .3s var(--ease), color .3s; }
.socials a:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }
.socials .icon { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0; font-size: .85rem; position: relative; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: #c9d6ea; }
.footer-bottom a:hover { color: var(--brand); }

/* Floating actions */
.float-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 14px 30px -10px rgba(37,211,102,.8); transition: transform .3s var(--ease);
}
.float-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: ring 2.4s ease-out infinite; }
.float-wa:hover { transform: scale(1.08); }
.float-wa svg { width: 30px; height: 30px; fill: #fff; }
@keyframes ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.to-top {
  position: fixed; right: 30px; bottom: 94px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy-900); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { height: 520px; max-width: 640px; width: 100%; margin: 0 auto; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 56px; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .markets-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  :root { --header-h: 76px; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; padding: 24px var(--gutter); overflow-y: auto;
    opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav-open .main-nav { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .main-nav a { padding: 16px 18px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav a::after { display: none; }
}
@media (max-width: 960px) {
  .header-cta .btn:not(.nav-toggle) { display: none; }
  .split, .divisions, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .about-media { max-width: 560px; }
  .capacity { grid-template-columns: repeat(2, 1fr); }
  .cap:nth-child(2) { border-right: 0; }
  .cap:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .trust-card { grid-template-columns: 1fr; }
  .trust-list { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 32px; }
  .trust-label { border-right: 0; border-bottom: 1px solid var(--line); text-align: center; }
  .cta-band { grid-template-columns: 1fr; padding: 56px 40px; }
  .mv-grid, .terms { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery .g-w3 { grid-column: span 2; }
  .sister { grid-template-columns: auto 1fr; }
  .sister .btn { grid-column: 1/-1; justify-self: start; }
  .topbar-links { display: none; }
  .section { padding: 90px 0; }
}
@media (max-width: 680px) {
  :root { --gutter: 16px; }
  body { font-size: 15.5px; }
  .topbar { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 1.15rem; }
  .brand-sub { font-size: .58rem; letter-spacing: .2em; }
  .hero { padding: 64px 0 120px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hero-stats strong { font-size: 1.6rem; }
  .hero-stats > div > span { font-size: .75rem; line-height: 1.3; }
  .hero-visual { height: 400px; }
  .hv-float.f1 { left: 0; }
  .hv-float.f2 { right: 0; }
  .hv-float { padding: 10px 12px; }
  .hv-float .ic { width: 36px; height: 36px; }
  .trust-list { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 16px 12px; padding: 20px 18px; }
  .trust-label { padding: 20px 18px; }
  .cert { gap: 10px; min-width: 0; }
  .cert b { white-space: normal; font-size: .84rem; }
  .cert-seal { width: 44px; height: 44px; font-size: .62rem; }
  .cat-grid, .features, .catalog, .doc-grid, .region-list, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .check-list.cols { grid-template-columns: 1fr; }
  .mini-stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .mini-stat { padding: 14px 12px; }
  .mini-stat strong { font-size: 1.25rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .capacity { grid-template-columns: 1fr; }
  .cap { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1); }
  .cap:last-child { border-bottom: 0; }
  .division { min-height: 480px; padding: 30px 26px; }
  .division h3 { font-size: 1.7rem; }
  .about-media { padding: 0 20px 50px 0; }
  .about-media .m-badge { left: 0; bottom: 70px; padding: 16px 18px; }
  .about-media .m-badge strong { font-size: 1.9rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .gallery .g-w2, .gallery .g-w3 { grid-column: span 2; }
  .cta-band { padding: 44px 26px; border-radius: var(--radius-lg); }
  .form-card { padding: 28px 22px; }
  .promise { padding: 36px 26px; }
  .catalog-bar { position: static; }
  .search { max-width: none; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab { white-space: nowrap; }
  .sister { grid-template-columns: 1fr; padding: 28px 24px; }
  .section-head { margin-bottom: 40px; }
  .page-hero { padding: 80px 0 90px; }
}

/* ==========================================================================
   Dynamic site additions (PHP version)
   ========================================================================== */
.nav-mobile-only { display: none !important; }
.section-compact { padding-top: 100px; padding-bottom: 100px; }
.section-catalog { padding-top: 60px; }
.steps-wrap { margin-top: 90px; }
.cap-note { text-align: center; margin: 22px 0 0; font-size: .85rem; color: #7f93b2; }
.cap-note a { color: #5fd0f7; }
.gallery { grid-auto-flow: dense; }
[hidden] { display: none !important; }

/* Catalogue bar */
.catalog-bar { flex-direction: column; align-items: stretch; gap: 12px; }
.catalog-top { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.seg-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); gap: 2px; }
.seg-btn { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--ink-2); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.seg-btn span { font-size: .72rem; color: var(--muted); margin-left: 4px; }
.seg-btn.active { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-sm); }
.seg-btn.active span { color: var(--brand-ink); }
.tabs .tab { font-size: .86rem; padding: 8px 14px; }

/* Product cards */
.pcard .ph { display: block; }
.pcard h3 a { transition: color .2s; }
.pcard h3 a:hover { color: var(--brand-600); }
.pcard .foot { flex-wrap: wrap; }
.foot-actions { display: flex; gap: 8px; }
.pcard li.extra { display: none; }
.pcard.expanded li.extra { display: flex; }
.pcard li[hidden] { display: none !important; }

/* Downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.download {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.download:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-100); }
.d-pdf { width: 54px; height: 66px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, #e0484b, #b8282b); color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .06em; box-shadow: 0 10px 20px -10px rgba(184,40,43,.7); }
.d-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.d-body strong { color: var(--ink); font-size: 1.02rem; line-height: 1.3; }
.d-body span { font-size: .86rem; color: var(--muted); line-height: 1.4; }
.d-body small { font-size: .76rem; color: var(--brand-ink); font-weight: 700; }
.d-go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); flex: none; transition: background .3s, color .3s; }
.download:hover .d-go { background: var(--brand); color: #fff; }

/* Product detail */
.page-hero-sm { padding: 90px 0 100px; }
.section-product { padding-top: 90px; }
.product-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.product-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
.pg-main { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--bg-soft); }
.pg-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.pg-main .seg { z-index: 2; }
.pg-main .seg { position: absolute; top: 18px; left: 18px; padding: 6px 14px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--brand-700); }
.pg-main .seg.cos { color: #b04a7a; }
.pg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; margin-top: 16px; }
.pg-thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; transition: border-color .2s, transform .2s; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-thumb:hover { transform: translateY(-2px); }
.pg-thumb.active { border-color: var(--brand); }
.product-info .section-title { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); }
.product-desc { color: var(--ink-2); margin-bottom: 24px; }
.product-desc p:first-child { font-size: 1.1rem; color: var(--ink); }
.product-meta { margin-bottom: 20px; }
.product-meta b { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 10px; }
.product-perks { margin: 0 0 30px; }
.product-range { margin-top: 80px; padding: 44px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--bg-tint), #fff 70%); border: 1px solid var(--line); }
.pr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.pr-head h3 { font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: 12px; }
.pr-head h3 span { font-size: .8rem; padding: 4px 12px; border-radius: 999px; background: var(--brand-ink); color: #fff; font-weight: 700; letter-spacing: 0; }
.pr-head p { margin: 0; color: var(--muted); max-width: 440px; font-size: .94rem; }
.pr-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pr-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .92rem; font-weight: 600; color: var(--ink); transition: border-color .2s, color .2s, transform .2s; height: 100%; }
.pr-list a .icon { width: 16px; height: 16px; color: var(--muted); transition: transform .2s, color .2s; }
.pr-list a:hover { border-color: var(--brand-100); color: var(--brand-700); transform: translateY(-2px); }
.pr-list a:hover .icon { color: var(--brand); transform: translateX(3px); }
.cat-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Forms */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; padding: 16px 20px; border-radius: 12px; background: #fdeeee; color: #b33636; font-weight: 600; margin-top: 18px; border: 1px solid #f4caca; }
.form-error.show { display: block; animation: fadeIn .4s; }
.form-card > .form-success.show, .form-card > .form-error.show { margin: 0 0 22px; }
.btn:disabled { opacity: .7; cursor: progress; transform: none; }

@media (max-width: 1200px) {
  .nav-mobile-only { display: block !important; }
}
@media (max-width: 1080px) {
  .product-layout { grid-template-columns: 1fr; gap: 40px; }
  .product-gallery { position: static; }
  .pr-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .cat-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .catalog-top { flex-direction: column; align-items: stretch; }
  .seg-switch { display: flex; }
  .seg-btn { flex: 1; padding: 9px 8px; font-size: .82rem; }
  .seg-btn span { display: none; }
  .pr-list, .cat-grid-3, .downloads { grid-template-columns: 1fr; }
  .product-range { padding: 26px 18px; margin-top: 56px; }
  .section-product { padding-top: 56px; }
  .pcard .foot { flex-direction: column; align-items: stretch; }
  .foot-actions .btn { flex: 1; }
  .download { padding: 16px; gap: 14px; }
  .section-compact { padding-top: 70px; padding-bottom: 70px; }
  .steps-wrap { margin-top: 60px; }
}
.capacity-wrap { margin-top: 90px; }
@media (max-width: 680px) { .capacity-wrap { margin-top: 60px; } }
@media (min-width: 961px) {
  .gallery .g-span3 { grid-column: span 3; }
  .gallery .g-span4 { grid-column: span 4; }
  .gallery .g-span5 { grid-column: span 5; }
  .gallery .g-span6 { grid-column: span 6; }
}
@media (max-width: 680px) {
  .steps .step:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 220px; justify-self: center; }
}
@media (min-width: 681px) and (max-width: 1080px) {
  /* 3 + 2 layout with the second row centred */
  .steps { grid-template-columns: repeat(6, 1fr); }
  .steps .step { grid-column: span 2; }
  .steps .step:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* ==========================================================================
   Multi-language
   ========================================================================== */

/* Language switcher */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  transition: border-color .2s, background .2s;
}
.lang-btn:hover, .lang-switch.open .lang-btn { border-color: var(--brand-100); background: var(--brand-50); }
.lang-btn .icon { width: 17px; height: 17px; color: var(--brand-ink); }
.lang-btn .chev { width: 14px; height: 14px; color: var(--muted); transform: rotate(90deg); transition: transform .25s; }
.lang-switch.open .lang-btn .chev { transform: rotate(-90deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; min-width: 200px; padding: 8px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .92rem; }
.lang-menu a:hover { background: var(--bg-soft); }
.lang-menu a.active { background: var(--brand-50); color: var(--brand-700); }
.lm-code { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.lang-menu a.active .lm-code { color: var(--brand-700); }
.lang-menu a[lang="ar"] .lm-native { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
@media (max-width: 680px) {
  .lang-btn { height: 40px; padding: 0 10px; }
  .lang-btn .chev { display: none; }
}

/* Fonts per script */
html[lang="ar"] { --font-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif; --font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html[lang="ru"] { --font-body: "Manrope", "Plus Jakarta Sans", "Segoe UI", Roboto, sans-serif; --font-display: "Lora", Georgia, serif; }
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] .section-title em, html[lang="ar"] .hero-title em, html[lang="ar"] .page-hero h1 em,
html[lang="ar"] .promise blockquote em { font-style: normal; font-weight: 700; }
html[lang="ar"] .promise blockquote { font-family: var(--font-body); font-weight: 500; line-height: 1.6; }
html[lang="ar"] .eyebrow, html[lang="ar"] .unit, html[lang="ar"] .tag, html[lang="ar"] .seg, html[lang="ar"] .cat-card .ph .seg,
html[lang="ar"] table.data thead th, html[lang="ar"] .product-meta b, html[lang="ar"] .pcard .formats b, html[lang="ar"] .hero-badge b { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .hero-title, html[lang="ar"] .page-hero h1, html[lang="ar"] .section-title, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }
html[lang="ru"] .hero-title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.9rem); }
html[lang="ru"] .hero-title, html[lang="ru"] .section-title { letter-spacing: -.02em; }
/* Longer words in French/Spanish/Portuguese/Russian: allow headings to hyphenate rather than overflow */
html[lang="fr"] h1, html[lang="fr"] h2, html[lang="es"] h1, html[lang="es"] h2, html[lang="pt"] h1, html[lang="pt"] h2, html[lang="ru"] h1, html[lang="ru"] h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ---------- Right-to-left (Arabic) ---------- */
[dir="rtl"] .eyebrow::before { order: 0; }
[dir="rtl"] .section-title em, [dir="rtl"] .hero-title em, [dir="rtl"] .page-hero h1 em { padding-right: 0; margin-right: 0; padding-left: .1em; margin-left: -.1em; }
[dir="rtl"] .btn .icon, [dir="rtl"] .link-arrow .icon, [dir="rtl"] .pr-list a .icon, [dir="rtl"] .crumbs .icon { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .pr-list a:hover .icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .main-nav a::after { transform-origin: right; }
[dir="rtl"] .feature::after { transform-origin: right; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* Hero */
[dir="rtl"] .hero-routes { right: auto; left: -80px; transform: scaleX(-1); }
[dir="rtl"] .hv-1 { right: auto; left: 0; }
[dir="rtl"] .hv-2 { left: auto; right: 0; }
[dir="rtl"] .hv-3 { left: auto; right: 14%; }
[dir="rtl"] .hv-4 { right: auto; left: 4%; }
[dir="rtl"] .hv-float.f1 { left: auto; right: -28px; }
[dir="rtl"] .hv-float.f2 { right: auto; left: -10px; }
[dir="rtl"] .hero-stats { justify-content: start; }

/* Trust strip, about media */
[dir="rtl"] .trust-label { border-right: 0; border-left: 1px solid var(--line); background: linear-gradient(225deg, var(--brand-50), #fff); }
[dir="rtl"] .about-media { padding: 0 0 60px 40px; }
[dir="rtl"] .about-media .m-sub { right: auto; left: 0; }
[dir="rtl"] .about-media .m-badge { left: auto; right: -24px; }
[dir="rtl"] .about-media::before { left: auto; right: -30px; }

/* Cards & badges over photos */
[dir="rtl"] .cat-card .ph .seg, [dir="rtl"] .pcard .ph .seg, [dir="rtl"] .pg-main .seg { left: auto; right: 14px; }
[dir="rtl"] .pcard .ph .n { left: auto; right: 14px; }
[dir="rtl"] .pcard .toggle-more { text-align: right; }
[dir="rtl"] .cap { border-right: 0; border-left: 1px solid rgba(255,255,255,.1); }
[dir="rtl"] .cap:last-child { border-left: 0; }
[dir="rtl"] .cap .num small { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .step .s-num::after { right: auto; left: -6px; }
[dir="rtl"] .tab .count, [dir="rtl"] .seg-btn span { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .search .icon { left: auto; right: 16px; }
[dir="rtl"] .search input { padding: 11px 44px 11px 16px; }
[dir="rtl"] table.data th, [dir="rtl"] table.data td { text-align: right; }
[dir="rtl"] .mv .big { right: auto; left: 26px; }
[dir="rtl"] .promise .q-mark { left: auto; right: 46px; transform: scaleX(-1); }
[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .site-footer::before { right: auto; left: -200px; }
[dir="rtl"] .lightbox button { right: auto; left: 24px; }
[dir="rtl"] .field select { background-position: left 14px center; }

/* Floating buttons move to the left in RTL */
[dir="rtl"] .float-wa { right: auto; left: 22px; }
[dir="rtl"] .to-top { right: auto; left: 30px; }

/* Keep Latin brand, phone numbers and emails left-to-right inside Arabic text */
[dir="rtl"] .brand-text, [dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }

@media (max-width: 960px) {
  [dir="rtl"] .cap:nth-child(2) { border-left: 0; }
  [dir="rtl"] .trust-label { border-left: 0; }
}
@media (max-width: 680px) {
  [dir="rtl"] .hv-float.f1 { right: 0; left: auto; }
  [dir="rtl"] .hv-float.f2 { left: 0; right: auto; }
  [dir="rtl"] .about-media { padding: 0 0 50px 20px; }
  [dir="rtl"] .about-media .m-badge { right: 0; left: auto; }
  [dir="rtl"] .cap { border-left: 0 !important; }
}
[dir="rtl"] .c-item a[dir="ltr"], [dir="rtl"] .footer-contact a[dir="ltr"] { display: inline-block; }

/* ---------- Header that adapts to long menu labels (any language) ---------- */
.site-header .container { max-width: 1440px; }
.main-nav { flex-wrap: nowrap; }
/* Applied by JS when the menu does not fit on one line */
.nav-collapse .nav-toggle { display: inline-flex; }
.nav-collapse .main-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); flex-direction: column; align-items: stretch; gap: 4px;
  background: #fff; padding: 24px var(--gutter); overflow-y: auto;
  opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav-collapse.nav-open .main-nav { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.nav-collapse .main-nav a { padding: 16px 18px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
.nav-collapse .main-nav a::after { display: none; }
.nav-collapse .nav-mobile-only { display: block !important; }
/* Measuring state: lay the menu out inline (invisible) to test whether it fits */
.nav-measure .main-nav { position: static !important; flex-direction: row !important; height: auto !important; padding: 0 !important; visibility: hidden !important; opacity: 0 !important; transform: none !important; }
.nav-measure .main-nav a { padding: 10px 13px !important; font-size: .93rem !important; border: 0 !important; }
.nav-measure.nav-tight .main-nav a { padding: 10px 9px !important; font-size: .9rem !important; }
.nav-measure .nav-toggle, .nav-measure .nav-mobile-only { display: none !important; }
/* Tighter header spacing step (before collapsing to the menu button) */
.nav-tight .main-nav a { padding: 10px 9px; font-size: .9rem; }
.nav-tight .main-nav a::after { left: 9px; right: 9px; }
.nav-tight .header-cta { gap: 8px; }
.nav-tight .header-cta .btn-sm { padding: 10px 14px; }
.nav-tight .brand-sub { letter-spacing: .18em; }

/* ---------- Mobile hardening: header, grids, long words ---------- */
.split > *, .hero .container > *, .contact-grid > *, .divisions > *, .markets-wrap > *, .product-layout > *, .catalog-layout > *, .footer-grid > *, .trust-card > *, .cta-band > * { min-width: 0; }
h1, h2, h3, .section-title, .lead, .check-list li { overflow-wrap: break-word; }
@media (max-width: 680px) {
  .site-header .container { gap: 10px; }
  .brand { flex: 0 1 auto; min-width: 0; gap: 10px; }
  .brand-text { min-width: 0; }
  .brand-name { white-space: nowrap; }
  .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: .12em; font-size: .54rem; }
  .header-cta { flex: none; gap: 8px; }
  .nav-toggle { width: 42px; height: 42px; border-radius: 10px; }
  .lang-btn { padding-inline: 10px; gap: 6px; }
}
@media (max-width: 400px) {
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 1.02rem; }
  .brand-sub { font-size: .5rem; letter-spacing: .08em; }
  .lang-btn .chev { display: none; }
}
@media (max-width: 340px) {
  .brand-sub { display: none; }
}
@media (max-width: 680px) {
  /* Hero collage becomes a tidy grid on phones */
  .hero-visual { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hv-card { position: relative; inset: auto !important; width: auto !important; height: auto !important; aspect-ratio: 1; border-width: 3px; border-radius: var(--radius); }
  .hv-card.hv-1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .hv-float { z-index: 5; max-width: calc(100% - 24px); }
  .hv-float.f1 { left: 12px; right: auto; top: 12px; }
  .hv-float.f2 { right: 12px; left: auto; top: auto; bottom: calc((100% - 20px) / 3 * 1 + 22px); }
  [dir="rtl"] .hv-float.f1 { right: 12px; left: auto; }
  [dir="rtl"] .hv-float.f2 { left: 12px; right: auto; }
  .hv-float strong { font-size: .88rem; }
  .hv-float small { font-size: .7rem; }
  /* Certificate card */
  .trust { margin-top: -60px; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px 14px; }
  .cert { align-items: flex-start; }
  .cert > div { min-width: 0; padding-top: 4px; }
  .cert small { display: block; line-height: 1.3; }
  .cert:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
  /* Stats */
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-stat span { display: block; line-height: 1.3; overflow-wrap: anywhere; }
  /* Floating buttons smaller so they cover less content */
  .float-wa { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .float-wa svg { width: 26px; height: 26px; }
  [dir="rtl"] .float-wa { left: 14px; right: auto; }
}
@media (max-width: 400px) {
  .hero-stats strong { font-size: 1.35rem; }
  .hero-stats > div > span { font-size: .7rem; }
  .mini-stat { padding: 12px 10px; }
  .mini-stat strong { font-size: 1.1rem; }
  .mini-stat span { font-size: .72rem; }
  .cert-seal { width: 40px; height: 40px; font-size: .56rem; }
  .cert b { font-size: .8rem; }
}
@media (max-width: 680px) { .to-top { right: 17px; bottom: 76px; width: 44px; height: 44px; } [dir="rtl"] .to-top { left: 17px; right: auto; } }
@media (max-width: 680px) {
  .brand-sub { white-space: normal; overflow: hidden; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 200px; margin-top: 4px; }
}
@media (max-width: 340px) { .brand-sub { display: none; } }
@media (max-width: 680px) {
  .about-media .m-badge { top: 16px; bottom: auto; left: 16px; right: auto; max-width: 78%; padding: 12px 16px; gap: 12px; }
  [dir="rtl"] .about-media .m-badge { right: 36px; left: auto; }
  .about-media .m-badge strong { font-size: 1.6rem; }
  .about-media .m-badge span { font-size: .76rem; }
}
@media (max-width: 680px) {
  /* Data tables become stacked rows on phones (no hidden sideways scroll) */
  .table-wrap { overflow-x: visible; }
  table.data { min-width: 0; }
  table.data thead { display: none; }
  table.data tbody tr { display: grid; gap: 4px; padding: 14px 18px; }
  table.data th, table.data td { padding: 0; font-size: .9rem; }
  table.data td:first-child { font-size: .98rem; }
  table.data td.cap-val { white-space: normal; }
  table.data td:nth-child(n+3) { color: var(--muted); font-size: .84rem; }
}
@media (max-width: 680px) {
  .capacity[style*="1fr 1fr"] .cap { padding: 22px 16px; }
  .capacity[style*="1fr 1fr"] .cap .num { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .capacity .cap .num { overflow-wrap: anywhere; }
}

/* ---------- Small laptops / landscape tablets (961–1200px) ---------- */
@media (max-width: 1200px) {
  .trust-card { grid-template-columns: 1fr; }
  .trust-label { border-right: 0; border-bottom: 1px solid var(--line); text-align: center; padding: 20px 24px; }
  [dir="rtl"] .trust-label { border-left: 0; }
  .trust-list { justify-content: space-around; }
  .capacity { grid-template-columns: repeat(2, 1fr); }
  .capacity .cap:nth-child(2n) { border-right: 0; }
  .capacity .cap:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  [dir="rtl"] .capacity .cap:nth-child(2n) { border-left: 0; }
  .topbar-tag { display: none; }
  .topbar .container { justify-content: flex-end; }
  .topbar-info, .topbar-links { flex-wrap: nowrap; white-space: nowrap; }
}
@media (max-width: 960px) { .topbar { display: none; } }

/* ---------- Long translated text (fr/es/ru/pt/ar) at every width ---------- */
.btn { max-width: 100%; }
.capacity > *, .mini-stats > *, .hero-stats > *, .about-media .m-badge > *, .sister > *, .division > *, .catalog-bar > *, .pcard .foot > * { min-width: 0; }
.about-media .m-badge span, .cap p, .cap .unit, .division p, .mini-stat span { overflow-wrap: break-word; }
table.data th, table.data td { overflow-wrap: anywhere; }
@media (max-width: 1200px) { table.data td.cap-val { white-space: normal; } }
@media (max-width: 1000px) {
  .capacity[style*="1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; padding-inline: 20px; }
  .capacity[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  .capacity[style*="1fr 1fr"] .cap { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1); }
  .capacity[style*="1fr 1fr"] .cap:last-child { border-bottom: 0; }
  .cap .num { white-space: normal; }
  .division { padding: 26px 20px; }
  .division h3 { font-size: 1.45rem; overflow-wrap: break-word; }
  .division .tag { white-space: normal; letter-spacing: .06em; font-size: .68rem; }
  .division .chips span, .division .chip { white-space: normal; }
}
@media (max-width: 340px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: .95rem; }
  .brand { gap: 7px; }
}
.capacity[style*="1fr 1fr"] .cap .num { font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.6rem); overflow-wrap: anywhere; }
.foot-actions { flex-wrap: wrap; }
.foot-actions .btn { flex: 1 1 auto; }
.catalog-bar { flex-wrap: wrap; }
@media (max-width: 340px) {
  .brand-name { font-size: .84rem; }
  .header-cta { gap: 6px; }
}
.seg-switch > * { min-width: 0; }
@media (max-width: 400px) {
  .seg-btn { white-space: normal; line-height: 1.2; padding: 8px 6px; font-size: .78rem; }
}

/* ---------- Legal pages (privacy policy) ---------- */
.legal { max-width: 860px; margin: 0 auto; color: var(--ink-2, #33415c); }
.legal-updated { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--brand-ink); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.legal-intro { font-size: 1.08rem; line-height: 1.7; color: var(--ink); margin-bottom: 26px; }
.legal-toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 40px; }
.legal-toc b { display: block; color: var(--ink); margin-bottom: 10px; }
.legal-toc ol { margin: 0; padding-inline-start: 22px; columns: 2; column-gap: 34px; }
.legal-toc li { padding: 3px 0; break-inside: avoid; }
.legal-toc a { color: var(--brand-ink); font-weight: 600; }
.legal-toc a:hover { text-decoration: underline; }
.legal section { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.legal h2 { font-size: 1.45rem; color: var(--ink); margin: 0 0 12px; }
.legal p, .legal li { line-height: 1.75; overflow-wrap: break-word; }
.legal ul { padding-inline-start: 22px; margin: 0 0 14px; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--brand); }
.legal a { color: var(--brand-ink); }
.form-note a { color: var(--brand-ink); text-decoration: underline; }
@media (max-width: 680px) {
  .legal-toc { padding: 18px; }
  .legal-toc ol { columns: 1; }
  .legal h2 { font-size: 1.25rem; }
}
.legal-toc ol { list-style: decimal; }
.page-hero h1, .section-title, .legal h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Brand lockup (new logo, Oct 2026): Omeecron / EXPORTS */
.brand-mark { width: 54px; height: 54px; }
.brand-name { font-family: "Nunito", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.62rem; letter-spacing: -.01em; color: var(--navy-900); }
.brand-sub { font-family: "Plus Jakarta Sans", sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; color: #0b8fd0; margin-top: 5px; }
.site-footer .brand-sub { color: #5fd0f7; }
@media (max-width: 1100px) { .brand-mark { width: 46px; height: 46px; } .brand-name { font-size: 1.4rem; } .brand-sub { letter-spacing: .42em; font-size: .64rem; } }
@media (max-width: 560px) { .brand-mark { width: 40px; height: 40px; } .brand-name { font-size: 1.22rem; } .brand-sub { letter-spacing: .36em; font-size: .58rem; } }
.brand { direction: ltr; }

/* brand-coloured social icons */
.socials a.brand-ico { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.socials a.brand-ico svg { width: 40px; height: 40px; display: block; }
.socials a.brand-ico:hover { background: none; transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 22px rgba(0,0,0,.35); }

/* phone performance: pause decorative endless animations, cheaper header, render off-screen sections lazily */
@media (max-width: 760px) {
  .hero-routes path, .world .arc, .world .pulse { animation: none; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.97); }
  .chip, .division .tag, .pcard .ph .n { backdrop-filter: none; -webkit-backdrop-filter: none; }
  main > section:nth-of-type(n+3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}

/* hero: keep the photo collage fixed while web fonts load (avoids layout shift); offsets match the centred look */
@media (min-width: 1081px) {
  .hero .container { align-items: start; }
  .hero-visual { margin-top: 50px; }
}
@media (min-width: 1081px) and (max-width: 1150px) {
  .hero-visual { margin-top: 110px; }
}

/* ==========================================================================
   Product requirement form (inquiry.php)
   ========================================================================== */
.rq-section { background: var(--bg-soft); }
.rq-wrap { max-width: 1040px; }
.rq-steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; counter-reset: s; }
.rq-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.rq-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-ink); font-size: .85rem; }
.rq-restored { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--gold-50); border: 1px solid #f3dfb4; font-size: .9rem; color: var(--ink-2); }
.rq-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand-ink); cursor: pointer; }
.rq-link:hover { text-decoration: underline; }

.rq-products { display: grid; gap: 22px; }
.rq-prod { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 0 26px 18px; scroll-margin-top: 110px; transition: box-shadow .4s; }
.rq-prod.rq-new { box-shadow: 0 0 0 3px var(--brand-100), var(--shadow); }
.rq-prod-head { display: flex; align-items: center; gap: 14px; margin: 0 -26px 6px; padding: 16px 20px 16px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, var(--brand-50), #fff 70%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rq-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--navy-900); color: #fff; font-weight: 800; }
.rq-prod-title { flex: 1; min-width: 0; }
.rq-name { width: 100%; border: 1.5px solid transparent; background: transparent; border-radius: 10px; padding: 6px 8px; margin-left: -8px; font: inherit; font-size: 1.12rem; font-weight: 800; color: var(--navy-900); }
.rq-name:hover { border-color: var(--line); background: #fff; }
.rq-name:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(14,165,221,.12); }
.rq-group { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--brand-ink); letter-spacing: .02em; }
.rq-group:empty { display: none; }
.rq-remove { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.rq-remove:hover { color: #c93c3c; border-color: #f2c4c4; background: #fff5f5; }
.rq-desc { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

.rq-block { padding: 16px 0 6px; border-bottom: 1px dashed var(--line); }
.rq-prod > .rq-block:last-child, .rq-grid2:last-child .rq-block { border-bottom: 0; }
.rq-block h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-body); font-size: .95rem; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.rq-block h4 small { font-weight: 600; color: var(--muted); font-size: .8rem; }
.rq-step { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-ink); color: #fff; font-size: .74rem; font-weight: 800; }
.rq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-bottom: 1px dashed var(--line); }
.rq-grid2 .rq-block { border-bottom: 0; }
.rq-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.rq-prod input[type=text], .rq-prod input[type=number], .rq-prod select, .rq-prod textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: .92rem; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.rq-prod input:focus, .rq-prod select:focus, .rq-prod textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,165,221,.12); }
.rq-prod .rq-name { padding: 6px 8px; border-color: transparent; }
.rq-other { margin-top: 10px; max-width: 420px; }

/* chips */
.rq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, color .2s, box-shadow .2s; }
.rq-chip:hover { border-color: var(--brand-100); background: var(--brand-50); }
.rq-chip:active { transform: scale(.97); }
.rq-chip.on { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(7,121,171,.9); }
.rq-chip .rq-emo { font-size: 1.05rem; line-height: 1; }
.rq-c-sm { padding: 6px 12px; font-size: .82rem; }
.rq-seg { margin-top: 10px; }
.rq-c-spec .rq-emo { font-size: .8rem; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; opacity: .5; }
.rq-c-spec.on .rq-emo { opacity: 1; background: #fff; color: var(--brand-ink); border-color: #fff; }
/* packaging buttons: each type has its own colour */
.rq-pack { --pc: #0779ab; --pb: #e8f7fd; border-color: color-mix(in srgb, var(--pc) 28%, #fff); background: var(--pb); color: var(--pc); font-weight: 700; }
.rq-pack:hover { background: color-mix(in srgb, var(--pc) 14%, #fff); border-color: var(--pc); }
.rq-pack.on { background: var(--pc); border-color: var(--pc); color: #fff; box-shadow: 0 8px 18px -10px var(--pc); }
.rq-pack.c1 { --pc: #0b6fa8; --pb: #e6f3fb; } .rq-pack.c2 { --pc: #4b5fbd; --pb: #eceffb; } .rq-pack.c3 { --pc: #7a4bb5; --pb: #f2ecfa; }
.rq-pack.c4 { --pc: #0d7a6f; --pb: #e4f6f3; } .rq-pack.c5 { --pc: #a8620c; --pb: #fdf2e3; } .rq-pack.c6 { --pc: #b5418a; --pb: #fbebf4; }
.rq-pack.c7 { --pc: #1677b8; --pb: #e7f2fb; } .rq-pack.c8 { --pc: #2f7d32; --pb: #e9f5e9; } .rq-pack.c9 { --pc: #a83a3a; --pb: #fbecec; }
.rq-pack.c10 { --pc: #8a5a14; --pb: #f8f0e3; } .rq-pack.c11 { --pc: #5d4037; --pb: #f3eeec; } .rq-pack.c12 { --pc: #455a74; --pb: #eef1f5; }

/* composition */
.rq-basis { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rq-basis label { font-weight: 700; font-size: .84rem; color: var(--muted); }
.rq-basis input { max-width: 420px; }
.rq-comp { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rq-comp-head, .rq-ing { display: grid; grid-template-columns: minmax(0, 1fr) 170px 40px; gap: 8px; align-items: center; }
.rq-comp-head { padding: 8px 12px; background: var(--bg-soft); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rq-ing { padding: 6px 8px 6px 12px; border-top: 1px solid var(--line); }
.rq-prod .rq-ing input { padding: 8px 10px; border-color: transparent; background: transparent; }
.rq-prod .rq-ing input:hover { border-color: var(--line); background: #fff; }
.rq-prod .rq-ing input:focus { background: #fff; }
.rq-ing input:nth-child(2) { text-align: right; font-weight: 700; }
.rq-ing-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rq-ing-x:hover { background: #fff1f1; color: #c93c3c; }
.rq-add-ing { margin-top: 10px; }

.rq-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rq-sug { padding: 4px 10px; border-radius: 8px; border: 1px dashed #c9d6e4; background: #fff; font: inherit; font-size: .78rem; color: var(--ink-2); cursor: pointer; }
.rq-sug:hover { border-color: var(--brand); color: var(--brand-ink); }
.rq-hint { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.rq-sub { margin: 12px 0 8px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.rq-qty { display: flex; gap: 8px; }
.rq-qty input { flex: 1; min-width: 0; }
.rq-qty select { width: auto; min-width: 110px; }
.rq-mini { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.rq-notes { margin-top: 12px; }
.rq-price { display: flex; gap: 6px; }
.rq-price select { width: 86px; flex: none; padding-right: 8px; }

/* add a product */
.rq-add { margin: 24px 0; padding: 22px 26px; border-radius: var(--radius-lg); border: 2px dashed #bcd3e6; background: #fff; }
.rq-add-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.rq-add-head h3 { font-size: 1.2rem; margin-bottom: 2px; }
.rq-add-head p { color: var(--muted); font-size: .9rem; margin: 0; }
.rq-add-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-ink); color: #fff; font-size: 1.4rem; font-weight: 800; }
.rq-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 14px; align-items: end; }
.rq-add-row .btn { padding: 13px 22px; }
.rq-add .rq-link { margin-top: 14px; }
.rq-buyer { margin-bottom: 22px; }
.field.invalid input { border-color: #c93c3c; }
.field.invalid .err { display: block; }
.rq-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.rq-actions .form-error { flex: 1 1 100%; margin: 0; }

/* done */
.rq-done { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 48px 28px; }
.rq-done-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: #e7f8f2; color: #129b74; }
.rq-done-ic .icon { width: 30px; height: 30px; }
.rq-done h2 { font-size: 1.7rem; margin-bottom: 8px; }
.rq-done p { color: var(--muted); max-width: 620px; margin: 0 auto 22px; }
.rq-done-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* preview modal */
body.rq-lock { overflow: hidden; }
.rq-modal { position: fixed; inset: 0; z-index: 400; background: rgba(6,20,40,.6); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; }
.rq-modal[hidden] { display: none; }
.rq-modal-box { width: min(900px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }
.rq-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.rq-modal-head h2 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 800; }
.rq-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.rq-modal-body { overflow: auto; padding: 22px; background: #e9eef4; flex: 1; }
.rq-paper { background: #fff; max-width: 794px; margin: 0 auto; padding: 34px 36px; box-shadow: 0 6px 24px -10px rgba(10,29,58,.35); border-radius: 4px; }
.rq-modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: #fff; }
.rq-pdf-src { position: fixed; left: -10000px; top: 0; width: 186mm; background: #fff; }

@media (max-width: 860px) {
  .rq-grid2 { grid-template-columns: 1fr; }
  .rq-grid3 { grid-template-columns: 1fr; }
  .rq-add-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rq-prod { padding: 0 16px 14px; border-radius: var(--radius); }
  .rq-prod-head { margin: 0 -16px 6px; padding: 12px 12px 12px 16px; border-radius: var(--radius) var(--radius) 0 0; }
  .rq-name { font-size: 1rem; }
  .rq-comp-head, .rq-ing { grid-template-columns: minmax(0, 1fr) 96px 32px; }
  .rq-chip { padding: 7px 11px; font-size: .82rem; }
  .rq-add { padding: 18px 16px; }
  .rq-basis { flex-direction: column; align-items: stretch; }
  .rq-actions .btn, .rq-modal-foot .btn, .rq-done-btns .btn { width: 100%; }
  .rq-modal { padding: 0; }
  .rq-modal-box { max-height: 100vh; height: 100%; border-radius: 0; }
  .rq-modal-body { padding: 10px; }
  .rq-paper { padding: 18px 14px; }
  .rq-steps li span { font-size: .8rem; }
}
.rq-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: -8px 0 24px; border-radius: var(--radius); background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.rq-banner > span:first-child { font-size: 1.5rem; }
.rq-banner b { color: var(--navy-900); }
.rq-banner .icon { flex: none; color: var(--brand-ink); }
.rq-banner:hover { border-color: var(--brand); color: var(--ink-2); }
#rqPrint { display: none; }
@media print {
  body.rq-printing > *:not(#rqPrint) { display: none !important; }
  body.rq-printing #rqPrint { display: block; }
  body.rq-printing { background: #fff; }
  @page { size: A4; margin: 12mm; }
  #rqPrint .rq-dprod { break-inside: avoid; }
}
@media (max-width: 560px) {
  .rq-modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rq-modal-foot .btn { width: 100%; padding: 13px 14px; }
  .rq-modal-foot #rqModalSubmit { grid-column: 1 / -1; }
  .rq-paper > .rq-doc > div:first-child > div:last-child { text-align: left !important; }
}
/* packaging colours come from Admin → Packaging (style="--pc:#hex") */
.rq-pack { --pb: color-mix(in srgb, var(--pc) 9%, #fff); }
/* packaging sub-options */
.rq-packopts:empty { display: none; }
.rq-pgroup { margin-top: 14px; padding: 14px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); }
.rq-pgroup-h { font-size: .84rem; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.rq-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rq-popt { position: relative; display: flex; gap: 10px; align-items: flex-start; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: inherit; color: var(--ink-2); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.rq-popt:hover { border-color: var(--brand-100); }
.rq-popt.on { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-50); }
.rq-popt img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; background: var(--bg-soft); }
.rq-popt-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-inline-end: 18px; }
.rq-popt-t b { font-size: .86rem; color: var(--navy-900); }
.rq-popt-t small { font-size: .76rem; color: var(--muted); }
.rq-popt i { position: absolute; top: 8px; inset-inline-end: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; border: 1.5px solid var(--line); color: transparent; }
.rq-popt.on i { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
/* ---- Requirement form: compact hero, trust strip, collapsible cards, sticky bar ---- */
.page-hero.rq-hero { padding: 54px 0 46px; }
.page-hero.rq-hero h1 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem); margin-bottom: 10px; }
.page-hero.rq-hero p { font-size: 1rem; max-width: 700px; }
.rq-section { padding-top: 34px; }
.rq-trust { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rq-trust li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.rq-trust .icon { width: 20px; height: 20px; flex: none; color: var(--teal-ink); }
.rq-grid3.rq-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rq-collapse { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; flex: none; }
.rq-collapse .icon { transform: rotate(90deg); transition: transform .25s; }
.rq-prod.collapsed .rq-collapse .icon { transform: rotate(0deg); }
.rq-prod.collapsed { padding-bottom: 0; }
.rq-prod.collapsed > :not(.rq-prod-head):not(.rq-summary) { display: none; }
.rq-prod.collapsed .rq-prod-head { margin-bottom: 0; border-bottom: 0; border-radius: var(--radius-lg); }
.rq-summary { margin: 0 -26px; padding: 10px 26px 14px 74px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.rq-summary:hover { color: var(--brand-ink); }

.rq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(10,29,58,.35); }
.rq-bar[hidden] { display: none; }
.rq-bar-in { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.rq-bar-count { margin-inline-end: auto; font-weight: 700; color: var(--ink-2); font-size: .9rem; }

/* packaging option cards with photo */
.rq-pgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rq-popt { flex-direction: column; gap: 8px; padding: 8px 8px 12px; }
.rq-popt-img { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--pc) 8%, #fff); }
.rq-popt-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: #fff; }
.rq-popt-ph { font-size: 2.4rem; }
.rq-popt-t { padding: 0 4px; }
.rq-popt i { top: 14px; inset-inline-end: 14px; background: #fff; }

@media (max-width: 980px) { .rq-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .page-hero.rq-hero { padding: 40px 0 32px; }
  .rq-section { padding-top: 22px; }
}
@media (max-width: 560px) {
  .rq-trust { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rq-trust li { padding: 10px; font-size: .78rem; }
  .rq-grid3.rq-two { grid-template-columns: 1fr; }
  .rq-summary { margin: 0 -16px; padding: 8px 16px 12px; }
  .rq-pgrid { grid-template-columns: 1fr 1fr; }
  .rq-bar-count { display: none; }
  .rq-bar-in .btn { flex: 1; }
}
body.rq-bar-on .float-wa, body.rq-bar-on .to-top { bottom: 84px; }
.rq-popt-img { position: relative; }
.rq-popt .rq-popt-img img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: transparent; }
.rq-chip[hidden], .rq-showall[hidden] { display: none !important; }
.rq-kind { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rq-c-kind { padding: 9px 18px; font-weight: 700; }
.rq-c-kind.on { background: var(--navy-900); border-color: var(--navy-900); }
.rq-showall { align-self: center; margin-inline-start: 4px; font-size: .84rem; }
.rq-check { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rq-check input { width: 18px; height: 18px; accent-color: var(--brand-ink); }
/* order card + dosage details + formula */
.rq-order { margin-bottom: 22px; }
.rq-ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.rq-ofield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rq-ofull { grid-column: 1 / -1; }
.rq-olabel { font-size: .86rem; font-weight: 800; color: var(--ink); }
.rq-olabel small { font-weight: 600; color: var(--muted); margin-inline-start: 6px; }
.rq-ofield input[type=text] { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); font: inherit; font-size: .92rem; color: var(--ink); outline: none; }
.rq-ofield input[type=text]:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,165,221,.12); }
.rq-details:empty { display: none; }
.rq-detail { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); border: 1px dashed var(--line); }
.rq-detail[hidden] { display: none; }
.rq-formula { margin-bottom: 8px; }
.rq-comp-hint { margin: 0 0 10px; }
@media (max-width: 760px) { .rq-ogrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rq-steps { display: none; } }
.rq-order[hidden] { display: none; }
.rq-opt-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 16px 20px; border-radius: var(--radius-lg); border: 1.5px dashed #bcd3e6; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.rq-opt-toggle:hover { border-color: var(--brand); background: var(--brand-50); }
.rq-opt-toggle input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand-ink); }
.rq-opt-toggle b { color: var(--navy-900); }
.rq-opt-toggle small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.rq-opt-toggle:has(input:checked) { border-style: solid; border-color: var(--brand-ink); margin-bottom: 12px; }
/* Requirement form: stronger text contrast everywhere */
.rq-section, .rq-modal, .rq-bar { --muted: #3f4c62; --ink-2: #1f2d45; }
.rq-section { color: var(--ink-2); }
.rq-section .rq-chip { color: #1f2d45; font-weight: 700; border-color: #cfd9e5; }
.rq-section .rq-chip.on { color: #fff; }
.rq-section .rq-pack { font-weight: 800; }
.rq-section .rq-hint, .rq-section .rq-desc, .rq-section .rq-summary, .rq-section .rq-sub,
.rq-section .rq-block h4 small, .rq-section .rq-olabel small, .rq-section .rq-pgroup-h,
.rq-section .rq-popt-t small, .rq-section .rq-add-head p, .rq-section .form-card > p,
.rq-section .rq-trust li, .rq-section .rq-steps li, .rq-section .rq-opt-toggle small, .rq-section .form-note { color: #3f4c62; font-weight: 500; }
.rq-section .rq-popt-t small { font-weight: 600; }
.rq-section .rq-comp-head { color: #3f4c62; }
.rq-section .rq-sug { color: #1f2d45; border-color: #b9c8d8; font-weight: 600; }
.rq-section .field label, .rq-section .rq-mini, .rq-section .rq-olabel, .rq-section .rq-check { color: #13233d; }
.rq-section input::placeholder, .rq-section textarea::placeholder { color: #66748a; opacity: 1; }
.rq-section .rq-group { color: #075f8c; font-weight: 800; }
.rq-section .rq-steps li { color: #13233d; font-weight: 700; }
.page-hero.rq-hero p { color: #dbe5f3; }
.rq-bar-count { color: #13233d; }
.rq-section .rq-pack:not(.on) { color: color-mix(in srgb, var(--pc) 72%, #000); border-color: color-mix(in srgb, var(--pc) 35%, #fff); }
/* WhatsApp button on the left, back-to-top on the right (mirrored for Arabic) */
.float-wa { right: auto; left: 22px; }
.to-top { bottom: 28px; }
[dir="rtl"] .float-wa { left: auto; right: 22px; }
[dir="rtl"] .to-top { right: auto; left: 30px; }
@media (max-width: 760px) {
  .float-wa { right: auto; left: 14px; }
  [dir="rtl"] .float-wa { left: auto; right: 14px; }
  .to-top { right: 16px; bottom: 18px; }
  [dir="rtl"] .to-top { right: auto; left: 16px; }
}
body.rq-bar-on .float-wa, body.rq-bar-on .to-top { bottom: 84px; }
/* Searchable product picker */
.rq-combo { position: relative; }
.rq-combo-in { position: relative; display: flex; align-items: center; }
.rq-combo-in > .icon { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.rq-combo-in input { width: 100%; padding: 13px 76px 13px 42px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: .95rem; color: var(--ink); outline: none; }
[dir="rtl"] .rq-combo-in input { padding: 13px 42px 13px 76px; }
.rq-combo-in input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,165,221,.12); }
.rq-combo-x, .rq-combo-open { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.rq-combo-open { inset-inline-end: 8px; }
.rq-combo-open .icon { transform: rotate(90deg); width: 16px; height: 16px; }
.rq-combo-x { inset-inline-end: 40px; }
.rq-combo-x[hidden] { display: none; }
.rq-combo-x:hover, .rq-combo-open:hover { background: var(--bg-soft); }
.rq-combo-list { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 60; max-height: min(360px, 55vh); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 44px -16px rgba(10,29,58,.35); padding: 6px; }
.rq-combo-list[hidden] { display: none; }
.rq-combo-g { position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 9px 14px 6px; background: #f3f7fb; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #075f8c; }
.rq-combo-o { padding: 9px 12px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer; line-height: 1.35; }
.rq-combo-o:hover, .rq-combo-o.act { background: var(--brand-50); color: var(--brand-700); }
.rq-combo-o[aria-selected="true"] { font-weight: 800; color: var(--brand-700); }
.rq-combo-none { padding: 14px 12px; color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .rq-combo-list { max-height: 50vh; } }
/* Product card header: a clean title row (number · category label + editable name · actions) */
.rq-prod-head { align-items: center; gap: 14px; padding: 16px 18px 16px 22px; }
.rq-num { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; box-shadow: 0 6px 14px -8px rgba(10,29,58,.6); }
.rq-prod-title { display: flex; flex-direction: column; gap: 2px; position: relative; }
.rq-prod-title .rq-group { order: -1; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #075f8c; }
.rq-section .rq-prod .rq-name {
  width: 100%; margin: 0; padding: 3px 26px 3px 0; border: 0; border-bottom: 1.5px dashed transparent; border-radius: 0; background: transparent; box-shadow: none;
  font-family: var(--font-body); font-size: 1.14rem; font-weight: 800; color: var(--navy-900); line-height: 1.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; text-overflow: ellipsis;
}
[dir="rtl"] .rq-section .rq-prod .rq-name { padding: 3px 0 3px 26px; background-position: left 2px center; }
.rq-section .rq-prod .rq-name:hover { border-bottom-color: #b9c8d8; background-color: transparent; }
.rq-section .rq-prod .rq-name:focus { border-bottom: 1.5px solid var(--brand); box-shadow: none; background-color: transparent; }
.rq-section .rq-prod .rq-name:placeholder-shown { border-bottom-color: #b9c8d8; }
.rq-section .rq-prod .rq-name::placeholder { color: #7a879b; font-weight: 700; }
.rq-collapse, .rq-remove { width: 36px; height: 36px; }
.rq-summary { padding-inline-start: 76px; }
@media (max-width: 560px) {
  .rq-prod-head { padding: 12px 12px 12px 14px; gap: 10px; }
  .rq-num { width: 32px; height: 32px; font-size: .9rem; }
  .rq-section .rq-prod .rq-name { font-size: 1rem; }
  .rq-collapse, .rq-remove { width: 32px; height: 32px; }
  .rq-summary { padding-inline-start: 16px; }
}
.rq-section .rq-prod textarea.rq-name { display: block; resize: none; overflow: hidden; min-height: 0; white-space: pre-wrap; word-break: break-word; }

/* ==========================================================================
   Requirement form – premium look
   ========================================================================== */
.rq-section { background: radial-gradient(1200px 500px at 85% -10%, rgba(14,165,221,.08), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(25,194,167,.07), transparent 60%), var(--bg-soft); }
.rq-wrap { max-width: 1240px; }
.rq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.rq-side { display: none; }
@media (min-width: 1100px) {
  .rq-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .rq-side { display: block; position: sticky; top: 110px; }
  .rq-side[hidden] { display: none; }
  .rq-trust { display: none; }
}

/* steps: connected */
.rq-steps { position: relative; gap: 0; }
.rq-steps li { position: relative; z-index: 1; margin: 0 6px; }
.rq-steps::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 70%); height: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, var(--brand-100), #bdeee5); z-index: 0; }
.rq-steps b { background: linear-gradient(135deg, var(--brand-ink), var(--teal-ink)); color: #fff; }

/* product cards */
.rq-prod { position: relative; overflow: hidden; border-color: #dfe8f1; box-shadow: 0 18px 40px -26px rgba(10,29,58,.35), 0 2px 6px -2px rgba(10,29,58,.06); }
.rq-prod::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--brand), var(--teal)); }
.rq-prod-head { background: linear-gradient(100deg, #eaf6fc 0%, #f3fbf9 55%, #fff 100%); }
.rq-num { background: linear-gradient(135deg, var(--navy-900), var(--brand-ink)); }
.rq-step { background: linear-gradient(135deg, var(--brand-ink), var(--teal-ink)); border-radius: 8px; }
.rq-block h4 { font-size: 1rem; }

/* chips */
.rq-section .rq-chip { box-shadow: 0 1px 2px rgba(10,29,58,.06); }
.rq-section .rq-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(10,29,58,.35); }
.rq-section .rq-chip.on:not(.rq-pack):not(.rq-c-kind) { background: linear-gradient(135deg, var(--brand-ink), #0b8a7e); border-color: transparent; }
.rq-c-kind.on { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important; }
.rq-section .rq-pack.on { box-shadow: 0 10px 20px -10px var(--pc); }

/* add-product card */
.rq-add { border: 2px dashed #a9cbe2; background: linear-gradient(135deg, #ffffff 0%, #f1f9fd 100%); box-shadow: 0 14px 30px -24px rgba(7,121,171,.6); }
.rq-add-ic { background: linear-gradient(135deg, var(--brand-ink), var(--teal-ink)); box-shadow: 0 10px 20px -10px rgba(7,121,171,.8); }
.rq-opt-toggle { background: linear-gradient(135deg, #fff, #f7fbfe); }

/* summary panel */
.rq-side-card { background: #fff; border: 1px solid #dfe8f1; border-radius: var(--radius-lg); box-shadow: 0 24px 48px -30px rgba(10,29,58,.45); padding: 20px; }
.rq-side-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.rq-side-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg, #e6f5fc, #e3f7f3); }
.rq-side-h b { display: block; font-size: 1.05rem; color: var(--navy-900); }
.rq-side-h small { display: block; font-size: .82rem; font-weight: 600; color: #3f4c62; }
.rq-side-empty { margin: 0 0 12px; font-size: .88rem; color: #3f4c62; }
.rq-side-empty[hidden] { display: none; }
.rq-side-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; max-height: 38vh; overflow-y: auto; counter-reset: rq; }
.rq-side-list li { position: relative; padding: 10px 12px 10px 40px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); cursor: pointer; counter-increment: rq; transition: border-color .2s, background .2s; }
.rq-side-list li:hover { border-color: var(--brand-100); background: var(--brand-50); }
.rq-side-list li::before { content: counter(rq); position: absolute; inset-inline-start: 10px; top: 10px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy-900), var(--brand-ink)); }
[dir="rtl"] .rq-side-list li { padding: 10px 40px 10px 12px; }
.rq-side-list b { display: block; font-size: .86rem; color: var(--navy-900); line-height: 1.35; }
.rq-side-list small { display: block; font-size: .76rem; font-weight: 600; color: #3f4c62; margin-top: 2px; }
.rq-side-check { list-style: none; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.rq-side-check li { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; color: #3f4c62; }
.rq-side-check li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c7d3e0; flex: none; }
.rq-side-check li.ok { color: var(--navy-900); }
.rq-side-check li.ok::before { border-color: #129b74; background: #129b74 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rq-side-btns { display: grid; gap: 8px; }
.rq-side-btns .btn { width: 100%; padding: 13px 18px; }
.rq-side-trust { list-style: none; margin: 16px 0 0; padding: 0 6px; display: grid; gap: 10px; }
.rq-side-trust li { display: flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 600; color: #1f2d45; }
.rq-side-trust .icon { width: 18px; height: 18px; color: var(--teal-ink); flex: none; }
/* Composition rows: clearly visible input boxes */
.rq-comp { border: 1px solid #dfe8f1; background: #fbfdff; }
.rq-ing { padding: 8px 10px; gap: 10px; border-top: 1px solid #e8eef5; }
.rq-comp-head { padding: 9px 12px; }
.rq-section .rq-prod .rq-ing input {
  padding: 10px 12px; border: 1.5px solid #cfdbe7; border-radius: 10px; background: #fff;
  font-size: .92rem; color: var(--ink); box-shadow: inset 0 1px 2px rgba(10,29,58,.04);
}
.rq-section .rq-prod .rq-ing input:hover { border-color: #a9bfd4; background: #fff; }
.rq-section .rq-prod .rq-ing input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,165,221,.12); background: #fff; }
.rq-section .rq-prod .rq-ing input:nth-child(2) { text-align: end; font-weight: 700; }
.rq-ing-x { width: 34px; height: 34px; border: 1px solid #e3eaf2; background: #fff; }
.rq-ing-x:hover { border-color: #f2c4c4; }
@media (max-width: 560px) {
  .rq-ing { padding: 8px; gap: 6px; }
  .rq-section .rq-prod .rq-ing input { padding: 9px 10px; font-size: .88rem; }
  .rq-ing-x { width: 30px; height: 30px; }
}
/* Section headers inside a product card: tinted bar with an accent edge */
.rq-section .rq-block h4 {
  position: relative; margin: 0 0 14px; padding: 10px 14px 10px 12px; border-radius: 12px;
  background: linear-gradient(100deg, #e4f3fb 0%, #e9f8f4 60%, rgba(255,255,255,0) 100%);
  border-inline-start: 4px solid var(--brand-ink); color: var(--navy-900); font-size: 1rem; letter-spacing: -.005em;
}
.rq-section .rq-block h4 .rq-step { width: 26px; height: 26px; border-radius: 8px; font-size: .78rem; box-shadow: 0 6px 12px -6px rgba(7,121,171,.7); }
.rq-section .rq-block h4 small { margin-inline-start: auto; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: .76rem; }
.rq-section .rq-block { padding: 18px 0 8px; }
[dir="rtl"] .rq-section .rq-block h4 { background: linear-gradient(260deg, #e4f3fb 0%, #e9f8f4 60%, rgba(255,255,255,0) 100%); }
/* order card headings in the same style */
.rq-section .rq-olabel { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: linear-gradient(100deg, #eef7fc, rgba(255,255,255,0)); border-inline-start: 3px solid var(--teal-ink); }
@media (max-width: 560px) {
  .rq-section .rq-block h4 { padding: 9px 10px; font-size: .95rem; flex-wrap: wrap; }
  .rq-section .rq-block h4 small { margin-inline-start: 0; }
}

/* steps: centre over the form column when the sidebar is shown */
@media (min-width: 1100px) {
  .rq-steps { margin-inline-end: calc(320px + 28px); }
}