/* ===================================
   DAYO KUSEJU PORTFOLIO
   =================================== */

:root{

    --bg:#0A0E27;
    --bg2:#121936;

    --card:rgba(255,255,255,.05);

    --border:rgba(255,255,255,.08);

    --cyan:#22D3EE;

    --gold:#F59E0B;

    --text:#F8FAFC;

    --muted:#94A3B8;

    --shadow:0 15px 40px rgba(0,0,0,.35);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    position:relative;

}

/*=========================
 Animated Background
==========================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(34,211,238,.15),
    transparent 35%),

    radial-gradient(circle at 80% 20%,
    rgba(245,158,11,.10),
    transparent 30%),

    radial-gradient(circle at 70% 80%,
    rgba(34,211,238,.08),
    transparent 35%),

    radial-gradient(circle at 10% 80%,
    rgba(245,158,11,.06),
    transparent 30%);

    animation:gradientMove 18s ease infinite;

    z-index:-3;

}

@keyframes gradientMove{

0%{

transform:translate(0,0);

}

25%{

transform:translate(-50px,-40px);

}

50%{

transform:translate(50px,20px);

}

75%{

transform:translate(-30px,40px);

}

100%{

transform:translate(0,0);

}

}

/*=========================
 Grid Texture
==========================*/

body::after{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:50px 50px;

opacity:.25;

z-index:-2;

}

/*=========================
 Container
==========================*/

section{

padding:120px 9%;

position:relative;

}

.section-title{

margin-bottom:70px;

}

.section-title h2{

font-family:'Space Grotesk',sans-serif;

font-size:3rem;

margin-bottom:12px;

}

.section-title p{

color:var(--muted);

font-size:1.1rem;

}

/*=========================
 Navbar
==========================*/

nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 9%;

display:flex;

justify-content:space-between;

align-items:center;

backdrop-filter:blur(20px);

background:rgba(10,14,39,.55);

border-bottom:1px solid rgba(255,255,255,.06);

z-index:999;

transition:.35s;

}

.logo{

font-family:'Space Grotesk',sans-serif;

font-weight:700;

font-size:1.2rem;

letter-spacing:2px;

color:white;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

text-decoration:none;

color:#fff;

font-size:.95rem;

transition:.35s;

}

nav a:hover{

color:var(--cyan);

}

/*=========================
 Hero
==========================*/

#hero{

display:grid;

grid-template-columns:1fr 450px;

gap:70px;

align-items:center;

min-height:100vh;

}

.hero-text h1{

font-family:'Space Grotesk',sans-serif;

font-size:5rem;

line-height:1;

margin-bottom:18px;

}

.hero-text h2{

font-family:'Space Grotesk',sans-serif;

font-size:2rem;

color:var(--cyan);

margin-bottom:28px;

line-height:1.4;

}

.hero-text p{

max-width:650px;

font-size:1.15rem;

line-height:1.9;

color:var(--muted);

margin-bottom:40px;

}

/*=========================
 Buttons
==========================*/

.buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.primary,

.secondary{

padding:16px 34px;

border-radius:60px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.primary{

background:var(--cyan);

color:#08111f;

box-shadow:

0 0 25px rgba(34,211,238,.45);

}

.primary:hover{

transform:translateY(-5px);

box-shadow:

0 0 50px rgba(34,211,238,.6);

}

.secondary{

border:1px solid rgba(255,255,255,.15);

color:white;

}

.secondary:hover{

background:white;

color:#111827;

}

/*=========================
 Hero Image
==========================*/

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:420px;

height:420px;

object-fit:cover;

border-radius:30px;

border:2px solid rgba(255,255,255,.08);

box-shadow:var(--shadow);

transition:.6s;

}

.hero-image img:hover{

transform:translateY(-12px);

box-shadow:

0 0 70px rgba(34,211,238,.25);

}

/*=========================
 Glass Cards
==========================*/

.card,

.stat{

background:var(--card);

backdrop-filter:blur(16px);

border:1px solid var(--border);

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover,

.stat:hover{

transform:translateY(-8px);

border-color:rgba(34,211,238,.35);

}

/*=========================
 Research Section
==========================*/

.stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-bottom:70px;

}

.stat{

padding:40px 30px;

text-align:center;

}

.stat h3{

font-family:'Space Grotesk',sans-serif;

font-size:4rem;

color:var(--cyan);

margin-bottom:10px;

}

.stat span{

font-size:1rem;

color:var(--muted);

text-transform:uppercase;

letter-spacing:1px;

}

.research-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:center;

}

