:root{
--panel:rgba(15,23,42,.84);
--line:rgba(148,163,184,.18);
--text:#e5eefb;
--muted:#94a3b8;
--soft:#cbd5e1;
--cyan:#22d3ee;
--blue:#60a5fa;
--emerald:#34d399;
--shadow:0 24px 80px rgba(0,0,0,.35);
--radius:28px
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--text);
background:radial-gradient(circle at top left,rgba(34,211,238,.18),transparent 34rem),radial-gradient(circle at top right,rgba(96,165,250,.15),transparent 30rem),linear-gradient(135deg,#06101d 0%,#0f172a 50%,#111827 100%);
line-height:1.65;
transition:background .3s ease
}

body.light-mode{
--text:#0f172a;
--muted:#475569;
--soft:#64748b;
--panel:rgba(226,232,240,.95);
--line:rgba(148,163,184,.3);
background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%)
}

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

a:hover{
color:var(--cyan)
}

@keyframes fadeInUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes slideInLeft{
from{opacity:0;transform:translateX(-30px)}
to{opacity:1;transform:translateX(0)}
}

@keyframes slideInRight{
from{opacity:0;transform:translateX(30px)}
to{opacity:1;transform:translateX(0)}
}

@keyframes slideInDown{
from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes pulse-glow{
0%{box-shadow:0 0 0 0 rgba(34,211,238,.7)}
70%{box-shadow:0 0 0 10px rgba(34,211,238,0)}
100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}

.scroll-hidden{opacity:0;transform:translateY(30px)}
.scroll-visible{animation:fadeInUp .6s ease-out}

.theme-toggle{
position:fixed;top:20px;right:20px;z-index:999;
width:50px;height:50px;border-radius:50%;
background:rgba(34,211,238,.2);border:2px solid var(--cyan);
color:var(--cyan);font-size:1.2rem;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .3s ease
}

.theme-toggle:hover{
background:var(--cyan);color:#04111f;transform:rotate(20deg)
}
.site-shell{
width:min(1220px,calc(100% - 32px));
margin:0 auto
}
.hero{
min-height:650px;
padding:24px 0 44px;
position:relative
}
.section-glow:after{
content:"";
position:absolute;
inset:80px -40px auto auto;
width:340px;
height:340px;
background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(52,211,153,.14));
filter:blur(68px);
z-index:-1
}
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:14px 18px;
margin-bottom:52px;
background:rgba(15,23,42,.55);
border:1px solid var(--line);
border-radius:999px;
backdrop-filter:blur(18px);
box-shadow:var(--shadow);
animation:slideInDown .6s ease-out
}
.brand,.nav-links{
display:flex;
align-items:center;
gap:14px
}
.brand{
font-weight:800;
animation:slideInLeft .6s ease-out .1s both
}
.brand-mark{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:14px;
color:#04111f;
background:linear-gradient(135deg,var(--cyan),var(--emerald));
font-weight:900;
animation:pulse-glow 2s infinite
}
.nav-links{
animation:slideInRight .6s ease-out .1s both
}
.nav-links a{
color:var(--soft);
font-size:.96rem;
transition:color .3s ease,text-shadow .3s ease
}
.nav-links a:hover{
color:var(--cyan);
text-shadow:0 0 10px rgba(34,211,238,.5)
}
.hero-grid{
display:grid;
grid-template-columns:330px 1fr;
gap:46px;
align-items:center
}
.avatar-card{
padding:18px;
background:linear-gradient(145deg,rgba(34,211,238,.16),rgba(15,23,42,.88));
border:1px solid var(--line);
border-radius:36px;
box-shadow:var(--shadow);
animation:slideInLeft .6s ease-out .2s both;
transition:all .3s ease
}
.avatar-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px rgba(34,211,238,.2)
}
.avatar-card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:28px;
border:1px solid rgba(255,255,255,.12);
transition:transform .3s ease,filter .3s ease
}
.avatar-card img:hover{
transform:scale(1.05);
filter:brightness(1.1)
}
.availability-dot{
display:flex;
gap:10px;
align-items:center;
margin-top:16px;
color:var(--soft);
font-size:.9rem;
animation:fadeInUp .6s ease-out .3s both
}
.availability-dot span{
width:10px;
height:10px;
border-radius:999px;
background:var(--emerald);
box-shadow:0 0 0 8px rgba(52,211,153,.12);
animation:pulse-glow 2s infinite
}
.eyebrow{
margin:0 0 10px;
color:var(--cyan);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.75rem;
font-weight:800
}
h1,h2,h3,h4,p{
margin-top:0
}
h1{
margin-bottom:10px;
font-size:clamp(2rem,5vw,3.2rem);
line-height:.95;
letter-spacing:-.075em;
font-weight:600;
background:linear-gradient(135deg,var(--cyan),var(--blue));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:fadeInUp .6s ease-out .1s both
}
.hero-content h2{
max-width:980px;
color:var(--text);
font-size:clamp(1rem,2.5vw,1.6rem);
line-height:1.08;
letter-spacing:-.055em;
font-weight:500;
animation:fadeInUp .6s ease-out .2s both
}
.hero-summary{
max-width:880px;
color:var(--soft);
font-size:1.12rem;
animation:fadeInUp .6s ease-out .3s both
}
.tagline{
display:inline-flex;
padding:10px 14px;
color:#dffcff;
background:rgba(34,211,238,.09);
border:1px solid rgba(34,211,238,.22);
border-radius:999px;
font-weight:700;
animation:fadeInUp .6s ease-out .4s both
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:24px;
animation:fadeInUp .6s ease-out .5s both
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 18px;
border:1px solid var(--line);
border-radius:999px;
color:var(--text);
background:rgba(15,23,42,.74);
font-weight:800;
transition:all .3s ease;
cursor:pointer;
position:relative;
overflow:hidden
}
.btn:hover{
border-color:var(--cyan);
box-shadow:0 0 20px rgba(34,211,238,.4);
transform:translateY(-2px)
}
.btn.primary{
color:#04111f;
background:linear-gradient(135deg,var(--cyan),var(--emerald));
border-color:transparent
}
.btn.primary:hover{
background:linear-gradient(135deg,var(--emerald),var(--blue));
box-shadow:0 0 30px rgba(34,211,238,.5)
}
.layout{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:28px;
align-items:start;
margin-bottom:36px
}
.content-column,.sidebar{
display:grid;
gap:28px;
align-content:start
}
.panel{
padding:clamp(22px,3vw,34px);
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
backdrop-filter:blur(18px);
overflow-wrap:anywhere;
animation:fadeInUp .6s ease-out;
transition:all .3s ease
}
.panel:hover{
border-color:rgba(34,211,238,.3);
box-shadow:0 30px 60px rgba(34,211,238,.15)
}
.section-heading{
margin-bottom:22px
}
.section-heading h2{
margin:0;
font-size:clamp(1.7rem,3vw,2.45rem);
line-height:1.1;
letter-spacing:-.04em
}
.section-heading.compact h2{
font-size:1.7rem
}
.lead{
color:var(--soft);
font-size:1.08rem
}
.lead+.lead{
margin-top:16px
}
.focus-grid,.project-grid,.value-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.focus-card,.project-card,.stat-card,.value-card{
background:rgba(30,41,59,.58);
border:1px solid var(--line);
border-radius:22px;
padding:20px;
transition:all .3s ease;
animation:fadeInUp .6s ease-out;
position:relative;
overflow:hidden
}
.focus-card:hover,.project-card:hover,.value-card:hover{
border-color:var(--cyan);
background:linear-gradient(145deg,rgba(34,211,238,.15),rgba(30,41,59,.8));
transform:translateY(-4px);
box-shadow:0 20px 40px rgba(34,211,238,.2)
}
.value-card{
background:linear-gradient(145deg,rgba(34,211,238,.09),rgba(30,41,59,.56))
}
.focus-card h3,.project-card h3,.value-card h3{
margin-bottom:8px;
letter-spacing:-.03em
}
.focus-card p,.project-card p,.value-card p{
color:var(--muted);
margin-bottom:0
}
.timeline{
position:relative;
display:grid;
gap:20px
}
.timeline:before{
content:"";
position:absolute;
left:11px;
top:0;
bottom:0;
width:2px;
background:linear-gradient(var(--cyan),rgba(96,165,250,.1))
}
.timeline-item{
display:grid;
grid-template-columns:24px 1fr;
gap:18px
}
.timeline-marker{
width:24px;
height:24px;
border-radius:999px;
background:linear-gradient(135deg,var(--cyan),var(--blue));
box-shadow:0 0 0 8px rgba(34,211,238,.08);
z-index:1
}
.timeline-body{
padding:20px;
background:rgba(30,41,59,.44);
border:1px solid var(--line);
border-radius:22px;
transition:all .3s ease
}
.timeline-body:hover{
border-color:var(--cyan);
background:rgba(34,211,238,.1);
transform:translateX(4px)
}
.timeline-body h4{
color:var(--cyan);
margin-bottom:6px
}
.meta{
color:var(--muted);
font-size:.92rem
}
ul{
margin:12px 0 0;
padding-left:20px;
color:var(--soft)
}
.project-card{
display:flex;
flex-direction:column;
min-height:100%
}
.project-type{
color:var(--cyan)!important;
font-size:.82rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em
}
.impact{
margin-top:12px
}
.tags,.skill-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px
}
.tags span,.skill-tags span{
padding:6px 10px;
border-radius:999px;
background:rgba(96,165,250,.1);
border:1px solid rgba(96,165,250,.18);
color:#dbeafe;
font-size:.82rem;
font-weight:700
}
.stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-bottom:24px
}
.stat-card{
padding:14px
}
.stat-card strong{
display:block;
font-size:1.45rem;
color:var(--cyan);
line-height:1
}
.stat-card span{
color:var(--muted);
font-size:.82rem
}
.skill-groups{
display:grid;
gap:18px
}
.skill-group h3{
margin-bottom:6px;
font-size:1rem;
color:var(--soft)
}
.quotes{
display:grid;
gap:12px
}
blockquote{
margin:0;
padding:16px;
color:var(--soft);
background:rgba(34,211,238,.07);
border-left:3px solid var(--cyan);
border-radius:14px
}
.contact-list{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:14px
}
.contact-list span{
color:var(--muted);
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:800
}
.footer{
padding:28px 0 44px;
text-align:center;
color:var(--muted)
}
.view-counter{
font-size:.82rem;
color:#64748b
}
.view-counter a{
color:#94a3b8;
text-decoration:none;
transition:all .3s ease
}
.view-counter a:hover{
text-decoration:underline;
text-shadow:0 0 10px rgba(34,211,238,.5)
}

