:root{--ink:#0b1c29;--ink2:#112a3b;--accent:#ff922f;--accent2:#ff7c14;--paper:#f5f7f8;--text:#111923;--muted:#6b7784;--line:#dfe5e9;--white:#fff;--shadow:0 18px 50px rgba(10,28,41,.12);--radius:18px;--container:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,select{font:inherit}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{height:78px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}.header-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}.brand-mark{position:relative;width:38px;height:42px;display:flex;align-items:flex-end;gap:4px}.brand-mark i{display:block;width:8px;background:var(--accent);border-radius:2px 2px 0 0;transform:skewY(-25deg);transform-origin:bottom}.brand-mark i:nth-child(1){height:22px}.brand-mark i:nth-child(2){height:34px}.brand-mark i:nth-child(3){height:28px}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:17px;letter-spacing:.05em}.brand-copy small{font-size:7px;letter-spacing:.14em;color:#b9c6cf;margin-top:5px}.desktop-nav{display:flex;align-items:center;gap:26px;margin-left:auto}.desktop-nav a{font-size:12px;color:#ced8df;transition:.2s}.desktop-nav a:hover{color:#fff}.header-actions{display:flex;align-items:center;gap:17px;margin-left:12px}.header-phone{display:flex;align-items:center;gap:8px;font-weight:750;font-size:16px;white-space:nowrap}.header-phone svg{width:18px;height:18px;color:var(--accent)}.menu-btn{display:none;background:none;border:0;padding:8px;color:#fff}.menu-btn span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;border-radius:2px}.mobile-menu{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border:0;border-radius:7px;font-weight:800;font-size:14px;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.btn svg{width:18px;height:18px}.btn:hover{transform:translateY(-1px)}.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#101820;box-shadow:0 8px 24px rgba(255,135,31,.2)}.btn-accent:hover{box-shadow:0 12px 30px rgba(255,135,31,.3)}.btn-outline{border:1px solid rgba(255,255,255,.52);color:#fff;background:rgba(7,20,29,.28);backdrop-filter:blur(8px)}.btn-sm{min-height:44px;padding:0 18px;font-size:12px}.btn-full{width:100%}
.hero{min-height:720px;background:var(--ink);position:relative;color:#fff;overflow:hidden;padding-bottom:110px}.hero-photo{position:absolute;inset:0;background:url('../img/donmodul_modular_building.webp') center 54%/cover no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,22,32,.98) 0%,rgba(7,22,32,.9) 34%,rgba(7,22,32,.22) 65%,rgba(7,22,32,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.16))}.hero-inner{position:relative;z-index:2;min-height:610px;display:flex;align-items:center}.hero-copy{max-width:660px;padding:68px 0}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:850}.eyebrow span{width:34px;height:3px;background:var(--accent)}.hero h1{font-size:68px;line-height:.96;letter-spacing:-.045em;margin:24px 0 26px;text-transform:uppercase;max-width:720px}.hero h1 em{font-style:normal;color:var(--accent)}.hero-copy>p{font-size:18px;line-height:1.55;color:#d6dfe5;max-width:630px;margin:0}.hero-buttons{display:flex;gap:14px;margin-top:30px}.hero-stamp{position:absolute;right:30px;bottom:64px;padding:16px 20px;background:rgba(9,26,38,.78);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);border-radius:10px;transform:rotate(-2deg)}.hero-stamp strong{display:block;color:var(--accent);font-size:18px;letter-spacing:.08em}.hero-stamp span{display:block;margin-top:4px;font-size:11px;line-height:1.35;color:#dce5eb}.hero-features{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(5,19,28,.92);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}.feature-grid article{min-height:110px;display:flex;align-items:center;gap:16px;padding:22px 26px;border-right:1px solid rgba(255,255,255,.1)}.feature-grid article:last-child{border-right:0}.feature-grid svg{width:34px;height:34px;color:var(--accent);flex:0 0 auto}.feature-grid strong,.feature-grid span{display:block}.feature-grid strong{font-size:13px;line-height:1.25}.feature-grid span{font-size:11px;color:#9fb0bb;margin-top:4px}
.section{padding:78px 0}.catalog-section{background:#f8fafb}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:32px}.section-head h2{font-size:42px;line-height:1;margin:9px 0 0;letter-spacing:-.035em;text-transform:uppercase}.section-head>p{margin:0;max-width:440px;color:var(--muted);font-size:14px;line-height:1.6}.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.product-card{background:#fff;border:1px solid #e6ebee;border-radius:12px;overflow:hidden;min-width:0;transition:.2s;box-shadow:0 2px 0 rgba(9,28,41,.02)}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5dde2}.product-card img{width:100%;aspect-ratio:1.42/1;object-fit:cover}.product-info{min-height:112px;padding:16px 16px 15px;display:flex;justify-content:space-between;gap:8px}.product-info h3{font-size:15px;margin:0 0 7px;line-height:1.15}.product-info p{font-size:11px;line-height:1.45;color:var(--muted);margin:0}.product-info svg{width:18px;height:18px;align-self:flex-end;flex:0 0 auto}.product-card-cta{background:var(--ink);color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:space-between;border-color:var(--ink)}.cta-icon{display:flex;align-items:flex-end;gap:4px;height:42px}.cta-icon span{width:8px;background:var(--accent);border-radius:2px 2px 0 0;transform:skewY(-25deg)}.cta-icon span:nth-child(1){height:22px}.cta-icon span:nth-child(2){height:35px}.cta-icon span:nth-child(3){height:28px}.product-card-cta>div:nth-child(2)>span{display:block;color:var(--accent);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}.product-card-cta h3{font-size:24px;line-height:1.05;margin:0 0 10px}.product-card-cta p{color:#adbdc8;font-size:12px;line-height:1.45;margin:0}.product-card-cta>b{display:flex;align-items:center;justify-content:space-between;background:var(--accent);color:#111923;padding:13px 15px;border-radius:7px;font-size:12px}.product-card-cta>b svg{width:17px;height:17px}
.dark-strip{background:#0b1b27;color:#fff}.dark-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}.dark-strip-grid>div{display:flex;align-items:center;gap:15px;padding:28px 24px;border-right:1px solid rgba(255,255,255,.1)}.dark-strip-grid>div:last-child{border-right:0}.dark-strip-grid svg{width:32px;height:32px;color:var(--accent)}.dark-strip-grid strong,.dark-strip-grid small{display:block}.dark-strip-grid strong{font-size:13px}.dark-strip-grid small{font-size:10px;color:#9fb0bb;margin-top:4px}
.benefits{background:#fff}.benefit-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px}.benefit-card{min-height:330px;border-radius:14px;background:#f7f8f9;border:1px solid #e5eaed;padding:32px;display:flex;flex-direction:column}.benefit-card h3{font-size:24px;line-height:1.08;margin:18px 0 12px}.benefit-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.benefit-card>a{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:850}.benefit-card>a svg{width:20px;height:20px}.benefit-icon{width:58px;height:58px;border-radius:14px;background:#fff;border:1px solid #e0e6e9;display:grid;place-items:center;color:var(--ink)}.benefit-icon svg{width:32px;height:32px}.benefit-photo{position:relative;padding:0;overflow:hidden;color:#fff;border:0}.benefit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.benefit-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,29,.05),rgba(5,20,29,.9))}.benefit-photo-copy{position:relative;z-index:2;margin-top:auto;padding:32px}.benefit-photo-copy>span{display:inline-block;background:var(--accent);color:#121820;padding:6px 10px;border-radius:4px;font-size:10px;font-weight:850;text-transform:uppercase}.benefit-photo-copy h3{margin:14px 0 10px;font-size:28px}.benefit-photo-copy p{color:#e0e6ea}
.production{position:relative;min-height:560px;color:#fff;display:flex;align-items:center;overflow:hidden}.production-bg{position:absolute;inset:0;background:url('../img/production.webp') center 50%/cover no-repeat;filter:saturate(.88)}.production-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,32,.96) 0%,rgba(5,22,32,.88) 42%,rgba(5,22,32,.3) 75%,rgba(5,22,32,.16) 100%)}.production-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 410px;align-items:center;gap:80px;padding-top:64px;padding-bottom:64px}.production-copy{max-width:680px}.kicker-light{color:var(--accent)}.production-copy h2{font-size:48px;line-height:1.02;letter-spacing:-.035em;text-transform:uppercase;margin:14px 0 20px}.production-copy p{font-size:15px;line-height:1.7;color:#d0dbe1;max-width:620px;margin:0 0 28px}.production-points{background:rgba(9,30,43,.78);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:22px;backdrop-filter:blur(12px)}.production-points>div{display:flex;align-items:center;gap:13px;padding:14px 6px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:700}.production-points>div:last-child{border-bottom:0}.production-points svg{width:25px;height:25px;color:var(--accent)}
.project-banner{background:#fff}.project-grid{min-height:420px;disp.hero-photolay:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;padding-top:58px;padding-bottom:58px}.project-copy h2{font-size:48px;line-height:.98;margin:12px 0 18px;text-transform:uppercase;letter-spacing:-.04em}.project-copy p{font-size:15px;line-height:1.65;color:var(--muted);max-width:540px;margin:0 0 25px}.project-visual{height:310px;position:relative;border-radius:14px;overflow:hidden;background:#f1f3f4}.project-visual img{width:100%;height:100%;object-fit:cover}.project-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0) 70%)}.project-note{position:absolute;z-index:2;right:24px;top:22px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border:1px solid rgba(12,28,40,.1);border-radius:10px;padding:14px 18px;transform:rotate(-2deg)}.project-note strong,.project-note span{display:block}.project-note strong{font-size:18px}.project-note span{font-size:11px;color:var(--muted);margin-top:2px}
.lead-section{background:var(--ink);color:#fff;padding:52px 0}.lead-grid{display:grid;grid-template-columns:1fr 1.05fr .55fr;gap:34px;align-items:center}.lead-copy h2{font-size:42px;line-height:.98;text-transform:uppercase;margin:12px 0 14px;letter-spacing:-.04em}.lead-copy p{font-size:13px;line-height:1.6;color:#aebec8;max-width:460px;margin:0}.lead-form{background:#122b3d;border:1px solid rgba(255,255,255,.1);padding:18px;border-radius:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lead-form label{display:block}.lead-form label>span{display:none}.lead-form input,.lead-form select{width:100%;height:46px;background:#1b3749;color:#fff;border:1px solid #355063;border-radius:6px;padding:0 14px;outline:none;font-size:12px}.lead-form input::placeholder{color:#9fb0bb}.lead-form select{margin-top:10px;color:#d9e2e8}.lead-form option{color:#111}.lead-form .btn{height:48px;min-height:48px;margin-top:10px}.lead-form small{display:block;color:#78909f;font-size:9px;line-height:1.4;margin-top:9px}.lead-contact{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}.lead-contact-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#10202b;margin-bottom:12px}.lead-contact-icon svg{width:23px;height:23px}.lead-contact>span,.lead-contact>small{display:block;color:#aabac4;font-size:11px}.lead-contact>a{display:block;font-size:21px;font-weight:850;margin:6px 0 10px;white-space:nowrap}
.process-section{background:#f7f9fa}.process-head{margin-bottom:34px}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.process-grid article{position:relative;background:#fff;border:1px solid #e2e8eb;border-radius:12px;padding:24px 20px;min-height:220px}.step-num{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);font-weight:900;font-size:12px}.step-icon{width:48px;height:48px;color:var(--ink)}.step-icon svg{width:100%;height:100%}.process-grid h3{font-size:16px;margin:24px 0 8px}.process-grid p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}
.footer{background:#07131c;color:#fff;padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr .8fr;gap:90px}.brand-footer{margin-bottom:20px}.footer-brand p{font-size:12px;line-height:1.6;color:#8fa2af;max-width:360px;margin:0}.footer-nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.footer-nav>strong,.footer-contact>strong{font-size:12px;color:#9fb0bb;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}.footer-nav a{font-size:12px;color:#d7e0e6}.footer-phone{font-size:23px;font-weight:850;color:#fff}.footer-contact>span{font-size:11px;line-height:1.5;color:#8fa2af}.footer-contact .btn{margin-top:6px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:18px;color:#758b99;font-size:10px}
.toast{position:fixed;right:24px;bottom:24px;z-index:100;background:#fff;color:#111923;border-radius:10px;padding:14px 18px;box-shadow:0 18px 55px rgba(0,0,0,.2);max-width:360px;font-size:13px;line-height:1.45;transform:translateY(120px);opacity:0;transition:.3s}.toast.show{transform:translateY(0);opacity:1}
@media (max-width:1100px){.desktop-nav{display:none}.header-actions{margin-left:auto}.menu-btn{display:block}.hero h1{font-size:58px}.catalog-grid{grid-template-columns:repeat(3,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-grid article:nth-child(2){border-right:0}.hero{padding-bottom:220px}.benefit-grid{grid-template-columns:1fr 1fr}.benefit-photo{grid-column:1/-1;min-height:390px}.production-inner{grid-template-columns:1fr 330px;gap:40px}.lead-grid{grid-template-columns:1fr 1fr}.lead-contact{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:20px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:14px}.lead-contact-icon{grid-row:1/4}.lead-contact>a{margin:0}.process-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.container{width:min(100% - 30px,var(--container))}.site-header{height:68px}.brand-copy strong{font-size:15px}.brand-copy small{font-size:6.5px}.brand-mark{width:33px;height:37px}.header-phone,.header-actions .btn{display:none}.menu-btn{margin-left:auto}.mobile-menu{position:fixed;top:68px;left:0;right:0;background:#0c1f2d;padding:22px 24px 30px;z-index:49;display:flex;flex-direction:column;gap:18px;transform:translateY(-120%);transition:.28s;box-shadow:0 20px 35px rgba(0,0,0,.25)}.mobile-menu.open{transform:translateY(0)}.mobile-menu a{font-size:17px;font-weight:750;color:#fff}.mobile-menu .mobile-phone{color:var(--accent);font-size:20px;margin-top:5px}.hero{min-height:auto;padding-bottom:0}.hero-photo{background-position:58% center}.hero-overlay{background:linear-gradient(180deg,rgba(6,20,29,.9) 0%,rgba(6,20,29,.76) 55%,rgba(6,20,29,.96) 100%)}.hero-inner{min-height:620px;align-items:flex-end}.hero-copy{padding:120px 0 54px}.eyebrow{font-size:10px}.hero h1{font-size:45px;line-height:.98;margin:18px 0 20px}.hero-copy>p{font-size:14px;line-height:1.55}.hero-buttons{flex-direction:column;align-items:stretch}.hero-buttons .btn{width:100%}.hero-stamp{display:none}.hero-features{position:relative}.feature-grid{grid-template-columns:1fr 1fr}.feature-grid article{min-height:96px;padding:18px 12px;gap:10px}.feature-grid svg{width:27px;height:27px}.feature-grid strong{font-size:11px}.feature-grid span{font-size:9px}.section{padding:54px 0}.section-head{display:block;margin-bottom:24px}.section-head h2{font-size:32px}.section-head>p{margin-top:15px;font-size:13px}.catalog-grid{grid-template-columns:1fr 1fr;gap:10px}.product-card img{aspect-ratio:1.15/1}.product-info{padding:12px;min-height:104px}.product-info h3{font-size:13px}.product-info p{font-size:10px}.product-card-cta{padding:18px;min-height:280px}.product-card-cta h3{font-size:20px}.dark-strip-grid{grid-template-columns:1fr 1fr}.dark-strip-grid>div{padding:20px 13px}.dark-strip-grid>div:nth-child(2){border-right:0}.benefit-grid{grid-template-columns:1fr}.benefit-photo{grid-column:auto;min-height:340px}.benefit-card{min-height:290px}.production{min-height:660px}.production-bg{background-position:62% center}.production-overlay{background:linear-gradient(180deg,rgba(5,22,32,.94),rgba(5,22,32,.88))}.production-inner{display:block;padding-top:52px;padding-bottom:52px}.production-copy h2{font-size:35px}.production-copy p{font-size:13px}.production-points{margin-top:28px}.project-grid{grid-template-columns:1fr;padding-top:48px;padding-bottom:48px}.project-copy h2{font-size:36px}.project-visual{height:270px}.lead-grid{display:block}.lead-form{margin-top:26px}.form-row{grid-template-columns:1fr}.lead-form select{margin-top:10px}.lead-form .form-row label+label input{margin-top:10px}.lead-contact{margin-top:24px;display:grid}.process-grid{grid-template-columns:1fr 1fr}.process-grid article{min-height:200px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}.toast{left:15px;right:15px;bottom:15px;max-width:none}}
@media (max-width:430px){.hero h1{font-size:39px}.catalog-grid{grid-template-columns:1fr}.product-card img{aspect-ratio:1.5/1}.product-card-cta{min-height:250px}.feature-grid{grid-template-columns:1fr}.feature-grid article{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.dark-strip-grid{grid-template-columns:1fr}.dark-strip-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.process-grid{grid-template-columns:1fr}.project-copy h2,.production-copy h2{font-size:32px}.lead-copy h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.product-card,.mobile-menu,.toast{transition:none}}
.project-banner {
  --project-accent: #ff8617;
  --project-accent-dark: #ed6d00;
  --project-red: #f04438;
  --project-ink: #101c2a;
  --project-text: #455465;
  --project-line: #d8dee5;
  --project-soft: #f4f6f8;

  padding: clamp(56px, 6vw, 104px) 0 0;
  overflow: hidden;
  color: var(--project-ink);
  background: #fff;
}

.project-banner,
.project-banner * {
  box-sizing: border-box;
}

.project-banner > .container {
  width: min(100% - 48px, 1720px);
  margin-inline: auto;
}

.project-grid {
  display: grid;
  grid-template-columns: minmax(500px, 0.82fr) minmax(620px, 1.18fr);
  align-items: stretch;
  min-height: 610px;
}

.project-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 32px clamp(48px, 5vw, 100px) 32px 0;
}

.project-copy .kicker {
  margin-bottom: 24px;
  color: var(--project-accent-dark);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.project-copy h2 {
  max-width: 700px;
  margin: 0;
  color: var(--project-ink);
  font-size: clamp(58px, 5.3vw, 104px);
  font-weight: 850;
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.project-copy h2 span {
  display: block;
  margin-top: 16px;
  color: var(--project-accent);
  background: linear-gradient(
    90deg,
    var(--project-accent-dark),
    var(--project-red)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-copy > p {
  max-width: 660px;
  margin: 30px 0 34px;
  color: var(--project-text);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.55;
}

.project-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px;
}

.project-copy .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  min-height: 72px;
  padding: 18px 28px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.project-copy .btn-accent {
  color: var(--project-ink);
  background: var(--project-accent);
  box-shadow: 0 16px 32px rgb(255 134 23 / 24%);
}

.project-copy .btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.project-copy .btn:hover {
  color: #fff;
  background: var(--project-accent-dark);
  box-shadow: 0 20px 38px rgb(255 134 23 / 32%);
  transform: translateY(-2px);
}

.project-copy .btn:hover svg {
  transform: translateX(4px);
}

.project-copy .btn:focus-visible,
.project-example:focus-visible {
  outline: 3px solid rgb(255 134 23 / 42%);
  outline-offset: 4px;
}

.project-example {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px 22px;
  border: 1px solid #8995a3;
  border-radius: 10px;
  color: var(--project-ink);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.project-example:hover {
  border-color: var(--project-accent);
  background: #fff8f1;
  transform: translateY(-2px);
}

.project-example__number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 9px;
  color: var(--project-accent-dark);
  background: #fff2e6;
  font-size: 13px;
  font-weight: 800;
}

.project-example strong,
.project-example small {
  display: block;
}

.project-example strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.project-example small {
  color: var(--project-text);
  font-size: 13px;
}

.project-stats {
  display: flex;
  width: 100%;
  margin-top: 48px;
}

.project-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding: 0 34px;
  border-left: 1px solid #9ba6b1;
}

.project-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.project-stat strong {
  color: var(--project-ink);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.project-stat span {
  margin-top: 7px;
  color: var(--project-text);
  font-size: 14px;
  line-height: 1.4;
}

.project-visual {
  position: relative;
  min-width: 0;
  min-height: 610px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--project-soft);
  box-shadow: 0 28px 70px rgb(21 37 54 / 12%);
}

.project-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(8 19 29 / 2%) 48%,
    rgb(8 19 29 / 35%) 100%
  );
  content: "";
  pointer-events: none;
}

.project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.project-grid:hover .project-visual img {
  transform: scale(1.025);
}

.project-visual__caption {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: 40px;
  max-width: 200px;
  color: #fff;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
  transform: rotate(-4deg);
  text-shadow: 0 3px 18px rgb(0 0 0 / 28%);
}

.project-note {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: min(300px, calc(100% - 40px));
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 17px;
  color: #fff;
  background: rgb(16 28 42 / 88%);
  box-shadow: 0 16px 36px rgb(0 0 0 / 22%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.project-note__number {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--project-accent);
  border-radius: 10px;
  color: var(--project-accent);
  font-size: 13px;
  font-weight: 800;
}

.project-note strong,
.project-note small {
  display: block;
}

.project-note strong {
  font-size: 16px;
  line-height: 1.3;
}

.project-note small {
  margin-top: 6px;
  color: rgb(255 255 255 / 70%);
  font-size: 12px;
  line-height: 1.45;
}

.project-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 48px 0 0;
  padding: 30px 0 34px;
  border-top: 1px solid #edf0f3;
  list-style: none;
}

.project-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  min-width: 0;
  padding: 0 36px;
  border-left: 1px solid var(--project-line);
}

.project-step:first-child {
  padding-left: 0;
  border-left: 0;
}

.project-step:last-child {
  padding-right: 0;
}

.project-step__number {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 14px;
  color: var(--project-accent-dark);
  background: var(--project-soft);
  font-size: 13px;
  font-weight: 800;
}

.project-step strong {
  display: block;
  margin-bottom: 7px;
  color: var(--project-ink);
  font-size: 16px;
  line-height: 1.3;
}

.project-step p {
  max-width: 240px;
  margin: 0;
  color: var(--project-text);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1240px) {
  .project-banner > .container {
    width: min(100% - 32px, 1100px);
  }

  .project-grid {
    grid-template-columns: minmax(430px, 0.9fr) minmax(500px, 1.1fr);
  }

  .project-copy {
    padding-right: 44px;
  }

  .project-copy h2 {
    font-size: clamp(54px, 6.2vw, 76px);
  }

  .project-stats {
    gap: 20px;
  }

  .project-stat {
    padding: 0 20px;
  }

  .project-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  .project-step:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 960px) {
  .project-banner {
    padding-top: 48px;
  }

  .project-banner > .container {
    width: min(100% - 28px, 760px);
  }

  .project-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .project-copy {
    padding: 0 0 42px;
  }

  .project-copy h2 {
    max-width: 700px;
    font-size: clamp(52px, 10vw, 74px);
  }

  .project-copy > p {
    max-width: 680px;
  }

  .project-visual,
  .project-visual img {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .project-banner {
    padding-top: 38px;
  }

  .project-banner > .container {
    width: min(100% - 24px, 560px);
  }

  .project-copy .kicker {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .project-copy h2 {
    font-size: clamp(42px, 13.5vw, 62px);
    line-height: 0.94;
  }

  .project-copy h2 span {
    margin-top: 8px;
  }

  .project-copy > p {
    margin: 24px 0 28px;
    font-size: 16px;
  }

  .project-actions {
    width: 100%;
  }

  .project-copy .btn,
  .project-example {
    width: 100%;
  }

  .project-copy .btn {
    justify-content: space-between;
  }

  .project-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 34px;
  }

  .project-stat,
  .project-stat:first-child {
    padding: 15px 0;
    border: 0;
    border-top: 1px solid var(--project-line);
  }

  .project-stat strong {
    font-size: 26px;
  }

  .project-visual {
    min-height: 430px;
    border-radius: 20px;
  }

  .project-visual img {
    min-height: 430px;
  }

  .project-visual__caption {
    top: 22px;
    right: 22px;
    font-size: 16px;
  }

  .project-note {
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
  }

  .project-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 30px;
    padding-top: 16px;
  }

  .project-step,
  .project-step:first-child,
  .project-step:nth-child(3),
  .project-step:last-child {
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid var(--project-line);
  }

  .project-step:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-copy .btn,
  .project-copy .btn svg,
  .project-example,
  .project-visual img {
    transition: none;
  }

  .project-copy .btn:hover,
  .project-example:hover,
  .project-grid:hover .project-visual img {
    transform: none;
  }
}