/* =========================================================
   Tech Leafe — brand system
   Palette: Neon Tech Green + Hot Red
   green #00C853   green-deep #00A344   green-dark #007A33   red #FF1744
   Headline font: Poppins (bold geometric)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:            #FBFEFC;
  --bg-soft:       #EFF9F1;
  --bg-panel-soft: #F2FAF4;   /* off-white + green, header/footer */
  --bg-panel:      #E6F5EA;   /* off-white + green, panels/bands */
  --surface:       #FFFFFF;
  --ink:           #12241A;
  --ink-soft:      #55695C;
  --line:          #DCEEE1;

  --green:         #00C853;   /* neon tech green */
  --green-deep:    #00A344;   /* mid green */
  --green-dark:    #007A33;   /* deep green, used for dark bands/nav */
  --red:           #FF1744;   /* hot red */
  --red-dark:      #D4102F;   /* hover state, same hue */

  --radius:        14px;
  --font-headline: 'Poppins', sans-serif;
  --font-display:  'Poppins', sans-serif;
  --font-label:    'Poppins', sans-serif;   /* bold tags/eyebrows, replaces thin mono */
  --font-body:     'Inter', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{list-style:none;}
section{padding:88px 24px;}
.wrap{max-width:1140px; margin:0 auto;}
.section-soft{background:var(--bg-soft);}

.eyebrow{
  font-family:var(--font-label);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-deep);
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:''; width:7px; height:7px; background:var(--red); border-radius:50%; flex:none;}

h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; color:var(--ink);}
h1{font-family:var(--font-headline); font-weight:800; letter-spacing:-.02em;}
h2{font-size:clamp(26px,3.4vw,38px); line-height:1.18;}
h3{font-size:19px;}
.lede{color:var(--ink-soft); font-size:16.5px; max-width:640px;}
.lede strong{color:var(--ink); font-weight:600;}

/* ---------- buttons + signature arrow ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:14.5px; font-family:var(--font-body);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--green-dark); color:#fff; box-shadow:0 0 0 0 rgba(0,200,83,0);}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(0,200,83,.55);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green); color:var(--green-dark);}
.btn-outline-invert{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.btn-outline-invert:hover{border-color:#fff;}

/* the "unique arrow" — a growing vein-line that draws forward on hover,
   with a small idle nudge so it never sits perfectly still */
.arrow-cta{
  --w:26px;
  display:inline-flex; align-items:center; gap:8px;
  width:var(--w); height:14px; flex:none;
  vertical-align:middle;
}
.arrow-cta svg{width:100%; height:100%; overflow:visible;}
.arrow-cta .shaft{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:22; stroke-dashoffset:22;
  animation:arrow-idle 2.6s ease-in-out infinite;
}
.arrow-cta .head{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transform-origin:center;
  animation:head-idle 2.6s ease-in-out infinite;
}
@keyframes arrow-idle{
  0%,100%{stroke-dashoffset:6;}
  50%{stroke-dashoffset:0;}
}
@keyframes head-idle{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(3px);}
}
.btn:hover .shaft{stroke-dashoffset:0; animation:none;}
.btn:hover .head{transform:translateX(4px); animation:none;}

.go{
  font-size:13px; font-weight:600; color:var(--green-dark);
  display:inline-flex; align-items:center; gap:8px;
}
.go:hover{color:var(--green);}

/* ---------- intro splash (homepage only) — a normal in-flow section, ----------
   not a fixed overlay. Fills the viewport height and plays its animation
   automatically; the visitor scrolls past it into the real page using
   native browser scroll. No JS timers, no auto-dismiss, so there's no
   overlap/timing edge case possible. Hidden entirely on repeat visits via
   the .intro-seen class added by a synchronous script in <head>. ---------- */
