/* menna: */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root {

--bg: #08090d;
--surface: #11131a;
--surface2: #171a23;

--text: #f4f5f7;
--muted: #a5a9b5;

--accent: #8b5cf6;
--accent2: #ec4899;

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

--shadow:
0 25px 70px rgba(0,0,0,.35);
}


body.light {

--bg: #f7f7fb;
--surface: #ffffff;
--surface2: #f0eff7;

--text: #15151b;
--muted: #626575;

--border: rgba(0,0,0,.09);
}


* {
box-sizing: border-box;
margin: 0;
padding: 0;
}


html {
scroll-behavior: smooth;
}


body {

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

background: var(--bg);

color: var(--text);

line-height: 1.6;

transition: .3s;
}


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


/* Header */

.header {

position: fixed;

top: 0;
left: 0;
right: 0;

z-index: 100;

display: flex;

align-items: center;

justify-content: space-between;

padding: 18px 7%;

backdrop-filter: blur(18px);

background: rgba(8,9,13,.8);

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


.logo {

font-size: 1.5rem;

font-weight: 800;
}


.logo span {
color: var(--accent);
}


nav {

display: flex;

gap: 30px;
}


nav a {

color: var(--muted);

font-size: .92rem;

transition: .2s;
}


nav a:hover {
color: var(--text);
}


.theme,
.menu {

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

background: var(--surface);

color: var(--text);

width: 40px;

height: 40px;

border-radius: 50%;

cursor: pointer;

font-size: 1rem;
}


.menu {
display: none;
}


/* Hero */

.hero {

min-height: 100vh;

padding: 150px 7% 80px;

display: grid;

grid-template-columns: 1.1fr .9fr;

gap: 70px;

align-items: center;

max-width: 1400px;

margin: auto;
}


.eyebrow {

color: var(--accent);

font-size: .75rem;

font-weight: 800;

letter-spacing: 3px;

margin-bottom: 14px;
}


.hero h1 {

font-size: clamp(3.2rem, 7vw, 6.5rem);

line-height: .98;

letter-spacing: -5px;
}


.hero h2 {

margin-top: 22px;

font-size: clamp(1.3rem, 3vw, 2rem);

color: var(--muted);
}


.intro {

max-width: 590px;

margin: 22px 0 32px;

color: var(--muted);

font-size: 1.05rem;
}


/* Buttons */

.buttons {

display: flex;

gap: 14px;

flex-wrap: wrap;
}


.btn {

padding: 13px 21px;

border-radius: 12px;

font-weight: 700;

transition: .25s;

display: inline-block;
}


.primary {

background: var(--text);

color: var(--bg);
}


.primary:hover {

transform: translateY(-3px);

box-shadow: var(--shadow);
}


.secondary {

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

background: var(--surface);
}


.secondary:hover {

transform: translateY(-3px);
}


/* Code Card */

.hero-card {

display: flex;

justify-content: center;
}


.code-window {

width: min(100%, 470px);

min-height: 350px;

padding: 24px;

background:
linear-gradient(
145deg,
var(--surface2),
var(--surface)
);

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

border-radius: 24px;

box-shadow: var(--shadow);

transform: rotate(2deg);
}


.dots {

display: flex;

gap: 7px;

margin-bottom: 28px;
}


.dots i {

width: 10px;

height: 10px;

border-radius: 50%;

background: var(--muted);

opacity: .5;
}


pre {

color: var(--muted);

font:
500 .95rem/2
monospace;

white-space: pre-wrap;
}


pre code {
color: var(--text);
}


/* Sections */

.section {

max-width: 1100px;

margin: auto;

padding: 110px 7%;
}


.section-title {

font-size:
clamp(2rem, 5vw, 3.5rem);

line-height: 1.1;

letter-spacing: -2px;

max-width: 800px;
}


.section-text {

max-width: 750px;

color: var(--muted);

margin-top: 24px;

font-size: 1.05rem;
}


/* Projects */

.projects {

/* menna: */
margin-top: 45px;

display: grid;

gap: 20px;
}


.project {

display: grid;

grid-template-columns: 90px 1fr;

gap: 25px;

padding: 32px;

background: var(--surface);

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

border-radius: 22px;

transition: .25s;
}


.project:hover {

transform: translateY(-5px);

border-color:
rgba(139,92,246,.45);
}


.project-number {

font-size: 1.2rem;

font-weight: 800;

color: var(--accent);
}


.project h3 {

font-size: 1.45rem;

margin-bottom: 8px;
}


.project p {

color: var(--muted);

max-width: 700px;
}


.tags {

display: flex;

gap: 8px;

margin: 18px 0;

flex-wrap: wrap;
}


.tags span {

padding: 5px 10px;

border-radius: 20px;

background: var(--surface2);

color: var(--muted);

font-size: .75rem;
}


.project-link {

color: var(--text);

font-weight: 700;
}


.project-link:hover {

color: var(--accent);
}


/* Skills */

.skills {

margin-top: 40px;

display: grid;

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

gap: 16px;
}


.skill {

padding: 25px;

background: var(--surface);

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

border-radius: 18px;
}


.skill strong {

display: block;

font-size: 1.1rem;
}


.skill span {

color: var(--muted);

font-size: .9rem;
}


/* Contact */

.contact {

text-align: center;

padding: 120px 7%;

background: var(--surface);

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


.contact h2 {

font-size:
clamp(2.2rem, 5vw, 4.2rem);

letter-spacing: -2px;
}


.contact p:not(.eyebrow) {

color: var(--muted);

margin: 12px 0 28px;
}


/* Footer */

footer {

text-align: center;

padding: 28px;

color: var(--muted);

font-size: .8rem;
}


/* Mobile */

@media (max-width: 760px) {

.header {
padding: 15px 5%;
}


nav {

position: absolute;

top: 70px;

left: 5%;

right: 5%;

padding: 20px;

display: none;

flex-direction: column;

gap: 16px;

background: var(--surface);

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

border-radius: 16px;
}


nav.open {
display: flex;
}


.menu {

display: block;

margin-left: auto;

margin-right: 8px;

border-radius: 10px;
}


.hero {

grid-template-columns: 1fr;

padding: 130px 7% 70px;

gap: 45px;
}


.hero h1 {

letter-spacing: -3px;
}


.code-window {

transform: none;
}


.section {

padding: 80px 7%;
}


.project {

grid-template-columns: 1fr;

gap: 10px;
}


.skills {

grid-template-columns: 1fr;
}

}