:root{
    --bg:#F3F9F0;          /* خلفية فاتحة بلمسة خضرا من ورق الجزرة */
    --surface:#FFFFFF;     /* الناف */
    --line:#D9E7D3;        /* حدود خفيفة */
    --text:#2B1A10;        /* بني التربة للنص */
    --text-dim:#6B5443;    /* نص ثانوي */
    --carrot:#FF7A1F;      /* البرتقالي */
    --carrot-hover:#FF8C3A;
    --carrot-deep:#E0590A;
    --cta:#D4450C;         /* برتقالي أعمق شوية علشان الكلام الأبيض يتقري */
    --cta-hover:#BC3C09;
    --leaf:#4CC56A;
    --leaf-deep:#2E8C47;

    --font-display:"Marhey", "Readex Pro", system-ui, sans-serif;
    --font-ui:"Readex Pro", system-ui, sans-serif;
    --ease-pop:cubic-bezier(.34,1.56,.64,1);
    --section-gap:100px;   /* المسافة بين السكاشن */
  }
  @media (max-width:640px){ :root{--section-gap:72px} }
  *{box-sizing:border-box}
  html,body{margin:0}
  html{scroll-behavior:smooth}

  /* شريط السكرول: جزرة أورنج على خلفية فاتحة */
  ::-webkit-scrollbar{width:14px; height:14px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{
    background:var(--carrot); border-radius:999px;
    border:3px solid var(--bg); background-clip:padding-box;
    min-height:60px;
  }
  ::-webkit-scrollbar-thumb:hover{background-color:var(--carrot-deep)}
  ::-webkit-scrollbar-thumb:active{background-color:var(--cta)}
  ::-webkit-scrollbar-corner{background:var(--bg)}
  /* فايرفوكس */
  @supports (-moz-appearance:none){
    html{scrollbar-color:var(--carrot) var(--bg)}
  }
  /* لما توصل لسكشن من لينك، الناف الثابت ميغطيش عنوانه */
  section[id]{scroll-margin-top:calc(124px - var(--section-gap))}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-ui);
  }

  .skip{
    position:absolute; inset-inline-start:16px; top:-60px;
    background:var(--carrot); color:var(--text);
    padding:10px 16px; border-radius:10px; font-weight:600; z-index:100;
    text-decoration:none;
  }
  .skip:focus{top:16px}

  :focus-visible{outline:2px solid var(--carrot-deep); outline-offset:3px; border-radius:10px}

  /* ============ NAVBAR ============ */
  .site-header{
    position:fixed; inset-inline:0; top:0; z-index:50;
    padding:16px;
    transition:padding .35s ease;
  }
  .nav{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:16px;
    padding-block:14px;
    padding-inline:22px 14px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line);
    border-radius:22px;
    transition:padding .35s ease, background .35s ease;
  }
  .site-header.scrolled{padding-top:10px}
  .site-header.scrolled .nav{background:var(--surface); padding-block:10px}

  /* ---- Logo ---- */
  .logo{
    justify-self:start;
    display:inline-flex; align-items:center; gap:10px;
    color:var(--text); text-decoration:none;
    min-height:44px;
  }
  .logo svg{width:38px; height:44px; overflow:visible; flex:none}
  .logo-word{
    font-family:var(--font-display); font-weight:700;
    font-size:28px; line-height:1;
  }
  .logo-word .dot{color:var(--carrot)}

  .mascot .leaves{transform-origin:24px 17px}
  .mascot .shades{transition:transform .45s var(--ease-pop)}
  .mascot .eye-r{transform-origin:30px 25px}
  .logo:hover .mascot .leaves,
  .logo:focus-visible .mascot .leaves{animation:wiggle .7s ease}
  .logo:hover .mascot .shades,
  .logo:focus-visible .mascot .shades{transform:translateY(-6px) rotate(-6deg)}
  .logo:hover .mascot .eye-r,
  .logo:focus-visible .mascot .eye-r{animation:wink .9s .25s ease}
  @keyframes wiggle{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-10deg)}
    55%{transform:rotate(8deg)}
    80%{transform:rotate(-4deg)}
  }
  @keyframes wink{
    0%,100%{transform:scaleY(1)}
    40%,60%{transform:scaleY(.1)}
  }

  /* ---- Links ---- */
  .links{
    display:flex; align-items:center; gap:4px;
    list-style:none; margin:0; padding:0;
  }
  .links a{
    position:relative;
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 14px;
    color:var(--text-dim); text-decoration:none;
    font-size:15px; font-weight:500;
    border-radius:12px;
    transition:color .2s ease;
  }
  .links a:hover, .links a:focus-visible, .links a[aria-current="true"]{color:var(--text)}
  .sprout{
    position:absolute; left:50%; top:-6px;
    width:20px; height:16px;
    transform:translateX(-50%) scale(0);
    transform-origin:50% 100%;
    transition:transform .4s var(--ease-pop);
    pointer-events:none;
  }
  .links a:hover .sprout,
  .links a:focus-visible .sprout,
  .links a[aria-current="true"] .sprout{transform:translateX(-50%) scale(1)}

  /* ---- Actions ---- */
  .actions{justify-self:end; display:flex; align-items:center; gap:10px}

  .cta{
    position:relative;
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 20px;
    background:var(--cta); color:#FFFFFF;
    font:600 15px var(--font-ui); text-decoration:none;
    border-radius:14px;
    transition:background .2s ease, transform .2s ease;
  }
  .cta:hover{background:var(--cta-hover)}
  .cta:active{transform:translateY(1px)}
  .cta-leaves{
    position:absolute; top:-13px; inset-inline-end:16px;
    width:26px; height:16px;
    transform:scale(0); transform-origin:50% 100%;
    transition:transform .4s var(--ease-pop);
    pointer-events:none;
  }
  .cta:hover .cta-leaves, .cta:focus-visible .cta-leaves{transform:scale(1)}

  /* ---- Mobile ---- */
  .menu-btn{
    display:none;
    width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
    background:var(--bg); color:var(--text); cursor:pointer;
    align-items:center; justify-content:center;
  }
  .menu-btn svg{width:22px; height:22px}
  .menu-btn .bar{transition:transform .3s ease, opacity .2s ease; transform-origin:12px 12px}
  .menu-btn[aria-expanded="true"] .bar1{transform:translateY(5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .bar2{opacity:0}
  .menu-btn[aria-expanded="true"] .bar3{transform:translateY(-5px) rotate(-45deg)}

  .drawer{
    max-width:1200px; margin:8px auto 0;
    background:var(--surface);
    border:1px solid var(--line); border-radius:22px;
    padding:12px;
    display:none;
  }
  .drawer.open{display:block}
  .drawer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
  .drawer a{
    display:flex; align-items:center;
    min-height:56px; padding:0 14px; border-radius:14px;
    color:var(--text); text-decoration:none;
    font-family:var(--font-display); font-weight:500; font-size:22px;
  }
  .drawer a:hover{background:var(--bg)}
  .drawer li{opacity:0; transform:translateY(14px)}
  .drawer.open li{animation:sprout-up .45s var(--ease-pop) forwards}
  .drawer.open li:nth-child(2){animation-delay:.05s}
  .drawer.open li:nth-child(3){animation-delay:.1s}
  .drawer.open li:nth-child(4){animation-delay:.15s}
  .drawer.open li:nth-child(5){animation-delay:.2s}
  .drawer.open li:nth-child(6){animation-delay:.25s}
  .drawer .cta{margin:10px 0 4px; justify-content:center; width:100%; min-height:52px; font-family:var(--font-ui); font-size:16px; color:#FFFFFF}
  .drawer .cta:hover{background:var(--cta-hover)}
  @keyframes sprout-up{to{opacity:1; transform:none}}

  @media (max-width:900px){
    .links, .actions .cta{display:none}
    .menu-btn{display:inline-flex}
    .nav{grid-template-columns:1fr auto}
  }
  @media (max-width:420px){
    .logo-word{font-size:24px}
  }
  /* موبايل صغير: العنوان يفضل سطرين بس */
  @media (max-width:400px){ .hero .hero-copy h1{font-size:8vw} }

  /* باترن بذور ونبتات خفيف: الهيرو وهيدر الصفحات */
  .hero, .page-head, .contact{
    background-color:var(--bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23D3E5CB'%3E%3Cellipse cx='24' cy='30' rx='3.2' ry='5.5' transform='rotate(35 24 30)'/%3E%3Cellipse cx='108' cy='22' rx='3.2' ry='5.5' transform='rotate(-40 108 22)'/%3E%3Cellipse cx='136' cy='110' rx='3.2' ry='5.5' transform='rotate(65 136 110)'/%3E%3Cellipse cx='40' cy='128' rx='3.2' ry='5.5' transform='rotate(-15 40 128)'/%3E%3Ccircle cx='86' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='52' r='1.5'/%3E%3Ccircle cx='10' cy='84' r='1.5'/%3E%3Cpath d='M70 105c-4 0-7-3-7-6 4 0 7 2 7 6zM70 103c0-4 3-7 7-7 0 4-3 7-7 7z'/%3E%3C/g%3E%3Cpath d='M70 112v-10' stroke='%23D3E5CB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size:160px 160px;
  }

  /* ============ HERO ============ */
  .hero{
    --cw:min(clamp(240px, 42vh, 380px), 30vw);  /* عرض الجزرة: بيصغر مع الشاشات المتوسطة علشان ميتقصش */
    --soil-h:clamp(260px, 34vh, 330px);  /* طول التربة */
    position:relative;
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  /* فوق الأرض: الكلام في ناحية والجزرة في الناحية التانية */
  .above{
    flex:1 0 auto;
    position:relative; z-index:3;
    width:100%; max-width:1200px; margin:0 auto;
    padding:120px 24px 0;
    display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
    align-items:center; gap:24px;
  }
  .hero-copy{
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    text-align:start;
    padding-bottom:32px;
  }
  .hero h1{
    margin:0;
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(34px, 4.4vw, 62px); line-height:1.65;
    color:var(--text);
    text-wrap:balance;
  }
  .hero-sub{
    margin:0; max-width:none;
    font-size:clamp(15px, 1.4vw, 18px); line-height:1.7;
    color:var(--text-dim);
  }
  @media (min-width:1024px){ .hero-sub{white-space:nowrap} }
  .hero-actions{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; margin-top:6px}
  .hero .cta{min-height:50px; padding:0 24px; font-size:16px}
  .btn-ghost{
    display:inline-flex; align-items:center;
    min-height:50px; padding:0 24px;
    border:1.5px solid var(--text); border-radius:14px;
    color:var(--text); text-decoration:none;
    font:600 16px var(--font-ui);
    transition:background .2s ease, color .2s ease;
  }
  .btn-ghost:hover{background:var(--text); color:#FFFFFF}

  .carrot-col{
    position:relative;
    align-self:stretch;
    min-height:calc(var(--cw) + 40px);
  }

  .soil{
    position:relative; flex:none;
    height:var(--soil-h);
    background-color:#2B1A10;
    background-image:
      radial-gradient(#3E2819 1.6px, transparent 2px),
      radial-gradient(#1F120A 1.4px, transparent 1.8px);
    background-size:34px 34px, 53px 53px;
    background-position:0 0, 17px 23px;
    z-index:1;
  }
  .ground-edge{
    position:absolute; left:0; top:-17px;
    width:100%; height:18px; display:block;
  }
  .tuft{position:absolute; bottom:calc(100% + 8px); width:34px; height:22px}
  .tuft.by-carrot{bottom:6px; z-index:4}

  /* الجذور = الخدمات، طالعة من الجزرة وممدودة ناحية الكلام */
  .roots{
    position:absolute; top:100%;
    left:calc(50% - var(--cw) * .658);
    width:calc(var(--cw) * 2.37); height:var(--soil-h);  /* بتكبر وتصغر مع الجزرة */
    z-index:1;
  }
  .roots svg{position:absolute; inset:0; width:100%; height:100%}
  .roots path{
    fill:none; stroke:#C9915E; stroke-width:2.5; stroke-linecap:round;
    vector-effect:non-scaling-stroke; opacity:.8;
  }
  .root-label{
    position:absolute;
    transform:translate(-50%, -50%);
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:999px;
    background:#3D2717; border:1px solid #5C3E28;
    color:#FFF1DE; font:500 14px var(--font-ui);
    white-space:nowrap;
  }
  .root-label::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:var(--carrot); flex:none;
  }

  /* الجزرة */
  .carrot-wrap{
    position:absolute; left:50%;
    bottom:calc(var(--cw) * -0.7333);
    width:var(--cw); margin-left:calc(var(--cw) / -2);
    transform-origin:50% 57.7%;
    z-index:3;
    will-change:transform;
  }
  .carrot-btn{
    display:block; width:100%; padding:0; margin:0;
    border:0; background:none; cursor:pointer;
    border-radius:40%;
  }
  .carrot-jump{transform-origin:50% 57.7%}
  .carrot-jump.jump{animation:jump .75s cubic-bezier(.3,.7,.4,1)}
  @keyframes jump{
    0%{transform:none}
    15%{transform:scale(1.07,.93)}
    45%{transform:translateY(-13%) scale(.95,1.06)}
    75%{transform:scale(1.04,.96)}
    100%{transform:none}
  }
  .carrot{display:block; width:100%; height:auto; overflow:visible}
  .carrot .glasses{transition:transform .5s var(--ease-pop)}
  .carrot .brows{transition:transform .35s ease}
  .carrot .smirk, .carrot .grin{transition:opacity .25s ease}
  .carrot .grin{opacity:0}
  .carrot.near .glasses{transform:translateY(28px)}
  .carrot.near .brows{transform:translateY(-9px)}
  .carrot.near .smirk{opacity:0}
  .carrot.near .grin{opacity:1}

  .bubble{
    position:absolute; top:6%; inset-inline-start:calc(100% - 16px);
    padding:10px 16px;
    background:#FFFFFF; color:var(--text);
    border:1.5px solid var(--text);
    border-radius:18px; border-end-start-radius:4px;
    font:500 15px var(--font-ui); white-space:nowrap;
    transform:scale(0); transform-origin:100% 100%;
    transition:transform .4s var(--ease-pop);
    pointer-events:none;
  }
  .bubble.show{transform:scale(1)}
  /* الشاشات المتوسطة: مفيش مكان جنب الجزرة، فالفقاعة تطلع فوق راسها */
  @media (min-width:821px) and (max-width:1499px){
    .bubble{
      top:auto; bottom:calc(100% - 2%);
      inset-inline-start:auto; left:50%; translate:-50% 0;
      border-radius:18px; transform-origin:50% 100%;
    }
    .bubble::after{
      content:""; position:absolute; left:50%; top:100%;
      width:12px; height:12px; margin:-6px 0 0 -6px;
      background:inherit; border:inherit; border-width:0 1.5px 1.5px 0; rotate:45deg;
    }
  }

  @media (max-width:820px){
    /* --tip: بُعد طرف الجزرة تحت سطح الأرض */
    .hero{--cw:min(260px, 66vw); --tip:calc(var(--cw) * .7); --soil-h:calc(var(--tip) + 196px)}
    .above{grid-template-columns:1fr; padding-top:110px; gap:8px}
    .hero-copy{align-items:center; text-align:center; padding-bottom:0}
    .hero-actions{justify-content:center}
    .carrot-col{min-height:calc(var(--cw) + 50px)}
    .roots svg{display:none}
    /* الموبايل: جذر واحد نازل من طرف الجزرة، والخدمات متفرعة منه يمين وشمال */
    .roots{
      left:50%; translate:-50% 0;
      width:min(calc(100vw - 20px), 480px);
      display:grid; grid-template-columns:1fr 1fr; align-content:start;
      column-gap:34px; row-gap:14px;
      padding-top:calc(var(--tip) + 14px);
    }
    .roots::before{
      content:""; position:absolute; left:50%; width:12px; margin-left:-6px;
      top:calc(var(--tip) - 12px); height:calc(100% - var(--tip) - 6px);
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='40' viewBox='0 0 12 40'%3E%3Cpath d='M6 0c5 10 5 10 0 20S1 30 6 40' fill='none' stroke='%23C9915E' stroke-width='2.5'/%3E%3C/svg%3E") repeat-y;
      opacity:.8;
      -webkit-mask:linear-gradient(#000 calc(100% - 26px), transparent);
              mask:linear-gradient(#000 calc(100% - 26px), transparent);
    }
    .root-label{
      position:relative; left:auto !important; top:auto !important; transform:none;
      max-width:100%; min-height:40px;
      white-space:normal; text-align:start; line-height:1.35;
      font-size:13px; padding:7px 12px;
    }
    /* الفرع اللي بيوصل كل خدمة بالجذر */
    .root-label::after{
      content:""; position:absolute; top:50%; width:18px; height:2.5px; margin-top:-1.25px;
      background:#C9915E; opacity:.8; border-radius:2px;
    }
    .root-label:nth-of-type(odd){justify-self:end}              /* العمود اليمين */
    .root-label:nth-of-type(odd)::after{inset-inline-end:-19px}
    .root-label:nth-of-type(even){justify-self:start}           /* العمود الشمال */
    .root-label:nth-of-type(even)::after{inset-inline-start:-19px}
  }
  @media (max-width:400px){
    .hero{--soil-h:calc(var(--tip) + 214px)}
    .roots{column-gap:26px; row-gap:12px; width:calc(100vw - 16px)}
    .root-label{font-size:12px; padding:6px 10px; gap:6px}
    .root-label::after{width:14px}
    .root-label:nth-of-type(odd)::after{inset-inline-end:-15px}
    .root-label:nth-of-type(even)::after{inset-inline-start:-15px}
    .bubble{
      inset-inline-start:calc(100% - 46px); top:0;
      white-space:normal; max-width:140px; font-size:13px;
    }
    .tuft.far{display:none}
  }

  /* حافة التربة من تحت */
  .soil-bottom{
    position:absolute; left:0; bottom:-1px;
    width:100%; height:18px; display:block;
    fill:var(--bg);
  }

  /* ============ الخدمات: أكياس بذور ============ */
  .services{
    padding-block:var(--section-gap) 0;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .services-inner{max-width:1060px; margin:0 auto}
  .services-head{
    display:flex; flex-direction:column; gap:10px;
    max-width:640px; margin-bottom:64px;
  }
  .services-head h2{
    margin:0;
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px, 3.6vw, 48px); line-height:1.6;
    color:var(--text);
  }
  .services-head p{margin:0; font-size:17px; line-height:1.8; color:var(--text-dim)}

  .packets{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:40px 28px;
  }
  .packet{
    --pk:#FF8A3D;
    position:relative;
    display:flex; flex-direction:column;
    background:var(--surface);
    border:2px solid var(--text);
    border-radius:6px 6px 16px 16px;
    transform:rotate(var(--tilt, 0deg));
    transition:transform .4s var(--ease-pop);
  }
  .packet:hover, .packet:focus-within{transform:rotate(0) translateY(-6px)}
  .packet-seal{
    height:16px;
    border-bottom:2px solid var(--text);
    border-radius:4px 4px 0 0;
    background:
      repeating-linear-gradient(90deg, rgba(43,26,16,.28) 0 2px, transparent 2px 7px),
      var(--pk);
  }
  .packet-art{
    position:relative;
    height:112px;
    display:grid; place-items:center;
    background:var(--pk);
    border-bottom:2px solid var(--text);
  }
  .packet-art svg{width:58px; height:58px}
  .packet-art svg.packet-brand{
    position:absolute; top:8px; inset-inline-start:10px;
    width:22px; height:26px;
    transform:rotate(-12deg);
  }
  .packet-body{
    flex:1;
    display:flex; flex-direction:column; gap:10px;
    padding:18px 18px 12px;
  }
  .packet h3{
    margin:0;
    font-family:var(--font-display); font-weight:700;
    font-size:20px; line-height:1.5; color:var(--text);
  }
  .packet p{margin:0; font-size:14.5px; line-height:1.75; color:var(--text-dim)}
  .packet-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:6px;
    font-size:14px; color:var(--text);
  }
  .packet-list li{display:flex; align-items:center; gap:10px}
  .packet-list li::before{
    content:""; flex:none;
    width:7px; height:11px; border-radius:50%;
    background:var(--carrot-deep);
    transform:rotate(30deg);
  }
  .packet-link{
    margin-top:auto;
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px;
    color:var(--cta); text-decoration:none;
    font:600 15px var(--font-ui);
  }
  .packet-link svg{width:16px; height:16px; flex:none}
  .packet-link:hover{text-decoration:underline; text-underline-offset:5px}
  .packet-sprout{
    position:absolute; left:50%; top:-34px;
    width:40px; height:34px;
    transform:translateX(-50%) scale(0); transform-origin:50% 100%;
    transition:transform .45s var(--ease-pop);
    pointer-events:none;
  }
  .packet:hover .packet-sprout, .packet:focus-within .packet-sprout{transform:translateX(-50%) scale(1)}

  @media (max-width:1000px){ .packets{grid-template-columns:repeat(2, minmax(0, 1fr))} }
  @media (max-width:640px){

    .services-head{margin-bottom:48px}
    .packets{grid-template-columns:1fr; gap:44px}
  }

  /* ============ شغلنا: المحصول ============ */
  .work{
    padding-block:var(--section-gap);
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .work-inner{max-width:1160px; margin:0 auto}
  .work-head{display:flex; flex-direction:column; gap:10px; max-width:640px; margin-bottom:72px}
  .work-head h2{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px, 3.6vw, 48px); line-height:1.6; color:var(--text);
  }
  .work-head p{margin:0; font-size:17px; line-height:1.8; color:var(--text-dim)}

  .projects{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:104px}
  .project{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr);
    gap:56px; align-items:center;
  }
  .project:nth-child(even){grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr)}
  .project:nth-child(even) .project-visual{order:-1}

  .project-visual{position:relative; margin-inline-end:14px; margin-bottom:14px}
  .project-visual::before{
    content:""; position:absolute; inset:0;
    transform:translate(-14px, 14px);
    background:var(--pc);
    border:2px solid var(--text); border-radius:16px;
  }
  .frame{
    position:relative; z-index:1;
    border:2px solid var(--text); border-radius:16px;
    overflow:hidden; background:#FFFFFF;
  }
  .frame img{display:block; width:100%; height:auto}
  .browser-bar{
    display:flex; align-items:center; gap:7px;
    padding:10px 14px;
    border-bottom:2px solid var(--text);
    background:#FFFFFF; direction:ltr;
  }
  .browser-bar i{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--text)}
  .browser-bar i:nth-child(1){background:#FF7A1F}
  .browser-bar i:nth-child(2){background:#FFD2AE}
  .browser-bar i:nth-child(3){background:#7AD38F}
  .browser-bar span{
    margin-inline-start:10px; padding:3px 14px;
    border-radius:999px; background:var(--bg);
    font:500 12px var(--font-ui); color:var(--text-dim);
  }
  .frame-empty{
    aspect-ratio:16 / 10;
    display:grid; place-items:center; gap:8px; text-align:center;
    padding:24px;
    background:repeating-linear-gradient(-45deg, #FFFFFF 0 14px, #F6FAF4 14px 28px);
    color:var(--text-dim); font-size:15px;
  }

  .project-info{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
  .project-type{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    border:1.5px solid var(--text);
    background:var(--pc-soft);
    font:500 14px var(--font-ui); color:var(--text);
  }
  .project h3{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(28px, 3vw, 40px); line-height:1.5; color:var(--text);
  }
  .project p{margin:0; max-width:44ch; font-size:16px; line-height:1.9; color:var(--text-dim)}
  .project-feats{
    list-style:none; margin:4px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .project-feats li{
    padding:6px 12px; border-radius:10px;
    background:#FFFFFF; border:1px solid var(--line);
    font-size:14px; color:var(--text);
  }

  .next-project{
    margin-top:104px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:56px 24px;
    border:2px dashed var(--text); border-radius:24px;
    background:#FFFFFF; text-align:center;
  }
  .next-project > svg{width:52px; height:60px; transform:rotate(-8deg)}
  .next-project h3{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(26px, 2.8vw, 36px); line-height:1.5; color:var(--text);
  }
  .next-project p{margin:0; font-size:16px; line-height:1.8; color:var(--text-dim)}
  .next-project .cta{margin-top:6px; min-height:50px; padding:0 24px; font-size:16px}

  @media (max-width:860px){
    .project, .project:nth-child(even){grid-template-columns:1fr; gap:36px}
    .project .project-visual{order:-1}
    .projects{gap:80px}
    .work-head{margin-bottom:56px}
    .next-project{margin-top:80px}
  }

  /* ============ بنشتغل إزاي ============ */
  /* الحالة الافتراضية = كل حاجة كبرت (من غير JS أو مع تقليل الحركة).
     الحالة "لسه" بتتكتب بس تحت .anim .step:not(.is-on) */
  .process{
    position:relative; overflow:clip;
    padding-block:var(--section-gap) 0;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .process-inner{max-width:1160px; margin:0 auto}
  .field{
    --scene-h:220px; --ground-h:116px; --line-y:84px; --gap:24px;
    position:relative; margin-top:40px;
  }
  .process .services-head{margin-bottom:0}
  /* على الشاشات الواسعة الجزرة الطويلة بتطلع جنب العنوان في الفراغ اللي على الشمال */
  @media (min-width:1024px){ .field{margin-top:-90px} }
  .field-soil{
    position:absolute; top:var(--scene-h); height:var(--ground-h);
    left:50%; width:100vw; margin-left:-50vw;
    background-color:#2B1A10;
    background-image:radial-gradient(#3E2819 1.6px, transparent 2px), radial-gradient(#1F120A 1.4px, transparent 1.8px);
    background-size:34px 34px, 53px 53px;
    background-position:0 0, 17px 23px;
  }
  .root-svg{
    position:absolute; z-index:1;
    top:calc(var(--scene-h) + var(--line-y) - 20px); height:40px;
    left:calc((100% - 3 * var(--gap)) / 8);
    width:calc(100% - (100% - 3 * var(--gap)) / 4);
    overflow:visible;
  }
  .root-svg path{fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round}
  .root-track{stroke:#6E4C30; stroke-width:3; stroke-dasharray:.008 .012}
  .root-fill{stroke:var(--carrot); stroke-width:5; stroke-dasharray:1; stroke-dashoffset:0}
  .rail{display:none}

  .steps{
    list-style:none; margin:0; padding:0;
    position:relative; z-index:2;
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:var(--gap);
  }
  /* كل خطوة بتاخد نفس صفوف الجريد، فكارت "هتاخد" بيقف في نفس المستوى في الأربعة مهما طول الكلام */
  .step{
    position:relative; display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0;
    justify-items:center; text-align:center;
  }
  .scene{position:relative; justify-self:stretch; height:var(--scene-h)}
  .plant{
    position:absolute; left:50%; bottom:-60px;
    width:160px; height:260px; margin-left:-80px;
    overflow:hidden; z-index:1;
  }
  .ground{height:var(--ground-h); justify-self:stretch}
  .node{
    position:absolute; z-index:3;
    top:calc(var(--scene-h) + var(--line-y) - 22px); left:50%; margin-left:-22px;
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--cta); border:2px solid #FFB37A; color:#FFFFFF;
    font:700 19px/1 var(--font-display);
    transition:background .35s ease, border-color .35s ease, color .35s ease, transform .5s var(--ease-pop);
  }
  .step-text{display:contents}
  .step h3{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:24px; line-height:1.5; color:var(--text);
    padding-top:30px;
    transition:color .35s ease;
  }
  .step p{margin:10px 0 0; max-width:30ch; font-size:15px; line-height:1.8; color:var(--text-dim)}
  .step .step-get{
    margin-top:14px; align-self:start;
    padding:6px 12px; border-radius:10px;
    background:var(--surface); border:1px solid var(--line);
    font-size:14px; line-height:1.6; color:var(--text);
  }
  .step-get b{font-weight:600; color:var(--cta)}

  /* أجزاء الرسمة */
  .plant .wig{transform-box:view-box; transform-origin:80px 200px}
  .plant .grow{transform-box:view-box; transform-origin:80px 200px; transition:transform .75s var(--ease-pop), opacity .25s ease}
  .plant .spark{transform-box:view-box; transform-origin:80px 186px; transition:transform .5s var(--ease-pop) .3s, opacity .25s ease .3s}
  .plant .root-draw{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .9s ease .15s}
  .plant .seed{transform-box:fill-box; transform-origin:50% 60%}
  .plant .sway{transform-box:view-box; transform-origin:var(--o)}
  .plant .drops{transition:opacity .3s ease}
  .plant .drop{transform-box:fill-box}
  .plant .harvest{transform-box:view-box; transition:transform .95s var(--ease-pop)}
  .plant .h-glasses{transform-box:view-box; transform-origin:80px 124px; transition:transform .55s var(--ease-pop) .75s}

  .harvest-tag{
    position:absolute; top:-26px; left:50%; z-index:4;
    translate:-50% 0;
    padding:7px 14px; border-radius:14px;
    background:#FFFFFF; border:1.5px solid var(--text);
    font:600 14px var(--font-ui); color:var(--text); white-space:nowrap;
    transform-origin:50% 100%;
    transition:scale .45s var(--ease-pop) 1.15s;
  }
  .harvest-tag::after{
    content:""; position:absolute; left:50%; bottom:-7px;
    width:11px; height:11px; margin-left:-6px;
    background:#FFFFFF; border:1.5px solid var(--text); border-top:0; border-left:0;
    transform:rotate(45deg);
  }
  .dirt{
    position:absolute; left:50%; bottom:0; z-index:3;
    border-radius:50%; pointer-events:none;
  }

  /* الحالة "لسه موصلناش" */
  .anim .step:not(.is-on) .node{background:#3D2717; border-color:#8A6440; color:#E8C49A}
  .anim .step:not(.is-on) h3{color:var(--text-dim)}
  .anim .step:not(.is-on) .grow{transform:scale(.06); opacity:0}
  .anim .step:not(.is-on) .spark{transform:scale(0); opacity:0}
  .anim .step:not(.is-on) .root-draw{stroke-dashoffset:1}
  .anim .step:not(.is-on) .drops{opacity:0}
  .anim .step:not(.is-on) .harvest{transform:translateY(125px)}
  .anim .step:not(.is-on) .h-glasses{transform:translateY(-24px) rotate(-10deg); transition-delay:0s}
  .anim .step:not(.is-on) .harvest-tag{scale:0; transition-delay:0s}

  /* لما الخطوة تتفعل */
  .step.is-on .node{transform:scale(1.12)}
  .anim .step.is-on .seed{animation:seed-wiggle .7s ease .1s}
  .anim .step.is-on .sway{animation:sway 3.2s ease-in-out .8s infinite}
  .anim .step.is-on .sway-b{animation-duration:3.8s; animation-direction:reverse}
  .anim .step.is-on .drop{animation:drip 1.8s ease-in infinite}
  .anim .step.is-on .d2{animation-delay:.6s}
  .anim .step.is-on .d3{animation-delay:1.2s}
  .anim .step.is-on:hover .wig{animation:wiggle .7s ease}
  @keyframes seed-wiggle{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-14deg)}
    50%{transform:rotate(10deg)}
    75%{transform:rotate(-5deg)}
  }
  @keyframes sway{
    0%,100%{transform:rotate(0)}
    50%{transform:rotate(5deg)}
  }
  @keyframes drip{
    0%{transform:translateY(0); opacity:0}
    15%{opacity:1}
    75%{opacity:1}
    100%{transform:translateY(105px); opacity:0}
  }

  /* ============ كارت "شدّ الجزرة" ============ */
  .pull-card{
    --soil:72px;
    --pull-bg:#C23B08;      /* برتقالي غامق علشان الكلام الأبيض يتقري */
    position:relative; overflow:hidden;
    margin-top:var(--section-gap);
    display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
    min-height:330px;
    border:2px solid var(--text); border-radius:28px;
    background-color:var(--pull-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23AE3306'%3E%3Cellipse cx='18' cy='24' rx='3' ry='5' transform='rotate(35 18 24)'/%3E%3Cellipse cx='84' cy='16' rx='3' ry='5' transform='rotate(-40 84 16)'/%3E%3Cellipse cx='100' cy='84' rx='3' ry='5' transform='rotate(65 100 84)'/%3E%3Cellipse cx='34' cy='96' rx='3' ry='5' transform='rotate(-15 34 96)'/%3E%3Ccircle cx='62' cy='56' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    background-size:120px 120px;
  }
  .pull-text{
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    padding:40px 52px calc(var(--soil) + 30px);
  }
  .pull-title{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px, 3.6vw, 46px); line-height:1.45; color:#FFFFFF;
  }
  .pull-text p{margin:0; font-size:18px; line-height:1.8; color:#FFE9D6}
  @media (min-width:1024px){ .pull-text p{white-space:nowrap} }
  .pull-btn{
    margin-top:10px;
    display:inline-flex; align-items:center; gap:10px;
    min-height:56px; padding:0 28px;
    background:#FFFFFF; color:var(--text);
    border:2px solid var(--text); border-radius:16px; text-decoration:none;
    font:600 18px var(--font-ui);
    box-shadow:5px 5px 0 var(--text);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .pull-btn svg{width:22px; height:22px; flex:none; transition:transform .45s var(--ease-pop)}
  .pull-btn:hover{transform:translate(2px, -3px); box-shadow:3px 8px 0 var(--text)}
  .pull-btn:hover svg{transform:scale(1.25) rotate(-8deg)}
  .pull-btn:active{transform:translate(5px, 5px); box-shadow:0 0 0 var(--text)}
  .pull-btn:focus-visible{outline:3px solid #FFFFFF; outline-offset:5px}

  .pull-soil{
    position:absolute; left:0; right:0; bottom:0; height:var(--soil); z-index:1;
    background-color:#2B1A10;
    background-image:radial-gradient(#3E2819 1.6px, transparent 2px), radial-gradient(#1F120A 1.4px, transparent 1.8px);
    background-size:34px 34px, 53px 53px;
    background-position:0 0, 17px 23px;
  }
  .pull-stage{position:relative; z-index:3; min-height:260px}
  .pull-carrot{
    position:absolute; left:50%; bottom:calc(var(--soil) - 60px);
    width:160px; height:320px; margin-left:-80px; padding:0;
    border:0; background:none; cursor:grab;
    border-radius:40px;
  }
  .pull-carrot:active{cursor:grabbing}
  .pull-carrot:focus-visible{outline:3px solid #FFFFFF}
  .pull-carrot svg{display:block; width:100%; height:100%; overflow:hidden}
  .pc-body{transform-box:view-box; transform:translateY(128px); transition:transform .85s var(--ease-pop)}
  .pc-leaves{transform-box:view-box; transform-origin:80px 100px; animation:sway 2.8s ease-in-out infinite}
  .pc-glasses{transform-box:view-box; transform-origin:80px 124px; transform:translateY(-26px) rotate(-10deg); transition:transform .5s var(--ease-pop)}
  .pc-grin{opacity:0; transition:opacity .2s ease}
  .pc-mouth{transition:opacity .2s ease}
  .pull-carrot:hover .pc-body{transform:translateY(118px)}
  .pull-stage.is-peek .pc-body{transform:translateY(66px)}
  .pull-stage.is-out .pc-body{transform:translateY(-36px)}
  .pull-stage.is-out .pc-glasses{transform:none; transition-delay:.55s}
  .pull-stage.is-out .pc-grin{opacity:1}
  .pull-stage.is-out .pc-mouth{opacity:0}
  .pull-stage.is-out .pc-leaves{animation-duration:1s}

  .pull-hint{
    position:absolute; z-index:4;
    bottom:calc(var(--soil) + 50px); right:calc(50% + 36px);
    display:flex; align-items:flex-end; gap:4px;
    font:700 24px var(--font-display); color:#FFFFFF;
    transform:rotate(-6deg);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
  }
  .pull-hint svg{width:58px; height:42px; margin-bottom:-26px; transform:scaleX(-1)}
  .pull-hint{animation:hint-bob 2.4s ease-in-out infinite}
  @keyframes hint-bob{0%,100%{translate:0 0} 50%{translate:0 -6px}}
  .pull-stage.is-out .pull-hint, .pull-stage.is-peek .pull-hint{opacity:0}

  /* فقاعة الكلام جنب الجزرة */
  .pull-bubble{
    position:absolute; z-index:4;
    right:calc(50% + 52px); bottom:calc(var(--soil) + 150px);
    scale:0; transform-origin:100% 100%;
    padding:8px 16px; border-radius:16px; border-bottom-right-radius:4px;
    background:#FFFFFF; border:2px solid var(--text);
    font:600 15px var(--font-ui); color:var(--text); white-space:nowrap;
    transition:scale .4s var(--ease-pop);
  }
  .pull-stage.is-out .pull-bubble:not(:empty){scale:1; transition-delay:.7s}

  @media (max-width:980px){
    .step h3{font-size:21px}
    .harvest-tag{font-size:13px}
  }
  /* الموبايل: الخطوات تحت بعض، والجذر بيمشي بالطول */
  @media (max-width:760px){
    .field{--scene-h:180px; margin-top:32px}
    .field-soil, .root-svg, .ground{display:none}
    .rail{
      display:block; position:absolute; z-index:1;
      top:22px; bottom:60px; right:20px; width:4px; border-radius:4px;
      background:#E2D3C2; overflow:hidden;
    }
    .rail-fill{width:100%; height:100%; background:var(--carrot); transform-origin:50% 0}
    .steps{grid-template-columns:1fr; row-gap:40px; padding-right:60px}
    .step{display:flex; flex-direction:column; align-items:flex-start; text-align:start}
    .scene{align-self:stretch}
    .step h3{padding-top:16px}
    .scene{
      height:var(--scene-h);
      border:2px solid var(--text); border-radius:16px; overflow:hidden;
      background:var(--surface);
    }
    .scene::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:46px; z-index:0;
      background-color:#2B1A10;
      background-image:radial-gradient(#3E2819 1.6px, transparent 2px);
      background-size:24px 24px;
    }
    .plant{width:110px; height:179px; margin-left:-55px; bottom:5px}
    .node{top:14px; left:auto; right:-60px; margin-left:0}
    .step p{max-width:none}
    .harvest-tag{top:12px; left:auto; right:12px; translate:none; transform-origin:100% 0}
    .harvest-tag::after{display:none}
    .pull-card{grid-template-columns:1fr; min-height:0; border-radius:22px}
    .pull-text{padding:32px 24px 4px}
    .pull-text p{font-size:16px}
    .pull-stage{min-height:270px}
    .pull-carrot{width:140px; height:280px; margin-left:-70px; bottom:calc(var(--soil) - 52px)}
    .pull-bubble{right:calc(50% + 42px); bottom:calc(var(--soil) + 120px)}
    .pull-hint{right:calc(50% + 30px); bottom:calc(var(--soil) + 40px); font-size:21px}
  }


  /* ============ إحنا مين ============ */
  .about{
    overflow-x:clip;   /* الختم وهو كبير قبل ما ينزل ميعملش سكرول بالعرض */
    padding-block:var(--section-gap) 24px;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .about-inner{
    max-width:1160px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 470px);
    gap:80px; align-items:center;
  }
  .about-text{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
  .about-text h2{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(30px, 3.6vw, 48px); line-height:1.6; color:var(--text);
  }
  .about-text p{margin:0; max-width:48ch; font-size:18px; line-height:1.9; color:var(--text-dim)}
  .about-text p:first-of-type{font-size:21px; color:var(--text)}
  .about-link{margin-top:4px}

  /* الليبل */
  .facts{
    position:relative;
    padding:26px 30px 22px;
    background:#FFFFFF;
    border:3px solid var(--text); border-radius:14px;
    box-shadow:9px 9px 0 var(--text);
    transform:rotate(1.2deg);
  }
  .facts-title{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:40px; line-height:1.3; color:var(--text);
  }
  .facts-serving{margin:4px 0 0; padding-bottom:10px; border-bottom:1.5px solid var(--text); font-size:15px; color:var(--text)}
  .facts-rule-thick{height:10px; margin-top:8px; background:var(--text)}
  .facts-rule-thick.thin{height:5px; margin-top:0}
  .facts-head{
    display:flex; justify-content:space-between;
    padding:8px 0 6px; border-bottom:1.5px solid var(--text);
    font-size:13px; font-weight:600; color:var(--text);
  }
  .facts-list{list-style:none; margin:0; padding:0}
  .fact{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px;
    padding:11px 0 10px;
    border-bottom:1px solid #D9CFC4;
  }
  .fact:last-child{border-bottom:0}
  .fact-name{font-size:16px; font-weight:500; color:var(--text)}
  .fact-num{
    font:700 18px var(--font-ui); color:var(--cta);
    font-variant-numeric:tabular-nums; min-width:4ch; text-align:end;
  }
  .fact-bar{grid-column:1 / -1; height:7px; border-radius:4px; background:#F3EAE0; overflow:hidden}
  .fact-bar i{
    display:block; height:100%; width:calc(var(--v) * 1%);
    background:var(--carrot); border-radius:4px;
    transform-origin:100% 50%;
    transition:transform 1s cubic-bezier(.2,.7,.3,1);
  }
  .facts-free{
    margin:12px 0 0;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    font-size:15px; color:var(--text);
  }
  .facts-free b{font-weight:700}
  .facts-free span{
    padding:4px 12px; border-radius:999px;
    background:#E3F5E7; border:1.5px solid var(--leaf-deep);
    color:#1F6B35; font-weight:500;
    transition:opacity .3s ease, translate .45s var(--ease-pop);
  }

  .stamp{
    position:absolute; top:-44px; left:-18px; z-index:2;
    width:118px; height:118px;
    transform:rotate(-16deg);
    transition:scale .5s cubic-bezier(.2,1.5,.4,1), opacity .2s ease;
  }

  /* الأنيميشن (بيشتغل بس لما الـ JS يضيف .anim) */
  .facts.anim .fact:not(.is-on) .fact-bar i{transform:scaleX(0)}
  .facts.anim:not(.free-on) .facts-free span{opacity:0; translate:0 8px}
  .facts-free span + span{transition-delay:.15s}
  .facts.anim .fact{transition:opacity .3s ease}
  .facts.anim .fact:not(.is-on){opacity:.35}
  .facts.anim:not(.stamped) .stamp{scale:2.4; opacity:0}
  .facts.stamped{animation:thud .35s ease .05s}
  @keyframes thud{
    0%,100%{transform:rotate(1.2deg)}
    40%{transform:rotate(1.2deg) translate(3px, 4px)}
  }

  @media (max-width:900px){
    .about-inner{grid-template-columns:1fr; gap:72px}
    .facts{max-width:470px; margin-inline:auto; width:100%}
  }
  @media (max-width:640px){
    .facts{padding:22px 20px 18px; box-shadow:6px 6px 0 var(--text)}
    .facts-title{font-size:32px}
    .stamp{width:96px; height:96px; top:-40px; left:-12px}
  }


  /* ============ التواصل: شات مع الجزرة ============ */
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .contact{
    padding-block:var(--section-gap) 130px;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .chat-wrap{max-width:640px; margin:0 auto; display:flex; flex-direction:column}
  .chat-head{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:40px}
  .chat-head h2{margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(32px, 4vw, 52px); line-height:1.5; color:var(--text)}
  .chat-head p{margin:0; max-width:44ch; font-size:18px; line-height:1.8; color:var(--text-dim)}

  .chat{display:flex; flex-direction:column; gap:12px}
  .msg{display:flex; align-items:flex-end; gap:10px; max-width:88%}
  .msg.bot{align-self:flex-start}
  .msg.me{align-self:flex-end}
  .av{
    width:42px; height:42px; flex:none; border-radius:50%;
    display:grid; place-items:center;
    background:#FFFFFF; border:2px solid var(--text);
  }
  .av svg{width:22px; height:26px}
  .msg + .msg.bot .av, .msg.me + .msg.bot .av{visibility:visible}
  .msg.bot + .msg.bot .av{visibility:hidden}
  .cbubble{
    margin:0; padding:11px 18px;
    border:2px solid var(--text); border-radius:22px;
    font-size:17px; line-height:1.7; white-space:pre-line; overflow-wrap:anywhere;
  }
  .bot .cbubble{background:#FFFFFF; color:var(--text); border-end-start-radius:6px}
  .me .cbubble{background:var(--cta); color:#FFFFFF; border-end-end-radius:6px}
  .msg.new{animation:msg-in .45s var(--ease-pop)}
  @keyframes msg-in{from{opacity:0; transform:translateY(10px) scale(.92)} to{opacity:1; transform:none}}
  .typing .cbubble{display:inline-flex; gap:5px; align-items:center; padding:16px 18px}
  .typing i{width:8px; height:8px; border-radius:50%; background:var(--text-dim); animation:dot 1s ease-in-out infinite}
  .typing i:nth-child(2){animation-delay:.15s}
  .typing i:nth-child(3){animation-delay:.3s}
  @keyframes dot{0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-5px); opacity:1}}

  .composer{margin-top:24px; min-height:66px}
  .compose-row{
    display:flex; align-items:flex-end; gap:8px;
    padding:8px; padding-inline-start:18px;
    background:#FFFFFF; border:2px solid var(--text); border-radius:20px;
    box-shadow:0 5px 0 var(--text);
  }
  .compose-row:focus-within{box-shadow:0 5px 0 var(--carrot-deep)}
  .compose-row input, .compose-row textarea{
    flex:1; min-width:0; min-height:46px; padding:10px 0;
    border:0; outline:none; background:transparent; resize:none;
    font:400 17px/1.6 var(--font-ui); color:var(--text);
  }
  .compose-row textarea{min-height:72px}
  .compose-row ::placeholder{color:#9C8675}
  .send{
    width:48px; height:48px; flex:none; border-radius:14px;
    display:grid; place-items:center;
    border:0; background:var(--cta); color:#FFFFFF; cursor:pointer;
    transition:background .2s ease, transform .3s var(--ease-pop), opacity .2s ease;
  }
  .send svg{width:22px; height:22px}
  .send:hover{background:var(--cta-hover); transform:scale(1.06)}
  .send.is-empty{opacity:.45}
  .compose-row.nudge{animation:nudge .35s ease}
  .compose-err{margin:10px 6px 0; font-size:15px; color:#B3261E}
  .compose-err:empty{display:none}
  .compose-row input[dir="ltr"]{text-align:right}
  @keyframes nudge{20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)}}
  .send:focus-visible{outline:2px solid var(--text); outline-offset:2px}

  .quick{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
  .quick button{
    min-height:44px; padding:0 18px; cursor:pointer;
    border:2px solid var(--text); border-radius:999px;
    background:#FFFFFF; color:var(--text);
    font:500 15px var(--font-ui);
    transition:background .2s ease, color .2s ease, transform .3s var(--ease-pop);
  }
  .quick button:hover{background:var(--text); color:#FFFFFF; transform:translateY(-2px)}
  .final{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px}
  .wa-btn{
    display:inline-flex; align-items:center; gap:10px;
    min-height:56px; padding:0 28px;
    border:2px solid var(--text); border-radius:16px;
    background:#1F8A4C; color:#FFFFFF; text-decoration:none;
    font:600 18px var(--font-ui); box-shadow:0 5px 0 var(--text);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-btn svg{width:22px; height:22px}
  .wa-btn:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--text)}
  .wa-btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--text)}
  .restart{
    min-height:44px; padding:0 8px; border:0; background:none; cursor:pointer;
    font:500 15px var(--font-ui); color:var(--text-dim); text-decoration:underline; text-underline-offset:5px;
  }
  .restart:hover{color:var(--text)}

  @media (max-width:640px){
    .msg{max-width:94%}
    .cbubble{font-size:16px; padding:10px 15px}
    .av{width:36px; height:36px}
    .av svg{width:19px; height:22px}
  }

  /* ============ الفوتر: تحت الأرض ============ */
  .site-footer{
    position:relative;
    padding-block:44px 18px;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
    background-color:#2B1A10;
    background-image:radial-gradient(#3E2819 1.6px, transparent 2px), radial-gradient(#1F120A 1.4px, transparent 1.8px);
    background-size:34px 34px, 53px 53px;
    background-position:0 0, 17px 23px;
    color:#FFF1DE;
  }
  .foot-carrot{
    position:absolute; top:-34px; left:10%;
    width:54px; height:63px;
    transform:rotate(8deg);
  }
  .foot-carrot .fc-leaves{transform-box:view-box; transform-origin:24px 17px; animation:sway 3s ease-in-out infinite}
  .foot-inner{
    max-width:1160px; margin:0 auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px;
  }
  .foot-brand{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
  .foot-logo{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#FFF1DE; text-decoration:none}
  .foot-logo svg{width:30px; height:35px}
  .foot-logo > span{font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1}
  .foot-logo .dot{color:var(--carrot)}
  .foot-brand p{margin:0; font-size:15px; line-height:1.7; color:#D9C4AA}
  .foot-col{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
  .foot-col h3{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px}
  .foot-col li > a{display:inline-flex; align-items:center; min-height:44px; color:#D9C4AA; font-size:15px; text-decoration:none}
  .foot-col li > a:hover{color:#FFFFFF}
  .foot-col ul.socials{gap:8px; margin:0}
  .soc{
    width:40px; height:40px; border-radius:11px;
    display:grid; place-items:center;
    border:1.5px solid #5C3E28; color:#FFF1DE;
    transition:background .2s ease, border-color .2s ease, transform .3s var(--ease-pop);
  }
  .foot-col li > a.soc{display:grid; place-items:center; min-height:0; padding:0}
  .soc svg{width:21px; height:21px; display:block}
  .soc:hover{background:var(--cta); border-color:var(--cta); transform:translateY(-3px)}
  .foot-bottom{
    max-width:1160px; margin:28px auto 0; padding-top:14px; padding-bottom:20px;
    border-top:1px solid #4A3222;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  }
  .foot-bottom p{margin:0; font-size:13px; color:#BFA88E}
  .to-top{display:inline-flex; align-items:center; gap:6px; min-height:44px; color:#FFF1DE; text-decoration:none; font-size:14px}
  .to-top svg{width:16px; height:16px; transition:transform .3s var(--ease-pop)}
  .to-top:hover svg{transform:translateY(-4px)}
  .site-footer :focus-visible{outline-color:var(--carrot)}

  /* ============ زرار واتساب الثابت ============ */
  .wa-float{
    position:fixed; z-index:60;
    left:max(20px, calc(env(safe-area-inset-left, 0px) + 12px));
    bottom:max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    display:flex; align-items:center; direction:ltr;
    height:62px; padding:0 7px;
    border:2px solid var(--text); border-radius:999px;
    background:#1F8A4C; color:#FFFFFF; text-decoration:none;
    box-shadow:0 5px 0 var(--text);
    animation:wa-in .6s var(--ease-pop) .8s both;
    transition:box-shadow .2s ease, translate .2s ease;
  }
  .wa-ico{width:44px; height:44px; flex:none; display:grid; place-items:center}
  .wa-ico svg{width:30px; height:30px}
  .wa-text{
    display:flex; flex-direction:column; align-items:flex-end; direction:rtl;
    max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
    transition:max-width .45s ease, opacity .3s ease, margin .45s ease;
  }
  .wa-text b{font:600 15px/1.3 var(--font-ui)}
  .wa-text span{font:500 13px/1.3 var(--font-ui); color:#D7F5E2}
  .wa-float:hover .wa-text, .wa-float:focus-visible .wa-text, .wa-float.open .wa-text{
    max-width:200px; opacity:1; margin:0 14px 0 4px;
  }
  .wa-float:hover{translate:0 -2px; box-shadow:0 7px 0 var(--text)}
  .wa-float:active{translate:0 4px; box-shadow:0 1px 0 var(--text)}
  .wa-float:focus-visible{outline:3px solid var(--carrot); outline-offset:4px}
  .wa-sprout{
    position:absolute; top:-15px; left:16px;
    width:30px; height:18px;
    transform-origin:50% 100%; animation:sway 2.6s ease-in-out infinite;
  }
  .wa-float.nudge .wa-ico{animation:wa-ring .7s ease}
  @keyframes wa-in{from{opacity:0; transform:scale(.4) translateY(30px)} to{opacity:1; transform:none}}
  @keyframes wa-ring{
    0%,100%{transform:rotate(0)} 20%{transform:rotate(-16deg)} 40%{transform:rotate(14deg)}
    60%{transform:rotate(-8deg)} 80%{transform:rotate(5deg)}
  }
  @media (max-width:640px){
    .wa-float{height:58px}
    .wa-float.open .wa-text{max-width:0; opacity:0; margin:0}
  }
  @media (max-width:760px){ .foot-carrot{left:auto; right:14%} }

  .next-project h3, .page-head p{text-wrap:balance}
  .next-slot{
    min-height:70vh; display:grid; place-items:center; padding:var(--section-gap) 16px;
  }
  .next-slot p{
    margin:0; padding:18px 24px;
    border:1.5px dashed var(--line); border-radius:18px;
    color:var(--text-dim); font-size:15px;
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none !important; transition:none !important}
    .drawer li{opacity:1; transform:none}
  }

  /* ============ هيدر صفحة شغلنا ============ */
  .page-head{
    position:relative;
    padding-block:170px 150px;
    padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
  }
  .page-head-inner{max-width:1160px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
  .page-head h1{
    margin:0; font-family:var(--font-display); font-weight:700;
    font-size:clamp(40px, 6vw, 80px); line-height:1.4; color:var(--text);
  }
  .page-head p{margin:0; max-width:52ch; font-size:18px; line-height:1.8; color:var(--text-dim)}
  .page-ground{
    position:absolute; left:0; right:0; bottom:0; height:56px;
    background-color:#2B1A10;
    background-image:radial-gradient(#3E2819 1.6px, transparent 2px), radial-gradient(#1F120A 1.4px, transparent 1.8px);
    background-size:34px 34px, 53px 53px;
    background-position:0 0, 17px 23px;
  }
  .page-ground svg{position:absolute; left:0; top:-17px; width:100%; height:18px; display:block; fill:#2B1A10}

  @media (max-width:640px){ .page-head{padding-block:140px 120px} }