#intro-splash{
  position:relative; height:100vh; overflow:hidden;
  background:linear-gradient(160deg, var(--green-dark) 0%, var(--green-deep) 55%, var(--green) 130%);
  display:flex; align-items:center; justify-content:center;
}
.intro-seen #intro-splash{display:none;}
#intro-splash .spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#fff; opacity:0;
  animation:spark-in .5s ease forwards var(--d,0s);
  box-shadow:0 0 8px 1px rgba(255,255,255,.7);
}
#intro-splash .spark.red{background:var(--red); box-shadow:0 0 8px 1px rgba(237,28,36,.6);}
@keyframes spark-in{
  0%{opacity:0; transform:scale(.4);}
  60%{opacity:1; transform:scale(1.2);}
  100%{opacity:.55; transform:scale(1);}
}
#intro-splash .mark-mesh{
  position:absolute; top:50%; left:50%; width:150px;
  transform:translate(-50%,-50%);
  opacity:1; pointer-events:none;
  animation:mesh-fade-out .4s ease forwards 1.6s;
}
#intro-splash .mark-mesh svg{width:100%; height:auto;}
@keyframes mesh-fade-out{to{opacity:0; transform:translate(-50%,-50%) scale(.8);}}
/* scoped duration overrides so the splash's leaf-mesh draws at a comfortable
   pace without affecting the same graphic used elsewhere on the site */
#intro-splash .mark-mesh .vein-main{animation-duration:1.3s;}
#intro-splash .mark-mesh .vein-branch{animation-duration:.5s;}
#intro-splash .mark-mesh .mesh-line{animation-duration:.4s;}
#intro-splash .mark-mesh .mesh-cube{animation-duration:.3s, 2.6s;}
#intro-splash .mark{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; transform:scale(.82);
  animation:mark-in .5s cubic-bezier(.22,1,.36,1) forwards 1.5s;
}
#intro-splash .mark::before{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), transparent 70%);
  filter:blur(6px); z-index:-1;
}
#intro-splash .mark img{height:84px; width:auto;}
#intro-splash .leaf-signature .vein-main,
#intro-splash .leaf-signature .vein-branch,
#intro-splash .leaf-signature .mesh-line{stroke:#fff;}
#intro-splash .leaf-signature .mesh-dot{fill:#fff;}
#intro-splash .leaf-signature .mesh-cube{stroke:#fff; fill:rgba(255,255,255,.18);}
#intro-splash .leaf-signature .mesh-cube.red{stroke:var(--red); fill:rgba(255,23,68,.22);}
#intro-splash .mark .tagline{
  font-family:var(--font-label); font-size:17px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; opacity:0; animation:tag-in .35s ease forwards 2.1s;
}
@keyframes mark-in{to{opacity:1; transform:scale(1);}}
@keyframes tag-in{to{opacity:1;}}
#intro-splash .scroll-hint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  opacity:0; animation:tag-in .4s ease forwards 2.6s, hint-bounce 1.8s ease-in-out 3s infinite;
}
@keyframes hint-bounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(8px);}
}
@media (prefers-reduced-motion: reduce){
  #intro-splash{display:none;}
}

/* ---------- homepage: static hero + informative strip + 3-pillar grid ---------- */
.home-hero{padding-top:70px; padding-bottom:8px; position:relative; overflow:hidden;}
#leaf-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block;}
.home-hero .wrap{position:relative; z-index:1;}
.home-hero-inner{max-width:960px;}
.home-hero h1{
  font-size:clamp(34px,5.4vw,58px); line-height:1.06; margin-bottom:24px; letter-spacing:-.02em;
  font-weight:900; color:var(--ink);
}
.home-hero h1 em{font-style:normal; color:var(--green-deep);}
.home-hero .lede{max-width:none; font-size:17px;}
.home-hero .badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.brand-kicker{
  font-family:var(--font-label); font-size:15px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px;
}
.brand-kicker .bk-a{color:var(--red-dark);}
.brand-kicker .bk-b{color:var(--green-dark);}
.tag-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-label); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.tag-pill i{width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;}
.tag-pill.red i{background:var(--red);}

.home-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px;}
@media (max-width:760px){.home-stats{grid-template-columns:repeat(2,1fr);}}
.home-stat{border-top:2px solid var(--green); padding-top:14px;}
.home-stat .n{font-family:var(--font-headline); font-size:30px; font-weight:800; color:var(--ink);}
.home-stat .l{font-size:13px; color:var(--ink-soft); margin-top:2px;}

.pillars{padding-top:20px; padding-bottom:88px;}
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
@media (max-width:860px){.pillar-grid{grid-template-columns:1fr;}}

