:root { 
--bg:#05050f;
--bg-2:#0a0a1a;
--surface:rgba(255,255,255,0.04);
--surface-hover:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.08);
--border-hover:rgba(139,92,246,0.4);
--purple:#8b5cf6;
--purple-light:#a78bfa;
--cyan:#06b6d4;
--cyan-light:#22d3ee;
--pink:#ec4899;
--gradient:linear-gradient(135deg,var(--purple),var(--cyan));
--gradient-text:linear-gradient(135deg,#a78bfa,#22d3ee);
--text-primary:#f1f5f9;
--text-secondary:#94a3b8;
--text-muted:#475569;
--radius:20px;
--radius-lg:32px;
--radius-xl:48px;
--radius-pill:100px;
--shadow-card:0 30px 60px -12px rgba(0,0,0,0.5),0 18px 36px -18px rgba(0,0,0,0.5);
--shadow-glow:0 0 30px rgba(139,92,246,0.2);
--transition:0.4s cubic-bezier(0.2,1,0.3,1) } 
*,*::before,*::after { 
box-sizing:border-box;
margin:0;
padding:0 } 
html { 
scroll-behavior:smooth } 
body { 
font-family:'Space Grotesk',sans-serif;
background:var(--bg);
color:var(--text-primary);
overflow-x:hidden;
min-height:100vh } 
img { 
max-width:100%;
display:block } 
a { 
text-decoration:none;
color:inherit } 
ul { 
list-style:none } 
button { 
cursor:pointer;
font-family:inherit;
border:none;
background:none } 
#bgCanvas { 
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:0.7 } 
#loader { 
position:fixed;
inset:0;
z-index:9999;
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
transition:opacity 0.6s ease,visibility 0.6s ease } 
#loader.loaded { 
opacity:0;
visibility:hidden;
pointer-events:none } 
.loader-inner { 
text-align:center } 
.loader-logo { 
font-family:'Syne',sans-serif;
font-size:3rem;
font-weight:800;
letter-spacing:-2px;
margin-bottom:2rem } 
.loader-logo span { 
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text } 
.loader-bar { 
width:200px;
height:2px;
background:rgba(255,255,255,0.1);
border-radius:2px;
overflow:hidden;
margin:0 auto } 
.loader-fill { 
height:100%;
background:var(--gradient);
border-radius:2px;
animation:loaderFill 1.1s ease forwards } 
@keyframes loaderFill { 
from { 
width:0 } 
to { 
width:100% } 
 } 
.cursor-dot,.cursor-ring { 
position:fixed;
top:0;
left:0;
pointer-events:none;
z-index:9998;
border-radius:50%;
transform:translate(-50%,-50%);
will-change:transform } 
.cursor-dot { 
width:6px;
height:6px;
background:var(--purple-light) } 
.cursor-ring { 
width:36px;
height:36px;
border:1.5px solid rgba(139,92,246,0.6);
transition:width 0.3s,height 0.3s,border-color 0.3s } 
.cursor-ring.cursor-hover { 
width:60px;
height:60px;
border-color:var(--cyan);
background:rgba(6,182,212,0.05) } 
@media (pointer:coarse) { 
.cursor-dot,.cursor-ring { 
display:none } 
 } 
