/* Спільні стилі всіх сторінок: шрифти, сітка, типографіка, хвилі, орнаменти, анімації появи */
[hidden]{display:none!important}
@font-face{font-family:'HRAI MARKU';src:url(../assets/fonts/HRAIMARKU-Regular.otf) format('opentype');font-display:swap}
body{margin:0;background:#1E1D21}
a{color:#F5F3EE}a:hover{color:#F7A23B}
.fh{font-family:'NAMU 1990','NAMU','NAMU Modernism 1990',Geist,'Helvetica Neue',Arial,sans-serif;font-synthesis:none}
.fa{font-family:'HRAI MARKU',Geist,sans-serif;font-weight:400;font-synthesis:none}
.wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.scr{position:relative;padding:96px 0 100px}
.h2{margin:0;font-size:clamp(44px,6.2vw,88px);line-height:.92;font-weight:800;letter-spacing:-.02em}
.lead{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.38;font-weight:600}
.body{margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:#DAD8DE;max-width:640px}
.big{margin:0;font-size:clamp(34px,4.3vw,62px);line-height:1;font-weight:800;letter-spacing:-.015em}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.panel{box-sizing:border-box;border-radius:26px;border:1px solid rgba(255,255,255,.12);background:#28272C;padding:32px 34px}
.print{margin:0;box-sizing:border-box;padding:12px 12px 16px;background:#E8E3D7;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.print img{display:block;width:100%;height:auto}
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;box-sizing:border-box;background:linear-gradient(165deg,#4A4A50 0%,#2A2A2F 100%);font-size:14px;line-height:1.45;color:#BDBBC2}
.ph::before{content:'';position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.18);border-radius:2px}
.bn{border:22px solid transparent;border-image:url(../assets/svg/frame-guilloche-orange.svg) 30 round}
.bnG{border:20px solid transparent;border-image:url(../assets/svg/frame-guilloche-graphite.svg) 30 round}
.paper{background:#EDE6D8;color:#1E1D21}
.paper .body{color:#3B3A40}
.paper .src{color:#5A5960}
.paper .src:hover{color:#B5651A}
.rope{height:56px;background:url(../assets/svg/band-rope-orange.svg) 0 0/720px 56px repeat-x;opacity:.75}
.ropeG{height:56px;background:url(../assets/svg/band-rope-graphite.svg) 0 0/720px 56px repeat-x}
.dog{height:60px;background:url(../assets/svg/band-wave-scroll-orange.svg) 0 0/720px 60px repeat-x}
.dogG{height:60px;background:url(../assets/svg/band-wave-scroll-graphite.svg) 0 0/720px 60px repeat-x}
.ros{position:absolute;pointer-events:none;display:block;height:auto;z-index:0}
.spin{animation:spin 140s linear infinite}
.spinR{animation:spinR 160s linear infinite}
.spot{position:absolute;pointer-events:none;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(247,162,59,.17),rgba(247,162,59,.06) 55%,rgba(247,162,59,0))}
.spotW{position:absolute;pointer-events:none;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(255,232,196,.10),rgba(255,232,196,.035) 55%,rgba(255,232,196,0))}
.mk{background:linear-gradient(rgba(247,162,59,.32),rgba(247,162,59,.32)) 0 88%/100% .3em no-repeat}
.btn{transition:background .25s,color .25s}
.btn:hover{background:#F7A23B !important;color:#141416 !important}
.opt{transition:border-color .3s,background .3s,opacity .3s}
.opt:hover{border-color:rgba(247,162,59,.8) !important}
.src{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0;font:inherit;font-size:14px;color:#A3A1A8;cursor:pointer}
.src:hover{color:#F7A23B}
.ii{width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.pop{position:absolute;bottom:calc(100% + 10px);box-sizing:border-box;padding:18px 20px;border-radius:18px;background:#151417;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.5);text-align:left;display:flex;flex-direction:column;gap:8px;z-index:15;animation:fade .2s both;color:#E9E7E2;font-family:Geist,sans-serif;font-weight:400;letter-spacing:0}
.term{font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:2px dotted #F7A23B;cursor:pointer}
.term:hover{color:#F7A23B}
.segA{display:flex;align-items:center;height:44px;padding:0 3px}
.seg{display:block;width:28px;height:4px;border-radius:2px;background-color:rgba(255,255,255,.22);background-image:linear-gradient(#F7A23B,#F7A23B);background-repeat:no-repeat;background-size:0% 100%}
.segA:hover .seg{background-color:rgba(247,162,59,.45)}
.w1{background-image:url(../assets/svg/wave-row-1.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 52s linear infinite}
.w2{background-image:url(../assets/svg/wave-row-2.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 40s linear infinite}
.w3{background-image:url(../assets/svg/wave-row-3.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 32s linear infinite}
.w4{background-image:url(../assets/svg/wave-front.svg);background-size:720px 120px;background-repeat:repeat-x;animation:wx 24s linear infinite}
.boatR{position:absolute;left:min(calc(50% + 230px),calc(100% - 316px));top:0;width:300px;transform-origin:50% 80%;animation:rock 2.6s ease-in-out infinite}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:2px solid #F7A23B;outline-offset:3px}
section[id]{scroll-margin-top:72px}
.ftr{max-width:1360px;margin:0 auto;padding:26px 40px;display:flex;align-items:center;gap:24px;font-size:14px;color:#A3A1A8}
.hide-s{}
@keyframes wx{from{background-position-x:0}to{background-position-x:-720px}}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(7px) rotate(3deg)}}
@keyframes rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes rv{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes rvL{from{opacity:0;translate:-70px 0}to{opacity:1;translate:0 0}}
@keyframes rvR{from{opacity:0;translate:70px 0}to{opacity:1;translate:0 0}}
@keyframes zoomIn{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes wipe{from{clip-path:inset(0 -10% 100% -10%);translate:0 .3em}to{clip-path:inset(-20% -10% -25% -10%);translate:0 0}}
@keyframes mkS{from{background-size:0% .3em}to{background-size:100% .3em}}
@keyframes drawp{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes spin{to{rotate:360deg}}
@keyframes spinR{to{rotate:-360deg}}
@keyframes rotS{from{rotate:-50deg}to{rotate:50deg}}
@keyframes spotIn{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
@keyframes par{from{translate:0 -50px}to{translate:0 50px}}
@keyframes bandX{from{background-position-x:0}to{background-position-x:-720px}}
@keyframes bandXR{from{background-position-x:-720px}to{background-position-x:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(247,162,59,.5)}50%{box-shadow:0 0 0 10px rgba(247,162,59,0)}}
@keyframes segOn{from{background-size:0% 100%}to{background-size:100% 100%}}
@supports (animation-timeline: view()){
.rv{animation:rv linear both;animation-timeline:view(block 0px 100px);animation-range:entry 0% entry 100%}
.rv1{animation:rv linear both;animation-timeline:view(block 0px 100px);animation-range:entry 25% entry 100%}
.rv2{animation:rv linear both;animation-timeline:view(block 0px 100px);animation-range:entry 50% entry 100%}
.rvL{animation:rvL linear both;animation-timeline:view(block 0px 100px);animation-range:entry 0% entry 100%}
.rvR{animation:rvR linear both;animation-timeline:view(block 0px 100px);animation-range:entry 10% entry 100%}
.zm{animation:zoomIn linear both;animation-timeline:view(block 0px 100px);animation-range:entry 0% entry 100%}
.wp{animation:wipe linear both;animation-timeline:view(block 0px 80px);animation-range:entry 10% entry 100%}
.mk{animation:mkS linear both;animation-timeline:view(block 0px 140px);animation-range:entry 60% entry 100%}
.drawU{stroke-dasharray:1;animation:drawp linear both;animation-timeline:view(block 0px 100px);animation-range:entry 0% entry 100%}
@media (max-height: 2000px){
.rotS{animation:rotS linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.spotIn{animation:spotIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.bandS{animation:bandX linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.bandSR{animation:bandXR linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.seg{animation:segOn linear both;animation-range:entry 40% contain 100%}
}
}
@media (max-width: 900px){.hide-m{display:none !important}.scr{padding:76px 0 80px}}
@media (max-width: 700px){.h2{font-size:clamp(34px,10vw,44px)}.wrap{padding:0 20px}.boatR{left:auto;right:12px;width:200px;top:38px}.ftr{flex-wrap:wrap;padding:20px;gap:6px 20px}.ftr .sp{display:none}.bn{border-width:16px}.bnG{border-width:14px}}