@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

  :root{
    --bg: #12211A;
    --surface: #1A2E23;
    --surface-2: #22392C;
    --line: #2E4A3A;
    --text: #EFEFE6;
    --text-dim: #8FA396;
    --ball: #D4FF3D;
    --win: #7FBF4D;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
    line-height:1.5;
  }
  .wrap{ max-width:900px; margin:0 auto; padding:0 24px; }
  header.top{ padding:28px 0; display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.5px; font-size:17px; display:flex; align-items:center; gap:8px; }
  .logo .tracker{ color:var(--text-dim); font-weight:500; }
  .logo .dot{ width:5px; height:5px; background:var(--ball); border-radius:1px; display:inline-block; }
  nav a{
    color:var(--text-dim); text-decoration:none; font-size:14px; font-family:'Inter',sans-serif;
    margin-left:24px;
  }

  .hero{ padding:56px 0 40px; text-align:center; }
  .eyebrow{
    font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--ball); margin-bottom:18px;
  }
  h1{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:48px; line-height:1.1;
    letter-spacing:-0.5px; margin-bottom:22px;
  }
  .sub{ font-size:19px; color:var(--text-dim); max-width:560px; margin:0 auto 40px; }

  .sport-picker{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .sport-card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:28px 40px; text-decoration:none; color:var(--text); min-width:200px;
    transition:border-color 0.15s;
  }
  .sport-card:hover{ border-color:var(--ball); }
  .sport-card .sport-name{
    font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; margin-bottom:6px;
  }
  .sport-card .sport-tag{ font-size:13px; color:var(--text-dim); }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--ball); color:#16260F;
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    font-size:14px; padding:14px 20px; border-radius:8px; text-decoration:none; border:none; cursor:pointer;
    width:100%;
  }
  .btn:hover{ opacity:0.9; }
  .btn-outline{
    display:inline-flex; align-items:center; justify-content:center; gap:10px; background:transparent; color:var(--text);
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    font-size:14px; padding:14px 20px; border-radius:8px; text-decoration:none; border:1px solid var(--line); cursor:pointer;
    width:100%;
  }
  .btn-outline:hover{ border-color:var(--ball); color:var(--ball); }

  .bracket-demo{
    margin:44px auto 0; display:flex; align-items:flex-start; justify-content:center;
    max-width:640px; overflow-x:auto; padding-bottom:8px;
  }
  .bstep{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
  .bstep .round{
    font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:6px;
  }
  .bstep .box{
    width:120px; height:52px; border-radius:6px; border:1px solid var(--win);
    display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
    font-size:12px; background:rgba(127,191,77,0.08);
  }
  .bstep .box.final{ border-color:var(--ball); background:rgba(212,255,61,0.1); color:var(--ball); font-weight:600; }
  .bconnect{ width:26px; height:2px; background:var(--win); margin-top:35px; flex-shrink:0; }

  section{ padding:60px 0; border-top:1px solid var(--line); }
  .section-tag{
    font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--ball); text-align:center; margin-bottom:8px;
  }
  h2{ font-family:'Oswald',sans-serif; font-weight:600; font-size:30px; text-align:center; margin-bottom:40px; }

  .features{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:48px; }
  .fcard{ flex:1 1 calc(33.333% - 14px); min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; }
  .fcard .ftitle{ font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; margin-bottom:8px; }
  .fcard .fdesc{ font-size:14px; color:var(--text-dim); }

  .pricing-tiers{ display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; justify-content:center; }
  .tier-card{
    flex:1 1 calc(33.333% - 12px); min-width:220px; max-width:280px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px 22px;
    display:flex; flex-direction:column; text-align:center; position:relative;
  }
  .tier-card.featured{ border-color:var(--ball); background:var(--surface-2); }
  .tier-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--ball); color:#16260F; font-family:'Oswald',sans-serif; font-size:11px;
    font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:4px 12px; border-radius:20px;
    white-space:nowrap;
  }
  .tier-name{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px; }
  .tier-price{ font-family:'Oswald',sans-serif; font-size:34px; font-weight:700; color:var(--text); margin-bottom:2px; }
  .tier-price .tier-period{ font-size:14px; font-weight:500; color:var(--text-dim); }
  .tier-card.featured .tier-price{ color:var(--ball); }
  .tier-note{ font-size:12px; color:var(--text-dim); margin-bottom:20px; min-height:32px; }
  .tier-card .btn, .tier-card .btn-outline{ margin-top:auto; }

  .post-purchase{ font-size:13px; color:var(--text-dim); margin-top:24px; max-width:440px; margin-left:auto; margin-right:auto; text-align:center; }

  .steps{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
  .step{ max-width:220px; text-align:center; }
  .step .num{
    width:40px; height:40px; border-radius:50%; background:var(--surface-2); border:1px solid var(--ball);
    color:var(--ball); font-family:'Oswald',sans-serif; font-weight:600; display:flex; align-items:center;
    justify-content:center; margin:0 auto 14px;
  }
  .step h3{ font-family:'Oswald',sans-serif; font-size:16px; margin-bottom:8px; }
  .step p{ font-size:14px; color:var(--text-dim); }

  footer{ padding:40px 0; border-top:1px solid var(--line); text-align:center; }
  footer p{ font-size:12px; color:var(--text-dim); margin-bottom:8px; }
  .impressum-placeholder{
    background:var(--surface-2); border:1px dashed var(--line); border-radius:8px; padding:16px;
    font-size:12px; color:var(--text-dim); max-width:480px; margin:20px auto 0; text-align:left;
  }

  .header-right{ display:flex; align-items:center; }

  .cart-toggle{
    position:relative; background:transparent; border:1px solid var(--line); border-radius:8px;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text); flex-shrink:0; margin-left:20px;
  }
  .cart-toggle:hover{ border-color:var(--ball); }
  .cart-toggle svg{ width:18px; height:18px; }
  .cart-badge{
    position:absolute; top:-6px; right:-6px; background:var(--ball); color:#16260F;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; min-width:16px; height:16px;
    border-radius:8px; display:none; align-items:center; justify-content:center; padding:0 4px;
  }

  .cart-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none;
    transition:opacity 0.2s ease; z-index:100;
  }
  .cart-overlay.open{ opacity:1; pointer-events:auto; }

  .cart-drawer{
    position:fixed; top:0; right:0; height:100%; width:340px; max-width:90vw;
    background:var(--surface); border-left:1px solid var(--line); z-index:101;
    transform:translateX(100%); transition:transform 0.25s ease; display:flex; flex-direction:column;
    padding:22px; overflow-y:auto;
  }
  .cart-drawer.open{ transform:translateX(0); }
  .cart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .cart-header h3{ font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:0.5px; }
  .cart-close{ background:transparent; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; line-height:1; }
  .cart-close:hover{ color:var(--text); }

  .cart-items{ flex:1; margin-bottom:16px; }

  .payment-methods{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .payment-methods-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:7px; }
  .payment-methods button{
    font-family:'Inter',sans-serif; font-size:13px; color:var(--text-dim); text-align:left;
    background:var(--surface-2); border:1px solid var(--line); padding:9px 10px; border-radius:6px;
    cursor:pointer; display:flex; align-items:center; gap:9px;
  }
  .payment-methods button:hover{ border-color:var(--ball); color:var(--text); }
  .payment-methods button.active{ border-color:var(--ball); color:var(--text); background:rgba(212,255,61,0.08); }
  .payment-methods button .dot{
    width:9px; height:9px; border-radius:50%; border:1px solid var(--text-dim); flex-shrink:0;
  }
  .payment-methods button.active .dot{ background:var(--ball); border-color:var(--ball); }

  .cart-empty{ color:var(--text-dim); font-size:13px; text-align:center; padding:26px 0; }
  .cart-item{
    display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    border-bottom:1px solid var(--line); padding:13px 0;
  }
  .cart-item:first-child{ padding-top:0; }
  .cart-item-name{ font-size:14px; font-weight:500; }
  .cart-item-price{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ball); margin-top:4px; }
  .cart-item-was{ color:var(--text-dim); text-decoration:line-through; font-size:11px; margin-left:4px; }
  .cart-item-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
  .cart-item-buy{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.5px; text-transform:uppercase;
    color:#16260F; background:var(--ball); padding:6px 10px; border-radius:5px; text-decoration:none; white-space:nowrap;
  }
  .cart-item-remove{ background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; }
  .cart-item-remove:hover{ color:var(--text); }

  .cart-discount label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:7px; }
  .discount-row{ display:flex; gap:8px; }
  .discount-row input{
    flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--text);
    padding:9px 10px; font-size:14px; font-family:'Inter',sans-serif;
  }
  .discount-row button{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    font-size:12px; padding:9px 14px; border-radius:6px; border:1px solid var(--line); background:transparent;
    color:var(--text); cursor:pointer; white-space:nowrap;
  }
  .discount-row button:hover{ border-color:var(--ball); color:var(--ball); }
  .discount-status{ font-size:12px; margin-top:8px; min-height:14px; }
  .discount-status.ok{ color:var(--win); }
  .discount-status.err{ color:#C4573A; }

  .cart-total{
    display:flex; justify-content:space-between; align-items:center; font-family:'Oswald',sans-serif;
    font-size:15px; font-weight:600; border-top:1px solid var(--line); margin-top:18px; padding-top:14px;
  }
  .cart-note{ font-size:11px; color:var(--text-dim); margin-top:10px; line-height:1.4; }

  @media (max-width: 720px){
    h1{ font-size:34px; }
    .fcard{ flex:1 1 100%; }
    .tier-card{ flex:1 1 100%; max-width:340px; }
    .pricing-tiers{ max-width:340px; margin:0 auto; }
    nav{ display:none; }
    .cart-drawer{ width:100%; max-width:100%; }
  }