/* ════════════════════════════════════════════════════════════
   GOLDEN CLEATS — SHARED DESIGN SYSTEM
   Bebas Neue / DM Serif Display / Space Mono / Manrope
   Black + Lime palette — consistent across all pages
════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#050505;
  --ink:#0d0d0d;
  --panel:#111111;
  --border:#1e1e1e;
  --muted:#2a2a2a;
  --smoke:#888;
  --ash:#b0b0b0;
  --offwhite:#ede8de;
  --white:#f8f6f0;
  --lime:#c8f135;
  --lime-dim:#a8d020;
  --lime-glow:rgba(200,241,53,0.15);
  --red:#ff3c3c;
  --blue:#60a5fa;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  background:var(--black);
  color:var(--offwhite);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

/* ─── CUSTOM CURSOR ─────────────────────────── */
#cursor{
  position:fixed;width:10px;height:10px;
  background:var(--lime);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  mix-blend-mode:difference;
}
#cursor-ring{
  position:fixed;width:36px;height:36px;
  border:1px solid var(--lime);border-radius:50%;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .12s ease,width .25s,height .25s,opacity .25s;
  opacity:0.5;
}
body:has(button:hover) #cursor{width:48px;height:48px;background:var(--lime)}
body:has(a:hover) #cursor{width:24px;height:24px}

@media (hover:none){
  #cursor,#cursor-ring{display:none}
  body{cursor:auto}
}

/* ─── GRAIN ─────────────────────────────────── */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── PITCH TEXTURE ──────────────────────────── */
.pitch-bg{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'%3E%3Crect width='800' height='600' fill='none'/%3E%3Crect x='40' y='40' width='720' height='520' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Ccircle cx='400' cy='300' r='80' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Ccircle cx='400' cy='300' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cline x1='400' y1='40' x2='400' y2='560' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Crect x='40' y='200' width='110' height='200' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Crect x='650' y='200' width='110' height='200' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Crect x='40' y='250' width='50' height='100' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3Crect x='710' y='250' width='50' height='100' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.035'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;
  pointer-events:none;opacity:1;
}

/* ─── NAV (shared across all pages) ─────────── */
nav.gc-nav{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 5vw;
  background:rgba(5,5,5,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.gc-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:3px;
  color:var(--white);text-decoration:none;
}
.gc-logo span{color:var(--lime)}
.gc-navlinks{display:flex;align-items:center;gap:32px}
.gc-navlinks a{
  font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--smoke);text-decoration:none;
  transition:color .2s;
}
.gc-navlinks a:hover{color:var(--lime)}
.gc-navlinks a.current{color:var(--lime)}
.nav-cta{
  font-family:'Space Mono',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--black);background:var(--lime);
  padding:10px 22px;border:none;cursor:none;
  text-decoration:none;
  transition:background .2s,transform .15s;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.nav-cta:hover{background:var(--lime-dim);transform:translateY(-2px)}
.gc-burger{display:none;background:none;border:none;color:var(--white);font-size:24px;cursor:none}

@media(max-width:768px){
  .gc-navlinks{
    position:fixed;top:64px;left:0;right:0;
    background:var(--ink);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:flex-start;
    padding:24px 5vw;gap:20px;
    transform:translateY(-120%);transition:transform .3s ease;
  }
  .gc-navlinks.open{transform:translateY(0)}
  .gc-burger{display:block}
}

/* ─── SECTION BASE ──────────────────────────── */
section{position:relative;overflow:hidden}
.s-inner{padding:100px 5vw;max-width:1200px;margin:0 auto}
.s-label{
  font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:var(--lime);
  margin-bottom:20px;display:flex;align-items:center;gap:14px;
}
.s-label::before{content:'';display:block;width:32px;height:1px;background:var(--lime)}
.s-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,92px);
  line-height:.92;letter-spacing:-1px;
  color:var(--white);margin-bottom:32px;
}
.s-title em{font-family:'DM Serif Display',serif;font-style:italic;color:var(--lime)}

.slash{height:80px;clip-path:polygon(0 0,100% 40px,100% 100%,0 100%);margin-top:-1px}
.slash-rev{height:80px;clip-path:polygon(0 40px,100% 0,100% 100%,0 100%);margin-top:-1px}

