/* ==========================================================================
   ABC Solutions — Stylesheet
   ========================================================================== */

:root{
  /* Color tokens */
  --navy-950:#0B1226;
  --navy-900:#0F1730;
  --navy-800:#142149;
  --navy-700:#1C2C5C;
  --ink:#10162B;
  --ink-soft:#4A5170;
  --paper:#F6F7FB;
  --paper-dim:#EEF0F7;
  --white:#FFFFFF;
  --brand:#2D2E87;
  --brand-dark:#1F2066;
  --brand-light:#7677D6;
  --brand-tint:#ECECFA;
  --amber:#E8A33D;
  --amber-tint:#FBEEDA;
  --line:#E2E5EE;
  --line-dark:#26315A;

  /* Type */
  --font-display:'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body:'Segoe UI', Tahoma, Arial, sans-serif;

  /* Scale */
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(16,22,43,0.06), 0 8px 24px -12px rgba(16,22,43,0.12);
  --shadow-raised:0 12px 40px -16px rgba(11,18,38,0.35);
  --container:1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-950);
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:600;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

section{ padding:96px 0; }
@media (max-width:768px){ section{ padding:64px 0; } }

/* Keep the supplier showcase visually close to the following Why ABC section. */
#products{ padding-bottom:52px; }
#why-us{ padding-top:52px; padding-bottom:52px; }
#contact{ padding-top:52px; }
@media (max-width:768px){
  #products{ padding-bottom:38px; }
  #why-us{ padding-top:38px; padding-bottom:38px; }
  #contact{ padding-top:38px; }
}

.section-head{ max-width:640px; margin-bottom:48px; }
.section-tag{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--brand-dark);
  background:var(--brand-tint);
  padding:5px 12px;
  border-radius:100px;
  margin-bottom:16px;
}
.section-head h2{ font-size:clamp(28px,3.4vw,38px); }
.section-head p{ font-size:17px; }
@media (min-width:1200px){
  #products .section-head{ max-width:none; }
  #products .section-head h2{ white-space:nowrap; }
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:15px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--brand); color:var(--white); }
.btn-primary:hover{ background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(45,46,135,0.5); }
.btn-ghost-dark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.28); }
.btn-ghost-dark:hover{ border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.06); }
.btn-outline{ background:transparent; color:var(--navy-950); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--navy-950); }
.header-actions .btn-outline{ color:var(--brand); border-color:var(--brand-tint); }
.header-actions .btn-outline:hover{ border-color:var(--brand); background:var(--brand-tint); }
.header-actions .btn-outline svg{ flex-shrink:0; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(246,247,251,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  background:rgba(246,247,251,0.96);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy-950); }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{ font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:8px 12px; border-radius:8px; transition:color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.main-nav .mobile-only-link{ display:none; }
.main-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:not(.nav-talk-link):hover{ color:var(--white); background:var(--brand); box-shadow:0 8px 18px -12px rgba(45,46,135,.7); }
.main-nav a:not(.nav-talk-link)::after{ display:none; }
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  color:var(--ink);
  font:500 15px/1.5 var(--font-body);
  padding:6px 0;
}
.nav-dropdown-toggle svg{ transition:transform .2s ease; }
.nav-dropdown.is-open .nav-dropdown-toggle svg,
.nav-dropdown:hover .nav-dropdown-toggle svg{ transform:rotate(180deg); }
.nav-submenu{
  position:absolute;
  top:calc(100% + 12px);
  left:-18px;
  min-width:260px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  box-shadow:var(--shadow-card);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown.is-open .nav-submenu{ opacity:1; visibility:visible; transform:none; }
.nav-submenu a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:7px; white-space:nowrap; }
.nav-submenu a:hover{ background:var(--brand-tint); color:var(--brand-dark); }
.nav-submenu a::after{ display:none; }
.new-service-tag,
.product-new-tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  background:var(--brand);
  color:var(--white);
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.new-service-tag{ padding:5px 7px; }
.product-new-tag{ margin-left:7px; padding:5px 8px; vertical-align:middle; }
.bento-card[id],
.supplier-showcase[id]{ scroll-margin-top:110px; }
.main-nav .nav-talk-link{
  white-space:nowrap;
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  padding:9px 10px;
  color:var(--brand-dark);
  font-size:14px;
  font-weight:600;
  background:var(--brand-tint);
}
.main-nav .nav-talk-link::after{ display:none; }
.main-nav .nav-talk-link:hover{ background:var(--brand); color:var(--white); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--navy-950); position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:rotate(45deg); top:0; }
.nav-toggle.is-open span::after{ transform:rotate(-45deg); top:0; }

