/* =====================================================================
   TOCB shared design system: calm, layered near-black, cyan as a sparing accent.
   Used by index.html, products.html and wallpapers.html so the header,
   buttons, labels and motion are identical everywhere.
   ===================================================================== */
:root{
  --bg:#0a0a0b; --bg-2:#111113;
  --surface:rgba(255,255,255,0.04); --surface-2:rgba(255,255,255,0.065);
  --hair:rgba(255,255,255,0.09); --hair-2:rgba(255,255,255,0.17);
  --ink:#f5f4f0; --ink-dim:#a9a7a0; --ink-faint:#8b8982;
  --cyan:#7ec8e8; --cyan-ink:#0b2430; --price:#1fb866;
  --r:20px; --r-sm:14px;
  --f-display:'Archivo','Arial Black',sans-serif;
  --f-body:'Inter',-apple-system,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --sec-y:clamp(44px,7vw,92px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; background:var(--bg)}
body{margin:0; color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; background:transparent}
/* depth: a faint cyan glow at the top and a violet whisper lower down, on near-black */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(126,200,232,0.11), transparent 70%),
    radial-gradient(760px 480px at 90% 38%, rgba(125,110,255,0.045), transparent 70%),
    linear-gradient(180deg,#0a0a0b,#0c0c0e 60%,#0a0a0b)}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:900; margin:0; letter-spacing:-0.02em; line-height:1.05; text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px}

/* ---------- announcement: a quiet line, not a coloured strip ---------- */
.announce{display:block; padding:10px 16px; border-bottom:1px solid var(--hair); font-size:0.78rem; line-height:1.5; color:var(--ink-dim); text-align:center; text-wrap:balance}
.announce::before{content:""; display:inline-block; vertical-align:middle; width:6px; height:6px; margin:-2px 10px 0 0; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px rgba(126,200,232,0.16)}
.announce b{color:var(--ink); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; font-size:0.68rem; margin-right:8px}

/* ---------- identity: avatar, name, one-line bio, socials ---------- */
.site-head{padding:30px 16px 0; text-align:center}
.id{display:flex; flex-direction:column; align-items:center; gap:10px; max-width:560px; margin:0 auto}
.avatar-link{display:block; border-radius:50%}
.avatar{width:80px; height:80px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--hair-2), 0 0 0 6px rgba(255,255,255,0.035), 0 18px 34px -12px rgba(0,0,0,0.85)}
.brand{display:block; margin-top:4px}
.brand svg{display:block; height:28px; width:auto}
.bio{font-size:0.95rem; color:var(--ink-dim); text-wrap:balance}
.socials{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; margin-top:6px}
.socials a{display:inline-flex; align-items:center; gap:6px; color:var(--ink-faint); font-size:0.75rem; font-weight:600; letter-spacing:0.02em; line-height:1; padding:6px 0; transition:color .16s ease}
.socials svg{width:15px; height:15px; display:block; flex:none}
.socials a:focus-visible,.brand:focus-visible,.avatar-link:focus-visible,.nav a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ---------- navigation: a floating glass segmented control ---------- */
.nav{position:sticky; top:12px; z-index:60; margin:20px auto 0; width:min(560px,calc(100% - 28px)); display:flex; justify-content:space-between; gap:2px; padding:5px 9px; border-radius:999px; background:rgba(22,22,25,0.62); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid var(--hair-2); box-shadow:0 14px 34px -16px rgba(0,0,0,0.9)}
.nav a{display:flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:40px; padding:0 13px; border-radius:999px; font-size:0.84rem; font-weight:600; color:var(--ink-dim); white-space:nowrap; transition:color .16s ease, background-color .16s ease}
.nav a[aria-current="page"]{color:var(--ink); background:rgba(255,255,255,0.1)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--ink)} .socials a:hover{color:var(--ink)} }
@media (max-width:420px){ .nav{padding:5px 6px} .nav a{font-size:0.8rem; padding:0 8px} }
/* desktop: a bigger, easier-to-read bar */
@media (min-width:760px){
  .nav{width:min(680px,calc(100% - 40px)); padding:7px 16px}
  .nav a{font-size:1rem; min-height:48px; padding:0 24px}
}

