/* ===================================================================
   EFORMICS SYSTEMS — Design System
   Palette kept from existing brand (deep violet), extended with a
   warm coral action color and a soft lavender-tint surface so the
   purple has somewhere quiet to sit. Headlines set in Space Grotesk
   (a technical, geometric voice for a software company); body in
   Inter. Flat hairline-bordered surfaces, no drop-shadow card kit.
=================================================================== */

:root{
  --ink:        #16131f;
  --ink-soft:   #47435a;
  --ink-fixed:  #16131f;   /* stays dark in both themes — dark bands (footer, CTA) */
  --violet:     #393193;
  --violet-2:   #574ecf;
  --violet-deep:#241f5e;
  --lavender:   #f4f3fb;
  --lavender-2: #e9e6fb;
  --coral:      #ff6a45;
  --coral-dark: #e6531f;
  --white:      #ffffff;
  --line:       #e2e0ee;
  --line-dark:  rgba(255,255,255,.14);

  /* theme surfaces — flipped under [data-theme="dark"] */
  --bg:         #ffffff;
  --surface:    #ffffff;
  --header-bg:  rgba(255,255,255,.88);
  --shadow-dropdown: 0 18px 40px rgba(20,15,50,.1);

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --maxw: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.22,.68,.36,1);

  color-scheme: light;
}

/* ---------- DARK THEME ---------- */
:root[data-theme="dark"]{
  --ink:        #ece9f6;
  --ink-soft:   #a7a1bd;
  --violet:     #8a7ff0;
  --violet-2:   #a89ff5;
  --violet-deep:#6d61df;
  --lavender:   #1d1a29;
  --lavender-2: #272138;
  --line:       #322c46;
  --line-dark:  rgba(255,255,255,.14);
  --bg:         #100e17;
  --surface:    #17141f;
  --header-bg:  rgba(16,14,23,.85);
  --shadow-dropdown: 0 18px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}
/* no-JS / first-paint fallback for OS dark preference */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #ece9f6;
    --ink-soft:   #a7a1bd;
    --violet:     #8a7ff0;
    --violet-2:   #a89ff5;
    --violet-deep:#6d61df;
    --lavender:   #1d1a29;
    --lavender-2: #272138;
    --line:       #322c46;
    --line-dark:  rgba(255,255,255,.14);
    --bg:         #100e17;
    --surface:    #17141f;
    --header-bg:  rgba(16,14,23,.85);
    --shadow-dropdown: 0 18px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
img{ max-width:100%; display:block; border-radius:12px; }
/* logos read better with square corners */
.brand-logo img, .logo-red, .logo-white{ border-radius:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.12; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
@media (max-width:768px){ section{ padding:64px 0; } }

/* type scale */
.eyebrow{ font-size:.8rem; font-weight:600; color:var(--violet); }
h1{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); }
h2{ font-size:clamp(1.9rem, 3.2vw, 2.5rem); }
h3{ font-size:1.28rem; }
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:56ch; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.96rem;
  border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--coral); color:var(--white); }
.btn-primary:hover{ background:var(--coral-dark); }
.btn-ghost{ background:transparent; color:var(--white); border-color:var(--line-dark); }
.btn-ghost:hover{ border-color:var(--white); }
.btn-outline{ background:transparent; color:var(--violet); border-color:var(--violet); }
.btn-outline:hover{ background:var(--violet); color:var(--white); }
.btn-dark{ background:var(--ink-fixed); color:var(--white); }
.btn-dark:hover{ background:var(--violet-deep); }
.btn-sm{ padding:9px 18px; font-size:.86rem; }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink); }
.brand .dot{ width:10px; height:10px; border-radius:3px; background:var(--coral); display:inline-block; }
.brand-logo img{ display:block; }
.logo-red{ height:34px; width:auto; }
.logo-white{ height:26px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links > li > a, .nav-links > li > button{
  background:none; border:none; font:inherit; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  padding:10px 14px; border-radius:8px; font-weight:500; font-size:.95rem; color:var(--ink);
  transition:background .2s, color .2s;
}
.nav-links > li > a:hover, .nav-links > li > button:hover{ background:var(--lavender); color:var(--violet); }
.nav-links > li > a[aria-current="page"], .nav-links > li.active > button{ color:var(--violet); }
.nav-links li{ position:relative; }
.caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .2s; }
.has-dropdown:hover .caret, .has-dropdown.open .caret{ transform:rotate(225deg); margin-top:3px; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:270px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px; box-shadow:var(--shadow-dropdown);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; }
.dropdown a:hover{ background:var(--lavender); }
.dropdown a strong{ font-size:.94rem; color:var(--ink); }
.dropdown a span{ font-size:.82rem; color:var(--ink-soft); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-phone{ font-size:.88rem; font-weight:600; color:var(--ink-soft); display:none; }
@media (min-width:1040px){ .nav-phone{ display:inline; } }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.25s; }

