@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --background: 188 68% 16%;
  --foreground: 0 0% 100%;
  --card: 188 60% 20%;
  --card-foreground: 0 0% 100%;
  --primary: 184 62% 42%;
  --primary-foreground: 0 0% 100%;
  --primary-soft: 188 55% 24%;
  --primary-deep: 188 72% 12%;
  --primary-glow: 184 70% 55%;
  --secondary: 38 78% 48%;
  --secondary-foreground: 0 0% 100%;
  --secondary-soft: 38 55% 24%;
  --secondary-deep: 34 72% 38%;
  --muted: 188 50% 22%;
  --muted-foreground: 185 25% 82%;
  --accent: 40 75% 62%;
  --accent-foreground: 188 72% 12%;
  --border: 188 40% 28%;
  --radius: .75rem;

  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px;perspective:1200px}
.section{position:relative;padding:120px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:hsl(var(--accent));font-weight:600;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:hsl(var(--accent));display:inline-block}

/* ---------- Reveal animation utility ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-scale.in-view{opacity:1;transform:scale(1)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-left.in-view{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-right.in-view{opacity:1;transform:translateX(0)}
.stagger > *{transition-delay:calc(var(--i, 0) * 90ms)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.reveal-left,.reveal-right{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  background:hsla(var(--primary-deep)/0);
  backdrop-filter:blur(0px);
  transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease,box-shadow .4s ease;
}
.nav.scrolled{
  background:hsla(var(--primary-deep)/.85);
  backdrop-filter:blur(14px);
  padding:14px 32px;
  box-shadow:0 8px 30px hsla(var(--primary-deep)/.4);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:700;font-size:1.15rem}
.nav-logo img{height:36px;width:auto;transition:transform .4s ease}
.nav-logo:hover img{transform:rotate(-8deg) scale(1.05)}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{
  font-size:.92rem;font-weight:500;color:hsl(var(--foreground)/.85);position:relative;padding:4px 0;
  transition:color .3s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:hsl(var(--accent));
  transition:width .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover{color:hsl(var(--accent))}
.nav-links a:hover::after{width:100%}
.nav-cta{
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
  padding:10px 22px;border-radius:999px;font-weight:600;font-size:.9rem;
  box-shadow:0 0 0 0 hsla(var(--secondary)/.6);
  transition:transform .3s ease,box-shadow .5s ease,background .3s ease;
}
.nav-cta:hover{transform:translateY(-2px);background:hsl(var(--secondary-deep));box-shadow:0 8px 24px hsla(var(--secondary)/.5)}
.nav-toggle{display:none;background:none;color:hsl(var(--foreground));font-size:1.5rem}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;
  padding-top:100px;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, hsla(var(--primary-glow)/.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, hsla(var(--secondary)/.25), transparent 60%),
    hsl(var(--primary-deep));
  background-size:200% 200%,200% 200%, 100% 100%;
  animation:heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{background-position:20% 0%,80% 100%,0 0}
  100%{background-position:80% 20%,20% 80%,0 0}
}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px}
.hero-logo{
  width:96px;height:96px;margin:0 auto 28px;
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero h1{
  font-size:clamp(2.4rem,5.5vw,4.2rem);margin-bottom:22px;
  color:hsl(var(--foreground));
}
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(24px);animation:wordIn .7s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .word.accent{color:hsl(var(--accent))}
.hero p.sub{
  font-size:1.15rem;color:hsl(var(--muted-foreground));max-width:640px;margin:0 auto 38px;
  opacity:0;animation:fadeUp .9s ease .9s forwards;
}
@keyframes wordIn{to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .9s ease 1.15s forwards}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;
  font-weight:600;font-size:.95rem;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.btn::before{
  content:"";position:absolute;inset:0;background:hsla(0,0%,100%,.25);
  transform:translateX(-100%);transition:transform .5s ease;
}
.btn:hover::before{transform:translateX(0)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-primary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));box-shadow:0 10px 30px hsla(var(--secondary)/.35)}
.btn-outline{background:transparent;color:hsl(var(--foreground));border:1px solid hsla(var(--foreground)/.3)}
.btn-outline:hover{border-color:hsl(var(--accent));color:hsl(var(--accent))}

.butterfly{position:absolute;opacity:.85;filter:drop-shadow(0 10px 24px hsla(var(--primary-deep)/.5));pointer-events:none;will-change:transform;transition:opacity .6s ease}

/* ---------- 3D scene layer (hero / page-banner) ---------- */
.scene3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.scene3d-canvas canvas{display:block;width:100%!important;height:100%!important}
.scene3d-canvas.draggable{cursor:grab}
.scene3d-canvas.draggable.grabbing{cursor:grabbing}
.bf-1{width:70px;top:14%;left:8%;animation:flutter 7s ease-in-out infinite}
.bf-2{width:50px;top:22%;right:10%;animation:flutter 9s ease-in-out infinite reverse}
.bf-3{width:40px;bottom:12%;left:16%;animation:flutter 6s ease-in-out infinite .5s}
.bf-4{width:60px;bottom:18%;right:14%;animation:flutter 8s ease-in-out infinite 1s}
@keyframes flutter{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-22px) rotate(6deg)}
}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid hsla(var(--foreground)/.4);border-radius:14px;
}
.scroll-cue::before{
  content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;
  background:hsl(var(--accent));border-radius:2px;animation:scrollDot 1.8s ease infinite;
}
@keyframes scrollDot{0%{opacity:1;transform:translateY(0)}70%{opacity:0}100%{opacity:0;transform:translateY(14px)}}

