/* =========================================================
   PT. Cayo Yessa Sinergi — Main Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Color tokens — Green theme */
  --navy-950:#0A3D24;
  --navy-800:#146C43;
  --navy-700:#1D8753;
  --coral-600:#33B864;
  --coral-500:#4DC97A;
  --coral-100:#E3F6EA;
  --green-cool:#33B864;
  --green-cool-dark:#1F9552;
  --green-cool-light:#5FCB8A;
  --bg:#F5FAF7;
  --surface:#FFFFFF;
  --text:#15241C;
  --text-muted:#5B6E62;
  --border:#DCEAE1;

  /* Type */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* Layout */
  --max-width:1180px;
  --radius:10px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(51,184,100,.06) 0%, rgba(51,184,100,0) 55%),
    radial-gradient(ellipse 60% 50% at 0% 15%, rgba(20,108,67,.08) 0%, rgba(20,108,67,0) 55%),
    linear-gradient(180deg, #F3F5FA 0%, #E9EDF4 45%, #E4E9F2 100%);
  background-attachment:fixed;
  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(--font-display);
  color:var(--navy-800);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

h1{ font-size:clamp(2.4rem, 4.5vw, 3.6rem); font-weight:700; }
h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); font-weight:700; }
h3{ font-size:1.25rem; font-weight:600; }

p{ margin:0 0 1em; color:var(--text-muted); }

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

/* -------- Eyebrow / labels -------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--coral-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:20px; height:1px;
  background:var(--coral-600);
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--coral-500) 0%, var(--coral-600) 55%, var(--green-cool-dark) 100%);
  background-size:160% 160%;
  background-position:0% 0%;
  color:#fff;
  box-shadow:0 4px 14px rgba(31,149,82,.28);
  transition:transform .15s ease, box-shadow .15s ease, background-position .4s ease;
}
.btn-primary:hover{ background-position:100% 100%; transform:translateY(-1px); box-shadow:0 8px 20px rgba(31,149,82,.36); }

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:inherit;
}
.btn-outline:hover{ border-color:currentColor; transform:translateY(-1px); }

.btn-dark{
  background:var(--navy-800);
  color:#fff;
}
.btn-dark:hover{ background:var(--navy-700); transform:translateY(-1px); }

/* -------- Header / Nav -------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(10,61,36,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
}
.nav-logo{
  display:flex;
  align-items:center;
}
.logo-img{ height:78px; width:auto; }
.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-size:.92rem;
  font-weight:500;
  color:var(--navy-800);
  position:relative;
  padding:4px 0;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  height:2px; width:0;
  background:var(--coral-600);
  transition:width .2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--coral-600); font-weight:700; }

.nav-cta{ display:flex; align-items:center; gap:18px; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:24px; height:2px;
  background:var(--navy-800);
  display:block;
}

/* -------- Hero -------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:90px 0 70px;
  background:radial-gradient(ellipse 80% 60% at 15% 0%, rgba(20,108,67,.06) 0%, rgba(20,108,67,0) 60%),
             radial-gradient(ellipse 60% 50% at 100% 20%, rgba(51,184,100,.07) 0%, rgba(51,184,100,0) 65%);
}
.hero .container{ position:relative; z-index:2; }
.tech-network-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.9;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.hero-copy p.lead{
  font-size:1.1rem;
  max-width:46ch;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:28px;
}
.hero-stats{
  display:flex;
  gap:36px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.hero-stats .stat-num{
  font-family:var(--font-mono);
  font-size:1.6rem;
  font-weight:500;
  color:var(--navy-800);
}
.hero-stats .stat-label{
  font-size:.8rem;
  color:var(--text-muted);
}

/* -------- Hero graphic: floating tech badges -------- */
.hero-graphic{ position:relative; }
.tech-float-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.8rem;
  color:var(--navy-800);
  box-shadow:0 10px 24px rgba(16,23,41,.12);
  opacity:0;
  animation:floatBadgeIn .6s ease forwards, floatBadgeBob 4s ease-in-out infinite;
}
.tech-float-badge .dot-pulse{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--coral-600);
  flex:none;
  position:relative;
}
.tech-float-badge .dot-pulse::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--coral-600);
  opacity:.6;
  animation:dotPulseRing 1.8s ease-out infinite;
}
.tech-float-badge--1{ top:8%; left:-8%; animation-delay:.2s, .2s; }
.tech-float-badge--2{ bottom:10%; right:-6%; animation-delay:.5s, .9s; }