/* ---------- page-title band (Expertise, and other inner pages) ---------- */
.page-title-band{
  background:var(--bg-panel); color:var(--ink); text-align:center;
  padding:40px 24px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-title-band h1{
  color:var(--ink); font-size:clamp(24px,3.2vw,32px); position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.page-title-band .chev{display:none;}
.page-title-band .band-texture{
  position:absolute; top:50%; right:-30px; transform:translateY(-50%);
  width:220px; opacity:.6; pointer-events:none;
}
.page-title-band .band-texture img{width:100%; height:auto;}

.expertise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:0;}
@media (max-width:860px){.expertise-grid{grid-template-columns:1fr;}}
.expertise-col h3{font-size:19px; margin-bottom:4px;}
.expertise-col .expertise-tag{
  font-family:var(--font-label); font-weight:700; font-size:11px; color:var(--red-dark); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:16px; display:block;
}
.expertise-col .expertise-view{
  font-size:13px; font-weight:600; color:var(--green-dark); display:inline-flex; align-items:center; gap:6px;
  margin-bottom:14px;
}
.expertise-col .expertise-view:hover{color:var(--green);}
.expertise-col ul{border-top:1px solid var(--line);}
.expertise-col li{border-bottom:1px solid var(--line);}
.expertise-col li a{
  display:block;
  padding:14px 2px; font-size:14.5px; color:var(--ink); transition:color .15s ease, padding-left .15s ease;
}
.expertise-col li a:hover{color:var(--green-dark); padding-left:6px;}
.expertise-col .expertise-view-spacer{height:29px; margin-bottom:14px;}

/* ---------- blog link list ---------- */
.blog-link-list{border-top:1px solid var(--line);}
.blog-link-list li{list-style:none; border-bottom:1px solid var(--line);}
.blog-link-list li a{display:block; padding:22px 4px; transition:padding-left .15s ease;}
.blog-link-list li a:hover{padding-left:8px;}
.blog-link-list .bl-meta{
  display:block; font-family:var(--font-mono); font-size:11px; color:var(--red-dark);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
.blog-link-list .bl-title{display:block; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); margin-bottom:6px;}
.blog-link-list li a:hover .bl-title{color:var(--green-dark);}
.blog-link-list .bl-excerpt{display:block; font-size:14px; color:var(--ink-soft);}

/* ---------- blog listing cards ---------- */
.blog-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin-bottom:18px;
}
.blog-card-meta{
  display:block; font-family:var(--font-mono); font-size:11px; color:var(--red-dark);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;
}
.blog-card h3{font-size:19px; margin-bottom:10px;}
.blog-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:16px;}
.blog-card .go{font-size:13px; font-weight:600; color:var(--green-dark); display:inline-flex; align-items:center; gap:8px;}

/* ---------- article page ---------- */
.article-meta{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-top:10px;}
.article-body h3{font-size:20px; margin-top:34px; margin-bottom:12px; color:var(--ink);}
.article-body p{font-size:15.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px;}
.article-body ul, .article-body ol{margin:0 0 18px 0; padding-left:22px;}
.article-body li{font-size:15px; color:var(--ink-soft); line-height:1.65; margin-bottom:8px;}
.article-body ul li::marker{color:var(--green);}
.article-body ol{counter-reset:none;}
.article-body b{color:var(--ink); font-weight:600;}
.article-cta{
  margin-top:32px; padding:22px 26px; background:var(--bg-soft); border-left:3px solid var(--red);
  border-radius:0 12px 12px 0; font-weight:600; color:var(--ink); font-size:15.5px;
}
@media (max-width:860px){.pillar-grid{grid-template-columns:1fr;}}
.pillar-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; height:100%;
}
.pillar-card:hover{border-color:var(--green); transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(16,141,69,.4);}
.pillar-card .pillar-index{font-family:var(--font-label); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--red-dark); margin-bottom:12px;}
.pillar-card h3{font-size:19px; margin-bottom:10px;}
.pillar-card p{color:var(--ink-soft); font-size:14px; margin-bottom:18px;}
.pillar-points{margin-bottom:20px;}
.pillar-points li{
  font-size:13.5px; color:var(--ink-soft); padding-left:20px; position:relative; margin-bottom:8px;
}
.pillar-points li::before{
  content:''; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.pillar-card .go{font-size:13px; font-weight:600; color:var(--green-dark); display:inline-flex; align-items:center; gap:8px; margin-top:auto;}

/* ---------- 5-step lifecycle ---------- */
.step-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:40px;}
@media (max-width:960px){.step-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.step-grid{grid-template-columns:repeat(2,1fr);}}
.step-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 18px; position:relative; overflow:hidden;
}
.step-card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--green);
}
.step-card .step-num{font-family:var(--font-headline); font-weight:800; font-size:22px; color:var(--green-dark); display:block; margin-bottom:10px;}
.step-card h4{font-size:14.5px; margin-bottom:8px;}
.step-card p{font-size:12.5px; color:var(--ink-soft); margin:0;}

