:root{
--primary:#1d4ed8;
--accent:#2563eb;
--violet:#1e40af;
--orange:#38bdf8;
--dark:#07162f;
--line:#cfe0f5;
--light:#f6faff;
}

body{
position:relative;
isolation:isolate;
background:
radial-gradient(circle at 12% 12%,rgba(29,78,216,.18),transparent 30%),
radial-gradient(circle at 88% 18%,rgba(59,130,246,.20),transparent 28%),
linear-gradient(180deg,#eff6ff 0%,#ffffff 44%,#eaf3ff 100%) !important;
}

body::before,
body::after{
content:'';
position:fixed;
width:420px;
height:420px;
border-radius:38% 62% 55% 45%;
z-index:0;
pointer-events:none;
opacity:.24;
filter:blur(6px);
animation:floatShape 20s linear infinite;
}

body::before{
left:-120px;
top:18vh;
background:radial-gradient(circle at 30% 30%,rgba(29,78,216,.72),transparent 58%),radial-gradient(circle at 70% 70%,rgba(96,165,250,.52),transparent 56%);
}

body::after{
right:-130px;
bottom:12vh;
background:radial-gradient(circle at 40% 40%,rgba(30,64,175,.46),transparent 58%),radial-gradient(circle at 70% 30%,rgba(14,165,233,.45),transparent 54%);
animation-delay:-6s;
}

@keyframes floatShape{
0%{
transform:translate3d(0,0,0) rotate(0deg) scale(1);
}
50%{
transform:translate3d(42px,-34px,0) rotate(16deg) scale(1.08);
}
100%{
transform:translate3d(0,0,0) rotate(360deg) scale(1);
}
}

.topbar,
header,
section,
footer,
#disclaimerPopup{
position:relative;
z-index:1;
}

#disclaimerPopup{
position:fixed !important;
inset:0 !important;
display:none;
align-items:center !important;
justify-content:center !important;
padding:20px !important;
background:rgba(7,22,47,.76) !important;
backdrop-filter:blur(10px) !important;
z-index:10000 !important;
}

.popup-box{
max-width:700px !important;
width:min(700px,100%) !important;
background:white !important;
box-shadow:0 30px 90px rgba(7,22,47,.24) !important;
}

header{
z-index:5000 !important;
overflow:visible !important;
}

nav,
.services-menu{
overflow:visible !important;
}

