@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

:root {
  --dark: #11131f; --text: #1c2033; --muted: #70758a; --light: #f7f8fc; --white: #ffffff; --line: #e8eaf3;
  --accent: #fb5b5f; --accent-2: #ff9c4a; --blue: #5f6cff; --green: #23c98b;
  --shadow: 0 24px 80px rgba(20, 24, 44, .12); --radius: 26px; --container: 1140px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--white);line-height:1.65}
a{color:inherit;text-decoration:none}.container{width:min(100% - 40px,var(--container));margin:0 auto}
.site-header{position:sticky;inset:0 0 auto;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,234,243,.8)}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between}.logo{display:inline-flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em}
.logo-mark{width:44px;height:44px;display:grid;place-items:center;color:white;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 14px 34px rgba(251,91,95,.28)}
.nav-links{display:flex;align-items:center;gap:34px;font-weight:800;color:var(--dark)}.nav-links a:hover{color:var(--accent)}
.nav-toggle{display:none;border:0;background:transparent;cursor:pointer;padding:8px}.nav-toggle span{display:block;width:25px;height:2px;background:var(--dark);margin:5px 0}
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 82px);display:grid;align-items:center;background:radial-gradient(circle at 80% 20%,rgba(251,91,95,.12),transparent 32rem),linear-gradient(180deg,#fff 0%,#fafbff 100%)}
.hero-shape{position:absolute;border-radius:50%;opacity:.95}.shape-one{width:360px;height:360px;right:-80px;top:120px;background:rgba(251,91,95,.08)}.shape-two{width:220px;height:220px;left:-80px;bottom:80px;background:rgba(95,108,255,.08)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;padding:80px 0}
.kicker,.section-kicker{margin:0 0 16px;color:var(--accent);font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.2em}
h1,h2,h3{margin:0;letter-spacing:-.05em;line-height:1.05}h1{font-size:clamp(3rem,7vw,6.7rem);max-width:740px}h2{font-size:clamp(2.2rem,5vw,4.2rem)}h3{font-size:1.45rem}
.hero-copy p:not(.kicker){max-width:660px;margin:26px 0 0;color:var(--muted);font-size:1.14rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}.btn{min-height:54px;display:inline-flex;align-items:center;justify-content:center;padding:0 25px;border-radius:999px;font-weight:900;border:1px solid transparent;cursor:pointer}
.btn-primary{color:white;background:linear-gradient(135deg,var(--accent),#ff7b44);box-shadow:0 18px 42px rgba(251,91,95,.24)}.btn-outline{color:var(--dark);border-color:var(--line);background:white}.btn.small{min-height:42px;padding-inline:16px;font-size:.9rem}
.hero-visual{position:relative;min-height:520px}.pixel-card{background:var(--dark);color:white;border-radius:38px;box-shadow:0 42px 120px rgba(20,24,44,.24)}
.main-card{position:absolute;inset:70px 40px auto 20px;min-height:360px;padding:46px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.main-card:before{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--blue))}
.main-card:after{content:"</>";position:absolute;top:85px;left:48px;color:rgba(255,255,255,.08);font-size:8rem;font-weight:900}
.mini-label{position:relative;z-index:2;width:max-content;padding:8px 12px;border-radius:999px;color:#fff;background:rgba(255,255,255,.13);font-size:.82rem;font-weight:900}.main-card h2,.main-card p{position:relative;z-index:2}.main-card h2{margin-top:24px;font-size:3rem;max-width:360px}.main-card p{color:rgba(255,255,255,.72)}
.floating-card{position:absolute;display:grid;place-items:center;min-width:92px;height:92px;padding:12px;border-radius:28px;color:white;font-weight:900;box-shadow:var(--shadow)}.card-a{top:34px;right:24px;background:var(--accent)}.card-b{left:0;bottom:90px;background:var(--blue)}.card-c{right:0;bottom:34px;background:var(--green)}
.section{padding:110px 0}.about-section{background:var(--dark);color:white}.split-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px}.lead-text{color:rgba(255,255,255,.72);font-size:1.08rem}.lead-text p:first-child{margin-top:0}
.centered{text-align:center;margin-inline:auto}.section-title{max-width:760px;margin-bottom:48px}.section-title.centered{margin-bottom:56px}.services-section{background:var(--light)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.service-card{position:relative;min-height:310px;padding:34px;border-radius:var(--radius);background:white;box-shadow:var(--shadow);overflow:hidden}.service-card.featured{color:white;background:linear-gradient(135deg,var(--accent),#ff914d)}
.service-card:after{content:"";position:absolute;width:120px;height:120px;right:-36px;bottom:-36px;border-radius:50%;background:rgba(95,108,255,.08)}.service-card.featured:after{background:rgba(255,255,255,.14)}
.service-number{display:block;margin-bottom:54px;color:var(--accent);font-weight:900;font-size:3.2rem;line-height:1;opacity:.23}.featured .service-number{color:white}.service-card p{color:var(--muted)}.featured p{color:rgba(255,255,255,.82)}
.portfolio-filter{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:36px}.filter-button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:900;cursor:pointer;padding:0}.filter-button.active,.filter-button:hover{color:var(--accent)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.portfolio-card{border-radius:30px;overflow:hidden;background:white;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s ease, opacity .2s ease}.portfolio-card:hover{transform:translateY(-6px)}.portfolio-card.hidden{display:none}.portfolio-card.big{grid-column:span 2}.portfolio-card.wide{grid-column:span 2}
.portfolio-image-wrapper{height:260px;overflow:hidden;background:#f3f5fb}.portfolio-card.big .portfolio-image-wrapper,.portfolio-card.wide .portfolio-image-wrapper{height:300px}.portfolio-image{display:block;width:100%;height:100%;object-fit:cover}
.portfolio-body{padding:26px}.portfolio-body p{margin:0 0 8px;color:var(--accent);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.portfolio-body span{display:block;margin-top:12px;color:var(--muted)}.portfolio-body strong{display:block;margin-top:18px;color:var(--accent)}
.process-section{background:var(--dark);color:white}.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.process-list{display:grid;gap:18px}.process-item{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:26px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.process-item span{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;color:white;background:var(--accent);font-weight:900}.process-item p{color:rgba(255,255,255,.68)}
.contact-section{background:linear-gradient(180deg,#fff,#f7f8fc)}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}.contact-intro p:not(.section-kicker){color:var(--muted);font-size:1.08rem}.contact-details{display:grid;gap:18px;margin-top:34px}.contact-details div{padding:20px;border-radius:22px;background:white;box-shadow:var(--shadow)}.contact-details strong{display:block;margin-bottom:4px}.contact-details a{color:var(--accent);font-weight:800}
.form-panel{padding:36px;border-radius:34px;background:white;box-shadow:var(--shadow);border:1px solid var(--line)}form{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:grid;gap:8px}label span{font-weight:900}input,textarea{width:100%;padding:15px 16px;border-radius:16px;border:1px solid var(--line);background:#fbfcff;color:var(--text);font:inherit;outline:none}textarea{resize:vertical;min-height:160px}input:focus,textarea:focus{border-color:rgba(251,91,95,.48);box-shadow:0 0 0 4px rgba(251,91,95,.1)}.captcha-box{padding:15px;border:1px dashed rgba(251,91,95,.35);border-radius:20px;background:rgba(251,91,95,.045)}.checkbox{grid-template-columns:18px 1fr;align-items:start;color:var(--muted)}.checkbox input{margin-top:5px}.form-note{margin:0;color:var(--muted);font-size:.9rem}.submit-btn{width:100%}.form-message{margin-bottom:20px;padding:14px 16px;border-radius:16px;font-weight:800}.form-message.success{background:rgba(35,201,139,.13);color:#0a7b50}.form-message.error{background:rgba(251,91,95,.1);color:#b52932}.hp-field{position:absolute;left:-9999px;opacity:0}
.cookies-info{padding-top:70px;background:var(--light)}.cookies-info p{max-width:760px;color:var(--muted)}
.cookie-banner{position:fixed;z-index:100;left:24px;right:24px;bottom:24px;display:none;align-items:center;justify-content:space-between;gap:24px;max-width:1140px;margin:0 auto;padding:22px;border-radius:28px;background:rgba(17,19,31,.96);color:white;box-shadow:0 34px 100px rgba(17,19,31,.34)}.cookie-banner.visible{display:flex}.cookie-banner h2{font-size:1.2rem;margin-bottom:4px}.cookie-banner p{margin:0;color:rgba(255,255,255,.72)}.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.footer{padding:32px 0;color:var(--muted);border-top:1px solid var(--line)}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px}.footer-grid div{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}.footer button{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;padding:0}.footer a:hover,.footer button:hover{color:var(--accent)}
.project-hero{padding:90px 0;background:linear-gradient(180deg,#fff,#f7f8fc)}.project-hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.project-category{margin:22px 0 28px;color:var(--muted);font-weight:800}.project-hero-image{width:100%;border-radius:34px;box-shadow:var(--shadow);display:block}.project-detail-section{background:#fff}.project-detail-grid{display:grid;grid-template-columns:1fr 330px;gap:60px;align-items:start}.project-detail-content{font-size:1.08rem}.project-detail-content h2{margin-bottom:28px}.project-detail-content p{color:var(--muted);margin:0 0 22px}.project-side-card{position:sticky;top:110px;padding:28px;border-radius:28px;background:var(--light);border:1px solid var(--line);box-shadow:var(--shadow)}.project-side-card ul{padding-left:20px;color:var(--muted);margin:18px 0 26px}
@media(max-width:920px){.nav-toggle{display:block}.nav-links{position:absolute;inset:82px 20px auto 20px;display:none;flex-direction:column;align-items:stretch;padding:20px;border-radius:22px;background:white;box-shadow:var(--shadow)}.nav-links.open{display:flex}.hero-grid,.split-grid,.services-grid,.process-grid,.contact-layout,.project-hero-grid,.project-detail-grid{grid-template-columns:1fr}.hero-visual{min-height:430px}.portfolio-grid{grid-template-columns:1fr}.portfolio-card.big,.portfolio-card.wide{grid-column:span 1}.cookie-banner{flex-direction:column;align-items:stretch}.cookie-actions{justify-content:stretch}.cookie-actions .btn{flex:1}.footer-grid{flex-direction:column;text-align:center}.footer-grid div{justify-content:center}.project-side-card{position:static}}
@media(max-width:560px){.container{width:min(100% - 28px,var(--container))}.section{padding:78px 0}.hero-grid{padding:56px 0}.hero-actions,.form-grid{grid-template-columns:1fr;flex-direction:column}.btn{width:100%}.hero-visual{display:none}.process-item{grid-template-columns:1fr}.form-panel{padding:24px}.cookie-banner{left:12px;right:12px;bottom:12px}}


/* Know-how / Articles */
.knowhow-teaser-section {
  background: #fff;
}

.knowhow-teaser-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.knowhow-teaser-grid p {
  color: var(--muted);
  font-size: 1.08rem;
}

.knowhow-teaser-card {
  padding: 34px;
  border-radius: 32px;
  background: var(--light);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.knowhow-teaser-card ul {
  padding-left: 20px;
  margin: 22px 0 28px;
  color: var(--muted);
}

.knowhow-teaser-card li {
  margin-bottom: 12px;
}

.knowhow-teaser-card a:not(.btn) {
  color: var(--text);
  font-weight: 800;
}

.knowhow-teaser-card a:not(.btn):hover {
  color: var(--accent);
}

.article-hero {
  padding: 100px 0 70px;
  background: linear-gradient(180deg, #fff, #f7f8fc);
}

.article-hero h1 {
  max-width: 980px;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
}

.article-meta {
  max-width: 820px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 700;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.article-card {
  display: block;
  padding: 32px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}

.article-card:hover {
  transform: translateY(-6px);
}

.article-card p {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.article-card span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
}

.article-card strong {
  display: block;
  margin-top: 22px;
  color: var(--accent);
}

.article-section {
  background: #fff;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
}

.article-content {
  max-width: 820px;
  font-size: 1.12rem;
}

.article-content p {
  margin: 0 0 24px;
  color: var(--muted);
}

.article-content p:first-child {
  font-size: 1.22rem;
  color: var(--text);
  font-weight: 600;
}

.article-side-card {
  position: sticky;
  top: 110px;
  padding: 30px;
  border-radius: 30px;
  background: var(--light);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.article-side-card p {
  color: var(--muted);
}

.article-side-card .btn {
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 920px) {
  .knowhow-teaser-grid,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-side-card {
    position: static;
  }
}


/* Service landing pages */
.section-actions {
  margin: -24px 0 42px;
}

.inline-link {
  color: var(--accent);
  font-weight: 900;
}

.inline-link:hover {
  text-decoration: underline;
}

.service-hero {
  padding: 95px 0 75px;
  background: linear-gradient(180deg, #fff, #f7f8fc);
}

.service-hero-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.service-detail-section {
  background: #fff;
}

.service-detail-block {
  margin-bottom: 44px;
}

.service-detail-block h2 {
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.service-detail-content .service-detail-block p {
  margin-bottom: 0;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: #fff;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
}

.faq-item p {
  margin-top: 14px;
  margin-bottom: 0;
}

.side-subtitle {
  margin-top: 30px;
}

@media (max-width: 920px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
  }
}