/* =================================================
DEMIURGE DIGITAL STUDIO
CORE STYLESHEET
================================================= */


/* =========================
RESET
========================= */

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

img{
max-width:100%;
display:block;
}

ul{
list-style:none;
}


/* =========================
VARIABLES
========================= */

:root{

--bg-main:#0f0826;
--bg-dark:#0b071a;

--gold:#d4af37;

--text-light:#f5f2ea;

--container:1240px;

--serif:Georgia, "Times New Roman", serif;
--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}


/* =========================
BASE
========================= */

body{

background:
radial-gradient(circle at top, #1a123d, #0f0826 60%);

color:var(--text-light);

font-family:var(--sans);

line-height:1.6;

min-height:100vh;

}


/* =========================
CONTAINER
========================= */

.container{

max-width:var(--container);

margin:0 auto;

padding:0 20px;

}


/* =========================
HEADER
========================= */

.site-header{

position:sticky;

top:0;

z-index:100;

background:rgba(15,8,38,.75);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(212,175,55,.2);

}

.header-inner{

display:flex;

align-items:center;

gap:32px;

padding:18px 0;

}


/* =========================
BRAND
========================= */

.brand{

display:flex;

align-items:center;

gap:12px;

text-decoration:none;

min-width:220px;

}

.brand img{

width:40px;

height:auto;

}

.wordmark strong{

font-family:var(--serif);

letter-spacing:.08em;

font-size:16px;

display:block;

}

.wordmark span{

font-size:10px;

letter-spacing:.26em;

opacity:.85;

display:block;

}

.wordmark span{
  color: rgba(212,175,55,.75);
}

/* FORCE wordmark to gold (overrides any link styling) */
.brand .wordmark strong,
.brand .wordmark span{
  color: var(--gold) !important;
}

.brand .wordmark strong{
  text-shadow: 0 0 18px rgba(212,175,55,.18);
}


/* =========================
NAVIGATION
========================= */

.main-nav{

flex:1;

}

.main-nav > ul{

display:flex;

align-items:center;

justify-content:center;

gap:28px;

}

.main-nav a{

color:var(--text-light);

text-decoration:none;

font-size:14px;

letter-spacing:.04em;

white-space:nowrap;

position:relative;

}

.main-nav a:hover{

color:var(--gold);

}


/* Beveled gold underline */
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;

  width:0;
  height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));

  /* bevel / point at the right end */
  clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%);

  transition: width .35s ease;
  opacity: .95;
}

.main-nav a:hover::after{
  width:100%;
}


/* =========================
DROPDOWN FIX (clickable)
========================= */

.main-nav li{
  position:relative;
}

/* =========================
DROPDOWNS — stable + clickable
========================= */

.main-nav li{
  position: relative;
}

/* Hover-bridge: prevents dropdown from collapsing while moving mouse down */
.main-nav li.menu-item-has-children::after,
.main-nav li.page_item_has_children::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:14px; /* bridge height */
}

/* Dropdown */
.main-nav ul ul{
  position:absolute;
  top:100%;
  left:0;
  margin-top: 10px;

  min-width: 240px;
  display:none;
  flex-direction:column;

  padding:10px;
  border-radius:12px;

  background: rgba(15,8,38,.95);
  border:1px solid rgba(212,175,55,.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);

  z-index: 99999;
}

/* Keep open on hover + keyboard */
.main-nav li:hover > ul,
.main-nav li:focus-within > ul{
  display:flex;
}

/* Sub links */
.main-nav ul ul a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  white-space: nowrap;
}

.main-nav ul ul a::after{ display:none; }

.main-nav ul ul a:hover{
  background: rgba(212,175,55,.12);
}

/* the "hover bridge" so your mouse can travel down */
.main-nav li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 14px;
}

/* show on hover + keyboard focus */
.main-nav li:hover > ul,
.main-nav li:focus-within > ul{
  display:flex;
}

.main-nav ul ul a{
  padding:10px 12px;
  border-radius:8px;
  display:block;
}

.main-nav ul ul a::after{
  display:none;
}

.main-nav ul ul a:hover{
  background:rgba(212,175,55,.12);
}


/* =========================
CTA BUTTON
========================= */

.cta{

margin-left:auto;

border:1px solid var(--gold);

padding:10px 18px;

border-radius:30px;

color:var(--gold);

text-decoration:none;

font-size:14px;

transition:.25s ease;

}

.cta:hover{

background:var(--gold);

color:var(--bg-main);

}


/* =========================
HERO
========================= */

.hero{

padding:140px 0;

}

.hero h1{

font-family:var(--serif);

font-size:48px;

max-width:700px;

line-height:1.2;

margin-bottom:20px;

}

.hero p{

max-width:520px;

margin-bottom:30px;

opacity:.9;

}

.hero-buttons{

display:flex;

gap:18px;

}

.btn-primary{

background:var(--gold);

color:#0f0826;

padding:12px 22px;

border-radius:30px;

text-decoration:none;

font-weight:600;

}

.btn-secondary{

border:1px solid var(--gold);

padding:12px 22px;

border-radius:30px;

color:var(--gold);

text-decoration:none;

}

.btn-secondary:hover{

background:var(--gold);

color:#0f0826;

}

.hero-actions{
  display:flex;
  justify-content:center; /* centers both */
  gap:16px;
  flex-wrap:wrap;
  margin-top: 28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}

.btn-primary{
  background:var(--gold);
  color:var(--bg-main);
}

.btn-secondary{
  border:1px solid var(--gold);
  color:var(--gold);
}

.btn-secondary:hover{
  background:var(--gold);
  color:var(--bg-main);
}

.hero h1{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}