/* The Professional Magician Club: shared stylesheet for product + checkout pages.
   Layout: dark stage ground, gold for action, violet for atmosphere. */
:root{
  --ink:#0E0B12; --panel:#17121D; --panel-2:#1C1623; --line:rgba(255,255,255,.08);
  --text:#F3EEF7; --soft:#CFC4DA; --muted:#A99DB6;
  --gold:#E2BF6A; --gold-deep:#C9A24A; --gold-hi:#F3D58C; --violet:#8B5CD6;
  --tape:#F2D23C; --tape-ink:#16120A;
  --display:'Fraunces',Georgia,serif; --body:'Inter Tight',system-ui,sans-serif; --type:'Special Elite','Courier New',monospace;
  color-scheme:dark;
}
html,body{background:var(--ink)}
[hidden]{display:none !important}
body{margin:0;color:var(--text);font-family:var(--body);font-size:18px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:100;background:var(--ink)}
*{box-sizing:border-box}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:italic;color:var(--gold)}
a{color:var(--gold)}a:hover{color:var(--gold-hi)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.lede{font-size:20px;color:var(--soft)}
.soft{color:var(--soft)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(14,11,18,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand b{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.05}
.brand small{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:#D9D0E2;text-decoration:none;font-size:15px;font-weight:500;padding:10px 4px}
.nav-links a:hover,.nav-links a.cur{color:var(--gold)}

/* buttons */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(110deg,#C9A24A 0%,#E9C977 45%,#C9A24A 60%,#B88F36 100%);background-size:220% 100%;color:#1A1320;font:700 16px var(--body);text-decoration:none;cursor:pointer;animation:shimmer 4.5s ease-in-out infinite;box-shadow:0 10px 30px -10px rgba(226,191,106,.55);transition:transform .2s ease}
.btn-gold:hover{color:#1A1320;transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid rgba(226,191,106,.45);color:var(--text);font-weight:600;font-size:16px;text-decoration:none;transition:background .25s ease,border-color .25s ease}
.btn-ghost:hover{background:rgba(226,191,106,.08);border-color:var(--gold);color:#fff}
@keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* motion */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  @keyframes reveal{from{opacity:.25;transform:translateY(40px)}to{opacity:1;transform:none}}
}

/* shared page parts */
.sec{padding-block:100px}
.sec-alt{background:#120E17;border-block:1px solid var(--line)}
.head{display:flex;flex-direction:column;gap:14px;max-width:780px}
.head h2{font-size:50px;line-height:1.08}
.page-hero{background:radial-gradient(ellipse 70% 80% at 80% 0%,#2A1940 0%,var(--ink) 65%)}
.page-hero .wrap{padding-block:90px 70px}
.page-hero h1{font-size:68px;line-height:1.04}
.tick{display:flex;flex-direction:column;gap:12px}
.tick li{display:flex;gap:12px;align-items:flex-start;color:#E4DCEC;font-size:17px}
.tick li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BF6A' stroke-width='2.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.box{padding:32px;border-radius:18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.box h3{font-size:26px}
.box p{color:var(--soft);font-size:17px}
.lift{transition:transform .3s ease,border-color .3s ease}
.lift:hover{transform:translateY(-6px);border-color:rgba(226,191,106,.5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.quote-card{margin:0;padding:30px;border-radius:18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.quote-card p{color:#E4DCEC;font-size:17px}
.quote-card footer{color:var(--muted);font-size:15px;border-top:1px solid var(--line);padding-top:12px}
.quote-card footer b{color:var(--text)}
.honest{border-radius:22px;padding:44px;border:1px dashed rgba(242,210,60,.45);background:rgba(242,210,60,.04);display:flex;flex-direction:column;gap:14px}
.honest .stamp{font-family:var(--type);color:var(--tape);font-size:15px;letter-spacing:.06em}
.cta-band{border-radius:28px;padding:72px 48px;text-align:center;background:radial-gradient(ellipse 70% 120% at 50% 0%,#4A2C72 0%,#1C1426 60%,#120E17 100%);border:1px solid rgba(226,191,106,.35);display:flex;flex-direction:column;gap:22px;align-items:center}
.cta-band h2{font-size:52px;line-height:1.06;max-width:820px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:12px 0;font:600 20px var(--display);color:var(--text)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--gold);font-size:28px;transition:transform .3s ease;flex:none}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{color:var(--soft);padding:0 0 24px;max-width:820px}
.heckle{position:relative;align-self:flex-start;max-width:640px;padding:18px 22px;border-radius:18px 18px 18px 4px;background:#2A2433;border:1px solid rgba(255,255,255,.1);color:#E4DCEC;font-style:italic}
.heckle::before{content:"FROM THE CHEAP SEATS";display:block;font-style:normal;font-family:var(--type);font-size:12px;color:var(--tape);letter-spacing:.08em;margin-bottom:6px}

/* client testimonial videos. Live site: click-to-load YouTube (privacy-enhanced), so no YouTube code loads until a visitor presses play */
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vid{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;border-radius:16px;overflow:hidden;padding:18px;text-decoration:none;color:var(--text);background:radial-gradient(ellipse 80% 90% at 30% 20%,#3A2357,#141019 75%);border:1px solid rgba(226,191,106,.3);transition:transform .3s ease,border-color .3s ease}
.vid:hover{transform:translateY(-6px);border-color:var(--gold);color:var(--text)}
.vid .play{position:absolute;left:50%;top:42%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(226,191,106,.5);animation:ring 2.4s ease-out infinite}
.vid .play::after{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #1A1320}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(226,191,106,.55)}100%{box-shadow:0 0 0 22px rgba(226,191,106,0)}}
.vid b{font-family:var(--display);font-size:20px;font-weight:600;position:relative}
.vid small{color:var(--soft);font-size:14px;position:relative}
@media (max-width:1100px){.vids{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vids{grid-template-columns:1fr}}

@media (max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}
@media (max-width:760px){
  .sec{padding-block:72px}
  .head h2{font-size:36px}
  .page-hero h1{font-size:44px}
  .cta-band{padding:40px 22px}
  .cta-band h2{font-size:36px}
  .honest{padding:28px 20px}
}

/* mobile menu: logo + close button only, big plain links */
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);cursor:pointer}
.mmenu{position:fixed;inset:0;z-index:60;background:var(--ink);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.mmenu .top{display:flex;justify-content:space-between;align-items:center;min-height:60px}
.mmenu .top button{width:48px;height:48px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);font-size:24px;cursor:pointer}
.mmenu a.big{font-family:var(--display);font-size:30px;color:var(--text);text-decoration:none;padding:10px 0}

/* sticky phone bar */
.mbar{display:none}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-block:48px 56px;background:#0B090E;color:var(--muted);font-size:15px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.site-foot nav a{color:var(--soft);text-decoration:none}
.site-foot nav a:hover{color:var(--gold)}

@media (max-width:760px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(14,11,18,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(226,191,106,.25)}
  .mbar a{flex:1;min-height:48px;padding:0 12px}
  .site-foot{padding-bottom:100px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}