@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --font-display:"Helvena","Arial Narrow",system-ui,sans-serif;
  --font-text:"Helvena",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ink:#171717; --ink-700:#3A3A3A; --ink-500:#6B6B6B; --accent:#155190;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#FFFFFF;font-family:var(--font-text);color:var(--ink)}
a{text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block}

.wrap{min-height:100vh;display:flex;flex-direction:column;background:#FFFFFF}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,5vw,44px);background:#171717}
.topbar img{height:26px;width:auto}
.topbar span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#B5B5B5}

main{flex:1;display:flex;flex-direction:column}

.hero{display:grid;grid-template-columns:1fr auto;grid-template-areas:"text img" "btns btns";align-items:center;column-gap:18px;row-gap:clamp(20px,4vw,28px);width:100%;max-width:1060px;margin:0 auto;padding:clamp(22px,4vw,40px) clamp(20px,5vw,44px) clamp(30px,5vw,56px)}

.htext{grid-area:text;min-width:0}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.eyebrow i{width:9px;height:9px;border-radius:999px;background:var(--accent);flex:none}
.eyebrow span{font-size:clamp(11px,2.4vw,12px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.title{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,4.4vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
.subtitle{font-family:var(--font-display);font-weight:500;font-size:clamp(14px,2.4vw,18px);line-height:1.35;color:var(--ink-700);margin:12px 0 0}
.lead{font-size:clamp(13px,2.2vw,15px);line-height:1.6;color:var(--ink-500);margin:12px 0 0;max-width:46ch}

.himg{grid-area:img;width:clamp(116px,30vw,168px);justify-self:end;display:flex;justify-content:center;align-items:center}
.product{width:100%;height:auto;object-fit:contain;cursor:pointer;transition:transform 350ms cubic-bezier(.2,.7,.2,1),filter 350ms ease;filter:drop-shadow(0 18px 32px rgba(23,23,23,.20))}
.product:hover{transform:scale(1.04) rotate(-1.5deg);filter:drop-shadow(0 28px 46px rgba(23,23,23,.28))}

.actions{grid-area:btns;display:flex;flex-direction:column;gap:14px;width:100%;max-width:460px}
.btn{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 20px;border-radius:12px;background:var(--accent);color:#FFFFFF;font-family:var(--font-display);font-weight:600;font-size:16px;cursor:pointer;transition:transform 140ms ease,box-shadow 140ms ease,opacity 140ms ease}
.btn .ico{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none}
.btn .label{flex:1}
.btn .arr{flex:none;opacity:.85}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,81,144,.34)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(21,81,144,.30);opacity:.92}

@media(min-width:768px){
  .hero{grid-template-areas:"text img" "btns img";column-gap:clamp(36px,4vw,60px);align-items:start;padding-top:clamp(34px,4vw,52px)}
  .himg{width:clamp(300px,32vw,420px);justify-self:center;align-self:center}
}