/* ============================================================
   Smart System Solutions — Design System
   ============================================================ */
:root{
  --bg:        #08071a;
  --bg-2:      #0c0a24;
  --surface:   rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.06);
  --border:    rgba(255,255,255,.09);
  --border-2:  rgba(255,255,255,.14);

  --violet:    #9b51e0;
  --magenta:   #c44fc0;
  --indigo:    #5b3fa8;
  --blue:      #4b6bd6;
  --accent:    #b06ae6;

  --text:      #f3f0ff;
  --muted:     #a59fc7;
  --muted-2:   #807aa0;

  --grad:      linear-gradient(135deg, #c44fc0 0%, #9b51e0 45%, #5b3fa8 100%);
  --grad-soft: linear-gradient(135deg, rgba(196,79,192,.18), rgba(91,63,168,.18));
  --glow:      0 0 40px rgba(155,81,224,.35);

  --radius:    18px;
  --radius-sm: 12px;
  --container:  1200px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --font:      'Tajawal', system-ui, sans-serif;
  --font-en:   'Space Grotesk', monospace;

  /* theme-aware surfaces (dark defaults) */
  --nav-bg:        rgba(8,7,26,.78);
  --surface-solid: rgba(12,10,36,.93);
  --input-bg:      rgba(0,0,0,.25);
  --grid-line:     rgba(255,255,255,.025);
  --option-bg:     #13102e;
  --blob-op:       .5;
}

/* ===================== LIGHT THEME ===================== */
[data-theme="light"]{
  --bg:        #f4f2fb;
  --bg-2:      #ffffff;
  --surface:   rgba(45,30,90,.045);
  --surface-2: rgba(45,30,90,.08);
  --border:    rgba(30,20,60,.11);
  --border-2:  rgba(30,20,60,.18);

  --accent:    #7a2fce;
  --text:      #1b1535;
  --muted:     #574f74;
  --muted-2:   #877fa0;

  --grad-soft: linear-gradient(135deg, rgba(196,79,192,.10), rgba(91,63,168,.12));
  --glow:      0 0 40px rgba(155,81,224,.22);

  --nav-bg:        rgba(255,255,255,.82);
  --surface-solid: rgba(255,255,255,.97);
  --input-bg:      rgba(45,30,90,.05);
  --grid-line:     rgba(45,30,90,.05);
  --option-bg:     #ffffff;
  --blob-op:       .14;
}
[data-theme="light"] body{ background:var(--bg); }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--violet); color:#fff; }

