/* ==========================================================================
   NexaImpex — Design System
   Direction: monochrome architectural minimalism (per brand reference) —
   black/white/grey, bold grotesque display type, hairline borders, sharp
   rectangular buttons on light/photographic sections, pill CTAs on full-
   black statement sections, fixed vertical enquiry tabs.
   Accent: a single cobalt blue, used only in the mark and small tags.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:        #0B0B0C;
  --ink-soft:   #5B5E63;
  --ink-faint:  #8B8E92;
  --paper:      #FFFFFF;
  --paper-dim:  #F2F1EF;
  --line:       rgba(11,11,12,0.14);
  --line-strong:rgba(11,11,12,0.28);
  --line-on-dark:rgba(255,255,255,0.18);
  --dark:       #0B0B0C;
  --dark-soft:  #17181A;
  --blue:       #2451F5;
  --white:      #FFFFFF;

  --display: 'Archivo', sans-serif;
  --body:    'Inter', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; margin:0; letter-spacing:-0.015em; line-height:1.08; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- certifications strip ---------- */
.cert-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.cert-card{
  background:var(--paper); border:1px solid var(--line); padding:26px 18px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 2px 10px rgba(11,11,12,0.04);
}
.cert-card .seal-badge{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(36,81,245,0.07); border:1px solid rgba(36,81,245,0.18);
  color:var(--blue); flex-shrink:0;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cert-card .seal{
  width:30px; height:30px; flex-shrink:0;
}
.cert-card h4{ font-size:14.5px; font-weight:700; color:var(--ink); }
.cert-card p{ font-size:12.5px; color:var(--ink-soft); }
@media (max-width:900px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- export volume donut ---------- */
.donut-row{
  display:flex; align-items:center; gap:64px; flex-wrap:wrap; justify-content:center;
}
.donut{
  width:260px; height:260px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(
    #3B82F6 0% 15%,
    #EF4476 15% 30%,
    #F59E0B 30% 44%,
    #EAB308 44% 58%,
    #14B8A6 58% 72%,
    #8B5CF6 72% 86%,
    #9CA3AF 86% 100%
  );
  position:relative;
  filter:drop-shadow(0 8px 20px rgba(11,11,12,0.12));
}
.donut::after{
  content:""; position:absolute; inset:22%; border-radius:50%; background:var(--paper);
}
.legend{ display:grid; gap:12px; }
.legend-item{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.legend-item .swatch{ width:12px; height:12px; flex-shrink:0; }
.legend-item small{ display:block; color:var(--ink-faint); font-size:11.5px; }

/* ---------- global client network map ---------- */
.map-frame{
  border:1px solid var(--line); background:var(--paper); padding:24px;
  max-width:920px; margin:0 auto; position:relative;
  box-shadow:0 4px 16px rgba(11,11,12,0.05);
}
.map-frame img, .map-frame svg{ width:100%; height:auto; display:block; }

/* ---------- world map country tooltip ---------- */
.world-map-svg circle[fill="#22a35a"]{
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
  transform-box:fill-box; transform-origin:center;
}
.world-map-svg circle[fill="#22a35a"].is-hover{ transform:scale(1.8); }
.map-hit{ cursor:pointer; }
.map-tooltip{
  position:absolute; top:0; left:0; z-index:20; pointer-events:none;
  transform:translate(-50%,-135%);
  background:var(--dark); color:var(--white);
  font-family:var(--body); font-weight:700; font-size:11.5px; letter-spacing:0.03em;
  padding:6px 11px; white-space:nowrap;
  opacity:0; transition:opacity .15s ease;
}
.map-tooltip::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--dark);
}
.map-tooltip.visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .world-map-svg circle[fill="#22a35a"]{ transition:none; }
}

/* ---------- blog preview ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.blog-card{ background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; box-shadow:0 2px 10px rgba(11,11,12,0.04); }
.blog-thumb{
  display:block; height:120px; flex-shrink:0;
  background:linear-gradient(135deg, var(--paper-dim) 0%, #E7E9EC 100%);
  position:relative; overflow:hidden;
}
.blog-thumb::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(11,11,12,0.05) 0 1px, transparent 1px 18px);
}
.blog-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-body h4{ font-size:14.5px; font-weight:700; line-height:1.35; color:var(--ink); }
.blog-body a{ font-size:12.5px; font-weight:700; color:var(--blue); margin-top:auto; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- whatsapp float ---------- */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.22);
}
.whatsapp-float svg{ width:26px; height:26px; }
@media (max-width:600px){ .cert-grid{ grid-template-columns:1fr 1fr; } .blog-grid{ grid-template-columns:1fr; } .donut-row{ gap:32px; } }

