/* =========================================================
TASKORA – PREMIUM SAAS STYLE.CSS
========================================================= */

:root{

--bg:#ffffff;
--surface:#f8fafc;
--text:#0b1220;
--muted:#6b7280;

--brand-teal:#15B8A6;
--brand-purple:#6A1B9A;
--brand-yellow:#F4B034;

--card-border:#e5e7eb;
--radius:14px;

--container:1180px;

--shadow-soft:0 6px 24px rgba(0,0,0,.05);
--shadow-hover:0 16px 40px rgba(0,0,0,.08);

}

/* DARK MODE */

:root.dark{

--bg:#0c0e12;
--surface:#11141a;
--text:#e5e9f0;
--muted:#9aa0ac;

--card-border:#2a2e39;

}

/* GLOBAL */

*{
box-sizing:border-box;
}

body{

margin:0;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
background:var(--bg);
color:var(--text);
line-height:1.55;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

.wrap{
max-width:var(--container);
margin:auto;
padding:0 28px;
}

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

.site-header{

position:sticky;
top:0;
z-index:100;
backdrop-filter:blur(10px);
background:rgba(255,255,255,.9);
border-bottom:1px solid var(--card-border);

}

:root.dark .site-header{
background:rgba(12,14,18,.85);
}

.header-inner{

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

}

.brand{

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

}

.brand-logo{

width:38px;

}

.brand-text{

display:flex;
flex-direction:column;
line-height:1.1;

}

.brand-name{

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

}

.brand-tagline{

font-size:12px;
color:var(--muted);

}

/* NAV */

.primary-nav{

display:flex;
gap:26px;

}

.primary-nav a{

font-size:14px;
font-weight:600;
color:var(--muted);
position:relative;

}

.primary-nav a:hover{
color:var(--text);
}

/* CTA */

.header-actions{

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

}

#themeToggle{

width:34px;
height:34px;
border-radius:50%;
border:1px solid var(--card-border);
background:none;
cursor:pointer;

}

/* BUTTONS */

.btn{

padding:11px 20px;
border-radius:10px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:14px;

}

.btn-primary{

background:var(--brand-teal);
color:#fff;

}

.btn-primary:hover{

opacity:.92;

}

.btn-secondary{

border:1px solid var(--card-border);

}

.btn-large{

padding:15px 28px;
font-size:16px;

}

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

.hero{

padding:110px 0 90px;

}

.hero-grid{

display:grid;
grid-template-columns:1fr 420px;
gap:60px;
align-items:center;

}

.eyebrow{

font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:700;

}

.hero-title{

font-size:58px;
font-weight:900;
line-height:1.1;
margin:14px 0;

}

.accent{

background:linear-gradient(90deg,var(--brand-teal),var(--brand-purple));
-webkit-background-clip:text;
color:transparent;

}

.hero-desc{

font-size:18px;
color:var(--muted);
max-width:520px;

}

.hero-cta{

display:flex;
gap:16px;
margin-top:26px;

}

.hero-proof{

margin-top:18px;
font-size:14px;
color:var(--muted);

}

.hero-visual{

display:flex;
justify-content:center;

}

.hero-visual img{

width:320px;

}

/* =========================================================
SECTIONS
========================================================= */

.section{

padding:90px 0;

}

.section-alt{

background:var(--surface);

}

.section-title{

font-size:36px;
font-weight:900;
text-align:center;
margin-bottom:12px;

}

.lead{

text-align:center;
color:var(--muted);
max-width:720px;
margin:auto;

}

/* =========================================================
GRID SYSTEM
========================================================= */

.grid-3{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
margin-top:40px;

}

.grid-4{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:24px;
margin-top:40px;

}

/* =========================================================
CARDS
========================================================= */

.card{

background:var(--surface);
border-radius:var(--radius);
border:1px solid var(--card-border);
padding:28px;
box-shadow:var(--shadow-soft);
transition:all .25s ease;

}

.card:hover{

transform:translateY(-6px);
box-shadow:var(--shadow-hover);

}

.card h3{

margin-top:0;
font-size:20px;

}

.muted{

color:var(--muted);

}

/* =========================================================
CTA STRIP
========================================================= */

.cta-strip{

background:linear-gradient(
90deg,
rgba(21,184,166,.1),
rgba(106,27,154,.1)
);

padding:40px 0;

}

.cta-strip-inner{

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

}

.cta-strip h3{

margin:0;
font-size:22px;

}

/* =========================================================
METRICS
========================================================= */

.metric{

text-align:center;
padding:26px;
background:var(--surface);
border:1px solid var(--card-border);
border-radius:var(--radius);

}

.metric h3{

font-size:38px;
margin:0;
color:var(--brand-teal);

}

.metric p{

margin-top:6px;
color:var(--muted);

}

/* =========================================================
FINAL CTA
========================================================= */

.final-cta{

padding:110px 0;
text-align:center;

}

.final-cta h2{

font-size:36px;
margin-bottom:20px;

}

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

.footer{

background:var(--surface);
border-top:1px solid var(--card-border);
padding:80px 0 40px;

}

.footer-grid{

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

}

.footer-grid h4{

margin-bottom:12px;

}

.footer-grid ul{

list-style:none;
padding:0;
margin:0;

}

.footer-grid li{

margin-bottom:8px;
color:var(--muted);

}

.footer-brand img{

width:48px;
margin-bottom:14px;

}

.footer-bottom{

margin-top:40px;
text-align:center;
font-size:13px;
color:var(--muted);

}

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

@media(max-width:1000px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;

}

.hero-visual{

margin-top:40px;

}

.cta-strip-inner{

flex-direction:column;
gap:16px;

}

}

@media(max-width:700px){

.primary-nav{

display:none;

}

.hero-title{

font-size:40px;

}

.section-title{

font-size:30px;

}

}