.gradient-text { 
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text } 
.btn { 
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.85rem 1.8rem;
border-radius:var(--radius-pill);
font-weight:600;
font-size:0.95rem;
transition:var(--transition);
white-space:nowrap;
position:relative;
overflow:hidden } 
.btn-primary { 
background:var(--gradient);
color:white;
box-shadow:0 4px 20px rgba(139,92,246,0.3) } 
.btn-primary:hover { 
transform:translateY(-2px);
box-shadow:0 8px 30px rgba(139,92,246,0.5) } 
.btn-glow::before { 
content:'';
position:absolute;
inset:-2px;
background:var(--gradient);
border-radius:inherit;
z-index:-1;
filter:blur(12px);
opacity:0;
transition:opacity var(--transition) } 
.btn-glow:hover::before { 
opacity:0.6 } 
.btn-ghost { 
background:var(--surface);
color:var(--text-primary);
border:1px solid var(--border);
backdrop-filter:blur(10px) } 
.btn-ghost:hover { 
background:var(--surface-hover);
border-color:var(--border-hover);
transform:translateY(-2px) } 
.btn-outline { 
background:transparent;
color:var(--text-primary);
border:1px solid var(--border) } 
.btn-outline:hover { 
border-color:var(--purple);
color:var(--purple-light);
background:rgba(139,92,246,0.05) } 
.btn-outline:disabled { 
opacity:0.4;
cursor:not-allowed;
transform:none !important } 
.navbar { 
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
display:flex;
align-items:center;
justify-content:space-between;
padding:1.5rem 6%;
transition:var(--transition) } 
.navbar.scrolled { 
background:rgba(5,5,15,0.85);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
padding:1rem 6% } 
.nav-logo { 
display:flex;
align-items:center;
gap:0.6rem;
font-family:'Syne',sans-serif;
font-size:1.4rem;
font-weight:800;
letter-spacing:-0.03em;
z-index:101 } 
.nav-logo span { 
color:var(--purple-light) } 
.logo-img { 
width:32px;
height:32px;
object-fit:contain } 
.nav-links { 
display:flex;
gap:2.5rem } 
.nav-link { 
color:var(--text-secondary);
font-weight:500;
font-size:0.9rem;
transition:color var(--transition);
position:relative } 
.nav-link::after { 
content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:1.5px;
background:var(--gradient);
transition:width var(--transition);
border-radius:2px } 
.nav-link:hover,.nav-link.active { 
color:var(--text-primary) } 
.nav-link:hover::after,.nav-link.active::after { 
width:100% } 
.nav-cta { 
display:flex;
align-items:center;
gap:0.5rem;
padding:0.7rem 1.4rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-pill);
color:var(--text-primary);
font-weight:600;
font-size:0.88rem;
transition:var(--transition);
backdrop-filter:blur(10px) } 
.nav-cta:hover { 
border-color:var(--purple);
background:rgba(139,92,246,0.1);
box-shadow:0 0 20px rgba(139,92,246,0.2) } 
.burger { 
display:none;
flex-direction:column;
gap:5px;
padding:4px;
z-index:101 } 
.burger span { 
display:block;
width:24px;
height:2px;
background:var(--text-primary);
border-radius:2px;
transition:var(--transition);
transform-origin:center } 
.burger.active span:nth-child(1) { 
transform:translateY(7px) rotate(45deg) } 
.burger.active span:nth-child(2) { 
opacity:0;
transform:scaleX(0) } 
.burger.active span:nth-child(3) { 
transform:translateY(-7px) rotate(-45deg) } 
.mobile-menu { 
position:fixed;
inset:0;
z-index:99;
background:rgba(5,5,15,0.97);
backdrop-filter:blur(20px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2rem;
opacity:0;
visibility:hidden;
transition:var(--transition) } 
.mobile-menu.open { 
opacity:1;
visibility:visible } 
.mobile-menu a { 
font-size:1.5rem;
font-weight:700;
color:var(--text-secondary);
transition:color var(--transition) } 
.mobile-menu a:hover { 
color:var(--text-primary) } 
.mobile-menu .btn { 
font-size:1rem;
margin-top:1rem } 
.social-sidebar { 
position:fixed;
left:2rem;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:1.5rem;
z-index:50 } 
.social-sidebar a { 
width:40px;
height:40px;
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:50%;
color:var(--text-secondary);
font-size:0.95rem;
backdrop-filter:blur(10px);
transition:var(--transition) } 
.social-sidebar a:hover { 
color:var(--purple-light);
border-color:var(--purple);
background:rgba(139,92,246,0.1);
box-shadow:0 0 15px rgba(139,92,246,0.3) } 
.sidebar-line { 
width:1px;
height:80px;
background:linear-gradient(to bottom,var(--border),transparent) } 
.section { 
position:relative;
z-index:1;
padding:7rem 6% } 
.section-header { 
text-align:center;
margin-bottom:4rem } 
.section-label { 
display:inline-flex;
align-items:center;
gap:0.75rem;
font-family:'Fira Code',monospace;
font-size:0.8rem;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:0.15em;
margin-bottom:1rem } 
.section-label span { 
color:var(--purple-light);
font-weight:600 } 
.section-title { 
font-family:'Syne',sans-serif;
font-size:clamp(1.8rem,3.5vw,2.6rem);
font-weight:800;
line-height:1.15;
letter-spacing:-0.015em;
margin-bottom:1rem } 
.section-subtitle { 
color:var(--text-secondary);
font-size:1.05rem;
max-width:620px;
margin:0 auto;
line-height:1.6 } 
.reveal-up { 
opacity:0;
transform:translateY(40px);
transition:opacity 0.7s ease,transform 0.7s ease;
transition-delay:var(--delay,0s) } 
.reveal-up.revealed { 
opacity:1;
transform:translateY(0) } 
.reveal-right { 
opacity:0;
transform:translateX(60px);
transition:opacity 0.8s ease,transform 0.8s ease;
transition-delay:0.2s } 
.reveal-right.revealed { 
opacity:1;
transform:translateX(0) } 
.hero-section { 
position:relative;
z-index:1;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:3rem;
padding:10rem 6% 6rem;
overflow:hidden } 
.orb { 
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none } 
.orb-1 { 
width:500px;
height:500px;
background:rgba(139,92,246,0.12);
top:-100px;
right:200px;
animation:orbFloat 8s ease-in-out infinite } 
.orb-2 { 
width:400px;
height:400px;
background:rgba(6,182,212,0.08);
bottom:0;
left:0;
animation:orbFloat 10s ease-in-out infinite reverse } 
.orb-3 { 
width:300px;
height:300px;
background:rgba(236,72,153,0.06);
top:50%;
right:0;
animation:orbFloat 7s ease-in-out infinite 2s } 
@keyframes orbFloat { 
0%,100% { 
transform:translateY(0) scale(1) } 
50% { 
transform:translateY(-30px) scale(1.05) } 
 } 
.hero-content { 
max-width:620px } 
.badge { 
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 1.2rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-pill);
font-size:0.88rem;
font-weight:500;
color:var(--text-secondary);
backdrop-filter:blur(10px);
margin-bottom:1.5rem } 
.badge-dot { 
width:6px;
height:6px;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 8px var(--cyan);
animation:pulse 2s ease infinite } 
@keyframes pulse { 
0%,100% { 
opacity:1;
transform:scale(1) } 
50% { 
opacity:0.5;
transform:scale(0.8) } 
 } 
.hero-title { 
font-family:'Syne',sans-serif;
font-size:clamp(2.2rem,5vw,4rem);
font-weight:800;
line-height:1.05;
letter-spacing:-0.01em;
margin-bottom:2rem;
max-width:900px;
margin-inline:auto } 
.line-wrap { 
display:block;
overflow:hidden } 
.line-inner { 
display:block } 
#typewriter { 
display:inline-block;
min-width:4ch;
position:relative } 
#typewriter::after { 
content:'|
';
color:var(--purple-light);
animation:blink 1s step-end infinite } 
@keyframes blink { 
0%,100% { 
opacity:1 } 
50% { 
opacity:0 } 
 } 