/* ---------- eyebrow / doc tag ---------- */
.doc-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-weight:600;
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.doc-tag::before{ content:"—"; color:var(--blue); font-weight:700; }
.doc-tag.on-light{ color:var(--ink-soft); }
.dark .doc-tag{ color:rgba(255,255,255,0.5); }

/* big bold index number (for genuine ordered sequences only) */
.idx-num{
  display:block;
  font-family:var(--display); font-weight:900; font-size:34px;
  color:var(--ink); line-height:1; margin-bottom:14px;
  position:relative; padding-bottom:14px;
}
.idx-num::after{
  content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--blue);
}
.idx-num::before{ content:none; }
.dark .idx-num{ color:var(--white); }

/* ---------- fixed side tabs (signature element) ---------- */
.side-tab{
  position:fixed; top:52%; z-index:60;
  background:var(--dark); color:var(--white);
  padding:16px 11px;
  font-family:var(--body); font-weight:600; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg);
  transition:background .15s ease;
}
.side-tab:hover{ background:var(--blue); }
.side-tab-left{ left:0; top:58%; }
.side-tab-right{ right:0; top:40%; }
.side-call{
  position:fixed; right:0; top:calc(40% - 62px); z-index:60;
  width:44px; height:44px; border-radius:50%;
  background:var(--dark); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  margin:10px 10px 0 0;
  transition:background .15s ease;
}
.side-call:hover{ background:var(--blue); }
@media (max-width:900px){
  .side-tab, .side-call{ display:none; }
}

/* ---------- nav ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  transition:background .3s ease, backdrop-filter .3s ease, box-shadow .25s ease, border-color .25s ease;
}
header.site.scrolled{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(10px) saturate(1.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
}
nav.main{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand .mark{
  width:38px; height:38px; flex-shrink:0;
  border:2px solid var(--blue);
  position:relative;
  overflow:hidden;
}
.brand .mark::before{
  content:""; position:absolute; inset:-2px;
  background:linear-gradient(135deg, transparent 46%, var(--blue) 46%, var(--blue) 54%, transparent 54%);
}
.brand .word{ display:flex; flex-direction:column; line-height:1.15; }
.brand .word b{
  font-family:var(--display); font-weight:800; font-size:18px;
  color:var(--ink); letter-spacing:-0.01em;
}
.brand .word small{
  font-family:var(--body); font-weight:600; font-size:9.5px;
  color:var(--ink-soft); letter-spacing:0.16em; text-transform:uppercase;
}
.brand .word em{
  font-style:normal; font-family:var(--body); font-weight:500; font-size:8.5px;
  color:var(--ink-faint); letter-spacing:0.14em; text-transform:uppercase; margin-top:2px;
}
.brand-logo{
  height:38px; width:auto; flex-shrink:0; display:block;
}
.foot-logo{
  height:34px; width:auto; margin-bottom:14px;
}
.navlinks{ display:flex; gap:28px; flex-wrap:wrap; }
.navlinks a{
  font-size:13px; font-weight:600; color:var(--ink-soft);
  letter-spacing:0.01em;
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.navlinks a:hover, .navlinks a.active{ color:var(--ink); border-color:var(--blue); }
.nav-cta{
  border:1px solid var(--ink); color:var(--ink);
  font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:11px 20px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav-cta:hover{ background:var(--ink); color:var(--white); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:12.5px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--ink); color:var(--white); border-color:var(--ink); box-shadow:0 2px 8px rgba(11,11,12,0.18); }
.btn-primary:hover{ background:var(--blue); border-color:var(--blue); }
.btn-ghost{ border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
.btn-ghost.on-light{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost.on-light:hover{ border-color:var(--ink); }
.btn-pill{
  border-radius:999px; background:var(--white); color:var(--ink);
  border-color:var(--white);
}
.btn-pill:hover{ background:var(--blue); color:var(--white); border-color:var(--blue); }

/* ---------- hero (home) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 78% 10%, #23262b 0%, transparent 55%),
    linear-gradient(160deg, #1c1d20 0%, #0B0B0C 60%);
  color:var(--white);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 140px);
}
.hero-media{
  position:absolute; inset:0 0 0 42%; z-index:0;
  overflow:hidden;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 35%;
  filter:brightness(0.95) saturate(1.05) contrast(1.05);
}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #0B0B0C 0%, rgba(11,11,12,0.75) 22%, rgba(11,11,12,0.15) 55%, transparent 75%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, #0B0B0C 0%, transparent 18%, transparent 100%);
}
.hero-inner{ position:relative; z-index:1; padding:96px 32px 76px; max-width:1180px; margin:0 auto; }
.hero-frame{ max-width:760px; }
.hero h1{
  font-size:clamp(34px,5vw,56px); line-height:1.05; margin:18px 0 20px; font-weight:900;
}
.hero h1 em{
  font-style:italic; font-weight:800;
  background:linear-gradient(100deg, #FFFFFF 30%, #B9C7FF 70%, #7C93F5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lede{ font-size:17px; color:rgba(255,255,255,0.68); max-width:600px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* manifest strip */
