@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap");

:root{
  --bg:#080808;
  --bg2:#0e0e0e;
  --panel:rgba(18,16,12,.76);
  --panel-strong:rgba(14,12,8,.94);
  --gold:#c9a84c;
  --gold-light:#e8d48b;
  --gold-dark:#8b7332;
  --text:#f0ede6;
  --muted:rgba(240,237,230,.58);
  --faint:rgba(240,237,230,.34);
  --line:rgba(201,168,76,.14);
  --danger:#f28c8c;
  --ok:#d8e59a;
  --max:1440px;
  --radius:0;
  --shadow:0 24px 80px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body.grace-theme{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%,rgba(201,168,76,.10),transparent 22%),
    radial-gradient(circle at 80% 18%,rgba(201,168,76,.06),transparent 18%),
    radial-gradient(circle at 50% 80%,rgba(139,115,50,.04),transparent 28%),
    linear-gradient(180deg,#040404 0%,#0a0906 55%,#080808 100%);
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
body.grace-theme.menu-open{overflow:hidden}
body.grace-theme a{color:inherit;text-decoration:none}
body.grace-theme button,
body.grace-theme input,
body.grace-theme textarea,
body.grace-theme select{font:inherit}
body.grace-theme button,
body.grace-theme a,
body.grace-theme label{touch-action:manipulation}

.hero-bg,#graceScene{position:fixed;inset:0;pointer-events:none}
.hero-bg{z-index:0;background:radial-gradient(circle at center,rgba(201,168,76,.12),transparent 42%)}
#graceScene{z-index:0;display:block}
.app,.wrap,.shell,.grace-page{position:relative;z-index:1}
.shell{width:min(var(--max),calc(100% - 48px));margin:0 auto}

.cursor,.cursor-dot{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:999;
  transform:translate3d(-50%,-50%,0);
  mix-blend-mode:difference;
}
.cursor{
  width:12px;
  height:12px;
  border:1px solid rgba(201,168,76,.72);
  border-radius:50%;
  transition:width .18s ease,height .18s ease,border-radius .18s ease,opacity .18s ease,border-color .18s ease;
  opacity:.95;
  box-shadow:0 0 8px rgba(201,168,76,.2);
}
.cursor.active{width:32px;height:32px;border-radius:8px;border-color:rgba(232,212,139,.85)}
.cursor-dot{width:4px;height:4px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 10px rgba(201,168,76,.5)}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding:18px 0;
  pointer-events:none;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}
.logo{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.logo-mark{width:38px;height:38px;border:1px solid var(--gold-dark);position:relative;overflow:hidden}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;inset:8px;border:1px solid rgba(201,168,76,.22)}
.logo-mark:after{inset:12px;border-color:rgba(201,168,76,.45)}
.menu-btn{
  width:54px;
  height:54px;
  border:1px solid rgba(201,168,76,.18);
  background:rgba(10,8,4,.5);
  color:var(--text);
  border-radius:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.menu-btn:hover{transform:scale(1.03);border-color:rgba(201,168,76,.42)}
.menu-lines{width:20px;height:14px;position:relative}
.menu-lines span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s ease,top .25s ease,opacity .25s ease}
.menu-lines span:nth-child(1){top:0}
.menu-lines span:nth-child(2){top:6px}
.menu-lines span:nth-child(3){top:12px}

.menu-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(201,168,76,.22),transparent 28%),
    radial-gradient(circle at 80% 30%,rgba(139,115,50,.14),transparent 26%),
    linear-gradient(135deg,rgba(8,8,8,.98),rgba(18,14,6,.96));
  clip-path:circle(0% at calc(100% - 42px) 42px);
  transition:clip-path .65s cubic-bezier(.7,0,.2,1),opacity .3s ease;
}
.menu-overlay.open{pointer-events:auto;opacity:1;clip-path:circle(140% at calc(100% - 42px) 42px)}
.menu-panel{width:min(1100px,calc(100% - 48px));margin:96px auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.menu-links,.menu-copy{padding:26px}
.menu-links{display:grid;gap:12px;align-content:start}
.menu-links a{
  display:block;
  padding:18px 0;
  border-bottom:1px solid rgba(201,168,76,.1);
  font-size:clamp(26px,4vw,58px);
  line-height:.92;
  letter-spacing:-.04em;
  text-transform:uppercase;
  font-family:"Playfair Display",serif;
}
.menu-links a:hover{color:var(--gold-light)}
.menu-copy{display:grid;gap:18px;color:var(--muted)}
.fluid-orb{
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,248,220,.28),transparent 24%),
    radial-gradient(circle at 50% 50%,rgba(201,168,76,.55),rgba(201,168,76,.05) 58%,transparent 72%);
  filter:blur(4px) saturate(1.1);
  box-shadow:0 0 120px rgba(201,168,76,.22);
}

.page-shell{width:min(1280px,calc(100% - 48px));margin:0 auto;padding:112px 0 56px}
.section{padding:46px 0;position:relative}
.panel{
  border:1px solid rgba(201,168,76,.12);
  background:var(--panel);
  backdrop-filter:blur(18px);
  border-radius:0;
  box-shadow:var(--shadow);
}
.eyebrow{display:inline-flex;gap:10px;align-items:center;color:var(--gold-light);text-transform:uppercase;font-size:11px;letter-spacing:.24em;margin-bottom:16px}
.eyebrow:before{content:"";width:64px;height:1px;background:rgba(201,168,76,.45)}
.display-title{
  margin:0;
  font-family:"Playfair Display","Songti SC",serif;
  font-size:clamp(42px,7vw,112px);
  line-height:.9;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.display-title .thin{
  display:block;
  margin-top:10px;
  font-family:"Cormorant Garamond","Songti SC",serif;
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  color:rgba(240,237,230,.84);
  font-size:.54em;
  line-height:1.08;
}
.copy{color:var(--muted);font-size:15px;line-height:1.85}
.btn{
  position:relative;
  border:1px solid rgba(201,168,76,.22);
  background:transparent;
  color:var(--text);
  min-height:44px;
  padding:0 18px;
  border-radius:0;
  cursor:pointer;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.btn:hover{transform:scale(1.03);border-color:rgba(201,168,76,.62);background:rgba(201,168,76,.08)}
.btn:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.92),transparent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.btn:hover:after{transform:scaleX(1)}
.btn.primary{background:rgba(201,168,76,.12);color:var(--gold-light);border-color:rgba(201,168,76,.44)}
.input,.select,textarea{
  width:100%;
  min-height:44px;
  border:1px solid rgba(201,168,76,.16);
  background:rgba(5,5,4,.72);
  color:var(--text);
  border-radius:0;
  padding:10px 12px;
  outline:none;
}
.input:focus,.select:focus,textarea:focus{border-color:rgba(201,168,76,.62);box-shadow:0 0 0 3px rgba(201,168,76,.1)}

.reveal{opacity:0}

@media(max-width:720px){
  .shell,.page-shell{width:min(var(--max),calc(100% - 28px))}
  .site-header{padding:12px 0}
  .page-shell{padding-top:92px}
  .menu-panel{grid-template-columns:1fr;margin-top:84px}
  .cursor,.cursor-dot{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor,.cursor-dot,.btn,.menu-overlay{transition:none!important}
  .reveal{opacity:1!important}
}