@property --angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

:root{
  --bg:#08060f;
  --bg-alt:#040309;
  --surface:#161616;
  --surface-2:#212121;
  --border:rgba(200,200,210,0.10);
  --border-strong:rgba(200,200,210,0.20);
  --text:#d9d2ea;
  --text-dim:#97a0b0;
  --accent:#3b6ff5;
  --accent-2:#3ea6ff;
  --accent-3:#22e3c8;
  --gold:#f0b53f;
  --glow:rgba(59,111,245,0.38);
  --mono:'IBM Plex Mono',monospace;
  --sans-en:'IBM Plex Sans',sans-serif;
  --sans-ar:'Cairo',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans-ar);
  line-height:1.65;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

body[dir="ltr"]{font-family:var(--sans-en)}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.05;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0.6) 0px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}

.glow-field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.22;
}

.orb-a{
  width:560px;
  height:560px;
  top:-180px;
  inset-inline-end:-140px;
  background:radial-gradient(circle,var(--accent),transparent 70%);
  animation:drift 22s ease-in-out infinite alternate;
}

.orb-b{
  width:440px;
  height:440px;
  top:280px;
  inset-inline-start:-150px;
  background:radial-gradient(circle,var(--accent-2),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate-reverse;
}

.orb-c{
  width:320px;
  height:320px;
  bottom:-100px;
  inset-inline-end:12%;
  background:radial-gradient(circle,var(--accent-3),transparent 72%);
  opacity:0.14;
  animation:drift 30s ease-in-out infinite alternate;
}

@keyframes drift{
  0%{transform:translateY(0) translateX(0)}
  100%{transform:translateY(40px) translateX(-30px)}
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,6vw,72px);
  position:relative;
  z-index:2;
  gap:14px;
  flex-wrap:wrap;
}

.brand{display:flex;align-items:center;gap:12px}

.brand-logo{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 22px var(--glow);
  border:1px solid var(--border-strong);
  overflow:hidden;
}

.brand-logo img{width:100%;height:100%;object-fit:cover;display:block}

.brand-word{font-family:var(--mono);font-size:1.15rem;letter-spacing:0.04em;direction:ltr;color:#f4f8fa;font-weight:700}

.topbar-right{display:flex;align-items:center;gap:14px}

.lang-toggle{
  font-family:var(--mono);
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--text);
  padding:8px 18px;
  border-radius:7px;
  cursor:pointer;
  font-size:0.85rem;
  letter-spacing:0.05em;
  transition:border-color 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;
}

.lang-toggle:hover,.lang-toggle:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 18px rgba(59,111,245,0.3);
}

main{position:relative;z-index:2}

.hero{
  padding:clamp(44px,8vw,96px) clamp(20px,6vw,72px) clamp(60px,10vw,110px);
  max-width:960px;
  position:relative;
}

.hero-watermark{
  position:absolute;
  top:-10px;
  inset-inline-end:0;
  font-family:var(--mono);
  font-size:clamp(3.4rem,9vw,6rem);
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--border-strong);
  letter-spacing:0.02em;
  pointer-events:none;
  user-select:none;
  z-index:-1;
  direction:ltr;
}

.eyebrow{
  font-family:var(--mono);
  color:var(--accent-2);
  font-size:0.82rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:20px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--accent-2);
  display:inline-block;
}

.hero-title{
  font-size:clamp(2.2rem,5.8vw,3.9rem);
  font-weight:800;
  line-height:1.15;
  color:#f4f8fa;
  margin-bottom:22px;
  letter-spacing:-0.01em;
}

