/* ============================
   DESIGN TOKENS
============================ */
:root {
  --bg:       #080100;
  --bg1:      #080100;
  --bg2:      #080100;
  --accent:   #1E6F4C;
  --accent-b: #25a46e;
  --accent-g: rgba(30,111,76,.35);
  --accent-g2:rgba(30,111,76,.12);
  --text:     #E6E8E6;
  --text2:    #F7F9F8;
  --dim:      rgba(230,232,230,.55);
  --dim2:     rgba(230,232,230,.3);
  --border:   rgba(30,111,76,.18);
  --border2:  rgba(255,255,255,.07);
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease2:    cubic-bezier(.4,0,.2,1);
  --head:     'Sora',sans-serif;
  --body:     'Inter',sans-serif;
}

/* ============================
   RESET & BASE
============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow:hidden;height:100vh;width:100vw}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;color:inherit;font-family:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.accent{color:var(--accent-b)}
.sr-hidden{opacity:0;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ============================
   PRELOADER
============================ */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pre-scanline{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-b),transparent);
  animation:scan 2.5s linear infinite;
  box-shadow:0 0 20px var(--accent-g);
}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(100vh)}}
.pre-center{text-align:center;position:relative;z-index:2;perspective:1200px;transform-style:preserve-3d}
.pre-letters{
  display:flex;gap:3px;justify-content:center;flex-wrap:wrap;
  font-family:var(--head);font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800;letter-spacing:.18em;color:var(--text2);
  margin-bottom:1.5rem;transform-style:preserve-3d;
}
.shatter-wrap{
  position:relative;display:inline-block;
  color:transparent;
  transform-style:preserve-3d;
}
.shatter-wrap::selection{color:transparent;background:transparent}
.shatter-wrap.space{width:1rem}
.shatter-frag{
  position:absolute;inset:0;
  color:var(--text2);
  text-shadow:0 0 40px var(--accent-g);
  opacity:0;
  transition:transform 2.5s cubic-bezier(.16,1,.3,1),opacity 2s ease;
  will-change:transform,opacity;
  pointer-events:none;
}
.shatter-frag.in{
  transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) !important;
  opacity:1;
}
.pre-divider{height:1px;width:0;background:linear-gradient(90deg,transparent,var(--accent-b),transparent);margin:0 auto 1.2rem;transition:width .8s var(--ease)}
.pre-divider.expand{width:260px}
.pre-tagline{
  font-size:clamp(.75rem,1.4vw,.9rem);letter-spacing:.1em;
  color:var(--dim);opacity:0;transform:translateY(8px);
  transition:all .6s var(--ease) .2s;
}
.pre-tagline.in{opacity:1;transform:translateY(0)}
.pre-progress{
  position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);
  width:180px;height:1px;background:rgba(255,255,255,.08);
}
.pre-progress-fill{height:100%;width:0;background:var(--accent-b);box-shadow:0 0 12px var(--accent-g);transition:width .05s linear}
.pre-corner{position:absolute;width:16px;height:16px;border-color:rgba(30,111,76,.4);border-style:solid}
.pre-corner.tl{top:1.5rem;left:1.5rem;border-width:1px 0 0 1px}
.pre-corner.tr{top:1.5rem;right:1.5rem;border-width:1px 1px 0 0}
.pre-corner.bl{bottom:1.5rem;left:1.5rem;border-width:0 0 1px 1px}
.pre-corner.br{bottom:1.5rem;right:1.5rem;border-width:0 1px 1px 0}

/* ============================
   MODALS
============================ */
.modal-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:#0e0201;border:1px solid var(--border);border-radius:16px;
  max-width:640px;width:100%;max-height:85vh;overflow-y:auto;
  padding:2.5rem;position:relative;
  transform:translateY(20px);transition:transform .4s var(--ease);
}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-box::-webkit-scrollbar{width:3px}
.modal-box::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.modal-close{
  position:absolute;top:1.2rem;right:1.2rem;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:50%;
  color:var(--dim);transition:all .3s;
}
.modal-close:hover{border-color:var(--accent);color:var(--accent-b)}
.modal-close svg{width:14px;height:14px;stroke-width:2}
.modal-box h2{font-family:var(--head);font-size:1.6rem;font-weight:700;margin-bottom:.3rem}
.modal-date{font-size:.78rem;color:var(--dim);margin-bottom:1.5rem;letter-spacing:.06em}
.modal-content h3{font-family:var(--head);font-size:.95rem;font-weight:600;color:var(--accent-b);margin:1.2rem 0 .4rem}
.modal-content p{font-size:.88rem;color:var(--dim);line-height:1.7}

/* ============================
   NAVBAR
============================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.85rem 2.5rem;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:all .4s var(--ease);
}
#navbar.scrolled{padding:0.7rem 2.5rem;background:var(--bg);border-bottom-color:transparent;}
.nav-logo img{height:64px;width:auto;max-width:280px;object-fit:contain;filter:brightness(1.4) drop-shadow(0 0 12px rgba(255,255,255,.2))}
.footer-logo{height:54px;width:auto;max-width:240px;object-fit:contain;filter:brightness(1.2)}
.cf-message{margin-top:1rem;padding:.75rem;border-radius:8px;font-size:0.85rem;text-align:center;font-weight:600;display:none;}
.cf-message.success{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);}
.cf-message.error{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.2);}
.nav-links{display:flex;gap:2rem}
.nav-links a{
  font-size:.82rem;letter-spacing:.04em;color:var(--dim);
  transition:color .3s;position:relative;padding-bottom:2px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--accent-b);transition:width .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--accent-b)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-cta{
  font-size:.82rem;font-weight:600;padding:.5rem 1.2rem;
  border:1px solid var(--accent);border-radius:6px;color:var(--accent-b);
  transition:all .3s var(--ease);letter-spacing:.03em;
}
.nav-cta:hover{background:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-g)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--dim);transition:all .3s}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}

/* ============================
   SCROLLER & PANELS
============================ */
#mainWrapper{position:fixed;inset:0;transition:opacity .8s var(--ease)}
#mainWrapper:not(.sr-hidden){opacity:1;pointer-events:all}
#scroller{
  position:fixed;inset:0;overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
}
#scroller::-webkit-scrollbar{width:3px}
#scroller::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.panel{
  min-height:100vh;width:100%;scroll-snap-align:start;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5rem 2.5rem 2.5rem;
}

/* ============================
   REVEAL SYSTEM
============================ */
.reveal-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-b);margin-bottom:1.2rem;font-weight:600;
}
.reveal-chip::before{content:'';width:1.5rem;height:1px;background:var(--accent-b);display:block}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
/* Slide from left / right */
[data-slide]{transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-slide="left"]{opacity:0;transform:translateX(-52px)}
[data-slide="right"]{opacity:0;transform:translateX(52px)}
[data-slide].revealed{opacity:1;transform:translateX(0)}

/* ============================
   BUTTONS
============================ */
.btn-primary{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 2rem;background:var(--accent);color:#fff;
  font-family:var(--head);font-weight:600;font-size:.9rem;
  border-radius:8px;border:1px solid var(--accent);
  overflow:hidden;transition:all .3s var(--ease);
  letter-spacing:.02em;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .3s;
}
.btn-primary:hover{background:var(--accent-b);box-shadow:0 0 30px var(--accent-g);transform:translateY(-2px)}
.btn-primary:hover::before{opacity:1}
.btn-outline{
  display:inline-flex;align-items:center;padding:.85rem 2rem;
  border:1px solid var(--border);border-radius:8px;color:var(--dim);
  font-weight:500;font-size:.9rem;transition:all .3s var(--ease);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-b)}
.btn-sm{padding:.65rem 1.4rem;font-size:.85rem}
.btn-xl{padding:1rem 2.4rem;font-size:1rem}
.btn-full{width:100%;justify-content:center}

/* ============================
   HERO
============================ */
#hero{padding-top:4rem}
#heroCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-grid-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(30,111,76,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,111,76,.05) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 40%,transparent 80%);
}
.hero-body{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
  max-width:1200px;width:100%;
}
.hero-h1{
  font-family:var(--head);font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:1.2rem;
}
.hero-word{display:block}
.hero-word--accent{color:var(--accent-b)}
.hero-sub{font-size:1rem;color:var(--dim);line-height:1.75;max-width:480px;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.hero-stat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:.65rem 1.1rem;border:1px solid rgba(30,111,76,.2);
  border-radius:12px;background:rgba(30,111,76,.06);
  backdrop-filter:blur(10px);
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.hero-stat::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(30,111,76,.12),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.hero-stat:hover{border-color:var(--accent);box-shadow:0 0 24px var(--accent-g);transform:translateY(-2px)}
.hero-stat:hover::before{opacity:1}
.hs-val{
  font-family:var(--head);font-size:1.8rem;font-weight:800;
  color:var(--accent-b);line-height:1;display:block;
  text-shadow:0 0 20px rgba(30,111,76,.5);
}
.hero-stat .hs-label{font-size:.64rem;color:var(--dim);line-height:1.35;margin-top:.25rem}
.hero-stat-div{display:none}
.hero-right{display:flex;align-items:center;justify-content:center;animation:heroRightBreathe 7s ease-in-out 1s infinite}
@keyframes heroRightBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hero-visual{position:relative;width:450px;height:450px;flex-shrink:0}
.hv-ring{position:absolute;border-radius:50%;border:1px solid var(--accent);top:50%;left:50%;transform:translate(-50%,-50%)}
.hv-r1{width:265px;height:265px;opacity:.25;animation:hring 8s linear infinite}
.hv-r2{width:370px;height:370px;opacity:.12;animation:hring 13s linear infinite reverse}
.hv-r3{width:450px;height:450px;opacity:.06;animation:hring 18s linear infinite}
@keyframes hring{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hv-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  background:rgba(30,111,76,.1);border:1px solid rgba(30,111,76,.4);
  display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 0 40px var(--accent-g),inset 0 0 20px var(--accent-g2);
}
.hv-logo{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 12px var(--accent-g));animation:floatZoom 4.5s ease-in-out infinite}
@keyframes floatZoom{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.07)}}
.hv-orbit{position:absolute;inset:0}
.hv-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  opacity:0;transition:opacity .6s var(--ease);
}
.hv-node.show{opacity:1}
.hv-node svg{width:20px;height:20px;padding:8px;width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:rgba(11,1,0,.8);box-shadow:0 0 16px var(--accent-g2);color:var(--accent-b)}
.hv-node span{font-size:.65rem;color:var(--dim);letter-spacing:.06em;white-space:nowrap}
.hv-n1{top:0;left:50%;transform:translateX(-50%)}
.hv-n2{top:50%;right:0;transform:translateY(-50%)}
.hv-n3{bottom:0;left:50%;transform:translateX(-50%)}
.scroll-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--dim2);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  animation:scuepulse 2s ease-in-out infinite;
}
.sc-line{width:1px;height:32px;background:linear-gradient(to bottom,transparent,var(--accent-b))}
@keyframes scuepulse{0%,100%{opacity:.4;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(5px)}}
@media(max-width:900px){
  .hero-body{
    display:flex; flex-direction:column-reverse; text-align:center; gap:2rem;
  }
  .hero-sub,.hero-actions{max-width:100%}
  .hero-actions{justify-content:center}
  .hero-meta{justify-content:center}
  .hero-visual {
    transform: scale(0.65); 
    transform-origin: center top; 
    margin-bottom: -150px; 
  }
  .hero-right{display:flex; order:-1; animation:heroRightBreathe 7s ease-in-out 1s infinite}
}

