:root {
      --bg: #020617;
      --bg-soft: #040826;
      --card: #050b2a;
      --primary: #facc15;
      --accent: #4f46e5;
      --accent-soft: rgba(79,70,229,0.25);
      --text-main: #f9fafb;
      --text-muted: #9ca3af;
      --border-subtle: rgba(148,163,184,.35);
      --radius-lg: 18px;
      --radius-xl: 26px;
      --radius-pill: 999px;
      --shadow-soft: 0 20px 50px rgba(15,23,42,.9);
      --t: 220ms ease;
      --sidebar-width: 230px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100vh;
      background:
        radial-gradient(circle at 0% 0%, #111827 0, #020617 55%, #000 100%);
      color: var(--text-main);
      scroll-behavior: smooth;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ---------- FLOATING LEFT SIDEBAR (GLASS) ---------- */

    .sidebar {
      position: fixed;
      top: 1.5rem;
      left: 1rem;
      bottom: 1.5rem;
      width: var(--sidebar-width);
      border-radius: 24px;
      padding: 1.1rem 1rem 1rem;
      background:
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.9));
      background: radial-gradient(circle at 0 0, rgba(148,163,184,.15), transparent 55%),
                  linear-gradient(145deg, rgba(15,23,42,.98), rgba(15,23,42,.92));
      border: 1px solid rgba(148,163,184,.4);
      box-shadow: 0 26px 60px rgba(15,23,42,1);
      backdrop-filter: blur(26px);
      -webkit-backdrop-filter: blur(26px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 40;
      transition: transform var(--t), opacity var(--t);
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: 1.4rem;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background:
        conic-gradient(from 210deg,
          #22c1c3,
          #facc15,
          #fb7185,
          #4f46e5,
          #22c1c3);
      box-shadow: 0 0 22px rgba(250,204,21,.55);
      color: #020617;
      font-weight: 700;
      font-size: .9rem;
    }

    .brand-meta {
      font-size: .78rem;
      line-height: 1.2;
    }

    .brand-meta strong {
      font-size: .95rem;
      letter-spacing: .18em;
    }

    .brand-meta small {
      display: block;
      color: var(--text-muted);
      letter-spacing: .1em;
    }

    .nav-links {
      margin-top: .8rem;
      padding-top: .8rem;
      border-top: 1px solid rgba(148,163,184,.35);
      display: flex;
      flex-direction: column;
      gap: .4rem;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .16em;
    }

    .nav-links a {
      position: relative;
      color: var(--text-muted);
      padding: .45rem .7rem;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition:
        color var(--t),
        background var(--t),
        transform var(--t),
        box-shadow var(--t);
    }

    .nav-links a i {
      font-size: .8rem;
      opacity: .9;
    }

    .nav-links a span.label {
      flex: 1;
      white-space: nowrap;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: radial-gradient(circle at 0 0, rgba(250,204,21,.22), transparent 55%);
      opacity: 0;
      transition: opacity var(--t);
      pointer-events: none;
    }

    .nav-links a:hover {
      color: var(--text-main);
      background: rgba(15,23,42,.9);
      box-shadow: 0 0 18px rgba(250,204,21,.2);
      transform: translateX(1px);
    }

    .nav-links a:hover::after {
      opacity: 1;
    }

    .nav-links a.active {
      color: #fefce8;
      background: radial-gradient(circle at top left, rgba(250,204,21,.26), rgba(15,23,42,.98));
      box-shadow: 0 0 22px rgba(250,204,21,.35);
    }

    .nav-links a.active::after {
      opacity: 1;
    }

    .sidebar-footer {
      margin-top: 1.2rem;
      padding-top: .9rem;
      border-top: 1px solid rgba(148,163,184,.35);
      font-size: .72rem;
      color: var(--text-muted);
    }

    .sidebar-footer .btn-whatsapp {
      margin-bottom: .65rem;
      border-radius: 999px;
      padding: .5rem .75rem;
      border: 1px solid rgba(34,197,94,.7);
      background: linear-gradient(120deg, rgba(22,163,74,.95), rgba(16,185,129,.85));
      color: #ecfdf5;
      font-size: .76rem;
      display: flex;
      align-items: center;
      gap: .4rem;
      cursor: pointer;
      box-shadow: 0 14px 32px rgba(22,163,74,.6);
      transition: transform var(--t), box-shadow var(--t);
    }

    .sidebar-footer .btn-whatsapp i {
      font-size: .9rem;
    }

    .sidebar-footer .btn-whatsapp:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 42px rgba(22,163,74,.7);
    }

    .sidebar-footer small {
      display: block;
      line-height: 1.4;
    }

    /* ---------- MOBILE TOP BAR ---------- */

    .mobile-topbar {
      position: fixed;
      inset: 0 0 auto 0;
      height: 56px;
      padding: 0 .9rem;
      display: none;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(to bottom,
        rgba(15,23,42,.96),
        rgba(15,23,42,.9),
        rgba(15,23,42,.7));
      border-bottom: 1px solid rgba(148,163,184,.4);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 45;
    }

    .mobile-top-left {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .mobile-logo {
      width: 26px;
      height: 26px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background:
        conic-gradient(from 210deg,
          #22c1c3,
          #facc15,
          #4f46e5,
          #22c1c3);
      font-size: .75rem;
      font-weight: 700;
      color: #020617;
    }

    .mobile-label {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .16em;
    }

    .mobile-menu-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.65);
      background: rgba(15,23,42,.9);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--text-main);
      font-size: 1rem;
      box-shadow: 0 12px 24px rgba(15,23,42,1);
      transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    }

    .mobile-menu-btn:hover {
      transform: translateY(-1px);
      border-color: var(--primary);
      box-shadow: 0 18px 32px rgba(15,23,42,1);
    }

    /* ---------- MAIN CONTENT ---------- */

    .page {
      max-width: 1180px;
      margin: 0 auto;
      padding: 2.1rem 1.25rem 4rem;
      margin-left: calc(var(--sidebar-width) + 2rem);
    }

    /* ---------- HERO ---------- */

    .hero {
      padding: .8rem 0 3.2rem;
      display: grid;
      grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
      gap: 2.4rem;
      align-items: center;
      position: relative;
    }

    .hero-glow {
      position: absolute;
      inset: -150px -230px auto auto;
      background:
        radial-gradient(circle at 0 0, rgba(250,204,21,.16), transparent 60%),
        radial-gradient(circle at 70% 0, rgba(59,130,246,.22), transparent 60%);
      filter: blur(24px);
      opacity: .85;
      pointer-events: none;
      z-index: -1;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .25rem .6rem .25rem .25rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: radial-gradient(circle at top left,
        rgba(56,189,248,.24),
        rgba(15,23,42,.9));
      font-size: .7rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }

    .hero-eyebrow span.badge {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: radial-gradient(circle at 20% 0, #f97316, #facc15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #020617;
      box-shadow: 0 0 18px rgba(248,250,252,.7);
      font-size: .62rem;
    }

    .hero-title {
      font-size: clamp(2.4rem,3.2vw + 1.4rem,3.4rem);
      line-height: 1.04;
      margin-bottom: .9rem;
    }

    .hero-title span.highlight {
      background-image: linear-gradient(115deg,#f97316,#facc15,#4f46e5);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-sub {
      font-size: .95rem;
      color: var(--text-muted);
      max-width: 29rem;
      line-height: 1.6;
      margin-bottom: 1.4rem;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-bottom: 1.7rem;
      font-size: .74rem;
    }

    .chip {
      padding: .35rem .7rem;
      border-radius: 24px;
      border: 1px solid rgba(148,163,184,.55);
      background: radial-gradient(circle at top, rgba(15,23,42,.92), rgba(15,23,42,.82));
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      color: var(--text-muted);
    }
    .chip i { font-size: .72rem; color: var(--primary); }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      align-items: center;
      margin-bottom: 1.2rem;
    }

    .btn-primary,
    .btn-ghost {
      border-radius: var(--radius-pill);
      padding: .7rem 1.35rem;
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border: 1px solid rgba(148,163,184,.65);
      position: relative;
      overflow: hidden;
      transition:
        transform var(--t),
        box-shadow var(--t),
        border-color var(--t),
        background var(--t),
        color var(--t);
    }

    .btn-primary {
      border-color: rgba(250,204,21,.7);
      background: radial-gradient(circle at top left,#f97316,#facc15);
      color: #111827;
      box-shadow: 0 14px 32px rgba(250,204,21,.5);
    }

    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(255,255,255,.7), transparent 55%);
      opacity: 0;
      transition: opacity .25s ease;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 40px rgba(250,204,21,.55);
    }
    .btn-primary:hover::after { opacity: 1; }

    .btn-ghost {
      background: radial-gradient(circle at top, rgba(15,23,42,.96), rgba(15,23,42,.86));
      color: var(--text-main);
    }

    .btn-ghost:hover {
      border-color: var(--accent);
      background: radial-gradient(circle at top, rgba(37,99,235,.4), rgba(15,23,42,.96));
      box-shadow: 0 0 22px rgba(59,130,246,.5);
      transform: translateY(-1px);
    }

    .hero-meta {
      font-size: .75rem;
      color: var(--text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      align-items: center;
    }

    .hero-meta strong { color: var(--primary); }
    .hero-meta span.dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(148,163,184,.7);
    }

    /* Right hero visual */

    .hero-right { position: relative; }

    .hero-card {
      border-radius: var(--radius-xl);
      background: radial-gradient(circle at top,#020617,#020617 35%,#000 100%);
      border: 1px solid rgba(148,163,184,.5);
      padding: 1.3rem 1.2rem 1.1rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .spark-orbit {
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 10% 0, rgba(249,115,22,.4), transparent 60%),
        radial-gradient(circle at 90% 5%, rgba(96,165,250,.4), transparent 60%),
        radial-gradient(circle at 50% 110%, rgba(250,204,21,.22), transparent 60%);
      mix-blend-mode: screen;
      opacity: .85;
      filter: blur(14px);
      animation: orbitGlow 18s linear infinite alternate;
      pointer-events: none;
    }

    @keyframes orbitGlow {
      0% { transform: translate3d(-12px,-8px,0) rotate(0deg); }
      100% { transform: translate3d(14px,8px,0) rotate(1deg); }
    }

    .hero-tag {
      position: absolute;
      top: 1rem;
      right: 1rem;
      padding: .3rem .7rem;
      font-size: .72rem;
      border-radius: 999px;
      background: rgba(16,185,129,.12);
      border: 1px solid rgba(16,185,129,.55);
      color: #a7f3d0;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      z-index: 2;
    }

    .hero-tag i { font-size: .7rem; }

    .bottle-stack {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: .7rem;
      margin-bottom: 1rem;
    }

    .bottle-shell {
      width: 94px;
      height: 180px;
      border-radius: 24px 24px 18px 18px;
      border: 1px solid rgba(148,163,184,.7);
      background: radial-gradient(circle at top, rgba(148,163,184,.6), #020617 45%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .bottle-shell:nth-child(2) {
      transform: translateY(10px);
      opacity: .95;
    }

    .bottle-neck-shape {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      width: 46px;
      height: 24px;
      border-radius: 999px 999px 10px 10px;
      border: 1px solid rgba(148,163,184,.7);
      background: radial-gradient(circle at top,#e5e7eb,#020617 65%);
    }

    .bottle-liquid {
      width: 84%;
      border-radius: 18px 18px 14px 14px;
      position: relative;
      overflow: hidden;
      animation: liquidPulse 6s ease-in-out infinite;
    }

    .bottle-liquid::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 10% 0,rgba(248,250,252,.5),transparent 45%);
      mix-blend-mode: screen;
    }

    .bottle-liquid.gold {
      height: 60%;
      background: linear-gradient(180deg,#fefce8,#f97316,#92400e);
    }

    .bottle-liquid.night {
      height: 46%;
      background: linear-gradient(180deg,#e5e7eb,#6366f1,#020617);
    }

    .bottle-liquid.ember {
      height: 52%;
      background: linear-gradient(180deg,#f9a8d4,#f97316,#450a0a);
    }

    @keyframes liquidPulse {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .hero-caption {
      margin-top: .3rem;
      padding-top: .8rem;
      border-top: 1px dashed rgba(148,163,184,.5);
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      font-size: .72rem;
      color: var(--text-muted);
      position: relative;
      z-index: 2;
    }

    .hero-caption strong { color: var(--primary); }
    .hero-caption small {
      display: block;
      color: #6ee7b7;
      margin-bottom: .2rem;
    }

    .hero-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: .2rem;
    }

    .mini-chip {
      padding: .15rem .55rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: rgba(15,23,42,.9);
    }

    /* ---------- Sections ---------- */

    section { margin-top: 3.3rem; }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 1.5rem;
      align-items: flex-end;
      margin-bottom: 1.4rem;
    }

    .section-title {
      font-size: 1.05rem;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .section-mainline {
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: .25rem;
    }

    .section-kicker {
      font-size: .84rem;
      color: var(--text-muted);
      max-width: 18rem;
      line-height: 1.5;
    }

    .pill-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .72rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      padding: .28rem .8rem;
      color: var(--text-muted);
    }

    .pill-pill i { font-size: .7rem; color: var(--primary); }

    /* ---------- Bollywood grid ---------- */

    .grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 1.1rem;
    }

    .card {
      background: radial-gradient(circle at 0 0, #111827, #020617 55%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      position: relative;
      isolation: isolate;
      box-shadow: var(--shadow-soft);
      transform: translateY(0);
      transition:
        transform var(--t),
        box-shadow var(--t),
        border-color var(--t),
        background var(--t);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 0 0, rgba(250,204,21,.25), transparent 60%),
        radial-gradient(circle at 100% 0, rgba(96,165,250,.2), transparent 60%);
      opacity: 0;
      mix-blend-mode: screen;
      transition: opacity .25s ease;
      pointer-events: none;
    }

    .card:hover {
      transform: translateY(-7px);
      box-shadow: 0 24px 50px rgba(15,23,42,1);
      border-color: rgba(250,204,21,.4);
      background: radial-gradient(circle at top,#020617,#020617 40%,#000 100%);
    }
    .card:hover::before { opacity: 1; }

    .card-media {
      height: 170px;
      position: relative;
      overflow: hidden;
    }

    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(1.12) contrast(1.02);
      transition: transform .8s ease, filter .8s ease;
    }
    .card:hover .card-media img {
      transform: scale(1.08);
      filter: saturate(1.35) contrast(1.08) brightness(1.02);
    }

    .card-badge {
      position: absolute;
      inset: auto 10px 10px 10px;
      padding: .35rem .7rem;
      border-radius: 18px;
      background: linear-gradient(110deg,rgba(15,23,42,.95),rgba(15,23,42,.76));
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
      font-size: .72rem;
      border: 1px solid rgba(148,163,184,.55);
    }

    .card-body {
      padding: .85rem .9rem 1rem;
      font-size: .8rem;
    }

    .card-body h3 {
      font-size: .92rem;
      margin-bottom: .25rem;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-bottom: .4rem;
    }

    .tag {
      padding: .18rem .5rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      font-size: .7rem;
      color: var(--text-muted);
    }

    .card-body p {
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: .6rem;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .75rem;
      color: var(--text-muted);
    }

    .card-footer strong { color: var(--primary); }

    .pill-link {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .32rem .7rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      cursor: pointer;
      transition:
        border-color var(--t),
        background var(--t),
        color var(--t);
    }

    .card:hover .pill-link {
      border-color: rgba(250,204,21,.65);
      background: rgba(24,24,27,.8);
      color: var(--text-main);
    }

    /* ---------- Blend / Tailor fit ---------- */

    .split {
      display: grid;
      grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
      gap: 1.6rem;
      align-items: center;
    }

    .copy p {
      font-size: .86rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .bullet-list {
      list-style: none;
      font-size: .82rem;
      color: var(--text-muted);
      display: grid;
      gap: .35rem;
      margin-bottom: 1rem;
    }

    .bullet-list li {
      display: flex;
      align-items: flex-start;
      gap: .45rem;
    }

    .bullet-list i {
      margin-top: .12rem;
      font-size: .72rem;
      color: var(--primary);
    }

    .copy .note {
      font-size: .75rem;
      color: #a5b4fc;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .32rem .7rem;
      border-radius: 999px;
      background: linear-gradient(120deg,rgba(79,70,229,.25),rgba(15,23,42,1));
      border: 1px solid rgba(79,70,229,.75);
    }

    .reactor {
      border-radius: 26px;
      background: radial-gradient(circle at 20% 0, rgba(96,165,250,.6), #020617 55%);
      border: 1px solid rgba(129,140,248,.7);
      padding: 1rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 42px rgba(15,23,42,1);
      isolation: isolate;
    }

    .reactor-topline {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: .75rem;
      margin-bottom: .7rem;
      color: #e5e7eb;
    }

    .reactor-topline small { color: #bfdbfe; }

    .reactor-gauge {
      height: 14px;
      border-radius: 999px;
      background: rgba(15,23,42,.95);
      border: 1px solid rgba(148,163,184,.55);
      margin-bottom: .7rem;
      position: relative;
      overflow: hidden;
    }

    .reactor-gauge-fill {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,#22c55e,#facc15,#f97316);
      width: 60%;
      border-radius: inherit;
      transform-origin: left center;
      animation: gaugeFlow 7s ease-in-out infinite;
    }

    @keyframes gaugeFlow {
      0%,100% { transform: scaleX(.62); }
      50% { transform: scaleX(.96); }
    }

    .reactor-bottle {
      margin-top: .4rem;
      display: flex;
      justify-content: center;
      gap: .8rem;
      align-items: flex-end;
    }

    .reactor-bottle-shell {
      width: 78px;
      height: 148px;
      border-radius: 22px 22px 14px 14px;
      border: 1px solid rgba(191,219,254,.9);
      background: radial-gradient(circle at top, rgba(191,219,254,.86), #020617 42%);
      position: relative;
      overflow: hidden;
    }

    .reactor-neck {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 34px;
      height: 18px;
      border-radius: 999px 999px 10px 10px;
      border: 1px solid rgba(191,219,254,.9);
      background: radial-gradient(circle at top,#e5e7eb,#020617 65%);
    }

    .reactor-liquid {
      position: absolute;
      inset: auto 8px 8px 8px;
      border-radius: 16px 16px 12px 12px;
      background: linear-gradient(180deg,#fefce8,#facc15,#4b5563);
      overflow: hidden;
    }

    .reactor-liquid::after {
      content: "";
      position: absolute;
      inset: -22% -4% auto -4%;
      background: linear-gradient(180deg,rgba(255,255,255,.9),transparent 60%);
      mix-blend-mode: screen;
    }

    .reactor-pulse {
      position: absolute;
      inset: 16% 6%;
      border-radius: 26px;
      border: 1px dashed rgba(191,219,254,.6);
      opacity: .3;
      animation: pulseOutline 7s ease-out infinite;
    }

    @keyframes pulseOutline {
      0% { transform: scale(.97); opacity: .45; }
      50% { transform: scale(1.04); opacity: .15; }
      100% { transform: scale(1.02); opacity: .35; }
    }

    /* ---------- Signature bottles ---------- */

    .signature-row {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 1rem;
    }

    .sig-card {
      background: radial-gradient(circle at top,#020617,#020617 40%,#000 100%);
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,.55);
      padding: .75rem .75rem 1rem;
      font-size: .78rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 35px rgba(15,23,42,.92);
      transform: translateY(0);
      transition:
        transform var(--t),
        box-shadow var(--t),
        border-color var(--t);
    }

    .sig-card:hover {
      transform: translateY(-6px);
      border-color: rgba(250,204,21,.5);
      box-shadow: 0 20px 40px rgba(15,23,42,1);
    }

    .sig-top {
      display: flex;
      justify-content: space-between;
      font-size: .72rem;
      color: var(--text-muted);
      margin-bottom: .4rem;
    }

    .sig-bottle {
      width: 52px;
      height: 110px;
      margin: .35rem auto .45rem;
      border-radius: 18px 18px 14px 14px;
      border: 1px solid rgba(148,163,184,.75);
      background: radial-gradient(circle at top,rgba(148,163,184,.86),#020617 40%);
      position: relative;
      overflow: hidden;
    }

    .sig-fill {
      position: absolute;
      inset: auto 6px 6px 6px;
      border-radius: 14px 14px 10px 10px;
      background: linear-gradient(180deg,#fefce8,#f97316,#7c2d12);
    }
    .sig-fill.dark {
      background: linear-gradient(180deg,#e5e7eb,#4b5563,#020617);
    }
    .sig-fill.rose {
      background: linear-gradient(180deg,#f9a8d4,#f97316,#4a044e);
    }

    .sig-name { font-size: .82rem; margin-bottom: .1rem; }
    .sig-notes { font-size: .72rem; color: var(--text-muted); margin-bottom: .4rem; }

    .sig-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .74rem;
      color: var(--text-muted);
    }

    .sig-foot strong { color: var(--primary); }

    .sig-pill {
      padding: .22rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      cursor: pointer;
      transition: border-color var(--t), background var(--t);
    }

    .sig-card:hover .sig-pill {
      border-color: rgba(250,204,21,.6);
      background: rgba(24,24,27,.8);
    }

    /* ---------- Dawat / invite ---------- */

    .invite-wrap {
      display: grid;
      grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
      gap: 1.6rem;
      align-items: center;
    }

    .invite-copy p {
      font-size: .86rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .invite-points {
      list-style: none;
      display: grid;
      gap: .4rem;
      font-size: .8rem;
      color: var(--text-muted);
      margin-bottom: 1.1rem;
    }

    .invite-points li {
      display: flex;
      align-items: flex-start;
      gap: .4rem;
    }

    .invite-points i {
      margin-top: .15rem;
      font-size: .7rem;
      color: #f97316;
    }

    .invite-note {
      font-size: .76rem;
      color: #fed7aa;
    }

    .invite-card {
      width: 260px;
      height: 360px;
      margin-inline: auto;
      border-radius: 24px;
      background: radial-gradient(circle at top,#f5f5f4,#e5e7eb 40%,#d6d3d1 100%);
      color: #111827;
      box-shadow: 0 22px 46px rgba(15,23,42,1);
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      animation: inviteFloat 7.5s ease-in-out infinite;
    }

    @keyframes inviteFloat {
      0%,100% { transform: translateY(0) rotate3d(0,1,0,0deg); }
      50% { transform: translateY(-10px) rotate3d(0,1,0,7deg); }
    }

    .invite-inner {
      padding: 1.3rem;
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100%;
      position: relative;
      z-index: 1;
    }

    .invite-topline {
      font-size: .74rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #6b7280;
    }

    .invite-title {
      margin-top: .4rem;
      font-size: 1.26rem;
      font-weight: 700;
    }

    .invite-body {
      font-size: .82rem;
      color: #4b5563;
      margin-top: .55rem;
      line-height: 1.6;
    }

    .invite-footer {
      margin-top: .8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .75rem;
      color: #4b5563;
    }

    .invite-perfume {
      width: 54px;
      height: 88px;
      border-radius: 18px 18px 12px 12px;
      background: linear-gradient(180deg,#f97316,#facc15);
      box-shadow: 0 10px 24px rgba(248,113,113,.75);
      position: relative;
      overflow: hidden;
    }

    .invite-perfume::before {
      content: "";
      position: absolute;
      inset: -10% -15% auto -15%;
      background: linear-gradient(180deg,rgba(255,255,255,.92),transparent 60%);
      opacity: .9;
    }

    .invite-haze {
      position: absolute;
      inset: 55% -20% -10% -20%;
      background:
        radial-gradient(circle at 0 0, rgba(249,115,22,.3), transparent 55%),
        radial-gradient(circle at 100% 50%, rgba(244,114,182,.25), transparent 55%);
      mix-blend-mode: soft-light;
      opacity: .9;
    }

    /* ---------- Reveal on scroll ---------- */

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 480ms ease, transform 480ms ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ---------- Footer ---------- */

    footer {
      border-top: 1px solid rgba(148,163,184,.35);
      padding: 1.3rem 0 0;
      margin-top: 3rem;
    }

    .foot-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 1.25rem 1.4rem;
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      justify-content: space-between;
      font-size: .75rem;
      color: var(--text-muted);
      align-items: center;
    }

    .foot-links {
      display: flex;
      gap: .9rem;
    }

    .foot-links a {
      position: relative;
    }

    .foot-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 1px;
      background: rgba(148,163,184,.7);
      transition: width var(--t);
    }
    .foot-links a:hover::after { width: 100%; }

    /* ---------- Responsive ---------- */

    @media (max-width: 960px) {
      .sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: 260px;
        border-radius: 0 24px 24px 0;
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
      }
      .sidebar.open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
      }

      .mobile-topbar {
        display: flex;
      }

      .page {
        margin-left: 0;
        padding-top: 4.2rem;
      }

      .hero {
        padding-top: 0.4rem;
        grid-template-columns: minmax(0,1fr);
        gap: 2rem;
      }
      .hero-right { order: -1; }
      .hero-card { max-width: 320px; margin-inline: auto; }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }
      .split,
      .invite-wrap {
        grid-template-columns: minmax(0,1fr);
      }
      .signature-row {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: minmax(0,1fr);
      }
      .signature-row {
        grid-template-columns: minmax(0,1fr);
      }
      .invite-card {
        width: 100%;
        max-width: 260px;
      }
    }
  

  .hero-video {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hero-video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) contrast(1.1);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(0,0,0,0.65) 25%,
      rgba(0,0,0,0.3) 70%,
      rgba(0,0,0,0.1) 100%);
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 650px;
}

.cinematic-title {
  font-size: 2.9rem;
  line-height: 1.2;
  animation: slideUp 1.1s ease forwards;
}

.movie-line {
  font-size: 1.2rem;
  font-weight: 300;
  color: #cbd5e1;
  opacity: 0.9;
}

.cinematic-sub {
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 1.2s ease 0.8s forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease 1.4s forwards;
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* --- ROSE GOLD THEME VARIABLES --- */
.theme-rose {
  --bg-color: #1a0f0f;         /* Deep warm brownish-black */
  --sidebar-bg: #261414;       /* Slightly lighter dark brown */
  --text-main: #fff0f0;        /* Soft white with pink tint */
  --text-muted: #d4b8b8;       /* Muted pink-grey */
  --accent-color: #d4af37;     /* Classic Gold */
  --primary-btn: #c27ba0;      /* Rose Gold/Dusty Pink */
  --primary-btn-hover: #a05a7e;
  --border-color: #4a2c2c;
}

/* Apply variables to the sidebar if the body has the class */
body.theme-rose .sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
}

body.theme-rose .nav-links a {
  color: var(--text-muted);
}

body.theme-rose .nav-links a.active,
body.theme-rose .nav-links a:hover {
  background: rgba(194, 123, 160, 0.15); /* Rose tint background */
  color: var(--primary-btn);
  border-left: 3px solid var(--primary-btn);
}

/* Update Buttons for the Rose Theme */
body.theme-rose .btn-primary {
  background-color: var(--primary-btn);
  color: #fff;
  border: none;
}

body.theme-rose .btn-primary:hover {
  background-color: var(--primary-btn-hover);
}

body.theme-rose .highlight {
  color: var(--accent-color); /* Gold text for highlights */
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

body.theme-rose .chip {
  border: 1px solid var(--primary-btn);
  color: var(--text-main);
  background: rgba(194, 123, 160, 0.1);
}

/* --- Popup styles --- */
.movie-popup { position:fixed; inset:0; display:none; justify-content:center; align-items:center; z-index:60; }
.movie-popup.show { display:flex; }
.popup-bg { position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(14px); }
.popup-box { position:relative; width:92%; max-width:980px; background:rgba(15,23,42,.95); border-radius:22px; padding:1.7rem; border:1px solid rgba(148,163,184,.6); box-shadow:0 24px 80px rgba(0,0,0,.9); animation:popIn .4s ease; }
@keyframes popIn { 0%{opacity:0;transform:scale(.8);} 100%{opacity:1;transform:scale(1);} }
.popup-close { position:absolute; top:.8rem; right:.9rem; width:28px; height:28px; border-radius:999px; border:1px solid rgba(148,163,184,.7); background:rgba(15,23,42,.95); color:#e5e7eb; display:grid; place-items:center; cursor:pointer; font-size:.8rem; }
.popup-title { font-size:1.4rem; font-weight:600; margin-bottom:.25rem; }
.popup-popular { display:inline-flex; align-items:center; gap:.3rem; background:#ef4444; padding:.32rem .7rem; border-radius:999px; font-size:.8rem; color:#fef2f2; margin-bottom:.9rem; }
.popup-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.popup-bottle-wrap { text-align:center; border-radius:18px; padding:1rem; background:radial-gradient(circle at 0 0,rgba(56,189,248,.2),transparent 60%), radial-gradient(circle at 100% 100%,rgba(250,204,21,.2),transparent 60%), rgba(15,23,42,.98); border:1px solid rgba(148,163,184,.6); }
.popup-bottle { width:190px; max-width:80%; margin:0 auto .6rem; filter:drop-shadow(0 18px 28px rgba(0,0,0,.9)); }
.popup-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.popup-item { border-radius:16px; background:rgba(15,23,42,.95); border:1px solid rgba(148,163,184,.6); padding:.9rem; }
.order-btn { border-radius:999px; border:none; background:#22c55e; color:#022c22; padding:.38rem .8rem; font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }

.wizard-container {
  padding: 40px;
  color: #fff;
}

.wizard-layout {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.wizard-steps {
  width: 20%;
}

.wizard-steps ul {
  list-style: none;
  padding: 0;
}

.wizard-steps li {
  padding: 12px 0;
  opacity: 0.4;
  border-left: 4px solid #444;
  padding-left: 12px;
}

.wizard-steps li.active {
  opacity: 1;
  border-color: #f4c542;
  font-weight: bold;
}

.wizard-center {
  width: 30%;
  text-align: center;
}

.bottle-viewer img {
  width: 250px;
  animation: spin 6s infinite linear;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.wizard-panel {
  width: 30%;
}

.step {
  display: none;
  animation: fade .5s;
}

.step.active {
  display: block;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

select {
  width: 100%;
  padding: 12px;
  margin: 12px 0;
  background: #111;
  border: 1px solid #333;
  color: #fff;
  border-radius: 8px;
}

.wizard-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

#wizard-buttons button,
.wizard-buttons button {
  padding: 12px 20px;
  background: #f4c542;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}