.testimonials{
margin:28px 0
}

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

.testimonial-card{
background:linear-gradient(145deg,rgba(34,211,238,.12),rgba(30,41,59,.6));
border:1px solid var(--line);
border-radius:16px;
padding:20px;
position:relative;
overflow:hidden;
animation:fadeInUp .6s ease-out;
transition:all .3s ease
}

.testimonial-card:hover{
border-color:var(--cyan);
transform:translateY(-4px);
box-shadow:0 20px 40px rgba(34,211,238,.15)
}

.testimonial-text{
color:var(--soft);
font-size:.95rem;
line-height:1.7;
margin-bottom:12px;
position:relative;
z-index:1
}

.cta-section{
background:linear-gradient(135deg,rgba(34,211,238,.1),rgba(52,211,153,.05));
border:1px solid var(--line);
border-radius:var(--radius);
padding:40px;
text-align:center;
animation:fadeInUp .6s ease-out;
transition:all .3s ease
}

.cta-section:hover{
border-color:var(--cyan);
background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(52,211,153,.1))
}

.cta-section h2{
font-size:2rem;
margin-bottom:12px;
color:var(--text)
}

.cta-section p{
color:var(--soft);
font-size:1.1rem;
margin-bottom:24px;
max-width:600px;
margin-left:auto;
margin-right:auto
}

