:root{
  --red: #D71A21;
  --red-deep: #97101A;
  --plum: #241B45;
  --cream: #FBF1E2;
  --cream-2: #F4E4CC;
  --gold: #C89A3E;
  --white: #ffffff;
  --ink: #2A2018;
  --radius: 22px;
  --font-display: "Baloo 2", "Tajawal", sans-serif;
  --font-body: "Tajawal", "Inter", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%, #FFF6E8 0%, var(--cream) 45%, var(--cream-2) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  position:relative;
}

[data-lang="en"] body,
html[dir="ltr"] body{ font-family:"Inter", "Tajawal", sans-serif; }

/* language visibility --------------------------------------------------- */
[data-en], [data-ar]{ }
html[dir="rtl"] [data-en-only]{ display:none; }
html[dir="ltr"] [data-ar-only]{ display:none; }

/* language toggle -------------------------------------------------------- */
.lang-toggle{
  position:fixed;
  top:18px;
  inset-inline-end:18px;
  z-index:50;
  background:var(--white);
  border:2px solid var(--red);
  color:var(--red);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(151,16,26,.15);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.lang-toggle:hover{ transform:translateY(-1px); }
.lang-toggle:active{ transform:translateY(0); }
.lt-sep{ opacity:.4; margin:0 3px; }
html[dir="rtl"] .lt-en{ opacity:.45; }
html[dir="rtl"] .lt-ar{ color:var(--red); font-weight:800; }
html[dir="ltr"] .lt-ar{ opacity:.45; }
html[dir="ltr"] .lt-en{ color:var(--red); font-weight:800; }

/* decorative doodles ------------------------------------------------------ */
.doodles{ position:fixed; inset:0; pointer-events:none; z-index:0; color:var(--red); opacity:.12;}
.doodle{ position:absolute; width:120px; height:120px; }
.d1{ top:6%; inset-inline-start:4%; transform:rotate(-12deg); width:100px; height:100px;}
.d2{ top:18%; inset-inline-end:6%; transform:rotate(18deg); width:90px; height:90px;}
.d3{ bottom:14%; inset-inline-start:7%; transform:rotate(8deg); width:80px; height:80px;}
.d4{ bottom:8%; inset-inline-end:5%; transform:rotate(-20deg); width:140px; height:140px; color:var(--gold); opacity:.16;}
.d5{ top:46%; inset-inline-start:1%; transform:rotate(-6deg); width:70px; height:70px;}

.wrap{
  position:relative;
  z-index:1;
  max-width:960px;
  margin:0 auto;
  padding:64px 24px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* hero -------------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:20px;
  width:100%;
}

.hero-heart{
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  width:min(560px, 90vw);
  z-index:0;
  pointer-events:none;
}
.heart-svg{ width:100%; height:auto; overflow:visible; }
#heartPath{
  fill:none;
  stroke:var(--red);
  stroke-width:3;
  opacity:.28;
  stroke-linecap:round;
  stroke-dasharray:1900;
  stroke-dashoffset:1900;
  animation:draw-heart 2.2s ease forwards .3s;
}
@keyframes draw-heart{ to{ stroke-dashoffset:0; } }

.logo{
  position:relative;
  z-index:1;
  width:min(300px, 62vw);
  filter:drop-shadow(0 10px 22px rgba(151,16,26,.18));
  margin-bottom:6px;
  animation:pop-in .7s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes pop-in{
  from{ opacity:0; transform:scale(.85) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

.tagline{
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  color:var(--red);
  font-weight:700;
  font-size:clamp(18px,3vw,24px);
  margin:2px 0 26px;
}

.headline{
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  color:var(--plum);
  font-weight:800;
  font-size:clamp(28px,5.4vw,44px);
  margin:0 0 8px;
  line-height:1.15;
}

.sub{
  position:relative;
  z-index:1;
  color:#6b5f52;
  font-size:clamp(15px,2vw,17px);
  margin:0 0 40px;
  font-weight:500;
}

/* choice cards -------------------------------------------------------------*/
.choices{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-bottom:56px;
}
@media (max-width:640px){
  .choices{ grid-template-columns:1fr; }
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  background:var(--white);
  border-radius:var(--radius);
  padding:38px 26px 30px;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(151,16,26,.08);
  box-shadow:0 10px 30px rgba(151,16,26,.08), 0 2px 6px rgba(0,0,0,.03);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1), box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:0; inset-inline-start:0; inset-inline-end:0;
  height:6px;
  background:linear-gradient(90deg, var(--red), var(--gold));
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(151,16,26,.16);
  border-color:rgba(151,16,26,.18);
}
.card:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.card-icon{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  background:linear-gradient(145deg, var(--red), var(--red-deep));
  border-radius:50%;
  margin-bottom:6px;
  box-shadow:0 8px 18px rgba(151,16,26,.28);
}
.card-catalog .card-icon{
  background:linear-gradient(145deg, var(--gold), #a87a24);
  box-shadow:0 8px 18px rgba(168,122,36,.3);
}
.card-icon svg{ width:32px; height:32px; }

.card-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--plum);
}
.card-desc{
  color:#7a6d5f;
  font-size:14.5px;
  line-height:1.5;
  max-width:26ch;
}
.card-cta{
  margin-top:10px;
  font-weight:700;
  font-size:14px;
  color:var(--red);
  padding:9px 18px;
  border:2px solid var(--red);
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.card-catalog .card-cta{
  color:var(--gold);
  border-color:var(--gold);
}
.card:hover .card-cta{ background:var(--red); color:var(--white); }
.card-catalog:hover .card-cta{ background:var(--gold); color:var(--white); }

/* footer -------------------------------------------------------------------*/
.site-footer{
  width:100%;
  text-align:center;
  padding-top:26px;
  border-top:1px solid rgba(151,16,26,.14);
  color:#8a7c6c;
  font-size:13.5px;
  line-height:1.9;
}
.site-footer .agent{ color:var(--red); font-weight:700; margin:0 0 2px; }
.site-footer .company{ font-weight:700; color:var(--plum); margin:0; }
.site-footer .address{ margin:0 0 10px; }
.contact-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.contact-row a{ color:#8a7c6c; text-decoration:none; }
.contact-row a:hover{ color:var(--red); }
.dot{ opacity:.5; }

@media (prefers-reduced-motion: reduce){
  #heartPath{ animation:none; stroke-dashoffset:0; }
  .logo{ animation:none; }
}