.hero-title .accent-word{
  background:linear-gradient(120deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-lead{
  font-size:clamp(1rem,1.7vw,1.2rem);
  color:var(--text-dim);
  max-width:640px;
  margin-bottom:44px;
}

.terminal{
  background:var(--bg-alt);
  border:1px solid var(--border-strong);
  border-radius:12px;
  overflow:hidden;
  max-width:620px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,0.8),0 0 0 1px rgba(59,111,245,0.08);
  position:relative;
}

.terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-r{background:#e5573f}
.dot-y{background:var(--gold)}
.dot-g{background:var(--accent-2)}

.terminal-title{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--text-dim);
  margin-inline-start:8px;
}

.terminal-body{padding:22px 20px;min-height:64px;position:relative;overflow:hidden}

.terminal-line{
  font-family:var(--mono);
  font-size:0.92rem;
  direction:ltr;
  text-align:left;
  color:var(--text);
  position:relative;
  z-index:1;
}

.prompt{color:var(--accent-2);margin-inline-end:10px}

#terminalText{color:var(--accent)}

.cursor{
  color:var(--accent);
  animation:blink 1s step-end infinite;
}

@keyframes blink{
  50%{opacity:0}
}

.tools{
  padding:0 clamp(20px,6vw,72px) clamp(60px,10vw,100px);
}

.section-label{
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
  padding-bottom:18px;
  margin-bottom:34px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.section-count{
  font-family:var(--mono);
  color:var(--accent);
  letter-spacing:0.05em;
  direction:ltr;
}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:24px;
}

.tool-card{
  background:linear-gradient(160deg,var(--surface),var(--bg-alt));
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
  position:relative;
  isolation:isolate;
}

.tool-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:15px;
  padding:1px;
  background:conic-gradient(from var(--angle),transparent 0%,var(--accent) 12%,transparent 26%,var(--accent-2) 52%,transparent 66%,var(--accent-3) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0.32;
  animation:spin 7s linear infinite;
  z-index:-1;
}

.tool-index{
  position:absolute;
  top:14px;
  inset-inline-end:18px;
  font-family:var(--mono);
  font-size:2.1rem;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--border-strong);
  direction:ltr;
  z-index:0;
  pointer-events:none;
}

.tool-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 24px 50px -24px rgba(0,0,0,0.6),0 0 0 1px rgba(59,111,245,0.22),0 0 34px -6px var(--glow);
}

.tool-card:hover::after{opacity:0.85}

.status-badge{
  font-family:var(--mono);
  font-size:0.66rem;
  letter-spacing:0.07em;
  padding:4px 11px;
  border-radius:999px;
  text-transform:uppercase;
  margin-inline-start:auto;
  white-space:nowrap;
}

.status-new{background:rgba(62,166,255,0.14);color:var(--accent-2);border:1px solid rgba(62,166,255,0.4)}
.status-update{background:rgba(240,181,63,0.16);color:var(--gold);border:1px solid rgba(240,181,63,0.4)}

.tool-body{padding:24px 20px 26px;flex:1;display:flex;flex-direction:column;position:relative;z-index:1}

.tool-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}

.tool-logo{
  width:46px;
  height:46px;
  border-radius:11px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
}

.tool-logo-fallback{
  width:46px;
  height:46px;
  border-radius:11px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-strong);
  font-family:var(--mono);
  font-size:0.9rem;
  color:var(--accent);
  font-weight:700;
}

.tool-name{
  font-family:var(--mono);
  font-size:1.08rem;
  font-weight:600;
  color:#f4f8fa;
  direction:ltr;
  text-align:left;
}

.tool-desc{
  color:var(--text-dim);
  font-size:0.94rem;
  flex:1;
  margin-bottom:18px;
}

.tool-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  font-family:var(--mono);
  font-size:0.74rem;
  direction:ltr;
}

.badge{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-dim);
}

.badge-lang{color:var(--gold);border-color:rgba(240,181,63,0.3)}
.badge-star{color:var(--accent-2);border-color:rgba(62,166,255,0.3)}

.tool-actions{display:flex;flex-wrap:wrap;gap:10px}

