:root{
      --bg: #f8f6fb;
      --card:#ffffff;
      --accent:#8b5cf6;
      --accent-2:#a78bfa;
      --muted:#7a7a7a;
      --radius:16px;
      --max-width:1200px;
      --shadow: 0 6px 20px rgba(139,92,246,0.15);
      --glass: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--bg);
      color:#111;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    .container{
      max-width:var(--max-width);
      margin:40px auto;
      padding:10px;
      display:grid;
      grid-template-columns:1fr 200px;
      gap:28px;
      align-items:start;
    }

    /* left big panel */
    .panel{
      background:var(--glass);
      border-radius:20px;
      padding:34px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:visible;
    }

    /* vertical Honey label */
    .vertical-label{
      position:absolute;
      left:-64px;
      top:50px;
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-weight:700;
      font-size:40px;
      color:rgba(0,0,0,0.08);
      letter-spacing:2px;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;
    }
    .logo{
      width: 100px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff
    }
    nav{display:flex;gap:18px;align-items:center}
    nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}

    .hero{
      display:grid;
      grid-template-columns: 1fr 380px;
      gap:20px;
      align-items:center;
      margin-top:26px;
    }

    .hero-left{
      padding-right:12px;
    }
    .kicker{color:var(--accent);font-weight:700;letter-spacing:0.6px}
    h1{font-size:44px;margin:8px 0 10px}
    p.lead{color:var(--muted);max-width:60%;line-height:1.6}

    .hero-right{
      display:flex;align-items:center;justify-content:center;position:relative;
    }
    .jar{
      width:100%;max-width:400px;height:500px;border-radius:20px;background:linear-gradient(180deg,#f3f0ff,#ede9fe);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px rgba(139,92,246,0.25);position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.03);
    }
    /* dripping honey effect (decorative) */
    .drip{position:absolute;top:-10px;left:38%;width:70px;height:220px;background:linear-gradient(180deg,#e9d5ff,#c4b5fd);border-radius:40px 40px 12px 12px;transform:skewX(-12deg);filter:blur(0.2px);opacity:0.95}

    /* feature cards row */
    .features{display:flex;gap:16px;margin-top:28px}
    .feature{background:var(--card);padding:18px;border-radius:12px;flex:1;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
    .feature h4{margin:0}
    .feature small{color:var(--muted)}

    /* lightning sale */
    .sale{background:linear-gradient(180deg,#faf9ff,#f5f3ff);padding:20px;border-radius:14px;margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
    .countdown{font-weight:700;letter-spacing:1px}
    .btn{background:var(--accent);color:white;padding:12px 18px;border-radius:10px;border:0;font-weight:700;cursor:pointer}

    /* right column */
    .aside{background:var(--card);padding:20px;border-radius:20px;box-shadow:var(--shadow);position:sticky;top:40px}
    .product-list{display:grid;gap:12px}
    .product{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px}
    .product img{width:60px;height:60px;border-radius:10px;object-fit:cover}
    .price{color:var(--accent);font-weight:800}

    /* testimonials */
    .testimonials{margin-top:18px}
    .testimonial{display:flex;gap:12px;align-items:center}
    .avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#fff,#fff);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}

    /* FAQ */
    .faq{margin-top:18px}
    .faq-item{background:linear-gradient(180deg,#fff,#fff);border-radius:12px;padding:12px;margin-bottom:8px}
    .faq-item button{display:flex;justify-content:space-between;width:100%;background:none;border:none;padding:0;font-weight:700;font-size:14px}
    .faq-item p{margin:8px 0 0;color:var(--muted)}

    footer{margin-top:20px;color:var(--muted);font-size:13px;text-align:center}

    /* hamburger menu styles */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-around;
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 10;
    }

    .hamburger span {
      width: 24px;
      height: 3px;
      background: #333;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: var(--card);
      box-shadow: var(--shadow);
      z-index: 9;
      transition: right 0.3s ease;
      padding: 80px 20px 20px;
      flex-direction: column;
      gap: 20px;
    }

    .mobile-menu.active {
      right: 0;
    }

    .mobile-menu a {
      color: #333;
      text-decoration: none;
      font-weight: 600;
      padding: 12px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mobile-menu a:hover {
      color: var(--accent);
    }

    .mobile-menu .btn {
      margin-top: 10px;
    }

    /* responsive */
    @media (max-width:1000px){
      .container{grid-template-columns:1fr 320px;padding:18px}
      .hero{grid-template-columns:1fr 280px}
      .panel{padding:20px}
    }
    @media (max-width:820px){
      .container{grid-template-columns:1fr;padding:16px}
      .panel{padding:18px}
      .hero{grid-template-columns:1fr}
      p.lead{max-width:100%}
      .vertical-label{display:none}
      .hero-right{order: -1}
      nav{display:none}
      .hamburger{display:flex}
      .mobile-menu{display:flex}
      .mobile-nav{display:flex;align-items:center;gap:12px}
      .aside{position:relative;top:auto}
    }

    /* small screens */
    @media (max-width:420px){
      h1{font-size:28px}
      .jar{height:220px}
      .hero-right{padding-bottom:14px}
    }