@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Crimson+Text:wght@400;600;700&display=swap');

:root{
  --ink:#08060e;
  --ink2:#0d0916;
  --panel:rgba(19,13,31,.72);
  --panel2:rgba(31,20,47,.52);
  --gold:#d8b66f;
  --gold2:#f3d99a;
  --gold3:#8e6a32;
  --violet:#9a68d8;
  --violet2:#c49bff;
  --text:#f5eddf;
  --muted:#b9ad9d;
  --muted2:#8e8378;
  --line:rgba(216,182,111,.22);
  --line2:rgba(196,155,255,.18);
  --title:"Cinzel",serif;
  --body:"Crimson Text",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 8%,rgba(119,67,171,.18),transparent 26%),
    radial-gradient(circle at 85% 28%,rgba(204,155,69,.10),transparent 25%),
    radial-gradient(circle at 50% 100%,rgba(93,53,130,.12),transparent 35%),
    linear-gradient(180deg,#07050b 0%,#0c0813 42%,#07050b 100%);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-4;
  opacity:.22;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(216,182,111,.5) 0 1px,transparent 1.5px);
  background-size:137px 173px,221px 269px;
  background-position:15px 30px,80px 10px;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.85) 55%,transparent 100%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:100;
  opacity:.045;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
section{position:relative;padding:115px clamp(22px,7vw,110px)}
section:before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

#stars{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  pointer-events:none;
}

header{
  position:fixed;
  z-index:50;
  inset:0 0 auto;
  min-height:84px;
  padding:12px clamp(18px,5vw,80px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(5,3,9,.96),rgba(5,3,9,.68),transparent);
  transition:.35s;
}
header.scrolled{
  background:rgba(7,5,12,.91);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 45px rgba(0,0,0,.25);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--title);
  font-size:.92rem;
  letter-spacing:.11em;
  color:var(--gold2);
}
.brand:before{
  content:"✦";
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid var(--gold3);
  color:var(--gold);
  transform:rotate(45deg);
  font-size:.8rem;
}
.brand small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.55rem;
  letter-spacing:.19em;
  font-weight:500;
}
header nav{display:flex;align-items:center;gap:22px}
header nav a{
  position:relative;
  color:#d7ccbd;
  font-family:var(--title);
  font-size:.64rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 0;
}
header nav a:after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:3px;
  height:1px;
  background:var(--gold);
  transition:.25s;
}
header nav a:hover{color:var(--gold2)}
header nav a:hover:after{right:0}
#menu{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--gold);
  width:44px;height:40px;
  font-size:1.2rem;
}

