:root {
  --blue:#062f61;
  --blue-2:#0a4f98;
  --green:#078445;
  --yellow:#f8c500;
  --ink:#0d1a2e;
  --muted:#657187;
  --white:#fff;
  --bg:#f4f7fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink)}
body{min-height:100vh}
.page{min-height:100vh;display:flex;flex-direction:column}
.hero{position:relative;min-height:670px;background:linear-gradient(135deg,#fff 0%,#fff 55%,#eef4fb 100%);overflow:hidden;display:grid;grid-template-columns:1fr minmax(320px,620px) 1fr;align-items:center;padding:50px 6vw 20px;border-bottom:8px solid var(--yellow)}
.hero:before{content:"";position:absolute;inset:-100px auto auto -120px;width:480px;height:260px;background:linear-gradient(145deg,var(--green) 0 40%,var(--yellow) 40% 58%,transparent 58%);transform:rotate(-8deg);opacity:.98}
.hero:after{content:"";position:absolute;right:-160px;top:-70px;width:520px;height:260px;background:linear-gradient(145deg,transparent 0 34%,var(--yellow) 34% 48%,var(--green) 48% 100%);transform:rotate(10deg);opacity:.95}
.brand,.title-block,.photo-wrap{position:relative;z-index:2}
.brand{align-self:start;margin-top:36px;max-width:300px}
.brand-name{font-size:clamp(42px,5vw,76px);font-weight:900;line-height:.82;color:var(--blue);letter-spacing:-3px}
.brand-surname{font-size:clamp(21px,2.2vw,34px);font-weight:900;color:var(--blue-2);line-height:1.05;margin-top:10px}
.brand-role{margin-top:12px;letter-spacing:7px;font-size:14px;font-weight:800;color:var(--ink)}
.photo-wrap{height:570px;display:flex;align-items:flex-end;justify-content:center}
.candidate-photo{width:min(100%,560px);height:560px;object-fit:cover;object-position:center 20%;border-radius:34px;box-shadow:0 28px 70px rgba(7,34,72,.22);border:8px solid #fff}
.title-block{align-self:end;margin-bottom:64px;max-width:420px}
.eyebrow{display:inline-block;font-weight:800;letter-spacing:7px;color:var(--green);font-size:16px;margin-bottom:18px}
.title-block h1{font-size:clamp(42px,5vw,76px);line-height:.92;margin:0;color:var(--blue);letter-spacing:-2px}
.title-block p{display:inline-block;background:var(--yellow);padding:10px 16px;margin:20px 0 0;font-size:clamp(20px,2vw,29px);font-weight:900;letter-spacing:4px;color:var(--blue)}
.campaign-info{background:linear-gradient(110deg,var(--blue),#073e7a);color:#fff;padding:34px 5vw 38px}
.campaign-info h2{text-align:center;margin:0 0 28px;font-size:20px;letter-spacing:5px;font-weight:800;color:#fff}
.info-grid{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.info-card{padding:18px 28px;min-height:118px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(255,255,255,.25)}
.info-card:first-child{border-left:none}
.label{font-size:12px;letter-spacing:3px;color:#a9c7e9;font-weight:800;margin-bottom:8px}
.info-card strong{font-size:20px;line-height:1.25}
.info-card small{font-size:15px;margin-top:5px;color:#d8e6f5}
footer{background:#fff;padding:22px;text-align:center;color:var(--muted);font-size:14px;letter-spacing:1px}
@media (max-width:1050px){
  .hero{grid-template-columns:1fr;min-height:auto;text-align:center;padding:40px 24px 36px}
  .brand{margin:0 auto 24px;align-self:auto}
  .photo-wrap{height:auto;order:2}
  .candidate-photo{height:auto;max-height:560px}
  .title-block{margin:30px auto 0;align-self:auto;order:3}
  .brand{order:1}
  .info-grid{grid-template-columns:1fr 1fr}
  .info-card:nth-child(3){border-left:none;border-top:1px solid rgba(255,255,255,.25)}
  .info-card:nth-child(4){border-top:1px solid rgba(255,255,255,.25)}
}
@media (max-width:620px){
  .hero{padding:28px 16px 28px}
  .brand-name{font-size:48px}
  .brand-surname{font-size:24px}
  .brand-role{letter-spacing:4px;font-size:11px}
  .candidate-photo{border-radius:24px;border-width:5px}
  .title-block h1{font-size:44px}
  .title-block p{font-size:19px;letter-spacing:2px}
  .info-grid{grid-template-columns:1fr}
  .info-card{border-left:none!important;border-top:1px solid rgba(255,255,255,.25)}
  .info-card:first-child{border-top:none}
}