/* ============ Base tokens ============ */
:root {
  --background: 36 40% 98%;
  --foreground: 222 30% 14%;
  --card: #ffffff;
  --muted: #f1efeb;
  --muted-foreground: 220 12% 45%;
  --border: 220 16% 90%;
  --brand: 158 64% 42%;
  --brand-ink: 158 55% 28%;
  --brand-foreground: 0 0% 100%;
  --brand-soft: 158 60% 94%;
  --accent: 22 89% 55%;
  --accent-soft: 24 90% 92%;
  --radius: 1rem;
  --shadow-soft: 0 10px 30px -12px rgba(26,31,46,.10);
  --shadow-card: 0 1px 2px rgba(26,31,46,.04), 0 8px 24px -12px rgba(26,31,46,.08);
  --shadow-card-lg: 0 2px 4px rgba(26,31,46,.05), 0 30px 60px -24px rgba(26,31,46,.22);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;border:0 solid hsl(var(--border))}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;color:inherit}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.1}
ul{list-style:none}

.container{max-width:1400px;margin:0 auto;padding:0 1.5rem}

/* ============ Navbar ============ */
.navbar{position:fixed;top:0;z-index:50;background:hsl(var(--background)/.7);backdrop-filter:blur(12px);border-bottom:1px solid hsl(var(--border)/.6);width:100%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.logo{display:flex;align-items:center;gap:.625rem}
.logo-mark{width:2.25rem;height:2.25rem;border-radius:.75rem;background:hsl(var(--brand));display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.logo-mark span{width:.75rem;height:.75rem;border-radius:.25rem;background:hsl(var(--brand-foreground))}
.logo-text{font-weight:800;font-size:1.125rem;letter-spacing:-.02em}
.nav-links{display:none;gap:2rem;font-size:.875rem;font-weight:500}
.nav-links a{color:hsl(var(--muted-foreground));transition:color .2s}
.nav-links a:hover{color:hsl(var(--foreground))}
@media(min-width:768px){.nav-links{display:flex}}
.btn-nav{background:hsl(var(--foreground));color:hsl(var(--background));border-radius:9999px;padding:0 1.25rem;height:2.5rem;font-weight:600;display:inline-flex;align-items:center;box-shadow:var(--shadow-soft)}
.arrow{width:1rem;height:1rem;transition:transform .25s}

/* Mobile nav drawer */
.nav-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:2.25rem;height:2.25rem;padding:.375rem;border-radius:.5rem;border:1px solid hsl(var(--border));background:hsl(var(--card));transition:background .2s}
.nav-hamburger:hover{background:hsl(var(--muted))}
.nav-hamburger span{display:block;height:2px;border-radius:9999px;background:hsl(var(--foreground));transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;transform-origin:center}
@media(min-width:768px){.nav-hamburger{display:none}}
.nav-overlay{position:fixed;inset:0;z-index:90;background:hsl(var(--foreground)/.25);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-overlay.active{opacity:1;pointer-events:all}
.nav-drawer{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(300px,85vw);height:100vh;background:#fff;border-right:1px solid hsl(var(--border));box-shadow:8px 0 40px hsl(222 30% 14%/.12);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.25rem;border-bottom:1px solid hsl(var(--border));flex-shrink:0}
.nav-close{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.5rem;color:hsl(var(--muted-foreground));transition:background .2s,color .2s}
.nav-close:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.nav-drawer-links{flex:1;display:flex;flex-direction:column;padding:.75rem 0;overflow-y:auto}
.drawer-link{display:flex;align-items:center;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;color:hsl(var(--foreground));border-left:3px solid transparent;transition:background .2s,border-color .2s,color .2s;letter-spacing:-.01em}
.drawer-link:hover{background:hsl(var(--brand-soft));border-left-color:hsl(var(--brand));color:hsl(var(--brand))}
.nav-drawer-footer{padding:1.25rem;border-top:1px solid hsl(var(--border));flex-shrink:0}
.desktop-only{display:none}
@media(min-width:768px){.desktop-only{display:block}}
.mobile-only{display:block}
@media(min-width:768px){.mobile-only{display:none}}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid hsl(var(--border)/.6);background:hsl(var(--background))}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(31,37,64,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(31,37,64,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 85%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 85%);
}
.hero-blob{position:absolute;pointer-events:none;border-radius:9999px;filter:blur(60px)}
.hero-blob--brand{left:-6rem;top:6rem;width:18rem;height:18rem;background:hsl(var(--brand)/.25)}
.hero-blob--accent{right:-4rem;top:10rem;width:20rem;height:20rem;background:hsl(var(--accent)/.25)}

.float-chip{position:absolute;display:none;align-items:center;gap:.5rem;border:1px solid hsl(var(--border));background:var(--card);padding:.5rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;box-shadow:var(--shadow-card)}
@media(min-width:768px){.float-chip{display:inline-flex}}
.float-chip--tl{left:8%;top:28%;transform:rotate(-8deg)}
.float-chip--tr{right:10%;top:22%;transform:rotate(6deg)}
.float-chip--bl{left:14%;bottom:18%;transform:rotate(5deg)}
.float-chip--br{right:12%;bottom:22%;transform:rotate(-6deg)}
@media (min-width:768px) and (max-width:1023px){
.float-chip{transform:scale(.9);}
.float-chip--tl{left:2%;top:16%;}
.float-chip--tr{right:2%;top:14%;}
.float-chip--bl{left:4%;bottom:30%;}
.float-chip--br{right:4%;bottom:30%;}
}
.dot{width:8px;height:8px;border-radius:9999px}
.dot-brand{background:hsl(var(--brand))}
.dot-accent{background:hsl(var(--accent))}
.dot-ink{background:hsl(var(--foreground))}
.dot-brandink{background:hsl(var(--brand-ink))}

@keyframes float-a{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes float-b{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(14px) rotate(-5deg)}}
.float-a{animation:float-a 9s ease-in-out infinite}
.float-b{animation:float-b 11s ease-in-out infinite}

.hero-inner{position:relative;padding:5rem 1.5rem 4rem;text-align:center;max-width:1400px;margin:0 auto}
@media(min-width:768px){.hero-inner{padding:7rem 1.5rem 6rem}}

.chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid hsl(var(--border));background:var(--card);border-radius:9999px;padding:.375rem .875rem;font-size:.75rem;font-weight:700;letter-spacing:.05em;color:hsl(var(--brand-ink));box-shadow:var(--shadow-soft)}
.chip-pulse{position:relative;display:inline-flex;width:8px;height:8px}
.chip-pulse span:first-child{position:absolute;inset:0;border-radius:9999px;background:hsl(var(--brand));opacity:.75;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
.chip-pulse span:last-child{position:relative;width:8px;height:8px;border-radius:9999px;background:hsl(var(--brand))}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}

.hero h1{margin-top:1.5rem;font-size:2.25rem;font-weight:800;max-width:60rem;margin-left:auto;margin-right:auto;line-height:1.02}
@media(min-width:768px){.hero h1{font-size:4.25rem}}
@media(min-width:1024px){.hero h1{font-size:5rem}}
.grad-wrap{position:relative;display:inline-block}
.grad-text{background:linear-gradient(135deg,hsl(var(--brand-ink)),hsl(var(--brand)) 45%,hsl(var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-underline{position:absolute;bottom:-.5rem;left:0;width:100%;color:hsl(var(--brand)/.6);height:12px}

.hero p{margin:1.5rem auto 0;font-size:1.0625rem;color:hsl(var(--muted-foreground));max-width:38rem}
@media(min-width:768px){.hero p{font-size:1.125rem}}

.hero-cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}
.btn-dark,.btn-light{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:9999px;font-weight:700;font-size:.875rem;transition:transform .2s}
.btn-dark{background:hsl(var(--foreground));color:hsl(var(--background))}
.btn-light{background:var(--card);color:hsl(var(--foreground));border:1px solid hsl(var(--border));box-shadow:var(--shadow-card)}
.btn-dark:hover,.btn-light:hover{transform:translateY(-2px)}

.hero-stats{margin:3rem auto 0;max-width:48rem;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid hsl(var(--border));background:hsl(0 0% 100% / .7);backdrop-filter:blur(8px);border-radius:1rem;box-shadow:var(--shadow-card);overflow:hidden}
.hero-stats>div{padding:1rem;text-align:center;border-right:1px solid hsl(var(--border))}
.hero-stats>div:last-child{border-right:0}
.stat{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.75rem;font-weight:800;color:hsl(var(--brand-ink))}
@media(min-width:768px){.stat{font-size:2rem}}
.stat-label{margin-top:.25rem;font-size:.75rem;color:hsl(var(--muted-foreground))}
@media(min-width:768px){.stat-label{font-size:.875rem}}

.marquee{position:relative;border-top:1px solid hsl(var(--border)/.7);background:hsl(0 0% 100% / .5);padding:.75rem 0;overflow:hidden}
.marquee-track{display:flex;width:max-content;gap:2.5rem;white-space:nowrap;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--muted-foreground));align-items:center}
.dot-sep{width:4px;height:4px;border-radius:9999px;background:hsl(var(--brand)/.6);display:inline-block}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-x{animation:marquee 40s linear infinite}

/* ============ MASONRY FEATURES ============ */
.bento-section{padding:3.5rem 0 6rem}
/* True masonry via CSS multi-column: each card sits break-inside:avoid so
   columns pack cards of different heights like Pinterest / bento-masonry.
   Two "full-bleed" cards (interactive tab & team sections) use column-span:all
   to break out to full width wherever they land in the flow. */
.bento{column-count:1;column-gap:1.5rem;width:100%;}
@media(min-width:640px){.bento{column-count:2;column-gap:1.5rem}}
@media(min-width:1024px){.bento{column-count:3;column-gap:1.75rem}}
@media(min-width:1600px){.bento{column-count:3}}

.cell{
  position:relative;overflow:hidden;border-radius:1.5rem;
  border:1px solid hsl(var(--border)/.7);background:var(--card);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  width:100%;margin:0 0 1.5rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
@media(min-width:640px){.cell{margin-bottom:1.75rem}}
.cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-lg)}
.cell-full{column-span:all}