.manifest{ background:var(--paper-dim); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.manifest::before{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(36,81,245,0.06), transparent);
  animation:manifest-sheen 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes manifest-sheen{
  0%{ left:-30%; }
  50%{ left:110%; }
  100%{ left:110%; }
}
.manifest .wrap{ display:grid; grid-template-columns:repeat(4,1fr); padding:0; position:relative; }
.manifest .cell{
  padding:28px 28px 26px; border-right:1px solid var(--line);
  position:relative; transition:background .25s ease;
}
.manifest .cell:last-child{ border-right:none; }
.manifest .cell::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.manifest .cell:hover{ background:rgba(36,81,245,0.045); }
.manifest .cell:hover::after{ transform:scaleX(1); }
.manifest .stat-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:14px;
  border:1px solid var(--line-strong); color:var(--blue);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
}
.manifest .stat-icon svg{ width:19px; height:19px; }
.manifest .cell:hover .stat-icon{ transform:translateY(-3px) rotate(-4deg); border-color:var(--blue); background:var(--paper); }
.manifest .cell .num{ font-family:var(--display); font-weight:900; font-size:30px; color:var(--ink); }
.manifest .cell .lbl{
  font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:6px;
}
/* "Global" cell — animated globe treatment so it reads as intentional, not a missing number */
.cell-global .stat-icon{ position:relative; border-radius:50%; overflow:visible; }
.cell-global .globe-icon svg{ animation:globe-spin 9s linear infinite; }
.cell-global .globe-ping{
  position:absolute; top:-4px; right:-4px; width:8px; height:8px; border-radius:50%;
  background:var(--blue);
}
.cell-global .globe-ping::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--blue);
  animation:ping-ring 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes globe-spin{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
@keyframes ping-ring{
  0%{ transform:scale(1); opacity:0.7; }
  75%,100%{ transform:scale(2.4); opacity:0; }
}
.cell-global .num{ position:relative; display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .manifest::before{ display:none; }
  .cell-global .globe-icon svg{ animation:none; }
  .cell-global .globe-ping::before{ animation:none; }
}

/* ---------- trust marquee (scrolling country strip) ---------- */
.trust-marquee{
  background:var(--dark); overflow:hidden; padding:13px 0;
  border-bottom:1px solid var(--line-on-dark);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:14px; width:max-content;
  animation:marquee-scroll 28s linear infinite;
}
.marquee-track span{
  font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,0.55); white-space:nowrap;
}
.marquee-track .dot{ width:4px; height:4px; border-radius:50%; background:var(--blue); flex-shrink:0; }
@keyframes marquee-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.trust-marquee:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ---------- sections ---------- */
section{ padding:84px 0; }
section.tight{ padding:60px 0; }
section.dark{ background:var(--dark); color:var(--white); }
section.mid{ background:var(--paper-dim); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:44px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(26px,3.2vw,38px); max-width:640px; }
.section-head p{ max-width:400px; color:var(--ink-soft); font-size:14.5px; }
.dark .section-head p{ color:rgba(255,255,255,0.6); }