.container{ width:min(var(--container), 92%); margin-inline:auto; }
.section{ padding:clamp(4rem,9vw,7.5rem) 0; position:relative; }
.center{ text-align:center; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.muted{ color:var(--muted-2); }

/* ---------- Background aurora ---------- */
.bg-aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  radial-gradient(1200px 700px at 80% -10%, rgba(91,63,168,.25), transparent 60%),
  radial-gradient(900px 600px at 0% 100%, rgba(196,79,192,.14), transparent 55%),
  var(--bg);
}
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:var(--blob-op); }
.blob-1{ width:480px; height:480px; background:#7a36c9; top:-120px; inset-inline-end:-80px; animation:float1 18s ease-in-out infinite; }
.blob-2{ width:420px; height:420px; background:#c44fc0; bottom:5%; inset-inline-start:-120px; animation:float2 22s ease-in-out infinite; }
.blob-3{ width:360px; height:360px; background:#4b6bd6; top:45%; inset-inline-start:55%; animation:float1 26s ease-in-out infinite; }
.grid-overlay{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
@keyframes float1{ 50%{ transform:translate(-40px,40px) scale(1.1);} }
@keyframes float2{ 50%{ transform:translate(50px,-30px) scale(1.08);} }

/* ---------- Preloader ---------- */
#preloader{ position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background:var(--bg); transition:opacity .6s var(--ease), visibility .6s; }
#preloader.done{ opacity:0; visibility:hidden; }
.preloader-mark{ position:relative; width:90px; height:90px; display:grid; place-items:center; }
.preloader-mark img{ width:46px; animation:pulse 1.4s ease-in-out infinite; }
.preloader-ring{ position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--violet); border-inline-end-color:var(--magenta);
  animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes pulse{ 50%{ transform:scale(.82); opacity:.6;} }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.6rem;
  border-radius:60px; font-weight:700; font-size:1rem; transition:.3s var(--ease);
  position:relative; white-space:nowrap; }
.btn svg{ transition:transform .3s var(--ease); }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 8px 30px rgba(155,81,224,.4); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(155,81,224,.6); }
.btn-primary:hover svg{ transform:translateX(-4px); }
.btn-ghost{ background:var(--surface); border:1px solid var(--border-2); color:var(--text); backdrop-filter:blur(10px); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--violet); transform:translateY(-3px); }
.btn-lg{ padding:1.05rem 2.3rem; font-size:1.08rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Navbar ---------- */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:100; transition:.4s var(--ease); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; }
.nav.scrolled{ background:var(--nav-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.18); }
.nav.scrolled .nav-inner{ padding:.7rem 0; }
.nav-logo img{ height:46px; transition:.4s var(--ease); }
.nav.scrolled .nav-logo img{ height:40px; }
.nav-links{ display:flex; align-items:center; gap:.4rem; }
.nav-links a{ padding:.5rem .95rem; border-radius:30px; font-weight:500; color:var(--muted);
  transition:.25s var(--ease); position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); }
.nav-links a.active:not(.nav-cta)::after{ content:''; position:absolute; inset-block-end:.15rem;
  inset-inline:1rem; height:2px; background:var(--grad); border-radius:2px; }
.nav-cta{ background:var(--grad); color:#fff !important; padding:.6rem 1.4rem !important;
  box-shadow:0 6px 20px rgba(155,81,224,.4); }
.nav-cta:hover{ transform:translateY(-2px); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:26px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-right{ display:flex; align-items:center; gap:.55rem; }
.nav-logo{ display:inline-flex; }
.logo-light{ display:none; }
[data-theme="light"] .logo-dark{ display:none; }
[data-theme="light"] .logo-light{ display:block; }
.theme-toggle{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border-2); background:var(--surface); color:var(--text); transition:.3s var(--ease); }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle:hover{ border-color:var(--violet); color:var(--accent); transform:translateY(-2px) rotate(15deg); }
.ic-moon{ display:none; }
[data-theme="light"] .ic-sun{ display:none; }
[data-theme="light"] .ic-moon{ display:block; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center;
  padding-block:7rem 4rem; overflow:hidden; }
#netCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.65; }
.hero-glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(700px 400px at 50% 18%, rgba(155,81,224,.18), transparent 70%); }
.hero-inner{ position:relative; z-index:1; text-align:center; max-width:920px; }
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem;
  border:1px solid var(--border-2); border-radius:40px; background:var(--surface);
  backdrop-filter:blur(10px); font-size:.9rem; color:var(--muted); margin-bottom:1.8rem; font-weight:500; }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--violet);
  box-shadow:0 0 12px var(--violet); animation:blink 2s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.3;} }
.hero-title{ font-size:clamp(2.3rem, 6vw, 4.4rem); font-weight:900; line-height:1.2;
  letter-spacing:-.5px; margin-bottom:1.5rem; }
.hero-sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--muted); max-width:680px;
  margin:0 auto 2.5rem; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:clamp(1.2rem,4vw,2.6rem); justify-content:center; flex-wrap:wrap;
  margin-top:3.2rem; padding-top:2.4rem; border-top:1px solid var(--border); }