.card-accent{background:linear-gradient(135deg,hsl(var(--accent-soft)),var(--card))}
.card-brand{background:linear-gradient(135deg,hsl(var(--brand-soft)/.6),var(--card))}
.card-dark{background:linear-gradient(135deg,hsl(160 40% 14%),hsl(158 55% 9%));color:hsl(var(--background))}

.cell-inner{display:flex;flex-direction:column;gap:1.5rem;height:100%;padding:2rem;flex:1}
@media(min-width:768px){.cell-inner{padding:2.5rem}}
/* Compact variant for smaller, text-led masonry cards (no media) so they
   read as bite-sized capability chips rather than full feature blocks. */
.cell-compact .cell-inner{gap:1rem;padding:1.75rem}
.cell-compact .cell-head h2{font-size:1.3rem}
@media(min-width:768px){.cell-compact .cell-head h2{font-size:1.4rem}}
.cell-compact .icon-tile{width:40px;height:40px}
.cell-compact .icon-tile svg{width:18px;height:18px}
.cell-split{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){
  .cell-split{grid-template-columns:5fr 7fr;gap:3rem}
  .cell-split--center{align-items:center;grid-template-columns:7fr 5fr}
}
.split-left,.split-right{display:flex;flex-direction:column;gap:1.25rem}