/* ---------- buttons: cyan only for the one main action; everything else outlined ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 26px; border-radius:999px; font-family:var(--f-body); font-weight:700; font-size:0.93rem; line-height:1.2; text-align:center; border:1px solid transparent; cursor:pointer; transition:transform .16s var(--ease-out), border-color .16s ease, color .16s ease, background-color .16s ease}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.btn-buy,.btn-primary{background:var(--cyan); color:var(--cyan-ink); border-color:var(--cyan)}
.btn-ghost{border-color:var(--hair-2); color:var(--ink); background:transparent}
.btn:active{transform:scale(0.97); transition-duration:.1s}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-ghost:hover{border-color:rgba(126,200,232,0.7); color:var(--cyan)}
}
.actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}

/* ---------- labels: one quiet style ---------- */
.pill{display:inline-block; box-sizing:border-box; font-family:var(--f-body); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; line-height:1.2; padding:7px 14px; border:1px solid rgba(126,200,232,0.3); border-radius:999px; text-transform:uppercase; background:rgba(126,200,232,0.12); color:var(--cyan)}
.kicker{display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px}

/* ---------- surfaces ---------- */
.glass{background:linear-gradient(180deg,rgba(255,255,255,0.058),rgba(255,255,255,0.024)); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 28px 56px -34px rgba(0,0,0,0.95)}
.sec-head{text-align:center; margin-bottom:clamp(22px,4vw,34px)}
.sec-head h2{font-size:clamp(1.75rem,4.4vw,2.7rem)}
.sec-head .sub{max-width:52ch; margin:12px auto 0; color:var(--ink-dim); line-height:1.65}

/* ---------- motion: one gentle rise-in per block, soft lifts. transform + opacity only ---------- */
/* Smoothness notes: layers are promoted only while they move (will-change is dropped by site.js once the rise
   ends), the rise is short and shallow so blurred glass never re-rasterises over a long distance, and hover lifts
   are 3px so big glass cards don't visibly shimmer. */
html{scroll-behavior:smooth; scroll-padding-top:84px}
.js [data-reveal]{opacity:0; will-change:transform,opacity}
.js [data-reveal].in{opacity:1; animation:rise .55s var(--ease-out) backwards; animation-delay:calc(var(--i,0) * 60ms)}
.js [data-reveal].in.done{will-change:auto}
@keyframes rise{from{opacity:0; transform:translate3d(0,12px,0)}}
@keyframes fade{from{opacity:0}}
.lift{transition:transform .2s var(--ease-out), border-color .2s ease; backface-visibility:hidden}
@media (hover:hover) and (pointer:fine){ .lift:hover{transform:translate3d(0,-3px,0); border-color:var(--hair-2)} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal].in{animation:fade .25s ease backwards; animation-delay:0s}
  .btn,.lift{transition:none}
  .btn:hover,.btn:active,.lift:hover{transform:none}
}