/* ---------- Partnership strip ---------- */
.partnership{
  padding:22px 0;text-align:center;background:hsl(var(--primary-soft));
  border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));
  font-size:.9rem;color:hsl(var(--muted-foreground));
}

/* ---------- Section headers ---------- */
.section-head{text-align:center;max-width:680px;margin:0 auto 64px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:16px}
.section-head p{color:hsl(var(--muted-foreground));font-size:1.05rem}

/* ---------- Pillars ---------- */
.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.pillar-card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);
  padding:32px 26px;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .3s ease;
  transform-style:preserve-3d;--tiltX:0deg;--tiltY:0deg;
}
.pillar-card:hover{
  transform:translateY(-10px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  border-color:hsl(var(--primary-glow));
  box-shadow:0 20px 40px hsla(var(--primary-deep)/.45);
}
.pillar-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:hsla(var(--primary-glow)/.15);color:hsl(var(--primary-glow));margin-bottom:20px;
  transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s ease;
}
.pillar-card:hover .pillar-icon{transform:rotate(-8deg) scale(1.1);background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.pillar-card h3{font-size:1.1rem;margin-bottom:10px}
.pillar-card p{color:hsl(var(--muted-foreground));font-size:.92rem}

/* ---------- Core values ---------- */
.values-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:56px}
.value-item{text-align:center;padding:22px 14px;border-radius:var(--radius);transition:background .3s ease}
.value-item:hover{background:hsla(var(--primary-glow)/.08)}
.value-item .dot{
  width:10px;height:10px;border-radius:50%;background:hsl(var(--secondary));margin:0 auto 14px;
  box-shadow:0 0 0 6px hsla(var(--secondary)/.15);
}
.value-item h4{font-size:1rem;margin-bottom:6px;color:hsl(var(--accent))}
.value-item p{font-size:.85rem;color:hsl(var(--muted-foreground))}

