:root{

--primary:#2563eb;
--bg:#f6f8fc;
--text:#1f2937;
--muted:#6b7280;
--card:#ffffff;
--border:#e5e7eb;

}

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

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:var(--bg);
color:var(--text);
line-height:1.7;

}

.container{

max-width:1200px;
margin:auto;
padding:30px 20px;

}

header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;

}

.logo{

font-size:22px;
font-weight:700;
color:var(--primary);

}

nav a{

margin-left:20px;
text-decoration:none;
color:var(--muted);
font-weight:500;

}

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

section{
margin-bottom:26px;
}

/* BLOG TYPOGRAPHY */

h1{
font-size:34px;
margin-bottom:16px;
line-height:1.3;
}

h2{
font-size:24px;
margin-bottom:12px;
margin-top:10px;
}

p{
font-size:16px;
}

/*LINK STYLE*/
a{

color:var(--primary);
text-decoration:none;

}

a:hover{

text-decoration:underline;

}

/* HERO */
.hero{

display:grid;
grid-template-columns:1fr 1fr;

align-items:center;

background:linear-gradient(135deg,#2563eb,#3b82f6);

padding:35px 45px;

border-radius:14px;

margin-bottom:35px;

gap:30px;

color:white;

}

.hero-left h1{

font-size:30px;
margin-bottom:12px;

}

.hero-left p{

opacity:0.9;
margin-bottom:18px;
max-width:420px;

}

.play-btn img{

width:180px;

}

.hero-right{

text-align:right;

}

.hero-right img{

width:100%;
max-width:460px;

border-radius:10px;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

}

/* SCREENSHOTS */

.screenshots{

display:flex;
gap:16px;
overflow-x:auto;

padding:10px 5px 30px;

scroll-snap-type:x mandatory;

}

.screenshots img{

height:380px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);

scroll-snap-align:start;

transition:transform .2s;

}

.screenshots img:hover{

transform:scale(1.04);

}

/* CARD */

.card{

background:var(--card);
padding:28px 30px;
border-radius:16px;
border:1px solid var(--border);
margin-bottom:24px;

}

.card p{

margin-bottom:8px;
line-height:1.75;

}

.card h2{
font-size:22px;
margin-bottom:10px;
}

.card p{
color:var(--muted);
}

.card:not(.highlight){
background:#ffffff;
border:1px solid #e5e7eb;
box-shadow:0 4px 15px rgba(0,0,0,0.04);
}

.card + .card{
margin-top:5px;
}

.card h3{

font-size:16px;
margin-top:18px;
margin-bottom:6px;

color:#111827;
font-weight:600;

}

.card h3:first-of-type{
margin-top:10px;
}

.card h3::before{

content:"•";
color:var(--primary);
margin-right:8px;

}

.highlight{

background:#eef4ff;

}

/* FEATURES */

.features{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-bottom:30px;

}

.feature{

background:white;
border-radius:12px;
padding:22px;
border:1px solid var(--border);
box-shadow:0 6px 20px rgba(0,0,0,0.05);

}

.feature h3{

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

}

/* LIST */

ul{
padding-left:20px;
margin-top:10px;
}

li{
margin-bottom:8px;
}

/* FOOTER */

footer{

margin-top:40px;
padding-top:20px;
border-top:1px solid var(--border);
text-align:center;

}

.footer-links{

margin-bottom:10px;

}

.footer-links a{

margin:0 10px;
text-decoration:none;
color:var(--muted);
font-size:14px;

}

.footer-links a:hover{

color:var(--primary);

}

.footer-copy{

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

}

/* MOBILE */

@media (max-width:900px){

.hero{

flex-direction:column;
text-align:center;

}

.hero-cover img{

width:100%;
max-width:420px;

}

.hero-text{

max-width:100%;

}

.screenshots img{

height:320px;

}

}

@media (max-width:900px){

.hero{

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

}

.hero-right{

text-align:center;

}

.hero-right img{

max-width:320px;
margin-top:10px;

}

}

/* TABLE */

table{

width:100%;
border-collapse:collapse;
margin-top:15px;
margin-bottom:10px;

}

th,td{

padding:12px 14px;
text-align:left;
border-bottom:1px solid var(--border);

}

th{

background:#f3f6fb;
font-weight:600;

}

tr:hover{

background:#f8fafc;

}

.tax-table{

width:100%;
border-collapse:collapse;
margin-top:15px;

}

.tax-table th{

background:#f1f5f9;
padding:12px;
text-align:left;
font-weight:600;

}

.tax-table td{

padding:12px;
border-top:1px solid #e5e7eb;
vertical-align:top;

}

.tax-table tr:nth-child(even){

background:#fafafa;

}

/* BLOG */

.blog-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
margin-top:10px;

}

.blog-item{

background:white;
border-radius:14px;
padding:20px;
border:1px solid var(--border);
box-shadow:0 6px 20px rgba(0,0,0,0.05);

transition:all .2s;

}

.blog-item:hover{

transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,0.08);

}

.blog-item h3{

font-size:18px;
margin-bottom:6px;
color:var(--text);

}

.blog-item p{

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


}
/*breadcrumb*/
.breadcrumb{

font-size:14px;
margin-bottom:15px;
color:var(--muted);

}

.breadcrumb a{

color:var(--primary);

}

.breadcrumb span{

margin:0 6px;

}