/* local display face — faithful & offline; UI stays system SF / Inter */
@font-face{font-family:'Playfair Display';src:url('../fonts/Playfair.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairItalic.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}

/* ============================================================
   BLASTI — Design System
   by 3aqlIA · champagne-gold on warm paper, Playfair + SF
   One stylesheet, sectioned. Edit tokens first.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --gold:        #C6A664;
  --gold-deep:   #8C6F3A;
  --gold-light:  #E4CE96;
  --noir:        #0D0C0A;
  --noir-soft:   #1A1815;

  /* surfaces (light app) */
  --paper:       #FBF9F5;
  --paper-2:     #F4F0E8;
  --card:        #FFFFFF;
  --line:        #ECE6DB;
  --line-strong: #DED6C7;

  /* text */
  --ink:         #14110D;
  --ink-2:       #574F44;
  --ink-3:       #8C8478;
  --on-noir:     #F4F1EA;
  --on-noir-2:   rgba(244,241,234,.62);

  /* status (muted, sophisticated) */
  --green:       #4E8A5B;
  --green-bg:    #EBF3ED;
  --amber:       #C8912F;   /* yellow card */
  --amber-bg:    #FAF1DC;
  --red:         #BC4F38;   /* red card */
  --red-bg:      #F8E9E4;

  /* type */
  --display: "Playfair Display", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* depth */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px;
  --shadow-1: 0 1px 2px rgba(20,17,13,.04), 0 2px 8px rgba(20,17,13,.05);
  --shadow-2: 0 4px 14px rgba(20,17,13,.07), 0 14px 40px rgba(20,17,13,.08);
  --shadow-gold: 0 10px 36px rgba(198,166,100,.28);

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET / BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ui);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:16px}
::selection{background:var(--gold-light);color:var(--noir)}

/* ---------- 3. TYPE SCALE ---------- */
.display{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.05}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow.on-noir{color:var(--gold-light)}
.lede{font-size:19px;line-height:1.5;color:var(--ink-2);font-weight:400}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