/* ---------- Philosophy ---------- */
.philosophy{
  background:linear-gradient(180deg,hsl(var(--primary-deep)),hsl(var(--background)) 70%);
  text-align:center;overflow:hidden;
}
.philosophy-butterfly{
  width:180px;margin:0 auto 32px;
  animation:driftRotate 12s ease-in-out infinite;
}
@keyframes driftRotate{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-16px) rotate(3deg)}
}
.philosophy h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:20px}
.philosophy .lead{font-size:1.2rem;color:hsl(var(--accent));font-weight:600;margin-bottom:22px}
.philosophy .body-text{max-width:640px;margin:0 auto 44px;color:hsl(var(--muted-foreground))}
.quote-block{
  max-width:640px;margin:0 auto;padding:40px;border-radius:var(--radius);
  background:hsla(var(--card)/.5);border:1px solid hsl(var(--border));position:relative;
}
.quote-block::before{
  content:"\201C";position:absolute;top:-6px;left:24px;font-size:5rem;font-family:var(--font-heading);
  color:hsla(var(--secondary)/.4);
}
.quote-block p{font-size:1.3rem;font-style:italic;font-family:var(--font-heading);margin-bottom:16px}
.quote-block span{color:hsl(var(--secondary));font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Cycle ---------- */
.cycle-track{position:relative;margin-top:70px}
.cycle-line{
  position:absolute;top:70px;left:0;right:0;height:2px;background:hsl(var(--border));z-index:0;
}
.cycle-line-fill{
  position:absolute;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,hsl(var(--secondary)),hsl(var(--accent)));
  transition:width 1.4s cubic-bezier(.16,1,.3,1);
}
.cycle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;position:relative;z-index:1}
.cycle-stage{text-align:center}
.cycle-img-wrap{
  width:140px;height:140px;border-radius:50%;margin:0 auto 24px;overflow:hidden;
  background:hsl(var(--card));border:3px solid hsl(var(--border));
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .4s ease;
}
.cycle-stage:hover .cycle-img-wrap{transform:scale(1.08);border-color:hsl(var(--secondary));box-shadow:0 0 0 8px hsla(var(--secondary)/.15)}
.cycle-img-wrap img{width:78%;height:78%;object-fit:contain}
.cycle-num{
  font-family:var(--font-heading);font-weight:800;color:hsl(var(--secondary));font-size:.85rem;letter-spacing:.1em;margin-bottom:8px;
}
.cycle-stage h3{font-size:1.15rem;margin-bottom:4px}
.cycle-stage .meta-label{font-size:.8rem;color:hsl(var(--accent));text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:block}
.cycle-stage p{font-size:.9rem;color:hsl(var(--muted-foreground))}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{
  border-bottom:1px solid hsl(var(--border));
}
.faq-q{
  width:100%;text-align:left;background:none;color:hsl(var(--foreground));
  padding:24px 6px;font-size:1.02rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q .icon{
  width:22px;height:22px;flex:0 0 auto;position:relative;
}
.faq-q .icon::before,.faq-q .icon::after{
  content:"";position:absolute;background:hsl(var(--secondary));border-radius:2px;transition:transform .35s ease,opacity .3s ease;
}
.faq-q .icon::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}
.faq-q .icon::after{width:2px;height:100%;left:50%;top:0;transform:translateX(-50%)}
.faq-item.open .faq-q .icon::after{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),padding .5s ease;
  color:hsl(var(--muted-foreground));font-size:.95rem;
}
.faq-item.open .faq-a{max-height:200px;padding-bottom:24px}
.faq-more{display:block;text-align:center;margin-top:40px;color:hsl(var(--secondary));font-weight:600}
.faq-more::after{content:" \2192";transition:transform .3s ease;display:inline-block}
.faq-more:hover::after{transform:translateX(6px)}

/* ---------- Final CTA ---------- */
.final-cta{
  text-align:center;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, hsla(var(--primary-glow)/.3), transparent 65%), hsl(var(--primary-deep));
  border-top:1px solid hsl(var(--border));
}
.final-cta h2{font-size:clamp(1.9rem,3.8vw,2.6rem);margin-bottom:16px}
.final-cta p{color:hsl(var(--muted-foreground));margin-bottom:34px}

/* ---------- Footer ---------- */
footer{background:hsl(var(--primary-deep));padding:70px 0 30px;border-top:1px solid hsl(var(--border))}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--font-heading);font-weight:700;font-size:1.1rem}
.footer-logo img{height:32px}
.footer-tag{color:hsl(var(--accent));font-size:.9rem;margin-bottom:14px}
.footer-desc{color:hsl(var(--muted-foreground));font-size:.9rem;max-width:340px}
.footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:hsl(var(--secondary));margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{color:hsl(var(--muted-foreground));font-size:.9rem;transition:color .3s ease,padding-left .3s ease}
.footer-col a:hover{color:hsl(var(--accent));padding-left:6px}
.footer-bottom{
  padding-top:26px;border-top:1px solid hsl(var(--border));
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.82rem;color:hsl(var(--muted-foreground));
}

.nav-links a.active{color:hsl(var(--accent))}
.nav-links a.active::after{width:100%}

