
:root {
  --a:#d395ff; --a2:#a855f7; --a-dim:rgba(211,149,255,.12);
  --bg:#1a0a2e; --bg2:#140824; --card:#1e0f38; --card2:#251248;
  --text:#fff; --muted:#9b6db8; --dim:rgba(255,255,255,.55);
  --border:rgba(211,149,255,.18);
  --nav:64px; --r:14px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--sans); background:var(--bg); color:var(--text); overflow-x:hidden; min-height:100vh }
img { max-width:100%; height:auto }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--bg2) }
::-webkit-scrollbar-thumb { background:var(--a); border-radius:3px }

/* cursor — desktop only */
#cd,#cr,#ci { display:none }
@media (pointer:fine) {
  body { cursor:none }
  #cd { display:block; position:fixed; width:8px; height:8px; background:var(--a); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s; mix-blend-mode:screen }
  #cr { display:block; position:fixed; width:36px; height:36px; border:1.5px solid rgba(211,149,255,.45); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),border-color .3s }
  #ci { display:block; position:fixed; pointer-events:none; z-index:9997; transform:translate(-50%,-120%) scale(0); font-size:20px; transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s; opacity:0; filter:drop-shadow(0 0 6px var(--a)) }
  body.ch #cd { width:13px; height:13px }
  body.ch #cr { width:50px; height:50px; border-color:var(--a) }
  body.ch #ci { transform:translate(-50%,-130%) scale(1); opacity:1 }
}

/* sparkle canvas */
#sc { position:fixed; inset:0; pointer-events:none; z-index:9996 }

/* ambient blobs */
.amb { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.abl { position:absolute; border-radius:50%; filter:blur(80px); animation:bfloat linear infinite alternate }
.abl:nth-child(1) { width:min(600px,140vw); height:min(600px,140vw); background:radial-gradient(circle,rgba(120,40,240,.2),transparent 70%); top:-150px; right:-80px; animation-duration:24s }
.abl:nth-child(2) { width:min(500px,120vw); height:min(500px,120vw); background:radial-gradient(circle,rgba(211,149,255,.13),transparent 70%); bottom:-120px; left:-60px; animation-duration:19s; animation-delay:-10s }
.abl:nth-child(3) { width:min(360px,90vw);  height:min(360px,90vw);  background:radial-gradient(circle,rgba(60,10,150,.22),transparent 70%); top:35%; left:28%; animation-duration:32s; animation-delay:-16s }
@keyframes bfloat { from { transform:translate(0,0) scale(1) } to { transform:translate(40px,28px) scale(1.1) } }

/* progress / flash */
#flash { position:fixed; inset:0; background:var(--a); opacity:0; pointer-events:none; z-index:400; transition:opacity .12s }
#flash.on { opacity:.04 }
#pb { position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:linear-gradient(90deg,#8b2fff,#d395ff,#ff9ef5); transform-origin:left; transform:scaleX(0); opacity:0 }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:200;
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  background:rgba(18,6,32,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nlogo { display:flex; align-items:center; gap:10px; text-decoration:none }
.nemb { width:36px; height:36px; flex-shrink:0; filter:drop-shadow(0 0 6px rgba(211,149,255,.5)) }
.nwm-main { font-family:var(--serif); font-size:1.1rem; font-weight:400; letter-spacing:.22em; color:var(--a); text-transform:uppercase }
.nwm-sub { display:none }

/* mobile menu */
.burger { display:flex; flex-direction:column; gap:5px; padding:8px; background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
.burger span { display:block; width:22px; height:1.5px; background:var(--muted); border-radius:1px; transition:.3s }
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.burger.open span:nth-child(2) { opacity:0 }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }
.nlinks {
  display:none; position:fixed; top:var(--nav); right:0;
  flex-direction:column; width:200px; list-style:none;
  background:rgba(14,5,28,.98); border-left:1px solid var(--border);
  border-bottom:1px solid var(--border); border-radius:0 0 0 14px;
  padding:6px 0;
}
.nlinks.open { display:flex }
.nlinks a {
  display:block; font-family:var(--sans); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding:13px 22px; transition:color .2s,background .2s; -webkit-tap-highlight-color:transparent
}
.nlinks a:hover, .nlinks a.act { color:var(--a); background:rgba(211,149,255,.06) }

/* desktop nav */
@media (min-width:700px) {
  nav { padding:0 clamp(24px,5vw,64px) }
  .nwm-sub { display:block; font-family:var(--sans); font-size:.48rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:2px }
  .burger { display:none }
  .nlinks { display:flex; position:static; flex-direction:row; width:auto; background:transparent; border:none; border-radius:0; padding:0; gap:clamp(16px,2.5vw,36px) }
  .nlinks a { padding:4px 0; position:relative }
  .nlinks a::after { content:''; position:absolute; bottom:-2px; left:50%; width:0; height:1px; background:var(--a); transform:translateX(-50%); transition:width .3s }
  .nlinks a:hover::after, .nlinks a.act::after { width:100% }
  .nlinks a:hover, .nlinks a.act { background:transparent }
}

/* ── SHARED COMPONENTS ── */
.slabel { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--a) }
.slabel::before, .slabel::after { content:''; display:block; width:20px; height:1px; background:linear-gradient(90deg,var(--a),transparent) }
.slabel::after { background:linear-gradient(270deg,var(--a),transparent) }
.sh { font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:.02em }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; padding:14px 28px; border-radius:50px; border:none;
  position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s;
  -webkit-tap-highlight-color:transparent; cursor:pointer
}
.btn:active { transform:scale(.97) }
.btn-p { background:linear-gradient(135deg,#c87af5,#a855f7); color:#fff; box-shadow:0 6px 24px rgba(168,85,247,.38) }
.btn-p:hover { box-shadow:0 12px 36px rgba(168,85,247,.55); transform:translateY(-2px) }
.btn-g { background:transparent; color:var(--a); border:1px solid rgba(211,149,255,.35) }
.btn-g:hover { border-color:var(--a); background:var(--a-dim) }

.wrow { display:flex; align-items:center; gap:3px }
.wb { display:block; width:2.5px; background:var(--a); border-radius:2px; animation:wb var(--wd,1s) ease-in-out infinite alternate; animation-delay:var(--wdl,0s); opacity:var(--wo,.7) }
@keyframes wb { from { height:3px } to { height:var(--wh,24px) } }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1) }
.reveal.in { opacity:1; transform:translateY(0) }
@keyframes pIn { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }

/* ── FOOTER ── */
.sfooter { position:relative; z-index:1; border-top:1px solid var(--border); padding:clamp(32px,5vh,56px) clamp(20px,6vw,60px); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center }
.femb-row { display:flex; align-items:center; gap:10px }
.femb { width:28px; height:28px; opacity:.7 }
.fname { font-family:var(--serif); font-size:1rem; letter-spacing:.2em; color:var(--a); text-transform:uppercase; font-weight:400 }
.ftagline { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.flinks { display:flex; gap:18px; flex-wrap:wrap; justify-content:center }
.flinks a { font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s }
.flinks a:hover { color:var(--a) }
.fcopy { font-size:.58rem; color:rgba(155,109,184,.38); letter-spacing:.1em }
.divider { height:1px; margin:0 clamp(20px,6vw,60px); background:linear-gradient(90deg,transparent,var(--border),transparent) }

/* note particles */
.np { position:absolute; font-size:.9rem; color:rgba(211,149,255,.18); pointer-events:none; animation:nfloat linear infinite; user-select:none }
@keyframes nfloat { 0% { transform:translateY(0) rotate(0); opacity:.18 } 50% { opacity:.3 } 100% { transform:translateY(-100px) rotate(15deg); opacity:0 } }

/* page header */
.pheader { text-align:center; margin-bottom:44px }
.ptitle { font-size:clamp(1.9rem,6vw,3.8rem); margin-top:14px; margin-bottom:10px }
.psub { font-size:.85rem; color:var(--muted); max-width:380px; margin:0 auto; line-height:1.8; font-weight:300 }

/* ── FORMS ── */
.ff { margin-bottom:14px }
.fl { display:block; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:7px }
.fi { width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(211,149,255,.18); border-radius:10px; color:var(--text); font-family:var(--sans); font-size:.88rem; font-weight:300; padding:12px 14px; outline:none; resize:none; transition:border-color .25s,box-shadow .25s; -webkit-appearance:none; appearance:none }
.fi:focus { border-color:var(--a); box-shadow:0 0 0 3px rgba(211,149,255,.1) }
.fi::placeholder { color:rgba(155,109,184,.36) }
.fr2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:480px) { .fr2 { grid-template-columns:1fr } }
.fsub { width:100%; justify-content:center; margin-top:4px }
.ferr { display:none; margin-top:10px; font-size:.76rem; text-align:center; color:#ff8eb3 }
.cfwrap { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:clamp(20px,4vw,36px); position:relative; overflow:hidden }
.cfwrap::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 8%,var(--a) 50%,transparent 92%); opacity:.5 }
.tyc { width:70px; height:70px; border-radius:50%; background:var(--a-dim); border:1px solid rgba(211,149,255,.4); display:flex; align-items:center; justify-content:center }
.tyc svg { width:30px; height:30px; stroke:var(--a); fill:none; stroke-width:2 }
.tyt { font-family:var(--serif); font-size:2rem; font-weight:400 }
.tym { font-size:.85rem; color:var(--muted); line-height:1.9; max-width:280px; font-weight:300 }

/* ── MODAL ── */
.modal-bg { display:none; position:fixed; inset:0; z-index:500; align-items:center; justify-content:center; background:rgba(10,4,22,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.modal-bg.open { display:flex; animation:pIn .3s ease both }
.modal-inner { position:relative; width:min(98vw,1400px); height:min(96vh,1000px); background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column }
.modal-bar { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--border); flex-shrink:0 }
.modal-title { font-family:var(--serif); font-size:.88rem; font-weight:400; letter-spacing:.06em; color:var(--a) }
.modal-close { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.4rem; line-height:1; padding:4px 8px; border-radius:6px; transition:color .2s; -webkit-tap-highlight-color:transparent }
.modal-close:hover { color:var(--a) }
.modal-frame { flex:1; width:100%; border:none }

/* grid layout helpers */
.two-col { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(28px,5vw,70px); align-items:start }
@media (max-width:700px) { .two-col { grid-template-columns:1fr } }
.clhs h3 { font-family:var(--serif); font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:400; line-height:1.2; margin-bottom:14px }
.clhs p { font-size:.86rem; color:var(--dim); line-height:1.9; font-weight:300; margin-bottom:18px }
.cdet { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:.82rem; color:var(--dim) }
.dico { width:36px; height:36px; border-radius:9px; background:var(--a-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.dico svg { width:15px; height:15px; stroke:var(--a); fill:none; stroke-width:1.5 }
