:root{
    --ink:#142A28;
    --paper:#FBF3E7;
    --paper-2:#F3E7D3;
    --guava:#E8425F;
    --guava-dark:#C22E48;
    --mango:#FFB238;
    --leaf:#3F7D5C;
    --leaf-dark:#2C5B42;
    --line: rgba(20,42,40,0.18);
    --shadow: 0 10px 24px rgba(20,42,40,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    background-image:
      radial-gradient(circle at 8% 8%, rgba(255,178,56,0.10), transparent 40%),
      radial-gradient(circle at 92% 18%, rgba(232,66,95,0.14), transparent 45%);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    min-height:100vh;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  .display{font-family:'Bricolage Grotesque', sans-serif;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:var(--ink);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .header-inner{
    max-width:1180px; margin:0 auto; padding:16px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .logo{
    display:flex; align-items:baseline; gap:8px; color:var(--paper);
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em;
  }
  .logo span{color:var(--mango);}
  .logo .city{
    font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:11px;
    color:rgba(251,243,231,0.55); text-transform:uppercase; letter-spacing:0.14em;
  }
  .btn-publish{
    background:var(--guava); color:var(--paper); border:none; border-radius:999px;
    padding:11px 20px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    cursor:pointer; display:flex; align-items:center; gap:8px; transition:transform .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn-publish:hover{background:var(--guava-dark); transform:translateY(-1px);}
  .btn-publish:focus-visible{outline:2px solid var(--mango); outline-offset:2px;}

  /* ---------- hero ---------- */
  .hero{ max-width:1180px; margin:0 auto; padding:56px 24px 32px; }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--mango); margin:0 0 14px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--mango); display:inline-block;}
  .hero h1{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(32px, 5vw, 54px); line-height:1.04; color:var(--paper); margin:0 0 18px; max-width:16ch;
  }
  .hero h1 em{ font-style:normal; color:var(--mango); }
  .hero p.lede{
    color:rgba(251,243,231,0.72); font-size:16px; line-height:1.6; max-width:52ch; margin:0 0 32px;
  }

  /* search + filters */
  .controls{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:4px;
  }
  .search-box{
    flex:1 1 240px; position:relative;
  }
  .search-box input{
    width:100%; background:rgba(251,243,231,0.06); border:1px solid rgba(251,243,231,0.18);
    border-radius:12px; padding:13px 16px 13px 40px; color:var(--paper); font-family:'Inter',sans-serif; font-size:14px;
  }
  .search-box input::placeholder{color:rgba(251,243,231,0.45);}
  .search-box input:focus{outline:2px solid var(--mango); outline-offset:1px; border-color:transparent;}
  .search-box .icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.6;}
  .chip{
    border:1px solid rgba(251,243,231,0.22); background:transparent; color:rgba(251,243,231,0.85);
    border-radius:999px; padding:9px 16px; font-size:13px; font-family:'Inter',sans-serif; font-weight:500;
    cursor:pointer; transition:all .15s ease; white-space:nowrap;
  }
  .chip:hover{border-color:var(--mango); color:var(--paper);}
  .chip.active{background:var(--mango); border-color:var(--mango); color:var(--ink); font-weight:700;}
  .chip:focus-visible{outline:2px solid var(--mango); outline-offset:2px;}
  .toggle-today{
    display:flex; align-items:center; gap:8px; margin-top:16px;
    color:rgba(251,243,231,0.7); font-size:13px; font-family:'IBM Plex Mono',monospace;
  }
  .toggle-today input{accent-color:var(--mango); width:15px; height:15px; cursor:pointer;}
  .toggle-today label{cursor:pointer;}

  /* ---------- feed section ---------- */
  .feed-section{
    background:var(--paper);
    border-radius:28px 28px 0 0;
    margin-top:36px;
    padding:44px 24px 90px;
    min-height:50vh;
  }
  .feed-inner{max-width:1180px; margin:0 auto;}
  .feed-head{
    display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:8px;
  }
  .feed-head h2{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:22px; margin:0; color:var(--ink);
  }
  .feed-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--leaf-dark); font-weight:500;}

  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:26px 22px;
  }

  /* ---------- ticket card ---------- */
  .ticket{
    position:relative; background:#fff; border-radius:4px;
    box-shadow:var(--shadow);
    padding:20px 18px 16px;
    transform:rotate(var(--r,0deg));
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .ticket:nth-child(3n){--r:-0.6deg;}
  .ticket:nth-child(3n+1){--r:0.5deg;}
  .ticket:nth-child(3n+2){--r:-0.3deg;}
  .ticket:hover{transform:rotate(0deg) translateY(-3px); box-shadow:0 16px 30px rgba(20,42,40,0.2);}
  .tape{
    position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);
    width:76px; height:22px; background:rgba(255,229,160,0.65);
    border:1px solid rgba(255,255,255,0.5);
    box-shadow:0 2px 4px rgba(0,0,0,0.08);
  }
  .ticket-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px;}
  .cat-badge{
    width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:19px; flex-shrink:0; background:var(--paper-2);
  }
  .biz-name{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16px; color:var(--ink); line-height:1.2; margin:0;}
  .cat-label{
    font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--leaf-dark); margin-top:3px;
  }
  .promo-desc{font-size:14px; line-height:1.5; color:#2c2c2c; margin:0 0 14px;}
  .price-tag{
    display:inline-flex; align-items:center; gap:6px; background:var(--mango); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; padding:5px 11px; border-radius:6px; margin-bottom:14px;
  }
  .perf{
    border-top:1px dashed var(--line); margin:2px 0 12px; position:relative;
  }
  .perf::before, .perf::after{
    content:""; position:absolute; top:-7px; width:14px; height:14px; background:var(--ink); border-radius:50%;
  }
  .perf::before{left:-30px;}
  .perf::after{right:-30px;}
  .ticket-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .valid-until{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a8a8a;}
  .wa-btn{
    display:flex; align-items:center; gap:6px; background:var(--leaf); color:#fff; text-decoration:none;
    padding:8px 13px; border-radius:8px; font-size:12.5px; font-weight:600; font-family:'Inter',sans-serif;
    transition:background .15s ease;
  }
  .wa-btn:hover{background:var(--leaf-dark);}

  .empty-state{
    grid-column:1/-1; text-align:center; padding:70px 20px; color:#7a7a7a;
  }
  .empty-state .display{font-size:20px; color:var(--ink); margin-bottom:8px;}

  /* ---------- how it works ---------- */
  .how{max-width:1180px; margin:70px auto 0; padding:0 24px 10px;}
  .how h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:20px; color:var(--ink); margin:0 0 22px;}
  .how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px;}
  .how-step{padding:20px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,0.5);}
  .how-num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--guava); font-weight:600; margin-bottom:10px;}
  .how-step h4{font-family:'Bricolage Grotesque',sans-serif; font-size:15px; margin:0 0 6px; color:var(--ink);}
  .how-step p{font-size:13.5px; color:#5c5c5c; line-height:1.5; margin:0;}

  footer{
    background:var(--paper); text-align:center; padding:26px 24px 40px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8a8a8a;
  }

  /* ---------- modal ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(20,42,40,0.55); backdrop-filter:blur(2px);
    display:none; align-items:flex-start; justify-content:center; z-index:100; padding:40px 18px; overflow-y:auto;
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--paper); border-radius:18px; width:100%; max-width:460px; padding:28px 26px 26px;
    box-shadow:0 24px 60px rgba(0,0,0,0.35); position:relative;
  }
  .modal h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; margin:0 0 4px; color:var(--ink);}
  .modal .sub{font-size:13px; color:#6a6a6a; margin:0 0 22px;}
  .close-x{
    position:absolute; top:18px; right:18px; background:none; border:none; cursor:pointer;
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink);
  }
  .close-x:hover{background:rgba(0,0,0,0.06);}
  .field{margin-bottom:15px;}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; font-family:'Inter',sans-serif;}
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--line); background:#fff; border-radius:9px; padding:10px 12px;
    font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  }
  .field textarea{resize:vertical; min-height:64px;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--mango); border-color:transparent;}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .submit-btn{
    width:100%; background:var(--guava); color:#fff; border:none; border-radius:10px; padding:13px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; cursor:pointer; margin-top:6px;
    transition:background .15s ease;
  }
  .submit-btn:hover{background:var(--guava-dark);}
  .submit-btn:disabled{opacity:.6; cursor:not-allowed;}
  .form-note{font-size:11.5px; color:#8a8a8a; margin-top:10px; line-height:1.5; font-family:'IBM Plex Mono',monospace;}
  .success-box{text-align:center; padding:10px 0;}
  .success-box .big-emoji{font-size:40px; margin-bottom:10px;}

  @media (max-width:640px){
    .row-2{grid-template-columns:1fr;}
    .perf::before{left:-24px;} .perf::after{right:-24px;}
  }