:root{
--bg-1:#051a31;
--bg-2:#031122;
--bg-3:#020813;
--panel:rgba(8,20,40,0.84);
--panel-border:rgba(255,255,255,0.07);
--grid:rgba(71,133,198,0.10);
--text:#ffffff;
--muted:rgba(255,255,255,0.82);
--soft:rgba(255,255,255,0.62);
--orange:#f45a1f;
--orange-hover:#ff6b32;
--max:1180px;
--article-max:820px;
--shadow:0 20px 50px rgba(0,0,0,0.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:var(--text);
background:
radial-gradient(circle at 12% 4%, rgba(21,90,170,0.24), transparent 26%),
radial-gradient(circle at 100% 0%, rgba(16,70,140,0.20), transparent 30%),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 42%, var(--bg-3) 100%);
min-height:100vh;
overflow-x:hidden;
padding-bottom:72px;
}

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

.page{
width:min(var(--max), calc(100% - 46px));
margin:28px auto;
position:relative;
border-radius:24px;
overflow:hidden;
background:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px),
linear-gradient(180deg, rgba(4,18,35,0.95), rgba(2,10,20,0.97));
background-size:96px 96px, 96px 96px, auto;
box-shadow:0 30px 80px rgba(0,0,0,0.38);
}

.page::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 14% 18%, rgba(94,205,255,0.95) 0 2px, rgba(94,205,255,0.12) 3px, transparent 40px),
radial-gradient(circle at 70% 14%, rgba(94,205,255,0.90) 0 2px, rgba(94,205,255,0.10) 3px, transparent 40px),
radial-gradient(circle at 40% 58%, rgba(94,205,255,0.75) 0 2px, rgba(94,205,255,0.08) 3px, transparent 38px),
radial-gradient(circle at 88% 88%, rgba(94,205,255,0.90) 0 2px, rgba(94,205,255,0.08) 3px, transparent 40px);
z-index:0;
}

.content{
position:relative;
z-index:1;
padding:0 48px 42px;
}

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

.site-header{
min-height:84px;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
position:relative;
z-index:30;
padding:10px 0 4px;
}

.brand{
display:flex;
align-items:center;
flex:1;
}

.header-logo-img{
display:block;
width:140px;
height:auto;
max-width:none;
}

/* =========================
DESKTOP MENU BUTTON
========================= */

.desktop-menu-toggle{
display:inline-flex;
align-items:center;
gap:12px;
padding:10px 16px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.08);
background:rgba(8,20,40,0.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
color:#fff;
cursor:pointer;
font-weight:700;
font-size:0.96rem;
box-shadow:
0 8px 24px rgba(0,0,0,0.18),
0 0 0 1px rgba(84,198,255,0.05);
transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.desktop-menu-toggle:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,0.14);
background:rgba(8,20,40,0.68);
box-shadow:
0 12px 30px rgba(0,0,0,0.24),
0 0 0 1px rgba(84,198,255,0.07),
0 0 18px rgba(84,198,255,0.08);
}

.desktop-menu-label{
line-height:1;
}

.desktop-menu-icon{
font-size:1.18rem;
line-height:1;
transform:translateY(-1px);
}

/* =========================
DESKTOP BACKDROP
========================= */

.menu-backdrop{
position:absolute;
inset:0;
z-index:28;
background:rgba(2,8,18,0.16);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.22s ease, visibility 0.22s ease;
}

.menu-backdrop.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

/* =========================
DESKTOP MENU PANEL
========================= */

.desktop-menu-panel{
position:absolute;
top:104px;
right:48px;
width:min(420px, calc(100% - 96px));
z-index:29;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-12px) scale(0.985);
transition:opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}

.desktop-menu-panel.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0) scale(1);
}

.desktop-menu-inner{
display:flex;
flex-direction:column;
gap:12px;
padding:24px;
background:rgba(8,20,40,0.74);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
box-shadow:
0 18px 44px rgba(0,0,0,0.28),
0 0 0 1px rgba(84,198,255,0.06),
0 0 26px rgba(84,198,255,0.08);
}

