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

/* ─── HERO ─── */
    .hero-bg {
      position: relative;
      background-color: var(--bg);
      /* Replace hero-bg.jpg with your image */
      background-image: url('hero-bg.jpg');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }

    /* Gradient fade: image visible at top-right, fades into bg colour toward bottom & left */
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(240, 242, 242, 0.15) 0%,
        rgba(240, 242, 242, 0.55) 55%,
        rgba(240, 242, 242, 1)   100%
      ),
      linear-gradient(
        to right,
        rgba(240, 242, 242, 1)   0%,
        rgba(240, 242, 242, 0.4) 50%,
        rgba(240, 242, 242, 0)   100%
      );
      pointer-events: none;
    }

    .hero {
      position: relative;
      z-index: 1;
      min-height: auto;
      display: grid;
      grid-template-columns: 1fr 480px;
      align-items: center;
      gap: 0;
      padding: 160px 0 48px 48px;
      max-width: 1280px;
      margin: 0 auto;
    }

    .hero-text { max-width: 600px; }

    /* ─── HERO PHOTO ─── */
    .hero-photo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-photo-circle {
      width: 420px;
      height: 420px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .hero-photo-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      font-weight: var(--weight-medium);
      letter-spacing: normal;
      text-transform: none;
      color: var(--accent-dark);
      margin-bottom: 24px;
    }
    .hero-eyebrow::before {
      display: none;
    }

    .hero-headline {
      font-family: var(--font-sans); font-weight: var(--weight-extrabold);
      font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--ink);
      margin-bottom: 24px;
    }
    .hero-headline em {
      font-style: normal;
      color: var(--accent-dark);
    }

    .hero-bio {
      font-size: var(--text-base);
      color: var(--ink-muted);
      line-height: var(--leading-relaxed);
      max-width: 480px;
      margin-bottom: 40px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--ink-inverse);
      background: var(--ink);
      padding: 14px 28px;
      border-radius: 100px;
      text-decoration: none;
      transition: background var(--transition), transform var(--transition);
    }
    .btn-primary:hover { background: var(--accent-deep); color: var(--ink-inverse); transform: translateY(-2px); }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-regular);
      color: var(--ink-muted);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
      padding-bottom: 2px;
      transition: color var(--transition), border-color var(--transition);
    }
    .btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

    /* ─── PHOTO CARD ─── */
    .hero-media {
      position: relative;
      display: flex;
      justify-content: flex-end;
    }

    .photo-frame {
      position: relative;
      width: 100%;
      max-width: 420px;
      aspect-ratio: 3 / 4;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--border);
    }

    .photo-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--ink-muted);
      font-size: var(--text-sm);
    }

    .photo-placeholder svg {
      width: 48px; height: 48px;
      opacity: 0.35;
    }

    .photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .photo-badge {
      position: absolute;
      bottom: 24px;
      left: -20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    }
    .badge-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #4CAF50;
      flex-shrink: 0;
    }
    .badge-text {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      color: var(--ink);
    }
    .badge-sub {
      font-size: var(--text-xs);
      color: var(--ink-muted);
    }

    /* ─── SECTION SHARED ─── */
    section { padding: 80px 48px; }

    .section-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      font-weight: var(--weight-medium);
      letter-spacing: normal;
      text-transform: none;
      color: var(--ink-muted);
      margin-bottom: 16px;
    }

    .section-title {
      font-family: var(--font-sans); font-weight: var(--weight-extrabold);
      font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--ink);
      margin-bottom: 48px;
    }

    /* ─── PROJECTS ─── */
    #projects {
      background: var(--bg-dark);
    }
    #projects .section-label { color: var(--accent); }
    #projects .section-title { color: #fff; }

    .projects-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 48px;
      flex-wrap: wrap;
      gap: 16px;
    }

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

    /* Two-by-two grid */
    .project-card:nth-child(1) { grid-column: span 6; }
    .project-card:nth-child(2) { grid-column: span 6; }
    .project-card:nth-child(3) { grid-column: span 6; }
    .project-card:nth-child(4) { grid-column: span 6; }

    .project-card {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);
      cursor: pointer;
      text-decoration: none;
      display: block;
      group: true;
    }

    .card-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, var(--bg-teal) 0%, var(--border) 100%);
      overflow: hidden;
      position: relative;
    }

    .project-card:nth-child(1) .card-image {
      background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-teal) 100%);
    }
    .project-card:nth-child(2) .card-image {
      background: linear-gradient(135deg, var(--bg-muted) 0%, var(--border-subtle) 100%);
    }
    .project-card:nth-child(3) .card-image {
      background: linear-gradient(135deg, var(--bg-teal) 0%, var(--accent-soft) 100%);
    }
    .project-card:nth-child(4) .card-image {
      background: linear-gradient(135deg, var(--border-subtle) 0%, var(--bg-muted) 100%);
    }
    .project-card:nth-child(4) .card-image img {
      object-fit: contain;
      object-position: top center;
    }

    .card-image-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-xs);
      color: var(--ink-muted);
      opacity: 0.6;
    }

    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .card-body {
      padding: 24px 28px;
    }

    .card-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .tag {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--accent-deep);
      background: var(--accent-soft);
      padding: 4px 10px;
      border-radius: 100px;
    }

    .card-title {
      font-family: var(--font-sans); font-weight: var(--weight-extrabold);
      font-size: var(--text-lg);
      letter-spacing: var(--tracking-tight);
      color: var(--ink);
      margin-bottom: 8px;
    }

    .card-desc {
      font-size: var(--text-sm);
      color: var(--ink-muted);
      line-height: var(--leading-relaxed);
      margin-bottom: 20px;
    }

    .card-arrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--ink);
      transition: gap var(--transition);
    }
    .project-card:hover .card-arrow { gap: 10px; }
    .more-cases-link { text-decoration: none; display: inline-block; }
    .more-cases-link .card-arrow { color: #fff; font-size: 1rem; }
    .more-cases-link:hover .card-arrow { gap: 10px; text-decoration: underline; }
    .more-cases-link:active .card-arrow { text-decoration: underline; }
    .more-cases-link:hover .card-arrow-icon { background: #fff; }
    .more-cases-link:hover .card-arrow-icon svg path { stroke: var(--bg-dark); }
    .more-cases-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

    .card-arrow-icon {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--accent-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--transition);
    }
    .project-card:hover .card-arrow-icon { background: var(--ink); }

    .card-arrow-icon svg {
      width: 10px; height: 10px;
      fill: var(--ink-inverse);
      transition: fill var(--transition);
    }
    .project-card:hover .card-arrow-icon svg { fill: var(--ink-inverse); }

    /* ─── ABOUT STRIP ─── */
    #about {
      background: var(--bg-subtle);
      color: var(--ink);
      padding: 80px 48px;
    }

    .about-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .about-label {
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      font-weight: var(--weight-medium);
      letter-spacing: normal;
      text-transform: none;
      color: var(--accent-dark);
      margin-bottom: 16px;
    }

    .about-text {
      font-size: var(--text-base);
      color: var(--ink-muted);
      line-height: var(--leading-loose);
    }

    .about-text-secondary {
      margin-top: 20px;
    }

    .about-value-label {
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      font-weight: var(--weight-medium);
      letter-spacing: normal;
      text-transform: none;
      color: var(--accent-dark);
      margin-bottom: 16px;
    }

    .value-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .value-item {
      font-size: var(--text-base);
      color: var(--ink-muted);
      line-height: var(--leading-relaxed);
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
    }
    .value-item:last-child {
      border-bottom: none;
    }

    .value-item:first-child {
      border-top: none;
      padding-top: 0;
    }

    .value-company {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      color: var(--ink);
      margin-bottom: 4px;
    }

    /* ─── SKILLS & TOOLS ─── */
    #skills { background: var(--bg-subtle); }

    .skills-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 48px;
    }

    .skills-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 16px 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .skills-title {
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      color: var(--ink);
    }

    .skills-desc {
      font-size: var(--text-base);
      color: var(--ink-muted);
      line-height: var(--leading-relaxed);
    }

    .tools-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .tools-list {
      list-style: disc;
      padding-left: 18px;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      column-gap: 40px;
      row-gap: 4px;
    }

    .tools-list li {
      font-size: var(--text-base);
      color: var(--ink-muted);
      line-height: var(--leading-relaxed);
    }

    /* ─── CONTACT ─── */
    #contact {
      background: var(--bg-dark);
      color: var(--ink-inverse);
    }

    #contact .section-label { color: var(--accent); }

    #contact .section-title { color: #fff; }

    .contact-inner {
      max-width: 800px;
      margin: 0 auto;
    }

    .contact-sub {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.6);
      margin: 8px 0 24px;
    }

    .contact-email {
      font-family: var(--font-sans); font-weight: var(--weight-extrabold);
      font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
      color: #fff;
      text-decoration: none;
      border-bottom: 2px solid var(--accent);
      padding-bottom: 4px;
      display: inline-block;
      transition: color var(--transition), border-color var(--transition);
      margin-bottom: 32px;
    }
    .contact-email:hover { color: var(--accent); border-color: var(--accent-mid); }

    .contact-social {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .social-link {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      padding: 10px 20px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 100px;
      transition: all var(--transition);
    }
    .social-link:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.6);
    }

    .btn-cv {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--bg-dark);
      background: #fff;
      padding: 13px 24px;
      border-radius: 100px;
      text-decoration: none;
      transition: background var(--transition), color var(--transition), transform var(--transition);
    }
    .btn-cv:hover { background: var(--accent); color: var(--bg-dark); transform: translateY(-2px); }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      nav { padding: 20px 24px; }
      section { padding: 60px 24px; }

      .skills-list { grid-template-columns: 1fr; }

      .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 140px 24px 48px;
        gap: 0;
        min-height: auto;
      }
      .hero-photo-wrap {
        order: -1;
        padding-bottom: 40px;
      }
      .hero-photo-circle {
        width: 200px;
        height: 200px;
      }

      .projects-grid { grid-template-columns: 1fr; }
      .project-card:nth-child(1),
      .project-card:nth-child(2),
      .project-card:nth-child(3),
      .project-card:nth-child(4) { grid-column: span 1; }

      .about-inner,
      .contact-inner { grid-template-columns: 1fr; gap: 40px; }

      #about { padding: 60px 24px; }

      footer { padding: 24px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 600px) {
      nav { padding: 20px 40px; }
      .hero-headline { font-size: var(--text-3xl); }
      .hero { padding-bottom: 48px; }
    }