.tool-link{
  font-family:var(--mono);
  font-size:0.8rem;
  font-weight:500;
  text-decoration:none;
  padding:10px 18px;
  border-radius:7px;
  transition:transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease;
  border:1px solid var(--border-strong);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.tool-link.primary{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  border-color:transparent;
  color:#ffffff;
  font-weight:600;
}

.tool-link.primary:hover,.tool-link.primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px var(--glow);
}

.tool-link.secondary:hover,.tool-link.secondary:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
}

.legal{
  margin:0 clamp(20px,6vw,72px) clamp(50px,8vw,80px);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--bg-alt));
  position:relative;
}

.legal::before{
  content:"";
  position:absolute;
  top:0;
  inset-inline:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  opacity:0.7;
}

.legal summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  font-family:var(--mono);
  font-size:0.9rem;
  font-weight:600;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  transition:color 0.2s ease;
}

.legal summary::-webkit-details-marker{display:none}

.summary-left{display:flex;align-items:center;gap:12px}

.summary-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(59,111,245,0.18),rgba(62,166,255,0.18));
  border:1px solid var(--border-strong);
  flex-shrink:0;
}

.summary-icon svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

.legal summary:hover{color:var(--accent)}

.legal summary::after{
  content:"+";
  font-size:1.2rem;
  color:var(--text-dim);
  transition:transform 0.2s ease,color 0.2s ease;
  flex-shrink:0;
}

.legal summary:hover::after{color:var(--accent)}

.legal[open] summary::after{
  transform:rotate(45deg);
}

.legal-body{
  padding:4px 22px 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  border-top:1px solid var(--border);
  padding-top:20px;
}

.legal-block{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:11px;
  padding:18px 18px 20px;
  border-inline-start:2px solid var(--accent);
  transition:border-color 0.25s ease,transform 0.25s ease;
}

.legal-block:nth-child(2){border-inline-start-color:var(--accent-2)}

.legal-block:hover{transform:translateY(-3px)}

.legal-block h3{
  font-family:var(--mono);
  font-size:0.92rem;
  color:#f4f8fa;
  margin-bottom:9px;
  letter-spacing:0.02em;
}

.legal-block p{
  color:var(--text-dim);
  font-size:0.87rem;
}

.site-footer{
  padding:28px clamp(20px,6vw,72px) 44px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.footer-note{color:var(--text-dim);font-size:0.85rem;font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

.socials{display:flex;gap:14px;align-items:center}

.socials a{
  color:var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:9px;
  border:1px solid var(--border-strong);
  transition:color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,transform 0.2s ease;
}

.socials a svg{width:16px;height:16px}

.socials a:hover,.socials a:focus-visible{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 16px rgba(59,111,245,0.3);
  transform:translateY(-2px);
}

@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
  .tool-card{transition:none}
  .tool-card::after{animation:none}
  .orb{animation:none}
}

@media (max-width:900px){
  .tool-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .hero-watermark{font-size:clamp(2.6rem,8vw,4.4rem)}
}

@media (max-width:720px){
  .topbar{padding:20px 22px}
  .hero{padding:30px 22px 46px}
  .tools{padding:0 22px 46px}
  .legal{margin:0 22px 46px}
  .terminal{max-width:100%}
  .hero-title{font-size:clamp(1.9rem,7vw,2.6rem)}
}

@media (max-width:600px){
  .topbar{justify-content:space-between}
  .topbar-right{width:auto}
  .tool-grid{grid-template-columns:1fr}
  .legal-body{grid-template-columns:1fr}
  .tool-actions{flex-direction:column;align-items:stretch}
  .tool-link{justify-content:center}
}

@media (max-width:480px){
  .topbar{padding:18px 16px}
  .hero{padding:26px 16px 40px}
  .hero-watermark{display:none}
  .tools{padding:0 16px 40px}
  .legal{margin:0 16px 40px}
  .brand-word{font-size:1rem}
  .eyebrow{font-size:0.74rem}
  .section-label{flex-wrap:wrap;gap:6px}
  .tool-body{padding:20px 16px 22px}
}