/* ---------- spec cards ---------- */
.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-2{ grid-template-columns:repeat(2,1fr); }

.spec-card{
  background:var(--white);
  padding:30px 26px 26px;
  box-shadow:0 2px 10px rgba(11,11,12,0.04);
  position:relative;
}
.spec-card::before{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 16px 16px 0;
  border-color:transparent rgba(36,81,245,0.14) transparent transparent;
  transition:border-color .3s ease;
}
.spec-card:hover::before{ border-color:transparent var(--blue) transparent transparent; }
.dark .spec-card::before{ border-color:transparent rgba(36,81,245,0.3) transparent transparent; }
.spec-card .doc-tag{ margin-bottom:16px; }
.spec-card h3{ font-size:18px; font-weight:700; margin-bottom:10px; }
.spec-card p{ font-size:14px; color:var(--ink-soft); }
.dark .spec-card{ background:var(--dark-soft); }
.dark .spec-card p{ color:rgba(255,255,255,0.6); }
.dark .spec-card h3{ color:var(--white); }
.dark .grid{ background:var(--line-on-dark); border-color:var(--line-on-dark); }

/* stat/vision style centered block */
.statement{ text-align:center; max-width:840px; margin:0 auto; }
.statement .doc-tag{ justify-content:center; margin-bottom:18px; }
.statement h2{ font-size:clamp(28px,4vw,42px); }
.statement p{ color:var(--ink-soft); font-size:16px; margin-top:18px; max-width:620px; margin-left:auto; margin-right:auto; }
.dark .statement p{ color:rgba(255,255,255,0.62); }

/* ---------- product ledger table ---------- */
.ledger{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); }
.ledger thead th{
  text-align:left; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.09em;
  color:var(--white); background:linear-gradient(120deg, var(--ink) 0%, #232427 100%);
  padding:15px 20px;
}
.ledger tbody td{ padding:16px 20px; font-size:14.5px; border-top:1px solid var(--line); }
.ledger tbody tr:hover{ background:var(--paper-dim); }
.ledger td.idx{ font-weight:800; color:var(--ink); font-size:13px; }
.ledger td.tag{ font-size:11.5px; font-weight:600; letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase; }

/* ---------- list rows (industries etc.) ---------- */
.rowlist .row{ display:flex; gap:28px; align-items:flex-start; padding:28px 0; border-top:1px solid var(--line); border-left:2px solid transparent; }
.rowlist .row:hover{ border-left-color:var(--blue); }
.rowlist .row:last-child{ border-bottom:1px solid var(--line); }
.rowlist .idx{ font-family:var(--display); font-weight:900; color:var(--ink); font-size:20px; padding-top:2px; width:44px; flex-shrink:0; }
.rowlist h3{ font-size:19px; font-weight:700; margin-bottom:6px; }
.rowlist p{ color:var(--ink-soft); font-size:14.5px; max-width:640px; }

/* ---------- CTA band → merges into footer, black statement style ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 600px 300px at 85% 50%, rgba(36,81,245,0.12), transparent 65%),
    var(--dark);
  color:var(--white);
}
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(22px,3vw,32px); max-width:560px; color:var(--white); font-weight:800; }

/* ---------- footer ---------- */
footer.site{
  background:
    radial-gradient(ellipse 800px 400px at 15% 0%, rgba(36,81,245,0.08), transparent 60%),
    var(--dark);
  color:rgba(255,255,255,0.6); padding:0 0 0;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding:52px 0 44px; border-top:1px solid var(--line-on-dark);
}
.foot-grid h4{
  color:var(--white); font-size:11px; text-transform:uppercase;
  letter-spacing:0.12em; font-weight:700; margin-bottom:18px;
}
.foot-grid ul li{ margin-bottom:10px; }
.foot-grid a{ font-size:13.5px; color:rgba(255,255,255,0.58); }
.foot-grid a:hover{ color:var(--white); }
.foot-brand p{ font-size:13.5px; color:rgba(255,255,255,0.5); max-width:280px; margin-top:14px; }
.foot-bar{
  font-size:11px; color:rgba(255,255,255,0.38);
  padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line-on-dark);
}

