:root{
--bgc:#1c1c1c;
--bg2:#242424;
--bg3:#2e2e2e;
--bg4:#383838;
--cl1:#e8eaed;
--cl2:#9aa0a6;
--cl3:#5f6368;
--ac1:#f05533;
--ac2:#fbbc04;
--ac3:#a855f7;
--green:#34a853;
--blue:#4285f4;
--br0:calc(var(--br1) * 2);
--br1:16px;
--br2:calc(var(--br1) / 2);
--br3:calc(var(--br1) / 3);
--br4:calc(var(--br1) / 4);
--ch1:188px;
--pw1:calc(var(--ch1) * 2 + var(--gap));
--gap:24px;
--gd2:calc(var(--gap) / 2);
--gd3:calc(var(--gap) / 3);
--gd4:calc(var(--gap) / 4);
--pw4:calc(var(--clip-w,var(--ch1)) * 4 + var(--gap) * 3);
--pw6:calc(var(--clip-w,var(--ch1)) * 6 + var(--gap) * 5);
--pw2:var(--pw6);
--max:1200px;
--bt1:1.5px;
--bs1:0 0 3px rgba(0,0,0,.6);
--fz1:1.3rem;
--fz2:1.2rem;
--fz3:1rem;
--fz4:0.9rem;
--mx:48px;
--mw:calc(100% - var(--mx) * 2);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
overflow-x:hidden;
overflow-x:clip;
}
body{
font-family:'Nunito','Google Sans',sans-serif;
background:var(--bgc);
color:var(--cl1);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
overflow-x:clip;
}
.top-nav{
width:var(--mw);
padding:var(--gap) 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--gap);
max-width:var(--max);
margin:0 auto;
font-size:var(--fz3);
}
.nav-logo-link{
display:block;
line-height:0;
flex:0 0 auto;
}
.nav-logo{
height:56px;
width:auto;
display:block;
}
.nav-signin{
font-size:var(--fz2);
font-weight:600;
color:var(--blue);
text-decoration:none;
padding:var(--gd2) var(--gap);
border:var(--bt1) solid var(--blue);
border-radius:var(--br0);
white-space:nowrap;
flex:0 0 auto;
}
.nav-signin:hover{
background:var(--blue);
color:#fff;
}
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
gap:64px;
width:var(--mw);
padding:60px 0 80px;
max-width:var(--max);
margin:0 auto;
}
.hero-content{
flex:1;
max-width:540px;
}
h1{
font-size:clamp(2.4rem,5.5vw,3.6rem);
font-weight:800;
line-height:1.15;
margin-bottom:var(--gap);
letter-spacing:0;
}
.tagline{
font-size:clamp(1.05rem,2.5vw,1.25rem);
color:var(--cl2);
line-height:1.7;
margin-bottom:42px;
max-width:460px;
}
.hero-preview{
flex:1;
max-width:460px;
}
.preview-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gd2);
}
.preview-card{
border-radius:var(--gd2);
overflow:hidden;
background:var(--bg2);
min-width:0;
}
.card-image{
position:relative;
}
.card-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
aspect-ratio:1;
}
.card-note{
padding:var(--gd2);
}
.card-note-title{
font-size:var(--fz4);
font-weight:700;
margin-bottom:var(--gd4);
}
.card-note-body{
font-size:.75rem;
color:var(--cl2);
line-height:1.5;
}
.card-yt{
display:flex;
flex-direction:column;
}
.card-yt-thumb{
background:var(--bg3);
aspect-ratio:16/9;
display:flex;
align-items:center;
justify-content:center;
}
.card-yt-play{
width:32px;
height:22px;
background:#ff0000;
border-radius:var(--br3);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:.6rem;
}
.card-yt-info{
padding:var(--gd3) var(--gd2);
}
.card-yt-title{
font-size:.7rem;
font-weight:700;
line-height:1.3;
margin-bottom:2px;
}
.card-yt-channel{
font-size:.6rem;
color:var(--cl3);
}
.card-audio-bar{
position:absolute;
bottom:8px;
left:8px;
right:8px;
display:flex;
align-items:center;
gap:var(--gd4);
background:rgba(0,0,0,.65);
backdrop-filter:blur(6px);
border-radius:var(--br1);
padding:var(--gd4) var(--gd2);
font-size:.7rem;
color:var(--cl2);
}
.audio-play{
font-size:.6rem;
color:#fff;
}
.audio-line{
flex:1;
height:2px;
background:var(--cl3);
border-radius:2px;
}
.audio-time{
font-size:.65rem;
color:var(--cl2);
}
.hero-cta{
font-size:var(--fz2);
padding:calc((var(--gd2) + var(--gap)) / 2) 44px;
justify-content:center;
}
.highlights{
padding:100px 48px;
text-align:center;
max-width:var(--max);
margin:0 auto;
}
.highlights h2{
font-size:clamp(2rem,5vw,2.8rem);
font-weight:800;
line-height:1.2;
margin-bottom:calc((var(--gd2) + var(--gap)) / 2);
letter-spacing:0;
}
.ai-section h2{
font-size:clamp(2rem,5vw,2.8rem);
font-weight:800;
line-height:1.2;
margin-bottom:calc((var(--gd2) + var(--gap)) / 2);
letter-spacing:0;
}
.section-sub{
color:var(--cl2);
font-size:var(--fz2);
margin-bottom:64px;
max-width:540px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}
.highlight-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
}
.highlight-card{
background:var(--bg2);
border-radius:var(--br1);
padding:40px 32px 36px;
text-align:center;
min-width:0;
}
.highlight-card h3{
font-size:var(--fz1);
font-weight:700;
margin-bottom:var(--gd2);
}
.highlight-card p{
color:var(--cl2);
font-size:var(--fz3);
line-height:1.6;
}
.highlight-visual{
height:170px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:var(--gap);
}
.mini-app-window{
display:flex;
width:100%;
height:100%;
background:var(--bg3);
border-radius:var(--gd2);
overflow:hidden;
min-width:0;
}
.mini-sidebar{
width:48px;
background:var(--bg4);
padding:var(--gd2) 0;
display:flex;
flex-direction:column;
align-items:center;
gap:var(--gd2);
}
.mini-sb-icon{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--br2);
opacity:.4;
}
.mini-sb-icon.active{
opacity:1;
background:rgba(240,85,51,.15);
}
.mini-sb-icon svg{
width:18px;
height:18px;
stroke:var(--ac1);
}
.mini-content{
flex:1;
padding:var(--gd2);
min-width:0;
}
.mini-search{
font-size:.7rem;
color:var(--cl3);
background:var(--bg4);
border-radius:var(--br2);
padding:var(--gd3) var(--gd2);
margin-bottom:var(--gd2);
text-align:left;
}
.mini-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gd3);
}
.mini-tile{
background:var(--bg4);
border-radius:var(--br3);
height:40px;
}
.mini-tile.tall{
height:56px;
}
.folder-demo{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gd2);
width:100%;
min-width:0;
}
.demo-folder{
display:flex;
align-items:center;
gap:var(--gd2);
background:var(--bg3);
border-radius:var(--gd2);
padding:var(--gd2) var(--br1);
font-size:var(--fz4);
font-weight:600;
color:var(--cl2);
min-width:0;
justify-content:flex-start;
}
.folder-color{
width:14px;
height:14px;
border-radius:var(--br4);
flex-shrink:0;
}
.folder-color.c1{
background:var(--blue);
}
.folder-color.c2{
background:var(--ac1);
}
.folder-color.c3{
background:var(--green);
}
.folder-color.c4{
background:var(--ac3);
}
.collab-demo{
text-align:center;
}
.collab-avatars{
display:flex;
justify-content:center;
gap:var(--gd2);
margin-bottom:var(--br1);
}
.collab-av{
width:50px;
height:50px;
border-radius:50%;
}
.av1{
background:var(--blue);
}
.av2{
background:var(--ac3);
}
.av-add{
background:var(--bg3);
display:flex;
align-items:center;
justify-content:center;
color:var(--cl3);
font-size:var(--fz2);
}
.collab-label{
font-size:var(--fz4);
color:var(--cl3);
}
.ai-section{
padding:100px 48px;
text-align:center;
max-width:var(--max);
margin:0 auto;
}
.ai-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
}
.ai-card{
background:var(--bg2);
border-radius:var(--br1);
padding:40px 32px 36px;
text-align:center;
}
.ai-card-icon{
width:56px;
height:56px;
background:rgba(168,85,247,.1);
border-radius:var(--br1);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto var(--gap);
}
.ai-card-icon svg{
width:28px;
height:28px;
stroke:var(--ac3);
}
.ai-card h3{
font-size:var(--fz1);
font-weight:700;
margin-bottom:var(--gd2);
}
.ai-card p{
color:var(--cl2);
font-size:var(--fz3);
line-height:1.6;
}
.features{
padding:100px 48px;
max-width:var(--max);
margin:0 auto;
}
.features-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gap);
}
.feature{
background:var(--bg2);
border-radius:var(--br1);
padding:38px 34px;
min-width:0;
}
.feature-icon{
width:56px;
height:56px;
background:var(--bg3);
border-radius:var(--br1);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:var(--gap);
}
.feature-icon svg{
width:28px;
height:28px;
stroke:var(--ac1);
}
.feature h3{
font-size:var(--fz1);
margin-bottom:var(--gd2);
font-weight:700;
}
.feature p{
color:var(--cl2);
line-height:1.6;
font-size:var(--fz3);
}
.final-cta{
padding:100px 48px;
text-align:center;
max-width:var(--max);
margin:0 auto;
}
.final-cta h2{
font-size:clamp(2rem,5vw,2.7rem);
margin-bottom:calc((var(--gd2) + var(--gap)) / 2);
font-weight:800;
letter-spacing:0;
}
.final-cta p{
color:var(--cl2);
font-size:var(--fz2);
margin-bottom:38px;
}
.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--gd2);
padding:var(--br1) 40px;
background:var(--ac2);
color:#1a1a1a;
text-decoration:none;
border-radius:var(--br0);
font-size:var(--fz2);
font-weight:700;
white-space:nowrap;
}
.cta-btn:hover{
background:#ffc930;
}
.cta-btn svg{
width:22px;
height:22px;
}
.landing-version{
display:none;
}
.landing-version.is-active{
display:block;
}
.landing-version.is-active > .cx-rows:last-child,
.landing-version.is-active > .cx-featrow:last-child,
.landing-version.is-active > .cx-fw:last-child,
.landing-version.is-active > .cx-bento:last-child,
.landing-version.is-active > .cx-steps:last-child,
.landing-version.is-active > .cx-collage-sec:last-child{
padding-bottom:0;
}
.landing-version.is-active > .cx-hero-tall:last-child{
min-height:auto;
padding-bottom:0;
}
.cx-hero{
width:var(--mw);
max-width:920px;
margin:0 auto;
padding:90px 0 70px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
.cx-hero-tall{
min-height:calc(100vh - 90px);
justify-content:center;
padding-top:40px;
}
.cx-hero-sm{
padding:80px 0 44px;
}
.cx-minimal{
gap:var(--gd4);
}
.cx-giant{
max-width:1100px;
}
.cx-h1{
font-size:clamp(2.6rem,7vw,5rem);
font-weight:800;
line-height:1.03;
letter-spacing:-.01em;
margin-bottom:var(--gap);
align-self:stretch;
}
.cx-huge{
font-size:clamp(3rem,11vw,8rem);
line-height:.95;
letter-spacing:-.02em;
}
.cx-caps{
letter-spacing:.02em;
}
.cx-sub{
font-size:clamp(1.05rem,2.2vw,1.35rem);
color:var(--cl2);
line-height:1.65;
max-width:none;
align-self:stretch;
padding-inline:max(0px,calc((100% - 620px)/2));
margin:0 0 36px;
}
.cx-sub-tight{
max-width:480px;
}
.cx-cta{
font-size:var(--fz2);
padding:calc((var(--gd2) + var(--gap)) / 2) 46px;
}
.cx-chips{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--gd2);
margin-top:36px;
}
.cx-chips span{
background:rgba(255,255,255,.06);
border-radius:var(--br0);
padding:var(--gd3) calc((var(--gd2) + var(--gap)) / 2);
font-size:var(--fz4);
font-weight:700;
color:var(--cl1);
}
.cx-collage{
display:grid;
justify-content:center;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:var(--gap);
margin-top:46px;
width:min(100%,760px);
margin-left:auto;
margin-right:auto;
}
.cx-collage-large{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
width:min(100%,720px);
}
.cx-collage-wide{
grid-template-columns:repeat(6,minmax(0,1fr));
gap:var(--gap);
width:min(100%,840px);
}
.cx-collage-deep{
grid-template-columns:repeat(6,minmax(0,1fr));
gap:var(--gap);
width:min(100%,780px);
}
.cx-collage-tall{
grid-template-columns:repeat(5,minmax(0,1fr));
width:min(100%,760px);
}
.cx-collage-calm{
grid-template-columns:repeat(5,minmax(0,1fr));
width:min(100%,700px);
}
.cx-collage-mini{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gd2);
width:min(100%,390px);
margin-top:0;
}
.cx-collage-micro{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gd2);
width:min(100%,390px);
margin-top:0;
}
.cx-collage > *,
.cx-clip{
width:100%;
aspect-ratio:1;
display:block;
overflow:hidden;
border:0;
border-radius:var(--br1);
}
.cx-collage img{
object-fit:cover;
}
.cx-steps{
width:var(--mw);
max-width:var(--max);
margin:0 auto;
padding:var(--gd2) 0 90px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gap);
}
.cx-step{
background:rgba(255,255,255,.04);
border-radius:var(--br1);
padding:var(--gap);
text-align:left;
}
.cx-step span{
display:block;
color:var(--ac2);
font-size:1.3rem;
font-weight:800;
margin-bottom:var(--gd2);
}
.cx-step strong{
display:block;
font-size:1.3rem;
margin-bottom:var(--gd3);
}
.cx-step p{
color:var(--cl2);
line-height:1.6;
font-size:var(--fz3);
}
.cx-rows{
width:var(--mw);
max-width:760px;
margin:0 auto;
padding-bottom:90px;
display:flex;
flex-direction:column;
gap:var(--gap);
}
.cx-row{
border-radius:var(--br1);
padding:var(--gap);
text-align:left;
}
.cx-row strong{
display:block;
font-size:1.3rem;
margin-bottom:var(--gd3);
}
.cx-row p{
color:var(--cl2);
line-height:1.6;
font-size:var(--fz3);
}
.cx-featrow{
width:var(--mw);
max-width:var(--max);
margin:0 auto;
padding-bottom:90px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
}
.cx-feat{
border-radius:var(--br1);
padding:var(--gap);
text-align:left;
}
.cx-feat strong{
display:block;
font-size:1.1rem;
margin-bottom:var(--gd4);
}
.cx-feat span{
color:var(--cl2);
font-size:var(--fz4);
line-height:1.5;
}
.cx-note{
padding:var(--gd2);
text-align:left;
background:#2a2622;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:var(--gd3);
}
.cx-note2{
background:#23262a;
}
.cx-note3{
background:#1f2b28;
}
.cx-note-t{
font-weight:800;
font-size:.82rem;
line-height:1.12;
}
.cx-note-b{
font-size:.68rem;
color:var(--cl2);
line-height:1.35;
}
.cx-yt{
position:relative;
background:#1a1a1a;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:var(--gd2);
}
.cx-yt-thumb{
position:absolute;
inset:0;
background:linear-gradient(135deg,#3a2530,#222);
display:flex;
align-items:center;
justify-content:center;
}
.cx-yt-play{
width:32px;
height:22px;
background:#f00;
border-radius:var(--br3);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:.62rem;
position:relative;
z-index:1;
}
.cx-yt-t{
position:relative;
z-index:1;
font-size:.68rem;
font-weight:800;
color:#fff;
line-height:1.1;
}
.cx-pdf{
background:#fff;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
padding:var(--gd2);
}
.cx-pdf-tag{
background:#f05533;
color:#fff;
font-size:.6rem;
font-weight:800;
border-radius:var(--br3);
padding:var(--br4) var(--gd3);
}
.cx-pdf-name{
color:#444;
font-size:.7rem;
font-weight:800;
line-height:1.1;
}
.cx-pdf2{
background:#f7efe7;
}
.cx-audio{
background:linear-gradient(135deg,#17362f,#25302e);
display:flex;
flex-direction:column;
justify-content:space-between;
padding:var(--gd2);
text-align:left;
}
.cx-audio-wave{
height:32px;
display:flex;
align-items:flex-end;
gap:var(--gd4);
}
.cx-audio-wave i{
display:block;
width:7px;
border-radius:999px;
background:var(--ac2);
}
.cx-audio-wave i:nth-child(1){
height:14px;
}
.cx-audio-wave i:nth-child(2){
height:27px;
}
.cx-audio-wave i:nth-child(3){
height:20px;
}
.cx-audio-wave i:nth-child(4){
height:31px;
}
.cx-audio b{
font-size:.74rem;
line-height:1.1;
}
.cx-audio span{
font-size:.66rem;
color:var(--cl2);
}
.cx-doc{
background:#f4f0ff;
color:#2b2444;
padding:var(--gd2);
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:left;
}
.cx-doc b{
font-size:.7rem;
color:#5d49d9;
}
.cx-doc span{
font-size:.68rem;
font-weight:800;
line-height:1.1;
}
.cx-doc-lines{
display:grid;
gap:var(--gd4);
}
.cx-doc-lines i{
display:block;
height:5px;
border-radius:999px;
background:rgba(93,73,217,.28);
}
.cx-doc-lines i:nth-child(2){
width:76%;
}
.cx-doc-lines i:nth-child(3){
width:54%;
}
.cx-link{
background:linear-gradient(135deg,#1f2834,#2d2638);
padding:var(--gd2);
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:left;
}
.cx-link span{
align-self:flex-start;
background:rgba(255,255,255,.12);
border-radius:999px;
padding:var(--br4) var(--gd3);
font-size:.56rem;
font-weight:800;
letter-spacing:.04em;
}
.cx-link b{
font-size:.74rem;
line-height:1.1;
}
.cx-link small{
color:var(--cl2);
font-size:.64rem;
}
.cx-split-media .cx-collage{
margin-top:0;
}
.cx-split-media .cx-collage-mini{
max-width:430px;
}
.cx-bento-collage{
padding:0;
background:none;
justify-content:center;
}
.cx-bento-collage .cx-collage{
margin-top:0;
width:100%;
}
.cx-bento-collage .cx-collage > *{
border-radius:var(--br1);
}
.cx-fw{
width:var(--mw);
max-width:var(--max);
margin:0 auto;
padding:40px 0 90px;
}
.cx-fw-head{
text-align:center;
max-width:680px;
margin:0 auto 50px;
}
.cx-fw-head h2{
font-size:clamp(1.9rem,4.5vw,2.8rem);
font-weight:800;
line-height:1.2;
margin-bottom:var(--gd2);
}
.cx-fw-head p{
color:var(--cl2);
font-size:var(--fz2);
line-height:1.6;
}
.cx-fw-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
}
.cx-fw-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.cx-bento{
width:var(--mw);
max-width:var(--max);
margin:0 auto;
padding:0 0 90px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-rows:188px;
grid-auto-flow:dense;
gap:var(--gap);
}
.cx-bento-cell{
background:rgba(255,255,255,.04);
border-radius:var(--br0);
padding:var(--gap);
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
}
.cx-bento-cell.w2{
grid-column:span 2;
}
.cx-bento-cell.h2{
grid-row:span 2;
}
.cx-bento-cell strong{
display:block;
font-size:1.25rem;
margin-bottom:var(--gd3);
}
.cx-bento-cell p{
color:var(--cl2);
font-size:var(--fz3);
line-height:1.55;
}
.cx-bento-ac{
background:linear-gradient(135deg,rgba(240,85,51,.22),rgba(251,188,4,.14));
}
.cx-split-band{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center;
max-width:var(--max);
margin:0 auto;
}
.cx-split-rev .cx-split-copy{
order:2;
}
.cx-split-copy h2{
font-size:clamp(1.9rem,4.5vw,2.7rem);
font-weight:800;
line-height:1.2;
margin-bottom:var(--br1);
text-align:left;
}
.cx-split-copy p{
color:var(--cl2);
font-size:var(--fz2);
line-height:1.65;
text-align:left;
}
.cx-split-hero{
min-height:calc(100vh - 90px);
display:flex;
align-items:center;
}
.cx-split-hero-copy h1{
margin-bottom:var(--gap);
text-align:left;
}
.cx-sub-left{
text-align:left;
margin-left:0;
margin-right:0;
}
.cx-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
max-width:var(--max);
margin:0 auto;
}
.cx-stat{
text-align:center;
}
.cx-stat b{
display:block;
font-size:clamp(2rem,5vw,3.2rem);
font-weight:800;
color:var(--ac2);
line-height:1;
margin-bottom:var(--gd2);
}
.cx-stat span{
color:var(--cl2);
font-size:var(--fz3);
}
.cx-types{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gap);
}
.cx-type{
background:rgba(255,255,255,.04);
border-radius:var(--br1);
padding:var(--gap);
text-align:center;
}
.cx-type-ico{
width:46px;
height:46px;
border-radius:var(--br1);
background:rgba(240,85,51,.12);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto var(--br1);
}
.cx-type-ico svg{
width:24px;
height:24px;
stroke:var(--ac1);
}
.cx-type strong{
display:block;
font-size:1.05rem;
margin-bottom:var(--gd3);
}
.cx-type span{
color:var(--cl2);
font-size:var(--fz4);
line-height:1.5;
}
.cx-marquee{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--gd2);
max-width:1100px;
margin:0 auto;
}
.cx-marquee span{
background:rgba(255,255,255,.06);
border-radius:var(--br0);
padding:var(--gd2) var(--gap);
font-size:var(--fz2);
font-weight:700;
}
.cx-bigrows{
max-width:880px;
margin:0 auto;
display:flex;
flex-direction:column;
}
.cx-bigrow{
display:flex;
gap:var(--gap);
align-items:flex-start;
padding:34px 0;
}
.cx-bigrow:first-child{
padding-top:0;
}
.cx-bigrow-n{
font-size:2.4rem;
font-weight:800;
color:var(--ac2);
line-height:1;
flex:0 0 auto;
width:70px;
}
.cx-bigrow-c h3{
font-size:1.5rem;
font-weight:700;
margin-bottom:var(--gd2);
}
.cx-bigrow-c p{
color:var(--cl2);
font-size:var(--fz2);
line-height:1.6;
}
.cx-collage-sec{
width:var(--mw);
max-width:var(--max);
margin:0 auto;
padding-bottom:90px;
}
.land-foot{
--land-logo-gap:150px;
display:flex;
flex-direction:column;
overflow-x:hidden;
overflow-x:clip;
overflow-y:visible;
}
.land-bottom-mark{
position:relative;
display:block;
width:var(--mw);
max-width:var(--max);
margin:var(--land-logo-gap) auto 0;
line-height:0;
overflow:visible;
pointer-events:none;
-webkit-user-select:none;
user-select:none;
--li:0;
--ls:0;
--bleed:96px;
--bleed2:192px;
--lx:50%;
--ly:50%;
--lpx:50%;
--lpy:50%;
--cx:calc(var(--lpx) + var(--bleed));
--cy:calc(var(--lpy) + var(--bleed));
--rtx:0deg;
--rty:0deg;
--skx:0deg;
--sky:0deg;
}
.land-bottom-logo{
display:block;
pointer-events:none;
-webkit-user-drag:none;
-webkit-user-select:none;
user-select:none;
width:100%;
height:auto;
opacity:.96;
transform-origin:center;
transition:filter .35s ease,transform .4s ease,opacity .35s ease;
}
.land-bottom-mark::after{
content:"";
position:absolute;
inset:calc(0px - var(--bleed));
pointer-events:none;
opacity:0;
transition:opacity .3s ease;
background-position:center;
background-repeat:no-repeat;
background-size:calc(100% - var(--bleed2)) auto;
}
@keyframes cx-glitch{
0%{transform:translateX(0);}
20%{transform:translateX(-3px);}
40%{transform:translateX(3px);}
60%{transform:translateX(-2px);}
80%{transform:translateX(2px);}
100%{transform:translateX(0);}
}
@keyframes cx-squash{
0%,100%{transform:scale(1,1);}
30%{transform:scale(1.12,.88);}
60%{transform:scale(.94,1.08);}
}
@keyframes cx-stretch{
0%,100%{transform:scale(1,1);}
50%{transform:scale(.84,1.18);}
}
body[data-landing-version="1"] .land-bottom-logo{filter:brightness(var(--lb,.55));transform:perspective(900px);transition:transform .1s ease-out,filter .35s ease;}
body[data-landing-version="1"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(900px) rotateX(var(--rty)) rotateY(var(--rtx));}
body[data-landing-version="2"] .land-bottom-logo{filter:brightness(var(--lb,.52));transform:perspective(900px);transition:transform .1s ease-out,filter .28s ease;}
body[data-landing-version="2"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(900px) rotateX(calc(var(--rty)*.45)) rotateY(calc(var(--rtx)*.45)) scale(1.025);}
body[data-landing-version="2"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.25) saturate(1.35) drop-shadow(0 0 12px rgba(240,85,51,.5));-webkit-mask:radial-gradient(circle 170px at var(--cx) var(--cy),#000 0,#000 44%,transparent 100%);mask:radial-gradient(circle 170px at var(--cx) var(--cy),#000 0,#000 44%,transparent 100%);}
body[data-landing-version="2"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.9);}
body[data-landing-version="3"] .land-bottom-logo{filter:brightness(var(--lb,.5));transform:perspective(900px);transition:transform .12s ease-out,filter .35s ease;}
body[data-landing-version="3"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(820px) rotateX(var(--rty)) rotateY(var(--rtx)) scale(1.06);}
body[data-landing-version="4"] .land-bottom-logo{filter:brightness(var(--lb,.5)) saturate(.95);transition:filter .28s ease,transform .1s ease-out;}
body[data-landing-version="4"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*.55)) skewY(calc(var(--sky)*.55));}
body[data-landing-version="4"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.32) drop-shadow(7px 0 0 rgba(255,0,80,.55)) drop-shadow(-7px 0 0 rgba(0,220,255,.55));-webkit-mask:radial-gradient(circle 185px at var(--cx) var(--cy),#000 0,#000 46%,transparent 100%);mask:radial-gradient(circle 185px at var(--cx) var(--cy),#000 0,#000 46%,transparent 100%);}
body[data-landing-version="4"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.85);}
body[data-landing-version="5"] .land-bottom-logo{filter:brightness(var(--lb,.58));transition:filter .26s ease,transform .1s ease-out;}
body[data-landing-version="5"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(900px) rotateX(calc(var(--rty)*.35)) rotateY(calc(var(--rtx)*.35));}
body[data-landing-version="5"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.22) saturate(1.2);transform-origin:var(--cx) var(--cy);-webkit-mask:radial-gradient(circle 135px at var(--cx) var(--cy),#000 0,#000 54%,transparent 100%);mask:radial-gradient(circle 135px at var(--cx) var(--cy),#000 0,#000 54%,transparent 100%);}
body[data-landing-version="5"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.92);}
body[data-landing-version="5"] .land-bottom-mark.is-hot::after{animation:cx-squash .85s ease-in-out infinite;}
body[data-landing-version="6"] .land-bottom-logo{filter:brightness(var(--lb,.55));transform:perspective(950px);transition:transform .12s ease-out,filter .35s ease;}
body[data-landing-version="6"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(950px) rotateX(calc(var(--rty)*-1.05)) rotateY(calc(var(--rtx)*-1.05)) scale(.96);}
body[data-landing-version="7"] .land-bottom-logo{filter:brightness(var(--lb,.5));transition:filter .28s ease,transform .11s ease-out;}
body[data-landing-version="7"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*.35)) skewY(calc(var(--sky)*.2));}
body[data-landing-version="7"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.28) saturate(1.2) drop-shadow(0 0 8px rgba(240,85,51,.35));-webkit-mask:radial-gradient(circle 160px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(circle 160px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="7"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.9);}
body[data-landing-version="8"] .land-bottom-logo{filter:brightness(var(--lb,.52)) contrast(.95);transition:filter .26s ease,transform .1s ease-out;}
body[data-landing-version="8"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(880px) rotateX(calc(var(--rty)*.25)) rotateY(calc(var(--rtx)*.25));}
body[data-landing-version="8"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.25) drop-shadow(3px 0 0 rgba(255,0,80,.45)) drop-shadow(-3px 0 0 rgba(0,220,255,.45));transform-origin:var(--cx) var(--cy);-webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 11px),radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 58%,transparent 100%);-webkit-mask-composite:source-in;mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 11px),radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 58%,transparent 100%);mask-composite:intersect;}
body[data-landing-version="8"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.7);}
body[data-landing-version="8"] .land-bottom-mark.is-hot::after{animation:cx-stretch 1.05s ease-in-out infinite;}
body[data-landing-version="9"] .land-bottom-logo{filter:brightness(var(--lb,.52));transition:filter .26s ease,transform .1s ease-out;}
body[data-landing-version="9"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(860px) rotateX(calc(var(--rty)*.5)) rotateY(calc(var(--rtx)*.5)) scale(1.018);}
body[data-landing-version="9"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.2) saturate(1.45) hue-rotate(8deg) drop-shadow(0 0 10px rgba(240,85,51,.48));-webkit-mask:radial-gradient(circle 115px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(circle 115px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="9"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.9);}
body[data-landing-version="10"] .land-bottom-logo{filter:blur(7px) brightness(.5);}
body[data-landing-version="10"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.1);-webkit-mask:radial-gradient(circle 210px at var(--cx) var(--cy),#000 0,transparent 80%);mask:radial-gradient(circle 210px at var(--cx) var(--cy),#000 0,transparent 80%);}
body[data-landing-version="10"] .land-bottom-mark.is-near::after{opacity:var(--ls);}
body[data-landing-version="11"] .land-bottom-logo{filter:blur(5px) brightness(.45) saturate(.7);}
body[data-landing-version="11"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.5) saturate(1.5) drop-shadow(0 0 10px rgba(240,85,51,.6));-webkit-mask:radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);mask:radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);}
body[data-landing-version="11"] .land-bottom-mark.is-near::after{opacity:var(--ls);}
body[data-landing-version="12"] .land-bottom-logo{filter:brightness(var(--lb,.54)) saturate(.9);transition:filter .3s ease,transform .11s ease-out;}
body[data-landing-version="12"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*.5)) skewY(calc(var(--sky)*.35)) scale(1.02);}
body[data-landing-version="12"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.42) saturate(1.25) drop-shadow(0 0 16px rgba(240,85,51,.5));transform-origin:var(--cx) var(--cy);-webkit-mask:radial-gradient(circle 190px at var(--cx) var(--cy),#000 0,#000 36%,transparent 82%);mask:radial-gradient(circle 190px at var(--cx) var(--cy),#000 0,#000 36%,transparent 82%);}
body[data-landing-version="12"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.82);}
body[data-landing-version="12"] .land-bottom-mark.is-hot::after{animation:cx-squash 1s ease-in-out infinite;}
body[data-landing-version="13"] .land-bottom-logo{filter:brightness(var(--lb,.55));transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .35s ease;}
body[data-landing-version="13"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(var(--skx)) skewY(var(--sky));}
body[data-landing-version="14"] .land-bottom-logo{filter:brightness(var(--lb,.55));transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .35s ease;}
body[data-landing-version="14"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*1.15)) skewY(calc(var(--sky)*1.15));}
body[data-landing-version="15"] .land-bottom-logo{filter:brightness(var(--lb,.55));transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .35s ease;}
body[data-landing-version="15"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(var(--skx)) skewY(var(--sky)) scale(1.05);}
body[data-landing-version="16"] .land-bottom-logo{filter:brightness(var(--lb,.52));transition:transform .12s cubic-bezier(.34,1.56,.64,1),filter .3s ease;}
body[data-landing-version="16"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*1.25)) skewY(calc(var(--sky)*.75)) scale(1.025);}
body[data-landing-version="16"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.25) drop-shadow(5px 0 0 rgba(255,0,80,.5)) drop-shadow(-5px 0 0 rgba(0,220,255,.5));-webkit-mask:radial-gradient(circle 155px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);mask:radial-gradient(circle 155px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);}
body[data-landing-version="16"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.82);}
body[data-landing-version="17"] .land-bottom-logo{filter:brightness(var(--lb,.52));transition:filter .28s ease,transform .12s ease-out;}
body[data-landing-version="17"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(860px) rotateX(calc(var(--rty)*.35)) rotateY(calc(var(--rtx)*.35));}
body[data-landing-version="17"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.22) saturate(1.18) drop-shadow(0 0 10px rgba(240,85,51,.45));-webkit-mask:radial-gradient(circle 135px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);mask:radial-gradient(circle 135px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);}
body[data-landing-version="17"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.84);}
body[data-landing-version="18"] .land-bottom-logo{filter:brightness(var(--lb,.54));transition:filter .28s ease,transform .12s ease-out;}
body[data-landing-version="18"] .land-bottom-mark.is-near .land-bottom-logo{transform:skewX(calc(var(--skx)*.35)) skewY(calc(var(--sky)*.2));}
body[data-landing-version="18"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.24) contrast(1.08) drop-shadow(0 0 12px rgba(240,85,51,.36));-webkit-mask:radial-gradient(ellipse 92px 210px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(ellipse 92px 210px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="18"] .land-bottom-mark.is-near::after{opacity:calc(var(--li)*.8);}
body[data-landing-version="19"] .land-bottom-logo{filter:brightness(.5);}
body[data-landing-version="19"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.35) saturate(1.18);-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 48%,transparent 100%);}
body[data-landing-version="19"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="20"] .land-bottom-logo{filter:brightness(.5);}
body[data-landing-version="20"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.3) saturate(1.45) hue-rotate(8deg) drop-shadow(0 0 8px rgba(240,85,51,.44));-webkit-mask:radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 46%,transparent 100%);mask:radial-gradient(circle 140px at var(--cx) var(--cy),#000 0,#000 46%,transparent 100%);}
body[data-landing-version="20"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="21"] .land-bottom-logo{filter:brightness(.5);}
body[data-landing-version="21"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.25) drop-shadow(5px 0 0 rgba(255,0,80,.7)) drop-shadow(-5px 0 0 rgba(0,220,255,.7));-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="21"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="21"] .land-bottom-mark.is-hot .land-bottom-logo{animation:cx-glitch .45s steps(2) infinite;}
body[data-landing-version="22"] .land-bottom-logo{filter:brightness(.5);}
body[data-landing-version="22"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.2) drop-shadow(9px 0 0 rgba(255,0,80,.65)) drop-shadow(-9px 0 0 rgba(0,220,255,.65));-webkit-mask:radial-gradient(circle 160px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);mask:radial-gradient(circle 160px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);}
body[data-landing-version="22"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="23"] .land-bottom-logo{filter:brightness(.5);}
body[data-landing-version="23"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.35) drop-shadow(6px 0 0 rgba(255,0,80,.75)) drop-shadow(-6px 0 0 rgba(0,220,255,.75));-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="23"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="23"] .land-bottom-mark.is-hot .land-bottom-logo{animation:cx-glitch .3s steps(2) infinite;}
body[data-landing-version="24"] .land-bottom-logo{filter:brightness(.55);}
body[data-landing-version="24"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.15) drop-shadow(4px 0 0 rgba(255,0,80,.6)) drop-shadow(-4px 0 0 rgba(0,210,255,.6));-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);}
body[data-landing-version="24"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="25"] .land-bottom-logo{filter:brightness(.6);}
body[data-landing-version="25"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.1);transform-origin:var(--cx) var(--cy);transition:opacity .1s ease-out;-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);}
body[data-landing-version="25"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="25"] .land-bottom-mark.is-hot::after{animation:cx-squash .75s ease-in-out infinite;}
body[data-landing-version="26"] .land-bottom-logo{filter:brightness(.6);}
body[data-landing-version="26"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.1);transform-origin:var(--cx) var(--cy);transition:opacity .1s ease-out;-webkit-mask:radial-gradient(circle 200px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);mask:radial-gradient(circle 200px at var(--cx) var(--cy),#000 0,#000 55%,transparent 100%);}
body[data-landing-version="26"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="26"] .land-bottom-mark.is-hot::after{animation:cx-stretch .95s ease-in-out infinite;}
body[data-landing-version="27"] .land-bottom-logo{filter:brightness(.6);}
body[data-landing-version="27"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.2);transform-origin:var(--cx) var(--cy);-webkit-mask:radial-gradient(circle 110px at var(--cx) var(--cy),#000 0,#000 58%,transparent 100%);mask:radial-gradient(circle 110px at var(--cx) var(--cy),#000 0,#000 58%,transparent 100%);}
body[data-landing-version="27"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="27"] .land-bottom-mark.is-hot::after{animation:cx-squash 1s ease-in-out infinite;}
body[data-landing-version="28"] .land-bottom-logo{filter:brightness(.55);}
body[data-landing-version="28"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 12px rgba(240,85,51,.55));transform-origin:var(--cx) var(--cy);-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);}
body[data-landing-version="28"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="28"] .land-bottom-mark.is-hot::after{animation:cx-squash 1.4s ease-in-out infinite;}
body[data-landing-version="29"] .land-bottom-logo{filter:brightness(.55);}
body[data-landing-version="29"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.2) drop-shadow(5px 0 0 rgba(255,0,80,.6)) drop-shadow(-5px 0 0 rgba(0,220,255,.6));transform-origin:var(--cx) var(--cy);-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 52%,transparent 100%);}
body[data-landing-version="29"] .land-bottom-mark.is-near::after{opacity:var(--li);}
body[data-landing-version="29"] .land-bottom-mark.is-hot::after{animation:cx-squash 1.2s ease-in-out infinite;}
body[data-landing-version="30"] .land-bottom-logo{filter:blur(5px) brightness(.45);transform:perspective(900px);transition:transform .1s ease-out,filter .35s ease;}
body[data-landing-version="30"] .land-bottom-mark.is-near .land-bottom-logo{transform:perspective(900px) rotateX(var(--rty)) rotateY(var(--rtx));}
body[data-landing-version="30"] .land-bottom-mark::after{background-image:var(--llogo);filter:brightness(1.4) saturate(1.3) drop-shadow(0 0 14px rgba(240,85,51,.55));transform:perspective(900px) rotateX(var(--rty)) rotateY(var(--rtx));-webkit-mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);mask:radial-gradient(circle 150px at var(--cx) var(--cy),#000 0,#000 50%,transparent 100%);}
body[data-landing-version="30"] .land-bottom-mark.is-near::after{opacity:var(--ls);}
@media(hover:none){
body[data-landing-version] .land-bottom-logo{filter:none;opacity:.96;transform:none;animation:none;}
body[data-landing-version] .land-bottom-mark::after{display:none;}
}
.version-flash{
position:fixed;
left:32px;
bottom:28px;
z-index:100;
font-size:clamp(2rem,6vw,4.5rem);
font-weight:800;
line-height:1;
color:#fff;
text-shadow:0 8px 28px rgba(0,0,0,.65);
opacity:0;
transform:translateY(12px);
transition:opacity .18s ease,transform .18s ease;
pointer-events:none;
}
.version-flash.is-visible{
opacity:1;
transform:translateY(0);
}
@media(max-width:960px){
:root{
--mx:24px;
}
.top-nav{
padding:var(--gap) 0;
}
.hero{
flex-direction:column;
text-align:center;
gap:48px;
padding:48px 0 60px;
}
.hero-content{
max-width:100%;
}
.tagline{
margin-left:auto;
margin-right:auto;
}
.hero-preview{
max-width:400px;
width:100%;
}
.highlight-cards{
grid-template-columns:1fr;
gap:var(--gap);
max-width:460px;
margin:0 auto;
}
.ai-cards{
grid-template-columns:1fr;
gap:var(--gap);
max-width:460px;
margin:0 auto;
}
.features-grid{
grid-template-columns:1fr;
max-width:460px;
margin:0 auto;
}
.cx-hero-tall{
min-height:auto;
padding:70px 0;
}
.cx-steps{
grid-template-columns:1fr;
max-width:520px;
}
.cx-featrow{
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:560px;
}
.cx-fw-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.cx-fw-3{
grid-template-columns:1fr;
max-width:520px;
margin:0 auto;
}
.cx-bento{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:170px;
}
.cx-split-band{
grid-template-columns:1fr;
gap:36px;
}
.cx-split-rev .cx-split-copy{
order:0;
}
.cx-split-hero{
min-height:auto;
}
.cx-split-copy h2,
.cx-split-hero-copy h1,
.cx-split-copy p,
.cx-sub-left{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.cx-split-hero-copy{
text-align:center;
}
.cx-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:36px var(--gap);
}
.cx-types{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.highlights{
padding:80px var(--gap);
}
.ai-section{
padding:80px var(--gap);
}
.features{
padding:80px var(--gap);
}
.final-cta{
padding:80px var(--gap);
}
}
@media(max-width:600px){
:root{
--mx:var(--br1);
}
html{
width:100%;
overflow-x:hidden;
}
body{
width:100%;
overflow-x:hidden;
}
.top-nav{
padding:var(--gap) 0;
}
.nav-signin{
font-size:var(--fz4);
padding:var(--gd4) var(--br1);
}
.hero{
display:block;
overflow-x:hidden;
padding:var(--br0) 0 calc(var(--gap) + var(--br1));
}
.hero-content{
width:auto;
max-width:460px;
margin:0 auto calc(var(--gap) + var(--br1));
}
.hero-preview{
width:auto;
max-width:460px;
margin:0 auto;
}
h1{
font-size:2.05rem;
line-height:1.12;
}
.tagline{
font-size:var(--fz3);
max-width:460px;
margin-left:auto;
margin-right:auto;
}
.preview-cards{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gd3);
}
.hero-cta{
width:min(100%,300px);
padding:var(--br1) var(--gap);
}
.highlights{
padding:calc(var(--gap) * 2) var(--br1);
}
.ai-section{
padding:calc(var(--gap) * 2) var(--br1);
}
.features{
padding:calc(var(--gap) * 2) var(--br1);
}
.final-cta{
padding:calc(var(--gap) * 2) var(--br1);
}
.highlight-card{
padding:var(--br0) var(--gap) var(--gap);
}
.ai-card{
padding:var(--br0) var(--gap) var(--gap);
}
.feature{
padding:var(--br0) var(--gap);
}
.cx-hero{
padding:60px 0 40px;
}
.cx-featrow{
grid-template-columns:1fr;
}
.cx-fw{
padding:0 0 60px;
}
.cx-fw-grid{
grid-template-columns:1fr;
max-width:420px;
margin:0 auto;
}
.cx-bento{
grid-template-columns:1fr;
grid-auto-rows:auto;
padding:0 0 60px;
}
.cx-bento-cell{
min-height:150px;
}
.cx-bento-cell.w2{
grid-column:span 1;
}
.cx-bento-cell.h2{
grid-row:span 1;
}
.cx-stats{
grid-template-columns:1fr;
gap:var(--gap);
}
.cx-types{
grid-template-columns:1fr;
max-width:340px;
margin:0 auto;
}
.cx-bigrow{
gap:var(--gap);
}
.cx-bigrow-n{
width:48px;
font-size:1.8rem;
}
.cx-marquee span{
padding:var(--gd3) var(--br1);
font-size:var(--fz3);
}
.cx-collage,
.cx-collage-wide,
.cx-collage-deep,
.cx-collage-dense,
.cx-collage-tall,
.cx-collage-calm{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--gd2);
width:min(100%,430px);
}
.cx-collage-large{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--gd2);
width:min(100%,390px);
}
.version-flash{
left:var(--br1);
bottom:var(--br1);
}
}
@media(max-width:420px){
.top-nav{
width:calc(100% - var(--gap));
gap:var(--gd2);
}
.nav-signin{
font-size:var(--fz4);
padding:var(--gd4) var(--br1);
}
.hero{
padding:var(--gap) 0 calc(var(--gap) + var(--br1));
}
.hero-content{
max-width:380px;
margin-bottom:calc(var(--gap) + var(--gd2));
}
.hero-preview{
max-width:380px;
}
.preview-cards{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--gd4);
}
.preview-card{
border-radius:var(--gd2);
}
.card-note{
padding:var(--br1);
}
.card-note-title{
font-size:var(--fz3);
}
.card-note-body{
font-size:var(--fz4);
line-height:1.55;
}
.card-yt-title{
font-size:var(--fz4);
}
.card-yt-channel{
font-size:.74rem;
}
.hero-cta{
width:auto;
max-width:100%;
padding:var(--gd2) var(--br1);
font-size:var(--fz3);
gap:var(--gd4);
}
.final-cta .cta-btn{
width:auto;
max-width:100%;
padding:var(--gd2) var(--br1);
font-size:var(--fz3);
gap:var(--gd4);
}
.highlight-card{
padding:var(--gap) var(--br1) var(--gap);
}
.highlight-visual{
height:auto;
min-height:150px;
margin-bottom:var(--gap);
}
.mini-app-window{
height:150px;
}
.folder-demo{
grid-template-columns:1fr;
max-width:190px;
margin:0 auto;
}
.demo-folder{
justify-content:flex-start;
padding:var(--gd2) var(--gd2);
}
.collab-avatars{
gap:var(--gd4);
}
.collab-av{
width:46px;
height:46px;
}
.ai-card{
padding:var(--gap) var(--br1) var(--gap);
}
.feature{
padding:var(--gap) var(--br1);
}
.cx-cta{
width:auto;
max-width:100%;
padding:var(--gd2) var(--br1);
font-size:var(--fz3);
}
.cx-collage,
.cx-collage-wide,
.cx-collage-deep,
.cx-collage-dense,
.cx-collage-tall,
.cx-collage-calm{
grid-template-columns:repeat(3,minmax(0,1fr));
width:min(100%,330px);
}
.cx-collage-large{
grid-template-columns:repeat(2,minmax(0,1fr));
width:min(100%,300px);
}
}
@media(max-width:380px){
.top-nav{
flex-direction:column;
align-items:flex-start;
gap:var(--gd3);
padding:var(--gap) 0;
width:calc(100% - var(--br1));
}
.nav-logo-link{
grid-column:1;
}
.nav-signin{
font-size:var(--fz4);
padding:var(--gd4) var(--br1);
margin-top:var(--gd3);
justify-self:center;
align-self:flex-start;
}
.hero{
padding:var(--br1) 0 var(--br0);
}
.hero-content{
max-width:100%;
margin-bottom:var(--br0);
}
.hero-preview{
max-width:100%;
}
h1{
font-size:1.75rem;
line-height:1.1;
margin-bottom:var(--br1);
}
.tagline{
font-size:var(--fz4);
line-height:1.55;
margin-bottom:var(--gap);
}
.hero-cta{
padding:var(--gd2) var(--br1);
font-size:var(--fz4);
gap:var(--gd4);
width:100%;
max-width:260px;
margin:0 auto;
}
.preview-cards{
grid-template-columns:1fr;
max-width:240px;
margin:0 auto;
gap:var(--gd3);
}
.highlights,.ai-section,.features,.final-cta{
padding:calc(var(--gap) + var(--br1)) var(--gd2);
}
.highlight-card,.ai-card{
padding:var(--gap) var(--br1) var(--br1);
}
.feature{
padding:var(--gap) var(--br1);
}
h2{
font-size:1.55rem;
}
}
@media(max-width:320px){
.top-nav{
width:calc(100% - var(--gd2));
gap:var(--gd4);
}
.nav-signin{
font-size:var(--fz4);
padding:var(--gd4) var(--br1);
}
h1{
font-size:1.55rem;
}
.tagline{
font-size:var(--fz4);
}
.hero-cta{
font-size:var(--fz4);
padding:var(--gd2) var(--gd2);
}
.highlights,.ai-section,.features,.final-cta{
padding:calc(var(--gap) + var(--gd2)) var(--gd4);
}
}
.signin-meta-ref{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
opacity:0;
}