/* Root & Theme */
:root{
  --bg: #0b0e14;
  --bg-soft:#101624;
  --fg:#e6e6e6;
  --muted:#a1a1aa;
  --primary:#7c3aed;
  --secondary:#22d3ee;
  --card:#0f1422;
  --border:rgba(255,255,255,.08);
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --grad: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
          radial-gradient(800px 400px at 110% 10%, rgba(34,211,238,.18), transparent 60%);
}
:root.light{
  --bg:#f7f7fb;
  --bg-soft:#ffffff;
  --fg:#0b0e14;
  --muted:#4b5563;
  --card:#ffffff;
  --border:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.1);
  --grad: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.12), transparent 60%),
          radial-gradient(800px 400px at 110% 10%, rgba(34,211,238,.10), transparent 60%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  background-image: var(--grad);
  color: var(--fg);
  line-height:1.7; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:90px 0}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px}
.section-title h2{margin:0; font-size: clamp(26px, 4vw, 36px)}
.section-title .sub{color:var(--muted)}

/* RTL support */
[dir="rtl"]{direction:rtl}
[dir="rtl"] .menu{flex-direction:row-reverse}

/* Navbar */
.nav{position:sticky; top:0; z-index:40; backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg-soft), transparent 35%); border-bottom:1px solid var(--border)}
.nav .row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800}
.logo .dot{width:10px; height:10px; border-radius:50%; background: conic-gradient(from 0deg, var(--primary), var(--secondary));
  box-shadow: 0 0 12px var(--secondary)}
.menu{display:flex; gap:18px; align-items:center}
.menu a{opacity:.8}
.menu a.active, .menu a:hover{opacity:1}
.theme-toggle{width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:transparent; cursor:pointer}

/* Hero */
.hero{position:relative; padding:120px 0 90px}
.hero-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
h1{font-size: clamp(34px, 6vw, 58px); line-height:1.1; margin:0 0 12px}
p.lead{font-size:1.1rem; color:var(--muted)}
.hero-card{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border);
  border-radius: var(--radius); padding:22px; box-shadow: var(--shadow)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
.kpi{padding:14px; border:1px solid var(--border); border-radius:14px; text-align:center}
.kpi .num{font-weight:800; font-size:1.4rem}
#particles{position:absolute; inset:0; z-index:-1}

/* Buttons & Tags */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px;
  border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:var(--shadow); cursor:pointer; transition:.2s transform}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background: linear-gradient(135deg, var(--primary), var(--secondary)); color:white; border:0}
.tag{padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:var(--muted)}

/* Cards & Grid */
.card{background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transform: perspective(800px) translateZ(0); transition: transform .2s ease}
.card:hover{transform: perspective(800px) translateZ(12px) rotateX(1deg) rotateY(-1deg)}
.card .body{padding:18px}
.card .title{font-weight:700; font-size:1.05rem}
.muted{color:var(--muted)}
.grid{display:grid; gap:24px}
.projects{grid-template-columns: repeat(12, 1fr)}
.project{grid-column: span 4; display:flex; flex-direction:column}
.project img{aspect-ratio: 16/10; object-fit:cover}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}

/* Slider (testimonials) */
.slider{display:grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap:18px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:6px}
.slide{scroll-snap-align: start}
.stars{letter-spacing:2px}

/* Contact */
.form{display:grid; gap:12px}
.input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg-soft), transparent 10%); color:var(--fg)}
textarea{min-height:120px; resize:vertical}

/* Footer */
.footer{border-top:1px solid var(--border); padding:30px 0; color:var(--muted)}

/* Reveal */
.reveal{opacity:0; transform: translateY(12px); transition: .6s ease}
.reveal.show{opacity:1; transform: translateY(0)}

@media (max-width: 900px){
  .hero-wrap{grid-template-columns: 1fr}
  .project{grid-column: span 6}
}
@media (max-width: 640px){
  .project{grid-column: span 12}
}