/* ============================
   PROBLEM
============================ */
#problem{background:var(--bg1)}
#problemCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.problem-body{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  max-width:1100px;width:100%;
}
.problem-story{display:flex;flex-direction:column;gap:.8rem}
.ps-line{
  font-family:var(--head);font-size:clamp(.9rem,1.8vw,1.2rem);
  color:var(--dim);display:flex;align-items:center;gap:.75rem;
  opacity:0;transform:translateX(-20px);
  transition:all .6s var(--ease);
}
.ps-line.show{opacity:1;transform:translateX(0)}
.ps-status{
  font-size:.6rem;padding:.2rem .5rem;border-radius:99px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(30,200,100,.1);color:#4ade80;border:1px solid rgba(30,200,100,.25);
  flex-shrink:0;
}
.ps-break{
  font-family:var(--head);font-size:clamp(1.1rem,2.5vw,1.6rem);
  font-weight:700;color:var(--text2);padding-top:.5rem;
  border-top:1px solid var(--border2);
  opacity:0;transform:translateX(-20px);transition:all .7s var(--ease) .1s;
}
.ps-break.show{opacity:1;transform:translateX(0)}
.ps-conclusion{
  opacity:0;transform:translateY(16px);transition:all .8s var(--ease);
  padding:1.5rem;border:1px solid var(--border);border-radius:12px;
  background:rgba(30,111,76,.05);margin-top:.5rem;
}
.ps-conclusion.show{opacity:1;transform:translateY(0)}
.ps-conclusion em{color:var(--accent-b);font-style:normal;font-weight:700;font-family:var(--head);font-size:clamp(1.2rem,2.5vw,1.8rem)}
.ps-sub{font-size:.85rem;color:var(--dim);margin-top:.6rem;line-height:1.6}
.problem-nodes{position:relative;height:320px}
.pn-item{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  opacity:0;scale:.8;transition:all .6s var(--ease);
}
.pn-item.show{opacity:1;scale:1}
.pn-item svg{
  width:44px;height:44px;padding:10px;
  border:1px solid var(--border);border-radius:10px;
  background:rgba(11,1,0,.9);color:var(--dim);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.pn-item span{font-size:.65rem;color:var(--dim2);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pn-1{top:5%;left:0%}
.pn-2{top:0%;left:50%;transform:translateX(-50%)}
.pn-3{top:5%;right:0}
.pn-4{top:45%;left:5%}
.pn-5{top:45%;right:5%}
.pn-6{bottom:5%;left:50%;transform:translateX(-50%)}
@media(max-width:900px){
  .problem-body{grid-template-columns:1fr;gap:2rem}
  .problem-nodes{height:200px}
}

/* ============================
   SERVICE TAG
============================ */
.service-tag{
  position:absolute;top:5.5rem;left:2.5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;
}
.service-heading{
  font-family:var(--head);font-size:clamp(2rem,4vw,3.4rem);
  font-weight:800;line-height:1.05;margin-bottom:1.2rem;
}
.service-desc{font-size:.95rem;color:var(--dim);line-height:1.75;margin-bottom:1.5rem;max-width:440px}
.service-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.service-list li{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--text)}
.service-list svg{width:16px;height:16px;color:var(--accent-b);flex-shrink:0;stroke-width:2.5}

/* ============================
   FOUNDATION
============================ */
#foundation{background:var(--bg2)}
.foundation-body{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  max-width:1100px;width:100%;
}
.browser-mock{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:rgba(30,111,76,.03);box-shadow:0 0 60px rgba(30,111,76,.08);
}
.bm-bar{
  display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--border2);
}
.bm-dots{display:flex;gap:.35rem}
.bm-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.1)}
.bm-url{flex:1;margin-left:.5rem;font-size:.68rem;color:var(--dim2);letter-spacing:.04em}
.bm-screen{padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.bm-block{
  border:1px solid var(--border2);border-radius:6px;padding:.7rem .9rem;
  opacity:0;transform:translateX(12px) scale(.98);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  display:flex;align-items:center;justify-content:space-between;
}
.bm-block.built{opacity:1;transform:translateX(0) scale(1)}
.bm-row{display:flex;gap:.6rem}
.bm-row .bm-block{flex:1}
.bm-inner{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.65rem;color:var(--dim2);letter-spacing:.06em;text-transform:uppercase}
.bm-nav{min-height:30px;background:rgba(30,111,76,.04)}
.bm-hero{min-height:70px;background:rgba(30,111,76,.06)}
.bm-services{background:rgba(30,111,76,.04)}
.bm-trust{background:rgba(30,111,76,.06)}
.bm-cta{min-height:44px;background:rgba(30,111,76,.1);border-color:var(--border)}
.bm-footer{min-height:28px}
.bm-badge{
  font-size:.6rem;padding:.2rem .5rem;border-radius:99px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.bm-badge.green{background:rgba(30,111,76,.2);color:var(--accent-b);border:1px solid rgba(30,111,76,.35)}
.bm-badge.blue{background:rgba(30,100,220,.15);color:#7eb8ff;border:1px solid rgba(30,100,220,.3)}
.bm-badge.amber{background:rgba(200,150,30,.15);color:#ffc96c;border:1px solid rgba(200,150,30,.3)}
@media(max-width:900px){
  .foundation-body{grid-template-columns:1fr}
  .foundation-left .service-desc{max-width:100%}
}

/* ============================
   AUTOMATION
============================ */
#automation{background:var(--bg)}
.auto-body{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:1100px;width:100%}
.auto-header{text-align:center;max-width:600px}
.auto-desc{max-width:100%}
.auto-pipeline{
  display:flex;align-items:flex-start;justify-content:center;
  gap:0;width:100%;flex-wrap:nowrap;
}
.ap-node{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  flex-shrink:0;
  opacity:0;transform:translateY(20px);
  transition:all .5s var(--ease);
}
.ap-node.show{opacity:1;transform:translateY(0)}
.ap-icon{
  width:56px;height:56px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(30,111,76,.08);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-b);
  box-shadow:0 0 24px var(--accent-g2);
  transition:all .3s;
  position:relative;
}
.ap-icon svg{width:22px;height:22px;stroke-width:1.5}
.ap-node.show .ap-icon::after{
  content:'';position:absolute;inset:-4px;border-radius:18px;
  border:1px solid rgba(30,111,76,.2);
  animation:nodeRipple 2s ease-in-out infinite;
}
@keyframes nodeRipple{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:0}}
.ap-label{font-size:.8rem;font-weight:600;font-family:var(--head);color:var(--text2);white-space:nowrap;text-align:center}
.ap-desc{font-size:.63rem;color:var(--dim);text-align:center;max-width:90px;word-break:normal;line-height:1.35}
.ap-connector{flex:1;display:flex;align-items:center;min-width:20px;opacity:0;transition:opacity .4s var(--ease)}
.ap-connector.show{opacity:1}
.ap-line{flex:1;height:1px;background:rgba(30,111,76,.2);position:relative;overflow:hidden}
.ap-pulse{
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,var(--accent-b),transparent);
  animation:flowAnim 1.8s linear infinite;
}
@keyframes flowAnim{to{left:150%}}
.auto-functions{
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  padding-top:1rem;border-top:1px solid var(--border2);width:100%;
}
.af-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border:1px solid var(--border2);border-radius:99px;
  font-size:.78rem;color:var(--dim);
  transition:all .3s var(--ease);
  opacity:0;transform:translateY(10px);
}
/* af-item hover works regardless of .show — pointer events always on */
.af-item{pointer-events:auto}
.af-item.show{opacity:1;transform:translateY(0)}
.af-item:hover{border-color:var(--accent);color:var(--accent-b);background:var(--accent-g2)}
/* Active state for tap/click on mobile */
.af-item.active{border-color:var(--accent);color:var(--accent-b);background:var(--accent-g2);box-shadow:0 0 12px rgba(30,111,76,.2)}
.af-item svg{width:14px;height:14px;color:var(--accent-b);flex-shrink:0}
@media(max-width:768px){
  /* Vertical pipeline on small tablets/large phones */
  .auto-pipeline{flex-direction:column;gap:.5rem;align-items:center}
  .ap-connector{width:1px;height:24px;flex:none;border-left:1px dashed rgba(30,111,76,.3);display:block}
  .ap-line{width:1px;height:100%;background:rgba(30,111,76,.2)}
  .ap-connector .ap-line{width:1px;height:24px}
  .ap-node{width:100%;flex-direction:row;align-items:center;gap:.8rem;text-align:left}
  .ap-icon{flex-shrink:0}
  .ap-desc{max-width:none;text-align:left}
  .ap-label{font-size:.82rem}
  .auto-functions{gap:.5rem}
  .af-item{font-size:.72rem;padding:.45rem .85rem}
}