.research-text h3{

font-family:'Space Grotesk',sans-serif;

font-size:2rem;

margin-bottom:25px;

}

.research-text p{

font-size:1.05rem;

line-height:1.9;

color:var(--muted);

margin-bottom:25px;

}

.dashboard-btn{

display:inline-block;

padding:16px 34px;

background:var(--gold);

color:#111827;

font-weight:700;

text-decoration:none;

border-radius:50px;

transition:.35s;

box-shadow:0 0 25px rgba(245,158,11,.35);

}

.dashboard-btn:hover{

transform:translateY(-6px);

box-shadow:0 0 45px rgba(245,158,11,.55);

}

.dashboard{

position:relative;

padding:18px;

background:#111827;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 20px 60px rgba(0,0,0,.45);

overflow:hidden;

}

.dashboard::before{

content:"";

display:block;

height:14px;

margin-bottom:18px;

background:
radial-gradient(circle,#ef4444 5px,transparent 6px) left center/24px 14px no-repeat,
radial-gradient(circle,#f59e0b 5px,transparent 6px) 24px center/24px 14px no-repeat,
radial-gradient(circle,#22c55e 5px,transparent 6px) 48px center/24px 14px no-repeat;

}

.dashboard img{

width:100%;

display:block;

border-radius:14px;

transition:.5s;

}

.dashboard:hover img{

transform:scale(1.03);

}

.dashboard::after{

content:"";

position:absolute;

inset:0;

border-radius:22px;

box-shadow:0 0 50px rgba(34,211,238,.12);

pointer-events:none;

}

/*=========================
 About
==========================*/

.about-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:start;

}

.about-grid p{

font-size:1.08rem;

line-height:2;

color:var(--muted);

}

.tech-stack{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.tech-stack div{

padding:18px;

background:var(--card);

border:1px solid var(--border);

border-radius:16px;

text-align:center;

font-weight:600;

transition:.3s;

}

.tech-stack div:hover{

background:rgba(34,211,238,.12);

border-color:var(--cyan);

transform:translateY(-5px);

}

/*=========================
 Experience
==========================*/

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.card{

padding:35px;

}

.card h3{

font-family:'Space Grotesk',sans-serif;

font-size:1.45rem;

margin-bottom:10px;

}

.card h4{

color:var(--gold);

margin-bottom:18px;

font-weight:500;

}

.card p{

color:var(--muted);

line-height:1.8;

}

/*=========================
 Skills
==========================*/

.card ul{

list-style:none;

margin-top:20px;

}

.card ul li{

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.05);

color:var(--muted);

}

.card ul li:last-child{

border-bottom:none;

}

/*=========================
 Contact
==========================*/

form{

display:grid;

gap:20px;

max-width:750px;

margin:auto;

}

form input,

form textarea{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:18px;

border-radius:14px;

font-family:'Inter',sans-serif;

color:white;

font-size:1rem;

outline:none;

transition:.3s;

}

form textarea{

min-height:180px;

resize:vertical;

}

form input:focus,

form textarea:focus{

border-color:var(--cyan);

box-shadow:0 0 20px rgba(34,211,238,.15);

}

form button{

padding:18px;

border:none;

background:var(--cyan);

color:#08111f;

font-weight:700;

font-size:1rem;

border-radius:50px;

cursor:pointer;

transition:.35s;

}

form button:hover{

transform:translateY(-4px);

box-shadow:0 0 30px rgba(34,211,238,.35);

}

.socials{

margin-top:50px;

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.socials a{

text-decoration:none;

color:white;

font-size:1.05rem;

transition:.3s;

}

.socials a i{

margin-right:10px;

color:var(--cyan);

font-size:1.2rem;

}

.socials a:hover{

color:var(--cyan);

}

.mission{

text-align:center;

margin-top:50px;

color:var(--muted);

font-size:1.05rem;

}

/*=========================
 Reveal Animation
==========================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*=========================
 Responsive
==========================*/

@media(max-width:1100px){

#hero,
.research-grid,
.about-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

margin-top:50px;

}

.cards{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.tech-stack{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

nav{

padding:18px 6%;

}

nav ul{

display:none;

}

section{

padding:90px 6%;

}

.hero-text h1{

font-size:3.5rem;

}

.hero-text h2{

font-size:1.5rem;

}

.hero-image img{

width:280px;

height:280px;

}

.section-title h2{

font-size:2.2rem;

}

.stat h3{

font-size:3rem;

}

.tech-stack{

grid-template-columns:1fr;

}

.buttons{

justify-content:center;

}

}