/* ── RESET & TOKENS ── */
:root {
  --bg:    #07080f;
  --bg2:   #0d0f1a;
  --gold:  #c9a84c;
  --gsoft: #e8cc80;
  --gdim:  rgba(201,168,76,0.13);
  --sw:    #f0eee8;
  --tm:    #e8e4d8;
  --tmut:  rgba(232,228,216,0.45);
  --tdim:  rgba(232,228,216,0.22);
  --tbor:  rgba(201,168,76,0.15);
  --r:     14px;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--tm); font-family:var(--font-body); font-weight:300; }

/* ── SKY ── */
#sky { position:fixed; inset:0; cursor:crosshair; overflow:hidden; user-select:none; }
#bg-canvas { position:absolute; inset:0; width:100%; height:100%; }
#star-layer { position:absolute; inset:0; width:100%; height:100%; transform-origin:center center; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 44px;
  background:linear-gradient(to bottom, rgba(7,8,15,0.88) 0%, transparent 100%);
  pointer-events:none;
}
nav > * { pointer-events:all; }
.logo {
  font-family:var(--font-display); font-size:20px; font-weight:300;
  letter-spacing:0.14em; color:var(--gsoft);
  display:flex; align-items:center; gap:9px; cursor:pointer;
  text-decoration:none;
}
.logo-dot {
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold), 0 0 18px rgba(201,168,76,0.4);
  animation:pulseDot 3s ease-in-out infinite; flex-shrink:0;
}
.nav-links { display:flex; gap:6px; align-items:center; }
.nav-tab {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--tmut); background:transparent; border:none;
  padding:7px 14px; border-radius:30px; cursor:pointer;
  transition:color .25s, background .25s; font-family:var(--font-body);
}
.nav-tab:hover { color:var(--gsoft); background:rgba(201,168,76,0.07); }
.nav-tab.active { color:var(--gsoft); background:var(--gdim); }
.nav-sep { width:.5px; height:14px; background:var(--tbor); margin:0 4px; }
.nav-cta {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gsoft); background:transparent;
  border:.5px solid var(--gold); padding:7px 18px; border-radius:30px;
  cursor:pointer; transition:background .25s; font-family:var(--font-body);
}
.nav-cta:hover { background:var(--gdim); }

/* ── HERO TEXT (bottom-left overlay) ── */
#hero-text {
  position:fixed; bottom:72px; left:44px; z-index:10;
  pointer-events:none;
  opacity:0; animation:fadeUp 1.2s ease 0.6s forwards;
}
#hero-text h1 {
  font-family:var(--font-display); font-size:clamp(34px,4.5vw,54px);
  font-weight:300; line-height:1.06; color:var(--sw);
  text-shadow:0 2px 40px rgba(7,8,15,0.9);
}
#hero-text h1 em { font-style:italic; color:var(--gsoft); }
#hero-text p { font-size:12px; font-weight:200; letter-spacing:0.1em; color:var(--tmut); margin-top:9px; text-shadow:0 1px 12px rgba(7,8,15,0.95); }
.hero-hint {
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin-top:16px;
  display:flex; align-items:center; gap:8px;
}
.hero-hint::before { content:''; display:inline-block; width:16px; height:.5px; background:var(--gold); }

/* ── STAR COUNT ── */
#star-badge {
  position:fixed; top:68px; left:50%; transform:translateX(-50%);
  z-index:10; font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--tmut); opacity:0; animation:fadeIn 1.5s ease 1.6s forwards;
  text-shadow:0 1px 8px rgba(7,8,15,0.95); white-space:nowrap;
}
#star-badge span { color:var(--gsoft); font-family:var(--font-display); font-size:13px; }

/* ── ZOOM CONTROLS ── */
#zoom-controls {
  position:fixed; bottom:32px; right:36px; z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  opacity:0; animation:fadeIn 1s ease 1.8s forwards;
}
.zoom-btn {
  width:32px; height:32px; border-radius:50%;
  background:rgba(13,15,26,0.78); border:.5px solid var(--tbor);
  color:var(--tmut); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; backdrop-filter:blur(6px);
  font-family:var(--font-body);
}
.zoom-btn:hover { border-color:var(--gold); color:var(--gsoft); }
#zoom-label { font-size:10px; letter-spacing:0.1em; color:var(--tdim); }

