/* =========================================================
TURING AI OS
Apple × Vercel Inspired Landing Page
Clean + Smooth + Optimized
========================================================= */

/* =========================================================
RESET
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
color:#0a0a0a;

background:
linear-gradient(120deg,#eef4ff,#fdf2f7,#fffaf2);

min-height:100vh;
overflow-x:hidden;

}



/* =========================================================
NAVBAR
========================================================= */

.navbar{

position:fixed;
top:0;
left:0;

width:100%;
z-index:100;

background:rgba(255,255,255,0.65);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(0,0,0,0.04);

transition:all 0.3s ease;

}

.nav-container{

max-width:1300px;
margin:auto;

padding:18px 24px;

display:flex;
align-items:center;
justify-content:space-between;

}

.logo{

display:flex;
align-items:center;
gap:10px;

font-weight:700;
font-size:18px;

}

.logo img{
height:32px;
}

.nav-links{

display:flex;
gap:32px;

}

.nav-links a{

text-decoration:none;
color:#222;

font-weight:500;

position:relative;

}

.nav-links a::after{

content:'';
position:absolute;

width:0%;
height:2px;

left:0;
bottom:-5px;

background:#000;

transition:0.3s;

}

.nav-links a:hover::after{

width:100%;

}



/* =========================================================
HERO
========================================================= */

.hero{

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

padding:160px 20px 120px;

position:relative;

}