/* ---------- who-we-are teaser ---------- */
.who-teaser{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
@media (max-width:860px){.who-teaser{grid-template-columns:1fr;}}
.who-quote{
  background:var(--surface); border-left:3px solid var(--green); border-radius:0 14px 14px 0;
  padding:24px 28px;
}
.who-quote p{font-family:var(--font-headline); font-weight:700; font-size:16.5px; line-height:1.5; color:var(--ink); margin-bottom:10px; font-style:italic;}
.who-quote span{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}

/* ---------- operating model ---------- */
.op-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
@media (max-width:860px){.op-grid{grid-template-columns:1fr;}}
.op-card{
  background:var(--bg-panel); color:var(--ink); border-radius:var(--radius); padding:34px 28px;
  min-height:200px; display:flex; flex-direction:column; justify-content:flex-start;
  border-top:4px solid var(--green);
}
.op-card:nth-child(2){border-top-color:var(--ink);}
.op-card:nth-child(3){border-top-color:var(--red);}
.op-tag{font-family:var(--font-label); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--green-dark); margin-bottom:8px; display:block;}
.op-card:nth-child(2) .op-tag{color:var(--ink-soft);}
.op-card:nth-child(3) .op-tag{color:var(--red-dark);}
.op-card h3{color:var(--ink); font-size:26px; margin-bottom:10px;}
.op-card p{color:var(--ink-soft); font-size:14px; margin:0;}

/* ---------- why techleafe (6-card) ---------- */
.why-grid-6{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
@media (max-width:860px){.why-grid-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.why-grid-6{grid-template-columns:1fr;}}
.why-card-6{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.why-card-6 h4{font-size:15.5px; margin-bottom:8px; color:var(--ink);}
.why-card-6 p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(160deg, #E3F5E9 0%, #BCE9CB 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
header .nav-blockchain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
}
header .nav-blockchain circle{fill:var(--green);}
header .nav-blockchain circle.red{fill:var(--red);}
header .nav-blockchain line{stroke:var(--green); stroke-width:1; opacity:.5;}
header .nav-blockchain circle{animation:nav-dot-pulse 3.2s ease-in-out infinite;}
@keyframes nav-dot-pulse{
  0%,100%{opacity:.35; r:2.2;}
  50%{opacity:.9; r:3.2;}
}
nav{
  max-width:1140px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center;
}
.brand{
  display:inline-flex; align-items:center;
  position:relative;
  transition:transform .2s ease;
}
.brand:hover{transform:scale(1.04);}
.brand img{height:52px; width:auto; display:block; animation:brand-img-shine 6s ease-in-out infinite;}
@keyframes brand-img-shine{
  0%,88%,100%{filter:brightness(1) saturate(1);}
  94%{filter:brightness(1.12) saturate(1.15);}
}
.navlinks{display:flex; align-items:center; gap:24px; font-size:13.5px; font-weight:600; margin-left:auto; margin-right:24px;}
.navlinks > a{color:var(--ink); margin-left:0;}
.navlinks > a:hover{color:var(--green-dark);}
.btn-launch{background:var(--green); color:#fff; font-size:13.5px; padding:11px 18px;}
.btn-launch:hover{background:var(--green-dark); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(0,122,51,.45);}
.navburger{display:none; width:34px; height:34px; border:1px solid var(--line); color:var(--ink); border-radius:8px; align-items:center; justify-content:center; margin-left:auto;}
@media (max-width:920px){
  .navlinks{display:none;}
  .navlinks.mobile-open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-panel-soft); border-bottom:1px solid var(--line);
    padding:8px 24px 16px; gap:0; margin:0;
    box-shadow:0 16px 28px -16px rgba(0,0,0,.2);
  }
  .navlinks.mobile-open > a{
    padding:14px 0; width:100%; border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .navlinks.mobile-open > a:last-child{border-bottom:none;}
  .navburger{display:flex;}
  .btn-launch{display:none;}
}
@media (max-width:480px){
  .home-hero h1{font-size:34px;}
}
html,body{overflow-x:hidden;}

/* ---------- hero shell (reused by every page) ---------- */
.hero{padding-top:64px; padding-bottom:36px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(32px,4.6vw,52px); line-height:1.08; margin-bottom:20px;}
.hero h1 em{font-style:normal; color:var(--green-deep);}
.hero-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
.breadcrumb{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-bottom:18px; display:none;}
.breadcrumb a:hover{color:var(--green-dark);}
@media (max-width:640px){.breadcrumb{display:block;}}

/* ---------- leaf-vein → blockchain-mesh signature graphic ---------- */
.leaf-signature{position:relative;}
.leaf-signature svg{width:100%; height:auto;}
/* hero photo — used on the AI, Web & App, and Blockchain service pages
   in place of the leaf-signature graphic. Rounded corners + a soft
   green-tinted shadow keep it feeling native to the palette rather
   than a stock photo dropped in. */
.hero-photo{
  position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,122,51,.35), 0 10px 24px -12px rgba(0,122,51,.25);
}
.hero-photo img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3;}
.hero-photo::after{
  content:''; position:absolute; inset:0; border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(0,122,51,.18);
  pointer-events:none;
}
.leaf-signature .vein-main{
  fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:leaf-draw 2.6s cubic-bezier(.4,0,.2,1) forwards;
}
.leaf-signature .vein-branch{
  fill:none; stroke:var(--green-deep); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:160; stroke-dashoffset:160;
  animation:leaf-draw 1.2s ease forwards;
}
.leaf-signature .mesh-line{
  fill:none; stroke:var(--green); stroke-width:1.1; opacity:0;
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:mesh-line-draw .7s ease forwards;
}
.leaf-signature .mesh-dot{fill:var(--green); opacity:0; animation:node-pop .3s ease forwards;}
.leaf-signature .mesh-cube{
  fill:rgba(34,177,76,.10); stroke:var(--green); stroke-width:1.4;
  opacity:0; transform-origin:center;
  animation:cube-pop .4s ease forwards, cube-pulse 2.6s ease-in-out infinite;
}
.leaf-signature .mesh-cube.red{stroke:var(--red); fill:rgba(237,28,36,.10);}
@keyframes leaf-draw{to{stroke-dashoffset:0;}}
@keyframes mesh-line-draw{to{opacity:.55; stroke-dashoffset:0;}}
@keyframes node-pop{to{opacity:1;}}
@keyframes cube-pop{to{opacity:1;}}
@keyframes cube-pulse{
  0%,100%{filter:drop-shadow(0 0 0px rgba(34,177,76,0));}
  50%{filter:drop-shadow(0 0 3px rgba(34,177,76,.4));}
}