@keyframes floatBadgeIn{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes floatBadgeBob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes dotPulseRing{
  0%{ transform:scale(.6); opacity:.7; }
  100%{ transform:scale(1.8); opacity:0; }
}
@media (max-width: 640px){
  .tech-float-badge{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .tech-float-badge{ animation:floatBadgeIn .6s ease forwards; }
}

/* Signature: node/connection graphic */
.node-graphic{ width:100%; height:auto; }
.node-graphic .line{
  fill:none;
  stroke:var(--coral-600);
  stroke-width:1.5;
  stroke-dasharray:6 6;
}
.node-graphic .node{ fill:var(--navy-800); }
.node-graphic .node.accent{ fill:var(--coral-600); }

/* -------- Section shell -------- */
.section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:80px 0;
}
.section > .container{ position:relative; z-index:2; }
.section::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(20,108,67,.09) 1.3px, transparent 1.3px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 85% 90% at 50% 50%, #000 35%, transparent 92%);
  mask-image:radial-gradient(ellipse 85% 90% at 50% 50%, #000 35%, transparent 92%);
  animation:dotsDrift 26s linear infinite;
}
.section::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 560px 440px at 92% -8%, rgba(51,184,100,.13) 0%, rgba(51,184,100,0) 62%),
    radial-gradient(ellipse 480px 400px at -8% 108%, rgba(20,108,67,.11) 0%, rgba(20,108,67,0) 62%);
}
.section-tight{ padding:56px 0; }
.section-alt{
  background:linear-gradient(180deg, #F7FBF8 0%, #ECF3EE 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-dark{ background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, #1D5A38 100%); color:#fff; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark p{ color:rgba(255,255,255,.72); }
.section-dark::before{ background-image:radial-gradient(rgba(255,255,255,.09) 1.3px, transparent 1.3px); }
.section-dark::after{
  background:
    radial-gradient(ellipse 560px 440px at 92% -8%, rgba(93,201,138,.22) 0%, rgba(93,201,138,0) 62%),
    radial-gradient(ellipse 480px 400px at -8% 108%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 62%);
}
@media (prefers-reduced-motion: reduce){
  .section::before{ animation:none; }
}

.section-head{
  max-width:640px;
  margin-bottom:48px;
}

/* -------- Cards / grid -------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

.card{
  position:relative;
  background:linear-gradient(160deg, #FFFFFF 0%, #FCFCFD 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 1px 3px rgba(16,23,41,.04);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--coral-600), var(--navy-700));
  transform:scaleX(0);
  transform-origin:0% 50%;
  transition:transform .3s ease;
}
.card:hover{ border-color:var(--coral-600); transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,23,41,.08); }
.card:hover::before{ transform:scaleX(1); }

.card .card-index{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--coral-600);
  margin-bottom:14px;
  display:block;
}

.icon-badge{
  width:44px; height:44px;
  border-radius:8px;
  background:var(--coral-100);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  color:var(--coral-600);
}
.icon-badge svg{ width:22px; height:22px; }

.icon-badge-circle{
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--coral-600) 0%, #146C43 100%);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  color:#fff;
  box-shadow:0 8px 20px rgba(20,108,67,.22);
  flex-shrink:0;
}
.icon-badge-circle svg{ width:26px; height:26px; }

.vm-card{ display:flex; flex-direction:column; }
.vm-card .card-index{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  color:var(--coral-600);
}
.vm-card h3{ margin-bottom:10px; }
.vm-card p{ margin-bottom:0; }

/* -------- Brand chips (product categories) -------- */
.brand-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.brand-chip{
  font-family:var(--font-mono);
  font-size:.78rem;
  padding:6px 12px;
  border-radius:100px;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
}

/* -------- Brand & partner marquee (Solutions page) -------- */
.brand-marquee-wrap{
  overflow:hidden;
  position:relative;
  width:100%;
  margin-top:28px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-marquee-wrap + .brand-marquee-wrap{ margin-top:8px; }
.brand-marquee-track{
  display:flex;
  align-items:center;
  gap:80px;
  width:max-content;
  padding:24px 32px;
  animation:brandMarqueeLeft 90s linear infinite;
  will-change:transform;
}
.brand-marquee-track.reverse{
  animation-name:brandMarqueeRight;
  animation-duration:80s;
}
.brand-marquee-wrap:hover .brand-marquee-track{ animation-play-state:paused; }
.brand-marquee-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
}
.brand-marquee-logo img{
  height:100%;
  width:auto;
  max-width:190px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.55;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.brand-marquee-logo img:hover{
  filter:grayscale(0%);
  opacity:1;
  transform:translateY(-2px) scale(1.06);
}
.brand-marquee-logo .logo-fallback-text{
  display:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  color:var(--text-muted);
  white-space:nowrap;
}

@keyframes brandMarqueeLeft{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes brandMarqueeRight{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .brand-marquee-track{ animation:none; }
}

/* -------- Client logos -------- */
.client-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.client-strip .client-item{
  flex:1 1 220px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  transition:border-color .2s ease, transform .2s ease;
}
.client-strip .client-item:hover{ border-color:var(--coral-600); transform:translateY(-3px); }
.client-strip .client-item img{
  height:44px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;
  transition:filter .2s ease, opacity .2s ease;
}
.client-strip .client-item:hover img{
  filter:grayscale(0%);
  opacity:1;
}
.client-strip .client-item span{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  color:var(--text-muted);
}

.client-strip .client-item-text{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 16px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.88rem;
  line-height:1.3;
  color:var(--navy-800);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  transition:border-color .2s ease, transform .2s ease;
}
.client-strip .client-item-text:hover{ border-color:var(--coral-600); transform:translateY(-3px); }

/* Client marquee variant (auto-scrolling rows on homepage) */
.client-marquee-track{ gap:16px; padding:4px 4px 20px; }
.client-marquee-track .client-item-text{
  flex:0 0 auto;
  white-space:nowrap;
  padding:18px 24px;
  min-height:auto;
}

/* -------- Partner marketplace strip -------- */
.partner-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:32px;
}
.partner-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.partner-item:hover{
  border-color:var(--coral-600);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(10,61,36,.08);
}
.partner-item img{
  height:44px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

/* -------- CTA band -------- */
.cta-band{
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 60%, #3A2A4A 100%);
  border-radius:16px;
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:'';
  position:absolute;
  right:-60px; top:-60px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(51,184,100,.35) 0%, rgba(51,184,100,0) 70%);
  pointer-events:none;
}
.cta-band h2{ color:#fff; margin-bottom:8px; }
.cta-band p{ color:rgba(255,255,255,.72); margin:0; }

/* -------- Divider with nodes (signature motif) -------- */
.node-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:64px 0;
  color:var(--border);
}
.node-divider .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--coral-600);
  flex:none;
}
.node-divider .line{
  flex:1;
  height:1px;
  background:var(--border);
}

/* -------- Forms -------- */
.form-field{ margin-bottom:20px; }
.form-field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--navy-800);
  margin-bottom:6px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:var(--font-body);
  font-size:.95rem;
  background:var(--surface);
  color:var(--text);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:2px solid var(--coral-600);
  outline-offset:1px;
  border-color:var(--coral-600);
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-note{ font-size:.8rem; color:var(--text-muted); margin-top:16px; }

