.app{
      width:min(100%, 860px);
      margin:0 auto;
      padding-bottom:92px;
      background:
        radial-gradient(circle at 85% 8%, rgba(245,181,27,.08), transparent 20%),
        linear-gradient(#06090a,#050708 40%);
      min-height:100vh;
    }

    
    
    
    
    
    

    main{padding:24px 28px 8px}
    .title-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
    .back{color:var(--gold);font-size:34px;text-decoration:none}
    h1{font-size:34px;margin:0}
    .hero{
      display:grid;
      grid-template-columns:90px 1fr 220px;
      align-items:center;
      gap:18px;
      border:1px solid var(--line);
      border-radius:14px;
      min-height:155px;
      padding:22px 24px;
      background:linear-gradient(90deg,#0c1012,#0d1113 72%,#14100a);
      overflow:hidden;
      margin-bottom:28px;
    }
    .help-icon{
      width:62px;height:62px;border:2px solid var(--gold);border-radius:50%;
      display:grid;place-items:center;font-size:30px;color:var(--gold);
    }
    .hero p{font-size:20px;line-height:1.5;margin:0;color:#f2f2f2}
    .product-art{
      height:135px;
      display:grid;
      place-items:center;
      position:relative;
      color:var(--gold);
    }
    .product-art:before{
      content:"";
      position:absolute;
      width:170px;height:170px;border-radius:50%;
      background:radial-gradient(circle,rgba(245,181,27,.35),rgba(245,181,27,.06) 45%,transparent 66%);
    }
    .jar{
      width:130px;height:72px;border-radius:14px 14px 26px 26px;
      background:linear-gradient(#212529,#080909);
      border:1px solid #363c40;
      box-shadow:0 10px 30px rgba(0,0,0,.5);
      position:relative;
    }
    .jar:before{
      content:"VIP CLUB";
      position:absolute;left:29px;top:-19px;
      width:72px;height:46px;display:grid;place-items:center;
      background:#d6a74b;color:#17130d;font-size:10px;font-weight:800;
      clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);
    }
    .jar:after{
      content:"GUMMY  •  HARD WAX";
      position:absolute;left:14px;right:14px;bottom:10px;
      font-size:9px;font-weight:700;text-align:center;color:#eee;
    }

    h2{font-size:23px;margin:0 0 14px}
    .faq{
      border:1px solid var(--line);
      border-radius:14px;
      overflow:hidden;
      background:linear-gradient(180deg,#0c1012,#090c0e);
      margin-bottom:22px;
    }
    details{border-bottom:1px solid #30363a}
    details:last-child{border-bottom:0}
    summary{
      list-style:none;
      cursor:pointer;
      display:grid;
      grid-template-columns:60px 1fr 24px;
      align-items:center;
      min-height:96px;
      padding:16px 22px;
      gap:16px;
    }
    summary::-webkit-details-marker{display:none}
    .faq-icon{
      width:50px;height:50px;border:1px solid #5a5140;border-radius:50%;
      display:grid;place-items:center;color:var(--gold);font-size:23px;
    }
    .q{font-size:20px;font-weight:700;margin-bottom:7px}
    .short{font-size:15px;color:#e5e6e7;line-height:1.4}
    .chev{color:var(--gold);font-size:28px;transition:.2s transform}
    details[open] .chev{transform:rotate(180deg)}
    .answer{
      padding:0 26px 20px 98px;
      color:var(--muted);
      line-height:1.55;
      font-size:15px;
    }

    .contact{
      border:1px solid var(--line);
      border-radius:14px;
      padding:26px;
      display:grid;
      grid-template-columns:1fr 1.55fr;
      gap:32px;
      background:linear-gradient(180deg,#0c1012,#090c0e);
    }
    .eyebrow{font-size:18px;font-weight:700;margin-bottom:4px}
    .contact h3{font-size:36px;color:var(--gold);margin:0 0 14px}
    .contact p{margin:0 0 24px;font-size:17px}
    .contact-item{display:grid;grid-template-columns:46px 1fr;gap:12px;margin:22px 0;align-items:start}
    .contact-item .ico{
      width:44px;height:44px;border:1px solid #645c47;border-radius:50%;
      display:grid;place-items:center;color:var(--gold);font-size:22px
    }
    .contact-item b{display:block;color:var(--gold);margin-bottom:4px}
    .contact-item span{font-size:14px;line-height:1.5;color:#f0f0f0}
    form{display:grid;gap:12px}
    input,select,textarea{
      width:100%;background:#0b0f11;color:#fff;border:1px solid #3a4145;
      border-radius:7px;padding:16px;font-size:16px;outline:none
    }
    textarea{min-height:125px;resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:var(--gold)}
    button{
      border:0;border-radius:7px;background:linear-gradient(90deg,#f3ad14,#ffc33a);
      color:#101010;font-weight:800;font-size:20px;padding:17px;cursor:pointer
    }
    .success{display:none;margin-top:4px;color:#9ce34a;font-size:14px}
    .contact-alert{
      padding:12px 14px;
      border-radius:8px;
      font-size:14px;
      line-height:1.4;
    }
    .contact-alert-ok{
      border:1px solid #3d6a2a;
      background:rgba(40,80,28,.28);
      color:#9ce34a;
    }
    .contact-alert-err{
      border:1px solid #87332f;
      background:rgba(116,20,17,.24);
      color:#ff746b;
    }

    
    
    
    

    @media(max-width:680px){
      
      
      
      
      main{padding:18px 16px 5px}
      h1{font-size:28px}
      .title-row{gap:10px}
      .hero{grid-template-columns:58px 1fr 110px;gap:10px;padding:16px;min-height:128px}
      .help-icon{width:48px;height:48px;font-size:23px}
      .hero p{font-size:16px;line-height:1.4}
      .product-art{height:105px}
      .product-art:before{width:120px;height:120px}
      .jar{width:92px;height:54px}
      .jar:before{left:20px;top:-13px;width:52px;height:34px;font-size:7px}
      .jar:after{left:8px;right:8px;font-size:6px}
      h2{font-size:20px}
      summary{grid-template-columns:48px 1fr 20px;padding:13px 14px;min-height:84px;gap:10px}
      .faq-icon{width:43px;height:43px;font-size:20px}
      .q{font-size:17px}
      .short{font-size:13px}
      .answer{padding:0 16px 17px 72px;font-size:14px}
      .contact{grid-template-columns:1fr;gap:8px;padding:20px}
      .contact h3{font-size:30px}
      .contact p{font-size:15px}
      
      
      
    }