:root{
  --teal:#dbf7f0;
  --ink:#0e1514;
  --gold:#d4af37;
  --hair:rgba(0,0,0,.08);
  --maxw:980px;
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;color:var(--ink);font:18px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
body{background-color:var(--teal)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:22px}

/* Header + logo */
.header{position:sticky;top:0;background:color-mix(in hsl, var(--teal) 82%, white 18%);backdrop-filter: blur(8px);border-bottom:1px solid var(--hair);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.brand img{display:block;width:154px;height:154px;object-fit:contain;margin-top:-36px;margin-bottom:-36px}
.brand,.brand img{max-height:none;max-width:none}
.header img{max-height:none !important}
.nav a{margin-left:18px;opacity:.85;font-weight:600}
.nav a.active,.nav a:hover{opacity:1}

/* Lotuses (two bottom corners) */
.lotus-layer{position:fixed; inset:0; pointer-events:none; z-index:-1}
.lotus-img{position:fixed; bottom:-10px; width:min(32.4vw, 540px); height:auto; opacity:.95}
.lotus-img.left{left:0}
.lotus-img.right{right:0; transform:scaleX(-1)}

.hero{position:relative;padding:96px 0 80px;text-align:center}
h1{font-size:clamp(44px,7vw,68px);line-height:1.05;margin:10px 0}
.lead{font-size:22px;max-width:70ch;margin:6px auto 0;opacity:.92}
.badge{display:inline-block;border:1px solid var(--gold);color:var(--ink);padding:4px 12px;border-radius:999px;font-size:14px;letter-spacing:.06em}
.btn{display:inline-block;margin-top:18px;padding:10px 18px;border-radius:999px;border:1px solid var(--gold);font-weight:700}
.btn .dot{color:var(--gold)}

.footer{padding:40px 0 80px;color:rgba(0,0,0,.7)}
.section{padding:80px 0;text-align:center}
h2{font-size:40px;margin:0 0 8px}
.copy{max-width:70ch;margin:6px auto 0;opacity:.9}

/* === Responsive (mobile) tweaks === */
@media (max-width: 768px){
  .header-inner{padding:4px 0}
  .brand img{width:96px;height:96px;margin-top:-20px;margin-bottom:-20px}
  .nav{position:fixed; top:64px; right:12px; left:12px; background:color-mix(in hsl, var(--teal) 90%, white 10%);
       border:1px solid var(--hair); border-radius:14px; padding:12px; display:none; flex-direction:column; gap:10px; z-index:60}
  .nav a{margin:0; padding:10px 12px; border-radius:10px; background:transparent}
  .nav a:hover{background:rgba(0,0,0,.05); text-decoration:none}
  .nav.open{display:flex}

  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
               border:1px solid var(--hair); border-radius:10px; background:color-mix(in hsl, var(--teal) 90%, white 10%);
               cursor:pointer}
  .menu-toggle svg{width:22px;height:22px}
  .header-inner .controls{display:inline-flex; align-items:center; gap:10px}

  .lotus-img{width:min(44vw, 360px)}
  .lotus-img.left{left:-6px; bottom:-6px}
  .lotus-img.right{right:-6px; bottom:-6px}
}