.cell-head{display:flex;align-items:flex-start;gap:1rem}
.icon-tile{display:grid;place-items:center;width:44px;height:44px;border-radius:.75rem;background:hsl(var(--brand-soft));color:hsl(var(--brand-ink));flex:none}
.icon-tile svg{width:20px;height:20px}
.icon-tile--accent{background:hsl(var(--accent-soft));color:hsl(var(--accent))}
.icon-tile--ink{background:hsl(var(--foreground)/.06);color:hsl(var(--foreground))}
.icon-tile--onDark{background:rgba(255,255,255,.1);color:#fff}

.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.eyebrow-brand{color:hsl(var(--brand-ink)/.85)}
.eyebrow-accent{color:hsl(var(--accent))}
.eyebrow-onDark{color:rgba(255,255,255,.6)}
.cell-head h2{margin-top:.25rem;font-size:1.75rem;font-weight:800}
@media(min-width:768px){.cell-head h2{font-size:2rem}}

.cell-inner>p{color:hsl(var(--foreground)/.72);max-width:44rem}
.card-dark p.onDark{color:rgba(255,255,255,.72)}

.check-list{display:grid;gap:.6rem;font-size:.875rem;color:hsl(var(--foreground)/.85)}
.check-list.two-col{grid-template-columns:1fr}
@media(min-width:768px){.check-list.two-col{grid-template-columns:1fr 1fr}}
.check-list--onDark{color:rgba(255,255,255,.9)}
.check-list li{display:flex;align-items:flex-start;gap:.55rem}

/* Checkmark icon */
.check-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;margin-top:.0625rem;border-radius:9999px;font-size:.65rem;font-weight:800;line-height:1;background:hsl(var(--brand)/.15);color:hsl(var(--brand-ink))}
.card-accent .check-icon{background:hsl(var(--accent)/.16);color:hsl(var(--accent))}
.card-brand .check-icon{background:hsl(var(--brand)/.18);color:hsl(var(--brand-ink))}
.check-list--onDark .check-icon{background:hsl(var(--brand)/.35);color:#6ee7b7}

/* Media containers */
.media{position:relative;overflow:hidden;border-radius:1rem;border:1px solid hsl(var(--border)/.7);background:var(--muted)}
.media img{width:100%;display:block}
.media-tall{flex:1;padding:.75rem;background:var(--card)}
.media-tall img{width:100%;height:100%;object-fit:contain;margin:0 auto}
.media-fill{flex:1;padding:.75rem;background:var(--card);display:flex}
.media-fill img{width:100%;height:100%;min-height:260px;object-fit:contain;margin:0 auto}
@media(min-width:1024px){.media-fill img{min-height:360px}}

/* Extensions slider media */
.media-43{position:relative;height:420px;flex:none;background:var(--card);padding:.75rem;display:flex;}
@media(max-width:1023px){.media-43{height:360px;}}
@media(max-width:767px){.media-43{height:300px;}}
.media-43 img{width:100%;height:100%;object-fit:contain;margin:0 auto}

/* Overlay slider nav */
.ext-nav-overlay{display:flex;align-items:center;justify-content:center;gap:.625rem;margin-top:.1rem;margin-bottom:.8rem;padding:.4rem .5rem;border-radius:9999px;background:hsl(0 0% 100% / .9);border:1px solid hsl(var(--border)/.7);box-shadow:var(--shadow-card);width:fit-content;margin-left:auto;margin-right:auto;}
.ext-nav-overlay .dots{padding:0 .125rem;}
.ext-nav-overlay .round-btn{width:1.75rem;height:1.75rem;box-shadow:none;border:0;background:hsl(var(--foreground));color:hsl(var(--background));}
.ext-nav-overlay .round-btn svg{width:14px;height:14px;}

/* Tabs */
.tab-group{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;background:hsl(var(--muted)/.7);border:1px solid hsl(var(--border)/.7);border-radius:9999px;width:fit-content}
.view-tab{padding:.375rem 1rem;font-size:.875rem;font-weight:600;border-radius:9999px;color:hsl(var(--foreground)/.6);transition:all .2s}
.view-tab:hover{color:hsl(var(--foreground))}
.view-tab.is-active{background:hsl(var(--foreground));color:hsl(var(--background));box-shadow:var(--shadow-card)}

/* Slider pills / controls */
.pill{position:absolute;z-index:2;top:1rem;padding:.15rem .5rem;font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:.375rem;backdrop-filter:blur(6px)}
.pill-tl{left:1rem;background:hsl(0 0% 100% / .9);color:hsl(var(--foreground))}
.pill-tr{right:1rem}
.pill-dark{background:hsl(var(--foreground)/.8);color:hsl(var(--background))}

/* Description sits below the image now; the nav (dots + arrows) lives as an overlay inside the figure (see .ext-nav-overlay) */
.ext-controls p{font-size:.875rem;color:hsl(var(--foreground)/.72)}
.dots{display:flex;align-items:center;gap:.375rem}
.ext-dot{width:.375rem;height:.375rem;border-radius:9999px;background:hsl(var(--foreground)/.25);transition:all .25s;border:0;padding:0}
.ext-dot:hover{background:hsl(var(--foreground)/.5)}
.ext-dot.is-active{width:1.5rem;background:hsl(var(--foreground))}
.round-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--card);border:1px solid hsl(var(--border));box-shadow:var(--shadow-card);transition:transform .2s}
.round-btn svg{width:16px;height:16px}
.round-btn:hover{transform:translateY(-2px)}
.round-btn--dark{background:hsl(var(--foreground));color:hsl(var(--background));border-color:transparent}

