
:root{--bg:#070707;--panel:#101010;--panel-2:#141414;--line:rgba(255,255,255,.09);--text:#F7F2E8;--muted:rgba(247,242,232,.72);--yellow:#FBEB78;--blue:#648DCB;--red:#DF3821;--green:#B9E185;--radius:28px;--shadow:0 30px 80px rgba(0,0,0,.45)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top left, rgba(100,141,203,.18), transparent 26%),radial-gradient(circle at 80% 15%, rgba(251,235,120,.14), transparent 22%),linear-gradient(180deg,#050505,#0b0b0b 35%,#070707)}.site-shell{max-width:1280px;margin:0 auto;padding:24px}.site-header{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-bottom:24px;border:1px solid var(--line);background:rgba(10,10,10,.7);backdrop-filter: blur(16px);border-radius:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:700}.brand img{width:40px;height:40px;object-fit:contain}.site-nav{display:flex;gap:24px}.site-nav a{color:var(--muted);text-decoration:none}.hero{min-height:86vh;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:40px 0 80px}.eyebrow{display:inline-flex;padding:10px 14px;border-radius:999px;border:1px solid rgba(251,235,120,.22);background:rgba(251,235,120,.08);font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--yellow)}h1{font-size:clamp(3.2rem,7vw,6rem);line-height:.96;margin:18px 0 16px}h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin:14px 0}.lead,.section-heading p,.offer-copy p,.buy-copy p{font-size:1.05rem;line-height:1.8;color:var(--muted);max-width:62ch}.hero-actions{display:flex;gap:14px;margin:28px 0 26px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent;transition:.25s ease}.btn-primary{background:var(--yellow);color:#111;box-shadow:0 12px 35px rgba(251,235,120,.25)}.btn-primary:hover{transform:translateY(-2px)}.btn-secondary{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.03)}.hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px}.meta-card,.vault-card,.offer,.buy-panel,.buy-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:var(--shadow)}.meta-card{padding:18px;border-radius:22px}.meta-card strong{display:block;margin-bottom:6px}.meta-card span{color:var(--muted);font-size:.95rem}.hero-art{position:relative;min-height:700px;display:flex;align-items:center;justify-content:center}.glass-panel{position:absolute;width:78%;height:72%;border-radius:40px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));backdrop-filter: blur(18px);transform:rotate(-10deg)}.cassette-main{position:relative;z-index:3;max-width:560px;width:100%;filter:drop-shadow(0 40px 80px rgba(0,0,0,.55))}.orb{position:absolute;border-radius:50%;filter:blur(16px);opacity:.9}.orb-yellow{width:220px;height:220px;background:rgba(251,235,120,.24);top:7%;right:10%}.orb-blue{width:180px;height:180px;background:rgba(100,141,203,.22);bottom:12%;left:10%}.floating-card{position:absolute;z-index:4;padding:14px 16px;border-radius:18px;background:rgba(9,9,9,.68);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);color:var(--text)}.card-a{top:18%;left:0}.card-b{right:0;bottom:18%}.inside,.offer,.buy{padding:72px 0}.section-heading{max-width:760px;margin-bottom:34px}.vault-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.vault-card{border-radius:26px;overflow:hidden}.vault-card img{display:block;width:100%;height:420px;object-fit:cover;background:#0b0b0b}.vault-card-copy{padding:22px}.vault-card h3{margin:0 0 10px;font-size:1.25rem}.vault-card p{margin:0;color:var(--muted);line-height:1.7}.offer{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;padding:34px;border-radius:32px}.offer-points{display:grid;gap:16px}.point{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}.point span{width:14px;height:14px;border-radius:50%;margin-top:8px;background:linear-gradient(135deg,var(--yellow),var(--blue))}.buy-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:34px;border-radius:32px}.buy-copy ul{padding-left:20px;color:var(--muted);line-height:2}.buy-card{padding:28px;border-radius:28px;display:flex;flex-direction:column;gap:16px;justify-content:center}.buy-logo{width:70px;height:70px;object-fit:contain}.price-tag{display:inline-flex;align-self:flex-start;padding:8px 12px;border-radius:999px;background:rgba(185,225,133,.12);color:var(--green);border:1px solid rgba(185,225,133,.18);font-weight:700}.price{font-size:2rem;font-weight:800}.full{width:100%}@media (max-width:980px){.hero,.offer,.buy-panel{grid-template-columns:1fr}.hero{padding-top:20px}.hero-art{order:-1;min-height:520px}.vault-grid{grid-template-columns:1fr}.hero-meta{grid-template-columns:1fr}.card-a,.card-b{display:none}}@media (max-width:640px){.site-shell{padding:16px}.site-header{padding:12px 14px}.site-nav{display:none}h1{font-size:2.8rem}.hero-art{min-height:380px}.vault-card img{height:320px}}

.hero-art{perspective:1400px;transform-style:preserve-3d}
.cassette-main{
  animation: cassetteFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform, filter;
  transition: transform .18s ease-out, filter .25s ease-out;
}
.hero-watermark{
  position:absolute; inset:auto 5% 8% auto; width:220px; opacity:.08; z-index:1;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
  animation: watermarkFloat 10s ease-in-out infinite;
}
.glass-panel{transition: transform .25s ease-out, opacity .25s ease-out;}
.floating-card{transition: transform .22s ease-out, background .25s ease, border-color .25s ease}
.hero-art::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(251,235,120,.20) 0%, rgba(100,141,203,.12) 35%, rgba(0,0,0,0) 70%);
  filter:blur(22px); z-index:0; pointer-events:none; left:50%; top:50%;
  transform:translate(-50%,-50%);
  transition: transform .18s ease-out, opacity .2s ease-out;
}
@keyframes cassetteFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(-1.2deg); }
  50% { transform: translate3d(0,-14px,0) rotate(1.2deg); }
}
@keyframes watermarkFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.point{transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease}
.point:hover{transform:translateY(-4px)}
.point-red:hover{
  background:rgba(223,56,33,.12);
  border-color:rgba(223,56,33,.45);
  box-shadow:0 20px 40px rgba(223,56,33,.12);
}
.point-blue:hover{
  background:rgba(100,141,203,.12);
  border-color:rgba(100,141,203,.45);
  box-shadow:0 20px 40px rgba(100,141,203,.12);
}
.point-green:hover{
  background:rgba(185,225,133,.12);
  border-color:rgba(185,225,133,.45);
  box-shadow:0 20px 40px rgba(185,225,133,.12);
}
.point-red:hover span{background:var(--red)}
.point-blue:hover span{background:var(--blue)}
.point-green:hover span{background:var(--green)}

