*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f5f7fb;
color:#222;
}

.visually-hidden{
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.site-header{
position:sticky;
top:0;
background:white;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 10px rgba(0,0,0,.08);
z-index:100;
}

.logo{
font-size:28px;
font-weight:700;
color:#4f46e5;
text-decoration:none;
}

.site-nav{
display:flex;
align-items:center;
}

.site-nav a{
text-decoration:none;
margin-left:30px;
color:#555;
font-weight:500;
transition:.3s;
}

.site-nav a:hover{
color:#4f46e5;
}

.site-nav .nav-link.active,
.site-nav .nav-link[aria-current="page"]{
color:#4f46e5;
font-weight:600;
text-decoration-line:underline;
text-decoration-thickness:2px;
text-underline-offset:6px;
}

.site-nav a:focus-visible,
.logo:focus-visible,
.nav-toggle:focus-visible,
.category-toggle:focus-visible{
outline:3px solid #818cf8;
outline-offset:4px;
border-radius:6px;
}

.nav-toggle,
.category-toggle{
border:0;
background:transparent;
color:#333;
cursor:pointer;
}

.nav-toggle{
display:none;
width:44px;
height:44px;
padding:10px;
align-items:center;
justify-content:center;
border-radius:10px;
}

.nav-toggle svg{
width:24px;
height:24px;
}

.nav-toggle .close-icon{
display:none;
}

.site-header.nav-open .nav-toggle .menu-icon{
display:none;
}

.site-header.nav-open .nav-toggle .close-icon{
display:block;
}

.nav-dropdown{
position:relative;
display:block;
margin-left:30px;
}

.dropdown-label-row{
display:inline-flex;
align-items:center;
}

.nav-dropdown .dropdown-trigger{
margin-left:0;
}

.category-toggle{
width:36px;
height:36px;
padding:9px;
margin-left:2px;
display:none;
align-items:center;
justify-content:center;
border-radius:8px;
}

.js .category-toggle{
display:inline-flex;
}

.nav-toggle:hover,
.category-toggle:hover{
background:#eef2ff;
color:#4f46e5;
}

.category-toggle svg{
width:16px;
height:16px;
transition:transform .2s ease;
}

.nav-dropdown.open .category-toggle svg{
transform:rotate(180deg);
}

.mega-menu{
position:absolute;
top:calc(100% + 20px);
left:50%;
transform:translateX(-50%) translateY(8px);
background:white;
border-radius:16px;
box-shadow:0 20px 45px rgba(17,24,39,.14);
padding:16px;
display:grid;
grid-template-columns:repeat(3,150px);
gap:6px;
opacity:0;
visibility:hidden;
transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index:200;
}

.nav-dropdown.open .mega-menu,
.nav-dropdown:hover .mega-menu,
html:not(.js) .nav-dropdown:focus-within .mega-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

.mega-item{
display:flex !important;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:10px;
text-decoration:none;
color:#333 !important;
font-size:14px;
font-weight:500;
margin-left:0 !important;
transition:background .2s ease;
}

.mega-item:hover{
background:#f5f7fb;
color:#4f46e5 !important;
}

.mega-item.active-cat,
.mega-item[aria-current="page"]{
background:#eef2ff;
color:#4f46e5 !important;
}

.mega-icon{
width:30px;
height:30px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.mega-icon svg{
width:16px;
height:16px;
}

.hero{
padding:80px 8%;
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
flex-wrap:wrap;
}

.hero-text{
flex:1 1 440px;
min-width:0;
}

.hero-text h1{
font-size:52px;
line-height:1.2;
margin-bottom:20px;
}

.hero-text p{
font-size:18px;
color:#666;
margin-bottom:30px;
}

button{
padding:15px 35px;
border:none;
background:#4f46e5;
color:white;
font-size:16px;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#3730a3;
}

.hero-image{
flex:1 1 560px;
max-width:700px;
min-width:0;
}

.hero-image img{
display:block;
width:100%;
height:auto;
aspect-ratio:14 / 9;
object-fit:cover;
border-radius:20px;
}

.search{
padding:30px 8%;
}

.search-label{
display:block;
margin-bottom:10px;
color:#303544;
font-size:15px;
font-weight:600;
}

.search-row{
display:flex;
align-items:stretch;
gap:12px;
}

.search input{
width:100%;
padding:18px;
border-radius:12px;
border:1px solid transparent;
font-size:16px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.search input:focus-visible{
outline:3px solid #818cf8;
outline-offset:2px;
border-color:#4f46e5;
}

.search-button{
flex:0 0 auto;
padding:14px 28px;
}

.search-status{
min-height:24px;
margin-top:12px;
color:#626879;
font-size:14px;
}

.search-noscript{
margin:-16px 8% 28px;
padding:12px 16px;
border-left:4px solid #4f46e5;
background:#eef2ff;
color:#373d4c;
}

.search-results{
padding:0 8% 42px;
}

.search-results-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:18px;
list-style:none;
}

.search-result-item{
min-width:0;
}

.search-result-link{
height:100%;
padding:22px;
display:flex;
flex-direction:column;
gap:9px;
border:1px solid #e4e7ee;
border-radius:16px;
background:white;
box-shadow:0 6px 18px rgba(17,24,39,.06);
color:#222;
text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease;
}

.search-result-link:hover{
transform:translateY(-3px);
box-shadow:0 12px 26px rgba(17,24,39,.1);
}

.search-result-link:focus-visible{
outline:3px solid #818cf8;
outline-offset:3px;
}

.search-result-category{
color:#4f46e5;
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
}

.search-result-title{
font-size:18px;
line-height:1.35;
}

.search-result-excerpt{
color:#626879;
font-size:14px;
line-height:1.6;
}

.cat-card[hidden],
.search-results[hidden]{
display:none !important;
}

.section-title{
padding:0 8%;
margin-top:30px;
font-size:32px;
margin-bottom:20px;
}

.blogs{
padding:0 8% 70px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.article-card{
min-width:0;
height:100%;
}

.card{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
height:100%;
}

.card:hover{
transform:translateY(-8px);
}

.card:focus-visible{
outline:3px solid #818cf8;
outline-offset:4px;
}

.card-image{
width:100%;
height:auto;
aspect-ratio:9 / 5;
object-fit:cover;
background:#eef2ff;
}

.content{
padding:25px;
display:flex;
flex:1;
flex-direction:column;
}

.tag{
display:inline-block;
padding:6px 12px;
background:#eef2ff;
color:#4f46e5;
border-radius:50px;
font-size:14px;
margin-bottom:15px;
}

.article-card .tag{
align-self:flex-start;
width:fit-content;
padding:5px 10px;
border:1px solid #dfe3ff;
border-radius:8px;
background:#f5f6ff;
font-size:12px;
font-weight:700;
letter-spacing:.035em;
line-height:1.3;
text-transform:uppercase;
}

.content h3{
margin-bottom:15px;
}

.content p{
color:#666;
margin-bottom:20px;
}

.read{
text-decoration:none;
color:#4f46e5;
font-weight:600;
margin-top:auto;
}

.categories-section{
padding:50px 8% 70px;
}

.categories-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:20px;
gap:20px;
flex-wrap:wrap;
}

.categories-header p{
color:#767c8a;
font-size:15px;
max-width:420px;
}

.view-all-link{
display:inline-block;
margin-bottom:20px;
color:#4f46e5;
font-weight:600;
text-decoration:none;
}

.categories{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:20px;
}

.cat-card{
background:white;
border-radius:18px;
padding:26px 24px;
display:flex;
flex-direction:column;
gap:18px;
box-shadow:0 6px 18px rgba(17,24,39,.06);
cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease;
border:1px solid #edeef3;
text-decoration:none;
color:inherit;
}

.cat-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 30px rgba(17,24,39,.1);
}

.cat-icon{
width:50px;
height:50px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.cat-icon svg{
width:24px;
height:24px;
}

.cat-info h3{
font-size:16px;
font-weight:600;
color:#1f2430;
margin-bottom:4px;
}

.cat-info p{
font-size:13px;
color:#8a8f9c;
}

.page-banner{
padding:60px 8% 40px;
text-align:center;
}

.page-banner h1{
font-size:42px;
margin-bottom:14px;
}

.page-banner p{
color:#666;
font-size:17px;
max-width:520px;
margin:0 auto;
}

.cat-banner{
padding:60px 8% 40px;
text-align:center;
}

.cat-banner-icon{
width:64px;
height:64px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
}

.cat-banner-icon svg{
width:30px;
height:30px;
}

.cat-banner h1{
font-size:38px;
margin-bottom:10px;
}

.cat-banner p{
color:#666;
font-size:16px;
}

.breadcrumb{
padding:20px 8% 0;
font-size:14px;
color:#8a8f9c;
}

.breadcrumb a{
color:#4f46e5;
text-decoration:none;
}

.empty-state{
padding:60px 8%;
text-align:center;
color:#8a8f9c;
}

.post-page{
padding:50px 24px 70px;
max-width:920px;
margin:0 auto;
}

.post-page .post-hero-img{
width:100%;
height:auto;
aspect-ratio:9 / 5;
object-fit:cover;
border-radius:20px;
margin-bottom:30px;
background:#eef2ff;
}

.post-page h1{
font-size:38px;
margin-bottom:16px;
line-height:1.25;
}

.post-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
color:#8a8f9c;
font-size:14px;
margin-bottom:30px;
}

.post-meta .author-avatar{
width:38px;
height:38px;
border-radius:50%;
object-fit:cover;
}

.post-body{
font-size:17px;
line-height:1.85;
color:#333;
max-width:70ch;
margin:0 auto;
overflow-wrap:anywhere;
}

.post-body h2{
margin:46px 0 16px;
font-size:26px;
line-height:1.3;
}

.post-body h3{
margin:36px 0 14px;
font-size:21px;
line-height:1.35;
}

.post-body h4{
margin:30px 0 12px;
font-size:18px;
line-height:1.4;
}

.post-body p{
margin-bottom:20px;
}

.post-body img{
width:100%;
height:auto;
border-radius:16px;
margin:26px 0;
}

.post-body figure{
margin:30px 0;
}

.post-body figcaption{
margin-top:8px;
color:#6b7280;
font-size:14px;
line-height:1.5;
text-align:center;
}

.post-body a{
color:#4f46e5;
text-decoration-thickness:1px;
text-underline-offset:3px;
}

.post-body ul,
.post-body ol{
margin:0 0 24px 26px;
}

.post-body li{
margin-bottom:8px;
padding-left:4px;
}

.post-body blockquote{
margin:30px 0;
padding:18px 22px;
border-left:4px solid #4f46e5;
border-radius:0 12px 12px 0;
background:#eef2ff;
color:#373d4c;
}

.post-body blockquote > :last-child{
margin-bottom:0;
}

.post-body pre{
max-width:100%;
margin:28px 0;
padding:20px;
overflow-x:auto;
border-radius:14px;
background:#111827;
color:#f9fafb;
font-size:14px;
line-height:1.65;
tab-size:2;
}

.post-body code{
padding:.15em .4em;
border-radius:5px;
background:#eef2ff;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:.9em;
}

.post-body pre code{
padding:0;
background:transparent;
color:inherit;
font-size:inherit;
}

.post-body table{
display:block;
width:max-content;
max-width:100%;
margin:28px 0;
overflow-x:auto;
border-collapse:collapse;
font-size:15px;
}

.post-body th,
.post-body td{
padding:12px 14px;
border:1px solid #dfe3eb;
text-align:left;
vertical-align:top;
}

.post-body th{
background:#eef2ff;
font-weight:600;
}

.post-video{
position:relative;
width:100%;
margin:38px 0;
overflow:hidden;
border-radius:16px;
background:#111827;
aspect-ratio:16 / 9;
}

.post-video iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}

