@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-extrabold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --canvas: #f6f3eb;
  --canvas-deep: #eceee6;
  --surface: #fffefa;
  --surface-soft: #eef2ea;
  --ink: #17211d;
  --copy: #3e4d46;
  --muted: #69766f;
  --forest: #173f35;
  --forest-deep: #0d2d26;
  --forest-soft: #2b5b4d;
  --sage: #9db7a2;
  --sage-pale: #dfe9e1;
  --coral: #d66f58;
  --coral-deep: #a44337;
  --gold: #f2d991;
  --line: #d8ddd5;
  --line-strong: #c5cdc3;
  --shadow: 0 24px 64px rgba(23, 63, 53, .11);
  --shadow-soft: 0 12px 30px rgba(23, 63, 53, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 4%, rgba(157, 183, 162, .24), transparent 26rem),
    radial-gradient(circle at 95% 20%, rgba(214, 111, 88, .09), transparent 22rem),
    linear-gradient(180deg, var(--canvas) 0%, #faf8f2 44%, var(--canvas-deep) 100%);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--forest); font-weight: 700; text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--coral-deep); }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 8px; }
.shell { width: min(1060px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: relative; z-index: 20; padding: 22px 0 10px; }
.site-header .shell, .brand, .language, .document-nav { display: flex; align-items: center; }
.site-header .shell {
  min-height: 68px;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgba(197, 205, 195, .78);
  border-radius: 22px;
  background: rgba(255, 254, 250, .82);
  box-shadow: 0 8px 26px rgba(23, 63, 53, .055);
  backdrop-filter: blur(18px);
}

.brand { gap: 11px; color: var(--forest); text-decoration: none; font-size: 1.22rem; font-weight: 800; letter-spacing: -.035em; }
.brand:hover { color: var(--forest); }
.brand-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(23, 63, 53, .15)); }

.language {
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
}

.language a {
  min-width: 39px;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
}

.language a:hover { background: rgba(255, 255, 255, .72); color: var(--forest); }
.language a[aria-current="page"] { background: var(--forest); color: #fffdf8; box-shadow: 0 5px 12px rgba(23, 63, 53, .16); }

main { padding: 24px 0 96px; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(38px, 7vw, 76px) clamp(28px, 7vw, 76px);
  padding-right: clamp(220px, 32vw, 350px);
  border: 1px solid rgba(76, 119, 101, .38);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 20%, rgba(157, 183, 162, .3), transparent 22rem),
    linear-gradient(140deg, var(--forest-soft) 0%, var(--forest) 48%, var(--forest-deep) 100%);
  box-shadow: var(--shadow);
  color: #fffefa;
}

.hero::before {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  content: "";
  right: -92px;
  top: -118px;
  box-shadow: 0 0 0 46px rgba(255, 255, 255, .025), 0 0 0 94px rgba(255, 255, 255, .02);
}

.hero::after {
  position: absolute;
  z-index: -1;
  width: clamp(230px, 30vw, 340px);
  aspect-ratio: 1;
  right: clamp(-30px, 1vw, 20px);
  bottom: -44px;
  background: url("/assets/palang-parrot.png") center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 22px 24px rgba(3, 20, 15, .25));
}