.topbar{
background:linear-gradient(90deg,#07162f,#123a77 52%,#1d4ed8) !important;
}

header{
box-shadow:0 14px 40px rgba(7,22,47,.08);
}

.hero{
background:
linear-gradient(135deg,rgba(239,246,255,.96),rgba(255,255,255,.92) 48%,rgba(219,234,254,.92)) !important;
}

footer{
background:
linear-gradient(135deg,#07162f,#0b2452 55%,#123a77) !important;
padding:58px 7% 34px !important;
}

.footer-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:54px !important;
max-width:1150px !important;
margin:auto !important;
align-items:flex-start !important;
}

.footer-grid div:nth-child(1),
.footer-grid div:nth-child(2),
.footer-grid div:nth-child(3){
text-align:center !important;
}

.footer-grid h3{
margin-bottom:12px !important;
font-size:20px !important;
color:white !important;
}

.footer-grid div:first-child h3{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
}

.footer-grid div:first-child h3::before{
content:'' !important;
width:34px !important;
height:34px !important;
border-radius:9px !important;
background:url('sparkinvent-logo.svg') center/contain no-repeat !important;
box-shadow:0 12px 30px rgba(56,189,248,.18) !important;
}

.footer-grid p,
.footer-grid a{
font-size:15px !important;
line-height:1.9 !important;
color:#dbeafe !important;
text-decoration:none !important;
}

.footer-grid a:hover{
color:white !important;
}

.footer-bottom{
max-width:1150px !important;
margin:34px auto 0 !important;
padding-top:20px !important;
border-top:1px solid rgba(191,219,254,.18) !important;
text-align:center !important;
font-size:13px !important;
color:#bfdbfe !important;
}

.hero,
.section,
section,
.cards-section,
.process,
.faq,
.contact-section,
.apply-section{
overflow:hidden;
}

.hero::before{
animation:heroGlowOne 16s linear infinite !important;
}

.hero::after{
animation:heroGlowTwo 18s linear infinite !important;
}

@keyframes heroGlowOne{
0%{transform:translate3d(0,0,0) rotate(0deg);}
50%{transform:translate3d(38px,26px,0) rotate(12deg);}
100%{transform:translate3d(0,0,0) rotate(360deg);}
}

@keyframes heroGlowTwo{
0%{transform:translate3d(0,0,0) rotate(0deg);}
50%{transform:translate3d(-32px,-24px,0) rotate(-14deg);}
100%{transform:translate3d(0,0,0) rotate(-360deg);}
}

main > section:not(.hero)::after,
.section::after,
.cards-section::after,
.process::after,
.faq::after,
.contact-section::after,
.apply-section::after{
content:'';
position:absolute;
width:260px;
height:260px;
right:7%;
top:12%;
z-index:0;
pointer-events:none;
opacity:.34;
background:
linear-gradient(135deg,rgba(29,78,216,.26),transparent 58%),
repeating-linear-gradient(135deg,rgba(37,99,235,.48) 0 1px,transparent 1px 13px);
clip-path:polygon(50% 0,100% 32%,84% 100%,18% 92%,0 24%);
animation:slowDrift 14s ease-in-out infinite alternate;
}

main > section:not(.hero)::before,
.section::before,
.cards-section::before,
.process::before,
.faq::before,
.contact-section::before,
.apply-section::before{
content:'';
position:absolute;
width:180px;
height:180px;
left:9%;
bottom:12%;
z-index:0;
pointer-events:none;
opacity:.18;
border-radius:50%;
background:
linear-gradient(90deg,rgba(30,64,175,.34) 1px,transparent 1px),
linear-gradient(rgba(30,64,175,.34) 1px,transparent 1px);
background-size:18px 18px;
mask-image:radial-gradient(circle,black 0 58%,transparent 72%);
animation:slowDrift 18s ease-in-out infinite alternate-reverse;
}

.section:nth-of-type(even)::after,
main > section:nth-of-type(even)::after{
left:6%;
right:auto;
top:auto;
bottom:10%;
animation-delay:-5s;
}

section > *,
.section > *,
.cards-section > *,
.process > *,
.faq > *,
.contact-section > *,
.apply-section > *{
position:relative;
z-index:1;
}

@keyframes slowDrift{
0%{
transform:translate3d(0,0,0) rotate(0deg);
}
100%{
transform:translate3d(22px,-18px,0) rotate(12deg);
}
}

.card,
.blog-card,
.mini-card,
.featured-card,
.term-card,
.stat-card,
.hero-card,
.vision-box,
.notice-box,
.contact-box,
.apply-box,
.cta{
position:relative;
isolation:isolate;
transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
}

.card::after,
.blog-card::after,
.mini-card::after,
.featured-card::after,
.term-card::after,
.stat-card::after,
.hero-card::after,
.vision-box::after,
.notice-box::after{
content:'';
position:absolute;
inset:1px;
border-radius:inherit;
background:
linear-gradient(135deg,rgba(29,78,216,.10),transparent 32%),
radial-gradient(circle at 85% 18%,rgba(96,165,250,.18),transparent 24%);
opacity:0;
transition:opacity .32s ease;
pointer-events:none;
z-index:0;
}

.card::before,
.blog-card::before,
.mini-card::before,
.featured-card::before,
.term-card::before{
content:'';
position:absolute;
width:92px;
height:92px;
right:18px;
top:18px;
border-radius:26px;
opacity:.18;
background:
radial-gradient(circle at 32% 32%,rgba(255,255,255,.9),transparent 24%),
linear-gradient(135deg,rgba(29,78,216,.50),rgba(147,197,253,.28));
transform:rotate(12deg);
pointer-events:none;
z-index:0;
}

.card > *,
.blog-card > *,
.mini-card > *,
.featured-card > *,
.term-card > *,
.stat-card > *,
.hero-card > *,
.vision-box > *,
.notice-box > *{
position:relative;
z-index:1;
}

.card:hover,
.blog-card:hover,
.mini-card:hover,
.featured-card:hover,
.term-card:hover,
.stat-card:hover,
.hero-card:hover,
.vision-box:hover,
.notice-box:hover{
transform:translateY(-6px);
box-shadow:0 26px 70px rgba(29,78,216,.18),0 0 0 1px rgba(96,165,250,.24),0 0 28px rgba(59,130,246,.16);
border-color:rgba(37,99,235,.34);
}

.card:hover::after,
.blog-card:hover::after,
.mini-card:hover::after,
.featured-card:hover::after,
.term-card:hover::after,
.stat-card:hover::after,
.hero-card:hover::after,
.vision-box:hover::after,
.notice-box:hover::after{
opacity:1;
}

.card h3,
.blog-card h3,
.mini-card h3,
.term-card h3{
letter-spacing:.1px;
}

.read-btn,
.btn,
.header-btn,
button{
transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.read-btn:hover,
.btn:hover,
.header-btn:hover,
button:hover{
filter:saturate(1.08);
box-shadow:0 18px 48px rgba(37,99,235,.24);
}

.captcha-box{
grid-column:1/4;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:14px;
align-items:center;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.24);
border-radius:18px;
padding:14px;
}

.services-menu{
position:relative;
}

.services-menu > a{
display:inline-flex;
align-items:center;
gap:2px;
}

.services-menu > a::after{
content:'';
display:inline-block;
width:7px;
height:7px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);
margin-left:8px;
}