.hero-gradient{

position:absolute;
inset:0;

background:

radial-gradient(circle at 20% 30%,#cce1ff,transparent 40%),
radial-gradient(circle at 80% 20%,#ffdce6,transparent 40%),
radial-gradient(circle at 60% 80%,#fff0cc,transparent 40%);

filter:blur(90px);

opacity:0.6;

z-index:-1;

}

.hero-container{

max-width:900px;
margin:auto;

}

.hero-title{

font-size:88px;
font-weight:900;

letter-spacing:-3px;

margin-bottom:12px;

}

.hero-subtitle{

font-size:34px;
font-weight:600;

color:#444;

margin-bottom:30px;

}

.hero-description{

font-size:20px;
color:#555;

line-height:1.7;

max-width:650px;
margin:auto;

}



/* =========================================================
BUTTONS
========================================================= */

.hero-buttons{

margin-top:40px;

display:flex;
justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.btn-primary{

padding:14px 32px;

border-radius:12px;

background:#000;
color:#fff;

text-decoration:none;
font-weight:600;

transition:0.25s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,0.15);

}

.btn-secondary{

padding:14px 30px;

border-radius:12px;

border:1px solid rgba(0,0,0,0.1);

text-decoration:none;

font-weight:600;

color:#000;

background:rgba(255,255,255,0.7);

transition:0.25s;

}

.btn-secondary:hover{

background:#fff;

}



/* =========================================================
SECTION HEADER
========================================================= */

.section-header{

text-align:center;

max-width:800px;
margin:auto;

margin-bottom:70px;

}

.section-header h2{

font-size:46px;
font-weight:800;

margin-bottom:16px;

}

.section-header p{

font-size:18px;
color:#555;

}



/* =========================================================
STATS
========================================================= */

.stats{

padding:50px 20px;

}

.stats-grid{

max-width:900px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

text-align:center;

}

.stat h3{

font-size:40px;
font-weight:800;

margin-bottom:5px;

}

.stat p{

color:#666;

}



/* =========================================================
FEATURES
========================================================= */

.features{

padding:120px 20px;

}

.features-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.feature-card{

padding:30px;

border-radius:18px;

background:rgba(255,255,255,0.7);

border:1px solid rgba(0,0,0,0.05);

transition:0.25s;

}

.feature-card:hover{

transform:translateY(-6px);

box-shadow:0 16px 40px rgba(0,0,0,0.08);

}

.feature-card h3{

font-size:20px;

margin-bottom:8px;

}

.feature-card p{

color:#555;

line-height:1.6;

}
*/


/* =========================================================
SCREENSHOTS
========================================================= */

.screenshots{

padding:120px 20px;

}

.screenshots-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:26px;

}

.shot{

height:220px;

border-radius:16px;

background:

linear-gradient(135deg,#e8efff,#ffeef5);

border:1px solid rgba(0,0,0,0.05);

}



/* =========================================================
ARCHITECTURE
========================================================= */

.architecture{

padding:120px 20px;

}

.architecture-grid{

max-width:1000px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:22px;

}

.arch-card{

padding:26px;

border-radius:16px;

background:rgba(255,255,255,0.75);

border:1px solid rgba(0,0,0,0.04);

transition:0.2s;

}

.arch-card p {
  font-size: 0.875rem; /* smaller than default (14px) */
  line-height: 1.5;    /* makes it airy and readable */
  color: #555;         /* soft dark gray, easier on eyes */
  font-family: 'Inter', 'Roboto', sans-serif; /* clean modern font */
  letter-spacing: 0.5px; /* subtle spacing for elegance */
  margin-top: 10px;    /* keep gap from h4 */
}

.arch-card:hover{

transform:translateY(-4px);

}




/* =========================================================
USE CASES
========================================================= */

.usecases{

padding:120px 20px;

}

.usecases-grid{

max-width:1000px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:30px;

}

.usecase{

padding:28px;

border-radius:16px;

background:rgba(255,255,255,0.75);

border:1px solid rgba(0,0,0,0.05);

}



/* =========================================================
DOWNLOAD
========================================================= */

.download{

padding:120px 20px;

text-align:center;

}

.download-card{

max-width:500px;

margin:auto;

padding:40px;

border-radius:20px;

background:rgba(255,255,255,0.8);

border:1px solid rgba(0,0,0,0.05);

box-shadow:0 20px 50px rgba(0,0,0,0.06);

}

.download-card ul{

list-style:none;

margin:20px 0;

}

.download-card li{

margin-bottom:6px;

color:#555;

}



/* =========================================================
DOCS
========================================================= */

.docs{

padding:120px 20px;

}

.docs-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:28px;

}

.docs-card{

padding:28px;

border-radius:16px;

background:rgba(255,255,255,0.8);

border:1px solid rgba(0,0,0,0.05);

transition:0.25s;

}

.docs-card:hover{

transform:translateY(-6px);

box-shadow:0 16px 40px rgba(0,0,0,0.08);

}



/* =========================================================
ROADMAP
========================================================= */

.roadmap{

padding:120px 20px;

}

.roadmap-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

}

.roadmap-card{

padding:30px;

border-radius:16px;

background:rgba(255,255,255,0.8);

border:1px solid rgba(0,0,0,0.05);

position:relative;

}

.status{

position:absolute;

top:18px;
right:18px;

font-size:12px;

padding:5px 10px;

border-radius:6px;

}

.live{

background:#d1ffd6;

}

.soon{

background:#fff3c4;

}

.planned{

background:#e3e8ff;

}



/* =========================================================
FAQ
========================================================= */

.faq{

padding:120px 20px;

}

.faq-container{

max-width:800px;

margin:auto;

}

.faq-item{

padding:20px;

border-radius:12px;

background:rgba(255,255,255,0.8);

border:1px solid rgba(0,0,0,0.05);

margin-bottom:14px;

cursor:pointer;

transition:0.2s;

}

.faq-item:hover{

background:#fff;

}

.faq-item h3{

font-size:18px;

}

.faq-item p{

margin-top:8px;

color:#555;

display:none;

}

.faq-item.active p{
display:block;
}

.faq-item svg{
transition:0.25s;
}

.faq-item.active svg{
transform:rotate(180deg);
}



/* =========================================================
FOOTER
========================================================= */
/*
.footer{

padding:90px 20px 40px;

border-top:1px solid rgba(0,0,0,0.06);

margin-top:100px;

}

.footer-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

margin-bottom:40px;

}

.footer-brand h3{

font-size:20px;

margin-bottom:6px;

}

.footer-brand p{

color:#666;

}

.footer-column{

display:flex;

flex-direction:column;

gap:10px;

}

.footer-column h4{

margin-bottom:6px;

}

.footer-column a{

text-decoration:none;

color:#555;

}

.footer-column a:hover{

color:#000;

}

.copyright{

text-align:center;

color:#777;

font-size:14px;

}
*/

/* ========================================
FOOTER
======================================== */

.footer{
margin-top:140px;
padding:80px 20px 30px;
border-top:1px solid rgba(0,0,0,0.08);
background:#fafafa;
}

/*
.footer-inner{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
gap:60px;
flex-wrap:wrap;
}*/
.footer-inner{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns: 1fr 2fr;
gap:60px;
align-items:start;
}

.footer-links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.footer-brand h3{
font-size:22px;
margin-bottom:8px;
}

.footer-brand p{
color:#666;
max-width:260px;
}

/*
.footer-links{
display:flex;
gap:60px;
flex-wrap:wrap;
}*/

.footer-column{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-column h4{
font-size:14px;
text-transform:uppercase;
letter-spacing:0.04em;
color:#888;
margin-bottom:10px;
}

.footer-column a{
text-decoration:none;
color:#444;
font-size:14px;
transition:0.2s;
}

.footer-column a:hover{
color:#000;
transform:translateX(3px);
}

.footer-bottom{
max-width:1100px;
margin:50px auto 0;
padding-top:20px;
border-top:1px solid rgba(0,0,0,0.06);
text-align:center;
color:#777;
font-size:14px;
}

.footer-social{
margin-top:16px;
display:flex;
gap:14px;
}

.footer-social a{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:8px;
background:#f2f2f2;
color:#444;
font-size:16px;
transition:0.2s;
text-decoration:none;
}

.footer-social a:hover{
background:#000;
color:#fff;
transform:translateY(-2px);
}



/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

.hero-title{

font-size:60px;

}

.hero-subtitle{

font-size:28px;

}

}

@media(max-width:600px){

.nav-links{

display:none;

}

.hero-title{

font-size:44px;

}

.hero-description{

font-size:16px;

}

.features{

padding:80px 20px;

}

}

/* reveal animation */

.reveal-hidden{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.reveal-visible{
opacity:1;
transform:translateY(0);
}