





  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; max-width:var(--maxw); margin:0 auto; gap:16px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{height:42px; width:auto;}
  .brand span{font-weight:800; font-size:1.15rem; letter-spacing:0.5px; color:var(--purple-deep);}
  nav.main-nav{display:flex; align-items:center; gap:4px;}
  nav.main-nav a{
    padding:9px 14px; border-radius:999px; font-size:0.97rem; font-weight:600;
    color:var(--gray-600); white-space:nowrap;
  }
  nav.main-nav a:hover{color:var(--purple-deep); background:var(--lavender);}
  nav.main-nav a.active{color:var(--white); background:var(--purple);}
  .header-actions{display:flex; align-items:center; gap:10px;}
  .lang-toggle{
    display:flex; border:1.5px solid var(--border); border-radius:999px; overflow:hidden;
    font-size:0.85rem; font-weight:700;
  }
  .lang-toggle button{
    padding:7px 13px; border:none; background:var(--white); color:var(--gray-400);
  }
  .lang-toggle button.active{background:var(--purple); color:var(--white);}
  .burger{display:none; border:1.5px solid var(--border); background:var(--white); border-radius:10px; padding:8px 10px;}
  .burger span, .burger span::before, .burger span::after{
    content:""; display:block; width:20px; height:2px; background:var(--gray-900); margin:4px 0; position:relative;
  }
  .mobile-nav{display:none; flex-direction:column; padding:8px 24px 16px; border-top:1px solid var(--border);}
  .mobile-nav a{padding:12px 4px; font-weight:600; color:var(--gray-600); border-bottom:1px solid var(--border);}
  .mobile-nav a.active{color:var(--purple-deep);}

  .header-highlights{
    display:flex; gap:10px; padding:10px 24px; border-top:1px solid var(--border);
    max-width:var(--maxw); margin:0 auto; flex-wrap:wrap;
  }
  .highlight-link{
    padding:8px 16px; border-radius:999px; background:var(--purple); color:var(--white);
    font-weight:700; font-size:0.88rem; white-space:nowrap;
  }
  .highlight-link:hover{background:var(--purple-dark);}
  .highlight-link.active{background:var(--purple-deep);}

  @media (max-width:900px){
    nav.main-nav{display:none;}
    .burger{display:block;}
    .mobile-nav.open{display:flex;}
  }


  .hero{
    position:relative; overflow:hidden;
    padding:88px 24px 64px;
    background:linear-gradient(180deg, var(--lavender) 0%, var(--white) 100%);
  }
  .hero-watermark{
    position:absolute; inset-inline-end:-6%; top:-8%;
    width:640px; max-width:70vw; opacity:0.07; pointer-events:none;
  }
  .hero-inner{max-width:760px; margin:0 auto; text-align:center; position:relative;}
  .hero h1{
    font-size:clamp(1.9rem, 4.2vw, 3rem); line-height:1.35; color:var(--purple-deep);
    margin-bottom:22px;
  }
  .hero p.sub{
    font-size:1.08rem; color:var(--gray-600); max-width:620px; margin:0 auto 34px;
  }
  .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px;
    font-weight:700; font-size:0.98rem; border:2px solid transparent; transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--purple); color:var(--white);}
  .btn-primary:hover{background:var(--purple-dark);}
  .btn-outline{background:transparent; color:var(--purple-deep); border-color:var(--purple);}
  .btn-outline:hover{background:var(--lavender);}
  .btn-block{width:100%; justify-content:center;}
  .btn[disabled]{opacity:0.55; cursor:not-allowed; transform:none;}

  .triad{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    max-width:var(--maxw); margin:56px auto 0; padding:0 24px;
  }
  .triad .item{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 20px; text-align:center;
  }
  .triad h3{color:var(--purple-deep); font-size:1.08rem; margin-bottom:8px;}
  .triad p{color:var(--gray-600); font-size:0.93rem;}
  @media (max-width:760px){ .triad{grid-template-columns:1fr;} }


  .page-head{padding:64px 24px 8px; text-align:center;}
  .page-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--purple-deep); margin-bottom:14px;}
  .page-head p{max-width:640px; margin:0 auto; color:var(--gray-600); font-size:1.02rem;}
  section.block{padding:44px 24px;}
  section.block.tinted{background:var(--lavender);}
  .cards-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--maxw); margin:0 auto;
  }
  @media (max-width:900px){ .cards-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .cards-grid{grid-template-columns:1fr;} }
  .card{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px; box-shadow:var(--shadow);
  }
  .card h3{color:var(--purple-deep); font-size:1.08rem; margin-bottom:12px;}
  .card ul li{position:relative; padding-inline-start:20px; margin-bottom:10px; color:var(--gray-600); font-size:0.95rem;}
  .card ul li::before{
    content:""; position:absolute; inset-inline-start:0; top:0.6em; width:7px; height:7px; border-radius:50%;
    background:var(--purple);
  }
  .narrow{max-width:760px; margin:0 auto;}
  .narrow p{color:var(--gray-600); font-size:1.02rem; margin-bottom:16px;}


  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--maxw); margin:36px auto 0;}
  @media (max-width:760px){ .pillars{grid-template-columns:1fr;} }
  .pillar{border-inline-start:4px solid var(--purple); padding:6px 18px;}
  .pillar h3{color:var(--purple-deep); margin-bottom:8px;}
  .pillar p{color:var(--gray-600); font-size:0.95rem;}


  .resource-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
  .resource-item{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 22px;
  }
  .resource-item .txt h3{font-size:1rem; color:var(--purple-deep); margin-bottom:4px;}
  .resource-item .txt p{color:var(--gray-600); font-size:0.9rem;}
  .resource-item .go{
    flex:0 0 auto; padding:9px 16px; border-radius:999px; background:var(--lavender); color:var(--purple-deep);
    font-weight:700; font-size:0.85rem; white-space:nowrap;
  }
  .resource-item:hover .go{background:var(--purple); color:var(--white);}
  @media (max-width:560px){ .resource-item{flex-direction:column; align-items:stretch; text-align:center;} }


  .form-wrap{max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}
  .callout{
    display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:12px; font-size:0.92rem;
    margin-bottom:24px; border:1.5px solid;
  }
  .callout.info{background:var(--lavender); border-color:var(--border); color:var(--gray-600);}
  .callout.warn{background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text);}
  .callout.ok{background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text);}
  .field{margin-bottom:20px;}
  .field label{display:block; font-weight:700; font-size:0.92rem; color:var(--gray-900); margin-bottom:8px;}
  .field .hint{font-size:0.82rem; color:var(--gray-400); margin-top:6px;}
  .field select, .field input[type=date], .field textarea{
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
    font-family:inherit; font-size:0.96rem; color:var(--gray-900); background:var(--white);
  }
  .field select:focus, .field input:focus, .field textarea:focus{border-color:var(--purple);}
  .field textarea{resize:vertical; min-height:110px;}
  .req{color:var(--danger-text);}


  .story-form{max-width:640px; margin:0 auto 36px; background:var(--white); border:1px solid var(--border);
    border-radius:var(--radius); padding:26px; box-shadow:var(--shadow);}
  .stories-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
  .story-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
  .story-card p.txt{color:var(--gray-900); font-size:1rem; white-space:pre-wrap;}
  .story-card p.date{color:var(--gray-400); font-size:0.8rem; margin-top:12px;}
  .empty-state{text-align:center; color:var(--gray-400); padding:40px 20px; font-size:0.95rem;}


  .stats-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;}
  .stat-chip{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:14px 22px; text-align:center;}
  .stat-chip .n{font-size:1.5rem; font-weight:800; color:var(--purple);}
  .stat-chip .l{font-size:0.82rem; color:var(--gray-600);}
  .map-wrap{
    max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  }
  .map-wrap svg{width:100%; height:auto; display:block;}
  .map-info{text-align:center; min-height:26px; font-size:0.9rem; color:var(--purple-deep); font-weight:700; margin-top:10px;}
  .report-chips{max-width:820px; margin:26px auto 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  .chip{
    background:var(--lavender); border:1px solid var(--border); border-radius:999px; padding:9px 16px;
    font-size:0.83rem; color:var(--gray-700); display:flex; gap:8px; align-items:center;
  }
  .chip b{color:var(--purple-deep);}


  .social-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:760px; margin:0 auto;}
  @media (max-width:620px){ .social-grid{grid-template-columns:1fr;} }
  .social-card{
    background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px; text-align:center; transition:border-color .15s ease, transform .15s ease;
  }
  .social-card:hover{border-color:var(--purple); transform:translateY(-2px);}
  .social-card .icon{
    width:46px; height:46px; margin:0 auto 14px; border-radius:50%; background:var(--lavender);
    display:flex; align-items:center; justify-content:center;
  }
  .social-card .icon svg{width:22px; height:22px;}
  .social-card h3{font-size:0.98rem; color:var(--purple-deep); margin-bottom:4px;}
  .social-card p{font-size:0.88rem; color:var(--gray-600);}


  .consent-check{display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--gray-700);
    margin-bottom:18px; cursor:pointer; line-height:1.5;}
  .consent-check input{margin-top:3px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--purple);}

  .gender-toggle{display:flex; gap:10px;}
  .gender-btn{
    flex:1; padding:12px; border-radius:10px; border:1.5px solid var(--border); background:var(--white);
    color:var(--gray-600); font-weight:700; font-size:0.95rem; text-align:center;
  }
  .gender-btn.active{background:var(--purple); border-color:var(--purple); color:var(--white);}

  .hp-field{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden;}







  .captcha-field{margin-bottom:12px;}
  .captcha-slot{max-width:100%;}
  .captcha-note{font-size:0.85rem; margin-bottom:24px;}


  .awareness-group{margin-bottom:40px;}
  .awareness-group h2{color:var(--purple-deep); font-size:1.1rem; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border);}
  .awareness-card{
    display:block; text-align:start; background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 24px; box-shadow:var(--shadow); width:100%; font-family:inherit;
  }
  .awareness-card:hover{border-color:var(--purple);}
  .awareness-card h3{color:var(--purple-deep); font-size:1.02rem;}
  .awareness-detail-block{background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; margin-bottom:18px;}
  .awareness-detail-block h3{color:var(--purple-deep); font-size:1rem; margin-bottom:10px;}
  .awareness-detail-block p{color:var(--gray-600); font-size:0.97rem; white-space:pre-wrap; line-height:1.85;}
  .awareness-back{display:inline-block; margin-bottom:20px; color:var(--purple); font-weight:700; font-size:0.9rem;}

  footer.site{background:var(--purple-deep); color:#D9D4F0; padding:52px 24px 24px; margin-top:20px;}
  .footer-grid{
    max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
    padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-brand{display:flex; align-items:center; gap:10px; max-width:320px;}
  .footer-brand img{height:38px; filter:brightness(0) invert(1); opacity:0.9;}
  .footer-brand .txt span{font-weight:800; color:#fff; display:block; margin-bottom:6px;}
  .footer-brand .txt p{font-size:0.85rem; color:#C4BEE3;}
  .footer-team h4{color:#fff; font-size:0.92rem; margin-bottom:12px;}
  .footer-email{display:flex; flex-direction:column; gap:3px; margin-bottom:14px; color:#fff;}
  .footer-email span{font-size:0.78rem; color:#C4BEE3;}
  .footer-email strong{font-size:0.88rem; font-weight:700; direction:ltr; text-align:start;}
  .footer-team ul li{color:#C4BEE3; font-size:0.88rem; margin-bottom:6px;}
  .footer-social{display:flex; gap:10px;}
  .footer-social a{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
  }
  .footer-social a svg{width:17px; height:17px; fill:#fff;}
  .footer-contact-line{max-width:var(--maxw); margin:16px auto 0; text-align:center; font-size:0.84rem;}
  .footer-contact-line a{color:#fff; text-decoration:underline; text-underline-offset:3px;}
  .footer-bottom{max-width:var(--maxw); margin:20px auto 0; text-align:center; font-size:0.82rem; color:#9C94C7;}
  @media (max-width:760px){ .footer-grid{flex-direction:column; gap:26px;} }