.brand img{width:48px;height:48px}.title-yellow{color:var(--yellow)}.title-blue{color:var(--blue)}.title-red{color:var(--red)}.title-green{color:var(--green)}
.cassette-main{transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s cubic-bezier(.22,1,.36,1)}
.glass-panel,.floating-card,.hero-art::after{transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease}

.brand{gap:0}.brand span{display:none}.brand-logo{width:120px;height:auto;display:block}
.site-nav a{padding:10px 16px;border-radius:999px;border:1px solid transparent;transition:all .28s ease}
.site-nav .nav-inside:hover{color:#648DCB;background:rgba(100,141,203,.14);border-color:rgba(100,141,203,.35);box-shadow:0 0 0 1px rgba(100,141,203,.08) inset}
.site-nav .nav-offer:hover{color:#DF3821;background:rgba(223,56,33,.12);border-color:rgba(223,56,33,.32);box-shadow:0 0 0 1px rgba(223,56,33,.08) inset}
.site-nav .nav-buy:hover{color:#B9E185;background:rgba(185,225,133,.12);border-color:rgba(185,225,133,.32);box-shadow:0 0 0 1px rgba(185,225,133,.08) inset}
.hero-art{perspective:1400px;transform-style:preserve-3d}
.cassette-main{transition:none !important;will-change:transform,filter}
.glass-panel,.floating-card{will-change:transform}


.brand-logo{filter:none !important; opacity:1 !important}
.motion-title{
  display:inline-block;
  will-change: transform;
  transition: transform .18s ease-out, text-shadow .25s ease-out;
}

.motion-group{will-change:transform; transition:transform .18s ease-out}

.cassette-main{transform-style:preserve-3d;backface-visibility:hidden}
.motion-title,.lead,.eyebrow{will-change:transform}
/* ===== Cassette deck-insertion mechanic (scroll-scrubbed) ===== */
.vault-grid{perspective:2000px;align-items:stretch}
.vault-card.insert-card{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  --seat:0;
  --dir:0;
}
.vault-card.insert-card:nth-child(1){--dir:-1}
.vault-card.insert-card:nth-child(2){--dir:0}
.vault-card.insert-card:nth-child(3){--dir:1}

/* the deck slot the cassette drops into */
.vault-card.insert-card::before{
  content:"";
  position:absolute; top:-14px; left:10%; right:10%; height:5px; border-radius:6px;
  background:linear-gradient(90deg, transparent, rgba(251,235,120,.85), transparent);
  opacity:var(--seat);
  box-shadow:0 0 22px 4px rgba(251,235,120,.45);
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:2;
}

.cassette-led{
  position:absolute; top:14px; right:18px; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.14);
  box-shadow:none;
  z-index:5;
  transition:background .35s ease, box-shadow .35s ease;
}
.vault-card.insert-card.is-seated .cassette-led{
  background:var(--green);
  box-shadow:0 0 10px 3px rgba(185,225,133,.65);
}

.vault-card.insert-card img{
  display:block;
  will-change:transform, filter, opacity;
  transform:
    translate3d(calc((1 - var(--seat)) * 90px * var(--dir)), calc((1 - var(--seat)) * 130px), calc((1 - var(--seat)) * -220px))
    rotateZ(calc((1 - var(--seat)) * 9deg * var(--dir)))
    rotateX(calc((1 - var(--seat)) * 24deg))
    scale(calc(.88 + var(--seat) * .12));
  opacity:calc(.1 + var(--seat) * .9);
  filter:drop-shadow(0 calc(10px + (1 - var(--seat)) * 26px) calc(18px + (1 - var(--seat)) * 40px) rgba(0,0,0, calc(.22 + (1 - var(--seat)) * .2)));
}

.vault-card.insert-card.is-seated img{
  transition:transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.vault-card.insert-card.is-seated:hover img{
  transform:translate3d(12px,-8px,0) rotateY(7deg) scale(1.03);
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.32));
}

.vault-card-copy{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease .05s, transform .5s cubic-bezier(.16,1,.3,1) .05s;
}
.vault-card.insert-card.is-seated .vault-card-copy{
  opacity:1;
  transform:translateY(0);
}

.vault-card.insert-card::after{content:"";position:absolute;top:10%;bottom:10%;width:16%;right:10%;border-radius:14px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));opacity:0;transform:translateX(-24px);transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .35s ease;pointer-events:none}
.vault-card.insert-card.is-seated:hover::after{opacity:1;transform:translateX(10px)}

/* ===== Custom text cursor ===== */
body.has-custom-cursor,
body.has-custom-cursor *{cursor:none !important}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .25s ease}
.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px rgba(251,235,120,.5)}
.cursor-ring{width:42px;height:42px;border-radius:50%;border:1px solid rgba(247,242,232,.45);display:flex;align-items:center;justify-content:center;transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,background .3s ease,opacity .25s ease}
.cursor-ring span{opacity:0;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:opacity .2s ease}
.cursor-dot.is-visible,.cursor-ring.is-visible{opacity:1}
.cursor-ring.is-active{width:80px;height:80px;background:rgba(251,235,120,.08);border-color:rgba(251,235,120,.55)}
.cursor-ring.is-active span{opacity:1}
@media (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none}
  body.has-custom-cursor,body.has-custom-cursor *{cursor:auto !important}
}
