/* Fonturile stau aici, nu intr-un fisier separat.
   Masurat pe iPhone: fonts.css avea 1 KB dar lua 435ms — timpul nu era transfer, era
   asteptare la coada. Fiecare cerere in plus care blocheaza randarea costa o runda
   intreaga, si primul text aparea abia la 894ms. Topit aici, cererea dispare.
   Caile ../fonts/ raman valabile: main.css e in acelasi folder ca fonts.css era. */

/* Fonturi gazduite local. Generat din Google Fonts de welead_gazduieste_fonturi(). */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQUpDg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQUpDg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQUpDg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQUpDg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQspDre2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/xMQbuFFYT72XzQUpDg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   We Lead — main stylesheet (ported from welead-homepage-recreation.html)
   ========================================================================== */

:root{
  --bg:#03041b;
  --bg2:#0a0f20;
  --card:#0d1326;
  --card2:#101a33;
  --border:#1b2440;
  --txt:#e8ebf5;
  --muted:#9aa3bd;
  --muted2:#6f7895;
  --purple:#7c3aed;
  --purple2:#8b5cf6;
  --cyan:#5ad7ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
  overflow-x:clip; /* forbids horizontal pan on mobile; hidden = fallback */
  line-height:1.6;
}
h1,h2,h3{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-0.02em;line-height:1.08}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.section{padding:110px 0}

/* site-wide ambient glow that drifts toward the cursor (GPU transform = smooth) */
.wl-ambient{position:fixed;top:50%;left:50%;width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax;
  z-index:-1;pointer-events:none;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(124,58,237,.20),rgba(90,215,255,.05) 46%,transparent 72%)}
.wl-ambient.b{width:44vmax;height:44vmax;margin:-22vmax 0 0 -22vmax;
  background:radial-gradient(closest-side,rgba(58,29,107,.28),transparent 70%)}