h1,h2,h3{letter-spacing:-.02em;line-height:1.12;font-weight:650}
.wordmark{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.wordmark .by{font-family:var(--ui);font-weight:500;letter-spacing:.02em;color:var(--ink-3);font-size:.62em}

/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:560px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section.tight{padding:64px 0}
.center{text-align:center}
.stack-sm>*+*{margin-top:8px}
.stack>*+*{margin-top:16px}
.stack-lg>*+*{margin-top:28px}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.row.wrap-row{flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 26px;border-radius:999px;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--noir);box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(198,166,100,.36)}
.btn-noir{background:var(--noir);color:var(--on-noir)}
.btn-noir:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-1)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn-quiet{background:transparent;color:var(--ink-2);height:auto;padding:6px 4px}
.btn-quiet:hover{color:var(--gold-deep)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-lg{height:56px;padding:0 32px;font-size:17px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .chev{transition:transform .2s var(--ease)}
.btn:hover .chev{transform:translateX(3px)}

/* ---------- 6. CARDS ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card-pad{padding:24px}
.card-hover{transition:transform .2s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}

/* ---------- 7. PILLS / BADGES ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--paper-2);color:var(--ink-2)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:650;letter-spacing:.01em}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-amber{background:var(--amber-bg);color:var(--amber)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-gold{background:var(--gold-light);color:var(--gold-deep)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:var(--paper-2);color:var(--ink-2);font-size:12.5px;font-weight:500}

/* tier chips (Fair-Play) */
.tier{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:13px}
.tier .gem{width:9px;height:9px;border-radius:2px;transform:rotate(45deg)}
.tier-gold .gem{background:linear-gradient(135deg,#E4CE96,#C6A664)}
.tier-silver .gem{background:linear-gradient(135deg,#E7E7E7,#B9BCC2)}
.tier-bronze .gem{background:linear-gradient(135deg,#D8A47A,#B07A4E)}
.tier-gold{color:var(--gold-deep)} .tier-silver{color:#7E828A} .tier-bronze{color:#9A6B45}

/* ---------- 8. FORM FIELDS ---------- */
.field{display:block}
.field>label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.input,.select{
  width:100%;height:52px;padding:0 16px;border-radius:var(--r-sm);
  background:var(--card);border:1.5px solid var(--line-strong);color:var(--ink);
  transition:border-color .18s,box-shadow .18s;
}
.input:focus,.select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(198,166,100,.16)}
.input::placeholder{color:var(--ink-3)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8478' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.search{position:relative}
.search .input{padding-left:46px}
.search .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3)}

/* stepper */
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--card)}
.stepper button{width:42px;height:44px;font-size:20px;color:var(--ink-2);transition:background .15s}
.stepper button:hover{background:var(--paper-2);color:var(--gold-deep)}
.stepper .val{width:44px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}

/* checkbox row */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);transition:border-color .15s,background .15s}
.check:hover{border-color:var(--line-strong)}
.check input{position:absolute;opacity:0}
.check .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:.15s;margin-top:1px}
.check input:checked+.box{background:var(--gold);border-color:var(--gold)}
.check input:checked+.box svg{opacity:1}
.check .box svg{opacity:0;transition:.15s}
.check input:checked~.ctext .ct-title{color:var(--ink)}

/* ---------- 9. TOP NAV ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(18px);background:rgba(251,249,245,.8);border-bottom:1px solid var(--line)}
.nav.on-noir{background:rgba(13,12,10,.72);border-bottom:1px solid rgba(244,241,234,.08)}
.nav-inner{height:64px;display:flex;align-items:center;gap:18px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.nav .brand{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em}
.nav.on-noir .brand{color:var(--on-noir)}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav.on-noir .nav-links a{color:var(--on-noir-2)} .nav.on-noir .nav-links a:hover{color:var(--on-noir)}

/* ---------- 10. HERO (dark, cinematic) ---------- */
.hero{position:relative;background:var(--noir);color:var(--on-noir);overflow:hidden;isolation:isolate}
.hero .glow{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 520px at 70% -10%, rgba(198,166,100,.22), transparent 60%),
    radial-gradient(700px 600px at 12% 110%, rgba(140,111,58,.16), transparent 60%);
}
.hero .grain{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:96px 24px 104px;text-align:center}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,7vw,76px);letter-spacing:-.02em;line-height:1.02}
.hero h1 .em{color:var(--gold-light);font-style:italic}
.hero .sub{max-width:560px;margin:22px auto 0;font-size:clamp(17px,2.3vw,21px);color:var(--on-noir-2);line-height:1.5}
.hero .cta-row{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.hero .gift{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:7px 15px;border-radius:999px;
  background:rgba(244,241,234,.06);border:1px solid rgba(244,241,234,.12);font-size:13px;color:var(--on-noir-2)}
.hero .gift b{color:var(--gold-light);font-weight:600}

/* ---------- 11. STEP / FEATURE cards ---------- */
.step-n{font-family:var(--display);font-size:30px;font-weight:500;color:var(--gold);line-height:1}
.feature .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--paper-2);color:var(--gold-deep);margin-bottom:18px}
.feature h3{font-size:18px;margin-bottom:7px}
.feature p{color:var(--ink-2);font-size:15px}

