/* ============================================================
   Day One Kit — Stylesheet
   الألوان الأساسية موجودة تحت مباشرة بقسم TOKENS
   ============================================================ */

/* ============ TOKENS — غيّر الألوان من هون ============ */
:root{
  --orange:#fc6714;
  --orange-soft:#FFEDE2;
  --teal:#1c929c;
  --deep:#0D5C63;
  --deep-soft:#E6F3F4;
  --sun:#FFC107;
  --navy:#1B1E3F;
  --gray:#6B7280;
  --paper:#FFFDF9;
  --light:#F2F4F7;

  --display:"Baloo Bhaijaan 2","Nunito",system-ui,sans-serif;
  --body:"Tajawal","Nunito",system-ui,sans-serif;
  --latin:"Nunito",sans-serif;

  --pad:clamp(56px,7vw,110px);
  --r:22px;
  --shadow:0 18px 40px -18px rgba(13,92,99,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--navy);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.wrap{width:min(1160px,92vw);margin-inline:auto}
.sec{padding-block:var(--pad);position:relative}

h1,h2,h3,.dsp{font-family:var(--display);font-weight:800;line-height:1.35}
h2{font-size:clamp(28px,4.2vw,46px)}
h3{font-size:clamp(19px,2.2vw,24px);font-weight:700}
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--orange);
  letter-spacing:.02em;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--orange)}
