/* FILE: /assets/css/pages/home.css */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid rgba(198,167,94,.22);
  background:rgba(250,246,244,.95);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav{background:rgba(250,246,244,.98)}
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
}
.brand__mark{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(198,167,94,.38);
  background:rgba(255,255,255,.0);
  flex:0 0 auto;
}
.brand__mark img{width:26px; height:26px}
.brand__name{font-weight:650; letter-spacing:.01em; font-family:var(--font-serif); font-size:1.18rem; line-height:1.05}
.brand__tag{display:block; font-size:.88rem; color:rgba(25,20,22,.68); font-weight:500}
@media(min-width:980px){
  .brand__mark{width:46px; height:46px}
  .brand__mark img{width:30px; height:30px}
  .brand__name{font-size:1.30rem}
}

.nav__links{display:none; align-items:center; gap:4px}
.nav__links a{
  text-decoration:none;
  padding:10px 10px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:560;
  font-size:.98rem;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
.nav__links a:hover{background:rgba(230,195,207,.12)}
.nav__links a[aria-current=\"page\"]{background:rgba(230,195,207,.20); border:1px solid rgba(198,167,94,.28)}
.nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  z-index:1001;
  pointer-events:auto;
}
@media(min-width:980px){
  .nav__toggle{display:none}
  .nav__links{display:flex}
}

.backdrop{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(26,22,23,.44);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  z-index:1100;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.backdrop[data-open=\"true\"]{display:block; opacity:1; visibility:visible; pointer-events:auto}
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(92vw, 420px);
  background:rgba(255,255,255,.92);
  border-left:1px solid var(--line);
  z-index:1200;
  box-shadow:var(--shadow);
  transform:translateX(102%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .20s ease, opacity .20s ease, visibility .20s ease;
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.drawer{background:#fff}}
.drawer[data-open=\"true\"]{transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto}
.drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 10px;
  border-bottom:1px solid var(--line);
}
.drawer__close{width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:transparent}
.drawer__nav{padding:10px 12px; display:grid; gap:4px}
.drawer__nav a{
  text-decoration:none;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:14px 12px;
  border-radius:14px;
  white-space:nowrap;
}
.drawer__nav a:hover{background:rgba(230,195,207,.12)}
.drawer__footer{
  margin-top:auto;
  padding:14px 16px 18px;
  border-top:1px solid var(--line);
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
body.scroll-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.drawer, .backdrop{transition:none}}

/* Hero */
.hero{
  padding:clamp(116px, 10vw, 140px) 0 clamp(56px, 7vw, 92px) 0;
  background:
    linear-gradient(180deg, rgba(250,246,244,.0) 0%, rgba(230,195,207,.14) 100%),
    radial-gradient(900px 340px at 14% 18%, rgba(230,195,207,.22), rgba(230,195,207,0)),
    radial-gradient(900px 340px at 78% 20%, rgba(198,167,94,.12), rgba(198,167,94,0));
}
.hero--bg{
  background:none;
  background-image:url("/assets/img/hero-bg-lotus.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  padding:120px 0 92px;
}
@media(min-width:980px){.hero--bg{padding:128px 0 96px}}
@media(max-width:640px){.hero--bg{padding:110px 0 76px; background-position:center 20%}}
.hero--bg .hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.15);
  pointer-events:none;
  z-index:1;
}
.hero--bg .hero__lotus{
  display:none;
}
.hero__wrap{position:relative; z-index:2; display:grid; gap:16px}
@media(min-width:980px){.hero__wrap{grid-template-columns:1.1fr .9fr; align-items:center}}
.hero__content{position:relative; z-index:2; max-width:70ch}
.hero__panel{
  background:rgba(250,246,244,.68);
  border:1px solid rgba(26,22,23,.06);
  border-radius:var(--radius-lg);
  padding:22px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.hero__panel{background:rgba(250,246,244,.82)}}
.hero--bg .hero__text{
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  padding:24px 32px;
  border-radius:16px;
  position:relative;
  z-index:2;
}
@media(max-width:640px){
  .hero--bg .hero__text{
    width:min(92vw, 560px);
    margin-inline:auto;
    padding:18px 24px;
  }
}
.hero__lead{max-width:70ch}
.hero__media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(250,246,244,.75));
  aspect-ratio:4/5;
  max-height:clamp(320px, 54vw, 520px);
  margin-inline:auto;
  width:100%;
}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 18%}
@media(max-width:640px){.hero__media{justify-self:center} .hero__media img{object-position:50% 20%}}
@media(min-width:980px){.hero__media img{object-position:60% 20%}}
.hero__meta{display:flex; flex-wrap:wrap; gap:10px; grid-column:1 / -1}
.hero__meta .badge{font-size:.80rem}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.80);
  position:relative;
  overflow:hidden;
}
.footer:before{
  content:"";
  position:absolute;
  left:-240px;
  bottom:-320px;
  width:min(980px, 150vw);
  height:min(980px, 150vw);
  background:none;
  opacity:0;
  pointer-events:none;
  transform:rotate(12deg);
  filter:grayscale(20%);
}
.footer__top{padding:40px 0}
.footer__grid{display:grid; gap:18px}
@media(min-width:980px){.footer__grid{grid-template-columns:1.2fr .8fr}}
.footer__links{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.footer__links a{display:inline-flex; padding:10px 10px; border-radius:14px; text-decoration:none}
.footer__links a:hover{background:rgba(230,195,207,.12)}
.footer__bottom{padding:14px 0 24px; color:rgba(25,20,22,.70); font-size:.92rem}