/* ---------- doc-control footer strip ---------- */
.docstrip{ background:#000; font-size:10.5px; font-weight:500; color:rgba(255,255,255,0.4); letter-spacing:0.06em; }
.docstrip .wrap{ display:flex; justify-content:space-between; padding:11px 32px; flex-wrap:wrap; gap:6px 20px; text-transform:uppercase; }

/* ---------- blog thumbnails w/ image ---------- */
.blog-thumb.has-img{ background:var(--dark); }
.blog-thumb.has-img::after{ display:none; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card:hover .blog-body a{ color:var(--ink); }

/* ---------- article (blog post) ---------- */
.article-meta{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:rgba(255,255,255,0.5); font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-top:14px; }
.article-meta span{ display:flex; align-items:center; gap:7px; }
.article-hero{ border-bottom:1px solid var(--line); background:var(--paper-dim); }
.article-hero img{ width:100%; height:auto; display:block; max-height:380px; object-fit:cover; }
.article-wrap{ max-width:760px; margin:0 auto; padding:0 32px; }
.article-body{ font-size:16px; color:var(--ink-soft); }
.article-body p{ margin-bottom:20px; }
.article-body h2{ font-size:26px; color:var(--ink); margin:44px 0 16px; }
.article-body h3{ font-size:19px; color:var(--ink); margin:32px 0 12px; }
.article-body ul{ margin:0 0 20px; display:flex; flex-direction:column; gap:10px; }
.article-body ul li{ padding-left:22px; position:relative; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--blue); }
.article-body strong{ color:var(--ink); }
.article-body .callout{ border-left:3px solid var(--blue); background:var(--paper-dim); padding:18px 22px; font-size:14.5px; margin:28px 0; }
.article-body .callout strong{ display:block; margin-bottom:6px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); }
.article-share{ display:flex; gap:12px; align-items:center; padding-top:28px; margin-top:8px; border-top:1px solid var(--line); }
.article-share span{ font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.tag-pill{ display:inline-flex; font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line-strong); padding:6px 12px; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.tag-pill:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.related-thumb{ height:150px; overflow:hidden; background:var(--dark); }
.related-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ---------- accessibility: skip link & focus states ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:var(--white);
  padding:12px 18px; font-size:13px; font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.btn:focus-visible{ outline-offset:3px; }

/* ---------- quote / contact form ---------- */
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-label{
  font-family:var(--body); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);
}
.form-label .req{ color:var(--blue); }
.form-input, .form-textarea, .form-select{
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-family:var(--body); font-size:14px;
  padding:12px 14px; width:100%; transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:inset 0 1px 2px rgba(11,11,12,0.03);
}
.form-input::placeholder, .form-textarea::placeholder{ color:var(--ink-faint); }
.form-input:focus, .form-textarea:focus, .form-select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,81,245,0.12);
}
.form-input:invalid:not(:placeholder-shown), .form-textarea:invalid:not(:placeholder-shown){
  border-color:#D64545;
}
.form-textarea{ resize:vertical; min-height:96px; }
.form-error{
  font-size:12px; color:#D64545; min-height:14px; display:none;
}
.form-error.show{ display:block; }
.form-note{ font-size:12px; color:var(--ink-soft); }
.form-status{
  font-size:13px; font-weight:600; padding:12px 14px; display:none; border:1px solid var(--line);
}
.form-status.show{ display:block; }
.form-status.success{ color:#1E7A3D; border-color:#1E7A3D; background:rgba(30,122,61,0.06); }
.form-status.error{ color:#D64545; border-color:#D64545; background:rgba(214,69,69,0.06); }
button.btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; }

/* ---------- pagehead (inner page banner) ---------- */
.pagehead{
  background:
    radial-gradient(ellipse 700px 380px at 82% -10%, rgba(36,81,245,0.16), transparent 60%),
    var(--dark);
  color:var(--white); padding:64px 0 48px; position:relative; overflow:hidden;
}
.pagehead::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 140px);
}
.pagehead .wrap{ position:relative; }
.pagehead .doc-tag{ margin-bottom:16px; }
.pagehead h1{ font-size:clamp(30px,4.2vw,46px); max-width:720px; font-weight:900; }
.pagehead p{ margin-top:16px; color:rgba(255,255,255,0.62); max-width:560px; font-size:15px; }