.hero-description { 
color:var(--text-secondary);
font-size:1.15rem;
line-height:1.75;
margin-bottom:2.5rem;
max-width:700px;
margin-inline:auto } 
.hero-description strong { 
color:var(--text-primary) } 
.hero-actions { 
display:flex;
gap:1.2rem;
flex-wrap:wrap;
margin-bottom:3.5rem;
justify-content:center } 
.hero-stats { 
display:flex;
align-items:center;
gap:2.5rem;
padding:1.5rem 2.5rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
backdrop-filter:blur(20px);
width:fit-content;
margin-inline:auto } 
.stat-item { 
text-align:center } 
.stat-num { 
display:block;
font-family:'Syne',sans-serif;
font-size:1.4rem;
font-weight:800;
letter-spacing:-0.02em;
line-height:1 } 
.stat-suffix { 
font-size:1rem;
font-weight:700 } 
.stat-label { 
display:block;
font-size:0.75rem;
color:var(--text-muted);
margin-top:0.25rem;
white-space:nowrap } 
.stat-divider { 
width:1px;
height:40px;
background:var(--border) } 
.hero-visual { 
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:800px;
margin-top:2rem } 
.floating-tag { 
position:absolute;
display:flex;
align-items:center;
gap:0.5rem;
padding:0.7rem 1.2rem;
background:rgba(10,10,26,0.9);
border:1px solid var(--border);
border-radius:var(--radius-pill);
font-size:0.85rem;
font-weight:600;
backdrop-filter:blur(10px);
white-space:nowrap;
z-index:5 } 
.tag-1 { 
top:-10%;
left:0%;
color:var(--cyan-light);
border-color:rgba(6,182,212,0.3);
animation:tagFloat1 5s ease-in-out infinite } 
.tag-2 { 
bottom:10%;
right:0%;
color:var(--purple-light);
border-color:rgba(139,92,246,0.3);
animation:tagFloat2 6s ease-in-out infinite } 
.tag-3 { 
top:40%;
left:-15%;
color:var(--pink);
border-color:rgba(236,72,153,0.3);
animation:tagFloat3 7s ease-in-out infinite } 
@keyframes tagFloat1 { 
0%,100% { 
transform:translateY(0) } 
50% { 
transform:translateY(-10px) } 
 } 
@keyframes tagFloat2 { 
0%,100% { 
transform:translateY(0) } 
50% { 
transform:translateY(10px) } 
 } 
@keyframes tagFloat3 { 
0%,100% { 
transform:translateX(0) } 
50% { 
transform:translateX(-8px) } 
 } 
.hero-card { 
position:relative;
width:100%;
max-width:440px;
border-radius:var(--radius-lg);
overflow:hidden } 
.card-glow-border { 
position:absolute;
inset:-1px;
background:var(--gradient);
border-radius:inherit;
z-index:0;
opacity:0.5;
animation:borderGlow 4s ease-in-out infinite } 
@keyframes borderGlow { 
0%,100% { 
opacity:0.3 } 
50% { 
opacity:0.7 } 
 } 
