:root{
  --primary:#2563EB; --accent:#06B6D4; --purple:#A78BFA;
  --text:#E6ECFF; --muted:#A3B1D1; --bg:#090D1A;
  --card:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.14);
  --radius:18px; --shadow:0 12px 32px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:"Cairo","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.30), transparent 50%), radial-gradient(1000px 500px at 90% 0%, rgba(6,182,212,.20), transparent 50%), var(--bg);}
a{color:inherit;text-decoration:none} .container{max-width:1180px;margin:0 auto;padding:0 22px}
.navbar{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.65);backdrop-filter:blur(12px) saturate(120%);border-bottom:1px solid var(--border)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-brand h2{margin:0;font-size:22px;display:flex;align-items:center;gap:10px}
.nav-menu{display:flex;gap:18px;align-items:center}
.nav-menu a{padding:10px 12px;border-radius:12px;color:#cbd5e1}
.nav-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:#cbd5e1;border-radius:2px}
.language-toggle{position:fixed;top:14px;left:14px;z-index:60}
.language-toggle button{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:rgba(10,16,32,.6);padding:8px 12px;border-radius:12px;cursor:pointer;color:#E5E7EB}
.hero{position:relative;overflow:hidden;padding:110px 0 84px;border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:-2px;background:url('../images/blobs.svg') center/cover no-repeat;opacity:.9;pointer-events:none}
.hero-content{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 14px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{color:#C7E1FF;margin:0 0 20px}
.hero-phrase{margin:14px 0 26px;color:#E9F5FF;font-weight:600}
.hero-buttons{display:flex;gap:12px}
.btn{display:inline-flex;gap:10px;align-items:center;padding:14px 18px;border-radius:14px;border:1px solid transparent;cursor:pointer;font-weight:800;letter-spacing:.2px}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 28px rgba(37,99,235,.35)}
.btn-primary:hover{filter:brightness(1.08)} .btn-secondary{background:rgba(255,255,255,.06);border-color:var(--border)}
.device-mockup{position:relative;height:320px;border-radius:24px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden}
.floating-elements{position:absolute;inset:0;pointer-events:none}
.float-item{position:absolute;right:14px;top:14px;background:rgba(10,16,32,.65);border:1px solid var(--border);padding:8px 10px;border-radius:12px;display:flex;gap:8px;align-items:center;animation:float 6s calc(var(--delay,0s)) infinite ease-in-out alternate}
.float-item:nth-child(2){top:auto;bottom:22px;right:auto;left:22px}
.float-item:nth-child(3){top:50%;right:auto;left:50%;transform:translate(-50%,-50%)}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.section{padding:90px 0} .section-header{text-align:center;margin-bottom:30px} .section-header h2{margin:0 0 8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px) scale(1.01)}
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.pricing-card .plan-header{padding:18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.price{display:flex;align-items:baseline;gap:4px} .amount{font-size:30px;font-weight:900}
.popular{border-color:rgba(37,99,235,.6)} .popular .popular-badge{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:6px 10px;font-size:12px}
.plan-features{padding:14px 18px;display:grid;gap:10px}
.btn-plan{margin:12px 18px 18px;padding:12px 14px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;cursor:pointer}
.btn-plan:hover{filter:brightness(1.08)}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--border)}
.form-group{position:relative;margin-bottom:16px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.06);color:#fff}
.form-group label{position:absolute;top:-9px;left:12px;background:#0B1222;padding:0 6px;font-size:12px;color:#cbd5e1}
.footer{background:rgba(6,10,22,.9);color:#cbd5e1;padding:40px 0;margin-top:32px;border-top:1px solid var(--border)}
.footer a{color:#cbd5e1} .footer-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.footer-bottom{text-align:center;border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
@media (max-width: 980px){
  .hero-content{grid-template-columns:1fr}
  .grid-3,.pricing-cards{grid-template-columns:1fr}
  .contact-content,.footer-content{grid-template-columns:1fr}
  .nav-menu{display:none;position:absolute;right:20px;top:72px;background:rgba(7,11,22,.96);border:1px solid var(--border);border-radius:12px;padding:10px}
  .nav-toggle{display:flex}
  .nav-menu.open{display:flex;flex-direction:column;min-width:240px}
}