@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* ============================
   MODERN THEME SYSTEM
/* Light theme - New */
:root {
  /* Fonts - Keep as is, they look good */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --font-display: 'Inter Display', var(--font-sans);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Shadows - Keep as is, they are subtle */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Animation curves - Keep as is */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Light theme - New Colors */
  --bg: #f8f8f8; /* A very light off-white */
  --bg-soft: #f8f8f8; /* Use a solid color for consistency */
  --text: #1a1a1a; /* Dark gray for primary text */
  --text-secondary: #333333; /* Slightly lighter dark gray for secondary text */
  --muted: #666666; /* Medium gray for muted text */
  --card: #fff; /* White card background */
  --card-hover: #ffffff;
  --border: #e0e0e0; /* A light gray border */
  --border-hover: #cccccc;
  --brand: #007aff; /* A professional blue, similar to the one in the image */
  --brand-solid: #007aff;
  --brand-light: rgba(0, 122, 255, 0.1);
  --brand-lighter: rgba(0, 122, 255, 0.05);
  --accent: #ff9500; /* A complimentary accent color */
  --accent-solid: #ff9500;
  --link: #007aff;
  --success: #34c759;
  --warning: #ff9500;
  --error: #ff3b30;
}

/* Dark theme - Enhanced */
[data-theme="dark"] {
  --bg: #0a0f1c;
  --bg-soft: linear-gradient(135deg, #0f1629 0%, #1e2a4a 100%);
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: #94a3b8;
  --card: rgba(30, 41, 59, 0.8);
  --card-hover: rgba(30, 41, 59, 0.95);
  --border: rgba(51, 65, 85, 0.4);
  --border-hover: rgba(71, 85, 105, 0.6);
  --brand: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  --brand-solid: #60a5fa;
  --brand-light: rgba(96, 165, 250, 0.15);
  --brand-lighter: rgba(96, 165, 250, 0.08);
  --accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --accent-solid: #fbbf24;
  --link: #93c5fd;
}

/* Terracotta theme - Enhanced */
[data-theme="terracotta"] {
  --bg: #fffbf7;
  --bg-soft: linear-gradient(135deg, #fef7f0 0%, #fdf2f8 100%);
  --text: #3a2f2b;
  --text-secondary: #6b5a54;
  --muted: #92817a;
  --card: rgba(255, 255, 255, 0.9);
  --card-hover: rgba(255, 255, 255, 0.95);
  --border: rgba(241, 227, 223, 0.7);
  --border-hover: rgba(231, 215, 208, 0.8);
  --brand: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --brand-solid: #dc2626;
  --brand-light: rgba(220, 38, 38, 0.1);
  --brand-lighter: rgba(220, 38, 38, 0.05);
  --accent: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --accent-solid: #f97316;
  --link: #b91c1c;
}

/* ============ Enhanced Base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Selection styles */
::selection {
  background: var(--brand-light);
  color: var(--brand-solid);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: all 0.2s var(--ease-out-quart);
  position: relative;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.container {
  width: min(1200px, 94vw);
  margin: 0 auto;
}

/* ============ Premium Header ============ */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  background: var(--card);
  /* border-bottom: 1px solid var(--border); */
  /* box-shadow: var(--shadow-sm); */
  transition: all 0.3s var(--ease-out-quart);
}

header:hover {
  box-shadow: var(--shadow);
  border-bottom-color: var(--border-hover);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
}

.brand {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-display);
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease-spring);
}

.brand img:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: var(--shadow-lg);
}

.brand h1 {
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -0.025em;
  /* background: var(--brand); */
  /* background-clip: text; */
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
  font-family: 'Poppins', sans-serif;
    /* Use the new font */
  background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    color: var(--muted);
    /* A lighter dark gray for text */
    font-weight: 300;
    text-transform: uppercase;
    /* All caps */
    letter-spacing: 0.05em;
}

.nav-right {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 0 20px;
  color: var(--muted);
}

/* ============ New Navigation Links ============ */
.nav-right a {
  /* Remove button styles */
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  color: var(--muted);
  /* A lighter dark gray for text */
  font-weight: 100;
  text-transform: uppercase;
  /* All caps */
  letter-spacing: 0.05em;
  /* A little spacing for a cleaner look */
  font-size: 1.4rem;
  transition: all 0.2s var(--ease-out-quart);
}