.lead{font-size:clamp(16px,1.6vw,18.5px);color:#41506b;max-width:56ch}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lead{margin-inline:auto}

/* ============ LOGO ============ */
.logo{
  font-family:var(--latin);font-weight:900;display:flex;align-items:baseline;gap:6px;
  line-height:1;font-size:26px;direction:ltr;
}
.logo .d{color:var(--deep)}
.logo .o{color:var(--orange)}
.logo .k{
  background:var(--deep);color:#fff;font-size:.62em;padding:5px 11px 6px;
  border-radius:999px;position:relative;top:-3px;
}

/* ============ NAV ============ */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,253,249,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid #eceff3;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:500;font-size:15.5px}
.nav ul a{color:#40506a;transition:color .18s}
.nav ul a:hover{color:var(--orange)}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px}

.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:999px;transition:transform .18s ease,box-shadow .18s ease;
}
.btn-main{background:var(--orange);color:#fff;box-shadow:0 10px 22px -10px rgba(252,103,20,.85)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(252,103,20,.9)}
.btn-ghost{background:#fff;color:var(--deep);border:2px solid var(--deep-soft)}
.btn-ghost:hover{border-color:var(--teal);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:15px}

/* ============ AMBIENT ============ */
.doodle{position:absolute;pointer-events:none;opacity:.5;z-index:0}
.blob{position:absolute;z-index:0;pointer-events:none}

/* ============ HERO ============ */
.hero{position:relative;padding-block:clamp(40px,6vw,78px) var(--pad);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.28}
.hero h1 .hl{color:var(--orange);position:relative;white-space:nowrap}
.hero h1 .hl svg{position:absolute;inset-inline:-4px;bottom:-14px;width:calc(100% + 8px);height:16px}
.hero .lead{margin-top:20px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:14.5px;color:var(--gray);font-weight:500}
.trust span{display:flex;align-items:center;gap:7px}
.trust i{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block}

/* --- القائمة المشطوبة --- */
.note{
  background:#fff;border-radius:var(--r);padding:30px 30px 26px;position:relative;
  box-shadow:var(--shadow);border:1px solid #eef1f4;
  background-image:repeating-linear-gradient(to bottom,transparent 0 43px,#eef4f6 43px 44px);
  background-position:0 78px;
  transform:rotate(-1.4deg);
}
.note::before{content:"";position:absolute;inset-block:0;inset-inline-start:52px;width:1.5px;background:#ffd9c6}
.note-head{font-family:var(--display);font-weight:700;font-size:19px;color:var(--deep);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.note-head small{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--gray)}
.note ul{list-style:none}
.note li{
  height:44px;display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500;
  position:relative;padding-inline-start:14px;color:#3a4a63;transition:color .5s ease;
}
.note li .strike{
  position:absolute;inset-inline-start:6px;top:52%;height:3.5px;width:0;border-radius:3px;
  background:var(--orange);opacity:.9;transition:width .45s cubic-bezier(.6,0,.3,1);
}
.note li.done{color:#a9b3c2}
.note li.done .strike{width:calc(100% - 18px)}
.stamp{
  position:absolute;inset-inline-end:18px;bottom:14px;transform:rotate(-11deg) scale(.6);
  opacity:0;transition:all .45s cubic-bezier(.2,1.5,.4,1);
  font-family:var(--display);font-weight:800;color:var(--orange);font-size:17px;
  border:3px solid var(--orange);border-radius:12px;padding:5px 16px;background:rgba(255,255,255,.9);
}
.stamp.on{opacity:1;transform:rotate(-11deg) scale(1)}

/* ============ COMPARE ============ */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch;margin-top:44px}
.card{background:#fff;border-radius:var(--r);padding:30px;border:1px solid #eef1f4}
.card.old{background:var(--light);border-color:#e6eaf0}
.card.new{background:linear-gradient(160deg,#fff,#fff8f4);border-color:#ffd9c6;box-shadow:var(--shadow)}
.card h3{margin-bottom:6px}
.card .tag{font-size:13.5px;font-weight:700;font-family:var(--display);margin-bottom:18px}
.old .tag{color:var(--gray)}
.new .tag{color:var(--orange)}
.steps{list-style:none;display:flex;flex-direction:column;gap:13px;font-size:16px}
.steps li{display:flex;gap:11px;align-items:flex-start;color:#44536c}
.steps li::before{content:"";flex:0 0 20px;height:20px;margin-top:4px;border-radius:50%;background:var(--light);border:2px solid #d7dee7}
.new .steps li::before{
  background:var(--orange);border-color:var(--orange);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='black' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.vs{align-self:center;font-family:var(--display);font-weight:800;color:#c2cbd8;font-size:15px}

/* ============ INSIDE ============ */
.inside{background:var(--deep-soft);border-radius:40px}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px;margin-top:44px}
.item{
  background:#fff;border-radius:18px;padding:22px 14px 18px;text-align:center;
  border:1px solid #d8ecee;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;
}
.item:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:0 14px 26px -14px rgba(28,146,156,.6)}
.item svg{margin:0 auto 12px;color:var(--teal);width:38px;height:38px}
.item:nth-child(3n) svg{color:var(--orange)}
.item span{font-weight:700;font-size:15.5px;color:var(--deep)}
.inside-note{
  margin-top:30px;background:#fff;border:2px dashed var(--teal);border-radius:18px;
  padding:18px 24px;display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;font-weight:500;color:var(--deep);
}
.inside-note b{color:var(--orange)}

/* ============ PACKAGES (باقتين) ============ */
.plans{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:46px;max-width:820px;margin-inline:auto;align-items:start;
}
.plan{background:#fff;border:1px solid #e9edf2;border-radius:var(--r);padding:34px 30px;position:relative;transition:transform .2s}
.plan:hover{transform:translateY(-4px)}
.plan.feat{border:2px solid var(--orange);box-shadow:var(--shadow)}
.ribbon{
  position:absolute;top:-14px;inset-inline-start:30px;background:var(--orange);color:#fff;
  font-family:var(--display);font-weight:700;font-size:13px;padding:5px 15px;border-radius:999px;
}
.plan .name{font-family:var(--display);font-weight:800;font-size:23px;color:var(--deep)}
.plan .who{font-size:14.5px;color:var(--gray);margin-top:2px}
.price{font-family:var(--latin);font-weight:900;font-size:44px;color:var(--navy);margin:16px 0 4px;display:flex;align-items:baseline;gap:6px;direction:ltr;justify-content:flex-end}
.price small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--gray)}
.plan ul{list-style:none;margin:20px 0 28px;display:flex;flex-direction:column;gap:11px;font-size:15.5px;color:#44536c}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul li::before{
  content:"";flex:0 0 17px;height:17px;margin-top:5px;border-radius:50%;background:var(--deep-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='%231c929c' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.plan .btn{width:100%;justify-content:center}

/* ============ HOW ============ */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:46px}
.stepc{position:relative;padding-top:14px}
.stepc .num{
  font-family:var(--latin);font-weight:900;font-size:15px;color:#fff;background:var(--teal);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
}
.stepc:nth-child(2) .num{background:var(--orange)}
.stepc:nth-child(3) .num{background:var(--sun);color:var(--navy)}
.stepc p{color:#44536c;font-size:15.5px;margin-top:6px}

/* ============ ORDER ============ */
.order{background:var(--deep);border-radius:40px;color:#fff;position:relative;overflow:hidden}
.order .lead{color:#c9e6ec}
.order h2{color:#fff}
.order .eyebrow{color:var(--sun)}
.order .eyebrow::before{background:var(--sun)}
.form{
  background:#fff;border-radius:26px;padding:clamp(24px,3vw,34px);margin-top:38px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;color:var(--navy);
  position:relative;z-index:2;
}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:700;font-size:14.5px;color:var(--deep)}
.field input,.field select{
  border:1.5px solid #dfe5ec;border-radius:14px;padding:13px 15px;background:var(--paper);
  color:var(--navy);transition:border-color .18s;
}
.field input:hover,.field select:hover{border-color:#b9c6d4}
.field input:focus,.field select:focus{border-color:var(--teal);outline:none}
.form .full{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.form .hint{font-size:14px;color:var(--gray);max-width:44ch}

/* ============ FAQ ============ */
.faq{margin-top:40px;max-width:820px;margin-inline:auto}
.q{border-bottom:1px solid #e9edf2}
.q summary{
  cursor:pointer;list-style:none;padding:20px 4px;display:flex;justify-content:space-between;
  gap:16px;align-items:center;font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--deep);
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";color:var(--orange);font-size:26px;font-weight:700;transition:transform .2s;line-height:1}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding:0 4px 22px;color:#44536c;font-size:16px}

/* ============ FOOTER ============ */
footer{background:var(--deep);color:#bfe0e6;padding-block:26px;margin-top:var(--pad)}
.foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
footer .logo{font-size:22px}
footer .logo .d{color:#fff}
footer .logo .k{background:#fff;color:var(--deep)}
.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);
  display:grid;place-items:center;transition:background .18s,transform .18s;
}
.social a:hover{background:var(--orange);transform:translateY(-2px)}
.social svg{width:17px;height:17px;color:#fff}
.copy{font-size:13.5px;color:#8fbcc5}

/* ============ FLOAT WA ============ */
.wa{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:70;background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 12px 26px -8px rgba(37,211,102,.7);transition:transform .2s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:29px;height:29px}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .note{order:-1;transform:none}
  .compare{grid-template-columns:1fr}
  .vs{display:none}
  .nav ul{
    display:none;position:absolute;top:100%;inset-inline:4vw;background:#fff;flex-direction:column;
    gap:0;padding:10px;border-radius:18px;box-shadow:var(--shadow);border:1px solid #eef1f4;
  }
  .nav ul.open{display:flex}
  .nav ul li{border-bottom:1px solid #f2f4f7}
  .nav ul li:last-child{border:0}
  .nav ul a{display:block;padding:13px 12px}
  .menu-btn{display:block}
  .nav .btn{display:none}
}

@media(max-width:700px){
  .plans{grid-template-columns:1fr;max-width:440px}
}

@media(max-width:640px){
  .foot{flex-direction:column;justify-content:center;text-align:center;gap:18px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .note li .strike{width:calc(100% - 18px)}
  .note li{color:#a9b3c2}
  .stamp{opacity:1;transform:rotate(-11deg)}
  html{scroll-behavior:auto}
}

/* ============ زر الرجوع للأعلى ============ */
.top{
  position:fixed;inset-inline-end:20px;bottom:88px;z-index:70;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--deep);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 22px -8px rgba(13,92,99,.6);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .18s;
}
.top.show{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--orange)}
.top svg{width:22px;height:22px}
@media(max-width:520px){.top{width:44px;height:44px;bottom:84px;inset-inline-end:16px}}

/* ============ أزرار الطلب المزدوجة ============ */
.cta-pair{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-dark{background:var(--deep);color:#fff;box-shadow:0 10px 22px -10px rgba(13,92,99,.7)}
.btn-dark:hover{background:var(--teal);transform:translateY(-2px)}
.plan .btn + .btn{margin-top:10px}
@media(max-width:520px){
  .cta-pair{width:100%;flex-direction:column;align-items:stretch}
  .cta-pair .btn{width:100%}
}

/* ============ خانة الجوال + مفتاح الدولة ============ */
.phone{display:flex;gap:8px;direction:ltr}
.phone select{
  flex:0 0 auto;width:auto;min-width:106px;
  border:1.5px solid #dfe5ec;border-radius:14px;padding:13px 10px;background:var(--paper);
  color:var(--navy);font-family:var(--latin);font-weight:700;font-size:14.5px;
  text-align:center;transition:border-color .18s;
}
.phone select:focus{border-color:var(--teal);outline:none}
.phone input{flex:1 1 auto;min-width:0;text-align:left;letter-spacing:.04em}

/* ============ النموذج بصف واحد ============ */
.form.row{grid-template-columns:1.3fr .7fr 1fr;gap:14px;align-items:end}
.form.row .field label{font-size:13.5px}
.form.row .field input,
.form.row .field select{padding:12px 13px;font-size:15px;border-radius:13px}
.form.row .phone{gap:6px}
.form.row .phone select{min-width:92px;padding:12px 6px;font-size:13.5px}
.form.row .full{grid-column:1/-1;margin-top:6px}

@media(max-width:860px){
  .form.row{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:640px){
  .form.row{grid-template-columns:1fr}
  .form.row .full{flex-direction:column;align-items:stretch}
  .form.row .full .btn{width:100%}
}

/* ============ اللوجو بالنافبار ============ */
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:auto;height:44px;object-fit:contain}
/* الشعار نفسه مكتوب فيه الاسم — فنخفي النص المكرر عند وجود الصورة */
.brand-mark + .logo{display:none}
.brand-mark.gone{display:none}
.brand-mark.gone + .logo{display:flex}
@media(max-width:520px){.brand-mark{height:36px}}

/* ============ سطر الشحن ============ */
.ship{
  display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  background:var(--deep-soft);color:var(--deep);border-radius:999px;
  padding:11px 22px;font-size:15.5px;font-weight:500;text-align:start;
}
.ship b{color:var(--orange)}
.ship svg{width:22px;height:22px;flex:0 0 22px;color:var(--teal)}
@media(max-width:520px){.ship{border-radius:18px;padding:13px 18px;font-size:14.5px;align-items:flex-start}}

/* ============ شبكة المحتويات: 5 × 4 ============ */
.items.grid5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.items.grid5 .item{
  padding:20px 8px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;min-height:132px;
}
.items.grid5 .item svg{width:34px;height:34px;margin-bottom:10px;flex:0 0 auto}
.items.grid5 .item span{font-size:14px;line-height:1.45;text-wrap:balance}

@media(max-width:900px){
  .items.grid5{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media(max-width:620px){
  .items.grid5{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .items.grid5 .item{min-height:118px;padding:16px 6px 13px}
  .items.grid5 .item svg{width:30px;height:30px;margin-bottom:8px}
  .items.grid5 .item span{font-size:13px}
}
@media(max-width:400px){
  .items.grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
}