/* ── STARS ── */
.star { position:absolute; border-radius:50%; cursor:pointer; transform:translate(-50%,-50%); will-change:transform,opacity; }
.star:hover .star-tip { opacity:1; transform:translateX(-50%) translateY(-6px); }
.star-tip {
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(0);
  background:rgba(9,10,19,0.95); border:.5px solid var(--tbor);
  border-radius:10px; padding:10px 14px; white-space:nowrap;
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:50;
}
.stt-name { font-family:var(--font-display); font-size:15px; color:var(--gsoft); }
.stt-to   { font-size:11px; color:var(--tmut); margin-top:2px; letter-spacing:.05em; }
.stt-msg  { font-size:12px; color:rgba(232,228,216,.7); margin-top:5px; font-style:italic; max-width:200px; white-space:normal; }

/* ── INFO PAGES (slide from right) ── */
#info-overlay {
  position:fixed; inset:0; z-index:150;
  pointer-events:none; overflow:hidden;
}
#info-page {
  position:absolute; top:0; right:0; bottom:0; width:min(620px,100vw);
  background:rgba(9,10,19,0.97); border-left:.5px solid var(--tbor);
  backdrop-filter:blur(28px);
  transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1);
  overflow-y:auto; pointer-events:none;
}
#info-page.open { transform:translateX(0); pointer-events:all; }
#info-overlay.open { pointer-events:all; }
.info-close {
  position:sticky; top:0; right:0;
  display:flex; justify-content:flex-end; padding:20px 28px 0;
  background:rgba(9,10,19,0.6); backdrop-filter:blur(8px); z-index:5;
}
.info-close button {
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:.5px solid var(--tbor);
  color:var(--tmut); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
  font-family:var(--font-body);
}
.info-close button:hover { border-color:var(--gold); color:var(--gsoft); }
.info-content { padding:10px 48px 72px; }
.info-label {
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.info-h1 {
  font-family:var(--font-display); font-size:clamp(32px,5vw,52px);
  font-weight:300; line-height:1.08; color:var(--sw); margin-bottom:18px;
}
.info-h1 em { font-style:italic; color:var(--gsoft); }
.info-lead { font-size:15px; font-weight:200; color:var(--tmut); line-height:1.8; margin-bottom:44px; }
.info-section { margin-bottom:48px; }
.info-section h3 { font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--sw); margin-bottom:10px; }
.info-section p  { font-size:14px; color:var(--tmut); line-height:1.78; }
.info-divider { width:40px; height:.5px; background:var(--tbor); margin:0 0 20px; }

/* Steps */
.steps { display:flex; flex-direction:column; gap:32px; margin-bottom:20px; }
.step { display:flex; gap:20px; }
.step-num { font-family:var(--font-display); font-size:48px; font-weight:300; color:var(--tbor); line-height:1; flex-shrink:0; width:48px; }
.step-body h4 { font-size:15px; letter-spacing:.04em; color:var(--tm); margin-bottom:7px; }
.step-body p  { font-size:13px; color:var(--tmut); line-height:1.7; }