@media (max-width: 900px){
  .navlinks{ display:none; }
  .manifest .wrap{ grid-template-columns:repeat(2,1fr); }
  .manifest .cell:nth-child(2){ border-right:none; }
  .g-3, .g-4, .g-2{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero-frame{ padding:0; }
  .hero-media{ inset:0; opacity:0.25; }
}

/* ==========================================================================
   Motion layer — scroll reveals, hover lifts, header state, mobile nav
   ========================================================================== */

/* scroll-triggered reveal */
.reveal-el{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.reveal-el.in-view{ opacity:1; transform:translateY(0); }

/* header state on scroll */
header.site{ transition:box-shadow .25s ease, border-color .25s ease; }
header.site.scrolled{
  box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.06);
  border-color:transparent;
}

/* nav link sliding underline */
.navlinks a{ position:relative; border-bottom:none !important; }
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.navlinks a:hover::after, .navlinks a.active::after{ transform:scaleX(1); }

/* button lift */
.btn{ transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary:hover{ box-shadow:0 10px 22px rgba(36,81,245,0.25); }
.btn-pill:hover{ box-shadow:0 10px 26px rgba(0,0,0,0.35); }
.nav-cta{ transition:background .18s ease, color .18s ease, transform .18s ease; }
.nav-cta:hover{ transform:translateY(-2px); }
.side-tab{ transition:background .18s ease, padding .18s ease; }
.side-call{ transition:background .18s ease, transform .18s ease; }
.side-call:hover{ transform:scale(1.08); }

/* card + row lift */
.spec-card{ transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; position:relative; }
.spec-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,0.10); z-index:2; }
.dark .spec-card:hover{ box-shadow:0 18px 36px rgba(0,0,0,0.5); }

.rowlist .row{ transition:background .2s ease, padding-left .2s ease, border-color .2s ease; }
.rowlist .row:hover{ background:var(--paper-dim); padding-left:14px; }
.rowlist .row:hover .idx{ color:var(--blue); }
.rowlist .idx{ transition:color .2s ease; }

.ledger tbody tr{ transition:background .15s ease; }

/* brand mark subtle motion */
.brand .mark{ transition:transform .3s ease; }
.brand:hover .mark{ transform:rotate(8deg); }

/* animated counters (manifest numbers) */
.manifest .num{ font-variant-numeric:tabular-nums; }

/* mobile nav toggle */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:1px solid var(--line-strong);
  cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{
  width:16px; height:2px; background:var(--ink); margin:0 auto;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  nav.main{ position:relative; flex-wrap:wrap; }
  .nav-toggle{ display:flex; }
  .navlinks{
    display:none; width:100%; order:3;
    flex-direction:column; gap:0;
    background:var(--paper); border-top:1px solid var(--line);
    margin-top:16px; padding-top:6px;
  }
  .navlinks.open{ display:flex; }
  .navlinks a{ padding:13px 2px; border-bottom:1px solid var(--line) !important; }
  .navlinks a::after{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal-el{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ==========================================================================
   Enhanced motion & UI layer — scroll progress, cursor spotlight, tilt,
   magnetic buttons, animated accents, image zoom
   ========================================================================== */

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:var(--blue); z-index:80; transition:width .1s linear;
}

/* hero cursor spotlight */
.hero{ --spot-x:70%; --spot-y:30%; }
.hero-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(36,81,245,0.16), transparent 60%);
  transition:opacity .4s ease;
}
.hero:hover .hero-spot{ opacity:1; }

