/* BeatBar · общие стили всех страниц beatlandfood.com. Страничные стили — inline в самой странице. */
  :root { --cream:#fff6e2; --ink:#2b1b5e; --ink2:#5b4a99; --violet:#7c3aed; --lime:#4efa50; --lime-d:#24b027; --sun:#ffd84a; --pink:#ff5fae;
    --choco:#ff5a36; --choco-d:#b8321a; --cookie:#8e4dff; --cookie-d:#5b21b6; --coco:#2d9bff; --coco-d:#0b5fc7; --pad:clamp(18px,4vw,56px); }
  * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html { scroll-behavior:smooth; }
  html,body { overflow-x:clip; }
  body { background:var(--cream); color:var(--ink); font:400 1.05rem/1.6 Rubik,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  img { display:block; max-width:100%; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
  h1,h2,h3,.fr { font-family:Fredoka,Rubik,sans-serif; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 var(--pad); }
  :focus-visible { outline:4px solid var(--ink); outline-offset:3px; border-radius:12px; }
  section { scroll-margin-top:90px; }

  .nav { position:fixed; z-index:60; top:14px; left:50%; transform:translateX(-50%); width:min(1100px,calc(100% - 24px)); background:var(--ink); color:#fff; border-radius:999px; box-shadow:0 10px 28px rgba(43,27,94,.35); display:flex; align-items:center; gap:clamp(10px,3vw,34px); padding:9px 10px 9px 24px; }
  .nav .logo img { height:34px; width:auto; }
  .nav .links { display:flex; gap:clamp(14px,2.4vw,32px); flex:1; }
  .nav .links a { font:600 1rem/1 Fredoka,sans-serif; padding:10px 0; border-bottom:3px solid transparent; }
  .nav .links a:hover { border-color:var(--lime); }
  .lang { display:flex; background:rgba(255,255,255,.14); border-radius:999px; padding:3px; }
  .lang button { font:600 .8rem/1 Fredoka,sans-serif; padding:8px 11px; border-radius:999px; color:#fff; }
  .lang button[aria-pressed=true] { background:#fff; color:var(--ink); }
  .nav .go { background:var(--lime); color:#0d2a0e; font:700 .92rem/1 Fredoka,sans-serif; letter-spacing:.04em; padding:13px 20px; border-radius:999px; box-shadow:0 3px 0 var(--lime-d); white-space:nowrap; }
  @media (max-width:820px) { .nav .links { display:none; } .nav { justify-content:space-between; padding-left:18px; } .nav .go { display:none; } .nav .logo { margin-right:auto; } }

  .pill { display:inline-flex; align-items:center; gap:8px; font:600 1rem/1 Fredoka,sans-serif; letter-spacing:.03em; padding:16px 26px; border-radius:999px; cursor:pointer; transition:transform .15s; }
  .pill:hover { transform:translateY(-2px); } .pill:active { transform:translateY(2px); }
  .pill.v { background:var(--ink); color:#fff; box-shadow:0 4px 0 #170d3a; }
  .pill.g { background:var(--lime); color:#0d2a0e; box-shadow:0 4px 0 var(--lime-d); }
  .pill.w { background:#fff; color:var(--ink); box-shadow:0 4px 0 rgba(43,27,94,.18); }

  /* shared headings */
  h2 { font-weight:700; font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.02; text-align:center; letter-spacing:-.01em; }
  .sub2 { text-align:center; color:var(--ink2); max-width:560px; margin:12px auto 0; }

  /* language blocks: html[lang] switches data-lang content */
  html[lang=id] [data-lang=en], html:not([lang=id]) [data-lang=id] { display:none !important; }

  footer { margin-top:clamp(60px,8vw,100px); background:var(--ink); color:#d9d0ff; padding:54px 0 70px; font-size:.9rem; border-radius:clamp(30px,5vw,60px) clamp(30px,5vw,60px) 0 0; }
  footer .cols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; }
  @media (max-width:1000px) { footer .cols { grid-template-columns:1fr 1fr; } }
  footer img { height:44px; margin-bottom:14px; }
  footer b { display:block; color:#fff; font:600 1rem/1 Fredoka,sans-serif; margin-bottom:12px; letter-spacing:.04em; }
  footer a { display:block; margin:7px 0; } footer a:hover { color:#fff; }
  @media (max-width:760px) { footer .cols { grid-template-columns:1fr; } }

  /* burger + mobile menu */
  .burger { display:none; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); place-items:center; position:relative; flex:none; }
  .burger i { position:absolute; left:12px; right:12px; height:3px; border-radius:3px; background:#fff; transition:transform .25s,opacity .2s,top .25s; }
  .burger i:nth-child(1) { top:15px; } .burger i:nth-child(2) { top:21px; } .burger i:nth-child(3) { top:27px; }
  .burger[aria-expanded=true] i:nth-child(1) { top:21px; transform:rotate(45deg); } .burger[aria-expanded=true] i:nth-child(2) { opacity:0; } .burger[aria-expanded=true] i:nth-child(3) { top:21px; transform:rotate(-45deg); }
  .mnav { display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; background:var(--ink); border-radius:28px; padding:14px 14px 16px; box-shadow:0 18px 40px rgba(43,27,94,.4); flex-direction:column; gap:4px; }
  .mnav.open { display:flex; animation:mdrop .22s cubic-bezier(.3,1.4,.5,1); }
  @keyframes mdrop { from { opacity:0; transform:translateY(-8px) scale(.98); } }
  .mnav a { font:600 1.15rem/1 Fredoka,sans-serif; padding:14px 16px; border-radius:16px; }
  .mnav a:hover { background:rgba(255,255,255,.1); }
  @media (max-width:820px) { .burger { display:grid; } .nav .mnav .go { display:inline-flex; justify-content:center; margin-top:8px; padding:15px 20px; } }

  /* Beatland Universe: six doors */
  .uni { padding:clamp(70px,9vw,120px) 0 0; }
  .doors { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
  .door { position:relative; display:block; aspect-ratio:4/3; border-radius:28px; overflow:hidden; background:var(--ink); color:#fff; box-shadow:0 14px 30px -14px rgba(43,27,94,.45); transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s; isolation:isolate; }
  .door img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
  .door::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,50,0) 38%,rgba(20,10,50,.9) 100%); }
  .door .dt { position:absolute; left:20px; right:20px; bottom:18px; z-index:1; }
  .door .dn, .door .dh, .door .dd { display:block; }
  .door .dn { font:600 .72rem/1 Fredoka,sans-serif; letter-spacing:.18em; opacity:.8; }
  .door .dh { font:700 1.6rem/1 Fredoka,sans-serif; letter-spacing:.02em; margin:6px 0 4px; }
  .door .dd { font:400 .9rem/1.3 Rubik,sans-serif; color:#e6defe; }
  .door .dg { position:absolute; right:16px; top:16px; z-index:1; width:40px; height:40px; border-radius:50%; background:var(--lime); color:#0d2a0e; display:grid; place-items:center; font:700 1.2rem/1 Fredoka,sans-serif; box-shadow:0 3px 0 var(--lime-d); transition:transform .3s; }
  .door:hover { transform:translateY(-8px); box-shadow:0 24px 40px -16px rgba(43,27,94,.5); } .door:hover img { transform:scale(1.05); } .door:hover .dg { transform:rotate(-20deg) scale(1.1); }
  @media (max-width:860px) { .doors { grid-template-columns:repeat(2,1fr); gap:12px; } .door { border-radius:22px; } .door .dt { left:14px; right:14px; bottom:12px; } .door .dh { font-size:1.25rem; } .door .dd { font-size:.8rem; } .door .dg { width:32px; height:32px; right:10px; top:10px; font-size:1rem; } }
  @media (max-width:420px) { .door .dd { display:none; } }

  /* footer socials */
  .soc { display:flex; gap:10px; margin:14px 0 10px; }
  footer .soc a { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); margin:0; color:#fff; transition:transform .15s,background .15s; }
  footer .soc a:hover { background:var(--lime); color:#0d2a0e; transform:translateY(-2px); }
  .soc svg { width:20px; height:20px; fill:currentColor; }

  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

  /* FLAVOUR BANDS */
  .flavours { padding-top:clamp(70px,9vw,120px); }
  .band { position:relative; margin-top:clamp(40px,6vw,80px); padding:clamp(48px,7vw,96px) 0; color:#fff; overflow:hidden; border-radius:clamp(30px,5vw,64px); }
  .band.choco { background:radial-gradient(80% 90% at 20% 30%,#ff8a4c,var(--choco) 55%,#c63a1f); }
  .band.cookie { background:radial-gradient(80% 90% at 80% 30%,#b38aff,var(--cookie) 55%,#5b21b6); }
  .band.coco { background:radial-gradient(80% 90% at 20% 30%,#7ed0ff,var(--coco) 55%,#0b5fc7); }
  .band .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,5vw,70px); align-items:center; }
  .band.cookie .wrap { grid-template-columns:1fr 1.05fr; } .band.cookie .vis { order:2; }
  .vis { position:relative; aspect-ratio:1/1; max-width:540px; width:100%; margin:0 auto; }
  .vis .ring { position:absolute; inset:-2%; width:104%; max-width:none; animation:spin 80s linear infinite; }
  .vis .pk { position:absolute; left:-12%; right:-12%; top:50%; transform:translateY(-50%) rotate(-7deg); transition:transform .25s cubic-bezier(.3,1.7,.5,1); filter:drop-shadow(0 22px 20px rgba(0,0,0,.35)); }
  .band.cookie .pk { transform:translateY(-50%) rotate(6deg); }
  .vis .pk.hit { animation:hit2 .26s; } @keyframes hit2 { 40% { scale:1.08; } }
  .vis button { position:absolute; inset:0; z-index:2; }
  .tx .no { font:600 .9rem/1 Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; opacity:.9; }
  .tx h3 { font:700 clamp(2.4rem,5.4vw,4.2rem)/.98 Fredoka,sans-serif; margin:10px 0 6px; letter-spacing:-.01em; }
  .tx .sb { font:600 1.25rem/1.2 Fredoka,sans-serif; opacity:.95; margin-bottom:18px; }
  .inside { font:600 .8rem/1 Fredoka,sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin:6px 0 10px; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chips span { background:rgba(255,255,255,.95); color:var(--ink); font:600 .95rem/1 Fredoka,sans-serif; padding:10px 16px; border-radius:999px; box-shadow:0 3px 0 rgba(0,0,0,.14); }
  .tx .al { font-size:.82rem; opacity:.9; margin-top:14px; max-width:460px; }
  .beat { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; }
  .beat .play { background:#fff; color:var(--ink); font:700 1rem/1 Fredoka,sans-serif; letter-spacing:.04em; padding:15px 24px; border-radius:999px; box-shadow:0 4px 0 rgba(0,0,0,.22); display:inline-flex; gap:9px; align-items:center; transition:transform .15s; }
  .beat .play:active { transform:translateY(3px); }
  .beat .pat { display:flex; gap:6px; flex-wrap:wrap; }
  .beat .pat i { font:700 .85rem/1 Fredoka,sans-serif; font-style:normal; background:rgba(0,0,0,.2); padding:8px 10px; border-radius:10px; transition:.1s; }
  .beat .pat i.on { background:#fff; color:var(--ink); transform:translateY(-4px) scale(1.12); }
  .w30 { display:inline-block; margin-top:18px; font:600 .95rem/1 Fredoka,sans-serif; background:rgba(0,0,0,.22); padding:9px 14px; border-radius:999px; }
  @media (max-width:860px) { .band .wrap, .band.cookie .wrap { grid-template-columns:1fr; } .band.cookie .vis { order:0; } .vis { max-width:420px; } .tx { text-align:left; } }

  /* sub-pages: privacy, terms, partners, press, scan */
  .page { padding:clamp(110px,14vw,150px) 0 40px; }
  .page .wrap { max-width:840px; }
  .crumb { font:600 .8rem/1 Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); margin-bottom:18px; }
  .crumb a:hover { color:var(--violet); }
  .page h1 { font:700 clamp(2.4rem,6.5vw,4.4rem)/.98 Fredoka,sans-serif; letter-spacing:-.02em; margin-bottom:16px; }
  .page .lead { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink2); max-width:640px; }
  .page .upd { display:inline-block; margin-top:18px; font:600 .78rem/1 Fredoka,sans-serif; letter-spacing:.12em; text-transform:uppercase; background:#fff; padding:9px 14px; border-radius:999px; box-shadow:0 4px 0 rgba(43,27,94,.12); }
  .page h2 { text-align:left; font-size:clamp(1.45rem,3vw,2.1rem); margin:44px 0 12px; }
  .page h3 { font:700 1.15rem/1.2 Fredoka,sans-serif; margin:26px 0 8px; }
  .page p, .page li { color:#3f2f7a; }
  .page p { margin:0 0 12px; }
  .page ul { margin:0 0 14px 20px; } .page li { margin:4px 0; }
  .page a { text-decoration:underline; text-decoration-color:rgba(124,58,237,.35); text-underline-offset:3px; } .page a:hover { color:var(--violet); }
  .page .note { background:#fff; border-radius:22px; padding:18px 22px; box-shadow:0 10px 24px -14px rgba(43,27,94,.3); margin:28px 0; font-size:.95rem; }
  .page .card { background:#fff; border-radius:26px; padding:24px 26px; box-shadow:0 14px 30px -16px rgba(43,27,94,.35); margin:18px 0; }
  .page table { width:100%; border-collapse:collapse; font-size:.95rem; } .page td, .page th { text-align:left; padding:10px 8px; border-bottom:1px solid rgba(43,27,94,.1); vertical-align:top; } .page th { font:600 .78rem/1 Fredoka,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
  .page .pill { text-decoration:none; }