<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Daouk Sweets Beirut | Daoukieh & Desserts</title>
  <style>
    :root{
      --bg:#0e0f13;
      --card:#141721;
      --accent:#c0ff72;
      --accent-2:#7dffda;
      --text:#e9ecf1;
      --muted:#9aa3b2;
      --ring: rgba(192,255,114,0.35);
      --grad: radial-gradient(1200px 600px at 80% -20%, rgba(125,255,218,0.07), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(192,255,114,0.06), transparent 60%);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:linear-gradient(180deg, #0b0c10 0%, #0e1016 100%);
      background-attachment: fixed;
    }
    .wrap{
      min-height:100dvh;
      display:flex;
      flex-direction:column;
      background: var(--grad);
      overflow-x:hidden;
    }

    /* Nav */
    .nav{
      position:sticky;
      top:0; z-index:50;
      backdrop-filter: blur(8px);
      background:linear-gradient(180deg, rgba(10,12,16,0.75), rgba(10,12,16,0.35));
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    .nav-in{
      max-width:1200px; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 20px;
    }
    .brand{
      display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text);
    }
    .logo{
      width:34px; height:34px; border-radius:10px;
      background: conic-gradient(from 140deg, var(--accent), var(--accent-2) 55%, #a7b8ff 85%, var(--accent));
      filter: saturate(120%);
      box-shadow: 0 0 0 3px rgba(192,255,114,0.15), 0 10px 30px -10px rgba(125,255,218,0.35);
    }
    .brand span{font-weight:700; letter-spacing:.4px}
    .nav-links{display:flex; gap:20px; align-items:center}
    .nav-links a{
      color:var(--muted); text-decoration:none; font-weight:500; letter-spacing:.2px;
      padding:8px 10px; border-radius:10px; transition:color .2s, background .2s;
    }
    .nav-links a:hover{color:var(--text); background:rgba(255,255,255,0.05)}
    .cta{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#0b0c10 !important; padding:10px 14px; border-radius:12px; font-weight:700;
      box-shadow: 0 8px 20px -10px var(--ring);
    }

    /* Hero */
    .hero{
      position:relative;
      padding:70px 20px 30px;
      display:grid; grid-template-columns:1.2fr 1fr; gap:40px;
      max-width:1200px; margin:0 auto;
    }
    @media (max-width: 940px){
      .hero{grid-template-columns:1fr; gap:28px; padding-top:50px}
    }
    .overline{
      display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--accent);
      background:rgba(192,255,114,0.08); padding:6px 10px; border:1px solid rgba(192,255,114,0.18);
      border-radius:999px;
    }
    .over-dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}
    h1{
      font-size:clamp(34px, 6vw, 56px); line-height:1.05; margin:14px 0 14px;
      letter-spacing:-.02em;
    }
    .sub{
      color:var(--muted); font-size:clamp(16px, 2.1vw, 18px); max-width:60ch;
    }
    .hero-cta{
      margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;
    }
    .btn{
      background:#1a1f2b; color:var(--text); padding:12px 16px; border-radius:12px; text-decoration:none; border:1px solid rgba(255,255,255,0.08);
    }
    .btn.alt{
      background:transparent; border-color:rgba(192,255,114,0.25); color:var(--accent);
    }

    /* Slider */
    .slider-shell{
      position:relative; isolation:isolate; border-radius:18px; overflow:hidden;
      background:linear-gradient(180deg, #121521, #0f121a);
      border:1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 60px -30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    .slider-head{
      display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
      border-bottom:1px solid rgba(255,255,255,0.06);
      background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
    }
    .slider-head .tabs{
      display:flex; gap:8px; flex-wrap:wrap;
    }
    .chip{
      padding:8px 10px; border-radius:999px; font-size:.85rem; color:var(--muted);
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    }
    .chip.active{ color:#0b0c10; background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; font-weight:700}

    /* Unique slider (pure CSS, 3D peel) */
    .carousel{
      position:relative; height:420px; overflow:hidden;
    }
    .slides{
      position:absolute; inset:0; display:grid; grid-template-columns:100% 100% 100%;
      width:300%; transition: transform .7s cubic-bezier(.22,.95,.24,1);
    }
    input[name="slide"]{display:none}
    #s1:checked ~ .carousel .slides{ transform: translateX(0%) }
    #s2:checked ~ .carousel .slides{ transform: translateX(-100%) }
    #s3:checked ~ .carousel .slides{ transform: translateX(-200%) }

    .slide{
      position:relative; overflow:hidden;
      perspective: 1200px;
    }
    .media{
      position:absolute; inset:0; display:grid; place-items:center;
      background:
        radial-gradient(600px 300px at 80% 0%, rgba(192,255,114,0.08), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(125,255,218,0.08), transparent 60%),
        linear-gradient(180deg, #10131c 0%, #090b11 100%);
    }
    .card3d{
      width:min(92%, 780px); aspect-ratio: 16/9; border-radius:18px; position:relative; overflow:hidden;
      border:1px solid rgba(255,255,255,0.08);
      transform: rotateX(6deg) rotateY(-6deg);
      transform-origin: 80% 20%;
      box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset;
      transition: transform .6s ease;
    }
    .slide:hover .card3d{ transform: rotateX(0deg) rotateY(0deg) }
    .img{
      position:absolute; inset:0; background-position:center; background-size:cover; filter: saturate(108%) contrast(105%);
      transform: scale(1.05);
    }
    .veil{
      position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%);
    }
    .caption{
      position:absolute; bottom:16px; left:16px; right:16px;
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    }
    .cap-left{
      max-width:72%;
    }
    .cap-title{font-size:clamp(18px, 3vw, 24px); font-weight:800; letter-spacing:.2px}
    .cap-sub{color:#cfd6e3; font-size:.95rem}
    .cap-badge{
      background:rgba(0,0,0,0.35); color:var(--accent); border:1px dashed rgba(192,255,114,0.45);
      padding:8px 10px; border-radius:10px; backdrop-filter: blur(4px);
      font-weight:700;
    }
    /* slide images placeholders - replace URLs with real images as needed */
    .img.d1{ background-image:url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1600&auto=format&fit=crop'); }
    .img.d2{ background-image:url('https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?q=80&w=1600&auto=format&fit=crop'); }
    .img.d3{ background-image:url('https://images.unsplash.com/photo-1551024709-8f23befc6cf7?q=80&w=1600&auto=format&fit=crop'); }

    /* Dots and arrows */
    .controls{
      position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
      display:flex; gap:10px; z-index:10;
    }
    .dot{
      width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,0.4);
      background:rgba(255,255,255,0.08); cursor:pointer; transition:all .25s ease;
    }
    #s1:checked ~ .carousel .controls label[for="s1"],
    #s2:checked ~ .carousel .controls label[for="s2"],
    #s3:checked ~ .carousel .controls label[for="s3"]{
      background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; box-shadow: 0 0 0 4px rgba(192,255,114,0.15);
    }
    .arrows{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; pointer-events:none;
    }
    .arrow{
      pointer-events:auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
      background:rgba(10,12,16,0.55); border:1px solid rgba(255,255,255,0.08);
      color:#fff; font-weight:900; user-select:none; cursor:pointer; transition:transform .1s ease, background .2s ease;
    }
    .arrow:hover{ background:rgba(10,12,16,0.8) }
    .arrow:active{ transform:scale(.98) }

    /* Sections */
    section{padding:70px 20px}
    .container{max-width:1200px; margin:0 auto}
    .grid{
      display:grid; grid-template-columns: repeat(12, 1fr); gap:22px;
    }
    .card{
      grid-column: span 4;
      background:var(--card); border:1px solid rgba(255,255,255,0.06);
      border-radius:16px; overflow:hidden;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .card:hover{
      transform: translateY(-4px);
      border-color: rgba(192,255,114,0.25);
      box-shadow: 0 20px 60px -40px rgba(0,0,0,0.6);
    }
    .thumb{aspect-ratio: 4/3; background:#0d0f14; background-position:center; background-size:cover}
    .thumb.dk{ background-image:url('https://images.unsplash.com/photo-1589717964321-0f634a4c27b1?q=80&w=1600&auto=format&fit=crop') }
    .thumb.kh{ background-image:url('https://images.unsplash.com/photo-1607876830570-3eb1c5bbf756?q=80&w=1600&auto=format&fit=crop') }
    .thumb.ma{ background-image:url('https://images.unsplash.com/photo-1606817660858-5d96ea83a9a6?q=80&w=1600&auto=format&fit=crop') }
    .p16{padding:16px}
    .title{font-weight:800; font-size:1.05rem; margin:0 0 6px}
    .meta{color:var(--muted); font-size:.95rem}
    @media (max-width: 980px){
      .card{grid-column: span 6}
    }
    @media (max-width: 640px){
      .card{grid-column: span 12}
    }

    /* Feature */
    .feature{
      display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center;
    }
    @media (max-width: 940px){ .feature{grid-template-columns:1fr} }
    .feature-visual{
      background:linear-gradient(180deg, #131826, #0c1018);
      border:1px solid rgba(255,255,255,0.06); border-radius:18px; overflow:hidden; position:relative;
      min-height:360px;
    }
    .ring{
      position:absolute; inset:auto; right:-90px; top:-90px;
      width:320px; height:320px; border-radius:50%;
      background: radial-gradient(circle at 30% 40%, rgba(192,255,114,0.3), transparent 45%), radial-gradient(circle at 70% 60%, rgba(125,255,218,0.25), transparent 50%);
      filter: blur(14px);
      opacity:.7;
    }
    .feature-visual .badge{
      position:absolute; left:16px; top:16px; background:rgba(0,0,0,0.4); color:var(--accent);
      border:1px dashed rgba(192,255,114,0.45); padding:8px 10px; border-radius:10px; backdrop-filter: blur(4px); font-weight:700;
    }
    .plate{
      position:absolute; inset:0; background-image:url('https://images.unsplash.com/photo-1542444459-db63c56cf882?q=80&w=1600&auto=format&fit=crop'); background-size:cover; background-position:center;
      filter: saturate(115%) contrast(104%);
    }
    .list{display:grid; gap:12px; margin-top:8px}
    .li{
      display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.06); padding:12px 14px; border-radius:12px;
    }
    .dotA{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); margin-top:6px}

    /* Footer */
    .footer{
      padding:30px 20px 60px; border-top:1px solid rgba(255,255,255,0.06);
      background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
    }
    .foot-in{max-width:1200px; margin:0 auto; display:grid; gap:16px}
    .foot-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px}
    @media (max-width: 860px){ .foot-grid{grid-template-columns:1fr} }
    .muted{color:var(--muted)}
    .pill{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
      border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03)
    }

    /* Subtle focus for accessibility */
    a, label, button{ outline:none }
    a:focus-visible, .arrow:focus-visible, .dot:focus-visible, .cta:focus-visible, .btn:focus-visible{
      box-shadow: 0 0 0 4px var(--ring);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header class="nav">
      <div class="nav-in">
        <a class="brand" href="#">
          <div class="logo"></div>
          <span>Daouk Sweets Beirut</span>
        </a>
        <nav class="nav-links">
          <a href="#signature">Daoukieh</a>
          <a href="#desserts">Desserts</a>
          <a href="#visit" class="cta">Visit Us</a>
        </nav>
      </div>
    </header>

    <main>
      <section class="hero">
        <div>
          <div class="overline"><span class="over-dot"></span> Since 1930 • Beirut Tradition</div>
          <h1>Legendary Daoukieh and Lebanese Desserts, Crafted in Beirut</h1>
          <p class="sub">Discover Daouk Sweets — home of the iconic Daoukieh. Pistachio-rich, silky ashta, and a delicate finish that’s become a Beirut essential. Explore our contemporary collection of classics and seasonal creations.</p>
          <div class="hero-cta">
            <a class="btn alt" href="#signature">Explore Daoukieh</a>
            <a class="btn" href="#desserts">Browse Desserts</a>
          </div>
        </div>

        <!-- Slider block -->
        <div class="slider-shell">
          <div class="slider-head">
            <div class="tabs">
              <span class="chip active">Signature</span>
              <span class="chip">Classics</span>
              <span class="chip">Seasonal</span>
            </div>
            <span class="chip" style="background:rgba(192,255,114,0.08); color:var(--accent); border-color:rgba(192,255,114,0.25)">Made fresh daily</span>
          </div>

          <!-- radio controls -->
          <input type="radio" name="slide" id="s1" checked>
          <input type="radio" name="slide" id="s2">
          <input type="radio" name="slide" id="s3">

          <div class="carousel">
            <div class="slides">
              <!-- Slide 1: Daoukieh -->
              <div class="slide">
                <div class="media">
                  <div class="card3d">
                    <div class="img d1"></div>
                    <div class="veil"></div>
                    <div class="caption">
                      <div class="cap-left">
                        <div class="cap-title">Daoukieh — The Beirut Original</div>
                        <div class="cap-sub">Rich layers of pistachio and rose-scented ashta. Balanced sweetness, exceptional texture.</div>
                      </div>
                      <div class="cap-badge">Signature</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Slide 2 -->
              <div class="slide">
                <div class="media">
                  <div class="card3d">
                    <div class="img d2"></div>
                    <div class="veil"></div>
                    <div class="caption">
                      <div class="cap-left">
                        <div class="cap-title">Baklava Assortment</div>
                        <div class="cap-sub">Crisp, buttery layers with pistachio, walnut, and cashew — a curated mix of our best.</div>
                      </div>
                      <div class="cap-badge">Classic</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Slide 3 -->
              <div class="slide">
                <div class="media">
                  <div class="card3d">
                    <div class="img d3"></div>
                    <div class="veil"></div>
                    <div class="caption">
                      <div class="cap-left">
                        <div class="cap-title">Maamoul & Seasonal Delights</div>
                        <div class="cap-sub">Semolina cookies filled with dates or pistachio, dusted to perfection — seasonal twists included.</div>
                      </div>
                      <div class="cap-badge">Seasonal</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- arrows implemented as labels to switch radios -->
            <div class="arrows" aria-hidden="true">
              <label class="arrow" for="s1" title="First">‹</label>
              <label class="arrow" for="s2" title="Second">›</label>
            </div>
            <div class="controls" aria-label="Slide controls">
              <label class="dot" for="s1"></label>
              <label class="dot" for="s2"></label>
              <label class="dot" for="s3"></label>
            </div>
          </div>
        </div>
      </section>

      <section id="signature">
        <div class="container feature">
          <div class="feature-visual">
            <div class="badge">Daoukieh</div>
            <div class="plate"></div>
            <div class="ring"></div>
          </div>
          <div>
            <div class="overline"><span class="over-dot"></span> House Specialty</div>
            <h2 style="margin:12px 0 10px; font-size:clamp(26px,4.4vw,36px)">Daoukieh: Pistachio. Ashta. Perfection.</h2>
            <p class="sub">Our Daoukieh is hand-layered with premium Antep pistachios and our signature ashta cream, lightly perfumed with orange blossom and rose water. Finished with a delicate syrup for a refined, modern bite.</p>
            <div class="list">
              <div class="li">
                <div class="dotA"></div>
                <div>
                  <div class="title" style="margin:0">Premium ingredients</div>
                  <div class="meta">Sourced pistachios, daily-made ashta, and balanced syrup for clarity of flavor.</div>
                </div>
              </div>
              <div class="li">
                <div class="dotA"></div>
                <div>
                  <div class="title" style="margin:0">Made fresh daily</div>
                  <div class="meta">Prepared in small batches to maintain the ideal texture and aroma.</div>
                </div>
              </div>
              <div class="li">
                <div class="dotA"></div>
                <div>
                  <div class="title" style="margin:0">Available by piece or tray</div>
                  <div class="meta">Perfect for gifts, celebrations, or a refined after-dinner treat.</div>
                </div>
              </div>
            </div>
            <div class="hero-cta" style="margin-top:18px">
              <a class="btn alt" href="#visit">Order / Visit</a>
            </div>
          </div>
        </div>
      </section>

      <section id="desserts">
        <div class="container">
          <div class="overline"><span class="over-dot"></span> Our Selection</div>
          <h2 style="margin:12px 0 24px; font-size:clamp(26px,4.4vw,36px)">Timeless Lebanese Desserts</h2>
          <div class="grid">
            <article class="card">
              <div class="thumb dk"></div>
              <div class="p16">
                <div class="title">Daoukieh Bites</div>
                <div class="meta">The iconic flavor in elegant bite-sized pieces, lightly glazed.</div>
              </div>
            </article>

            <article class="card">
              <div class="thumb kh"></div>
              <div class="p16">
                <div class="title">Knafeh Na’ameh</div>
                <div class="meta">Creamy ashta layer beneath fine semolina crumbs, finished with warm syrup.</div>
              </div>
            </article>

            <article class="card">
              <div class="thumb ma"></div>
              <div class="p16">
                <div class="title">Maamoul Pistachio & Dates</div>
                <div class="meta">Classic semolina cookies with intricate molds and fragrant fillings.</div>
              </div>
            </article>

            <article class="card">
              <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?q=80&w=1600&auto=format&fit=crop')"></div>
              <div class="p16">
                <div class="title">Baklava Pistachio</div>
                <div class="meta">Crisp filo, clarified butter, and a bright pistachio core.</div>
              </div>
            </article>

            <article class="card">
              <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1569864358642-9d1684040f43?q=80&w=1600&auto=format&fit=crop')"></div>
              <div class="p16">
                <div class="title">Osmalieh</div>
                <div class="meta">Golden kataifi nests with cool ashta and pistachio dust.</div>
              </div>
            </article>

            <article class="card">
              <div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1578587018452-892bacefd3e1?q=80&w=1600&auto=format&fit=crop')"></div>
              <div class="p16">
                <div class="title">Halawet el Jibn</div>
                <div class="meta">Cheese dough rolls with ashta, scented syrup, and pistachio finish.</div>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section id="visit">
        <div class="container feature">
          <div>
            <div class="overline"><span class="over-dot"></span> Visit Us</div>
            <h2 style="margin:12px 0 10px; font-size:clamp(26px,4.4vw,36px)">Beirut, Lebanon</h2>
            <p class="sub">Find Daouk Sweets in the heart of Beirut. Walk in for freshly made desserts, gift trays, and seasonal specialties. Pre-orders available for events and celebrations.</p>
            <div class="list" style="margin-top:14px">
              <div class="li"><div class="dotA"></div><div><div class="title" style="margin:0">Hours</div><div class="meta">Daily 9:00 – 21:00</div></div></div>
              <div class="li"><div class="dotA"></div><div><div class="title" style="margin:0">Phone</div><div class="meta">+961 1 234 567</div></div></div>
              <div class="li"><div class="dotA"></div><div><div class="title" style="margin:0">Address</div><div class="meta">Beirut, Lebanon</div></div></div>
            </div>
            <div class="hero-cta" style="margin-top:18px">
              <a class="btn alt" href="#desserts">See the Menu</a>
            </div>
          </div>
          <div class="feature-visual" style="min-height:300px">
            <div class="badge">Map</div>
            <iframe title="Daouk Sweets Beirut" style="position:absolute; inset:0; width:100%; height:100%; border:0; filter:contrast(105%) saturate(105%) brightness(95%)" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://maps.google.com/maps?q=Beirut%20Lebanon&t=k&z=14&ie=UTF8&iwloc=&output=embed"></iframe>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="foot-in">
        <div class="pill">
          <div class="logo" style="width:22px; height:22px; border-radius:7px"></div>
          <strong>Daouk Sweets Beirut</strong>
        </div>
        <div class="foot-grid">
          <p class="muted">From our family to yours — sharing Beirut’s favorite desserts for generations. Thank you for making Daoukieh a city icon.</p>
          <p class="muted">Custom trays and corporate gifting available upon request. Please allow 24–48 hours for large orders.</p>
          <p class="muted">© <span id="y"></span> Daouk Sweets. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>

  <script>
    // Optional: auto-update year
    document.getElementById('y').textContent = new Date().getFullYear();

    // Optional: arrow navigation for radio slider (loops)
    const radios = [...document.querySelectorAll('input[name="slide"]')];
    const arrows = document.querySelectorAll('.arrows .arrow');
    if (radios.length && arrows.length === 2){
      const go = dir => {
        const idx = radios.findIndex(r => r.checked);
        let next = idx + dir;
        if (next < 0) next = radios.length - 1;
        if (next >= radios.length) next = 0;
        radios[next].checked = true;
      };
      arrows[0].addEventListener('click', () => go(-1));
      arrows[1].addEventListener('click', () => go(1));
    }
  </script>
</body>
</html>