.author-box{
margin-top:50px;
padding:26px;
background:white;
border-radius:18px;
display:flex;
gap:18px;
align-items:center;
box-shadow:0 6px 18px rgba(17,24,39,.06);
}

.author-box img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
flex-shrink:0;
}

.author-box h4{
margin-bottom:4px;
}

.author-box p{
color:#666;
font-size:14px;
}

.related-articles{
margin-top:56px;
padding-top:38px;
border-top:1px solid #dfe3eb;
}

.related-articles-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:24px;
}

.related-articles-eyebrow{
margin-bottom:5px;
color:#4f46e5;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}

.related-articles-header h2{
font-size:27px;
line-height:1.3;
}

.related-articles-header a,
.post-category-return a{
color:#4f46e5;
font-weight:600;
text-decoration:none;
}

.related-articles-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.related-articles-grid .content{
padding:18px;
}

.related-articles-grid .tag{
font-size:12px;
margin-bottom:10px;
}

.related-articles-grid .content h3{
font-size:17px;
line-height:1.4;
}

.related-articles-grid .content p{
font-size:14px;
line-height:1.6;
}

.post-category-return{
margin-top:46px;
padding-top:28px;
border-top:1px solid #dfe3eb;
}

.not-found{
max-width:1180px;
min-height:calc(100vh - 250px);
margin:0 auto;
padding:90px 8% 80px;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
align-items:center;
gap:70px;
}

.not-found-code{
margin-bottom:10px;
color:#4f46e5;
font-size:18px;
font-weight:800;
letter-spacing:.16em;
}

.not-found-copy h1{
max-width:620px;
margin-bottom:18px;
font-size:clamp(40px,6vw,68px);
line-height:1.05;
letter-spacing:-.035em;
}

.not-found-copy > p:not(.not-found-code){
max-width:580px;
color:#626879;
font-size:17px;
line-height:1.75;
}

.not-found-actions{
margin-top:30px;
display:flex;
flex-wrap:wrap;
gap:12px;
}

.not-found-actions a{
min-height:46px;
padding:12px 18px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid #d7daE4;
border-radius:10px;
background:white;
color:#303544;
font-weight:600;
text-decoration:none;
}

.not-found-actions .not-found-primary{
border-color:#4f46e5;
background:#4f46e5;
color:white;
}

.not-found-actions a:hover{
border-color:#4f46e5;
color:#4f46e5;
}

.not-found-actions .not-found-primary:hover{
background:#3730a3;
color:white;
}

.not-found-actions a:focus-visible,
.not-found-recent a:focus-visible{
outline:3px solid #818cf8;
outline-offset:4px;
}

.not-found-recent{
padding:30px;
border:1px solid #e2e5ed;
border-radius:22px;
background:white;
box-shadow:0 16px 40px rgba(17,24,39,.08);
}

.not-found-recent-heading{
margin-bottom:18px;
}

.not-found-recent-heading p{
margin-bottom:3px;
color:#4f46e5;
font-size:12px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}

.not-found-recent-heading h2{
font-size:25px;
}

.not-found-recent ul{
list-style:none;
}

.not-found-recent li + li{
border-top:1px solid #e8eaf0;
}

.not-found-recent a{
padding:17px 3px;
display:grid;
gap:5px;
color:#252936;
text-decoration:none;
}

.not-found-recent a > span:first-child{
color:#626879;
font-size:12px;
font-weight:700;
letter-spacing:.035em;
text-transform:uppercase;
}

.not-found-recent strong{
font-size:16px;
line-height:1.45;
}

.not-found-read{
color:#4f46e5;
font-size:13px;
font-weight:600;
}

.newsletter{
margin:80px 8%;
background:#4f46e5;
padding:60px;
border-radius:25px;
text-align:center;
color:white;
}

.newsletter h2{
margin-bottom:20px;
}

.newsletter input{
padding:18px;
width:350px;
max-width:90%;
border:none;
border-radius:10px;
margin-top:20px;
margin-right:10px;
}

.newsletter button{
background:white;
color:#4f46e5;
margin-top:20px;
}

footer{
background:#111827;
color:white;
padding:30px;
text-align:center;
margin-top:70px;
}

.footer-links,
.footer-socials{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:12px 22px;
margin-bottom:18px;
}

.footer-links a,
.footer-socials a{
color:#e5e7eb;
text-decoration:none;
}

.footer-links a:hover,
.footer-socials a:hover{
color:#ffffff;
text-decoration:underline;
text-underline-offset:4px;
}

.footer-links a:focus-visible,
.footer-socials a:focus-visible{
outline:3px solid #a5b4fc;
outline-offset:4px;
border-radius:3px;
}

.footer-socials{
padding-top:18px;
border-top:1px solid #374151;
}

.newsletter-status{
margin-top:20px;
font-weight:600;
}

@media(max-width:768px){

.site-header{
padding:14px 5%;
flex-wrap:wrap;
}

.logo{
font-size:23px;
}

.js .nav-toggle{
display:flex;
}

.site-nav{
order:3;
width:100%;
margin-top:14px;
padding-top:10px;
border-top:1px solid #e5e7eb;
display:flex;
flex-direction:column;
align-items:stretch;
}

.js .site-nav{
display:none;
}

.js .site-nav.open{
display:flex;
}

.site-nav .nav-link{
display:flex;
align-items:center;
min-height:48px;
padding:10px 6px;
margin-left:0;
}

.site-nav .nav-link.active,
.site-nav .nav-link[aria-current="page"]{
font-weight:600;
}

.nav-dropdown{
margin-left:0;
}

.dropdown-label-row{
display:flex;
align-items:center;
justify-content:space-between;
}

.dropdown-label-row .dropdown-trigger{
flex:1;
}

.category-toggle{
width:44px;
height:44px;
margin-left:8px;
}

.mega-menu{
position:static;
grid-template-columns:repeat(2,minmax(0,1fr));
width:100%;
padding:8px 0 12px;
box-shadow:none;
border-radius:0;
transform:none;
display:none;
opacity:1;
visibility:visible;
transition:none;
}

.nav-dropdown:hover .mega-menu{
display:none;
transform:none;
}

.nav-dropdown.open .mega-menu,
html:not(.js) .nav-dropdown .mega-menu,
html:not(.js) .nav-dropdown:hover .mega-menu,
html:not(.js) .nav-dropdown:focus-within .mega-menu{
display:grid;
transform:none;
}

.mega-item{
min-height:48px;
padding:9px;
}

.search-row{
flex-direction:column;
}

.search-button{
width:100%;
}

.hero{
flex-direction:column;
}

.hero-text,
.hero-image{
flex-basis:auto;
width:100%;
}

.hero-text h1{
font-size:38px;
}

.page-banner h1,
.cat-banner h1{
font-size:28px;
}

.post-page{
padding:36px 20px 56px;
}

.post-page h1{
font-size:32px;
}

.post-body{
font-size:16px;
line-height:1.75;
}

.post-body h2{
font-size:24px;
}

.related-articles-header{
align-items:flex-start;
flex-direction:column;
}

.related-articles-grid{
grid-template-columns:1fr;
}

.not-found{
min-height:0;
padding:60px 5% 64px;
grid-template-columns:1fr;
gap:42px;
}

}

@media(max-width:480px){

.mega-menu{
grid-template-columns:1fr;
}

.post-page{
padding-right:16px;
padding-left:16px;
}

.post-page h1{
font-size:28px;
}

.post-meta{
gap:9px;
}

.author-box{
align-items:flex-start;
}

.not-found-actions{
flex-direction:column;
}

.not-found-actions a{
width:100%;
}

.not-found-recent{
padding:24px 20px;
}

}

@media(prefers-reduced-motion:reduce){

.site-nav a,
.category-toggle svg,
.mega-menu,
.search-result-link,
.card{
transition:none;
}

}