/* ============================
   BIC
============================ */
#bic{background:var(--bg1)}
.bic-body{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  max-width:1100px;width:100%;
}
.bic-quote{
  font-family:var(--head);font-size:1rem;font-style:italic;
  color:var(--accent-b);padding:1rem 1.2rem;margin-bottom:1.5rem;
  border-left:2px solid var(--accent);background:var(--accent-g2);
  border-radius:0 6px 6px 0;
}
.bic-hub{position:relative;width:360px;height:360px;flex-shrink:0}
#bicCanvas{position:absolute;inset:0;z-index:0}
.bic-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.2rem;
}
.bc-rings{position:absolute;inset:0;border-radius:50%}
.bc-r{position:absolute;border-radius:50%;border:1px solid var(--accent);top:50%;left:50%;transform:translate(-50%,-50%)}
.bc-r1{width:100px;height:100px;opacity:.5;animation:bcr 3s linear infinite}
.bc-r2{width:140px;height:140px;opacity:.25;animation:bcr 5s linear infinite reverse}
.bc-r3{width:180px;height:180px;opacity:.12;animation:bcr 7s linear infinite}
@keyframes bcr{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.bc-label{
  font-family:var(--head);font-size:1.2rem;font-weight:800;
  color:var(--accent-b);text-shadow:0 0 20px var(--accent-g);position:relative;z-index:2;
}
.bc-sub{font-size:.55rem;color:var(--dim);letter-spacing:.08em;position:relative;z-index:2}
.bic-sat{
  position:absolute;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  opacity:0;transition:all .6s var(--ease);
}
.bic-sat.show{opacity:1}
.bic-sat svg{
  width:40px;height:40px;padding:9px;
  border:1px solid var(--border);border-radius:50%;
  background:rgba(11,1,0,.9);color:var(--accent-b);
  box-shadow:0 0 20px var(--accent-g2);
}
.bic-sat span{font-size:.65rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.bs-top{top:2%;left:50%;transform:translateX(-50%)}
.bs-right{top:50%;right:2%;transform:translateY(-50%)}
.bs-bottom{bottom:2%;left:50%;transform:translateX(-50%)}
.bs-left{top:50%;left:2%;transform:translateY(-50%)}
.bs-top.show{transform:translateX(-50%)}
.bs-right.show{transform:translateY(-50%)}
.bs-bottom.show{transform:translateX(-50%)}
.bs-left.show{transform:translateY(-50%)}
@media(max-width:900px){
  .bic-body{grid-template-columns:1fr}
  .bic-hub{width:260px;height:260px;margin:0 auto}
  .bc-r1{width:80px;height:80px}
  .bc-r2{width:110px;height:110px}
  .bc-r3{width:145px;height:145px}
}

/* ============================
   CLIENTS
============================ */
#clients{background:var(--bg2);flex-direction:column;gap:2rem}
.clients-header{text-align:center;max-width:640px}
.clients-header h2{font-family:var(--head);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;margin-bottom:.8rem}
.clients-header p{color:var(--dim);font-size:.95rem;line-height:1.7}
.clients-panel-wrap{width:100%;max-width:700px}
.cp-panel{
  display:none;flex-direction:column;gap:1.2rem;
  padding:2.5rem;border:1px solid var(--border2);border-radius:16px;
  background:linear-gradient(135deg,rgba(30,111,76,.06),transparent 70%);
  position:relative;overflow:hidden;
}
.cp-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.cp-panel.active{display:flex;animation:panelIn .4s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.cp-num{
  position:absolute;top:1.2rem;right:2rem;
  font-family:var(--head);font-size:3.5rem;font-weight:800;
  color:rgba(30,111,76,.12);line-height:1;pointer-events:none;
}
.cp-type{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-b);font-weight:600}
.cp-story{
  font-family:var(--head);font-size:clamp(1rem,2vw,1.3rem);
  font-weight:600;color:var(--text2);line-height:1.5;font-style:italic;
}
.cp-result{
  display:flex;align-items:center;gap:.6rem;
  font-size:.88rem;color:var(--accent-b);
  padding:.7rem 1rem;background:rgba(30,111,76,.08);
  border-radius:6px;border-left:2px solid var(--accent);
}
.cp-result svg{width:14px;height:14px;stroke-width:2.5;flex-shrink:0}
.cp-nav{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}
.cpn-btn{
  width:8px;height:8px;border-radius:50%;
  background:var(--border2);transition:all .3s var(--ease);
}
.cpn-btn.active{width:24px;border-radius:4px;background:var(--accent-b);box-shadow:0 0 8px var(--accent-g)}

/* ============================
   FLOATING WHATSAPP
============================ */
.wa-fab {
  position:fixed;bottom:1.8rem;right:1.8rem;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:#fff;
  padding:.75rem 1.2rem;
  border-radius:99px;border:1px solid rgba(37,211,102,.5);
  box-shadow:0 4px 24px rgba(37,211,102,.3);
  transition:all .3s var(--ease);
  text-decoration:none;
  font-family:var(--body);font-size:.82rem;font-weight:600;
}
.wa-morph-grid {
  display:grid;align-items:center;justify-items:center;
  perspective:800px;transform-style:preserve-3d;
}
.wa-state {
  grid-area:1 / 1;
  display:flex;align-items:center;gap:.6rem;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.wa-state-1 { animation:waFlipState1 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.wa-state-2 {
  transform:rotateX(-180deg);
  animation:waFlipState2 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.wa-icon-base { width:24px;height:24px;flex-shrink:0;stroke:none;fill:#25D366; }
.wa-husky-img {
  width:32px;height:32px;object-fit:cover;border-radius:50%;
  box-shadow:0 0 10px rgba(37,211,102,.3);
  border:1px solid rgba(255,255,255,.1);
}
@keyframes waFlipState1 {
  0%, 35% { transform:rotateX(0deg); }
  45%, 85% { transform:rotateX(180deg); }
  95%, 100% { transform:rotateX(360deg); }
}
@keyframes waFlipState2 {
  0%, 35% { transform:rotateX(-180deg); }
  45%, 85% { transform:rotateX(0deg); }
  95%, 100% { transform:rotateX(180deg); }
}
.wa-hi-bubble {
  position:absolute;top:-10px;right:-18px;
  background:#fff;color:var(--bg);
  font-size:.56rem;font-weight:800;
  padding:2px 6px;border-radius:6px;border-bottom-left-radius:0;
  opacity:0;transform:scale(.5);
  animation:waHiBubble 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  white-space:nowrap;
}
@keyframes waHiBubble {
  0%, 48% { opacity:0; transform:scale(.5); }
  52%, 82% { opacity:1; transform:scale(1); }
  86%, 100% { opacity:0; transform:scale(.5); }
}
.wa-fab-label { white-space:nowrap; }
.wa-fab-pulse { display:none; }
@keyframes waHoverPulse {
  0% { box-shadow: 0 0 2px rgba(37,211,102,0.1); }
  50% { box-shadow: 0 0 8px rgba(37,211,102,0.25); }
  100% { box-shadow: 0 0 2px rgba(37,211,102,0.1); }
}
.wa-fab:hover, .wa-fab:focus {
  background: var(--bg);
  border-color: rgba(37,211,102,0.6);
  transform: translateY(-2px);
  animation: waHoverPulse 2s ease-in-out infinite;
  outline: none;
}
.wa-fab:active {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 0 12px rgba(37,211,102,0.4);
  animation: none;
}
@media(max-width:600px){.wa-fab-label{display:none}.wa-fab{padding:.8rem}}

/* ============================
   HERO STATS (updated)
============================ */
.hs-val{
  font-family:var(--head);font-size:1.8rem;font-weight:800;
  color:var(--accent-b);display:block;line-height:1;
  text-shadow:0 0 20px rgba(30,111,76,.4);
}
.hero-stat .hs-label{font-size:.7rem;color:var(--dim);letter-spacing:.05em;line-height:1.4;margin-top:.3rem}

/* ============================
   PROBLEM: FLOATING ICONS
============================ */
.pn-item.show{animation:none}
.pn-item[data-float="1"].show{animation:pnFloat1 4s ease-in-out infinite}
.pn-item[data-float="2"].show{animation:pnFloat2 5s ease-in-out infinite}
.pn-item[data-float="3"].show{animation:pnFloat1 4.5s ease-in-out infinite reverse}
.pn-item[data-float="4"].show{animation:pnFloat2 3.8s ease-in-out infinite}
.pn-item[data-float="5"].show{animation:pnFloat1 5.2s ease-in-out infinite reverse}
.pn-item[data-float="6"].show{animation:pnFloat2 4.2s ease-in-out infinite}
@keyframes pnFloat1{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-8px) rotate(-2deg)}66%{transform:translateY(5px) rotate(1deg)}}
@keyframes pnFloat2{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(6px) rotate(2deg)}66%{transform:translateY(-7px) rotate(-1deg)}}
.pn-2,.pn-6{transform:translateX(-50%)}
.pn-2.show,.pn-6.show{animation:pnFloat3 4.5s ease-in-out infinite}
@keyframes pnFloat3{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
.pn-item svg{transition:box-shadow .3s,color .3s}
.pn-item:hover svg{color:var(--accent-b);box-shadow:0 0 20px var(--accent-g)}

/* ============================
   OUTCOME / TRANSFORMATION (redesigned)
============================ */
#outcome{background:var(--bg);position:relative;padding:4rem 2.5rem}
#outcomeCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.outcome-inner{
  position:relative;z-index:2;
  max-width:1100px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
}
.outcome-top{text-align:center}
.ot-tag{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;margin-bottom:.8rem;
}
.ot-h2{
  font-family:var(--head);font-size:clamp(1.6rem,3.5vw,2.6rem);
  font-weight:800;line-height:1.1;display:inline-block;
}
.chaos-word{
  color:rgba(255,80,80,.6);position:relative;
  text-decoration:line-through;text-decoration-style:wavy;
  text-decoration-color:rgba(255,80,80,.4);
}
.ot-arrow{
  font-size:2rem;color:var(--accent-b);
  display:block;margin:.4rem 0;
  animation:bounceDown .8s ease-in-out infinite alternate;
}
@keyframes bounceDown{from{transform:translateY(0)}to{transform:translateY(6px)}}
.ot-after{color:var(--text2)}
.outcome-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:0;width:100%;
  border:1px solid var(--border2);border-radius:16px;overflow:hidden;
}
.og-col{padding:2rem;display:flex;flex-direction:column;gap:1rem}
.og-before{background:rgba(120,30,30,.06)}
.og-after{background:rgba(30,111,76,.06)}
.ogc-label{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;margin-bottom:.2rem;
}
.og-before .ogc-label{color:rgba(255,120,120,.7)}
.og-divider{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.5rem 1rem;background:rgba(30,111,76,.04);
  border-left:1px solid var(--border2);border-right:1px solid var(--border2);
  gap:1rem;
}
.ogd-line{width:1px;flex:1;background:linear-gradient(to bottom,transparent,var(--accent),transparent);position:relative;overflow:hidden}
.ogd-particle{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-b);box-shadow:0 0 8px var(--accent-g);
  animation:particleFlow 2s linear infinite;
}
@keyframes particleFlow{from{top:-10px;opacity:0}20%{opacity:1}80%{opacity:.8}to{top:100%;opacity:0}}
.ogd-symbol{font-size:1.4rem;color:var(--accent-b);flex-shrink:0}
.ogc-item{
  display:flex;align-items:flex-start;gap:.8rem;
  opacity:0;transform:translateX(-16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.og-after .ogc-item{transform:translateX(16px)}
.ogc-item.revealed{opacity:1;transform:translateX(0)}
.ogc-item svg{
  width:36px;height:36px;padding:8px;flex-shrink:0;
  border-radius:50%;border:1px solid;
}
.ogc-bad svg{color:rgba(255,100,100,.7);border-color:rgba(255,100,100,.2);background:rgba(150,30,30,.08)}
.ogc-good svg{color:var(--accent-b);border-color:rgba(30,111,76,.3);background:rgba(30,111,76,.08)}
.ogc-item div strong{display:block;font-size:.88rem;font-weight:600;color:var(--text2);margin-bottom:.15rem}
.ogc-item div span{font-size:.75rem;color:var(--dim);line-height:1.4}
@media(max-width:700px){
  .outcome-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .og-divider{flex-direction:row;padding:.8rem;border-left:none;border-right:none;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
  .ogd-line{width:80px;height:1px;flex:none;background:linear-gradient(to right,transparent,var(--accent),transparent)}
  .ogd-particle{display:none}
}

/* ============================
   CTA
============================ */
#cta{background:var(--bg2)}
#ctaCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-body{position:relative;z-index:2;text-align:center;max-width:640px}
.cta-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-b);font-weight:600;margin-bottom:1rem}
.cta-h2{font-family:var(--head);font-size:clamp(2rem,5vw,3.6rem);font-weight:800;line-height:1.1;margin-bottom:1rem}
.cta-sub{color:var(--dim);margin-bottom:2.5rem;line-height:1.7}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================
   FOOTER
============================ */
#footer{
  scroll-snap-align:start;
  background:#060100;border-top:1px solid var(--border2);
  padding:3rem 2.5rem 2rem;min-height:auto;
}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand .footer-logo{height:80px;object-fit:contain;filter:brightness(1.1) drop-shadow(0 0 10px rgba(255,255,255,.15));margin-bottom:1rem; max-width:280px;}
.footer-brand p{font-size:.82rem;color:var(--dim2);line-height:1.65;max-width:220px}
.footer-col{display:flex;flex-direction:column;gap:.5rem}
.fc-title{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-b);font-weight:700;margin-bottom:.3rem}
.footer-col a,.footer-link-btn{font-size:.83rem;color:var(--dim2);transition:color .3s;text-align:left;padding:0;text-decoration:none}
.footer-col a:hover,.footer-link-btn:hover{color:var(--accent-b)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  padding-top:1.5rem;border-top:1px solid var(--border2);
  font-size:.7rem;color:var(--dim2);
}
.footer-seo{font-size:.65rem;color:rgba(230,232,230,.18)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.3rem}
}