.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(380px,.72fr);
  align-items:center;
  gap:clamp(35px,8vw,120px);
  padding-top:145px;
  overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute;
  width:760px;height:760px;
  right:-260px;top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(137,82,193,.17),transparent 62%);
  filter:blur(12px);
  pointer-events:none;
}
.heroText{position:relative;z-index:2;max-width:820px}
.eyebrow{
  margin:0 0 11px;
  color:var(--gold);
  font-family:var(--title);
  font-size:.67rem;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.heroText h1{
  margin:0 0 22px;
  font-family:var(--title);
  font-size:clamp(4.2rem,9vw,8.4rem);
  line-height:.92;
  letter-spacing:-.055em;
  text-shadow:0 20px 60px rgba(0,0,0,.65);
}
.heroText h1 span{
  color:transparent;
  background:linear-gradient(110deg,#9f7637,#f4db9a 35%,#a775db 72%,#f0d18b);
  -webkit-background-clip:text;
  background-clip:text;
}
.heroText>p:not(.eyebrow){
  max-width:720px;
  color:#d2c6b8;
  font-size:1.2rem;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:#efe5d7;
  font-family:var(--title);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.3s;
}
.btn:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold2);box-shadow:0 15px 45px rgba(0,0,0,.25)}
.btn.gold{
  color:#160e07;
  border-color:#d8b66f;
  background:linear-gradient(135deg,#ae803a,#f0d493 45%,#bd914d);
  box-shadow:0 14px 38px rgba(211,169,90,.16);
}
.btn.gold:hover{color:#160e07;box-shadow:0 18px 50px rgba(211,169,90,.28)}
.offline{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:28px;
  color:var(--muted);
  font-size:.98rem;
}
.offline i{
  width:8px;height:8px;border-radius:50%;
  background:#ba485b;
  box-shadow:0 0 0 0 rgba(186,72,91,.5);
  animation:offlinePulse 1.8s infinite;
}
@keyframes offlinePulse{70%{box-shadow:0 0 0 11px rgba(186,72,91,0)}}

.crest{
  position:relative;
  min-height:580px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.crest:before{
  content:"";
  position:absolute;
  width:440px;height:440px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(152,100,217,.18),rgba(216,182,111,.04) 35%,transparent 68%);
  filter:blur(22px);
  animation:crestGlow 5s ease-in-out infinite alternate;
}
@keyframes crestGlow{to{transform:scale(1.12);opacity:.7}}
.crest:after{
  content:"✦  ᚨ  ᚱ  ᚲ  ᚨ  ᚾ  ᛁ  ᚨ  ✦";
  position:absolute;
  bottom:24px;
  color:rgba(216,182,111,.35);
  font-family:var(--title);
  font-size:.56rem;
  letter-spacing:.24em;
}
.arkania-crest{
  width:min(100%,500px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.5));
  animation:crestFloat 6s ease-in-out infinite;
}
@keyframes crestFloat{50%{transform:translateY(-8px)}}
.crest-motto{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  text-align:center;
  color:#d8c9b4;
  font-family:"Crimson Text",Georgia,serif;
  font-style:italic;
  font-size:1.04rem;
  line-height:1.15;
  letter-spacing:.015em;
  text-shadow:0 2px 14px #000;
  white-space:nowrap;
}
.crest-motto span{
  color:var(--gold);
  margin:0 10px;
  font-style:normal;
  font-size:.72rem;
  vertical-align:middle;
}

.title{
  max-width:930px;
  margin:0 auto 58px;
  text-align:center;
}
.title h2{
  margin:0;
  font-family:var(--title);
  font-size:clamp(2.4rem,5vw,4.5rem);
  line-height:1.05;
}
.title h2:after{
  content:"✦";
  display:block;
  margin:20px auto 0;
  color:var(--gold);
  font-size:.8rem;
  opacity:.75;
}
.wlIntro{
  max-width:760px;
  margin:22px auto 0;
  color:var(--muted);
  font-size:1.05rem;
}

#story{background:linear-gradient(180deg,transparent,rgba(79,45,106,.07),transparent)}
.timeline{
  position:relative;
  max-width:1100px;
  margin:auto;
  display:grid;
  gap:18px;
}
.timeline:before{
  content:"";
  position:absolute;
  left:43px;
  top:30px;bottom:30px;
  width:1px;
  background:linear-gradient(var(--gold),rgba(154,104,216,.2),transparent);
}
.timeline article{
  position:relative;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:28px;
  padding:32px 35px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  transition:.3s;
}
.timeline article:hover{transform:translateX(5px);border-color:rgba(216,182,111,.45)}
.timeline article>strong{
  position:relative;
  z-index:2;
  width:48px;height:48px;
  display:grid;place-items:center;
  background:#0b0712;
  border:1px solid var(--gold3);
  color:var(--gold);
  font-family:var(--title);
}
.timeline h3{margin:0 0 7px;color:var(--gold2);font-size:1.35rem}
.timeline p{margin:0;color:var(--muted)}

.grid{
  max-width:1450px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.grid article{
  min-height:230px;
  padding:30px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),
    radial-gradient(circle at 90% 100%,rgba(139,91,199,.11),transparent 45%);
  transition:.35s;
}
.grid article:before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(216,182,111,.35),transparent 25%,transparent 75%,rgba(154,104,216,.25)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:.3s;
}
.grid article:hover{transform:translateY(-6px);box-shadow:0 25px 60px rgba(0,0,0,.3);border-color:transparent}
.grid article:hover:before{opacity:1}
.grid article:first-letter{font-size:1.5rem}
.grid h3{margin:14px 0 7px;color:var(--gold2);font-size:1.1rem}
.grid p{margin:0;color:var(--muted)}

