:root{
  --bg:#fcfaf7;
  --paper:#ffffff;
  --ink:#171614;
  --muted:#716b65;
  --accent:#2b1c15;
  --accent-2:#ca5520;
  --line:rgba(23,22,20,.105);
  --shadow:0 28px 90px rgba(27,20,16,.09);
  --radius-xl:38px;
  --radius-lg:27px;
  --radius-md:20px;
  --max:1180px;
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  background:var(--bg)
}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(
      circle at 5% 0%,
      color-mix(
        in srgb,
        var(--accent-2) 12%,
        transparent
      ),
      transparent 34rem
    ),
    radial-gradient(
      circle at 100% 20%,
      color-mix(
        in srgb,
        var(--accent) 10%,
        transparent
      ),
      transparent 32rem
    ),
    var(--bg);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  line-height:1.72;
  text-rendering:optimizeLegibility
}

body[dir="rtl"]{
  font-family:
    "Noto Sans Arabic",
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif
}

a{
  color:inherit
}

.w2-progress{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:3px;
  z-index:9999;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-2)
    )
}

.w2-shell{
  width:min(
    calc(100% - 32px),
    var(--max)
  );
  margin-inline:auto
}

.w2-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px 0
}

.w2-brand{
  font-size:14px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none
}

body[dir="rtl"] .w2-brand{
  letter-spacing:.04em
}

.w2-lang{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:0 16px;
  background:rgba(255,255,255,.82);
  text-decoration:none;
  font-weight:720;
  font-size:14px;
  backdrop-filter:blur(16px)
}

.w2-hero{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:grid;
  grid-template-columns:
    minmax(0,1.18fr)
    minmax(310px,.82fr);
  align-items:center;
  gap:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:
    clamp(38px,7vw,88px);
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      color-mix(
        in srgb,
        var(--accent-2) 7%,
        white
      ) 48%,
      color-mix(
        in srgb,
        var(--accent) 9%,
        white
      ) 100%
    );
  box-shadow:var(--shadow)
}

.w2-hero::before{
  content:"";
  position:absolute;
  inset:auto -180px -220px auto;
  width:520px;
  height:520px;
  border-radius:50%;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 24%,
      transparent
    )
}

.w2-hero::after{
  content:"";
  position:absolute;
  top:-180px;
  right:-80px;
  width:330px;
  height:330px;
  border-radius:50%;
  background:
    color-mix(
      in srgb,
      var(--accent-2) 7%,
      transparent
    )
}

.w2-hero-copy{
  position:relative;
  z-index:2
}

.w2-kicker{
  color:var(--accent-2);
  font-weight:850;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:19px
}

body[dir="rtl"] .w2-kicker{
  letter-spacing:.03em
}

.w2-hero h1{
  margin:0 0 26px;
  max-width:830px;
  font-size:
    clamp(
      42px,
      6.3vw,
      80px
    );
  line-height:.99;
  letter-spacing:-.055em
}

body[dir="rtl"] .w2-hero h1{
  line-height:1.23;
  letter-spacing:0
}

.w2-lead{
  max-width:760px;
  margin:0;
  color:#4f4944;
  font-size:
    clamp(
      18px,
      2vw,
      23px
    )
}

.w2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:31px
}

.w2-btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 21px;
  font-weight:800;
  text-decoration:none;
  transition:
    transform .18s ease,
    box-shadow .18s ease
}

.w2-btn:hover{
  transform:translateY(-2px)
}

.w2-btn-primary{
  background:var(--ink);
  color:#fff;
  box-shadow:
    0 14px 36px
    rgba(23,22,20,.17)
}

.w2-btn-secondary{
  border:1px solid var(--line);
  background:rgba(255,255,255,.88)
}

.w2-visual{
  position:relative;
  z-index:2;
  min-height:370px
}

.w2-orb{
  position:absolute;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:
    0 25px 70px
    rgba(25,18,15,.09);
  border:
    1px solid
    rgba(255,255,255,.75);
  backdrop-filter:blur(12px)
}

.w2-orb strong{
  font-size:35px;
  line-height:1
}

.w2-orb span{
  margin-top:8px;
  font-size:13px;
  font-weight:750
}

.w2-orb-a{
  width:230px;
  height:230px;
  top:2%;
  right:6%;
  background:
    linear-gradient(
      145deg,
      #fff,
      color-mix(
        in srgb,
        var(--accent-2) 21%,
        white
      )
    )
}

.w2-orb-b{
  width:145px;
  height:145px;
  top:54%;
  left:1%;
  background:
    linear-gradient(
      145deg,
      #fff,
      color-mix(
        in srgb,
        var(--accent) 17%,
        white
      )
    )
}

.w2-orb-c{
  width:102px;
  height:102px;
  right:1%;
  bottom:1%;
  color:#fff;
  background:var(--ink)
}

.w2-proofbar{
  margin:27px 0 78px;
  display:grid;
  grid-template-columns:
    repeat(4,1fr);
  overflow:hidden;
  border:
    1px solid
    var(--line);
  border-radius:24px;
  background:var(--line);
  gap:1px
}

