@font-face{font-family:"Yekan Bakh";src:url("./fonts/YekanBakh-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
:root{
  --blue:#27B365;

  /* ✅ added brand shades */
  --blue-04:rgba(39,179,101,0.04);
  --blue-07:rgba(39,179,101,0.07);
  --blue-10:rgba(39,179,101,0.1);
  --blue-11:rgba(39,179,101,0.11);
  --blue-13:rgba(39,179,101,0.13);
  --blue-18:rgba(39,179,101,0.18);
  --blue-28:rgba(39,179,101,0.28);
  --blue-35:rgba(39,179,101,0.35);
  --blue-45:rgba(39,179,101,0.45);

  --blue-dim:var(--blue-07);
  --blue-mid:var(--blue-18);

  --ink:#0f1117;--ink-2:#3a3d4a;--ink-3:#7c8090;
  --surface:#ffffff;--surface-2:#f6f7fb;
  --border:rgba(0,0,0,0.07);--border-2:rgba(0,0,0,0.11);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:"Poppins",system-ui,sans-serif;background:var(--surface);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
body[data-lang="en"]{font-family:"Sora",system-ui,sans-serif;}
.bg-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--blue-04) 1px,transparent 1px),
    linear-gradient(90deg,var(--blue-04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 10%,transparent 100%);
}

.bg-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.6;}
.bg-blob-1{width:560px;height:560px;top:-140px;right:-120px;background:radial-gradient(circle,var(--blue-11) 0%,transparent 70%);animation:dA 20s ease-in-out infinite alternate;}
.bg-blob-2{width:420px;height:420px;bottom:-100px;left:-100px;background:radial-gradient(circle,var(--blue-07) 0%,transparent 70%);animation:dB 26s ease-in-out infinite alternate;}

@keyframes dA{from{transform:translate(0,0) scale(1);}to{transform:translate(-40px,40px) scale(1.1);}}
@keyframes dB{from{transform:translate(0,0) scale(1);}to{transform:translate(30px,-30px) scale(1.08);}}

header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px 44px;}

.lang-wrap{position:relative;}
.lang-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border:1px solid var(--border-2);border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-2);transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.lang-btn:hover{border-color:var(--blue-35);box-shadow:0 0 0 3px var(--blue-dim);}

.chevron{width:14px;height:14px;transition:transform .25s cubic-bezier(.4,0,.2,1);}
.lang-wrap.open .chevron{transform:rotate(180deg);}

.lang-menu{position:absolute;top:calc(100% + 10px);background:var(--surface);border:1px solid var(--border-2);border-radius:12px;min-width:152px;display:none;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.05);z-index:100;}
[dir="rtl"] .lang-menu{right:0;}[dir="ltr"] .lang-menu{left:0;}
.lang-wrap.open .lang-menu{display:block;}

.lang-opt{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background .12s;border:none;background:none;width:100%;font-family:inherit;text-align:inherit;}
.lang-opt:hover{background:var(--surface-2);}
.lang-opt.active{color:var(--blue);font-weight:600;}

.lang-opt .chk{opacity:0;color:var(--blue);}
.lang-opt.active .chk{opacity:1;}

main{position:relative;z-index:5;flex:1;display:flex;align-items:center;justify-content:center;padding:48px 44px 64px;gap:80px;}
[dir="rtl"] main{flex-direction:row-reverse;}
[dir="ltr"] main{flex-direction:row;}

.illus{flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;}
.illus-circle{width:380px;height:380px;border-radius:50%;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;position:relative;}

.ring{position:absolute;border-radius:50%;border:1px dashed var(--blue-18);}
.ring-1{width:450px;height:450px;animation:spin 45s linear infinite;}
.ring-2{width:520px;height:520px;border-style:dotted;border-color:var(--blue-10);animation:spin 65s linear infinite reverse;}

@keyframes spin{to{transform:rotate(360deg);}}