.card-inner { 
position:relative;
z-index:1;
background:rgba(10,10,26,0.95);
border-radius:calc(var(--radius-lg) - 1px);
overflow:hidden;
backdrop-filter:blur(20px) } 
.card-scanline { 
position:absolute;
inset:0;
background:repeating-linear-gradient(transparent,transparent 2px,rgba(255,255,255,0.01) 2px,rgba(255,255,255,0.01) 4px);
z-index:2;
pointer-events:none } 
.card-top-bar { 
display:flex;
align-items:center;
gap:0.75rem;
padding:0.9rem 1.2rem;
border-bottom:1px solid var(--border);
background:rgba(255,255,255,0.02) } 
.dots { 
display:flex;
gap:0.4rem } 
.dot { 
width:10px;
height:10px;
border-radius:50% } 
.dot.red { 
background:#ff5f57 } 
.dot.yellow { 
background:#febc2e } 
.dot.green { 
background:#28c840 } 
.card-file { 
flex:1;
font-family:'Fira Code',monospace;
font-size:0.78rem;
color:var(--text-muted) } 
.card-status { 
display:flex;
align-items:center;
gap:0.4rem;
font-family:'Fira Code',monospace;
font-size:0.75rem;
color:#28c840 } 
.status-dot { 
width:6px;
height:6px;
background:#28c840;
border-radius:50%;
animation:pulse 2s infinite;
box-shadow:0 0 6px #28c840 } 
.code-body { 
padding:1.4rem 1.4rem 1rem;
font-family:'Fira Code',monospace;
font-size:0.82rem;
line-height:2 } 
.code-line { 
white-space:nowrap } 
.keyword { 
color:#c792ea } 
.variable { 
color:#82aaff } 
.op { 
color:var(--text-muted) } 
.class-name { 
color:#ffcb6b } 
.method { 
color:#82aaff } 
.string { 
color:#c3e88d } 
.boolean { 
color:#f78c6c } 
.comment { 
color:#546e7a;
font-style:italic } 
.code-cursor { 
display:inline-block;
width:8px;
height:16px;
background:var(--purple-light);
vertical-align:middle;
animation:blink 1s step-end infinite;
margin-left:2px;
border-radius:1px } 
.card-metrics { 
padding:1rem 1.4rem 1.4rem;
display:flex;
flex-direction:column;
gap:0.6rem;
border-top:1px solid var(--border) } 
.metric { 
display:grid;
grid-template-columns:1fr auto auto;
align-items:center;
gap:0.75rem;
font-size:0.8rem } 
.metric span { 
color:var(--text-muted) } 
.metric strong { 
color:var(--text-primary);
width:28px;
text-align:right } 
.metric-bar { 
height:4px;
background:rgba(255,255,255,0.08);
border-radius:4px;
overflow:hidden;
flex:1 } 
.metric-fill { 
height:100%;
width:var(--w);
background:var(--gradient);
border-radius:4px;
animation:metricGrow 1.5s ease forwards;
transform-origin:left } 
@keyframes metricGrow { 
from { 
transform:scaleX(0) } 
to { 
transform:scaleX(1) } 
 } 
.scroll-indicator { 
position:absolute;
bottom:2.5rem;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:0.5rem;
color:var(--text-muted);
font-size:0.75rem;
letter-spacing:0.1em;
text-transform:uppercase;
animation:scrollBounce 2s ease-in-out infinite } 
.scroll-mouse { 
width:22px;
height:36px;
border:1.5px solid var(--border);
border-radius:12px;
display:flex;
justify-content:center;
padding-top:6px } 
.scroll-wheel { 
width:3px;
height:8px;
background:var(--purple-light);
border-radius:2px;
animation:scrollWheel 2s ease-in-out infinite } 
@keyframes scrollWheel { 
0%,100% { 
opacity:1;
transform:translateY(0) } 
60% { 
opacity:0;
transform:translateY(8px) } 
 } 
@keyframes scrollBounce { 
0%,100% { 
transform:translateX(-50%) translateY(0) } 
50% { 
transform:translateX(-50%) translateY(6px) } 
 } 
.about-section { 
background:linear-gradient(180deg,transparent,rgba(6,182,212,0.02),transparent) } 
.about-grid { 
display:grid;
grid-template-columns:0.8fr 1.2fr;
gap:4rem;
align-items:center } 
.about-visual { 
position:relative } 
.about-image-frame { 
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-card);
aspect-ratio:3/4 } 
.about-photo { 
width:100%;
height:100%;
object-fit:cover } 
.about-experience-badge { 
position:absolute;
bottom:1.5rem;
right:1.5rem;
background:rgba(10,10,26,0.9);
border:1px solid var(--border);
padding:1.2rem;
border-radius:var(--radius-lg);
backdrop-filter:blur(10px);
text-align:center } 
.exp-num { 
display:block;
font-family:'Syne',sans-serif;
font-size:1.5rem;
font-weight:800;
color:var(--purple-light) } 
.exp-text { 
font-size:0.75rem;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:0.05em } 
.about-lead { 
font-size:1.25rem;
font-weight:600;
color:var(--text-primary);
margin-bottom:1.5rem;
line-height:1.4 } 
.about-text { 
color:var(--text-secondary);
margin-bottom:2.5rem } 
.about-text p { 
margin-bottom:1rem } 
.about-features { 
display:flex;
flex-direction:column;
gap:1rem;
margin-bottom:3rem } 
.about-feat-item { 
display:flex;
align-items:center;
gap:1rem;
color:var(--text-secondary);
font-weight:500 } 
.about-feat-item i { 
width:32px;
height:32px;
display:grid;
place-items:center;
background:rgba(139,92,246,0.1);
color:var(--purple-light);
border-radius:50%;
font-size:0.85rem } 
.services-section { 
background:linear-gradient(180deg,transparent,rgba(139,92,246,0.03),transparent) } 
.services-grid { 
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem } 
.service-card { 
position:relative;
padding:2.5rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
transition:var(--transition);
overflow:hidden;
cursor:default;
display:flex;
flex-direction:column } 
.service-card:hover { 
border-color:var(--purple-light);
transform:translateY(-8px);
background:var(--surface-hover);
box-shadow:var(--shadow-glow) } 
.service-card:hover .service-card-bg { 
opacity:1 } 
.service-card:hover .service-arrow { 
opacity:1;
transform:translateX(0) } 
.service-card-bg { 
position:absolute;
inset:0;
background:radial-gradient(circle at top left,rgba(139,92,246,0.06),transparent 60%);
opacity:0;
transition:opacity var(--transition);
pointer-events:none } 
.service-icon-wrap { 
margin-bottom:1.5rem } 
.service-icon { 
width:52px;
height:52px;
display:grid;
place-items:center;
background:var(--gradient);
border-radius:var(--radius);
font-size:1.3rem;
color:white;
box-shadow:0 8px 20px rgba(139,92,246,0.3) } 
.service-num { 
position:absolute;
top:1.5rem;
right:1.5rem;
font-family:'Fira Code',monospace;
font-size:0.75rem;
color:var(--text-muted) } 
.service-card h3 { 
font-family:'Syne',sans-serif;
font-size:1.15rem;
font-weight:700;
margin-bottom:0.75rem;
letter-spacing:-0.02em } 
.service-card p { 
color:var(--text-secondary);
font-size:0.93rem;
line-height:1.7 } 
.service-arrow { 
position:absolute;
bottom:1.5rem;
right:1.5rem;
width:36px;
height:36px;
display:grid;
place-items:center;
background:var(--gradient);
border-radius:50%;
color:white;
font-size:0.8rem;
opacity:0;
transform:translateX(-8px);
transition:var(--transition) } 
.service-card-cta { 
display:flex;
flex-direction:column;
justify-content:center;
background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(6,182,212,0.05));
border:1px dashed rgba(139,92,246,0.3);
text-align:center;
gap:1rem } 
.service-card-cta h3 { 
font-family:'Syne',sans-serif;
font-size:1.3rem;
margin-bottom:0 } 
.service-card-cta p { 
color:var(--text-secondary);
font-size:0.93rem } 
.service-card-cta .btn { 
align-self:center } 
.portfolio-section { 
background:linear-gradient(180deg,transparent,rgba(6,182,212,0.02),transparent) } 
.portfolio-grid { 
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem } 
.portfolio-card { 
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--surface);
border:1px solid var(--border);
transition:var(--transition) } 
.portfolio-card:hover { 
border-color:var(--purple-light);
transform:translateY(-8px);
box-shadow:var(--shadow-card) } 
.portfolio-card:hover .portfolio-overlay { 
opacity:1 } 
.portfolio-card:hover .portfolio-img-wrap img { 
transform:scale(1.05) } 
.portfolio-img-wrap { 
position:relative;
aspect-ratio:16/9;
overflow:hidden } 
.portfolio-img-wrap img { 
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease } 
.portfolio-overlay { 
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(5,5,15,0.95) 40%,rgba(5,5,15,0.6));
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:1.8rem;
opacity:0;
transition:opacity var(--transition) } 
.overlay-tag { 
display:inline-block;
padding:0.3rem 0.8rem;
background:rgba(139,92,246,0.2);
border:1px solid rgba(139,92,246,0.4);
border-radius:var(--radius-pill);
font-size:0.75rem;
color:var(--purple-light);
margin-bottom:0.75rem;
width:fit-content } 
.portfolio-overlay h3 { 
font-family:'Syne',sans-serif;
font-size:1.3rem;
font-weight:700;
margin-bottom:0.4rem } 
.portfolio-overlay p { 
color:var(--text-secondary);
font-size:0.88rem;
margin-bottom:1rem } 
.btn-view { 
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.6rem 1.2rem;
background:var(--gradient);
color:white;
border-radius:var(--radius-pill);
font-size:0.85rem;
font-weight:600;
width:fit-content;
transition:var(--transition);
box-shadow:0 4px 15px rgba(139,92,246,0.3) } 
.btn-view:hover { 
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(139,92,246,0.5) } 
.portfolio-info { 
padding:1.2rem 1.5rem } 
.portfolio-cat { 
display:block;
font-size:0.75rem;
color:var(--purple-light);
text-transform:uppercase;
letter-spacing:0.1em;
margin-bottom:0.3rem } 
.portfolio-info h3 { 
font-family:'Syne',sans-serif;
font-weight:700;
font-size:1.05rem } 
.kap-section { 
background:linear-gradient(135deg,rgba(139,92,246,0.06),transparent,rgba(6,182,212,0.06));
border-top:1px solid var(--border);
border-bottom:1px solid var(--border) } 
.kap-paused-banner { 
display:flex;
align-items:center;
justify-content:center;
gap:0.75rem;
padding:1rem 2rem;
background:rgba(251,191,36,0.15);
border:1px solid rgba(251,191,36,0.4);
border-radius:var(--radius-pill);
color:#fbbf24;
font-size:0.95rem;
font-weight:600;
margin-bottom:4rem;
width:fit-content;
margin-inline:auto;
box-shadow:0 0 30px rgba(251,191,36,0.1);
position:relative;
z-index:10 } 
.kap-is-paused .kap-container { 
filter:grayscale(0.9) brightness(0.7);
opacity:0.6;
pointer-events:none;
transition:var(--transition) } 
.kap-is-paused .btn-primary { 
background:var(--surface);
color:var(--text-muted);
border:1px solid var(--border);
box-shadow:none;
cursor:not-allowed } 
.kap-is-paused .btn-primary i { 
opacity:0.5 } 
.kap-container { 
display:flex;
flex-direction:column;
align-items:center;
gap:4rem;
text-align:center } 
.kap-left { 
max-width:800px } 
.kap-badge-pill { 
display:inline-block;
padding:0.4rem 1.2rem;
background:rgba(139,92,246,0.1);
border:1px solid rgba(139,92,246,0.3);
border-radius:var(--radius-pill);
font-size:0.85rem;
color:var(--purple-light);
font-weight:600;
margin-bottom:1.5rem } 
.kap-left .section-title { 
text-align:center;
margin-bottom:1.5rem } 
.kap-highlight { 
font-size:1.25rem;
color:var(--text-secondary);
line-height:1.7;
margin-bottom:2.5rem;
max-width:700px;
margin-inline:auto } 
.kap-list { 
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
margin-bottom:3.5rem;
width:100% } 
.kap-list li { 
display:flex;
flex-direction:column;
align-items:center;
gap:1rem;
color:var(--text-secondary);
font-size:1rem } 
.kap-check { 
width:36px;
height:36px;
display:grid;
place-items:center;
background:var(--gradient);
border-radius:50%;
color:white;
font-size:0.9rem;
flex-shrink:0;
box-shadow:0 0 15px rgba(139,92,246,0.3) } 
.kap-right { 
width:100%;
display:flex;
justify-content:center } 
.kap-card { 
position:relative;
width:100%;
max-width:480px;
padding:3rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-xl);
backdrop-filter:blur(30px);
overflow:hidden;
box-shadow:0 40px 100px rgba(0,0,0,0.5) } 
.kap-card-glow { 
position:absolute;
top:-100px;
right:-100px;
width:300px;
height:300px;
background:radial-gradient(circle,rgba(139,92,246,0.25),transparent 70%);
pointer-events:none } 
.kap-card-header { 
display:flex;
align-items:center;
justify-content:center;
gap:0.75rem;
margin-bottom:2.5rem;
color:var(--text-secondary);
font-size:0.95rem;
font-weight:500 } 
.kap-icon-wrap { 
width:44px;
height:44px;
display:grid;
place-items:center;
background:var(--gradient);
border-radius:var(--radius);
color:white;
font-size:1.1rem } 
.kap-amount-display { 
text-align:center;
margin-bottom:2.5rem } 
.kap-amount-main { 
font-family:'Syne',sans-serif;
font-size:4.5rem;
font-weight:800;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
letter-spacing:-0.04em;
line-height:1 } 
.kap-amount-main span { 
font-size:2.5rem } 
.kap-amount-label { 
color:var(--text-muted);
font-size:0.95rem;
margin-top:0.5rem } 
.kap-divider { 
height:1px;
background:var(--border);
margin-bottom:2rem } 
.kap-stats-row { 
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
margin-bottom:2rem } 
.kap-stat strong { 
display:block;
font-family:'Syne',sans-serif;
font-size:1.4rem;
font-weight:800;
background:var(--gradient-text);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text } 
.kap-stat span { 
font-size:0.8rem;
color:var(--text-muted) } 
.kap-cta-text { 
text-align:center;
font-size:0.9rem;
color:var(--text-muted);
padding-top:1.5rem;
border-top:1px solid var(--border) } 
.simulator-section { 
background:var(--bg-2);
border-bottom:1px solid var(--border) } 
.simulator-container { 
max-width:1000px;
margin:0 auto } 
.simulator-content-box { 
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:3rem;
backdrop-filter:blur(20px);
box-shadow:var(--shadow-card) } 
.simulator-steps-track { 
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
margin-bottom:3rem } 
.step-dot { 
width:12px;
height:12px;
border-radius:50%;
background:var(--border);
transition:var(--transition) } 
.step-dot.active { 
background:var(--purple-light);
box-shadow:0 0 10px var(--purple-light) } 
.step-line { 
flex:1;
max-width:60px;
height:2px;
background:var(--border) } 
.page-sim-step { 
display:none } 
.page-sim-step.active { 
display:block;
animation:fadeIn 0.5s ease } 
@keyframes fadeIn { 
from { 
opacity:0;
transform:translateY(10px) } 
to { 
opacity:1;
transform:translateY(0) } 
 } 
.simulator-grid { 
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
margin-bottom:3rem } 
.sim-group-full { 
grid-column:span 2 } 
.sim-q-title { 
font-size:1.1rem;
font-weight:700;
color:var(--text-primary);
margin-bottom:1.5rem } 
.radio-toggle-group { 
display:flex;
gap:1rem } 
.radio-card { 
flex:1;
cursor:pointer;
position:relative } 
.radio-card input { 
display:none } 
.radio-card-content { 
padding:1.5rem;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:var(--radius-lg);
display:flex;
flex-direction:column;
align-items:center;
gap:0.8rem;
transition:var(--transition) } 
.radio-card-content i { 
font-size:1.5rem;
color:var(--text-muted);
transition:var(--transition) } 
.radio-card-content span { 
font-size:0.95rem;
font-weight:600;
color:var(--text-secondary) } 
.radio-card input:checked + .radio-card-content { 
background:rgba(139,92,246,0.1);
border-color:var(--purple-light);
box-shadow:0 0 20px rgba(139,92,246,0.15) } 
.radio-card input:checked + .radio-card-content i { 
color:var(--purple-light);
transform:scale(1.1) } 
.radio-card input:checked + .radio-card-content span { 
color:var(--text-primary) } 
.sim-highlight-box { 
display:flex;
align-items:center;
gap:1.5rem;
padding:1.5rem 2rem;
background:rgba(6,182,212,0.08);
border:1px solid rgba(6,182,212,0.2);
border-radius:var(--radius-lg);
color:var(--text-primary);
margin-bottom:3rem;
line-height:1.6 } 
.sim-highlight-box i { 
font-size:1.8rem;
color:var(--cyan) } 
.sim-highlight-box strong { 
color:var(--cyan-light) } 
.sim-footer { 
display:flex;
justify-content:center;
gap:1.5rem;
margin-top:2rem } 
.sim-form { 
display:flex;
flex-direction:column;
gap:1.5rem } 
/* CUSTOM PACK SELECTOR */
.pack-selector { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    width: 100%;
}
.pack-option { 
    position: relative;
    cursor: pointer;
}
.pack-option input { 
    display: none;
}
.pack-option-content { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
}
.pack-option-content span { 
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.pack-option input:checked + .pack-option-content { 
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--purple-light);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}
.pack-option input:checked + .pack-option-content span { 
    color: var(--purple-light);
}
.pack-option:hover .pack-option-content { 
    border-color: var(--border-hover);
    background: var(--surface-hover);
}
.pricing-grid { 
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem;
align-items:stretch } 
.pricing-card { 
position:relative;
border-radius:var(--radius-lg);
overflow:hidden;
transition:var(--transition) } 
.pricing-card:hover { 
transform:translateY(-6px) } 
.pricing-card-inner { 
height:100%;
padding:2rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
display:flex;
flex-direction:column;
transition:border-color var(--transition) } 
.pricing-card:hover .pricing-card-inner { 
border-color:rgba(139,92,246,0.3) } 
.pricing-featured { 
z-index:2 } 
.pricing-glow-border { 
position:absolute;
inset:-1px;
background:var(--gradient);
border-radius:var(--radius-lg);
z-index:0 } 
.pricing-featured .pricing-card-inner { 
position:relative;
z-index:1;
background:rgba(10,10,26,0.95);
border:none } 
.popular-tag { 
font-size:0.78rem;
font-weight:700;
color:var(--purple-light);
text-transform:uppercase;
letter-spacing:0.08em;
margin-bottom:1.2rem } 
.pricing-badge { 
display:inline-block;
padding:0.3rem 0.8rem;
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:var(--radius-pill);
font-size:0.75rem;
color:var(--text-secondary);
margin-bottom:0.75rem } 
.badge-gradient { 
background:rgba(139,92,246,0.1);
border-color:rgba(139,92,246,0.3);
color:var(--purple-light) } 
.pricing-top { 
margin-bottom:1.5rem } 
.pricing-top h3 { 
font-family:'Syne',sans-serif;
font-size:1.2rem;
font-weight:800;
letter-spacing:-0.02em;
margin-bottom:0.75rem } 
.pricing-price { 
display:flex;
align-items:baseline;
gap:0.3rem;
margin-bottom:0.3rem } 
.price-from { 
font-size:0.85rem;
color:var(--text-muted) } 
.price-amount { 
font-family:'Syne',sans-serif;
font-size:2rem;
font-weight:800;
letter-spacing:-0.03em } 
.price-desc { 
font-size:0.82rem;
color:var(--text-muted) } 
.pricing-features { 
flex:1;
display:flex;
flex-direction:column;
gap:0.7rem;
margin-bottom:2rem } 
.pricing-features li { 
display:flex;
align-items:center;
gap:0.75rem;
font-size:0.9rem;
color:var(--text-secondary) } 
.pricing-features li i { 
color:var(--purple-light);
font-size:0.75rem;
flex-shrink:0 } 
.pricing-features li .fa-star { 
color:#fbbf24 } 
.pricing-features li .fa-handshake { 
color:var(--cyan) } 
.pricing-features li .fa-shield-alt { 
color:var(--cyan) } 
.pricing-btn { 
width:100%;
justify-content:center;
margin-top:auto } 
.pricing-soon { 
opacity:0.7 } 
.soon-badge { 
position:absolute;
top:1rem;
right:1rem;
padding:0.25rem 0.75rem;
background:rgba(251,191,36,0.1);
border:1px solid rgba(251,191,36,0.3);
border-radius:var(--radius-pill);
font-size:0.72rem;
color:#fbbf24;
font-weight:600 } 
.footer { 
position:relative;
z-index:1;
border-top:1px solid var(--border);
overflow:hidden } 
.footer-orb { 
position:absolute;
top:-100px;
left:50%;
transform:translateX(-50%);
width:600px;
height:300px;
background:radial-gradient(ellipse,rgba(139,92,246,0.08),transparent 70%);
pointer-events:none } 
.footer-content { 
padding:5rem 6% 3rem;
max-width:1200px;
margin:0 auto } 
.footer-cta { 
text-align:center;
margin-bottom:4rem } 
.footer-cta h2 { 
font-family:'Syne',sans-serif;
font-size:clamp(1.8rem,3.5vw,2.8rem);
font-weight:800;
letter-spacing:-0.03em;
margin-bottom:1rem } 
.footer-cta p { 
color:var(--text-secondary);
font-size:1rem;
margin-bottom:2rem;
max-width:480px;
margin-inline:auto } 
.footer-actions { 
display:flex;
flex-direction:column;
align-items:center;
gap:1rem } 
.footer-email { 
font-size:0.88rem;
color:var(--text-muted) } 
.footer-email a { 
color:var(--purple-light) } 
.footer-email a:hover { 
text-decoration:underline } 
.footer-bottom { 
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1.5rem;
padding-top:2rem;
border-top:1px solid var(--border) } 
.footer-logo { 
display:flex;
align-items:center;
gap:0.5rem;
font-family:'Syne',sans-serif;
font-size:1.1rem;
font-weight:800 } 
.footer-logo span { 
color:var(--purple-light) } 
.footer-copy { 
font-size:0.8rem;
color:var(--text-muted) } 
.footer-legal { 
display:flex;
gap:1.5rem;
flex-wrap:wrap } 
.footer-legal a { 
font-size:0.82rem;
color:var(--text-muted);
transition:color var(--transition) } 
.footer-legal a:hover { 
color:var(--text-primary) } 
.footer-socials a { 
width:38px;
height:38px;
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:50%;
color:var(--text-muted);
font-size:0.9rem;
transition:var(--transition) } 
.footer-socials a:hover { 
color:var(--purple-light);
border-color:var(--purple);
background:rgba(139,92,246,0.1) } 
.modal { 
position:fixed;
inset:0;
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem;
opacity:0;
visibility:hidden;
transition:opacity 0.3s ease,visibility 0.3s ease } 
.modal.open { 
opacity:1;
visibility:visible } 
.modal-backdrop { 
position:absolute;
inset:0;
background:rgba(5,5,15,0.85);
backdrop-filter:blur(8px) } 
.modal-content { 
position:relative;
z-index:1;
width:100%;
max-width:560px;
background:var(--bg-2,#0a0a1a);
border:1px solid var(--border);
border-radius:var(--radius-xl);
overflow:hidden;
box-shadow:0 40px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(139,92,246,0.1);
transform:translateY(20px);
transition:transform 0.3s ease } 
.modal.open .modal-content { 
transform:translateY(0) } 
.modal-close { 
position:absolute;
top:1.2rem;
right:1.2rem;
width:36px;
height:36px;
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:50%;
color:var(--text-secondary);
font-size:0.9rem;
transition:var(--transition);
z-index:10 } 
.modal-close:hover { 
color:white;
border-color:rgba(255,255,255,0.2);
background:var(--surface-hover) } 
.modal-step { 
display:none;
padding:2.5rem } 
.modal-step.active { 
display:block } 
.modal-step-indicator { 
font-family:'Fira Code',monospace;
font-size:0.75rem;
color:var(--purple-light);
margin-bottom:0.5rem } 
.modal-header { 
margin-bottom:2rem } 
.modal-header h2 { 
font-family:'Syne',sans-serif;
font-size:1.5rem;
font-weight:800;
letter-spacing:-0.02em;
margin-bottom:0.4rem } 
.modal-header p { 
color:var(--text-secondary);
font-size:0.9rem } 
.simulator-questions { 
display:flex;
flex-direction:column;
gap:1.5rem;
margin-bottom:2rem } 
.sim-group p { 
font-size:0.9rem;
color:var(--text-secondary);
margin-bottom:0.75rem } 
.radio-toggle { 
display:flex;
gap:0.75rem } 
.radio-toggle label { 
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.7rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
cursor:pointer;
font-size:0.9rem;
font-weight:500;
transition:var(--transition) } 
.radio-toggle input[type=radio] { 
display:none } 
.radio-toggle label:has(input:checked) { 
border-color:rgba(139,92,246,0.5);
background:rgba(139,92,246,0.08);
color:var(--purple-light) } 
.sim-info-box { 
display:flex;
align-items:center;
gap:0.75rem;
padding:1rem;
background:rgba(6,182,212,0.05);
border:1px solid rgba(6,182,212,0.2);
border-radius:var(--radius);
color:var(--cyan-light);
font-size:0.88rem } 
.form-grid { 
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin-bottom:1rem } 
.form-group { 
margin-bottom:1rem } 
.form-group label { 
display:block;
font-size:0.82rem;
font-weight:600;
color:var(--text-secondary);
margin-bottom:0.5rem } 
.form-group input,.form-group textarea { 
width:100%;
padding:0.85rem 1rem;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
color:var(--text-primary);
font-family:inherit;
font-size:0.9rem;
transition:var(--transition);
outline:none;
resize:vertical } 
.form-group input::placeholder,.form-group textarea::placeholder { 
color:var(--text-muted) } 
.form-group input:focus,.form-group textarea:focus { 
border-color:rgba(139,92,246,0.5);
background:rgba(139,92,246,0.04);
box-shadow:0 0 0 3px rgba(139,92,246,0.1) } 
.modal-footer { 
display:flex;
align-items:center;
justify-content:flex-end;
gap:1rem;
padding-top:1.5rem;
border-top:1px solid var(--border);
margin-top:1rem } 
.form-success-msg { 
flex-direction:column;
align-items:center;
text-align:center;
padding:3rem 2rem;
gap:1rem } 
.success-icon { 
font-size:3rem;
color:var(--cyan);
animation:successPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards } 
@keyframes successPop { 
from { 
transform:scale(0);
opacity:0 } 
to { 
transform:scale(1);
opacity:1 } 
 } 
.form-success-msg h3 { 
font-family:'Syne',sans-serif;
font-size:1.5rem;
font-weight:800 } 
.form-success-msg p { 
color:var(--text-secondary);
font-size:0.92rem;
max-width:360px } 
@media (max-width:1200px) { 
.pricing-grid { 
grid-template-columns:repeat(2,1fr) } 
.services-grid { 
grid-template-columns:repeat(2,1fr) } 
 } 
@media (max-width:900px) { 
.hero-section { 
text-align:center;
padding:10rem 5% 4rem } 
.hero-visual { 
display:flex;
margin-top:2rem } 
.hero-card { 
max-width:100% } 
.floating-tag { 
display:none } 
.hero-content { 
max-width:100% } 
.hero-actions { 
justify-content:center } 
.hero-stats { 
max-width:100%;
justify-content:center;
flex-wrap:wrap } 
.scroll-indicator { 
display:none } 
.social-sidebar { 
display:none } 
.about-grid { 
grid-template-columns:1fr;
gap:3rem } 
.about-visual { 
max-width:400px;
margin-inline:auto;
order:1 } 
.about-content { 
text-align:center;
order:2 } 
.about-features { 
align-items:center } 
.kap-container { 
gap:3rem } 
.kap-list { 
grid-template-columns:1fr;
gap:1.5rem } 
.kap-left { 
max-width:100% } 
.kap-left .section-title { 
text-align:center } 
.kap-badge-pill { 
display:inline-block } 
.kap-right { 
justify-content:center } 
.simulator-grid { 
grid-template-columns:1fr } 
.sim-group-full { 
grid-column:span 1 } 
.nav-links,.nav-cta { 
display:none } 
.burger { 
display:flex } 
.portfolio-grid { 
grid-template-columns:1fr } 
 } 
@media (max-width:640px) { 
.section { 
padding:5rem 5% } 
.services-grid { 
grid-template-columns:1fr } 
.pricing-grid { 
grid-template-columns:1fr } 
.form-grid { 
grid-template-columns:1fr } 
.hero-stats { 
flex-direction:column;
gap:1rem } 
.stat-divider { 
width:80%;
height:1px } 
.footer-bottom { 
flex-direction:column;
align-items:center;
text-align:center } 
.footer-legal { 
justify-content:center } 
 } 
::-webkit-scrollbar { 
width:6px } 
::-webkit-scrollbar-track { 
background:var(--bg) } 
::-webkit-scrollbar-thumb { 
background:linear-gradient(var(--purple),var(--cyan));
border-radius:3px } 
::selection { 
background:rgba(139,92,246,0.3);
color:white }