/* ============================
   SECTION ZOOM ANIMATIONS
============================ */
/* Browser mock subtle breathe after built */
@keyframes mockBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.browser-mock{animation:mockBreathe 6s ease-in-out 3s infinite}

/* BIC satellites zoom pulse */
@keyframes satPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.bic-sat.show svg{animation:satPulse 3s ease-in-out infinite}
.bs-top.show svg{animation-delay:0s}
.bs-right.show svg{animation-delay:.75s}
.bs-bottom.show svg{animation-delay:1.5s}
.bs-left.show svg{animation-delay:2.25s}

/* Outcome item zoom-breathe after reveal */
@keyframes itemBreathe{0%,100%{transform:scale(1) translateX(0)}50%{transform:scale(1.025) translateX(0)}}
.ogc-item.zoom-active{animation:itemBreathe 4s ease-in-out infinite}

/* Hero-right parallax override fix */
.hero-right:hover{animation-play-state:paused}

/* Mobile hero right visible */
@media(max-width:900px){.hero-right{display:none;animation:none}}

.outcome-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-b);font-weight:600}
.outcome-h2{font-family:var(--head);font-size:clamp(1.8rem,4vw,3rem);font-weight:800}
.chaos-s{text-decoration:line-through;text-decoration-color:rgba(255,80,80,.5);color:var(--dim)}
.outcome-split{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:0;width:100%;max-width:900px;
  border:1px solid var(--border2);border-radius:16px;overflow:hidden;
  min-height:260px;
}
.os-before,.os-after{
  padding:2rem;opacity:0;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.os-before{background:rgba(150,30,30,.05);transform:translateX(-20px)}
.os-after{background:rgba(30,111,76,.05);transform:translateX(20px)}
.os-before.show,.os-after.show{opacity:1;transform:translateX(0)}
.os-head{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:1rem}
.osbefore-head{color:rgba(255,120,120,.7)}
.osafter-head{color:var(--accent-b)}
.os-items{display:flex;flex-direction:column;gap:.6rem}
.os-item{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.os-item svg{width:14px;height:14px;flex-shrink:0;stroke-width:2.5}
.os-bad{color:var(--dim)}
.os-bad svg{color:rgba(255,120,120,.7)}
.os-good{color:var(--text)}
.os-good svg{color:var(--accent-b)}
.os-divider{
  display:flex;align-items:center;justify-content:center;
  padding:.5rem;background:rgba(30,111,76,.04);
  border-left:1px solid var(--border2);border-right:1px solid var(--border2);
}
.osd-arrow{font-size:1.4rem;color:var(--accent-b);line-height:1}
@media(max-width:600px){
  .outcome-split{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .os-divider{padding:1rem;border-left:none;border-right:none;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
  .osd-arrow::before{content:'↓'}
  .osd-arrow{font-size:1rem}
}

/* ============================
   CONTACT
============================ */
#contact{background:var(--bg1)}
.contact-body{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;
  max-width:1100px;width:100%;
}
.contact-left h2{font-family:var(--head);font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-bottom:1rem;line-height:1.1}
.contact-left p{color:var(--dim);margin-bottom:2rem;line-height:1.7}
.contact-info{display:flex;flex-direction:column;gap:.8rem}
.ci-item{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.2rem;border:1px solid var(--border2);border-radius:10px;
  background:rgba(30,111,76,.04);transition:all .3s var(--ease);
}
.ci-item:hover{border-color:var(--accent);background:var(--accent-g2);transform:translateX(4px)}
.ci-icon{
  width:40px;height:40px;border-radius:8px;
  border:1px solid var(--border);background:rgba(30,111,76,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-b);
}
.ci-icon svg{width:18px;height:18px}
.ci-lbl{font-size:.65rem;color:var(--dim2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}
.ci-val{font-size:.9rem;font-weight:600;color:var(--text2)}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.cf-group{display:flex;flex-direction:column;gap:.4rem}
.cf-group label{font-size:.75rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.cf-group input,.cf-group select,.cf-group textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--border2);
  border-radius:8px;padding:.8rem 1rem;color:var(--text);
  font-family:var(--body);font-size:.9rem;
  transition:border-color .3s;outline:none;resize:none;
  appearance:none;-webkit-appearance:none;
}
.cf-group input:focus,.cf-group select:focus,.cf-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-g2)}
.cf-group input::placeholder,.cf-group textarea::placeholder{color:var(--dim2)}
.cf-group select option{background:#0e0201;color:var(--text)}
.cf-note{font-size:.72rem;color:var(--dim2);text-align:center;margin-top:-.3rem}
@media(max-width:900px){.contact-body{grid-template-columns:1fr;gap:2rem}}

/* ============================
   CTA
============================ */
#cta{background:var(--bg2)}
#ctaCanvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-body{position:relative;z-index:2;text-align:center;max-width:640px}
.cta-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-b);font-weight:600;margin-bottom:1rem}
.cta-h2{font-family:var(--head);font-size:clamp(2rem,5vw,3.6rem);font-weight:800;line-height:1.1;margin-bottom:1rem}
.cta-sub{color:var(--dim);margin-bottom:2.5rem;line-height:1.7}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================
   FOOTER
============================ */
#footer{
  scroll-snap-align:start;
  background:#060100;border-top:1px solid var(--border2);
  padding:3rem 2.5rem 2rem;min-height:auto;
}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand .footer-logo{height:36px;object-fit:contain;filter:brightness(.85);margin-bottom:1rem}
.footer-brand p{font-size:.82rem;color:var(--dim2);line-height:1.65;max-width:220px}
.footer-col{display:flex;flex-direction:column;gap:.5rem}
.fc-title{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-b);font-weight:700;margin-bottom:.3rem}
.footer-col a,.footer-link-btn{font-size:.83rem;color:var(--dim2);transition:color .3s;text-align:left;padding:0}
.footer-col a:hover,.footer-link-btn:hover{color:var(--accent-b)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  padding-top:1.5rem;border-top:1px solid var(--border2);
  font-size:.7rem;color:var(--dim2);
}
.footer-seo{font-size:.65rem;color:rgba(230,232,230,.18)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.3rem}
}

/* ============================================
   HERO — 3D VISUAL & ANIMATION ENHANCEMENTS
   (Scoped ONLY to hero section)
============================================ */

/* 3D perspective container */
.hero-right{
  perspective:900px;
  perspective-origin:50% 50%;
}
.hero-visual{
  transform-style:preserve-3d;
  transition:transform .08s linear;
  will-change:transform;
}

/* Rings with 3D tilt planes */
.hv-r1{animation:hring3d1 9s linear infinite}
.hv-r2{animation:hring3d2 14s linear infinite reverse}
.hv-r3{animation:hring3d3 20s linear infinite}
@keyframes hring3d1{
  0%  {transform:translate(-50%,-50%) rotateZ(0deg) rotateX(14deg)}
  100%{transform:translate(-50%,-50%) rotateZ(360deg) rotateX(14deg)}
}
@keyframes hring3d2{
  0%  {transform:translate(-50%,-50%) rotateZ(0deg) rotateX(-9deg) rotateY(6deg)}
  100%{transform:translate(-50%,-50%) rotateZ(-360deg) rotateX(-9deg) rotateY(6deg)}
}
@keyframes hring3d3{
  0%  {transform:translate(-50%,-50%) rotateZ(0deg) rotateY(10deg)}
  100%{transform:translate(-50%,-50%) rotateZ(360deg) rotateY(10deg)}
}

/* Core: 3D depth pulse */
.hv-core{
  transform-style:preserve-3d;
  animation:corePulse3d 5s ease-in-out infinite;
}
@keyframes corePulse3d{
  0%,100%{transform:translate(-50%,-50%) scale(1) translateZ(0);
    box-shadow:0 0 40px var(--accent-g),inset 0 0 20px var(--accent-g2)}
  50% {transform:translate(-50%,-50%) scale(1.07) translateZ(12px);
    box-shadow:0 0 80px rgba(30,111,76,.55),inset 0 0 30px var(--accent-g),0 0 100px rgba(37,164,110,.15)}
}

/* Nodes: staggered 3D float once visible */
.hv-node{transform-style:preserve-3d;will-change:transform,opacity}
.hv-n1.show{animation:nodeFloat3d1 5s ease-in-out infinite}
.hv-n2.show{animation:nodeFloat3d2 6s ease-in-out 1s infinite}
.hv-n3.show{animation:nodeFloat3d3 5.5s ease-in-out .5s infinite}
@keyframes nodeFloat3d1{
  0%,100%{transform:translateX(-50%) translateY(0) translateZ(0) rotateY(0deg)}
  50%    {transform:translateX(-50%) translateY(-10px) translateZ(14px) rotateY(8deg)}
}
@keyframes nodeFloat3d2{
  0%,100%{transform:translateY(-50%) translateX(0) translateZ(0) rotateX(0deg)}
  50%    {transform:translateY(-50%) translateX(6px) translateZ(12px) rotateX(-6deg)}
}
@keyframes nodeFloat3d3{
  0%,100%{transform:translateX(-50%) translateY(0) translateZ(0) rotateY(0deg)}
  50%    {transform:translateX(-50%) translateY(10px) translateZ(14px) rotateY(-8deg)}
}