.nav-right a:hover {
  color: var(--text);
  /* Darken the text on hover */
  text-decoration: none;
  /* Remove default underline on hover */
}
.select,
.button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-weight: 500;
  transition: all 0.2s var(--ease-out-quart);
  position: relative;
  overflow: hidden;
}

.button {
  cursor: pointer;
  background: var(--brand);
  color: white;
  border: none;
  font-weight: 600;
}

/* .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
} */

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button:hover::before {
  left: 100%;
}

/* ============ Sophisticated Hero ============ */
.hero {
  padding: 80px 0 40px;
  display: flex;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: center;
  position: relative;
}



.hero-left {
  flex-shrink: 0;
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
  width: 80%;
  font-size: 2rem;
  /* Aligns all text to the right side */
}

/* ============ Logo and Text Styling ============ */
.hero-left img {
  width: clamp(100px, 15vw, 150px);
  /* Makes the logo responsive */
  height: auto;
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 40%;
  height: 140%;
  background: radial-gradient(circle, var(--brand-lighter) 0%, transparent 70%);
  z-index: -1;
}

.hero h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  color: var(--muted);
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.hero-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-quart);
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--brand-lighter);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-xl);
  border-color: var(--brand-solid);
}

.hero-card:hover::before {
  opacity: 1;
}




/* ============ Enhanced Sections ============ */
section {
  padding: 48px 0;
  position: relative;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
}

.section-head h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text);
}


/* ============ Premium Cards Grid ============ */
/* ============ New Cards Grid and Corner Adjustments ============ */
.grid {
  display: grid;
  /* Force a two-column layout. Each column will take up an equal fraction of space. */
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  padding: 0;
}

.card {
  grid-column: span 1;
  /* Each card spans a single column */
  border: none;
  border-radius: 0;
  /* Straighten the corners */
  background: none;
  backdrop-filter: none;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.4s var(--ease-out-quart);
  position: relative;
  margin: 10px;
}



.card::before {
  /* We will use the ::before pseudo-element to create the black backdrop */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
    /* Translucent white background */
  /* background: rgba(0, 0, 0, 0.7); */
  backdrop-filter: blur(10px);
    /* The glass effect blur */
  opacity: 0;
  /* It starts hidden */
  transition: opacity 0.3s var(--ease-out-quart);
  z-index: 2;
  /* Make sure it's on top of the image but below the text */
  /* border-radius: var(--radius-lg); */
}

.card::after {
  /* We don't need this element anymore, so let's remove its properties */
  content: none;
}

.card:hover {
  transform: none;
  /* Remove the scaling and translateY on hover */
  box-shadow: none;
  background: none;
}

.card:hover::before {
  opacity: 1;
  /* Make the backdrop visible on hover */
}

.thumb {
  aspect-ratio: 16/9;
  background: var(--bg-soft) center/cover no-repeat;
  border-bottom: none;
  /* No border */
  position: relative;
  overflow: hidden;
}

.thumb::after {
  content: none;
  /* No bottom gradient on the image */
}

.card:hover .thumb::after {
  content: none;
  /* No bottom gradient on hover */
}

.card-body {
  padding: 24px;
  display: grid;
  gap: 8px;
  position: absolute;
  /* Position the text over the image */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  color: rgb(8, 8, 8);
  /* Make text color white for readability on the dark backdrop */
  opacity: 0;
  transition: all 0.3s var(--ease-out-quart);
  /* height: 100%; */
  /* padding: 50px 0; */
}

.card:hover .card-body {
  transform: translateY(-10px);
  opacity: 1;
  /* Move the text up slightly on hover */
}

.card-body h1{
  margin: 0 0 4px;
  font-size: 2rem;
}

.card-body h4 {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  /* Larger font size for the project title */
  color: black;
  letter-spacing: -0.025em;
  line-height: 1.3;
  /* Ensure title is white on hover */
}

.card-body p {
  margin: 0 0 6px;
  color: black;
  line-height: 1.5;
  font-size: 16px;
}

.kpis {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.kpi-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--brand-lighter);
  color: var(--brand-solid);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s var(--ease-out-quart);
  position: relative;
  overflow: hidden;
}

.tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.card:hover .tag::before {
  left: 100%;
}

.tag:hover {
  background: var(--brand-light);
  border-color: var(--brand-solid);
  transform: translateY(-2px);
}

