:root{
  --paper:#F3F6F3;
  --paper-deep:#EAF0EB;
  --ink:#16302A;
  --muted:#5B6E67;
  --brand:#2F7D63;
  --brand-deep:#1F5A46;
  --brand-soft:#E3F0EA;
  --amber:#D99A44;
  --amber-soft:#FBF0DF;
  --plum:#8A5A7D;
  --plum-soft:#F3E9F0;
  --clay:#B5652F;
  --clay-soft:#F7E9DE;
  --line:#DEE7E1;
  --card:#FFFFFF;
  --shadow: 0 10px 30px rgba(22,48,42,.06);
  --shadow-lift: 0 18px 44px rgba(22,48,42,.12);
}
 
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(960px,92%);margin:0 auto}
h1,h2,h3{font-family:'Tajawal',Tahoma,sans-serif;margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
 
 
/* ================= RISING LIGHT PARTICLES BACKGROUND ================= */
body{
  position:relative;
  overflow-x:hidden;
  background:linear-gradient(180deg, #FBF3E9 0%, var(--paper) 45%, var(--paper) 100%);
}
 
.bg-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
 
.spark{
  position:absolute;
  bottom:-20px;
  border-radius:50%;
  opacity:0;
  filter:blur(1px);
  animation-name:sparkRise;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.spark-1{ left:1%; width:11px;height:11px; animation-duration:21.6s; animation-delay:9.6s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-2{ left:5.3%; width:12px;height:12px; animation-duration:23.7s; animation-delay:10.2s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-3{ left:10.8%; width:8px;height:8px; animation-duration:23.5s; animation-delay:0.3s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-4{ left:16.8%; width:11px;height:11px; animation-duration:14.8s; animation-delay:15.9s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-5{ left:19.0%; width:8px;height:8px; animation-duration:22.3s; animation-delay:8.7s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-6{ left:26.1%; width:11px;height:11px; animation-duration:21.4s; animation-delay:0.7s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-7{ left:28.4%; width:12px;height:12px; animation-duration:22.3s; animation-delay:13.0s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-8{ left:35.0%; width:5px;height:5px; animation-duration:15.9s; animation-delay:16.4s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-9{ left:36.8%; width:5px;height:5px; animation-duration:19.4s; animation-delay:11.0s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-10{ left:42.1%; width:12px;height:12px; animation-duration:15.8s; animation-delay:13.3s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-11{ left:47.1%; width:8px;height:8px; animation-duration:14.9s; animation-delay:3.9s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-12{ left:52.3%; width:6px;height:6px; animation-duration:15.5s; animation-delay:9.5s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-13{ left:57.4%; width:8px;height:8px; animation-duration:18.1s; animation-delay:2.9s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-14{ left:60.9%; width:9px;height:9px; animation-duration:18.4s; animation-delay:9.0s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-15{ left:65.0%; width:12px;height:12px; animation-duration:18.6s; animation-delay:0.5s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-16{ left:68.5%; width:12px;height:12px; animation-duration:14.0s; animation-delay:1.4s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-17{ left:74.8%; width:8px;height:8px; animation-duration:20.9s; animation-delay:6.4s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-18{ left:80.6%; width:6px;height:6px; animation-duration:16.2s; animation-delay:3.4s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-19{ left:83.0%; width:10px;height:10px; animation-duration:18.2s; animation-delay:11.9s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
.spark-20{ left:87.4%; width:6px;height:6px; animation-duration:16.0s; animation-delay:18.5s; background:radial-gradient(circle, rgba(181,101,47,.45) 0%, transparent 70%); }
.spark-21{ left:91.5%; width:11px;height:11px; animation-duration:18.5s; animation-delay:13.7s; background:radial-gradient(circle, rgba(47,125,99,.55) 0%, transparent 70%); }
.spark-22{ left:97.8%; width:8px;height:8px; animation-duration:18.9s; animation-delay:19.8s; background:radial-gradient(circle, rgba(217,154,68,.55) 0%, transparent 70%); }
 
@keyframes sparkRise{
  0%{ transform:translateY(0) translateX(0) scale(.8); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translateY(-52vh) translateX(10px) scale(1); }
  90%{ opacity:.7; }
  100%{ transform:translateY(-108vh) translateX(-8px) scale(.8); opacity:0; }
}
 
@media (prefers-reduced-motion: reduce){
  .spark{animation-duration:60s !important; opacity:.4 !important;}
}
 
 
header, main, footer, .modal{
  position:relative;
  z-index:2;
}
 
/* ================= HEADER ================= */
header{
  position:sticky;top:0;z-index:30;
  background:rgba(243,246,243,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.08rem;color:var(--brand-deep)}
.logo-mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(155deg,var(--brand) 0%,var(--brand-deep) 100%);
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(47,125,99,.28);
}
.logo-mark svg{width:22px;height:22px}
.login-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card);color:var(--brand-deep);
  padding:10px 18px;border-radius:12px;font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;transition:.18s ease;
  background:#DCE8D8;
}
.login-btn:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.login-btn svg{width:16px;height:16px}
 
/* ================= HERO ================= */
.hero{padding:70px 0 34px;text-align:center;position:relative;overflow:hidden}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand-soft);color:var(--brand-deep);
  padding:7px 14px;border-radius:999px;font-weight:700;font-size:.85rem;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
h1{
  margin:22px auto 14px;font-size:clamp(2.3rem,5vw,3.6rem);
  font-weight:900;line-height:1.28;max-width:16ch;
}
h1 em{font-style:normal;color:var(--brand)}
.intro{max-width:560px;margin:0 auto;color:var(--muted);font-size:1.06rem}
.note{max-width:520px;margin:14px auto 0;color:#7A8A83;font-size:.88rem}
 
.discover-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:38px;color:var(--brand-deep);font-weight:700;font-size:.9rem;
  cursor:pointer;background:none;border:0;font-family:inherit;
}
.discover-cue svg{width:20px;height:20px;animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
@media (prefers-reduced-motion: reduce){
  .discover-cue svg{animation:none}
}
 
/* ================= TOOLS ================= */
.section{padding:34px 0 60px}
.head{text-align:center;margin-bottom:26px}
.head .eyebrow{color:var(--brand);font-weight:800;font-size:.82rem;letter-spacing:.02em}
.head h2{font-size:1.85rem;margin-top:6px}
.head p{margin:8px 0 0;color:var(--muted)}
 
.tools{width:min(700px,100%);margin:0 auto;display:flex;flex-direction:column;gap:12px}
 
.quote-day{
  width:min(700px,100%);margin:0 auto 12px;
  display:flex;align-items:flex-start;gap:14px;
  background:#D98B62;
border:1px solid #C2D8C8;
color:var(--ink);
  border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow);
}
.quote-mark{
  flex:none;width:44px;height:44px;border-radius:13px;
  background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand-deep);
}
.quote-mark svg{width:22px;height:22px}
.quote-body{flex:1;min-width:0}
.quote-eyebrow{font-weight:800;font-size:.78rem;color:var(--brand);letter-spacing:.02em}
.quote-text{margin:5px 0 0;font-size:.95rem;font-weight:500;line-height:1.85;color:var(--ink)}
 
@media(max-width:560px){
  .quote-day{padding:16px}
}
.tool {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 3px solid transparent;
  border-radius: 18px;
  padding: 20px 18px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(
      from var(--angle),
      #4285F4 0deg, #4285F4 90deg,
      #EA4335 90deg, #EA4335 180deg,
      #FBBC05 180deg, #FBBC05 270deg,
      #34A853 270deg, #34A853 360deg
    ) border-box;
  animation: spin 2s linear infinite;
  box-shadow: 0 10px 30px rgba(22,48,42,.06);
  color: var(--ink);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to { --angle: 360deg; }
}
.sticker{
  flex:none;width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;
}
.sticker svg{width:26px;height:26px}
.sticker.breath{background:var(--brand-soft);color:var(--brand-deep)}
.sticker.goals{background:var(--amber-soft);color:var(--amber)}
.sticker.diary{background:var(--plum-soft);color:var(--plum)}
.sticker.library{background:var(--clay-soft);color:var(--clay)}
.sticker.dash{background:var(--brand-soft);color:var(--brand)}
 
.main-t{flex:1;min-width:0}
.main-t h3{font-size:1.04rem;font-weight:700}
.main-t p{margin:4px 0 0;color:var(--muted);font-size:.87rem}
.arrow{flex:none;color:var(--brand);opacity:.55;transition:.18s}
.arrow svg{width:18px;height:18px}
.tool:hover .arrow{opacity:1;transform:translateX(-3px)}
 
.info{
  margin:30px auto 0;width:min(700px,100%);
  background:var(--brand-deep);color:#EAF3EF;
  border-radius:22px;padding:26px 24px;text-align:center;
}
.info h3{font-size:1.15rem;font-weight:800}
.info p{margin:8px 0 0;color:#CFE3DA;font-size:.92rem}
 
footer{border-top:1px solid var(--line);padding:26px 0 34px;color:var(--muted);text-align:center;font-size:.85rem}
 
/* ================= MODAL ================= */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(20,40,34,.4);z-index:100;padding:20px}
.modal.open{display:grid}
.box{width:min(420px,100%);background:var(--card);border-radius:22px;padding:26px;box-shadow:0 26px 60px rgba(0,0,0,.2);text-align:center}
.box h3{margin:0 0 8px;font-size:1.15rem}
.box p{margin:0;color:var(--muted);font-size:.92rem}
.actions{margin-top:18px}
.btn{border:0;border-radius:12px;padding:11px 20px;font:inherit;font-weight:700;cursor:pointer}
.btn-main{background:var(--brand);color:#fff}
.btn-main:hover{background:var(--brand-deep)}
 
@media(max-width:560px){
  .hero{padding:52px 0 28px}
  .tool{padding:14px}
  .sticker{width:46px;height:46px;border-radius:13px}
}