/* Tier cards in info page */
.tier-cards { display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.tier-info-card {
  border:.5px solid var(--tbor); border-radius:12px; padding:22px 24px;
  transition:border-color .25s;
}
.tier-info-card:hover { border-color:rgba(201,168,76,.35); }
.tier-info-card.feat { border-color:var(--gold); background:var(--gdim); }
.tic-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.tic-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tic-name { font-family:var(--font-display); font-size:18px; color:var(--sw); }
.tic-price { font-family:var(--font-display); font-size:22px; color:var(--gsoft); margin-left:auto; }
.tic-desc { font-size:13px; color:var(--tmut); line-height:1.65; }
.feat-badge {
  display:inline-block; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:#07080f; padding:2px 9px; border-radius:20px; margin-bottom:10px;
}

/* Certificate preview in info page */
.cert-preview-box {
  border:.5px solid var(--tbor); border-radius:var(--r); padding:36px 40px;
  background:rgba(13,15,26,0.5); position:relative; overflow:hidden; margin-top:8px;
}
.cert-preview-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.cpb-logo { font-family:var(--font-display); font-size:12px; letter-spacing:0.2em; color:var(--gold); margin-bottom:24px; display:flex; align-items:center; gap:7px; }
.cpb-eyebrow { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--tdim); margin-bottom:10px; }
.cpb-name { font-family:var(--font-display); font-size:32px; font-weight:300; color:var(--sw); margin-bottom:5px; }
.cpb-to   { font-size:12px; color:var(--tmut); margin-bottom:20px; }
.cpb-msg  { font-family:var(--font-display); font-size:16px; font-style:italic; color:rgba(232,228,216,.55); border-left:.5px solid var(--tbor); padding-left:14px; margin-bottom:24px; line-height:1.6; }
.cpb-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-top:.5px solid var(--tbor); padding-top:16px; }
.cpb-meta-item label { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--tdim); display:block; margin-bottom:3px; }
.cpb-meta-item span  { font-family:var(--font-display); font-size:12px; color:var(--tmut); }

/* Legal pages */
.legal-block { margin-bottom:32px; }
.legal-block h3 { font-family:var(--font-display); font-size:18px; color:var(--sw); margin-bottom:8px; }
.legal-block p, .legal-block li { font-size:13px; color:var(--tmut); line-height:1.75; }
.legal-block ul { padding-left:20px; }

/* Contact */
.contact-links { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.contact-link {
  display:flex; align-items:center; gap:12px;
  border:.5px solid var(--tbor); border-radius:10px; padding:14px 18px;
  text-decoration:none; transition:border-color .2s;
}
.contact-link:hover { border-color:rgba(201,168,76,.35); }
.contact-link span { font-size:13px; color:var(--tmut); }
.contact-link strong { font-size:14px; color:var(--tm); display:block; }

/* Footer in info page */
.info-footer {
  border-top:.5px solid var(--tbor); padding-top:32px; margin-top:48px;
  display:flex; gap:16px; flex-wrap:wrap;
}
.info-footer button {
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--tdim); background:transparent; border:none; cursor:pointer;
  font-family:var(--font-body); transition:color .2s;
}
.info-footer button:hover { color:var(--tmut); }

/* ── DEDICA PANEL ── */
#panel {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(102%);
  z-index:220; width:min(500px,96vw);
  background:rgba(9,10,19,0.97); border:.5px solid var(--tbor);
  border-bottom:none; border-radius:var(--r) var(--r) 0 0;
  padding:26px 32px 32px;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  backdrop-filter:blur(28px);
}
#panel.open { transform:translateX(-50%) translateY(0); }
.ph { width:32px; height:3px; border-radius:2px; background:var(--tbor); margin:0 auto 22px; cursor:pointer; }
.ptitle { font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--sw); margin-bottom:3px; }
.psub   { font-size:11px; color:var(--tmut); margin-bottom:18px; letter-spacing:.04em; }

.tier-row { display:flex; gap:7px; margin-bottom:16px; }
.tc {
  flex:1; border:.5px solid var(--tbor); border-radius:9px; padding:11px 6px;
  cursor:pointer; transition:all .2s; text-align:center; background:transparent;
}
.tc:hover { border-color:rgba(201,168,76,.35); }
.tc.on { border-color:var(--gold); background:var(--gdim); }
.tdot { width:8px; height:8px; border-radius:50%; margin:0 auto 6px; }
.tname  { font-size:11px; color:var(--tm); margin-bottom:1px; letter-spacing:.04em; }
.tprice { font-family:var(--font-display); font-size:17px; color:var(--gsoft); }

.fields { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.field label {
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tmut); display:block; margin-bottom:4px;
}
.field input, .field textarea {
  width:100%; background:rgba(255,255,255,.04);
  border:.5px solid rgba(232,228,216,.1); border-radius:8px;
  padding:10px 13px; color:var(--tm);
  font-family:var(--font-body); font-size:14px; font-weight:300;
  transition:border-color .2s; outline:none; resize:none;
}
.field input:focus, .field textarea:focus { border-color:rgba(201,168,76,.45); }
.field input::placeholder, .field textarea::placeholder { color:var(--tdim); }