.hstat{ display:flex; align-items:center; gap:.85rem; text-align:start; }
.hstat-ic{ flex-shrink:0; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--border-2); color:var(--accent); }
.hstat-ic svg{ width:24px; height:24px; }
.hstat strong{ display:block; font-size:1.08rem; font-weight:700; color:var(--text); line-height:1.4; }
.hstat span{ font-size:.84rem; color:var(--muted); }
.scroll-down{ position:absolute; inset-block-end:2rem; inset-inline-start:50%; transform:translateX(50%);
  width:26px; height:42px; border:2px solid var(--border-2); border-radius:20px; z-index:1; }
.scroll-down span{ position:absolute; inset-block-start:8px; inset-inline-start:50%; transform:translateX(50%);
  width:4px; height:8px; background:var(--violet); border-radius:4px; animation:scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot{ 50%{ transform:translate(50%,14px); opacity:.3;} }

/* ---------- Section headings ---------- */
.section-head{ max-width:720px; margin:0 auto 3.5rem; }
.section-head.center{ text-align:center; }
.section-eyebrow{ display:inline-block; font-family:var(--font-en); font-size:.82rem; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
  padding:.3rem .9rem; border:1px solid var(--border); border-radius:30px; background:var(--grad-soft); }
.section-title{ font-size:clamp(1.7rem,4vw,2.7rem); font-weight:800; line-height:1.3; letter-spacing:-.3px; }
.section-lead{ color:var(--muted); margin-top:1rem; font-size:1.08rem; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about-media{ position:relative; }
.about-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow:0 30px 70px rgba(0,0,0,.5); position:relative; }
.about-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, transparent 50%, rgba(91,63,168,.4)); }
.about-img img{ width:100%; height:460px; object-fit:cover; transition:transform .8s var(--ease); }
.about-media:hover .about-img img{ transform:scale(1.06); }
.about-text .section-title{ margin:.4rem 0 1.3rem; }
.about-text p{ color:var(--muted); margin-bottom:1.1rem; }
.about-text b{ color:var(--text); }
.vmv{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.vmv-card{ padding:1.3rem 1.1rem; border-radius:var(--radius-sm); background:var(--surface);
  border:1px solid var(--border); transition:.3s var(--ease); }
.vmv-card:hover{ border-color:var(--violet); transform:translateY(-4px); background:var(--surface-2); }
.vmv-ic{ font-size:1.5rem; color:var(--accent); }
.vmv-card h4{ margin:.4rem 0 .35rem; font-size:1.05rem; }
.vmv-card p{ font-size:.88rem; margin:0; }

/* ---------- Services ---------- */
.filters{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.filter{ padding:.6rem 1.4rem; border-radius:40px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--muted); font-weight:600; font-size:.95rem; transition:.3s var(--ease); }
.filter:hover{ color:var(--text); border-color:var(--violet); }
.filter.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 20px rgba(155,81,224,.35); }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; }
.svc-card{ position:relative; padding:2rem 1.7rem; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); overflow:hidden;
  transition:.4s var(--ease); }
.svc-card::before{ content:''; position:absolute; inset:0; opacity:0; transition:.4s var(--ease);
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(155,81,224,.16), transparent 70%); }
.svc-card:hover{ transform:translateY(-8px); border-color:var(--border-2); box-shadow:0 24px 50px rgba(0,0,0,.45); }
.svc-card:hover::before{ opacity:1; }
.svc-ic{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.3rem;
  background:var(--grad-soft); border:1px solid var(--border-2); color:var(--accent); position:relative; }