/* ---------- trust strip ---------- */
.trust{padding:32px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface);}
.trust .wrap{display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:space-between;}
.trust-label{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}
.chains{display:flex; gap:10px; flex-wrap:wrap;}
.chain-badge{
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px;
  transition:border-color .15s ease, background .15s ease;
}
.chain-badge:hover{border-color:var(--green); background:var(--bg-soft);}
.chain-badge i{width:7px; height:7px; border-radius:50%; background:var(--green); flex:none;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- generic card grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px;}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{border-color:var(--green); transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(16,141,69,.4);}
.card .path{font-family:var(--font-mono); font-size:11px; color:var(--red-dark); margin-bottom:10px; display:block;}
.card h3{margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:14px;}
.card ul{margin-top:14px;}
.card li{
  font-size:13.5px; color:var(--ink-soft); padding-left:18px; position:relative; margin-bottom:7px;
}
.card li::before{
  content:''; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.card .go{margin-top:16px; font-size:13px; font-weight:600; color:var(--green-dark); display:flex; align-items:center; gap:8px;}

/* service detail sections */
.service-block{padding:56px 0; border-top:1px solid var(--line);}
.service-block:first-of-type{border-top:none;}
.service-block-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start;}
@media (max-width:860px){.service-block-grid{grid-template-columns:1fr;}}
.service-index{font-family:var(--font-mono); color:var(--red-dark); font-size:13px; margin-bottom:10px;}
.service-block h3{font-size:24px; margin-bottom:14px;}
.service-block p{color:var(--ink-soft); margin-bottom:18px;}
.bullet-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
@media (max-width:600px){.bullet-grid{grid-template-columns:1fr;}}
.bullet-grid li{font-size:14px; color:var(--ink-soft); padding-left:20px; position:relative;}
.bullet-grid li::before{
  content:''; position:absolute; left:0; top:8px; width:9px; height:9px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);
}