#rules{background:radial-gradient(circle at 50% 45%,rgba(116,72,164,.1),transparent 42%)}
.tabs{
  max-width:1100px;
  margin:0 auto 18px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
}
.tabs button{
  padding:12px 19px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.018);
  color:var(--muted);
  font-family:var(--title);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.25s;
}
.tabs button:hover,.tabs button.active{
  background:var(--gold);
  color:#1b1209;
  border-color:var(--gold);
}
.book{
  max-width:1200px;
  margin:auto;
  padding:clamp(30px,5vw,62px);
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(32,21,48,.74),rgba(10,7,15,.86));
  box-shadow:0 35px 90px rgba(0,0,0,.35);
}
.panel{display:none}
.panel.active{display:block;animation:panelIn .35s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}
.panel h3{margin-top:0;color:var(--gold2);font-family:var(--title);font-size:1.55rem}
.panel ol{padding-left:1.25em;margin:0}
.panel li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);color:#d1c5b6}
.panel li:last-child{border-bottom:0}
.note{
  margin-top:24px;
  padding:15px 18px;
  border-left:2px solid var(--gold);
  background:rgba(216,182,111,.055);
  color:var(--muted);
}

.sealed{
  max-width:1250px;
  margin:auto;
  padding:clamp(30px,5vw,65px);
  display:grid;
  grid-template-columns:110px 1.25fr .7fr;
  gap:35px;
  align-items:center;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 10% 50%,rgba(142,96,195,.12),transparent 32%),
    linear-gradient(135deg,rgba(36,22,52,.65),rgba(11,7,16,.88));
  box-shadow:0 30px 85px rgba(0,0,0,.38);
}
.seal{
  width:86px;height:86px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--gold);
  font-size:1.8rem;
  box-shadow:0 0 40px rgba(216,182,111,.12);
}
.sealed h2{margin:0;font-family:var(--title);font-size:clamp(2.2rem,4vw,4rem)}
.sealed p{color:var(--muted)}
.goldText{color:var(--gold2)!important}
.sealed aside{
  padding:22px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.16);
}
.sealed aside div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sealed aside div:last-child{border-bottom:0}
.sealed aside span{color:var(--muted)}
.sealed aside b{font-family:var(--title);font-size:.62rem}
.red{color:#d25b6d}





.wlForm{
  max-width:1120px;
  margin:auto;
  padding:clamp(25px,4vw,55px);
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(31,20,46,.8),rgba(9,6,14,.9));
  box-shadow:0 35px 100px rgba(0,0,0,.4);
}
.wlForm fieldset{
  margin:0 0 25px;
  padding:25px;
  border:1px solid rgba(216,182,111,.16);
  background:rgba(0,0,0,.1);
}
.wlForm legend{
  padding:0 12px;
  color:var(--gold2);
  font-family:var(--title);
  font-size:.78rem;
  letter-spacing:.1em;
}
.formGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}
.wlForm label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#d9cdbd;
  font-family:var(--title);
  font-size:.67rem;
  letter-spacing:.035em;
}
.wlForm label.full{grid-column:1/-1}
.wlForm label small{
  color:var(--muted2);
  font-family:var(--body);
  font-size:.85rem;
  letter-spacing:0;
  font-weight:400;
}
.wlForm input,.wlForm select,.wlForm textarea{
  width:100%;
  border:1px solid rgba(216,182,111,.18);
  outline:none;
  border-radius:1px;
  background:rgba(5,3,9,.72);
  color:#eee5d8;
  padding:13px 14px;
  transition:.25s;
}
.wlForm textarea{
  min-height:125px;
  resize:vertical;
  line-height:1.55;
}
.wlForm input:focus,.wlForm select:focus,.wlForm textarea:focus{
  border-color:rgba(196,155,255,.72);
  box-shadow:0 0 0 3px rgba(154,104,216,.08),0 0 25px rgba(154,104,216,.08);
}
.wlForm input::placeholder,.wlForm textarea::placeholder{color:#71685f}
.wlForm select{appearance:auto}
.honey{display:none!important}
.conditionalField{display:none!important}
.check{
  flex-direction:row!important;
  align-items:flex-start;
  gap:10px!important;
  font-family:var(--body)!important;
  font-size:.98rem!important;
  color:var(--muted)!important;
}
.check input{width:18px;height:18px;margin-top:3px;accent-color:#b4874a}
.formFooter{
  padding-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}
.formFooter p{max-width:650px;color:var(--muted);margin:0;font-size:.95rem}
.submitBtn{border:0;min-width:260px}

.faq{background:linear-gradient(180deg,transparent,rgba(83,49,108,.06),transparent)}
.faq{
  max-width:none;
}
.faq details{
  max-width:950px;
  margin:auto;
  padding:21px 0;
  border-bottom:1px solid var(--line);
}
.faq summary{
  cursor:pointer;
  list-style:none;
  color:var(--gold2);
  font-family:var(--title);
  font-size:.9rem;
  letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--gold);font-size:1.4rem}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--muted);max-width:800px}

