:root {
  --primary: #ef233c;
  --primary-dark: #8d1024;
  --primary-soft: #ffe9ed;
  --secondary: #ff7a59;
  --secondary-dark: #d94a2b;
  --accent: #ffca58;
  --warning: #b54708;
  --danger: #b42318;
  --ink: #321018;
  --muted: #76545c;
  --surface: #fffafb;
  --surface-alt: #fff0f3;
  --border: #f2c6cf;
  --focus: #ffbf47;
  --shadow-sm: 0 6px 20px rgba(15, 35, 63, .08);
  --shadow-md: 0 20px 50px rgba(15, 35, 63, .12);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --container: 1180px;
}

/* Autonomous 24/7 operations */
.autonomous-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 62px; align-items: center; }
.autonomous-lead { max-width: 760px; color: rgba(255,255,255,.78); font-size: 1.08rem; }
.autonomous-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.autonomous-badges span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #ffe3e8; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); font-size: .82rem; font-weight: 750; }
.autonomous-badges .lucide { width: 17px; height: 17px; color: #ff647a; }
.autonomous-orbit { position: relative; min-height: 390px; display: grid; place-items: center; }
.autonomous-orbit::before, .autonomous-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); }
.autonomous-orbit::before { width: 310px; height: 310px; }
.autonomous-orbit::after { width: 220px; height: 220px; border-style: dashed; }
.orbit-core { position: relative; z-index: 2; display: grid; place-items: center; width: 148px; height: 148px; border-radius: 40px; color: white; background: radial-gradient(circle at 35% 25%, #ff5f77, #b61235 52%, #610819 100%); box-shadow: 0 24px 60px rgba(160,12,43,.38); }
.orbit-core .lucide { width: 40px; height: 40px; }
.orbit-core strong { margin-top: 7px; }
.orbit-core span { color: #ffd6dd; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.orbit-item { position: absolute; z-index: 3; display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: white; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); box-shadow: 0 16px 34px rgba(0,0,0,.26); backdrop-filter: blur(10px); }
.orbit-item .lucide { width: 25px; height: 25px; color: #ffd86b; }
.orbit-item span { margin-top: 5px; font-size: .72rem; font-weight: 750; }
.orbit-one { top: 8px; left: calc(50% - 44px); }
.orbit-two { top: calc(50% - 44px); right: 8px; }
.orbit-three { bottom: 8px; left: calc(50% - 44px); }
.orbit-four { top: calc(50% - 44px); left: 8px; }
.autonomous-work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 58px; }
.autonomous-work-grid article { padding: 26px; color: white; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: 0 20px 46px rgba(0,0,0,.22); }
.autonomous-work-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; color: white; background: linear-gradient(145deg, #ef233c, #7a091f); }
.autonomous-work-grid article > span { color: #ff7f91; font-size: .74rem; font-weight: 850; letter-spacing: .1em; }
.autonomous-work-grid h3 { margin: 8px 0 10px; font-size: 1.13rem; }
.autonomous-work-grid p { margin: 0; color: rgba(255,255,255,.68); font-size: .9rem; }
.volunteer-panel { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; margin-top: 62px; padding: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: radial-gradient(circle at 0 0, rgba(218,24,61,.22), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); }
.volunteer-copy p { color: rgba(255,255,255,.72); }
.volunteer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.volunteer-grid article { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(0,0,0,.18); }
.volunteer-grid article > .lucide { width: 44px; height: 44px; padding: 10px; border-radius: 13px; color: #7a091f; background: #ffd86b; }
.volunteer-grid h3 { margin: 0 0 5px; color: white; font-size: 1rem; }
.volunteer-grid p { margin: 0; color: rgba(255,255,255,.65); font-size: .84rem; }
.autonomous-boundary { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 24px; padding: 20px 22px; border: 1px solid rgba(255,216,107,.34); border-radius: 18px; color: white; background: rgba(255,216,107,.08); }
.autonomous-boundary > .lucide { width: 50px; height: 50px; padding: 12px; border-radius: 14px; color: #7a091f; background: #ffd86b; }
.autonomous-boundary strong, .autonomous-boundary span { display: block; }
.autonomous-boundary span { margin-top: 4px; color: rgba(255,255,255,.70); }
@media (max-width: 980px) {
  .autonomous-hero-grid, .volunteer-panel { grid-template-columns: 1fr; }
  .autonomous-work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .autonomous-orbit { min-height: 330px; transform: scale(.88); margin-inline: -20px; }
  .autonomous-work-grid, .volunteer-grid { grid-template-columns: 1fr; }
  .volunteer-panel { padding: 26px; }
}

/* Contact page */
.contact-section-head { margin-top: 46px; }
.public-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.public-contact-card { position: relative; padding: 28px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)); box-shadow: 0 18px 44px rgba(39,0,8,.20); }
.public-contact-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #ef233c, #8b0b24); }
.public-contact-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 16px; color: white; background: linear-gradient(145deg, #ef233c, #8b0b24); }
.public-contact-card > span { color: #ffb2bf; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.public-contact-card h3 { margin: 8px 0 14px; font-size: 1.18rem; }
.public-contact-card strong { display: block; color: #ffd86b; font-size: 1.05rem; }
.contact-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin-top: 14px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.20); border-radius: 11px; color: white; background: linear-gradient(135deg, #d81739, #8c0a22); font-size: .84rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.contact-action:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 15px 30px rgba(0,0,0,.24); }
.contact-action .lucide { width: 17px; height: 17px; }
.contact-action-whatsapp { background: linear-gradient(135deg, #25d366, #128c4b); }
.contact-action-telegram { background: linear-gradient(135deg, #2aabee, #168acd); }
.contact-demo-label { display: inline-flex; align-items: center; width: fit-content; margin: 9px 0 12px; padding: 5px 9px; border: 1px solid rgba(255,216,107,.28); border-radius: 999px; color: #ffd86b; background: rgba(255,216,107,.08); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.public-contact-card p { margin-bottom: 0; color: #efd9de; }
.contact-whatsapp::before { background: linear-gradient(90deg, #25d366, #128c4a); }
.contact-whatsapp .public-contact-icon { background: linear-gradient(145deg, #25d366, #128c4a); }
.contact-telegram::before { background: linear-gradient(90deg, #2aabee, #168acd); }
.contact-telegram .public-contact-icon { background: linear-gradient(145deg, #2aabee, #168acd); }
.online-operation-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 58px; align-items: center; color: white; }
.online-operation-grid > div:first-child > p:not(.lead-copy) { color: #d3c7ca; }
.online-operation-card { position: relative; overflow: hidden; padding: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 28px; background: radial-gradient(circle at 90% 8%, rgba(239,35,60,.28), transparent 34%), rgba(255,255,255,.07); }
.online-orbit { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 26px; border-radius: 22px; color: white; background: linear-gradient(145deg, #ef233c, #6d071a); box-shadow: 0 18px 38px rgba(145,7,35,.34); }
.online-orbit .lucide { width: 36px; height: 36px; }
.online-operation-card > span { color: #ff9faf; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.online-operation-card h3 { font-size: 1.6rem; line-height: 1.35; }
.online-operation-card ul { display: grid; gap: 13px; padding: 0; margin: 24px 0 0; list-style: none; }
.online-operation-card li { display: flex; gap: 11px; align-items: center; color: #e3d8da; }
.online-operation-card li .lucide { width: 19px; height: 19px; padding: 3px; border-radius: 50%; color: #4b0714; background: #ffd86b; }
.ownership-panel { display: grid; grid-template-columns: 110px 1fr; gap: 34px; align-items: start; color: white; }
.ownership-icon { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 28px; color: #670719; background: linear-gradient(145deg, #ffe6a2, #ffbf4c); box-shadow: 0 20px 44px rgba(58,2,14,.28); }
.ownership-icon .lucide { width: 48px; height: 48px; }
.ownership-panel h2 { margin-top: 8px; }
.ownership-panel > div:last-child > p { max-width: 900px; color: #f0d9de; }
.ownership-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ownership-principles article { padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.08); }
.ownership-principles .lucide { width: 28px; height: 28px; color: #ffd86b; }
.ownership-principles strong, .ownership-principles span { display: block; }
.ownership-principles strong { margin: 15px 0 6px; }
.ownership-principles span { color: #e2cdd2; font-size: .9rem; }
.contact-purpose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.contact-purpose-grid article { padding: 26px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.07); }
.contact-purpose-grid .lucide { width: 34px; height: 34px; color: #ff506a; }
.contact-purpose-grid h3 { margin: 18px 0 8px; }
.contact-purpose-grid p { margin: 0; color: #cec3c6; }
@media (max-width: 1080px) {
  .public-contact-grid, .contact-purpose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .online-operation-grid { grid-template-columns: 1fr; }
  .ownership-panel { grid-template-columns: 1fr; }
  .ownership-principles { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .public-contact-grid, .contact-purpose-grid { grid-template-columns: 1fr; }
}

/* Comprehensive About page */
.about-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 60px; align-items: center; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.about-hero-panel { padding: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); box-shadow: 0 28px 70px rgba(20,0,5,.28); }
.about-hero-panel-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; color: #7a071d; background: linear-gradient(145deg,#ffe795,#ffc95a); }
.about-hero-panel > span { display: block; margin: 24px 0 10px; color: #ffd86b; font-size: .77rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.about-hero-panel blockquote { margin: 0; color: white; font-size: 1.25rem; line-height: 1.6; font-weight: 720; }
.about-problem-grid, .funding-grid, .collaboration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; color: white; }
.problem-cards { display: grid; gap: 14px; }
.problem-cards article { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.06); }
.problem-cards .lucide { width: 46px; height: 46px; padding: 11px; color: #ff536c; border-radius: 13px; background: rgba(239,35,60,.12); }
.problem-cards strong, .problem-cards span { display: block; }
.problem-cards span { margin-top: 5px; color: #cbc4c6; }
.vision-mission-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; }
.vision-card { padding: 36px; color: white; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; background: rgba(255,255,255,.08); }
.vision-card > .lucide { width: 48px; height: 48px; color: #ffd86b; }
.vision-card > span { display: block; margin: 25px 0 8px; color: #ffb2bf; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.vision-card h3 { margin: 0; font-size: 1.5rem; line-height: 1.45; }
.vision-card ul { margin: 0; padding-left: 20px; color: #f2dce0; }
.vision-card li + li { margin-top: 10px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.benefit-grid article { position: relative; overflow: hidden; padding: 28px; color: white; border: 1px solid rgba(255,255,255,.13); border-radius: 21px; background: rgba(255,255,255,.06); }
.benefit-grid article > .lucide { width: 34px; height: 34px; color: #ff536c; }
.benefit-no { position: absolute; right: 20px; top: 16px; color: rgba(255,255,255,.10); font-size: 2.5rem; font-weight: 900; }
.benefit-grid h3 { margin: 22px 0 9px; }
.benefit-grid p { margin: 0; color: #cbc4c6; }
.operating-layers { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.operating-layers article { padding: 30px; color: white; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: rgba(255,255,255,.08); }
.operating-layers .layer-no { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #ffd86b; background: rgba(255,216,107,.10); font-size: .75rem; font-weight: 850; }
.operating-layers .lucide { display: block; width: 40px; height: 40px; margin: 24px 0 16px; color: white; }
.operating-layers p { color: #eed9dd; }
.about-callout { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 24px; padding: 21px 23px; border: 1px solid rgba(255,216,107,.35); border-radius: 18px; color: white; background: rgba(255,216,107,.09); }
.about-callout > .lucide { width: 50px; height: 50px; padding: 12px; color: #7a071d; border-radius: 14px; background: #ffd86b; }
.about-callout strong, .about-callout span { display: block; }
.about-callout span { color: #f0dce0; }
.about-values { grid-template-columns: repeat(4,1fr); }
.funding-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.funding-rules div { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.07); }
.funding-rules .lucide { width: 20px; height: 20px; color: #ffd86b; }
.funding-card { padding: 34px; color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }
.funding-card > .lucide { width: 54px; height: 54px; color: #ffd86b; }
.funding-card > span { display: block; margin: 22px 0 10px; color: #ffb7c3; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.funding-card ul { padding-left: 20px; color: #f5e4e7; }
.funding-card li + li { margin-top: 9px; }
.funding-card small { display: block; margin-top: 20px; color: #e8cbd1; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.roadmap-grid article { position: relative; padding: 28px; color: white; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.06); }
.roadmap-grid article > span { position: absolute; top: 20px; right: 20px; color: rgba(255,255,255,.14); font-size: 2rem; font-weight: 900; }
.roadmap-grid .lucide { width: 36px; height: 36px; color: #ff536c; }
.roadmap-grid h3 { margin: 22px 0 8px; }
.roadmap-grid p { color: #cbc4c6; }
.roadmap-grid small { color: #ff9daf; font-weight: 800; }
.roadmap-grid .roadmap-active { border-color: rgba(255,216,107,.42); background: linear-gradient(145deg, rgba(255,216,107,.12), rgba(255,255,255,.06)); }
.roadmap-grid .roadmap-active .lucide, .roadmap-grid .roadmap-active small { color: #ffd86b; }
.collaboration-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collaboration-list div { display: flex; align-items: center; gap: 12px; padding: 17px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.07); }
.collaboration-list .lucide { width: 24px; height: 24px; color: #ffd86b; }
.about-cta { padding: 72px 0; }
.about-cta-panel { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 42px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: radial-gradient(circle at 90% 20%, rgba(239,35,60,.24), transparent 28%), rgba(255,255,255,.06); }
.about-cta-panel h2 { max-width: 700px; margin-top: 8px; }
.about-cta-panel p { color: #d7c9cc; }
.about-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
@media (max-width: 980px) {
  .about-hero-grid, .about-problem-grid, .funding-grid, .collaboration-grid, .vision-mission-grid { grid-template-columns: 1fr; }
  .benefit-grid, .operating-layers, .roadmap-grid { grid-template-columns: repeat(2,1fr); }
  .about-values { grid-template-columns: repeat(2,1fr); }
  .about-cta-panel { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .benefit-grid, .operating-layers, .roadmap-grid, .about-values, .funding-rules, .collaboration-list { grid-template-columns: 1fr; }
  .about-hero-actions, .about-cta-actions { align-items: stretch; flex-direction: column; }
  .about-hero-actions .button, .about-cta-actions .button { justify-content: center; }
  .about-hero-panel, .vision-card, .funding-card, .about-cta-panel { padding: 26px; }
}

/* Statistics dashboard */
.stats-hero { padding-bottom: 62px; }
.stats-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 54px; align-items: end; }
.stats-hero-summary { padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.07); box-shadow: 0 22px 55px rgba(0,0,0,.22); }
.stats-hero-summary strong, .stats-hero-summary span { display: block; }
.stats-hero-summary strong { margin: 18px 0 7px; color: white; font-size: 1.12rem; }
.stats-hero-summary > span:last-child { color: #c9c2c4; font-size: .9rem; }
.simulation-badge { display: inline-flex !important; align-items: center; gap: 7px; width: fit-content; padding: 7px 10px; border-radius: 999px; color: #2f2100 !important; background: #ffd86b; font-size: .76rem !important; font-weight: 850; }
.simulation-badge .lucide { width: 16px; height: 16px; }
.stats-dashboard { padding-top: 72px; }
.dashboard-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; color: white; }
.dashboard-toolbar h2 { margin-bottom: 0; }
.dashboard-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; color: #f5e8eb; background: rgba(255,255,255,.07); cursor: pointer; }
.filter-chip:hover, .filter-chip.active { color: #30030c; background: #ffd86b; border-color: #ffd86b; }
.filter-chip .lucide { width: 16px; height: 16px; }
.metric-grid-enhanced .metric-card { position: relative; overflow: hidden; min-height: 210px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); box-shadow: 0 18px 48px rgba(45,0,9,.18); }
.metric-card-accent::after { content: ""; position: absolute; right: -45px; top: -55px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,216,107,.14); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.metric-top span { margin: 0; color: #f2dfe3; }
.metric-top .lucide { width: 24px; height: 24px; color: #ffd86b; }
.metric-card strong { margin: 20px 0 12px; font-size: 2.55rem; }
.metric-change { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.metric-change .lucide { width: 15px; height: 15px; }
.metric-change.up { color: #9be9be; }
.metric-change.neutral { color: #ffd68a; }
.metric-spark { display: flex; align-items: end; gap: 5px; height: 48px; margin-top: 18px; }
.metric-spark span { flex: 1; min-height: 8px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ffd86b, #ff8f3d); }
.metric-progress, .mini-progress { overflow: hidden; height: 7px; margin-top: 22px; border-radius: 999px; background: rgba(255,255,255,.11); }
.metric-progress span, .mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ef233c, #ff6d7f); }
.metric-progress.warning span { background: linear-gradient(90deg, #ffb347, #ffd86b); }
.metric-progress.success span { background: linear-gradient(90deg, #28a86b, #74d7a0); }
.dashboard-grid { display: grid; gap: 20px; margin-top: 20px; }
.dashboard-grid-main { grid-template-columns: 1.7fr .8fr; }
.dashboard-grid-secondary { grid-template-columns: 1.15fr 1fr .72fr; }
.dashboard-card { padding: 26px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)); box-shadow: 0 20px 48px rgba(0,0,0,.18); }
.section-black .dashboard-card { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.dashboard-card-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.dashboard-card-head h3, .dashboard-card-head h2 { margin: 4px 0 0; font-size: 1.18rem; letter-spacing: -.02em; }
.dashboard-label { color: #ff9caf; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.chart-legend { display: flex; gap: 14px; color: #d7c9cc; font-size: .75rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.red { background: #ef233c; }
.legend-dot.amber { background: #ffd86b; }
.line-chart-wrap { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 280px 26px; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 7px 7px 13px 0; color: #9d8e92; font-size: .7rem; text-align: right; }
.line-chart { width: 100%; height: 280px; }
.grid-lines line { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.area-path { fill: url(#areaRed); }
.line-primary, .line-secondary { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.line-primary { stroke: #ef233c; }
.line-secondary { stroke: #ffd86b; }
.points.primary circle { fill: #ef233c; stroke: white; stroke-width: 2; }
.points.secondary circle { fill: #ffd86b; stroke: #2b030c; stroke-width: 2; }
.chart-x-labels { grid-column: 2; display: flex; justify-content: space-between; padding: 0 4px; color: #a99b9e; font-size: .72rem; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: white; background: rgba(255,255,255,.06); }
.icon-button .lucide { width: 18px; height: 18px; }
.donut-layout { display: grid; justify-items: center; gap: 24px; }
.donut-chart { position: relative; display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(#ef233c 0 61%, #ffd86b 61% 86%, #3bbd7c 86% 97%, #696268 97% 100%); }
.donut-chart::before { content: ""; width: 124px; height: 124px; border-radius: 50%; background: #390711; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.section-black .donut-chart::before { background: #141214; }
.donut-center { position: absolute; text-align: center; }
.donut-center strong, .donut-center span { display: block; }
.donut-center strong { font-size: 1.55rem; }
.donut-center span { color: #aa9da0; font-size: .72rem; }
.donut-legend { display: grid; gap: 10px; width: 100%; }
.donut-legend > div { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; color: #d9cdd0; font-size: .78rem; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; }
.status-verified { background: #ef233c; }.status-review { background: #ffd86b; }.status-referred { background: #3bbd7c; }.status-closed { background: #696268; }
.small-muted { color: #a99b9e; font-size: .74rem; }
.horizontal-bars { display: grid; gap: 18px; }
.bar-row > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 7px; color: #ded1d4; font-size: .8rem; }
.bar-row strong { color: white; }
.bar-track { overflow: hidden; height: 9px; border-radius: 999px; background: rgba(255,255,255,.09); }
.bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b0d25, #ef233c, #ff7183); }
.channel-stats { display: grid; gap: 14px; }
.channel-stat { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.channel-stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: white; }
.channel-stat-icon.form, .channel-stat-icon.chat { background: linear-gradient(145deg, #ef233c, #8f0c25); }
.channel-stat-icon.telegram { background: linear-gradient(145deg, #36aeea, #168acd); }
.channel-stat-icon.whatsapp { background: linear-gradient(145deg, #31d568, #18a94b); }
.channel-stat-icon .lucide { width: 21px; height: 21px; }
.channel-stat > div > span, .channel-stat > div > strong { display: block; }
.channel-stat > div > span { color: #d4c8cb; font-size: .76rem; }
.channel-stat > div > strong { margin-top: 2px; font-size: 1rem; }
.channel-stat small { color: #d7cbce; }
.mini-progress { height: 4px; margin-top: 7px; }
.processing-card > .dashboard-card-head > .lucide { width: 28px; height: 28px; color: #ffd86b; }
.processing-time { display: flex; align-items: baseline; gap: 7px; margin: 26px 0 8px; }
.processing-time strong { font-size: 3.3rem; line-height: 1; }
.processing-time span { color: #ffd86b; font-weight: 800; }
.processing-card p { color: #cdbfc2; font-size: .82rem; }
.time-breakdown { display: grid; gap: 10px; margin-top: 20px; }
.time-breakdown div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); color: #cdbfc2; font-size: .76rem; }
.time-breakdown strong { color: white; }
.stats-table-section { padding-top: 74px; }
.table-card { padding: 0; overflow: hidden; }
.table-head { padding: 26px 26px 0; }
.table-head p { margin: 7px 0 0; color: #a99b9e; font-size: .84rem; }
.table-actions { display: flex; gap: 8px; }
.table-responsive { overflow-x: auto; margin-top: 16px; }
.stats-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.stats-table th, .stats-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
.stats-table th { color: #a99b9e; background: rgba(255,255,255,.035); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.stats-table td { color: #d8ced0; font-size: .78rem; }
.stats-table tbody tr:hover { background: rgba(255,255,255,.035); }
.table-channel { display: inline-flex; align-items: center; gap: 6px; }
.table-channel .lucide { width: 15px; height: 15px; }
.table-channel.telegram { color: #55c0f2; }.table-channel.whatsapp { color: #57df82; }.table-channel.form, .table-channel.chat { color: #ff8ca0; }
.status-pill-table, .risk { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .69rem; font-weight: 800; white-space: nowrap; }
.status-pill-table.verified { color: #a8f0c7; background: rgba(41,180,105,.12); }
.status-pill-table.review { color: #ffe5a0; background: rgba(255,200,74,.12); }
.status-pill-table.referred { color: #b9dfff; background: rgba(49,142,218,.13); }
.status-pill-table.evidence { color: #ffc2cb; background: rgba(239,35,60,.13); }
.risk.high { color: #ffc2cb; background: rgba(239,35,60,.12); }.risk.medium { color: #ffe5a0; background: rgba(255,200,74,.12); }.risk.low { color: #b9dfff; background: rgba(49,142,218,.13); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; color: #9e9194; font-size: .76rem; }
.pagination { display: flex; gap: 5px; }
.pagination button { display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #d9ced0; background: rgba(255,255,255,.04); }
.pagination button.current { color: #28030a; background: #ffd86b; border-color: #ffd86b; }
.pagination button:disabled { opacity: .35; }
.pagination .lucide { width: 15px; height: 15px; }
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.insight-grid article { padding: 24px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(255,255,255,.07); }
.insight-grid .lucide { width: 30px; height: 30px; color: #ffd86b; }
.insight-grid span, .insight-grid strong { display: block; }
.insight-grid span { margin-top: 22px; color: #e8d9dc; font-size: .78rem; }
.insight-grid strong { margin: 4px 0 9px; font-size: 1.65rem; }
.insight-grid p { margin: 0; color: #c8b8bc; font-size: .8rem; }
@media (max-width: 1100px) {
  .dashboard-grid-main { grid-template-columns: 1fr; }
  .dashboard-grid-secondary { grid-template-columns: repeat(2, 1fr); }
  .processing-card { grid-column: span 2; }
}
@media (max-width: 980px) {
  .stats-hero-grid { grid-template-columns: 1fr; }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-filters { justify-content: flex-start; }
  .insight-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .dashboard-grid-secondary { grid-template-columns: 1fr; }
  .processing-card { grid-column: auto; }
  .chart-card-wide { padding-inline: 16px; }
  .chart-legend { flex-direction: column; gap: 5px; }
  .line-chart-wrap { grid-template-rows: 225px 24px; }
  .line-chart { height: 225px; }
  .table-head, .table-footer { align-items: stretch; flex-direction: column; }
  .table-actions { flex-wrap: wrap; }
  .insight-grid { grid-template-columns: 1fr; }
}

/* News portal */
.news-page-hero { padding-bottom: 70px; }
.news-category-bar { position: sticky; top: 76px; z-index: 30; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(8,8,9,.94); backdrop-filter: blur(14px); }
.news-category-wrap { min-height: 54px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.news-category-wrap::-webkit-scrollbar { display: none; }
.news-category-wrap strong { margin-right: 6px; color: #ff8899; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.news-category-wrap a { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; color: #ddd1d4; text-decoration: none; font-size: .82rem; font-weight: 700; }
.news-category-wrap a:hover { color: white; background: rgba(239,35,60,.18); }
.news-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 30px; }
.news-section-heading h2 { margin-bottom: 0; }
.news-update-label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: #d9c6ca; background: rgba(255,255,255,.07); font-size: .78rem; }
.news-update-label .lucide { width: 16px; height: 16px; color: #ff536c; }
.news-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.news-main-column { min-width: 0; }
.news-lead-story { overflow: hidden; display: grid; grid-template-columns: .92fr 1.08fr; min-height: 360px; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(255,255,255,.06); box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.news-visual { position: relative; display: grid; place-items: center; min-height: 330px; color: white; }
.news-visual::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.news-visual-red { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.17), transparent 26%), linear-gradient(145deg, #8c0a25, #d51d40 60%, #ff536c); }
.news-visual > .lucide { position: relative; z-index: 2; width: 90px; height: 90px; stroke-width: 1.25; }
.news-visual > span { position: absolute; z-index: 2; left: 22px; bottom: 20px; padding: 7px 10px; border-radius: 999px; background: rgba(0,0,0,.28); font-size: .76rem; font-weight: 800; }
.news-lead-content { padding: 38px; }
.news-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #aa9da0; font-size: .78rem; }
.news-meta span { color: #ff7388; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.news-lead-content h2 { margin: 18px 0 14px; font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.14; }
.news-lead-content p { color: #ccc0c3; font-size: 1rem; }
.news-byline { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: #eee4e6; font-size: .84rem; }
.news-byline .lucide { width: 18px; height: 18px; color: #ffd86b; }
.news-list { margin-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.news-list-item { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.news-list-visual { display: grid; place-items: center; min-height: 128px; border-radius: 18px; }
.news-list-visual.red { background: linear-gradient(145deg, #6e071b, #b70e31); }
.news-list-visual.dark { background: radial-gradient(circle at 75% 20%, rgba(239,35,60,.22), transparent 30%), linear-gradient(145deg, #050506, #242126); }
.news-list-visual .lucide { width: 50px; height: 50px; color: white; stroke-width: 1.4; }
.news-list-item h3 { margin: 9px 0 7px; color: white; font-size: 1.3rem; line-height: 1.3; }
.news-list-item p { margin: 0; color: #bfb4b7; font-size: .92rem; }
.news-sidebar { display: grid; gap: 20px; position: sticky; top: 150px; }
.sidebar-panel { padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); }
.sidebar-title { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.11); }
.sidebar-title .lucide { width: 21px; height: 21px; color: #ff536c; }
.sidebar-title h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.popular-news-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.popular-news-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.popular-news-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.popular-news-list li > span { color: #ff536c; font-size: 1.05rem; font-weight: 900; }
.popular-news-list strong, .popular-news-list small { display: block; }
.popular-news-list strong { color: white; font-size: .9rem; line-height: 1.35; }
.popular-news-list small { margin-top: 4px; color: #a99da0; }
.related-news-list { display: grid; gap: 4px; }
.related-news-list article { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.related-news-list article:last-child { border-bottom: 0; }
.related-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: white; background: linear-gradient(145deg, #8d0a25, #d41b3f); }
.related-icon .lucide { width: 22px; height: 22px; }
.related-news-list span { color: #ff899a; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.related-news-list h3 { margin: 3px 0 0; font-size: .9rem; line-height: 1.35; }
.newsletter-panel { text-align: center; background: radial-gradient(circle at 50% 0, rgba(239,35,60,.30), transparent 45%), linear-gradient(145deg, #2a070f, #0b0a0b); }
.newsletter-panel > .lucide { width: 38px; height: 38px; margin: 0 auto; color: #ffd86b; }
.newsletter-panel h2 { margin: 16px 0 8px; font-size: 1.2rem; }
.newsletter-panel p { color: #bfb0b3; font-size: .87rem; }
.newsletter-panel span { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #ffbdc8; background: rgba(239,35,60,.14); font-size: .74rem; font-weight: 800; }
.news-editor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-editor-grid article { padding: 28px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.075); }
.editor-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #74091e; background: #ffd86b; }
.editor-icon .lucide { width: 27px; height: 27px; }
.news-editor-grid article > span { display: block; margin-top: 22px; color: #ffb3bf; font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.news-editor-grid h3 { margin: 8px 0 10px; font-size: 1.2rem; line-height: 1.35; }
.news-editor-grid p { margin: 0; color: #e0cdd1; font-size: .9rem; }
.news-archive { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.news-archive p { max-width: 700px; color: #bfb2b5; }
.archive-status { display: grid; grid-template-columns: 48px 1fr; gap: 13px; min-width: 290px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.06); }
.archive-status > .lucide { grid-row: span 2; width: 46px; height: 46px; padding: 11px; border-radius: 13px; color: white; background: linear-gradient(145deg, #8a0923, #d51c40); }
.archive-status strong, .archive-status span { display: block; }
.archive-status span { color: #a99ca0; font-size: .84rem; }
@media (max-width: 1080px) {
  .news-portal-grid { grid-template-columns: 1fr; }
  .news-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .newsletter-panel { grid-column: span 2; }
}
@media (max-width: 760px) {
  .news-category-bar { top: 76px; }
  .news-section-heading { align-items: flex-start; flex-direction: column; }
  .news-lead-story { grid-template-columns: 1fr; }
  .news-visual { min-height: 240px; }
  .news-lead-content { padding: 27px; }
  .news-list-item { grid-template-columns: 110px 1fr; gap: 15px; }
  .news-list-visual { min-height: 110px; }
  .news-list-item h3 { font-size: 1.05rem; }
  .news-list-item p { display: none; }
  .news-sidebar, .news-editor-grid { grid-template-columns: 1fr; }
  .newsletter-panel { grid-column: auto; }
  .news-archive { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .news-list-item { grid-template-columns: 1fr; }
  .news-list-visual { min-height: 150px; }
}

/* Multi-page public site */
.nav-links a.active { color: white; background: rgba(255,255,255,.12); }
.nav-links { gap: 10px; }
.nav-links > a:not(.button) { padding: 8px 9px; border-radius: 9px; font-size: .84rem; white-space: nowrap; }
.nav-links .button { min-height: 42px; padding-inline: 14px; font-size: .84rem; }
.page-hero { position: relative; overflow: hidden; padding: 110px 0 80px; color: white; }
.page-hero h1 { max-width: 900px; margin-bottom: 20px; }
.page-hero p { max-width: 760px; margin: 0; color: #f6dfe4; font-size: 1.15rem; }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.news-card { position: relative; padding: 30px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.news-featured { grid-column: span 2; padding: 40px; background: radial-gradient(circle at 90% 10%, rgba(238,35,68,.24), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); }
.news-date, .news-tag { display: inline-flex; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.news-date { color: #ffc9d2; }
.news-tag { margin-top: 20px; padding: 6px 10px; color: #ffd86b; background: rgba(255,216,107,.10); }
.news-icon, .law-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 20px 0; border-radius: 16px; color: white; background: linear-gradient(145deg, #ef233c, #8b0b24); }
.news-card h2 { margin: 0 0 12px; font-size: 1.45rem; }
.news-card p { color: #cfcfd3; }
.empty-notice, .dashboard-status, .contact-warning, .legal-disclaimer { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 28px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; color: white; background: rgba(255,255,255,.07); }
.empty-notice > .lucide, .dashboard-status > .lucide, .contact-warning > .lucide, .legal-disclaimer > .lucide { width: 50px; height: 50px; padding: 12px; border-radius: 14px; color: #7a071d; background: #ffd86b; }
.empty-notice strong, .empty-notice span, .dashboard-status strong, .dashboard-status span, .contact-warning strong, .contact-warning span, .legal-disclaimer strong, .legal-disclaimer span { display: block; }
.empty-notice span, .dashboard-status span, .contact-warning span, .legal-disclaimer span { color: #e2d5d8; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.metric-card { padding: 26px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(255,255,255,.08); }
.metric-card > .lucide { width: 30px; height: 30px; color: #ffd86b; }
.metric-card span, .metric-card small { display: block; }
.metric-card span { margin-top: 22px; color: #f2dbe0; font-size: .88rem; }
.metric-card strong { display: block; margin: 4px 0; font-size: 2.8rem; line-height: 1; }
.metric-card small { color: #cfb8bd; }
.stats-preview-grid, .values-grid, .compliance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stats-preview-grid article, .values-grid article, .compliance-grid article { padding: 25px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(255,255,255,.07); }
.stats-preview-grid .lucide, .values-grid .lucide, .compliance-grid .lucide { width: 32px; height: 32px; color: #ff536c; }
.stats-preview-grid h3, .values-grid h3, .compliance-grid h3 { margin: 18px 0 8px; }
.stats-preview-grid p, .values-grid p, .compliance-grid p { margin: 0; color: #cfcfd3; }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; color: white; }
.lead-copy { color: #f4d9df; font-size: 1.16rem; }
.mission-card { padding: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 26px; background: radial-gradient(circle at 90% 5%, rgba(239,35,60,.28), transparent 35%), rgba(255,255,255,.07); }
.mission-card > .lucide { width: 50px; height: 50px; color: #ffd86b; }
.mission-card span { display: block; margin-top: 28px; color: #ffbac6; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.mission-card h3 { font-size: 1.55rem; line-height: 1.4; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.contact-grid article { padding: 30px; color: white; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.08); }
.contact-grid .lucide { width: 38px; height: 38px; color: #ffd86b; }
.contact-grid h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.contact-grid p { color: #ead5da; }
.contact-state { display: inline-flex; margin-top: 14px; padding: 6px 10px; border-radius: 999px; color: #ffd86b; background: rgba(255,216,107,.10); font-size: .77rem; font-weight: 800; }
.contact-cta { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 26px; padding: 30px; color: white; border-radius: 22px; background: linear-gradient(120deg, #080808, #4d0716 55%, #9f102d); }
.contact-cta h2 { margin: 0; font-size: 1.8rem; }
.contact-cta p { margin: 6px 0 0; color: #e7ced3; }
.law-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
.law-grid article { padding: 32px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.07); }
.law-grid article > span { color: #ff9daf; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.law-grid h2 { margin: 7px 0 12px; font-size: 1.45rem; letter-spacing: -.025em; }
.law-grid p { color: #d0c4c7; }
.law-grid a { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #ffd86b; font-weight: 750; text-decoration: none; }
.law-grid a .lucide { width: 16px; height: 16px; }
@media (max-width: 980px) {
  .metric-grid, .stats-preview-grid, .values-grid, .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page-hero { padding: 82px 0 58px; }
  .news-grid, .law-grid, .metric-grid, .stats-preview-grid, .values-grid, .compliance-grid { grid-template-columns: 1fr; }
  .news-featured { grid-column: auto; padding: 30px; }
  .contact-cta { align-items: stretch; flex-direction: column; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,202,88,.14), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(255,122,89,.15), transparent 30%),
    linear-gradient(180deg, #3b0611 0, #520817 14%, #690b1e 30%, #861027 50%, #2b050d 76%, #170308 100%);
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.lucide { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(88,6,24,.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 34px rgba(71,4,18,.18); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 42px; height: 42px; }
.brand small { display: block; color: #ffdce3; font-size: .69rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: #ffe8ed; text-decoration: none; font-size: .94rem; font-weight: 650; }
.nav-links a:hover { color: white; }
.menu-button { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28); color: white; background: rgba(255,255,255,.10); border-radius: 12px; cursor: pointer; }
.menu-button .lucide { width: 22px; height: 22px; }
.menu-close-icon { display: none; }
.menu-button.is-open .menu-open-icon { display: none; }
.menu-button.is-open .menu-close-icon { display: block; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; text-decoration: none; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white !important; background: linear-gradient(135deg, #ff5a67 0%, #ef233c 46%, #9d1230 100%); box-shadow: 0 14px 34px rgba(93,7,27,.34); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { background: rgba(255,255,255,.13); color: white; border-color: rgba(255,255,255,.32); box-shadow: 0 12px 26px rgba(74,4,18,.16); backdrop-filter: blur(10px); }
.button-light { background: white; color: var(--primary-dark); }

.hero { position: relative; overflow: hidden; padding: 92px 0 92px; color: white; background:
  radial-gradient(circle at 78% 18%, rgba(255,202,88,.22), transparent 23%),
  radial-gradient(circle at 92% 74%, rgba(255,122,89,.30), transparent 28%),
  radial-gradient(circle at 8% 78%, rgba(255,255,255,.08), transparent 30%),
  linear-gradient(135deg, #2f040d 0%, #4a0715 28%, #65091d 61%, #8f102a 100%); }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 72px solid rgba(255,255,255,.05); left: -240px; bottom: -330px; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 62px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.30); border-radius: 999px; background: rgba(255,255,255,.11); color: white; font-weight: 750; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(255,202,88,.18); }
h1 { max-width: 760px; margin: 22px 0 22px; font-size: clamp(2.55rem, 5.5vw, 4.9rem); line-height: 1.02; letter-spacing: -.055em; }
.gradient-text { color: transparent; background: linear-gradient(135deg, #ffffff 0%, #ffd4dc 48%, #ffca58 100%); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 670px; color: #ffe5ea; font-size: clamp(1.05rem, 2vw, 1.24rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; color: #ffe6eb; font-size: .9rem; font-weight: 650; }
.trust-row li { display: flex; align-items: center; gap: 8px; }
.trust-row li .lucide { width: 22px; height: 22px; padding: 4px; color: #721025; background: linear-gradient(145deg, #ffdf8b, #ffb84d); border-radius: 50%; }

.ai-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.orb { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), rgba(255,255,255,.08) 44%, rgba(255,90,103,.12) 100%); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 34px 80px rgba(62,3,15,.36); backdrop-filter: blur(8px); }
.orb::before, .orb::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(220,38,38,.38); inset: 32px; animation: rotate 28s linear infinite; }
.orb::after { inset: 74px; border-color: rgba(249,115,22,.4); animation-direction: reverse; animation-duration: 20s; }
.core { position: relative; z-index: 2; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 35px; color: #6d0b20; background: linear-gradient(145deg, #fff6da 0%, #ffca58 55%, #ff9a56 100%); box-shadow: 0 24px 55px rgba(76,6,22,.34); text-align: center; font-weight: 850; }
.core .lucide { width: 48px; height: 48px; margin: 0 auto 9px; }
.core span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.float-card { position: absolute; z-index: 3; width: 190px; padding: 15px 16px; color: #fff; border: 1px solid rgba(255,255,255,.20); border-radius: 16px; background: rgba(87,6,24,.72); box-shadow: 0 16px 38px rgba(55,2,14,.26); backdrop-filter: blur(14px); }
.float-card strong { display: block; font-size: .92rem; }
.float-card span { color: #ffdce3; font-size: .75rem; }
.float-card .icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(145deg, #ffdf8b, #ffb84d); color: #7c1026; font-weight: 900; }
.float-card .icon .lucide { width: 20px; height: 20px; }
.fc-1 { left: 0; top: 55px; }
.fc-2 { right: 0; top: 95px; }
.fc-3 { left: 24px; bottom: 55px; }
.fc-4 { right: 12px; bottom: 48px; }
@keyframes rotate { to { transform: rotate(360deg); } }

.section { position: relative; padding: 90px 0; background: linear-gradient(180deg, #4a0715 0%, #5b0819 50%, #3a050f 100%); color: white; }
.section-alt { background: linear-gradient(145deg, #26030a 0%, #430612 46%, #65091d 100%); color: white; }
.section-alt .section-head p, .section-alt .process-step p, .section-alt .flow-card p { color: #ffe0e6; }
.section-alt .kicker { color: #ffdc7b; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { color: var(--primary); font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h2 { margin: 10px 0 14px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; letter-spacing: -.04em; }
.section-head p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; box-shadow: 0 8px 30px rgba(15,35,63,.045); }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 15px; color: var(--primary); background: var(--primary-soft); font-size: 1.22rem; font-weight: 900; }
.card-icon .lucide { width: 26px; height: 26px; }
.card h3 { margin: 0 0 9px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: .94rem; }
#tata-kelola .card { color: var(--ink); }
#tata-kelola .card h3 { color: var(--ink); }
#tata-kelola .card p { color: var(--muted); }

.channel-section { color: white; background:
  radial-gradient(circle at 8% 15%, rgba(255,202,88,.18), transparent 24%),
  radial-gradient(circle at 92% 85%, rgba(255,122,89,.28), transparent 26%),
  linear-gradient(135deg, #26030a 0%, #430612 47%, #65091d 100%); }
.channel-section .section-head p { color: #ffe0e6; }
.channel-section .kicker { color: #ffdc7b; }
.channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.channel-card { position: relative; overflow: hidden; padding: 28px; color: white; border: 1px solid rgba(255,255,255,.20); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); box-shadow: 0 18px 44px rgba(61,3,16,.24); backdrop-filter: blur(12px); transition: transform .2s ease, box-shadow .2s ease; }
.channel-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #ef4444, #991b1b); }
.channel-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(127,29,29,.13); }
.channel-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 17px; color: white; background: linear-gradient(145deg, #ef4444, #b91c1c); box-shadow: 0 10px 24px rgba(185,28,28,.22); }
.channel-form .channel-icon,
.channel-webchat .channel-icon { background: linear-gradient(145deg, #ef233c, #9d1230); box-shadow: 0 10px 24px rgba(157,18,48,.30); }
.channel-telegram .channel-icon { background: linear-gradient(145deg, #38a9e8, #168acb); box-shadow: 0 10px 24px rgba(22,138,203,.30); }
.channel-whatsapp .channel-icon { background: linear-gradient(145deg, #25d366, #128c4a); box-shadow: 0 10px 24px rgba(18,140,74,.30); }
.channel-telegram::before { background: linear-gradient(90deg, #38a9e8, #168acb); }
.channel-whatsapp::before { background: linear-gradient(90deg, #25d366, #128c4a); }
.channel-icon svg { width: 28px; height: 28px; }
.channel-label { display: inline-flex; padding: 5px 9px; margin-bottom: 10px; border-radius: 999px; color: #741025; background: linear-gradient(145deg, #fff0b8, #ffca58); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.channel-card h3 { margin: 0 0 9px; font-size: 1.12rem; line-height: 1.35; }
.channel-card p { min-height: 90px; margin: 0; color: #ffe2e7; font-size: .9rem; }
.channel-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #ffdc7b; font-size: .78rem; font-weight: 750; }
.channel-status svg { width: 16px; height: 16px; }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.flow-card { position: relative; padding: 26px 22px; color: #3b0d18; border-radius: var(--radius-md); background: linear-gradient(145deg, #fffafa, #ffeef2); border: 1px solid #f6b5c2; box-shadow: 0 14px 34px rgba(80,5,22,.14); }
.flow-card::before { counter-increment: step; content: "0" counter(step); position: absolute; right: 18px; top: 18px; color: #86a5d4; font-size: .76rem; font-weight: 850; letter-spacing: .08em; }
.flow-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 13px; color: #7a1025; background: linear-gradient(145deg, #ffeaa6, #ffbd4a); box-shadow: 0 10px 22px rgba(95,9,29,.18); }
.flow-icon .lucide { width: 23px; height: 23px; }
.flow-card:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 32px; z-index: 2; color: var(--primary); background: var(--surface-alt); font-size: 1.4rem; font-weight: 900; }
.flow-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.flow-card p { margin: 0; color: var(--muted); font-size: .9rem; }

.process-intro { max-width: 860px; margin-inline: auto; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.process-step { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 24px; color: white; border: 1px solid rgba(255,255,255,.20); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.07)); box-shadow: 0 14px 34px rgba(65,3,17,.20); backdrop-filter: blur(10px); }
.process-step:nth-child(4), .process-step:nth-child(5), .process-step:nth-child(6) { background: linear-gradient(145deg, rgba(255,202,88,.18), rgba(255,255,255,.08)); }
.process-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #741025; background: linear-gradient(145deg, #fff0b8, #ffca58); }
.process-icon svg { width: 26px; height: 26px; }
.process-step span { color: #ffdc7b; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.process-step h3 { margin: 3px 0 7px; font-size: 1.05rem; }
.process-step p { margin: 0; color: var(--muted); font-size: .88rem; }
.process-result { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 22px; padding: 20px 22px; border: 1px solid rgba(255,220,123,.56); border-radius: 18px; background: linear-gradient(90deg, rgba(255,202,88,.24), rgba(255,255,255,.10)); color: white; }
.process-result-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #c2410c; background: #ffedd5; }
.process-result strong, .process-result span { display: block; }
.process-result span { margin-top: 3px; color: #ffe5a7; font-size: .9rem; }

.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.security-panel { padding: 34px; border: 1px solid #d4e3fb; border-radius: var(--radius-lg); background: linear-gradient(145deg, #f7faff, white); box-shadow: var(--shadow-sm); }
.security-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.security-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 15px; border-radius: 14px; background: white; border: 1px solid var(--border); }
.security-list .check { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e9f8f3; color: var(--secondary-dark); font-weight: 900; }
.security-list .check .lucide { width: 21px; height: 21px; }
.security-list strong { display: block; }
.security-list span { display: block; color: var(--muted); font-size: .87rem; }
.notice { margin-top: 24px; padding: 18px 20px; border-left: 4px solid var(--warning); border-radius: 0 12px 12px 0; background: #fff7ed; color: #75420a; font-size: .92rem; }

.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.principle { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 22px; border-radius: 17px; background: white; border: 1px solid var(--border); }
.principle > .lucide { width: 42px; height: 42px; padding: 10px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; }
.principle strong { display: block; margin-bottom: 5px; }
.principle span { color: var(--muted); font-size: .9rem; }

.donation-section { background: linear-gradient(180deg, #3a050f 0%, #240308 100%); color: white; }
.donation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.donation-lead { max-width: 760px; color: var(--muted); font-size: 1.05rem; }
.donation-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.donation-points > div { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; padding: 17px; border: 1px solid #f4c6cd; border-radius: 16px; background: white; }
.donation-points .lucide { width: 42px; height: 42px; padding: 10px; color: #9d1230; background: #fff0f2; border-radius: 12px; }
.donation-points span { color: var(--muted); font-size: .9rem; }
.donation-points strong { color: var(--ink); }
.donation-card { padding: 34px; color: white; border: 1px solid rgba(255,255,255,.22); border-radius: 26px; background: linear-gradient(145deg, #26030a 0%, #4a0715 54%, #721025 100%); box-shadow: 0 28px 60px rgba(24,2,7,.42); }
.donation-card-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 18px; color: #7a0a20; background: #ffdc7b; }
.donation-card-icon .lucide { width: 30px; height: 30px; }
.donation-card h3 { margin: 0 0 12px; font-size: 1.45rem; line-height: 1.25; }
.donation-card p { margin: 0; color: #ffe5e9; }
.donation-note { margin: 22px 0; padding: 15px 16px; border: 1px solid rgba(255,220,123,.45); border-radius: 14px; color: #fff3ca; background: rgba(255,220,123,.11); font-size: .88rem; }
.donation-status { display: inline-flex; background: rgba(255,255,255,.14); color: white; }

.cta { padding: 72px 0; }
.cta-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 48px; color: white; border-radius: var(--radius-lg); background: linear-gradient(120deg, #1c0207 0%, #35040d 40%, #570817 72%, #7a0b20 100%); box-shadow: 0 30px 70px rgba(18,1,5,.52); }
.cta-panel::after { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -170px; border-radius: 50%; border: 55px solid rgba(255,255,255,.08); }
.cta-panel h2 { margin-top: 0; max-width: 700px; }
.cta-panel p { max-width: 720px; margin-bottom: 0; color: #dce9ff; }
.cta-actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.status-pill { padding: 9px 12px; border-radius: 999px; text-align: center; background: rgba(255,255,255,.12); color: #e8f1ff; font-size: .78rem; font-weight: 700; }

.site-footer { padding: 58px 0 30px; color: #ffdbe2; background: linear-gradient(145deg, #120104, #240208 54%, #3a050f); }

.section .section-head p,
.donation-section .section-head p { color: #f7d8df; }
.section .card { color: var(--ink); }
.section .card p { color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 48px; }
.footer-brand { color: white; }
.footer-brand p { max-width: 500px; color: #9fb1c9; }
.footer-col h3 { color: white; font-size: .92rem; }
.footer-col a { display: block; margin: 9px 0; color: #b6c6d9; text-decoration: none; font-size: .9rem; }
.footer-col a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: #8498b3; font-size: .82rem; }

.legal-page { min-height: 70vh; padding: 72px 0; }
.legal-page article { max-width: 800px; }
.legal-page h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.legal-page h2 { margin-top: 38px; font-size: 1.55rem; letter-spacing: -.02em; }
.legal-page p, .legal-page li { color: var(--muted); }
.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.error-code { color: var(--primary); font-size: clamp(4rem, 15vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -.08em; }

@media (max-width: 980px) {
  .hero-grid, .split, .donation-grid { grid-template-columns: 1fr; }
  .ai-visual { max-width: 620px; width: 100%; margin: 0 auto; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .flow-card:nth-child(2)::after { display: none; }
  .cta-panel { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .menu-button { display: grid; }
  .nav-links { position: fixed; inset: 76px 14px auto; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; border-radius: 10px; }
  .nav-links .button { margin-top: 5px; }
  .hero { padding-top: 62px; }
  .hero-grid { gap: 34px; }
  .ai-visual { min-height: 445px; transform: scale(.91); }
  .cards, .flow, .principles, .footer-grid, .channel-grid, .process-track, .donation-points { grid-template-columns: 1fr; }
  .flow-card::after { display: none; }
  .section { padding: 68px 0; }
  .cta-panel { padding: 32px 24px; }
  .cta-actions { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 480px) {
  .brand small { display: none; }
  h1 { font-size: 2.55rem; }
  .hero-actions .button { width: 100%; }
  .ai-visual { min-height: 380px; margin: -20px auto; transform: scale(.75); }
  .card, .security-panel { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v9 — alternating dark-red and black cinematic sections */
.section-red,
.channel-section {
  color: #fff;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 88, 112, .16), transparent 26%),
    radial-gradient(circle at 92% 84%, rgba(255, 190, 92, .10), transparent 24%),
    linear-gradient(145deg, #42040d 0%, #5b0715 28%, #760a20 62%, #8f0e28 100%);
}
.section-black,
.donation-section {
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(184, 18, 53, .20), transparent 27%),
    radial-gradient(circle at 8% 88%, rgba(255, 84, 104, .08), transparent 25%),
    linear-gradient(145deg, #050505 0%, #0b0b0d 43%, #16080c 73%, #23080f 100%);
}
.section-red::before,
.section-black::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.section-red > .container,
.section-black > .container { position: relative; z-index: 1; }
.section-red .section-head p,
.section-black .section-head p { color: rgba(255,255,255,.76); }
.section-red .kicker { color: #ffd36f; }
.section-black .kicker { color: #ff6378; }
.donation-section h2,
.donation-section .donation-card h3 { color: #fff; }
.donation-section .donation-lead { color: rgba(255,255,255,.82); }
.donation-section .donation-points > div {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.donation-section .donation-points span { color: rgba(255,255,255,.76); }
.donation-section .donation-points strong { color: #fff; }
.donation-section .donation-points .lucide {
  color: #fff;
  background: linear-gradient(145deg, #ef233c, #8f0e28);
}
.donation-section h2,
.donation-section .donation-card h3 { color: #fff; }
.donation-section .donation-lead { color: rgba(255,255,255,.82); }
.donation-section .donation-points > div {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.donation-section .donation-points span { color: rgba(255,255,255,.76); }
.donation-section .donation-points strong { color: #fff; }
.donation-section .donation-points .lucide {
  color: #fff;
  background: linear-gradient(145deg, #ef233c, #8f0e28);
}
.section-red .card,
.section-black .card,
.section-black .principle,
.section-black .security-panel,
.section-red .process-step {
  color: #fff;
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.section-red .card h3,
.section-black .card h3,
.section-black .principle strong,
.section-black .security-list strong { color: #fff; }
.section-red .card p,
.section-black .card p,
.section-black .principle span,
.section-black .security-list span,
.section-red .process-step p { color: rgba(255,255,255,.72); }
.section-red .card-icon,
.section-black .card-icon,
.section-black .principle > .lucide,
.section-black .security-list .check {
  color: #fff;
  background: linear-gradient(145deg, #d81f3f, #7c0b20);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.section-black .security-list li {
  color: #fff;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}
.section-black .notice {
  color: #ffe5b7;
  border-left-color: #ffb84d;
  background: rgba(255,184,77,.10);
}
.section-red .process-result {
  background: linear-gradient(90deg, rgba(255,196,91,.18), rgba(255,255,255,.06));
}
#tata-kelola .card,
#tata-kelola .card h3 { color: #fff; }
#tata-kelola .card p { color: rgba(255,255,255,.72); }
.cta {
  background:
    radial-gradient(circle at 85% 20%, rgba(181,19,53,.22), transparent 28%),
    linear-gradient(145deg, #050505 0%, #0b0b0c 52%, #1d070d 100%);
}
.cta-panel {
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(120deg, #120307 0%, #330812 36%, #650b20 67%, #9c1430 100%);
}

/* News detail template */
.news-title-link{color:inherit;text-decoration:none}.news-title-link:hover{color:#ffd86b}.news-card-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:18px}.read-more{display:inline-flex;align-items:center;gap:7px;color:#ffd86b;font-weight:800;text-decoration:none;font-size:.82rem}.read-more .lucide{width:16px;height:16px}
.article-hero{position:relative;overflow:hidden;padding:92px 0 76px;color:#fff}.article-hero-inner{max-width:980px}.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:28px;color:#efcbd2;font-size:.82rem}.breadcrumb a{color:inherit;text-decoration:none}.breadcrumb .lucide{width:14px;height:14px}.article-category{display:inline-flex;padding:7px 11px;border-radius:999px;color:#671021;background:#ffd86b;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.article-hero h1{max-width:980px;margin:20px 0;font-size:clamp(2.6rem,6vw,5.2rem)}.article-deck{max-width:830px;color:#f7dce2;font-size:clamp(1.08rem,2vw,1.32rem)}.article-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;color:#f4cbd3;font-size:.86rem}.article-meta span{display:inline-flex;align-items:center;gap:7px}.article-meta .lucide{width:17px;height:17px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:start}.article-body{color:#fff}.article-body>p,.article-body li{color:#d8d0d2;font-size:1.03rem;line-height:1.82}.article-lead{color:#f4e7e9!important;font-size:1.25rem!important}.article-body h2{margin:46px 0 16px;font-size:2rem;letter-spacing:-.035em}.article-cover{display:flex;gap:18px;align-items:center;min-height:180px;margin-bottom:36px;padding:34px;border:1px solid rgba(255,255,255,.15);border-radius:24px;background:radial-gradient(circle at 90% 15%,rgba(239,35,60,.32),transparent 34%),linear-gradient(145deg,#151515,#4b0715 62%,#850e28)}.article-cover-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#ef233c,#8c0b24)}.article-cover-icon .lucide{width:38px;height:38px}.article-cover span,.article-cover strong{display:block}.article-cover span{color:#ffd86b;font-size:.8rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.article-cover strong{margin-top:4px;font-size:1.35rem}
.article-quote{position:relative;margin:40px 0;padding:30px 32px 30px 76px;border-left:4px solid #ef233c;border-radius:0 18px 18px 0;background:rgba(239,35,60,.11)}.article-quote>.lucide{position:absolute;left:24px;top:28px;width:32px;height:32px;color:#ff6c82}.article-quote p{margin:0;color:#fff;font-size:1.28rem;line-height:1.55;font-weight:700}.article-list{display:grid;gap:12px;margin:24px 0;padding:0;list-style:none}.article-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}.article-list .lucide{width:25px;height:25px;padding:5px;color:#751024;background:#ffd86b;border-radius:50%}.article-callout{display:grid;grid-template-columns:52px 1fr;gap:17px;margin:40px 0;padding:24px;border:1px solid rgba(255,216,107,.28);border-radius:18px;background:rgba(255,216,107,.08)}.article-callout>.lucide{width:52px;height:52px;padding:13px;color:#7a1025;background:#ffd86b;border-radius:15px}.article-callout strong{display:block;color:#fff;font-size:1.05rem}.article-callout p{margin:5px 0 0;color:#ddd0d2}.article-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:40px}.article-tags span{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#e3d5d8;background:rgba(255,255,255,.06);font-size:.78rem}.article-share{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}.article-share>span{font-weight:800}.article-share>div{display:flex;gap:10px}.article-share a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#fff;background:rgba(255,255,255,.08)}.article-share a:hover{background:#8d1029}.article-share .lucide{width:20px;height:20px}
.article-sidebar{position:sticky;top:100px;display:grid;gap:20px}.sidebar-widget{padding:24px;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.06)}.sidebar-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.11);font-weight:850}.sidebar-title .lucide{width:20px;height:20px;color:#ff536c}.related-article{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff;text-decoration:none}.related-article:last-child{border-bottom:0}.related-article span,.related-article strong,.related-article small{display:block}.related-article span{color:#ff9cae;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.related-article strong{margin:5px 0;line-height:1.4}.related-article small{color:#aa9fa2}.sidebar-highlight{background:linear-gradient(145deg,#550915,#a6102f)}.sidebar-highlight>.lucide{width:38px;height:38px;color:#ffd86b}.sidebar-highlight h3{margin:18px 0 8px;font-size:1.35rem}.sidebar-highlight p{color:#efd6dc}.sidebar-highlight .button{width:100%;margin-top:12px}.article-navigation{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.article-navigation a{padding:26px;border:1px solid rgba(255,255,255,.15);border-radius:19px;color:#fff;background:rgba(255,255,255,.08);text-decoration:none}.article-navigation a.next{text-align:right}.article-navigation span{display:flex;align-items:center;gap:8px;color:#ffc0cb;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.article-navigation a.next span{justify-content:flex-end}.article-navigation .lucide{width:16px;height:16px}.article-navigation strong{display:block;margin-top:9px;font-size:1.1rem}
@media(max-width:980px){.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.article-hero{padding:72px 0 56px}.article-cover{align-items:flex-start;flex-direction:column}.article-quote{padding-left:28px}.article-quote>.lucide{position:static;margin-bottom:14px}.article-sidebar,.article-navigation{grid-template-columns:1fr}.article-navigation a.next{text-align:left}.article-navigation a.next span{justify-content:flex-start}.article-share{align-items:flex-start;flex-direction:column}}