@media (max-width:1100px){
  .main-nav{
    position:fixed; top:76px; left:0; right:0;
    background:var(--white);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
  }
  .main-nav.is-open{ max-height:560px; }
  .main-nav a{ width:100%; padding:16px 24px; border-bottom:1px solid var(--line); }
  .main-nav a::after{ display:none; }
  .nav-dropdown{ width:100%; }
  .nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:16px 24px;
    border-bottom:1px solid var(--line);
  }
  .main-nav .nav-talk-link{
    width:100%;
    padding:16px 24px;
    border:0;
    border-radius:0;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:15px;
  }
  .nav-submenu{
    position:static;
    min-width:0;
    max-height:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:max-height .22s ease;
    background:var(--paper);
  }
  .nav-dropdown.is-open .nav-submenu{ max-height:340px; }
  .nav-submenu a{ padding:13px 24px 13px 42px; border-radius:0; }
  .header-actions .btn{ display:none; }
  .main-nav .mobile-only-link{ display:block; color:var(--brand); font-weight:600; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--navy-950);
  color:var(--white);
  padding:156px 0 92px;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:-3%;
  background-image:url('assets/travel-hero.jpg');
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.04);
  animation:heroTravelPan 18s ease-in-out infinite alternate;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,13,31,.96) 0%,rgba(11,18,38,.90) 40%,rgba(11,18,38,.46) 72%,rgba(11,18,38,.24) 100%);
}
@keyframes heroTravelPan{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{ transform:scale(1.10) translate3d(-1.2%,-.8%,0); }
}
.hero-flight-map{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:.92;
}
.hero-flight-map svg{ width:100%; height:100%; display:block; }
.route-point{ fill:#E8A33D; transform-origin:center; animation:routePulse 2.8s ease-out infinite; }
.route-point-two{ animation-delay:1.35s; }
.sky-star{ position:absolute; width:3px; height:3px; border-radius:50%; background:#FBEEDA; box-shadow:0 0 12px 2px rgba(251,238,218,.55); animation:starBlink 3.6s ease-in-out infinite; }
.star-one{ top:19%; right:18%; }.star-two{ top:38%; right:7%; animation-delay:1.1s; }.star-three{ top:13%; right:35%; animation-delay:2.1s; }
@keyframes routePulse{ 0%{ transform:scale(.45); opacity:1; } 75%,100%{ transform:scale(2.8); opacity:0; } }
@keyframes starBlink{ 0%,100%{ opacity:.18; transform:scale(.75); } 50%{ opacity:1; transform:scale(1.35); } }
.hero .container{
  display:block;
  position:relative;
  z-index:3;
}
.hero-copy{ max-width:760px; margin:0; text-align:left; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:#B9C2E0; font-weight:500;
  margin-bottom:20px;
}

/* Light one-time entrance for the hero content */
@keyframes heroReveal{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.hero .reveal{
  opacity:0;
  animation:heroReveal .6s ease-out forwards;
  animation-delay:var(--d, 0s);
}
@media (prefers-reduced-motion: reduce){
  .hero .reveal{ opacity:1; animation:none; transform:none; }
  .hero .reveal .stat{ opacity:1; animation:none; transform:none; }
}

.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); }
.hero h1{
  color:var(--white);
  font-size:clamp(36px,4.6vw,56px);
  max-width:18ch;
  margin-left:0;
  margin-right:0;
}
.hero .lede{
  color:#C7CEE6;
  font-size:18px;
  max-width:58ch;
  margin-left:0;
  margin-right:0;
  margin-bottom:32px;
}
.hero-ctas{ display:flex; justify-content:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  justify-content:start;
  gap:32px;
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:28px;
}
.hero-stats .stat b{
  display:block;
  font-family:var(--font-display);
  font-size:26px;
  color:var(--white);
}
.hero-stats .stat span{
  font-size:13px;
  color:#9AA5CA;
}
.hero .reveal .stat{
  opacity:0;
  transform:translateY(-22px);
  animation:statLanding .62s cubic-bezier(.16,.82,.28,1) forwards;
  animation-delay:calc(.48s + var(--stat-delay, 0) * .12s);
}
.hero-stats .stat:nth-child(1){ --stat-delay:0; }
.hero-stats .stat:nth-child(2){ --stat-delay:1; }
.hero-stats .stat:nth-child(3){ --stat-delay:2; }
.hero-stats .stat:nth-child(4){ --stat-delay:3; }
@keyframes statLanding{
  0%{ opacity:0; transform:translateY(-22px); }
  72%{ opacity:1; transform:translateY(3px); }
  100%{ opacity:1; transform:translateY(0); }
}

.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  max-width:460px;
  justify-self:end;
}
.hero-visual canvas{ width:100%; height:100%; display:block; }
.hero-visual .ring{
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
}

