/* Product-led first viewport. All colours inherit the existing navy/copper identity. */
.header-inner nav a{position:relative}
.header-inner nav a::after{content:'';position:absolute;inset:auto 0 2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.header-inner nav a:hover::after,.header-inner nav a:focus-visible::after{transform:scaleX(1)}
.hero{position:relative;isolation:isolate;grid-template-columns:1fr 1.12fr;gap:2%;padding-top:36px;padding-bottom:32px;min-height:min(720px,calc(100svh - 94px))}
.hero-copy{position:relative;z-index:2;padding-block:28px}
.hero h1{font-size:clamp(44px,4.85vw,72px);line-height:1.3;letter-spacing:-.035em;font-weight:700}
.hero h1 span{display:inline-block;margin-top:9px}
.hero-intro{max-width:440px;margin-top:29px;font-size:16px}
.hero-actions{margin-top:30px}
.hero .button{min-height:56px;padding-inline:26px;gap:40px}
.hero-foot{display:flex;align-items:center;gap:13px;margin-top:44px;font-size:12px}
.hero-foot::before{content:'';width:29px;height:1px;background:var(--accent);flex:none}
.hero-visual{position:relative;min-width:0;perspective:1000px}
.hero-photo,.hero-photo img{transition:transform .65s cubic-bezier(.16,1,.3,1)}
.hero .hero-photo{position:relative;isolation:isolate;overflow:visible;aspect-ratio:1.04;background:transparent;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))}
.hero-photo::before{content:'';position:absolute;inset:4% -3% 4% 3%;background:var(--soft);clip-path:polygon(19% 0,100% 0,100% 81%,81% 100%,0 100%,0 19%);z-index:-2}
.hero-photo::after{content:'';position:absolute;left:17%;right:6%;bottom:9%;height:12%;background:var(--ink);opacity:.12;filter:blur(24px);transform:rotate(-8deg);z-index:-1;border-radius:50%}
.hero .hero-photo img{position:relative;z-index:1;height:100%;object-fit:cover;object-position:center;padding:12px 0;transform:translate3d(var(--shift-x,0px),var(--shift-y,0px),0) rotate(-7deg) scale(1.035);filter:drop-shadow(4px 18px 12px rgba(24,51,62,.17));animation:product-arrive 1.1s cubic-bezier(.16,1,.3,1) both}
.hero-routes{position:absolute;inset:-5% -8%;width:116%;height:110%;overflow:visible;clip-path:inset(0 7%);z-index:-1;color:var(--accent);pointer-events:none}
.route-base{stroke:currentColor;stroke-width:1;opacity:.24}
.route-signal{stroke:currentColor;stroke-width:2;stroke-dasharray:9 91;animation:connection-flow 4s cubic-bezier(.16,1,.3,1) 2}
.route-signal path:nth-child(2){stroke-dashoffset:45}
.route-terminals{fill:var(--bg);stroke:currentColor;stroke-width:1.3}
.stage-corner{position:absolute;width:23px;height:23px;border-color:var(--accent);border-style:solid;pointer-events:none}
.corner-start{left:3%;top:4%;border-width:1px 0 0 1px}
.corner-end{right:-3%;bottom:4%;border-width:0 1px 1px 0}
.hero-visual figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:19px}
.hero-visual figcaption strong{font-size:13px}
.hero-visual figcaption span{max-width:205px;text-align:right;font-size:12px}
html[lang=en] .hero h1{font-size:clamp(48px,5.3vw,76px);line-height:1.02;letter-spacing:-.03em}
html[lang=en] .hero h1 span{margin-top:3px}
[data-theme=dark] .hero-photo::before{background:#e5eae4}
[data-theme=dark] .hero-photo::after{background:#000;opacity:.23}
[data-theme=dark] .hero-routes{color:var(--accent)}
@keyframes connection-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes product-arrive{from{clip-path:inset(0 0 12% 0);transform:translate3d(0,16px,0) rotate(-4deg) scale(1.01)}to{clip-path:inset(-20%);transform:translate3d(var(--shift-x,0px),var(--shift-y,0px),0) rotate(-7deg) scale(1.035)}}
@media(min-width:801px){.hero .hero-photo{max-height:clamp(420px,calc(100svh - 225px),600px)}}
@media(min-width:1600px){.hero{min-height:740px}.hero .hero-photo{max-height:630px}}
@media(max-width:1150px) and (min-width:801px){.hero{min-height:620px}.hero h1{font-size:46px}.hero-intro{font-size:15px}.hero .button{gap:25px;padding-inline:22px}.hero-actions{gap:20px}.hero-visual figcaption{display:grid;gap:3px}.hero-visual figcaption span{text-align:left;max-width:none}html[lang=en] .hero h1{font-size:55px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0;gap:16px;padding-top:35px;padding-bottom:35px}.hero-copy{padding:0}.hero h1{font-size:clamp(40px,6.3vw,55px);line-height:1.32}.hero h1 span{margin-top:3px}.hero-intro{max-width:510px;margin-top:22px}.hero-foot{margin-top:25px}.hero-visual{width:100%;max-width:620px;margin:auto}.hero .hero-photo{aspect-ratio:1.4}.hero .hero-photo img{object-fit:contain;transform:rotate(-7deg) scale(1.16);animation:none}.hero-routes{inset:-5% 0;width:100%;height:110%}.hero-photo::before{inset:5% 0}.corner-start{left:0;top:5%}.corner-end{right:0;bottom:5%}.hero-visual figcaption{padding-top:10px}.hero-visual figcaption span{max-width:200px}html[lang=en] .hero h1{font-size:clamp(48px,7vw,62px)}}
@media(max-width:520px){.hero{padding-top:31px;gap:20px}.hero h1{font-size:clamp(32px,8.65vw,43px);letter-spacing:-.035em}.hero-intro{font-size:14px;line-height:1.9;margin-top:22px}.hero-actions{margin-top:24px;gap:23px}.hero .button{min-height:50px;padding-inline:20px;gap:30px}.hero-foot{font-size:12px;margin-top:24px}.hero .hero-photo{aspect-ratio:1.15}.hero .hero-photo img{padding:0;transform:rotate(-7deg) scale(1.12)}.hero-visual figcaption{display:grid;gap:3px;padding-top:7px}.hero-visual figcaption strong{font-size:12px}.hero-visual figcaption span{text-align:left;max-width:none;font-size:12px}.hero-routes{inset:-2% -1%;width:102%;height:104%}.stage-corner{width:17px;height:17px}html[lang=en] .hero h1{font-size:clamp(43px,11.3vw,58px);line-height:1.03}html[lang=en] .hero-intro{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero .hero-photo,.hero .hero-photo img{transition:none;animation:none}.route-signal{animation:none;stroke-dasharray:none;opacity:.4}}
@media(max-width:800px){.hero{overflow:clip}}