.desktop-menu-inner a{
color:#fff;
font-size:1.28rem;
font-weight:800;
line-height:1.25;
padding:6px 0;
transition:opacity 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.desktop-menu-inner a:hover{
opacity:0.96;
transform:translateX(3px);
text-shadow:0 0 10px rgba(255,255,255,0.1);
}

.desktop-menu-cta{
margin-top:10px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 18px !important;
border-radius:12px;
background:var(--orange);
color:#fff !important;
font-size:1rem !important;
font-weight:800 !important;
box-shadow:
0 12px 26px rgba(244,90,31,0.28),
0 0 18px rgba(244,90,31,0.18),
inset 0 1px 0 rgba(255,255,255,0.16);
}

.desktop-menu-cta:hover{
background:var(--orange-hover);
transform:none !important;
opacity:1 !important;
text-shadow:none !important;
}

/* =========================
MOBILE MENU TOGGLE
========================= */

.mobile-menu-toggle{
display:none;
font-size:28px;
line-height:1;
cursor:pointer;
color:#fff;
background:none;
border:none;
padding:6px 8px;
}

/* =========================
MOBILE MENU
========================= */

.mobile-menu{
position:absolute;
top:72px;
left:0;
right:0;
z-index:20;
display:flex;
flex-direction:column;
gap:14px;
padding:18px;
background:rgba(8,20,40,0.85);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.07);
border-radius:14px;
box-shadow:
0 12px 30px rgba(0,0,0,0.28),
0 0 0 1px rgba(84,198,255,0.06),
0 0 22px rgba(84,198,255,0.08);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-8px);
transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, box-shadow 0.22s ease;
}

.mobile-menu.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}

.mobile-menu a{
font-weight:700;
color:#fff;
font-size:1rem;
padding:2px 0;
}

.mobile-menu-cta{
margin-top:4px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 16px !important;
border-radius:12px;
background:var(--orange);
color:#fff !important;
font-weight:800 !important;
box-shadow:0 12px 26px rgba(244,90,31,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* =========================
OPTIONAL HOMEPAGE HERO LOGO
========================= */

.home-hero-logo{
margin:18px 0 10px;
width:100%;
}

.home-hero-logo-img{
display:block;
width:320px;
max-width:100%;
height:auto;
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 26px;
border-radius:10px;
font-size:1rem;
font-weight:800;
border:none;
cursor:pointer;
transition:0.2s ease;
}

.btn-primary{
background:var(--orange);
color:#fff;
box-shadow:0 12px 26px rgba(244,90,31,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}

.btn-primary:hover{
background:var(--orange-hover);
transform:translateY(-1px);
}

.arrow{
margin-left:6px;
transition:transform 0.2s ease;
display:inline-block;
}

.btn:hover .arrow{
transform:translateX(4px);
}

/* =========================
REVEAL ANIMATION
========================= */

.reveal-up{
opacity:0;
transform:translateY(24px);
transition:opacity 0.6s ease, transform 0.6s ease;
}

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

/* =========================
FEATURED ARTICLE
========================= */

.article-feature{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
align-items:center;
max-width:980px;
margin:34px auto;
}

.article-image{
display:flex;
justify-content:center;
align-items:center;
}

.article-image img{
width:100%;
max-width:420px;
height:auto;
border-radius:14px;
display:block;
margin:0 auto;
}

.article-content{
max-width:460px;
}

.article-content .tag{
font-size:0.78rem;
letter-spacing:0.1em;
color:#f45a1f;
margin-bottom:12px;
font-weight:700;
}

.article-content h2{
font-size:clamp(2rem, 3vw, 3rem);
margin:0 0 14px;
line-height:1.15;
}

.article-content p{
color:rgba(255,255,255,0.78);
line-height:1.65;
margin:0 0 18px;
}

/* =========================
ARTICLES PAGE THUMBNAILS
========================= */

.resource-thumb{
height:190px;
overflow:hidden;
background:#081428;
display:flex;
align-items:center;
justify-content:center;
}

.resource-thumb img{
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}

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

.footer-shell{
margin-top:34px;
}

.footer{
position:relative;
padding:34px 30px 22px;
border:1px solid rgba(255,255,255,0.07);
border-radius:18px;
background:linear-gradient(180deg, rgba(8,20,40,0.92), rgba(5,14,28,0.96));
box-shadow:0 18px 40px rgba(0,0,0,0.22);
overflow:hidden;
}

.footer::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size:96px 96px, 96px 96px;
opacity:0.10;
}

.footer > *{
position:relative;
z-index:1;
}

.footer-grid{
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1.25fr;
gap:34px;
align-items:start;
}

.footer-logo-img{
display:block;
width:220px;
max-width:100%;
height:auto;
}

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

.footer-col h4{
margin:0 0 8px;
font-size:0.82rem;
text-transform:uppercase;
letter-spacing:0.10em;
color:rgba(255,255,255,0.56);
}

.footer-col p{
margin:0;
color:rgba(255,255,255,0.78);
font-size:0.95rem;
line-height:1.65;
}

.footer-col a{
color:rgba(255,255,255,0.88);
text-decoration:none;
}

.footer-col a:hover{
color:#ffffff;
}

.footer-tagline{
margin-top:10px;
max-width:260px;
color:rgba(255,255,255,0.66);
font-size:0.95rem;
line-height:1.6;
}

.footer-small{
color:rgba(255,255,255,0.60);
font-size:0.88rem;
}

.newsletter-form{
margin-top:10px;
display:flex;
gap:10px;
}

.newsletter-form input{
flex:1;
min-width:0;
padding:11px 12px;
border-radius:9px;
border:1px solid rgba(255,255,255,0.10);
background:rgba(255,255,255,0.03);
color:#fff;
font-size:0.92rem;
}

.newsletter-form input::placeholder{
color:rgba(255,255,255,0.42);
}

.newsletter-form button{
padding:11px 14px;
border:none;
border-radius:9px;
background:#f45a1f;
color:#fff;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}

.newsletter-form button:hover{
background:#ff6b32;
}

.footer-bottom{
margin-top:26px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,0.06);
text-align:center;
font-size:0.84rem;
color:rgba(255,255,255,0.48);
}

/* =========================
STICKY CTA
========================= */

.sticky-cta{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#f45a1f;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 20px;
z-index:9999;
box-shadow:0 -8px 24px rgba(0,0,0,0.18);
}

.sticky-cta p{
margin:0;
font-size:0.9rem;
font-weight:700;
}

.sticky-cta a{
background:#fff;
color:#000;
padding:8px 14px;
border-radius:6px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
}

/* =========================
ARTICLE BOTTOM BACK LINK
========================= */

.article-bottom-back{
text-align:center;
margin:34px auto 0;
}

.article-bottom-back a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px 20px;
border-radius:10px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
color:#fff;
font-weight:700;
}

.article-bottom-back a:hover{
border-color:rgba(244,90,31,0.25);
color:#fff;
}

/* =========================
TABLET
========================= */

@media (max-width: 980px){
.desktop-menu-toggle{
display:inline-flex;
}

.content{
padding:0 24px 28px;
}

.page{
width:min(var(--max), calc(100% - 18px));
margin:12px auto;
}

.site-header{
min-height:72px;
padding-top:8px;
padding-bottom:2px;
}

.header-logo-img{
width:138px;
height:auto;
}

.desktop-menu-panel{
top:92px;
right:24px;
width:min(400px, calc(100% - 48px));
}

.home-hero-logo{
margin:14px 0 8px;
}

.home-hero-logo-img{
width:250px;
}

.footer-logo-img{
width:180px;
}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:26px;
}

.article-feature{
grid-template-columns:1fr;
gap:22px;
max-width:700px;
}

.article-content{
max-width:none;
}

.article-image img{
max-width:100%;
}
}

