:root{
  --ink:#0b1f3a;
  --muted:#62738a;
  --blue:#1464ff;
  --line:#dce5ef;
  --pale:#f5f8fc;
  --white:#fff;
  --orange:#ffad18;
  --radius:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
.container{
  width:calc(100% - 64px);
  max-width:1440px;
  margin-inline:auto;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.icon svg{
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  white-space:nowrap;
  font-size:20px;
  line-height:19px;
  letter-spacing:-0.4px;
  font-weight:750;
}
.logo .ai{color:var(--blue);font-weight:800}
.logo .partners{color:#10233f}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:5px;
  font-size:16px;
  line-height:1;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{
  color:#fff;
  background:var(--blue);
  box-shadow:0 5px 12px rgba(20,100,255,.18);
}
.btn-dark{color:#fff;background:#0b2746}
.btn-outline{color:var(--ink);background:#fff;border-color:#acbdd0}
.btn-light{color:var(--ink);background:#fff;border-color:#d0dbe7}
.btn-arrow:after{content:"→";font-size:18px;line-height:1}
.eyebrow{
  margin:0 0 11px;
  color:#74869a;
  font-size:13px;
  line-height:1.15;
  letter-spacing:2px;
  font-weight:700;
}
.section-heading{
  margin:0;
  color:var(--ink);
  font-size:38px;
  line-height:1.12;
  letter-spacing:-0.9px;
  font-weight:750;
}
.section-intro{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
}
.section-link{
  color:var(--blue);
  font-size:15px;
  line-height:1.2;
  font-weight:650;
  white-space:nowrap;
}
.section-link:after{content:"  →";font-size:17px}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.neutral-media{
  background:linear-gradient(135deg,#edf3f8 0%,#dce7f0 48%,#f7fafc 100%);
}

/* Header */
.header{
  height:82px;
  background:#fff;
  border-bottom:1px solid #eef2f6;
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:33px;
  margin-left:auto;
  color:#263952;
  font-size:15px;
  line-height:1;
  font-weight:550;
}
.header-tools{
  display:flex;
  align-items:center;
  gap:25px;
  margin-left:16px;
  color:var(--ink);
  font-size:15px;
  line-height:1;
  font-weight:650;
}
.search-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  border:0;
  color:var(--ink);
  background:none;
}
.search-button svg{display:block;width:18px;height:18px}
.language{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.language svg{width:11px;height:11px}
.header-project{
  min-height:46px;
  padding:0 19px;
  font-size:15px;
}

/* Hero */
.hero{
  position:relative;
  min-height:390px;
  overflow:hidden;
  background:#f0f5f8;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:linear-gradient(90deg,#f8fbfd 0%,#f8fbfd 37%,#eaf1f3 65%,#dfe9e8 100%);
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.74) 39%,rgba(255,255,255,.15) 72%,rgba(255,255,255,.05) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  min-height:390px;
  display:flex;
  align-items:center;
}
.hero-copy{
  width:52%;
  padding:47px 0 38px;
}
.hero .eyebrow{
  margin-bottom:14px;
  color:#63788e;
  font-size:13px;
}
.hero h1{
  max-width:655px;
  margin:0;
  font-size:56px;
  line-height:1.03;
  letter-spacing:-1.8px;
  font-weight:780;
}
.hero h1 .blue{color:var(--blue)}
.hero-description{
  max-width:565px;
  margin:19px 0 22px;
  color:#263c56;
  font-size:17px;
  line-height:1.38;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:16px;
}
.hero-benefits{
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:24px;
  color:#304760;
  font-size:14px;
  line-height:1.2;
  font-weight:550;
}
.hero-benefits span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.hero-benefits .tiny-icon{width:15px;height:15px}
.hero-visual{
  position:absolute;
  top:0;
  right:0;
  width:49%;
  height:100%;
  pointer-events:none;
}
.hero-stat{
  position:absolute;
  right:18px;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:230px;
  padding:17px 19px;
  border-radius:9px;
  background:rgba(255,255,255,.92);
  box-shadow:0 13px 34px rgba(35,62,88,.14);
}
.hero-stat.one{top:92px}
.hero-stat.two{top:203px}
.hero-stat .stat-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  color:var(--blue);
  border-radius:50%;
  background:#edf4ff;
}
.hero-stat .stat-icon svg{width:20px;height:20px}
.hero-stat strong{
  display:block;
  font-size:23px;
  line-height:1.05;
  font-weight:750;
}
.hero-stat span{
  display:block;
  margin-top:4px;
  color:#60748a;
  font-size:13px;
  line-height:1.2;
}

/* Benefits */
.benefits{
  min-height:117px;
  background:#fff;
  border-bottom:1px solid #edf2f6;
}
.benefits-grid{
  height:117px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  align-items:center;
}
.benefit{
  display:flex;
  align-items:center;
  gap:18px;
}
.benefit-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  width:56px;
  height:56px;
  color:#0f3158;
  border-radius:50%;
  background:#f2f6fb;
}
.benefit-icon svg{width:25px;height:25px}
.benefit strong{
  display:block;
  margin-bottom:4px;
  font-size:16px;
  line-height:1.15;
  font-weight:750;
}
.benefit small{
  display:block;
  color:#708197;
  font-size:14px;
  line-height:1.2;
}

/* Design selection */
.designs{
  min-height:398px;
  padding:51px 0 49px;
  background:#f8fafc;
}
.designs .section-intro{margin-bottom:23px}
.design-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px;
}
.design-card{
  min-width:0;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(26,59,98,.045);
}
.design-thumb{
  width:100%;
  height:141px;
  overflow:hidden;
}
.design-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.design-thumb.one{background:linear-gradient(140deg,#142133,#607786)}
.design-thumb.two{background:linear-gradient(135deg,#d4e3e2,#a68d72)}
.design-thumb.three{background:linear-gradient(135deg,#f1d6cf,#c88d85)}
.design-thumb.four{background:linear-gradient(135deg,#d8eff7,#5c9bb5)}
.design-thumb.five{background:linear-gradient(135deg,#372b20,#c18047)}
.design-thumb.six{background:linear-gradient(135deg,#ecf0ec,#c6d2cb)}
.design-body{padding:14px 12px 13px}
.design-card h3{
  margin:0 0 5px;
  font-size:16px;
  line-height:1.15;
  font-weight:750;
}
.design-card p{
  min-height:34px;
  margin:0;
  color:#728195;
  font-size:14px;
  line-height:1.3;
}
.circle-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-top:11px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#42617e;
  background:#f0f4f8;
  font-size:21px;
  line-height:1;
}

/* Process */
.process{
  min-height:278px;
  padding:51px 0 48px;
  background:#fff;
}
.process .section-intro{margin-bottom:31px}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:48px;
}
.process-step{position:relative}
.process-step:not(:last-child):after{
  content:"→";
  position:absolute;
  top:40px;
  right:-32px;
  color:#57718d;
  font-size:32px;
  line-height:1;
  font-weight:300;
}
.step-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin-bottom:17px;
  border:1px solid #cfe0ff;
  border-radius:50%;
  color:var(--blue);
  background:#f3f7ff;
  box-shadow:0 0 0 7px rgba(20,100,255,.055);
  font-size:21px;
  line-height:1;
  font-weight:700;
}
.process-step h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.15;
  font-weight:750;
}
.process-step p{
  max-width:230px;
  margin:0;
  color:#677b91;
  font-size:15px;
  line-height:1.35;
}

/* Agency */
.agency{
  min-height:398px;
  padding:51px 0 48px;
  background:#f5f8fc;
}
.agency-grid{
  display:grid;
  grid-template-columns:.84fr 1.35fr .72fr;
  align-items:center;
  gap:45px;
}
.agency-copy h2{
  max-width:330px;
  margin:0;
  font-size:39px;
  line-height:1.08;
  letter-spacing:-1px;
  font-weight:760;
}
.agency-copy p{
  max-width:340px;
  margin:16px 0 20px;
  color:#334a64;
  font-size:16px;
  line-height:1.38;
}
.agency-preview{
  position:relative;
  padding:12px;
  border:1px solid #ccd7e2;
  border-radius:7px;
  background:#fff;
  box-shadow:0 13px 27px rgba(38,66,96,.13);
}
.browser-bar{
  height:27px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  color:#233b55;
  font-size:13px;
  font-weight:700;
}
.browser-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c5d0dc;
}
.preview-image{
  width:100%;
  height:244px;
  object-fit:cover;
  border-radius:2px;
  background:linear-gradient(135deg,#cbd9db 0%,#b2c2be 48%,#e5e9e7 100%);
}
.checklist{
  padding:19px 17px;
  border-radius:7px;
  background:#fff;
  box-shadow:0 9px 23px rgba(27,62,99,.07);
}
.check-item{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  color:#405872;
  font-size:15px;
  line-height:1.15;
}
.check-item:last-child{margin-bottom:0}
.check-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  color:var(--blue);
  border:1px solid #a9c7ff;
  border-radius:50%;
  background:#f1f6ff;
}
.check-icon svg{width:13px;height:13px}

/* Solutions */
.solutions{
  min-height:289px;
  padding:47px 0 48px;
  background:#fff;
}
.solutions .section-intro{margin-bottom:23px}
.solution-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px;
}
.solution-card{
  min-height:128px;
  padding:18px 17px 15px;
  box-shadow:0 3px 14px rgba(32,68,105,.035);
}
.solution-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:12px;
  color:var(--blue);
  border-radius:9px;
  background:#eaf1ff;
}
.solution-icon svg{width:22px;height:22px}
.solution-card h3{
  margin:0 0 5px;
  font-size:16px;
  line-height:1.15;
  font-weight:750;
}
.solution-card p{
  margin:0;
  color:#718196;
  font-size:13px;
  line-height:1.25;
}

/* Projects */
.projects{
  min-height:303px;
  padding:43px 0 47px;
  background:#f8fafc;
}
.projects .section-intro{margin-bottom:21px}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.project-card{
  overflow:hidden;
  box-shadow:0 4px 15px rgba(26,59,98,.05);
}
.project-image{
  width:100%;
  height:171px;
  object-fit:cover;
  background:linear-gradient(135deg,#18293a,#8197a1 70%,#dde5e5);
}
.project-image.two{background:linear-gradient(135deg,#ccd9d4,#879b95 58%,#ede8df)}
.project-image.three{background:linear-gradient(135deg,#efd4cd,#d69c9a 55%,#f5e8e4)}
.project-content{padding:12px 16px 14px}
.project-content h3{
  margin:0 0 9px;
  font-size:17px;
  line-height:1.2;
  font-weight:750;
}
.project-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.tag{
  padding:4px 9px;
  border:1px solid #b8c9db;
  border-radius:12px;
  color:#64778c;
  font-size:12px;
  line-height:1;
}
.external{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 27px;
  width:27px;
  height:27px;
  color:#4e6a86;
  border:1px solid #d4dee8;
  border-radius:50%;
}
.external svg{width:15px;height:15px}

/* Pricing */
.pricing{
  min-height:446px;
  padding:47px 0 45px;
  background:#fff;
}
.pricing .section-intro{margin-bottom:23px}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:stretch;
}
.price-card{
  position:relative;
  min-height:369px;
  display:flex;
  flex-direction:column;
  padding:22px 25px 19px;
  box-shadow:0 4px 14px rgba(31,60,91,.035);
}
.price-card.featured{border:2px solid var(--blue)}
.popular{
  position:absolute;
  top:-13px;
  right:19px;
  padding:5px 12px;
  color:#fff;
  border-radius:12px;
  background:var(--blue);
  font-size:11px;
  line-height:1;
  font-weight:700;
}
.price-card h3{
  margin:0 0 4px;
  font-size:19px;
  line-height:1.2;
  font-weight:750;
}
.price{
  margin:0;
  font-size:35px;
  line-height:1.08;
  letter-spacing:-0.6px;
  font-weight:780;
}
.price-subtitle{
  min-height:43px;
  margin:7px 0 13px;
  color:#657990;
  font-size:15px;
  line-height:1.3;
}
.price-list{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}
.price-list li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#435a73;
  font-size:15px;
  line-height:1.18;
}
.price-list li:before{
  content:"✓";
  color:var(--blue);
  font-weight:800;
}
.price-card .btn{
  width:100%;
  min-height:43px;
  margin-top:auto;
  font-size:15px;
}

/* Testimonials */
.testimonials{
  min-height:223px;
  padding:41px 0 44px;
  background:#f8fafc;
}
.testimonials .section-intro{margin-bottom:19px}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:19px;
}
.testimonial{
  min-height:121px;
  padding:17px 21px 14px;
  box-shadow:0 4px 12px rgba(25,61,97,.035);
}
.quote{
  display:flex;
  gap:11px;
  margin:0 0 14px;
  color:#4b6077;
  font-size:15px;
  line-height:1.33;
}
.quote-mark{
  color:var(--blue);
  font-size:29px;
  line-height:.7;
  font-weight:800;
}
.testimonial-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.client{
  display:flex;
  align-items:center;
  gap:10px;
}
.avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  color:#fff;
  border-radius:50%;
  background:linear-gradient(145deg,#735c51,#c7a79a);
  font-size:11px;
  font-weight:750;
}
.client-name strong{
  display:block;
  font-size:13px;
  line-height:1.15;
}
.client-name span{
  display:block;
  margin-top:3px;
  color:#738397;
  font-size:12px;
  line-height:1.1;
}
.stars{
  color:var(--orange);
  font-size:16px;
  letter-spacing:2px;
  white-space:nowrap;
}

/* FAQ */
.faq{
  min-height:260px;
  padding:41px 0 45px;
  background:#fff;
}
.faq .section-intro{margin-bottom:18px}
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 31px;
}
.faq-list{display:grid;gap:7px}
.faq-item{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:5px;
  color:#405771;
  font-size:15px;
  line-height:1.2;
  font-weight:550;
}
.plus{
  color:#183a61;
  font-size:20px;
  line-height:1;
  font-weight:500;
}

/* CTA */
.cta{
  position:relative;
  min-height:201px;
  overflow:hidden;
  background:#f0f5f7;
}
.cta-media{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:linear-gradient(105deg,#f1f6f8 0%,#e8f0f2 67%,#d7e4df 100%);
}
.cta:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(246,250,252,.88),rgba(246,250,252,.68));
}
.cta-inner{
  position:relative;
  z-index:1;
  min-height:201px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.cta .eyebrow{margin-bottom:9px}
.cta h2{
  margin:0 0 7px;
  font-size:37px;
  line-height:1.1;
  letter-spacing:-0.7px;
  font-weight:760;
}
.cta p{
  margin:0;
  color:#526a82;
  font-size:16px;
  line-height:1.3;
}
.cta-actions{
  display:flex;
  flex:0 0 auto;
  gap:16px;
}

/* Footer */
.footer{
  min-height:223px;
  background:#fff;
}
.footer-main{
  min-height:170px;
  display:grid;
  grid-template-columns:1.5fr 1.05fr 1.15fr .85fr;
  gap:42px;
  padding:39px 0 25px;
}
.footer-brand .logo{margin-bottom:14px}
.footer-brand p{
  max-width:220px;
  margin:0;
  color:#718197;
  font-size:14px;
  line-height:1.35;
}
.footer h3{
  margin:2px 0 17px;
  font-size:15px;
  line-height:1.1;
  font-weight:750;
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(2,max-content);
  column-gap:37px;
  row-gap:10px;
}
.footer-links a,.contact-row{
  color:#657990;
  font-size:14px;
  line-height:1.1;
}
.contact-list{display:grid;gap:10px}
.contact-row{
  display:flex;
  align-items:center;
  gap:9px;
}
.contact-row svg{
  width:15px;
  height:15px;
  color:#203e60;
}
.socials{
  display:flex;
  align-items:center;
  gap:17px;
}
.socials a{
  display:flex;
  color:#102d4e;
}
.socials svg{
  width:17px;
  height:17px;
  fill:currentColor;
  stroke:none;
}
.socials .linkedin,.socials .youtube{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.legal{
  min-height:53px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid #edf1f5;
  color:#79899a;
  font-size:12px;
  line-height:1.2;
}
.legal-links{display:flex;gap:19px}
.legal-links a + a:before{
  content:"|";
  margin-right:19px;
  color:#bec8d2;
}

/* Tablet */
@media (max-width:1199px){
  .main-nav{gap:19px;font-size:14px}
  .header-tools{gap:17px}
  .hero h1{font-size:49px}
  .design-grid,.solution-grid{grid-template-columns:repeat(3,1fr)}
  .designs{padding-bottom:51px}
  .agency-grid{
    grid-template-columns:1fr 1.45fr;
    gap:31px;
  }
  .checklist{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
  }
  .check-item{margin:0}
}
@media (max-width:1023px){
  .container{width:calc(100% - 48px)}
  .header{
    height:auto;
    min-height:74px;
  }
  .header-inner{
    padding:17px 0;
    flex-wrap:wrap;
  }
  .main-nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    margin:3px 0 0;
    overflow:auto;
    padding-bottom:2px;
  }
  .header-tools{margin-left:auto}
  .hero,.hero-inner{min-height:470px}
  .hero-copy{
    width:65%;
    padding-top:50px;
  }
  .hero h1{font-size:47px}
  .hero-visual{
    width:43%;
    opacity:.73;
  }
  .hero-stat{
    right:-20px;
    transform:scale(.9);
    transform-origin:right center;
  }
  .benefits-grid{gap:18px}
  .benefit{gap:10px}
  .benefit-icon{
    width:47px;
    height:47px;
    flex-basis:47px;
  }
  .benefit strong{font-size:14px}
  .benefit small{font-size:12px}
  .process-grid{gap:29px}
  .process-step:not(:last-child):after{right:-23px}
  .agency-copy h2{font-size:34px}
  .project-grid,.pricing-grid{gap:17px}
  .price-card{padding-inline:18px}
}

/* Mobile */
@media (max-width:767px){
  body{font-size:16px}
  .container{width:calc(100% - 32px)}
  .header{min-height:67px}
  .header-inner{padding:15px 0}
  .logo{font-size:18px}
  .main-nav{gap:19px;font-size:13px}
  .header-tools{
    gap:13px;
    font-size:13px;
  }
  .header-project{display:none}
  .search-button svg{width:17px;height:17px}
  .hero,.hero-inner{min-height:555px}
  .hero-media{opacity:.46}
  .hero:after{background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.73))}
  .hero-copy{
    width:100%;
    padding:57px 0 28px;
  }
  .hero h1{
    max-width:550px;
    font-size:42px;
    line-height:1.04;
    letter-spacing:-1.2px;
  }
  .hero-description{
    max-width:510px;
    font-size:16px;
  }
  .hero-actions{
    gap:10px;
    flex-wrap:wrap;
  }
  .btn{
    min-height:46px;
    padding-inline:17px;
    font-size:14px;
  }
  .hero-benefits{
    flex-wrap:wrap;
    gap:12px 16px;
    font-size:12px;
  }
  .hero-visual{display:none}
  .benefits{padding:24px 0}
  .benefits-grid{
    height:auto;
    grid-template-columns:repeat(2,1fr);
    gap:23px 15px;
  }
  .benefit-icon{
    width:43px;
    height:43px;
    flex-basis:43px;
  }
  .benefit strong{font-size:14px}
  .benefit small{font-size:12px}
  .section-heading{font-size:29px}
  .section-intro{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  .designs,.process,.agency,.solutions,.projects,.pricing,.testimonials,.faq{
    min-height:0;
    padding:40px 0;
  }
  .design-grid,.solution-grid{
    grid-template-columns:repeat(2,1fr);
    gap:13px;
  }
  .design-thumb{height:130px}
  .design-body{padding:11px 10px}
  .design-card h3{font-size:15px}
  .design-card p{font-size:12px}
  .circle-arrow{
    width:29px;
    height:29px;
    font-size:18px;
  }
  .process-grid{
    grid-template-columns:1fr 1fr;
    gap:35px 25px;
  }
  .process-step:not(:last-child):after{display:none}
  .process-step h3{font-size:18px}
  .process-step p{font-size:14px}
  .agency-grid{
    grid-template-columns:1fr;
    gap:25px;
  }
  .agency-copy h2{
    max-width:450px;
    font-size:34px;
  }
  .agency-copy p{font-size:15px}
  .agency-preview{order:2}
  .checklist{
    order:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
  }
  .check-item{font-size:13px}
  .solution-card{
    min-height:133px;
    padding:14px 12px;
  }
  .solution-icon{
    width:34px;
    height:34px;
    margin-bottom:9px;
  }
  .solution-card h3{font-size:14px}
  .solution-card p{font-size:12px}
  .project-grid,.pricing-grid,.testimonial-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .project-image{height:190px}
  .price-card{min-height:380px}
  .testimonial{min-height:0}
  .faq-grid{
    grid-template-columns:1fr;
    gap:7px;
  }
  .cta{min-height:275px}
  .cta-inner{
    min-height:275px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding:39px 0;
  }
  .cta h2{font-size:31px}
  .cta-actions{
    width:100%;
    flex-wrap:wrap;
  }
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:29px 20px;
    padding:35px 0 27px;
  }
  .footer-brand{grid-column:1 / -1}
  .footer h3{margin-bottom:12px}
  .footer-links{
    column-gap:22px;
    font-size:13px;
  }
  .footer-links a,.contact-row{font-size:13px}
  .legal{
    min-height:70px;
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:9px;
    font-size:11px;
  }
}
@media (max-width:389px){
  .container{width:calc(100% - 28px)}
  .hero h1{font-size:37px}
  .hero-actions .btn{width:100%}
  .benefits-grid{grid-template-columns:1fr}
  .benefit{max-width:250px}
  .design-grid,.solution-grid{grid-template-columns:1fr}
  .design-thumb{height:165px}
  .checklist{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}


@media (min-width:1024px){.container,.site-container,.page-container{width:calc(100% - 64px)!important;max-width:1440px!important;margin-inline:auto!important}}


html.reveal-enabled [data-reveal] {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), filter 620ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter;
}
html.reveal-enabled [data-reveal].is-visible { opacity: 1; filter: blur(0); }
html.reveal-enabled [data-reveal-delay="1"] { --reveal-delay: 80ms; }
html.reveal-enabled [data-reveal-delay="2"] { --reveal-delay: 160ms; }
html.reveal-enabled [data-reveal-delay="3"] { --reveal-delay: 240ms; }
html.reveal-enabled [data-reveal-delay="4"] { --reveal-delay: 320ms; }

html.depth-enabled body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(80,120,160,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(80,120,160,.08) 1px, transparent 1px);
  background-size: 48px 48px;
}
html.depth-enabled button[class*="btn"],
html.depth-enabled button[class*="button"],
html.depth-enabled a[class*="btn"],
html.depth-enabled a[class*="button"] { position: relative; overflow: hidden; transition: box-shadow 240ms ease, border-color 240ms ease, filter 240ms ease; }
html.depth-enabled button[class*="btn"]::after,
html.depth-enabled button[class*="button"]::after,
html.depth-enabled a[class*="btn"]::after,
html.depth-enabled a[class*="button"]::after {
  content: "";
  position: absolute;
  inset: -80% -35%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
  opacity: 0;
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: opacity 240ms ease, background-position 700ms cubic-bezier(.22, 1, .36, 1);
}
html.depth-enabled button[class*="btn"]:hover,
html.depth-enabled button[class*="button"]:hover,
html.depth-enabled a[class*="btn"]:hover,
html.depth-enabled a[class*="button"]:hover { box-shadow: 0 10px 26px rgba(15,35,65,.14); filter: brightness(1.025); }
html.depth-enabled button[class*="btn"]:hover::after,
html.depth-enabled button[class*="button"]:hover::after,
html.depth-enabled a[class*="btn"]:hover::after,
html.depth-enabled a[class*="button"]:hover::after { opacity: 1; background-position: 0 0; }
html.depth-enabled article,
html.depth-enabled [class*="card"] { transition: box-shadow 300ms ease, border-color 300ms ease, filter 300ms ease; }
html.depth-enabled article:hover,
html.depth-enabled [class*="card"]:hover { box-shadow: 0 16px 38px rgba(15,35,65,.1); filter: brightness(1.012); }
html.depth-enabled img { transition: filter 500ms ease; }
html.depth-enabled img:hover { filter: saturate(1.04) contrast(1.015); }

@media (prefers-reduced-motion: reduce) {
  html.reveal-enabled [data-reveal] { opacity: 1; filter: none; transition: none; will-change: auto; }
  html.depth-enabled *, html.depth-enabled *::before, html.depth-enabled *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}