/* Responsive grid with enhanced spacing */
/* @media (min-width: 768px) {
  .card {
    grid-column: span 6;
  }

  .grid {
    gap: 28px;
    padding: 12px;
  }
}
*/
/* @media (max-width: 1024px) {
  .card {
    grid-column: span 1;
  }

  .grid {
    gap: 32px;
    padding: 16px;
  }
}  */

/* ============ Project Page Enhancements ============ */
.project-back {
  margin: 24px 0;
}

.project-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
}

@media (min-width: 900px) {
  .project-hero {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .project-left {
    display: grid;
    gap: 20px;
  }

  .project-hero .prose {
    display: grid;
    gap: 24px;
    align-content: start;
  }
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta .pill {
  background: var(--brand-lighter);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-solid);
  transition: all 0.2s ease;
}

.meta .pill:hover {
  background: var(--brand-light);
  transform: translateY(-1px);
}

.prose h4 {
  margin: 32px 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.prose p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.gallery img {
  grid-column: span 12;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease-out-quart);
}

.gallery img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 850px) {
  .gallery img {
    grid-column: span 6;
  }
}

/* ============ Enhanced Process UI ============ */
.toc {
  position: sticky;
  top: 120px;
  height: fit-content;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xl);
  transition: all 0.3s var(--ease-out-quart);
  position: relative;
}

.toc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--brand-lighter) 0%, transparent 100%);
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.toc:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--brand-solid);
  border-color: var(--brand-solid);
}

.toc:hover::before {
  opacity: 0.5;
}

.toc h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.toc a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s var(--ease-out-quart);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.toc a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: translateX(-3px);
  transition: transform 0.3s var(--ease-out-quart);
}

.toc a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.toc a:hover {
  background: var(--brand-lighter);
  text-decoration: none;
  transform: translateX(4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.toc a:hover::before {
  transform: translateX(0);
}

.toc a:hover::after {
  left: 100%;
}

.toc a.active {
  background: var(--brand-light);
  color: var(--brand-solid);
  font-weight: 600;
  transform: translateX(4px);
  border-color: var(--brand-solid);
  box-shadow: var(--shadow);
}

.toc a.active::before {
  transform: translateX(0);
}

/* Custom scrollbar for TOC */
.toc::-webkit-scrollbar {
  width: 6px;
}

.toc::-webkit-scrollbar-track {
  background: var(--bg-soft);
  border-radius: 3px;
}

.toc::-webkit-scrollbar-thumb {
  background: var(--brand-solid);
  border-radius: 3px;
}

.toc::-webkit-scrollbar-thumb:hover {
  background: var(--brand-solid);
  opacity: 0.8;
}

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 980px) {
  .process {
    grid-template-columns: 280px 1fr;
  }
}

.step {
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease-out-quart);
}

.step:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.step-header:hover {
  background: var(--brand-lighter);
}

.step-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.step-content {
  padding: 0 24px 24px;
  display: grid;
  gap: 16px;
}

.block-quote {
  border-left: 4px solid var(--brand-solid);
  padding: 16px 20px;
  background: var(--brand-lighter);
  border-radius: var(--radius-sm);
  position: relative;
}

.block-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 48px;
  color: var(--brand-solid);
  opacity: 0.3;
}

.block-quote footer {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
  font-style: italic;
}

.block-img img,
.block-embed iframe {
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}

.caption {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

.image-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  justify-items: center;
}

.image-item {
  max-width: 100%;
  margin: 0;
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.3s var(--ease-out-quart);
}

.image-item img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.image-item figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ============ Animations & Effects ============ */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: fadeInUp 0.6s var(--ease-out-quart) backwards;
  }

  .card:nth-child(1) {
    animation-delay: 0s;
  }

  .card:nth-child(2) {
    animation-delay: 0.1s;
  }

  .card:nth-child(3) {
    animation-delay: 0.2s;
  }

  .card:nth-child(4) {
    animation-delay: 0.3s;
  }

  .card:nth-child(5) {
    animation-delay: 0.4s;
  }

  .card:nth-child(6) {
    animation-delay: 0.5s;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ Utilities ============ */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============ Footer ============ */
.footer {
  margin: 60px 0 80px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

/* ============ Responsive Enhancements ============ */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 60px 0 32px;
  }

  .hero::before {
    display: none;
  }

  /* .container {
    width: min(1200px, 92vw);
  } */

  .nav {
    padding: 12px 0;
  }

  .brand h1 {
    font-size: 18px;
  }

  .hero-card {
    padding: 24px;
  } }