:root{
  --paper:#F4F6F1;
  --ink:#10231A;
  --pine:#17342A;
  --moss:#2F6B3F;
  --lime:#93C94A;
  --slate:#5D6B63;
  --rule:#D9DFD6;

  --font-display:"Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --font-body:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-13:13px;
  --fs-15:15px;
  --fs-17:17px;
  --fs-21:21px;
  --fs-28:28px;
  --fs-40:40px;
  --fs-56:clamp(34px, 6vw, 56px);
  --fs-80:clamp(38px, 8vw, 80px);

  --gutter:16px;
  --maxw:1280px;
  --section-pad:96px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

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

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.01em;
  margin:0 0 0.4em;
  color:var(--ink);
}

h1{font-size:var(--fs-80); letter-spacing:-0.02em; font-weight:800;}
h2{font-size:var(--fs-40); font-weight:700;}
h3{font-size:var(--fs-21); font-weight:600; letter-spacing:-0.005em;}

p{margin:0 0 1em; max-width:68ch; color:inherit}

a{color:var(--moss); text-decoration-thickness:1px; text-underline-offset:2px;}
a:hover{color:var(--ink)}

img{max-width:100%; display:block}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--pine);
  color:var(--paper);
  padding:10px 16px;
  z-index:200;
  border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

:focus-visible{
  outline:2px solid var(--moss);
  outline-offset:2px;
  border-radius:2px;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(244,246,241,0.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-15);
}
.brand-mark{flex:none}
.brand-word{white-space:nowrap}
.site-nav{
  display:flex;
  gap:20px;
  margin-left:auto;
  font-size:var(--fs-15);
}
.site-nav a{color:var(--ink); text-decoration:none}
.site-nav a:hover{color:var(--moss)}

@media (max-width:720px){
  .brand-word{display:none}
  .site-nav{display:none}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 22px;
  border-radius:6px;
  font-size:var(--fs-15);
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
}
.btn-primary:hover{background:var(--pine); color:var(--paper)}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-small{padding:9px 16px; font-size:var(--fs-13)}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:64px;
  padding-bottom:64px;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  min-height:560px;
  gap:24px;
}
@media (min-width:900px){
  .hero-inner{min-height:min(680px, 80vh)}
}
.hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
  max-width:640px;
  padding-top:32px;
  padding-bottom:32px;
}
.hero-copy .lead{
  font-size:var(--fs-21);
  color:var(--slate);
  max-width:44ch;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:28px 0 20px;
}
.hero-note{
  font-size:var(--fs-13);
  color:var(--slate);
  margin:0;
}
.hero-scene{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.hero-scene::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg, var(--paper) 0%, rgba(244,246,241,0.55) 30%, rgba(244,246,241,0) 60%),
    linear-gradient(to top, var(--paper) 0%, rgba(244,246,241,0) 100%);
  background-repeat:no-repeat, no-repeat;
  background-position:left top, left bottom;
  background-size:100% 100%, 100% 120px;
}
#scene-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s ease;
}
#scene-canvas.is-ready{opacity:1}
.scene-fallback{
  position:absolute;
  inset:0;
  display:none;
  background:
    radial-gradient(circle at 78% 30%, rgba(147,201,74,0.35), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(23,52,42,0.25), transparent 55%);
}
.scene-fallback::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("assets/logo-icon-green.svg") no-repeat center / 42% auto;
  opacity:0.18;
}
.hero-scene.no-webgl .scene-fallback{display:block}
.hero-scene.no-webgl #scene-canvas{display:none}

@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,6fr) minmax(0,6fr);}
  .hero-scene{position:absolute; left:38%; right:0;}
  .hero-scene::after{
    background-image:
      linear-gradient(90deg, var(--paper) 0%, rgba(244,246,241,0.7) 18%, rgba(244,246,241,0) 42%),
      linear-gradient(to top, var(--paper) 0%, rgba(244,246,241,0) 100%);
    background-repeat:no-repeat, no-repeat;
    background-position:left top, left bottom;
    background-size:100% 100%, 100% 120px;
  }
}

