/* Velvet Panther Studio — aggressive editorial-luxury system */
:root {
  --vps-ink: #070309;
  --vps-plum: #300c3e;
  --vps-violet: #b86ad0;
  --vps-gold: #efca7e;
  --vps-cream: #fff8ef;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

html { background: var(--vps-ink); }
body {
  position: relative;
  background: transparent !important;
  overflow-x: hidden;
  font-weight: 500;
  line-height: 1.62;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: url("panther-fur-purple-v1.webp") center top / cover no-repeat;
  filter: saturate(1.42) contrast(1.18) brightness(.66);
  opacity: .74;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(800px circle at var(--glow-x, 78%) var(--glow-y, 18%), rgba(187, 72, 215, .35), transparent 52%),
    linear-gradient(180deg, rgba(5,2,7,.5), rgba(23,4,29,.3) 45%, rgba(4,2,6,.78));
}

.site-header {
  background: rgba(7,3,9,.76) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  border-bottom: 1px solid rgba(239,202,126,.2) !important;
}
.brand .logo img {
  transform-origin: center;
  filter: drop-shadow(0 0 14px rgba(178,80,205,.38)) drop-shadow(0 12px 24px rgba(0,0,0,.55));
  animation: logo-breathe 5s ease-in-out infinite;
}
@keyframes logo-breathe {
  50% { filter: drop-shadow(0 0 24px rgba(210,116,232,.56)) drop-shadow(0 12px 24px rgba(0,0,0,.55)); }
}
.nav a { letter-spacing: .105em; text-transform: uppercase; font-size: .78rem !important; font-weight: 700; }
.nav a:hover { color: var(--vps-gold) !important; }

main > section {
  position: relative;
  isolation: isolate;
  background: rgba(8,3,11,.38) !important;
  border-color: rgba(239,202,126,.18) !important;
  overflow: hidden;
}
main > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("panther-fur-purple-v1.webp") center 44% / cover no-repeat;
  opacity: .32;
  filter: saturate(1.45) contrast(1.18) brightness(.72);
  mix-blend-mode: screen;
}
main > section:nth-of-type(even)::after { transform: scaleX(-1); background-position: center 74%; }
main > section:nth-of-type(3n) { background: rgba(46,8,58,.46) !important; }

main > section + section::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  right: clamp(1.25rem, 8vw, 8rem);
  width: 142px;
  height: 30px;
  opacity: .78;
  background:
    linear-gradient(108deg, transparent 0 17%, var(--vps-gold) 18% 20%, transparent 21% 38%, var(--vps-gold) 39% 41%, transparent 42% 59%, var(--vps-gold) 60% 62%, transparent 63%);
  transform: skewX(-15deg) rotate(-2deg);
  filter: drop-shadow(0 0 8px rgba(239,202,126,.28));
}

.card, details, .table-wrap, blockquote, form {
  background: linear-gradient(145deg, rgba(46,15,55,.78), rgba(7,4,10,.9)) !important;
  border-color: rgba(203,117,225,.38) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(16px) saturate(135%);
}
.card { border-radius: 2px !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-5px); border-color: rgba(239,202,126,.55) !important; box-shadow: 0 36px 90px rgba(0,0,0,.58), 0 0 48px rgba(176,68,202,.18); }
.card.featured {
  background: linear-gradient(145deg, rgba(78,28,88,.86), rgba(9,4,12,.94)) !important;
  box-shadow: 0 0 0 1px rgba(239,202,126,.72) inset, 0 35px 95px rgba(0,0,0,.55) !important;
}

