/* Trimind AI — Arabic one‑page site */
:root{
  --bg:#0d1117;
  --fg:#e6edf3;
  --muted:#9da3ae;
  --brand:#3aaed9;
  --brand-2:#4f46e5;
  --glass:rgba(255,255,255,0.06);
  --card:#111827;
  --line:rgba(255,255,255,0.08);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(79,70,229,.18), transparent),
              radial-gradient(1000px 700px at -10% 10%, rgba(58,174,217,.15), transparent),
              var(--bg);
  color:var(--fg);
  line-height:1.7;
}
img{max-width:100%;display:block}

.container{width:min(1100px,92%);margin-inline:auto}
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(13,17,23,.85), rgba(13,17,23,.6));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.nav a{color:var(--fg);text-decoration:none;margin-inline:10px}
.nav .btn--sm{padding:8px 14px;border:1px solid var(--line);border-radius:10px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand img{width:36px;height:36px;border-radius:8px; border:1px solid var(--line)}

.hero{position:relative; padding:80px 0 40px}
.hero__inner{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero__text h1{font-size:40px; margin:0 0 12px}
.highlight{background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__text p{color:var(--muted); margin:0 0 18px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
.badges{display:flex; gap:12px; padding:0; list-style:none; color:var(--muted); flex-wrap:wrap}
.badges li{border:1px dashed var(--line); padding:6px 10px; border-radius:999px; font-size:14px}

.hero__media{padding:22px}
.glass{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero__media img{width:120px; margin:0 auto 16px; opacity:.95}
.hero__stats{display:flex; gap:18px; justify-content:space-between}
.hero__stats div{background:#0b1220;border:1px solid var(--line); padding:12px 14px; border-radius:12px; text-align:center; flex:1}
.hero__stats strong{font-size:22px; display:block}

.section{padding:66px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))}
.section__title{text-align:center; margin:0 0 28px; font-size:28px}

.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.card h3{margin-top:0}
.list{margin:0; padding-inline-start:18px}

.steps{counter-reset:step; display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.steps li{list-style:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; min-width:220px}
.steps span{font-weight:800; background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-left:6px}

.integrations{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap}
.tag{border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:14px; background:#0b1220}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.price-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; position:relative}
.price-card.featured{border-color:transparent; background:linear-gradient(180deg, rgba(58,174,217,.15), rgba(79,70,229,.15)); box-shadow:var(--shadow)}
.price{font-size:24px; margin:8px 0 16px}
.price-card ul{margin:0 0 18px 0; padding-inline-start:18px}

.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.form label{display:block; margin-bottom:10px}
input, textarea{width:100%; background:#0b1220; color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:10px}
input:focus, textarea:focus{outline:none; border-color:var(--brand)}
.status{color:var(--muted); min-height:1.4em}

.btn{display:inline-block; text-decoration:none; color:var(--fg); padding:12px 18px; border-radius:12px; border:1px solid var(--line)}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); border:0}
.btn--ghost{background:transparent}

.footer{border-top:1px solid var(--line); padding:22px 0; color:var(--muted)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .hero{padding-top:40px}
}