.hero{padding-top:90px;padding-bottom:75px}
.preview-scene{max-width:1240px;margin:0 auto 100px;position:relative;min-height:650px;padding:45px 35px 95px;isolation:isolate;perspective:1800px;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,#0009 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,#0009 85%,transparent 100%)}
.preview-scene:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#10713215,transparent 70%);z-index:-1;pointer-events:none}
.preview-scene .dashboard-section{width:70%;margin:0;padding:0;position:relative;transform:rotateY(9deg) rotateZ(-4deg);transform-origin:0 50%;z-index:1}
.preview-scene .dashboard{border-radius:25px}
.preview-scene .dashboard-layout{grid-template-columns:135px minmax(0,1fr) 230px;min-height:465px}
.preview-scene .dash-sidebar{padding:22px 11px}
.preview-scene .dash-editor{padding:26px 22px}
.preview-scene .dash-preview{padding:24px 14px}
.preview-scene .dash-user{gap:7px;font-size:12px}
.preview-scene .dash-user img{width:29px;height:29px}
.preview-scene .dash-tabs button{padding:11px;font-size:12px}
.preview-scene .editor-footer{flex-wrap:wrap;padding-top:14px}
.preview-scene .compact .bio-content{padding-left:12px;padding-right:12px}
.preview-scene .compact .social-row{gap:12px}
.preview-scene .profiles{position:absolute;top:65px;right:25px;width:40%;padding:0;margin:0;z-index:2;pointer-events:none}
.preview-scene .profile-grid{display:flex;gap:0;perspective:1200px;align-items:flex-start;justify-content:flex-end;animation:none}
.preview-scene .profile-grid .bio-card{width:255px;min-width:255px;margin-left:-155px;transform:rotateY(-12deg) rotateZ(5deg);pointer-events:auto}
.preview-scene .profile-grid .bio-card:first-child{translate:0 0;z-index:1}
.preview-scene .profile-grid .bio-card:nth-child(2){translate:0 55px;z-index:2}
.preview-scene .profile-grid .bio-card:last-child{translate:0 110px;z-index:3}
.preview-scene .profile-grid .bio-card:hover{transform:rotateY(-8deg) rotateZ(3deg) translateY(-5px)}
.preview-scene .profile-grid .bio-content{padding-left:20px;padding-right:20px}
@media(max-width:1050px) and (min-width:801px){.preview-scene{padding-left:25px;padding-right:25px;min-height:620px}.preview-scene .dashboard-section{width:76%}.preview-scene .dashboard-layout{grid-template-columns:115px 1fr 200px}.preview-scene .dash-editor{padding:24px 15px}.preview-scene .profiles{right:10px;width:36%}.preview-scene .profile-grid .bio-card{min-width:225px;width:225px;margin-left:-150px}}
@media(max-width:800px){.hero{padding-top:65px;padding-bottom:50px}.preview-scene{display:flex;flex-direction:column;padding:0;min-height:0;margin:0 auto 65px;perspective:none;mask-image:none;-webkit-mask-image:none}.preview-scene .profiles{position:relative;top:auto;right:auto;width:100%;order:-1;padding:0 28px 35px;pointer-events:auto;margin:0;mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%)}.preview-scene .profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-content:normal}.preview-scene .profile-grid .bio-card{width:auto;min-width:0;margin:0;translate:0 0!important;transform:none!important}.preview-scene .dashboard-section{width:100%;padding:0 24px;margin-top:-15px;transform:none}.preview-scene .dashboard-layout{grid-template-columns:1fr 1fr;min-height:0}.preview-scene .dash-sidebar{padding:14px 20px}.preview-scene .dash-editor{padding:27px 23px;min-height:400px}.preview-scene .dash-preview{padding:25px 16px}.preview-scene .dashboard{box-shadow:0 -20px 70px #0009,0 20px 60px #0003}}
@media(max-width:600px){.hero{padding-top:55px;padding-bottom:40px}.preview-scene .profiles{padding:0 34px 30px}.preview-scene .profile-grid{display:flex;gap:18px;overflow-x:auto;justify-content:flex-start}.preview-scene .profile-grid .bio-card{width:265px;min-width:265px;flex:0 0 265px;margin:0;translate:0 0!important}.preview-scene .dashboard-section{padding:0 20px;margin-top:-15px}.preview-scene .dashboard-layout{grid-template-columns:1fr}.preview-scene .dash-sidebar{padding:14px}.preview-scene .dash-user{font-size:12px}.preview-scene .dash-tabs button{font-size:11px;padding:10px}.preview-scene .dash-editor{padding:26px 24px;min-height:395px}.preview-scene .dash-preview{padding:25px 30px 30px}.preview-scene{margin-bottom:65px}}

.nav .brand,.nav .brand:hover{color:var(--text)}
.nav .brand-dot{color:var(--bright)}
.preview-scene{mask-image:linear-gradient(to bottom,#000 0%,#000 48%,#0009 65%,transparent 88%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,#0009 65%,transparent 88%)}
.preview-scene .dashboard{mask-image:linear-gradient(to bottom,#000 0%,#000 55%,#0008 78%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,#0008 78%,transparent 100%)}
.preview-scene .profile-grid .bio-card{mask-image:linear-gradient(to bottom,#000 0%,#000 48%,#0009 72%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,#0009 72%,transparent 100%)}
@media(max-width:800px){.preview-scene{mask-image:none;-webkit-mask-image:none}.preview-scene .profiles{mask-image:none;-webkit-mask-image:none}.preview-scene .dashboard{mask-image:linear-gradient(to bottom,#000 0%,#000 76%,#0009 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,#0009 88%,transparent 100%)}}

.ambient:before{content:'';position:absolute;inset:0 0 auto;height:850px;background-image:url('/assets/frisk-pattern.png');background-size:cover;background-position:center 38%;opacity:.1;mask-image:linear-gradient(to bottom,#000 0%,#000b 24%,#0004 50%,transparent 82%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000b 24%,#0004 50%,transparent 82%)}
@media(max-width:600px){.ambient:before{height:700px;background-position:center top;opacity:.09;mask-image:linear-gradient(to bottom,#000 0%,#0009 25%,#0003 48%,transparent 78%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#0009 25%,#0003 48%,transparent 78%)}}

.hero h1{font-size:clamp(1.4rem,7.8vw,5rem);letter-spacing:-.055em;white-space:nowrap;line-height:1.15}

@media(max-width:600px){.preview-scene .dashboard-section{display:none}.preview-scene{margin-bottom:40px}}


.nav{--nav-ease:cubic-bezier(.22,.61,.36,1);position:fixed;top:25px;left:50%;transform:translateX(-50%);margin:0;z-index:30;transition:width .5s var(--nav-ease),height .5s var(--nav-ease),top .5s var(--nav-ease),padding .5s var(--nav-ease),border-radius .5s var(--nav-ease);}
.nav-spacer{height:99px}
.nav .brand{flex-shrink:0;width:170px;transition:width .5s var(--nav-ease),gap .5s var(--nav-ease)}
.nav .brand img{flex-shrink:0;transition:width .5s var(--nav-ease),height .5s var(--nav-ease)}
.nav .brand-word,.nav-label{display:inline-block;max-width:200px;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--nav-ease),opacity .3s;vertical-align:middle}
.nav-icon{width:0;height:22px;fill:currentColor;display:block;flex-shrink:0;opacity:0;transform:scale(.75);transition:width .5s var(--nav-ease),opacity .3s,transform .5s var(--nav-ease)}
.nav nav{display:flex;gap:3px;align-items:center;transition:width .5s var(--nav-ease),opacity .35s,transform .5s var(--nav-ease)}
.nav nav a,.nav .login,.nav .button.small{display:flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;height:40px;border-radius:12px;transition:width .5s var(--nav-ease),padding .5s var(--nav-ease),background .2s,color .2s}
.nav nav a{width:90px}
.nav .login{width:60px}
.nav .button.small{width:95px;padding:0}
.nav .nav-actions{gap:13px;flex-shrink:0;transition:gap .5s var(--nav-ease)}
.nav.is-compact{width:340px;height:60px;top:16px;padding:0 10px;border-radius:21px;background:linear-gradient(140deg,#141d17eb,#0b110eee);box-shadow:0 12px 45px #0007,inset 0 1px 0 #ffffff08;}
.nav.is-compact .brand{width:36px;gap:0}
.nav.is-compact .brand img{width:36px;height:36px}
.nav.is-compact .brand-word,.nav.is-compact .nav-label{max-width:0;opacity:0}
.nav.is-compact .nav-actions{gap:3px}
.nav.is-compact .nav-icon{width:22px;opacity:1;transform:scale(1)}
.nav.is-compact nav a,.nav.is-compact .login,.nav.is-compact .button.small{width:43px;padding:0}
.nav.is-compact nav a:hover,.nav.is-compact .login:hover{background:#ffffff09}
@media(max-width:760px){.nav .brand{width:140px}.nav nav a{width:70px}.nav .nav-actions{gap:7px}.nav .login{width:48px}.nav .button.small{width:78px}}
@media(max-width:600px){.nav{top:16px}.nav-spacer{height:81px}.nav .brand{width:140px}.nav nav{display:flex;width:0;opacity:0;transform:scale(.85);overflow:hidden;pointer-events:none}.nav nav a{width:42px}.nav nav .nav-label{max-width:0;opacity:0}.nav nav .nav-icon{width:22px}.nav.is-compact{width:min(340px,calc(100% - 24px));height:57px;top:12px}.nav.is-compact nav{width:132px;opacity:1;transform:scale(1);pointer-events:auto}.nav.is-compact .brand{width:33px}.nav.is-compact .brand img{width:33px;height:33px}.nav.is-compact nav a,.nav.is-compact .login,.nav.is-compact .button.small{width:42px}}

.hero h1{margin-bottom:34px}
.hero h1 .slogan-way{position:relative;display:inline-block}
.slogan-squiggle{position:absolute;left:0;bottom:-.15em;width:100%;height:.2em;overflow:visible;pointer-events:none}
.slogan-squiggle path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:write-squiggle 1.05s cubic-bezier(.4,0,.2,1) .55s forwards}
@keyframes write-squiggle{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.slogan-squiggle path{stroke-dashoffset:0;animation:none}}

.nav .brand img{mix-blend-mode:normal;opacity:1;border-radius:10px;transition:width .5s var(--nav-ease),height .5s var(--nav-ease),scale .5s var(--nav-ease)}
.nav.is-compact .brand img{scale:1.12}

.scroll-reveal{opacity:0;translate:0 8px;transition:none}
.scroll-reveal.is-revealed{opacity:1;translate:0 0;transition:opacity .18s ease-out,translate .22s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;translate:0 0;transition:none}}
.auth-card .auth-legal{font-size:13px;line-height:1.8;color:#82988b;text-align:center;margin:20px 0 0}.auth-legal a{color:#71bf8b;text-decoration:underline;text-underline-offset:3px}
footer>div{flex-wrap:wrap;justify-content:flex-end;gap:18px}footer{gap:25px}
@media(max-width:600px){footer>div{gap:13px;font-size:12px;flex:1;min-width:180px}}
footer{width:100%;max-width:none;margin:0;border:1px solid var(--line);border-bottom:0;border-radius:32px 32px 0 0;background:#ffffff02;padding:30px 32px 35px}
@media(max-width:600px){footer{border-radius:26px 26px 0 0;padding:27px 22px}}