.svc-ic svg{ width:28px; height:28px; }
.svc-card h3{ font-size:1.22rem; margin-bottom:.6rem; position:relative; }
.svc-card p{ color:var(--muted); font-size:.95rem; position:relative; }
.svc-badge{ position:absolute; inset-block-start:1.3rem; inset-inline-end:1.3rem; font-size:.72rem; font-weight:700;
  padding:.25rem .7rem; border-radius:30px; background:var(--grad); color:#fff; letter-spacing:.5px; }
.svc-card.is-hidden{ display:none; }

/* ---------- Why ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.why-card{ padding:2rem 1.7rem; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--border); transition:.4s var(--ease); position:relative; overflow:hidden; }
.why-card:hover{ transform:translateY(-6px); border-color:var(--border-2); background:var(--surface-2); }
.why-num{ font-family:var(--font-en); font-size:2.6rem; font-weight:700; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.55; margin-bottom:.8rem; }
.why-card h3{ font-size:1.2rem; margin-bottom:.5rem; }
.why-card p{ color:var(--muted); font-size:.95rem; }

/* ---------- Process ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; position:relative; }
.proc-card{ text-align:center; padding:2rem 1.3rem; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); transition:.4s var(--ease); }
.proc-card:hover{ transform:translateY(-6px); border-color:var(--violet); }
.proc-step{ width:62px; height:62px; margin:0 auto 1.2rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-en); font-weight:700; font-size:1.3rem; color:#fff; background:var(--grad);
  box-shadow:var(--glow); }
.proc-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.proc-card p{ color:var(--muted); font-size:.9rem; }

/* ---------- Gallery ---------- */
.gallery{ columns:4; column-gap:1.1rem; }
.gallery-item{ break-inside:avoid; margin-bottom:1.1rem; border-radius:var(--radius-sm); overflow:hidden;
  position:relative; cursor:pointer; border:1px solid var(--border); }
.gallery-item img{ width:100%; transition:transform .6s var(--ease); }
.gallery-item::after{ content:'⤢'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.6rem; color:#fff; background:linear-gradient(0deg, rgba(91,63,168,.55), rgba(8,7,26,.2));
  opacity:0; transition:.4s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item:hover::after{ opacity:1; }
.gallery-item.is-hidden{ display:none; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; padding:clamp(3rem,7vw,5rem) 0; overflow:hidden; }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:clamp(2.2rem,5vw,3.5rem); border-radius:28px; background:var(--grad-soft);
  border:1px solid var(--border-2); position:relative; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.4); }