/* ─── BUTTONS ────────────────────────────────── */
.btn-lime{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--lime);color:var(--black);
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;letter-spacing:1.5px;
  padding:18px 36px;border:none;cursor:none;
  transition:background .2s,transform .15s,box-shadow .2s;
  text-decoration:none;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.btn-lime:hover{background:var(--lime-dim);transform:translateY(-2px);box-shadow:0 12px 32px rgba(200,241,53,.3)}
.btn-lime:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ─── MODALS (shared) ────────────────────────── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.9);z-index:2000;
  align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(4px);
}
.overlay.open{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--border);
  border-top:3px solid var(--lime);
  width:100%;max-width:480px;padding:48px 40px;position:relative;
  animation:modalIn .3s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-x{
  position:absolute;top:20px;right:24px;
  background:none;border:none;font-size:20px;color:var(--smoke);cursor:none;
  transition:color .2s;
}
.modal-x:hover{color:var(--white)}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:40px;color:var(--white);letter-spacing:1px;margin-bottom:6px}
.modal-sub{font-size:14px;color:var(--smoke);margin-bottom:32px}
.fg{margin-bottom:20px}
.fg label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.fg input{
  width:100%;background:var(--muted);border:1px solid var(--border);
  color:var(--white);font-family:'Manrope',sans-serif;font-size:16px;
  padding:14px 16px;outline:none;transition:border-color .2s;border-radius:0;
}
.fg input:focus{border-color:var(--lime)}
.cur-toggle{display:flex;gap:0;margin-bottom:24px}
.cur-btn{
  flex:1;padding:13px;background:var(--muted);border:1px solid var(--border);
  color:var(--smoke);font-family:'Space Mono',monospace;font-weight:700;font-size:13px;
  cursor:none;text-transform:uppercase;letter-spacing:1px;transition:all .2s;
}
.cur-btn.active{background:var(--lime);color:var(--black);border-color:var(--lime)}
.amt-box{text-align:center;padding:20px;background:var(--black);border:1px solid var(--border);margin-bottom:24px}
.amt-big{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--lime);line-height:1}
.amt-note{font-size:11px;color:var(--smoke);margin-top:4px}
.btn-pay{
  width:100%;background:var(--lime);color:var(--black);
  font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;
  padding:18px;border:none;cursor:none;transition:background .2s,transform .15s;
}
.btn-pay:hover{background:var(--lime-dim);transform:translateY(-2px)}
.btn-pay:disabled{opacity:.4;cursor:not-allowed;transform:none}
.success-body{text-align:center}
.s-icon{
  width:72px;height:72px;border-radius:50%;background:var(--lime);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
  font-size:32px;color:var(--black);animation:pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.s-title2{font-family:'Bebas Neue',sans-serif;font-size:42px;color:var(--white);letter-spacing:1px;margin-bottom:10px}
.s-msg{font-size:15px;color:var(--smoke);margin-bottom:32px;line-height:1.7}
.btn-dl{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:var(--lime);color:var(--black);
  font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;padding:18px;
  text-decoration:none;margin-bottom:16px;transition:background .2s,transform .15s;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.btn-dl:hover{background:var(--lime-dim);transform:translateY(-2px)}
.s-fallback{font-size:12px;color:var(--smoke)}
.s-fallback a{color:var(--lime)}

/* ─── FOOTER (shared) ───────────────────────── */
footer.gc-footer{
  background:var(--ink);border-top:1px solid var(--border);
  padding:48px 5vw;display:flex;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;gap:32px;
}
.f-brand{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--white);letter-spacing:3px}
.f-brand small{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--smoke);margin-top:4px;font-weight:400}
.f-links{display:flex;gap:24px;flex-wrap:wrap}
.f-links a{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--smoke);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--lime)}
footer.gc-footer p{font-size:12px;color:var(--smoke);max-width:380px;line-height:1.8;font-family:'Space Mono',monospace}

/* ─── REVEAL ANIMATIONS ──────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

/* ─── PAYMENT BADGES ─────────────────────────── */
.pay-methods{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.pm-tag{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--border);color:var(--smoke);padding:6px 12px}
.pm-tag.mpesa{color:#4caf50;border-color:rgba(76,175,80,.3)}
.pm-tag.card{color:var(--blue);border-color:rgba(96,165,250,.3)}