:root {
      --rose:    #c8445a;
      --blush:   #f7dde3;
      --deep:    #1a0a0e;
      --gold:    #d4a96a;
      --cream:   #fdf5f0;
      --petal:   #e8aab6;
    }

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

    html { scroll-behavior: smooth; }

    body {
      background: var(--deep);
      color: var(--cream);
      font-family: 'Cormorant Garamond', serif;
      overflow-x: hidden;
      cursor: none;
    }

    /* ── Custom cursor ── */
    .cursor {
      position: fixed;
      width: 18px; height: 18px;
      background: var(--rose);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform .15s ease, opacity .3s;
      mix-blend-mode: screen;
    }

    /* ── Canvas ── */
    #canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ── Wrapper ── */
    .wrapper {
      position: relative;
      z-index: 1;
      min-height: 100vh;
    }

    /* ── Hero ── */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(200,68,90,.18) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(212,169,106,.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .eyebrow {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(.85rem, 2vw, 1rem);
      letter-spacing: .35em;
      color: var(--gold);
      text-transform: uppercase;
      opacity: 0;
      animation: fadeUp .9s .3s forwards;
    }

    .name {
      font-family: 'Petit Formal Script', cursive;
      font-size: clamp(4.5rem, 14vw, 10rem);
      line-height: 1;
      color: var(--blush);
      text-shadow: 0 0 80px rgba(200,68,90,.5), 0 0 160px rgba(200,68,90,.2);
      opacity: 0;
      animation: fadeUp 1s .55s forwards;
      margin: .2em 0 .1em;
    }

    .tagline {
      font-size: clamp(1rem, 3vw, 1.45rem);
      font-weight: 300;
      font-style: italic;
      color: var(--petal);
      letter-spacing: .05em;
      max-width: 480px;
      line-height: 1.7;
      opacity: 0;
      animation: fadeUp 1s .85s forwards;
    }

    .scroll-hint {
      position: absolute;
      bottom: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: .5rem;
      opacity: 0;
      animation: fadeIn 1s 2s forwards;
      font-size: .75rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .scroll-hint span { display: block; width: 1px; height: 48px; background: var(--gold); animation: grow 1.6s 2s ease infinite; }

    /* ── Divider ── */
    .divider {
      display: flex; align-items: center; gap: 1.2rem;
      padding: 0 2rem;
      max-width: 560px;
      margin: 0 auto 5rem;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .9s, transform .9s;
    }
    .divider.visible { opacity: 1; transform: none; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .divider-icon { font-size: 1.3rem; color: var(--rose); }

    /* ── Sections ── */
    .section {
      max-width: 680px;
      margin: 0 auto;
      padding: 0 2rem 7rem;
    }

    .section-label {
      font-size: .75rem;
      letter-spacing: .4em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
      opacity: 0; transform: translateY(20px);
      transition: opacity .8s, transform .8s;
    }
    .section-label.visible { opacity: 1; transform: none; }

    .section-body {
      font-size: clamp(1.15rem, 2.5vw, 1.4rem);
      font-weight: 300;
      line-height: 1.85;
      color: var(--blush);
      font-style: italic;
      opacity: 0; transform: translateY(24px);
      transition: opacity .9s .15s, transform .9s .15s;
    }
    .section-body.visible { opacity: 1; transform: none; }

    /* ── Reasons list ── */
    .reasons {
      list-style: none;
      display: flex; flex-direction: column; gap: 1.5rem;
      padding: 0 2rem;
      max-width: 680px;
      margin: 0 auto 7rem;
    }
    .reason-item {
      display: flex; align-items: flex-start; gap: 1.1rem;
      opacity: 0; transform: translateX(-30px);
      transition: opacity .8s, transform .8s;
    }
    .reason-item.visible { opacity: 1; transform: none; }
    .reason-num {
      font-family: 'Petit Formal Script', cursive;
      font-size: 2rem;
      color: var(--rose);
      line-height: 1;
      flex-shrink: 0;
      width: 2.5rem;
      text-align: center;
    }
    .reason-text {
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      font-weight: 300;
      line-height: 1.8;
      color: var(--petal);
    }

    /* ── Big quote ── */
    .quote-block {
      text-align: center;
      padding: 0 2rem 8rem;
      opacity: 0; transform: scale(.97);
      transition: opacity 1s, transform 1s;
    }
    .quote-block.visible { opacity: 1; transform: none; }
    .quote-mark {
      font-family: 'Petit Formal Script', cursive;
      font-size: 8rem;
      color: var(--rose);
      line-height: .4;
      display: block;
      margin-bottom: 1rem;
      text-shadow: 0 0 60px rgba(200,68,90,.4);
    }
    .quote-text {
      font-size: clamp(1.4rem, 4vw, 2.2rem);
      font-style: italic;
      font-weight: 300;
      color: var(--blush);
      line-height: 1.6;
      max-width: 600px;
      margin: 0 auto 1.5rem;
    }
    .quote-attr {
      font-size: .9rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--gold);
    }

    /* ── Footer ── */
    footer {
      text-align: center;
      padding: 3rem 2rem 5rem;
      border-top: 1px solid rgba(212,169,106,.18);
      font-size: clamp(1.8rem, 5vw, 2.6rem);
      font-family: 'Petit Formal Script', cursive;
      color: var(--gold);
      letter-spacing: .05em;
      opacity: 0; transform: translateY(20px);
      transition: opacity 1s, transform 1s;
    }
    footer.visible { opacity: 1; transform: none; }
    footer small {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-size: .85rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--petal);
      margin-top: .8rem;
    }

    /* ── Keyframes ── */
    @keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
    @keyframes fadeIn   { to   { opacity:1; } }
    @keyframes grow     { 0%,100%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } }

    /* ── Floating petals ── */
    .petal-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .petal {
      position: absolute;
      top: -5%;
      font-size: 1.2rem;
      opacity: 0;
      animation: fall linear infinite;
    }
    @keyframes fall {
      0%   { transform: translateY(0) rotate(0deg) scale(1);   opacity: .7; }
      80%  { opacity: .5; }
      100% { transform: translateY(110vh) rotate(420deg) scale(.5); opacity: 0; }
    }

    .arabic {
      font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: center;
    font-style:normal; 
    }