:root{
  --abyss:#051820; --deep:#082C38; --sea:#0C4757; --teal:#17788B; --panel:#0A3945;
  --foam:#EAF3F2; --mut:#96B9BF; --dim:#5C858D;
  --aqua:#34E3C9; --aqua2:#63F0DA;
  --line:rgba(234,243,242,.14); --line2:rgba(234,243,242,.28);
  --fd:'Anton',Impact,sans-serif; --ft:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--foam);font-family:var(--ft);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 46px}
@media(max-width:800px){.wrap{padding:0 24px}}
.fd{font-family:var(--fd);font-weight:400;letter-spacing:.01em}
.ey{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--aqua)}

/* intro */
.intro{position:fixed;inset:0;z-index:300;background:var(--abyss);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.intro.lift{transform:translateY(-100%)}
.intro .im{font-family:var(--fd);font-size:clamp(3rem,10vw,8rem);letter-spacing:.14em;color:var(--foam);overflow:hidden}
.intro .im span{display:inline-block;transform:translateY(105%);animation:iup .9s cubic-bezier(.2,.7,.2,1) .1s forwards}
@keyframes iup{to{transform:none}}
.intro .pbar{width:min(220px,40vw);height:2px;background:rgba(234,243,242,.15);margin-top:26px;overflow:hidden}
.intro .pbar i{display:block;height:100%;width:0;background:var(--aqua);animation:pf 1.5s ease forwards}
@keyframes pf{to{width:100%}}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:24px 46px;transition:background .4s,padding .4s}
nav.scr{background:rgba(5,24,32,.86);backdrop-filter:blur(12px);padding:15px 46px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--fd);font-size:26px;letter-spacing:.12em;color:var(--foam)}
.nlinks{display:flex;gap:32px}
.nlinks a{font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,243,242,.76);text-decoration:none;transition:.25s}
.nlinks a:hover{color:var(--aqua)}
.nbtn{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--abyss);text-decoration:none;padding:11px 20px;background:var(--aqua);border-radius:2px;transition:background .25s}
.mag{display:inline-block;will-change:transform}
.nbtn:hover{background:var(--aqua2)}
@media(max-width:860px){.nlinks{display:none}nav{padding:16px 24px}}

/* hero */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:-8% 0;background:#08303c center/cover;background-image:url('img/hero.jpg');will-change:transform}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--abyss),rgba(5,24,32,.25) 45%,rgba(5,24,32,.5))}
.hero-in{position:relative;z-index:2;padding:0 46px 8vh;width:100%}
.hero .ey{margin-bottom:20px;opacity:0;animation:fadeUp .8s ease 1.7s forwards}
.hero h1{font-family:var(--fd);font-size:clamp(3.4rem,13vw,12rem);line-height:.86;letter-spacing:.01em;text-transform:uppercase}
.hero h1 .ln{display:block;overflow:hidden;padding-top:.16em;margin-top:-.16em}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:iup 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .ln:nth-child(1) span{animation-delay:1.75s}
.hero h1 .ln:nth-child(2) span{animation-delay:1.88s;color:var(--aqua)}
.hero .brow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:28px;opacity:0;animation:fadeUp .8s ease 2.1s forwards}
.hero .brow p{font-size:1.08rem;color:rgba(234,243,242,.85);max-width:38ch}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.scue{position:absolute;right:46px;bottom:8vh;z-index:2;font-family:var(--ft);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(234,243,242,.6);writing-mode:vertical-rl;opacity:0;animation:fadeUp .8s ease 2.2s forwards}
@media(max-width:800px){.hero-in{padding:0 24px 12vh}.scue{display:none}}