/* ---------- 12. FAIR-PLAY (signature) ---------- */
.fairplay{background:var(--noir);color:var(--on-noir);border-radius:var(--r-xl);overflow:hidden;position:relative;isolation:isolate}
.fairplay .glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(640px 360px at 85% 0%,rgba(198,166,100,.18),transparent 60%)}
.fp-card{background:linear-gradient(160deg,#1d1a16,#121008);border:1px solid rgba(228,206,150,.18);border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fp-card .name{font-weight:650;font-size:16px;color:var(--on-noir)}
.fp-meter{height:7px;border-radius:6px;background:rgba(244,241,234,.1);overflow:hidden}
.fp-meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));border-radius:6px}
.fcard{width:17px;height:23px;border-radius:3px;display:inline-block}
.fcard.y{background:#E6B43A} .fcard.r{background:#C2553D}

/* ---------- 13. RESERVE FLOW ---------- */
.flow-head{position:sticky;top:0;z-index:40;background:rgba(251,249,245,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.flow-head .bar{max-width:560px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:14px}
.progress{flex:1;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .4s var(--ease)}
.step{display:none;animation:rise .4s var(--ease)}
.step.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cafe-card{display:flex;gap:14px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);cursor:pointer;transition:transform .18s var(--ease),box-shadow .2s,border-color .18s}
.cafe-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--gold-light)}
.cafe-card.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,166,100,.18)}
.cafe-thumb{flex:none;width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-size:24px;color:var(--on-noir);background:linear-gradient(150deg,#2a2620,#15120d)}
.cafe-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-top:5px}
.match-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);border:1.5px solid var(--line);cursor:pointer;transition:.15s;background:var(--card)}
.match-opt:hover{border-color:var(--line-strong)}
.match-opt.sel{border-color:var(--gold);background:#fffdf8;box-shadow:0 0 0 3px rgba(198,166,100,.14)}
.flag{font-size:22px;line-height:1}

.ticket{background:linear-gradient(165deg,#1d1a15,#0f0d09);color:var(--on-noir);border-radius:var(--r-lg);padding:26px;position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.ticket::before,.ticket::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);top:50%;transform:translateY(-50%)}
.ticket::before{left:-13px}.ticket::after{right:-13px}
.ticket .sep{border-top:1.5px dashed rgba(244,241,234,.2);margin:18px 0}
.confirm-ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);color:var(--green);margin:0 auto}

/* ---------- 14. DASHBOARD ---------- */
.dash{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--noir);color:var(--on-noir);padding:22px 16px;position:sticky;top:0;height:100vh}
.side .brand{font-family:var(--display);font-size:21px;color:var(--on-noir);padding:6px 10px 22px}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;font-size:14.5px;font-weight:500;color:var(--on-noir-2);transition:.15s}
.side nav a:hover{background:rgba(244,241,234,.06);color:var(--on-noir)}
.side nav a.active{background:rgba(198,166,100,.16);color:var(--gold-light)}
.side .who{position:absolute;bottom:18px;left:16px;right:16px;padding:12px;border-radius:13px;background:rgba(244,241,234,.05);font-size:13px}
.main{padding:34px 38px;max-width:1000px}
.dash-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.dash-h h1{font-family:var(--display);font-weight:600;font-size:30px}
.stat{padding:20px}
.stat .k{font-size:13px;color:var(--ink-3);font-weight:600;letter-spacing:.01em}
.stat .v{font-family:var(--display);font-size:36px;font-weight:600;margin-top:6px;line-height:1}
.stat .v small{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink-3)}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.row-act:hover{background:var(--paper)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:14px;color:var(--on-noir);background:linear-gradient(150deg,#3a352c,#1a160f)}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:3px}
.seg button{padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.15s}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line);background:var(--card);transition:.15s}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.dash-view{display:none}.dash-view.active{display:block;animation:rise .35s var(--ease)}

/* ---------- 15. MISC ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--noir);color:var(--on-noir);padding:13px 20px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.divide{height:1px;background:var(--line);border:none}
.kicker-line{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:13px}
.kicker-line::before,.kicker-line::after{content:"";height:1px;background:var(--line);flex:1}
footer.foot{background:var(--noir);color:var(--on-noir-2);padding:54px 0 40px}
footer.foot .wordmark{color:var(--on-noir);font-size:24px}
footer.foot a{color:var(--on-noir-2)}footer.foot a:hover{color:var(--gold-light)}

/* ---------- 16. RESPONSIVE ---------- */
@media(max-width:880px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;align-items:center;gap:14px;padding:14px 16px}
  .side .brand{padding:0}.side nav{flex-direction:row;overflow-x:auto;flex:1}.side .who{display:none}
  .main{padding:24px 18px}
  .nav-links{display:none}
  .section{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}