@keyframes slideInUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}

.footer{
background:linear-gradient(135deg,#0a0f1b 0%,#0f172a 100%);
border-top:1px solid var(--line);
padding:28px;
text-align:center;
margin-top:auto;
animation:slideInUp .6s ease-out
}

.footer p{
font-size:.85rem;
color:var(--muted)
}

.footer p:first-child{
margin-bottom:12px;
color:var(--text)
}
.admin-shell{
padding:34px 0
}
.login-form{
display:flex;
gap:12px;
flex-wrap:wrap
}
.login-form input{
min-height:46px;
padding:0 14px;
border-radius:999px;
border:1px solid var(--line);
background:rgba(15,23,42,.85);
color:var(--text)
}
.error{
color:#fca5a5
}
.hint,code{
color:var(--muted)
}
.table-wrap{
overflow:auto
}
table{
width:100%;
border-collapse:collapse;
margin-top:18px
}
th,td{
padding:12px;
border-bottom:1px solid var(--line);
text-align:left
}
th{
color:var(--cyan)
}
@media(max-width:980px){
.hero-grid,.layout{
grid-template-columns:1fr
}
.avatar-card{
max-width:360px
}
}
@media(max-width:768px){
.hero-grid{
grid-template-columns:1fr;
gap:2rem
}
.layout{
grid-template-columns:1fr
}
.focus-grid,.project-grid,.value-grid{
grid-template-columns:1fr
}
.nav-links{
display:none
}
.hero-actions{
flex-direction:column
}
.btn{
width:100%;
text-align:center
}
.contact-list li{
flex-direction:column;
align-items:flex-start
}
.theme-toggle{
width:45px;
height:45px;
font-size:1rem
}
.cta-section{
padding:30px 20px
}
}

@media(max-width:480px){
.hero{
padding:1.5rem 0 2rem
}
h1{
font-size:1.5rem
}
.hero-content h2{
font-size:.95rem
}
.panel{
padding:1.5rem
}
.focus-grid,.project-grid,.value-grid{
gap:12px
}
.topbar{
padding:12px 14px;
margin-bottom:32px
}
.testimonial-grid{
grid-template-columns:1fr
}
}