:root{
  --green:#72dc0b;
  --white:#f4f4f2;
  --muted:#aeb8c8;
  --gray:#858585;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050606}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--white);overflow:hidden}
.hero{
  position:relative;width:100vw;height:100svh;min-height:100vh;overflow:hidden;
  background:#070808 url('assets/hero-background.png') center center/cover no-repeat;
}
.shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.83) 0%,rgba(0,0,0,.60) 22%,rgba(0,0,0,.13) 45%,rgba(0,0,0,.03) 70%,rgba(0,0,0,.13) 100%);
}
.identity{
  position:absolute;z-index:2;left:4.35vw;top:13.6vh;width:min(45vw,760px);
}
h1{margin:0;font-weight:300;font-size:clamp(46px,6.25vw,118px);line-height:.88;letter-spacing:-.045em;white-space:nowrap}
.name{margin-top:1.8vh;color:var(--green);font-size:clamp(30px,3.55vw,67px);font-weight:300;line-height:1}
.contact{margin-top:5.4vh;display:grid;gap:1.75vh;font-size:clamp(19px,1.72vw,33px);font-weight:300}
.contact-row{display:flex;align-items:center;gap:1.8vw;white-space:nowrap}
.phone-icon,.mail-icon{color:var(--green);display:inline-flex;width:2.1vw;min-width:30px;justify-content:center;font-size:1.2em;line-height:1}
.white-rule{margin-top:4.5vh;width:4.1vw;min-width:58px;height:2px;background:rgba(255,255,255,.9)}
.credentials{margin-top:3.2vh;font-size:clamp(18px,1.55vw,30px);line-height:1.38;font-weight:300}
.credentials div+div{color:var(--muted)}
.values{margin-top:7.1vh;font-size:clamp(14px,1.08vw,21px);line-height:1.58;letter-spacing:.31em;font-weight:400}
.green-rule{margin-top:2.9vh;width:3.55vw;min-width:50px;height:3px;background:var(--green)}
.progress{display:flex;margin-top:3.6vh;width:min(57vw,990px);height:clamp(13px,1.35vh,22px)}
.progress span{width:85%;background:var(--green)}
.progress i{display:block;flex:1;background:var(--gray)}
.statement{
  position:absolute;z-index:2;top:10.4vh;right:8.6vw;width:21.2vw;min-width:270px;
  font-size:clamp(16px,1.28vw,25px);font-weight:300;line-height:1.55;letter-spacing:.27em;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.statement-rule{margin-top:4.7vh;width:4.8vw;min-width:66px;height:4px;background:var(--green)}

@media (max-aspect-ratio: 4/3){
  .hero{background-position:58% center}
  .identity{left:5vw;top:10vh;width:58vw}
  h1{font-size:clamp(42px,7.4vw,80px)}
  .name{font-size:clamp(28px,4.8vw,52px)}
  .statement{right:4.5vw;top:7vh;width:28vw;min-width:0;font-size:clamp(13px,1.75vw,20px)}
  .progress{width:56vw}
}
@media (max-width:700px){
  body{overflow:auto}
  .hero{min-height:100svh;height:auto;background-position:62% center;background-size:cover;padding:7vh 7vw 6vh}
  .shade{background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.52) 52%,rgba(0,0,0,.68))}
  .identity,.statement{position:relative;left:auto;right:auto;top:auto;width:auto;min-width:0}
  h1{font-size:clamp(42px,13vw,70px);white-space:normal}
  .name{font-size:clamp(29px,8.8vw,46px);margin-top:1.3vh}
  .contact{margin-top:4.5vh;font-size:clamp(18px,5.2vw,26px);gap:1.4vh}
  .contact-row{gap:16px;white-space:normal}
  .phone-icon,.mail-icon{width:28px;min-width:28px}
  .credentials{font-size:clamp(18px,4.8vw,24px)}
  .values{margin-top:5.5vh;font-size:14px}
  .progress{width:86vw;max-width:100%;height:12px;margin-top:2.8vh}
  .statement{margin-top:7vh;font-size:clamp(14px,4vw,19px);line-height:1.55;letter-spacing:.22em}
  .statement-rule{margin-top:2.8vh}
}