/* topographic contour texture — the "leading the way" map motif, drawn by JS */
.wl-contour{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* glows */
.glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5;z-index:0;pointer-events:none}
.glow-hero-1{width:600px;height:600px;background:#1d2c6b;top:-160px;right:-120px}
.glow-hero-2{width:420px;height:420px;background:#3a1d6b;bottom:-120px;left:-100px;opacity:.35}

/* NAV — fixed glass header: fades away as you scroll down, glides back on scroll up */
.site-header{position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;right:0;z-index:50;
  background:rgba(4,6,24,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.site-header.hide{transform:translateY(-16px);opacity:0;pointer-events:none}
body{padding-top:82px} /* header is out of flow now */
.site-nav{display:flex;align-items:center;justify-content:space-between;height:82px;position:relative}
.logo-link{display:flex;align-items:center}
.logo-img,.custom-logo{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links ul.nav-menu{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);font-size:14.5px;transition:.2s}
.nav-links a:hover,
.nav-links .current-menu-item a,
.nav-links .current_page_item a{color:#fff}
.nav-sep{width:1px;height:22px;background:var(--border);margin-right:6px}
/* animated underline on top-level links (Framer-style) */
.nav-links ul.nav-menu > li{position:relative}
.nav-links ul.nav-menu > li > a{position:relative;padding:6px 0;display:inline-block}
.nav-links ul.nav-menu > li > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--purple2),var(--cyan));transition:width .25s ease}
.nav-links ul.nav-menu > li > a:hover::after,
.nav-links ul.nav-menu > li.current-menu-item > a::after,
.nav-links ul.nav-menu > li.current-menu-ancestor > a::after{width:100%}
/* dropdown submenu */
.nav-links .menu-item-has-children > a::after{display:none}
.nav-links ul.nav-menu > li.menu-item-has-children > a{padding-right:17px}
.nav-links .menu-item-has-children > a::before{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:.2s}
.nav-links .menu-item-has-children:hover > a::before{border-color:var(--purple2);transform:rotate(225deg);margin-top:-1px}
.nav-links .sub-menu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:250px;list-style:none;margin:0;
  background:linear-gradient(160deg,#0d1428,#090e1f);border:1px solid var(--border);border-radius:14px;padding:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s ease;z-index:60}
.nav-links li:hover > .sub-menu,.nav-links li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-links .sub-menu a{display:block;padding:10px 13px;border-radius:9px;font-size:13.5px;transition:.18s}
.nav-links .sub-menu a:hover{background:#151d38;color:#fff;padding-left:17px}
/* Sageata care plieaza submeniul exista doar pe mobil; pe desktop submeniul e la hover. */
.sub-toggle{display:none}
.nav-right{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  border:1px solid transparent;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:500;line-height:1;
  border-radius:11px;height:48px;padding:0 24px;font-size:14.5px;transition:.25s;color:#fff;text-align:center;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 8px 30px rgba(124,58,237,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(124,58,237,.5);color:#fff}
.btn-ghost{background:#1a2138;border:1px solid var(--border)}
.btn-ghost:hover{background:#222b48}
.btn-block{display:flex;width:100%;height:52px}
/* keep flex containers from stretching buttons to unequal heights */
.hero-cta,.svc-cta p,.areas-cta{align-items:center}

/* hamburger */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--txt);transition:.25s;border-radius:2px}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{position:relative;padding:96px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero-grid>div{min-width:0} /* keep the marquee from blowing the grid column out */
.hero h1{font-size:58px;font-weight:500;margin-bottom:22px}
.hero p{color:var(--muted);font-size:19px;max-width:430px;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;margin-bottom:54px}
.hero-img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block;
  border-radius:16px;border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#0a1430}
.clients{display:flex;gap:46px;align-items:center;opacity:.55;flex-wrap:wrap}
.clients img{width:auto}
.clients img.client-md{height:46px}
.clients img.client-lg{height:48px}
/* infinite logo marquee (like the original Framer ticker) */
.clients-marquee{max-width:560px;overflow:hidden;flex-wrap:nowrap;gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.clients-track{display:flex;align-items:center;width:max-content;
  animation:welead-clients-scroll 24s linear infinite}
.clients-track img{margin-right:46px;flex-shrink:0}
/* Linked logos: the <a> must be the same kind of flex item as a bare <img>,
   otherwise it shrinks and the two marquee halves stop matching — which makes
   the translateX(-50%) loop visibly jump instead of scrolling seamlessly. */
.clients-track > *{flex-shrink:0}
.clients-track a{display:flex;align-items:center;line-height:0;margin-right:46px;transition:opacity .25s ease}
.clients-track a > img{margin-right:0}
.clients-track a:hover{opacity:1}
.clients-marquee:hover .clients-track{animation-play-state:paused}
@keyframes welead-clients-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-line{width:100%;height:1px;background:var(--border);margin:0 0 34px;max-width:560px}

.eyebrow{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:0;
  font-family:'Sora',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#b9aefc;margin-bottom:22px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(90deg,#8b5cf6,#5ad7ff)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;position:relative;z-index:2}
.sec-head h1,.sec-head h2{font-size:clamp(36px,4.6vw,56px);font-weight:500;text-wrap:balance}
/* typography play — the muted half of a heading becomes a serif-italic voice */
h1 .fade,h2 .fade,.sec-head h1 .fade,.sec-head h2 .fade{font-family:Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:400;font-size:.97em;letter-spacing:0;color:#9aa6cf}
.sec-head p{color:var(--muted);margin-top:14px;max-width:340px}
.svc-list{display:flex;flex-direction:column;gap:22px;margin-top:36px}
.card{background:linear-gradient(150deg,#101a36,#0b1124);border:1px solid var(--border);
  border-radius:18px;padding:30px;position:relative;overflow:hidden;transition:.3s}
.card::before{content:"";position:absolute;inset:0;background:
   radial-gradient(380px 180px at 12% 0%,rgba(80,90,220,.16),transparent 60%);opacity:0;transition:.4s}
.card:hover{transform:translateY(-4px);border-color:#2c3a66}
.card:hover::before{opacity:1}
.card .ico{width:42px;height:42px;border-radius:11px;background:#161f3a;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--purple2)}
.card h3{font-size:18px;font-weight:600;margin-bottom:12px}
.card .desc{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{background:#141c34;border:1px solid var(--border);color:var(--muted);
  font-size:12.5px;padding:7px 13px;border-radius:8px}

.sticky-neon{position:sticky;top:120px}
.neon-img{width:100%;height:auto;border-radius:22px;display:block}
.neon-box{border:1px solid #163b4d;border-radius:22px;padding:60px 30px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(20,60,90,.35),rgba(8,16,32,.6));
  box-shadow:inset 0 0 60px rgba(40,120,160,.12),0 0 80px rgba(90,215,255,.06)}
.neon-box span{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:54px;line-height:1.25;
  color:#aef0ff;text-shadow:0 0 8px rgba(90,215,255,.9),0 0 26px rgba(90,215,255,.65),0 0 50px rgba(90,215,255,.4)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-img{width:100%;height:auto;border-radius:22px;border:1px solid var(--border);display:block}
.about-words{border:1px solid var(--border);border-radius:22px;padding:48px 30px;text-align:center;
  background:linear-gradient(160deg,#0c1430,#080d1e);position:relative;overflow:hidden}
.about-words .w{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:58px;line-height:1.16;
  text-transform:uppercase;letter-spacing:.035em;
  background:linear-gradient(90deg,#3b4a78,#6d7db8);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-words .w.lit{background:linear-gradient(90deg,#7c8cff,#9aa9ff);-webkit-background-clip:text;color:transparent}
.about h1,.about h2{font-size:clamp(38px,4.8vw,56px);font-weight:500;margin-bottom:18px;text-wrap:balance}
.about h1 .fade,.about h2 .fade{color:#9aa6cf}
.about p{color:var(--muted);font-size:18px;margin-bottom:28px;max-width:380px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;
  background:none;border:0;font-family:'Poppins',sans-serif;
  padding:22px 26px;cursor:pointer;font-size:16px;color:#dfe3f1;user-select:none}
.faq-q .pm{font-size:24px;color:var(--muted);transition:.3s;flex-shrink:0}
.faq-item.open .pm{transform:rotate(45deg);color:var(--purple2)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted);padding:0 26px}
.faq-item.open .faq-a{max-height:720px;padding:0 26px 24px}
/* Intrebarea e infasurata intr-un <h2> ca sa poata fi extrasa ca pereche Q&A de
   crawlerele AI; heading-ul e doar semantic, butonul isi pastreaza tot aspectul. */
/* .svc-page .entry-content h2 (0,2,1) bate .faq-item .faq-h (0,2,0), asa ca
   heading-ul primea 40px margine si 28px font. Selectorul de mai jos e (0,3,0). */
.entry-content .faq-item .faq-h,
.faq-item .faq-h{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:normal}

/* CONTACT */
.contact-head{text-align:center;max-width:680px;margin:0 auto 50px}
.contact-head h1,.contact-head h2{font-size:clamp(34px,4.2vw,50px);font-weight:500;margin-bottom:18px;text-wrap:balance}
.contact-head p{color:var(--muted);font-size:18px}
.contact-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;align-items:start}
.form-box{background:linear-gradient(160deg,#0b1124,#080d1e);border:1px solid var(--border);border-radius:20px;padding:40px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.field label{display:block;font-size:13.5px;color:#cfd5e8;margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:#0c1326;border:1px solid var(--border);
  border-radius:10px;padding:13px 15px;color:#fff;font-family:'Poppins',sans-serif;font-size:14px;outline:none;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple)}
.field input::placeholder,.field textarea::placeholder{color:#5b637e}
.field{margin-bottom:22px}
.form-row .field{margin-bottom:0}
.field textarea{min-height:96px;resize:vertical}
.contact-cards{display:flex;flex-direction:column;gap:20px}
.info-card{background:linear-gradient(160deg,#0c1430,#080d1e);border:1px solid rgba(139,92,246,.45);
  border-radius:20px;padding:26px;box-shadow:0 0 26px rgba(124,58,237,.12),inset 0 0 24px rgba(139,92,246,.05);transition:.3s}
.info-card:hover{border-color:rgba(139,92,246,.75);box-shadow:0 0 34px rgba(124,58,237,.22)}
.info-card .t{display:flex;align-items:center;gap:11px;font-weight:600;font-size:15px;margin-bottom:12px}
.info-card .t .dot{color:var(--purple2)}
.info-card .t .ico{display:flex;color:#e8ebf5;flex-shrink:0}
.info-card .info-div{display:block;height:1px;margin:0 0 14px;
  background:linear-gradient(90deg,rgba(139,92,246,.55),rgba(139,92,246,0))}
.info-card p{color:var(--muted);font-size:13.5px}

/* form notices + honeypot */
.form-notice{border-radius:12px;padding:14px 18px;margin-bottom:24px;font-size:14px}
.form-notice.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.4);color:#86efac}
.form-notice.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* FOOTER */
.site-footer{border-top:1px solid rgba(255,255,255,.05);padding:52px 0 30px;margin-top:26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .9fr;gap:30px}
.foot-logo{height:34px;width:auto;align-self:start}
.foot-brand .foot-tag{color:var(--muted);font-size:13.5px;line-height:1.7;margin:16px 0 0;max-width:260px}
.foot-grid h4{font-size:15px;margin-bottom:20px;font-family:'Poppins',sans-serif;font-weight:600}
.foot-grid a,.foot-grid p{display:block;color:var(--muted);font-size:14px;margin-bottom:12px;transition:.2s}
.foot-grid p a{display:inline;margin:0}
.foot-grid a:hover{color:#fff}
.foot-menu{list-style:none;margin:0;padding:0}
.foot-social{display:flex;gap:10px;flex-wrap:wrap}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;
  border:1px solid var(--border);border-radius:11px;color:var(--muted);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.foot-social a:hover{color:#fff;border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.1);transform:translateY(-2px)}
.foot-social svg{display:block}
.foot-bottom{display:flex;justify-content:space-between;color:var(--muted2);font-size:13px;
  border-top:1px solid var(--border);margin-top:50px;padding-top:26px}
.foot-bottom a{color:var(--muted2);margin-left:22px}
.foot-bottom a:hover{color:#fff}

/* breadcrumbs */
.breadcrumbs{max-width:880px;margin:0 auto 16px;font-size:13px;color:var(--muted2)}
.breadcrumbs a{color:var(--muted);transition:.2s}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs .crumb-current{color:var(--muted2)}
.breadcrumbs span[aria-hidden]{margin:0 4px;opacity:.6}

/* generic content pages (legal, blog fallback) */
.content-card{margin:0 auto 24px;max-width:880px;padding:44px 40px}
.content-card:hover{transform:none;border-color:var(--border)}
.content-card .entry-title{font-size:34px;margin-bottom:8px}
.entry-content h2{font-size:22px;margin:34px 0 12px}
.entry-content h3{font-size:18px;margin:26px 0 10px}
.entry-content p{margin-bottom:16px;color:var(--muted)}
.entry-content ul,.entry-content ol{margin:0 0 18px 24px;color:var(--muted)}
.entry-content li{margin-bottom:8px}
.entry-content a{color:var(--purple2)}

/* animated service icons */
.card .ico svg{display:block}
.wl-cursor{animation:wlBlink 1.1s steps(1) infinite}
@keyframes wlBlink{50%{opacity:0}}
.wl-heart{transform-origin:center;transform-box:fill-box;animation:wlHeart 1.9s ease-in-out infinite}
@keyframes wlHeart{0%,100%{transform:scale(1)}10%{transform:scale(1.22)}20%{transform:scale(1)}}
.wl-plus{opacity:0;animation:wlFloatUp 2.8s ease-out infinite}
@keyframes wlFloatUp{0%{opacity:0;transform:translateY(3px)}25%{opacity:1}65%{opacity:0;transform:translateY(-5px)}100%{opacity:0}}
.wl-star2{transform-origin:center;transform-box:fill-box;animation:wlTwinkle2 2.4s ease-in-out infinite}
@keyframes wlTwinkle2{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.wl-bars rect{transform-origin:bottom;transform-box:fill-box;animation:wlGrowBar 2.4s ease-in-out infinite}
.wl-bars rect:nth-child(2){animation-delay:.3s}
.wl-bars rect:nth-child(3){animation-delay:.6s}
@keyframes wlGrowBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.wl-draw{stroke-dasharray:30;animation:wlDrawLine 2.6s ease-in-out infinite}
@keyframes wlDrawLine{0%{stroke-dashoffset:30}45%{stroke-dashoffset:0}70%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
.wl-type rect{transform-origin:left center;transform-box:fill-box;transform:scaleX(0);animation:wlTypeIn 3s ease-in-out infinite}
.wl-type rect:nth-child(2){animation-delay:.35s}
.wl-type rect:nth-child(3){animation-delay:.7s}
@keyframes wlTypeIn{0%{transform:scaleX(0)}25%{transform:scaleX(1)}75%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* growth sparkline drawn across a card on hover */
.card .spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:56px;pointer-events:none}
.card .spark .line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.1s ease}
.card:hover .spark .line{stroke-dashoffset:0}
.card .spark .arrow{opacity:0;transition:opacity .3s ease .85s}
.card:hover .spark .arrow{opacity:1}

/* scroll reveal (class added by JS, so no-JS visitors always see the cards) */
/* Doubled .reveal.reveal keeps 0,2,0 specificity so it always wins over the
   later .card / .info-card transition rules (which otherwise kill the fade). */
.reveal.reveal{opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1)}
.reveal.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* scroll transition system (Claude Design port) — heading line reveal + body follow */
.sr-heading{overflow:hidden;padding-bottom:.1em}
.sr-heading .line{display:block;transform:translateY(115%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.sr-heading.in .line{transform:translateY(0)}
.sr-body{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.sr-body.in{opacity:1;transform:none}

/* magnetic CTA (Claude Design port) — shine sweep + particle burst */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:translateX(-200%) skewX(-18deg);pointer-events:none}
.btn-primary:hover::after{animation:wlShine .7s ease}
@keyframes wlShine{0%{transform:translateX(-200%) skewX(-18deg)}100%{transform:translateX(400%) skewX(-18deg)}}
.wl-burst{position:fixed;border-radius:50%;pointer-events:none;z-index:99999}

/* service card links */
.card h3 a{transition:.2s}
.card h3 a:hover{color:var(--purple2)}
.card-link{position:relative;display:inline-flex;align-items:center;gap:8px;color:#cfc8ff;
  font-family:'Sora',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-top:18px;padding-bottom:7px;transition:color .25s ease,gap .3s cubic-bezier(.22,1,.36,1)}
.card-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--purple2),rgba(90,215,255,.6) 60%,transparent);
  transform:scaleX(.34);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.card-link:hover{color:#fff;gap:12px}
.card-link:hover::after{transform:scaleX(1)}

/* SEO body under the services grid */
.svc-seo{max-width:860px;padding:80px 32px 20px}
.svc-seo h2{font-size:24px;margin:32px 0 12px}
.svc-seo p{color:var(--muted);margin-bottom:14px}
.svc-seo a{color:var(--purple2)}

/* service areas (Where We Serve) */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.area-card{padding:26px}
.area-card h3{font-size:17px;margin:14px 0 8px}
.area-card p{color:var(--muted);font-size:13px}
.area-pin .pin-dot{transform-origin:center;transform-box:fill-box;animation:wlPin 2.2s ease-in-out infinite}
@keyframes wlPin{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
.areas-cta{text-align:center;margin-top:40px}
.areas-cta p{color:var(--muted);max-width:560px;margin:0 auto 22px}

/* back to top */
.to-top{position:fixed;right:26px;bottom:26px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s cubic-bezier(.22,1,.36,1);box-shadow:0 10px 30px rgba(124,58,237,.4)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(139,92,246,.55)}

/* service page polish */
.content-card .entry-content > p:first-child{font-size:17px;color:#c6cde4}
.entry-content strong{color:var(--txt)}
.svc-cta{max-width:880px;margin:34px auto 0;text-align:center;border:1px solid var(--border);border-radius:20px;padding:44px 30px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(124,58,237,.16),rgba(10,15,32,.6));position:relative;overflow:hidden}
.svc-cta h2{font-size:28px;margin-bottom:10px}
.svc-cta p{color:var(--muted);max-width:520px;margin:0 auto 8px}
.svc-cta .btn{margin:14px 6px 0}

/* results strip — borderless, sits directly in the page background */
.wl-stats-wrap{padding:0 32px 74px}
.wl-stats{position:relative;display:flex;align-items:center;max-width:980px;margin:0 auto;padding:30px 0}
.wl-stats::before{content:"";position:absolute;inset:-34px -70px;pointer-events:none;
  background:radial-gradient(55% 90% at 50% 50%,rgba(124,58,237,.10),transparent 70%)}
.wl-stat{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px}
.wl-stat-num{font-family:'Sora',sans-serif;font-size:46px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--txt)}
.wl-stat-suffix{color:var(--cyan)}
.wl-stat-label{font-family:'Sora',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.wl-stat-star{color:#f5c065;font-size:.62em;margin-left:5px;vertical-align:middle}
.wl-stat-div{width:1px;height:56px;flex-shrink:0;
  background:linear-gradient(180deg,transparent,rgba(139,92,246,.5),transparent);
  transform:scaleY(0);transform-origin:center;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.wl-stat-div.in{transform:scaleY(1)}
.wl-stat-num.pulse{animation:wlCountPulse .8s cubic-bezier(.22,1,.36,1)}
@keyframes wlCountPulse{0%{text-shadow:0 0 18px rgba(90,215,255,.6)}100%{text-shadow:0 0 0 rgba(90,215,255,0)}}

/* ==== motion pass — intent-driven, one shared curve ====
   Motion happens on scroll-in and on interaction. Nothing loops perpetually
   in the background, so the whole site shares one calm rhythm. */
.card{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .45s ease}
.btn{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,background .3s ease}
.faq-a{transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1)}
/* showcase images lift softly on hover only */
.neon-img,.about-img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sticky-neon:hover .neon-img,.about-grid:hover .about-img{transform:translateY(-6px)}
/* one signature ambient accent, kept subtle: the eyebrow dash shimmers */
.eyebrow::before{background-size:200% 100%;animation:wlDashShimmer 4.2s ease-in-out infinite}
@keyframes wlDashShimmer{0%,100%{background-position:0% 0;opacity:1}50%{background-position:100% 0;opacity:.55}}

/* Card design matched 1:1 to lightslategray-guanaco-667551.hostingersite.com (colors canvas-sampled from the
   original card artwork; crosshair SVG reproduced from the original asset) */
.card{border-radius:20px}
.svc-list .card,.svcpage-grid .card,.diff-grid .card,.areas-grid .card{
  border:1px solid rgba(120,140,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 0% 0%,rgba(20,78,225,.72) 0%,rgba(11,52,160,.34) 27%,rgba(9,46,140,0) 58%),
    radial-gradient(60% 55% at 100% 4%,rgba(6,42,120,.6) 0%,rgba(3,32,95,0) 60%),
    radial-gradient(80% 62% at 10% 100%,rgba(10,34,105,.7) 0%,rgba(6,23,72,0) 64%),
    linear-gradient(150deg,#0a1734 0%,#060d22 48%,#04070f 100%) !important}
/* crosshair accent — exact copy of the original SVG, bottom-right, clipped */
.card::after{content:"";position:absolute;right:-50px;bottom:-50px;width:180px;height:180px;
  pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='201' fill='none'%3E%3Cpath fill='url(%23a)' d='M29.643 29.436h200v1h-200z' transform='rotate(45 29.643 29.436)'/%3E%3Cpath fill='url(%23b)' d='M100.5.5h200v1h-200z' transform='rotate(90 100.5 .5)'/%3E%3Cpath fill='url(%23c)' d='M200 101h200v1H200z' transform='rotate(-180 200 101)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-18.095' x2='294.349' y1='29.936' y2='29.936' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='52.762' x2='365.206' y1='1' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='152.262' x2='464.706' y1='101.5' y2='101.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center/contain}
.card>*{position:relative;z-index:1}
/* icon chip — radial purple like the original */
.card .ico{width:47px;height:47px;border-radius:12px;border:1px solid rgba(255,255,255,.07);
  background:radial-gradient(50% 50% at 50% 50%,rgba(110,36,189,.15) 0%,#090912 100%);
  box-shadow:inset 0 10px 10px -1px rgba(110,36,189,.10)}
/* hairline divider under the card title (fades at both ends) */
.svc-list .card h3::after,.svcpage-grid .card h3::after{content:"";display:block;height:1px;
  width:45%;max-width:220px;margin-top:13px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15) 50%,rgba(255,255,255,0))}
/* tags — soft top-lit pill */
.tag{border-radius:10px;padding:8px 14px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(0deg,rgba(255,255,255,.05),rgba(97,97,97,0))}
/* framed showcase images (neon / DNA) — double frame + purple bloom below */
.sticky-neon{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:30px;
  background:linear-gradient(180deg,rgba(18,24,50,.55),rgba(7,10,24,.55))}
.sticky-neon .neon-img{border-radius:20px}
.sticky-neon::after{content:"";position:absolute;left:12%;right:12%;bottom:-30px;height:90px;
  pointer-events:none;z-index:-1;filter:blur(24px);
  background:radial-gradient(50% 60% at 50% 20%,rgba(124,58,237,.45),rgba(124,58,237,0) 70%)}
.about-img{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:30px;
  background:linear-gradient(180deg,rgba(18,24,50,.55),rgba(7,10,24,.55))}
/* Where We Serve: intro text left + compact radar right, inside the section */
.areas-head.has-radar{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin-bottom:46px}
.areas-head.has-radar .contact-head{text-align:left;margin:0;max-width:none}
.areas-head.has-radar .contact-head p{margin-left:0;max-width:520px}
.areas-radar .wl-radar{max-width:350px;margin:0 0 0 auto}
.areas-radar .wl-radar-eyebrow{top:16px;left:18px}
.areas-radar .wl-radar-label{font-size:10px}

/* ABOUT page (native rebuild — lightslategray-guanaco-667551.hostingersite.com/about) */
.sec-head-center{text-align:center;max-width:700px;margin-left:auto;margin-right:auto}
.sec-head-center p{max-width:600px;margin-left:auto;margin-right:auto}
.diff-grid{margin-top:6px}
.diff-grid .card{padding:28px 26px}
.diff-cta{text-align:center;margin-top:46px}
.about-cta{max-width:860px;margin:0 auto;text-align:center}
.about-cta .sec-head-center{margin-bottom:32px}
.about-cta h2{font-size:clamp(40px,5vw,60px);line-height:1.12;text-wrap:balance}
.about-cta p{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto}
/* Services page: 3-col card grid (overrides areas-grid 4-col) */
.svcpage-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.svcpage-grid .card{display:flex;flex-direction:column}
.svcpage-grid .card .desc{flex:1}
/* Contact page hero: "24/7 — We got you!" badge + heading */
.contact-hero-sec{position:relative;overflow:hidden;padding-bottom:36px}
.contact-hero-sec + .section{padding-top:36px}
.contact-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.ch-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(139,92,246,.45);border-radius:24px;padding:34px 42px;min-width:210px;
  background:linear-gradient(160deg,#0c1430,#080d1e);box-shadow:0 0 42px rgba(124,58,237,.18),inset 0 0 24px rgba(139,92,246,.06)}
.ch-247{font-family:'Sora',sans-serif;font-weight:700;font-size:66px;line-height:1;
  background:linear-gradient(90deg,#7c8cff,#5ad7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-tag{margin-top:6px;color:var(--txt);font-size:16px;font-weight:500;letter-spacing:.2px}
.info-card .t a{color:var(--txt);text-decoration:none;transition:color .2s ease}
.info-card .t a:hover{color:var(--purple2)}
.contact-hero .contact-head{max-width:640px;margin:0;text-align:left}
.contact-hero .ch-badge{justify-self:end}

/* DEDICATED SERVICE PAGES — animated hero, open article, SWFL cities strip */
.svc-hero{position:relative;padding:64px 0 10px}
.svc-hero .breadcrumbs{margin-bottom:30px}
.svc-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}
.svc-hero-text h1{font-size:42px;font-weight:500;margin:16px 0 16px;line-height:1.12}
.svc-hero-text p{color:var(--muted);font-size:17.5px;max-width:560px;margin-bottom:26px}
.svc-hero-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:1.45;max-width:340px;width:100%;margin-left:auto;border-radius:24px}
.svc-hero-icon .ico{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.09);background:radial-gradient(50% 50% at 50% 50%,rgba(110,36,189,.18) 0%,#090912 100%);
  box-shadow:inset 0 10px 12px -1px rgba(110,36,189,.12),0 18px 44px rgba(4,6,16,.5)}
.svc-hero-icon .ico svg{width:54px;height:54px}
.svc-page{padding:28px 32px 90px}
.svc-page .entry-content{max-width:780px}
/* Two-column service layout: readable 780px text + a sticky rail that fills
   the column which was previously empty for the whole length of the article. */
.svc-layout{display:grid;grid-template-columns:minmax(0,780px) minmax(0,1fr);gap:52px;align-items:stretch}
.svc-rail{display:flex;flex-direction:column;gap:18px}
.svc-rail .svc-hero-icon{margin:0;width:100%;max-width:none;aspect-ratio:1.7}
/* Only the CTA follows the reader; the animation scrolls away with the hero. */
.svc-rail-cta{position:sticky;top:100px;background:linear-gradient(160deg,#101a36,#0b1124);border:1px solid var(--border);
  border-radius:20px;padding:24px 22px}
.svc-rail-cta h3{font-size:17px;font-weight:600;line-height:1.35;margin:10px 0 8px}
.svc-rail-cta p{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 16px}
.svc-rail-cta .btn{width:100%;justify-content:center}
.svc-rail-note{margin:12px 0 0 !important;font-size:12.5px;color:var(--muted2);text-align:center}
.svc-rail-alt{margin:14px 0 0 !important;padding-top:14px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.7;color:var(--muted2);text-align:center}
.svc-rail-alt a{color:var(--muted)}
.svc-rail-alt a:hover{color:#fff}
/* Service hero without the icon: let the copy use the full width. */
.svc-hero-solo{grid-template-columns:1fr}
.svc-hero-solo .svc-hero-text p{max-width:760px}
@media(max-width:1100px){
  .svc-layout{grid-template-columns:1fr;gap:34px}
  .svc-rail-cta{position:static}
  .svc-rail{flex-direction:row;flex-wrap:wrap}
  .svc-rail > *{flex:1 1 280px}
  .svc-rail .svc-hero-icon{aspect-ratio:2.2}
}
@media(max-width:640px){.svc-rail{flex-direction:column}}
.svc-page .entry-content h2{font-size:28px;margin:40px 0 14px}
.svc-page .entry-content p{color:var(--muted);margin-bottom:16px;line-height:1.75}
.svc-page .entry-content a{color:var(--purple2);border-bottom:1px solid rgba(139,92,246,.35)}
.svc-page .entry-content a.btn{border-bottom:0;color:#fff}
.svc-page .entry-content ul{list-style:none;margin:18px 0 26px;padding:0}
.svc-page .entry-content ul li{position:relative;padding:11px 15px 11px 42px;margin-bottom:9px;border:1px solid var(--border);
  border-radius:12px;background:rgba(16,26,54,.35);color:var(--muted);transition:border-color .25s ease,transform .25s ease}
.svc-page .entry-content ul li:hover{border-color:rgba(139,92,246,.5);transform:translateX(4px)}
.svc-page .entry-content ul li::before{content:"";position:absolute;left:14px;top:15px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,#8b5cf6,#5b2fbf);box-shadow:0 0 10px rgba(139,92,246,.55)}
.svc-page .entry-content ul li::after{content:"";position:absolute;left:18.5px;top:19px;width:5px;height:8px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
.svc-cities{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:46px 0 10px;padding:18px 20px;
  border:1px solid var(--border);border-radius:16px;background:rgba(13,19,38,.5)}
.svc-cities .lbl{color:var(--muted2);font-size:13px;margin-right:4px}
.svc-city{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
  font-size:13px;color:var(--muted);background:linear-gradient(0deg,rgba(255,255,255,.04),rgba(97,97,97,0));transition:.25s}
.svc-city:hover{color:#fff;border-color:rgba(139,92,246,.6);transform:translateY(-2px)}
.svc-city .pin-dot{transform-origin:center;transform-box:fill-box;animation:wlPin 2.2s ease-in-out infinite}
/* city pages: compact radar in the hero; FAQ inside content */
.svc-hero-radar .wl-radar{max-width:320px;margin:0 0 0 auto}
.svc-hero-radar .wl-radar-eyebrow{top:16px;left:18px}
.svc-page .city-faq{margin:8px 0 26px;max-width:780px}
/* clickable city cards on Where We Serve */
a.area-card{display:block;color:inherit}
a.area-card .card-link{margin-top:12px}

/* BLOG (Resources): card grid, single post, pagination */
.blog-head{margin-bottom:46px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-grid .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.blog-thumb{display:block;aspect-ratio:2.15;position:relative;background:linear-gradient(150deg,#14204a,#0a1024)}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.85}
.blog-thumb .ph svg{width:44px;height:44px}
.blog-body{padding:20px 24px 22px;display:flex;flex-direction:column;flex:1}
.blog-cat{display:inline-flex;align-self:flex-start;padding:4px 11px;border:1px solid rgba(139,92,246,.4);border-radius:999px;
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--purple2);margin-bottom:12px;transition:.2s}
.blog-cat:hover{background:rgba(139,92,246,.15)}
.blog-body h3{font-size:18.5px;line-height:1.35;margin-bottom:10px}
.blog-body h3 a:hover{color:var(--purple2)}
.blog-body>p{color:var(--muted);font-size:14px;flex:1;margin:0}
.blog-meta{color:var(--muted2);font-size:12.5px;margin-top:14px;display:flex;gap:8px;align-items:center}
.post-hero .post-meta{color:var(--muted2);font-size:14px;margin-top:6px}
.post-feat{margin:0 0 34px;max-width:780px}
.post-feat img{width:auto;height:auto;max-width:100%;max-height:340px;display:block;border-radius:20px;border:1px solid rgba(255,255,255,.08)}
.blog-related{margin-top:56px}
.blog-related h2{font-size:26px;margin-bottom:22px}
.blog-empty{text-align:center;color:var(--muted);padding:30px 0 10px}
.blog-empty .btn{margin-top:14px}
/* pagination (scoped — .nav-links also exists in the header) */
.navigation.pagination{margin-top:46px}
.navigation.pagination .nav-links{display:flex;gap:8px;justify-content:center;position:static;background:none;border:0;padding:0}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:14px;transition:.2s}
.page-numbers.current{background:var(--purple);color:#fff;border-color:transparent}
a.page-numbers:hover{border-color:rgba(139,92,246,.6);color:#fff}
.svc-cta .cta-alt{margin-top:12px;font-size:13.5px;color:var(--muted2)}
.svc-cta .cta-alt a{color:var(--muted);border-bottom:1px solid rgba(139,92,246,.35)}
.svc-cta .cta-alt a:hover{color:#fff}

/* OUR WORK — poster-card board (weleadag reference style) */
.work-page .entry-content{max-width:none}
.work-page .entry-content > .eyebrow{margin-bottom:14px}
.work-page .entry-content h1{font-size:clamp(30px,4vw,44px);font-weight:500;margin:0 0 10px}
.work-page .entry-content > p.lead{color:var(--muted);max-width:600px;margin:0}
.wl-board{margin-top:28px;background:#070a16;border:1px solid var(--border);border-radius:22px;padding:22px 22px 26px}
.wl-wtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.wl-wtab{background:none;border:0;cursor:pointer;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:500;
  color:var(--muted);padding:8px 16px;border-radius:10px;transition:background .2s,color .2s}
.wl-wtab:hover{color:#fff}
.wl-wtab.on{background:#161d33;color:#fff}
.wl-wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.wl-wcard{position:relative;border-radius:18px;overflow:hidden;min-height:330px;border:1px solid rgba(94,118,255,.22);
  display:flex;flex-direction:column;padding:18px;isolation:isolate;text-decoration:none;color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s}
.wl-wcard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 100% at 50% -20%,#2d47d8 0%,#16246e 44%,#0a1030 78%,#070b20 100%)}
.wl-wcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 60% at 50% 115%,rgba(4,6,14,.75),transparent 60%)}
a.wl-wcard:hover{transform:translateY(-6px);border-color:rgba(140,160,255,.45)}
.wl-wposter{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:26px 10px 20px}
.wl-wposter span{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:.015em;
  text-shadow:0 3px 26px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.08)}
.wl-wbar{background:rgba(7,10,22,.82);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wl-wbar p{margin:0 !important;font-size:12.8px;line-height:1.45;color:#e6eaf6 !important;max-width:75%}
.wl-wchip{flex-shrink:0;font-size:11.5px;font-weight:600;color:#fff;background:#1d2340;border:1px solid rgba(255,255,255,.08);
  padding:5px 11px;border-radius:8px;white-space:nowrap}
.wl-wchip.win{background:rgba(74,222,128,.16);border-color:rgba(74,222,128,.35);color:#4ade80}
.wl-wcard .wl-wsoon{position:absolute;top:14px;right:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:rgba(7,10,22,.7);border:1px solid rgba(255,255,255,.08);padding:4px 9px;border-radius:999px;
  opacity:0;transition:opacity .25s}
.wl-wcard.soon:hover .wl-wsoon{opacity:1}

/* MARKETING GUIDES — big centered floating playbooks (weleadag style) */
.guides-head{text-align:center;max-width:720px;margin:0 auto}
.work-page .entry-content .guides-head h1{font-size:clamp(32px,4.4vw,50px)}
.work-page .entry-content .guides-head > p.lead{margin:0 auto;max-width:620px}
.wl-guides{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(40px,7vw,90px);margin-top:60px}
.wl-guide{width:min(430px,86vw);text-align:center;text-decoration:none;display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wl-guide:hover{transform:translateY(-12px)}
.wl-guide img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 44px rgba(0,0,0,.55));
  animation:wlBookFloat 6.5s ease-in-out infinite}
.wl-guide:nth-child(2) img{animation-delay:-3.2s}
@keyframes wlBookFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.wl-guide-name{display:block;margin-top:20px;font-family:'Sora',sans-serif;font-weight:600;font-size:18.5px;color:var(--txt)}
.wl-guide{position:relative}
.wl-guide-flag{position:absolute;top:6px;right:9%;z-index:2;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;color:#fff;background:linear-gradient(90deg,#8b5cf6,#5ad7ff);padding:6px 13px;border-radius:999px;
  box-shadow:0 8px 22px rgba(90,60,220,.45);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wl-guide:hover .wl-guide-flag{transform:scale(1.08)}
.guides-embed{padding:34px 0 0}
.blog-head .blog-h{font-size:clamp(28px,3.8vw,42px);font-weight:500;letter-spacing:-.02em;margin:12px 0 12px}

/* BLOG (Insights) — category filter chips */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.blog-cats .cat{font-size:12.5px;color:var(--muted);border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.blog-cats .cat:hover{color:#fff;border-color:var(--purple2)}
.blog-cats .cat.on{background:var(--purple2);border-color:var(--purple2);color:#fff}

/* SERVICES PAGE — core pillars + system flow + supporting + proof */
.svc-pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.card.svc-pillar{padding:30px 30px 26px}
.svc-pillar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.svc-pillar-tag{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.card.svc-pillar h3{font-size:23px;margin:0 0 8px}
.card.svc-pillar h3 a{color:var(--txt)}
.svc-pillar-line{color:var(--muted);margin:0 0 18px;line-height:1.65}
.svc-pillar-caps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.svc-pillar-caps li{position:relative;padding-left:26px;color:#c6cde4;font-size:14px}
.svc-pillar-caps li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle,#8b5cf6,#5b2fbf);box-shadow:0 0 10px rgba(139,92,246,.5)}
.svc-pillar-caps li::after{content:"";position:absolute;left:4.5px;top:8px;width:4px;height:7px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}

.svc-flow-sec{background:linear-gradient(180deg,rgba(16,26,54,0),rgba(16,26,54,.32),rgba(16,26,54,0))}
.svc-flow{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc-flow-step{position:relative;padding:24px 20px;border:1px solid var(--border);border-radius:16px;
  background:rgba(16,26,54,.35);display:flex;flex-direction:column;gap:8px}
.svc-flow-step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,#8b5cf6,#5ad7ff);z-index:2}
.svc-flow-num{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:var(--purple2);letter-spacing:.05em}
.svc-flow-name{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;color:var(--txt)}
.svc-flow-desc{color:var(--muted);font-size:14px;line-height:1.6}

.svc-support{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.svc-support-card{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--border);border-radius:16px;
  background:rgba(16,26,54,.3);text-decoration:none;transition:border-color .25s ease,transform .25s ease,background .25s ease}
.svc-support-card:hover{border-color:rgba(139,92,246,.5);transform:translateY(-4px);background:rgba(16,26,54,.5)}
.svc-support-ico{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:radial-gradient(50% 50% at 50% 50%,rgba(110,36,189,.18),#090912)}
.svc-support-ico svg{width:22px;height:22px}
.svc-support-body{display:flex;flex-direction:column;gap:4px}
.svc-support-body strong{font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;color:var(--txt)}
.svc-support-body span{color:var(--muted);font-size:13.5px;line-height:1.55}

.svc-proof{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center;
  border:1px solid var(--border);border-radius:22px;padding:38px 40px;
  background:linear-gradient(150deg,rgba(26,47,176,.18),rgba(91,31,184,.14))}
.svc-proof-text h2{font-size:28px;margin:12px 0 10px}
.svc-proof-text p{color:#c6cde4;margin:0 0 22px;max-width:46ch}
.svc-proof-audience{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
.svc-proof-label{width:100%;font-family:'Sora',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.svc-aud-chip{font-size:13px;color:#c6cde4;border:1px solid var(--border);border-radius:999px;padding:8px 14px;
  background:rgba(16,26,54,.4)}
.svc-copy{max-width:760px;margin:0 auto}
.svc-copy h2{font-size:25px;margin:0 0 12px}
.svc-copy h2:not(:first-child){margin-top:34px}
.svc-copy p{color:#c6cde4;line-height:1.78;margin:0 0 14px}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid,.services-grid,.about-grid,.faq-grid,.contact-grid,.form-row{grid-template-columns:1fr}
  .hero h1{font-size:40px}.neon-box span{font-size:40px}.about-words .w{font-size:40px}
  .sec-head h1,.sec-head h2,.about-cta h2{font-size:32px}
  .sticky-neon{position:static}
  .form-row .field{margin-bottom:22px}
  .form-row .field:last-child{margin-bottom:0}
  .form-row{margin-bottom:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .areas-grid{grid-template-columns:1fr 1fr}
  .svcpage-grid{grid-template-columns:1fr}
  .wl-wgrid{grid-template-columns:1fr}
  .wl-wcard{min-height:280px}
  .svc-pillars{grid-template-columns:1fr}
  .svc-flow{grid-template-columns:1fr 1fr}
  .svc-flow-step:not(:last-child)::after{display:none}
  .svc-support{grid-template-columns:1fr 1fr}
  .svc-proof{grid-template-columns:1fr;padding:28px 24px;gap:24px}
  .contact-hero{grid-template-columns:1fr;gap:22px}.contact-hero .ch-badge{justify-self:start}
  .ch-badge{min-width:0}.ch-247{font-size:52px}
  .areas-head.has-radar{grid-template-columns:1fr;gap:30px}
  .areas-head.has-radar .contact-head{text-align:center;margin:0 auto}
  .areas-radar .wl-radar{margin:0 auto;max-width:320px}
  .svc-hero-grid{grid-template-columns:1fr;gap:26px}
  .svc-hero-text h1{font-size:32px}
  .svc-hero-icon{margin:0 auto;max-width:260px}
  .svc-hero-radar .wl-radar{margin:0 auto;max-width:290px}
  .blog-grid{grid-template-columns:1fr}
  .navigation.pagination .nav-links{display:flex;position:static;background:none;border:0;padding:0;flex-direction:row}
  .wl-stats{display:grid;grid-template-columns:1fr 1fr;row-gap:30px;column-gap:16px;padding:12px 0}
  .wl-stat-div{display:none}
  .wl-stat-num{font-size:36px}

  /* match the original Framer mobile layout */
  .section{padding:70px 0}
  .hero{padding:40px 0 50px}
  .hero-img{display:none}
  .hero-cta{flex-direction:column;align-items:flex-start;margin-bottom:44px}
  .clients{gap:24px}
  .clients-marquee{max-width:100%}
  .clients-track img{margin-right:24px}
  .clients-track a{margin-right:24px}
  .clients-track a > img{margin-right:0}
  .clients img.client-md{height:30px}
  .clients img.client-lg{height:32px}
  .about-grid .about-img{order:2}
  .glow-hero-1{width:320px;height:320px;right:-80px;top:-100px}
  .glow-hero-2{width:260px;height:260px;left:-70px}
  .logo-img,.custom-logo{height:38px}

  /* mobile nav */
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav-sep{display:none}
  .nav-links{display:none;position:absolute;top:100%;left:-32px;right:-32px;
    background:var(--bg2);border-bottom:1px solid var(--border);
    padding:20px 32px 26px;flex-direction:column;align-items:flex-start;gap:0}
  .site-header.nav-open .nav-links{display:flex}
  .nav-links ul.nav-menu{flex-direction:column;align-items:flex-start;gap:18px;width:100%}
  .nav-links a{font-size:16px}
  /* Submeniul inline, dar PLIAT. Desfacut permanent, cele noua servicii duceau meniul
     la ~730px — mai inalt decat ecranul unui telefon, deci utilizabil doar prin scroll.
     Pliat, tot meniul incape fara derulare; scrollul de mai jos ramane doar plasa. */
  .nav-links ul.nav-menu > li.menu-item-has-children{display:flex;flex-wrap:wrap;
    align-items:center;width:100%}
  .nav-links ul.nav-menu > li.menu-item-has-children > a{flex:1 1 auto}
  .sub-toggle{display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:44px;height:44px;margin:-10px -10px -10px 0;
    padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sub-toggle::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted2);
    border-bottom:2px solid var(--muted2);transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s}
  .menu-item-has-children.open > .sub-toggle::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .nav-links .sub-menu{display:none;flex-basis:100%;position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;background:none;padding:6px 0 4px 16px;min-width:0}
  .menu-item-has-children.open > .sub-menu{display:block}
  .nav-links .sub-menu a{padding:8px 0;font-size:14px;color:var(--muted2)}
  .nav-links .sub-menu a:hover{background:none;padding-left:0}
  .nav-links .menu-item-has-children > a::before{display:none}
  .nav-links ul.nav-menu > li > a::after{display:none}
}

/* ---- phone-specific mobile polish (<=640px) ---- */
@media(max-width:640px){
  /* iOS zooms the page on focus when an input's font-size is <16px */
  .field input,.field select,.field textarea{font-size:16px}
  /* full-width, centred primary CTAs are far easier to thumb-tap */
  .hero-cta{align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
  /* comfortable 44px tap target for the hamburger */
  .nav-toggle{width:44px;height:44px}

  .areas-grid{grid-template-columns:1fr !important}
  .svc-support,.svc-flow,.svc-pillars{grid-template-columns:1fr}
  .wl-stats{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:24px}
  .wl-stat-num{font-size:38px}
  .form-box{padding:24px 20px}
  .field,.form-row,.form-row .field{margin-bottom:12px}
  .field label{margin-bottom:5px;font-size:13px}
  .field input,.field select,.field textarea{padding:11px 14px}
  .field textarea{min-height:84px}
  .field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(139,92,246,.18)}
  .form-row:has(#wl-first),.form-row:has(#wle-first){grid-template-columns:1fr 1fr;gap:12px}
  .form-row:has(#wl-first) .field,.form-row:has(#wle-first) .field{margin-bottom:0}
  .site-footer{padding:36px 0 24px;margin-top:18px}
  .foot-grid{gap:22px 20px}
  .foot-grid h4{font-size:14px;margin-bottom:10px}
  .foot-grid a,.foot-grid p{font-size:13.5px;margin-bottom:8px}
  .foot-brand .foot-tag{margin-top:10px;max-width:none}
  .foot-menu{columns:2;column-gap:14px}
  .foot-social a{width:36px;height:36px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-bottom a{margin-left:0;margin-right:16px}
}

/* ============================================================================
   MOTION IS INTENTIONAL ON THIS BUILD.
   Elementor/plugin stylesheets inject a global `* { transition/animation: ...0s }`
   reset under (prefers-reduced-motion: reduce). Because the client's OS has
   "reduce motion" enabled as a general Windows setting (not an accessibility
   need for this site) and explicitly wants the motion, we re-declare our own
   transitions & keyframes with !important. Class specificity (>= 0,1,0) beats
   the universal `*` reset even though both are !important, so ours win.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* --- scroll-reveal transitions (the entrance effects) --- */
  .reveal.reveal { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1) !important; }
  .sr-heading .line { transition: transform .9s cubic-bezier(.22,1,.36,1) !important; }
  .sr-body { transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1) !important; }

  /* --- interactive / hover transitions --- */
  .card { transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease !important; }
  .card::before { transition: opacity .4s !important; }
  .btn { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .3s ease !important; }
  .neon-img, .about-img { transition: transform .5s cubic-bezier(.22,1,.36,1) !important; }
  .card .spark .line { transition: stroke-dashoffset 1.1s ease !important; }
  .card .spark .arrow { transition: opacity .3s ease .85s !important; }
  .info-card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important; }
  .nav-links a, .breadcrumbs a, .foot-grid a { transition: color .2s ease !important; }
  .faq-a { transition: max-height .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1) !important; }
  .faq-q .pm { transition: transform .3s ease, color .3s ease !important; }
  .to-top { transition: opacity .35s ease, transform .35s ease, background .3s ease !important; }
  .site-header { transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .4s ease !important; }
  html { scroll-behavior: smooth !important; }

  /* --- keyframe animations: logo marquee, hero SVG, accents --- */
  .clients-track { animation: welead-clients-scroll 24s linear infinite !important; }
  .wl-cursor { animation: wlBlink 1.1s steps(1) infinite !important; }
  .wl-heart { animation: wlHeart 1.9s ease-in-out infinite !important; }
  .wl-plus { animation: wlFloatUp 2.8s ease-out infinite !important; }
  .wl-star2 { animation: wlTwinkle2 2.4s ease-in-out infinite !important; }
  .wl-bars rect { animation: wlGrowBar 2.4s ease-in-out infinite !important; }
  .wl-draw { animation: wlDrawLine 2.6s ease-in-out infinite !important; }
  .wl-type rect { animation: wlTypeIn 3s ease-in-out infinite !important; }
  .area-pin .pin-dot, .svc-city .pin-dot { animation: wlPin 2.2s ease-in-out infinite !important; }
  .wl-stat-num.pulse { animation: wlCountPulse .8s cubic-bezier(.22,1,.36,1) !important; }
  .eyebrow::before { animation: wlDotPulse 3.4s ease-in-out infinite !important; }
  .btn-primary:hover::after { animation: wlShine .7s ease !important; }
}


/* ---------- Self-check: the reader diagnoses their own business, no tools, no us.
   Deliberately looks like an instrument rather than another prose block. ---------- */
.selfcheck{background:linear-gradient(160deg,#101a36,#0b1124);border:1px solid #2b3760;
  border-left:3px solid var(--cyan);border-radius:18px;padding:34px 36px;margin:44px 0}
.selfcheck .sc-kick{display:block;font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.entry-content .selfcheck h2{font-size:30px;margin:0 0 8px;line-height:1.2}
.selfcheck .sc-lead{color:var(--muted);font-size:15.5px;margin:0 0 22px}
.selfcheck ol{list-style:none;counter-reset:sc;margin:0;padding:0}
.selfcheck ol li{counter-increment:sc;position:relative;padding:0 0 20px 52px;margin:0}
.selfcheck ol li::before{content:counter(sc);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;background:rgba(90,215,255,.12);
  border:1px solid rgba(90,215,255,.4);color:var(--cyan);
  font-family:'Sora',sans-serif;font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.selfcheck ol li b{color:var(--txt);font-weight:600;display:block;margin-bottom:5px}
.selfcheck ol li span{color:var(--muted);font-size:15px;display:block}
.selfcheck ol li em{display:block;margin-top:7px;color:#cfd6f5;font-style:normal;
  font-size:14.5px;padding-left:14px;border-left:2px solid rgba(139,92,246,.5)}
.selfcheck .sc-note{margin:6px 0 0;padding-top:18px;border-top:1px solid #1b2440;
  color:var(--muted);font-size:14.5px}
@media(max-width:640px){
  .selfcheck{padding:26px 22px;margin:32px 0}
  .entry-content .selfcheck h2{font-size:25px}
  .selfcheck ol li{padding-left:44px}
  .selfcheck ol li::before{width:30px;height:30px;font-size:14px}
}


/* ---------- Team cards (CPT welead_member, no third-party plugin) ---------- */
/* Roster de echipa, nu carduri cu poza.
   Cardurile erau construite in jurul unei fotografii pe care echipa nu o are, deci
   ramaneau cinci rame cu o initiala in ele; iar cinci oameni intr-un grid de trei
   coloane lasau un rand rupt 3+2 cu funduri inegale. Un rand pe om nu are rand rupt
   la niciun numar de oameni si nu are nevoie de poze ca sa arate intentionat. */
.team-roster{max-width:940px;margin:40px auto 0}
.tr-row{display:grid;grid-template-columns:minmax(180px,236px) 1fr;gap:14px 44px;
  align-items:start;padding:28px 0 30px;border-bottom:1px solid var(--border)}
.tr-row:first-child{border-top:1px solid var(--border)}

/* Semnul de dinaintea numelui se lungeste la hover: randul raspunde fara sa se mute
   nimic din loc, deci nu apare niciun salt de asezare. */
.tr-who::before{content:"";display:block;width:26px;height:2px;margin:0 0 15px;
  background:var(--cyan);opacity:.34;
  transition:width .4s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.tr-row:hover .tr-who::before{width:52px;opacity:1}

.tr-name{font-family:'Sora',sans-serif;font-weight:600;font-size:22px;line-height:1.2;
  letter-spacing:-.015em;color:var(--txt);margin:0 0 7px;transition:color .3s ease}
.tr-row:hover .tr-name{color:#fff}
.tr-role{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);margin:0}
.tr-in{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12.5px;letter-spacing:.04em;color:var(--muted);transition:color .25s ease}
.tr-in:hover{color:#fff}
.tr-bio{font-size:15.5px;line-height:1.72;color:var(--muted);margin:0}

/* Poza ramane optionala. Daca cineva incarca una, apare ca portret mic la capatul
   randului; pana atunci coloana nici nu exista, deci nu lasa gol. */
.team-roster:has(.tr-face) .tr-row{grid-template-columns:minmax(180px,236px) 1fr 76px}
.tr-face img{width:76px;height:76px;border-radius:16px;object-fit:cover;display:block}

@media(max-width:760px){
  .tr-row{grid-template-columns:1fr;gap:12px;padding:24px 0 26px}
  .tr-name{font-size:20px}
  .tr-bio{font-size:15px}
  .tr-who::before{margin-bottom:13px}
  .team-roster:has(.tr-face) .tr-row{grid-template-columns:1fr}
  .tr-face img{width:64px;height:64px}
}

/* Povestea de pe About, layout editorial: titlul tine coloana din stanga, textul
   curge in dreapta. Variantele anterioare fie inghesuiau textul intr-o coloana de
   380px langa un card care plutea, fie il centrau si lasau jumatate de pagina goala.
   Aici latimea e folosita toata si randul ramane la ~70 de caractere. */
.about-story{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:90px;align-items:start}
.about-story .as-head{position:sticky;top:120px}
.about-story .eyebrow{display:block;margin-bottom:16px}
.about-story h2{margin:0}
.about-story p{max-width:none;margin:0 0 20px;font-size:17px;line-height:1.8}
.about-story p:first-child{font-size:19px;line-height:1.75;color:var(--txt)}
.about-story p:last-child{margin-bottom:0}

/* Crezul: banda de incheiere a sectiunii, pe toata latimea. */
.creed-strip{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  margin:64px 0 0;padding:34px 0 0;border-top:1px solid var(--border)}
.creed-strip li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--muted)}
.creed-strip li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--cyan);box-sizing:border-box}

@media(max-width:1080px){
  .about-story{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px}
}
@media(max-width:900px){
  .about-story{grid-template-columns:1fr;gap:24px}
  .about-story .as-head{position:static}
  .creed-strip{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
}
@media(max-width:640px){
  .about-story p{font-size:16px;line-height:1.7;margin-bottom:16px}
  .about-story p:first-child{font-size:17px}
  .creed-strip{grid-template-columns:1fr;gap:16px;margin-top:36px;padding-top:26px}
}
/* ---- 404 ---- */
.e404 .sec-head-center h1{font-size:clamp(34px,5vw,56px);line-height:1.1;margin:14px 0 16px}
.e404-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
.e404-card{display:block;text-decoration:none}
.e404-card h3{margin:0 0 8px;font-size:19px}
.e404-card .desc{font-size:15px;line-height:1.6;color:var(--muted)}
.e404-cta{margin-top:36px;text-align:center}
@media(max-width:900px){.e404-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:600px){.e404-grid{grid-template-columns:1fr}}

/* ---- Bara de contact pe mobil ----
   Ascunsa pe desktop, unde exista deja CTA in header. Pe mobil sta fixa jos, iar
   body-ul primeste padding cat inaltimea ei ca sa nu acopere finalul paginii. */
.mbar{display:none}
@media(max-width:900px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;z-index:60;
    left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,10,26,.92);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
  .mbar-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
    border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;padding:0 12px;text-align:center}
  .mbar-call{color:var(--txt);border:1px solid var(--border);background:rgba(255,255,255,.04)}
  .mbar-cta{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2))}
  .mbar-btn svg{flex:0 0 auto}
  body{padding-bottom:78px}
  .to-top{bottom:88px}
}

/* ---- Hero pe mobil ----
   Ilustratiile erau display:none sub 900px, deci pe telefon fiecare pagina incepea
   cu text pe fundal gol. Le aratam mai mici, sub text. */
@media(max-width:900px){
  .hero-img,.hero-anim{display:block !important;width:100%;max-width:460px;height:auto;margin:26px auto 0}
}
@media(max-width:520px){
  .hero-img,.hero-anim{max-width:100%;margin-top:20px}
}

/* ---- Servicii inrudite ---- */
.related-svc{margin:56px 0 0;padding-top:36px;border-top:1px solid var(--border)}
.related-svc h2{margin:0 0 22px;font-size:clamp(22px,2.4vw,28px)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.related-card h3{margin:0;font-size:18px}
.related-card .desc{font-size:15px;line-height:1.6;color:var(--muted);flex:1}
.related-more{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan)}
@media(max-width:900px){.related-grid{grid-template-columns:1fr;gap:14px}}

/* ---- Tinte de atins in footer pe mobil ----
   Linkurile aveau 18-22px inaltime, mult sub ce se poate apasa comod cu degetul. */
@media(max-width:900px){
  .site-footer a{display:inline-flex;align-items:center;min-height:44px}
  .foot-grid p a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer li{margin:0}
}
/* ---- Citatul clientului in studiile de caz ----
   Sta langa rezultate ca cifra sa aiba o voce omeneasca alaturi. In main.css, nu in
   <style>-ul din continutul paginii, ca sa se aplice si urmatoarelor studii de caz. */
.cs-quote{position:relative;margin:44px 0;padding:30px 32px 28px 34px;
  border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:14px;
  background:linear-gradient(140deg,rgba(124,92,255,.10),rgba(34,211,238,.05))}
.cs-quote blockquote{margin:0;padding:0;border:0}
.cs-quote blockquote p{margin:0;font-size:17px;line-height:1.75;color:var(--txt)}
.cs-quote blockquote p::before{content:"\201C"}
.cs-quote blockquote p::after{content:"\201D"}
.cs-quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:20px}
.cs-quote-name{font-weight:700;font-size:15px;color:var(--txt)}
.cs-quote-role{font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--cyan)}
/* Linkul de verificare: impins in dreapta pe desktop ca sa se citeasca drept sursa,
   nu drept parte din functia omului. Sageata e in ::after ca sa nu intre in text. */
.cs-quote .cs-quote-src{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:1px}
.cs-quote .cs-quote-src::after{content:" \2197"}
.cs-quote .cs-quote-src:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
@media(max-width:640px){.cs-quote .cs-quote-src{margin-left:0;flex-basis:100%;margin-top:6px}}
@media(max-width:640px){
  .cs-quote{margin:32px 0;padding:24px 20px 22px 22px}
  .cs-quote blockquote p{font-size:16px;line-height:1.7}
}
/* ---- Vizualul de pe paginile de serviciu ----
   Sta in bara laterala lipicioasa, exact pe locul unde era cardul cu iconita: aceeasi
   pozitie si aceeasi amprenta, dar munca reala a agentiei in loc de ornament.

   Rama e aceeasi cu a imaginilor de pe homepage (.sticky-neon): chenar cu padding, colt
   mare si o lumina difuza dedesubt. Preferam sa reia un tratament existent decat sa
   introduca inca o conventie noua pe site.

   Gradarea de culoare se face din CSS, nu in fisier: materialele vin de pe site-ul vechi
   si au fundal albastru electric, mult mai deschis decat tema de acum. Prima incercare
   cobora luminozitatea la 90% si inchidea prea mult munca din poza — acum doar
   desaturam si lasam materialul sa se vada. */
.svc-rail-img{position:relative;margin:0 0 26px;padding:10px;border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(18,24,50,.55),rgba(7,10,24,.55));
  line-height:0}
.svc-rail-img img{display:block;width:100%;height:auto;border-radius:18px;
  filter:saturate(.72) brightness(1.05) contrast(1.02) hue-rotate(-6deg)}
.svc-rail-img::after{content:"";position:absolute;left:14%;right:14%;bottom:-22px;height:70px;
  pointer-events:none;z-index:-1;filter:blur(22px);
  background:radial-gradient(50% 60% at 50% 20%,rgba(124,58,237,.40),rgba(124,58,237,0) 70%)}

/* Social: telefonul arata profilul real, cu numarul de urmaritori lizibil. Pe pagina care
   vinde social media cifra aia lucreaza impotriva noastra, deci decupam pe cardurile din
   fata si lasam profilul in afara cadrului. */
.svc-rail-img.svc-img-social img{aspect-ratio:1/1;object-fit:cover;object-position:74% 46%}

/* Web design: macheta are mult albastru gol deasupra si dedesubtul dispozitivelor, care
   la latimea barei le lasa mici. Taiem sus si jos ca sa intre in cadru mai mari. */
.svc-rail-img.svc-img-web-design img{aspect-ratio:4/3;object-fit:cover;object-position:center 48%}

/* Sub 1000px bara curge sub articol, deci imaginea nu mai are voie sa ocupe tot ecranul. */
@media(max-width:1000px){
  .svc-rail-img{max-width:420px;margin:0 auto 26px;border-radius:22px}
  /* Pe desktop bara e coloana laterala, deci vizualul se vede imediat. Pe mobil grila
     se prabuseste pe o coloana, iar bara vine dupa articol in cod — asa ca imaginea
     ateriza la ~9900px pe o pagina de 11800, adica nu o vedea nimeni.

     Solutia: bara devine display:contents, deci copiii ei urca direct in grila paginii
     si pot fi ordonati fata de articol. Imaginea trece sus, sub titlu; CTA-ul ramane
     jos, dupa ce omul a citit. */
  .svc-rail{display:contents}
  .svc-rail-img,.svc-rail .svc-hero-icon,.wl-phone{order:-1}
  .svc-article{order:0}
  .svc-rail-cta{order:1}
}
/* ---- Listele de includeri de pe paginile de serviciu ----
   Fiecare rand avea cutie proprie: chenar, fundal, colt rotunjit si o bulina violet cu
   halo. Cinci randuri insemnau cinci cutii stivuite cu cinci lumini aprinse — citea a
   sir de butoane, nu a lista. Plus hover-ul care impingea randul la dreapta si lasa
   impresia ca unul e selectat.

   Acum: linii subtiri de separare, o bifa mica cyan, si atat. Ramane scanabil, dar nu
   mai concureaza cu titlurile din jur. */
.svc-page .entry-content ul{margin:24px 0;padding:0;list-style:none;
  border-top:1px solid var(--border)}
.svc-page .entry-content ul li{position:relative;margin:0;padding:13px 0 13px 32px;
  border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;
  color:var(--muted);transition:color .2s ease}
.svc-page .entry-content ul li strong{color:var(--txt)}
.svc-page .entry-content ul li:hover{color:var(--txt);transform:none}
/* bifa desenata din doua laturi, fara cerc si fara halo */
.svc-page .entry-content ul li::before{content:"";position:absolute;left:6px;top:19px;
  width:11px;height:6px;border-radius:1px;background:none;box-shadow:none;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg)}
.svc-page .entry-content ul li::after{content:none}
@media(max-width:640px){
  .svc-page .entry-content ul li{padding:12px 0 12px 28px}
  .svc-page .entry-content ul li::before{left:4px;top:18px}
}
/* ---- Meniul mobil: scroll propriu si fundal blocat ----
   Meniul e position:absolute sub header, fara inaltime limitata. Cu noua servicii in
   submeniu depaseste ecranul, iar degetul ajungea sa deruleze pagina din spate in loc
   de meniu. Ii dam inaltime maxima si scroll propriu, cu overscroll-behavior:contain ca
   miscarea sa nu se propage la document cand ajunge la capat. Clasa nav-locked pe html
   o pune JS-ul cat timp meniul e deschis.

   Nu are nevoie de media query: .nav-open se pune doar de butonul hamburger, care e
   ascuns pe desktop. */
/* Prima incercare a pus max-height pe meniu, care e position:absolute in interiorul
   unui header position:fixed. Pe iOS scrollul intr-un astfel de container e nesigur:
   gestul ajunge la containerul fixat parinte, nu la cel cu overflow. Il scoatem din
   header si il facem panou fixat de viewport, de la sub header pana jos. Asa e un
   container de scroll obisnuit si se comporta la fel peste tot. */
.site-header.nav-open .nav-links{position:fixed;top:var(--hdr-h,84px);left:0;right:0;bottom:0;
  max-height:none;padding:20px 26px calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:70}
html.nav-locked,html.nav-locked body{overflow:hidden}

/* Header-ul are backdrop-filter, iar backdrop-filter creeaza context de pozitionare —
   la fel ca transform. Din cauza asta position:fixed din meniu se raporta la header
   (83px inaltime) in loc de ecran, si panoul iesea de 61px in loc de 556px. Il oprim
   cat timp meniul e deschis; pagina din spate e oricum blocata, deci sticla nu se vede
   si nu pierdem nimic vizual. Fundalul devine opac, ca sa nu razbata textul prin el. */
html.nav-locked .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--bg2)}
/* ---- Rama de telefon pentru explainer ----
   Desenata in CSS, nu imagine: ramane clara la orice rezolutie, se adapteaza si nu
   adauga niciun fisier. Ecranul e 9:16, cat filmul, deci nu se taie nimic.

   Costul paginii e doar posterul; filmul are preload="none" si se descarca abia la
   apasarea pe play. */
.wl-phone{position:relative;width:100%;max-width:300px;margin:0 auto 26px;padding:9px;
  border-radius:42px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(158deg,#2b3253 0%,#141a33 38%,#0b0f22 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07)}
.wl-phone-screen{position:relative;aspect-ratio:9/16;border-radius:34px;overflow:hidden;
  background:#05070f;line-height:0}
.wl-phone-screen video{display:block;width:100%;height:100%;object-fit:cover;border-radius:34px}
/* insula de sus, ca sa citeasca a telefon si nu a dreptunghi rotunjit */
.wl-phone-notch{position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);
  width:64px;height:17px;border-radius:11px;background:#05070f;pointer-events:none}
/* butoanele laterale, doua linii subtiri — detaliul care vinde iluzia */
.wl-phone::before,.wl-phone::after{content:"";position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));pointer-events:none}
.wl-phone::before{left:-2px;top:104px;height:46px}
.wl-phone::after{right:-2px;top:120px;height:74px}
.wl-phone-cap{margin:16px 4px 0;font-size:12.5px;line-height:1.6;color:var(--muted2);text-align:center}

@media(max-width:1000px){
  .wl-phone{max-width:270px;margin:0 auto 26px}
}
/* ---- reveal-fara-blur: scoatem blur-ul din animatia de aparitie pe mobil ----
   .reveal anima filter:blur(10px) -> blur(0). Blur-ul e cel mai scump filtru: GPU-ul
   esantioneaza un nucleu mare per pixel, per cadru. Pe pagina de video sunt 49 de
   elemente cu reveal, si toate stau blurate inca de la prima pictura, nu doar cand
   ajung in ecran — fiecare pe propriul strat de compozitie. Telefonul trebuie sa le
   rasterizeze pe toate inainte sa arate pagina, de unde senzatia de deschidere greoaie
   desi reteaua e curata (TTFB 190ms, 41 KB, 14 cereri).
   opacity si transform raman: pe alea compozitorul le face fara sa repicteze nimic,
   deci animatia se pastreaza, doar ca nu mai costa.
   Regula sta la finalul fisierului fiindca .reveal.reveal.in de mai sus are
   specificitate mai mare; aici o batem prin ordine, nu prin !important. */
@media(max-width:900px){
  .reveal.reveal{filter:none}
  .reveal.reveal.in{filter:none}
}

/* Fatada filmului: poster + buton, fara element media in pagina pana la apasare.
   Vezi welead_service_video_markup() si welead_video_la_cerere(). */
.wl-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;display:block;
  background:#05070f;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.wl-play img{width:100%;height:100%;object-fit:cover;display:block}
.wl-play-ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(8,12,26,.62);
  border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease}
.wl-play-ico::after{content:"";width:0;height:0;margin-left:4px;
  border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.wl-play:hover .wl-play-ico{transform:translate(-50%,-50%) scale(1.07);background:rgba(124,92,255,.72)}

/* ---- gpu-mobil: scoatem de pe telefon cele trei straturi scumpe ----
   Masurat pe pagina: trei elemente cereau recompunere pe GPU la fiecare cadru.
   Pe desktop nu se simte, pe iPhone se aduna in "toate paginile se incarca greu".

   1. .glow era un cerc plin cu filter:blur(120px). O raza de 120px inseamna un nucleu
      de esantionare urias, iar zona afectata creste cu raza in toate directiile: un cerc
      de 320px ajunge sa coste cat ~560x560. Acelasi aspect se obtine dintr-un gradient
      radial, care e doar un desen — costa zero. Cutiile sunt marite ca sa acopere cat
      acoperea si blur-ul.
   2 si 3. Headerul si bara de jos sunt amandoua fixate si amandoua cu backdrop-filter,
      deci iOS re-blureaza fundalul din spatele lor la fiecare cadru de scroll. Pe un
      fundal deja inchis, diferenta vizuala e mica; costul, nu. Le facem aproape opace. */
@media(max-width:900px){
  .glow{filter:none;background-color:transparent;
    background-image:radial-gradient(circle at 50% 50%,currentColor 0%,rgba(0,0,0,0) 70%)}
  .glow-hero-1{color:#1d2c6b;width:560px;height:560px;right:-170px;top:-200px;opacity:.55}
  .glow-hero-2{color:#3a1d6b;width:460px;height:460px;left:-160px;opacity:.4}

  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,6,24,.95)}
  .mbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,10,26,.97)}
}

/* ---- Case study Margreet Schaap ----
   Condus de imagini, pe layout deschis (page.php il scoate din cardul de 880px).
   Hero pe toata latimea cu titlul peste fotografie si enuntul central flancat de
   lucrari — asa cerea planul, si abia pe latime intreaga are sens compozitia.
   Accentele sunt ale temei; coralul si auriul ei apar doar in mostrele de culoare. */
.mcs{--wl-hero-h:min(74vh,660px)}
/* Pagina sta deja intr-un .wrap al temei (32px pe latera). Wrap-urile interioare nu
   mai adauga si ele padding, altfel pe telefon textul ramanea pe 247px din 375. */
/* Studiile de caz se randeaza acum direct in <main>, nu mai sunt imbricate in .wrap-ul
   cu padding al temei — deci isi pun singure marginile. Wrap-urile din interiorul
   continutului (mostenite din HTML-ul vechi) nu mai adauga inca un rand de padding. */
.mcs .wrap{max-width:1120px;margin:0 auto;padding-left:26px;padding-right:26px}
.mcs .wrap .wrap{padding-left:0;padding-right:0;max-width:none}
@media(max-width:700px){.mcs .wrap{padding-left:20px;padding-right:20px}}
.mcs-duet img{height:auto}

/* Hero: fotografia pe tot ecranul, titlul asezat pe zona intunecata de jos.
   100vw + margin-left il scoate din containerul centrat; body are overflow-x:clip. */
.mcs-hero{position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);
  height:var(--wl-hero-h);overflow:hidden}
.mcs-hero > img{width:100%;height:100%;object-fit:cover;display:block}
.mcs-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,6,20,.9) 0%,rgba(4,6,20,.42) 44%,rgba(4,6,20,.08) 78%)}
.mcs-hero-inner{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:2;
  width:100%;max-width:1120px;padding:0 26px 44px}
.mcs-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 12px}
.mcs-hero-inner h1{font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(30px,4.8vw,54px);line-height:1.06;letter-spacing:-.028em;
  color:#fff;margin:0 0 14px;max-width:15ch}
.mcs-sub{font-size:clamp(15px,1.8vw,18px);line-height:1.6;color:rgba(255,255,255,.82);
  margin:0;max-width:56ch}

.mcs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px 26px;padding:22px 0;border-bottom:1px solid var(--border);margin:0}
.mcs-meta dt{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted2);margin:0 0 6px}
.mcs-meta dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--txt)}

.mcs-sec{padding:34px 0}

.mcs-lede{font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(21px,3vw,31px);line-height:1.28;letter-spacing:-.02em;
  color:var(--txt);max-width:24ch;margin:10px auto;text-align:center}
.mcs-lede em{font-style:normal;color:var(--cyan)}

/* Enuntul central, flancat de doua lucrari usor rotite — singurul moment ostentativ
   al paginii, deci restul sta cuminte in jurul lui. */
.mcs-duet{display:grid;grid-template-columns:minmax(130px,235px) 1fr minmax(130px,235px);
  gap:clamp(18px,4vw,54px);align-items:center;padding:10px 0}
.mcs-duet img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:14px;border:1px solid var(--border)}
.mcs-duet img:first-child{transform:rotate(-1.6deg) translateY(-10px)}
.mcs-duet img:last-child{transform:rotate(1.6deg) translateY(10px)}

.mcs-body{max-width:66ch;margin:0 auto}
.mcs-body h2{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,25px);
  line-height:1.25;letter-spacing:-.018em;color:var(--txt);margin:34px 0 12px}
.mcs-body h2:first-child{margin-top:0}
.mcs-body p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 14px}
.mcs-body p strong{color:var(--txt);font-weight:600}

.mcs-fig{margin:28px auto;max-width:880px}
.mcs-fig img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--border)}
.mcs-fig figcaption{margin:12px 2px 0;font-size:13px;line-height:1.6;color:var(--muted2)}

/* Patru pasi, patru coloane — pe latimea intreaga, nu in coloana de text de 66ch,
   unde incapeau doar trei si al patrulea cadea singur pe randul de jos. */
.mcs-seq{display:grid;grid-template-columns:repeat(4,1fr);
  gap:26px;margin:26px 0 0;padding:0;list-style:none;counter-reset:pas}
.mcs-seq li{counter-increment:pas;margin:0}
.mcs-seq li::before{content:counter(pas,decimal-leading-zero);display:block;
  font-family:'Sora',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--cyan);margin:0 0 8px}
.mcs-seq p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

.mcs-sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin:22px 0 0}
.mcs-card{padding:22px 22px;border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(160deg,#101a36,#0b1124)}
.mcs-card .et{font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted2);margin:0 0 12px}
.mcs-spec{font-family:'Playfair Display',Georgia,serif;font-size:32px;line-height:1;
  color:var(--txt);margin:0 0 4px}
.mcs-spec-b{font-family:Helvetica,Arial,sans-serif;font-size:23px;line-height:1.2;
  color:var(--txt);margin:0 0 4px}
.mcs-card p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:6px 0 0}
.mcs-swatch{display:flex;gap:10px;margin:0 0 10px}
.mcs-swatch span{width:40px;height:40px;border-radius:10px;border:1px solid var(--border)}

.mcs-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;margin:22px 0 0;padding:0;list-style:none}
.mcs-proof li{margin:0;padding:16px 0 0;border-top:2px solid var(--cyan);
  font-size:14.5px;line-height:1.6;color:var(--txt)}

.mcs-gol{margin:26px 0;padding:20px 22px;border:1px dashed var(--border);
  border-radius:13px;background:rgba(124,92,246,.05)}
.mcs-gol p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted2)}

.mcs-inchidere{max-width:26ch;margin:8px auto 14px;text-align:center;
  font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(22px,3.2vw,32px);
  line-height:1.2;letter-spacing:-.022em;color:var(--txt)}

@media(max-width:900px){
  .mcs-seq{grid-template-columns:repeat(2,1fr);gap:20px 22px}
}
@media(max-width:700px){
  .mcs{--wl-hero-h:min(62vh,540px)}
  .mcs-hero-inner{padding:0 20px 30px}
  .mcs-duet{grid-template-columns:1fr 1fr;gap:16px}
  .mcs-duet .mcs-lede{grid-column:1/-1;grid-row:1;margin:4px auto 18px}
  .mcs-meta{gap:14px 18px;padding:16px 0}
  .mcs-fig{margin:22px 0}
  .mcs-body h2{margin-top:28px}
  .mcs-sec{padding:26px 0}
}

/* ---- Case study SEO + polisarea /work/ — acelasi nivel ca pagina Margreet ----
   Pagina lui Jos nu are fotografie; identitatea ei sunt cifrele. Hero-ul e deci un
   gradient albastru pe toata latimea, cu titlul alb si "versiunea scurta" sub el;
   statisticile mari raman primele in continut, imediat sub hero. */
.csx-hero{position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);padding:72px 0 42px;
  background:radial-gradient(120% 130% at 50% -30%,#2d47d8 0%,#16246e 42%,#0a1030 76%,#070b20 100%);
  border-bottom:1px solid rgba(120,140,255,.18)}
/* Hero-ul e full-bleed, deci iese din containerul cu padding al temei si trebuie sa-si
   puna singur marginile — altfel titlul atingea ambele muchii ale ecranului pe telefon. */
.csx-hero .wrap{max-width:980px;padding-left:26px;padding-right:26px}
/* Fotografie de fundal, optionala: daca lipseste, ramane gradientul de dedesubt. */
.csx-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.csx-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,9,26,.94) 0%,rgba(6,9,26,.74) 52%,rgba(6,9,26,.5) 100%)}
.csx-hero .wrap{position:relative;z-index:2}
@media(max-width:700px){.csx-hero .wrap{padding-left:20px;padding-right:20px}}
.csx-hero h1{font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(27px,4.2vw,44px);line-height:1.12;letter-spacing:-.025em;
  color:#fff;margin:0 0 16px;max-width:26ch}
.csx-hero .mcs-sub{color:rgba(255,255,255,.85);max-width:64ch}
/* Coloana textului: latimea vechiului card (860px), fara chrome-ul lui. */
.csx-col{max-width:860px;margin:26px auto 0}
@media(max-width:700px){.csx-hero{padding:52px 0 30px}}

/* /work/: cardurile reale ies in fata, promisiunile se retrag. */
.wl-wfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.wl-wcard.foto::before{background:linear-gradient(180deg,rgba(7,10,25,.18) 30%,rgba(7,10,25,.68) 100%)}
.wl-wcard.foto .wl-wposter span{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.wl-wcard.soon{opacity:.55;border-style:dashed}
.wl-wcard.soon:hover{opacity:.8}
.wl-wtabs{gap:8px;margin-bottom:26px}
.wl-wtab{border:1px solid transparent;border-radius:999px;padding:8px 18px}
.wl-wtab.on{background:linear-gradient(135deg,#1b2547,#141b33);border-color:rgba(140,160,255,.35)}

@media(max-width:700px){
  /* Filtrele nu se mai infasoara pe patru randuri de pastile: un singur rand,
     derulabil, care iese pana in marginea ecranului. */
  .wl-wtabs{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -32px 18px;padding:2px 32px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wl-wtabs::-webkit-scrollbar{display:none}
  .wl-wtab{flex:0 0 auto;white-space:nowrap}

  /* Cardurile: carusel cu snap si "peek" — urmatorul card se vede partial, deci se
     intelege singur ca se deruleaza. Sase proiecte intr-un singur ecran, nu 4.000px
     de scroll vertical. Cardurile "soon" sunt mai inguste: promisiunile nu ocupa
     acelasi spatiu ca munca facuta. */
  .wl-wgrid{display:flex;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -32px;padding:4px 32px 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wl-wgrid::-webkit-scrollbar{display:none}
  .wl-wcard{flex:0 0 clamp(250px,78vw,320px);scroll-snap-align:center;min-height:340px}
  .wl-wcard.soon{flex-basis:clamp(190px,58vw,240px)}
  .wl-wposter span{font-size:clamp(30px,9vw,38px)}
}

/* Butoanele din interiorul continutului: .entry-content a (0,1,1) batea .btn-primary
   (0,1,0) si colora textul butonului ca pe un link obisnuit — ilizibil pe fundalul
   violet pana la hover. Doua clase castiga fara !important. */
.entry-content .btn-primary,.entry-content .btn-primary:visited{color:#fff}
.entry-content .btn-ghost,.entry-content .btn-ghost:visited{color:var(--txt)}

/* ---- /work/ v2: doua studii mari, restul o promisiune discreta ----
   Versiunea veche avea sase sloturi egale din care patru erau goale, plus filtre
   pentru o lista de doua. Acum: cardurile reale sunt mari si cinematice — Margreet
   pe fotografia din atelier, Jos pe curba lui de crestere desenata din datele reale
   GSC — iar proiectele viitoare sunt o singura linie, nu patru carduri-fantoma. */
/* Invelisul vechi al gridului ramane in continut; ii scoatem cutia (22px padding
   + chenar), altfel cardurile noi pierdeau 44px pe telefon. */
.wl-board{padding:0;border:0;background:none;box-shadow:none}
.wl-board2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:8px 0 18px}
.wl-case{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:430px;border-radius:20px;overflow:hidden;border:1px solid rgba(94,118,255,.22);
  background:linear-gradient(160deg,#101a36,#0b1124);
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.wl-case:hover{transform:translateY(-6px);border-color:rgba(140,160,255,.5)}
.wl-case > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wl-case::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,8,20,.92) 0%,rgba(5,8,20,.45) 45%,rgba(5,8,20,.05) 78%)}
.wl-curve{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%}
.wl-case-body{position:relative;z-index:2;padding:26px 26px 24px}
.wl-chip2{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;
  color:#cdd6f4;background:rgba(13,19,38,.78);border:1px solid rgba(255,255,255,.14);
  padding:6px 12px;border-radius:999px;margin:0 0 14px}
.wl-chip2.win{color:#4ade80;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.12)}
.wl-case h2{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,30px);
  line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0 0 8px}
.wl-case p{font-size:14px;line-height:1.6;color:#c6cde4;margin:0 0 14px;max-width:44ch}
.wl-case-go{font-size:13px;font-weight:600;color:var(--cyan)}
.wl-case:hover .wl-case-go{text-decoration:underline}
.wl-next{margin:0;padding:16px 20px;border:1px dashed var(--border);border-radius:14px;
  font-size:13.5px;line-height:1.7;color:var(--muted2)}
.wl-next b{font-weight:600;color:var(--muted);margin-right:6px}
@media(max-width:760px){
  .wl-board2{grid-template-columns:1fr;gap:16px}
  .wl-case{min-height:380px}
}

/* Toast-ul de social proof pe telefon.
   Statea la bottom:24px, adica peste bara fixa de contact (69px inaltime) si peste
   butonul de "sus" — trei lucruri fixate care se calcau reciproc in coltul de jos.
   Mobilul are deja doua lucruri fixate acolo; al treilea trebuie sa se aseze langa
   ele, nu peste. Il ridicam deasupra barei si il ingustam ca sa lase loc butonului. */
@media(max-width:900px){
  /* html in fata: widgetul isi tipareste CSS-ul in corpul paginii, deci dupa main.css,
     si castiga la egalitate de specificitate. 0,2,1 bate 0,2,0 indiferent de ordine. */
  html .wl-notify.side-left,html .wl-notify.side-right{
    left:12px;right:80px;width:auto;max-width:none;
    bottom:calc(82px + env(safe-area-inset-bottom))}
  .wl-notify-bold{font-size:13.5px;line-height:1.35}
}

/* ---- Sabloanele de blocuri: aceleasi stiluri, dar pe marcajul blocurilor native ----
   Blocul de lista WordPress scoate <li>text</li>, fara <p> inauntru, iar caseta
   punctata devine un <p> in loc de <div>. Regulile de mai jos acopera ambele forme,
   ca o sectiune sa arate la fel indiferent daca a fost scrisa de mana sau inserata
   din editor. Fara ele, un sablon inserat ar iesi nestilat. */
.mcs-seq > li{font-size:14px;line-height:1.6;color:var(--muted)}
.mcs-proof > li{font-size:14.5px;line-height:1.6;color:var(--txt)}
p.mcs-gol{margin:26px 0;padding:20px 22px;border:1px dashed var(--border);
  border-radius:13px;background:rgba(124,92,246,.05);
  font-size:13.5px;line-height:1.65;color:var(--muted2)}
p.mcs-gol strong{color:var(--muted)}
/* Blocul de imagine adauga propriile clase; legenda lui trebuie sa arate ca a noastra. */
figure.mcs-fig figcaption,figure.mcs-fig .wp-element-caption{
  margin:12px 2px 0;font-size:13px;line-height:1.6;color:var(--muted2);text-align:left}

/* Enunturile mari si inchiderea, cand stau in continutul paginii.
   .entry-content p are specificitate 0,1,1 si bate .mcs-lede (0,1,0), deci ii anula
   margin:auto — textul iesea aliniat la stanga in loc de centrat. Doua clase, fara
   !important. Aceeasi capcana ca la butoanele din continut. */
.entry-content .mcs-lede{margin:10px auto;text-align:center;max-width:24ch}
.entry-content .mcs-inchidere{margin:8px auto 14px;text-align:center;max-width:26ch}
.entry-content .mcs-seq p,.entry-content .mcs-card p,.entry-content .mcs-fig figcaption{margin:0}

/* ---- Coloana de citit a articolelor de blog ----
   Textul era plafonat la 780px dar lipit de stanga containerului de 1176px, cu toata
   partea dreapta goala — pagina parea nefinisata. Coloana sta acum in mijloc, iar
   tipografia primeste ritmul unei pagini de citit, nu al uneia de vandut. */
/* Grila hero are doua coloane (text + ilustratie); articolele nu au ilustratie,
   deci coloana goala tinea titlul pe stanga desi textul era centrat. */
.single-post .svc-hero-grid{grid-template-columns:1fr}
.single-post .svc-hero-text{margin:0 auto;text-align:center;max-width:760px}
.single-post .svc-article{max-width:760px;margin:0 auto}
.single-post .post-feat{max-width:760px;margin:0 auto 6px}
.single-post .post-feat img{border-radius:16px;border:1px solid var(--border)}
.single-post .entry-content > p{font-size:16.5px;line-height:1.75;color:var(--muted);margin:0 0 18px}
.single-post .entry-content > p:first-child{font-size:18px;line-height:1.7;color:var(--txt)}
.single-post .entry-content > h2{font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(21px,2.4vw,26px);line-height:1.25;letter-spacing:-.018em;
  color:var(--txt);margin:42px 0 14px}
.single-post .entry-content ul,.single-post .entry-content ol{margin:0 0 18px;padding-left:22px}
.single-post .entry-content li{margin:0 0 10px;line-height:1.7;color:var(--muted)}
.single-post .entry-content li strong{color:var(--txt)}
.single-post .entry-content li::marker{color:var(--cyan)}
.single-post .mcs-fig{margin:30px auto}
@media(max-width:700px){
  .single-post .entry-content > h2{margin-top:32px}
}

/* ---- Coloana studiilor de caz ----
   Prima varianta centra blocurile de text intr-un container mai lat, ceea ce facea
   trei margini stangi diferite — titlu, paragraf si figura incepeau fiecare in alt
   loc. Acum coloana are exact latimea textului, deci tot ce se citeste porneste din
   aceeasi linie, iar figurile ies simetric in afara ei.

   Litera a crescut de la 15,5 la 19px: la vechea marime intrau 85 de caractere pe
   rand, peste intervalul lizibil de 60-75. Coloana e mai lata in pixeli, dar are
   mai putine caractere pe rand decat inainte. */
.csx-col,.mcs-body{max-width:720px}
.mcs-body p{font-size:18px;line-height:1.7}
.mcs-body>p,.mcs-body>ul,.mcs-body>ol,.mcs-body>h2{max-width:none;margin-left:0;margin-right:0}

/* Pozele pe verticala (cartile de vizita, semnaturile) umpleau tot ecranul cand
   figura s-a latit: latimea era plafonata, inaltimea nu. Imaginea isi pastreaza
   proportiile, dar nu depaseste ~doua treimi de ecran pe inaltime. */
/* Pozele inalte se plafoneaza la ~doua treimi de ecran si stau centrate in cutie.
   Bordura dispare pe studii: cu object-fit:contain ramane aer transparent pe langa
   pozele inguste, iar o borda in jurul aerului arata ca un chenar gol. Fara borda,
   golul e pur si simplu spatiu alb — invizibil. Dimensionarea ramane pe latime
   plina, singura care nu se bate cu placeholder-ele lazy-load (de 2px, patite de
   doua ori azi). */
.mcs-fig img{width:100%;max-height:72vh;object-fit:contain;display:block;border:0}
/* Figurile nu se citesc rand cu rand, deci n-au constrangere de masura: ies din
   coloana in ambele parti si dau ritmul paginii. */
.mcs-body .mcs-fig,.mcs-body .mcs-duet,.mcs-body .mcs-seq{max-width:none;width:100%}
@media(min-width:1200px){
  .mcs-body .mcs-fig,.mcs-body .mcs-duet,.mcs-body .mcs-seq{
    width:calc(100% + 240px);margin-left:-120px;margin-right:-120px}
}
@media(min-width:900px) and (max-width:1199px){
  .mcs-body .mcs-fig,.mcs-body .mcs-duet,.mcs-body .mcs-seq{
    width:calc(100% + 160px);margin-left:-80px;margin-right:-80px}
}
@media(max-width:900px){
  .mcs-body p{font-size:16.5px}
  .csx-col,.mcs-body{max-width:100%}
  .mcs-body .mcs-fig,.mcs-body .mcs-duet,.mcs-body .mcs-seq{
    width:100%;margin-left:0;margin-right:0}
}

/* ---- Recenziile Google (Social Ninja), imbracate in hainele site-ului ----
   Cardurile albe implicite strigau alt site. Preiau gradientul, borda si colturile
   cardurilor noastre vechi de testimoniale; stelele raman aurii, sigla Google ramane
   — ele sunt semnalul de incredere. */
html .wpsr-review-template{background:linear-gradient(158deg,#101a36,#0b1128);
  border:1px solid var(--border);border-radius:16px;box-shadow:none}
html .wpsr-review-template .wpsr-reviewer-name,html .wpsr-review-template .wpsr-reviewer-name a{color:var(--txt)}
html .wpsr-review-template p,html .wpsr-review-template .wpsr-review-text{color:#c6cde4}
html .wpsr-review-template .wpsr-review-date{color:var(--muted)}
html .wpsr-review-template a.wpsr-read-more-link,html .wpsr-review-template .wpsr-read-more a{color:var(--cyan)}
.wl-gsr-proof{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:20px 0 0;font-size:14.5px;color:var(--muted)}
.wl-gsr-proof b{color:var(--txt)}
.wl-gsr-proof a{color:var(--cyan)}
.wl-gsr-stele{color:#fbbc04;letter-spacing:2px}