.services-dropdown{
position:absolute;
top:calc(100% + 10px);
left:50%;
transform:translateX(-50%) translateY(8px);
min-width:260px;
padding:10px;
border-radius:18px;
background:rgba(255,255,255,.98);
box-shadow:0 30px 90px rgba(7,22,47,.22);
border:1px solid rgba(219,231,243,.9);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.22s ease;
z-index:7000;
}

.services-dropdown::before{
content:'';
position:absolute;
left:0;
right:0;
top:-12px;
height:12px;
}

.services-dropdown a{
display:block;
padding:11px 12px;
border-radius:12px;
white-space:nowrap;
color:#1e3a8a;
}

.services-dropdown a:hover{
background:#eff6ff;
color:#1d4ed8;
}

.services-menu:hover .services-dropdown,
.services-menu:focus-within .services-dropdown,
.services-menu.is-open .services-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}

section{
padding-top:52px !important;
padding-bottom:52px !important;
}

.section{
padding-top:52px !important;
padding-bottom:52px !important;
}

.grid,
.cards-grid,
.blog-grid{
gap:20px !important;
}

.card,
.blog-card,
.mini-card,
.term-card{
padding:22px !important;
border-radius:20px !important;
}

.featured-card{
padding:28px !important;
}

.btn,
.header-btn,
.read-btn,
.submit-wrap button,
.submit-btn button{
background:linear-gradient(135deg,#1e3a8a,#1d4ed8 48%,#38bdf8) !important;
}

.secondary-btn{
background:white !important;
color:#07162f !important;
}

body.article-page .hero{
padding-top:82px !important;
padding-bottom:58px !important;
}

body.article-page .article-content{
max-width:880px;
margin:auto;
font-size:18px;
line-height:1.9;
color:#334155;
}

body.article-page section:not(.hero) .section-title{
max-width:880px !important;
margin-left:auto !important;
margin-right:auto !important;
margin-bottom:24px !important;
}

body.article-page section:not(.hero) .section-title p{
font-size:18px !important;
line-height:1.9 !important;
text-align:left !important;
}

body.article-page section:not(.hero) .section-title h2{
text-align:left !important;
}

body.article-page section:not(.hero) .grid{
max-width:880px !important;
margin:auto !important;
}

body.article-page section:not(.hero) .card{
margin-bottom:20px !important;
}

body.article-page .article-content h2{
font-size:clamp(30px,4vw,44px);
line-height:1.15;
color:#07162f;
margin:18px 0 14px;
}

body.article-page .article-content h3{
font-size:24px;
color:#0f2f66;
margin:28px 0 10px;
}

body.article-page .article-content p{
margin-bottom:18px;
}

body.article-page .article-content ul{
padding-left:22px;
margin:0 0 22px;
}

body.article-page .article-content li{
margin-bottom:10px;
line-height:1.85;
}

body.article-page .article-note{
border-left:4px solid #2563eb;
background:#eff6ff;
padding:18px 20px;
border-radius:0 16px 16px 0;
margin:26px 0;
}

body.article-page .grid,
body.article-page .card{
display:block !important;
background:transparent !important;
box-shadow:none !important;
border:0 !important;
padding:0 !important;
border-radius:0 !important;
animation:none !important;
}

body.article-page .card::before,
body.article-page .card::after{
display:none !important;
}

body.article-page .card:hover{
transform:none !important;
box-shadow:none !important;
}

.logo{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
}

.logo::before{
content:'' !important;
display:inline-block !important;
width:34px !important;
height:34px !important;
flex:0 0 34px !important;
border-radius:9px !important;
background:url('sparkinvent-logo.svg') center/contain no-repeat !important;
transform:none !important;
box-shadow:0 10px 28px rgba(29,78,216,.20) !important;
}

@media(max-width:950px){
body::before,
body::after{
width:260px;
height:260px;
opacity:.16;
}

.topbar{
display:flex !important;
flex-direction:row !important;
justify-content:center !important;
gap:16px !important;
flex-wrap:wrap !important;
padding:8px 5% !important;
font-size:13px !important;
}

header{
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
gap:12px !important;
padding:14px 5% !important;
}

.logo{
font-size:24px !important;
line-height:1.1 !important;
}

.logo::before{
width:30px !important;
height:30px !important;
flex-basis:30px !important;
}

header > .btn,
header > .header-btn{
padding:10px 14px !important;
font-size:14px !important;
white-space:nowrap !important;
}

nav{
grid-column:1 / -1 !important;
display:flex !important;
justify-content:flex-start !important;
gap:10px !important;
overflow:visible !important;
padding:4px 0 8px !important;
scrollbar-width:none !important;
flex-wrap:wrap !important;
}

nav::-webkit-scrollbar{
display:none;
}

nav a,
.services-menu > a{
white-space:nowrap !important;
font-size:14px !important;
padding:9px 12px !important;
border-radius:999px !important;
background:rgba(239,246,255,.9) !important;
color:#1e3a8a !important;
}

.services-dropdown{
position:absolute;
top:calc(100% + 8px);
left:0;
transform:translateY(6px);
min-width:230px;
box-shadow:0 24px 70px rgba(7,22,47,.22);
border:1px solid #dbeafe;
background:white;
margin-top:0;
opacity:0;
visibility:hidden;
pointer-events:none;
display:block;
}

.services-menu:hover .services-dropdown,
.services-menu:focus-within .services-dropdown,
.services-menu.is-open .services-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}

section,
.section{
padding-top:42px !important;
padding-bottom:42px !important;
}

.footer-grid{
grid-template-columns:1fr !important;
text-align:center !important;
}

.footer-grid div:nth-child(1),
.footer-grid div:nth-child(2),
.footer-grid div:nth-child(3){
text-align:center !important;
}
}

@media(max-width:600px){
header{
grid-template-columns:1fr !important;
text-align:center !important;
}

header > .btn,
header > .header-btn{
justify-self:center !important;
}

nav{
justify-content:flex-start !important;
}

.hero{
padding-top:52px !important;
}

main > section:not(.hero)::after,
.section::after,
.cards-section::after,
.process::after,
.faq::after,
.contact-section::after,
.apply-section::after{
width:180px;
height:180px;
right:-34px;
opacity:.22;
}

main > section:not(.hero)::before,
.section::before,
.cards-section::before,
.process::before,
.faq::before,
.contact-section::before,
.apply-section::before{
width:130px;
height:130px;
left:-24px;
opacity:.14;
}
}

.captcha-box label{
font-weight:700;
line-height:1.5;
}

.captcha-box input{
background:white;
color:#0f172a;
}

@media(max-width:950px){
.captcha-box{
grid-column:auto;
grid-template-columns:1fr;
}
}

@media(prefers-reduced-motion:reduce){
*{
animation:none !important;
transition:none !important;
}
}
