/* Fortune Pulls — shared site design (index, catalog, sets, contact).
   Page-specific styles stay inline in each page; anything every page
   uses (tokens, header, footer, buttons, headings, panels, forms) lives here. */
:root{
  --ink:#07080F; --ink-2:#0B0E17; --panel:#11151F; --panel-2:#171C2A; --line:#232A3D; --line-2:#323C57;
  --text:#EAEEF7; --muted:#8791A8;
  --violet:#9B7BFF; --cyan:#35E0D8; --pink:#F062C7; --gold:#F5C542; --danger:#F0637E;
  --holo:linear-gradient(100deg,#35E0D8,#7C6CF6 34%,#F062C7 66%,#F5C542);
  /* seamless version for animated fills: ends where it starts, so sliding it never shows a seam */
  --holo-loop:linear-gradient(90deg,#35E0D8,#7C6CF6 17%,#F062C7 33%,#F5C542 50%,#F062C7 67%,#7C6CF6 83%,#35E0D8);
  --maxw:1200px; --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  color:var(--text); font-family:"Sora",system-ui,sans-serif; font-size:16px; line-height:1.65;
  background:
    radial-gradient(120% 70% at 50% -10%, #1a1440 0%, rgba(26,20,64,0) 55%),
    radial-gradient(60% 40% at 100% 30%, rgba(53,224,216,.07), transparent 70%),
    var(--ink);
  min-height:100vh; overflow-x:hidden;
  /* short pages: main grows so the footer sits at the bottom of the screen */
  display:flex; flex-direction:column;
}
main{flex:1 0 auto}
/* faint tech grid + starfield behind everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(124,108,246,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,108,246,.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(245,197,66,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(155,123,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 64%, rgba(234,238,247,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 82%, rgba(53,224,216,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 72%, rgba(245,197,66,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 36%, rgba(234,238,247,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 58%, rgba(240,98,199,.45) 50%, transparent 51%);
}
header, main, footer{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(7,8,15,.72);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(50,60,87,.55);
}
header::after{ /* holo hairline */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--holo); opacity:.45;
}
.header-inner{display:flex; align-items:center; gap:20px; height:84px}
.logo{display:flex; align-items:center; height:64px; flex:none;
  filter:drop-shadow(0 0 14px rgba(155,123,255,.35)); transition:filter .25s}
.logo:hover{filter:drop-shadow(0 0 18px rgba(155,123,255,.7))}
.logo img{display:block; height:100%; width:auto}
.site-nav{display:flex; gap:6px; margin-left:auto}
.site-nav a{
  font:600 .8rem/1 "Chakra Petch",sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-radius:10px; border:1px solid transparent;
  transition:color .2s, border-color .2s, background .2s;
}
.site-nav a:hover{color:var(--text); background:rgba(255,255,255,.03)}
.site-nav a.active{color:var(--cyan); border-color:rgba(53,224,216,.35); background:rgba(53,224,216,.06)}
.icon-btn{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--muted);
  transition:color .2s, border-color .2s, box-shadow .2s;
}
.icon-btn:hover{color:var(--gold); border-color:rgba(245,197,66,.5); box-shadow:0 0 18px -4px rgba(245,197,66,.5)}
.icon-btn svg{width:18px; height:18px; fill:currentColor}

/* ============ TYPE ============ */
.holo-text{
  background:var(--holo-loop); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:slide 7s linear infinite;
}
@keyframes slide{to{background-position:200% 0}}
.lede{margin-top:22px; max-width:540px; color:var(--muted); font-size:1.08rem; font-weight:300}
section{padding:90px 0 0}
.kicker{font:600 .74rem/1 "Chakra Petch",sans-serif; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan)}
.kicker::before{content:"// "; color:var(--violet)}
h2{margin-top:14px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-size:clamp(1.8rem, 3.6vw, 2.7rem)}
.center{text-align:center}

/* subpage title block */
.page-head{padding-top:72px}
.page-head h1{margin-top:14px; font-weight:800; letter-spacing:-.025em; line-height:1.05; font-size:clamp(2.3rem, 5.4vw, 4rem)}
.page-head .lede{margin-top:16px; max-width:640px}

/* ============ BUTTONS ============ */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  font:700 .86rem/1 "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 26px; border-radius:12px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.btn-primary{
  color:#07080F; background:var(--holo-loop); background-size:200% 100%; animation:slide 7s linear infinite; white-space:nowrap;
  box-shadow:0 12px 36px -10px rgba(124,108,246,.7);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 44px -10px rgba(240,98,199,.7)}
.btn-primary:disabled{opacity:.6; cursor:default; transform:none}
.btn-ghost{white-space:nowrap; color:var(--text); border:1px solid var(--line-2); background:rgba(17,21,31,.6)}
.btn-ghost:hover{border-color:var(--violet); transform:translateY(-2px); box-shadow:0 0 24px -6px rgba(155,123,255,.6)}

/* ============ PANELS + FORMS ============ */
.panel{
  position:relative; border-radius:var(--r); padding:32px;
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line);
}
.field{margin-bottom:20px}
.field label{display:block; margin-bottom:8px; font:600 .7rem/1.3 "Chakra Petch",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.input, .field input, .field textarea{
  width:100%; padding:13px 15px; border-radius:11px;
  background:rgba(7,8,15,.7); border:1px solid var(--line-2); color:var(--text);
  font:400 .98rem/1.5 "Sora",system-ui,sans-serif; transition:border-color .2s, box-shadow .2s;
}
.field textarea{min-height:150px; resize:vertical}
.input:focus, .field input:focus, .field textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(53,224,216,.15)}
.input::placeholder, .field input::placeholder, .field textarea::placeholder{color:#5c6680}

/* closing CTA band */
.band{
  position:relative; margin-top:110px; border-radius:26px; padding:1px; background:var(--holo-loop); background-size:200% 100%;
  animation:slide 10s linear infinite;
}
.band-inner{
  position:relative; border-radius:25px; padding:56px 32px; text-align:center; overflow:hidden;
  background:radial-gradient(80% 140% at 50% 0%, #1b1544, var(--ink-2) 70%);
}
.band-logo{display:block; width:min(360px, 80%); height:auto; margin:0 auto 26px; filter:drop-shadow(0 0 24px rgba(155,123,255,.45))}
.band h2{margin-top:0}
.band .cta-row{margin-top:28px; justify-content:center}

/* ============ FOOTER ============ */
footer{margin-top:90px; border-top:1px solid var(--line); background:rgba(11,14,23,.85)}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:30px 24px}
.footer-inner .logo{height:44px}
.footer-inner nav{display:flex; gap:22px}
.footer-inner nav a{font:600 .74rem/1 "Chakra Petch",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.footer-inner nav a:hover{color:var(--cyan)}
.fine{font:500 .72rem/1.4 "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .header-inner{height:66px; gap:10px}
  .logo{height:46px}
  .site-nav{gap:0}
  .site-nav a{padding:9px 7px; font-size:.68rem; letter-spacing:.1em}
  .icon-btn{display:none}
  .btn{flex:1; justify-content:center; padding:16px 14px; letter-spacing:.1em; font-size:.8rem}
  section{padding-top:70px}
  .page-head{padding-top:48px}
  .panel{padding:22px 18px}
  .band-inner{padding:44px 20px}
  .band{margin-top:80px}
}
/* small phones: shrink logo + menu so all four links fit on one line */
@media (max-width:400px){
  .header-inner{gap:6px}
  .logo{height:38px}
  .site-nav a{padding:8px 5px; font-size:.62rem; letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}
a:focus-visible, button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px}