/*
Theme Name: Seenmarks Smart Home ENTERPRISE PRO R3
Author: Seenmarks + M365 Copilot
Description: أيقونات SVG احترافية (Duotone)، سلايدر 3D، بارالاكس، شعار نيون يومض، مُحسّن استجابة للهاتف/التابلت/الكمبيوتر مع كاشف جهاز وزر تبديل يدوي، نموذج تواصل متعدد الخطوات عبر AJAX مع تحسين تسليم البريد.
Version: 3.3.0
Text Domain: seenmarks
*/
:root{
  --bg:#050a13; --panel:#0b1120; --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.10);
  --border:rgba(130,146,255,.22); --brand:#5cf0ff; --brand2:#8a5fff; --accent:#28ffb3; --warning:#ffcc33; --danger:#ff5870;
  --text:#e8efff; --muted:#b7c7ef; --shadow:0 16px 48px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'IBM Plex Sans Arabic','Sora',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}

/* Responsive type scale */
:root{ --fs-h1: clamp(28px, 4vw, 52px); --fs-h2: clamp(22px, 2.6vw, 36px); --fs-h3: clamp(18px, 2vw, 24px); }

h1{font-size:var(--fs-h1);letter-spacing:.2px;margin:0 0 12px}
h2{font-size:var(--fs-h2);margin:0 0 12px}
h3{font-size:var(--fs-h3);margin:0 0 8px}

p,li{line-height:1.85}

.container{width:min(1340px,92%);margin-inline:auto}
.section{padding:min(8vw,96px) 0}
.glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.card{padding:clamp(18px,2.2vw,30px)}

/* Canvas background */
#bg-wrap{position:fixed;inset:0;z-index:-2}
#bg-canvas{width:100%;height:100%;display:block;background:radial-gradient(60% 60% at 15% 15%, #13203d 0%, transparent 60%),linear-gradient(135deg,#060a13 0%,#0e1a35 100%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);text-decoration:none;font-weight:800;color:#001;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.btn.secondary{background:transparent;color:var(--text)}
.btn.ghost{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn.small{padding:8px 10px;font-weight:700}

/* NAV */
.site-nav{position:sticky;top:0;z-index:999;background:linear-gradient(180deg,rgba(6,10,19,.85),rgba(6,10,19,.55));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-nav .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:10px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;white-space:nowrap}
.brand svg{height:32px;width:32px;flex:0 0 auto}
.neon{font-weight:900;letter-spacing:.5px;position:relative;color:#bfefff}
.neon{ text-shadow: 0 0 4px #64e8ff, 0 0 8px #64e8ff, 0 0 16px #64e8ff, 0 0 24px #8a5fff, 0 0 36px #8a5fff; animation:flicker 3.5s infinite alternate}
@keyframes flicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;filter: drop-shadow(0 0 8px #64e8ff) drop-shadow(0 0 18px #8a5fff);}20%,24%,55%{opacity:.75;}22%{opacity:.6;}}

.menu{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.menu a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.10)}
.menu-toggle{display:none}

/* Device switcher */
.device-switch{display:flex;align-items:center;gap:6px}
.device-switch button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.device-switch button.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(92,240,255,.22) inset}

/* HERO & layers */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(14px,2vw,30px);align-items:center}
.hero .visual{position:relative;min-height:520px;border-radius:22px;overflow:hidden;perspective:1000px}
.layer{position:absolute;inset:0;transform:translateZ(0)}
.layer.beam{background:conic-gradient(from 0deg, transparent 0 10%, rgba(92,240,255,.12) 10% 20%, transparent 20% 30%, rgba(138,95,255,.10) 30% 40%, transparent 40% 100%);animation:spin 18s linear infinite}
.layer.grid{background:linear-gradient(transparent 98%,rgba(140,160,255,.18) 99%), linear-gradient(90deg, transparent 98%, rgba(140,160,255,.18) 99%);background-size: 40px 40px}
.layer.glow{background:radial-gradient(60% 60% at 70% 30%,rgba(40,255,179,.12),transparent 60%)}
@keyframes spin{to{transform:rotate(360deg)}}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{text-align:center}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,20px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px)}

/* Device cards */
.device{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease}
.device:hover{transform:perspective(900px) rotateX(.9deg) rotateY(1.2deg)}
.device svg{width:100%;height:auto;max-height:140px}

/* Slider */
.slider{position:relative;overflow:hidden}
.slides{display:flex;gap:clamp(10px,1.5vw,20px);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:80%;flex:0 0 80%;transform:perspective(1200px) translateZ(0)}
.slide .inner{height:clamp(240px,28vw,320px);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:clamp(14px,1.8vw,20px);background:linear-gradient(135deg, rgba(92,240,255,.12), rgba(138,95,255,.12));border:1px solid rgba(255,255,255,.12)}
.slider .nav{position:absolute;inset-block-end:10px;inset-inline:10px;display:flex;justify-content:space-between}
.slider .dotbar{position:absolute;inset-inline:0;inset-block-end:10px;display:flex;gap:6px;justify-content:center}
.slider .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}
.slider .dot.active{background:var(--brand)}

/* Tabs & Accordion */
.tabs{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);cursor:pointer;background:rgba(255,255,255,.06);color:#fff}
.tab.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(92,240,255,.2) inset}
.tab-panels>.panel{display:none}
.tab-panels>.panel.active{display:block}
.acc{border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.acc details{background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);padding:12px 16px}
.acc details[open]{background:rgba(255,255,255,.08)}

/* Contact wizard */
.form-steps{display:flex;gap:10px;margin-bottom:14px}
.step{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.step.active{background:var(--brand);color:#001;border-color:transparent}
.hidden{display:none}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.help{opacity:.75;font-size:.85rem}

/* Footer */
.footer{padding:52px 0;border-top:1px solid rgba(255,255,255,.10)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}

/* Breakpoints */
@media (max-width: 480px){ /* Phone */
  .hero{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .menu{display:none}
  .menu-toggle{display:block}
  .slide{min-width:100%;flex-basis:100%}
  .slide .inner{grid-template-columns:1fr}
}

@media (min-width:481px) and (max-width:1024px){ /* Tablet */
  .hero{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .slide{min-width:90%;flex-basis:90%}
}

@media (min-width:1025px){ /* Desktop */
  .hero{grid-template-columns:1.1fr .9fr}
  .kpis{grid-template-columns:repeat(4,1fr)}
}

/* Mode overrides (manual device switch) */
body.mode-phone .hero{grid-template-columns:1fr}
body.mode-phone .grid-3{grid-template-columns:1fr}
body.mode-phone .grid-4{grid-template-columns:repeat(2,1fr)}
body.mode-phone .slide{min-width:100%;flex-basis:100%}

body.mode-tablet .hero{grid-template-columns:1fr}
body.mode-tablet .grid-3{grid-template-columns:repeat(2,1fr)}
body.mode-tablet .grid-4{grid-template-columns:repeat(3,1fr)}
body.mode-tablet .slide{min-width:90%;flex-basis:90%}