:root{
  --white:#FFFFFF;
  --bg-soft:#F6F8FB;
  --navy:#0A1B36;
  --navy-2:#12274A;
  --blue:#2563EB;
  --blue-dark:#1D4FD7;
  --blue-tint:#EDF2FE;
  --text:#0A1B36;
  --muted:#5C6B84;
  --line:#E7EBF2;
  --shadow-sm:0 1px 2px #0A1B360A,0 4px 12px #0A1B360A;
  --shadow-md:0 2px 4px #0A1B360A,0 12px 32px -8px #0A1B361F;
  --shadow-lg:0 4px 8px #0A1B360A,0 24px 60px -16px #0A1B3629;
  --r-sm:10px;--r-md:16px;--r-lg:24px;
  --font-d:'Space Grotesk',sans-serif;
  --font-b:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);color:var(--text);background:var(--white);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-d);letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(30px,4.2vw,44px);font-weight:700}
.section{padding:110px 0}
.section.tight{padding:70px 0}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);
  background:var(--blue-tint);padding:6px 14px;border-radius:100px;margin-bottom:18px;
}
.section-head{max-width:640px;margin-bottom:60px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .lead{color:var(--muted);margin-top:16px;font-size:18px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:16px;border-radius:12px;
  padding:14px 26px;transition:all .18s ease;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px #2563EB40}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 20px #2563EB52}
.btn-secondary{background:var(--white);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:#C9D3E4;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 8px 24px #00000033}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:#FFFFFFCC;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:-.03em}
.logo i{font-style:normal;color:var(--blue)}
.logo-img{display:inline-flex;align-items:center}
.logo-img img{height:40px;width:auto;display:block}
.f-grid .logo-img{margin-bottom:14px;display:inline-block}
.logo-img--footer img{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;color:#33415C}
.nav-links a:not(.btn):hover{color:var(--blue)}
.nav .btn{padding:10px 20px;font-size:15px}
.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}

/* ---------- hero ---------- */
.hero{
  padding:110px 0 120px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 85% -10%,#2563EB0F,transparent 60%),
    radial-gradient(700px 380px at -10% 20%,#0A1B360A,transparent 60%),
    var(--white);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,60px);font-weight:700}
.hero h1 span{color:var(--blue)}
.hero .sub{margin:22px 0 34px;font-size:19px;color:var(--muted);max-width:50ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{
  display:flex;gap:26px;margin-top:34px;font-size:14px;color:var(--muted);flex-wrap:wrap;
}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:16px;height:16px;color:var(--blue);flex:none}

/* browser mockup */
.mockup{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform:perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
}
.mockup-bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.mockup-bar b{width:10px;height:10px;border-radius:50%;background:#D9DFEA}
.mockup-bar .url{
  flex:1;margin-left:8px;background:var(--white);border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--muted);padding:5px 12px;
  font-family:var(--font-b);
}
.mockup-body{padding:22px;display:grid;gap:16px}
.m-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.m-stat{
  border:1px solid var(--line);border-radius:12px;padding:14px;
}
.m-stat small{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}
.m-stat b{font-family:var(--font-d);font-size:20px;font-weight:700}
.m-stat b.up{color:#0E9F6E}
.m-chart{
  border:1px solid var(--line);border-radius:12px;padding:16px 14px 8px;
}
.m-chart small{font-size:11px;color:var(--muted)}
.m-bars{display:flex;align-items:flex-end;gap:7px;height:92px;margin-top:12px}
.m-bars i{
  flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#2563EB,#6D96F5);
  animation:grow 1s cubic-bezier(.2,.7,.3,1) both;
}
.m-bars i:nth-child(1){height:34%;animation-delay:.05s}
.m-bars i:nth-child(2){height:46%;animation-delay:.12s}
.m-bars i:nth-child(3){height:40%;animation-delay:.19s}
.m-bars i:nth-child(4){height:58%;animation-delay:.26s}
.m-bars i:nth-child(5){height:66%;animation-delay:.33s}
.m-bars i:nth-child(6){height:78%;animation-delay:.40s}
.m-bars i:nth-child(7){height:92%;animation-delay:.47s}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.m-lead{
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:13px;
}
.m-lead .avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#2563EB,#7BA2F7);
}
.m-lead b{display:block;font-weight:600;font-size:13px}
.m-lead small{color:var(--muted);font-size:12px}
.m-lead .tag{
  margin-left:auto;background:#E7F7EF;color:#0E9F6E;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:100px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m-bars i{animation:none}
  *{transition:none!important}
}


/* ---------- logos ---------- */
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.logos p{
  text-align:center;font-size:13px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px;
}
.logo-row{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap}
.logo-row img{
  height:48px;width:auto;display:block;
  opacity:.55;filter:grayscale(100%);
  transition:opacity .2s ease,filter .2s ease;
}
.logo-row img:hover{opacity:1;filter:grayscale(0%)}

/* ---------- benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px;box-shadow:var(--shadow-sm);
}
.benefit .check{
  width:26px;height:26px;flex:none;border-radius:8px;margin-top:2px;
  background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.benefit .check svg{width:14px;height:14px}
.benefit h3{font-size:17px;font-weight:600;font-family:var(--font-b);margin-bottom:4px}
.benefit p{font-size:14.5px;color:var(--muted)}

/* ---------- services ---------- */
#servicii{background:var(--bg-soft)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C9D8F8}
.svc .ic{
  width:44px;height:44px;border-radius:12px;margin-bottom:18px;
  background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.svc .ic svg{width:22px;height:22px}
.svc h3{font-size:18px;font-weight:600;font-family:var(--font-b);margin-bottom:8px}
.svc p{font-size:14.5px;color:var(--muted)}

/* ---------- portfolio ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;justify-content:center}
.filters button{
  font-size:14px;font-weight:500;padding:9px 18px;border-radius:100px;
  border:1px solid var(--line);color:var(--muted);background:var(--white);
  transition:all .16s ease;
}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.portfolio{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
.proj-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;position:relative}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.proj-thumb{height:200px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;background:#f1f5f9}
.proj-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s;padding:8px}
.proj-card:hover .proj-thumb img{transform:scale(1.03)}
.proj-letter{font-size:40px;font-weight:700;color:rgba(255,255,255,.85);font-family:'Space Grotesk',sans-serif}
.proj-info{padding:16px 18px 14px;flex:1}
.proj-info h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px}
.proj-info p{font-size:13px;color:var(--muted)}
.proj-desc{color:var(--text)!important;line-height:1.55;margin-bottom:8px!important}
.proj-url{font-size:12px!important;opacity:.7}
.proj-tags{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.proj-tags span{font-size:11px;font-weight:600;background:var(--blue-tint);color:var(--blue);padding:2px 8px;border-radius:100px}
.proj-arrow{position:absolute;top:14px;right:14px;width:18px;height:18px;color:rgba(255,255,255,.7)}
.proj-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:700px){.proj-grid{grid-template-columns:1fr 1fr}.proj-arrow{display:none}}
@media(max-width:480px){.proj-grid{grid-template-columns:1fr}}
.work{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.work:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.work.hide{display:none}
.work-visual{
  padding:34px 34px 0;height:250px;overflow:hidden;position:relative;
}
.work:nth-child(4n+1) .work-visual{background:linear-gradient(150deg,#0F2B4C,#1E5A8F)}
.work:nth-child(4n+2) .work-visual{background:linear-gradient(150deg,#101E45,#2563EB)}
.work:nth-child(4n+3) .work-visual{background:linear-gradient(150deg,#2A1E0C,#A97B1E)}
.work:nth-child(4n) .work-visual{background:linear-gradient(150deg,#1C1230,#5B3BA6)}
.mini{
  background:var(--white);border-radius:12px 12px 0 0;height:100%;
  box-shadow:0 -8px 40px #00000030;padding:16px;
  transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.work:hover .mini{transform:translateY(-8px)}
.mini .mini-bar{display:flex;gap:5px;margin-bottom:12px;flex:none}
.mini .mini-bar b{width:7px;height:7px;border-radius:50%;background:#E1E7F0}
.mini .ln{height:10px;border-radius:5px;background:#EDF1F7;margin-bottom:8px}
.mini .ln.w60{width:60%}.mini .ln.w80{width:80%}.mini .ln.w40{width:40%}
.mini .ln.hl{background:var(--blue-tint);height:26px;width:45%;border-radius:8px}
.mini img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top center;border-radius:6px;display:block}
.work-body{padding:26px 30px 30px}
.work-meta{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.work-meta span{
  font-size:12px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:4px 12px;
}
.work h3{font-size:21px;margin-bottom:8px}
.work p{font-size:15px;color:var(--muted);margin-bottom:14px}
.work .result{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#0E9F6E;
}
.work .result svg{width:16px;height:16px}
.work h3 a{color:inherit}
.work h3 a:hover{color:var(--blue)}

/* ---------- process ---------- */
#proces{background:var(--navy);color:#fff}
#proces .eyebrow{background:#FFFFFF14;color:#9DBAF8}
#proces .section-head .lead{color:#9AA9C7}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;counter-reset:p}
.p-step{counter-increment:p;position:relative;padding-top:18px;border-top:1px solid #FFFFFF26}
.p-step::before{
  content:"0" counter(p);position:absolute;top:-14px;left:0;
  font-family:var(--font-d);font-weight:700;font-size:14px;color:var(--navy);
  background:#9DBAF8;border-radius:8px;padding:2px 9px;
}
.p-step h3{font-size:18px;margin:14px 0 8px;color:#fff}
.p-step p{font-size:14.5px;color:#9AA9C7}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center;max-width:780px;margin:0 auto}
.stat{padding:28px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-sm)}
.stat b{font-family:var(--font-d);font-size:clamp(28px,3.4vw,40px);font-weight:700;color:var(--navy);display:block}
.stat b i{font-style:normal;color:var(--blue)}
.stat span{font-size:13.5px;color:var(--muted)}

/* ---------- testimonials ---------- */
#testimoniale{background:var(--bg-soft)}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tst{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:18px;
}
.tst .quote{font-size:15.5px;color:#33415C}
.tst .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tst .who .av{
  width:40px;height:40px;border-radius:50%;flex:none;
  font-family:var(--font-d);font-weight:700;font-size:15px;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tst:nth-child(1) .av{background:#2563EB}
.tst:nth-child(2) .av{background:#0E9F6E}
.tst:nth-child(3) .av{background:#A97B1E}
.tst .who b{font-size:14.5px;font-weight:600;display:block}
.tst .who small{font-size:13px;color:var(--muted)}
.tst .stars{color:#F5B31B;font-size:14px;letter-spacing:2px}

/* ---------- faq ---------- */
.faq{max-width:740px;margin:0 auto}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 52px 20px 24px;
  font-weight:600;font-size:16.5px;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--font-d);font-size:20px;color:var(--blue);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--muted);font-size:15px}

/* ---------- CTA ---------- */
.cta-final{
  background:
    radial-gradient(700px 300px at 80% -20%,#2563EB55,transparent 60%),
    var(--navy);
  border-radius:var(--r-lg);color:#fff;text-align:center;
  padding:80px 40px;overflow:hidden;position:relative;
}
.cta-final h2{color:#fff;max-width:22ch;margin:0 auto 16px}
.cta-final p{color:#9AA9C7;max-width:46ch;margin:0 auto 36px;font-size:18px}
.cta-final .hero-ctas{justify-content:center}
.cta-final small{display:block;margin-top:22px;font-size:13.5px;color:#7C8CAD}

/* ---------- contact strip ---------- */
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.c-item{
  border:1px solid var(--line);border-radius:var(--r-md);padding:24px;
  background:var(--white);box-shadow:var(--shadow-sm);
  display:flex;gap:14px;align-items:flex-start;
}
.c-item .ic{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--blue-tint);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.c-item .ic svg{width:20px;height:20px}
.c-item b{font-size:15.5px;font-weight:600;display:block;margin-bottom:2px}
.c-item a,.c-item span{font-size:14.5px;color:var(--muted)}
.c-item a:hover{color:var(--blue)}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#9AA9C7;padding:70px 0 34px;margin-top:110px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:54px}
.f-grid .logo{color:#fff;margin-bottom:14px;display:inline-block}
.f-grid p{font-size:14.5px;max-width:32ch}
.f-grid h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.f-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.f-grid ul a:hover{color:#fff}
.f-bottom{
  border-top:1px solid #FFFFFF1A;padding-top:26px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .mockup{transform:none;max-width:560px}
  .benefits,.services,.testimonials{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .portfolio{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:80px 0}
  .hero{padding:70px 0 90px}
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;padding:20px 24px;gap:18px;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:flex}
  .benefits,.services,.process,.testimonials,.contact-strip{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .cta-final{padding:60px 24px}
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:8px;
}

/* blog dynamic cards */
div.post{cursor:default}
div.post:hover{transform:none;box-shadow:var(--shadow-sm)}
.read-link{font-size:14px;font-weight:600;color:var(--blue)}
.badge-soon{
  display:inline-block;font-size:12px;font-weight:600;
  background:var(--blue-tint);color:var(--blue);
  padding:4px 12px;border-radius:100px;
}

/* blog article layout */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start}
.blog-prose{font-size:17px;line-height:1.78;color:#33415C}
.blog-prose h2{font-family:var(--font-d);font-size:clamp(22px,2.6vw,28px);color:var(--navy);margin:44px 0 16px;letter-spacing:-.02em}
.blog-prose h3{font-family:var(--font-d);font-size:20px;color:var(--navy);margin:32px 0 12px;letter-spacing:-.01em}
.blog-prose p{margin-bottom:22px}
.blog-prose ul,.blog-prose ol{margin:0 0 22px 22px}
.blog-prose li{margin-bottom:10px}
.blog-prose blockquote{
  border-left:4px solid var(--blue);padding:16px 22px;
  margin:30px 0;background:var(--blue-tint);border-radius:0 10px 10px 0;
  color:var(--navy);font-style:italic;
}
.blog-prose strong{color:var(--navy);font-weight:600}
.article-img{width:100%;border-radius:var(--r-md);margin-bottom:38px;object-fit:cover;max-height:460px}
.article-meta{font-size:14px;color:var(--muted);margin-top:12px}
.article-meta a:hover{color:var(--blue)}
.article-cta{
  background:var(--navy);color:#fff;border-radius:var(--r-md);
  padding:38px 36px;text-align:center;margin-top:56px;
}
.article-cta p{color:#9AA9C7;margin-bottom:22px;font-size:17px}
.article-cta .btn{justify-content:center}

/* sidebar */
.blog-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:22px}
.sidebar-widget{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px;box-shadow:var(--shadow-sm);
}
.sidebar-widget h4{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--navy);margin-bottom:18px;
}
.sidebar-post{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--line);
  transition:opacity .15s ease;
}
.sidebar-post:last-child{border-bottom:none;padding-bottom:0}
.sidebar-post:first-child{padding-top:0}
.sidebar-post:hover{opacity:.75}
.sidebar-post.draft{opacity:.5;pointer-events:none}
.sp-thumb{
  width:50px;height:50px;flex:none;border-radius:8px;
  background:linear-gradient(135deg,#0F2B4C,#2563EB);
  overflow:hidden;
}
.sp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sp-body{flex:1;min-width:0}
.sp-cat{
  font-size:11px;font-weight:600;text-transform:uppercase;color:var(--blue);
  letter-spacing:.04em;display:block;margin-bottom:4px;
}
.sp-body b{
  font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media(max-width:980px){
  .blog-layout{grid-template-columns:1fr}
  .blog-sidebar{position:static}
}
@media(max-width:640px){
  .article-cta{padding:30px 22px}
}

/* ================= inner pages ================= */
.page-hero{
  padding:90px 0 70px;text-align:center;
  background:
    radial-gradient(800px 360px at 50% -20%,#2563EB12,transparent 60%),
    var(--white);
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(34px,4.8vw,52px);font-weight:700;max-width:22ch;margin:0 auto}
.page-hero .lead{color:var(--muted);font-size:18px;max-width:54ch;margin:18px auto 0}
.breadcrumb{
  font-size:13px;color:var(--muted);margin-bottom:22px;
}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb b{color:var(--text);font-weight:500}

/* servicii detaliate */
.svc-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:64px 0}
.svc-card{background:var(--white);border:1.5px solid #D6DEF0;border-radius:var(--r-lg);padding:36px 32px 32px;box-shadow:0 2px 8px #0A1B3614,0 8px 24px -4px #0A1B3610;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.svc-card:hover{box-shadow:0 4px 16px #0A1B361A,0 16px 40px -8px #0A1B3620;transform:translateY(-4px);border-color:#B8C8F0}
.svc-card .ic{width:42px;height:42px;border-radius:10px;margin-bottom:20px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.svc-card .ic svg{width:21px;height:21px}
.svc-card h2{font-size:16px;font-weight:600;margin-bottom:8px}
.svc-card > p{color:var(--muted);font-size:14.5px;line-height:1.65;flex:1;margin-bottom:28px}
.svc-card .card-link{display:inline-block;font-size:13.5px;font-weight:600;color:#fff;background:var(--blue);text-decoration:none;padding:9px 20px;border-radius:8px;margin-top:auto;transition:background .18s,transform .18s}
.svc-card .card-link:hover{background:#1a56e8;transform:translateY(-1px)}
@media(max-width:900px){.svc-cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-cards-grid{grid-template-columns:1fr}}
.sd-photo{padding:0!important;overflow:hidden;border-radius:var(--r-lg);background:none;border:none!important;box-shadow:var(--shadow-md)!important}
.sd-photo img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .5s}
.sd-photo:hover img{transform:scale(1.04)}

/* single-service pages */
.svc-page-visual{
  max-width:900px;margin:0 auto 70px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-soft);padding:28px;box-shadow:var(--shadow-sm);
}
.svc-page-visual .mini{height:380px;border-radius:12px;box-shadow:var(--shadow-md)}
.svc-page-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin:48px auto 0}
.svc-page-photo img{width:100%;height:300px;object-fit:cover;display:block}
.svc-section{max-width:900px;margin:0 auto 70px}
.svc-section h2{font-size:clamp(24px,2.8vw,30px);margin-bottom:16px}
.svc-section .lead-lg{font-size:18px;color:#33415C}
@media (max-width:640px){
  .svc-page-visual .mini{height:220px}
  .svc-page-photo img{height:180px}
}

/* proiect real showcase */
.proj-real{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);max-width:820px;margin:0 auto;background:var(--white);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.proj-real:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.proj-real-img{overflow:hidden}
.proj-real-img img{width:100%;height:100%;min-height:220px;object-fit:cover;object-position:top;display:block}
.proj-real-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.proj-real-body h3{font-size:21px;margin:10px 0 10px}
.proj-real-body p{color:var(--muted);font-size:15px;margin-bottom:18px;line-height:1.6}
.proj-real-link{font-size:14px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
@media(max-width:700px){.proj-real{grid-template-columns:1fr}.proj-real-img img{min-height:180px;height:180px}}

/* proces page */
.timeline{max-width:820px;margin:0 auto;counter-reset:tl}
.tl-step{
  display:grid;grid-template-columns:110px 1fr;gap:34px;
  padding:38px 0;border-bottom:1px solid var(--line);counter-increment:tl;
}
.tl-step:last-child{border-bottom:none}
.tl-step .tl-num{
  font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--blue);
}
.tl-step .tl-num::before{content:"Pas 0" counter(tl)}
.tl-step .tl-num small{display:block;font-family:var(--font-b);font-weight:500;font-size:12.5px;color:var(--muted);margin-top:6px}
.tl-step h3{font-size:21px;margin-bottom:8px}
.tl-step p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.tl-step .tl-out{
  font-size:13.5px;background:var(--blue-tint);color:var(--blue-dark);
  border-radius:10px;padding:10px 14px;display:inline-flex;gap:8px;align-items:center;
}
.tl-step .tl-out svg{width:15px;height:15px;flex:none}

/* despre */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two-col .lead-lg{font-size:20px;line-height:1.6;color:#33415C}
.two-col .lead-lg + p{margin-top:18px;color:var(--muted)}
.values{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.value{
  border:1px solid var(--line);border-radius:var(--r-md);padding:24px;
  background:var(--white);box-shadow:var(--shadow-sm);
}
.value b{font-family:var(--font-d);font-size:16.5px;display:block;margin-bottom:6px}
.value p{font-size:14.5px;color:var(--muted)}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-thumb{position:relative;height:200px;overflow:hidden;flex-shrink:0}
.post-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.featured .post-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.post:nth-child(3n+1) .post-thumb{background:linear-gradient(135deg,#0F2B4C,#2563EB)}
.post:nth-child(3n+2) .post-thumb{background:linear-gradient(135deg,#12274A,#0E9F6E)}
.post:nth-child(3n+3) .post-thumb{background:linear-gradient(135deg,#1C1230,#A97B1E)}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .cat{
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);
}
.post h3{font-size:18.5px;line-height:1.3}
.post p{font-size:14.5px;color:var(--muted);flex:1}
.post .meta{font-size:13px;color:var(--muted)}
.featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  margin-bottom:56px;background:var(--white);
}
.featured .post-thumb{min-height:280px;background:linear-gradient(135deg,#0A1B36,#2563EB)}
.featured .post-body{padding:44px;justify-content:center}
.featured h3{font-size:clamp(22px,2.8vw,30px)}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px;box-shadow:var(--shadow-md);
}
.form-card h2{font-size:24px;margin-bottom:8px}
.form-card > p{font-size:15px;color:var(--muted);margin-bottom:26px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  background:var(--bg-soft);transition:border-color .15s ease,background .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:var(--white);
  box-shadow:0 0 0 3px #2563EB1F;
}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--muted);margin-top:14px}
.side-cards{display:flex;flex-direction:column;gap:18px}

@media (max-width:980px){
  .svc-detail,.two-col,.contact-grid,.featured{grid-template-columns:1fr}
  .svc-detail.rev > .sd-visual{order:0}
  .svc-detail{gap:34px}
  .blog-grid{grid-template-columns:1fr 1fr}
  .featured .post-thumb{min-height:200px}
}
@media (max-width:640px){
  .blog-grid,.values{grid-template-columns:1fr}
  .tl-step{grid-template-columns:1fr;gap:10px}
  .form-card{padding:26px 22px}
  .featured .post-body{padding:28px 24px}
}

/* ── Popup ofertă ── */
.popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
}
.popup-overlay.open{opacity:1;visibility:visible}
.popup-box{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  width:100%;max-width:480px;padding:36px 38px 32px;
  position:relative;
  transform:translateY(20px);transition:transform .22s ease;
  max-height:90vh;overflow-y:auto;
}
.popup-overlay.open .popup-box{transform:translateY(0)}
.popup-close{
  position:absolute;top:12px;right:16px;
  background:none;border:none;font-size:24px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;
}
.popup-close:hover{color:var(--text);background:var(--bg-soft)}
.popup-box h2{font-size:21px;margin-bottom:4px}
.popup-lead{font-size:14px;color:var(--muted);margin-bottom:22px}
.popup-success{
  background:#E7F7EF;color:#0E9F6E;border-radius:10px;
  padding:14px 16px;font-size:14px;font-weight:600;text-align:center;display:none;
}
.popup-gdpr{flex-direction:row!important;align-items:flex-start;gap:10px;margin-bottom:14px}
.popup-gdpr input[type=checkbox]{margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer}
.popup-gdpr label{font-size:13px;color:var(--muted);font-weight:400;cursor:pointer}
.popup-submit{width:100%;justify-content:center;margin-top:4px}
.opt{font-weight:400;color:var(--muted)}
@media(max-width:500px){
  .popup-box{padding:28px 22px 24px}
}