.fade-in{animation:fade .3s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============ CTA ============ */
.cta-wrap{padding:0 0 5rem}
.cta{position:relative;overflow:hidden;border-radius:1.5rem;background:hsl(var(--foreground));color:hsl(var(--background));padding:4rem 1.5rem;text-align:center;box-shadow:var(--shadow-card)}
.cta::before,.cta::after{content:'';position:absolute;border-radius:9999px;filter:blur(48px)}
.cta::before{right:-5rem;bottom:-5rem;width:18rem;height:18rem;background:rgba(39,168,122,.35)}
.cta::after{left:-2.5rem;top:2.5rem;width:10rem;height:10rem;background:rgba(243,119,38,.25)}
.cta-inner{position:relative;max-width:36rem;margin:0 auto}
.cta h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800}
.cta p{margin-top:1rem;font-size:1.125rem;color:rgba(251,248,243,.7)}
.btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;padding:.875rem 1.75rem;border-radius:9999px;background:hsl(var(--brand));color:hsl(var(--brand-foreground));font-weight:600;transition:opacity .2s}
.btn:hover{opacity:.9}
.btn svg{width:16px;height:16px}
.cta-note{margin:24px auto 0 !important;font-size:13px !important;line-height:1.6 !important;color:rgba(255,255,255,.75) !important}
.cta-note a{color:#fff !important;font-weight:600 !important;text-decoration:underline !important;text-underline-offset:3px}
.cta-note a:hover{opacity:.85}

/* ============ Footer ============ */
.footer{padding:3rem 1.5rem;border-top:1px solid hsl(var(--border));text-align:center;font-size:.875rem;color:hsl(var(--muted-foreground))}