/* =========================
   ROOT VARIABLES
========================= */

:root {

   --bg: #ffffff;
   --surface: #f6f6f6;
   --surface-2: #ededed;

   --text: #0d0d0d;
   --muted: #5e5e5e;

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

   --accent: #5aabde;
   --accent-2: #3a8fc4;

   --nav-bg: rgba(255, 255, 255, .94);

   --radius: 8px;

   --max: 1180px;

   --nav-h: 72px;

}


/* DARK MODE */

@media (prefers-color-scheme: dark) {
   :root {

      --bg: #0a0a0a;
      --surface: #141414;
      --surface-2: #1e1e1e;

      --text: #f0f0f0;
      --muted: #888888;

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

      --nav-bg: rgba(10, 10, 10, .94);

   }
}


/* =========================
   RESET
========================= */

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

html {
   scroll-behavior: smooth;
}

body {

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

   background: var(--bg);

   color: var(--text);

   line-height: 1.65;

   overflow-x: hidden;

cursor: default;

}

img {
   display: block;
   width: 100%;
   height: auto;
}

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



/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3 {
   font-family: 'Raleway', sans-serif;
   line-height: 1.05;
}

h1 {
   font-size: clamp(3rem, 7vw, 6.5rem);
   font-weight: 600;
   letter-spacing: -0.03em;
}

h1 span {
   color: var(--accent);
}

h2 {
   font-size: clamp(2rem, 4.5vw, 3.5rem);
   font-weight: 550;
   letter-spacing: -0.02em;
}

h3 {
   font-size: 1.05rem;
   font-weight: 500;
   letter-spacing: -0.01em;
}

p {
   color: var(--muted);
   font-size: 1rem;
   line-height: 1.8;
   font-weight: 400;
}



/* =========================
   LAYOUT
========================= */

.container {

   width: min(100%, var(--max));

   max-width: var(--max);

   margin: auto;

   padding: 0 30px;

}

.section {

   padding: 110px 0;

}

.section-header {

   margin-bottom: 60px;

}



/* =========================
   TAG
========================= */

.tag {

   display: inline-block;

   border: 1px solid currentColor;

   color: var(--accent);

   padding: 5px 11px;

   border-radius: 3px;

   margin-bottom: 22px;

   font-size: 10px;

   font-weight: 700;

   letter-spacing: .20em;

   text-transform: uppercase;

}



/* =========================
   BUTTONS
========================= */

.btn {

   display: inline-block;

   padding: 12px 28px;

   border-radius: 6px;

   font-family: 'Raleway';

   font-weight: 700;

   font-size: .9rem;

   letter-spacing: .04em;

   transition: .2s;

}

.btn-primary {

   background: var(--accent);

   color: #fff;

}

.btn-primary:hover {

   background: var(--accent-2);

}

.btn-outline {

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

   color: var(--text);

   background: transparent;

}

.btn-outline:hover {

   border-color: var(--accent);

   color: var(--accent);

}

.btn-ghost {

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

   color: #fff;

}

.btn-ghost:hover {

   border-color: var(--accent);

   color: var(--accent);

}



/* =========================
   NAVIGATION
========================= */

nav {

   position: sticky;

   top: 0;

   height: var(--nav-h);

   background: var(--nav-bg);

   backdrop-filter: blur(18px);

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

   z-index: 100;

   display: flex;

   align-items: center;

}

.nav-inner {

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 18px;

   width: 100%;

   max-width: none;

   min-width: 0;

   padding: 0 40px;

}

.nav-logo {

   display: flex;

   align-items: center;

   gap: 14px;

   flex-shrink: 0;

   min-width: 0;

}

.logo-placeholder {

   width: 40px;

   height: 40px;

   border-radius: 10px;

   background: var(--accent);

   display: flex;

   align-items: center;

   justify-content: center;

   font-weight: 800;

}

.nav-wordmark {

   font-family: 'Raleway';

   font-weight: 700;

   font-size: 1rem;

   white-space: nowrap;

}

.nav-links {
   display: flex;
   align-items: center;
   font-size: 1rem;
   gap: 32px;
   list-style: none;
   margin-left: auto;

}