section{position:relative}
/* reveal */
.rl{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rl.in{opacity:1;transform:none}
.rl2{clip-path:inset(-30% 0 100% 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.rl2.in{clip-path:inset(-30% 0 -12% 0)}

/* manifesto */
.mani{padding:130px 0;border-bottom:1px solid var(--line)}
.mani h2{font-family:var(--fd);font-size:clamp(2.2rem,5.5vw,4.6rem);line-height:1.02;text-transform:uppercase;letter-spacing:.01em;max-width:16ch}
.mani h2 em{font-style:normal;color:var(--aqua)}
.mani .row{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:start;margin-top:20px}
.mani p{color:var(--mut);font-size:1.1rem;max-width:44ch}
@media(max-width:800px){.mani .row{grid-template-columns:1fr;gap:22px}}

/* SIGNATURE dive */
.dive{position:relative;height:420vh;background:var(--abyss)}
.dive-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.dive-bg{position:absolute;inset:0;background:#062430 center/cover;opacity:0;transition:opacity 1.1s ease,transform 5s ease}
.dive-bg.on{opacity:1;transform:scale(1.08)}
.dive-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,24,32,.15),rgba(3,15,22,.9));transition:opacity .3s}
.dive-hd{position:absolute;top:9vh;left:46px;z-index:3}
.dive-hd .ey{color:var(--aqua)}
.dive-hd h2{font-family:var(--fd);font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;color:var(--foam);margin-top:8px}
.dive-depth{position:absolute;top:50%;right:46px;transform:translateY(-50%);z-index:3;text-align:right}
.dive-depth .m{font-family:var(--fd);font-size:clamp(3.4rem,9vw,7rem);line-height:.85;color:var(--foam)}
.dive-depth .m small{font-family:var(--ft);font-weight:500;font-size:.2em;letter-spacing:.1em;color:var(--aqua);display:block}
.dive-txt{position:absolute;left:46px;bottom:11vh;z-index:3;max-width:520px}
.dive-txt .dt{font-family:var(--fd);font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;line-height:1;margin-bottom:12px}
.dive-txt .dt em{font-style:normal;color:var(--aqua)}
.dive-txt p{color:rgba(234,243,242,.86);font-size:1.05rem}
.dive-line{position:absolute;left:46px;right:46px;bottom:6vh;z-index:3;height:1px;background:rgba(234,243,242,.16)}
.dive-line i{display:block;height:2px;margin-top:-.5px;width:0;background:var(--aqua)}
@media(max-width:800px){.dive-hd,.dive-txt,.dive-line{left:24px}.dive-depth{right:24px}.dive-line{right:24px}.dive-txt{bottom:8vh;max-width:80vw}}

/* reel */
.reel{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.reel .bimg{position:absolute;inset:0;background:#062430 center/cover;background-image:url('img/surfer.jpg')}
.reel .bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,24,32,.86),rgba(5,24,32,.3) 60%,rgba(5,24,32,.6))}
.reel .bin{position:relative;z-index:2;padding:90px 46px;max-width:640px}
.reel .ey{margin-bottom:18px}
.reel h2{font-family:var(--fd);font-size:clamp(2rem,4.6vw,3.6rem);text-transform:uppercase;line-height:1;margin-bottom:20px}
.reel h2 em{font-style:normal;color:var(--aqua)}
.reel .cl{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.reel .cl li{font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.reel p{color:rgba(234,243,242,.82);font-size:1.06rem;max-width:44ch}
@media(max-width:800px){.reel .bin{padding:64px 24px}}

/* about */
.about{padding:120px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.about h2{font-family:var(--fd);font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;line-height:1.02}
.about h2 em{font-style:normal;color:var(--aqua)}
.about p{color:var(--mut);font-size:1.08rem;margin-bottom:16px;max-width:46ch}
.about .stats{display:flex;gap:40px;margin-top:8px}
.about .stats .s .v{font-family:var(--fd);font-size:2.6rem;color:var(--aqua);line-height:1}
.about .stats .s .k{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:6px}
@media(max-width:800px){.about .row{grid-template-columns:1fr;gap:30px}}

/* ENDING — full-bleed deep band (distinct footer) */
.end{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:60px 24px}
.end .bimg{position:absolute;inset:0;background:#041018 center/cover;background-image:url('img/deep.jpg')}
.end .bimg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 40%,rgba(4,16,24,.4),rgba(4,16,24,.9))}
.end .ein{position:relative;z-index:2}
.end .ey{color:var(--aqua);margin-bottom:22px;display:block}
.end h2{font-family:var(--fd);font-size:clamp(2.6rem,8vw,6.5rem);text-transform:uppercase;line-height:.94;margin-bottom:26px}
.end h2 em{font-style:normal;color:var(--aqua)}
.end .go{font-family:var(--ft);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--abyss);background:var(--aqua);padding:16px 30px;border-radius:2px;text-decoration:none;display:inline-block}
.end-foot{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:26px 46px;border-top:1px solid var(--line);font-family:var(--ft);font-size:12px;color:var(--mut)}
.end-foot .l{font-family:var(--fd);font-size:20px;letter-spacing:.12em;color:var(--foam)}
.end-foot b{color:var(--foam);font-weight:500}
@media(max-width:800px){.end-foot{padding:20px 24px;font-size:11px;justify-content:center;text-align:center}}

/* --- závěrečný formulář (poptávka projektu) --- */
.end .end-form{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px}
.end .end-form input{font-family:var(--fm,monospace);font-size:12px;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:15px 18px;min-width:min(280px,80vw)}
.end .end-form input::placeholder{color:rgba(255,255,255,.5)}
.end .end-form input:focus{outline:none;border-color:var(--aqua,#34E3C9)}
.end .end-form button{border:0;cursor:pointer}
.end .end-form button:focus-visible{outline:2px solid var(--aqua,#34E3C9);outline-offset:3px}
.end .end-ok{font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--aqua,#34E3C9);margin:0 auto;max-width:44ch}