/* «مِسك ببساطة» — friendly, simple feature guide per audience */
.gd-three{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding-block:clamp(26px,4vw,44px)}
.gd-three div{display:grid;text-align:center;padding:16px 26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -24px rgba(3,20,15,.45);animation:gd-bob 4s ease-in-out infinite}
.gd-three div:nth-of-type(2){animation-delay:.5s}.gd-three div:nth-of-type(3){animation-delay:1s}
.gd-three b{font-size:clamp(22px,3vw,30px);background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.gd-three span{font-size:14px;color:var(--muted)}
.gd-three i{width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--emerald),var(--gold))}
@keyframes gd-bob{50%{transform:translateY(-5px)}}

.gd-pick{padding-block:clamp(20px,4vw,50px)}
.gd-pick>h2,.gd-flow h2,.gd-promise h2{font-size:clamp(24px,3.6vw,38px);margin:0 0 16px;text-align:center}
.gd-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.gd-tab{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
.gd-tab span{font-size:20px;transition:transform .3s}
.gd-tab:hover{transform:translateY(-2px);border-color:var(--emerald)}
.gd-tab:hover span{transform:rotate(-12deg) scale(1.15)}
.gd-tab[aria-selected="true"]{background:var(--night);color:#fff;border-color:transparent;box-shadow:0 12px 26px -14px rgba(3,20,15,.9)}
.gd-tab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.gd-panel{animation:gd-in .45s ease-out}
@keyframes gd-in{from{opacity:0;transform:translateY(10px)}}
.gd-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gd-big{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font-size:34px;background:linear-gradient(135deg,#e5f7ef,#f6f0de);animation:gd-wiggle 5s ease-in-out infinite}
@keyframes gd-wiggle{0%,85%,100%{transform:rotate(0)}89%{transform:rotate(-10deg)}93%{transform:rotate(8deg)}97%{transform:rotate(-3deg)}}
.gd-head h2{margin:2px 0 0;font-size:clamp(20px,3vw,28px)}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.gd-card{padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .35s,box-shadow .35s;animation:gd-in .5s ease-out both}
.gd-card:nth-child(2){animation-delay:.05s}.gd-card:nth-child(3){animation-delay:.1s}.gd-card:nth-child(4){animation-delay:.15s}.gd-card:nth-child(5){animation-delay:.2s}.gd-card:nth-child(6){animation-delay:.25s}
.gd-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 22px 40px -28px rgba(3,20,15,.55)}
.gd-ico{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:15px;font-size:24px;background:#f1f8f4}
.gd-card h3{margin:12px 0 6px;font-size:18px}
.gd-card p{margin:0;color:var(--muted);line-height:1.9;font-size:15px}
.gd-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}

.gd-flow{padding-block:clamp(40px,6vw,80px);text-align:center}
.gd-flow .lede{max-width:56ch;margin:0 auto 18px;color:var(--muted)}
.gd-net{position:relative;max-width:620px;margin:0 auto;aspect-ratio:600/240}
.gd-net svg{position:absolute;inset:0;width:100%;height:100%}
.gd-net path{fill:none;stroke:#cfe7dc;stroke-width:3;stroke-dasharray:8 8;animation:gd-dash 20s linear infinite}
@keyframes gd-dash{to{stroke-dashoffset:-400}}
.gd-dot{fill:var(--emerald);filter:drop-shadow(0 0 6px rgba(16,185,138,.8))}
.gd-dot.d2{fill:var(--gold)}
.gd-node{position:absolute;display:grid;justify-items:center;gap:4px;font-weight:800;font-size:14px}
.gd-node span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;border:2px solid var(--line);font-size:30px;box-shadow:0 14px 26px -18px rgba(3,20,15,.6)}
.gd-node.n1{right:4%;bottom:0}.gd-node.n3{left:4%;bottom:0}.gd-node.n2{left:50%;top:0;transform:translateX(-50%)}
.gd-node.n2 span{background:var(--night);border-color:transparent;animation:gd-bob 3s ease-in-out infinite}
.gd-flow-list{list-style:none;padding:0;margin:26px auto 0;max-width:640px;display:grid;gap:8px;text-align:right}
.gd-flow-list li{padding:12px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);line-height:1.9}

.gd-promise{padding-block:clamp(30px,5vw,70px)}
@media (max-width:640px){
  .gd-three{gap:8px}.gd-three i{display:none}.gd-three div{padding:12px 16px}
  .gd-tab{padding:8px 12px;font-size:14px}.gd-tab span{font-size:17px}
  .gd-big{width:52px;height:52px;font-size:28px}
  .gd-node span{width:48px;height:48px;font-size:24px}.gd-node{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.gd-three div,.gd-big,.gd-net path,.gd-node.n2 span,.gd-card,.gd-panel{animation:none}}