/* ===== Base ===== */
:root{
  --navy:#0f2d3f;
  --navy2:#14384e;
  --gold:#6f3cc3;
  --bg:#f6f8fb;
  --text:#12212b;
  --muted:#5b6b76;
  --shadow: 0 10px 25px rgba(10,25,40,.12);
  --shadow2: 0 8px 22px rgba(0,0,0,.05);
  --radius: 20px;
}
*{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth; overflow-x:hidden}
body{overflow-x:hidden;

  margin:0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{
  width:min(1200px, calc(100% - 32px));
  margin-inline:auto;
}

/* Prevent iOS zoom */
input, select, textarea{font-size:16px}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 24px rgba(0,0,0,.04);

  overflow: visible;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px;
}
.brand{line-height:1.1; display:flex; align-items:center; gap:10px}
.brand__logo{width:42px; height:42px; object-fit:contain; border-radius:12px; box-shadow:0 8px 18px rgba(2,6,23,.10)}
.brand__text{display:flex; flex-direction:column}
.brand__name{font-weight:800; color:var(--navy); font-size:18px}
.brand__sub{font-weight:700; opacity:.55; font-size:12px}
.icon-btn{
  border:0; background:transparent;
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  cursor:pointer;
}
.icon-btn:hover{background:#f1f5f9}
.header__menu{display:none}
.nav{display:flex; gap:8px; align-items:center}
.nav__link{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  color:#475569;
}
.nav__link:hover{background:rgba(15,45,63,.06)}
.nav__link.is-active{color:var(--navy)}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:4px;
  height:2px; background:var(--gold); border-radius:999px;
}
.nav--mobile{
  display:none;
  padding:0 0 12px;
}
.nav--mobile a{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  font-weight:800;
}
.nav--mobile a:hover{background:#f8fafc}

@media (max-width: 840px){
  .nav--desktop{display:none}
  .header__menu{display:grid}
  /* Mobile menu should respect the [hidden] attribute used by JS */
  .nav--mobile[hidden]{display:none !important}
  .nav--mobile:not([hidden]){display:block}
}

/* Ensure the HTML [hidden] attribute always wins */
[hidden]{display:none !important}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height: calc(100vh - 64px);
  display:grid; place-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,45,63,.70), rgba(15,45,63,.70)),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;
  background-position:center;
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,45,63,.72), rgba(15,45,63,.72));
}
.hero__content{
  position:relative; z-index:2;
  text-align:center;
  padding:48px 16px;
  color:#fff;
}
.hero__title{
  margin:0;
  font-weight:900;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height:1.18;
  letter-spacing:-0.01em;
}
.hero__subtitle{
  margin:12px auto 0;
  font-weight:700;
  opacity:.92;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height:1.8;
  max-width:min(980px, 100%);
}
.hero__badge{
  margin:18px auto 0;
  display:inline-flex;
  padding:10px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#e9ddff;
  font-weight:900;
}
.hero__down{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:18px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-size:34px;
  cursor:pointer;
  animation: floaty 1.2s ease-in-out infinite;
}
.hero__down:hover{color:#fff}
@keyframes floaty{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}

/* ===== Sections ===== */
.section{padding:80px 0}
.section__head{text-align:center}
.section__title{
  margin:0;
  color:var(--navy);
  font-weight:900;
  font-size: clamp(28px, 3vw, 44px);
}
.section__bar{
  width:80px; height:4px;
  background:var(--gold);
  border-radius:999px;
  margin:12px auto 0;
}
.section--dark{
  position:relative;
  color:#fff;
}
.section__head--dark .section__title{color:#fff}
.muted{color:var(--muted)}
.lead{line-height:1.9; font-weight:700}

/* ===== Grid ===== */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid--5{grid-template-columns: repeat(5, minmax(0,1fr))}
.grid--about{grid-template-columns: 1.1fr .9fr; align-items:stretch}
.grid--contact{grid-template-columns: 1fr 1fr; align-items:start}

@media (max-width: 980px){
  .grid--3{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid--4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid--about{grid-template-columns: 1fr}
  .grid--contact{grid-template-columns: 1fr}
}
@media (max-width: 640px){
  .grid--3{grid-template-columns: 1fr}
  .grid--4{grid-template-columns: 1fr}
  .grid--5{grid-template-columns: 1fr}
}

/* ===== Cards ===== */
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.pill__icon{
  width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(209,173,58,.15);
  color:#e9ddff;
  font-weight:900;
  flex:0 0 auto;
}
.card__title{font-weight:900; color:#1f2937}
.card__sub{font-weight:800; font-size:12px; opacity:.55; margin-top:2px}

.quote{
  margin-top:14px;
  border-radius: var(--radius);
  padding:18px;
  background: linear-gradient(180deg, var(--navy), var(--navy2));
  color:#fff;
  font-weight:900;
  text-align:center;
  box-shadow: var(--shadow);
}

/* Big KPI */
.bigkpi{
  background:#fff;
  border-radius: var(--radius);
  border:3px solid rgba(15,45,63,.8);
  box-shadow: var(--shadow);
  min-height:320px;
  display:grid; place-items:center;
  text-align:center;
}
.bigkpi__num{font-weight:900; font-size:76px; color:var(--navy)}
.bigkpi__title{font-weight:900; font-size:22px}
.bigkpi__sub{font-weight:800; font-size:13px; opacity:.55}

/* Services */
.service{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px 16px;
  text-align:center;
}
.service__icon{
  width:56px;height:56px;
  border-radius:18px;
  background:var(--navy);
  color:var(--gold);
  display:grid;place-items:center;
  margin:0 auto;
  font-size:22px;
}
.service h3{margin:14px 0 4px; font-weight:900}
.service__en{font-weight:800; font-size:13px; opacity:.55}

/* Dark specialization */
.darkbg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,45,63,.82), rgba(11,35,50,.92)),
    url("https://images.unsplash.com/photo-1521791055366-0d553872125f?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;
  background-position:center;
}
.banner{
  margin-top:26px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding:22px;
  text-align:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.banner__title{font-weight:900; font-size:20px}
.banner__sub{font-weight:800; font-size:13px; opacity:.8; margin-top:6px}
.kpi{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding:26px 18px;
  text-align:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.kpi__icon{
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  margin:0 auto;
  background:rgba(209,173,58,.20);
  color:var(--gold);
  font-size:18px;
}
.kpi__num{font-weight:900; font-size:48px; margin-top:12px}
.kpi__title{font-weight:900; margin-top:6px}
.kpi__sub{font-weight:800; font-size:12px; opacity:.8; margin-top:4px}

/* Contact cards */
.contactcard{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.contactcard:hover{transform: translateY(-2px)}
.contactcard__icon{
  width:56px;height:56px;border-radius:999px;
  margin:0 auto;
  display:grid;place-items:center;
  background:rgba(15,45,63,.10);
  color:var(--navy);
  font-weight:900;
}
.contactcard__title{font-weight:900; margin-top:10px}
.contactcard__sub{font-weight:800; font-size:12px; opacity:.75; margin-top:6px}
.contactcard--blue{background:#0b74a6; color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--blue .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}
.contactcard--gold{background:var(--gold); color:#000; border-color: rgba(0,0,0,.10)}
.contactcard--gold .contactcard__icon{background:rgba(255,255,255,.25); color:#000}
.contactcard--navy{background:var(--navy); color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--navy .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}
.contactcard--wa{background:#22c55e; color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--wa .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}

/* Form */
.formbox{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.formbox h3{margin:0; font-weight:900; color:var(--navy)}
.form{margin-top:14px; display:flex; flex-direction:column; gap:14px}
.form label span{
  display:block;
  font-weight:900;
  margin-bottom:8px;
}
.form input, .form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:12px 12px;
  outline:none;
}
.form input:focus, .form textarea:focus{
  border-color: rgba(209,173,58,.7);
  box-shadow: 0 0 0 4px rgba(209,173,58,.15);
}
.hint{font-weight:700; font-size:12px; opacity:.8}

.sidecol{display:flex; flex-direction:column; gap:22px}
.workhours{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  color:#fff;
  background: linear-gradient(180deg, var(--navy), var(--navy2));
}
.workhours__title{font-weight:900; font-size:20px}
.workhours__row{
  margin-top:14px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:12px;
  font-weight:800;
}
.whybox{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.whybox h3{margin:0; font-weight:900; color:var(--navy)}

/* Buttons */
.btn{
  border:0;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  font-weight:900;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
}
.btn:hover{transform: translateY(-2px)}
.btn--gold{background:var(--gold); color:#000; box-shadow: var(--shadow)}
.btn--ghost{background: transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn--ghost:hover{box-shadow: var(--shadow)}
.btn--lg{height:48px; padding:0 24px; font-size:16px}
.btn--wide{width:100%}

/* Footer */
.footer{
  padding:48px 0 20px;
  color:#fff;
  background: linear-gradient(180deg, var(--navy), #0b2332);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap:28px;
}
.footer__name{font-weight:900; font-size:24px}
.footer__text{margin-top:10px; font-weight:800; opacity:.85; line-height:1.8}
.footer__sub{margin-top:6px; font-weight:800; opacity:.7}
.footer__title{font-weight:900; margin-bottom:10px}
.footer a{display:block; padding:6px 0; font-weight:800; opacity:.85}
.footer a:hover{opacity:1}
.footer__copy{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center;
  font-weight:800;
  opacity:.85;
}
@media (max-width: 980px){
  .footer__grid{grid-template-columns: 1fr}
}

/* ToTop */
.totop{
  position:fixed;
  bottom:18px;
  right:18px;
  width:44px;height:44px;
  border-radius:999px;
  border:0;
  background:var(--navy);
  color:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
  display:none;
}
.totop.show{display:block}

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.98);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Form status */
.formstatus{
  margin-top:10px;
  font-weight:900;
  font-size:13px;
  padding:10px 12px;
  border-radius:14px;
  display:none;
}
.formstatus.ok{
  display:block;
  background: rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.25);
  color: #166534;
}
.formstatus.err{
  display:block;
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  color: #991b1b;
}

/* Prevent long text overflow */
.contactcard__sub, .footer a, .banner__title, .banner__sub, .service__en, .muted{word-break:break-word; overflow-wrap:anywhere;}


/* ===== Company Homepage Additions ===== */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.hero-mini-stats{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.mini-stat{min-width:160px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);backdrop-filter: blur(8px);border-radius:16px;padding:12px 14px;color:#fff;box-shadow: 0 10px 25px rgba(0,0,0,.18);}
.mini-stat__num{font-weight:900;color:var(--gold);font-size:18px}.mini-stat__label{font-weight:800;font-size:12px;opacity:.9;margin-top:4px}
.portfolio-grid{margin-top:26px;display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:22px;}
.portfolio-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius: var(--radius);box-shadow: var(--shadow);overflow:hidden;transition: transform .15s ease, box-shadow .15s ease;}
.portfolio-card:hover{transform: translateY(-4px);box-shadow: 0 16px 30px rgba(10,25,40,.14);}
.portfolio-thumb{width:100%;height:220px;object-fit:cover;display:block;background:#e5e7eb;}
.portfolio-body{padding:16px}.portfolio-body h3{margin:0;font-weight:900;color:var(--navy)}.portfolio-body .muted{margin-top:8px;line-height:1.8}
.portfolio-tags{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:rgba(15,45,63,.07);color:var(--navy);font-weight:800;font-size:12px;border:1px solid rgba(15,45,63,.08);}
.webcards{margin-top:26px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:22px;}
.webcard{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius: var(--radius);box-shadow: var(--shadow);overflow:hidden;display:flex;flex-direction:column;}
.webcard > img{width:100%;height:240px;object-fit:cover;display:block;background:#e5e7eb;}
.webcard__body{padding:18px;display:flex;flex-direction:column;gap:10px;}
.webcard__body h3{margin:0;font-weight:900;color:var(--navy)}
.webcard__actions{margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.portal-box{margin-top:24px;display:grid;grid-template-columns: 1.2fr .8fr;gap:20px;align-items:stretch;border-radius: var(--radius);border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);backdrop-filter: blur(10px);box-shadow: 0 12px 28px rgba(0,0,0,.25);padding:18px;}
.portal-box__content h3{margin:0;color:#fff;font-weight:900;font-size:22px}.portal-box__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.portal-mock{border-radius:16px;background:rgba(255,255,255,.95);color:#111827;overflow:hidden;border:1px solid rgba(255,255,255,.35);min-height:220px;}
.portal-mock__head{height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#eef2f7;border-bottom:1px solid rgba(0,0,0,.06);}
.portal-mock__head span{width:10px;height:10px;border-radius:999px;background:#cbd5e1;}
.portal-mock__body{padding:14px}.portal-row{height:14px;border-radius:999px;background:#e2e8f0;margin-bottom:10px}.portal-row.short{width:70%}
.portal-grid{margin-top:12px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px;}
.portal-grid > div{height:58px;border-radius:12px;background:#e2e8f0;}
@media (max-width: 980px){.portfolio-grid{grid-template-columns: repeat(2, minmax(0,1fr))}.webcards{grid-template-columns: 1fr}.portal-box{grid-template-columns: 1fr}}
@media (max-width: 640px){.portfolio-grid{grid-template-columns: 1fr}.portfolio-thumb{height:200px}.webcard > img{height:210px}.hero-actions .btn{width:100%}.hero-actions{max-width:420px;margin-inline:auto;margin-top:18px}.mini-stat{min-width:unset;width:100%}}


/* ===== UX Upgrades: varied transitions + animated hero + systems + slider ===== */
.hero--animated{isolation:isolate}
.hero__bg--animated{
  background:
    linear-gradient(180deg, rgba(12,31,47,.62), rgba(12,31,47,.70)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1900&q=70");
  background-size: cover;
  background-position: center;
  animation: heroPan 22s ease-in-out infinite alternate;
  transform-origin:center;
}
.hero__bg--animated::before,
.hero__bg--animated::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
}
.hero__bg--animated::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(209,173,58,.28), transparent 42%),
    radial-gradient(circle at 78% 28%, rgba(99,102,241,.22), transparent 38%),
    radial-gradient(circle at 62% 82%, rgba(34,197,94,.14), transparent 32%);
  mix-blend-mode: screen;
  animation: blobMove 16s ease-in-out infinite alternate;
}
.hero__bg--animated::after{
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12px);
  opacity:.45;
  animation: gridDrift 20s linear infinite;
}
.hero__overlay--animated{
  background: linear-gradient(180deg, rgba(10,24,38,.68) 0%, rgba(10,24,38,.76) 55%, rgba(10,24,38,.86) 100%);
}
.hero-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;
  font-weight:900;box-shadow: 0 12px 28px rgba(0,0,0,.20);backdrop-filter: blur(8px);margin-bottom:14px;
}
.darkbg--alt{
  background:
    linear-gradient(180deg, rgba(9,24,37,.86), rgba(12,28,43,.94)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;background-position:center;
}
@keyframes heroPan{
  0%{transform:scale(1) translate3d(0,0,0); background-position:50% 50%}
  50%{transform:scale(1.06) translate3d(-8px,-4px,0); background-position:52% 46%}
  100%{transform:scale(1.02) translate3d(6px,6px,0); background-position:48% 54%}
}
@keyframes blobMove{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8px,-10px,0) scale(1.05)}}
@keyframes gridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,40px,0)}}

/* varied reveal */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.98);
  filter: blur(6px);
  transition: opacity 650ms cubic-bezier(.2,.65,.2,1), transform 700ms cubic-bezier(.16,1,.3,1), filter 700ms ease;
}
.reveal[data-anim="up"]{transform:translateY(26px) scale(.98); filter:blur(6px)}
.reveal[data-anim="left"]{transform:translateX(32px) scale(.985); filter:blur(7px)}
.reveal[data-anim="right"]{transform:translateX(-32px) scale(.985); filter:blur(7px)}
.reveal[data-anim="zoom"]{transform:scale(.92) translateY(8px); filter:blur(8px)}
.reveal[data-anim="fade"]{transform:none; filter:none; opacity:0}
.reveal.is-visible{opacity:1; transform:none; filter:none}

/* systems */
.systems-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.system-card{
  position:relative;display:flex;flex-direction:column;gap:10px;min-height:210px;border-radius:22px;padding:18px;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);box-shadow:0 16px 30px rgba(0,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.system-card:hover{transform:translateY(-4px);box-shadow:0 20px 35px rgba(0,0,0,.30);border-color:rgba(209,173,58,.45)}
.system-card__badge{align-self:flex-start;height:28px;border-radius:999px;padding:0 10px;display:inline-flex;align-items:center;background:rgba(209,173,58,.22);color:var(--gold);border:1px solid rgba(209,173,58,.35);font-weight:900;font-size:12px}
.system-card__badge--soft{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18)}
.system-card__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:24px}
.system-card h3{margin:0;font-size:20px;line-height:1.5;font-weight:900}
.system-card p{margin:0;color:rgba(255,255,255,.86);line-height:1.8;font-weight:700}
.system-card__footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-weight:900}

/* showcase slider */
.showcase-slider{
  margin-top:24px;border-radius:24px;overflow:hidden;border:1px solid rgba(0,0,0,.06);background:#fff;box-shadow: var(--shadow);
}
.showcase-slider__viewport{overflow:hidden;position:relative;background:#0f172a}
.showcase-slider__track{display:flex;width:100%;transform:translateX(0);transition:transform 700ms cubic-bezier(.22,1,.36,1)}
.site-slide{min-width:100%;position:relative;height:520px;overflow:hidden}
.site-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition: transform 1.6s ease}
.showcase-slider:hover .site-slide img{transform:scale(1.06)}
.site-slide::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.20), rgba(2,6,23,.70)), linear-gradient(90deg, rgba(2,6,23,.85), rgba(2,6,23,.28) 60%, rgba(2,6,23,.20));
}
.site-slide__overlay{position:absolute;inset:auto auto 0 0;width:min(720px,100%);padding:26px;color:#fff;z-index:2}
.site-slide__kicker{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);font-weight:900;font-size:12px;margin-bottom:10px}
.site-slide__overlay h3{margin:0;font-weight:900;font-size:clamp(22px,2.7vw,34px);line-height:1.4}
.site-slide__overlay p{margin:10px 0 0;line-height:1.9;color:rgba(255,255,255,.9);font-weight:700;max-width:560px}
.site-slide__overlay .btn{margin-top:14px}
.showcase-slider__controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff}
.slider-btn{
  width:42px;height:42px;border-radius:999px;border:1px solid rgba(15,45,63,.10);background:#fff;color:var(--navy);cursor:pointer;
  display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow: 0 8px 18px rgba(15,45,63,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.slider-btn:hover{transform:translateY(-2px)}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:8px;flex:1}
.slider-dot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;background:#cbd5e1;transition:transform .2s ease, width .2s ease, background-color .2s ease}
.slider-dot.is-active{width:26px;background:var(--gold)}

@media (max-width: 980px){
  .systems-grid{grid-template-columns:1fr}
  .site-slide{height:460px}
}
@media (max-width: 640px){
  .hero-chip{font-size:12px;padding:0 12px}
  .site-slide{height:420px}
  .site-slide__overlay{padding:18px}
  .site-slide__overlay p{font-size:14px;line-height:1.75}
  .showcase-slider__controls{padding:10px}
  .slider-btn{width:38px;height:38px}
}


/* ===== v3 upgrades: video hero + social rail + brands + richer transitions + programs ===== */
.hero--video{isolation:isolate}
.hero__video-wrap{position:absolute; inset:0; overflow:hidden; background:#0b1726;}
.hero__video{width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:saturate(1.1) contrast(1.04) brightness(.85); animation: heroVideoZoom 18s ease-in-out infinite alternate;}
.hero__overlay--video{background:radial-gradient(circle at 18% 22%, rgba(209,173,58,.16), transparent 36%), radial-gradient(circle at 78% 28%, rgba(99,102,241,.14), transparent 30%), linear-gradient(180deg, rgba(10,24,38,.62) 0%, rgba(10,24,38,.76) 48%, rgba(10,24,38,.88) 100%);}
@keyframes heroVideoZoom{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.11) translate3d(-8px,-4px,0)}100%{transform:scale(1.08) translate3d(10px,6px,0)}}

.social-rail{position:fixed; top:90px; left:14px; z-index:120; display:flex; flex-direction:column; gap:10px;}
.social-rail__btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:900;font-size:12px;box-shadow:0 12px 22px rgba(10,25,40,.18);border:1px solid rgba(255,255,255,.14);backdrop-filter: blur(8px);transition:transform .18s ease, box-shadow .18s ease;}
.social-rail__btn:hover{transform:translateY(-2px) scale(1.02)}
.social-rail__btn--ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social-rail__btn--fb{background:linear-gradient(135deg,#1877f2,#2563eb)}
.social-rail__btn--tt{background:linear-gradient(135deg,#111827,#ef4444 58%, #22d3ee)}
.social-rail__btn--wa{background:linear-gradient(135deg,#16a34a,#22c55e)}
@media (max-width: 840px){.social-rail{top:72px; left:10px; flex-direction:row; gap:8px}.social-rail__btn{width:38px;height:38px;border-radius:12px;font-size:11px}}

.reveal[data-anim="tilt"]{transform:translateY(18px) rotate(2.2deg) scale(.97); filter:blur(8px)}
.reveal[data-anim="soft-scale"]{transform:translateY(10px) scale(.9); filter:blur(5px)}
.reveal[data-anim="rise-rotate"]{transform:translateY(24px) translateX(-10px) rotate(-2deg) scale(.98); filter:blur(8px)}

.hero--programs .hero__content{max-width:980px}
.catalog-grid .system-card{min-height:220px}
.catalog-grid .system-card h3{font-size:19px}

.site-slide__chrome{position:absolute; inset:14px 14px auto 14px; height:34px; border-radius:12px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.65); display:flex; align-items:center; gap:7px; padding:0 10px; z-index:3; box-shadow:0 10px 18px rgba(0,0,0,.12);}
.site-slide__chrome span{width:9px;height:9px;border-radius:999px;background:#cbd5e1}
.site-slide__chrome span:nth-child(1){background:#fb7185}
.site-slide__chrome span:nth-child(2){background:#7c3aed}
.site-slide__chrome span:nth-child(3){background:#34d399}
.site-slide__chrome i{margin-inline-start:auto; font-style:normal; color:#334155; font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65%}
.site-slide__overlay{padding-top:72px}
.site-slide__overlay h3{max-width:620px}
.site-slide--design::after{background: linear-gradient(180deg, rgba(2,6,23,.12), rgba(2,6,23,.66)), linear-gradient(90deg, rgba(2,6,23,.78), rgba(2,6,23,.16) 60%, rgba(2,6,23,.12));}
.design-slider .site-slide{height:500px}
.design-slider .site-slide__chrome{display:none}
@media (max-width:640px){.site-slide__chrome{inset:10px 10px auto 10px; height:30px}.site-slide__chrome i{font-size:11px;max-width:56%}.site-slide__overlay{padding-top:62px}.design-slider .site-slide{height:400px}}

.section--brands{background: linear-gradient(180deg,#f8fbff 0%, #fff 100%)}
.brands-cloud{margin-top:24px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px;}
.brand-tile{background:#fff; border:1px solid rgba(15,45,63,.08); border-radius:18px; padding:12px; min-height:104px; display:grid;place-items:center; box-shadow:0 10px 20px rgba(15,45,63,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.brand-tile:hover{transform:translateY(-3px); box-shadow:0 14px 24px rgba(15,45,63,.1); border-color:rgba(209,173,58,.28)}
.brand-tile img{max-width:100%; height:auto; display:block}
@media (max-width:980px){.brands-cloud{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width:640px){.brands-cloud{grid-template-columns: 1fr}}

.system-card, .service, .portfolio-card, .contactcard, .brand-tile, .slider-btn{will-change: transform;}
.showcase-slider .showcase-slider__viewport::before{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 12% 16%, rgba(255,255,255,.08), transparent 28%), radial-gradient(circle at 82% 22%, rgba(209,173,58,.10), transparent 32%); z-index:1;}
.hero--video .hero__bg{display:none}



/* ===== v5 polish / blur reduction / new components ===== */
.header{backdrop-filter:none !important}
.hero__badge,.mini-stat,.social-rail__btn,.contactcard,.formbox,.workhours,.whybox,.portal-box,.showcase-slider,.site-slide,.website-card,.brand-tile{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.reveal{filter:none !important}
.reveal[data-anim]{filter:none !important}

/* Nav dropdown */
.nav-dropdown{position:relative}
.nav__dropdown-toggle{border:0;background:transparent;cursor:pointer}
.nav-dropdown__menu{
  position:absolute; top:calc(100% + 8px); right:0;
  width:260px; padding:10px;
  background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:16px; box-shadow:0 18px 40px rgba(2,6,23,.12);
  display:grid; gap:6px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.18s ease;
  z-index:30;
}
.nav-dropdown__menu a{
  display:block; padding:10px 12px; border-radius:12px; font-weight:700; color:#334155;
}
.nav-dropdown__menu a:hover{background:#f8fafc; color:var(--navy)}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0)}
@media (max-width:840px){ .nav-dropdown{display:none} }

/* Social rail */
.social-rail{
  position:fixed; top:98px; left:12px; z-index:1200;
  display:flex; flex-direction:column; gap:8px;
}
.social-rail__btn{
  width:42px;height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 20px rgba(2,6,23,.16);
  display:grid; place-items:center; color:#fff; font-weight:900;
  background:rgba(15,23,42,.88);
  transition:transform .18s ease, box-shadow .18s ease;
}
.social-rail__btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 14px 24px rgba(2,6,23,.22)}
.social-rail__btn--ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social-rail__btn--fb{background:#1877f2}
.social-rail__btn--tt{background:#111827}
.social-rail__btn--wa{background:#25d366}
@media (max-width:980px){
  .social-rail{left:auto; right:10px; top:86px}
  .social-rail__btn{width:38px;height:38px;border-radius:12px;font-size:12px}
}

/* Hero network */
.hero--network,.hero--catalog{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(1000px 700px at 50% 85%, rgba(249,115,22,.10), transparent 65%),
    #04070f;
}
.hero--network .hero__overlay,.hero--catalog .hero__overlay{
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.04), transparent 48%),
    linear-gradient(180deg, rgba(4,7,15,.35), rgba(4,7,15,.68));
}
.hero-network-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
}
.hero-network-canvas--dim{opacity:.75}
.hero-network-glow{
  position:absolute; inset:auto 50% 22%; transform:translateX(-50%);
  width:min(52vw,620px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(100,210,255,.38), rgba(76,29,149,.20) 35%, rgba(2,6,23,0) 70%);
  filter:blur(22px); opacity:.65; z-index:1; pointer-events:none;
}
.hero-network-nodes{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}
.hero-node{
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px; color:#e2e8f0; font-size:12px; font-weight:800;
  border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.42);
  box-shadow:0 10px 18px rgba(0,0,0,.16);
  animation:floatNode 7s ease-in-out infinite;
}
.hero-node::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; margin-left:8px;
  box-shadow:0 0 0 5px rgba(209,173,58,.14);
}
.hero-node--1{top:18%; right:17%; animation-delay:.2s}
.hero-node--2{top:28%; left:12%; animation-delay:1.1s}
.hero-node--3{top:56%; right:10%; animation-delay:2s}
.hero-node--4{top:66%; left:14%; animation-delay:1.5s}
.hero-node--5{top:14%; left:42%; animation-delay:.8s}
.hero-node--6{top:72%; left:46%; animation-delay:2.4s}
.hero__overlay--network{z-index:2}
.hero__content{z-index:3}
.hero-chip{
  margin:0 auto 14px; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-weight:900; font-size:13px;
  color:#e2e8f0; border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.35);
}
.hero-chip::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold)}
.hero-actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px;
}
.hero-mini-stats{
  margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.mini-stat{
  padding:14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,14,27,.45);
  box-shadow:0 12px 24px rgba(2,6,23,.18);
}
.mini-stat__num{font-weight:900; color:#fff; font-size:14px}
.mini-stat__label{font-weight:700; color:rgba(255,255,255,.75); font-size:12px; margin-top:4px}
@media (max-width:980px){ .hero-mini-stats{grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
@media (max-width:700px){
  .hero-node{display:none}
  .hero__content{padding-top:32px}
  .hero-chip{font-size:11px}
}

/* sliders / website mocks */
.showcase-slider{margin-top:22px}
.showcase-slider__viewport{overflow:hidden;border-radius:24px}
.showcase-slider__track{
  display:flex;
  transition:transform .45s ease;
}
.showcase-slider__track > *{
  min-width:100%;
  flex:0 0 100%;
}
.site-slide{
  position:relative; overflow:hidden;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  border-radius:24px;
  box-shadow:0 14px 30px rgba(2,6,23,.08);
  padding:14px;
}
.site-slide--link{display:block; cursor:pointer}
.site-slide--design{padding:0; aspect-ratio:16/8.8; display:block}
.site-slide--design img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .5s ease;
}
.site-slide--design:hover img{transform:scale(1.06)}
.site-slide__overlay{
  position:absolute; inset:auto 14px 14px 14px;
  background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78));
  border-radius:18px; padding:22px 18px 16px; color:#fff;
}
.site-slide__kicker{font-size:12px; font-weight:800; opacity:.85}
.site-slide__overlay h3{margin:8px 0 0; font-size:22px}
.site-slide__chrome{
  display:flex; align-items:center; gap:8px; color:#64748b; font-size:12px; font-weight:700; margin-bottom:10px;
}
.site-slide__chrome span{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:inline-block}
.site-slide__chrome i{font-style:normal; margin-inline-start:auto}
.site-mock{
  border-radius:18px; border:1px solid rgba(2,6,23,.06);
  background:linear-gradient(180deg,#fff,#f8fafc);
  overflow:hidden;
}
.site-mock__hero{
  padding:18px;
  color:#fff;
  background:
    radial-gradient(350px 150px at 80% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.06)),
    var(--mock-bg, linear-gradient(135deg,#1e293b,#0f172a));
}
.site-mock__badge{
  display:inline-flex; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:900;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:#fff;
}
.site-mock__hero h3{margin:10px 0 4px;font-size:22px;line-height:1.25}
.site-mock__hero p{margin:0; opacity:.92; font-weight:700; font-size:13px}
.site-mock__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px;
}
.mock-chip{
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:800; color:#334155; font-size:13px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.site-mock__rows{padding:0 14px 14px; display:grid; gap:8px}
.site-mock__rows div{
  height:12px; background:linear-gradient(90deg,#e2e8f0,#f1f5f9); border-radius:999px;
}
.site-mock__rows div:nth-child(2){width:84%}
.site-mock__rows div:nth-child(3){width:62%}
.site-mock--cars{--mock-bg:linear-gradient(135deg,#ea580c,#7c2d12)}
.site-mock--tint{--mock-bg:linear-gradient(135deg,#0ea5e9,#0f172a)}
.site-mock--profile{--mock-bg:linear-gradient(135deg,#8b5cf6,#312e81)}
.site-mock--perfume{--mock-bg:linear-gradient(135deg,#ec4899,#831843)}
.site-mock--oils{--mock-bg:linear-gradient(135deg,#22c55e,#14532d)}
.site-mock--showroom{--mock-bg:linear-gradient(135deg,#6d28d9,#7c2d12)}
.site-mock--landing{--mock-bg:linear-gradient(135deg,#ef4444,#7f1d1d)}
.showcase-slider__controls{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px;
}
.slider-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(2,6,23,.08);
  background:#fff; cursor:pointer; box-shadow:0 8px 18px rgba(2,6,23,.06); font-size:24px; line-height:1;
}
.slider-btn:hover{transform:translateY(-1px)}
.slider-dots{display:flex; gap:8px; align-items:center}
.slider-dot{
  width:9px;height:9px;border-radius:50%; border:0; background:#cbd5e1; cursor:pointer;
  padding:0;
}
.slider-dot.is-active{width:28px; border-radius:999px; background:var(--navy)}
.design-slider .showcase-slider__viewport{border-radius:26px; box-shadow:0 18px 35px rgba(2,6,23,.08)}
.websites-slider .showcase-slider__viewport{box-shadow:0 18px 35px rgba(2,6,23,.08)}

/* Brands */
.section--brands{background:linear-gradient(180deg,#fbfdff,#f6f8fb)}
.brands-cloud{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.brand-tile{
  height:96px; border-radius:20px; background:#fff;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 20px rgba(2,6,23,.05);
  display:grid; place-items:center; padding:18px;
}
.brand-tile img{max-width:100%; max-height:54px; object-fit:contain; opacity:.9}
@media (max-width:980px){ .brands-cloud{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .brands-cloud{grid-template-columns:1fr} }

/* Website catalog */
.website-catalog{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.website-card{
  display:block; background:#fff; border:1px solid rgba(2,6,23,.07);
  border-radius:20px; padding:12px; box-shadow:0 12px 26px rgba(2,6,23,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.website-card:hover{transform:translateY(-4px); box-shadow:0 18px 30px rgba(2,6,23,.10)}
.website-card__head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:6px 6px 10px;
}
.website-card__dot{
  width:10px;height:10px;border-radius:50%; background:var(--accent,#0ea5e9); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent,#0ea5e9) 15%, white);
}
.website-card__domain{font-weight:800; color:#475569; font-size:12px}
.website-card__kicker{font-weight:900; color:var(--accent,#0ea5e9); font-size:11px}
.website-card__preview{
  border-radius:14px; border:1px solid rgba(2,6,23,.06); overflow:hidden; padding:10px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.wc-nav{height:10px; border-radius:999px; background:#e2e8f0; margin-bottom:10px; width:48%}
.wc-hero{height:70px; border-radius:12px; background:linear-gradient(135deg,var(--accent,#0ea5e9),#0f172a); margin-bottom:10px}
.wc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px}
.wc-grid span{height:38px; border-radius:10px; background:#fff; border:1px solid rgba(2,6,23,.06)}
.wc-row{height:10px; background:#e2e8f0; border-radius:999px}
.wc-row.short{width:60%; margin-top:8px}
.website-card__body{padding:10px 8px 6px}
.website-card__body h3{margin:0; color:var(--navy); font-size:18px}
.website-card__body p{margin:8px 0 0; color:#64748b; line-height:1.8; font-weight:700; font-size:13px}
.showcase-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.showcase-tag{
  padding:6px 10px; border-radius:999px; background:#f8fafc; border:1px solid rgba(2,6,23,.06);
  font-size:11px; font-weight:800; color:#334155;
}
.website-card__footer{
  margin-top:8px; display:flex; align-items:center; justify-content:space-between;
  padding:10px 8px 6px; color:#334155; font-weight:900; border-top:1px dashed rgba(2,6,23,.07);
}
@media (max-width:980px){ .website-catalog{grid-template-columns:1fr} }

/* Demo website pages */
.demo-page{
  position:relative; padding:34px 0 70px;
  background:
    radial-gradient(900px 600px at 10% 5%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 65%),
    radial-gradient(700px 400px at 88% 15%, rgba(15,23,42,.14), transparent 65%),
    linear-gradient(180deg,#f6f8fb,#eef2f7);
}
.demo-page__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(0deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.25;
}
.demo-shell{
  position:relative; z-index:1;
  background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:26px; overflow:hidden; box-shadow:0 20px 44px rgba(2,6,23,.10);
}
.demo-topbar{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 16px; background:#f8fafc; border-bottom:1px solid rgba(2,6,23,.06);
}
.demo-topbar__dots{display:flex; gap:6px}
.demo-topbar__dots span{width:8px;height:8px;border-radius:50%; background:#cbd5e1; display:inline-block}
.demo-topbar__domain{font-weight:800; color:#334155; font-size:13px; text-align:center}
.demo-topbar__links{display:flex; gap:10px}
.demo-topbar__links a{font-size:12px; font-weight:800; color:#64748b}
.demo-header{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:16px 18px; border-bottom:1px solid rgba(2,6,23,.06);
}
.demo-logo{
  font-weight:900; color:var(--navy); font-size:15px;
  padding:10px 12px; border-radius:12px; background:#f8fafc; border:1px solid rgba(2,6,23,.06);
}
.demo-nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.demo-nav a{
  padding:8px 10px; border-radius:10px; font-weight:800; color:#475569; font-size:13px;
}
.demo-nav a:hover{background:#f8fafc}
.demo-nav__cta{
  padding:9px 12px; border-radius:12px; background:var(--demo-accent); color:#fff; font-weight:900; font-size:13px;
}
.demo-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:20px 18px;
}
.demo-hero__content{
  border-radius:20px; padding:22px;
  background:
    radial-gradient(240px 120px at 90% 0%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 88%, black 12%), #0f172a);
  color:#fff; box-shadow:0 14px 26px rgba(2,6,23,.10);
}
.demo-pill{
  display:inline-flex; padding:7px 10px; border-radius:999px; font-weight:900; font-size:11px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
}
.demo-hero__content h1{margin:10px 0 0; font-size:clamp(24px,3vw,34px); line-height:1.25}
.demo-hero__content p{margin:10px 0 0; font-weight:700; opacity:.92; line-height:1.8}
.demo-hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.demo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; font-weight:900; font-size:13px;
}
.demo-btn--solid{background:#fff; color:#0f172a}
.demo-btn--ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16)}
.demo-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px}
.demo-stat{
  padding:10px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);
  display:grid; gap:4px;
}
.demo-stat strong{font-size:15px}
.demo-stat span{font-size:11px; opacity:.9}
.demo-hero__visual{
  position:relative; border-radius:20px; padding:14px;
  background:linear-gradient(180deg,#f8fafc,#eef2f7); border:1px solid rgba(2,6,23,.06);
}
.dv-card{
  border-radius:16px; background:#fff; border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 20px rgba(2,6,23,.06); padding:12px;
}
.dv-card--main{height:100%}
.dv-row{height:12px; border-radius:999px; background:#e2e8f0; margin-bottom:10px; width:72%}
.dv-row.short{width:56%}
.dv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px}
.dv-grid span{height:68px; border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb, var(--demo-accent) 14%, white),#fff); border:1px solid rgba(2,6,23,.06)}
.dv-card--float{
  position:absolute; left:14px; bottom:14px; width:min(220px,58%);
  background:rgba(255,255,255,.95);
}
.dv-badge{
  display:inline-flex; padding:4px 8px; border-radius:999px; background:color-mix(in srgb, var(--demo-accent) 15%, white);
  color:color-mix(in srgb, var(--demo-accent) 70%, black 30%); font-size:11px; font-weight:900; margin-bottom:8px;
}
.dv-mini{height:8px; border-radius:999px; background:#e2e8f0; margin-bottom:7px}
.dv-mini.short{width:58%}
.demo-section{padding:0 18px 18px}
.demo-section__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.demo-section__head h2{margin:0; font-size:20px; color:var(--navy)}
.demo-section__head a{font-weight:800; color:color-mix(in srgb, var(--demo-accent) 74%, black)}
.demo-tiles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.demo-tile{
  border-radius:14px; background:#fff; border:1px solid rgba(2,6,23,.06); padding:14px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.demo-tile h4{margin:0; color:#0f172a; font-size:15px}
.demo-tile p{margin:7px 0 0; color:#64748b; font-weight:700; line-height:1.65; font-size:12px}
.demo-products{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.demo-product{
  border-radius:14px; border:1px solid rgba(2,6,23,.06); background:#fff; padding:10px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.demo-product__media{
  height:100px; border-radius:12px;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--demo-accent) 40%, white), color-mix(in srgb, var(--demo-accent) 12%, white)),
    linear-gradient(45deg,rgba(255,255,255,.5),transparent);
  border:1px solid rgba(2,6,23,.05);
}
.demo-product h4{margin:10px 0 4px; color:#0f172a; font-size:14px}
.demo-product p{margin:0; color:#64748b; font-size:12px; font-weight:700}
.demo-product button{
  margin-top:10px; width:100%; border:0; border-radius:10px; padding:8px 10px; font-weight:900;
  background:color-mix(in srgb, var(--demo-accent) 12%, white); color:#0f172a; cursor:pointer;
}
.demo-banner{
  margin:0 18px 18px; border-radius:18px; padding:16px;
  border:1px solid rgba(2,6,23,.06);
  background:
    radial-gradient(320px 130px at 90% 0%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 60%),
    #f8fafc;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.demo-banner h3{margin:0; color:var(--navy); font-size:18px}
.demo-banner p{margin:6px 0 0; color:#64748b; font-weight:700}
.demo-faqs{display:grid; gap:10px}
.demo-faq{
  background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:14px; padding:0 14px;
  box-shadow:0 8px 16px rgba(2,6,23,.04);
}
.demo-faq summary{
  list-style:none; cursor:pointer; padding:14px 0; font-weight:800; color:#0f172a;
}
.demo-faq summary::-webkit-details-marker{display:none}
.demo-faq p{margin:0 0 14px; color:#64748b; font-weight:700}
@media (max-width:1100px){
  .demo-tiles,.demo-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .demo-header{grid-template-columns:1fr; text-align:center}
  .demo-nav{justify-content:center}
  .demo-nav__cta{justify-self:center}
  .demo-hero{grid-template-columns:1fr}
  .demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-banner{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  .demo-topbar{grid-template-columns:1fr; justify-items:center}
  .demo-topbar__links{justify-content:center}
  .demo-tiles,.demo-products{grid-template-columns:1fr}
}

/* contact cards polish */
.contactcard{
  display:block; border-radius:18px; padding:16px;
  border:1px solid rgba(2,6,23,.06); background:#fff; box-shadow:0 10px 20px rgba(2,6,23,.05);
}
.contactcard__icon{font-size:20px}
.contactcard__title{font-weight:900; color:var(--navy); margin-top:6px}
.contactcard__sub{color:#64748b; font-weight:700; margin-top:4px}
.contactcard--gold{background:linear-gradient(180deg,#fff,#faf5ff)}
.contactcard--navy{background:linear-gradient(180deg,#fff,#f8fbff)}
.contactcard--wa{background:linear-gradient(180deg,#fff,#f5fff8)}
.contactcard--blue{background:linear-gradient(180deg,#fff,#f7fbff)}
.formbox,.workhours,.whybox{
  background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:20px; box-shadow:0 12px 24px rgba(2,6,23,.05);
}
.formbox{padding:18px}
.formbox h3{margin:0 0 10px; color:var(--navy)}
.form{display:grid; gap:12px}
.form label{display:grid; gap:7px}
.form label span{font-weight:800; font-size:13px; color:#334155}
.form input,.form textarea{
  width:100%; border:1px solid rgba(2,6,23,.12); border-radius:12px; padding:12px 14px; font-family:inherit; background:#fff;
}
.form input:focus,.form textarea:focus{outline:none; border-color:color-mix(in srgb, var(--gold) 50%, #94a3b8)}
.btn--wide{width:100%}
.formstatus{font-size:13px; font-weight:800}
.formstatus.ok{color:#166534}
.formstatus.err{color:#b91c1c}
.sidecol{display:grid; gap:16px}
.workhours,.whybox{padding:18px}
.workhours__title{font-weight:900; color:var(--navy); margin-bottom:10px}
.workhours__row{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px dashed rgba(2,6,23,.07); font-weight:800; color:#334155;
}
.workhours__row:last-child{border-bottom:0}
.whybox h3{margin:0; color:var(--navy)}

/* helper animations */
@keyframes floatNode{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-7px)}
}


/* ===== Enhanced social rail icons (SVG) ===== */
.social-rail__btn{
  color:#fff;
}
.social-rail__btn svg{width:20px;height:20px;display:block}
.social-rail__btn .icon-stroke *{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-rail__btn .icon-stroke circle[r="1.1"]{fill:currentColor; stroke:none}
.social-rail__btn--tt svg{filter:drop-shadow(0 0 10px rgba(34,211,238,.2));}

/* ===== Website slider mock variants (more distinct visual styles) ===== */
.site-mock{position:relative; isolation:isolate}
.site-mock::before{
  content:""; position:absolute; inset:auto -10% -18% auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  opacity:.45; pointer-events:none;
}
.site-mock__hero{position:relative; overflow:hidden}
.site-mock__hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.65}
.site-mock__hero > *{position:relative; z-index:1}

/* Cars marketplace */
.site-mock--cars .site-mock__hero{
  background:
    radial-gradient(200px 80px at 18% 15%, rgba(255,220,180,.28), transparent 70%),
    linear-gradient(145deg,#1e293b,#0f172a 55%, #7c2d12);
}
.site-mock--cars .site-mock__hero::after{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    linear-gradient(0deg, rgba(234,88,12,.18), rgba(234,88,12,0));
}
.site-mock--cars .site-mock__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.site-mock--cars .mock-chip{
  min-height:54px; display:grid; place-items:center; text-align:center; font-size:11px;
  border-radius:12px; background:linear-gradient(180deg,#fff,#f8fafc);
}
.site-mock--cars .mock-chip:nth-child(1){grid-column:span 2; background:linear-gradient(180deg,#fff7ed,#fff)}
.site-mock--cars .mock-chip:nth-child(4){grid-column:span 2; background:linear-gradient(180deg,#eff6ff,#fff)}
.site-mock--cars .site-mock__rows div{height:10px}

/* Tint & PPF */
.site-mock--tint{background:linear-gradient(180deg,#040813,#0b1324)}
.site-mock--tint .site-mock__hero{
  background:
    radial-gradient(280px 120px at 80% 15%, rgba(0,194,255,.22), transparent 70%),
    linear-gradient(155deg,#0b1220,#07111f 52%, #0ea5e9);
}
.site-mock--tint .site-mock__hero::after{
  background:
    linear-gradient(120deg, transparent 12%, rgba(255,255,255,.11) 18%, transparent 24%, transparent 40%, rgba(0,194,255,.14) 47%, transparent 54%),
    linear-gradient(0deg, rgba(15,23,42,.45), transparent 55%);
}
.site-mock--tint .site-mock__grid{grid-template-columns:1.2fr .8fr; grid-auto-rows:42px; gap:9px}
.site-mock--tint .mock-chip{
  background:rgba(10,18,34,.72); color:#dff8ff; border-color:rgba(14,165,233,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18);
}
.site-mock--tint .mock-chip:nth-child(1){grid-row:span 2; display:grid; align-content:center}
.site-mock--tint .mock-chip:nth-child(3){background:linear-gradient(135deg,rgba(14,165,233,.25), rgba(10,18,34,.75))}
.site-mock--tint .site-mock__rows div{background:linear-gradient(90deg,#0f172a,#1e293b,#0ea5e9); opacity:.55}

/* Interactive profile */
.site-mock--profile{background:linear-gradient(180deg,#f9f7ff,#ffffff)}
.site-mock--profile .site-mock__hero{
  color:#1f1b3a;
  background:
    radial-gradient(260px 120px at 85% 0%, rgba(139,92,246,.18), transparent 70%),
    linear-gradient(135deg,#ede9fe,#ffffff 55%, #f5f3ff);
}
.site-mock--profile .site-mock__hero::after{
  opacity:.7;
  background:
    linear-gradient(90deg, rgba(139,92,246,.12), rgba(139,92,246,0) 26%),
    repeating-linear-gradient(0deg, rgba(139,92,246,.05) 0 1px, transparent 1px 16px);
}
.site-mock--profile .site-mock__badge{background:rgba(139,92,246,.1); color:#5b21b6; border-color:rgba(139,92,246,.18)}
.site-mock--profile .site-mock__hero p{color:#5b647a; opacity:1}
.site-mock--profile .site-mock__grid{grid-template-columns:1fr 1fr; gap:10px}
.site-mock--profile .mock-chip{background:#fff; border-color:#ede9fe; color:#4c1d95; box-shadow:0 8px 16px rgba(139,92,246,.08)}
.site-mock--profile .mock-chip:nth-child(1){grid-column:span 2; background:linear-gradient(180deg,#faf5ff,#fff)}
.site-mock--profile .site-mock__rows div{background:linear-gradient(90deg,#ddd6fe,#f3e8ff)}

/* Perfume store */
.site-mock--perfume{background:linear-gradient(180deg,#fff7fb,#fff)}
.site-mock--perfume .site-mock__hero{
  background:
    radial-gradient(280px 140px at 15% 10%, rgba(251,207,232,.34), transparent 70%),
    linear-gradient(150deg,#831843,#be185d 45%, #f472b6);
}
.site-mock--perfume .site-mock__hero::after{
  background:
    radial-gradient(12px 12px at 20% 40%, rgba(255,255,255,.22), transparent 65%),
    radial-gradient(8px 8px at 38% 28%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(10px 10px at 72% 36%, rgba(255,255,255,.16), transparent 70%);
}
.site-mock--perfume .site-mock__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.site-mock--perfume .mock-chip{
  height:62px; display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(180deg,#fff,#fff5fa); border-color:rgba(236,72,153,.12);
  color:#9d174d; font-size:11px;
}
.site-mock--perfume .mock-chip:nth-child(2){grid-column:span 2; background:linear-gradient(180deg,#fdf2f8,#fff)}
.site-mock--perfume .mock-chip:nth-child(4){border-radius:12px 22px 12px 22px}
.site-mock--perfume .site-mock__rows div{background:linear-gradient(90deg,#fbcfe8,#fdf2f8)}

/* Oils store */
.site-mock--oils{background:linear-gradient(180deg,#05120b,#0d1b14)}
.site-mock--oils .site-mock__hero{
  background:
    linear-gradient(115deg, rgba(34,197,94,.15) 0 35%, transparent 35% 100%),
    linear-gradient(150deg,#052e16,#14532d 50%, #22c55e);
}
.site-mock--oils .site-mock__hero::after{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px);
}
.site-mock--oils .site-mock__grid{grid-template-columns:1fr 1fr; gap:8px}
.site-mock--oils .mock-chip{
  background:rgba(6,18,12,.8); color:#dcfce7; border-color:rgba(34,197,94,.22);
  border-radius:10px; box-shadow:none;
}
.site-mock--oils .mock-chip:nth-child(1), .site-mock--oils .mock-chip:nth-child(3){background:linear-gradient(135deg,rgba(34,197,94,.18), rgba(6,18,12,.9))}
.site-mock--oils .site-mock__rows div{background:linear-gradient(90deg,#064e3b,#166534,#22c55e); opacity:.5}

/* Showroom */
.site-mock--showroom .site-mock__hero{
  background:
    radial-gradient(260px 120px at 70% 0%, rgba(245,158,11,.22), transparent 65%),
    linear-gradient(155deg,#1f2937,#0f172a 55%, #78350f);
}
.site-mock--showroom .site-mock__hero::after{
  background:
    linear-gradient(0deg, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(90deg, rgba(245,158,11,.12) 0 28%, transparent 28% 100%);
}
.site-mock--showroom .site-mock__badge{background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.25)}
.site-mock--showroom .site-mock__grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.site-mock--showroom .mock-chip{border-radius:10px; background:#fff; font-size:11px; min-height:44px; display:grid; place-items:center; text-align:center}
.site-mock--showroom .mock-chip:nth-child(1){grid-column:span 3; background:linear-gradient(180deg,#fffbeb,#fff)}
.site-mock--showroom .mock-chip:nth-child(4){grid-column:span 2}
.site-mock--showroom .site-mock__rows div{background:linear-gradient(90deg,#fde68a,#fef3c7)}

/* Landing page */
.site-mock--landing .site-mock__hero{
  background:
    radial-gradient(220px 100px at 85% 12%, rgba(254,226,226,.16), transparent 65%),
    linear-gradient(150deg,#7f1d1d,#b91c1c 45%, #ef4444);
}
.site-mock--landing .site-mock__hero::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 0 34%, transparent 34% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
}
.site-mock--landing .site-mock__grid{grid-template-columns:1.1fr .9fr; grid-auto-rows:44px; gap:8px}
.site-mock--landing .mock-chip{border-radius:12px; background:#fff; font-size:11px; box-shadow:0 6px 14px rgba(127,29,29,.08)}
.site-mock--landing .mock-chip:nth-child(1){grid-row:span 2; display:grid; align-content:center; background:linear-gradient(180deg,#fff,#fef2f2)}
.site-mock--landing .mock-chip:nth-child(2){background:linear-gradient(180deg,#fee2e2,#fff)}
.site-mock--landing .site-mock__rows div{background:linear-gradient(90deg,#fecaca,#fee2e2)}

/* ===== Website catalog cards with more diverse styles ===== */
.website-card{position:relative; overflow:hidden}
.website-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent,#0ea5e9), color-mix(in srgb, var(--accent,#0ea5e9) 30%, white));
  opacity:.85;
}
.website-card__preview{position:relative}
.website-card__preview::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background:radial-gradient(circle at 85% 15%, var(--accent,#0ea5e9), transparent 45%)}
.website-card__head{position:relative}
.website-card__kicker{letter-spacing:.2px}

.website-card--cars{background:linear-gradient(180deg,#fff,#fbfdff)}
.website-card--cars .website-card__preview{background:linear-gradient(180deg,#f8fbff,#eef4ff)}
.website-card__preview--cars .wc-nav{width:58%; background:linear-gradient(90deg,#c7d2fe,#e2e8f0)}
.website-card__preview--cars .wc-hero{height:78px; background:linear-gradient(135deg,#0f172a,#1d4ed8,#f97316)}
.website-card__preview--cars .wc-grid{grid-template-columns:repeat(3,1fr)}
.website-card__preview--cars .wc-grid span:nth-child(1){grid-column:span 2; background:#fff7ed}
.website-card__preview--cars .wc-grid span:nth-child(2){background:#eff6ff}
.website-card__preview--cars .wc-grid span:nth-child(4){grid-column:span 2; height:32px}
.website-card__preview--cars .wc-row{background:linear-gradient(90deg,#cbd5e1,#e2e8f0)}

.website-card--tint{background:linear-gradient(180deg,#fbfeff,#f5fbff)}
.website-card--tint .website-card__dot{box-shadow:0 0 0 5px rgba(0,194,255,.12)}
.website-card__preview--tint{background:linear-gradient(180deg,#07101c,#0f172a); border-color:rgba(2,6,23,.2)}
.website-card__preview--tint .wc-nav{width:46%; background:rgba(148,163,184,.35)}
.website-card__preview--tint .wc-hero{height:82px; background:linear-gradient(135deg,#020617,#0ea5e9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.website-card__preview--tint .wc-grid{grid-template-columns:1.2fr .8fr}
.website-card__preview--tint .wc-grid span{background:rgba(255,255,255,.05); border-color:rgba(14,165,233,.25)}
.website-card__preview--tint .wc-grid span:nth-child(1){grid-row:span 2}
.website-card__preview--tint .wc-row{background:linear-gradient(90deg,rgba(14,165,233,.45), rgba(148,163,184,.25))}

.website-card--profile{background:linear-gradient(180deg,#ffffff,#fcfaff)}
.website-card__preview--profile{background:linear-gradient(180deg,#fff,#faf7ff)}
.website-card__preview--profile .wc-nav{width:38%; background:linear-gradient(90deg,#c4b5fd,#e9d5ff)}
.website-card__preview--profile .wc-hero{height:70px; background:linear-gradient(135deg,#ede9fe,#faf5ff); border:1px solid #e9d5ff}
.website-card__preview--profile .wc-grid{grid-template-columns:repeat(2,1fr)}
.website-card__preview--profile .wc-grid span{background:#fff; border-color:#ede9fe}
.website-card__preview--profile .wc-grid span:nth-child(1){grid-column:span 2; height:28px; background:#faf5ff}
.website-card__preview--profile .wc-row{background:linear-gradient(90deg,#ddd6fe,#f3e8ff)}

.website-card--perfume{background:linear-gradient(180deg,#fff,#fff7fb)}
.website-card__preview--perfume{background:linear-gradient(180deg,#fff8fc,#fff);}
.website-card__preview--perfume .wc-nav{width:52%; background:linear-gradient(90deg,#f9a8d4,#fbcfe8)}
.website-card__preview--perfume .wc-hero{height:78px; background:linear-gradient(135deg,#831843,#be185d,#f472b6)}
.website-card__preview--perfume .wc-grid{grid-template-columns:repeat(4,1fr); gap:6px}
.website-card__preview--perfume .wc-grid span{height:44px; border-radius:14px; background:linear-gradient(180deg,#fff,#fdf2f8); border-color:#fbcfe8}
.website-card__preview--perfume .wc-grid span:nth-child(2){grid-column:span 2}
.website-card__preview--perfume .wc-row{background:linear-gradient(90deg,#fbcfe8,#fdf2f8)}

.website-card--oils{background:linear-gradient(180deg,#fbfffc,#f7fff8)}
.website-card__preview--oils{background:linear-gradient(180deg,#07140d,#0f1f16); border-color:rgba(34,197,94,.15)}
.website-card__preview--oils .wc-nav{width:60%; background:rgba(148,163,184,.28)}
.website-card__preview--oils .wc-hero{height:74px; background:linear-gradient(135deg,#052e16,#166534,#22c55e)}
.website-card__preview--oils .wc-grid{grid-template-columns:repeat(2,1fr)}
.website-card__preview--oils .wc-grid span{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.2)}
.website-card__preview--oils .wc-grid span:nth-child(3){background:rgba(255,255,255,.06)}
.website-card__preview--oils .wc-row{background:linear-gradient(90deg,rgba(34,197,94,.45), rgba(148,163,184,.2))}

.website-card--showroom{background:linear-gradient(180deg,#fff,#fffbf2)}
.website-card__preview--showroom{background:linear-gradient(180deg,#fffdf8,#fff)}
.website-card__preview--showroom .wc-nav{width:44%; background:linear-gradient(90deg,#fcd34d,#fde68a)}
.website-card__preview--showroom .wc-hero{height:84px; background:linear-gradient(135deg,#111827,#1f2937,#6d28d9)}
.website-card__preview--showroom .wc-grid{grid-template-columns:repeat(3,1fr)}
.website-card__preview--showroom .wc-grid span{background:#fff; border-color:#fde68a}
.website-card__preview--showroom .wc-grid span:nth-child(1){grid-column:span 3; height:28px; background:#fffbeb}
.website-card__preview--showroom .wc-row{background:linear-gradient(90deg,#fde68a,#fef3c7)}

.website-card--landing{background:linear-gradient(180deg,#fff,#fff7f7)}
.website-card__preview--landing{background:linear-gradient(180deg,#fff,#fff8f8)}
.website-card__preview--landing .wc-nav{width:32%; background:linear-gradient(90deg,#fca5a5,#fecaca)}
.website-card__preview--landing .wc-hero{height:82px; background:linear-gradient(135deg,#7f1d1d,#dc2626,#ef4444)}
.website-card__preview--landing .wc-grid{grid-template-columns:1.2fr .8fr}
.website-card__preview--landing .wc-grid span{background:#fff; border-color:#fecaca}
.website-card__preview--landing .wc-grid span:nth-child(1){grid-row:span 2; background:#fef2f2}
.website-card__preview--landing .wc-row{background:linear-gradient(90deg,#fecaca,#fee2e2)}

/* Small polish for card footer arrow */
.website-card__footer span:last-child{font-size:18px; transition:transform .2s ease}
.website-card:hover .website-card__footer span:last-child{transform:translateX(-4px)}

@media (max-width: 640px){
  .social-rail__btn svg{width:18px;height:18px}
  .site-mock--cars .site-mock__grid,
  .site-mock--perfume .site-mock__grid,
  .site-mock--showroom .site-mock__grid{grid-template-columns:repeat(2,1fr)}
  .site-mock--cars .mock-chip:nth-child(1),
  .site-mock--cars .mock-chip:nth-child(4),
  .site-mock--showroom .mock-chip:nth-child(1){grid-column:span 2}
}

/* ===== Demo site pages: stronger per-niche visual differentiation ===== */
.demo-page[class*="demo-page--"] .demo-hero__visual{position:relative; overflow:hidden}
.demo-page[class*="demo-page--"] .demo-hero__visual::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45}
.demo-page[class*="demo-page--"] .dv-grid{position:relative; z-index:1}

.demo-page--cars .demo-hero__content{
  background:linear-gradient(140deg,#0f172a,#1d4ed8 58%, #f97316);
}
.demo-page--cars .demo-hero__visual{
  background:linear-gradient(160deg,#f8fbff,#eef4ff);
}
.demo-page--cars .demo-hero__visual::after{
  background:repeating-linear-gradient(90deg, rgba(59,130,246,.08) 0 2px, transparent 2px 18px);
}
.demo-page--cars .dv-grid{grid-template-columns:repeat(3,1fr)}
.demo-page--cars .dv-grid span:nth-child(1){grid-column:span 2}
.demo-page--cars .demo-banner{border-color:rgba(249,115,22,.2)}

.demo-page--tint .demo-shell{background:linear-gradient(180deg,#fbfdff,#f7fbff)}
.demo-page--tint .demo-hero__content{background:linear-gradient(145deg,#020617,#0ea5e9)}
.demo-page--tint .demo-hero__visual{background:linear-gradient(160deg,#08101d,#0b1324)}
.demo-page--tint .demo-hero__visual::after{
  background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.12) 18%, transparent 26%, transparent 48%, rgba(0,194,255,.18) 56%, transparent 64%);
}
.demo-page--tint .dv-grid span{background:rgba(255,255,255,.04); border-color:rgba(0,194,255,.16)}
.demo-page--tint .demo-product__media{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

.demo-page--profile .demo-shell{background:linear-gradient(180deg,#fff,#fcfaff)}
.demo-page--profile .demo-header{background:linear-gradient(180deg,#fff,#faf7ff)}
.demo-page--profile .demo-nav a{background:#fff; border-color:#ede9fe}
.demo-page--profile .demo-nav__cta{background:#7c3aed}
.demo-page--profile .demo-hero__content{background:linear-gradient(145deg,#4c1d95,#7c3aed,#a78bfa)}
.demo-page--profile .demo-hero__visual{background:linear-gradient(160deg,#fff,#faf7ff)}
.demo-page--profile .demo-hero__visual::after{background:repeating-linear-gradient(0deg, rgba(139,92,246,.06) 0 1px, transparent 1px 16px)}
.demo-page--profile .demo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}

.demo-page--perfume .demo-shell{background:linear-gradient(180deg,#fff,#fff7fb)}
.demo-page--perfume .demo-hero__content{background:linear-gradient(145deg,#831843,#be185d,#f472b6)}
.demo-page--perfume .demo-hero__visual{background:linear-gradient(160deg,#fff6fb,#fff)}
.demo-page--perfume .demo-hero__visual::after{
  background:radial-gradient(12px 12px at 20% 35%, rgba(244,114,182,.12), transparent 70%), radial-gradient(10px 10px at 70% 25%, rgba(190,24,93,.12), transparent 70%);
}
.demo-page--perfume .dv-grid{grid-template-columns:repeat(4,1fr)}
.demo-page--perfume .dv-grid span{border-radius:16px; height:58px}
.demo-page--perfume .demo-product__media{border-radius:22px}

.demo-page--oils .demo-shell{background:linear-gradient(180deg,#f8fff9,#f5fff7)}
.demo-page--oils .demo-hero__content{background:linear-gradient(145deg,#052e16,#166534,#22c55e)}
.demo-page--oils .demo-hero__visual{background:linear-gradient(160deg,#07140d,#0f1f16)}
.demo-page--oils .demo-hero__visual::after{background:repeating-linear-gradient(135deg, rgba(34,197,94,.12) 0 2px, transparent 2px 12px)}
.demo-page--oils .dv-grid span{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.18)}
.demo-page--oils .demo-banner{background:linear-gradient(135deg,#ecfdf5,#fff)}

.demo-page--showroom .demo-shell{background:linear-gradient(180deg,#fffdfa,#fffbf2)}
.demo-page--showroom .demo-hero__content{background:linear-gradient(145deg,#111827,#1f2937,#6d28d9)}
.demo-page--showroom .demo-hero__visual{background:linear-gradient(160deg,#fffef8,#fff)}
.demo-page--showroom .demo-hero__visual::after{background:linear-gradient(0deg, rgba(245,158,11,.08), transparent 65%)}
.demo-page--showroom .dv-grid{grid-template-columns:repeat(3,1fr)}
.demo-page--showroom .dv-grid span:nth-child(1){grid-column:span 3; height:52px}
.demo-page--showroom .demo-product button{background:#fffbeb}

.demo-page--landing .demo-shell{background:linear-gradient(180deg,#fff,#fff8f8)}
.demo-page--landing .demo-hero__content{background:linear-gradient(145deg,#7f1d1d,#dc2626,#ef4444)}
.demo-page--landing .demo-hero__visual{background:linear-gradient(160deg,#fff,#fff5f5)}
.demo-page--landing .demo-hero__visual::after{
  background:linear-gradient(90deg, rgba(239,68,68,.08) 0 36%, transparent 36% 100%), repeating-linear-gradient(0deg, rgba(239,68,68,.05) 0 1px, transparent 1px 12px);
}
.demo-page--landing .dv-grid{grid-template-columns:1.2fr .8fr}
.demo-page--landing .dv-grid span:nth-child(1){grid-row:span 2}
.demo-page--landing .demo-banner{border-color:rgba(239,68,68,.18)}

@media (max-width: 860px){
  .demo-page--profile .demo-tiles{grid-template-columns:1fr}
  .demo-page--perfume .dv-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== v7 fixes: programs colors + image portfolio galleries ===== */
.page-programs .catalog-grid .system-card{
  color: var(--text);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 26px rgba(2,6,23,.08);
  backdrop-filter:none;
}
.page-programs .catalog-grid .system-card:hover{
  box-shadow: 0 18px 30px rgba(2,6,23,.12);
  border-color: rgba(37,99,235,.18);
}
.page-programs .catalog-grid .system-card__icon{
  background: linear-gradient(135deg,#eef2ff,#f8fafc);
  border:1px solid rgba(99,102,241,.10);
}
.page-programs .catalog-grid .system-card h3{color:#0f172a}
.page-programs .catalog-grid .system-card p{color:#475569}
.page-programs .catalog-grid .system-card__footer{color:#1e3a8a}
.page-programs .catalog-grid .system-card__badge{background:rgba(209,173,58,.12); border-color:rgba(209,173,58,.22)}
.page-programs .catalog-grid .system-card__badge--soft{
  background:rgba(30,64,175,.06);
  color:#1e3a8a;
  border-color:rgba(30,64,175,.12);
}

.section--websites-gallery{padding-top:32px}
.portfolio-groups{display:grid; gap:18px}
.portfolio-group{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid rgba(15,23,42,.06);
  border-radius:24px;
  padding:14px;
  box-shadow:0 16px 28px rgba(2,6,23,.06);
  position:relative;
  overflow:hidden;
}
.portfolio-group::before{
  content:""; position:absolute; inset:auto -40px -40px auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at center, var(--group-accent), transparent 70%);
  opacity:.08; pointer-events:none;
}
.portfolio-group__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
  position:relative; z-index:1;
}
.portfolio-group__title{margin:0; font-size:20px; font-weight:900; color:#0f172a}
.portfolio-group__domain{
  color:var(--group-accent); text-decoration:none; font-weight:800; font-size:13px;
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:999px; padding:6px 10px;
}
.showcase-slider--portfolio{
  border-radius:20px; border:1px solid rgba(15,23,42,.06); background:#fff; box-shadow:none;
}
.showcase-slider--portfolio .showcase-slider__viewport{background:#0b1220}
.showcase-slider--portfolio .site-slide{height:430px}
.showcase-slider--thumbs .site-slide{height:380px}
.site-slide--portfolio{display:block; min-width:100%; position:relative; color:#fff; text-decoration:none; overflow:hidden; background:#0b1220}
.site-slide--portfolio img{width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.01); transition:transform 1.2s ease, filter .45s ease; filter:saturate(1.04)}
.site-slide--portfolio:hover img{transform:scale(1.035); filter:saturate(1.08)}
.site-slide--portfolio::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,.06) 0%, rgba(2,6,23,.08) 44%, rgba(2,6,23,.54) 100%); pointer-events:none}
.portfolio-slide-overlay{position:absolute; inset:auto 16px 16px 16px; z-index:3; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); border-radius:14px; padding:10px 12px}
.portfolio-slide-overlay__title{font-weight:900; font-size:16px; color:#fff}
.portfolio-slide-overlay__meta{font-size:12px; color:rgba(255,255,255,.9); margin-top:2px}
.page-websites .showcase-slider--portfolio .showcase-slider__controls{padding:10px 12px 12px; background:linear-gradient(180deg,#fff,#f8fafc)}
.page-websites .showcase-slider--portfolio .slider-btn{background:#fff; border:1px solid rgba(15,23,42,.08); color:#1e293b; box-shadow:none}
@media (max-width: 980px){
  .portfolio-group{padding:10px}
  .portfolio-group__head{align-items:flex-start; flex-direction:column; gap:8px}
  .portfolio-group__title{font-size:18px}
  .showcase-slider--portfolio .site-slide{height:300px}
  .showcase-slider--thumbs .site-slide{height:260px}
  .portfolio-slide-overlay{inset:auto 10px 10px 10px; padding:8px 10px}
  .portfolio-slide-overlay__title{font-size:14px}
}


/* ===== v10 mobile polish fixes (cards/header/social) ===== */
/* 1) No tilted cards anywhere */
.reveal[data-anim="tilt"],
.reveal[data-anim="rise-rotate"]{
  transform: translateY(16px) scale(.985) !important;
}
.reveal.is-visible[data-anim="tilt"],
.reveal.is-visible[data-anim="rise-rotate"]{
  transform:none !important;
}

/* 2) Make stacked cards straight, equal, and spaced */
.stack{
  display:grid;
  gap:14px;
}
.stack .card,
.grid .card{
  min-height:92px;
  align-items:center;
}
.card{
  border-radius:20px;
}
.card > div:last-child{flex:1; min-width:0}
.card__title{line-height:1.2}
.card__sub{line-height:1.45}
.pill__icon{
  width:40px;
  height:40px;
  font-size:18px;
  background:linear-gradient(180deg, rgba(209,173,58,.17), rgba(209,173,58,.10));
  box-shadow: inset 0 0 0 1px rgba(209,173,58,.18);
}

/* 3) Header color same family as hero (remove white strip look) */
.header{
  background: linear-gradient(180deg, rgba(5,9,20,.96), rgba(7,12,24,.92)) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}
.brand__name,
.nav__link,
.nav-dropdown__menu a{color:#e5edf7 !important}
.brand__sub{color:rgba(229,237,247,.78) !important; opacity:1 !important}
.nav__link:hover{background:rgba(255,255,255,.06) !important}
.nav__link.is-active{color:#fff !important}
.nav__link.is-active::after{background:var(--gold) !important}
.icon-btn{color:#e5edf7}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.nav--mobile{background:rgba(7,12,24,.98); border-top:1px solid rgba(255,255,255,.06); border-radius:0 0 16px 16px; padding:8px}
.nav--mobile a{color:#e5edf7}
.nav--mobile a:hover{background:rgba(255,255,255,.06)}

/* 4) Better social placement: desktop side center, mobile bottom floating row */
.social-rail{
  top:50% !important;
  right:14px !important;
  left:auto !important;
  transform:translateY(-50%);
  z-index:1100;
}
@media (max-width:980px){
  .social-rail{
    top:auto !important;
    right:50% !important;
    left:auto !important;
    bottom:86px;
    transform:translateX(50%);
    flex-direction:row;
    gap:10px;
    padding:8px;
    border-radius:18px;
    background:rgba(4,7,15,.34);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .social-rail__btn{
    width:42px;
    height:42px;
    border-radius:14px;
  }
}
@media (max-width:480px){
  .social-rail{bottom:92px; gap:8px; padding:7px}
  .social-rail__btn{width:40px;height:40px;border-radius:13px}
}

/* 5) WhatsApp icon clarity */
.social-rail__btn--wa .icon-stroke path:first-child{fill:none; stroke:currentColor;}
.social-rail__btn--wa .icon-stroke path:last-child{fill:currentColor; stroke:none;}

/* 6) Keep contact/cards spacing on mobile */
@media (max-width:640px){
  .grid{gap:14px}
  .contactcards,
  .cards-grid,
  .systems-grid,
  .overview-grid{gap:14px !important}
}

/* === v15 mobile social dock + contact spacing fixes === */
@media (max-width: 768px){
  .social-rail{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    transform: translateX(-50%) !important;
    z-index: 1200 !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    background: rgba(22,24,30,.72) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .social-rail a{
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
  }
  .social-rail a img, .social-rail a svg{ width: 24px !important; height: 24px !important; }
  body{ padding-bottom: 96px; }
}

.contact-grid, .contact-cards{ gap: 16px !important; }
.contact-card{
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.contact-card__icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.28);
  font-size: 22px;
  line-height: 1;
}
#contact .section__grid,
#contact .grid,
#contact .contact-grid{ margin-bottom: 18px; }
#contact .contact-card + .contact-card{ margin-top: 0 !important; }

/* dropdown visibility on white menu */
.nav-dropdown__menu a,
.nav__menu .submenu a,
.menu-dropdown a,
.dropdown-menu a{
  color: #111 !important;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav__menu .submenu a:hover,
.menu-dropdown a:hover,
.dropdown-menu a:hover{
  color: #000 !important;
  background: #f2f4f8 !important;
}

/* demo websites enhancement */
.demo-page .demo-hero__visual,
.demo-page .demo-banner,
.demo-page .demo-product__media{
  overflow: hidden;
  position: relative;
}
.demo-page .demo-hero__visual::before,
.demo-page .demo-banner::before,
.demo-page .demo-product__media::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform .8s ease;
}
.demo-page .demo-hero__visual::after,
.demo-page .demo-banner::after,
.demo-page .demo-product__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,16,.08), rgba(5,8,16,.42));
}
.demo-page .demo-hero__visual > *,
.demo-page .demo-banner > *,
.demo-page .demo-product__media > *{ position: relative; z-index: 1; }
.demo-page .demo-product:hover .demo-product__media::before,
.demo-page .demo-hero:hover .demo-hero__visual::before{ transform: scale(1.08); }
.demo-page .demo-card,
.demo-page .demo-product,
.demo-page .demo-banner,
.demo-page .demo-gallery__item{
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
  animation: demoFadeUp .7s ease both;
}
.demo-page .demo-card:hover,
.demo-page .demo-product:hover,
.demo-page .demo-banner:hover,
.demo-page .demo-gallery__item:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 35px rgba(0,0,0,.12);
}
.demo-page .demo-product:nth-child(2){ animation-delay: .08s; }
.demo-page .demo-product:nth-child(3){ animation-delay: .16s; }
.demo-page .demo-product:nth-child(4){ animation-delay: .24s; }
@keyframes demoFadeUp{ from{opacity:0; transform: translateY(16px)} to{opacity:1; transform:none} }

/* Cars demo */
.demo-page--cars .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(1) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(2) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1549399542-7e3f8b79c341?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(3) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1617531653332-bd46c24f2068?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(4) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1583121274602-3e2820c69888?q=80&w=1200&auto=format&fit=crop'); }

/* Perfume demo */
.demo-page--perfumes .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1594035910387-fea47794261f?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(1) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(2) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1615634262417-d9bff2da1a97?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(3) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1563170351-be82bc888aa4?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(4) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1588405748880-12d1d2a59d75?q=80&w=1200&auto=format&fit=crop'); }

/* Generic demo images for the rest */
.demo-page--fashion .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1445205170230-053b83016050?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--fashion .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--coffee .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--coffee .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--restaurant .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--restaurant .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--realestate .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--realestate .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--clinic .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--clinic .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1584515933487-779824d29309?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--gym .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--gym .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--beauty .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--beauty .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--education .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--education .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--electronics .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--electronics .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--travel .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--travel .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1467269204594-9661b134dd2b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--events .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--events .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--interior .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--interior .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1493666438817-866a91353ca9?q=80&w=1400&auto=format&fit=crop'); }
/* contact exact class overrides */
#contact .grid.grid--4{ gap:16px !important; margin-bottom: 12px !important; }
#contact .contactcard{ min-height:132px !important; height:auto !important; }
#contact .contactcard__icon{ width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.25); }
#contact + .section, #contact .section__head + .grid{ margin-top: 0; }
.brands-cloud{ gap: 14px !important; }
.brand-tile{ min-height: 84px; }


/* === v20 cleanup: remove websites tab, mobile social rail under banner, equal card heights === */
@media (max-width: 768px){
  .hero-mini-stats{grid-template-columns:1fr;gap:12px;margin-top:14px;}
  .hero-mini-stats .mini-stat{min-height:88px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;}
  .hero-mini-stats .mini-stat h4{margin:0 0 6px;line-height:1.15;}
  .hero-mini-stats .mini-stat p{margin:0;line-height:1.25;}

  /* put social icons as a local block under banner on mobile (not sticky while scrolling) */
  .social-rail{position:static !important;inset:auto !important;transform:none !important;display:flex;justify-content:center;align-items:center;gap:10px;
    margin:14px auto 8px !important;padding:10px 14px;width:max-content;max-width:calc(100% - 28px);border-radius:24px;
    background:rgba(18,24,39,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 22px rgba(0,0,0,.18);z-index:3;}
  .social-rail a{width:42px;height:42px;border-radius:14px;font-size:20px;display:grid;place-items:center;}
}

/* desktop/social general sizing polish */
.social-rail a{transition:transform .18s ease, box-shadow .18s ease;}
.social-rail a:hover{transform:translateY(-2px);}

/* if any hidden empty sites tab controls remain */
#sites-tab,[data-target="sites-tab"]{display:none !important;}

/* v21 fixes */
.hero-title{line-height:1.16;letter-spacing:0}
.hero-badge__sub:empty{display:none}
@media (max-width: 768px){
  .mini-stat{min-height:120px !important;display:flex;flex-direction:column;justify-content:center;}
  .mini-stat:nth-child(2){min-height:120px !important;}
  .hero + .social-rail{position:static !important;margin:-18px auto 14px;width:fit-content;top:auto;left:auto;right:auto;bottom:auto;z-index:5;transform:none;}
  .hero + .social-rail .social-rail__inner{padding:8px 10px;gap:8px;border-radius:22px;}
  .hero + .social-rail .social-link{width:46px;height:46px;border-radius:14px;}
}


/* === v22 tweaks === */
.hero-chip{display:none !important;}
.hero__content{position:relative;z-index:4;}
.hero__title{line-height:1.16;letter-spacing:0;}
.hero__title .line{display:block;position:relative;z-index:2;}
.hero__overlay--network{opacity:.28;}
.hero__stars{opacity:.55;}
.hero__title::before,.hero__title::after{display:none !important;}

.services__card{min-height:160px;}
@media (max-width: 768px){
  .services__cards .services__card{min-height:142px;}
  .services__card h3{font-size:1.15rem;}
  .social-rail{
    position:relative !important;
    inset:auto !important;
    top:auto !important; right:auto !important; left:auto !important;
    transform:none !important;
    width:max-content;
    margin:10px auto 18px;
    padding:10px 12px;
    border-radius:22px;
    background:rgba(22,28,42,.86);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:3;
  }
  .social-rail__list{gap:10px;}
  .social-rail__btn{width:46px;height:46px;border-radius:14px;}
  .social-rail__btn img,.social-rail__btn svg{width:22px;height:22px;}
}

.design-lightbox{position:fixed;inset:0;background:rgba(5,10,20,.9);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.design-lightbox.is-open{display:flex;}
.design-lightbox__stage{max-width:min(92vw,1100px);max-height:84vh;display:flex;align-items:center;justify-content:center;}
.design-lightbox__stage img{max-width:100%;max-height:84vh;border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45);background:#fff;object-fit:contain;}
.design-lightbox__close,.design-lightbox__nav{position:absolute;border:none;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);cursor:pointer;}
.design-lightbox__close{top:18px;right:18px;width:44px;height:44px;border-radius:12px;font-size:20px;}
.design-lightbox__nav{top:50%;transform:translateY(-50%);width:46px;height:56px;border-radius:14px;font-size:36px;line-height:1;}
.design-lightbox__nav--prev{right:calc(50% + min(46vw,560px));margin-right:10px;}
.design-lightbox__nav--next{left:calc(50% + min(46vw,560px));margin-left:10px;}
@media (max-width:768px){
  .design-lightbox__nav--prev{right:10px;}
  .design-lightbox__nav--next{left:10px;}
  .design-lightbox__nav{width:40px;height:48px;font-size:28px;border-radius:12px;}
  .design-lightbox__close{top:10px;right:10px;}
}

@media (max-width: 768px){
  .hero-mini-stats{grid-auto-rows:1fr;}
  .hero-mini-stats .mini-stat{min-height:132px;height:100%;display:flex;flex-direction:column;justify-content:center;}
  .hero-mini-stats .mini-stat h3{line-height:1.2;}
  .hero-title .accent, .hero-title, .hero-subtitle{position:relative;z-index:3;}
  .hero-bg-dots, .hero-particle, .hero-chip::before, .hero-chip::after{display:none !important;}
}

/* v25 social icons smaller + circle style */
.social-rail__btn{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  padding:0 !important;
}
.social-rail__btn img,
.social-rail__btn svg{
  width:18px !important;
  height:18px !important;
}
@media (max-width: 840px){
  .social-rail{gap:6px !important;}
  .social-rail__btn{
    width:34px !important;
    height:34px !important;
    border-radius:999px !important;
  }
  .social-rail__btn img,
  .social-rail__btn svg{
    width:15px !important;
    height:15px !important;
  }
}

/* ===== SEO content blocks ===== */
.faq-list{display:grid;gap:12px}
.faq-item{background:rgba(255,255,255,.92);border:1px solid rgba(43,24,69,.08);border-radius:16px;padding:0 14px;box-shadow:0 8px 20px rgba(17,24,39,.05)}
.faq-item summary{cursor:pointer;list-style:none;font-weight:800;padding:14px 4px;color:#2b1845}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 4px 14px;margin:0;line-height:1.9}
.section--soft{background:linear-gradient(180deg, rgba(92,63,140,.03), rgba(92,63,140,.06))}
.breadcrumbs{font-size:13px;color:#64748b;margin:8px 0 12px}
.breadcrumbs a{color:#5b42f3;text-decoration:none}
.article-content{max-width:900px;margin-inline:auto}
.article-content h2,.article-content h3{margin-top:22px;color:#2b1845}
.article-content ul{padding-inline-start:22px;line-height:1.9}
.article-content .article-box{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:16px;padding:14px 16px;box-shadow:0 8px 24px rgba(2,6,23,.04);margin-bottom:14px}
.article-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}


.table th,.table td{border:1px solid rgba(255,255,255,.1);padding:10px 12px;text-align:right;vertical-align:top}.table thead th{background:rgba(123,77,255,.12)}
.article-content h3{margin:14px 0 8px;font-size:1.02rem}.article-content ol{padding-right:20px}.article-content ol li{margin:6px 0}




/* ===== Blog SEO expansion v7 ===== */
.toc ol{margin:0;padding-right:18px;line-height:1.95}
.toc a{text-decoration:none;color:#4338ca}
.toc a:hover{text-decoration:underline}
.article-meta__row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(91,66,243,.08);border:1px solid rgba(91,66,243,.18);color:#2b1845;text-decoration:none;font-weight:700}
.chip a{text-decoration:none}
.chip--soft{background:rgba(43,24,69,.04);border-color:rgba(43,24,69,.08)}
.article-cta-inline{display:flex;flex-wrap:wrap;gap:10px}
.article-floating-cta{position:fixed;left:16px;bottom:16px;z-index:45}
.article-floating-cta a{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.article-list{padding-right:20px;line-height:1.9}
.article-list a{text-decoration:none;color:#4338ca}
.cta-fixed-block{border:1px solid rgba(91,66,243,.18);background:linear-gradient(180deg, rgba(91,66,243,.04), rgba(91,66,243,.02))}
@media (max-width:640px){
  .article-floating-cta{left:12px;right:12px;bottom:10px}
  .article-floating-cta a{width:100%;justify-content:center}
}
/* ===== v12 safe article/blog styles + text readability (no global layout hacks) ===== */
.article-content p{margin:0 0 12px; line-height:1.9;}
.article-content h2{margin:24px 0 10px;}
.article-content h3{margin:16px 0 8px;}
.article-content ul li,.article-content ol li{margin:4px 0;}
p, li{word-break:normal; overflow-wrap:break-word;}
.reveal{will-change:transform,opacity;}


/* ===== v13.1 hotfix: banner typography + purple bubbles text + orange accents ===== */
:root{
  --accent-orange:#f97316;
}
/* Purple bubbles/chips: text must stay white */
.hero-chip, .hero__badge, .system-card__badge, .chip, .tag{
  color:#fff;
}
.hero-chip a, .hero__badge a, .chip a, .tag a{color:inherit;}
/* Orange accents (dots / stars / small icons) */
.hero-chip::before,
.hero-node::before,
.pill__icon,
.hero-badge__icon,
.hero__badge .pill__icon{
  color:#fff;
}
.hero-chip::before,
.hero-node::before{
  background:var(--accent-orange) !important;
  box-shadow:0 0 0 5px rgba(249,115,22,.16);
}
.pill__icon{
  background:rgba(249,115,22,.16) !important;
  color:var(--accent-orange) !important;
}
/* Top hero banner typography fix */
.hero__content{padding-inline:18px;}
.hero__title{
  font-size:clamp(26px,3.2vw,46px) !important;
  line-height:1.38 !important;
  letter-spacing:0 !important;
  max-width:min(920px,100%);
  margin-inline:auto;
  text-wrap:balance;
}
.hero__title .hero__line{display:block;}
.hero__title .hero__line + .hero__line{margin-top:.22em;}
.hero__subtitle{
  font-size:clamp(13px,1.25vw,17px) !important;
  line-height:1.95 !important;
  max-width:min(860px,100%);
}
@media (max-width: 980px){
  .hero__title{font-size:clamp(24px,5vw,36px) !important; line-height:1.42 !important;}
  .hero__subtitle{font-size:14px !important; line-height:1.9 !important;}
}
@media (max-width: 640px){
  .hero__content{padding-top:30px; padding-bottom:28px;}
  .hero__title{font-size:clamp(22px,6.2vw,30px) !important; line-height:1.46 !important;}
  .hero__title .hero__line + .hero__line{margin-top:.28em;}
  .hero__subtitle{font-size:13px !important; line-height:1.85 !important;}
}

/* ===== v13.2 quick fixes: hero CTA text + desktop nav wrapping ===== */
/* 1) Purple CTA/button text must be white (hero/services buttons) */
.btn--gold,
.btn--gold:link,
.btn--gold:visited,
.hero .btn--gold,
.hero-actions .btn--gold{
  color:#fff !important;
}
.btn--gold .btn__icon,
.hero .btn--gold .btn__icon{color:inherit !important}

/* 2) Desktop navbar: keep labels on one line and reduce crowding */
@media (min-width: 841px){
  .header__inner{gap:10px !important;}
  .nav--desktop{
    display:flex;
    align-items:center;
    gap:2px !important;
    min-width:0;
  }
  .nav--desktop .nav__link,
  .nav--desktop .nav-dropdown > .nav__link{
    white-space:nowrap !important;
    flex-shrink:0;
    font-size:12.5px !important;
    padding:9px 8px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
  }
  .brand{gap:8px !important;}
  .brand__logo{width:38px !important;height:38px !important;}
  .brand__name{font-size:16px !important;}
  .brand__sub{font-size:11px !important; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}

/* Slightly tighter hero title spacing between the two lines */
.hero__title .hero__line + .hero__line{margin-top:.16em !important;}

/* ===== Markivo UI (Custom Cards) ===== */
.mk-glass-stack{
  --mk-glass-gap: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--mk-glass-gap);
  margin: 18px auto 6px;
  padding: 6px 0;
}
.mk-glass{
  position:relative;
  width: 210px;
  height: 230px;
  border-radius: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 10px;
  margin: 0 -55px;
  transform: rotate(calc(var(--r, 0) * 1deg));
  transition: transform .45s ease, margin .45s ease, box-shadow .45s ease;
}
.mk-glass::before{
  content: attr(data-text);
  position:absolute;
  inset: auto 0 0 0;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .6px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.10);
}
.mk-glass__icon{
  width: 74px;
  height: 74px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  font-size: 34px;
  color: #fff;
}
.mk-glass__desc{
  padding: 0 16px 56px;
  text-align:center;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  line-height: 1.55;
}
.mk-glass-stack:hover .mk-glass{
  transform: rotate(0deg);
  margin: 0 12px;
  box-shadow: 0 26px 40px rgba(0,0,0,.35);
}
@media (max-width: 720px){
  .mk-glass-stack{flex-direction:column; gap:12px; padding: 0 6px;}
  .mk-glass{width:100%; max-width: 420px; margin: 0; transform:none;}
  .mk-glass-stack:hover .mk-glass{margin:0;}
}


/* Social box card (contact sidebar) */
.mk-social-card{
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 210px;
  border-radius: 26px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: rgba(100,100,111,.18) 0 12px 32px;
  transition: transform .45s ease;
}
.mk-social-card:hover{ transform: translateY(-4px); }
.mk-social-bg{
  position:absolute;
  inset:0;
  background-image: linear-gradient(43deg, #2b1845 0%, #6f3cc3 55%, #3d63ff 100%);
}
.mk-social-logo{
  position:absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all .6s ease;
  font-size: 1.2em;
  font-weight: 900;
  color:#fff;
  letter-spacing: 2px;
  text-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.mk-social-box{
  position:absolute;
  padding: 10px 12px;
  background: rgba(255,255,255,.36);
  border-top: 2px solid rgba(255,255,255,.95);
  border-right: 1px solid rgba(255,255,255,.95);
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100,100,111,.28) -7px 7px 26px;
  transform-origin: bottom left;
  transition: all .9s ease;
  color: #10202a;
  text-decoration:none;
}
.mk-social-box .mk-social-ic{
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
}
.mk-social-box svg{ width: 22px; height: 22px; fill: rgba(255,255,255,.88); transition: all .4s ease; filter: drop-shadow(0 6px 16px rgba(0,0,0,.12)); }
.mk-social-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
}
.mk-social-card:hover .mk-social-box{ bottom: -1px; left: -1px; }
.mk-social-card:hover .mk-social-logo{ transform: translate(78px, -54px); letter-spacing: 0; }

.mk-social-box--ig{ width:70%; height:70%; bottom:-70%; left:-70%; }
.mk-social-box--ig::before{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%); }
.mk-social-box--tt{ width:50%; height:50%; bottom:-50%; left:-50%; transition-delay: .15s; }
.mk-social-box--tt::before{ background: radial-gradient(circle at 30% 107%, #9efcff 0%, #00f2ea 50%, #ff0050 95%); }
.mk-social-box--fb{ width:30%; height:30%; bottom:-30%; left:-30%; transition-delay: .30s; }
.mk-social-box--fb::before{ background: radial-gradient(circle at 30% 107%, #b7d3ff 0%, #1877f2 90%); }

.mk-social-card .mk-social-box:hover::before{ opacity: 1; }
.mk-social-card .mk-social-box:hover svg{ fill: #fff; }


/* ===== Markivo UI (Extra Interactions) ===== */

/* Floating follow-us card (small, on the side) */
.mk-float-social{
  position: absolute;
  right: 14px;
  top: 100%;
  margin-top: 10px;
  z-index: 1001;
}
.mk-social-card--float{
  width: 96px;
  height: 96px;
  border-radius: 18px;
}
.mk-social-card--float .mk-social-logo{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size: 13px;
  letter-spacing: .5px;
}
.mk-social-logo__img{
  width: 26px;
  height: 26px;
  border-radius: 10px;
}
.mk-social-card--float:hover .mk-social-logo{ transform: none; }
.mk-social-card--float .mk-social-box{ padding: 7px 9px; }
.mk-social-card--float .mk-social-box svg{ width: 18px; height: 18px; }
@media (max-width: 720px){
  .mk-float-social{ right: 10px; top: 100%; margin-top: 8px; }
  .mk-light-button{ left: 10px; right: auto; bottom: 14px; top: auto; }
}

/* Light CTA button (logo) */
.mk-light-button{
  position: fixed;
  left: 14px;
  bottom: 18px;
  top: auto;
  right: auto;
  z-index: 9999;
}
.mk-light-bt{
  position: relative;
  height: 120px;
  width: 90px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-decoration:none;
}
.mk-button-holder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height: 76px;
  width: 76px;
  background-color: #0a0a0a;
  border-radius: 12px;
  font-weight: 900;
  transition: 300ms;
  outline: rgba(255,255,255,.08) 2px solid;
  outline-offset: 14px;
  gap: 6px;
}
.mk-light-logo{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
}
.mk-button-holder p{
  margin:0;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.mk-light-holder{
  position:absolute;
  height: 120px;
  width: 76px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mk-dot{
  position:absolute;
  top:0;
  width: 10px;
  height: 10px;
  background:#0a0a0a;
  border-radius: 10px;
  z-index:2;
}
.mk-light{
  position:absolute;
  top:0;
  width: 160px;
  height: 160px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}
.mk-light-bt:hover .mk-button-holder{
  outline: rgba(111,60,195,.75) 2px solid;
  outline-offset: 4px;
  transform: translateY(-2px);
}
.mk-light-bt:hover .mk-button-holder p{
  color: rgba(111,60,195,.95);
}
.mk-light-bt:hover .mk-light{
  background: linear-gradient(180deg, rgba(111,60,195,.95) 0%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
}

/* Split hover (3 texts) */
.mk-split-card{
  width: min(680px, 100%);
  height: 220px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43,24,69,.92), rgba(15,45,63,.92));
  display:flex;
  gap: 10px;
  padding: 12px;
  margin-top: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  border: 1px solid rgba(192,132,252,.25);
}
.mk-split-card p{
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 16px;
  transition: all .5s ease;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(192,132,252,.70);
  display:flex;
  justify-content:center;
  align-items:center;
}
.mk-split-card p:hover{ flex: 4; }
.mk-split-card p span{
  min-width: 14em;
  padding: .8em 1em;
  text-align:center;
  transform: rotate(-90deg);
  transition: all .5s ease;
  color: rgba(216,180,254,.98);
  letter-spacing: .04em;
  font-weight: 900;
  font-size: 16px;
  text-transform: none;
  white-space: nowrap;
}
.mk-split-card p:hover span{ transform: rotate(0deg); }
@media (max-width: 720px){
  .mk-split-card{ height:auto; flex-direction:column; }
  .mk-split-card p{ min-height: 64px; }
  .mk-split-card p span{ transform:none; min-width:auto; white-space:normal; }
}
.mk-split-card p span{ transform:none; min-width:auto; }
}

/* Quad grid card (2x2) */
.mk-quad{
  width: 240px;
  height: 240px;
  color: #0b0b0b;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.mk-quad__item{
  border-radius: 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  transition: all .65s ease;
  transform-origin:center;
}
.mk-quad__item:hover{
  transform: scale(1.07);
  rotate: 3deg;
}
.mk-quad__ico{ font-size: 28px; }
.mk-quad__qty{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
}
.mk-quad__txt{ font-size: 12px; font-weight: 900; }
.mk-quad__item--1{ background:#c7c7ff; }
.mk-quad__item--2{ background:#ffd8be; }
.mk-quad__item--3{ background:#a9ecbf; }
.mk-quad__item--4{ background:#f3bbe1; }
.mk-quad__txt--1{ color: rgba(149,149,255,1); }
.mk-quad__txt--2{ color: rgba(252,161,71,1); }
.mk-quad__txt--3{ color: rgba(66,193,110,1); }
.mk-quad__txt--4{ color: rgba(220,91,183,1); }

/* Border animation on hover (apply via .mk-border-anim) */
.mk-border-anim{
  position: relative;
  isolation: isolate;
}
.mk-border-anim::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) 50% 0 / 200% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) 50% 100% / 200% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) 0 50% / 2px 200% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) 100% 50% / 2px 200% no-repeat;
  transition: opacity .25s ease, background-position .6s ease;
  z-index: 3;
}
.mk-border-anim:hover::before{
  opacity: .95;
  background-position:
    -150% 0,
    150% 100%,
    0 150%,
    100% -150%;
}

/* Subtle floating highlight */
.mk-floatbox{
  transform-style: preserve-3d;
  animation: mk-float 2.4s ease-in-out infinite;
}
@keyframes mk-float{
  0%{ transform: translateY(0) rotateX(-10deg); }
  50%{ transform: translateY(-8px) rotateX(-10deg); }
  100%{ transform: translateY(0) rotateX(-10deg); }
}


/* One-div inspired hover card (safe version) */
.mk-one-div{
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 180px;
  background-color: #0f0f0f;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 0 60px rgba(255,255,255,.06);
  color: #fff;
  transition: transform .45s ease, box-shadow .45s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 6px;
  overflow:hidden;
  transform-style: preserve-3d;
  animation: mk-one-float 2.2s ease-in-out infinite;
}
.mk-one-div::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, rgba(111,60,195,.25), transparent 45%),
              radial-gradient(circle at 70% 80%, rgba(99,102,241,.20), transparent 46%);
  filter: blur(10px);
  opacity: .9;
}
.mk-one-div__text{
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 18px;
  opacity: .92;
}
.mk-one-div:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 0 80px rgba(255,255,255,.07);
}
@keyframes mk-one-float{
  0%{ transform: translateY(0) rotateX(-12deg); }
  50%{ transform: translateY(-10px) rotateX(-12deg); }
  100%{ transform: translateY(0) rotateX(-12deg); }
}

@media (max-width: 720px){
  .mk-light-button{ left: 10px; right: auto; bottom: 14px; top: auto; }
}


/* ===== Markivo UI (Programs Big Cards) ===== */
.mk-programs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.mk-program-card{
  background:#fff;
  border-radius: var(--radius);
  border:3px solid rgba(43,24,69,.75);
  box-shadow: var(--shadow);
  min-height: 320px;
  padding: 22px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-decoration:none;
  color: var(--navy);
  text-align:center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.mk-program-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}
.mk-program-card__icon{
  width: 86px;
  height: 86px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  font-size: 40px;
  color:#fff;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(192,132,252,.95));
  box-shadow: 0 18px 44px rgba(43,24,69,.22);
}
.mk-program-card__title{
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  color: #1f2937;
}
.mk-program-card__desc{
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  opacity: .65;
  line-height: 1.7;
  max-width: 28ch;
}
.mk-program-card--crm .mk-program-card__icon{ background: linear-gradient(135deg, rgba(15,45,63,.95), rgba(99,102,241,.95)); }
.mk-program-card--web .mk-program-card__icon{ background: linear-gradient(135deg, rgba(192,132,252,.95), rgba(99,102,241,.95)); }
.mk-program-card--ops .mk-program-card__icon{ background: linear-gradient(135deg, rgba(43,24,69,.95), rgba(192,132,252,.95)); }

.mk-programs-cta{ display:flex; justify-content:center; margin-top: 18px; }

/* ===== Markivo UI (Services Rotator) ===== */
.mk-services-rotator{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 10px;
}
.mk-wrap-card{
  width: 100%;
  max-width: 520px;
  height: 360px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  --w-card: 240px;
  --h-card: 300px;
  --rotate-card: 14deg;
  --insetX-card: 32px;
  --t-card: calc(var(--insetX-card) * 1.25);
  --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
}
.mk-rcard{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  overflow:hidden;
  border-radius: 18px;
  width: var(--w-card);
  height: var(--h-card);
  animation: mk-rotating 9s cubic-bezier(0.75, 0, 0, 1.01) infinite 0s;
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.55);
}
.mk-rcontent{
  background-color: rgba(255,255,255,.24);
  position: relative;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 12px;
  overflow:hidden;
}
.mk-rcontent > span{
  position:absolute;
  inset: 50% 0 0 50%;
  transform: translate(-50%, -50%);
  font-size: 260px;
  font-weight: 900;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: rgba(255,255,255,.55);
  opacity: .22;
  pointer-events:none;
}
.mk-ricon{
  position: relative;
  z-index: 2;
  font-size: 44px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
}
.mk-rlabel{
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.mk-rcard--1{ background: radial-gradient(circle, rgba(142, 249, 252, 1) 0%, rgba(32, 164, 246, 1) 40%, rgba(8, 81, 192, 1) 100%); }
.mk-rcard--2{ background: radial-gradient(circle, rgba(222, 128, 233, 1) 0%, rgba(213, 32, 246, 1) 40%, rgba(139, 6, 157, 1) 100%); }
.mk-rcard--3{ background: radial-gradient(circle, rgba(252, 240, 142, 1) 0%, rgba(246, 173, 32, 1) 40%, rgba(192, 142, 8, 1) 100%); }

.mk-rcard:nth-child(1){
  --z1: 2; --t1: 0; --l1: calc(var(--w-card) / 2); --r1: calc(var(--w-card) / 2); --trans1: rotate(0deg);
  --z2: 0; --t2: var(--t-card); --l2: var(--insetX-card); --r2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans2: rotate(calc(var(--rotate-card) * -1));
  --z3: 0; --t3: var(--t-card); --l3: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r3: var(--insetX-card); --trans3: rotate(calc(var(--rotate-card) * 1));
}
.mk-rcard:nth-child(2){
  --z1: 0; --t1: var(--t-card); --l1: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r1: var(--insetX-card); --trans1: rotate(calc(var(--rotate-card) * 1));
  --z2: 2; --t2: 0; --l2: calc(var(--w-card) / 2); --r2: calc(var(--w-card) / 2); --trans2: rotate(0deg);
  --z3: 0; --t3: var(--t-card); --l3: var(--insetX-card); --r3: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans3: rotate(calc(var(--rotate-card) * -1));
}
.mk-rcard:nth-child(3){
  --z1: 0; --t1: var(--t-card); --l1: var(--insetX-card); --r1: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans1: rotate(calc(var(--rotate-card) * -1));
  --z2: 0; --t2: var(--t-card); --l2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r2: var(--insetX-card); --trans2: rotate(calc(var(--rotate-card) * 1));
  --z3: 2; --t3: 0; --l3: calc(var(--w-card) / 2); --r3: calc(var(--w-card) / 2); --trans3: rotate(0deg);
}

@keyframes mk-rotating{
  0%, 99.99%{ z-index: var(--z1); top: var(--t1); left: var(--l1); right: var(--r1); transform: var(--trans1); }
  33.33%{ z-index: var(--z2); top: var(--t2); left: var(--l2); right: var(--r2); transform: var(--trans2); }
  66.66%{ z-index: var(--z3); top: var(--t3); left: var(--l3); right: var(--r3); transform: var(--trans3); }
}

.mk-wrap-lines{
  position:absolute;
  inset:auto 0 0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 4;
}
.mk-wrap-lines::after{
  content:"";
  width:100%;
  height:0;
  position:absolute;
  inset:0;
  --mask-bg: #e8e8e8;
  background: var(--mask-bg);
  mask-image: radial-gradient(50% 200px at top, transparent 20%, var(--mask-bg));
}
.mk-wrap-line{ position:absolute; width:100%; }
.mk-wrap-line::before,
.mk-wrap-line::after{
  content:"";
  position:absolute;
  background: linear-gradient(to right, transparent, rgba(99,102,241,.85), transparent);
  width: 100%;
  height: 2px;
  filter: blur(2px);
}
.mk-wrap-line:nth-child(2)::before,
.mk-wrap-line:nth-child(2)::after{
  width: 55%;
  background: linear-gradient(to right, transparent, rgba(192,132,252,.9), transparent);
}

.mk-services-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top: 14px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .mk-programs-grid{ grid-template-columns: 1fr; }
  .mk-wrap-card{ height: 340px; }
}



/* ===== Ops cards (3 vertical rectangles) ===== */
.mk-ops-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 900px){
  .mk-ops-grid{ grid-template-columns: 1fr; }
}
.mk-ops-item{
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43,24,69,.78), rgba(20,12,34,.62));
  border: 1px solid rgba(192,132,252,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mk-ops-item::before{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(circle at 30% 20%, rgba(192,132,252,.22), transparent 60%);
  pointer-events:none;
}
.mk-ops-head{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mk-ops-icon{
  font-size: 28px;
  line-height: 1;
}
.mk-ops-badge{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}
.mk-ops-title{
  position: relative;
  margin: 16px 0 10px;
  font-size: 20px;
  color: #fff;
}
.mk-ops-desc{
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
}
.mk-ops-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.32);
  border-color: rgba(192,132,252,.55);
}

/* ===== Glass programs (large) ===== */
.mk-glass-row{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.mk-glass{
  position: relative;
  width: 380px;
  max-width: 100%;
  min-height: 320px;
  padding: 26px 24px 66px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,236,255,.96));
  border: 1px solid rgba(111,60,195,.22);
  box-shadow: 0 18px 40px rgba(10,25,40,.12);
  display:flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  align-items: flex-start;
  transition: transform .45s ease, margin .45s ease, box-shadow .45s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
  text-decoration: none;
  color: var(--navy);
  overflow: hidden;
}

.mk-glass::before{
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 46px;
  left: 0;
  right: 0;
  background: rgba(111,60,195,.10);
  border-top: 1px solid rgba(111,60,195,.16);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--navy);
  font-weight: 900;
  letter-spacing: .6px;
}

.mk-glass::after{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(circle at 20% 20%, rgba(111,60,195,.18), transparent 62%);
  pointer-events:none;
}

.mk-glass--web::after{
  background: radial-gradient(circle at 20% 20%, rgba(61,99,255,.14), transparent 62%);
}
.mk-glass--ops::after{
  background: radial-gradient(circle at 20% 20%, rgba(182,99,255,.16), transparent 62%);
}

.mk-glass__icon{
  width: 58px;
  height: 58px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: rgba(111,60,195,.10);
  border: 1px solid rgba(111,60,195,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}

.mk-glass__icon svg{
  width: 32px;
  height: 32px;
  fill: var(--gold);
}

.mk-glass__content{
  position: relative;
  z-index: 1;
}

.mk-glass__content h3{
  margin: 0;
  font-size: 24px;
  color: var(--navy);
}

.mk-glass__content p{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(15,45,63,.75);
}

.mk-glass-row .mk-glass{
  margin: 0 -40px;
}

.mk-glass-row:hover .mk-glass{
  transform: rotate(0deg) translateY(-2px);
  margin: 0 10px;
}

.mk-glass:hover{
  transform: rotate(0deg) translateY(-6px) !important;
  box-shadow: 0 22px 48px rgba(10,25,40,.16);
}

@media (max-width: 980px){
  .mk-glass-row .mk-glass{ margin: 0; transform: none; }
  .mk-glass-row:hover .mk-glass{ margin: 0; transform: translateY(-2px); }
}
@media (max-width: 640px){
  .mk-glass{ width: 100%; min-height: 300px; padding: 22px 18px 62px; }
}


/* Split hover (3 texts) */ot{
  --navy:#0f2d3f;
  --navy2:#14384e;
  --gold:#6f3cc3;
  --bg:#f6f8fb;
  --text:#12212b;
  --muted:#5b6b76;
  --shadow: 0 10px 25px rgba(10,25,40,.12);
  --shadow2: 0 8px 22px rgba(0,0,0,.05);
  --radius: 20px;
}
*{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth; overflow-x:hidden}
body{overflow-x:hidden;

  margin:0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{
  width:min(1200px, calc(100% - 32px));
  margin-inline:auto;
}

/* Prevent iOS zoom */
input, select, textarea{font-size:16px}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 24px rgba(0,0,0,.04);

  overflow: visible;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px;
}
.brand{line-height:1.1; display:flex; align-items:center; gap:10px}
.brand__logo{width:42px; height:42px; object-fit:contain; border-radius:12px; box-shadow:0 8px 18px rgba(2,6,23,.10)}
.brand__text{display:flex; flex-direction:column}
.brand__name{font-weight:800; color:var(--navy); font-size:18px}
.brand__sub{font-weight:700; opacity:.55; font-size:12px}
.icon-btn{
  border:0; background:transparent;
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  cursor:pointer;
}
.icon-btn:hover{background:#f1f5f9}
.header__menu{display:none}
.nav{display:flex; gap:8px; align-items:center}
.nav__link{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  color:#475569;
}
.nav__link:hover{background:rgba(15,45,63,.06)}
.nav__link.is-active{color:var(--navy)}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:4px;
  height:2px; background:var(--gold); border-radius:999px;
}
.nav--mobile{
  display:none;
  padding:0 0 12px;
}
.nav--mobile a{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  font-weight:800;
}
.nav--mobile a:hover{background:#f8fafc}

@media (max-width: 840px){
  .nav--desktop{display:none}
  .header__menu{display:grid}
  /* Mobile menu should respect the [hidden] attribute used by JS */
  .nav--mobile[hidden]{display:none !important}
  .nav--mobile:not([hidden]){display:block}
}

/* Ensure the HTML [hidden] attribute always wins */
[hidden]{display:none !important}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height: calc(100vh - 64px);
  display:grid; place-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,45,63,.70), rgba(15,45,63,.70)),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;
  background-position:center;
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,45,63,.72), rgba(15,45,63,.72));
}
.hero__content{
  position:relative; z-index:2;
  text-align:center;
  padding:48px 16px;
  color:#fff;
}
.hero__title{
  margin:0;
  font-weight:900;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height:1.18;
  letter-spacing:-0.01em;
}
.hero__subtitle{
  margin:12px auto 0;
  font-weight:700;
  opacity:.92;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height:1.8;
  max-width:min(980px, 100%);
}
.hero__badge{
  margin:18px auto 0;
  display:inline-flex;
  padding:10px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#e9ddff;
  font-weight:900;
}
.hero__down{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:18px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-size:34px;
  cursor:pointer;
  animation: floaty 1.2s ease-in-out infinite;
}
.hero__down:hover{color:#fff}
@keyframes floaty{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(6px)}
}

/* ===== Sections ===== */
.section{padding:80px 0}
.section__head{text-align:center}
.section__title{
  margin:0;
  color:var(--navy);
  font-weight:900;
  font-size: clamp(28px, 3vw, 44px);
}
.section__bar{
  width:80px; height:4px;
  background:var(--gold);
  border-radius:999px;
  margin:12px auto 0;
}
.section--dark{
  position:relative;
  color:#fff;
}
.section__head--dark .section__title{color:#fff}
.muted{color:var(--muted)}
.lead{line-height:1.9; font-weight:700}

/* ===== Grid ===== */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid--5{grid-template-columns: repeat(5, minmax(0,1fr))}
.grid--about{grid-template-columns: 1.1fr .9fr; align-items:stretch}
.grid--contact{grid-template-columns: 1fr 1fr; align-items:start}

@media (max-width: 980px){
  .grid--3{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid--4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid--about{grid-template-columns: 1fr}
  .grid--contact{grid-template-columns: 1fr}
}
@media (max-width: 640px){
  .grid--3{grid-template-columns: 1fr}
  .grid--4{grid-template-columns: 1fr}
  .grid--5{grid-template-columns: 1fr}
}

/* ===== Cards ===== */
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.pill__icon{
  width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(209,173,58,.15);
  color:#e9ddff;
  font-weight:900;
  flex:0 0 auto;
}
.card__title{font-weight:900; color:#1f2937}
.card__sub{font-weight:800; font-size:12px; opacity:.55; margin-top:2px}

.quote{
  margin-top:14px;
  border-radius: var(--radius);
  padding:18px;
  background: linear-gradient(180deg, var(--navy), var(--navy2));
  color:#fff;
  font-weight:900;
  text-align:center;
  box-shadow: var(--shadow);
}

/* Big KPI */
.bigkpi{
  background:#fff;
  border-radius: var(--radius);
  border:3px solid rgba(15,45,63,.8);
  box-shadow: var(--shadow);
  min-height:320px;
  display:grid; place-items:center;
  text-align:center;
}
.bigkpi__num{font-weight:900; font-size:76px; color:var(--navy)}
.bigkpi__title{font-weight:900; font-size:22px}
.bigkpi__sub{font-weight:800; font-size:13px; opacity:.55}

/* Services */
.service{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px 16px;
  text-align:center;
}
.service__icon{
  width:56px;height:56px;
  border-radius:18px;
  background:var(--navy);
  color:var(--gold);
  display:grid;place-items:center;
  margin:0 auto;
  font-size:22px;
}
.service h3{margin:14px 0 4px; font-weight:900}
.service__en{font-weight:800; font-size:13px; opacity:.55}

/* Dark specialization */
.darkbg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,45,63,.82), rgba(11,35,50,.92)),
    url("https://images.unsplash.com/photo-1521791055366-0d553872125f?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;
  background-position:center;
}
.banner{
  margin-top:26px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding:22px;
  text-align:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.banner__title{font-weight:900; font-size:20px}
.banner__sub{font-weight:800; font-size:13px; opacity:.8; margin-top:6px}
.kpi{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding:26px 18px;
  text-align:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.kpi__icon{
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  margin:0 auto;
  background:rgba(209,173,58,.20);
  color:var(--gold);
  font-size:18px;
}
.kpi__num{font-weight:900; font-size:48px; margin-top:12px}
.kpi__title{font-weight:900; margin-top:6px}
.kpi__sub{font-weight:800; font-size:12px; opacity:.8; margin-top:4px}

/* Contact cards */
.contactcard{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.contactcard:hover{transform: translateY(-2px)}
.contactcard__icon{
  width:56px;height:56px;border-radius:999px;
  margin:0 auto;
  display:grid;place-items:center;
  background:rgba(15,45,63,.10);
  color:var(--navy);
  font-weight:900;
}
.contactcard__title{font-weight:900; margin-top:10px}
.contactcard__sub{font-weight:800; font-size:12px; opacity:.75; margin-top:6px}
.contactcard--blue{background:#0b74a6; color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--blue .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}
.contactcard--gold{background:var(--gold); color:#000; border-color: rgba(0,0,0,.10)}
.contactcard--gold .contactcard__icon{background:rgba(255,255,255,.25); color:#000}
.contactcard--navy{background:var(--navy); color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--navy .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}
.contactcard--wa{background:#22c55e; color:#fff; border-color: rgba(255,255,255,.10)}
.contactcard--wa .contactcard__icon{background:rgba(255,255,255,.20); color:#fff}

/* Form */
.formbox{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.formbox h3{margin:0; font-weight:900; color:var(--navy)}
.form{margin-top:14px; display:flex; flex-direction:column; gap:14px}
.form label span{
  display:block;
  font-weight:900;
  margin-bottom:8px;
}
.form input, .form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding:12px 12px;
  outline:none;
}
.form input:focus, .form textarea:focus{
  border-color: rgba(209,173,58,.7);
  box-shadow: 0 0 0 4px rgba(209,173,58,.15);
}
.hint{font-weight:700; font-size:12px; opacity:.8}

.sidecol{display:flex; flex-direction:column; gap:22px}
.workhours{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  color:#fff;
  background: linear-gradient(180deg, var(--navy), var(--navy2));
}
.workhours__title{font-weight:900; font-size:20px}
.workhours__row{
  margin-top:14px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:12px;
  font-weight:800;
}
.whybox{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.whybox h3{margin:0; font-weight:900; color:var(--navy)}

/* Buttons */
.btn{
  border:0;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  font-weight:900;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
}
.btn:hover{transform: translateY(-2px)}
.btn--gold{background:var(--gold); color:#000; box-shadow: var(--shadow)}
.btn--ghost{background: transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn--ghost:hover{box-shadow: var(--shadow)}
.btn--lg{height:48px; padding:0 24px; font-size:16px}
.btn--wide{width:100%}

/* Footer */
.footer{
  padding:48px 0 20px;
  color:#fff;
  background: linear-gradient(180deg, var(--navy), #0b2332);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr;
  gap:28px;
}
.footer__name{font-weight:900; font-size:24px}
.footer__text{margin-top:10px; font-weight:800; opacity:.85; line-height:1.8}
.footer__sub{margin-top:6px; font-weight:800; opacity:.7}
.footer__title{font-weight:900; margin-bottom:10px}
.footer a{display:block; padding:6px 0; font-weight:800; opacity:.85}
.footer a:hover{opacity:1}
.footer__copy{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center;
  font-weight:800;
  opacity:.85;
}
@media (max-width: 980px){
  .footer__grid{grid-template-columns: 1fr}
}

/* ToTop */
.totop{
  position:fixed;
  bottom:18px;
  right:18px;
  width:44px;height:44px;
  border-radius:999px;
  border:0;
  background:var(--navy);
  color:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
  display:none;
}
.totop.show{display:block}

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.98);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Form status */
.formstatus{
  margin-top:10px;
  font-weight:900;
  font-size:13px;
  padding:10px 12px;
  border-radius:14px;
  display:none;
}
.formstatus.ok{
  display:block;
  background: rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.25);
  color: #166534;
}
.formstatus.err{
  display:block;
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  color: #991b1b;
}

/* Prevent long text overflow */
.contactcard__sub, .footer a, .banner__title, .banner__sub, .service__en, .muted{word-break:break-word; overflow-wrap:anywhere;}


/* ===== Company Homepage Additions ===== */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.hero-mini-stats{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.mini-stat{min-width:160px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);backdrop-filter: blur(8px);border-radius:16px;padding:12px 14px;color:#fff;box-shadow: 0 10px 25px rgba(0,0,0,.18);}
.mini-stat__num{font-weight:900;color:var(--gold);font-size:18px}.mini-stat__label{font-weight:800;font-size:12px;opacity:.9;margin-top:4px}
.portfolio-grid{margin-top:26px;display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:22px;}
.portfolio-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius: var(--radius);box-shadow: var(--shadow);overflow:hidden;transition: transform .15s ease, box-shadow .15s ease;}
.portfolio-card:hover{transform: translateY(-4px);box-shadow: 0 16px 30px rgba(10,25,40,.14);}
.portfolio-thumb{width:100%;height:220px;object-fit:cover;display:block;background:#e5e7eb;}
.portfolio-body{padding:16px}.portfolio-body h3{margin:0;font-weight:900;color:var(--navy)}.portfolio-body .muted{margin-top:8px;line-height:1.8}
.portfolio-tags{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:rgba(15,45,63,.07);color:var(--navy);font-weight:800;font-size:12px;border:1px solid rgba(15,45,63,.08);}
.webcards{margin-top:26px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:22px;}
.webcard{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius: var(--radius);box-shadow: var(--shadow);overflow:hidden;display:flex;flex-direction:column;}
.webcard > img{width:100%;height:240px;object-fit:cover;display:block;background:#e5e7eb;}
.webcard__body{padding:18px;display:flex;flex-direction:column;gap:10px;}
.webcard__body h3{margin:0;font-weight:900;color:var(--navy)}
.webcard__actions{margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
.portal-box{margin-top:24px;display:grid;grid-template-columns: 1.2fr .8fr;gap:20px;align-items:stretch;border-radius: var(--radius);border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);backdrop-filter: blur(10px);box-shadow: 0 12px 28px rgba(0,0,0,.25);padding:18px;}
.portal-box__content h3{margin:0;color:#fff;font-weight:900;font-size:22px}.portal-box__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.portal-mock{border-radius:16px;background:rgba(255,255,255,.95);color:#111827;overflow:hidden;border:1px solid rgba(255,255,255,.35);min-height:220px;}
.portal-mock__head{height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#eef2f7;border-bottom:1px solid rgba(0,0,0,.06);}
.portal-mock__head span{width:10px;height:10px;border-radius:999px;background:#cbd5e1;}
.portal-mock__body{padding:14px}.portal-row{height:14px;border-radius:999px;background:#e2e8f0;margin-bottom:10px}.portal-row.short{width:70%}
.portal-grid{margin-top:12px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px;}
.portal-grid > div{height:58px;border-radius:12px;background:#e2e8f0;}
@media (max-width: 980px){.portfolio-grid{grid-template-columns: repeat(2, minmax(0,1fr))}.webcards{grid-template-columns: 1fr}.portal-box{grid-template-columns: 1fr}}
@media (max-width: 640px){.portfolio-grid{grid-template-columns: 1fr}.portfolio-thumb{height:200px}.webcard > img{height:210px}.hero-actions .btn{width:100%}.hero-actions{max-width:420px;margin-inline:auto;margin-top:18px}.mini-stat{min-width:unset;width:100%}}


/* ===== UX Upgrades: varied transitions + animated hero + systems + slider ===== */
.hero--animated{isolation:isolate}
.hero__bg--animated{
  background:
    linear-gradient(180deg, rgba(12,31,47,.62), rgba(12,31,47,.70)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1900&q=70");
  background-size: cover;
  background-position: center;
  animation: heroPan 22s ease-in-out infinite alternate;
  transform-origin:center;
}
.hero__bg--animated::before,
.hero__bg--animated::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
}
.hero__bg--animated::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(209,173,58,.28), transparent 42%),
    radial-gradient(circle at 78% 28%, rgba(99,102,241,.22), transparent 38%),
    radial-gradient(circle at 62% 82%, rgba(34,197,94,.14), transparent 32%);
  mix-blend-mode: screen;
  animation: blobMove 16s ease-in-out infinite alternate;
}
.hero__bg--animated::after{
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 12px);
  opacity:.45;
  animation: gridDrift 20s linear infinite;
}
.hero__overlay--animated{
  background: linear-gradient(180deg, rgba(10,24,38,.68) 0%, rgba(10,24,38,.76) 55%, rgba(10,24,38,.86) 100%);
}
.hero-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;
  font-weight:900;box-shadow: 0 12px 28px rgba(0,0,0,.20);backdrop-filter: blur(8px);margin-bottom:14px;
}
.darkbg--alt{
  background:
    linear-gradient(180deg, rgba(9,24,37,.86), rgba(12,28,43,.94)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=60");
  background-size:cover;background-position:center;
}
@keyframes heroPan{
  0%{transform:scale(1) translate3d(0,0,0); background-position:50% 50%}
  50%{transform:scale(1.06) translate3d(-8px,-4px,0); background-position:52% 46%}
  100%{transform:scale(1.02) translate3d(6px,6px,0); background-position:48% 54%}
}
@keyframes blobMove{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8px,-10px,0) scale(1.05)}}
@keyframes gridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,40px,0)}}

/* varied reveal */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.98);
  filter: blur(6px);
  transition: opacity 650ms cubic-bezier(.2,.65,.2,1), transform 700ms cubic-bezier(.16,1,.3,1), filter 700ms ease;
}
.reveal[data-anim="up"]{transform:translateY(26px) scale(.98); filter:blur(6px)}
.reveal[data-anim="left"]{transform:translateX(32px) scale(.985); filter:blur(7px)}
.reveal[data-anim="right"]{transform:translateX(-32px) scale(.985); filter:blur(7px)}
.reveal[data-anim="zoom"]{transform:scale(.92) translateY(8px); filter:blur(8px)}
.reveal[data-anim="fade"]{transform:none; filter:none; opacity:0}
.reveal.is-visible{opacity:1; transform:none; filter:none}

/* systems */
.systems-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.system-card{
  position:relative;display:flex;flex-direction:column;gap:10px;min-height:210px;border-radius:22px;padding:18px;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(10px);box-shadow:0 16px 30px rgba(0,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.system-card:hover{transform:translateY(-4px);box-shadow:0 20px 35px rgba(0,0,0,.30);border-color:rgba(209,173,58,.45)}
.system-card__badge{align-self:flex-start;height:28px;border-radius:999px;padding:0 10px;display:inline-flex;align-items:center;background:rgba(209,173,58,.22);color:var(--gold);border:1px solid rgba(209,173,58,.35);font-weight:900;font-size:12px}
.system-card__badge--soft{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18)}
.system-card__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:24px}
.system-card h3{margin:0;font-size:20px;line-height:1.5;font-weight:900}
.system-card p{margin:0;color:rgba(255,255,255,.86);line-height:1.8;font-weight:700}
.system-card__footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-weight:900}

/* showcase slider */
.showcase-slider{
  margin-top:24px;border-radius:24px;overflow:hidden;border:1px solid rgba(0,0,0,.06);background:#fff;box-shadow: var(--shadow);
}
.showcase-slider__viewport{overflow:hidden;position:relative;background:#0f172a}
.showcase-slider__track{display:flex;width:100%;transform:translateX(0);transition:transform 700ms cubic-bezier(.22,1,.36,1)}
.site-slide{min-width:100%;position:relative;height:520px;overflow:hidden}
.site-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition: transform 1.6s ease}
.showcase-slider:hover .site-slide img{transform:scale(1.06)}
.site-slide::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.20), rgba(2,6,23,.70)), linear-gradient(90deg, rgba(2,6,23,.85), rgba(2,6,23,.28) 60%, rgba(2,6,23,.20));
}
.site-slide__overlay{position:absolute;inset:auto auto 0 0;width:min(720px,100%);padding:26px;color:#fff;z-index:2}
.site-slide__kicker{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);font-weight:900;font-size:12px;margin-bottom:10px}
.site-slide__overlay h3{margin:0;font-weight:900;font-size:clamp(22px,2.7vw,34px);line-height:1.4}
.site-slide__overlay p{margin:10px 0 0;line-height:1.9;color:rgba(255,255,255,.9);font-weight:700;max-width:560px}
.site-slide__overlay .btn{margin-top:14px}
.showcase-slider__controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fff}
.slider-btn{
  width:42px;height:42px;border-radius:999px;border:1px solid rgba(15,45,63,.10);background:#fff;color:var(--navy);cursor:pointer;
  display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow: 0 8px 18px rgba(15,45,63,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.slider-btn:hover{transform:translateY(-2px)}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:8px;flex:1}
.slider-dot{width:10px;height:10px;border-radius:999px;border:0;cursor:pointer;background:#cbd5e1;transition:transform .2s ease, width .2s ease, background-color .2s ease}
.slider-dot.is-active{width:26px;background:var(--gold)}

@media (max-width: 980px){
  .systems-grid{grid-template-columns:1fr}
  .site-slide{height:460px}
}
@media (max-width: 640px){
  .hero-chip{font-size:12px;padding:0 12px}
  .site-slide{height:420px}
  .site-slide__overlay{padding:18px}
  .site-slide__overlay p{font-size:14px;line-height:1.75}
  .showcase-slider__controls{padding:10px}
  .slider-btn{width:38px;height:38px}
}


/* ===== v3 upgrades: video hero + social rail + brands + richer transitions + programs ===== */
.hero--video{isolation:isolate}
.hero__video-wrap{position:absolute; inset:0; overflow:hidden; background:#0b1726;}
.hero__video{width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:saturate(1.1) contrast(1.04) brightness(.85); animation: heroVideoZoom 18s ease-in-out infinite alternate;}
.hero__overlay--video{background:radial-gradient(circle at 18% 22%, rgba(209,173,58,.16), transparent 36%), radial-gradient(circle at 78% 28%, rgba(99,102,241,.14), transparent 30%), linear-gradient(180deg, rgba(10,24,38,.62) 0%, rgba(10,24,38,.76) 48%, rgba(10,24,38,.88) 100%);}
@keyframes heroVideoZoom{0%{transform:scale(1.06) translate3d(0,0,0)}50%{transform:scale(1.11) translate3d(-8px,-4px,0)}100%{transform:scale(1.08) translate3d(10px,6px,0)}}

.social-rail{position:fixed; top:90px; left:14px; z-index:120; display:flex; flex-direction:column; gap:10px;}
.social-rail__btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;text-decoration:none;color:#fff;font-weight:900;font-size:12px;box-shadow:0 12px 22px rgba(10,25,40,.18);border:1px solid rgba(255,255,255,.14);backdrop-filter: blur(8px);transition:transform .18s ease, box-shadow .18s ease;}
.social-rail__btn:hover{transform:translateY(-2px) scale(1.02)}
.social-rail__btn--ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social-rail__btn--fb{background:linear-gradient(135deg,#1877f2,#2563eb)}
.social-rail__btn--tt{background:linear-gradient(135deg,#111827,#ef4444 58%, #22d3ee)}
.social-rail__btn--wa{background:linear-gradient(135deg,#16a34a,#22c55e)}
@media (max-width: 840px){.social-rail{top:72px; left:10px; flex-direction:row; gap:8px}.social-rail__btn{width:38px;height:38px;border-radius:12px;font-size:11px}}

.reveal[data-anim="tilt"]{transform:translateY(18px) rotate(2.2deg) scale(.97); filter:blur(8px)}
.reveal[data-anim="soft-scale"]{transform:translateY(10px) scale(.9); filter:blur(5px)}
.reveal[data-anim="rise-rotate"]{transform:translateY(24px) translateX(-10px) rotate(-2deg) scale(.98); filter:blur(8px)}

.hero--programs .hero__content{max-width:980px}
.catalog-grid .system-card{min-height:220px}
.catalog-grid .system-card h3{font-size:19px}

.site-slide__chrome{position:absolute; inset:14px 14px auto 14px; height:34px; border-radius:12px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.65); display:flex; align-items:center; gap:7px; padding:0 10px; z-index:3; box-shadow:0 10px 18px rgba(0,0,0,.12);}
.site-slide__chrome span{width:9px;height:9px;border-radius:999px;background:#cbd5e1}
.site-slide__chrome span:nth-child(1){background:#fb7185}
.site-slide__chrome span:nth-child(2){background:#7c3aed}
.site-slide__chrome span:nth-child(3){background:#34d399}
.site-slide__chrome i{margin-inline-start:auto; font-style:normal; color:#334155; font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:65%}
.site-slide__overlay{padding-top:72px}
.site-slide__overlay h3{max-width:620px}
.site-slide--design::after{background: linear-gradient(180deg, rgba(2,6,23,.12), rgba(2,6,23,.66)), linear-gradient(90deg, rgba(2,6,23,.78), rgba(2,6,23,.16) 60%, rgba(2,6,23,.12));}
.design-slider .site-slide{height:500px}
.design-slider .site-slide__chrome{display:none}
@media (max-width:640px){.site-slide__chrome{inset:10px 10px auto 10px; height:30px}.site-slide__chrome i{font-size:11px;max-width:56%}.site-slide__overlay{padding-top:62px}.design-slider .site-slide{height:400px}}

.section--brands{background: linear-gradient(180deg,#f8fbff 0%, #fff 100%)}
.brands-cloud{margin-top:24px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px;}
.brand-tile{background:#fff; border:1px solid rgba(15,45,63,.08); border-radius:18px; padding:12px; min-height:104px; display:grid;place-items:center; box-shadow:0 10px 20px rgba(15,45,63,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.brand-tile:hover{transform:translateY(-3px); box-shadow:0 14px 24px rgba(15,45,63,.1); border-color:rgba(209,173,58,.28)}
.brand-tile img{max-width:100%; height:auto; display:block}
@media (max-width:980px){.brands-cloud{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width:640px){.brands-cloud{grid-template-columns: 1fr}}

.system-card, .service, .portfolio-card, .contactcard, .brand-tile, .slider-btn{will-change: transform;}
.showcase-slider .showcase-slider__viewport::before{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 12% 16%, rgba(255,255,255,.08), transparent 28%), radial-gradient(circle at 82% 22%, rgba(209,173,58,.10), transparent 32%); z-index:1;}
.hero--video .hero__bg{display:none}



/* ===== v5 polish / blur reduction / new components ===== */
.header{backdrop-filter:none !important}
.hero__badge,.mini-stat,.social-rail__btn,.contactcard,.formbox,.workhours,.whybox,.portal-box,.showcase-slider,.site-slide,.website-card,.brand-tile{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.reveal{filter:none !important}
.reveal[data-anim]{filter:none !important}

/* Nav dropdown */
.nav-dropdown{position:relative}
.nav__dropdown-toggle{border:0;background:transparent;cursor:pointer}
.nav-dropdown__menu{
  position:absolute; top:calc(100% + 8px); right:0;
  width:260px; padding:10px;
  background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:16px; box-shadow:0 18px 40px rgba(2,6,23,.12);
  display:grid; gap:6px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.18s ease;
  z-index:30;
}
.nav-dropdown__menu a{
  display:block; padding:10px 12px; border-radius:12px; font-weight:700; color:#334155;
}
.nav-dropdown__menu a:hover{background:#f8fafc; color:var(--navy)}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0)}
@media (max-width:840px){ .nav-dropdown{display:none} }

/* Social rail */
.social-rail{
  position:fixed; top:98px; left:12px; z-index:1200;
  display:flex; flex-direction:column; gap:8px;
}
.social-rail__btn{
  width:42px;height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 20px rgba(2,6,23,.16);
  display:grid; place-items:center; color:#fff; font-weight:900;
  background:rgba(15,23,42,.88);
  transition:transform .18s ease, box-shadow .18s ease;
}
.social-rail__btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 14px 24px rgba(2,6,23,.22)}
.social-rail__btn--ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social-rail__btn--fb{background:#1877f2}
.social-rail__btn--tt{background:#111827}
.social-rail__btn--wa{background:#25d366}
@media (max-width:980px){
  .social-rail{left:auto; right:10px; top:86px}
  .social-rail__btn{width:38px;height:38px;border-radius:12px;font-size:12px}
}

/* Hero network */
.hero--network,.hero--catalog{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(1000px 700px at 50% 85%, rgba(249,115,22,.10), transparent 65%),
    #04070f;
}
.hero--network .hero__overlay,.hero--catalog .hero__overlay{
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.04), transparent 48%),
    linear-gradient(180deg, rgba(4,7,15,.35), rgba(4,7,15,.68));
}
.hero-network-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1;
}
.hero-network-canvas--dim{opacity:.75}
.hero-network-glow{
  position:absolute; inset:auto 50% 22%; transform:translateX(-50%);
  width:min(52vw,620px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(100,210,255,.38), rgba(76,29,149,.20) 35%, rgba(2,6,23,0) 70%);
  filter:blur(22px); opacity:.65; z-index:1; pointer-events:none;
}
.hero-network-nodes{
  position:absolute; inset:0; z-index:2; pointer-events:none;
}
.hero-node{
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px; color:#e2e8f0; font-size:12px; font-weight:800;
  border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.42);
  box-shadow:0 10px 18px rgba(0,0,0,.16);
  animation:floatNode 7s ease-in-out infinite;
}
.hero-node::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; margin-left:8px;
  box-shadow:0 0 0 5px rgba(209,173,58,.14);
}
.hero-node--1{top:18%; right:17%; animation-delay:.2s}
.hero-node--2{top:28%; left:12%; animation-delay:1.1s}
.hero-node--3{top:56%; right:10%; animation-delay:2s}
.hero-node--4{top:66%; left:14%; animation-delay:1.5s}
.hero-node--5{top:14%; left:42%; animation-delay:.8s}
.hero-node--6{top:72%; left:46%; animation-delay:2.4s}
.hero__overlay--network{z-index:2}
.hero__content{z-index:3}
.hero-chip{
  margin:0 auto 14px; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-weight:900; font-size:13px;
  color:#e2e8f0; border:1px solid rgba(255,255,255,.12); background:rgba(15,23,42,.35);
}
.hero-chip::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold)}
.hero-actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px;
}
.hero-mini-stats{
  margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.mini-stat{
  padding:14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,14,27,.45);
  box-shadow:0 12px 24px rgba(2,6,23,.18);
}
.mini-stat__num{font-weight:900; color:#fff; font-size:14px}
.mini-stat__label{font-weight:700; color:rgba(255,255,255,.75); font-size:12px; margin-top:4px}
@media (max-width:980px){ .hero-mini-stats{grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
@media (max-width:700px){
  .hero-node{display:none}
  .hero__content{padding-top:32px}
  .hero-chip{font-size:11px}
}

/* sliders / website mocks */
.showcase-slider{margin-top:22px}
.showcase-slider__viewport{overflow:hidden;border-radius:24px}
.showcase-slider__track{
  display:flex;
  transition:transform .45s ease;
}
.showcase-slider__track > *{
  min-width:100%;
  flex:0 0 100%;
}
.site-slide{
  position:relative; overflow:hidden;
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  border-radius:24px;
  box-shadow:0 14px 30px rgba(2,6,23,.08);
  padding:14px;
}
.site-slide--link{display:block; cursor:pointer}
.site-slide--design{padding:0; aspect-ratio:16/8.8; display:block}
.site-slide--design img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .5s ease;
}
.site-slide--design:hover img{transform:scale(1.06)}
.site-slide__overlay{
  position:absolute; inset:auto 14px 14px 14px;
  background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.78));
  border-radius:18px; padding:22px 18px 16px; color:#fff;
}
.site-slide__kicker{font-size:12px; font-weight:800; opacity:.85}
.site-slide__overlay h3{margin:8px 0 0; font-size:22px}
.site-slide__chrome{
  display:flex; align-items:center; gap:8px; color:#64748b; font-size:12px; font-weight:700; margin-bottom:10px;
}
.site-slide__chrome span{width:8px;height:8px;border-radius:50%;background:#cbd5e1;display:inline-block}
.site-slide__chrome i{font-style:normal; margin-inline-start:auto}
.site-mock{
  border-radius:18px; border:1px solid rgba(2,6,23,.06);
  background:linear-gradient(180deg,#fff,#f8fafc);
  overflow:hidden;
}
.site-mock__hero{
  padding:18px;
  color:#fff;
  background:
    radial-gradient(350px 150px at 80% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.06)),
    var(--mock-bg, linear-gradient(135deg,#1e293b,#0f172a));
}
.site-mock__badge{
  display:inline-flex; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:900;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:#fff;
}
.site-mock__hero h3{margin:10px 0 4px;font-size:22px;line-height:1.25}
.site-mock__hero p{margin:0; opacity:.92; font-weight:700; font-size:13px}
.site-mock__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px;
}
.mock-chip{
  border:1px solid rgba(2,6,23,.08);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:800; color:#334155; font-size:13px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.site-mock__rows{padding:0 14px 14px; display:grid; gap:8px}
.site-mock__rows div{
  height:12px; background:linear-gradient(90deg,#e2e8f0,#f1f5f9); border-radius:999px;
}
.site-mock__rows div:nth-child(2){width:84%}
.site-mock__rows div:nth-child(3){width:62%}
.site-mock--cars{--mock-bg:linear-gradient(135deg,#ea580c,#7c2d12)}
.site-mock--tint{--mock-bg:linear-gradient(135deg,#0ea5e9,#0f172a)}
.site-mock--profile{--mock-bg:linear-gradient(135deg,#8b5cf6,#312e81)}
.site-mock--perfume{--mock-bg:linear-gradient(135deg,#ec4899,#831843)}
.site-mock--oils{--mock-bg:linear-gradient(135deg,#22c55e,#14532d)}
.site-mock--showroom{--mock-bg:linear-gradient(135deg,#6d28d9,#7c2d12)}
.site-mock--landing{--mock-bg:linear-gradient(135deg,#ef4444,#7f1d1d)}
.showcase-slider__controls{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px;
}
.slider-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(2,6,23,.08);
  background:#fff; cursor:pointer; box-shadow:0 8px 18px rgba(2,6,23,.06); font-size:24px; line-height:1;
}
.slider-btn:hover{transform:translateY(-1px)}
.slider-dots{display:flex; gap:8px; align-items:center}
.slider-dot{
  width:9px;height:9px;border-radius:50%; border:0; background:#cbd5e1; cursor:pointer;
  padding:0;
}
.slider-dot.is-active{width:28px; border-radius:999px; background:var(--navy)}
.design-slider .showcase-slider__viewport{border-radius:26px; box-shadow:0 18px 35px rgba(2,6,23,.08)}
.websites-slider .showcase-slider__viewport{box-shadow:0 18px 35px rgba(2,6,23,.08)}

/* Brands */
.section--brands{background:linear-gradient(180deg,#fbfdff,#f6f8fb)}
.brands-cloud{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.brand-tile{
  height:96px; border-radius:20px; background:#fff;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 20px rgba(2,6,23,.05);
  display:grid; place-items:center; padding:18px;
}
.brand-tile img{max-width:100%; max-height:54px; object-fit:contain; opacity:.9}
@media (max-width:980px){ .brands-cloud{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .brands-cloud{grid-template-columns:1fr} }

/* Website catalog */
.website-catalog{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.website-card{
  display:block; background:#fff; border:1px solid rgba(2,6,23,.07);
  border-radius:20px; padding:12px; box-shadow:0 12px 26px rgba(2,6,23,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.website-card:hover{transform:translateY(-4px); box-shadow:0 18px 30px rgba(2,6,23,.10)}
.website-card__head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:6px 6px 10px;
}
.website-card__dot{
  width:10px;height:10px;border-radius:50%; background:var(--accent,#0ea5e9); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent,#0ea5e9) 15%, white);
}
.website-card__domain{font-weight:800; color:#475569; font-size:12px}
.website-card__kicker{font-weight:900; color:var(--accent,#0ea5e9); font-size:11px}
.website-card__preview{
  border-radius:14px; border:1px solid rgba(2,6,23,.06); overflow:hidden; padding:10px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.wc-nav{height:10px; border-radius:999px; background:#e2e8f0; margin-bottom:10px; width:48%}
.wc-hero{height:70px; border-radius:12px; background:linear-gradient(135deg,var(--accent,#0ea5e9),#0f172a); margin-bottom:10px}
.wc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px}
.wc-grid span{height:38px; border-radius:10px; background:#fff; border:1px solid rgba(2,6,23,.06)}
.wc-row{height:10px; background:#e2e8f0; border-radius:999px}
.wc-row.short{width:60%; margin-top:8px}
.website-card__body{padding:10px 8px 6px}
.website-card__body h3{margin:0; color:var(--navy); font-size:18px}
.website-card__body p{margin:8px 0 0; color:#64748b; line-height:1.8; font-weight:700; font-size:13px}
.showcase-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.showcase-tag{
  padding:6px 10px; border-radius:999px; background:#f8fafc; border:1px solid rgba(2,6,23,.06);
  font-size:11px; font-weight:800; color:#334155;
}
.website-card__footer{
  margin-top:8px; display:flex; align-items:center; justify-content:space-between;
  padding:10px 8px 6px; color:#334155; font-weight:900; border-top:1px dashed rgba(2,6,23,.07);
}
@media (max-width:980px){ .website-catalog{grid-template-columns:1fr} }

/* Demo website pages */
.demo-page{
  position:relative; padding:34px 0 70px;
  background:
    radial-gradient(900px 600px at 10% 5%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 65%),
    radial-gradient(700px 400px at 88% 15%, rgba(15,23,42,.14), transparent 65%),
    linear-gradient(180deg,#f6f8fb,#eef2f7);
}
.demo-page__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(0deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0/28px 28px;
  opacity:.25;
}
.demo-shell{
  position:relative; z-index:1;
  background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:26px; overflow:hidden; box-shadow:0 20px 44px rgba(2,6,23,.10);
}
.demo-topbar{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px 16px; background:#f8fafc; border-bottom:1px solid rgba(2,6,23,.06);
}
.demo-topbar__dots{display:flex; gap:6px}
.demo-topbar__dots span{width:8px;height:8px;border-radius:50%; background:#cbd5e1; display:inline-block}
.demo-topbar__domain{font-weight:800; color:#334155; font-size:13px; text-align:center}
.demo-topbar__links{display:flex; gap:10px}
.demo-topbar__links a{font-size:12px; font-weight:800; color:#64748b}
.demo-header{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  padding:16px 18px; border-bottom:1px solid rgba(2,6,23,.06);
}
.demo-logo{
  font-weight:900; color:var(--navy); font-size:15px;
  padding:10px 12px; border-radius:12px; background:#f8fafc; border:1px solid rgba(2,6,23,.06);
}
.demo-nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.demo-nav a{
  padding:8px 10px; border-radius:10px; font-weight:800; color:#475569; font-size:13px;
}
.demo-nav a:hover{background:#f8fafc}
.demo-nav__cta{
  padding:9px 12px; border-radius:12px; background:var(--demo-accent); color:#fff; font-weight:900; font-size:13px;
}
.demo-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:20px 18px;
}
.demo-hero__content{
  border-radius:20px; padding:22px;
  background:
    radial-gradient(240px 120px at 90% 0%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 88%, black 12%), #0f172a);
  color:#fff; box-shadow:0 14px 26px rgba(2,6,23,.10);
}
.demo-pill{
  display:inline-flex; padding:7px 10px; border-radius:999px; font-weight:900; font-size:11px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
}
.demo-hero__content h1{margin:10px 0 0; font-size:clamp(24px,3vw,34px); line-height:1.25}
.demo-hero__content p{margin:10px 0 0; font-weight:700; opacity:.92; line-height:1.8}
.demo-hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.demo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; font-weight:900; font-size:13px;
}
.demo-btn--solid{background:#fff; color:#0f172a}
.demo-btn--ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16)}
.demo-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px}
.demo-stat{
  padding:10px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);
  display:grid; gap:4px;
}
.demo-stat strong{font-size:15px}
.demo-stat span{font-size:11px; opacity:.9}
.demo-hero__visual{
  position:relative; border-radius:20px; padding:14px;
  background:linear-gradient(180deg,#f8fafc,#eef2f7); border:1px solid rgba(2,6,23,.06);
}
.dv-card{
  border-radius:16px; background:#fff; border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 20px rgba(2,6,23,.06); padding:12px;
}
.dv-card--main{height:100%}
.dv-row{height:12px; border-radius:999px; background:#e2e8f0; margin-bottom:10px; width:72%}
.dv-row.short{width:56%}
.dv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px}
.dv-grid span{height:68px; border-radius:12px; background:linear-gradient(135deg,color-mix(in srgb, var(--demo-accent) 14%, white),#fff); border:1px solid rgba(2,6,23,.06)}
.dv-card--float{
  position:absolute; left:14px; bottom:14px; width:min(220px,58%);
  background:rgba(255,255,255,.95);
}
.dv-badge{
  display:inline-flex; padding:4px 8px; border-radius:999px; background:color-mix(in srgb, var(--demo-accent) 15%, white);
  color:color-mix(in srgb, var(--demo-accent) 70%, black 30%); font-size:11px; font-weight:900; margin-bottom:8px;
}
.dv-mini{height:8px; border-radius:999px; background:#e2e8f0; margin-bottom:7px}
.dv-mini.short{width:58%}
.demo-section{padding:0 18px 18px}
.demo-section__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.demo-section__head h2{margin:0; font-size:20px; color:var(--navy)}
.demo-section__head a{font-weight:800; color:color-mix(in srgb, var(--demo-accent) 74%, black)}
.demo-tiles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.demo-tile{
  border-radius:14px; background:#fff; border:1px solid rgba(2,6,23,.06); padding:14px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.demo-tile h4{margin:0; color:#0f172a; font-size:15px}
.demo-tile p{margin:7px 0 0; color:#64748b; font-weight:700; line-height:1.65; font-size:12px}
.demo-products{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.demo-product{
  border-radius:14px; border:1px solid rgba(2,6,23,.06); background:#fff; padding:10px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.demo-product__media{
  height:100px; border-radius:12px;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--demo-accent) 40%, white), color-mix(in srgb, var(--demo-accent) 12%, white)),
    linear-gradient(45deg,rgba(255,255,255,.5),transparent);
  border:1px solid rgba(2,6,23,.05);
}
.demo-product h4{margin:10px 0 4px; color:#0f172a; font-size:14px}
.demo-product p{margin:0; color:#64748b; font-size:12px; font-weight:700}
.demo-product button{
  margin-top:10px; width:100%; border:0; border-radius:10px; padding:8px 10px; font-weight:900;
  background:color-mix(in srgb, var(--demo-accent) 12%, white); color:#0f172a; cursor:pointer;
}
.demo-banner{
  margin:0 18px 18px; border-radius:18px; padding:16px;
  border:1px solid rgba(2,6,23,.06);
  background:
    radial-gradient(320px 130px at 90% 0%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 60%),
    #f8fafc;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.demo-banner h3{margin:0; color:var(--navy); font-size:18px}
.demo-banner p{margin:6px 0 0; color:#64748b; font-weight:700}
.demo-faqs{display:grid; gap:10px}
.demo-faq{
  background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:14px; padding:0 14px;
  box-shadow:0 8px 16px rgba(2,6,23,.04);
}
.demo-faq summary{
  list-style:none; cursor:pointer; padding:14px 0; font-weight:800; color:#0f172a;
}
.demo-faq summary::-webkit-details-marker{display:none}
.demo-faq p{margin:0 0 14px; color:#64748b; font-weight:700}
@media (max-width:1100px){
  .demo-tiles,.demo-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .demo-header{grid-template-columns:1fr; text-align:center}
  .demo-nav{justify-content:center}
  .demo-nav__cta{justify-self:center}
  .demo-hero{grid-template-columns:1fr}
  .demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-banner{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  .demo-topbar{grid-template-columns:1fr; justify-items:center}
  .demo-topbar__links{justify-content:center}
  .demo-tiles,.demo-products{grid-template-columns:1fr}
}

/* contact cards polish */
.contactcard{
  display:block; border-radius:18px; padding:16px;
  border:1px solid rgba(2,6,23,.06); background:#fff; box-shadow:0 10px 20px rgba(2,6,23,.05);
}
.contactcard__icon{font-size:20px}
.contactcard__title{font-weight:900; color:var(--navy); margin-top:6px}
.contactcard__sub{color:#64748b; font-weight:700; margin-top:4px}
.contactcard--gold{background:linear-gradient(180deg,#fff,#faf5ff)}
.contactcard--navy{background:linear-gradient(180deg,#fff,#f8fbff)}
.contactcard--wa{background:linear-gradient(180deg,#fff,#f5fff8)}
.contactcard--blue{background:linear-gradient(180deg,#fff,#f7fbff)}
.formbox,.workhours,.whybox{
  background:#fff; border:1px solid rgba(2,6,23,.06); border-radius:20px; box-shadow:0 12px 24px rgba(2,6,23,.05);
}
.formbox{padding:18px}
.formbox h3{margin:0 0 10px; color:var(--navy)}
.form{display:grid; gap:12px}
.form label{display:grid; gap:7px}
.form label span{font-weight:800; font-size:13px; color:#334155}
.form input,.form textarea{
  width:100%; border:1px solid rgba(2,6,23,.12); border-radius:12px; padding:12px 14px; font-family:inherit; background:#fff;
}
.form input:focus,.form textarea:focus{outline:none; border-color:color-mix(in srgb, var(--gold) 50%, #94a3b8)}
.btn--wide{width:100%}
.formstatus{font-size:13px; font-weight:800}
.formstatus.ok{color:#166534}
.formstatus.err{color:#b91c1c}
.sidecol{display:grid; gap:16px}
.workhours,.whybox{padding:18px}
.workhours__title{font-weight:900; color:var(--navy); margin-bottom:10px}
.workhours__row{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px dashed rgba(2,6,23,.07); font-weight:800; color:#334155;
}
.workhours__row:last-child{border-bottom:0}
.whybox h3{margin:0; color:var(--navy)}

/* helper animations */
@keyframes floatNode{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-7px)}
}


/* ===== Enhanced social rail icons (SVG) ===== */
.social-rail__btn{
  color:#fff;
}
.social-rail__btn svg{width:20px;height:20px;display:block}
.social-rail__btn .icon-stroke *{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-rail__btn .icon-stroke circle[r="1.1"]{fill:currentColor; stroke:none}
.social-rail__btn--tt svg{filter:drop-shadow(0 0 10px rgba(34,211,238,.2));}

/* ===== Website slider mock variants (more distinct visual styles) ===== */
.site-mock{position:relative; isolation:isolate}
.site-mock::before{
  content:""; position:absolute; inset:auto -10% -18% auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  opacity:.45; pointer-events:none;
}
.site-mock__hero{position:relative; overflow:hidden}
.site-mock__hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.65}
.site-mock__hero > *{position:relative; z-index:1}

/* Cars marketplace */
.site-mock--cars .site-mock__hero{
  background:
    radial-gradient(200px 80px at 18% 15%, rgba(255,220,180,.28), transparent 70%),
    linear-gradient(145deg,#1e293b,#0f172a 55%, #7c2d12);
}
.site-mock--cars .site-mock__hero::after{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px),
    linear-gradient(0deg, rgba(234,88,12,.18), rgba(234,88,12,0));
}
.site-mock--cars .site-mock__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.site-mock--cars .mock-chip{
  min-height:54px; display:grid; place-items:center; text-align:center; font-size:11px;
  border-radius:12px; background:linear-gradient(180deg,#fff,#f8fafc);
}
.site-mock--cars .mock-chip:nth-child(1){grid-column:span 2; background:linear-gradient(180deg,#fff7ed,#fff)}
.site-mock--cars .mock-chip:nth-child(4){grid-column:span 2; background:linear-gradient(180deg,#eff6ff,#fff)}
.site-mock--cars .site-mock__rows div{height:10px}

/* Tint & PPF */
.site-mock--tint{background:linear-gradient(180deg,#040813,#0b1324)}
.site-mock--tint .site-mock__hero{
  background:
    radial-gradient(280px 120px at 80% 15%, rgba(0,194,255,.22), transparent 70%),
    linear-gradient(155deg,#0b1220,#07111f 52%, #0ea5e9);
}
.site-mock--tint .site-mock__hero::after{
  background:
    linear-gradient(120deg, transparent 12%, rgba(255,255,255,.11) 18%, transparent 24%, transparent 40%, rgba(0,194,255,.14) 47%, transparent 54%),
    linear-gradient(0deg, rgba(15,23,42,.45), transparent 55%);
}
.site-mock--tint .site-mock__grid{grid-template-columns:1.2fr .8fr; grid-auto-rows:42px; gap:9px}
.site-mock--tint .mock-chip{
  background:rgba(10,18,34,.72); color:#dff8ff; border-color:rgba(14,165,233,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18);
}
.site-mock--tint .mock-chip:nth-child(1){grid-row:span 2; display:grid; align-content:center}
.site-mock--tint .mock-chip:nth-child(3){background:linear-gradient(135deg,rgba(14,165,233,.25), rgba(10,18,34,.75))}
.site-mock--tint .site-mock__rows div{background:linear-gradient(90deg,#0f172a,#1e293b,#0ea5e9); opacity:.55}

/* Interactive profile */
.site-mock--profile{background:linear-gradient(180deg,#f9f7ff,#ffffff)}
.site-mock--profile .site-mock__hero{
  color:#1f1b3a;
  background:
    radial-gradient(260px 120px at 85% 0%, rgba(139,92,246,.18), transparent 70%),
    linear-gradient(135deg,#ede9fe,#ffffff 55%, #f5f3ff);
}
.site-mock--profile .site-mock__hero::after{
  opacity:.7;
  background:
    linear-gradient(90deg, rgba(139,92,246,.12), rgba(139,92,246,0) 26%),
    repeating-linear-gradient(0deg, rgba(139,92,246,.05) 0 1px, transparent 1px 16px);
}
.site-mock--profile .site-mock__badge{background:rgba(139,92,246,.1); color:#5b21b6; border-color:rgba(139,92,246,.18)}
.site-mock--profile .site-mock__hero p{color:#5b647a; opacity:1}
.site-mock--profile .site-mock__grid{grid-template-columns:1fr 1fr; gap:10px}
.site-mock--profile .mock-chip{background:#fff; border-color:#ede9fe; color:#4c1d95; box-shadow:0 8px 16px rgba(139,92,246,.08)}
.site-mock--profile .mock-chip:nth-child(1){grid-column:span 2; background:linear-gradient(180deg,#faf5ff,#fff)}
.site-mock--profile .site-mock__rows div{background:linear-gradient(90deg,#ddd6fe,#f3e8ff)}

/* Perfume store */
.site-mock--perfume{background:linear-gradient(180deg,#fff7fb,#fff)}
.site-mock--perfume .site-mock__hero{
  background:
    radial-gradient(280px 140px at 15% 10%, rgba(251,207,232,.34), transparent 70%),
    linear-gradient(150deg,#831843,#be185d 45%, #f472b6);
}
.site-mock--perfume .site-mock__hero::after{
  background:
    radial-gradient(12px 12px at 20% 40%, rgba(255,255,255,.22), transparent 65%),
    radial-gradient(8px 8px at 38% 28%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(10px 10px at 72% 36%, rgba(255,255,255,.16), transparent 70%);
}
.site-mock--perfume .site-mock__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.site-mock--perfume .mock-chip{
  height:62px; display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(180deg,#fff,#fff5fa); border-color:rgba(236,72,153,.12);
  color:#9d174d; font-size:11px;
}
.site-mock--perfume .mock-chip:nth-child(2){grid-column:span 2; background:linear-gradient(180deg,#fdf2f8,#fff)}
.site-mock--perfume .mock-chip:nth-child(4){border-radius:12px 22px 12px 22px}
.site-mock--perfume .site-mock__rows div{background:linear-gradient(90deg,#fbcfe8,#fdf2f8)}

/* Oils store */
.site-mock--oils{background:linear-gradient(180deg,#05120b,#0d1b14)}
.site-mock--oils .site-mock__hero{
  background:
    linear-gradient(115deg, rgba(34,197,94,.15) 0 35%, transparent 35% 100%),
    linear-gradient(150deg,#052e16,#14532d 50%, #22c55e);
}
.site-mock--oils .site-mock__hero::after{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px);
}
.site-mock--oils .site-mock__grid{grid-template-columns:1fr 1fr; gap:8px}
.site-mock--oils .mock-chip{
  background:rgba(6,18,12,.8); color:#dcfce7; border-color:rgba(34,197,94,.22);
  border-radius:10px; box-shadow:none;
}
.site-mock--oils .mock-chip:nth-child(1), .site-mock--oils .mock-chip:nth-child(3){background:linear-gradient(135deg,rgba(34,197,94,.18), rgba(6,18,12,.9))}
.site-mock--oils .site-mock__rows div{background:linear-gradient(90deg,#064e3b,#166534,#22c55e); opacity:.5}

/* Showroom */
.site-mock--showroom .site-mock__hero{
  background:
    radial-gradient(260px 120px at 70% 0%, rgba(245,158,11,.22), transparent 65%),
    linear-gradient(155deg,#1f2937,#0f172a 55%, #78350f);
}
.site-mock--showroom .site-mock__hero::after{
  background:
    linear-gradient(0deg, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(90deg, rgba(245,158,11,.12) 0 28%, transparent 28% 100%);
}
.site-mock--showroom .site-mock__badge{background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.25)}
.site-mock--showroom .site-mock__grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.site-mock--showroom .mock-chip{border-radius:10px; background:#fff; font-size:11px; min-height:44px; display:grid; place-items:center; text-align:center}
.site-mock--showroom .mock-chip:nth-child(1){grid-column:span 3; background:linear-gradient(180deg,#fffbeb,#fff)}
.site-mock--showroom .mock-chip:nth-child(4){grid-column:span 2}
.site-mock--showroom .site-mock__rows div{background:linear-gradient(90deg,#fde68a,#fef3c7)}

/* Landing page */
.site-mock--landing .site-mock__hero{
  background:
    radial-gradient(220px 100px at 85% 12%, rgba(254,226,226,.16), transparent 65%),
    linear-gradient(150deg,#7f1d1d,#b91c1c 45%, #ef4444);
}
.site-mock--landing .site-mock__hero::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 0 34%, transparent 34% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
}
.site-mock--landing .site-mock__grid{grid-template-columns:1.1fr .9fr; grid-auto-rows:44px; gap:8px}
.site-mock--landing .mock-chip{border-radius:12px; background:#fff; font-size:11px; box-shadow:0 6px 14px rgba(127,29,29,.08)}
.site-mock--landing .mock-chip:nth-child(1){grid-row:span 2; display:grid; align-content:center; background:linear-gradient(180deg,#fff,#fef2f2)}
.site-mock--landing .mock-chip:nth-child(2){background:linear-gradient(180deg,#fee2e2,#fff)}
.site-mock--landing .site-mock__rows div{background:linear-gradient(90deg,#fecaca,#fee2e2)}

/* ===== Website catalog cards with more diverse styles ===== */
.website-card{position:relative; overflow:hidden}
.website-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent,#0ea5e9), color-mix(in srgb, var(--accent,#0ea5e9) 30%, white));
  opacity:.85;
}
.website-card__preview{position:relative}
.website-card__preview::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background:radial-gradient(circle at 85% 15%, var(--accent,#0ea5e9), transparent 45%)}
.website-card__head{position:relative}
.website-card__kicker{letter-spacing:.2px}

.website-card--cars{background:linear-gradient(180deg,#fff,#fbfdff)}
.website-card--cars .website-card__preview{background:linear-gradient(180deg,#f8fbff,#eef4ff)}
.website-card__preview--cars .wc-nav{width:58%; background:linear-gradient(90deg,#c7d2fe,#e2e8f0)}
.website-card__preview--cars .wc-hero{height:78px; background:linear-gradient(135deg,#0f172a,#1d4ed8,#f97316)}
.website-card__preview--cars .wc-grid{grid-template-columns:repeat(3,1fr)}
.website-card__preview--cars .wc-grid span:nth-child(1){grid-column:span 2; background:#fff7ed}
.website-card__preview--cars .wc-grid span:nth-child(2){background:#eff6ff}
.website-card__preview--cars .wc-grid span:nth-child(4){grid-column:span 2; height:32px}
.website-card__preview--cars .wc-row{background:linear-gradient(90deg,#cbd5e1,#e2e8f0)}

.website-card--tint{background:linear-gradient(180deg,#fbfeff,#f5fbff)}
.website-card--tint .website-card__dot{box-shadow:0 0 0 5px rgba(0,194,255,.12)}
.website-card__preview--tint{background:linear-gradient(180deg,#07101c,#0f172a); border-color:rgba(2,6,23,.2)}
.website-card__preview--tint .wc-nav{width:46%; background:rgba(148,163,184,.35)}
.website-card__preview--tint .wc-hero{height:82px; background:linear-gradient(135deg,#020617,#0ea5e9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.website-card__preview--tint .wc-grid{grid-template-columns:1.2fr .8fr}
.website-card__preview--tint .wc-grid span{background:rgba(255,255,255,.05); border-color:rgba(14,165,233,.25)}
.website-card__preview--tint .wc-grid span:nth-child(1){grid-row:span 2}
.website-card__preview--tint .wc-row{background:linear-gradient(90deg,rgba(14,165,233,.45), rgba(148,163,184,.25))}

.website-card--profile{background:linear-gradient(180deg,#ffffff,#fcfaff)}
.website-card__preview--profile{background:linear-gradient(180deg,#fff,#faf7ff)}
.website-card__preview--profile .wc-nav{width:38%; background:linear-gradient(90deg,#c4b5fd,#e9d5ff)}
.website-card__preview--profile .wc-hero{height:70px; background:linear-gradient(135deg,#ede9fe,#faf5ff); border:1px solid #e9d5ff}
.website-card__preview--profile .wc-grid{grid-template-columns:repeat(2,1fr)}
.website-card__preview--profile .wc-grid span{background:#fff; border-color:#ede9fe}
.website-card__preview--profile .wc-grid span:nth-child(1){grid-column:span 2; height:28px; background:#faf5ff}
.website-card__preview--profile .wc-row{background:linear-gradient(90deg,#ddd6fe,#f3e8ff)}

.website-card--perfume{background:linear-gradient(180deg,#fff,#fff7fb)}
.website-card__preview--perfume{background:linear-gradient(180deg,#fff8fc,#fff);}
.website-card__preview--perfume .wc-nav{width:52%; background:linear-gradient(90deg,#f9a8d4,#fbcfe8)}
.website-card__preview--perfume .wc-hero{height:78px; background:linear-gradient(135deg,#831843,#be185d,#f472b6)}
.website-card__preview--perfume .wc-grid{grid-template-columns:repeat(4,1fr); gap:6px}
.website-card__preview--perfume .wc-grid span{height:44px; border-radius:14px; background:linear-gradient(180deg,#fff,#fdf2f8); border-color:#fbcfe8}
.website-card__preview--perfume .wc-grid span:nth-child(2){grid-column:span 2}
.website-card__preview--perfume .wc-row{background:linear-gradient(90deg,#fbcfe8,#fdf2f8)}

.website-card--oils{background:linear-gradient(180deg,#fbfffc,#f7fff8)}
.website-card__preview--oils{background:linear-gradient(180deg,#07140d,#0f1f16); border-color:rgba(34,197,94,.15)}
.website-card__preview--oils .wc-nav{width:60%; background:rgba(148,163,184,.28)}
.website-card__preview--oils .wc-hero{height:74px; background:linear-gradient(135deg,#052e16,#166534,#22c55e)}
.website-card__preview--oils .wc-grid{grid-template-columns:repeat(2,1fr)}
.website-card__preview--oils .wc-grid span{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.2)}
.website-card__preview--oils .wc-grid span:nth-child(3){background:rgba(255,255,255,.06)}
.website-card__preview--oils .wc-row{background:linear-gradient(90deg,rgba(34,197,94,.45), rgba(148,163,184,.2))}

.website-card--showroom{background:linear-gradient(180deg,#fff,#fffbf2)}
.website-card__preview--showroom{background:linear-gradient(180deg,#fffdf8,#fff)}
.website-card__preview--showroom .wc-nav{width:44%; background:linear-gradient(90deg,#fcd34d,#fde68a)}
.website-card__preview--showroom .wc-hero{height:84px; background:linear-gradient(135deg,#111827,#1f2937,#6d28d9)}
.website-card__preview--showroom .wc-grid{grid-template-columns:repeat(3,1fr)}
.website-card__preview--showroom .wc-grid span{background:#fff; border-color:#fde68a}
.website-card__preview--showroom .wc-grid span:nth-child(1){grid-column:span 3; height:28px; background:#fffbeb}
.website-card__preview--showroom .wc-row{background:linear-gradient(90deg,#fde68a,#fef3c7)}

.website-card--landing{background:linear-gradient(180deg,#fff,#fff7f7)}
.website-card__preview--landing{background:linear-gradient(180deg,#fff,#fff8f8)}
.website-card__preview--landing .wc-nav{width:32%; background:linear-gradient(90deg,#fca5a5,#fecaca)}
.website-card__preview--landing .wc-hero{height:82px; background:linear-gradient(135deg,#7f1d1d,#dc2626,#ef4444)}
.website-card__preview--landing .wc-grid{grid-template-columns:1.2fr .8fr}
.website-card__preview--landing .wc-grid span{background:#fff; border-color:#fecaca}
.website-card__preview--landing .wc-grid span:nth-child(1){grid-row:span 2; background:#fef2f2}
.website-card__preview--landing .wc-row{background:linear-gradient(90deg,#fecaca,#fee2e2)}

/* Small polish for card footer arrow */
.website-card__footer span:last-child{font-size:18px; transition:transform .2s ease}
.website-card:hover .website-card__footer span:last-child{transform:translateX(-4px)}

@media (max-width: 640px){
  .social-rail__btn svg{width:18px;height:18px}
  .site-mock--cars .site-mock__grid,
  .site-mock--perfume .site-mock__grid,
  .site-mock--showroom .site-mock__grid{grid-template-columns:repeat(2,1fr)}
  .site-mock--cars .mock-chip:nth-child(1),
  .site-mock--cars .mock-chip:nth-child(4),
  .site-mock--showroom .mock-chip:nth-child(1){grid-column:span 2}
}

/* ===== Demo site pages: stronger per-niche visual differentiation ===== */
.demo-page[class*="demo-page--"] .demo-hero__visual{position:relative; overflow:hidden}
.demo-page[class*="demo-page--"] .demo-hero__visual::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45}
.demo-page[class*="demo-page--"] .dv-grid{position:relative; z-index:1}

.demo-page--cars .demo-hero__content{
  background:linear-gradient(140deg,#0f172a,#1d4ed8 58%, #f97316);
}
.demo-page--cars .demo-hero__visual{
  background:linear-gradient(160deg,#f8fbff,#eef4ff);
}
.demo-page--cars .demo-hero__visual::after{
  background:repeating-linear-gradient(90deg, rgba(59,130,246,.08) 0 2px, transparent 2px 18px);
}
.demo-page--cars .dv-grid{grid-template-columns:repeat(3,1fr)}
.demo-page--cars .dv-grid span:nth-child(1){grid-column:span 2}
.demo-page--cars .demo-banner{border-color:rgba(249,115,22,.2)}

.demo-page--tint .demo-shell{background:linear-gradient(180deg,#fbfdff,#f7fbff)}
.demo-page--tint .demo-hero__content{background:linear-gradient(145deg,#020617,#0ea5e9)}
.demo-page--tint .demo-hero__visual{background:linear-gradient(160deg,#08101d,#0b1324)}
.demo-page--tint .demo-hero__visual::after{
  background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.12) 18%, transparent 26%, transparent 48%, rgba(0,194,255,.18) 56%, transparent 64%);
}
.demo-page--tint .dv-grid span{background:rgba(255,255,255,.04); border-color:rgba(0,194,255,.16)}
.demo-page--tint .demo-product__media{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

.demo-page--profile .demo-shell{background:linear-gradient(180deg,#fff,#fcfaff)}
.demo-page--profile .demo-header{background:linear-gradient(180deg,#fff,#faf7ff)}
.demo-page--profile .demo-nav a{background:#fff; border-color:#ede9fe}
.demo-page--profile .demo-nav__cta{background:#7c3aed}
.demo-page--profile .demo-hero__content{background:linear-gradient(145deg,#4c1d95,#7c3aed,#a78bfa)}
.demo-page--profile .demo-hero__visual{background:linear-gradient(160deg,#fff,#faf7ff)}
.demo-page--profile .demo-hero__visual::after{background:repeating-linear-gradient(0deg, rgba(139,92,246,.06) 0 1px, transparent 1px 16px)}
.demo-page--profile .demo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}

.demo-page--perfume .demo-shell{background:linear-gradient(180deg,#fff,#fff7fb)}
.demo-page--perfume .demo-hero__content{background:linear-gradient(145deg,#831843,#be185d,#f472b6)}
.demo-page--perfume .demo-hero__visual{background:linear-gradient(160deg,#fff6fb,#fff)}
.demo-page--perfume .demo-hero__visual::after{
  background:radial-gradient(12px 12px at 20% 35%, rgba(244,114,182,.12), transparent 70%), radial-gradient(10px 10px at 70% 25%, rgba(190,24,93,.12), transparent 70%);
}
.demo-page--perfume .dv-grid{grid-template-columns:repeat(4,1fr)}
.demo-page--perfume .dv-grid span{border-radius:16px; height:58px}
.demo-page--perfume .demo-product__media{border-radius:22px}

.demo-page--oils .demo-shell{background:linear-gradient(180deg,#f8fff9,#f5fff7)}
.demo-page--oils .demo-hero__content{background:linear-gradient(145deg,#052e16,#166534,#22c55e)}
.demo-page--oils .demo-hero__visual{background:linear-gradient(160deg,#07140d,#0f1f16)}
.demo-page--oils .demo-hero__visual::after{background:repeating-linear-gradient(135deg, rgba(34,197,94,.12) 0 2px, transparent 2px 12px)}
.demo-page--oils .dv-grid span{background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.18)}
.demo-page--oils .demo-banner{background:linear-gradient(135deg,#ecfdf5,#fff)}

.demo-page--showroom .demo-shell{background:linear-gradient(180deg,#fffdfa,#fffbf2)}
.demo-page--showroom .demo-hero__content{background:linear-gradient(145deg,#111827,#1f2937,#6d28d9)}
.demo-page--showroom .demo-hero__visual{background:linear-gradient(160deg,#fffef8,#fff)}
.demo-page--showroom .demo-hero__visual::after{background:linear-gradient(0deg, rgba(245,158,11,.08), transparent 65%)}
.demo-page--showroom .dv-grid{grid-template-columns:repeat(3,1fr)}
.demo-page--showroom .dv-grid span:nth-child(1){grid-column:span 3; height:52px}
.demo-page--showroom .demo-product button{background:#fffbeb}

.demo-page--landing .demo-shell{background:linear-gradient(180deg,#fff,#fff8f8)}
.demo-page--landing .demo-hero__content{background:linear-gradient(145deg,#7f1d1d,#dc2626,#ef4444)}
.demo-page--landing .demo-hero__visual{background:linear-gradient(160deg,#fff,#fff5f5)}
.demo-page--landing .demo-hero__visual::after{
  background:linear-gradient(90deg, rgba(239,68,68,.08) 0 36%, transparent 36% 100%), repeating-linear-gradient(0deg, rgba(239,68,68,.05) 0 1px, transparent 1px 12px);
}
.demo-page--landing .dv-grid{grid-template-columns:1.2fr .8fr}
.demo-page--landing .dv-grid span:nth-child(1){grid-row:span 2}
.demo-page--landing .demo-banner{border-color:rgba(239,68,68,.18)}

@media (max-width: 860px){
  .demo-page--profile .demo-tiles{grid-template-columns:1fr}
  .demo-page--perfume .dv-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== v7 fixes: programs colors + image portfolio galleries ===== */
.page-programs .catalog-grid .system-card{
  color: var(--text);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 26px rgba(2,6,23,.08);
  backdrop-filter:none;
}
.page-programs .catalog-grid .system-card:hover{
  box-shadow: 0 18px 30px rgba(2,6,23,.12);
  border-color: rgba(37,99,235,.18);
}
.page-programs .catalog-grid .system-card__icon{
  background: linear-gradient(135deg,#eef2ff,#f8fafc);
  border:1px solid rgba(99,102,241,.10);
}
.page-programs .catalog-grid .system-card h3{color:#0f172a}
.page-programs .catalog-grid .system-card p{color:#475569}
.page-programs .catalog-grid .system-card__footer{color:#1e3a8a}
.page-programs .catalog-grid .system-card__badge{background:rgba(209,173,58,.12); border-color:rgba(209,173,58,.22)}
.page-programs .catalog-grid .system-card__badge--soft{
  background:rgba(30,64,175,.06);
  color:#1e3a8a;
  border-color:rgba(30,64,175,.12);
}

.section--websites-gallery{padding-top:32px}
.portfolio-groups{display:grid; gap:18px}
.portfolio-group{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid rgba(15,23,42,.06);
  border-radius:24px;
  padding:14px;
  box-shadow:0 16px 28px rgba(2,6,23,.06);
  position:relative;
  overflow:hidden;
}
.portfolio-group::before{
  content:""; position:absolute; inset:auto -40px -40px auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at center, var(--group-accent), transparent 70%);
  opacity:.08; pointer-events:none;
}
.portfolio-group__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
  position:relative; z-index:1;
}
.portfolio-group__title{margin:0; font-size:20px; font-weight:900; color:#0f172a}
.portfolio-group__domain{
  color:var(--group-accent); text-decoration:none; font-weight:800; font-size:13px;
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:999px; padding:6px 10px;
}
.showcase-slider--portfolio{
  border-radius:20px; border:1px solid rgba(15,23,42,.06); background:#fff; box-shadow:none;
}
.showcase-slider--portfolio .showcase-slider__viewport{background:#0b1220}
.showcase-slider--portfolio .site-slide{height:430px}
.showcase-slider--thumbs .site-slide{height:380px}
.site-slide--portfolio{display:block; min-width:100%; position:relative; color:#fff; text-decoration:none; overflow:hidden; background:#0b1220}
.site-slide--portfolio img{width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.01); transition:transform 1.2s ease, filter .45s ease; filter:saturate(1.04)}
.site-slide--portfolio:hover img{transform:scale(1.035); filter:saturate(1.08)}
.site-slide--portfolio::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,.06) 0%, rgba(2,6,23,.08) 44%, rgba(2,6,23,.54) 100%); pointer-events:none}
.portfolio-slide-overlay{position:absolute; inset:auto 16px 16px 16px; z-index:3; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); border-radius:14px; padding:10px 12px}
.portfolio-slide-overlay__title{font-weight:900; font-size:16px; color:#fff}
.portfolio-slide-overlay__meta{font-size:12px; color:rgba(255,255,255,.9); margin-top:2px}
.page-websites .showcase-slider--portfolio .showcase-slider__controls{padding:10px 12px 12px; background:linear-gradient(180deg,#fff,#f8fafc)}
.page-websites .showcase-slider--portfolio .slider-btn{background:#fff; border:1px solid rgba(15,23,42,.08); color:#1e293b; box-shadow:none}
@media (max-width: 980px){
  .portfolio-group{padding:10px}
  .portfolio-group__head{align-items:flex-start; flex-direction:column; gap:8px}
  .portfolio-group__title{font-size:18px}
  .showcase-slider--portfolio .site-slide{height:300px}
  .showcase-slider--thumbs .site-slide{height:260px}
  .portfolio-slide-overlay{inset:auto 10px 10px 10px; padding:8px 10px}
  .portfolio-slide-overlay__title{font-size:14px}
}


/* ===== v10 mobile polish fixes (cards/header/social) ===== */
/* 1) No tilted cards anywhere */
.reveal[data-anim="tilt"],
.reveal[data-anim="rise-rotate"]{
  transform: translateY(16px) scale(.985) !important;
}
.reveal.is-visible[data-anim="tilt"],
.reveal.is-visible[data-anim="rise-rotate"]{
  transform:none !important;
}

/* 2) Make stacked cards straight, equal, and spaced */
.stack{
  display:grid;
  gap:14px;
}
.stack .card,
.grid .card{
  min-height:92px;
  align-items:center;
}
.card{
  border-radius:20px;
}
.card > div:last-child{flex:1; min-width:0}
.card__title{line-height:1.2}
.card__sub{line-height:1.45}
.pill__icon{
  width:40px;
  height:40px;
  font-size:18px;
  background:linear-gradient(180deg, rgba(209,173,58,.17), rgba(209,173,58,.10));
  box-shadow: inset 0 0 0 1px rgba(209,173,58,.18);
}

/* 3) Header color same family as hero (remove white strip look) */
.header{
  background: linear-gradient(180deg, rgba(5,9,20,.96), rgba(7,12,24,.92)) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}
.brand__name,
.nav__link,
.nav-dropdown__menu a{color:#e5edf7 !important}
.brand__sub{color:rgba(229,237,247,.78) !important; opacity:1 !important}
.nav__link:hover{background:rgba(255,255,255,.06) !important}
.nav__link.is-active{color:#fff !important}
.nav__link.is-active::after{background:var(--gold) !important}
.icon-btn{color:#e5edf7}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.nav--mobile{background:rgba(7,12,24,.98); border-top:1px solid rgba(255,255,255,.06); border-radius:0 0 16px 16px; padding:8px}
.nav--mobile a{color:#e5edf7}
.nav--mobile a:hover{background:rgba(255,255,255,.06)}

/* 4) Better social placement: desktop side center, mobile bottom floating row */
.social-rail{
  top:50% !important;
  right:14px !important;
  left:auto !important;
  transform:translateY(-50%);
  z-index:1100;
}
@media (max-width:980px){
  .social-rail{
    top:auto !important;
    right:50% !important;
    left:auto !important;
    bottom:86px;
    transform:translateX(50%);
    flex-direction:row;
    gap:10px;
    padding:8px;
    border-radius:18px;
    background:rgba(4,7,15,.34);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .social-rail__btn{
    width:42px;
    height:42px;
    border-radius:14px;
  }
}
@media (max-width:480px){
  .social-rail{bottom:92px; gap:8px; padding:7px}
  .social-rail__btn{width:40px;height:40px;border-radius:13px}
}

/* 5) WhatsApp icon clarity */
.social-rail__btn--wa .icon-stroke path:first-child{fill:none; stroke:currentColor;}
.social-rail__btn--wa .icon-stroke path:last-child{fill:currentColor; stroke:none;}

/* 6) Keep contact/cards spacing on mobile */
@media (max-width:640px){
  .grid{gap:14px}
  .contactcards,
  .cards-grid,
  .systems-grid,
  .overview-grid{gap:14px !important}
}

/* === v15 mobile social dock + contact spacing fixes === */
@media (max-width: 768px){
  .social-rail{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    transform: translateX(-50%) !important;
    z-index: 1200 !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    background: rgba(22,24,30,.72) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .social-rail a{
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
  }
  .social-rail a img, .social-rail a svg{ width: 24px !important; height: 24px !important; }
  body{ padding-bottom: 96px; }
}

.contact-grid, .contact-cards{ gap: 16px !important; }
.contact-card{
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.contact-card__icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.28);
  font-size: 22px;
  line-height: 1;
}
#contact .section__grid,
#contact .grid,
#contact .contact-grid{ margin-bottom: 18px; }
#contact .contact-card + .contact-card{ margin-top: 0 !important; }

/* dropdown visibility on white menu */
.nav-dropdown__menu a,
.nav__menu .submenu a,
.menu-dropdown a,
.dropdown-menu a{
  color: #111 !important;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav__menu .submenu a:hover,
.menu-dropdown a:hover,
.dropdown-menu a:hover{
  color: #000 !important;
  background: #f2f4f8 !important;
}

/* demo websites enhancement */
.demo-page .demo-hero__visual,
.demo-page .demo-banner,
.demo-page .demo-product__media{
  overflow: hidden;
  position: relative;
}
.demo-page .demo-hero__visual::before,
.demo-page .demo-banner::before,
.demo-page .demo-product__media::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform .8s ease;
}
.demo-page .demo-hero__visual::after,
.demo-page .demo-banner::after,
.demo-page .demo-product__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,16,.08), rgba(5,8,16,.42));
}
.demo-page .demo-hero__visual > *,
.demo-page .demo-banner > *,
.demo-page .demo-product__media > *{ position: relative; z-index: 1; }
.demo-page .demo-product:hover .demo-product__media::before,
.demo-page .demo-hero:hover .demo-hero__visual::before{ transform: scale(1.08); }
.demo-page .demo-card,
.demo-page .demo-product,
.demo-page .demo-banner,
.demo-page .demo-gallery__item{
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
  animation: demoFadeUp .7s ease both;
}
.demo-page .demo-card:hover,
.demo-page .demo-product:hover,
.demo-page .demo-banner:hover,
.demo-page .demo-gallery__item:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 35px rgba(0,0,0,.12);
}
.demo-page .demo-product:nth-child(2){ animation-delay: .08s; }
.demo-page .demo-product:nth-child(3){ animation-delay: .16s; }
.demo-page .demo-product:nth-child(4){ animation-delay: .24s; }
@keyframes demoFadeUp{ from{opacity:0; transform: translateY(16px)} to{opacity:1; transform:none} }

/* Cars demo */
.demo-page--cars .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(1) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(2) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1549399542-7e3f8b79c341?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(3) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1617531653332-bd46c24f2068?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--cars .demo-product:nth-child(4) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1583121274602-3e2820c69888?q=80&w=1200&auto=format&fit=crop'); }

/* Perfume demo */
.demo-page--perfumes .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1594035910387-fea47794261f?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1523293182086-7651a899d37f?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(1) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1541643600914-78b084683601?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(2) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1615634262417-d9bff2da1a97?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(3) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1563170351-be82bc888aa4?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--perfumes .demo-product:nth-child(4) .demo-product__media::before{ background-image:url('https://images.unsplash.com/photo-1588405748880-12d1d2a59d75?q=80&w=1200&auto=format&fit=crop'); }

/* Generic demo images for the rest */
.demo-page--fashion .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1445205170230-053b83016050?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--fashion .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--coffee .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--coffee .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--restaurant .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--restaurant .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--realestate .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--realestate .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--clinic .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--clinic .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1584515933487-779824d29309?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--gym .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--gym .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--beauty .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--beauty .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--education .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--education .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--electronics .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--electronics .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--travel .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--travel .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1467269204594-9661b134dd2b?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--events .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--events .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=1400&auto=format&fit=crop'); }
.demo-page--interior .demo-hero__visual::before{ background-image:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop'); }
.demo-page--interior .demo-banner::before{ background-image:url('https://images.unsplash.com/photo-1493666438817-866a91353ca9?q=80&w=1400&auto=format&fit=crop'); }
/* contact exact class overrides */
#contact .grid.grid--4{ gap:16px !important; margin-bottom: 12px !important; }
#contact .contactcard{ min-height:132px !important; height:auto !important; }
#contact .contactcard__icon{ width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.25); }
#contact + .section, #contact .section__head + .grid{ margin-top: 0; }
.brands-cloud{ gap: 14px !important; }
.brand-tile{ min-height: 84px; }


/* === v20 cleanup: remove websites tab, mobile social rail under banner, equal card heights === */
@media (max-width: 768px){
  .hero-mini-stats{grid-template-columns:1fr;gap:12px;margin-top:14px;}
  .hero-mini-stats .mini-stat{min-height:88px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;}
  .hero-mini-stats .mini-stat h4{margin:0 0 6px;line-height:1.15;}
  .hero-mini-stats .mini-stat p{margin:0;line-height:1.25;}

  /* put social icons as a local block under banner on mobile (not sticky while scrolling) */
  .social-rail{position:static !important;inset:auto !important;transform:none !important;display:flex;justify-content:center;align-items:center;gap:10px;
    margin:14px auto 8px !important;padding:10px 14px;width:max-content;max-width:calc(100% - 28px);border-radius:24px;
    background:rgba(18,24,39,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 22px rgba(0,0,0,.18);z-index:3;}
  .social-rail a{width:42px;height:42px;border-radius:14px;font-size:20px;display:grid;place-items:center;}
}

/* desktop/social general sizing polish */
.social-rail a{transition:transform .18s ease, box-shadow .18s ease;}
.social-rail a:hover{transform:translateY(-2px);}

/* if any hidden empty sites tab controls remain */
#sites-tab,[data-target="sites-tab"]{display:none !important;}

/* v21 fixes */
.hero-title{line-height:1.16;letter-spacing:0}
.hero-badge__sub:empty{display:none}
@media (max-width: 768px){
  .mini-stat{min-height:120px !important;display:flex;flex-direction:column;justify-content:center;}
  .mini-stat:nth-child(2){min-height:120px !important;}
  .hero + .social-rail{position:static !important;margin:-18px auto 14px;width:fit-content;top:auto;left:auto;right:auto;bottom:auto;z-index:5;transform:none;}
  .hero + .social-rail .social-rail__inner{padding:8px 10px;gap:8px;border-radius:22px;}
  .hero + .social-rail .social-link{width:46px;height:46px;border-radius:14px;}
}


/* === v22 tweaks === */
.hero-chip{display:none !important;}
.hero__content{position:relative;z-index:4;}
.hero__title{line-height:1.16;letter-spacing:0;}
.hero__title .line{display:block;position:relative;z-index:2;}
.hero__overlay--network{opacity:.28;}
.hero__stars{opacity:.55;}
.hero__title::before,.hero__title::after{display:none !important;}

.services__card{min-height:160px;}
@media (max-width: 768px){
  .services__cards .services__card{min-height:142px;}
  .services__card h3{font-size:1.15rem;}
  .social-rail{
    position:relative !important;
    inset:auto !important;
    top:auto !important; right:auto !important; left:auto !important;
    transform:none !important;
    width:max-content;
    margin:10px auto 18px;
    padding:10px 12px;
    border-radius:22px;
    background:rgba(22,28,42,.86);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:3;
  }
  .social-rail__list{gap:10px;}
  .social-rail__btn{width:46px;height:46px;border-radius:14px;}
  .social-rail__btn img,.social-rail__btn svg{width:22px;height:22px;}
}

.design-lightbox{position:fixed;inset:0;background:rgba(5,10,20,.9);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.design-lightbox.is-open{display:flex;}
.design-lightbox__stage{max-width:min(92vw,1100px);max-height:84vh;display:flex;align-items:center;justify-content:center;}
.design-lightbox__stage img{max-width:100%;max-height:84vh;border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45);background:#fff;object-fit:contain;}
.design-lightbox__close,.design-lightbox__nav{position:absolute;border:none;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);cursor:pointer;}
.design-lightbox__close{top:18px;right:18px;width:44px;height:44px;border-radius:12px;font-size:20px;}
.design-lightbox__nav{top:50%;transform:translateY(-50%);width:46px;height:56px;border-radius:14px;font-size:36px;line-height:1;}
.design-lightbox__nav--prev{right:calc(50% + min(46vw,560px));margin-right:10px;}
.design-lightbox__nav--next{left:calc(50% + min(46vw,560px));margin-left:10px;}
@media (max-width:768px){
  .design-lightbox__nav--prev{right:10px;}
  .design-lightbox__nav--next{left:10px;}
  .design-lightbox__nav{width:40px;height:48px;font-size:28px;border-radius:12px;}
  .design-lightbox__close{top:10px;right:10px;}
}

@media (max-width: 768px){
  .hero-mini-stats{grid-auto-rows:1fr;}
  .hero-mini-stats .mini-stat{min-height:132px;height:100%;display:flex;flex-direction:column;justify-content:center;}
  .hero-mini-stats .mini-stat h3{line-height:1.2;}
  .hero-title .accent, .hero-title, .hero-subtitle{position:relative;z-index:3;}
  .hero-bg-dots, .hero-particle, .hero-chip::before, .hero-chip::after{display:none !important;}
}

/* v25 social icons smaller + circle style */
.social-rail__btn{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  padding:0 !important;
}
.social-rail__btn img,
.social-rail__btn svg{
  width:18px !important;
  height:18px !important;
}
@media (max-width: 840px){
  .social-rail{gap:6px !important;}
  .social-rail__btn{
    width:34px !important;
    height:34px !important;
    border-radius:999px !important;
  }
  .social-rail__btn img,
  .social-rail__btn svg{
    width:15px !important;
    height:15px !important;
  }
}

/* ===== SEO content blocks ===== */
.faq-list{display:grid;gap:12px}
.faq-item{background:rgba(255,255,255,.92);border:1px solid rgba(43,24,69,.08);border-radius:16px;padding:0 14px;box-shadow:0 8px 20px rgba(17,24,39,.05)}
.faq-item summary{cursor:pointer;list-style:none;font-weight:800;padding:14px 4px;color:#2b1845}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 4px 14px;margin:0;line-height:1.9}
.section--soft{background:linear-gradient(180deg, rgba(92,63,140,.03), rgba(92,63,140,.06))}
.breadcrumbs{font-size:13px;color:#64748b;margin:8px 0 12px}
.breadcrumbs a{color:#5b42f3;text-decoration:none}
.article-content{max-width:900px;margin-inline:auto}
.article-content h2,.article-content h3{margin-top:22px;color:#2b1845}
.article-content ul{padding-inline-start:22px;line-height:1.9}
.article-content .article-box{background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:16px;padding:14px 16px;box-shadow:0 8px 24px rgba(2,6,23,.04);margin-bottom:14px}
.article-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}


.table th,.table td{border:1px solid rgba(255,255,255,.1);padding:10px 12px;text-align:right;vertical-align:top}.table thead th{background:rgba(123,77,255,.12)}
.article-content h3{margin:14px 0 8px;font-size:1.02rem}.article-content ol{padding-right:20px}.article-content ol li{margin:6px 0}




/* ===== Blog SEO expansion v7 ===== */
.toc ol{margin:0;padding-right:18px;line-height:1.95}
.toc a{text-decoration:none;color:#4338ca}
.toc a:hover{text-decoration:underline}
.article-meta__row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(91,66,243,.08);border:1px solid rgba(91,66,243,.18);color:#2b1845;text-decoration:none;font-weight:700}
.chip a{text-decoration:none}
.chip--soft{background:rgba(43,24,69,.04);border-color:rgba(43,24,69,.08)}
.article-cta-inline{display:flex;flex-wrap:wrap;gap:10px}
.article-floating-cta{position:fixed;left:16px;bottom:16px;z-index:45}
.article-floating-cta a{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.article-list{padding-right:20px;line-height:1.9}
.article-list a{text-decoration:none;color:#4338ca}
.cta-fixed-block{border:1px solid rgba(91,66,243,.18);background:linear-gradient(180deg, rgba(91,66,243,.04), rgba(91,66,243,.02))}
@media (max-width:640px){
  .article-floating-cta{left:12px;right:12px;bottom:10px}
  .article-floating-cta a{width:100%;justify-content:center}
}
/* ===== v12 safe article/blog styles + text readability (no global layout hacks) ===== */
.article-content p{margin:0 0 12px; line-height:1.9;}
.article-content h2{margin:24px 0 10px;}
.article-content h3{margin:16px 0 8px;}
.article-content ul li,.article-content ol li{margin:4px 0;}
p, li{word-break:normal; overflow-wrap:break-word;}
.reveal{will-change:transform,opacity;}


/* ===== v13.1 hotfix: banner typography + purple bubbles text + orange accents ===== */
:root{
  --accent-orange:#f97316;
}
/* Purple bubbles/chips: text must stay white */
.hero-chip, .hero__badge, .system-card__badge, .chip, .tag{
  color:#fff;
}
.hero-chip a, .hero__badge a, .chip a, .tag a{color:inherit;}
/* Orange accents (dots / stars / small icons) */
.hero-chip::before,
.hero-node::before,
.pill__icon,
.hero-badge__icon,
.hero__badge .pill__icon{
  color:#fff;
}
.hero-chip::before,
.hero-node::before{
  background:var(--accent-orange) !important;
  box-shadow:0 0 0 5px rgba(249,115,22,.16);
}
.pill__icon{
  background:rgba(249,115,22,.16) !important;
  color:var(--accent-orange) !important;
}
/* Top hero banner typography fix */
.hero__content{padding-inline:18px;}
.hero__title{
  font-size:clamp(26px,3.2vw,46px) !important;
  line-height:1.38 !important;
  letter-spacing:0 !important;
  max-width:min(920px,100%);
  margin-inline:auto;
  text-wrap:balance;
}
.hero__title .hero__line{display:block;}
.hero__title .hero__line + .hero__line{margin-top:.22em;}
.hero__subtitle{
  font-size:clamp(13px,1.25vw,17px) !important;
  line-height:1.95 !important;
  max-width:min(860px,100%);
}
@media (max-width: 980px){
  .hero__title{font-size:clamp(24px,5vw,36px) !important; line-height:1.42 !important;}
  .hero__subtitle{font-size:14px !important; line-height:1.9 !important;}
}
@media (max-width: 640px){
  .hero__content{padding-top:30px; padding-bottom:28px;}
  .hero__title{font-size:clamp(22px,6.2vw,30px) !important; line-height:1.46 !important;}
  .hero__title .hero__line + .hero__line{margin-top:.28em;}
  .hero__subtitle{font-size:13px !important; line-height:1.85 !important;}
}

/* ===== v13.2 quick fixes: hero CTA text + desktop nav wrapping ===== */
/* 1) Purple CTA/button text must be white (hero/services buttons) */
.btn--gold,
.btn--gold:link,
.btn--gold:visited,
.hero .btn--gold,
.hero-actions .btn--gold{
  color:#fff !important;
}
.btn--gold .btn__icon,
.hero .btn--gold .btn__icon{color:inherit !important}

/* 2) Desktop navbar: keep labels on one line and reduce crowding */
@media (min-width: 841px){
  .header__inner{gap:10px !important;}
  .nav--desktop{
    display:flex;
    align-items:center;
    gap:2px !important;
    min-width:0;
  }
  .nav--desktop .nav__link,
  .nav--desktop .nav-dropdown > .nav__link{
    white-space:nowrap !important;
    flex-shrink:0;
    font-size:12.5px !important;
    padding:9px 8px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
  }
  .brand{gap:8px !important;}
  .brand__logo{width:38px !important;height:38px !important;}
  .brand__name{font-size:16px !important;}
  .brand__sub{font-size:11px !important; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}

/* Slightly tighter hero title spacing between the two lines */
.hero__title .hero__line + .hero__line{margin-top:.16em !important;}

/* ===== Markivo UI (Custom Cards) ===== */
.mk-glass-stack{
  --mk-glass-gap: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--mk-glass-gap);
  margin: 18px auto 6px;
  padding: 6px 0;
}
.mk-glass{
  position:relative;
  width: 210px;
  height: 230px;
  border-radius: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 10px;
  margin: 0 -55px;
  transform: rotate(calc(var(--r, 0) * 1deg));
  transition: transform .45s ease, margin .45s ease, box-shadow .45s ease;
}
.mk-glass::before{
  content: attr(data-text);
  position:absolute;
  inset: auto 0 0 0;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .6px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.10);
}
.mk-glass__icon{
  width: 74px;
  height: 74px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  font-size: 34px;
  color: #fff;
}
.mk-glass__desc{
  padding: 0 16px 56px;
  text-align:center;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  line-height: 1.55;
}
.mk-glass-stack:hover .mk-glass{
  transform: rotate(0deg);
  margin: 0 12px;
  box-shadow: 0 26px 40px rgba(0,0,0,.35);
}
@media (max-width: 720px){
  .mk-glass-stack{flex-direction:column; gap:12px; padding: 0 6px;}
  .mk-glass{width:100%; max-width: 420px; margin: 0; transform:none;}
  .mk-glass-stack:hover .mk-glass{margin:0;}
}


/* Social box card (contact sidebar) */
.mk-social-card{
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 210px;
  border-radius: 26px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: rgba(100,100,111,.18) 0 12px 32px;
  transition: transform .45s ease;
}
.mk-social-card:hover{ transform: translateY(-4px); }
.mk-social-bg{
  position:absolute;
  inset:0;
  background-image: linear-gradient(43deg, #2b1845 0%, #6f3cc3 55%, #3d63ff 100%);
}
.mk-social-logo{
  position:absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all .6s ease;
  font-size: 1.2em;
  font-weight: 900;
  color:#fff;
  letter-spacing: 2px;
  text-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.mk-social-box{
  position:absolute;
  padding: 10px 12px;
  background: rgba(255,255,255,.36);
  border-top: 2px solid rgba(255,255,255,.95);
  border-right: 1px solid rgba(255,255,255,.95);
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100,100,111,.28) -7px 7px 26px;
  transform-origin: bottom left;
  transition: all .9s ease;
  color: #10202a;
  text-decoration:none;
}
.mk-social-box .mk-social-ic{
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
}
.mk-social-box svg{ width: 22px; height: 22px; fill: rgba(255,255,255,.88); transition: all .4s ease; filter: drop-shadow(0 6px 16px rgba(0,0,0,.12)); }
.mk-social-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
}
.mk-social-card:hover .mk-social-box{ bottom: -1px; left: -1px; }
.mk-social-card:hover .mk-social-logo{ transform: translate(78px, -54px); letter-spacing: 0; }

.mk-social-box--ig{ width:70%; height:70%; bottom:-70%; left:-70%; }
.mk-social-box--ig::before{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%); }
.mk-social-box--tt{ width:50%; height:50%; bottom:-50%; left:-50%; transition-delay: .15s; }
.mk-social-box--tt::before{ background: radial-gradient(circle at 30% 107%, #9efcff 0%, #00f2ea 50%, #ff0050 95%); }
.mk-social-box--fb{ width:30%; height:30%; bottom:-30%; left:-30%; transition-delay: .30s; }
.mk-social-box--fb::before{ background: radial-gradient(circle at 30% 107%, #b7d3ff 0%, #1877f2 90%); }

.mk-social-card .mk-social-box:hover::before{ opacity: 1; }
.mk-social-card .mk-social-box:hover svg{ fill: #fff; }


/* ===== Markivo UI (Extra Interactions) ===== */

/* Floating follow-us card (small, on the side) */
.mk-float-social{
  position: absolute;
  right: 14px;
  top: 100%;
  margin-top: 10px;
  z-index: 1001;
}
.mk-social-card--float{
  width: 96px;
  height: 96px;
  border-radius: 18px;
}
.mk-social-card--float .mk-social-logo{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size: 13px;
  letter-spacing: .5px;
}
.mk-social-logo__img{
  width: 26px;
  height: 26px;
  border-radius: 10px;
}
.mk-social-card--float:hover .mk-social-logo{ transform: none; }
.mk-social-card--float .mk-social-box{ padding: 7px 9px; }
.mk-social-card--float .mk-social-box svg{ width: 18px; height: 18px; }
@media (max-width: 720px){
  .mk-float-social{ right: 10px; top: 100%; margin-top: 8px; }
  .mk-light-button{ left: 10px; right: auto; bottom: 14px; top: auto; }
}

/* Light CTA button (logo) */
.mk-light-button{
  position: fixed;
  left: 14px;
  bottom: 18px;
  top: auto;
  right: auto;
  z-index: 9999;
}
.mk-light-bt{
  position: relative;
  height: 120px;
  width: 90px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-decoration:none;
}
.mk-button-holder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height: 76px;
  width: 76px;
  background-color: #0a0a0a;
  border-radius: 12px;
  font-weight: 900;
  transition: 300ms;
  outline: rgba(255,255,255,.08) 2px solid;
  outline-offset: 14px;
  gap: 6px;
}
.mk-light-logo{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
}
.mk-button-holder p{
  margin:0;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.mk-light-holder{
  position:absolute;
  height: 120px;
  width: 76px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mk-dot{
  position:absolute;
  top:0;
  width: 10px;
  height: 10px;
  background:#0a0a0a;
  border-radius: 10px;
  z-index:2;
}
.mk-light{
  position:absolute;
  top:0;
  width: 160px;
  height: 160px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}
.mk-light-bt:hover .mk-button-holder{
  outline: rgba(111,60,195,.75) 2px solid;
  outline-offset: 4px;
  transform: translateY(-2px);
}
.mk-light-bt:hover .mk-button-holder p{
  color: rgba(111,60,195,.95);
}
.mk-light-bt:hover .mk-light{
  background: linear-gradient(180deg, rgba(111,60,195,.95) 0%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
}

/* Split hover (3 texts) */
.mk-split-card{
  width: min(680px, 100%);
  height: 220px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43,24,69,.92), rgba(15,45,63,.92));
  display:flex;
  gap: 10px;
  padding: 12px;
  margin-top: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  border: 1px solid rgba(192,132,252,.25);
}
.mk-split-card p{
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 16px;
  transition: all .5s ease;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(192,132,252,.70);
  display:flex;
  justify-content:center;
  align-items:center;
}
.mk-split-card p:hover{ flex: 4; }
.mk-split-card p span{
  min-width: 14em;
  padding: .8em 1em;
  text-align:center;
  transform: rotate(-90deg);
  transition: all .5s ease;
  color: rgba(216,180,254,.98);
  letter-spacing: .04em;
  font-weight: 900;
  font-size: 16px;
  text-transform: none;
  white-space: nowrap;
}
.mk-split-card p:hover span{ transform: rotate(0deg); }
@media (max-width: 720px){
  .mk-split-card{ height:auto; flex-direction:column; }
  .mk-split-card p{ min-height: 64px; }
  .mk-split-card p span{ transform:none; min-width:auto; white-space:normal; }
}
.mk-split-card p span{ transform:none; min-width:auto; }
}

/* Quad grid card (2x2) */
.mk-quad{
  width: 240px;
  height: 240px;
  color: #0b0b0b;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.mk-quad__item{
  border-radius: 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  transition: all .65s ease;
  transform-origin:center;
}
.mk-quad__item:hover{
  transform: scale(1.07);
  rotate: 3deg;
}
.mk-quad__ico{ font-size: 28px; }
.mk-quad__qty{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
}
.mk-quad__txt{ font-size: 12px; font-weight: 900; }
.mk-quad__item--1{ background:#c7c7ff; }
.mk-quad__item--2{ background:#ffd8be; }
.mk-quad__item--3{ background:#a9ecbf; }
.mk-quad__item--4{ background:#f3bbe1; }
.mk-quad__txt--1{ color: rgba(149,149,255,1); }
.mk-quad__txt--2{ color: rgba(252,161,71,1); }
.mk-quad__txt--3{ color: rgba(66,193,110,1); }
.mk-quad__txt--4{ color: rgba(220,91,183,1); }

/* Border animation on hover (apply via .mk-border-anim) */
.mk-border-anim{
  position: relative;
  isolation: isolate;
}
.mk-border-anim::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) 50% 0 / 200% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) 50% 100% / 200% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) 0 50% / 2px 200% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent) 100% 50% / 2px 200% no-repeat;
  transition: opacity .25s ease, background-position .6s ease;
  z-index: 3;
}
.mk-border-anim:hover::before{
  opacity: .95;
  background-position:
    -150% 0,
    150% 100%,
    0 150%,
    100% -150%;
}

/* Subtle floating highlight */
.mk-floatbox{
  transform-style: preserve-3d;
  animation: mk-float 2.4s ease-in-out infinite;
}
@keyframes mk-float{
  0%{ transform: translateY(0) rotateX(-10deg); }
  50%{ transform: translateY(-8px) rotateX(-10deg); }
  100%{ transform: translateY(0) rotateX(-10deg); }
}


/* One-div inspired hover card (safe version) */
.mk-one-div{
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 180px;
  background-color: #0f0f0f;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 0 60px rgba(255,255,255,.06);
  color: #fff;
  transition: transform .45s ease, box-shadow .45s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 6px;
  overflow:hidden;
  transform-style: preserve-3d;
  animation: mk-one-float 2.2s ease-in-out infinite;
}
.mk-one-div::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, rgba(111,60,195,.25), transparent 45%),
              radial-gradient(circle at 70% 80%, rgba(99,102,241,.20), transparent 46%);
  filter: blur(10px);
  opacity: .9;
}
.mk-one-div__text{
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 18px;
  opacity: .92;
}
.mk-one-div:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 0 80px rgba(255,255,255,.07);
}
@keyframes mk-one-float{
  0%{ transform: translateY(0) rotateX(-12deg); }
  50%{ transform: translateY(-10px) rotateX(-12deg); }
  100%{ transform: translateY(0) rotateX(-12deg); }
}

@media (max-width: 720px){
  .mk-light-button{ left: 10px; right: auto; bottom: 14px; top: auto; }
}


/* ===== Markivo UI (Programs Big Cards) ===== */
.mk-programs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.mk-program-card{
  background:#fff;
  border-radius: var(--radius);
  border:3px solid rgba(43,24,69,.75);
  box-shadow: var(--shadow);
  min-height: 320px;
  padding: 22px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-decoration:none;
  color: var(--navy);
  text-align:center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.mk-program-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}
.mk-program-card__icon{
  width: 86px;
  height: 86px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  font-size: 40px;
  color:#fff;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(192,132,252,.95));
  box-shadow: 0 18px 44px rgba(43,24,69,.22);
}
.mk-program-card__title{
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  color: #1f2937;
}
.mk-program-card__desc{
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  opacity: .65;
  line-height: 1.7;
  max-width: 28ch;
}
.mk-program-card--crm .mk-program-card__icon{ background: linear-gradient(135deg, rgba(15,45,63,.95), rgba(99,102,241,.95)); }
.mk-program-card--web .mk-program-card__icon{ background: linear-gradient(135deg, rgba(192,132,252,.95), rgba(99,102,241,.95)); }
.mk-program-card--ops .mk-program-card__icon{ background: linear-gradient(135deg, rgba(43,24,69,.95), rgba(192,132,252,.95)); }

.mk-programs-cta{ display:flex; justify-content:center; margin-top: 18px; }

/* ===== Markivo UI (Services Rotator) ===== */
.mk-services-rotator{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 10px;
}
.mk-wrap-card{
  width: 100%;
  max-width: 520px;
  height: 360px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  --w-card: 240px;
  --h-card: 300px;
  --rotate-card: 14deg;
  --insetX-card: 32px;
  --t-card: calc(var(--insetX-card) * 1.25);
  --w-wrap-card: calc(var(--w-card) + calc(calc(var(--w-card) / 2) * 2));
}
.mk-rcard{
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  overflow:hidden;
  border-radius: 18px;
  width: var(--w-card);
  height: var(--h-card);
  animation: mk-rotating 9s cubic-bezier(0.75, 0, 0, 1.01) infinite 0s;
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
  border: 2px solid rgba(255,255,255,.55);
}
.mk-rcontent{
  background-color: rgba(255,255,255,.24);
  position: relative;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 12px;
  overflow:hidden;
}
.mk-rcontent > span{
  position:absolute;
  inset: 50% 0 0 50%;
  transform: translate(-50%, -50%);
  font-size: 260px;
  font-weight: 900;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: rgba(255,255,255,.55);
  opacity: .22;
  pointer-events:none;
}
.mk-ricon{
  position: relative;
  z-index: 2;
  font-size: 44px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
}
.mk-rlabel{
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.mk-rcard--1{ background: radial-gradient(circle, rgba(142, 249, 252, 1) 0%, rgba(32, 164, 246, 1) 40%, rgba(8, 81, 192, 1) 100%); }
.mk-rcard--2{ background: radial-gradient(circle, rgba(222, 128, 233, 1) 0%, rgba(213, 32, 246, 1) 40%, rgba(139, 6, 157, 1) 100%); }
.mk-rcard--3{ background: radial-gradient(circle, rgba(252, 240, 142, 1) 0%, rgba(246, 173, 32, 1) 40%, rgba(192, 142, 8, 1) 100%); }

.mk-rcard:nth-child(1){
  --z1: 2; --t1: 0; --l1: calc(var(--w-card) / 2); --r1: calc(var(--w-card) / 2); --trans1: rotate(0deg);
  --z2: 0; --t2: var(--t-card); --l2: var(--insetX-card); --r2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans2: rotate(calc(var(--rotate-card) * -1));
  --z3: 0; --t3: var(--t-card); --l3: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r3: var(--insetX-card); --trans3: rotate(calc(var(--rotate-card) * 1));
}
.mk-rcard:nth-child(2){
  --z1: 0; --t1: var(--t-card); --l1: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r1: var(--insetX-card); --trans1: rotate(calc(var(--rotate-card) * 1));
  --z2: 2; --t2: 0; --l2: calc(var(--w-card) / 2); --r2: calc(var(--w-card) / 2); --trans2: rotate(0deg);
  --z3: 0; --t3: var(--t-card); --l3: var(--insetX-card); --r3: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans3: rotate(calc(var(--rotate-card) * -1));
}
.mk-rcard:nth-child(3){
  --z1: 0; --t1: var(--t-card); --l1: var(--insetX-card); --r1: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --trans1: rotate(calc(var(--rotate-card) * -1));
  --z2: 0; --t2: var(--t-card); --l2: calc(var(--w-wrap-card) - calc(var(--w-card) + var(--insetX-card))); --r2: var(--insetX-card); --trans2: rotate(calc(var(--rotate-card) * 1));
  --z3: 2; --t3: 0; --l3: calc(var(--w-card) / 2); --r3: calc(var(--w-card) / 2); --trans3: rotate(0deg);
}

@keyframes mk-rotating{
  0%, 99.99%{ z-index: var(--z1); top: var(--t1); left: var(--l1); right: var(--r1); transform: var(--trans1); }
  33.33%{ z-index: var(--z2); top: var(--t2); left: var(--l2); right: var(--r2); transform: var(--trans2); }
  66.66%{ z-index: var(--z3); top: var(--t3); left: var(--l3); right: var(--r3); transform: var(--trans3); }
}

.mk-wrap-lines{
  position:absolute;
  inset:auto 0 0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 4;
}
.mk-wrap-lines::after{
  content:"";
  width:100%;
  height:0;
  position:absolute;
  inset:0;
  --mask-bg: #e8e8e8;
  background: var(--mask-bg);
  mask-image: radial-gradient(50% 200px at top, transparent 20%, var(--mask-bg));
}
.mk-wrap-line{ position:absolute; width:100%; }
.mk-wrap-line::before,
.mk-wrap-line::after{
  content:"";
  position:absolute;
  background: linear-gradient(to right, transparent, rgba(99,102,241,.85), transparent);
  width: 100%;
  height: 2px;
  filter: blur(2px);
}
.mk-wrap-line:nth-child(2)::before,
.mk-wrap-line:nth-child(2)::after{
  width: 55%;
  background: linear-gradient(to right, transparent, rgba(192,132,252,.9), transparent);
}

.mk-services-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top: 14px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .mk-programs-grid{ grid-template-columns: 1fr; }
  .mk-wrap-card{ height: 340px; }
}



/* ===== Ops cards (3 vertical rectangles) ===== */
.mk-ops-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 900px){
  .mk-ops-grid{ grid-template-columns: 1fr; }
}
.mk-ops-item{
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(43,24,69,.78), rgba(20,12,34,.62));
  border: 1px solid rgba(192,132,252,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mk-ops-item::before{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(circle at 30% 20%, rgba(192,132,252,.22), transparent 60%);
  pointer-events:none;
}
.mk-ops-head{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mk-ops-icon{
  font-size: 28px;
  line-height: 1;
}
.mk-ops-badge{
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 999px;
}
.mk-ops-title{
  position: relative;
  margin: 16px 0 10px;
  font-size: 20px;
  color: #fff;
}
.mk-ops-desc{
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
}
.mk-ops-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.32);
  border-color: rgba(192,132,252,.55);
}

/* ===== Glass programs (large) ===== */
.mk-glass-row{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.mk-glass{
  position: relative;
  width: 330px;
  max-width: 100%;
  min-height: 270px;
  padding: 22px 20px 58px;
  border-radius: 18px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 25px 25px rgba(0,0,0,0.25);
  display:flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  align-items: flex-start;
  transition: 0.5s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: rotate(calc(var(--r) * 1deg));
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.mk-glass::before{
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 44px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: .6px;
}
.mk-glass::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: radial-gradient(circle at 20% 20%, rgba(192,132,252,.22), transparent 60%);
  pointer-events:none;
}
.mk-glass--web::after{
  background: radial-gradient(circle at 20% 20%, rgba(56,189,248,.18), transparent 60%);
}
.mk-glass--ops::after{
  background: radial-gradient(circle at 20% 20%, rgba(111,60,195,.14), transparent 60%);
}
.mk-glass__icon{
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
  position: relative;
  z-index: 1;
}
.mk-glass__content{
  position: relative;
  z-index: 1;
}
.mk-glass__content h3{
  margin: 0;
  font-size: 22px;
  color: #fff;
}
.mk-glass__content p{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,.84);
}

.mk-glass-row .mk-glass{
  margin: 0 -32px;
}
.mk-glass-row:hover .mk-glass{
  transform: rotate(0deg) translateY(-2px);
  margin: 0 10px;
}
.mk-glass:hover{
  transform: rotate(0deg) translateY(-6px) !important;
}

@media (max-width: 980px){
  .mk-glass-row .mk-glass{ margin: 0; transform: none; }
  .mk-glass-row:hover .mk-glass{ margin: 0; transform: translateY(-2px); }
}
@media (max-width: 640px){
  .mk-glass{ width: 100%; min-height: 250px; }
}

/* ===== Markivo v7 fixes (requested) ===== */

/* Programs cards: make them readable (not transparent) + brand purple accents */
#programs .mk-glass{
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,236,255,.94));
  border: 1px solid rgba(111,60,195,.22);
  box-shadow: 0 22px 50px rgba(15,45,63,.16);
  color: #0f2d3f;
}
#programs .mk-glass::before{
  background: rgba(111,60,195,.10);
  border-top: 1px solid rgba(111,60,195,.18);
  color: #0f2d3f;
}
#programs .mk-glass__content h3{ color: #0f2d3f; }
#programs .mk-glass__content p{ color: rgba(15,45,63,.78); }

#programs .mk-glass__icon{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(111,60,195,.10);
  border: 1px solid rgba(111,60,195,.18);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.10));
}
#programs .mk-glass__icon svg{
  width: 32px;
  height: 32px;
  fill: #6f3cc3;
}

#programs .mk-glass::after{
  background: radial-gradient(circle at 20% 20%, rgba(111,60,195,.22), transparent 60%);
}
#programs .mk-glass--web::after{
  background: radial-gradient(circle at 20% 20%, rgba(46,168,255,.20), transparent 60%);
}
#programs .mk-glass--ops::after{
  background: radial-gradient(circle at 20% 20%, rgba(255,122,0,.16), transparent 60%);
}

/* Follow-us: bigger + logo clearer (stays under header on the right) */
.mk-float-social{ right: 14px; margin-top: 6px; }
.mk-social-card--float{
  width: 124px;
  height: 124px;
  border-radius: 22px;
  border: 1px solid rgba(111,60,195,.22);
}
.mk-social-logo__img{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.mk-social-card--float .mk-social-logo span{
  font-size: 14px;
  font-weight: 900;
}

/* Ops 01/02/03 cards: purple + orange + blue */
.mk-ops-item{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(190px 190px at 15% 18%, rgba(111,60,195,.55), transparent 60%),
    radial-gradient(190px 190px at 85% 22%, rgba(46,168,255,.38), transparent 60%),
    radial-gradient(240px 240px at 35% 98%, rgba(255,122,0,.30), transparent 60%),
    rgba(10, 12, 20, .92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.mk-ops-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(111,60,195,.12), rgba(46,168,255,.10), rgba(255,122,0,.08));
  opacity:.85;
  pointer-events:none;
}
.mk-ops-item > *{ position: relative; z-index: 1; }

.mk-ops-icon{
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.mk-ops-badge{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.mk-ops-title{ color: #fff; }
.mk-ops-desc{ color: rgba(255,255,255,.84); }
.mk-ops-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  border-color: rgba(111,60,195,.45);
}


/* ===== Phase 1 content refinement ===== */
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.mini-stat{padding:18px;border-radius:20px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.mini-stat__num{font-weight:900;font-size:18px}
.mini-stat__label{margin-top:6px;font-size:14px;opacity:.9;line-height:1.7}
.mk-programs-cta,.services-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.services-review h2{margin:0 0 18px;color:var(--navy);font-size:clamp(24px,2.2vw,34px)}
.services-pillars,.deliverables-grid,.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.compare-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.services-pillar,.deliverable-card,.compare-card{background:#fff;border:1px solid rgba(15,45,63,.08);border-radius:20px;padding:22px;box-shadow:var(--shadow2)}
.services-pillar h3,.deliverable-card h3,.compare-card h3{margin:0 0 10px;color:var(--navy);font-size:20px;line-height:1.5}
.programs-compare{background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%)}
.article-grid .card{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:150px}
.article-grid .card__title{font-size:20px;font-weight:900;color:var(--navy)}
.article-grid .card__sub{line-height:1.8;font-size:14px;color:var(--muted)}
@media (max-width: 1100px){.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 980px){.hero-mini-stats,.services-pillars,.deliverables-grid{grid-template-columns:1fr}}
@media (max-width: 640px){.hero__content{padding:40px 14px 72px}.mini-stat{padding:16px}.article-grid .card{min-height:auto}.services-pillar,.deliverable-card,.compare-card{padding:18px}.compare-grid{grid-template-columns:1fr}}


/* blog whatsapp button/icon clarity restore */
.wa-inline-icon{width:20px;height:20px;display:block;flex:0 0 20px}
.article-floating-cta a{gap:10px}
.article-floating-cta a .wa-inline-icon{width:19px;height:19px}
.social-rail__btn .wa-inline-icon{width:24px;height:24px;color:#fff}
.social-rail__btn--wa{color:#fff !important}


/* ===== Unified WhatsApp + homepage mobile layout fixes ===== */
.article-floating-cta{display:none !important;}
.social-rail__btn--wa{display:none !important;}

@media (max-width: 640px){
  #programs .mk-glass-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    overflow:visible;
    padding:6px 0 0;
    margin:0;
  }
  #programs .mk-glass-row .mk-glass{
    flex:0 1 auto;
    width:min(100%, 440px);
    min-width:0;
    max-width:440px;
    min-height:250px;
    margin:0;
    transform:none !important;
  }

  #services .mk-services-rotator{
    overflow:visible;
    padding-inline:0;
  }
  #services .mk-wrap-card{
    width:100%;
    max-width:380px;
    height:300px;
    margin:0 auto 8px;
    transform:none;
    --w-card: 172px;
    --h-card: 220px;
    --rotate-card: 12deg;
    --insetX-card: 18px;
    --t-card: calc(var(--insetX-card) * 1.15);
    --w-wrap-card: 100%;
  }
  #services .mk-services-actions{
    margin-top:10px;
    gap:10px;
  }
  #services .mk-services-actions .btn{
    min-width:150px;
    justify-content:center;
  }
}

@media (max-width: 420px){
  #programs .mk-glass-row .mk-glass{
    width:100%;
    max-width:100%;
  }
  #services .mk-wrap-card{
    max-width:330px;
    height:280px;
    --w-card: 152px;
    --h-card: 198px;
    --insetX-card: 14px;
  }
}

/* ===== Mobile programs section: keep desktop look ===== */
@media (max-width: 640px){
  #programs .mk-glass-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    padding-top:8px;
  }
  #programs .mk-glass-row .mk-glass{
    width:min(100%, 380px);
    max-width:380px;
    min-height:320px;
    padding:26px 24px 66px;
    transform:rotate(calc(var(--r) * 1deg)) !important;
    transform-origin:center center;
  }
}

@media (max-width: 420px){
  #programs .mk-glass-row .mk-glass{
    width:calc(100% - 10px);
    max-width:360px;
    min-height:300px;
    padding:24px 20px 64px;
  }
  #programs .mk-glass__content h3{
    font-size:22px;
  }
}

/* ===== Home hero badges + ops cards refinement ===== */
.hero-mini-stats{
  align-items: stretch;
  gap: 18px;
}
.mini-stat{
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 22px 20px 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(111,60,195,.22) 0%, rgba(17,24,39,.20) 45%, rgba(255,122,0,.14) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(7, 10, 18, .26);
  backdrop-filter: blur(14px);
}
.mini-stat::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,179,71,.95), rgba(255,255,255,.22), rgba(111,60,195,.78));
}
.mini-stat::after{
  content: "";
  position: absolute;
  left: -18px;
  bottom: -18px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.mini-stat__num{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.mini-stat__label{
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}
.mini-stat:nth-child(1){
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(111,60,195,.34), rgba(14,22,38,.22) 55%, rgba(255,122,0,.18));
}
.mini-stat:nth-child(2){
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(255,122,0,.22), rgba(14,22,38,.22) 50%, rgba(255,200,120,.16));
}
.mini-stat:nth-child(3){
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(46,168,255,.24), rgba(14,22,38,.22) 52%, rgba(111,60,195,.20));
}
.mini-stat:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 28px 75px rgba(7, 10, 18, .34);
}

.mk-ops-grid{
  gap: 18px;
  margin-top: 22px;
}
@media (min-width: 981px){
  .mk-ops-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mk-ops-item{
  min-height: 218px;
  padding: 22px 20px 18px;
  border-radius: 24px;
  background:
    radial-gradient(220px 180px at 12% 14%, rgba(111,60,195,.44), transparent 62%),
    radial-gradient(210px 170px at 86% 18%, rgba(46,168,255,.26), transparent 60%),
    radial-gradient(180px 180px at 50% 105%, rgba(255,122,0,.18), transparent 58%),
    linear-gradient(180deg, rgba(19,24,37,.98), rgba(10,12,20,.96));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 55px rgba(0,0,0,.30);
}
.mk-ops-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events: none;
}
.mk-ops-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.mk-ops-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 25px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.mk-ops-badge{
  min-width: 56px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.mk-ops-title{
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 900;
  line-height: 1.35;
}
.mk-ops-desc{
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.95;
}
.mk-ops-item:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
}

@media (max-width: 980px){
  .hero-mini-stats{
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 620px;
    margin-inline: auto;
  }
  .mini-stat{
    min-height: 118px;
    padding: 20px 18px 16px;
  }
  .mini-stat__num{
    min-height: auto;
    font-size: 21px;
  }
  .mini-stat__label{
    font-size: 13px;
    line-height: 1.75;
  }
  .mk-ops-item{
    min-height: auto;
  }
}

@media (max-width: 640px){
  .hero-mini-stats{
    gap: 12px;
    margin-top: 22px;
  }
  .mini-stat{
    border-radius: 22px;
    padding: 18px 16px 16px;
  }
  .mini-stat__num{
    font-size: 19px;
    line-height: 1.35;
  }
  .mini-stat__label{
    margin-top: 6px;
    font-size: 12.5px;
  }
  .mk-ops-grid{
    gap: 14px;
  }
  .mk-ops-item{
    border-radius: 22px;
    padding: 18px 16px 16px;
  }
  .mk-ops-head{
    margin-bottom: 14px;
  }
  .mk-ops-icon{
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
  .mk-ops-badge{
    min-width: 50px;
    height: 34px;
    font-size: 12px;
  }
  .mk-ops-title{
    font-size: 18px;
    margin-bottom: 8px;
  }
  .mk-ops-desc{
    font-size: 13px;
    line-height: 1.85;
  }
}


/* ===== Mobile refinement for home hero badges + ops blocks ===== */
@media (max-width: 640px){
  .hero__content{
    padding: 34px 16px 70px;
  }
  .hero-mini-stats{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }
  .mini-stat{
    min-height: 0;
    padding: 16px 18px;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
      linear-gradient(135deg, rgba(17,22,36,.96) 0%, rgba(26,30,46,.94) 56%, rgba(73,47,129,.88) 100%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
    text-align: right;
  }
  .mini-stat::before{
    height: 3px;
    background: linear-gradient(90deg, rgba(255,180,71,.95), rgba(145,110,255,.78));
  }
  .mini-stat::after{
    width: 72px;
    height: 72px;
    left: auto;
    right: -12px;
    bottom: -16px;
    opacity: .42;
  }
  .mini-stat__num{
    display: block;
    min-height: 0;
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
  }
  .mini-stat__label{
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255,255,255,.86);
  }

  .mk-ops-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }
  .mk-ops-item{
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
    background:
      radial-gradient(160px 130px at 100% 0%, rgba(111,60,195,.24), transparent 58%),
      radial-gradient(150px 120px at 0% 100%, rgba(255,122,0,.12), transparent 60%),
      linear-gradient(180deg, rgba(15,19,31,.98), rgba(10,12,21,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 32px rgba(0,0,0,.26);
  }
  .mk-ops-head{
    margin-bottom: 12px;
    gap: 10px;
  }
  .mk-ops-icon{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 20px;
  }
  .mk-ops-badge{
    min-width: 46px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .06em;
  }
  .mk-ops-title{
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.4;
  }
  .mk-ops-desc{
    font-size: 13px;
    line-height: 1.85;
    color: rgba(255,255,255,.82);
  }
}