.searchbar{display:flex;align-items:center;background-color:#fff;border-radius:30px;padding:0 16px;width:100%;max-width:600px;height:40px;box-shadow:0 2px 6px #0000001a}.searchbar__input{flex:1;border:none;outline:none;font-style:italic;font-size:16px;padding:0 12px;background:transparent;height:100%;line-height:40px}.searchbar__button{background-color:#5fc8d5;border:none;border-radius:60%;padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}@media (max-width: 768px){.searchbar{max-width:100%;width:100%;margin:0 auto}.searchbar__input{font-size:16px}}.chatbox{flex:1;display:flex;flex-direction:column;color:#fff;padding:2rem;overflow:hidden}.chatbox__overlay{position:fixed;top:50%;left:50%;width:90vw;height:90vh;background-color:#fff;z-index:9999;transform:translate(-50%,-50%);display:flex;flex-direction:column;border-radius:20px;box-shadow:0 10px 30px #00000026;overflow:hidden}.chatbox__backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#0003;z-index:9998}.chatbox__close{position:absolute;top:16px;right:16px;background:none;color:#000;font-size:1.5rem;border:none;cursor:pointer;z-index:10000}.chatbox__messages{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:1rem;margin-bottom:1rem;align-items:center}.chatbox__message{margin:.5rem 0;line-height:1.5;font-size:16px;padding:10px 14px}.chatbox__message--user{align-self:flex-end;background:#5fc8d5;padding:8px 12px;border-radius:10px;width:100%;max-width:90%}.chatbox__message--otto{align-self:flex-start;background:#333;padding:8px 12px;border-radius:10px;width:100%;max-width:90%}.chatbox__input{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;border-top:1px solid #eee;background:#fff;position:sticky;bottom:0;left:0}.chatbox__input input{flex:1;padding:.75rem 1rem;border-radius:20px;border:1px solid #ccc;outline:none;font-size:16px;min-width:0}.chatbox__input button{background:#5fc8d5;border:none;color:#fff;padding:.75rem 1rem;border-radius:20px;font-size:16px;cursor:pointer;min-width:64px;white-space:nowrap}@media (max-width: 768px){.chatbox__input{flex-direction:row;padding:.75rem}.chatbox__input input{font-size:16px;padding:.75rem}.chatbox__input button{padding:.75rem 1rem;font-size:16px}}.header{background-color:#000;color:#fff;padding:1.25rem 0;overflow-x:hidden}.header__container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.header__top{display:flex;justify-content:space-between;align-items:center}.header__search{flex:1;margin:0 1rem;display:flex;justify-content:center}.header__menu{display:flex;justify-content:flex-end;gap:1rem}.header__logo a{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.25rem;letter-spacing:.5px}.header__logo img{width:50px}.header__nav a:hover{opacity:.75}.header__auth{display:flex;gap:.75rem}.header__profile{display:flex;gap:.75rem;align-items:center}.header__hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;z-index:1001}.header__hamburger-line{width:24px;height:2px;background-color:#fff;border-radius:1px}.button{font-size:.85rem;font-weight:500;padding:.4rem 1rem;border-radius:999px;cursor:pointer;transition:all .2s ease}.button--outline{background:transparent;border:1px solid rgb(125,180,193);color:#80dce6}.button--filled{background:#7db4c1;color:#fff;border:none}.button--outline:hover,.button--filled:hover{background-color:#7db4c126;opacity:.85}@media (max-width: 768px){.header__menu{display:none;flex-direction:column;width:100%;padding:1rem 0;gap:1rem;background-color:#000}.header__menu--open{display:flex}.header__auth,.header__profile{flex-direction:column;gap:.75rem;padding:0 1rem}.header__hamburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}.header__hamburger-line{width:24px;height:2px;background-color:#fff;border-radius:1px}.header__container{flex-direction:column;align-items:stretch;gap:1rem}.header__top{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 1rem}.header__logo{display:flex;align-items:center}}.footer{background-color:#fff;color:#000;padding:2rem 1.5rem;border-top:1px solid #ccc;font-size:.9rem}.footer__top{display:flex;justify-content:center;margin-bottom:1.5rem}.footer__logo{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;color:#000;font-size:1.125rem;margin-bottom:1.5rem}.footer__logo img{width:40px;height:auto;filter:brightness(0) saturate(100%)}.footer__logo svg{fill:#000}.footer__bottom{display:flex;flex-direction:column;align-items:center;gap:.75rem;border-top:1px solid #ddd;padding-top:1rem}.footer__legal,.footer__social{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.footer__legal a,.footer__social a{text-decoration:none;color:#666}.footer__social span{color:#999}.modal{display:none;position:fixed;background-color:#0000004d;top:0;bottom:0;left:0;right:0;justify-content:center;align-items:center;visibility:hidden;z-index:4}.modal_opened{display:flex;visibility:visible}.modal__content{background-color:#fff;position:relative;padding:40px 32px 36px;max-width:496px;width:100%;box-sizing:border-box;border-radius:20px}.modal__close{background-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.7023%201.70711C16.0929%201.31658%2016.0929%200.683417%2015.7023%200.292893C15.3118%20-0.0976311%2014.6787%20-0.0976311%2014.2881%200.292893L7.99805%206.58298L1.70796%200.292893C1.31744%20-0.0976311%200.684274%20-0.0976311%200.29375%200.292893C-0.096775%200.683417%20-0.096775%201.31658%200.29375%201.70711L6.58383%207.99719L0.292893%2014.2881C-0.0976311%2014.6787%20-0.0976311%2015.3118%200.292893%2015.7023C0.683417%2016.0929%201.31658%2016.0929%201.70711%2015.7023L7.99805%209.4114L14.289%2015.7023C14.6795%2016.0929%2015.3127%2016.0929%2015.7032%2015.7023C16.0937%2015.3118%2016.0937%2014.6787%2015.7032%2014.2881L9.41226%207.99719L15.7023%201.70711Z'%20fill='black'%20fill-opacity='0.3'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:contain;background-position:center;background-color:transparent;width:18px;height:18px;position:absolute;top:25px;right:20px;border:none;cursor:pointer}.modal__close:hover{background-color:transparent;filter:none;opacity:1}.modal__form{display:flex;flex-direction:column;gap:24px}.modal__title{margin:0 0 32px;font-size:24px;font-weight:600;color:#000}.modal__label{display:flex;flex-direction:column;font-size:16px;color:#333;border-bottom:1px solid black}.modal__label_type_radio{margin-bottom:8px;border:none}.modal__input{display:block;border:none;margin-top:8px;padding:0}.modal__input:focus{outline:none}.modal__legend{margin-bottom:12px;color:#000}.modal__radio-buttons{border:none;padding:0;display:flex;flex-direction:column;color:gray}.modal__radio-buttons:active{color:#000}.modal__submit{width:100%;height:40px;background-color:#000;color:#fff;border:none;border-radius:6px;margin-top:16px;font-size:14px;cursor:pointer}.modal__secondary-button{color:gray;display:flex;align-items:center;gap:5px;font-size:16px;position:absolute;bottom:47px;left:150px}@media (max-width: 768px){.modal__content{max-width:80%}}.modal__submit{margin-top:0;width:86px}.modal__login{all:unset}.cta{background-color:#000;color:#7db4c1;text-align:center}.cta__image{width:100%;height:400px;display:block;object-fit:cover;object-position:center 30%}.cta__content{display:flex;justify-content:center;align-items:center;gap:2rem;padding:5rem 2rem;flex-wrap:wrap}.cta__text h2{font-size:2.5rem;font-weight:700;margin:0}.cta__text em{font-style:italic;font-weight:400;letter-spacing:.13em}.cta__arrow-wrap{display:flex;align-items:center;position:relative;width:140px;height:3px;background-color:#7db4c1;margin:0 1rem}.cta__arrow-wrap:after{content:"→";position:absolute;right:-1rem;top:-1.1rem;font-size:2rem;color:#7db4c1}.cta__button{background-color:#7db4c1;color:#fff;border:none;padding:1rem 2rem;height:100px;width:250px;font-size:2rem;font-weight:500;border-radius:999px;cursor:pointer;transition:background .3s ease}.how{background-color:#000;color:#fff;padding:4rem 2rem}.how__title{font-size:2.5rem;text-align:center;margin-bottom:1rem}.how__subtitle{text-align:center;font-size:1.5rem;color:#ccc;margin-bottom:3rem}.how__steps{display:flex;flex-direction:column;gap:3rem}.how__step{display:flex;flex-direction:row;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap}.how__step--reverse{flex-direction:row-reverse}.how__image{width:700px;height:400px;object-fit:cover;border-radius:1rem}.how__text{max-width:320px}.how__text h3{font-size:2rem;margin-bottom:1.5rem;font-weight:800}.how__text p{color:#ccc;font-size:1.125rem;margin-bottom:1.5rem}.how__buttons{display:flex;gap:1rem}button.primary{background-color:#7db4c1;color:#fff;padding:.5rem 1rem;cursor:pointer;font-weight:500;width:115px}button.secondary{background:transparent;color:#fff;border-radius:999px;cursor:pointer}.hero{background-color:#000;align-items:center;padding:4rem 2rem;width:100%;box-sizing:border-box}.hero__title{text-align:center;color:#fff;font-size:2.5rem;margin-bottom:2rem}.hero__content{display:flex;justify-content:center;align-items:center}.hero__image-wrapper{position:relative;width:100%;max-width:900px;border-radius:2rem;overflow:hidden;border:none}.hero__image{width:100%;height:auto;display:block;background-color:#000}.hero__image-accent,.hero__image-accent-rotated{position:absolute;width:100px;height:auto;z-index:2}.hero__image-accent{top:0;left:-1px;width:400px}.hero__image-accent-text{position:absolute;top:1rem;left:2rem;max-width:300px;font-size:1.125rem;line-height:1.5;color:#fff;z-index:3}.hero__image-accent-rotated{bottom:0;right:0;width:400px;transform:rotate(180deg)}.hero__image-accent-text-rotated{position:absolute;bottom:1.25rem;right:1.5rem;max-width:300px;font-size:1.125rem;color:#fff;text-align:right;z-index:3}@media screen and (max-width: 600px){.hero{padding:2rem 1rem}.hero__image-accent,.hero__image-accent-rotated,.hero__image-accent-text,.hero__image-accent-text-rotated{display:none}}.onboarding__logo{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1.25rem;letter-spacing:.5px;margin:2rem auto 1rem}.onboarding__logo img{width:50px}.onboarding__welcome{font-size:45px;justify-content:center;align-items:center;text-align:center;width:100%;margin-bottom:40px;font-weight:900}.onboarding__step{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:80vh;padding:2rem;text-align:left;width:100%;max-width:700px;margin:0 auto}.onboarding__title{font-size:1.8rem;font-weight:400;text-align:center;margin-bottom:20px}.onboarding__subtext{font-size:1.1rem;text-align:center;opacity:.8;margin-top:-1rem;margin-bottom:20px}.onboarding__checkbox-group{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;width:max-content;align-self:center;text-align:left}.onboarding__checkbox-label{font-size:1.1rem;display:flex;align-items:center;gap:.5rem;cursor:pointer}input[type=checkbox]{width:20px;height:20px;accent-color:black}.onboarding__progress-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;margin-bottom:4rem}.onboarding__dot{width:10px;height:10px;background:gray;border-radius:50%;transition:all .2s ease}.onboarding__dot--active{background:#fff;transform:scale(1.3)}.onboarding__nav-buttons{display:flex;justify-content:space-between;width:90vw;max-width:500px;margin:2rem auto 0;padding:0 1rem;position:relative;left:0;right:0}.onboarding__nav-wrapper{position:relative;width:100%;max-width:500px;height:60px;margin:2rem auto 0}.onboarding__nav-button{background-color:#fff;color:#000;border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center;font-size:1.5rem;border:none;cursor:pointer;transition:transform .2s ease;position:absolute;top:0}.onboarding__nav-button--left{left:0}.onboarding__nav-button--right{right:0}.onboarding__nav-button:hover{transform:scale(1.1)}.onboarding__nav-button:disabled{opacity:.3;cursor:not-allowed}.onboarding__submit-container{margin-top:2rem;display:flex;justify-content:center;width:100%;max-width:500px;margin-left:auto;margin-right:auto}.onboarding__submit-button{background-color:#fff;color:#000;padding:.75rem 2rem;border:none;border-radius:24px;font-size:1rem;cursor:pointer;transition:background .2s ease}.onboarding__submit-button:hover{background-color:#ddd}.onboarding__submit-button-wrapper{display:flex;justify-content:center;align-items:center;width:100%;margin-top:2rem;position:relative}@media (max-width: 768px){.onboarding__welcome{font-size:32px;line-height:1.2;margin-bottom:30px}.onboarding__checkbox-label{font-size:1.3rem}input[type=checkbox]{width:26px;height:26px;accent-color:black}}.preloader{position:fixed;top:0;left:0;height:100dvh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:999;background-color:#000}.circle-preloader{display:block;width:50px;height:50px;border:4px solid #fff;border-bottom-color:#888;border-radius:50%;animation:spin 1.5s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}.preloader__text{margin-top:20px;font-size:1rem;color:#fff}.main{background-color:#000;color:#fff;padding:2rem;text-align:center}.main h1{font-size:3rem;font-weight:800;margin-bottom:2rem;color:#fff;letter-spacing:1px;line-height:1.2}.surf-edit{max-width:900px;margin:0 auto;border-radius:2rem;overflow:hidden;position:relative;box-shadow:0 4px 12px #00000080}.surf-edit__preview{position:relative;cursor:pointer}.surf-edit__thumbnail{width:100%;display:block;object-fit:cover}.surf-edit__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;font-size:1.5rem;font-weight:600}.surf-edit__play{margin-top:1rem;font-size:2.2rem;background:none;border:2px solid white;border-radius:50%;width:60px;height:60px;color:#fff;cursor:pointer}.surf-edit__iframe{width:100%;height:500px;border:none;display:block}@media (max-width: 768px){.main{padding:2rem 1rem}.main h1{font-size:2rem;line-height:1.3;margin-bottom:1.5rem}.surf-edit{border-radius:1rem;box-shadow:0 2px 6px #0006}.surf-edit__overlay{font-size:1.1rem;padding:1rem;text-align:center}.surf-edit__play{width:50px;height:50px;font-size:1.5rem}.surf-edit__iframe{height:200px}}.surf-spot{background-color:#232931;min-height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat;padding:40px 20px}.surf-spot__title{color:#fff;font-size:2rem;font-weight:700;margin-bottom:30px}.surf-spot__grid{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:0}@media (max-width: 786px){.surf-spot__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:0;margin:0}.surf-spot__title{font-size:2rem;text-align:center}.surf-spot{padding:40px 20px}}.surf-card{width:250px;height:100%;margin:0 auto;background-color:#000;border-radius:10px;overflow:hidden;color:#fff;font-family:Inter,sans-serif;display:flex;flex-direction:column}.surf-card__img{width:100%;height:160px;object-fit:cover;display:block;flex-shrink:0}.surf-card__overlay{flex:1;padding:12px;background-color:#000;display:flex;flex-direction:column;justify-content:space-between}.surf-card__wave{font-size:1.2rem;font-weight:700}.surf-card__match{font-size:.9rem;margin-top:4px}.surf-card__name{font-size:1rem;font-weight:700;margin:10px 0 4px}.surf-card__details{font-size:.75rem;opacity:.85}@media (max-width: 786px){.surf-card{width:100%;max-width:100%}.surf-card__img{height:180px}}.modal__subtitle{color:#000;margin:0;padding:0}@font-face{font-family:Cabinent-Grotesk;font-style:normal;font-weight:900;src:url(/otto-frontend/assets/CabinetGrotesk-Black-DZq1wtpo.otf) format("opentype")}@font-face{font-family:Cabinent-Grotesk;font-style:normal;font-weight:700;src:url(/otto-frontend/assets/CabinetGrotesk-Bold-BAQZSB8G.otf) format("opentype")}@font-face{font-family:Cabinent-Grotesk;font-style:normal;font-weight:500;src:url(/otto-frontend/assets/CabinetGrotesk-Medium-DHJjXo9b.otf) format("opentype")}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#0a0a0a;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;font-family:Cabinent-Grotesk,sans-serif}button{font-family:inherit;font-size:1.1rem;padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;background-color:#1a1a1a;color:#fff}button:hover{background-color:#333}img{max-width:100%;height:auto;display:block}input,select,textarea,label{font-size:16px}