/* -------- Footer -------- */
.site-footer{
  background:var(--navy-950);
  color:rgba(255,255,255,.7);
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{
  color:#fff;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:var(--font-mono);
  font-weight:500;
  margin-bottom:18px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:10px; font-size:.92rem; }
.footer-grid a:hover{ color:#fff; }
.footer-logo{
  display:flex; align-items:center;
  margin-bottom:14px;
  background:#fff;
  padding:10px 16px;
  border-radius:8px;
  width:fit-content;
}
.footer-logo-img{ height:44px; width:auto; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  font-size:.82rem;
}

/* -------- Utility -------- */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:100px;
  background:var(--coral-100);
  color:var(--coral-600);
  font-size:.75rem;
  font-weight:600;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:16px;
}

/* Page header (for inner pages) */
.page-header{
  position:relative;
  overflow:hidden;
  padding:76px 0 58px;
  background:linear-gradient(180deg, #EAF7EF 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--border);
}
.page-header h1{ color:var(--navy-800); }
.page-header p{ color:var(--text-muted); }
.page-header .eyebrow{ color:var(--coral-600); }
.page-header .eyebrow::before{ background:var(--coral-600); }
.page-header .breadcrumb{ color:var(--text-muted); }
.page-header .breadcrumb a{ color:var(--coral-600); font-weight:600; }
.page-header .container{ position:relative; z-index:2; }
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--text-muted);
  margin-bottom:16px;
}
.breadcrumb a{ color:var(--coral-600); }

