:root{
--bgc:#1a1a1a;
--bg2:#242424;
--bg3:#2e2e2e;
--bg4:#383838;
--cl1:#e8eaed;
--cl2:#9aa0a6;
--cl3:#5f6368;
--ac1:#f05533;
--ac2:#fbbc04;
--ac3:#a855f7;
--green:#34a853;
--blue:#4285f4;
--br1:16px;
--br2:24px;
--br3:32px;
--gap:28px;
--max:1200px;
--bt1:1.5px;
--fz1:1.3rem;
--fz2:1.2rem;
--fz3:1rem;
--fz4:0.9rem;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Nunito','Google Sans',sans-serif;
background:var(--bgc);
color:var(--cl1);
-webkit-font-smoothing:antialiased;
}
/* Nav */
.top-nav{
padding:16px 48px;
display:flex;
align-items:center;
justify-content:space-between;
max-width:var(--max);
margin:0 auto;
font-size:var(--fz3);
}
.nav-logo{
height:40px;
width:auto;
display:block;
}
.nav-signin{
font-size:var(--fz2);
font-weight:600;
color:var(--blue);
text-decoration:none;
padding:10px 24px;
border-radius:var(--br3);
border:var(--bt1) solid var(--blue);
}
.nav-signin:hover{
background:var(--blue);
color:#fff;
}
/* Hero */
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
gap:64px;
padding:60px 48px 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:22px;
letter-spacing:-.02em;
}
.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 Cards */
.hero-preview{
flex:1;
max-width:460px;
}
.preview-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.preview-card{
border-radius:12px;
overflow:hidden;
background:var(--bg2);
}
.card-image{
position:relative;
}
.card-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
aspect-ratio:1;
}
.card-note{
padding:14px;
}
.card-note-title{
font-size:var(--fz4);
font-weight:700;
margin-bottom:6px;
}
.card-note-body{
font-size:.75rem;
color:var(--cl2);
line-height:1.5;
}
/* YouTube Preview Card */
.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:5px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:.6rem;
}
.card-yt-info{
padding:8px 10px;
}
.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:6px;
background:rgba(0,0,0,.65);
backdrop-filter:blur(6px);
border-radius:20px;
padding:5px 10px;
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 */
.hero-cta{
font-size:var(--fz2);
padding:18px 44px;
}
/* Highlights */
.highlights{
padding:100px 48px;
text-align:center;
max-width:var(--max);
margin:0 auto;
}
.highlights h2,
.ai-section h2{
font-size:clamp(2rem,5vw,2.8rem);
font-weight:800;
line-height:1.2;
margin-bottom:18px;
letter-spacing:-.02em;
}
.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,1fr);
gap:32px;
}
.highlight-card{
background:var(--bg2);
border-radius:var(--br2);
padding:40px 32px 36px;
text-align:center;
}
.highlight-card h3{
font-size:var(--fz1);
font-weight:700;
margin-bottom:10px;
}
.highlight-card p{
color:var(--cl2);
font-size:var(--fz3);
line-height:1.6;
}
/* Highlight Visuals */
.highlight-visual{
height:170px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:28px;
}
/* Mini App Window */
.mini-app-window{
display:flex;
width:100%;
height:100%;
background:var(--bg3);
border-radius:12px;
overflow:hidden;
}
.mini-sidebar{
width:48px;
background:var(--bg4);
padding:14px 0;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.mini-sb-icon{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
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:14px;
}
.mini-search{
font-size:.7rem;
color:var(--cl3);
background:var(--bg4);
border-radius:8px;
padding:7px 12px;
margin-bottom:12px;
text-align:left;
}
.mini-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}
.mini-tile{
background:var(--bg4);
border-radius:6px;
height:40px;
}
.mini-tile.tall{
height:56px;
}
/* Folder Demo */
.folder-demo{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
width:100%;
}
.demo-folder{
display:flex;
align-items:center;
gap:9px;
background:var(--bg3);
border-radius:10px;
padding:13px 16px;
font-size:var(--fz4);
font-weight:600;
color:var(--cl2);
}
.folder-color{
width:14px;
height:14px;
border-radius:4px;
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 */
.collab-demo{
text-align:center;
}
.collab-avatars{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:16px;
}
.collab-av{
width:50px;
height:50px;
border-radius:50%;
}
.av1{background:var(--blue);}
.av2{background:var(--ac3);}
.av-add{
background:var(--bg3);
border:var(--bt1) dashed var(--cl3);
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 */
.ai-section{
padding:100px 48px;
text-align:center;
max-width:var(--max);
margin:0 auto;
}
.ai-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.ai-card{
background:var(--bg2);
border-radius:var(--br2);
padding:40px 32px 36px;
text-align:center;
border:var(--bt1) solid var(--bg3);
}
.ai-card-icon{
width:56px;
height:56px;
background:rgba(168,85,247,.1);
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 22px;
}
.ai-card-icon svg{
width:28px;
height:28px;
stroke:var(--ac3);
}
.ai-card h3{
font-size:var(--fz1);
font-weight:700;
margin-bottom:10px;
}
.ai-card p{
color:var(--cl2);
font-size:var(--fz3);
line-height:1.6;
}
/* Features */
.features{
padding:100px 48px;
max-width:var(--max);
margin:0 auto;
}
.features-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--gap);
}
.feature{
background:var(--bg2);
border-radius:var(--br2);
padding:38px 34px;
}
.feature-icon{
width:56px;
height:56px;
background:var(--bg3);
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
}
.feature-icon svg{
width:28px;
height:28px;
stroke:var(--ac1);
}
.feature h3{
font-size:var(--fz1);
margin-bottom:10px;
font-weight:700;
}
.feature p{
color:var(--cl2);
line-height:1.6;
font-size:var(--fz3);
}
/* CTA */
.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:18px;
font-weight:800;
letter-spacing:-.02em;
}
.final-cta p{
color:var(--cl2);
font-size:var(--fz2);
margin-bottom:38px;
}
.cta-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 40px;
background:var(--ac2);
color:#1a1a1a;
text-decoration:none;
border-radius:var(--br3);
font-size:var(--fz2);
font-weight:700;
}
.cta-btn:hover{
background:#ffc930;
}
.cta-btn svg{
width:22px;
height:22px;
}
/* Footer */
footer{
padding:36px 48px;
text-align:center;
color:var(--cl3);
font-size:var(--fz4);
max-width:var(--max);
margin:0 auto;
}
.footer-links{
display:flex;
justify-content:center;
gap:24px;
margin-bottom:16px;
}
.footer-links a{
color:var(--cl2);
text-decoration:none;
font-size:var(--fz4);
}
.footer-links a:hover{
color:var(--cl1);
}
.footer-copy{
color:var(--cl3);
}
/* Mobile */
@media(max-width:960px){
.top-nav{
padding:12px 24px;
}
.hero{
flex-direction:column;
text-align:center;
gap:48px;
padding:48px 24px 60px;
}
.hero-content{
max-width:100%;
}
.tagline{
margin-left:auto;
margin-right:auto;
}
.hero-preview{
max-width:400px;
width:100%;
}
.highlight-cards,
.ai-cards{
grid-template-columns:1fr;
gap:20px;
max-width:460px;
margin:0 auto;
}
.features-grid{
grid-template-columns:1fr;
max-width:460px;
margin:0 auto;
}
.highlights,
.ai-section,
.features,
.final-cta{
padding:80px 24px;
}
}
@media(max-width:600px){
.top-nav{
padding:12px 16px;
}
.nav-logo{
height:28px;
}
.nav-signin{
font-size:var(--fz4);
padding:8px 16px;
}
.hero{
padding:32px 16px 48px;
}
.preview-cards{
grid-template-columns:repeat(2,1fr);
gap:8px;
}
.highlights,
.ai-section,
.features,
.final-cta{
padding:60px 16px;
}
.footer-links{
flex-wrap:wrap;
gap:16px;
}
footer{
padding:24px 16px;
}
}