:root{
    --ink:#0B0B0F;
    --ink-2:#131318;
    --cream:#F3EFE7;
    --cream-2:#EAE4D6;
    --gold:#E8B93F;
    --gold-dim:#C79A2E;
    --ember:#C4432E;
    --ivory:#EDEAE3;
    --charcoal:#1B1B1F;
    --line-dark:rgba(237,234,227,0.14);
    --line-light:rgba(27,27,31,0.14);
    --display:'Quicksand', 'Nimbus Roman No9 L', 'Nimbus Roman No9 L Med', 'Anek Latin', sans-serif;
    --body:'Quicksand', 'Nimbus Roman No9 L', 'Nimbus Roman No9 L Med', 'Anek Latin', sans-serif;
    --mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--body); background:var(--ink); color:var(--ivory); line-height:1.5; font-weight:500; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit;}
  section{padding:96px 24px;}
  .wrap{max-width:1080px; margin:0 auto;}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.65;}
  h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-0.04em;}
  .light-section{background:var(--cream); color:var(--charcoal);}
  .light-section .eyebrow{opacity:0.55;}
  .dark-section{background:var(--ink); color:var(--ivory);}
  .alt-dark{background:var(--ink-2);}

  /* ===== Keycap signature component ===== */
  .keycap{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--mono); font-weight:600; letter-spacing:0.02em;
    background:linear-gradient(180deg,#F6D877,var(--gold) 55%,var(--gold-dim));
    color:#231a05; border:none; border-radius:10px;
    padding:14px 26px; font-size:14px; text-transform:uppercase;
    cursor:pointer; transition:transform .12s ease;
  }
  .keycap:hover{transform:translateY(2px);}
  .keycap:active{transform:translateY(3px);}
  .keycap.ghost{
    background:transparent; color:var(--ivory);
    border:1px solid var(--line-dark);
  }
  .keycap.ghost:hover{border-color:var(--gold); color:var(--gold); transform:none;}
  .keycap.small{padding:8px 14px; font-size:11px; border-radius:7px;}
  .keycap.ember{background:linear-gradient(180deg,#E06A52,var(--ember) 55%,#9c3220); color:#fff;}

  /* Nav */
  header{
    position:sticky; top:0; z-index:50; background:rgba(11,11,15,0.85); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-dark);
  }
  .nav{max-width:1080px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between;}
  .logo-image{display:block; height:30px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:0.96;}
  .tagline-mini{font-family:var(--mono); font-size:11px; opacity:0.55; letter-spacing:0.08em; text-transform:uppercase; display:none;}
  @media(min-width:640px){.tagline-mini{display:block;}}

  /* Hero */
  .hero{
    min-height:88vh; display:flex; align-items:center; padding-top:64px;
    background:
      radial-gradient(ellipse at 78% 30%, rgba(232,185,63,0.12), transparent 55%),
      var(--ink);
  }
  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;}}
  .hero h1{font-size:clamp(40px,6vw,68px); margin:18px 0 22px; font-weight:700;}
  .hero h1 em{font-style:normal; color:var(--gold); font-weight:700;}
  .hero p{font-size:18px; opacity:0.75; max-width:480px; margin-bottom:34px; font-weight:500;}
  .hero-cta-row{display:flex; gap:14px; flex-wrap:wrap;}

  .keycap-visual{
    position:relative; width:220px; height:220px; margin:0 auto;
    background:linear-gradient(180deg,#F6D877,var(--gold) 60%,var(--gold-dim));
    border-radius:28px; display:flex; align-items:center; justify-content:center;
    font-family:'Abril Fatface', serif; font-weight:700; font-size:200px; line-height:1; color:#231a05;
    animation: press 3.2s ease-in-out infinite;
    user-select:none;
  }
  @keyframes press{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(8px);}
  }
  .keycap-visual small{
    position:absolute; bottom:-38px; font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--gold); text-align:center; width:280px; left:50%; transform:translateX(-50%);
  }

  /* Problem */
  .problem h2{font-size:clamp(28px,4vw,42px); max-width:760px;}
  .problem h2 em{font-style:normal; color:var(--ember);}
  .problem p{margin-top:20px; max-width:640px; font-size:17px; opacity:0.75;}

  /* How it works */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:56px;}
  @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr);}}
  .step{text-align:left;}
  .step .num{
    width:46px; height:46px; border-radius:10px; background:var(--ink-2); border:1px solid var(--line-dark);
    display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; color:var(--gold);
    margin-bottom:16px;
  }
  .step h3{font-size:17px; font-weight:600; font-family:var(--body); margin-bottom:6px;}
  .step p{font-size:14px; opacity:0.6;}

  /* Included grid */
  .included-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); margin-top:48px; border:1px solid var(--line-dark);}
  @media(max-width:760px){.included-grid{grid-template-columns:repeat(2,1fr);}}
  .included-cell{background:var(--ink); padding:28px 22px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;}
  .included-cell h4{font-family:var(--body); font-weight:600; font-size:15px; margin-bottom:8px;}
  .included-cell p{font-size:13px; opacity:0.6;}

  /* Proof */
  .proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;}
  @media(max-width:760px){.proof-grid{grid-template-columns:repeat(2,1fr);}}
  .proof-card{
    aspect-ratio:3/4; border-radius:12px; display:flex; align-items:flex-end; padding:16px;
    font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:#fff; text-transform:uppercase;
    background-size:cover; background-position:center;
  }
  .proof-load-more{
    display:inline-flex; align-items:center; justify-content:center; margin:22px auto 0; padding:12px 18px;
    border:none; border-radius:10px; background:var(--charcoal); color:var(--ivory); font-family:var(--body);
    font-weight:700; cursor:pointer; transition:opacity .15s ease;
  }
  .proof-load-more:hover{opacity:0.92;}
  .proof-load-more[hidden]{display:none;}

  /* Plans */
  .plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px;}
  @media(max-width:900px){.plans-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto;}}
  .plan-card{
    background:var(--ink-2); border:1px solid var(--line-dark); border-radius:16px; padding:32px 28px;
    display:flex; flex-direction:column; position:relative; transition:border-color .15s ease, transform .15s ease;
  }
  .plan-card:hover{transform:translateY(-4px);}
  .plan-card.featured{border-color:var(--gold);}
  .badge{
    position:absolute; top:-13px; right:24px; background:var(--gold); color:#231a05;
    font-family:var(--mono); font-size:10px; padding:5px 10px; border-radius:6px; letter-spacing:0.08em; text-transform:uppercase;
  }
  .plan-name{font-family:var(--display); font-size:24px; font-weight:600;}
  .plan-price{font-family:var(--mono); font-size:32px; margin:14px 0 4px; color:var(--gold);}
  .plan-price span{font-size:13px; opacity:0.55; color:var(--ivory);}
  .plan-list{list-style:none; margin:22px 0 28px; font-size:14px; opacity:0.8;}
  .plan-list li{padding:7px 0; border-top:1px solid var(--line-dark);}
  .plan-list li:first-child{border-top:none;}
  .plan-card .keycap{width:100%; margin-top:auto;}

  /* Form section */
  .form-shell{
    background:var(--cream); border-radius:20px; padding:48px 40px; margin-top:44px; color:var(--charcoal);
  }
  @media(max-width:640px){.form-shell{padding:30px 22px;}}
  .progress-row{display:flex; gap:8px; margin-bottom:36px; flex-wrap:wrap;}
  .progress-key{
    font-family:var(--mono); font-size:11px; padding:8px 12px; border-radius:7px; border:1px solid var(--line-light);
    opacity:0.4; letter-spacing:0.04em;
  }
  .progress-key.active{opacity:1; background:var(--charcoal); color:var(--cream); border-color:var(--charcoal);}
  .progress-key.done{opacity:1; background:var(--gold); border-color:var(--gold); color:#231a05;}

  .form-step{display:none;}
  .form-step.active{display:block; animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .form-step h3{font-size:26px; margin-bottom:6px;}
  .form-step .sub{font-size:14px; opacity:0.6; margin-bottom:28px;}

  .field{margin-bottom:20px;}
  .field label{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; opacity:0.7;}
  .field .req{color:var(--ember);}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea{
    width:100%; padding:13px 14px; border:1px solid rgba(27,27,31,0.2); border-radius:9px; background:#fff;
    font-family:var(--body); font-size:15px; color:var(--charcoal);
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold-dim); outline-offset:1px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:600px){.field-row{grid-template-columns:1fr;}}

  .file-field{
    border:1.5px dashed rgba(27,27,31,0.25); border-radius:10px; padding:18px; font-size:13px; opacity:0.75; text-align:center; cursor:pointer;
  }
  .file-field input{display:none;}
  .file-field.has-file{border-color:var(--gold-dim); background:rgba(232,185,63,0.08); opacity:1;}

  .fest-count{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
    font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
  }
  .fest-count .num{font-weight:700; color:var(--ember);}
  .fest-count .num.ok{color:#3d7a4a;}
  .chip-grid{display:flex; flex-wrap:wrap; gap:9px;}
  .chip{
    font-family:var(--mono); font-size:12.5px; padding:9px 14px; border-radius:8px; border:1px solid rgba(27,27,31,0.2);
    cursor:pointer; user-select:none; background:#fff;
  }
  .chip.picked{background:var(--charcoal); color:#fff; border-color:var(--charcoal);}
  .chip.disabled{opacity:0.3; pointer-events:none;}

  .radio-row, .check-row{display:flex; flex-wrap:wrap; gap:10px;}
  .pill-option{
    font-family:var(--body); font-size:14px; padding:10px 16px; border-radius:8px; border:1px solid rgba(27,27,31,0.2);
    cursor:pointer; background:#fff;
  }
  .pill-option.picked{background:var(--gold); border-color:var(--gold-dim); font-weight:600;}

  .step-nav{display:flex; justify-content:space-between; margin-top:36px; align-items:center;}
  .step-nav .keycap.ghost{border-color:rgba(27,27,31,0.25); color:var(--charcoal);}
  .step-nav .keycap.ghost:hover{color:var(--ember); border-color:var(--ember);}

  .summary-block{background:#fff; border-radius:12px; padding:22px; margin-bottom:14px; border:1px solid rgba(27,27,31,0.12);}
  .summary-block h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; opacity:0.6;}
  .summary-block p{font-size:14px; line-height:1.6;}

  .order-total{
    display:flex; justify-content:space-between; align-items:center; background:var(--charcoal); color:#fff;
    padding:22px 24px; border-radius:12px; margin:22px 0;
  }
  .order-total .amt{font-family:var(--mono); font-size:26px; color:var(--gold);}

  .thankyou-screen{text-align:center; padding:40px 10px;}
  .thankyou-screen .keycap-visual{width:120px; height:120px; font-size:48px; margin-bottom:28px;}

  footer{padding:40px 24px; text-align:center; font-family:var(--mono); font-size:12px; opacity:0.4;}
  .hidden{display:none !important;}