:root {
  --bg: #080c12;
  --bg-2: #0e151f;
  --panel: rgba(18, 25, 36, .92);
  --panel-2: #141d2a;
  --ink: #f5efe1;
  --muted: #a8b0bb;
  --gold: #d9a84b;
  --gold-bright: #f0c66c;
  --ember: #bd6139;
  --red: #a94345;
  --line: rgba(218, 177, 90, .20);
  --line-soft: rgba(255,255,255,.08);
  --shadow: 0 30px 80px rgba(0,0,0,.42);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(122, 74, 36, .16), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(44, 92, 117, .12), transparent 32%),
    linear-gradient(180deg,#080c12 0%,#0b1119 46%,#080c12 100%);
  font: 16px/1.65 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
body:before {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 42px)); margin: 0 auto; }

.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(7, 11, 17, .78);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:11px; font-family:Cinzel, Georgia, serif; font-size:22px; font-weight:700; letter-spacing:.02em; }
.mark {
  display:grid; place-items:center; width:36px; height:36px; color:var(--gold-bright);
  filter: drop-shadow(0 0 16px rgba(240,198,108,.22));
}
.mark svg { width: 36px; height:36px; }
.nav-links { display:flex; align-items:center; gap:28px; color:#c5cbd2; font-size:14px; }
.nav-links a:hover { color:#fff; }
.nav-cta { border:1px solid var(--line); padding:9px 15px; border-radius:999px; background:rgba(217,168,75,.06); }
.menu { display:none; border:0; background:transparent; color:white; font-size:25px; }
.mobile-nav { display:none; }

.hero {
  min-height: 710px; display:grid; grid-template-columns:1.08fr .92fr; gap:78px; align-items:center;
  padding-top:76px; padding-bottom:78px;
}
.eyebrow,.kicker {
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--gold-bright);
}
.eyebrow { display:flex; gap:10px; align-items:center; }
.dot { width:7px; height:7px; border-radius:50%; background:#6bc487; box-shadow:0 0 12px #6bc487; }
h1,h2,h3 { margin-top:0; }
h1,h2 { font-family:Cinzel, Georgia, serif; line-height:1.08; }
h1 { font-size:clamp(48px,6vw,82px); max-width:760px; margin:20px 0 26px; letter-spacing:-.035em; }
h1 span { color:var(--gold-bright); }
.lede { max-width:680px; color:#c1c7cf; font-size:19px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 27px; }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:10px;
  font-weight:700; border:1px solid transparent; transition:.18s ease; color:white;
}
.button:hover { transform:translateY(-1px); }
.primary { background:linear-gradient(180deg,#d8ad58,#b68132); color:#171006; box-shadow:0 10px 28px rgba(201,148,59,.18); }
.secondary { border-color:var(--line); background:rgba(255,255,255,.035); color:#f4efe5; }
.hero-notes { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:#7f8996; font-size:13px; }
.hero-notes i { width:3px; height:3px; border-radius:50%; background:#6f7781; }

.hero-card-wrap { position:relative; }
.glow { position:absolute; inset:10% 8%; background:radial-gradient(circle, rgba(206,152,67,.16), transparent 66%); filter:blur(20px); }
.profile-card {
  position:relative; overflow:hidden; border:1px solid rgba(226,186,105,.22); border-radius:26px;
  background:linear-gradient(180deg,rgba(21,29,40,.98),rgba(12,18,27,.98));
  box-shadow:var(--shadow);
}
.portrait { height:300px; position:relative; overflow:hidden; background:linear-gradient(#3e6f78,#c39868 60%,#1a2c27 61%); }
.mock-sky { position:absolute; inset:0; background:radial-gradient(circle at 65% 26%,rgba(255,227,158,.95) 0 6%,transparent 6.4%), linear-gradient(#315867,#bc8f62 69%); }
.mock-mountains {
  position:absolute; left:-8%; right:-8%; bottom:23%; height:37%;
  background:#223837; clip-path:polygon(0 100%,8% 49%,18% 77%,31% 27%,42% 71%,54% 38%,69% 73%,80% 31%,100% 77%,100% 100%);
}
.mock-character {
  position:absolute; left:50%; bottom:-3%; width:92px; height:190px; transform:translateX(-50%);
  background:linear-gradient(90deg,#292325,#594231 55%,#2b2525); border-radius:44% 44% 10% 10% / 23% 23% 7% 7%;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.mock-character:before { content:""; position:absolute; width:62px; height:62px; border-radius:50%; background:#b08c70; left:15px; top:-28px; }
.mock-character:after { content:""; position:absolute; width:132px; height:18px; border-radius:10px; background:#31271f; top:53px; left:-20px; transform:rotate(-10deg); }
.online { position:absolute; right:15px; top:15px; background:rgba(5,10,14,.72); border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; font-size:12px; }
.online b { display:inline-block; width:7px; height:7px; background:#66d58b; border-radius:50%; margin-right:6px; }
.profile-body { padding:24px; }
.profile-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.profile-heading h2 { font-size:23px; margin:0 0 4px; }
.profile-heading p { margin:0; color:#8995a3; font-size:14px; }
.age { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--gold-bright); font-weight:700; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.tags span { font-size:12px; color:#d7dce1; background:#1d2936; border:1px solid rgba(255,255,255,.07); padding:5px 9px; border-radius:999px; }
.bio { color:#c9ced4; font-size:14px; line-height:1.65; }
.profile-actions { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:20px; }
.profile-actions button { min-height:43px; border-radius:9px; border:1px solid var(--line-soft); font-weight:700; }
.forge { background:linear-gradient(180deg,#a7494d,#7d3437); color:white; border-color:#b65d61!important; }
.forge.liked { background:linear-gradient(180deg,#d39e45,#a87427); color:#171006; }
.ghost { background:rgba(255,255,255,.035); color:#d8dde3; }
.demo-label { color:#64707c; font-size:11px; text-align:center; margin-top:12px; }

.trust-strip { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.018); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid div { padding:26px 25px; border-right:1px solid var(--line-soft); }
.trust-grid div:last-child { border-right:0; }
.trust-grid strong { display:block; color:#eee8dd; font-size:14px; margin-bottom:5px; }
.trust-grid span { color:#778390; font-size:12px; line-height:1.5; }

.section { padding-top:110px; padding-bottom:110px; }
.section-heading { max-width:750px; margin-bottom:52px; }
.section-heading h2 { font-size:clamp(36px,4.4vw,56px); margin:12px 0 18px; }
.section-heading>p:last-child,.body-copy { color:#9ea8b4; font-size:17px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step { position:relative; padding:30px; min-height:300px; background:linear-gradient(180deg,rgba(21,29,40,.82),rgba(13,19,28,.82)); border:1px solid var(--line-soft); border-radius:18px; }
.step .number { position:absolute; top:18px; right:21px; color:#44505e; font-family:Cinzel,serif; font-size:12px; }
.step .icon { width:49px; height:49px; display:grid; place-items:center; border:1px solid var(--line); background:rgba(217,168,75,.07); color:var(--gold-bright); border-radius:12px; margin-bottom:50px; font-size:20px; }
.step h3 { font-size:18px; margin-bottom:12px; }
.step p { margin:0; color:#8e99a6; font-size:14px; }

.screenshots { background:linear-gradient(180deg,rgba(21,29,39,.32),rgba(8,12,18,0)); border-top:1px solid var(--line-soft); }
.split { max-width:none; display:grid; grid-template-columns:1fr .7fr; gap:70px; align-items:end; }
.split>p { margin:0 0 9px; }
.gallery { display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:16px; }
.shot { overflow:hidden; border-radius:18px; border:1px solid var(--line-soft); background:var(--panel); }
.shot-art { height:300px; position:relative; overflow:hidden; }
.shot-one .shot-art { background:linear-gradient(#5a7580,#d09c65 60%,#243e32 61%); }
.sun { position:absolute; width:70px;height:70px;border-radius:50%;background:#f5d697;right:18%;top:14%;box-shadow:0 0 40px rgba(245,214,151,.35); }
.ridge { position:absolute;left:-5%;right:-5%;bottom:0;height:55%;background:#263e34;clip-path:polygon(0 100%,0 65%,12% 40%,28% 68%,47% 24%,62% 58%,79% 33%,100% 66%,100% 100%); }
.figure { position:absolute; width:34px;height:100px;background:#181b1b;left:46%;bottom:4%;border-radius:45% 45% 6px 6px; }
.figure:before { content:"";position:absolute;width:27px;height:27px;background:#171919;border-radius:50%;left:3px;top:-17px; }

.shot-two .shot-art { background:linear-gradient(#17263b,#2e4160 55%,#182820 56%); }
.moon { position:absolute; width:54px;height:54px;border-radius:50%;background:#d6e0db;left:18%;top:16%;box-shadow:0 0 30px rgba(214,224,219,.3); }
.trees { position:absolute;inset:35% 0 0;background:#121f1d;clip-path:polygon(0 100%,0 40%,8% 10%,13% 43%,24% 0,31% 48%,43% 17%,50% 47%,64% 6%,72% 41%,86% 14%,100% 51%,100% 100%); }
.mage { width:42px;height:110px;left:56%; }
.mage:after { content:""; position:absolute; width:8px; height:92px; background:#5b4933; right:-16px; top:-27px; transform:rotate(10deg); box-shadow:0 0 13px #c8a258; }

.shot-three .shot-art { background:linear-gradient(#2a2020,#593328 60%,#201b19); }
.fire { position:absolute;left:49%;top:57%;width:28px;height:38px;background:#efaa49;border-radius:50% 50% 45% 45%;filter:blur(1px);box-shadow:0 0 32px #c85b28;z-index:3; }
.tavern { position:absolute;left:8%;right:8%;top:16%;height:54%;background:#32261f;clip-path:polygon(0 100%,0 25%,12% 25%,12% 12%,88% 12%,88% 25%,100% 25%,100% 100%); }
.figures { position:absolute;left:28%;right:24%;bottom:5%;height:35%;background:radial-gradient(ellipse at 20% 100%,#151414 0 12%,transparent 13%),radial-gradient(ellipse at 80% 100%,#151414 0 12%,transparent 13%); }
.shot-copy { padding:17px 18px; }
.shot-copy strong,.shot-copy span { display:block; }
.shot-copy strong { font-size:14px; }
.shot-copy span { color:#778390; font-size:12px; margin-top:3px; }
.gallery-note { color:#5f6a76; font-size:11px; text-align:right; margin-top:11px; }

.addon-grid { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:80px; }
.addon-grid h2 { font-size:clamp(38px,4.2vw,56px); margin:12px 0 20px; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin:27px 0 32px; color:#bcc4cc; font-size:14px; }
.feature-list span::first-letter { color:var(--gold); }
.addon-window { border-radius:12px; overflow:hidden; border:1px solid rgba(218,177,90,.27); box-shadow:var(--shadow); background:#121821; }
.window-top { display:flex; align-items:center; height:39px; background:#1a212b; border-bottom:1px solid #2b3139; color:#c7a75e; font-family:Cinzel,serif; font-size:13px; }
.window-top span { width:41px; }
.window-top strong { flex:1;text-align:center; }
.window-top em { width:41px; text-align:center; color:#757d85; font-style:normal; font-size:19px; }
.window-body { padding:26px; }
.mini-avatar { width:74px;height:74px;border-radius:50%;float:left;margin:0 16px 20px 0;background:radial-gradient(circle at 52% 30%,#a77c59 0 18%,#273444 19% 42%,#151c24 43%);border:2px solid #a47b3c; }
.mini-title { min-height:76px; padding-top:10px; }
.mini-title strong,.mini-title span { display:block; }
.mini-title strong { color:#edca76; font:700 18px Cinzel,serif; }
.mini-title span { color:#8d99a5; font-size:13px; }
.window-body dl { clear:both; margin:13px 0; }
.window-body dl div { display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; }
.window-body dt { color:#73808d; } .window-body dd { margin:0; color:#d0d6dc; text-align:right; }
.window-body blockquote { margin:18px 0; padding:15px; background:#0e131a; border-left:3px solid #8f6a34; color:#b9c1c9; font-size:13px; }
.window-body button { width:100%; min-height:42px; border-radius:7px; border:1px solid #896b3a; background:#302717; color:#dfbd70; }

.safety { border-top:1px solid var(--line-soft); }
.safety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.safety-grid article { padding:27px; border-radius:16px; background:rgba(19,27,38,.7); border:1px solid var(--line-soft); }
.safety-grid article>div { width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:rgba(217,168,75,.08);border:1px solid var(--line);color:var(--gold-bright);font-weight:700;margin-bottom:25px; }
.safety-grid h3 { font-size:17px; margin-bottom:10px; }
.safety-grid p { color:#84909d; font-size:13px; margin:0; }

.early-access { padding:30px 0 105px; }
.early-card { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; padding:50px; border:1px solid rgba(218,177,90,.23); border-radius:24px; background:linear-gradient(135deg,rgba(55,42,25,.65),rgba(17,24,34,.94) 52%,rgba(26,39,48,.88)); box-shadow:var(--shadow); }
.early-card h2 { font-size:clamp(34px,4vw,50px); margin:10px 0 15px; }
.early-card p { color:#a9b1ba; margin-bottom:0; }
.signup label { display:block; font-size:12px; color:#b7bec6; margin-bottom:8px; }
.signup>div { display:flex; gap:8px; }
.signup input { min-width:0; flex:1; height:49px; padding:0 14px; border:1px solid rgba(255,255,255,.13); border-radius:9px; background:#0d131a; color:#fff; outline:none; }
.signup input:focus { border-color:#9b773d; box-shadow:0 0 0 3px rgba(190,143,63,.09); }
.signup small { display:block; color:#687480; margin-top:9px; font-size:11px; }

footer { border-top:1px solid var(--line-soft); background:#070a0f; padding:48px 0 30px; }
.footer-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.footer-brand { font-size:18px; }
.footer-grid p { color:#68737f; font-size:13px; }
.footer-links { display:flex; gap:25px; color:#828d99; font-size:13px; }
.legal { display:flex; justify-content:space-between; gap:50px; margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.05); color:#4f5964; font-size:10px; }
.legal p:first-child { max-width:800px; }

@media (max-width: 960px) {
  .hero { grid-template-columns:1fr; gap:50px; padding-top:60px; }
  .hero-copy { max-width:760px; }
  .hero-card-wrap { max-width:560px; }
  .steps,.safety-grid { grid-template-columns:1fr 1fr; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-grid div:nth-child(2) { border-right:0; }
  .trust-grid div:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); }
  .gallery { grid-template-columns:1fr 1fr; }
  .shot:first-child { grid-column:1 / -1; }
  .addon-grid,.early-card { grid-template-columns:1fr; }
  .addon-window { max-width:600px; }
}
@media (max-width: 720px) {
  .shell { width:min(100% - 28px,1180px); }
  .nav-links { display:none; }
  .menu { display:block; }
  .mobile-nav.open { display:grid; padding:8px 20px 18px; border-top:1px solid rgba(255,255,255,.05); }
  .mobile-nav a { padding:10px 2px; color:#c6cdd5; }
  .hero { min-height:0; padding-top:50px; }
  h1 { font-size:46px; }
  .lede { font-size:17px; }
  .profile-card { border-radius:18px; }
  .portrait { height:250px; }
  .trust-grid,.steps,.safety-grid,.gallery,.split { grid-template-columns:1fr; }
  .trust-grid div { border-right:0; border-bottom:1px solid var(--line-soft); }
  .section { padding-top:78px; padding-bottom:78px; }
  .split { gap:10px; }
  .shot:first-child { grid-column:auto; }
  .shot-art { height:240px; }
  .addon-grid { gap:42px; }
  .feature-list { grid-template-columns:1fr; }
  .early-card { padding:30px 22px; gap:36px; }
  .signup>div { flex-direction:column; }
  .footer-grid,.legal { flex-direction:column; }
  .footer-links { flex-wrap:wrap; }
}