/* ---------- finishing touches ---------- */
html{-webkit-tap-highlight-color:transparent; text-rendering:optimizeLegibility; scrollbar-color:rgba(255,255,255,0.2) transparent}
::selection{background:rgba(126,200,232,0.3); color:#fff}
/* small icons on buttons: an arrow when a button leaves the site, an envelope on email buttons */
.btn[target="_blank"]::after,.btn[href^="mailto:"]::before{content:""; flex:none; width:0.9em; height:0.9em; background:currentColor; opacity:0.85; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain}
.btn[target="_blank"]::after{margin-left:0.5em; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")}
.btn[href^="mailto:"]::before{margin-right:0.55em; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E")}
/* ---------- apple-style glass: strong blur, a bright top edge, and soft colour behind so the blur is visible ---------- */
.glass-pro{position:relative; background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 38%,rgba(255,255,255,0.09) 100%); -webkit-backdrop-filter:blur(30px) saturate(1.7); backdrop-filter:blur(30px) saturate(1.7); border:1px solid rgba(255,255,255,0.17); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(255,255,255,0.05), 0 38px 72px -34px rgba(0,0,0,0.95)}
.orbs{position:relative}
.orbs::before,.orbs::after{content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(48px); pointer-events:none}
/* neon badge for the GTA VI inspired pack: the hot pink and electric violet of the pack's own artwork. Words only, no logo. */
.pill.pill-neon,.featured__badge.pill-neon{color:#ffd9f4; background:linear-gradient(90deg,rgba(255,60,172,0.24),rgba(125,80,255,0.28)); border:1px solid rgba(255,105,195,0.6); text-shadow:0 0 10px rgba(255,85,190,0.75); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 0 22px -4px rgba(255,60,172,0.6), 0 0 42px -10px rgba(130,90,255,0.55)}
/* ---------- money = green glass: every button that takes payment ---------- */
.btn.btn-buy.btn-pay,.btn.btn-pay{color:#dcffec; background:linear-gradient(180deg,rgba(61,220,132,0.36),rgba(31,184,102,0.18)); border:1px solid rgba(61,220,132,0.58); -webkit-backdrop-filter:blur(14px) saturate(1.7); backdrop-filter:blur(14px) saturate(1.7); text-shadow:0 1px 12px rgba(61,220,132,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2), 0 12px 28px -12px rgba(61,220,132,0.6)}
@media (hover:hover) and (pointer:fine){ .btn.btn-buy.btn-pay:hover,.btn.btn-pay:hover{background:linear-gradient(180deg,rgba(61,220,132,0.5),rgba(31,184,102,0.28)); border-color:rgba(61,220,132,0.85); box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.2), 0 16px 34px -12px rgba(61,220,132,0.75)} }

/* ---------- lifetime offer: a compact green-glass link in the announcement bar ---------- */
.announce .announce__cta{display:inline-flex; align-items:center; margin-left:12px; padding:5px 13px; border-radius:999px; font-size:0.72rem; font-weight:700; line-height:1.2; letter-spacing:0.01em; white-space:nowrap; color:#dcffec; background:linear-gradient(180deg,rgba(61,220,132,0.36),rgba(31,184,102,0.18)); border:1px solid rgba(61,220,132,0.58); -webkit-backdrop-filter:blur(12px) saturate(1.7); backdrop-filter:blur(12px) saturate(1.7); text-shadow:0 1px 10px rgba(61,220,132,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 18px -10px rgba(61,220,132,0.6); transition:background-color .16s ease, border-color .16s ease}
@media (hover:hover) and (pointer:fine){ .announce .announce__cta:hover{border-color:rgba(61,220,132,0.9); background:linear-gradient(180deg,rgba(61,220,132,0.5),rgba(31,184,102,0.28))} }
.announce .announce__cta:focus-visible{outline:2px solid #3ddc84; outline-offset:3px}
@media (max-width:640px){ .announce .announce__cta{display:flex; width:max-content; margin:8px auto 0} }

/* ---------- top nav: deeper Apple-style glass with a glowing current tab ---------- */
.site-head{position:relative}
.site-head::before{content:""; position:absolute; left:50%; bottom:-40px; width:min(520px,90%); height:150px; transform:translateX(-50%); z-index:-1; pointer-events:none; filter:blur(34px); background:radial-gradient(ellipse at center,rgba(126,200,232,0.34),rgba(130,110,255,0.2) 52%,transparent 74%)}
nav.nav{background:linear-gradient(180deg,rgba(255,255,255,0.15),rgba(255,255,255,0.05)),rgba(24,24,29,0.5); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8); border:1px solid rgba(255,255,255,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(255,255,255,0.05), 0 18px 40px -18px rgba(0,0,0,0.9)}
nav.nav a[aria-current="page"]{color:#eaf7ff; background:linear-gradient(180deg,rgba(126,200,232,0.34),rgba(126,200,232,0.14)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), 0 0 20px -4px rgba(126,200,232,0.55)}
/* ---------- finishing: calmer rhythm, tighter type, one signature detail (a slow light sweep over glass on hover) ---------- */
.kicker{font-size:0.68rem; letter-spacing:0.28em; opacity:0.9}
.sec-head h2{letter-spacing:-0.028em}
.price-now,.price-was,.pack__price-now,.pack__price-was,.fullprice{font-variant-numeric:tabular-nums lining-nums}
.tile.glass,.guide.glass,.slim.glass{position:relative}
.tile.glass::after,.guide.glass::after,.slim.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.075) 50%,transparent 62%); background-size:260% 100%; background-position:130% 0; opacity:0; transition:opacity .3s ease}
@media (hover:hover) and (pointer:fine){
  .tile.glass:hover::after,.guide.glass:hover::after,.slim.glass:hover::after{opacity:1; background-position:-30% 0; transition:opacity .2s ease, background-position 1.1s var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){ .tile.glass::after,.guide.glass::after,.slim.glass::after{display:none} }
/* five-button nav: on narrow phones 'Promo Links' shortens to 'Links' so everything fits */
@media (max-width:480px){ .nav .nl{display:none} nav.nav{padding:5px 4px} .nav a{padding:0 9px; font-size:0.8rem} }