@media (max-width:900px){
  .hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .hero::after{ background:rgba(7,13,31,.78); }
  .hero-copy{ margin:0 auto; text-align:center; }
  .hero h1,.hero .lede{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .hero-flight-map{ opacity:.54; }
}

/* ---------- Animated travel journey ---------- */
.travel-journey{
  position:relative;
  background:linear-gradient(180deg,var(--paper) 0%,var(--white) 100%);
  overflow:hidden;
}
.travel-journey::before{
  content:'';
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(118,119,214,.15),rgba(118,119,214,0) 68%);
  pointer-events:none;
}
.journey-head{ margin-left:auto; margin-right:auto; text-align:center; }
.journey-head p{ margin-left:auto; margin-right:auto; }
.journey-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding-top:42px;
}
.journey-line{
  position:absolute;
  left:8%;
  right:8%;
  top:16px;
  height:2px;
  background:repeating-linear-gradient(90deg,var(--brand-light) 0 8px,transparent 8px 16px);
  opacity:.6;
}
.journey-plane{
  position:absolute;
  top:-18px;
  left:0;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--white);
  background:var(--brand);
  box-shadow:0 8px 20px rgba(45,46,135,.28);
  animation:journeyFlight 7s ease-in-out infinite;
}
@keyframes journeyFlight{
  0%,8%{ left:0; transform:translateX(-50%) rotate(0deg); }
  46%,54%{ left:50%; transform:translateX(-50%) rotate(2deg); }
  92%,100%{ left:100%; transform:translateX(-50%) rotate(0deg); }
}
.journey-step{
  position:relative;
  min-height:230px;
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.journey-step:hover{
  transform:translateY(-7px);
  border-color:var(--brand-light);
  box-shadow:0 18px 36px -22px rgba(11,18,38,.45);
}
.journey-number{
  position:absolute;
  right:20px;
  top:18px;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--brand-light);
  opacity:.55;
}
.journey-icon{
  width:54px;
  height:54px;
  margin-bottom:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--brand);
  color:var(--white);
  font-size:25px;
  box-shadow:0 10px 24px -12px rgba(45,46,135,.75);
  transition:transform .3s ease;
}
.journey-step:hover .journey-icon{ transform:rotate(-6deg) scale(1.08); }
.journey-step h3{ font-size:19px; }
.journey-step p{ margin:0; font-size:14.5px; }
@media (max-width:900px){
  .journey-track{ grid-template-columns:repeat(2,1fr); }
  .journey-line{ display:none; }
}
@media (max-width:560px){ .journey-track{ grid-template-columns:1fr; padding-top:0; } }

/* ---------- Scroll and interaction motion ---------- */
html.motion-ready .reveal-on-scroll{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
}
html.motion-ready .reveal-on-scroll.is-revealed{ opacity:1; transform:none; }
.stat-band{
  background-image:linear-gradient(110deg,var(--navy-900),var(--brand-dark),var(--navy-900));
  background-size:220% 100%;
  animation:statBandFlow 12s ease-in-out infinite;
}
@keyframes statBandFlow{ 0%,100%{ background-position:0 50%; } 50%{ background-position:100% 50%; } }
.supplier-grid img{ transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.supplier-grid img:hover{ transform:translateY(-4px) scale(1.03); border-color:var(--brand-light); box-shadow:0 12px 26px -18px rgba(11,18,38,.55); }

@media (prefers-reduced-motion: reduce){
  .hero::before,.journey-plane,.stat-band{ animation:none !important; }
  .reveal-on-scroll{ opacity:1 !important; transform:none !important; }
}

/* ---------- Logo strip / stat band ---------- */
.stat-band{
  background:var(--navy-900);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:40px 0;
}
.stat-band .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
}
.stat-band .band-item{
  display:flex; align-items:baseline; gap:10px;
  color:#C7CEE6;
  font-size:14px;
}
.stat-band .band-item b{
  font-family:var(--font-display);
  color:var(--white);
  font-size:20px;
}