/* ---------- Page banner (sub-page hero) ---------- */
.page-banner{
  padding:180px 0 90px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% -10%, hsla(var(--primary-glow)/.3), transparent 60%), hsl(var(--primary-deep));
}
.page-banner h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:18px}
.page-banner p{color:hsl(var(--muted-foreground));max-width:640px;margin:0 auto;font-size:1.1rem}
.page-banner .butterfly{position:absolute}
.page-banner .container{position:relative;z-index:2}

/* ---------- Generic two/three column layout ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.info-card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:32px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
  transform-style:preserve-3d;--tiltX:0deg;--tiltY:0deg;
}
.info-card:hover{transform:translateY(-6px) rotateX(var(--tiltX)) rotateY(var(--tiltY));box-shadow:0 16px 34px hsla(var(--primary-deep)/.4)}
.info-card h3{margin-bottom:14px;color:hsl(var(--accent));font-size:1.15rem}
.info-card p{color:hsl(var(--muted-foreground));font-size:.95rem}

/* ---------- Checklist ---------- */
.check-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.check-list li{
  padding-left:30px;position:relative;color:hsl(var(--muted-foreground));font-size:.95rem;
  opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s ease;
}
.check-list li.in-view{opacity:1;transform:translateX(0)}
.check-list li::before{
  content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:hsla(var(--secondary)/.15);border:1px solid hsl(var(--secondary));
}
.check-list li::after{
  content:"";position:absolute;left:5px;top:8px;width:6px;height:9px;border-right:2px solid hsl(var(--secondary));border-bottom:2px solid hsl(var(--secondary));
  transform:rotate(40deg);
}

/* ---------- Profile card (team) ---------- */
.profile-card{
  display:flex;gap:32px;flex-wrap:wrap;background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:36px;
}
.profile-photo{
  width:140px;height:140px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid hsl(var(--secondary));transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.profile-card:hover .profile-photo{transform:scale(1.06) rotate(-2deg)}
.profile-photo-placeholder{
  width:140px;height:140px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--primary-soft));border:2px dashed hsl(var(--border));color:hsl(var(--muted-foreground));
  font-size:.75rem;text-align:center;padding:10px;
}
.profile-body{flex:1;min-width:240px}
.profile-body h3{font-size:1.3rem;margin-bottom:4px}
.profile-role{color:hsl(var(--accent));font-weight:600;font-size:.95rem;margin-bottom:10px}
.profile-contact{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:hsl(var(--muted-foreground));margin-bottom:16px}
.profile-body p{color:hsl(var(--muted-foreground));font-size:.93rem;margin-bottom:14px}

/* ---------- Chips / tags ---------- */
.chip-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{
  background:hsla(var(--secondary)/.12);color:hsl(var(--secondary));border:1px solid hsla(var(--secondary)/.3);
  padding:7px 16px;border-radius:999px;font-size:.82rem;font-weight:500;
  transition:background .3s ease,transform .3s ease;
}
.chip:hover{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));transform:translateY(-2px)}

/* ---------- Vertical timeline ---------- */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:hsl(var(--border))}
.timeline-item{position:relative;padding-bottom:26px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";position:absolute;left:-32px;top:4px;width:13px;height:13px;border-radius:50%;
  background:hsl(var(--secondary));box-shadow:0 0 0 4px hsla(var(--secondary)/.18);
}
.timeline-item .when{color:hsl(var(--accent));font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px}
.timeline-item .what{font-size:.95rem;color:hsl(var(--foreground))}

/* ---------- Subsection heading ---------- */
.subhead{margin:56px 0 22px}
.subhead h3{font-size:1.3rem;color:hsl(var(--accent))}

/* ---------- Alert / red-flag box ---------- */
.alert-box{
  background:hsla(var(--destructive)/.1);border:1px solid hsla(var(--destructive)/.4);border-radius:var(--radius);
  padding:28px 32px;
}
.alert-box h3{color:hsl(var(--destructive-foreground,0 0% 100%));margin-bottom:6px}
.alert-box ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:16px}
.alert-box li{padding-left:24px;position:relative;font-size:.9rem;color:hsl(var(--foreground)/.9)}
.alert-box li::before{content:"!";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:hsl(0 75% 55%);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

/* ---------- Status badge ---------- */
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:hsla(var(--accent)/.15);color:hsl(var(--accent))}