.w2-proof{
  background:#fff;
  padding:23px
}

.w2-proof strong{
  display:block;
  font-size:19px;
  margin-bottom:5px
}

.w2-proof span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.5
}

.w2-layout{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    294px;
  gap:70px;
  align-items:start
}

.w2-article{
  min-width:0;
  font-size:18px
}

.w2-article h2{
  margin:84px 0 22px;
  font-size:
    clamp(
      30px,
      3.4vw,
      46px
    );
  line-height:1.13;
  letter-spacing:-.037em
}

body[dir="rtl"] .w2-article h2{
  letter-spacing:0;
  line-height:1.4
}

.w2-article h3{
  margin:37px 0 12px;
  font-size:23px;
  line-height:1.3
}

.w2-article p{
  margin:0 0 23px;
  color:#39342f
}

.w2-article li{
  margin:9px 0;
  color:#39342f
}

.w2-answer{
  margin:0 0 44px;
  padding:31px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-2) 18%,
      white
    );
  border-radius:var(--radius-lg);
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent-2) 7%,
        white
      ),
      white
    )
}

.w2-answer strong{
  display:block;
  font-size:23px;
  margin-bottom:10px
}

.w2-grid{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);
  gap:14px;
  margin:30px 0
}

.w2-card{
  padding:25px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:
    0 12px 38px
    rgba(24,18,15,.035)
}

.w2-card h3{
  margin-top:0
}

.w2-note{
  margin:32px 0;
  padding:
    7px 0
    7px 22px;
  border-left:
    4px solid
    var(--accent-2);
  color:#514b45
}

body[dir="rtl"] .w2-note{
  border-left:0;
  border-right:
    4px solid
    var(--accent-2);
  padding:
    7px 22px
    7px 0
}

.w2-table-wrap{
  overflow-x:auto;
  margin:30px 0
}

.w2-table{
  width:100%;
  min-width:580px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:
    1px solid
    var(--line);
  border-radius:var(--radius-md);
  background:#fff
}

.w2-table th,
.w2-table td{
  padding:17px 18px;
  text-align:start;
  vertical-align:top;
  border-bottom:
    1px solid
    var(--line)
}

.w2-table th{
  background:#faf8f5;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.065em
}

body[dir="rtl"] .w2-table th{
  letter-spacing:0
}

.w2-table tr:last-child td{
  border-bottom:0
}

.w2-sidebar{
  position:sticky;
  top:25px
}

.w2-toc{
  padding:24px;
  border:
    1px solid
    var(--line);
  border-radius:23px;
  background:
    rgba(255,255,255,.85);
  backdrop-filter:blur(18px)
}

.w2-toc strong{
  display:block;
  margin-bottom:12px
}

.w2-toc a{
  display:block;
  padding:7px 0;
  color:#5c554f;
  font-size:14px;
  text-decoration:none
}

.w2-faq details{
  margin:12px 0;
  padding:18px 20px;
  border:
    1px solid
    var(--line);
  border-radius:18px;
  background:#fff
}

.w2-faq summary{
  cursor:pointer;
  font-weight:820
}

.w2-faq details p{
  margin:14px 0 0
}

.w2-cta{
  margin:90px 0 40px;
  padding:
    clamp(
      31px,
      6vw,
      68px
    );
  border-radius:34px;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #171614,
      color-mix(
        in srgb,
        var(--accent) 65%,
        #171614
      )
    )
}

.w2-cta h2{
  color:#fff;
  margin-top:0
}

.w2-cta p{
  color:#ded7d0
}

.w2-source{
  padding:18px 0;
  border-bottom:
    1px solid
    var(--line);
  font-size:15px
}

.w2-source:last-child{
  border-bottom:0
}

.w2-source a{
  font-weight:800
}

.w2-mini{
  color:var(--muted);
  font-size:13px
}

.w2-footer{
  margin-top:75px;
  padding:36px 0 60px;
  border-top:
    1px solid
    var(--line);
  color:var(--muted);
  font-size:14px
}

.w2-footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap
}

.w2-footer a{
  text-decoration:none
}

@media(max-width:900px){

  .w2-hero{
    grid-template-columns:1fr;
    padding:43px 28px
  }

  .w2-visual{
    min-height:300px
  }

  .w2-layout{
    grid-template-columns:1fr;
    gap:32px
  }

  .w2-sidebar{
    position:static
  }

  .w2-proofbar{
    grid-template-columns:
      repeat(2,1fr)
  }
}

@media(max-width:560px){

  .w2-shell{
    width:min(
      calc(100% - 20px),
      var(--max)
    )
  }

  .w2-hero{
    min-height:auto;
    border-radius:28px
  }

  .w2-proofbar{
    grid-template-columns:1fr
  }

  .w2-grid{
    grid-template-columns:1fr
  }

  .w2-orb-a{
    width:190px;
    height:190px
  }

  .w2-orb-b{
    width:120px;
    height:120px
  }
}