/* Node icon hover */
.hv-node svg{transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s}
.hv-node:hover svg{
  box-shadow:0 0 28px var(--accent-g),0 0 6px rgba(37,164,110,.6);
  border-color:var(--accent-b);
  transform:scale(1.18) translateZ(8px);
}
.hv-node span{transition:color .3s}
.hv-node:hover span{color:var(--accent-b)}

/* Scan-line sweep over hero visual */
.hero-visual::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,164,110,.6),transparent);
  animation:hvScan 4s linear infinite;
  top:0;pointer-events:none;z-index:10;opacity:.45;
}
@keyframes hvScan{
  0%  {top:0%;opacity:0}
  5%  {opacity:.45}
  95% {opacity:.35}
  100%{top:100%;opacity:0}
}

/* CTA — ripple element */
.btn-ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.22);
  transform:scale(0);
  animation:btnRippleAnim .55s ease-out forwards;
  pointer-events:none;
}
@keyframes btnRippleAnim{to{transform:scale(3.5);opacity:0}}

/* Primary button enhanced glow */
.btn-primary:hover{
  box-shadow:0 0 40px rgba(37,164,110,.55),0 8px 32px rgba(37,164,110,.25);
  transform:translateY(-3px) scale(1.02);
}

/* Outline button gradient follow cursor */
.btn-outline{position:relative;overflow:hidden}
.btn-outline::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(30,111,76,.14) 0%,transparent 65%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.btn-outline:hover::after{opacity:1}
.btn-outline:hover{
  border-color:var(--accent-b);color:var(--accent-b);
  box-shadow:0 0 20px rgba(30,111,76,.2);
  transform:translateY(-2px);
}

/* Stats cards — 3D tilt prepared by JS */
.hero-stat{
  transform-style:preserve-3d;
  transition:transform .15s var(--ease),border-color .3s,box-shadow .3s;
  will-change:transform;cursor:default;
}
.hero-stat:hover{
  border-color:var(--accent-b);
  box-shadow:0 10px 40px rgba(30,111,76,.3),0 0 0 1px rgba(37,164,110,.2);
}
/* Value glow breathe */
.hs-val{animation:valGlow 3s ease-in-out infinite}
@keyframes valGlow{
  0%,100%{text-shadow:0 0 18px rgba(30,111,76,.45)}
  50%    {text-shadow:0 0 36px rgba(37,164,110,.75),0 0 60px rgba(30,111,76,.2)}
}

/* Hero headline words — clip-path reveal */
.hero-word{
  display:block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .75s var(--ease);
}
.hero-word.word-visible{clip-path:inset(0 0% 0 0)}

/* Mobile: disable heavy 3D for performance */
@media(max-width:900px){
  .hero-visual{transform:none !important}
  .hero-right{perspective:none}
  .hv-node.show{animation:none;opacity:1}
  .hero-word{clip-path:inset(0 0% 0 0)}
}

/* ============================================
   FULL MOBILE RESPONSIVE SYSTEM
   Breakpoints: 900px | 600px | 400px
============================================ */

/* ── 1. GLOBAL OVERFLOW LOCK ── */
html{max-width:100vw;overflow-x:hidden}
*{max-width:100%}
img,svg,canvas{max-width:100%}

/* ── 2. PANEL BASE — tighter padding on mobile ── */
@media(max-width:900px){
  .panel{padding:5rem 1.5rem 2.5rem}
}
@media(max-width:600px){
  .panel{padding:4.5rem 1.2rem 2rem}
}

/* ── 3. NAVBAR ── */
@media(max-width:768px){
  #navbar{padding:.5rem 1.2rem}
  .nav-logo img{height:48px}
  /* Hide desktop CTA on very small screens, hamburger is enough */
  .nav-cta{display:none}
}
@media(max-width:480px){
  #navbar{padding:.4rem 1rem}
}

/* ── 4. HERO SECTION ── */
@media(max-width:900px){
  #hero{padding-top:4.5rem}
  .hero-body{
    grid-template-columns:1fr;
    text-align:center;
    gap:2rem;
  }
  .hero-h1{font-size:clamp(2rem,8vw,3rem)}
  .hero-sub{max-width:100%;margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center;flex-wrap:wrap;gap:.8rem}
  .hero-meta{justify-content:center;gap:.6rem;width:100%}
  .hero-right{display:none}
  /* Word reveal already open on mobile */
  .hero-word{clip-path:inset(0 0% 0 0)}
}
/* Stats cards — equal width, never overflow */
@media(max-width:900px){
  .hero-stat{
    flex:1 1 calc(33% - .6rem);
    min-width:80px;
    align-items:center;
  }
  .hs-val{font-size:1.6rem}
  .hero-stat .hs-label{font-size:.62rem;text-align:center}
}
@media(max-width:480px){
  .hero-meta{gap:.5rem}
  .hero-stat{padding:.5rem .7rem;min-width:72px}
  .hs-val{font-size:1.4rem}
}
/* CTA buttons full-width on tiny screens */
@media(max-width:400px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{width:100%;justify-content:center;text-align:center}
}

/* ── 5. PROBLEM SECTION ── */
@media(max-width:900px){
  .problem-body{grid-template-columns:1fr;gap:2rem}
  .problem-nodes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.8rem;height:auto;
    position:static;
  }
  /* Keep items in static grid BUT preserve floating animations */
  .pn-item{
    position:static;
    /* clear desktop absolute positions */
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  }
  /* Floating animations still run — do NOT kill them */
  .pn-item.show{opacity:1;scale:1}
  /* pn-2 and pn-6 had translateX(-50%) for centering — clear that since grid handles it */
  .pn-2,.pn-6{transform:none}
  /* Restore floating for ALL items */
  .pn-item[data-float="1"].show{animation:pnFloat1 4s ease-in-out infinite}
  .pn-item[data-float="2"].show{animation:pnFloat2 5s ease-in-out infinite}
  .pn-item[data-float="3"].show{animation:pnFloat1 4.5s ease-in-out infinite reverse}
  .pn-item[data-float="4"].show{animation:pnFloat2 3.8s ease-in-out infinite}
  .pn-item[data-float="5"].show{animation:pnFloat1 5.2s ease-in-out infinite reverse}
  .pn-item[data-float="6"].show{animation:pnFloat2 4.2s ease-in-out infinite}
  .pn-2.show,.pn-6.show{animation:pnFloat3 4.5s ease-in-out infinite}
  .pn-item svg{width:36px;height:36px;padding:8px}
}
@media(max-width:600px){
  .problem-nodes{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .pn-item span{font-size:.55rem}
  .ps-conclusion em{font-size:1.2rem}
}
@media(max-width:400px){
  .problem-nodes{grid-template-columns:repeat(2,1fr)}
}

/* ── 6. DIGITAL FOUNDATION ── */
@media(max-width:900px){
  /* Service sections: top-align content so absolute service-tag doesn't clash */
  #foundation,#automation,#bic{
    justify-content:flex-start;
    padding-top:6rem;
  }
  .foundation-body{grid-template-columns:1fr;gap:2rem}
  .foundation-left .service-desc{max-width:100%}
  .browser-mock{width:100%;max-width:480px;margin:0 auto}
  /* Service tag: keep absolute but push it higher within the padded top */
  .service-tag{top:3.5rem;left:1.5rem;font-size:.6rem;letter-spacing:.15em}
}
@media(max-width:600px){
  #foundation,#automation,#bic{padding-top:5.5rem}
  .service-heading{font-size:clamp(1.8rem,7vw,2.4rem)}
  .service-desc{font-size:.88rem}
  .service-tag{top:3rem;left:1.2rem}
}

/* ── 7. AI AUTOMATION — MOBILE/TABLET ── */
@media(max-width:900px){
  .auto-body{gap:1.2rem;width:100%}
  #automation .auto-pipeline{
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0 0 .6rem;
    gap:0;
    width:100%;
    scrollbar-width:none;
    justify-content:flex-start;
    align-items:flex-start;
  }
  #automation .auto-pipeline::-webkit-scrollbar{display:none}

  /* Each node = exactly 1/3 of the screen width → 3 perfectly fit */
  #automation .ap-node{
    flex:0 0 calc(33.333% - 6px) !important;
    width:calc(33.333% - 6px) !important;
    min-width:0 !important;
    max-width:none !important;
    flex-direction:column !important;
    align-items:center;
    text-align:center;
    flex-shrink:0;
  }
  #automation .ap-icon{width:44px;height:44px;border-radius:10px}
  #automation .ap-icon svg{width:18px;height:18px}
  #automation .ap-label{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #automation .ap-desc{display:none !important}

  /* Thin connector — 8px wide, 1px line */
  #automation .ap-connector{
    flex:0 0 8px !important;
    min-width:8px !important;
    max-width:8px;
    height:auto;
    display:flex;
    align-items:center;
    border:none !important;
  }
  /* Override 768px rule that makes ap-line 24px tall */
  #automation .ap-line{
    flex:none !important;
    height:1px !important;
    width:8px !important;
    background:rgba(30,111,76,.3) !important;
    position:relative;
    overflow:hidden;
  }
  #automation .ap-pulse{
    height:1px !important;
  }

  /* Functions row */
  .auto-functions{gap:.5rem;flex-wrap:wrap;justify-content:center}
  .af-item{font-size:.72rem;padding:.42rem .85rem}
}

/* BIC — keep layout correct on mobile */
@media(max-width:900px){
  .bic-body{grid-template-columns:1fr;gap:2rem;align-items:center}
  .bic-hub{width:280px;height:280px;margin:0 auto;flex-shrink:0}
  .bc-r1{width:80px;height:80px}
  .bc-r2{width:115px;height:115px}
  .bc-r3{width:150px;height:150px}
}
@media(max-width:480px){
  .bic-hub{width:230px;height:230px}
  .bc-r1{width:65px;height:65px}
  .bc-r2{width:90px;height:90px}
  .bc-r3{width:120px;height:120px}
  .bic-sat svg{width:32px;height:32px;padding:7px}
  .bic-sat span{font-size:.52rem}
}

/* ── 9. CLIENTS ── */
@media(max-width:600px){
  .clients-header h2{font-size:clamp(1.5rem,6vw,2rem)}
  .cp-panel{padding:1.5rem}
  .cp-story{font-size:1rem}
  .clients-panel-wrap{max-width:100%}
}