/* tech stack badges */
.stack-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}

/* metric cards on service hero */
.metrics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px;}
@media (max-width:760px){.metrics-grid{grid-template-columns:repeat(2,1fr);}}
.metric-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.metric-card .mn{font-family:var(--font-headline); font-size:26px; font-weight:800; color:var(--green-dark);}
.metric-card .ml{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.stack-chip{
  font-family:var(--font-mono); font-size:12.5px; border:1px solid var(--line); border-radius:8px;
  padding:8px 14px; background:var(--surface); color:var(--ink);
}

/* ---------- identity block (homepage) ---------- */
.core-grid{display:grid; grid-template-columns:1.3fr .85fr .85fr; gap:20px; margin-top:44px;}
@media (max-width:860px){.core-grid{grid-template-columns:1fr;}}
.core-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
.core-card.primary{background:var(--green-dark); color:#fff; border-color:var(--green-dark);}
.core-card.primary .eyebrow{color:#BEE7CC;}
.core-card.primary p{color:#D8EFDF;}
.core-card p{color:var(--ink-soft); font-size:14.5px;}
.tag-extension{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; display:inline-block; margin-bottom:14px;
}

/* ---------- about / story ---------- */
.story{background:var(--bg-soft); border-radius:20px; padding:52px; margin-top:20px;}
@media (max-width:700px){.story{padding:30px;}}
.story-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start;}
@media (max-width:860px){.story-grid{grid-template-columns:1fr;}}
.founder-slot{background:var(--surface); border:1px dashed var(--green); border-radius:14px; padding:22px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);}
.founder-slot h4{font-family:var(--font-body); color:var(--ink); font-size:14.5px; margin-bottom:6px;}
.story p{margin-bottom:14px; color:var(--ink-soft);}
.why-list{margin-top:18px;}
.why-list li{padding-left:22px; position:relative; margin-bottom:10px; font-size:14.5px; color:var(--ink-soft);}
.why-list li::before{content:''; position:absolute; left:0; top:8px; width:9px; height:9px; background:var(--green); border-radius:50%;}

/* ---------- about page: quote + contact grid ---------- */
.about-quote{
  margin-top:28px; padding:26px 30px; border-left:3px solid var(--green);
  background:var(--bg-soft); border-radius:0 14px 14px 0;
}
.about-quote p{font-family:var(--font-headline); font-weight:600; font-size:18px; line-height:1.5; color:var(--ink); margin-bottom:10px; font-style:italic;}
.about-quote span{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}

.about-contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:28px;}
@media (max-width:600px){.about-contact-grid{grid-template-columns:1fr;}}
.about-contact-item b{
  display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--red-dark); margin-bottom:8px;
}
.about-contact-item p{font-size:14.5px; color:var(--ink); margin:0;}
.about-contact-item a{color:var(--green-dark); font-weight:600;}
.about-contact-item a:hover{text-decoration:underline;}
.about-contact-item a .arrow-cta{margin-left:2px;}
.about-social-row{display:flex; flex-direction:row; align-items:center; gap:12px;}
.about-social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.about-social-row a:hover{color:var(--green-dark); border-color:var(--green); transform:translateY(-2px); text-decoration:none;}
.map-pin-link{display:inline-flex; margin-left:6px; color:var(--red-dark); vertical-align:middle;}
.map-pin-link:hover{color:var(--red);}
.phone-toggle{margin-top:2px;}
.phone-toggle summary{
  cursor:pointer; list-style:none; color:var(--green-dark); font-weight:600; font-size:16px;
  display:inline-flex; align-items:center; gap:6px;
}
.phone-toggle summary::-webkit-details-marker{display:none;}
.phone-toggle summary::after{
  content:'▾'; font-size:11px; color:var(--ink-soft); transition:transform .15s ease;
}
.phone-toggle[open] summary::after{transform:rotate(180deg);}
.phone-toggle-menu{display:flex; flex-direction:column; gap:4px; margin-top:8px; padding-left:2px;}
.phone-toggle-menu a{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; padding:4px 0;}
.phone-toggle-menu a:hover{color:var(--green-dark); text-decoration:underline;}