.nav-links a:hover {
   color: var(--accent);
}

.nav-controls {

   display: flex;

   align-items: center;

   gap: 12px;

   margin-left: 24px;

   flex-shrink: 0;

}

.icon-btn {

   width: 40px;

   height: 40px;

   border-radius: 10px;

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

   background: var(--surface);

   color: var(--text);

   display: flex;

   align-items: center;

   justify-content: center;

   cursor: pointer;

}

.hamburger {
   display: none;
   font-size: 1.15rem;
   line-height: 1;
}



/* =========================
   MOBILE MENU
========================= */

.mobile-menu {

   display: none;

   position: fixed;

   top: var(--nav-h);

   left: 0;

   right: 0;

   background: var(--bg);

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

   box-shadow: 0 18px 48px rgba(0, 0, 0, .08);

   padding: 20px 30px 24px;

   z-index: 99;

}

.mobile-menu.open {
   display: block;
}

.mobile-menu ul {
   list-style: none;
   display: grid;
   gap: 12px;
}

.mobile-menu li {
   margin-bottom: 0;
}

.mobile-link {
   display: block;
   padding: 12px 0;
   font-size: .95rem;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
}

.mobile-menu-actions {
   display: grid;
   gap: 12px;
   margin-top: 16px;
}

.mobile-menu .btn {
   width: 100%;
   text-align: center;
}



/* =========================
   HERO (CINEMATIC FIX)
========================= */

.hero {

   position: relative;

   min-height: 90vh;

   display: flex;

   align-items: center;

   padding: 120px 0;

   overflow: hidden;

}

/* background image */
.hero::before {

   content: "";

   position: absolute;

   inset: 0;

   z-index: 0;

}

.hero-bg {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

   object-fit: cover;

   object-position: center;

   z-index: 0;

   max-width: none;

   display: block;

}

/* overlay */
.hero::after {

   content: "";

   position: absolute;

   inset: 0;

   background:
      linear-gradient(to right, rgba(5, 5, 5, .82) 0%, rgba(5, 5, 5, .45) 50%, rgba(5, 5, 5, .08) 100%),
      linear-gradient(to top, rgba(5, 5, 5, .55) 0%, transparent 45%);

   z-index: 1;

}

.hero-inner {

   position: relative;

   z-index: 2;

   display: grid;

   grid-template-columns: 1fr;

   gap: 70px;

   align-items: center;

   min-width: 0;

   max-width: none;

   padding: 0 40px;

}

.hero h1,
.hero-sub {

   color: #fff;

}

.hero-sub {

   font-size: 1.25rem;

   margin: 30px 0;

   max-width: 520px;

   opacity: .85;

}

.hero-actions {

   display: flex;

   gap: 15px;

   flex-wrap: wrap;

}

.hero .btn-ghost {

   border-color: rgba(255, 255, 255, .30);

   color: #fff;

}

.hero .btn-ghost:hover {

   border-color: var(--accent);

   color: var(--accent);

}

.nav-cta {

   color: #fff !important;

}

.nav-cv {

   border-color: var(--border) !important;

   color: var(--text) !important;

}

.nav-cv:hover {

   border-color: var(--accent) !important;

   color: var(--accent) !important;

}



/* =========================
   STATS
========================= */

.stats {

   padding: 70px 0;

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

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

}

.stats-grid {

   display: grid;

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

   gap: 30px;

   text-align: center;

}

.stat-num {

   font-size: 3rem;

   font-family: 'Raleway';

   font-weight: 800;

   color: var(--accent);

}



/* =========================
   PROJECTS
========================= */

.projects-grid {

   display: grid;

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

   gap: 35px;

}

.projects-grid > a {

   display: block;

   min-width: 0;

}

.project-card {

   background: var(--surface);

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

   border-radius: var(--radius);

   overflow: hidden;

   height: 100%;

   transition: .25s;

}

.project-card:hover {

   transform: translateY(-4px);

   border-color: var(--accent);

   box-shadow: 0 12px 40px rgba(90,171,222,.12);

}

