:root{
  --ink:#18181B; --ink2:#3F3F46; --pink:#EC4899; --pink-soft:#FCE7F3;
  --bg:#FAFAFA; --card:#FFFFFF; --muted:#E8ECF0; --border:#E4E4E7;
  --amber:#F59E0B; --teal:#0E7490;
  --shadow:0 18px 40px -24px rgba(24,24,27,.35);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans Arabic',system-ui,sans-serif;
  background:var(--bg); color:var(--ink2); line-height:1.85;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.naskh{font-family:'Noto Naskh Arabic',serif;color:var(--ink);line-height:1.45;font-weight:700}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92vw);margin-inline:auto}
svg{display:block;max-width:100%}
::selection{background:var(--pink);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- navbar ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,250,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Noto Naskh Arabic',serif;font-weight:700;font-size:19px;color:var(--ink)}
.brand span.dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  font-size:14px;padding:8px 13px;border-radius:999px;color:var(--ink2);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.nav-links a:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
@media (max-width:820px){.nav-links{display:none}}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 40px;background:
  radial-gradient(900px 520px at 82% -10%, #FDE2F0 0%, transparent 62%),
  radial-gradient(760px 520px at 8% 8%, #E7E4FF 0%, transparent 60%),
  radial-gradient(620px 420px at 50% 108%, #FFEEDB 0%, transparent 62%),
  #FAFAFA;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:340px;
  background:radial-gradient(closest-side,rgba(236,72,153,.16),transparent 72%);
  filter:blur(12px);pointer-events:none;animation:drift 12s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,-4%,0) scale(1.12)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  background:#fff;border:1px solid var(--border);padding:7px 14px;border-radius:999px;
  color:var(--ink);box-shadow:0 8px 20px -16px rgba(0,0,0,.4);margin-bottom:20px;
}
.hero h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero p.lead{margin-top:16px;font-size:clamp(15px,1.6vw,18px);max-width:52ch;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#F5B8D4}
.hero-art{position:relative}
.hero-art .card-art{
  border-radius:26px;padding:18px;background:linear-gradient(160deg,#fff,rgba(255,255,255,.6));
  border:1px solid rgba(228,228,231,.9);box-shadow:0 30px 70px -40px rgba(24,24,27,.5);
}
.skyline{background:linear-gradient(180deg,#FFF6FA 0%,#FDF2F8 55%,#EDE9FE 100%);border-radius:18px;overflow:hidden}
/* ---------- sections ---------- */
.section{padding:64px 0}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.sect-head h2{font-size:clamp(26px,3.4vw,38px)}
.sect-head p{font-size:14px;max-width:46ch;color:#71717A}
.kicker{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--pink);font-weight:700;margin-bottom:8px}

/* ---------- day cards ---------- */
.day{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(24,24,27,.03);overflow:hidden;margin-bottom:26px;
  transition:box-shadow .28s ease,transform .28s ease;
}
.day:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.day-top{display:flex;gap:18px;align-items:flex-start;padding:24px 26px 18px;border-bottom:1px dashed var(--border)}
.day-num{
  flex:0 0 auto;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  font-family:'Noto Naskh Arabic',serif;font-size:27px;font-weight:700;color:#fff;
  background:linear-gradient(145deg,#EC4899,#BE185D);box-shadow:0 12px 24px -14px rgba(190,24,93,.9);
}
.day-top h3{font-size:clamp(20px,2.4vw,26px)}
.day-top .sub{font-size:13.5px;color:#71717A;margin-top:2px}
.day-body{padding:6px 26px 24px}
.day-note{
  margin:18px 0 4px;font-size:13.5px;background:#FBFBFB;border-inline-start:3px solid var(--pink);
  border-radius:0 12px 12px 0;padding:11px 15px;color:#52525B;
}
.day-note b{color:var(--ink)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
thead th{
  text-align:right;font-weight:700;font-size:12.5px;letter-spacing:.3px;color:#71717A;
  padding:14px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:13px 12px;border-bottom:1px solid #F4F4F5;vertical-align:top}
tbody tr{transition:background .2s ease}
tbody tr:hover{background:#FEFCFE}
tbody tr:last-child td{border-bottom:0}
td.t{white-space:nowrap;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13.5px}
td.p{font-weight:500;color:var(--ink)}
td.p small{display:block;font-weight:400;color:#8A8A93;font-size:12.5px;margin-top:2px}
td.c{white-space:nowrap;font-size:13px;color:#52525B}
/* ---------- grid cards: budget, tips, alt ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.mini{
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.mini:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#F5B8D4}
.mini .ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--pink-soft);color:#BE185D;
}
.mini h4{font-size:16px;color:var(--ink);font-weight:700;margin-bottom:6px;font-family:'Noto Naskh Arabic',serif}
.mini p{font-size:13.5px;color:#52525B}
.tip .ico{background:#EEF2FF;color:#4338CA}

/* budget table variant */
.budget{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.budget table{min-width:520px}
.budget tfoot td{padding:16px 12px;background:#18181B;color:#fff;font-weight:700;font-size:14.5px}
.budget tfoot td.t{color:#fff}

/* alternatives */
.alt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.alt-grid{grid-template-columns:1fr}}
.alt{
  border-radius:20px;padding:24px;border:1px solid var(--border);background:
   linear-gradient(180deg,#fff,#FCFCFD);
}
.alt h4{font-family:'Noto Naskh Arabic',serif;font-size:18px;color:var(--ink);margin-bottom:8px}
.alt ul{list-style:none;display:grid;gap:8px;font-size:13.5px}
.alt li{display:flex;gap:9px;align-items:flex-start}
.alt li svg{flex:0 0 auto;margin-top:5px;color:var(--pink)}

/* footer */
footer{background:#18181B;color:#D4D4D8;padding:52px 0 40px;margin-top:24px}
footer h3{color:#fff;font-size:22px;margin-bottom:10px}
footer p{font-size:13.5px;color:#A1A1AA;max-width:62ch}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-links{display:grid;gap:8px;font-size:13.5px;color:#D4D4D8}
.foot-links span{color:#71717A;display:block;font-size:12px;letter-spacing:1px;margin-bottom:4px}
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.fade.in{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media (max-width:640px){
  .hero{padding:44px 0 26px}
  .section{padding:44px 0}
  .sect-head{flex-direction:column;align-items:flex-start;gap:8px}
  .day-top{padding:18px 18px 14px;gap:13px}
  .day-num{width:50px;height:50px;border-radius:14px;font-size:22px}
  .day-body{padding:4px 18px 18px}
  .day-note{border-radius:12px;border-inline-start-width:3px}
  table{font-size:13px}
  thead th,tbody td{padding:11px 9px}
  .mini{padding:18px}
  footer{padding:38px 0 30px}
}
@media (hover:none){
  .day:hover,.mini:hover,.chip:hover{transform:none;box-shadow:none}
}