/* ---------- Intro / two-col ---------- */
.intro{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  align-items:center;
}
.intro-figure{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  aspect-ratio:4/3;
  position:relative;
  isolation:isolate;
  box-shadow:var(--shadow-card);
}
.intro-figure img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.045);
  animation:introVisualDrift 10s ease-in-out infinite alternate;
}
.intro-figure::before,.intro-figure::after,.about-art::before,.about-art::after{ content:''; position:absolute; z-index:1; pointer-events:none; }
.intro-figure::before{
  width:9px; height:9px; border-radius:50%; top:24%; left:23%;
  background:var(--amber); box-shadow:0 0 0 8px rgba(232,163,61,.12),0 0 24px 4px rgba(232,163,61,.45);
  animation:visualBeacon 4.2s ease-in-out infinite;
}
.intro-figure::after{
  inset:0; opacity:.7;
  background:linear-gradient(115deg,transparent 34%,rgba(210,214,255,.48) 49%,transparent 51%);
  transform:translateX(-120%);
  animation:visualSweep 7s ease-in-out infinite;
}
@keyframes introVisualDrift{ from{ transform:scale(1.04) translate3d(-1.5%,-1%,0); } to{ transform:scale(1.09) translate3d(1.5%,1%,0); } }
@keyframes visualBeacon{ 0%,100%{ transform:scale(.8); opacity:.6; } 48%{ transform:scale(1.2); opacity:1; } }
@keyframes visualSweep{ 0%,30%{ transform:translateX(-120%); } 66%,100%{ transform:translateX(120%); } }
.intro-points{ margin-top:28px; display:grid; gap:20px; }
.intro-point{ display:flex; gap:14px; }
.intro-point .ico{
  width:40px; height:40px; flex-shrink:0;
  border-radius:var(--radius-sm);
  background:var(--brand-tint);
  color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
}
.intro-point h4{ font-size:16px; margin-bottom:4px; }
.intro-point p{ font-size:15px; margin:0; }