.project-img {

   aspect-ratio: 4 / 3;

   overflow: hidden;

}

.project-placeholder-img {

   width: 100%;

   height: 100%;

   background: var(--surface-2);

}

.project-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .5s ease;
}

.project-card:hover .project-img img {
   transform: scale(1.04);
}

.project-info {

   padding: 24px;

}

.project-category {

   font-size: 11px;

   font-weight: 700;

   letter-spacing: .12em;

   text-transform: uppercase;

   color: var(--accent);

   display: block;

   margin-bottom: 8px;

}

.project-info h3 {

   margin-bottom: 8px;

}

.project-info p {

   font-size: .95rem;

}



/* =========================
   PROJECT DETAIL SECTIONS
========================= */

.project-detail {

   padding: 100px 0;

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

}

.project-detail--alt {

   background: var(--surface);

}

/* ── Main row: image left | content right ── */

.project-detail-main {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 60px;

   align-items: start;

}

.project-detail-img {

   aspect-ratio: 3 / 2;

   overflow: hidden;

   border-radius: var(--radius);

}

.project-detail-img img {

   width: 100%;

   height: 100%;

   object-fit: cover;

   display: block;

}

.project-detail-content .tag {

   margin-bottom: 16px;

}

.project-detail-content h2 {

   font-size: clamp(1.6rem, 3vw, 2.4rem);

   margin-bottom: 24px;

}

.project-detail-content p {

   font-size: 1rem;

   margin-bottom: 20px;

}

/* ── Meta grid ── */

.project-meta {

   list-style: none;

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 20px 30px;

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

   padding-top: 24px;

   margin: 8px 0 32px;

}

.project-meta li {

   font-size: .95rem;

   color: var(--muted);

}

.project-meta li span {

   display: block;

   font-size: .7rem;

   font-weight: 700;

   letter-spacing: .12em;

   text-transform: uppercase;

   color: var(--text);

   margin-bottom: 5px;

}

/* ── Buttons: stacked full-width ── */

.project-btns {

   display: flex;

   flex-direction: column;

   gap: 12px;

}

.btn-outline {

   display: block;

   padding: 13px 20px;

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

   border-radius: 10px;

   font-family: 'Raleway';

   font-size: .95rem;

   font-weight: 600;

   transition: .2s;

   text-align: center;

}

.btn-outline:hover {

   border-color: var(--accent);

   color: var(--accent);

}

/* ── Gallery: 2 images below ── */

.project-gallery {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 24px;

   margin-top: 40px;

}

.project-gallery img {

   width: 100%;

   border-radius: var(--radius);

   display: block;

}

/* Dissertation cover — portrait format, show whole image */
#project-3 .project-detail-img {
   aspect-ratio: auto;
}

#project-3 .project-detail-img img {
   object-fit: contain;
   background: #f0ebe0;
}

/* About image */
.split-img img {
   border-radius: var(--radius);
   object-fit: cover;
}

/* ── Mobile ── */

@media (max-width: 900px) {

   .project-detail-main {

      grid-template-columns: 1fr;

      gap: 36px;

   }

   .project-gallery {

      grid-template-columns: 1fr;

   }

}



/* =========================
   ABOUT
========================= */

#about {

   background: #080808;

}

#about h2 {

   color: #f4f4f4;

}

#about p {

   color: rgba(244, 244, 244, 0.55);

}

#about .tag {

   color: var(--accent);

}

#about strong {

   color: #f4f4f4;

   font-weight: 600;

}

.split {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 80px;

   align-items: center;

   min-width: 0;

}

.split-img {

   overflow: hidden;

   border-radius: var(--radius);

   max-height: 560px;

}

.split-img img {

   width: 100%;

   height: 100%;

   object-fit: cover;

   object-position: top;

   border-radius: var(--radius);

}

.checklist {

   list-style: none;

   margin: 28px 0;

}

.checklist li {

   margin-bottom: 12px;

   color: rgba(244, 244, 244, 0.55);

   padding-left: 20px;

   position: relative;

}