/* ── 10. TRANSFORMATION / OUTCOME ── */
@media(max-width:800px){
  .outcome-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .og-divider{
    flex-direction:row;padding:.7rem 1rem;
    border-left:none;border-right:none;
    border-top:1px solid var(--border2);
    border-bottom:1px solid var(--border2);
    gap:.8rem;
  }
  .ogd-line{
    width:80px;height:1px;flex:none;
    background:linear-gradient(to right,transparent,var(--accent),transparent);
  }
  .ogd-particle{display:none}
  .ogd-symbol{transform:rotate(90deg)}
  .og-col{padding:1.2rem}
}
@media(max-width:480px){
  .ot-h2{font-size:1.5rem}
  .ogc-item div strong{font-size:.82rem}
  .ogc-item div span{font-size:.7rem}
}

/* ── 11. CONTACT ── */
@media(max-width:900px){
  .contact-body{grid-template-columns:1fr;gap:2rem}
  .contact-left h2{font-size:clamp(1.8rem,6vw,2.4rem)}
}
@media(max-width:600px){
  .cf-group input,.cf-group select,.cf-group textarea{font-size:.88rem;padding:.7rem .9rem}
  .ci-item{padding:.8rem 1rem}
  .contact-info{gap:.6rem}
}

/* ── 12. CTA SECTION ── */
@media(max-width:600px){
  .cta-h2{font-size:clamp(1.6rem,7vw,2.2rem)}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn-primary,
  .cta-actions .btn-outline{width:100%;max-width:320px;justify-content:center}
}

/* ── 13. FOOTER ── */
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:1.5rem}
}
@media(max-width:600px){
  #footer{padding:2rem 1.2rem 1.5rem}
  .footer-top{grid-template-columns:1fr;gap:1.2rem}
  .footer-brand{margin-bottom:.5rem}
  .footer-bottom{flex-direction:column;gap:.3rem;text-align:center}
  .footer-seo{display:none}
}

/* ── 14. WHATSAPP FAB ── */
@media(max-width:900px){
  .wa-fab{bottom:1.2rem;right:1.2rem;padding:.7rem 1rem .7rem .8rem}
}
@media(max-width:600px){
  .wa-fab-label{display:none}
  .wa-fab{padding:.85rem;border-radius:50%}
}

/* ── 15. REVEAL-CHIP & TYPOGRAPHY ── */
@media(max-width:600px){
  .reveal-chip{font-size:.68rem;margin-bottom:.9rem}
  .service-list li{font-size:.84rem}
  .btn-primary,.btn-outline{font-size:.88rem;padding:.8rem 1.6rem}
  .btn-xl{padding:.85rem 1.8rem;font-size:.95rem}
}

/* ── 16. SCROLL SNAP — relax on very small screens ── */
@media(max-width:480px){
  #scroller{scroll-snap-type:y proximity}
}

/* ============================================
   PROBLEM SECTION — REDESIGNED UI
   (Scoped strictly to #problem)
============================================ */

/* Diagonal slide override for problem section */
#problem [data-slide="left"]{transform:translateX(-52px) translateY(32px);opacity:0}
#problem [data-slide="left"].revealed{transform:translateX(0) translateY(0);opacity:1}
#problem [data-slide="right"]{transform:translateX(52px) translateY(-32px);opacity:0}
#problem [data-slide="right"].revealed{transform:translateX(0) translateY(0);opacity:1}

/* Status cards */
.ps-card{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.2rem;
  border:1px solid rgba(30,111,76,.14);border-radius:12px;
  background:rgba(30,111,76,.04);
  position:relative;overflow:hidden;
  opacity:0;transform:translateX(-32px) translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             border-color .3s,box-shadow .3s;
  cursor:default;
}
.ps-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 0% 50%,rgba(30,111,76,.09),transparent 65%);
  opacity:0;transition:opacity .3s;
}
.ps-card:hover::before{opacity:1}
.ps-card:hover{
  border-color:rgba(30,111,76,.45);
  box-shadow:0 6px 30px rgba(30,111,76,.15),4px 4px 20px rgba(0,0,0,.3);
  transform:translateX(3px) translateY(-3px) !important;
}
.ps-card.show{opacity:1;transform:translateX(0) translateY(0)}

.ps-card-icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid rgba(30,111,76,.25);
  background:rgba(30,111,76,.08);color:var(--accent-b);
  transition:box-shadow .3s,transform .3s;
}
.ps-card:hover .ps-card-icon{
  box-shadow:0 0 18px rgba(37,164,110,.35);
  transform:scale(1.1) rotate(-4deg);
}
.ps-card-icon svg{width:20px;height:20px}
.ps-card-body{display:flex;flex-direction:column;gap:.3rem}
.ps-card-text{
  font-family:var(--head);font-size:.95rem;font-weight:600;color:var(--text2);
}

/* Status badge pulse dot */
.ps-status{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.58rem;padding:.18rem .55rem;border-radius:99px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;width:fit-content;
  border:1px solid rgba(30,200,100,.2);
  background:rgba(30,200,100,.07);color:#4ade80;
}
.ps-status::before{
  content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:statusDot 1.8s ease-in-out infinite;
}
@keyframes statusDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* Bold break callout */
.ps-break{
  padding:1.2rem 0 .5rem;
  opacity:0;transform:translateY(-10px);
  transition:opacity .7s var(--ease) .1s,transform .7s var(--ease) .1s;
}
.ps-break.show{opacity:1;transform:translateY(0)}
.ps-break-text{
  display:block;font-family:var(--head);
  font-size:clamp(1.2rem,2.5vw,1.75rem);font-weight:800;
  color:var(--text2);letter-spacing:-.01em;
}
.ps-break-bar{
  height:2px;width:0;margin-top:.5rem;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-b),transparent);
  transition:width 1s var(--ease) .25s;
}
.ps-break.show .ps-break-bar{width:100%}

/* Fragmentation warning card */
.ps-conclusion{
  padding:1.2rem 1.4rem;border-radius:14px;
  background:linear-gradient(135deg,rgba(30,111,76,.1) 0%,rgba(11,1,0,.6) 60%);
  border:1px solid rgba(30,111,76,.25);
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  font-family:var(--head);font-size:clamp(1rem,2vw,1.35rem);font-weight:700;color:var(--text2);
}
.ps-conclusion::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-b),transparent);
}
.ps-conclusion.show{opacity:1;transform:translateY(0)}
.ps-conclusion em{color:var(--accent-b);font-style:normal}
.ps-conclusion .ps-sub{
  font-size:.84rem;color:var(--dim);margin-top:.65rem;line-height:1.65;font-weight:400;font-family:var(--body);
}

/* Warning header inside conclusion */
.psc-header{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.75rem;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:rgba(255,180,60,.85);font-family:var(--body);
}
.psc-warn-icon{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,180,60,.1);border:1px solid rgba(255,180,60,.25);border-radius:6px;
  animation:warnPulse 2.5s ease-in-out infinite;
}
@keyframes warnPulse{0%,100%{box-shadow:0 0 0 rgba(255,180,60,0)}50%{box-shadow:0 0 14px rgba(255,180,60,.3)}}
.psc-warn-icon svg{width:14px;height:14px;stroke:rgba(255,180,60,.9);stroke-width:2;fill:none}

/* SVG connection lines */
.pn-connections{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}
.pn-line{
  stroke:rgba(30,111,76,.18);stroke-width:.5;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s ease,stroke .5s;
}
.pn-line-broken{
  stroke:rgba(30,111,76,.1);stroke-width:.3;
  stroke-dasharray:.05 .07;stroke-dashoffset:0;
  transition:none;
}
/* Activated state — lines draw in */
.pn-connections.lines-active .pn-line:not(.pn-line-broken){
  stroke-dashoffset:0;
  stroke:rgba(37,164,110,.3);
  animation:lineGlow 3s ease-in-out infinite;
}
@keyframes lineGlow{
  0%,100%{stroke:rgba(30,111,76,.2)}
  50%{stroke:rgba(37,164,110,.5);filter:drop-shadow(0 0 2px rgba(37,164,110,.45))}
}
/* pn-items stack above any other content */
.pn-item{z-index:1}

/* Hover on diagram icons */
.pn-item svg{transition:box-shadow .3s,color .3s,transform .3s}
.pn-item:hover svg{
  color:var(--accent-b);
  box-shadow:0 0 24px rgba(37,164,110,.5);
  transform:scale(1.15);
}
.pn-item:hover span{color:var(--accent-b)}

/* Tablet & mobile — reset absolute positioning so grid layout works */
@media(max-width:900px){
  .pn-connections{display:none}
  .ps-card:hover{transform:translateX(0) translateY(-2px) !important}
  #problem [data-slide="left"]{transform:translateX(-30px) translateY(16px);opacity:0}
  #problem [data-slide="right"]{transform:translateX(30px) translateY(-16px);opacity:0}
  /* Override desktop absolute positioning — let the CSS grid place items */
  .pn-item{
    position:static !important;
    top:auto !important;left:auto !important;
    right:auto !important;bottom:auto !important;
    transform:none;
  }
  /* Keep floating animations for items that have .show */
  .pn-item[data-float="1"].show{animation:pnFloat1 4s ease-in-out infinite}
  .pn-item[data-float="2"].show{animation:pnFloat2 5s ease-in-out infinite}
  .pn-item[data-float="3"].show{animation:pnFloat1 4.5s ease-in-out infinite reverse}
  .pn-item[data-float="4"].show{animation:pnFloat2 3.8s ease-in-out infinite}
  .pn-item[data-float="5"].show{animation:pnFloat1 5.2s ease-in-out infinite reverse}
  .pn-item[data-float="6"].show{animation:pnFloat2 4.2s ease-in-out infinite}
  .pn-2.show,.pn-6.show{animation:pnFloat3 4.5s ease-in-out infinite}
}
/* Mobile */
@media(max-width:600px){
  .ps-card{padding:.7rem .9rem;gap:.65rem}
  .ps-card-icon{width:38px;height:38px}
  .ps-card-icon svg{width:17px;height:17px}
  .ps-card-text{font-size:.88rem}
  .ps-break-text{font-size:1.1rem}
  .ps-conclusion{padding:.9rem 1rem}
  .psc-header{font-size:.62rem}
}

/* ============================================
   DIGITAL FOUNDATION — REDESIGNED LEFT COLUMN
   (Scoped strictly to #foundation)
============================================ */

/* Diagonal slide for foundation — left from bottom-left, right from top-right */
#foundation [data-slide="left"]{transform:translateX(-52px) translateY(28px);opacity:0}
#foundation [data-slide="left"].revealed{transform:translateX(0) translateY(0);opacity:1}
#foundation [data-slide="right"]{transform:translateX(52px) translateY(-28px);opacity:0}
#foundation [data-slide="right"].revealed{transform:translateX(0) translateY(0);opacity:1}

/* Eyebrow label */
.fd-eyebrow{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;margin-bottom:.9rem;
  display:flex;align-items:center;gap:.5rem;
}
.fd-eyebrow::before{content:'';width:1.5rem;height:1px;background:var(--accent-b);display:block}