.cta-inner::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(500px 250px at 85% 0%, rgba(196,79,192,.25), transparent 70%); }
.cta-inner h2{ font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:800; }
.cta-inner p{ color:var(--muted); margin-top:.5rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-info > p{ color:var(--muted); margin:1rem 0 2rem; }
.contact-info .section-title{ margin:.4rem 0 0; }
.contact-list{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-list li{ display:flex; align-items:center; gap:1rem; }
.ci-ic{ flex-shrink:0; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--border-2); color:var(--accent); }
.ci-ic svg{ width:23px; height:23px; }
.contact-list div span{ display:block; font-size:.82rem; color:var(--muted-2); }
.contact-list a{ font-weight:600; transition:.25s; }
.contact-list a:hover{ color:var(--accent); }
.socials{ display:flex; gap:.7rem; margin-top:2rem; flex-wrap:wrap; }
.socials a{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:.3s var(--ease); }
.socials a svg{ width:20px; height:20px; }
.socials a:hover{ color:#fff; background:var(--grad); border-color:transparent; transform:translateY(-4px); box-shadow:0 8px 20px rgba(155,81,224,.4); }

.contact-form{ padding:clamp(1.8rem,4vw,2.6rem); border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(10px); }
.contact-form h3{ font-size:1.4rem; margin-bottom:1.5rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.88rem; color:var(--muted); margin-bottom:.45rem; font-weight:500; }
.field input, .field select, .field textarea{ width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:var(--input-bg); border:1px solid var(--border-2); color:var(--text); font-family:inherit;
  font-size:.98rem; transition:.25s var(--ease); resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(155,81,224,.18); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a59fc7' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 1rem center; }
.field select option{ background:var(--option-bg); color:var(--text); }
.form-note{ font-size:.82rem; color:var(--muted-2); text-align:center; margin-top:.75rem; }
.form-status{ font-size:.92rem; font-weight:600; text-align:center; margin-top:1rem; min-height:1.2em; transition:.3s var(--ease); }
.form-status.ok{ color:#2ecc71; }
.form-status.err{ color:#ff5e7a; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border); padding-top:4rem; margin-top:2rem;
  background:linear-gradient(180deg, transparent, rgba(91,63,168,.06)); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.footer-logo{ height:50px; margin-bottom:1.2rem; }
.footer-brand p{ color:var(--muted); font-size:.95rem; max-width:320px; }
.footer-col h4{ font-size:1.05rem; margin-bottom:1.2rem; }
.footer-col a, .footer-col span{ display:block; color:var(--muted); font-size:.93rem; margin-bottom:.7rem; transition:.25s; }
.footer-col a:hover{ color:var(--accent); }
.footer-col a[dir="ltr"]{ text-align:right; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding:1.6rem 0; border-top:1px solid var(--border); font-size:.88rem; color:var(--muted); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(5,4,15,.94); backdrop-filter:blur(8px);
  display:none; place-items:center; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:var(--radius-sm); box-shadow:0 30px 80px rgba(0,0,0,.7); }
.lb-close{ position:absolute; inset-block-start:1.5rem; inset-inline-end:2rem; font-size:2.5rem; color:#fff; line-height:1; }
.lb-nav{ position:absolute; inset-block-start:50%; transform:translateY(-50%); font-size:3rem; color:#fff;
  width:60px; height:60px; border-radius:50%; background:var(--surface); border:1px solid var(--border-2);
  transition:.3s var(--ease); }
.lb-nav:hover{ background:var(--grad); }
.lb-prev{ inset-inline-end:1.5rem; }
.lb-next{ inset-inline-start:1.5rem; }

/* ---------- Floating WhatsApp ---------- */
.wa-float{ position:fixed; inset-block-end:2rem; inset-inline-end:2rem; z-index:91;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 10px 30px rgba(37,211,102,.5);
  transition:.35s var(--ease); animation:waPulse 2.6s ease-in-out infinite; }
.wa-float svg{ width:32px; height:32px; }
.wa-float:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 16px 42px rgba(37,211,102,.7); }
@keyframes waPulse{ 0%,100%{ box-shadow:0 10px 30px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 10px 30px rgba(37,211,102,.5),0 0 0 14px rgba(37,211,102,0);} }

/* ---------- Back to top ---------- */
.to-top{ position:fixed; inset-block-end:2rem; inset-inline-start:2rem; z-index:90;
  width:50px; height:50px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(155,81,224,.5); opacity:0; visibility:hidden; transform:translateY(20px);
  transition:.4s var(--ease); }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ transform:translateY(-4px); }

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:.8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .vmv{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ columns:3; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:820px){
  .nav-links{ position:fixed; top:0; right:0; height:100dvh; width:min(82%,320px);
    flex-direction:column; justify-content:center; gap:1.2rem; background:var(--surface-solid);
    backdrop-filter:blur(20px); border-inline-start:1px solid var(--border);
    transform:translateX(100%); transition:transform .4s var(--ease); padding:2rem; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.15rem; }
  .nav-toggle{ display:flex; z-index:101; }
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:520px; margin-inline:auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .about-img img{ height:380px; }
}
@media (max-width:640px){
  .why-grid, .process-grid{ grid-template-columns:1fr; }
  .gallery{ columns:2; column-gap:.8rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.5rem 2.5rem; }
  .cta-inner{ flex-direction:column; text-align:center; }
  .to-top{ inset-block-end:1.2rem; inset-inline-start:1.2rem; }
  .wa-float{ inset-block-end:1.2rem; inset-inline-end:1.2rem; width:52px; height:52px; }
  .wa-float svg{ width:28px; height:28px; }
  .lb-nav{ width:46px; height:46px; font-size:2rem; }
}