.web-hero { padding: 155px 0 92px; color: #fff; background: radial-gradient(circle at 84% 18%, rgba(218,37,28,.25), transparent 28%), linear-gradient(135deg, #0b1117 0%, #151d24 58%, #0b1015 100%); }
.web-hero-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 70px; align-items: center; }
.web-hero h1 { max-width: 850px; }
.web-hero h1 span { color: #ff544c; }
.web-hero .lead { max-width: 770px; color: #c8d0d6; }
.web-hero-panel { display: grid; gap: 12px; padding: 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(255,255,255,.045); backdrop-filter: blur(8px); }
.web-hero-panel div { display: flex; align-items: center; gap: 16px; padding: 17px 18px; border-radius: 15px; background: rgba(255,255,255,.045); }
.web-hero-panel strong { color: #ff5a52; font-size: .8rem; letter-spacing: .08em; }
.web-hero-panel span { font-weight: 750; color: #eef2f5; }
.portfolio-head { align-items: end; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.portfolio-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(18,25,32,.07); transition: transform .22s ease, box-shadow .22s ease; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(18,25,32,.12); }
.portfolio-shot { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #e9ecef, #f6f7f8); border-bottom: 1px solid var(--line); }
.portfolio-shot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 27px; z-index: 2; background: linear-gradient(#f8f9fa,#eceff1); border-bottom: 1px solid #dfe3e6; }
.portfolio-shot::after { content: "●  ●  ●"; position: absolute; top: 5px; left: 12px; z-index: 3; color: #aeb5bb; font-size: 11px; letter-spacing: 2px; }
.portfolio-shot img { width: 100%; height: 100%; padding-top: 27px; object-fit: cover; object-position: top; transition: transform .35s ease; }
.portfolio-card:hover .portfolio-shot img { transform: scale(1.015); }
.portfolio-body { padding: 27px 28px 29px; }
.portfolio-type { margin: 0 0 7px; color: var(--red); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.portfolio-body h3 { font-size: 1.45rem; }
.portfolio-body > p:not(.portfolio-type) { margin-top: 10px; color: var(--muted); }
.portfolio-body a { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--ink); text-decoration: none; font-weight: 800; }
.portfolio-body a:hover { color: var(--red); }
.web-process { background: #f3f5f6; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.process-grid > div { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.process-grid span { display: block; color: var(--red); font-size: .8rem; font-weight: 900; margin-bottom: 22px; }
.process-grid p { color: var(--muted); margin-top: 9px; }
.web-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: start; }
.web-form-wrap { padding: 32px; border-radius: 24px; background: #fff; color: var(--ink); }
.web-form { display: grid; gap: 17px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.web-form label { display: grid; gap: 7px; font-size: .9rem; font-weight: 750; }
.web-form input[type="text"], .web-form input[type="tel"], .web-form input[type="email"], .web-form textarea { width: 100%; border: 1px solid #d7dde1; border-radius: 11px; padding: 13px 14px; color: #151b20; background: #fff; font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.web-form textarea { resize: vertical; min-height: 150px; }
.web-form input:focus, .web-form textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(218,37,28,.1); }
.web-form .btn { justify-self: start; border: 0; cursor: pointer; }
.form-consent { grid-template-columns: auto 1fr !important; align-items: start; gap: 10px !important; color: #525d66; font-weight: 500 !important; font-size: .82rem !important; }
.form-consent input { margin-top: 3px; }
.form-note { margin: -3px 0 0; color: #7b858d; font-size: .76rem; line-height: 1.5; }
.privacy-details { padding: 11px 13px; border-radius: 10px; background: #f4f6f7; color: #65707a; font-size: .78rem; }
.privacy-details summary { cursor: pointer; font-weight: 750; color: #3c464e; }
.privacy-details p { margin: 9px 0 0; }
.hp-field { position: absolute !important; left: -99999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-status { display: none; margin-bottom: 18px; padding: 13px 15px; border-radius: 10px; font-weight: 700; }
.form-status.is-success { display: block; background: #e9f6ed; color: #1f6b36; }
.form-status.is-error { display: block; background: #fff0ef; color: #9a231d; }
.nav a[aria-current="page"] { color: var(--red); }
@media (max-width: 980px) {
  .web-hero-grid, .web-contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .web-hero { padding: 125px 0 68px; }
  .portfolio-grid, .process-grid, .form-row { grid-template-columns: 1fr; }
  .portfolio-body, .web-form-wrap { padding: 24px; }
  .web-form .btn { width: 100%; }
}


/* Portfolio mockups: desktop + mobile */
.portfolio-mockup { position: relative; aspect-ratio: 16/10; padding: 34px 38px 28px 24px; background: linear-gradient(145deg,#eef1f3,#dfe4e7); }
.portfolio-mockup::before, .portfolio-mockup::after { display:none; }
.mockup-desktop { position:absolute; left:24px; right:72px; top:28px; bottom:26px; overflow:hidden; border-radius:10px 10px 6px 6px; background:#fff; box-shadow:0 16px 32px rgba(18,25,32,.18); border:1px solid rgba(23,33,41,.12); }
.mockup-desktop::before { content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:21px; background:linear-gradient(#fafafa,#eceff1); border-bottom:1px solid #d9dee2; }
.mockup-desktop::after { content:"●  ●  ●"; position:absolute; z-index:3; top:3px; left:9px; color:#aeb5bb; font-size:9px; letter-spacing:1px; }
.mockup-desktop img { width:100%; height:100%; padding-top:21px; object-fit:cover; object-position:top; }
.mockup-phone { position:absolute; z-index:4; width:20%; min-width:72px; max-width:112px; right:22px; bottom:18px; padding:7px; border-radius:16px; background:#161c21; box-shadow:0 15px 30px rgba(10,15,19,.28); border:1px solid rgba(255,255,255,.34); }
.mockup-phone::before { content:""; display:block; width:28%; height:3px; margin:0 auto 5px; border-radius:4px; background:#555f66; }
.mockup-phone-screen { display:block; aspect-ratio:9/16; overflow:hidden; border-radius:10px; background:#fff; }
.mockup-phone-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; padding:0; }
.portfolio-card:hover .portfolio-mockup img { transform:none; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:700px){ .portfolio-mockup{padding:26px 28px 20px 16px}.mockup-desktop{left:16px;right:55px;top:22px;bottom:20px}.mockup-phone{right:14px;bottom:13px;min-width:62px;width:21%} }