/* theme toggle */
.theme-toggle{
  width:38px; height:38px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.theme-toggle:hover{ color:var(--violet); border-color:var(--violet-2); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
}

@media (max-width:940px){
  /* the off-canvas menu below must be positioned against the viewport, so the
     header cannot own a backdrop-filter (it would trap position:fixed children) */
  body{ overflow-x:hidden; overflow-x:clip; }
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
  .nav-links{ position:fixed; inset:78px 0 0 0; background:var(--bg); flex-direction:column; align-items:stretch; padding:18px; gap:2px; transform:translateX(100%); transition:transform .3s var(--ease); overflow:auto; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links > li{ border-bottom:1px solid var(--line); }
  .nav-links > li:last-child{ border-bottom:none; }
  .nav-links > li > a, .nav-links > li > button{ width:100%; justify-content:space-between; padding:15px 8px; font-size:1rem; }
  .dropdown{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; margin-left:10px; border:none; padding:0 0 8px; }
  .has-dropdown.open .dropdown{ display:flex; flex-direction:column; }
  .caret{ width:8px; height:8px; margin-top:-4px; margin-right:4px; }
  .menu-toggle{ display:block; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn-sm-desktop{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; color:var(--ink);
  padding:110px 0 100px;
  background:linear-gradient(120deg, #eee9fb, #e3d9f7, #fbe4f0, #dde6fb, #eee9fb);
  background-size:400% 400%;
  animation:heroShift 12s ease-in-out infinite;
}
@keyframes heroShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@media (prefers-reduced-motion:reduce){ .hero{ animation:none; background-position:0% 50%; } }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto auto; width:640px; height:640px;
  background:radial-gradient(circle at 30% 30%, var(--lavender-2), transparent 65%);
  opacity:.9; filter:blur(10px);
}
.hero::after{
  content:""; position:absolute; inset:auto auto -30% -10%; width:520px; height:520px;
  background:radial-gradient(circle at 70% 70%, #ddd6f9, transparent 65%);
  opacity:.8; filter:blur(10px);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; } }
.hero p.lede{ color:var(--ink-soft); }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 0; }
.hero-badges span{ font-size:.82rem; color:var(--violet); background:var(--surface); border:1px solid var(--lavender-2); padding:7px 13px; border-radius:999px; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero .btn-ghost{ color:var(--violet); border-color:var(--violet); background:rgba(255,255,255,.5); }
.hero .btn-ghost:hover{ background:var(--violet); color:var(--white); border-color:var(--violet); }

/* centered hero variant */
.hero-center{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-center .lede{ margin-left:auto; margin-right:auto; max-width:60ch; }
.hero-center .hero-badges{ justify-content:center; }
.hero-center .hero-cta{ justify-content:center; }

.hero-video{
  position:relative; width:100%; max-width:960px; margin:56px auto 0;
  aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(155deg, #ffffff, var(--lavender-2));
  box-shadow:0 30px 60px rgba(57,49,147,.12);
  display:flex; align-items:center; justify-content:center; gap:16px; flex-direction:column;
}
.hero-video .play-btn{
  width:72px; height:72px; border-radius:50%; border:none; cursor:pointer;
  background:var(--violet); color:var(--white); display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), background .25s;
  box-shadow:0 12px 26px rgba(57,49,147,.35);
}
.hero-video .play-btn:hover{ transform:scale(1.08); background:var(--violet-deep); }
.hero-video .play-btn svg{ margin-left:3px; }
.hero-video-label{ font-size:.9rem; color:var(--ink-soft); font-weight:500; }
.hero-video.has-media{ background:#000; }
.hero-video > video,
.hero-video > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.hero-video > video{ object-fit:cover; }
@media (max-width:640px){ .hero-video{ margin-top:40px; } .hero-video .play-btn{ width:60px; height:60px; } }

/* stacked product mockup visual */
.stack{ position:relative; height:420px; }
.stack-card{
  position:absolute; width:78%; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  padding:20px; backdrop-filter:blur(4px);
  animation:float 7s ease-in-out infinite;
}
.stack-card .tag{ font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:10px; }
.stack-card .bars span{ display:block; height:8px; border-radius:5px; background:rgba(255,255,255,.14); margin-bottom:8px; }
.stack-1{ top:0; left:0; z-index:3; animation-delay:0s; }
.stack-2{ top:90px; left:14%; z-index:2; opacity:.9; animation-delay:.6s; }
.stack-3{ top:180px; left:26%; z-index:1; opacity:.75; animation-delay:1.2s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:940px){ .stack{ height:300px; } }

/* ---------- SECTION HEADERS ---------- */
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- PRODUCT / SERVICE CARDS ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

/* Homepage products — column count follows how many products are published,
   and the grid always spans the full container width.
   1 -> one full-width card | 2 -> 2-up | 3 (and 5+) -> 3-up | 4 -> 2 + 2 */
.products-grid{ display:grid; gap:26px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.products-grid[data-count="1"]{ grid-template-columns:1fr; }
.products-grid[data-count="2"],
.products-grid[data-count="4"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .products-grid[data-count]{ grid-template-columns:1fr; } }

/* ---------- VISUAL ENHANCEMENT galleries ---------- */
.va-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:34px; }
@media (max-width:820px){ .va-grid{ grid-template-columns:1fr; } }

.va-card{ margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--surface); position:relative; }
.va-card .va-title{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px; font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:#fff; background:linear-gradient(to top, rgba(10,8,20,.78), rgba(10,8,20,0));
  pointer-events:none;
}

.va-baslider{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0e0b1f;
  touch-action:none; cursor:ew-resize; user-select:none; -webkit-user-select:none; }
.va-baslider .va-ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.va-ba-before{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 50% 0 0); }
.va-ba-tag{
  position:absolute; top:10px; z-index:3;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; background:rgba(10,8,20,.72); color:#fff; pointer-events:none;
}
.va-ba-tag--before{ left:10px; }
.va-ba-tag--after{ right:10px; background:var(--violet); }
.va-ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:44px; transform:translateX(-50%);
  z-index:4; border:0; padding:0; margin:0; background:transparent; cursor:ew-resize;
  display:flex; align-items:center; justify-content:center;
}
.va-ba-handle::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:3px;
  transform:translateX(-50%); background:#fff; opacity:.9;
}
.va-ba-grip{
  position:relative; width:34px; height:34px; border-radius:50%; background:var(--violet);
  box-shadow:0 2px 10px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center;
}
.va-ba-grip::before,.va-ba-grip::after{ content:""; position:absolute; width:0; height:0; border:5px solid transparent; }
.va-ba-grip::before{ border-right-color:#fff; margin-right:14px; }
.va-ba-grip::after{ border-left-color:#fff; margin-left:14px; }
.va-ba-handle:focus-visible{ outline:none; }
.va-ba-handle:focus-visible .va-ba-grip{ box-shadow:0 0 0 3px rgba(127,119,221,.55); }

.va-video{ position:relative; aspect-ratio:4/5; background:#0e0b1f; overflow:hidden; }
.va-video > video,
.va-video > iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; }
.va-sound{
  position:absolute; top:12px; right:12px; z-index:3;
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(10,8,20,.6); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.va-sound:hover{ background:rgba(10,8,20,.85); }

.va-pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:30px; }
.va-pager button{
  min-width:40px; padding:9px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; font-weight:600; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.va-pager button:hover:not(:disabled){ border-color:var(--violet); color:var(--violet); }
.va-pager button[aria-current="page"]{ background:var(--violet); border-color:var(--violet); color:#fff; }
.va-pager button:disabled{ opacity:.4; cursor:default; }

.va-faq{ margin-top:26px; }
.va-faq details{ border:1px solid var(--line); border-radius:14px; padding:2px 20px; margin-bottom:12px; background:var(--surface); }
.va-faq summary{ list-style:none; cursor:pointer; padding:16px 0; font-weight:600; display:flex; justify-content:space-between; gap:16px; }
.va-faq summary::-webkit-details-marker{ display:none; }
.va-faq summary::after{ content:"+"; font-weight:700; color:var(--violet); }
.va-faq details[open] summary::after{ content:"–"; }
.va-faq p{ margin:0 0 16px; color:var(--ink-soft); }

.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  background:var(--surface); transition:border-color .25s, transform .25s var(--ease);
}
.card:hover{ border-color:var(--violet-2); transform:translateY(-4px); }
.card .icon{ width:44px; height:44px; border-radius:10px; background:var(--lavender); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--violet); }

.product-card{
  border:1px solid var(--line); border-radius:20px; padding:34px; position:relative; overflow:hidden;
  background:var(--lavender); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(57,49,147,.14); }
.product-card .plabel{ font-size:.78rem; font-weight:700; color:var(--violet); text-transform:uppercase; letter-spacing:.04em; }
.product-card h3{ margin-top:6px; }
.product-card .plink{ display:inline-flex; gap:6px; align-items:center; font-weight:600; color:var(--violet); margin-top:14px; }
.product-card .plink svg{ transition:transform .2s; }
.product-card:hover .plink svg{ transform:translateX(4px); }
.product-card .pstats{ display:flex; gap:18px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.product-card .pstats div{ font-size:.82rem; color:var(--ink-soft); }
.product-card .pstats strong{ display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }

/* ---------- STEPS ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ border-left:2px solid var(--line); padding-left:20px; position:relative; }
.step .num{ font-family:var(--font-display); font-size:2rem; color:var(--lavender-2); font-weight:700; -webkit-text-stroke:1.4px var(--violet-2); color:transparent; }

/* ---------- STATS BAND ---------- */
.stats-band{ background:var(--violet); color:var(--white); border-radius:24px; padding:52px 40px; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
.stats-grid strong{ display:block; font-family:var(--font-display); font-size:2.2rem; }
.stats-grid span{ font-size:.86rem; color:#d8d5f0; }

/* ---------- CTA BAND ---------- */
.cta-band{ background:var(--ink-fixed); color:var(--white); border-radius:28px; padding:64px 48px; text-align:center; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; width:420px; height:420px; background:radial-gradient(circle, var(--violet-2), transparent 68%); opacity:.5; right:-120px; top:-140px; }
.cta-band h2{ position:relative; }
.cta-band .lede{ color:#c9c6de; margin:0 auto 30px; }
.cta-band .hero-cta{ justify-content:center; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:1.05rem; color:var(--ink); gap:20px;
}
.faq-item .plus{ width:20px; height:20px; position:relative; flex:none; }
.faq-item .plus::before, .faq-item .plus::after{ content:""; position:absolute; background:var(--violet); border-radius:2px; }
.faq-item .plus::before{ width:20px; height:2px; top:9px; }
.faq-item .plus::after{ width:2px; height:20px; left:9px; transition:transform .25s var(--ease); }
.faq-item.open .plus::after{ transform:rotate(90deg); }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-panel{ max-height:400px; }
.faq-panel p{ padding-bottom:22px; margin:0; }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink-fixed); color:#bdb9d6; padding:72px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-dark); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:var(--white); font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px; }
.footer-grid li{ margin-bottom:10px; font-size:.92rem; }
.footer-grid a:hover{ color:var(--white); }
.footer-brand p{ color:#9d99bd; max-width:34ch; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a:hover{ color:var(--white); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-dark); color:#bdb9d6;
  transition:color .2s, border-color .2s, transform .2s var(--ease);
}
.footer-social a:hover{ color:var(--white); border-color:var(--white); transform:translateY(-2px); }
.footer-social svg{ width:17px; height:17px; fill:currentColor; }

/* ---------- misc page bits ---------- */
.page-hero{ background:var(--lavender); padding:76px 0 60px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:10px; display:block; }
.page-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
@media (max-width:900px){ .page-hero-grid{ grid-template-columns:1fr; } }
/* page hero right-hand media — managed per page in /admin */
.page-hero-media{ display:flex; align-items:center; justify-content:center; }
.page-hero-media img,
.page-hero-media video{ width:100%; max-width:100%; height:auto; display:block; border-radius:16px; }
.page-hero-media video{ border:1px solid var(--line); background:#000; }
.page-hero-media .hero-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000;
}
.page-hero-media .hero-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:900px){ .page-hero-media{ order:-1; max-width:420px; margin:0 auto; } }
.breadcrumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--violet); }
.pill{ display:inline-block; font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:999px; background:var(--lavender-2); color:var(--violet); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.check-list li{ display:flex; gap:10px; margin-bottom:12px; color:var(--ink-soft); }
.check-list svg{ flex:none; margin-top:3px; color:var(--violet); }
.mock-panel{ border:1px solid var(--line); border-radius:18px; background:var(--lavender); padding:26px; }
.mock-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.mock-row:last-child{ border-bottom:none; }
.mock-row strong{ color:var(--ink); }
.table-compare{ width:100%; border-collapse:collapse; font-size:.92rem; }
.table-compare th, .table-compare td{ border:1px solid var(--line); padding:14px 16px; text-align:left; }
.table-compare th{ background:var(--lavender); font-family:var(--font-display); }
.table-wrap{ overflow-x:auto; }

/* ---------- LEGAL / LONG-FORM PAGES ---------- */
.legal{ max-width:820px; }
.legal .legal-meta{ font-size:.85rem; color:var(--ink-soft); margin:0 0 10px; }
.legal > .lede{ margin-bottom:28px; }
.legal .legal-note{
  border-left:3px solid var(--violet-2); background:var(--lavender);
  padding:16px 20px; border-radius:0 10px 10px 0; margin:0 0 36px; font-size:.94rem; color:var(--ink-soft);
}
.legal .legal-note strong{ color:var(--ink); }
.legal .toc{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--lavender); padding:22px 26px; margin:0 0 48px;
}
.legal .toc h2{ font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 12px; }
.legal .toc ol{ margin:0; padding-left:20px; columns:2; column-gap:36px; font-size:.9rem; }
.legal .toc li{ margin-bottom:7px; color:var(--ink-soft); break-inside:avoid; }
.legal .toc a{ color:var(--violet); }
.legal .toc a:hover{ text-decoration:underline; }
@media (max-width:640px){ .legal .toc ol{ columns:1; } }
.legal h2.legal-h{
  font-size:1.3rem; margin:44px 0 14px; padding-top:30px;
  border-top:1px solid var(--line); scroll-margin-top:100px;
}
.legal h2.legal-h:first-of-type{ border-top:none; padding-top:0; margin-top:8px; }
.legal h3{ font-size:1.03rem; margin:24px 0 10px; }
.legal p{ margin:0 0 16px; }
.legal ul, .legal ol.list{ margin:0 0 16px; padding-left:24px; }
.legal ul{ list-style:disc; }
.legal ol.list{ list-style:decimal; }
.legal li{ margin-bottom:8px; color:var(--ink-soft); }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--violet); text-decoration:underline; }
.legal .legal-contact{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; margin-top:8px; font-size:.95rem;
}
.legal .legal-contact p{ margin:0 0 4px; }

/* ---------- PORTFOLIO ---------- */
.folio-grid{ display:grid; grid-template-columns:repeat(var(--folio-cols,3), 1fr); gap:26px; }
@media (max-width:1000px){ .folio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .folio-grid{ grid-template-columns:1fr; } }
.folio-card{
  display:block; color:inherit; text-decoration:none;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.folio-card:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(57,49,147,.14); border-color:var(--violet-2); }
.folio-card.is-featured{ border-color:var(--violet); }
.folio-shot{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--lavender-2); }
.folio-shot img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .4s var(--ease); }
.folio-card:hover .folio-shot img{ transform:scale(1.04); }
.folio-visit{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:#fff;
  background:rgba(22,19,31,.72); padding:6px 12px; border-radius:999px;
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.folio-card:hover .folio-visit{ opacity:1; transform:none; }
.folio-meta{ padding:18px 20px 20px; }
.folio-badge{
  display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--violet); background:var(--lavender-2); padding:3px 9px; border-radius:999px; margin-bottom:8px;
}
.folio-meta h3{ font-size:1.05rem; margin:0 0 2px; }
.folio-client{ font-size:.84rem; color:var(--ink-soft); margin:0 0 8px; }
.folio-info{
  font-size:.88rem; color:var(--ink-soft); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- WEBSITE DESIGNING — FEATURED SLIDER ---------- */
.wd-slider-section{ padding-bottom:40px; }
.wd-slider{ position:relative; }
.wd-viewport{ overflow:hidden; border-radius:16px; }
.wd-track{ display:flex; gap:22px; will-change:transform; }
.wd-slide{
  flex:0 0 calc((100% - (22px * (var(--wd-spv, 3) - 1))) / var(--wd-spv, 3));
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--lavender-2);
  text-decoration:none; color:inherit; display:block;
}
.wd-shot{ aspect-ratio:16/10; }
.wd-shot img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .5s var(--ease); }
.wd-slide:hover .wd-shot img{ transform:scale(1.05); }
.wd-cap{
  position:absolute; inset:auto 0 0 0; padding:16px 18px;
  display:flex; flex-direction:column; gap:2px; color:#fff;
  background:linear-gradient(transparent, rgba(22,19,31,.9));
  opacity:0; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wd-slide:hover .wd-cap, .wd-slide:focus-visible .wd-cap{ opacity:1; transform:none; }
.wd-cap strong{ font-family:var(--font-display); font-size:1rem; }
.wd-cap span{ font-size:.82rem; color:#d8d5f0; }
.wd-visit{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:.82rem; font-weight:700; color:#fff !important; }
.wd-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.94); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(57,49,147,.18);
  transition:background .2s, color .2s, transform .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.wd-arrow:hover{ background:var(--violet); color:#fff; }
.wd-arrow svg{ width:20px; height:20px; }
.wd-prev{ left:12px; }
.wd-next{ right:12px; }
@media (max-width:900px){ .wd-slide{ flex-basis:calc((100% - 22px) / 2); } }
@media (max-width:600px){ .wd-slide{ flex-basis:100%; } }

/* ---------- CONTACT FORM ---------- */
.cf-row{ grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .cf-row{ grid-template-columns:1fr; } }
#contactForm input,
#contactForm select,
#contactForm textarea{
  background:var(--surface); color:var(--ink);
}
#contactForm input::placeholder,
#contactForm textarea::placeholder{ color:var(--ink-soft); opacity:.75; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-status{ padding:13px 16px; border-radius:10px; font-size:.9rem; margin:0; }
.form-status.is-ok{ background:#e7f6ec; color:#15653a; border:1px solid #b8e2c8; }
.form-status.is-err{ background:#fdecea; color:#a3271a; border:1px solid #f4c6bf; }

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--violet); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(57,49,147,.32);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .25s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--violet-deep); transform:translateY(-2px); }
.to-top svg{ width:20px; height:20px; }
@media (max-width:640px){ .to-top{ right:16px; bottom:16px; width:42px; height:42px; } }

/* reveal-on-scroll (single quiet effect, not per-card) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .stack-card{ animation:none; }
  .to-top{ transition:opacity .2s; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   DARK THEME — component overrides for spots with hardcoded colours.
   The palette tokens above already re-theme everything token-driven;
   these handle the few rules that bake in light values.
   Rules are duplicated for the JS-set attribute and the no-JS
   OS-preference fallback.
=================================================================== */
:root[data-theme="dark"] .hero{
  background:linear-gradient(120deg, #171326, #1d1733, #241a30, #17182e, #171326);
  background-size:400% 400%;
}
:root[data-theme="dark"] .hero::before{ background:radial-gradient(circle at 30% 30%, rgba(87,78,207,.20), transparent 65%); }
:root[data-theme="dark"] .hero::after{ background:radial-gradient(circle at 70% 70%, rgba(87,78,207,.16), transparent 65%); }
:root[data-theme="dark"] .hero .btn-ghost{ background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .hero-video{ background:linear-gradient(155deg, var(--surface), var(--lavender-2)); }
:root[data-theme="dark"] .stats-band{ background:#2c2597; }
:root[data-theme="dark"] .btn-outline:hover{ background:var(--violet); color:#0f0d16; }
:root[data-theme="dark"] .wd-arrow{ background:rgba(23,20,31,.9); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .form-status.is-ok{ background:rgba(33,102,64,.22); color:#84dcab; border-color:rgba(132,220,171,.28); }
:root[data-theme="dark"] .form-status.is-err{ background:rgba(150,45,32,.22); color:#f2a99c; border-color:rgba(242,169,156,.28); }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero{
    background:linear-gradient(120deg, #171326, #1d1733, #241a30, #17182e, #171326);
    background-size:400% 400%;
  }
  :root:not([data-theme="light"]) .hero::before{ background:radial-gradient(circle at 30% 30%, rgba(87,78,207,.20), transparent 65%); }
  :root:not([data-theme="light"]) .hero::after{ background:radial-gradient(circle at 70% 70%, rgba(87,78,207,.16), transparent 65%); }
  :root:not([data-theme="light"]) .hero .btn-ghost{ background:rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .hero-video{ background:linear-gradient(155deg, var(--surface), var(--lavender-2)); }
  :root:not([data-theme="light"]) .stats-band{ background:#2c2597; }
  :root:not([data-theme="light"]) .btn-outline:hover{ background:var(--violet); color:#0f0d16; }
  :root:not([data-theme="light"]) .wd-arrow{ background:rgba(23,20,31,.9); color:var(--ink); border-color:var(--line); }
  :root:not([data-theme="light"]) .form-status.is-ok{ background:rgba(33,102,64,.22); color:#84dcab; border-color:rgba(132,220,171,.28); }
  :root:not([data-theme="light"]) .form-status.is-err{ background:rgba(150,45,32,.22); color:#f2a99c; border-color:rgba(242,169,156,.28); }
}

/* ===================================================================
   PHONE-SIZE TUNING — kept at end so it overrides component defaults
=================================================================== */
@media (max-width:600px){
  h1{ font-size:2rem; line-height:1.15; }
  h2{ font-size:1.5rem; }
  h3{ font-size:1.18rem; }
  .lede{ font-size:1.04rem; }
  .container{ padding:0 20px; }
  section{ padding:52px 0; }
  .hero{ padding:56px 0 52px; }
  .page-hero{ padding:28px 0 40px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; width:100%; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .cta-band{ padding:40px 22px; border-radius:20px; }
  .stats-band{ padding:36px 22px; border-radius:18px; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid strong{ font-size:1.8rem; }
  .product-card{ padding:26px 22px; }
  .card{ padding:24px 20px; }
  .section-head{ margin-bottom:34px; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px){
  .page-hero-media{ max-width:100%; display:block; }
  .page-hero-media img,
  .page-hero-media video,
  .page-hero-media .hero-embed{ width:100%; max-height:320px; object-fit:cover; }
}