.checklist li::before {

   content: "—";

   position: absolute;

   left: 0;

   color: var(--accent);

   font-weight: 700;

}



/* =========================
   TESTIMONIALS
========================= */

.testimonials-grid {

   display: grid;

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

   gap: 30px;

}

.testimonial {

   padding: 40px;

   background: var(--surface);

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

   border-radius: var(--radius);

}



/* =========================
   CONTACT
========================= */

.contact-grid {

   display: grid;

   grid-template-columns: 1fr 1.3fr;

   gap: 60px;

   min-width: 0;

}

.contact-info p {

   max-width: 34rem;

}

.contact-card {

   background: var(--surface);

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

   padding: 28px;

   border-radius: 18px;

   display: grid;

   gap: 16px;

}

.contact-link {

   display: grid;

   grid-template-columns: auto 1fr;

   align-items: center;

   gap: 16px;

   padding: 18px 20px;

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

   border-radius: 14px;

   background: var(--bg);

   transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;

}

.contact-link:hover {

   border-color: var(--accent);

   transform: translateY(-2px);

   box-shadow: 0 12px 30px rgba(90,171,222,.10);

}

.contact-link-icon {

   width: 46px;

   height: 46px;

   border-radius: 12px;

   background: rgba(90,171,222,.12);

   color: var(--accent);

   display: flex;

   align-items: center;

   justify-content: center;

   font-size: 1.1rem;

}

.contact-link-copy {

   display: grid;

   gap: 2px;

   min-width: 0;

}

.contact-link-label {

   font-size: .78rem;

   font-weight: 700;

   letter-spacing: .14em;

   text-transform: uppercase;

   color: var(--accent);

}

.contact-link-value {

   color: var(--text);

   font-size: 1rem;

   font-weight: 600;

   overflow-wrap: anywhere;

}



/* =========================
   FOOTER
========================= */

footer {

   padding: 60px 0;

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

}

.footer-inner {

   display: flex;

   justify-content: space-between;

   flex-wrap: wrap;

   gap: 20px;

}

.footer-links {
   display: flex;
   flex-direction: row;
   gap: 1rem;
}



/* =========================
   REVEAL
========================= */

.reveal {

   opacity: 0;

   transform: translateY(30px);

   transition: .6s;

}

.reveal.visible {

   opacity: 1;

}



/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px) {

   .container {
      padding: 0 22px;
   }

   .hero-inner,
   .split,
   .contact-grid {

      grid-template-columns: 1fr;

      gap: 50px;

   }

   .nav-links,
   .nav-cv,
   .nav-cta {
      display: none;
   }

   .nav-inner {
      gap: 12px;
   }

   .nav-wordmark {
      font-size: .95rem;
   }

   .hamburger {
      display: flex;
   }

   .projects-grid,
   .project-meta {
      grid-template-columns: 1fr;
   }

   .hero {
      padding: 100px 0;
      min-height: 80vh;
   }

   .project-detail,
   .section {
      padding: 88px 0;
   }

   .contact-card {
      padding: 24px;
   }

   .hero::after {

      background: linear-gradient(180deg,
            rgba(15, 23, 28, .85),
            rgba(15, 23, 28, .6));

   }

}


@media(max-width:600px) {

   .container {
      padding: 0 18px;
   }

   .section,
   .project-detail {
      padding: 72px 0;
   }

   .hero {
      padding: 88px 0 72px;
      min-height: 72vh;
   }

   .logo-placeholder {
      width: 36px;
      height: 36px;
   }

   .nav-wordmark {
      font-size: .9rem;
   }

   .mobile-menu {
      padding: 18px;
   }

   .hero-actions {
      flex-direction: column;
   }

   .hero-actions .btn,
   .project-detail-actions .btn {
      width: 100%;
      text-align: center;
   }

   .project-info {
      padding: 20px;
   }

   .project-detail-copy p {
      font-size: 1rem;
      margin-bottom: 24px;
   }

   .contact-card {
      padding: 20px 16px;
   }

   .contact-link {
      padding: 16px;
      gap: 14px;
   }

   .contact-link-icon {
      width: 42px;
      height: 42px;
   }

}