.hero > * { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.eyebrow::before { width: 22px; height: 2px; border-radius: 99px; background: var(--coral); content: ""; }
h1 { max-width: 650px; margin: 0; font-size: clamp(2.45rem, 6vw, 4.45rem); font-weight: 800; line-height: 1.02; letter-spacing: -.058em; text-wrap: balance; }
.lead { max-width: 650px; margin: 22px 0 0; color: #dce7e1; font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.72; }
.meta { margin-top: 20px; color: #aec1b8; font-size: .77rem; font-weight: 600; letter-spacing: .02em; }
.document-nav { gap: 8px; margin: 27px 0 0; flex-wrap: wrap; }
.document-nav a {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .075);
  color: #dce7e1;
  padding: 8px 13px;
  font-size: .78rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.document-nav a:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .13); color: #fffefa; }
.document-nav a[aria-current="page"] { border-color: #fffefa; background: #fffefa; color: #173f35; }
.hero > p > a { display: inline-flex; margin-top: 8px; padding: 10px 15px; border-radius: 11px; background: #fffefa; color: #173f35; text-decoration: none; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.cards a {
  position: relative;
  display: flex;
  min-height: 210px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 254, 250, .9);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cards a::before {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 27px;
  top: 26px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--sage-pale);
  color: var(--forest);
  content: "01";
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.cards a:nth-child(2)::before { background: #f3e7d4; color: #7e5530; content: "02"; }
.cards a:nth-child(3)::before { background: #f6dfd9; color: var(--coral-deep); content: "03"; }
.cards a::after { position: absolute; width: 110px; height: 110px; border: 1px solid var(--line); border-radius: 50%; content: ""; right: -62px; top: -62px; }
.cards a:hover { border-color: var(--sage); box-shadow: 0 22px 45px rgba(23, 63, 53, .13); color: var(--forest); transform: translateY(-5px); }
.cards strong { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -.025em; }
.cards span { display: block; margin-top: 9px; color: var(--muted); font-size: .84rem; font-weight: 400; line-height: 1.65; }
.cards .danger { color: var(--ink); }

.content {
  width: min(900px, calc(100% - 48px));
  margin: 28px auto 0;
  padding: clamp(30px, 6vw, 68px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 254, 250, .94);
  box-shadow: var(--shadow-soft);
}

.content h2 { margin: 2.35em 0 .65em; padding-top: .15em; color: var(--forest); font-size: clamp(1.22rem, 3vw, 1.48rem); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.content h2:first-child { margin-top: 0; }
.content h3 { margin: 1.7em 0 .45em; color: var(--ink); font-size: 1rem; font-weight: 800; }
.content p, .content li { color: var(--copy); }
.content p { margin: 0 0 1em; }
.content ul { padding-left: 1.3em; }
.content li { padding-left: .35em; }
.content li::marker { color: var(--coral); }
.content li + li { margin-top: .55em; }
.content strong { color: var(--ink); }
.notice { padding: 19px 21px; border: 1px solid #e7c3b9; border-left: 4px solid var(--coral); border-radius: 14px; background: #fbebe6; }
.danger { border-color: #e8c4bb !important; color: var(--coral-deep); }

footer { margin-top: 18px; padding: 38px 0 44px; border-top: 1px solid rgba(23, 63, 53, .12); background: rgba(23, 63, 53, .045); color: var(--muted); font-size: .77rem; }
footer .shell { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 36px; flex-wrap: wrap; }
footer p { margin: 0; }
footer p + p { text-align: right; }

@media (max-width: 820px) {
  .hero { min-height: 420px; padding-right: 220px; }
  .hero::after { width: 250px; right: -38px; opacity: .88; }
  .cards { grid-template-columns: 1fr; }
  .cards a { min-height: 178px; }
  .content { width: 100%; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 24px, 1060px); }
  .site-header { padding-top: 12px; }
  .site-header .shell { min-height: 62px; padding: 8px 9px; border-radius: 18px; }
  .brand { font-size: 1.08rem; }
  .brand-logo { width: 43px; height: 43px; }
  .language a { min-width: 34px; padding-inline: 7px; }
  main { padding-top: 12px; padding-bottom: 62px; }
  .hero { min-height: 470px; padding: 34px 24px 210px; border-radius: 26px; }
  .hero::after { width: 235px; right: calc(50% - 117px); bottom: -46px; opacity: .82; }
  .hero::before { right: -190px; top: -150px; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.3rem); }
  .lead { margin-top: 17px; }
  .document-nav { margin-top: 21px; }
  .cards { gap: 12px; margin-top: 14px; }
  .cards a { min-height: 170px; padding: 23px; border-radius: 19px; }
  .cards a::before { left: 22px; top: 21px; }
  .content { margin-top: 16px; padding: 28px 22px; border-radius: 22px; }
  .content h2 { margin-top: 2em; }
  footer .shell { display: block; }
  footer p + p { margin-top: 8px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cards a { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d1511;
    --canvas-deep: #121d18;
    --surface: #18231e;
    --surface-soft: #202d27;
    --ink: #edf3ee;
    --copy: #c9d4cd;
    --muted: #9fada5;
    --forest: #a5d4bc;
    --forest-deep: #0a241d;
    --forest-soft: #285a49;
    --sage-pale: #24382f;
    --line: #314139;
    --line-strong: #435149;
    --coral-deep: #f29a8d;
    --shadow: 0 24px 64px rgba(0, 0, 0, .3);
    --shadow-soft: 0 12px 30px rgba(0, 0, 0, .22);
  }

  body { background: radial-gradient(circle at 8% 4%, rgba(66, 104, 84, .28), transparent 26rem), linear-gradient(180deg, var(--canvas), var(--canvas-deep)); }
  .site-header .shell { border-color: rgba(67, 81, 73, .78); background: rgba(24, 35, 30, .86); }
  .brand, .brand:hover { color: #dce9e1; }
  .language a[aria-current="page"] { background: #a5d4bc; color: #10231d; }
  .hero { background: radial-gradient(circle at 78% 20%, rgba(157, 183, 162, .22), transparent 22rem), linear-gradient(140deg, #285a49 0%, #173f35 48%, #0a241d 100%); }
  .cards a, .content { background: rgba(24, 35, 30, .95); }
  .cards a:nth-child(2)::before { background: #3d3325; color: #f0d39d; }
  .cards a:nth-child(3)::before { background: #422b25; color: #f29a8d; }
  .notice { border-color: #65443b; background: #34231f; }
  footer { border-color: rgba(165, 212, 188, .13); background: rgba(165, 212, 188, .035); }
}