/* ---------- about page: mission & vision ---------- */
.mv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px;}
@media (max-width:640px){.mv-grid{grid-template-columns:1fr;}}
.mv-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; border-top:3px solid var(--green);}
.mv-card:nth-child(2){border-top-color:var(--red);}
.mv-card h3{font-size:18px; margin-bottom:10px;}
.mv-card p{font-size:14.5px; color:var(--ink-soft); margin:0;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.stat .n{font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--green-dark);}
.stat .l{font-size:13px; color:var(--ink-soft); margin-top:4px;}
.stat-note{margin-top:14px; font-size:12.5px; color:var(--ink-soft); font-family:var(--font-mono);}

/* work / testimonials */
.work-thumb{
  height:140px; border-radius:10px; margin-bottom:16px;
  background:repeating-linear-gradient(135deg, var(--bg-soft) 0 12px, #fff 12px 24px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; color:var(--green-dark); text-transform:uppercase; letter-spacing:.05em;
}
.testi-card{border:1px dashed var(--line);}
.testi-card .quote{font-family:var(--font-display); font-weight:500; font-size:15.5px; color:var(--ink-soft); margin-bottom:16px; font-style:italic;}
.testi-who{display:flex; align-items:center; gap:10px;}
.avatar-slot{width:36px; height:36px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); flex:none;}
.testi-who small{display:block; color:var(--ink-soft); font-family:var(--font-mono); font-size:11px;}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line); padding:22px 0;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:20px; color:var(--red-dark); font-family:var(--font-mono);}
.faq-item[open] summary::after{content:'\2013';}
.faq-item p{margin-top:12px; color:var(--ink-soft); font-size:14.5px; max-width:760px;}

/* ---------- contact / CTA band ---------- */
.contact-box{background:var(--bg-panel); color:var(--ink); border-radius:22px; padding:56px; overflow:hidden; border:1px solid var(--line);}
@media (max-width:700px){.contact-box{padding:32px;}}
.contact-box h2{color:var(--ink); font-size:clamp(28px,4vw,38px);}
.contact-box .lede{color:var(--ink-soft); font-size:18px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:30px;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
.contact-detail{margin-bottom:18px; font-size:16px; color:var(--ink);}
.contact-detail b{display:block; color:var(--ink); font-family:var(--font-label); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
input,textarea{
  width:100%; background:#fff; border:1.5px solid var(--line); color:var(--ink);
  padding:13px 16px; border-radius:9px; font-family:var(--font-body); font-size:15px; margin-bottom:14px;
}
input:focus,textarea:focus{outline:none; border-color:var(--green);}
input::placeholder,textarea::placeholder{color:var(--ink-soft);}
.contact-box .btn-primary{background:var(--green-dark);}
.contact-box .btn-primary:hover{background:var(--green); box-shadow:0 10px 26px -8px rgba(0,200,83,.45);}
.contact-box .btn-primary:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.contact-box .btn-email{background:transparent; color:var(--red-dark); border-color:var(--red-dark);}
.contact-box .btn-email:hover{background:var(--red-dark); color:#fff;}
.cf-status{margin-top:12px; font-size:14px; color:var(--green-dark); min-height:18px;}
.cf-status-error{color:var(--red-dark);}

.cta-band{background:var(--bg-panel); border:1px solid var(--line); border-radius:20px; padding:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--ink);}
.cta-band h2{color:var(--ink); font-size:26px;}
.cta-band p{color:var(--ink-soft); margin-top:6px;}

/* ---------- footer (minimal, per new site structure) ---------- */
footer{
  padding:48px 24px 30px; border-top:1px solid var(--line);
  background:linear-gradient(160deg, #E3F5E9 0%, #BCE9CB 100%);
}
.foot-grid-simple{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;}
.foot-nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; font-size:14px; font-weight:600;}
.foot-nav a{color:var(--ink); margin:0 4px;}
.foot-nav a:hover{color:var(--green-dark);}
.foot-reach-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--green-dark); color:#fff; font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:999px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.foot-reach-btn:hover{background:var(--green); transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(0,122,51,.5);}
.foot-social{display:flex; align-items:center; gap:12px;}
.foot-social a{
  color:var(--ink-soft); width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.foot-social a:hover{color:var(--green-dark); border-color:var(--green); transform:translateY(-2px);}
.footer-copy{color:var(--ink-soft); font-size:13px; text-align:center; margin:0;}
.footer-copy a{color:var(--green-dark); font-weight:600;}
.footer-copy a:hover{text-decoration:underline;}