/* -------- Page header decoration: drifting mesh + dot grid + floating badges -------- */
.header-mesh{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.header-mesh::before,
.header-mesh::after{
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  animation:meshDrift 18s ease-in-out infinite;
}
.header-mesh::before{
  top:-140px; left:8%;
  background:radial-gradient(circle, var(--accent-a,var(--coral-600)) 0%, rgba(51,184,100,0) 70%);
}
.header-mesh::after{
  bottom:-160px; right:6%;
  width:360px; height:360px;
  background:radial-gradient(circle, var(--accent-b,var(--navy-700)) 0%, rgba(20,108,67,0) 70%);
  animation-delay:2.2s;
  animation-direction:reverse;
}
.header-dots{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(20,108,67,.16) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 65% 80% at 50% 0%, #000 0%, transparent 75%);
  animation:dotsDrift 22s linear infinite;
}
@keyframes meshDrift{
  0%, 100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(24px,-18px) scale(1.08); }
  66%{ transform:translate(-16px,14px) scale(.96); }
}
@keyframes dotsDrift{
  from{ background-position:0 0; }
  to{ background-position:52px 26px; }
}

/* Per-page accent tint (keeps brand green dominant, adds a whisper of a second hue) */
.page-header--about{ --accent-a:#D9A94D; --accent-b:var(--navy-700); }
.page-header--services{ --accent-a:#3E7BFA; --accent-b:var(--coral-600); }
.page-header--products{ --accent-a:#22B8CF; --accent-b:var(--navy-700); }
.page-header--careers{ --accent-a:#8B5CF6; --accent-b:var(--coral-600); }
.page-header--contact{ --accent-a:var(--coral-600); --accent-b:#3E7BFA; }

/* -------- Animated canvas background for inner-page headers (About / Why Us / Solutions / Careers) -------- */
.page-header--about,
.page-header--services,
.page-header--products,
.page-header--careers{
  padding-bottom:132px;
}
.page-header-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
}
.header-people-illustration{
  position:absolute;
  right:0;
  bottom:0;
  width:min(560px, 60%);
  height:62%;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}
@media (max-width: 900px){
  .header-people-illustration{ width:78%; height:46%; opacity:.7; }
}
@media (max-width: 640px){
  .header-people-illustration{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .page-header-canvas{ display:none; }
}
@media (max-width: 640px){
  .page-header--about,
  .page-header--services,
  .page-header--products,
  .page-header--careers{ padding-bottom:90px; }
}

.header-badges{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.header-float-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  border:1px solid var(--border);
  border-radius:100px;
  padding:9px 16px 9px 12px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.78rem;
  color:var(--navy-800);
  box-shadow:0 10px 22px rgba(16,23,41,.1);
  opacity:0;
  animation:floatBadgeIn .6s ease forwards, floatBadgeBob 5s ease-in-out infinite;
}
.header-float-badge svg{ width:15px; height:15px; flex:none; color:var(--accent-a,var(--coral-600)); }
.header-float-badge--1{ top:6%; right:9%; animation-delay:.15s, .8s; }
.header-float-badge--2{ bottom:12%; right:22%; animation-delay:.4s, 1.4s; }
.header-float-badge--3{ top:14%; left:4%; animation-delay:.6s, .3s; }
.header-float-badge--4{ bottom:8%; left:8%; animation-delay:.75s, 1.1s; }
@media (max-width: 900px){
  .header-float-badge{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .header-mesh::before, .header-mesh::after, .header-dots{ animation:none; }
  .header-float-badge{ animation:floatBadgeIn .6s ease forwards; }
}

/* -------- Entrance animations -------- */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-copy{ animation:fadeInUp .7s ease both; }
.hero-graphic{ animation:fadeInUp .8s ease .15s both; }
.page-header .breadcrumb,
.page-header .eyebrow,
.page-header h1,
.page-header p{ animation:fadeInUp .6s ease both; }
.page-header .eyebrow{ animation-delay:.05s; }
.page-header h1{ animation-delay:.1s; }
.page-header p{ animation-delay:.18s; }

/* -------- WhatsApp floating button -------- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  z-index:200;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.wa-float svg{ width:30px; height:30px; }

/* -------- Scroll hint (mobile-only, for horizontally-scrollable diagrams) -------- */
.scroll-hint{
  display:none;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--coral-600);
  text-align:center;
  margin:0 0 12px;
}
@media (max-width: 820px){
  .scroll-hint{ display:block; }
}