:root{
    --purple:#402480; --purple-deep:#2a1659; --green:#64bd17; --green-deep:#4e9c0e;
    --ink:#1c1530; --paper:#ffffff; --mist:#f5f3fb; --sun:#ffc83d; --coral:#ff5d73;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
  h1,h2,h3,.nav-logo{font-family:Poppins,system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  .btn{display:inline-block;font-family:Poppins;font-weight:700;font-size:1.02rem;padding:15px 30px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-green{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(100,189,23,.35)}
  .btn-white{background:#fff;color:var(--purple)}
  .btn-ghost{border:2px solid rgba(255,255,255,.6);color:#fff}
  .demo-ribbon{background:var(--ink);color:#fff;text-align:center;font-size:.82rem;padding:7px 12px;font-weight:500;letter-spacing:.01em}
  .demo-ribbon b{color:var(--sun)}

  /* nav */
  nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid #eee}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
  .nav-logo{font-weight:800;font-size:1.45rem}
  .nav-logo .i{color:var(--green)} .nav-logo .y{color:var(--purple)}
  .nav-links{display:flex;gap:20px;align-items:center;font-weight:500}
  .nav-links a:hover{color:var(--purple)}
  .dd{position:relative}
  .dd-btn .caret{font-size:.75em}
  .dd-menu{display:none;position:absolute;top:100%;left:-14px;min-width:210px;background:#fff;border:1px solid #ece8f6;border-radius:16px;box-shadow:0 16px 36px rgba(64,36,128,.16);padding:8px;z-index:60}
  .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
  .dd-menu a{display:block;padding:10px 14px;border-radius:10px;font-weight:600}
  .dd-menu a:hover{background:var(--mist)}
  .dd-btn.current{color:var(--purple);font-weight:700}
  .nav-cta{background:var(--green);color:#fff;padding:10px 22px;border-radius:999px;font-family:Poppins;font-weight:700}
  @media(max-width:820px){.nav-links a:not(.nav-cta){display:none}.dd{display:none}}

  /* hero */
  .hero{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 60%,#1c0e3d 100%);color:#fff;position:relative;overflow:hidden}
  .hero .blob{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5}
  .hero .b1{width:340px;height:340px;background:var(--green);top:-120px;right:-80px}
  .hero .b2{width:240px;height:240px;background:var(--coral);bottom:-100px;left:-60px;opacity:.35}
  .hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:84px 0 92px}
  .eyebrow{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:.85rem;padding:7px 16px;border-radius:999px;margin-bottom:22px}
  .hero h1{font-size:3.5rem;font-weight:800;margin-bottom:18px}
  .hero h1 .hl{color:var(--sun)}
  .hero p.sub{font-size:1.25rem;opacity:.92;max-width:520px;margin-bottom:30px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:28px}
  .hero-card h3{font-size:1.05rem;color:var(--sun);margin-bottom:14px}
  .open-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.98rem}
  .open-row:last-child{border:0}
  .open-row b{font-weight:600}
  @media(max-width:820px){.hero-in{grid-template-columns:1fr;padding:56px 0 64px}.hero h1{font-size:2.5rem}}

  /* building photo */
  .photo{padding:48px 0 0;background:#fff}
  .photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center 35%;border-radius:20px}

  /* belonging strip */
  .belong{background:var(--green);color:#fff;text-align:center;padding:56px 0}
  .belong h2{font-size:2rem;font-weight:800;max-width:840px;margin:0 auto}
  .belong p{font-size:1.1rem;opacity:.95;margin-top:12px}

  /* section base */
  section.pad{padding:84px 0}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 48px}
  .sec-head .kick{color:var(--green);font-weight:700;font-family:Poppins;letter-spacing:.04em;text-transform:uppercase;font-size:.9rem}
  .sec-head h2{font-size:2.4rem;font-weight:800;margin:10px 0 8px;color:var(--purple)}
  .sec-head p{color:#5a5470;font-size:1.08rem}

  /* programs */
  .prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .prog{background:var(--mist);border-radius:20px;padding:26px;transition:transform .15s,box-shadow .15s;border:1px solid #ece8f6}
  .prog{padding:0;background:none;border:0;perspective:1000px;cursor:pointer;outline-offset:4px;transition:none}
  .prog:hover{transform:none;box-shadow:none}
  .prog-in{display:grid;transition:transform .6s;transform-style:preserve-3d}
  .prog.flipped .prog-in{transform:rotateY(180deg)}
  .prog-front,.prog-back{grid-area:1/1;border-radius:20px;padding:26px;border:1px solid #ece8f6;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .prog-front{background:var(--mist);transition:box-shadow .15s}
  .prog:hover .prog-front{box-shadow:0 14px 30px rgba(64,36,128,.12)}
  .prog-back{background:var(--purple);color:#fff;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center}
  .prog-back h3{color:var(--sun);margin-top:0}
  .prog-back p{color:#fff}
  .prog .hint{display:block;margin-top:10px;font-size:.8rem;color:var(--purple);opacity:.7}
  @media(prefers-reduced-motion:reduce){.prog-in{transition:none}}
  .prog .emoji{font-size:1.9rem}
  .prog h3{font-size:1.18rem;margin:12px 0 6px;color:var(--purple)}
  .prog p{font-size:.96rem;color:#5a5470}
  @media(max-width:820px){.prog-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.prog-grid{grid-template-columns:1fr}}

  /* impact */
  .impact{background:var(--purple);color:#fff}
  .impact .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;padding:64px 24px}
  .stat .n{font-family:Poppins;font-weight:800;font-size:2.8rem;color:var(--sun)}
  .stat .l{opacity:.9;font-size:1rem;margin-top:4px}
  @media(max-width:680px){.impact .wrap{grid-template-columns:1fr 1fr}}

  /* involved */
  .involved{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .icard{border-radius:22px;padding:38px;color:#fff}
  .icard.don{background:linear-gradient(135deg,var(--coral),#e23a55)}
  .icard.vol{background:linear-gradient(135deg,var(--green),var(--green-deep))}
  .icard h3{font-size:1.6rem;font-weight:800;margin-bottom:8px}
  .icard p{opacity:.95;margin-bottom:20px}
  @media(max-width:680px){.involved{grid-template-columns:1fr}}

  /* visit */
  .visit{background:var(--mist)}
  .visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .visit h2{font-size:2.2rem;color:var(--purple);font-weight:800;margin-bottom:16px}
  .vrow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #e7e2f3}
  .vrow .e{font-size:1.3rem}
  .vrow b{display:block;color:var(--purple)}
  .map{background:linear-gradient(135deg,var(--purple),var(--purple-deep));border-radius:24px;min-height:300px;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:30px}
  @media(max-width:680px){.visit .wrap{grid-template-columns:1fr}}

  /* partners */
  .partners{text-align:center;padding:56px 0}
  .partners p{color:#8a83a0;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;margin-bottom:22px}
  .plist{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;color:#6a6385;font-weight:600;font-size:1.05rem}

  /* footer */
  footer{background:var(--ink);color:#cfc8e0;padding:54px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
  footer .nav-logo{color:#fff;margin-bottom:10px;display:inline-block}
  footer a{color:#cfc8e0}footer a:hover{color:#fff}
  footer h4{color:#fff;font-family:Poppins;font-size:1rem;margin-bottom:12px}
  footer li{list-style:none;padding:5px 0}
  .foot-bottom{border-top:1px solid #322a4d;margin-top:34px;padding-top:20px;font-size:.85rem;opacity:.7;text-align:center}
  @media(max-width:680px){.foot-grid{grid-template-columns:1fr}}

  /* partners page */
  .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .partner-card{background:var(--mist);border:1px solid #ece8f6;border-radius:20px;padding:28px;text-align:center;font-family:Poppins;font-weight:700;color:var(--purple);font-size:1.1rem}
  @media(max-width:820px){.partner-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.partner-grid{grid-template-columns:1fr}}
  .nav-links a.current{color:var(--purple);font-weight:700}

  /* sponsors */
  .logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:center;margin-bottom:36px}
  .logo-card{background:#fff;border:1px solid #ece8f6;border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:center;height:150px}
  .logo-card img{max-width:100%;max-height:110px;width:auto;height:auto;object-fit:contain}
  .sponsor-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;max-width:900px;margin:0 auto}
  .sponsor-list li{background:var(--mist);border-radius:14px;padding:12px 18px;text-align:center;font-weight:600;color:var(--purple)}
  @media(max-width:820px){.logo-grid{grid-template-columns:1fr 1fr}.sponsor-list{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.logo-grid,.sponsor-list{grid-template-columns:1fr}}

  /* get involved */
  .narrow{max-width:760px}
  .blurb{font-size:1.12rem;color:#3d3556;text-align:center;margin-bottom:34px}
  .vol-box,.vol-steps{background:var(--mist);border:1px solid #ece8f6;border-radius:20px;padding:28px 30px;margin-bottom:24px}
  .vol-box h3,.vol-steps h3{color:var(--purple);margin-bottom:12px}
  .vol-box ul,.vol-steps ol{padding-left:22px;margin-bottom:12px}
  .vol-box li,.vol-steps li{padding:3px 0}
  .vol-contact{text-align:center;color:#5a5470;margin-top:8px}
  .vol-contact a{color:var(--purple);font-weight:600}

  /* fun page banner */
  .page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 60%,#1c0e3d 100%);color:#fff;padding:72px 0 108px;text-align:center}
  .page-hero .wrap{position:relative;z-index:2}
  .page-hero .pill{display:inline-block;background:var(--green);color:#fff;font-family:Poppins;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 18px;border-radius:999px;margin-bottom:18px;box-shadow:0 6px 16px rgba(100,189,23,.4)}
  .page-hero h1{font-size:3.4rem;font-weight:800;margin-bottom:14px}
  .page-hero h1 .hl{color:var(--sun)}
  .page-hero p{font-size:1.2rem;opacity:.95;max-width:620px;margin:0 auto}
  .page-hero .shape{position:absolute;z-index:1;pointer-events:none}
  .page-hero .s1{width:300px;height:300px;border-radius:50%;background:var(--green);opacity:.45;top:-110px;right:-70px;filter:blur(6px)}
  .page-hero .s2{width:220px;height:220px;border-radius:50%;background:var(--coral);opacity:.35;bottom:-90px;left:-60px;filter:blur(6px)}
  .page-hero .s3{width:74px;height:74px;background:var(--sun);top:46px;left:9%;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:twinkle 3s ease-in-out infinite}
  .page-hero .s4{width:46px;height:46px;background:var(--green);top:64px;right:12%;border-radius:12px;transform:rotate(18deg);animation:floaty 4s ease-in-out infinite}
  .page-hero .s5{width:30px;height:30px;border:6px solid var(--sun);border-radius:50%;bottom:62px;right:20%;animation:floaty 5s ease-in-out infinite reverse}
  .page-hero .s6{width:36px;height:36px;background:var(--coral);bottom:70px;left:16%;border-radius:50%;animation:floaty 4.5s ease-in-out infinite}
  .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:2;background:radial-gradient(circle at 25px 34px,var(--green) 24px,transparent 25px) 0 0/50px 34px repeat-x}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
  @keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(12deg)}}
  @media(prefers-reduced-motion:reduce){.page-hero .shape{animation:none!important}}
  @media(max-width:820px){.page-hero h1{font-size:2.4rem}.page-hero .s3{left:4%;top:24px;width:50px;height:50px}.page-hero .s4{right:5%}}

  /* calendar */
  .cal-link{display:block;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px rgba(64,36,128,.18);transition:transform .2s}
  .cal-link:hover{transform:translateY(-4px) rotate(-.4deg)}
  .cal-img{display:block;width:100%;height:auto}

  /* team */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .team-card{background:var(--mist);border:1px solid #ece8f6;border-radius:24px;padding:32px 20px;text-align:center;transition:transform .2s,box-shadow .2s}
  .team-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 16px 34px rgba(64,36,128,.14)}
  .team-card .avatar{position:relative;width:110px;height:110px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Poppins;font-weight:800;font-size:3rem;box-shadow:0 8px 20px rgba(0,0,0,.15)}
  .team-card .emo{position:absolute;right:-8px;bottom:-4px;font-style:normal;font-size:1.7rem;background:#fff;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:transform .25s}
  .team-card:hover .emo{transform:rotate(20deg) scale(1.15)}
  .team-card h3{color:var(--purple);font-size:1.4rem}
  .team-card p{color:#5a5470;margin-top:6px;font-weight:500}
  @media(max-width:820px){.team-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.team-grid{grid-template-columns:1fr}}
  /* newsletter */
  .nl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
  .nl-stat{background:var(--purple);color:#fff;border-radius:20px;padding:22px 16px;text-align:center}
  .nl-stat b{display:block;font-family:Poppins;font-size:2.2rem;color:var(--sun)}
  .nl-stat span{font-size:.92rem;opacity:.95}
  .nl-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .nl-item{display:flex;gap:16px;background:var(--mist);border:1px solid #ece8f6;border-radius:20px;padding:22px}
  .nl-emoji{font-size:2rem;flex:none}
  .nl-item h3{color:var(--purple);font-size:1.1rem;margin-bottom:6px}
  .nl-item p{font-size:.95rem;color:#4d4663}
  @media(max-width:820px){.nl-stats{grid-template-columns:1fr 1fr}.nl-list{grid-template-columns:1fr}}

  .team-card .avatar.photo{width:150px;height:150px;overflow:visible;border:5px solid #fff;box-shadow:0 8px 22px rgba(64,36,128,.22)}
  .team-card .avatar.photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:50%;display:block}
  .team-card .avatar.photo{display:block}
  .team-card .avatar.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* contact box */
  .contact-box{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 100%);color:#fff;border-radius:28px;padding:40px 28px;text-align:center;position:relative;overflow:hidden}
  .contact-box h2{font-size:2.1rem;font-weight:800;margin-bottom:10px;color:var(--sun)}
  .contact-box p{opacity:.95}
  .contact-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0 18px}
  .contact-btns .btn-white{color:var(--purple)}
  .contact-line a{color:#fff;font-weight:600;text-decoration:underline}

  /* resources */
  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .res-card{display:flex;flex-direction:column;gap:6px;background:var(--mist);border:1px solid #ece8f6;border-radius:18px;padding:20px 22px;transition:transform .15s,box-shadow .15s}
  .res-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(64,36,128,.14)}
  .res-card b{font-family:Poppins;color:var(--purple);font-size:1.02rem;line-height:1.25}
  .res-card span{color:#6a6385;font-size:.88rem;word-break:break-all}
  @media(max-width:820px){.res-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.res-grid{grid-template-columns:1fr}}

  .res-group{margin-bottom:40px}
  .res-h{font-size:1.5rem;font-weight:800;color:var(--purple);margin-bottom:16px;display:flex;align-items:center;gap:10px}
  .res-e{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--mist);border-radius:50%;font-size:1.4rem}