/* ===== Growing Now — brand system (warm / playful / premium) ===== */
:root{
  --green:#3FAE4A; --green-d:#2E8C3A; --green-l:#7FCB87;
  --blue:#1F66B0;  --blue-l:#2E8BD6;  --navy:#16235C;
  --orange:#F7941E;--orange-d:#E07E0C;
  --cream:#FBF7EF; --cream2:#F4ECDD; --sand:#EADFCB;
  --ink:#272A33;   --ink-soft:#5C616E;
  --card:#FFFFFF;
  --glass: rgba(255,255,255,0.55);
  --glass-brd: rgba(255,255,255,0.7);
  --shadow: 0 18px 50px -18px rgba(40,40,60,.35);
  --shadow-sm: 0 8px 24px -12px rgba(40,40,60,.3);
  --r-lg:30px; --r-md:22px; --r-sm:14px;
  --font-display:'Fredoka', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --fw-disp:600;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); font-weight:var(--fw-disp); letter-spacing:-.01em; line-height:1.05;}
::selection{background:var(--orange);color:#fff}

/* fixed canvas background */
#bg-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
#root{position:relative; z-index:1;}

/* glassmorphism */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
}
.glass-soft{
  background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,255,255,.6);
}

/* buttons */
.btn{
  font-family:var(--font-display); font-weight:600; cursor:pointer; border:none;
  display:inline-flex; align-items:center; gap:.55em; border-radius:999px;
  padding:.85em 1.5em; font-size:1.02rem; transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s, filter .25s;
  text-decoration:none; white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--green),var(--blue)); box-shadow:0 12px 28px -10px rgba(31,102,176,.6);}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); filter:saturate(1.1) brightness(1.04); box-shadow:0 18px 36px -12px rgba(31,102,176,.7);}
.btn-orange{color:#fff; background:linear-gradient(135deg,var(--orange),var(--orange-d)); box-shadow:0 12px 28px -10px rgba(247,148,30,.6);}
.btn-orange:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 18px 36px -12px rgba(247,148,30,.7);}
.btn-ghost{ background:var(--glass); border:1px solid var(--glass-brd); color:var(--ink); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.btn-ghost:hover{transform:translateY(-3px); background:rgba(255,255,255,.75)}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

/* hero entrance */
@keyframes heroPop{from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)}}
.hero-pop{animation:heroPop .8s cubic-bezier(.2,.7,.2,1) both;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.floaty{animation:floaty 6s ease-in-out infinite;}

/* section rhythm */
.section{padding:clamp(64px,9vw,128px) 0; position:relative;}
.container{width:min(1200px,92vw); margin:0 auto;}
.eyebrow{font-family:var(--font-display); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem;}

/* pill chips */
.chip{display:inline-flex; align-items:center; gap:.4em; padding:.4em .85em; border-radius:999px; font-weight:700; font-size:.82rem;}

/* agent card */
.agent-card{ position:relative; border-radius:var(--r-lg); cursor:pointer; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1.2), box-shadow .35s; }
.agent-card:hover{transform:translateY(-12px);}

/* portrait circular clip */
.portrait-clip{
  position:relative; border-radius:50%; overflow:hidden; flex-shrink:0;
}
.portrait-clip img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}

.agent-portrait{ display:block; }

/* modal */
.modal-back{position:fixed; inset:0; z-index:80; background:rgba(20,24,40,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px;}
@keyframes modalIn{from{opacity:0; transform:translateY(30px) scale(.96)} to{opacity:1; transform:none}}
.modal-card{animation:modalIn .4s cubic-bezier(.2,.8,.2,1.1) both;}

/* scrollbar for chat */
.scroll-thin::-webkit-scrollbar{width:8px}
.scroll-thin::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16); border-radius:8px}

/* marquee */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex; gap:48px; width:max-content; animation:marquee 32s linear infinite;}

/* utility */
.grad-text{background:linear-gradient(120deg,var(--green),var(--blue) 55%,var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.no-scroll{overflow:hidden}

/* chat helpers */
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.typing-dot{width:7px;height:7px;border-radius:99px;background:var(--orange);display:inline-block;animation:typing 1.1s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(247,148,30,.5)}50%{box-shadow:0 0 0 8px rgba(247,148,30,0)}}
@keyframes fadeQ{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-q{animation:fadeQ .45s cubic-bezier(.2,.8,.2,1) both;}
.nav-link:hover{background:rgba(0,0,0,.05)}

/* responsive */
@media(max-width:1080px){
  .hero-cluster{display:none !important;}
  .hero-grid{grid-template-columns:1fr !important;}
}
@media(max-width:900px){
  .squad-grid,.svc-grid,.tst-grid{grid-template-columns:1fr 1fr !important;}
  .proc-grid{grid-template-columns:1fr 1fr !important;}
  .about-grid,.foot-grid{grid-template-columns:1fr !important;}
  .modal-grid{grid-template-columns:1fr !important;}
  .modal-grid > div:first-child{display:none !important;}
  .nav-links{display:none !important;}
  .menu-btn{display:grid !important;}
}
@media(max-width:620px){
  .squad-grid,.svc-grid,.tst-grid,.proc-grid{grid-template-columns:1fr !important;}
  .nav-cta-text{display:none;}
}