/* Crown & Fire — promo site. Dark baroque + gold, cinematic landing. */
:root{
  --bg:#090c17; --bg2:#0c1120; --glass:rgba(255,255,255,.045); --glass-edge:rgba(232,194,104,.16);
  --gold:#e8c268; --gold-bright:#f6dd94; --gold-dim:#a8874a; --wax:#8c2b22;
  --ink:#ece5d3; --muted:#9a927c; --muted2:#726b58;
  --serif:"Cormorant Garamond","Songti SC","Noto Serif SC",Georgia,serif;
  --display:"Cinzel","Songti SC","Noto Serif SC",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,"PingFang SC","Noto Sans SC",system-ui,sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-bright)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- Header ---- */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(9,12,23,.92),rgba(9,12,23,.62));
  border-bottom:1px solid rgba(232,194,104,.12)}
header.site .bar{display:flex;align-items:center;gap:12px;padding:13px 0}
header.site img{width:34px;height:34px;border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
header.site .brand{font-family:var(--display);font-weight:700;letter-spacing:.06em;font-size:16px;color:var(--gold)}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14.5px}
header.site nav a{color:var(--ink);opacity:.85}
header.site nav a:hover{opacity:1;color:var(--gold-bright)}
.lang{display:inline-flex;border:1px solid var(--glass-edge);border-radius:999px;overflow:hidden;font-size:13px}
.lang a{padding:5px 13px;color:var(--muted)}
.lang a.on{background:var(--gold);color:#1a1206;font-weight:600}

/* ---- Hero ---- */
.hero{position:relative;text-align:center;padding:74px 0 96px;
  background:radial-gradient(120% 90% at 50% 8%,#141b30 0%,#0a0e1b 55%,#070a13 100%);
  border-bottom:1px solid rgba(232,194,104,.1);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 30%,rgba(232,194,104,.10),transparent 70%)}
.crest{width:min(340px,72vw);height:auto;border-radius:10px;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 80%,transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 50%,#000 80%,transparent 100%);
  filter:saturate(1.08) contrast(1.04) drop-shadow(0 16px 46px rgba(0,0,0,.6));
  animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero .overline{font-family:var(--display);letter-spacing:.34em;font-size:12.5px;color:var(--gold-dim);
  text-transform:uppercase;margin:8px 0 10px}
.hero h1{font-family:var(--display);font-weight:800;line-height:1.05;
  font-size:clamp(34px,6.4vw,66px);letter-spacing:.02em;
  background:linear-gradient(180deg,#fff6df 0%,#f0cd85 40%,#b8863f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.hero .sub{font-family:var(--serif);font-size:clamp(18px,2.4vw,24px);color:var(--ink);opacity:.9;margin-top:6px}
.hero .tagline{font-family:var(--serif);font-size:clamp(16px,2vw,20px);font-style:italic;
  color:var(--muted);max-width:620px;margin:16px auto 0}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;padding:13px 26px;border-radius:12px;
  font-weight:600;transition:transform .18s,box-shadow .18s,background .2s;border:1px solid transparent}
.btn-gold{background:linear-gradient(180deg,#f2d488,#d8ad55);color:#221607;
  box-shadow:0 8px 26px rgba(216,173,85,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(216,173,85,.42);color:#221607}
.btn-ghost{border-color:var(--glass-edge);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.btn .soon{font-size:11px;opacity:.7;font-weight:500}
.badges{margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{border:1px solid var(--glass-edge);border-radius:999px;padding:7px 16px;font-size:13px;color:var(--gold);
  background:var(--glass)}

/* ---- Sections ---- */
section{padding:76px 0}
.eyebrow{font-family:var(--display);letter-spacing:.3em;font-size:12px;color:var(--gold-dim);text-transform:uppercase;text-align:center}
.stitle{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.6vw,38px);color:var(--gold);
  text-align:center;margin:8px 0 6px;letter-spacing:.02em}
.slead{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 42px;font-family:var(--serif);font-size:18px}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.feat{background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:26px;
  transition:transform .22s,border-color .22s,box-shadow .22s;position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),transparent);transition:width .35s}
.feat:hover{transform:translateY(-6px);border-color:var(--glass-edge);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.feat:hover::before{width:100%}
.feat .ic{font-size:30px}
.feat h3{font-family:var(--display);color:var(--gold-bright);font-size:18px;font-weight:600;margin:12px 0 8px;letter-spacing:.02em}
.feat p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.shot{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#05070d;
  transition:transform .25s,box-shadow .25s;position:relative}
.shot:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.shot img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .5s}
.shot:hover img{transform:scale(1.05)}
.shot .cap{padding:14px 18px;font-family:var(--serif);font-size:15px;color:var(--ink)}

/* persona hook band */
.persona{background:radial-gradient(90% 120% at 20% 20%,#1a1327,#0b0e1b 70%);
  border-top:1px solid rgba(232,194,104,.12);border-bottom:1px solid rgba(232,194,104,.12)}
.persona .row{display:flex;gap:44px;align-items:center;flex-wrap:wrap;justify-content:center}
.persona .txt{flex:1;min-width:300px;max-width:560px}
.persona h2{font-family:var(--display);font-size:clamp(24px,3.4vw,36px);color:var(--gold);margin-bottom:14px;letter-spacing:.02em}
.persona p{color:var(--muted);font-family:var(--serif);font-size:18px}
.persona img{width:min(340px,80vw);border-radius:16px;border:1px solid var(--glass-edge);
  box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* trust strip */
.trust{background:var(--glass);border:1px solid var(--glass-edge);border-radius:18px;padding:34px;text-align:center;max-width:820px;margin:0 auto}
.trust h2{font-family:var(--display);color:var(--gold);font-size:22px;margin-bottom:10px}
.trust p{color:var(--muted);font-size:15.5px}

/* ---- Footer ---- */
footer.site{border-top:1px solid rgba(232,194,104,.12);padding:36px 0 52px;text-align:center;color:var(--muted2);font-size:14px}
footer.site .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
footer.site .links a{color:var(--muted)}
footer.site .links a:hover{color:var(--gold)}

/* ---- doc pages (support/privacy) ---- */
.doc{max-width:820px;margin:0 auto;padding:56px 24px 20px}
.doc h1{font-family:var(--display);color:var(--gold);font-size:clamp(28px,4vw,38px);letter-spacing:.02em}
.doc .lead,.doc .updated{color:var(--muted);margin:10px 0 26px;font-family:var(--serif);font-size:17px}
.doc h2{font-family:var(--display);color:var(--gold-bright);font-size:19px;margin:28px 0 8px;letter-spacing:.01em}
.doc p,.doc li{font-size:15.5px;color:var(--ink)}
.doc ul{padding-left:22px;margin:8px 0}
.faq{background:var(--glass);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:4px 24px;margin-bottom:14px;transition:border-color .2s}
.faq:hover{border-color:var(--glass-edge)}
.faq h3{font-family:var(--display);color:var(--gold-bright);font-size:16px;font-weight:600;padding:18px 0 6px;letter-spacing:.01em}
.faq p{font-size:14.5px;color:var(--ink);padding-bottom:16px;line-height:1.7}
.callout{background:var(--glass);border:1px solid var(--glass-edge);border-radius:14px;padding:24px 26px;margin:26px 0}
.callout strong{color:var(--gold)}
.contact{background:var(--glass);border:1px solid var(--glass-edge);border-radius:14px;padding:26px;margin:30px 0;text-align:center}
.contact h2{color:var(--gold);margin-bottom:8px}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.crest{animation:none}}

@media(max-width:640px){
  header.site nav{gap:14px;font-size:13px}
  header.site nav a.hide-sm{display:none}
  section{padding:56px 0}
}