.btn { border-radius: 2px !important; position: relative; overflow: hidden; letter-spacing: .025em; }
.btn::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.btn:hover::after { left: 120%; }
.btn-gold { background: linear-gradient(135deg, #f7dfa8, #c99343) !important; box-shadow: 0 14px 38px rgba(213,162,77,.22); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(213,162,77,.35); }

h1, h2, h3 {
  text-wrap: balance;
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.04 !important;
}
h1 { text-shadow: 0 18px 65px rgba(0,0,0,.64); }
h1 em, h2 em, h3 em {
  font-family: var(--serif);
  font-weight: 700 !important;
  letter-spacing: -.035em;
}
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem) !important; }
h3 { font-size: clamp(1.32rem, 2.2vw, 1.65rem) !important; }
.lead { font-weight: 600; color: #eadfeb !important; }
.muted, details p, .ticks li { color: #d9ceda !important; font-weight: 500; }
.btn { font-weight: 800 !important; }
.eyebrow { letter-spacing: .24em !important; }

/* Page-load sequence */
body.vps-ready .site-header { animation: vps-drop .65s both; }
body.vps-ready main > section:first-child .eyebrow { animation: vps-rise .65s .12s both; }
body.vps-ready main > section:first-child h1 { animation: vps-rise .8s .24s both; }
body.vps-ready main > section:first-child .lead,
body.vps-ready main > section:first-child .prose > p { animation: vps-rise .75s .38s both; }
body.vps-ready main > section:first-child .actions { animation: vps-rise .75s .52s both; }
@keyframes vps-drop { from { opacity:0; transform:translateY(-18px); } }
@keyframes vps-rise { from { opacity:0; transform:translateY(24px); filter:blur(4px); } }

/* Cursor light */
.vps-cursor {
  position: fixed;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  opacity: .24;
  background: radial-gradient(circle, rgba(202,94,229,.45), transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}

/* Page identities */
body[data-page="pricing"] .grid.g2 { align-items: stretch; }
body[data-page="pricing"] .price { font-size: clamp(3.2rem,8vw,6rem); color: var(--vps-gold); }
body[data-page="pricing"] .card.featured::before {
  content: "GROWTH / BLACK";
  display: block;
  margin-bottom: 1rem;
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .26em;
  color: var(--vps-gold);
}
body[data-page="work"] .mock {
  position: relative;
  border-radius: 2px;
  transform: perspective(1000px) rotateY(-2deg);
  box-shadow: 0 32px 90px rgba(0,0,0,.5);
}
body[data-page="work"] .mock:hover { transform: perspective(1000px) rotateY(0) translateY(-6px); transition:.35s ease; }
body[data-page="growth-seo"] main > section:first-child::before {
  content: "PROTECT / RANK / OWN";
  position: absolute;
  right: 2vw;
  bottom: 1rem;
  font: 600 clamp(2.2rem,8vw,8rem)/.8 var(--serif);
  color: rgba(239,202,126,.07);
  letter-spacing: -.05em;
}
body[data-page="sites"] main > section:first-child::before {
  content: "YOUR NAME. YOUR DOMAIN.";
  position: absolute;
  right: -1rem;
  bottom: 1rem;
  font: 600 clamp(2rem,7vw,7rem)/.8 var(--serif);
  color: rgba(214,118,232,.09);
  letter-spacing: -.04em;
}
body[data-page="preview"] form { padding: clamp(1.25rem,4vw,2.5rem); border: 1px solid rgba(239,202,126,.38); }
body[data-page="preview"] label { color: var(--vps-gold); }

/* Danni Ashe founder feature */
.danni-feature {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.45fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
  max-width:var(--max);
}
.danni-portrait {
  position:relative;
  margin:0;
  max-width:360px;
}
.danni-portrait::before {
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-1;
  border:1px solid rgba(239,202,126,.62);
  transform:rotate(-2deg);
}
.danni-portrait img {
  width:100%;
  aspect-ratio:254/363;
  object-fit:cover;
  filter:sepia(.08) saturate(.82) contrast(1.08);
  box-shadow:0 36px 90px rgba(0,0,0,.58);
}
.danni-portrait figcaption {
  margin-top:1rem;
  font-size:.72rem;
  line-height:1.45;
  color:#d5c9d6;
}
.danni-kicker {
  margin-bottom:.9rem;
  color:var(--vps-gold);
  font:800 .72rem/1 var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.danni-feature h2 {
  font-size:clamp(2.5rem,5.6vw,5.4rem) !important;
  line-height:.94 !important;
  margin-bottom:1.25rem;
}
.danni-deck {
  max-width:44rem;
  font-size:clamp(1.08rem,1.7vw,1.3rem);
  font-weight:600;
  color:#eee2ee;
}
.danni-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:1.75rem 0;
  background:rgba(239,202,126,.25);
  border:1px solid rgba(239,202,126,.25);
}
.danni-stat {
  padding:1rem;
  background:rgba(9,4,12,.76);
}
.danni-stat strong {
  display:block;
  color:var(--vps-gold);
  font:700 clamp(1.45rem,3vw,2.4rem)/1 var(--serif);
}
.danni-stat span {
  display:block;
  margin-top:.35rem;
  color:#d6cad7;
  font-size:.78rem;
  line-height:1.35;
}
.danni-quote {
  margin:1.5rem 0;
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  font-weight:700;
}
@media(max-width:719px) {
  .danni-feature { grid-template-columns:1fr; }
  .danni-portrait { max-width:260px; margin-inline:auto; }
  .danni-stats { grid-template-columns:1fr; }
}

/* Full-screen mobile navigation */
.vps-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(239,202,126,.42);
  background: rgba(25,8,31,.72);
  color: var(--vps-cream);
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .12em;
}
@media (max-width: 719px) {
  body::before { opacity:.62; background-size:auto 100vh; background-repeat:repeat-y; }
  .header-inner { grid-template-areas:"brand toggle cta" !important; grid-template-columns:auto 1fr auto !important; }
  .vps-menu-toggle { display:block; grid-area:toggle; justify-self:center; }
  .nav {
    position:fixed;
    inset:0 auto auto 0;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    z-index:20;
    display:flex !important;
    flex-direction:column;
    justify-content:center !important;
    align-items:flex-start;
    gap:.25rem !important;
    padding:6rem 2rem 3rem !important;
    margin:0 !important;
    background:
      linear-gradient(rgba(8,3,11,.58),rgba(8,3,11,.9)),
      url("panther-fur-purple-v1.webp") center/cover;
    transform:translateX(105%);
    transition:transform .38s cubic-bezier(.22,.8,.24,1);
  }
  body.vps-menu-open { overflow:hidden; }
  body.vps-menu-open .nav { transform:translateX(0); }
  body.vps-menu-open .vps-menu-toggle { position:fixed; top:1rem; right:1rem; z-index:22; }
  .nav a { font-family:var(--serif); font-size:clamp(1.8rem,9vw,3rem) !important; font-weight:800; text-transform:none; letter-spacing:-.035em; color:var(--vps-cream) !important; }
  main > section::after { opacity:.3; background-size:auto 120%; }
  main > section + section::before { right:1rem; width:100px; }
  .vps-cursor { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .logo img, body.vps-ready * { animation:none !important; }
  .vps-cursor { display:none; }
}