/* section-head animated accent bar */
.section-head h2{ position:relative; padding-top:16px; }
.section-head h2::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:3px;
  background:var(--blue); transform-origin:left; transform:scaleX(0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.section-head.reveal-el.in-view h2::before,
.section-head h2::before{ transform:scaleX(1); }
.statement h2::before,
.cta-band h2::before{ content:none; }

/* tilt on cards (JS sets --rx/--ry via inline style) */
.spec-card, .cert-card{ transform-style:preserve-3d; perspective:800px; }
.spec-card:hover, .cert-card:hover{
  transform:translateY(-6px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
}
.cert-card{ transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.cert-card:hover{ box-shadow:0 16px 32px rgba(0,0,0,0.10); z-index:2; }
.cert-card .seal-badge{ transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cert-card:hover .seal-badge{
  transform:scale(1.1) rotate(-6deg);
  background:var(--blue); border-color:var(--blue); color:var(--white);
  box-shadow:0 10px 22px rgba(36,81,245,0.28);
}

/* magnetic buttons (JS sets --mx/--my) */
.btn-primary, .btn-pill, .nav-cta{ transform:translate(var(--mx,0), var(--my,0)) translateY(0); }
.btn-primary:hover, .btn-pill:hover{ transform:translate(var(--mx,0), var(--my,0)) translateY(-2px); }
.btn span.arrow{ display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover span.arrow{ transform:translateX(4px); }

/* blog / related thumb image zoom on hover */
.blog-thumb img, .related-thumb img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-thumb img, .related-thumb:hover img{ transform:scale(1.08); }
.blog-card{ transition:box-shadow .28s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,0.10); }

/* donut chart draw-in */
.donut{ opacity:0; transform:scale(.85) rotate(-90deg); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.donut.in-view{ opacity:1; transform:scale(1) rotate(0deg); }
.legend-item{ opacity:0; transform:translateX(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.legend-item.in-view{ opacity:1; transform:translateX(0); }

/* world map subtle float */
.map-frame{ transition:box-shadow .3s ease; }
.map-frame:hover{ box-shadow:0 18px 40px rgba(0,0,0,0.08); }
.map-frame img, .map-frame svg{ animation:map-float 6s ease-in-out infinite; }
@keyframes map-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* whatsapp float gentle pulse to draw the eye */
.whatsapp-float{ transition:transform .2s ease, box-shadow .2s ease; }
.whatsapp-float::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:wa-pulse 2.6s ease-out infinite; z-index:-1;
}
.whatsapp-float{ position:fixed; }
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 10px 26px rgba(0,0,0,0.3); }
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* mobile nav: staggered link fade-in on open */
@media (max-width:900px){
  .navlinks a{
    opacity:0; transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .navlinks.open a{ opacity:1; transform:translateY(0); }
  .navlinks.open a:nth-child(1){ transition-delay:.03s; }
  .navlinks.open a:nth-child(2){ transition-delay:.07s; }
  .navlinks.open a:nth-child(3){ transition-delay:.11s; }
  .navlinks.open a:nth-child(4){ transition-delay:.15s; }
  .navlinks.open a:nth-child(5){ transition-delay:.19s; }
  .navlinks.open a:nth-child(6){ transition-delay:.23s; }
  .navlinks.open a:nth-child(7){ transition-delay:.27s; }
}

/* doc-tag underline sweep on hover within interactive rows */
.rowlist .row h3{ transition:color .2s ease; }
.rowlist .row:hover h3{ color:var(--blue); }

@media (prefers-reduced-motion: reduce){
  .hero-spot{ display:none; }
  .donut, .legend-item{ opacity:1 !important; transform:none !important; }
  .map-frame img, .map-frame svg{ animation:none; }
  .whatsapp-float::before{ animation:none; }
  .navlinks a{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- product detail page ---------- */
.breadcrumb-bar{ background:var(--paper-dim); border-bottom:1px solid var(--line); padding:14px 0; }
.breadcrumb-bar .wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); }
.breadcrumb-bar a{ color:var(--ink-soft); font-weight:600; }
.breadcrumb-bar a:hover{ color:var(--blue); }
.breadcrumb-bar span.sep{ color:var(--ink-faint); }
.breadcrumb-bar span.current{ color:var(--ink); font-weight:700; }

.pd-hero .wrap{ display:grid; grid-template-columns:1.65fr 1fr; gap:48px; align-items:center; padding-bottom:48px; }
.pd-hero .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.pd-hero-image{ display:flex; justify-content:center; align-items:center; }
.pd-hero-image img{ width:100%; max-width:300px; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }
@media (max-width:900px){ .pd-hero-image{ order:-1; margin-bottom:12px; } .pd-hero-image img{ max-width:220px; } }
.pd-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,0.55); margin-top:18px; text-transform:uppercase; letter-spacing:0.04em; }
.pd-meta-row .dot{ width:4px; height:4px; border-radius:50%; background:var(--blue); flex-shrink:0; }

.spec-box{ background:var(--white); border:1px solid var(--line); box-shadow:0 10px 30px rgba(11,11,12,0.14); position:sticky; top:24px; }
.spec-box .spec-box-head{ background:var(--dark); color:var(--white); padding:18px 24px; }
.spec-box .spec-box-head .doc-tag{ margin-bottom:6px; }
.spec-box .spec-box-head h3{ font-size:16px; font-weight:800; }
.spec-box .spec-rows{ padding:6px 24px; }
.spec-box .spec-row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line); font-size:13.5px; }
.spec-box .spec-row:first-child{ border-top:none; }
.spec-box .spec-row .k{ color:var(--ink-faint); font-weight:600; }
.spec-box .spec-row .v{ color:var(--ink); font-weight:700; text-align:right; }
.spec-box .spec-box-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.spec-box .spec-box-foot .btn{ width:100%; justify-content:center; }
.spec-box .spec-box-foot .foot-note{ font-size:11.5px; color:var(--ink-faint); text-align:center; margin-top:4px; }

.pd-intro{ font-size:16px; color:var(--ink-soft); }
.pd-intro p{ margin-bottom:18px; }
.pd-intro h2{ font-size:24px; color:var(--ink); margin:40px 0 16px; }
.pd-intro .check-list{ display:flex; flex-direction:column; gap:0; margin-top:4px; }
.pd-intro .check-list li{ position:relative; padding:12px 0 12px 28px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.pd-intro .check-list li:first-child{ border-top:none; }
.pd-intro .check-list li::before{ content:"✓"; position:absolute; left:0; top:11px; color:var(--blue); font-weight:800; font-size:13px; }

.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-weight:700; font-size:15px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:20px; font-weight:400; color:var(--blue); flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{ padding:0 4px 22px; color:var(--ink-soft); font-size:14.5px; max-width:760px; }

@media (max-width:900px){
  .pd-hero .wrap{ grid-template-columns:1fr; }
  .pd-hero-inner{ grid-template-columns:1fr !important; }
  .spec-box{ position:static; }
}

/* ---------- preloader ---------- */
body.preloading{ overflow:hidden; }
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  background:var(--dark);
  opacity:1; visibility:visible;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }

.preloader-mark{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.preloader-mark::before{
  content:''; position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,81,245,.28), rgba(36,81,245,0) 70%);
  animation:preloaderGlow 1.7s ease-in-out infinite;
}
.preloader-icon{
  width:42px; height:42px; object-fit:contain; position:relative; z-index:1;
  animation:preloaderPulse 1.7s ease-in-out infinite;
}
.preloader-ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:preloaderSpin 1.15s linear infinite;
}
.preloader-ring circle{
  fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:301.6; stroke-dashoffset:226;
}
.preloader-ring.outer{ animation-duration:2.4s; animation-direction:reverse; opacity:.35; }
.preloader-ring.outer circle{ stroke-width:1; stroke-dasharray:364.4; stroke-dashoffset:310; }

.preloader-word{
  font-family:var(--display); font-weight:900; letter-spacing:.16em; font-size:14px;
  color:var(--white); text-transform:uppercase;
  opacity:0; transform:translateY(6px);
  animation:preloaderWordIn .7s ease .35s forwards;
}
.preloader-word span{ color:var(--blue); }

.preloader-bar{ width:132px; height:2px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0; background:var(--blue); animation:preloaderBar 1.6s ease-in-out infinite; }

@keyframes preloaderSpin{ to{ transform:rotate(360deg); } }
@keyframes preloaderGlow{ 0%,100%{ opacity:.45; transform:scale(.88); } 50%{ opacity:1; transform:scale(1.18); } }
@keyframes preloaderPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@keyframes preloaderWordIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes preloaderBar{
  0%{ width:0%; margin-left:0; }
  50%{ width:65%; }
  100%{ width:0%; margin-left:100%; }
}

@media (prefers-reduced-motion: reduce){
  .preloader-icon,.preloader-ring,.preloader-mark::before,.preloader-bar span{ animation:none !important; }
}