/* ---------- Device / resource category card ---------- */
.category-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:28px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease;transform-style:preserve-3d;--tiltX:0deg;--tiltY:0deg}
.category-card:hover{transform:translateY(-8px) rotateX(var(--tiltX)) rotateY(var(--tiltY));border-color:hsl(var(--primary-glow))}
.category-card h3{margin-bottom:16px;font-size:1.05rem}
.category-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.category-card li{font-size:.9rem;color:hsl(var(--muted-foreground));padding-left:18px;position:relative}
.category-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:hsl(var(--secondary))}

/* ---------- Pamphlet filter tabs ---------- */
.filter-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.filter-tab{
  background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));
  padding:10px 22px;border-radius:999px;font-size:.88rem;font-weight:600;transition:all .3s ease;
}
.filter-tab:hover{color:hsl(var(--foreground));border-color:hsl(var(--accent))}
.filter-tab.active{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border-color:hsl(var(--secondary))}
.pamphlet-card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:24px 28px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s ease,opacity .3s ease;
}
.pamphlet-card:hover{transform:translateX(6px);border-color:hsl(var(--secondary))}
.pamphlet-card .cat-label{color:hsl(var(--secondary));font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;display:block;margin-bottom:8px}
.pamphlet-card h3{font-size:1.05rem;margin-bottom:6px}
.pamphlet-card p{color:hsl(var(--muted-foreground));font-size:.88rem}
.pamphlet-download{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.82rem;font-weight:600;
  color:hsl(var(--secondary));border:1px solid hsla(var(--secondary)/.4);border-radius:999px;padding:7px 16px;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.pamphlet-download::before{content:"\2193";font-size:.9em}
.pamphlet-download:hover{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));transform:translateY(-2px)}
.pamphlet-list{display:flex;flex-direction:column;gap:16px}
.pamphlet-card.hidden{display:none}

/* ---------- Gallery model card ---------- */
.model-card{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:center;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:32px;margin-bottom:32px;transition:transform .4s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;--tiltX:0deg;--tiltY:0deg}
.model-card:hover{transform:rotateX(var(--tiltX)) rotateY(var(--tiltY))}
.model-card img{width:100%;border-radius:calc(var(--radius) - 4px);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.model-card:hover img{transform:scale(1.04)}
.model-card .label{color:hsl(var(--secondary));font-weight:700;font-size:.85rem;letter-spacing:.05em;margin-bottom:8px;display:block}
.model-card h3{font-size:1.3rem;margin-bottom:12px}
.model-card p{color:hsl(var(--muted-foreground));margin-bottom:16px}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;color:hsl(var(--accent))}
.form-field input,.form-field select,.form-field textarea{
  width:100%;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:8px;
  padding:12px 16px;color:hsl(var(--foreground));font-family:inherit;font-size:.95rem;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:hsl(var(--secondary));box-shadow:0 0 0 3px hsla(var(--secondary)/.2);
}
.form-field textarea{min-height:120px;resize:vertical}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:hsl(var(--muted-foreground));margin-bottom:24px}
.consent-row input{margin-top:4px}
.form-success{
  display:none;background:hsla(var(--secondary)/.12);border:1px solid hsl(var(--secondary));border-radius:var(--radius);
  padding:20px 24px;color:hsl(var(--foreground));margin-top:20px;
}
.form-success.show{display:block;animation:fadeUp .5s ease}
.contact-info-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:32px}
.contact-info-card .row{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.contact-info-card .row span:first-child{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--accent))}
.contact-info-card .row span:last-child{font-size:1.05rem;font-weight:600}

/* ---------- Policy sections ---------- */
.policy-section{padding:32px 0;border-bottom:1px solid hsl(var(--border))}
.policy-section:last-child{border-bottom:none}
.policy-section h3{font-size:1.2rem;margin-bottom:12px;color:hsl(var(--accent))}
.policy-section p{color:hsl(var(--muted-foreground))}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .section{padding:80px 0}
  .page-banner{padding:150px 0 70px}
  .profile-card{flex-direction:column;align-items:center;text-align:center}
  .profile-contact{justify-content:center}
  .model-card{grid-template-columns:1fr;text-align:center}
  .contact-grid{grid-template-columns:1fr}
}

/* scroll progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,hsl(var(--secondary)),hsl(var(--accent)));z-index:200;width:0%}