.btn-main {
  width:100%; padding:13px; background:var(--gold); border:none; border-radius:28px;
  font-family:var(--font-body); font-size:11px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:#07080f;
  cursor:pointer; transition:all .3s;
}
.btn-main:hover { background:var(--gsoft); }
.btn-main:disabled { opacity:.45; cursor:not-allowed; }
#panel-status { font-size:11px; color:var(--tmut); text-align:center; margin-top:8px; min-height:15px; }

/* ── SUCCESS ── */
#success {
  position:fixed; inset:0; z-index:300;
  background:rgba(7,8,15,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s;
  backdrop-filter:blur(10px);
}
#success.show { opacity:1; pointer-events:all; }
.succ-dot {
  width:14px; height:14px; border-radius:50%; background:var(--gsoft);
  box-shadow:0 0 20px var(--gold), 0 0 40px rgba(201,168,76,.35);
  margin-bottom:28px; animation:pulseDot 2.2s ease-in-out infinite;
}
.succ-title { font-family:var(--font-display); font-size:38px; font-weight:300; color:var(--sw); margin-bottom:8px; text-align:center; }
.succ-sub   { font-size:13px; color:var(--tmut); text-align:center; margin-bottom:28px; letter-spacing:.04em; }
.succ-serial { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tdim); margin-bottom:28px; }
.succ-serial span { color:var(--gold); font-family:var(--font-display); font-size:13px; }
.succ-actions { display:flex; gap:10px; }
.btn-cert {
  background:var(--gold); border:none; border-radius:28px;
  font-family:var(--font-body); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:#07080f;
  padding:12px 26px; cursor:pointer; transition:all .3s;
}
.btn-cert:hover { background:var(--gsoft); }
.btn-close-succ {
  background:transparent; border:.5px solid rgba(232,228,216,.2); border-radius:28px;
  font-family:var(--font-body); font-size:11px; font-weight:300;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tmut);
  padding:12px 26px; cursor:pointer; transition:all .3s;
}
.btn-close-succ:hover { border-color:var(--tmut); color:var(--tm); }

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes pulseDot{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.6} }

@keyframes drift {
  0%,100% { translate:0 0 }
  33%     { translate:var(--dx1) var(--dy1) }
  66%     { translate:var(--dx2) var(--dy2) }
}
@keyframes pulse {
  0%,100% { opacity:var(--pmin); transform:translate(-50%,-50%) scale(var(--smin)) }
  50%     { opacity:1;           transform:translate(-50%,-50%) scale(var(--smax)) }
}
@keyframes shimmer {
  0%   { filter:brightness(1)    blur(0px)   saturate(1)   }
  7%   { filter:brightness(1.65) blur(.4px)  saturate(1.4) }
  14%  { filter:brightness(.82)  blur(0px)   saturate(.88) }
  22%  { filter:brightness(1.35) blur(.35px) saturate(1.25)}
  30%  { filter:brightness(1)    blur(0px)   saturate(1)   }
  41%  { filter:brightness(.88)  blur(.2px)  saturate(.93) }
  54%  { filter:brightness(1.55) blur(.5px)  saturate(1.3) }
  62%  { filter:brightness(1)    blur(0px)   saturate(1)   }
  75%  { filter:brightness(1.22) blur(.3px)  saturate(1.12)}
  89%  { filter:brightness(.78)  blur(0px)   saturate(.88) }
  100% { filter:brightness(1)    blur(0px)   saturate(1)   }
}
@keyframes diamond {
  0%,100% { clip-path:polygon(50% 0%,52% 48%,100% 50%,52% 52%,50% 100%,48% 52%,0% 50%,48% 48%); opacity:0  }
  50%     { clip-path:polygon(50% 18%,53% 46%,82% 50%,53% 54%,50% 82%,47% 54%,18% 50%,47% 46%); opacity:.5 }
}