/* ====== Design Tokens ====== */
    :root{
      --bg:#0b0a0a;           /* near-black */
      --bg-2:#111010;         /* slightly lighter */
      --text:#f4f1ea;         /* ivory */
      --muted:#cfc6b8;        /* warm beige */
      --gold:#c9a34a;         /* royal gold */
      --gold-2:#e6c472;       /* lighter gold */
      --card:#181716;         /* card background */
      --accent:#9d7a2f;       /* accent */
      --radius:20px;
      --maxw:1200px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --hero-image:url('images/cleopatra_banner.png');
      /* ^ Replace with your high-quality hero image */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:linear-gradient(180deg, #0a0a0a 0%, #0f0e0e 100%);
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--maxw); margin-inline:auto; padding:0 24px}

    /* ====== Top Nav ====== */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: saturate(120%) blur(8px);
      background:rgba(10,10,10,.6);
      border-bottom:1px solid rgba(201,163,74,.25);
    }
    .nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}
    .brand-mark{width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--gold-2), var(--gold)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
    .nav-actions{display:flex; gap:8px}

    .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; font-weight:600; border:1px solid transparent; transition:all .2s ease; cursor:pointer}
    .btn-primary{background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#1a1a1a; box-shadow:var(--shadow)}
    .btn-primary:hover{transform:translateY(-1px); filter:saturate(110%)}
    .btn-ghost{border-color:rgba(201,163,74,.35); color:var(--muted); background:transparent}
    .btn-ghost:hover{border-color:var(--gold-2); color:var(--text)}

    /* ====== Hero ====== */
    .hero {
  position: relative;
  min-height: 85vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
    .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  filter: grayscale(.05) contrast(1.05) brightness(.75);
}
    .hero::after{content:""; position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 0%, rgba(201,163,74,.25), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.85))}
    .hero-content{position:relative; padding:64px 0}
    .eyebrow{display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(201,163,74,.15); border:1px solid rgba(201,163,74,.35); color:var(--gold-2); font-weight:600; letter-spacing:.3px; margin-bottom:16px}
    .title{font-size: clamp(32px, 5vw, 56px); line-height:1.1; margin:0 0 12px; text-shadow:0 2px 20px rgba(0,0,0,.5)}
    .subtitle{font-size: clamp(16px, 2.2vw, 22px); color:var(--muted); max-width:900px; margin:0 auto 24px}
    .slogan{font-style:italic; color:var(--gold-2); margin:16px 0 28px}
    .hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

    /* Optional: hero video overlay (replace src below + uncomment element) */
    .hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; filter:contrast(1.1) saturate(105%)}

    /* ====== Sections ====== */
    section{padding:64px 0; border-top:1px solid rgba(255,255,255,.06)}
    .section-header{margin-bottom:28px}
    h2{font-size: clamp(24px, 3.5vw, 36px); margin:0 0 6px}
    .section-sub{color:var(--muted); margin:0}

    /* Intro card */
    .intro{background:linear-gradient(180deg, rgba(201,163,74,.12), rgba(201,163,74,.04)); border-top:1px solid rgba(201,163,74,.25)}
    .intro .card{background:rgba(255,255,255,.03); border:1px solid rgba(201,163,74,.25); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}

    /* Story */
    .story-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
    .story-box{background:var(--card); border:1px solid rgba(201,163,74,.2); border-radius:var(--radius); padding:24px}
    .story-visual {
  background: url('images/cleopatra_story_visual.png') center/cover no-repeat;
  border-radius: 20px;
  min-height: 450px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

    /* Testimonials */
    .quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
    .quote{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:22px; border-radius:var(--radius)}
    .quote .who{color:var(--gold-2); font-weight:600; margin-top:8px}

    /* Products */
    .products{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
    .product{background:var(--card); border:1px solid rgba(201,163,74,.2); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
    .product img{aspect-ratio: 4/3; object-fit:cover}
    .product .content{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1}
    .product .name{font-weight:700}
    .product .cta-row{margin-top:auto; display:flex; gap:10px}

    /* Benefits */
    .benefits{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
    .benefit{display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.03); border:1px solid rgba(201,163,74,.22); padding:16px; border-radius:14px}
    .benefit svg{flex:0 0 22px}

    /* Final CTA */
    .cta-final{background:linear-gradient(135deg, rgba(201,163,74,.2), rgba(201,163,74,.05)); text-align:center}

    /* Footer */
    footer{padding:36px 0; color:#a89f90; text-align:center}

    /* Responsive tweaks */
    @media (max-width: 900px){
      .story-grid{grid-template-columns:1fr}
    }