/* Base */
:root{
  --bg:#0b1020;
  --surface:#121936;
  --primary:#6c9cff;
  --primary-600:#4a7df0;
  --accent:#ff6cab;
  --text:#e8ecff;
  --muted:#a7b0d6;
  --ok:#2bd477;
  --warn:#ffcf5c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background: radial-gradient(1000px 600px at 80% -10%, rgba(108,156,255,.15), transparent),
              radial-gradient(800px 500px at -10% 20%, rgba(255,108,171,.12), transparent),
              var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1100px, 92%); margin-inline:auto}
.muted{color:var(--muted); font-size:.95rem}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:linear-gradient(135deg, rgba(11,16,32,.95), rgba(18,25,54,.9)); backdrop-filter: blur(12px); border-bottom:1px solid rgba(108,156,255,.2); box-shadow:0 4px 20px rgba(0,0,0,.3); transition:transform .35s ease, background .25s ease}
.site-header.hide{transform:translateY(-100%)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; text-align:center}
.logo img{width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.logo span{font-size:1.3rem; line-height:1.2; background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700}
.nav-links{display:flex; gap:20px; align-items:center}
.nav-links.is-mobile{display:none}
.nav-links.open{display:flex}
.nav-panel{display:none}
.nav-panel.open{display:block}
.nav-links a{padding:12px 18px; border-radius:12px; color:var(--muted); transition:all .3s ease; border:1px solid transparent; font-weight:500; position:relative}
.nav-links a.active, .nav-links a:hover{color:var(--text); background:rgba(108,156,255,.15); border-color:rgba(108,156,255,.3); transform:translateY(-2px); box-shadow:0 4px 12px rgba(108,156,255,.2)}
.nav-toggle{display:none; background:rgba(108,156,255,.15); color:#fff; border:1px solid rgba(108,156,255,.3); border-radius:10px; padding:8px 12px; cursor:pointer; transition:transform .2s ease}
.nav-toggle[aria-expanded="true"]{transform:rotate(90deg)}

/* Hero */
.hero{padding:64px 0 40px; position:relative}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.hero h1{font-size: clamp(20px, 3vw, 32px); margin:0 0 10px; line-height:1.2}
.hero p{color:var(--muted); line-height:1.9; font-size:1.05rem}
.hero-actions{margin-top:20px; display:flex; gap:12px}
.hero-social{margin-top:16px; display:flex; gap:12px; align-items:center}
.hero-social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:var(--muted); transition:all .3s ease}
.hero-social a:hover{background:rgba(108,156,255,.15); border-color:rgba(108,156,255,.3); color:var(--text); transform:translateY(-2px)}
.hero-social a svg{width:18px; height:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.12); cursor:pointer}
.btn-primary{background: linear-gradient(135deg, var(--primary), var(--accent)); color:#091227; font-weight:700; transition:transform .15s ease, box-shadow .15s ease}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(108,156,255,.25), 0 6px 16px rgba(255,108,171,.18)}
.btn-ghost{background:transparent; color:var(--text)}
.btn-website{background:linear-gradient(135deg, #10b981, #059669); color:#fff; font-weight:600; transition:transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:8px}
.btn-website:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,185,129,.3), 0 4px 12px rgba(5,150,105,.2); color:#fff}
.btn-website svg{transition:transform .2s ease}
.btn-website:hover svg{transform:scale(1.1)}
.hero-art{position:relative; height:320px}
.blob{position:absolute; inset:auto 0 0 0; height:260px; background:radial-gradient(closest-side, rgba(108,156,255,.5), transparent 70%); filter:blur(20px); border-radius:50%}
.dots{position:absolute; inset:0; background:radial-gradient(#ffffff22 2px, transparent 2px); background-size:22px 22px; mask:linear-gradient(transparent, #000 20%, #000 80%, transparent)}

/* About */
.about{padding:30px 0 10px}
.about h2{margin:0 0 10px}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
.feature{background:var(--surface); padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,.06); transition:transform .15s ease, border-color .15s ease}
.feature:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.14)}
.feature h3{margin:10px 0 6px}
.icon{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.icon.success{background:linear-gradient(135deg, var(--ok), #0ea861)}
.icon.spark{background:linear-gradient(135deg, var(--accent), #ffa9cf)}
.icon.chart{background:linear-gradient(135deg, var(--primary), #9fbaff)}

/* Videos */
.videos{padding:40px 0}
.section-head h2{margin:0}
.section-head p{color:var(--muted)}
.video-grid{margin-top:16px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.video-card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; cursor:pointer; transition:.2s transform}
.video-card:hover{transform:translateY(-3px)}
.video-thumb{aspect-ratio:16/9; background:#0f1632; display:block}
.video-info{padding:10px 12px}
.video-title{margin:0; font-size:1rem}
.tag{display:inline-block; margin-top:6px; font-size:.8rem; color:#091227; background:linear-gradient(135deg, var(--warn), #ffd88a); padding:4px 8px; border-radius:999px}

/* Video section */
.video-section{padding:40px 0}
.video-container{position:relative; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); background:#0f1632}
.video-container iframe{width:100%; border:0; display:block; aspect-ratio:16/9; height:auto}
.intro-video{width:min(820px, 100%); margin-inline:auto}

/* Contact */
.contact-hero{padding:40px 0 10px}
.contact-grid .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px}
.contact-list{list-style:none; margin:0; padding:0}
.contact-list li{display:flex; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08)}
.contact-list li:last-child{border-bottom:none}
.contact-form label{display:block; margin-bottom:12px}
.contact-form input,.contact-form textarea{width:100%; background:#0e1530; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:10px 12px; border-radius:10px}
.contact-form button{margin-top:6px}
.copy-btn{margin-inline-start:auto; background:#ffffff10; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:6px 10px; cursor:pointer}
.cta-row{display:flex; gap:10px; margin-top:12px}
.hours{margin-top:10px}
.badge{display:inline-block; background:linear-gradient(135deg, var(--primary), var(--accent)); color:#091227; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.85rem}
.map-placeholder{margin-top:8px; aspect-ratio:16/9; border-radius:12px; border:1px dashed rgba(255,255,255,.2); background:repeating-linear-gradient(45deg, #0f1632, #0f1632 10px, #0b1020 10px, #0b1020 20px); display:grid; place-items:center}
.social{display:flex; gap:12px; align-items:center}
.social a{display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:12px; color:var(--muted); transition:all .3s ease; font-weight:600; font-size:.9rem}
.social a:hover{background:rgba(108,156,255,.15); border-color:rgba(108,156,255,.3); color:var(--text); transform:translateY(-2px); box-shadow:0 4px 12px rgba(108,156,255,.2)}
.social a svg{width:20px; height:20px; transition:transform .2s ease}
.social a:hover svg{transform:scale(1.1)}
.social.big a{padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; display:inline-flex; align-items:center; gap:8px; width:auto; height:auto}
.social.big a svg{width:18px; height:18px}
.social.big a.tt svg{width:20px; height:20px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.social.big a.tt:hover svg{transform:scale(1.1); transition:transform .2s ease}

/* Focus styles for accessibility */
:where(a, button, input, textarea):focus{outline:2px solid color-mix(in oklab, var(--primary) 70%, white); outline-offset:2px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); margin-top:30px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.footer-brand{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.footer-brand img{width:40px; height:40px; object-fit:contain}
.footer-brand strong{font-size:1rem}
.footer-links{display:flex; gap:14px}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center}
.modal[aria-hidden="false"]{display:grid}
.modal-backdrop{position:absolute; inset:0; background:#0009}
.modal-content{position:relative; width:min(900px, 92%); background:#0000;}
.modal-close{position:absolute; top:-40px; inset-inline-start:0; background:#ffffff22; border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}
.video-wrapper{aspect-ratio:16/9; width:100%; background:#0f1632; border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden}
.video-wrapper iframe{width:100%; height:100%; border:0; display:block}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .video-grid{grid-template-columns:1fr 1fr; gap:14px}
  .contact-grid .grid{grid-template-columns:1fr}
  .modal-close{top:10px; inset-inline-end:10px; inset-inline-start:auto}
}
@media (max-width: 520px){
  .nav{flex-direction:column; gap:12px; padding:16px 0}
  .nav-links{display:flex; flex-direction:column; width:100%; overflow:hidden; max-height:0; opacity:.0; transform:translateY(-6px); transition:max-height .35s ease, opacity .25s ease, transform .25s ease}
  .nav-links.open{max-height:400px; opacity:1; transform:translateY(0)}
  .nav-toggle{display:inline-flex}
  .features{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr; gap:12px}
  .logo{justify-content:center}
  .logo img{width:40px; height:40px}
  .logo span{font-size:1.1rem}
  .footer-brand{flex-direction:row; gap:8px; text-align:left}
  .footer-brand img{width:32px; height:32px}
  .hero-actions{flex-direction:column; gap:10px}
  .hero-actions .btn{width:100%; justify-content:center}
}