/* Animated 3D travel scenes */
.intro-figure,.about-art{ perspective:900px; transform-style:preserve-3d; }
.visual-depth{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; transform-style:preserve-3d; }
.visual-depth::before{ content:''; position:absolute; inset:-18%; background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(6,14,38,.38) 100%); animation:sceneTilt 10s ease-in-out infinite alternate; }
.depth-orbit,.depth-globe{ position:absolute; display:block; border:1px solid rgba(222,232,255,.48); border-radius:50%; transform-style:preserve-3d; }
.depth-orbit--one{ width:72%; height:42%; left:13%; top:27%; transform:rotateX(67deg) rotateZ(-18deg); animation:orbitFloat 7s ease-in-out infinite; }
.depth-orbit--two{ width:48%; height:28%; left:35%; top:35%; border-color:rgba(232,163,61,.72); transform:rotateX(69deg) rotateZ(22deg); animation:orbitFloat 7s ease-in-out -3.5s infinite reverse; }
.depth-card{ position:absolute; display:flex; flex-direction:column; gap:3px; min-width:118px; padding:10px 12px; border:1px solid rgba(255,255,255,.62); border-radius:10px; color:#fff; background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(212,221,255,.08)); box-shadow:0 16px 30px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.35); backdrop-filter:blur(7px); transform-style:preserve-3d; }
.depth-card i{ width:18px; height:3px; border-radius:999px; background:var(--amber); box-shadow:0 0 12px var(--amber); }
.depth-card b{ font-size:12px; letter-spacing:.01em; }.depth-card small{ font-size:10px; opacity:.82; }
.depth-card--flight{ left:8%; top:17%; transform:translateZ(65px) rotateY(13deg) rotateX(5deg); animation:cardFlyOne 7.8s cubic-bezier(.4,0,.2,1) infinite; }
.depth-card--hotel{ right:7%; bottom:13%; transform:translateZ(85px) rotateY(-13deg) rotateX(5deg); animation:cardFlyTwo 8.7s cubic-bezier(.4,0,.2,1) -2.5s infinite; }
.depth-card--insight{ right:7%; bottom:13%; transform:translateZ(75px) rotateY(-14deg); animation:cardFlyTwo 8.7s cubic-bezier(.4,0,.2,1) -2.5s infinite; }
.depth-marker{ position:absolute; width:11px; height:11px; border-radius:50%; background:#fff4d6; box-shadow:0 0 0 7px rgba(251,238,218,.14),0 0 20px 5px rgba(232,163,61,.58); }
.depth-marker--one{ left:35%; top:55%; animation:markerTravel 5.2s ease-in-out infinite; }.depth-marker--two{ right:21%; top:33%; animation:markerTravel 5.2s ease-in-out -2.6s infinite; }
.visual-depth--knowledge .depth-globe{ width:47%; aspect-ratio:1; left:26%; top:22%; border:1px solid rgba(246,225,178,.6); background:repeating-linear-gradient(0deg,transparent 0 14%,rgba(222,232,255,.35) 15% 16%,transparent 17% 29%),repeating-linear-gradient(90deg,transparent 0 18%,rgba(222,232,255,.28) 19% 20%,transparent 21% 38%); box-shadow:inset 12px -4px 35px rgba(0,0,0,.35),0 0 42px rgba(168,189,255,.25); animation:globeTurn 12s linear infinite; }
.visual-depth--knowledge .depth-orbit--one{ width:64%; left:18%; top:32%; }.visual-depth--knowledge .depth-orbit--two{ width:57%; left:22%; top:30%; border-color:rgba(251,238,218,.52); }
@keyframes sceneTilt{ from{ transform:rotateZ(-1deg) scale(1.02); } to{ transform:rotateZ(1deg) scale(1.08); } }
@keyframes orbitFloat{ 0%,100%{ opacity:.3; transform:rotateX(67deg) rotateZ(-18deg) translateZ(0); } 50%{ opacity:.95; transform:rotateX(67deg) rotateZ(-2deg) translateZ(42px); } }
@keyframes cardFlyOne{ 0%,100%{ transform:translate3d(0,8px,35px) rotateY(13deg) rotateX(5deg); } 50%{ transform:translate3d(22px,-15px,105px) rotateY(-8deg) rotateX(-4deg); } }
@keyframes cardFlyTwo{ 0%,100%{ transform:translate3d(0,-3px,65px) rotateY(-13deg) rotateX(5deg); } 50%{ transform:translate3d(-28px,15px,125px) rotateY(10deg) rotateX(-6deg); } }
@keyframes markerTravel{ 0%,100%{ transform:translate3d(0,0,30px) scale(.75); opacity:.55; } 45%{ transform:translate3d(16px,-16px,110px) scale(1.2); opacity:1; } }
@keyframes globeTurn{ from{ transform:rotateY(-15deg) rotateZ(-4deg); } 50%{ transform:rotateY(28deg) rotateZ(4deg) translateZ(55px); } to{ transform:rotateY(-15deg) rotateZ(-4deg); } }

@media (max-width:900px){
  .intro{ grid-template-columns:1fr; }
  .intro-figure{ order:-1; aspect-ratio:4/3; }
}

/* ---------- About ---------- */
.about-section{ background:var(--white); }
.about-content{ display:flex; flex-direction:column; }
.about-panel{ order:1; }
.about-platform{ order:2; margin-top:80px; scroll-margin-top:110px; }
.about-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:56px;
  padding:48px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--paper),var(--white));
  box-shadow:var(--shadow-card);
}
.about-panel h2{ font-size:clamp(30px,3.5vw,42px); max-width:16ch; }
.about-panel-copy{ min-width:0; }
.about-art{
  margin:0;
  overflow:hidden;
  border-radius:14px;
  aspect-ratio:4/3;
  background:var(--navy-950);
  position:relative;
  isolation:isolate;
  box-shadow:0 16px 30px -22px rgba(11,18,38,.72);
}
.about-art img{
  width:100%; height:100%; object-fit:cover;
  object-position:center;
  transform:scale(1.045);
  animation:aboutVisualDrift 11s ease-in-out infinite alternate;
}
.about-art::before{
  width:11px; height:11px; border-radius:50%; top:39%; left:58%;
  background:#FBEEDA; box-shadow:0 0 0 7px rgba(251,238,218,.11),0 0 24px 5px rgba(232,163,61,.42);
  animation:visualBeacon 4.8s ease-in-out 1.1s infinite;
}
.about-art::after{
  inset:0; opacity:.55;
  background:radial-gradient(circle at 68% 30%,rgba(180,183,255,.24),transparent 27%),linear-gradient(135deg,transparent 45%,rgba(255,255,255,.22) 50%,transparent 55%);
  transform:translateX(-110%);
  animation:visualSweep 9s ease-in-out 1.8s infinite;
}
@keyframes aboutVisualDrift{ from{ transform:scale(1.04) translate3d(1.5%,-1%,0); } to{ transform:scale(1.09) translate3d(-1.5%,1%,0); } }
.intro-figure::before,.intro-figure::after,.about-art::before,.about-art::after{ content:none; }
.about-copy p:last-child{ margin-bottom:0; }
.ownership-note{ font-weight:600; color:var(--brand-dark); }
@media (max-width:800px){
  .about-panel{ grid-template-columns:1fr; gap:24px; padding:28px; }
  .about-panel h2{ max-width:none; }
  .about-art{ width:100%; max-width:560px; aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .intro-figure img,.about-art img,.intro-figure::before,.intro-figure::after,.about-art::before,.about-art::after,.visual-depth *,.visual-depth::before{ animation:none; }
  .intro-figure img,.about-art img{ transform:scale(1.03); }
}

/* ---------- Bento product grid ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(280px,1fr);
  gap:16px;
}
.bento-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.bento-card:hover{ border-color:var(--brand); transform:translateY(-3px); }
.bento-card .ico{ width:38px; height:38px; flex-shrink:0; margin-bottom:16px; color:var(--brand-dark); }
.bento-card .ico svg{ display:block; width:38px; height:38px; }
.bento-card h3{ font-size:19px; margin-bottom:4px; }
.product-title-with-tag{ display:flex; align-items:center; gap:8px; }
.product-title-with-tag > span:first-child{ min-width:0; }
.product-title-with-tag .product-new-tag{ flex-shrink:0; margin-left:0; white-space:nowrap; }
.bento-card p{ font-size:14px; margin:0; }
.bento-card.large{ justify-content:flex-end; background:var(--navy-950); border-color:var(--navy-950); }
.bento-card.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,12,31,.08) 0%,rgba(6,12,31,.42) 48%,rgba(6,12,31,.98) 82%);
}
.product-card-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.bento-card.has-image:hover .product-card-image{ transform:scale(1.045); }
.bento-card.has-image .ico,
.bento-card.has-image h3,
.bento-card.has-image p{ position:relative; z-index:2; }
.bento-card.large h3,.bento-card.large p{ color:var(--white); }
.bento-card.large p{ color:#B9C2E0; }
.bento-card.large .ico{ color:var(--amber); }
.bento-card.wide{ grid-column:span 1; }
.bento-card.accent{ background:var(--brand-tint); border-color:var(--brand-tint); }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
}

/* ---------- Back office tabs ---------- */
.why-back-office{
  margin-top:64px;
  padding-top:56px;
  border-top:1px solid var(--line);
}
.why-back-office .section-head{ margin-bottom:32px; }
@media (min-width:901px){
  .why-back-office .section-head{ max-width:none; }
  .why-back-office .section-head h2{ white-space:nowrap; }
}
.tabs-panel{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  background:linear-gradient(135deg,#10193a,#1b2360 100%);
  border:1px solid rgba(86,96,174,.35);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 44px -28px rgba(11,18,38,.6);
}
html.motion-ready .why-back-office.is-revealed .tabs-panel{ animation:backOfficeLift .62s cubic-bezier(.2,.78,.24,1) both; }
@keyframes backOfficeLift{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
.control-rail{ padding:28px 18px 20px; color:#DDE2FF; background:linear-gradient(180deg,rgba(5,11,35,.35),rgba(9,14,48,.72)); display:flex; flex-direction:column; }
.control-rail-mark{ width:42px; height:42px; display:grid; place-items:center; color:#FBEEDA; border:1px solid rgba(232,163,61,.42); border-radius:13px; background:rgba(232,163,61,.1); }
.control-rail-mark svg{ width:23px; height:23px; }
.control-rail-label{ margin:26px 10px 12px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9EA8DE; }
.tabs-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tabs-nav button{
  position:relative;
  width:100%; display:flex; align-items:center; gap:12px;
  padding:13px 10px;
  text-align:left; background:transparent;
  border:1px solid transparent;
  border-radius:12px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  color:#B7C0EA;
  white-space:nowrap;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tabs-nav button::after{
  content:''; position:absolute; right:10px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(232,163,61,.12); transform:scale(0); transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.tabs-nav button:hover{ color:var(--white); background:rgba(255,255,255,.07); transform:translateX(2px); }
.tabs-nav button[aria-selected="true"]{ color:var(--white); background:rgba(120,125,223,.2); border-color:rgba(171,176,255,.2); }
.tabs-nav button[aria-selected="true"]::after{ transform:scale(1); }
.tab-number{ color:#8D98D5; font:700 10px/1 var(--font-body); letter-spacing:.06em; }
.tabs-nav button[aria-selected="true"] .tab-number{ color:#F7C66E; }
.control-rail-foot{ display:flex; align-items:center; gap:7px; margin:28px 10px 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); color:#98A5DD; }
.control-rail-foot span{ width:7px; height:7px; border-radius:50%; background:#6ED7B0; box-shadow:0 0 0 4px rgba(110,215,176,.12); }
.control-rail-foot small{ font-size:11px; }

.tabs-body{ padding:32px; min-height:266px; background:linear-gradient(145deg,#fff 0%,#F6F7FD 100%); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fadeIn .32s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.panel-heading{ display:flex; align-items:center; gap:12px; margin-bottom:27px; }
.panel-heading > div{ display:grid; gap:2px; }
.panel-heading span:not(.panel-orbit){ color:var(--brand); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.panel-heading strong{ color:var(--navy-950); font-family:var(--font-display); font-size:21px; }
.panel-orbit{ position:relative; width:35px; height:35px; border-radius:50%; border:1px solid #C9CCF0; background:#EFF0FC; }
.panel-orbit::before,.panel-orbit::after{ content:''; position:absolute; border-radius:50%; background:var(--brand); }
.panel-orbit::before{ width:8px; height:8px; left:7px; top:13px; }.panel-orbit::after{ width:5px; height:5px; right:7px; top:8px; background:var(--amber); }

.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  --chip-delay:0ms;
  display:inline-flex; align-items:center; min-height:42px;
  font-size:14px; font-weight:600;
  padding:9px 14px; border-radius:12px;
  background:var(--white); color:var(--ink);
  border:1px solid #E1E4F0;
  box-shadow:0 5px 13px -12px rgba(16,22,43,.45);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tabs-panel.is-animated .tab-panel.is-active .chip{ animation:chipArrival .42s cubic-bezier(.2,.8,.24,1) both; animation-delay:var(--chip-delay); }

@keyframes chipArrival{ from{ opacity:0; transform:translateY(13px) scale(.94); } to{ opacity:1; transform:none; } }
.chip:hover{ transform:translateY(-2px); background:var(--brand-tint); border-color:#CBCBF0; box-shadow:0 10px 18px -14px rgba(45,46,135,.52); }
@media (max-width:700px){
  .tabs-panel{ grid-template-columns:1fr; }
  .control-rail{ padding:18px; }
  .control-rail-mark,.control-rail-label,.control-rail-foot{ display:none; }
  .tabs-nav{ flex-direction:row; overflow-x:auto; gap:8px; }
  .tabs-nav button{ width:auto; flex:0 0 auto; padding:11px 13px; }
  .tabs-body{ min-height:0; padding:24px; }
}

/* Simple, user-first Back Office workspace. */
.tabs-panel{
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-card);
}
.tabs-nav{
  display:flex;
  flex-direction:row;
  gap:4px;
  padding:10px 12px 0;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  background:#FCFCFF;
}
.tabs-nav button{
  width:auto;
  flex:0 0 auto;
  padding:14px 16px;
  border:0;
  border-radius:9px 9px 0 0;
  background:transparent;
  color:var(--ink-soft);
  font-size:15px;
  transform:none;
}
.tabs-nav button::after{ left:16px; right:16px; bottom:0; width:auto; height:3px; border-radius:3px 3px 0 0; background:var(--brand); box-shadow:none; transform:scaleX(0); }
.tabs-nav button:hover{ color:var(--brand-dark); background:var(--brand-tint); transform:none; }
.tabs-nav button[aria-selected="true"]{ color:var(--brand-dark); background:transparent; border:0; }
.tabs-nav button[aria-selected="true"]::after{ transform:scaleX(1); }
.tabs-body{ min-height:0; padding:28px 30px 30px; background:var(--white); }
.panel-heading{ margin-bottom:20px; }
.panel-heading strong{ font-size:19px; }
.panel-orbit{ width:32px; height:32px; }
.chip-grid{ gap:9px; }
.chip{ min-height:38px; padding:8px 13px; border-radius:9px; font-size:14px; font-weight:500; background:var(--paper); box-shadow:none; }
.chip:hover{ transform:translateY(-1px); box-shadow:none; }
@media (max-width:700px){
  .tabs-panel{ display:block; }
  .tabs-nav{ padding:8px 10px 0; }
  .tabs-nav button{ padding:12px 13px; font-size:14px; }
  .tabs-body{ padding:23px 20px; }
}

/* Back-office categories shown together on larger screens. */
.tabs-panel{ overflow:visible; background:transparent; border:0; box-shadow:none; }
.tabs-body{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:0; background:transparent; }
.tab-panel,.tab-panel.is-active{ display:block; min-height:255px; padding:26px 24px 24px; border:1px solid #E1E5F3; border-radius:18px; background:linear-gradient(145deg,#FFFFFF,#F6F8FF); box-shadow:0 14px 30px -26px rgba(21,30,80,.48); animation:none; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tab-panel:hover{ transform:translateY(-5px); border-color:var(--brand-light); box-shadow:0 20px 36px -24px rgba(45,46,135,.38); }
.tab-panel .panel-heading{ min-height:52px; margin-bottom:22px; }
.tab-panel .chip-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.tab-panel .chip{ justify-content:center; min-height:40px; padding:8px 10px; font-size:13px; color:#27324F; border-color:#E3E7F4; background:#FFF; transition:transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }.tab-panel .chip::before{ display:none; }
.tab-panel .chip:hover{ color:#FFF; border-color:var(--brand); background:var(--brand); box-shadow:0 9px 18px -12px rgba(45,46,135,.85); transform:translateY(-3px) scale(1.02); }
@media (max-width:900px){ .tabs-body{ grid-template-columns:1fr; } }

/* ---------- Why us cards ---------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.why-card{
  padding:28px 24px;
  border-radius:var(--radius-lg);
  background:var(--white);
  border:1px solid var(--line);
}
.why-card .num{
  font-family:var(--font-display);
  font-size:14px;
  color:var(--brand-dark);
  background:var(--brand-tint);
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.why-card h3{ font-size:18px; }
.why-card p{ font-size:14.5px; margin:0; }

@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact-hub{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow-card);
}
.contact-details{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  padding:34px 32px;
}
.contact-detail{ display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; }
.contact-detail .ico{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--brand-tint);
  color:var(--brand-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-detail h4{ font-size:16px; margin:2px 0 5px; }
.contact-detail p{ font-size:14px; margin:0; }
.phone-placeholder{ min-height:20px; }
.contact-detail a{ color:var(--brand); font-weight:600; }
.contact-detail a:hover{ text-decoration:underline; }
.contact-portal-link{ align-self:flex-start; margin:2px 0 0 64px; }
.contact-map{ min-height:430px; }
.contact-map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:900px){
  .contact-hub{ grid-template-columns:minmax(290px,.9fr) minmax(0,1.1fr); }
  .contact-details{ padding:28px 24px; }
}
@media (max-width:700px){
  .contact-hub{ grid-template-columns:1fr; max-width:520px; }
  .contact-map{ min-height:320px; }
  .contact-portal-link{ margin-left:64px; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-950);
  color:#B9C2E0;
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(2,1fr);
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand{ color:var(--white); margin-bottom:14px; }
.footer-brand p{ color:#9AA5CA; font-size:14.5px; max-width:34ch; }
.footer-col h5{ color:var(--white); font-size:14px; font-family:var(--font-display); margin-bottom:16px; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ font-size:14.5px; color:#B9C2E0; transition:color .15s ease; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  padding-top:26px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:13.5px; color:#8792B8;
}
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center;
  color:#B9C2E0;
  transition:border-color .15s ease, color .15s ease;
}
.social-row a:hover{ border-color:var(--brand); color:var(--brand); }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;
  right:24px; bottom:24px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--navy-950);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  border:none;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:90;
  box-shadow:var(--shadow-raised);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

.whatsapp-float{ position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:91; width:auto; height:54px; padding:0 16px; gap:10px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#128C4A; color:#fff; font:600 14px/1.2 var(--font-body); white-space:nowrap; text-decoration:none; box-shadow:0 5px 18px rgba(0,0,0,.18); transition:transform .2s ease, background-color .2s ease; }
.whatsapp-float svg{ display:block; width:28px; height:28px; flex-shrink:0; }
.whatsapp-float:hover{ color:#fff; background:#0D703B; transform:translateY(-2px); }
.whatsapp-float:focus-visible{ outline:3px solid var(--brand); outline-offset:4px; }
.to-top{ right:29px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:600px){ .whatsapp-float{ right:18px; height:50px; padding:0 14px; gap:8px; font-size:13px; }.to-top{ right:21px; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion:reduce){ .whatsapp-float{ transition:none; }.whatsapp-float:hover{ transform:none; } }

/* Utility */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Supplier information from the original ABC Solutions products page */
.supplier-showcase { margin-top: 34px; }
.supplier-intro { max-width: 760px; margin-bottom: 18px; }
.supplier-intro h3 { font-size: clamp(25px, 3vw, 34px); }
.supplier-intro p { font-size: 16px; }
@media (min-width:901px){
  .supplier-intro{ max-width:none; }
  .supplier-intro h3{ white-space:nowrap; }
}
.supplier-group { margin-top: 34px; padding: 28px; border: 1px solid var(--line, #e5e7eb); border-radius: 22px; background: var(--surface, #fff); }
.supplier-group-head { margin-bottom: 22px; }
.supplier-group-head h3 { margin: 8px 0 0; font-size: 24px; }
.supplier-grid {
  display:flex;
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 98%,transparent 100%);
}
.supplier-grid::-webkit-scrollbar { display:none; }
.supplier-grid:active { cursor:grabbing; }
.supplier-grid img { flex:0 0 158px; width:158px; height:92px; object-fit:contain; padding:12px 16px; border:1px solid var(--line, #e5e7eb); border-radius:14px; background:#fff; display:block; }
.tabs-nav button { cursor: pointer; }
.tabs-nav button:focus-visible { outline: 3px solid rgba(20, 184, 166, .35); outline-offset: 2px; }
@media (max-width: 700px) { .supplier-group { padding:18px; } .supplier-grid img { flex-basis:142px; width:142px; height:78px; } }
@media (prefers-reduced-motion:reduce) { .supplier-grid { scroll-snap-type:x mandatory; } .supplier-grid img { scroll-snap-align:start; } }

/* ---------- Policy page ---------- */
.policy-page{ background:var(--paper); }
.policy-header{ position:static; background:var(--white); border-bottom:1px solid var(--line); }
.policy-header .container{ min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.policy-hero{ padding:72px 0 48px; background:var(--navy-950); }
.policy-hero h1{ color:var(--white); font-size:clamp(34px,5vw,54px); }
.policy-hero p{ color:#C7CEE6; font-size:17px; }
.policy-content{ padding:64px 0 96px; }
.policy-layout{ display:grid; gap:24px; max-width:900px; }
.policy-card{ padding:32px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-card); }
.policy-card h2{ font-size:25px; }
.policy-card p,.policy-card li{ color:var(--ink-soft); }
.policy-card ul{ list-style:disc; padding-left:22px; display:grid; gap:10px; }
.policy-card a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px){ .policy-card{ padding:22px; } }