@media (max-width: 640px){
.content{
padding:0 18px 24px;
}

.page{
width:calc(100% - 12px);
margin:6px auto;
border-radius:18px;
}

.site-header{
min-height:64px;
padding-top:12px;
padding-bottom:6px;
}

.brand{
padding-top:2px;
}

.header-logo-img{
width:118px;
display:block;
}

.desktop-menu-toggle{
display:none;
}

.mobile-menu-toggle{
display:block;
font-size:28px;
line-height:1;
cursor:pointer;
color:#fff;
background:none;
border:none;
padding:4px 0 4px 8px;
margin-left:12px;
transform:translateY(2px);
}

.mobile-menu{
top:78px;
}

.home-hero-logo{
margin:10px 0 6px;
}

.home-hero-logo-img{
width:180px;
}

.footer-logo-img{
width:150px;
}

.newsletter-form{
flex-direction:column;
}

.footer{
padding:24px 18px 18px;
border-radius:16px;
}

.footer-grid{
grid-template-columns:1fr;
gap:22px;
}

.footer-tagline{
max-width:none;
}

.sticky-cta{
gap:10px;
padding:10px 12px;
}

.sticky-cta p{
font-size:0.82rem;
}

.sticky-cta a{
padding:8px 10px;
font-size:0.85rem;
}

.article-feature{
margin:28px auto 22px;
gap:18px;
}

.hero{
min-height:auto;
padding:14px 0 18px;
}

.hero-copy{
padding-top:6px;
}

h1{
margin:0 0 14px;
}
}