/* Headline */
.fd-heading{
  font-family:var(--head);font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:1rem;
}

/* Subheading */
.fd-sub{
  font-size:.95rem;color:var(--dim);line-height:1.75;
  max-width:440px;margin-bottom:1.5rem;
}

/* Feature cards container */
.fd-features{
  display:flex;flex-direction:column;gap:.55rem;
  margin-bottom:1.8rem;
}

/* Individual feature card */
.fd-card{
  display:flex;align-items:center;gap:.9rem;
  padding:.7rem 1rem;
  border:1px solid rgba(30,111,76,.13);border-radius:10px;
  background:rgba(30,111,76,.04);
  position:relative;overflow:hidden;
  cursor:default;
  /* Staggered via opacity+transform from [data-reveal] system */
  transition:border-color .3s var(--ease),box-shadow .3s,transform .2s var(--ease);
}
.fd-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent-b);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease);
  border-radius:2px;
}
.fd-card:hover::before{transform:scaleY(1)}
.fd-card:hover{
  border-color:rgba(30,111,76,.4);
  box-shadow:0 4px 24px rgba(30,111,76,.12),4px 0 0 0 rgba(30,111,76,.06);
  transform:translateX(4px);
}

/* Per-card stagger delay (applied via inline or CSS selectors) */
.fd-card[data-fd="1"]{transition-delay:.05s}
.fd-card[data-fd="2"]{transition-delay:.1s}
.fd-card[data-fd="3"]{transition-delay:.15s}
.fd-card[data-fd="4"]{transition-delay:.2s}
.fd-card[data-fd="5"]{transition-delay:.25s}

/* The [data-reveal] system already staggers; these delays add extra spacing */
#foundation .fd-card[data-reveal]{
  opacity:0;transform:translateX(-20px) translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
    border-color .3s,box-shadow .3s;
}
#foundation .fd-card[data-fd="1"][data-reveal]{transition-delay:.1s}
#foundation .fd-card[data-fd="2"][data-reveal]{transition-delay:.2s}
#foundation .fd-card[data-fd="3"][data-reveal]{transition-delay:.3s}
#foundation .fd-card[data-fd="4"][data-reveal]{transition-delay:.4s}
#foundation .fd-card[data-fd="5"][data-reveal]{transition-delay:.5s}
#foundation .fd-card[data-reveal].revealed{opacity:1;transform:translateX(0) translateY(0)}

/* Card icon */
.fd-card-icon{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid rgba(30,111,76,.22);
  background:rgba(30,111,76,.08);color:var(--accent-b);
  transition:box-shadow .3s,transform .3s;
}
.fd-card:hover .fd-card-icon{
  box-shadow:0 0 16px rgba(37,164,110,.32);
  transform:scale(1.1) rotate(-5deg);
}
.fd-card-icon svg{width:18px;height:18px}

/* Card text */
.fd-card-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fd-card-label{
  font-size:.88rem;font-weight:600;color:var(--text2);
  font-family:var(--head);letter-spacing:-.01em;
}
.fd-card-desc{
  font-size:.72rem;color:var(--dim);line-height:1.4;
}

/* CTA button */
.fd-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.8rem;
  font-size:.92rem;
}
.fd-cta svg{width:16px;height:16px;stroke-width:2.5;transition:transform .3s var(--ease)}
.fd-cta:hover svg{transform:translateX(4px)}
.fd-cta:hover{
  box-shadow:0 0 40px rgba(37,164,110,.5),0 6px 28px rgba(30,111,76,.25);
  transform:translateY(-3px) scale(1.02);
}

/* Tablet */
@media(max-width:900px){
  #foundation [data-slide="left"]{transform:translateX(-30px) translateY(16px);opacity:0}
  #foundation [data-slide="right"]{transform:translateX(30px) translateY(-16px);opacity:0}
  .fd-sub{max-width:100%}
  .foundation-body{display:grid;grid-template-columns:1fr;gap:2rem}
  .foundation-right{max-width:480px;margin:0 auto;width:100%}
  #foundation .fd-card[data-fd="1"][data-reveal]{transition-delay:.05s}
  #foundation .fd-card[data-fd="2"][data-reveal]{transition-delay:.1s}
  #foundation .fd-card[data-fd="3"][data-reveal]{transition-delay:.15s}
  #foundation .fd-card[data-fd="4"][data-reveal]{transition-delay:.2s}
  #foundation .fd-card[data-fd="5"][data-reveal]{transition-delay:.25s}
}

/* Mobile */
@media(max-width:600px){
  .fd-heading{font-size:clamp(1.8rem,7vw,2.4rem)}
  .fd-sub{font-size:.88rem;margin-bottom:1.2rem}
  .fd-features{gap:.45rem;margin-bottom:1.4rem}
  .fd-card{padding:.6rem .85rem;gap:.7rem}
  .fd-card-icon{width:34px;height:34px}
  .fd-card-icon svg{width:15px;height:15px}
  .fd-card-label{font-size:.82rem}
  .fd-card-desc{font-size:.68rem}
  .fd-card:hover{transform:translateX(2px)}
  .fd-cta{width:100%;justify-content:center;padding:.85rem 1.4rem}
}

/* ============================================
   OUR TEAM SECTION — ENHANCED
============================================ */
#team{background:var(--bg2);perspective:1200px}

.team-body{
  display:flex;flex-direction:column;align-items:center;
  gap:2.5rem;max-width:960px;width:100%;
}

/* ── Header ── */
.team-header{text-align:center;overflow:hidden}
.team-eyebrow{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;margin-bottom:.6rem;
  opacity:0;transform:translateY(-16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.team-eyebrow.tc-in{opacity:1;transform:translateY(0)}
.team-heading{
  font-family:var(--head);font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease) .1s;
}
.team-heading.tc-in{clip-path:inset(0 0 0% 0)}

/* ── Two-column grid ── */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;width:100%}

/* ── Card ── */
.team-card{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  padding:2rem 1.5rem;
  border:1px solid var(--border2);border-radius:20px;
  background:rgba(255,255,255,.02);
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
}
.team-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(30,111,76,.09),transparent 70%);
  opacity:0;transition:opacity .4s;
}
.team-card:hover::before{opacity:1}
.team-card:hover{
  border-color:rgba(30,111,76,.38);
  box-shadow:0 16px 52px rgba(30,111,76,.16),0 0 0 1px rgba(37,164,110,.12);
}

/* Diagonal slide — left from bottom-left with rotateY, right from top-right */
#team [data-slide="left"]{
  transform:translateX(-70px) translateY(45px) rotateY(10deg) scale(.96);opacity:0
}
#team [data-slide="left"].revealed{
  transform:translateX(0) translateY(0) rotateY(0) scale(1);opacity:1
}
#team [data-slide="right"]{
  transform:translateX(70px) translateY(-45px) rotateY(-10deg) scale(.96);opacity:0
}
#team [data-slide="right"].revealed{
  transform:translateX(0) translateY(0) rotateY(0) scale(1);opacity:1
}
.team-card{transition:transform .9s var(--ease),opacity .9s var(--ease),border-color .35s,box-shadow .35s}

/* ── Photo wrapper ── */
.tc-photo-wrap{
  position:relative;width:154px;height:154px;flex-shrink:0;
}

/* Spinning accent ring behind photo */
.tc-photo-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;
  background:conic-gradient(from 0deg,var(--accent-b) 0deg,transparent 120deg,transparent 240deg,var(--accent-b) 360deg) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  animation:ringRotate 6s linear infinite;
  opacity:.45;
}
@keyframes ringRotate{to{transform:rotate(360deg)}}

/* Photo */
.tc-photo{
  width:150px;height:150px;border-radius:50%;
  object-fit:cover;object-position:top center;
  border:2px solid rgba(30,111,76,.4);
  box-shadow:0 0 36px rgba(30,111,76,.2),0 8px 32px rgba(0,0,0,.55);
  display:block;position:relative;z-index:1;
  /* Remove white image backgrounds on dark theme */
  mix-blend-mode:multiply;
  background:var(--bg2);
  animation:tcFloat-l 4.2s ease-in-out infinite;
  transition:box-shadow .4s,transform .4s;
}
/* Left card floats slightly different timing/direction to right */
.tc-float-l .tc-photo{animation-name:tcFloat-l}
.tc-float-r .tc-photo{animation-name:tcFloat-r;animation-duration:3.8s}
@keyframes tcFloat-l{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-7px) rotate(.5deg)}
}
@keyframes tcFloat-r{
  0%,100%{transform:translateY(0) rotate(.5deg)}
  50%{transform:translateY(-5px) rotate(-.5deg)}
}

/* Glowing halo */
.tc-photo-glow{
  position:absolute;inset:-14px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(37,164,110,.22),transparent 65%);
  pointer-events:none;
  animation:tcGlowPulse 4s ease-in-out infinite;
}
@keyframes tcGlowPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* Hover 3D tilt drives from JS mousemove — CSS handles glow boost */
.team-card:hover .tc-photo{
  box-shadow:0 0 60px rgba(37,164,110,.45),0 14px 44px rgba(0,0,0,.65);
}
.team-card:hover .tc-photo-ring{opacity:.85}

/* ── Info items: pre-animation state controlled by JS .tc-in class ── */
.tc-name{
  font-family:var(--head);font-size:1.25rem;font-weight:700;
  color:var(--text2);letter-spacing:-.01em;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease);
}
.tc-name.tc-in{clip-path:inset(0 0 0% 0)}

.tc-title{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.tc-title.tc-in{opacity:1;transform:translateY(0)}

.tc-bio{
  font-size:.88rem;color:var(--dim);line-height:1.65;max-width:280px;
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.tc-bio.tc-in{opacity:1;transform:translateY(0) scale(1)}

/* ── LinkedIn ── */
.tc-linkedin{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.1rem;
  border:1px solid rgba(30,111,76,.3);border-radius:99px;
  background:rgba(30,111,76,.06);color:var(--accent-b);
  font-size:.78rem;font-weight:600;text-decoration:none;
  transition:all .3s var(--ease);position:relative;overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.92);
}
.tc-linkedin.tc-in{opacity:1;transform:translateY(0) scale(1);transition:opacity .5s var(--ease) .05s,transform .5s var(--ease) .05s,border-color .3s,box-shadow .3s}
.tc-linkedin::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,rgba(37,164,110,.18),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.tc-linkedin:hover::before,.tc-linkedin:focus::before{opacity:1}
.tc-linkedin:hover{
  border-color:var(--accent-b);
  box-shadow:0 0 20px rgba(37,164,110,.35);
  transform:translateY(-2px) scale(1) !important;
}
.tc-li-icon{width:16px;height:16px;stroke-width:2}
.tc-linkedin:hover .tc-li-icon{animation:liPulse .6s ease-in-out}
@keyframes liPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.35);filter:drop-shadow(0 0 4px rgba(37,164,110,.9))}
}