/* Trusted / logos */
.trusted{padding:48px 0}
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-13);
  font-weight:600;
  text-transform:none;
  color:var(--slate);
  margin-bottom:24px;
}
.logo-row{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:40px 48px;
}
.logo-row img{
  display:block;
  width:auto;
  filter:grayscale(1);
  opacity:0.7;
  transition:filter .2s ease, opacity .2s ease;
}
.logo-row li:hover img,
.logo-row li:focus-within img{
  filter:none;
  opacity:1;
}
/* Each source PNG has different internal padding; set per-logo heights so
   the marks read as optically equal instead of literally equal pixel-height. */
.logo-cifor img{height:52px}
.logo-glf img{height:52px}
.logo-envato img{height:30px}
.logo-blibli img{height:30px}
@media (max-width:560px){
  .logo-cifor img{height:42px}
  .logo-glf img{height:42px}
  .logo-envato img{height:24px}
  .logo-blibli img{height:24px}
}

/* Sections generic */
section{padding:var(--section-pad) 0}
@media (max-width:720px){
  section{padding:64px 0}
}

/* Services */
.service-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.service-row{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:32px 0;
  border-bottom:1px solid var(--rule);
}
.service-row h3{margin:0}
.service-row p{color:var(--slate); margin:0}
@media (min-width:800px){
  .service-row{grid-template-columns:1fr 1fr; gap:40px; align-items:baseline}
}

/* Process (dark band) */
.process{
  background:var(--pine);
  color:var(--paper);
}
.process h2{color:var(--paper)}
.process-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:32px;
}
.process-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
}
.process-num{
  font-family:var(--font-display);
  font-size:var(--fs-28);
  font-weight:700;
  color:var(--lime);
  line-height:1;
}
.process-list h3{color:var(--paper); margin-bottom:6px; min-height:2.2em; line-height:1.1}
.process-list p{color:#C7D3CB; margin:0}
@media (min-width:800px){
  .process-list{grid-template-columns:repeat(5,1fr); gap:24px}
  .process-list li{grid-template-columns:1fr; gap:12px}
}

/* Work */
.work-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.work-row{
  padding:32px 0;
  border-bottom:1px solid var(--rule);
}
.work-row h3{margin-bottom:8px}
.work-row p{color:var(--slate); margin:0; max-width:60ch}

/* Kits strip */
.kits-strip{
  background:var(--lime);
}
.kits-strip-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
}
.kits-strip h2, .kits-strip p{color:var(--ink)}
.kits-strip p{max-width:56ch}
.kits-strip .btn-primary{background:var(--ink); color:var(--paper)}
.kits-strip .btn-primary:hover{background:var(--pine)}
@media (min-width:800px){
  .kits-strip-inner{flex-direction:row; align-items:center; justify-content:space-between; gap:40px}
}

/* FAQ */
.faq-list{
  border-top:1px solid var(--rule);
}
details{
  border-bottom:1px solid var(--rule);
  padding:20px 0;
}
summary{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-21);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
summary::-webkit-details-marker{display:none}
.faq-icon{
  flex:none;
  width:20px;
  height:20px;
  position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;
  background:var(--ink);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.faq-icon::before{width:14px; height:2px}
.faq-icon::after{width:2px; height:14px; transition:opacity .15s ease}
details[open] .faq-icon::after{opacity:0}
details p{margin-top:14px; color:var(--slate)}

/* Footer */
.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding:80px 0 32px;
}
.footer-contact h2{
  color:var(--paper);
  font-size:var(--fs-56);
  max-width:14ch;
  margin-bottom:24px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  font-size:var(--fs-21);
  margin-bottom:64px;
}
.footer-links a{color:var(--lime)}
.footer-links a:hover{color:var(--paper)}
.footer-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:24px;
  border-top:1px solid rgba(244,246,241,0.15);
  font-size:var(--fs-13);
  color:#A7B3AC;
}
.footer-meta a{color:#A7B3AC}
.footer-meta a:hover{color:var(--lime)}