:root{
    --bg:#07050d;
    --bg-2:#100822;
    --ink:#f4f2ff;
    --ink-dim:#a39db8;
    --ink-mute:#6b6481;
    --line:rgba(255,255,255,.07);
    --line-2:rgba(255,255,255,.12);
    --violet:#8b5cf6;
    --violet-2:#a855f7;
    --magenta:#e879f9;
    --cyan:#22d3ee;
    --gold:#f5c97a;
    --grad:linear-gradient(135deg,#a855f7 0%,#e879f9 50%,#22d3ee 100%);
    --grad-soft:linear-gradient(135deg,rgba(168,85,247,.18),rgba(34,211,238,.12));
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{min-height:100vh;overflow-x:hidden;font-feature-settings:"ss01","cv11"}

  /* ===== Ambient background ===== */
  .bg{position:fixed;inset:0;z-index:-2;background:
    radial-gradient(1200px 600px at 80% -10%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, rgba(232,121,249,.18), transparent 55%),
    linear-gradient(180deg,#0a0612 0%,#07050d 100%);
  }
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  .orb{position:fixed;border-radius:50%;filter:blur(80px);z-index:-1;opacity:.35;animation:float 18s ease-in-out infinite alternate}
  .orb.a{width:420px;height:420px;background:#a855f7;top:-120px;left:-140px}
  .orb.b{width:340px;height:340px;background:#22d3ee;bottom:-120px;right:-120px;animation-delay:-8s;opacity:.25}
  @keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.1)}}

  /* ===== Layout ===== */
  .wrap{max-width:560px;margin:0 auto;padding:28px 20px 56px;position:relative}

  /* ===== Header ===== */
  .nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .pill .live{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.4}}
  .lang{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
  .lang span{font-size:11px;padding:5px 10px;border-radius:999px;color:var(--ink-mute);letter-spacing:.1em}
  .lang span.on{background:rgba(255,255,255,.08);color:var(--ink)}

.hero{text-align:left;padding:8px 0 28px;position:relative}
  
  .mark{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  
  .mark-logo{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    /* Maknuli smo background, border-radius i box-shadow */
    position:relative;
  }
  
  /* Dodajemo ovo da tvoj logo (slika) popuni prostor bez deformacije */
  .mark-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mark-name{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:.02em;font-size:16px}
  
  .mark-loc{font-size:11px;color:var(--ink-mute);letter-spacing:.18em;text-transform:uppercase;margin-top:2px}

  h1.title{font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(40px,11vw,58px);line-height:.95;letter-spacing:-.03em;margin:6px 0 0}
  h1.title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
  .sub{margin-top:14px;color:var(--ink-dim);font-size:14px;line-height:1.55;max-width:36ch}

  .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
  .badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
  .badge svg{width:13px;height:13px;color:var(--violet-2)}

  /* ===== Featured (Nargila) ===== */
  .featured{margin-top:32px;position:relative;border-radius:24px;padding:1px;background:linear-gradient(135deg,rgba(168,85,247,.6),rgba(232,121,249,.3) 40%,rgba(34,211,238,.4));overflow:hidden}
  .featured-inner{border-radius:23px;padding:22px 20px;background:linear-gradient(160deg,#15092e 0%,#0a0518 100%);position:relative;overflow:hidden}
  .featured-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 90% 0%,rgba(232,121,249,.25),transparent 60%);pointer-events:none}
  .featured-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
  .featured-tag::before{content:"";width:18px;height:1px;background:var(--magenta)}
  .featured-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:1}
  .featured-row h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:28px;letter-spacing:-.02em;margin:0;line-height:1}
  .featured-row .sm{font-size:12px;color:var(--ink-mute);letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
  .featured-price{text-align:right}
  .featured-price .num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:34px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
  .featured-price .cur{font-size:11px;color:var(--ink-mute);letter-spacing:.2em;margin-top:4px}

  .flavors{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;position:relative;z-index:1}
  .flv{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;font-weight:500}
  .flv .swatch{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
/* Prvih 3 - tvoje postojeće + ljubičasta kao primarna */
.flv:nth-child(1) .swatch { background: #bc13fe; box-shadow: 0 0 10px #bc13fe; } /* Exclusive Purple */
.flv:nth-child(2) .swatch { background: #86efac; box-shadow: 0 0 10px #86efac; } /* Mint Green */
.flv:nth-child(3) .swatch { background: #fb7185; box-shadow: 0 0 10px #fb7185; } /* Rose Pink */

/* Dodatnih 9 boja za kompletan set od 12 */
.flv:nth-child(4) .swatch { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; } /* Sky Blue */
.flv:nth-child(5) .swatch { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; } /* Amber Gold */
.flv:nth-child(6) .swatch { background: #a3e635; box-shadow: 0 0 10px #a3e635; } /* Lime */
.flv:nth-child(7) .swatch { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; } /* Cyan Neon */
.flv:nth-child(8) .swatch { background: #f472b6; box-shadow: 0 0 10px #f472b6; } /* Hot Pink */
.flv:nth-child(9) .swatch { background: #fb923c; box-shadow: 0 0 10px #fb923c; } /* Orange */
.flv:nth-child(10) .swatch { background: #818cf8; box-shadow: 0 0 10px #818cf8; } /* Indigo */
.flv:nth-child(11) .swatch { background: #2dd4bf; box-shadow: 0 0 10px #2dd4bf; } /* Teal */
.flv:nth-child(12) .swatch { background: #f87171; box-shadow: 0 0 10px #f87171; } /* Soft Red */
  .flv:nth-child(4) .swatch{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
  .featured-foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
  .featured-foot svg{width:14px;height:14px;color:var(--gold)}
/* TVOJ POSTOJEĆI KOD OSTAJE ISTI ZA OSNOVU */
.featured{margin-top:32px;position:relative;border-radius:24px;padding:1px;background:linear-gradient(135deg,rgba(168,85,247,.6),rgba(232,121,249,.3) 40%,rgba(34,211,238,.4));overflow:hidden}
.featured-inner{border-radius:23px;padding:22px 20px;background:linear-gradient(160deg,#15092e 0%,#0a0518 100%);position:relative;overflow:hidden}
.featured-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 90% 0%,rgba(232,121,249,.25),transparent 60%);pointer-events:none}

/* ======== NOVI KOD ZA SLIKU U POZADINI ======== */
.featured-image-bg {
    position: absolute;
    top: 50%;
    right: -10%; /* Možeš staviti right: 0 ili left: 50% zavisno gdje tačno želiš da stoji */
    transform: translateY(-50%); /* Centrirano po visini */
    height: 130%; /* Slika će biti velika preko cijelog boxa */
    z-index: 0; /* Z-index 0 je drži IZA okusa */
    opacity: 0.15; /* Smanjeno na 15% providnosti da boxovi dođu do izražaja! Povećaj na 0.3 ako želiš jače */
    pointer-events: none; /* Da korisnik ne može slučajno kliknuti sliku */
}

.featured-image-bg img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 50px rgba(188, 19, 254, 1)); /* Jak ljubičasti glow efekat */
}

/* ======== OSTATAK MOGU BITI TVOJI STILOVI (samo bitno da imaju z-index: 1) ======== */
.featured-tag, .featured-row, .flavors, .featured-foot {
    position: relative;
    z-index: 1; /* OVO JE BITNO - da sav tekst i boxovi budu IZNAD slike */
}

.featured-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
.featured-tag::before{content:"";width:18px;height:1px;background:var(--magenta)}
.featured-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.featured-row h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:28px;letter-spacing:-.02em;margin:0;line-height:1}
.featured-row .sm{font-size:12px;color:var(--ink-mute);letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.featured-price{text-align:right}
.featured-price .num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:34px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.featured-price .cur{font-size:11px;color:var(--ink-mute);letter-spacing:.2em;margin-top:4px}

.flavors{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.flv{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;font-weight:500;backdrop-filter: blur(2px);} /* Dodat i blur na boxove da bolje izbiju iznad slike */
.flv .swatch{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}

/* Boje za okuse - ostaviš one koje sam ti poslao maloprije */
.flv:nth-child(1) .swatch { background: #bc13fe; box-shadow: 0 0 10px #bc13fe; }
.flv:nth-child(2) .swatch { background: #86efac; box-shadow: 0 0 10px #86efac; }
.flv:nth-child(3) .swatch { background: #fb7185; box-shadow: 0 0 10px #fb7185; }
/* ... (kopiraj ostale boje iz prethodne poruke) ... */

.featured-foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.featured-foot svg{width:14px;height:14px;color:var(--gold)}
  /* ===== Sections ===== */
  .section{margin-top:34px}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .sec-head h3{font-family:'Unbounded',sans-serif;font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:10px}
  .sec-head h3 .num{color:var(--ink-mute);font-weight:500;font-size:11px}
  .sec-head .sec-sub{font-size:10px;color:var(--ink-mute);letter-spacing:.2em;text-transform:uppercase}

  .items{list-style:none;margin:0;padding:0}
  .item{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}
  .item:last-child{border-bottom:none}
  .item .name{flex:1;min-width:0}
  .item .name .n{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
  .item .name .s{display:block;font-size:11px;color:var(--ink-mute);margin-top:3px;letter-spacing:.04em;font-style:italic}
  .item .price{font-family:'Unbounded',sans-serif;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:.01em;white-space:nowrap;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
  .item:hover .price{background:var(--grad-soft);border-color:rgba(168,85,247,.3)}

  /* ===== Footer ===== */
  .footer{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
  .thanks{font-family:'Unbounded',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
  .thanks-en{font-size:11px;color:var(--ink-mute);letter-spacing:.25em;text-transform:uppercase;margin-top:6px}
  .socials{display:flex;justify-content:center;gap:10px;margin-top:18px}
  .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-dim);transition:.2s}
  .socials a:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px)}
  .socials svg{width:16px;height:16px}
  .legal{margin-top:22px;font-size:10px;color:var(--ink-mute);letter-spacing:.18em;text-transform:uppercase;line-height:1.8}

  @media (max-width:380px){
    h1.title{font-size:42px}
    .featured-row h2{font-size:24px}
    .featured-price .num{font-size:28px}