.orb{position:absolute;border-radius:50%;top:50%;left:50%;}
.orb-1{width:11px;height:11px;background:var(--blue);margin:-5.5px 0 0 -5.5px;animation:orb1 9s linear infinite;}
.orb-2{width:7px;height:7px;background:var(--blue-45);margin:-3.5px 0 0 -3.5px;animation:orb2 13s linear infinite;}

@keyframes orb1{from{transform:rotate(0deg) translateX(220px);}to{transform:rotate(360deg) translateX(220px);}}
@keyframes orb2{from{transform:rotate(160deg) translateX(255px);}to{transform:rotate(520deg) translateX(255px);}}

.illus-img{width:285px;height:285px;object-fit:contain;position:relative;z-index:2;animation:float 5.5s ease-in-out infinite alternate;filter:drop-shadow(0 28px 44px var(--blue-13));}

@keyframes float{from{transform:translateY(0);}to{transform:translateY(-16px);}}

.content{max-width:450px;}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--blue-dim);border:1px solid var(--blue-mid);border-radius:999px;font-size:12.5px;color:var(--blue);font-weight:500;margin-bottom:22px;animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both;}

.dot{width:7px;height:7px;border-radius:50%;background:var(--blue);position:relative;flex-shrink:0;}
.dot::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--blue-28);animation:pulse 2s ease-out infinite;}

@keyframes pulse{0%{transform:scale(1);opacity:1;}100%{transform:scale(2.4);opacity:0;}}

h1{font-size:40px;font-weight:400;line-height:1.22;letter-spacing:-0.025em;color:var(--ink);margin-bottom:16px;animation:fadeUp .5s .08s cubic-bezier(.4,0,.2,1) both;}
body[data-lang="en"] h1{font-size:44px;font-weight:300;letter-spacing:-0.035em;}
body[data-lang="en"] h1 strong{font-weight:600;}

.body{font-size:15px;line-height:1.88;color:var(--ink-3);margin-bottom:32px;animation:fadeUp .5s .14s cubic-bezier(.4,0,.2,1) both;}

.card{background:var(--surface-2);border:1px solid var(--border-2);border-radius:16px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;animation:fadeUp .5s .2s cubic-bezier(.4,0,.2,1) both;transition:box-shadow .2s,border-color .2s;}
.card:hover{box-shadow:0 0 0 3px var(--blue-dim);border-color:var(--blue-28);}

.card-left{display:flex;align-items:center;gap:14px;}
.card-icon{width:42px;height:42px;border-radius:11px;background:var(--blue-10);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.card-label{font-size:12px;color:var(--ink-3);margin-bottom:3px;}
.card-email{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:-.015em;transition:color .15s;}
.card-email:hover{color:var(--blue);}

.card-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--blue);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .15s;white-space:nowrap;flex-shrink:0;}
.card-btn:hover{opacity:.87;transform:translateY(-1px);}

.prog-wrap{margin-top:26px;animation:fadeUp .5s .26s cubic-bezier(.4,0,.2,1) both;}
.prog-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-bottom:8px;}
.prog-track{height:3px;background:var(--border-2);border-radius:999px;overflow:hidden;}

.prog-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--blue),#818aff);transition:width 2.5s cubic-bezier(.4,0,.2,1);}
[dir="rtl"] .prog-fill{background:linear-gradient(270deg,var(--blue),#818aff);}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

footer{position:relative;z-index:5;text-align:center;padding:20px 44px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--border);}

@media(max-width:840px){
  header{padding:18px 24px;}
  main{flex-direction:column!important;padding:36px 24px 52px;gap:40px;text-align:center;}
  .illus-circle{width:260px;height:260px;}
  .illus-img{width:200px;height:200px;}
  .ring-1{width:310px;height:310px;}
  .ring-2{width:370px;height:370px;}
  h1{font-size:26px;}
  body[data-lang="en"] h1{font-size:30px;}
  .card{flex-direction:column;align-items:flex-start;gap:14px;}
  .card-btn{align-self:stretch;justify-content:center;}
}

.prog-fill::after {
  content:'';
  position:relative;
  top:0;left:-40%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 1.5s infinite;
}

@keyframes shimmer {
  to { left:100%; }
}