/* ── Info layout ── */
.tc-info{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}

/* ── Support line ── */
.team-support{
  font-size:.85rem;color:var(--dim2);text-align:center;
  font-style:italic;letter-spacing:.02em;max-width:480px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.team-support.tc-in{opacity:1;transform:translateY(0)}

/* ── Tablet ── */
@media(max-width:900px){
  .team-grid{grid-template-columns:1fr;gap:2rem}
  #team [data-slide="left"]{transform:translateX(-40px) translateY(22px) scale(.97);opacity:0}
  #team [data-slide="left"].revealed{transform:translateX(0) translateY(0) scale(1);opacity:1}
  #team [data-slide="right"]{transform:translateX(40px) translateY(-22px) scale(.97);opacity:0}
  #team [data-slide="right"].revealed{transform:translateX(0) translateY(0) scale(1);opacity:1}
  .team-card{flex-direction:row;align-items:flex-start;gap:1.4rem;padding:1.5rem}
  .tc-photo-wrap{flex-shrink:0;width:120px;height:120px}
  .tc-photo{width:116px;height:116px}
  .tc-info{align-items:flex-start;text-align:left}
  .tc-bio{max-width:100%}
}

/* ── Mobile ── */
@media(max-width:600px){
  .team-grid{gap:1.4rem}
  .team-card{flex-direction:column;align-items:center;padding:1.5rem 1.2rem;gap:1rem}
  .tc-photo-wrap{width:130px;height:130px}
  .tc-photo{width:126px;height:126px}
  .tc-info{align-items:center;text-align:center}
  .tc-bio{max-width:100%;font-size:.84rem}
  .team-heading{font-size:clamp(1.8rem,8vw,2.4rem)}
  .team-support{font-size:.8rem}
  #team [data-slide="left"],
  #team [data-slide="right"]{transform:translateY(28px) scale(.97);opacity:0}
  #team [data-slide="left"].revealed,
  #team [data-slide="right"].revealed{transform:translateY(0) scale(1);opacity:1}
}

#team{background:var(--bg2)}

.team-body{
  display:flex;flex-direction:column;align-items:center;
  gap:2.5rem;max-width:960px;width:100%;
}

/* Header */
.team-header{text-align:center}
.team-eyebrow{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;margin-bottom:.6rem;
}
.team-heading{
  font-family:var(--head);font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
}

/* Two-column grid */
.team-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.5rem;width:100%;
}

/* Individual card */
.team-card{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  padding:2rem 1.5rem;
  border:1px solid var(--border2);border-radius:20px;
  background:rgba(255,255,255,.02);
  position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .35s;
  /* Diagonal slide via data-slide system */
}
.team-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(30,111,76,.07),transparent 70%);
  opacity:0;transition:opacity .4s;
}
.team-card:hover::before{opacity:1}
.team-card:hover{
  border-color:rgba(30,111,76,.35);
  box-shadow:0 12px 48px rgba(30,111,76,.14),0 0 0 1px rgba(37,164,110,.1);
}

/* Diagonal slide — left card from bottom-left, right from top-right */
#team [data-slide="left"]{transform:translateX(-60px) translateY(40px) rotateY(8deg);opacity:0}
#team [data-slide="left"].revealed{transform:translateX(0) translateY(0) rotateY(0deg);opacity:1}
#team [data-slide="right"]{transform:translateX(60px) translateY(-40px) rotateY(-8deg);opacity:0}
#team [data-slide="right"].revealed{transform:translateX(0) translateY(0) rotateY(0deg);opacity:1}
.team-card{transition:transform .85s var(--ease),opacity .85s var(--ease),border-color .35s,box-shadow .35s}

/* Photo wrapper */
.tc-photo-wrap{
  position:relative;width:150px;flex-shrink:0;
}
.tc-photo{
  width:150px;height:150px;border-radius:50%;
  object-fit:cover;object-position:top center;
  border:2px solid rgba(30,111,76,.35);
  box-shadow:0 0 32px rgba(30,111,76,.18),0 8px 32px rgba(0,0,0,.5);
  display:block;
  /* Continuous float */
  animation:tcFloat 4s ease-in-out infinite;
  transition:box-shadow .4s,transform .4s;
}
@keyframes tcFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.tc-photo-glow{
  position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,111,76,.18),transparent 65%);
  pointer-events:none;z-index:-1;
  animation:tcGlowPulse 4s ease-in-out infinite;
}
@keyframes tcGlowPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
/* Hover: 3D tilt + stronger glow */
.team-card:hover .tc-photo{
  box-shadow:0 0 52px rgba(37,164,110,.4),0 12px 40px rgba(0,0,0,.6);
  transform:translateY(-4px) rotateX(6deg) rotateY(-4deg);
}

/* Info block */
.tc-info{
  display:flex;flex-direction:column;align-items:center;
  gap:.5rem;text-align:center;
}
.tc-name{
  font-family:var(--head);font-size:1.25rem;font-weight:700;
  color:var(--text2);letter-spacing:-.01em;
}
.tc-title{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-b);font-weight:600;
}
.tc-bio{
  font-size:.88rem;color:var(--dim);line-height:1.65;max-width:280px;
}

/* LinkedIn button */
.tc-linkedin{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.1rem;
  border:1px solid rgba(30,111,76,.3);border-radius:99px;
  background:rgba(30,111,76,.06);color:var(--accent-b);
  font-size:.78rem;font-weight:600;
  text-decoration:none;
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.tc-linkedin::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,rgba(37,164,110,.18),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.tc-linkedin:hover::before,.tc-linkedin:focus::before{opacity:1}
.tc-linkedin:hover{
  border-color:var(--accent-b);
  box-shadow:0 0 18px rgba(37,164,110,.3),0 0 6px rgba(37,164,110,.15);
  transform:translateY(-2px);
}
.tc-li-icon{
  width:16px;height:16px;stroke-width:2;
  animation:none;
}
.tc-linkedin:hover .tc-li-icon{
  animation:liPulse .6s ease-in-out;
}
@keyframes liPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.3);filter:drop-shadow(0 0 3px rgba(37,164,110,.8))}
}

/* Support line */
.team-support{
  font-size:.85rem;color:var(--dim2);text-align:center;
  font-style:italic;letter-spacing:.02em;max-width:480px;
}

/* Stagger reveals inside each card */
#team .tc-name[data-reveal]{transition-delay:.1s}
#team .tc-title[data-reveal]{transition-delay:.2s}
#team .tc-bio[data-reveal]{transition-delay:.3s}
#team .tc-linkedin[data-reveal]{transition-delay:.4s}

/* Tablet */
@media(max-width:900px){
  .team-grid{grid-template-columns:1fr;gap:2rem}
  #team [data-slide="left"]{transform:translateX(-40px) translateY(20px);opacity:0}
  #team [data-slide="left"].revealed{transform:translateX(0) translateY(0);opacity:1}
  #team [data-slide="right"]{transform:translateX(40px) translateY(-20px);opacity:0}
  #team [data-slide="right"].revealed{transform:translateX(0) translateY(0);opacity:1}
  .team-card{flex-direction:row;align-items:flex-start;gap:1.4rem;padding:1.5rem}
  .tc-photo-wrap{flex-shrink:0}
  .tc-photo{width:120px;height:120px}
  .tc-info{align-items:flex-start;text-align:left}
  .tc-bio{max-width:100%}
}

/* Mobile */
@media(max-width:600px){
  .team-card{flex-direction:column;align-items:center;padding:1.5rem 1.2rem}
  .tc-info{align-items:center;text-align:center}
  .tc-photo{width:110px;height:110px}
  .team-heading{font-size:clamp(1.8rem,8vw,2.4rem)}
  .team-support{font-size:.8rem}
  #team [data-slide="left"],#team [data-slide="right"]{transform:translateY(24px);opacity:0}
  #team [data-slide="left"].revealed,#team [data-slide="right"].revealed{transform:translateY(0);opacity:1}
}

/* ============================================
   GLOBAL BI-DIRECTIONAL SCROLL REVEALS
   (Footer, Clients carousel, Sections seamless)
============================================ */

/* ── Seamless section backgrounds ── */
#hero,#problem,#foundation,#automation,#bic,#clients,
#outcome,#team,#contact,#cta,footer{
  background:var(--bg);
}
/* Keep subtle bg tint difference for visual depth using pseudo-element overlay */
#problem::before,#bic::before,#contact::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.012);pointer-events:none;z-index:0;
}
#foundation::before,#clients::before,#cta::before,#team::before{
  content:'';position:absolute;inset:0;
  background:rgba(30,111,76,.018);pointer-events:none;z-index:0;
}

/* ── Clients carousel panels ── */
.clients-panel-wrap{
  opacity:0;transform:translateY(28px) scale(.98);
  transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s;
}
.clients-panel-wrap.cp-wrap-in{opacity:1;transform:translateY(0) scale(1)}

.cp-panel .cp-num{
  opacity:0;transform:translateX(-24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.cp-panel .cp-type{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s;
}
.cp-panel .cp-story{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease) .2s,transform .55s var(--ease) .2s;
}
.cp-panel .cp-result{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease) .32s,transform .55s var(--ease) .32s;
}
/* Active state — driven by JS adding .cp-active on the visible panel */
.cp-panel.cp-active .cp-num{opacity:1;transform:translateX(0)}
.cp-panel.cp-active .cp-type{opacity:1;transform:translateY(0)}
.cp-panel.cp-active .cp-story{opacity:1;transform:translateY(0)}
.cp-panel.cp-active .cp-result{opacity:1;transform:translateY(0)}
/* Initial panel starts active once the section enters */
.cp-nav{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;
}
.cp-nav.cp-wrap-in{opacity:1;transform:translateY(0)}

/* ── Footer ── */
.footer-brand{
  opacity:0;transform:translateX(-36px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.footer-brand.ft-in{opacity:1;transform:translateX(0)}

.footer-col:nth-child(2){
  opacity:0;transform:translateY(28px);
  transition:opacity .55s var(--ease) .12s,transform .55s var(--ease) .12s;
}
.footer-col:nth-child(2).ft-in{opacity:1;transform:translateY(0)}

.footer-col:nth-child(3){
  opacity:0;transform:translateY(28px);
  transition:opacity .55s var(--ease) .24s,transform .55s var(--ease) .24s;
}
.footer-col:nth-child(3).ft-in{opacity:1;transform:translateY(0)}

.footer-col:nth-child(4){
  opacity:0;transform:translateX(36px);
  transition:opacity .55s var(--ease) .36s,transform .55s var(--ease) .36s;
}
.footer-col:nth-child(4).ft-in{opacity:1;transform:translateX(0)}

.footer-bottom{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;
}
.footer-bottom.ft-in{opacity:1;transform:translateY(0)}