footer{
  padding:48px clamp(22px,7vw,110px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px 35px;
  border-top:1px solid var(--line);
  background:#050308;
}
footer strong{font-family:var(--title);color:var(--gold);letter-spacing:.08em}
footer span{color:var(--muted);margin-left:12px}
footer>a{font-family:var(--title);font-size:.65rem;color:var(--gold2)}
footer p{grid-column:1/-1;margin:0;color:#756c63;font-size:.8rem}

.reveal{opacity:0;transform:translateY(24px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1100px){
  header nav{
    position:absolute;
    top:84px;left:0;right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:22px 30px 28px;
    background:rgba(7,5,12,.98);
    border-bottom:1px solid var(--line);
  }
  header nav.open{display:flex}
  #menu{display:block}
  .hero{grid-template-columns:1fr;padding-top:135px}
  .crest{min-height:480px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sealed{grid-template-columns:90px 1fr}
  .sealed aside{grid-column:2}
}
@media(max-width:720px){
  body{font-size:17px}
  section{padding:85px 20px}
  header{padding:12px 18px}
  .brand{font-size:.78rem}
  .brand small{display:none}
  .brand:before{width:36px;height:36px}
  .hero{padding-top:125px}
  .heroText h1{font-size:clamp(3.3rem,18vw,5.4rem)}
  .heroText>p:not(.eyebrow){font-size:1.05rem}
  .crest{display:none}
  .timeline:before{display:none}
  .timeline article{grid-template-columns:1fr;padding:25px}
  .timeline article>strong{width:42px;height:42px}
  .grid{grid-template-columns:1fr}
  .tabs{display:grid;grid-template-columns:1fr 1fr}
  .tabs button{padding:11px 8px}
  .formGrid{grid-template-columns:1fr}
  .wlForm label.full{grid-column:auto}
  .formFooter{flex-direction:column;align-items:stretch}
  .submitBtn{width:100%}
  .sealed{grid-template-columns:1fr}
  .sealed aside{grid-column:auto}
  .seal{display:none}
  footer{grid-template-columns:1fr}
  footer span{display:block;margin:4px 0 0}
  footer p{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}