/* --------------------------------------------------
         Theme variables
         These keep the palette clean while making the layout
         feel more editorial and design-focused.
      -------------------------------------------------- */
      :root {
        --primary-color: #0073e6;
        --accent-color: #ff6f61;
        --nav-background: rgba(252, 248, 242, 0.94);
        --nav-border: rgba(232, 224, 214, 0.95);
        --nav-shadow: 0 10px 28px rgba(17, 24, 39, 0.04);
        --button-base-start: #ffd1a8;
        --button-base-end: #ffb375;
        --button-base-border: #f2a25c;
        --button-base-text: #8a4515;
        --button-hover-start: #ffb267;
        --button-hover-end: #f06a2a;
        --button-hover-shadow: rgba(240, 106, 42, 0.28);
        --background-color: #ffffff;
        --text-color: #333333;
        --text-muted: #6a6a6a;
        --soft-background: #f7f7f7;
        --soft-warm: #f6f2ec;
        --border-color: #ebe7df;
        --shadow-soft: 0 18px 45px rgba(17, 24, 39, 0.06);
        --shadow-hover: 0 28px 60px rgba(17, 24, 39, 0.12);
        --radius-xl: 1.75rem;
        --radius-lg: 1.25rem;
        --radius-md: 1rem;
        --transition-base: 0.32s ease;
      }

      /* --------------------------------------------------
         Base styles
         The typography and spacing are tuned to feel closer
         to a premium graphic design showcase than a SaaS page.
      -------------------------------------------------- */
      html {
        scroll-behavior: smooth;
      }

      body {
        background-color: var(--background-color);
        color: var(--text-color);
        font-family: "Manrope", "Segoe UI", sans-serif;
        line-height: 1.7;
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4,
      .brand-name {
        font-family: "Cormorant Garamond", Georgia, serif;
        color: var(--text-color);
        letter-spacing: -0.035em;
      }

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

      a {
        color: var(--primary-color);
        transition: color var(--transition-base);
      }

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

      ::selection {
        background: rgba(255, 111, 97, 0.18);
      }

      /* --------------------------------------------------
         Shared section styling
         These helper classes control vertical rhythm and the
         subtle fade-in motion across the page.
      -------------------------------------------------- */
      .section-padding {
        padding: 6.5rem 0;
      }

      .section-soft {
        background-color: var(--soft-background);
      }

      .section-tag {
        display: inline-block;
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .section-title {
        font-size: clamp(2.5rem, 5vw, 4.4rem);
        line-height: 0.98;
        margin-bottom: 1rem;
      }

      .section-copy {
        max-width: 38rem;
        color: var(--text-muted);
        text-wrap: pretty;
      }

      .fade-section {
        opacity: 0;
        transform: translateY(34px);
        transition: opacity 0.75s ease, transform 0.75s ease;
      }

      .fade-section.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* --------------------------------------------------
         Header and navigation
         This keeps the navbar minimal and editorial rather
         than looking like an app dashboard.
      -------------------------------------------------- */
      .navbar {
        background-color: var(--nav-background);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow);
      }

      .navbar-brand {
        color: var(--text-color);
        font-size: 1.55rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
      }

      .brand-mark {
        width: 0.78rem;
        height: 0.78rem;
        border-radius: 0.2rem;
        background-color: var(--accent-color);
        display: inline-block;
      }

      .navbar-brand:hover,
      .navbar-brand:focus {
        color: var(--primary-color);
      }

      .nav-link {
        color: var(--text-color);
        font-weight: 600;
        position: relative;
        letter-spacing: 0.01em;
      }

      .nav-link:hover,
      .nav-link:focus,
      .nav-link.active {
        color: var(--primary-color);
      }

      .navbar-toggler {
        padding: 0.3rem 0.45rem;
      }

      .navbar-toggler:focus {
        box-shadow: none;
      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2851,51,51,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }

      /* --------------------------------------------------
         Hero section
         The hero is now more image-led and editorial so the
         page feels like a designer portfolio template.
      -------------------------------------------------- */
      .hero {
        padding-top: 8.5rem;
        padding-bottom: 6.5rem;
      }

      .hero-copy-wrap {
        position: relative;
      }

      .hero-copy-wrap::after {
        content: "";
        position: absolute;
        right: 4%;
        top: 14%;
        width: clamp(90px, 12vw, 150px);
        height: clamp(90px, 12vw, 150px);
        border-radius: 1.6rem;
        background: linear-gradient(145deg, rgba(255, 178, 103, 0.2) 0%, rgba(240, 106, 42, 0.08) 100%);
        transform: rotate(-10deg) scale(0.82);
        opacity: 0;
        transition: transform 0.8s ease 0.65s, opacity 0.8s ease 0.65s;
        z-index: 0;
        pointer-events: none;
      }

      .hero.is-visible .hero-copy-wrap::after {
        transform: rotate(-10deg) scale(1);
        opacity: 1;
      }

      .hero-kicker {
        color: var(--primary-color);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }

      .hero-title {
        font-size: clamp(3.4rem, 7vw, 6.2rem);
        line-height: 0.92;
        margin-bottom: 1.35rem;
        max-width: none;
        position: relative;
        z-index: 1;
      }

      .hero-line {
        display: block;
        overflow: hidden;
      }

      .hero-line > span {
        display: block;
        white-space: nowrap;
        transform: translateY(115%);
        opacity: 0;
        transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.65s ease;
        transition-delay: var(--delay, 0s);
      }

      .hero.is-visible .hero-line > span {
        transform: translateY(0);
        opacity: 1;
      }

      .hero-stagger {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        transition-delay: var(--delay, 0s);
      }

      .hero.is-visible .hero-stagger {
        opacity: 1;
        transform: translateY(0);
      }

      .hero-title .accent-word {
        color: var(--accent-color);
        position: relative;
        display: inline-block;
        padding-inline: 0.06em 0.1em;
      }

      .hero-title .accent-word.accent-type {
        display: inline-flex;
        align-items: flex-end;
        gap: 0.01em;
      }

      .accent-type .accent-letter,
      .accent-type .accent-space {
        display: inline-block;
        opacity: 0;
        transform: translateY(0.22em);
        filter: blur(3px);
        transition: opacity 0.32s ease, transform 0.45s ease, filter 0.45s ease;
        transition-delay: calc(0.95s + (var(--char-index, 0) * 0.045s));
      }

      .accent-type .accent-space {
        width: 0.28em;
      }

      .hero.is-visible .accent-type .accent-letter,
      .hero.is-visible .accent-type .accent-space {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      .hero-title .accent-word::after {
        content: "";
        position: absolute;
        left: -0.08em;
        right: -0.1em;
        top: 54%;
        bottom: 0.08em;
        border-radius: 0.18em;
        background: linear-gradient(135deg, rgba(255, 178, 103, 0.34) 0%, rgba(255, 111, 97, 0.18) 100%);
        z-index: -1;
        transform: scaleX(0.18) translateX(-14%);
        transform-origin: left center;
        transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) 0.78s;
      }

      .hero.is-visible .hero-title .accent-word::after {
        transform: scaleX(1) translateX(0);
      }

      .hero-title .accent-word::before {
        content: "";
        position: absolute;
        left: -0.03em;
        right: -0.03em;
        bottom: -0.02em;
        height: 0.06em;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255, 178, 103, 0.9) 0%, rgba(240, 106, 42, 0.95) 100%);
        opacity: 0;
        transform: scaleX(0.3);
        transform-origin: left center;
        transition: opacity 0.45s ease 1.05s, transform 0.6s ease 1.05s;
      }

      .hero.is-visible .hero-title .accent-word::before {
        opacity: 1;
        transform: scaleX(1);
      }

      .hero-text {
        max-width: 34rem;
        color: var(--text-muted);
        font-size: 1.02rem;
        margin-bottom: 2rem;
        text-wrap: pretty;
      }

      .hero-actions {
        margin-top: 0.25rem;
      }

      .hero-stat-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1.6rem;
      }

      .hero-stat {
        min-width: 170px;
        padding-top: 0.85rem;
        border-top: 1px solid var(--border-color);
      }

      .hero-stat strong {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.88rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hero-stat span {
        color: var(--text-muted);
        font-size: 0.92rem;
      }

      .hero-visual {
        position: relative;
        padding: 0.75rem 0 2rem 1rem;
      }

      .hero-visual::before {
        content: "";
        position: absolute;
        right: -0.35rem;
        top: 2.1rem;
        width: clamp(90px, 10vw, 130px);
        height: clamp(150px, 16vw, 220px);
        border-radius: 1.8rem;
        background: linear-gradient(180deg, rgba(255, 178, 103, 0.32) 0%, rgba(240, 106, 42, 0.12) 100%);
        transform: rotate(8deg) translateY(18px);
        opacity: 0;
        transition: transform 0.8s ease 0.5s, opacity 0.8s ease 0.5s;
        pointer-events: none;
      }

      .hero.is-visible .hero-visual::before {
        transform: rotate(8deg) translateY(0);
        opacity: 1;
      }

      .hero-visual-main {
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-soft);
      }

      .hero-showcase-image {
        aspect-ratio: 4 / 4.9;
        object-fit: cover;
        filter: grayscale(10%) contrast(1.02);
      }

      .hero-visual-badge {
        position: absolute;
        left: 1rem;
        top: 1rem;
        padding: 0.55rem 0.85rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(235, 231, 223, 0.9);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hero-portrait-card {
        position: absolute;
        left: -0.75rem;
        bottom: 0;
        width: min(52%, 260px);
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 1.3rem;
        overflow: hidden;
        box-shadow: var(--shadow-hover);
      }

      .hero-portrait-frame {
        background-color: var(--soft-warm);
      }

      .hero-portrait-image {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        filter: grayscale(12%) contrast(1.03);
      }

      .hero-portrait-body {
        padding: 0.95rem 1rem 1rem;
      }

      .hero-portrait-name {
        margin-bottom: 0.25rem;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1.6rem;
        line-height: 1;
        color: var(--text-color);
      }

      .hero-portrait-role {
        color: var(--text-muted);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hero-floating-note {
        position: absolute;
        right: 0;
        bottom: 1.25rem;
        max-width: 230px;
        padding: 0.85rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: var(--shadow-soft);
      }

      .hero-floating-note span {
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.5;
      }

      .hero.is-visible .hero-visual-main {
        animation: floatVisual 7s ease-in-out infinite;
      }

      .hero.is-visible .hero-portrait-card {
        animation: floatCard 6s ease-in-out infinite;
      }

      .hero.is-visible .hero-floating-note {
        animation: floatNote 8s ease-in-out infinite;
      }

      @keyframes floatVisual {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      @keyframes floatCard {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
      }

      @keyframes floatNote {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }

      /* --------------------------------------------------
         Buttons
         Primary stays brand blue, while hover states shift to
         the warm accent color for a more design-led feel.
      -------------------------------------------------- */
      .btn-brand {
        background: linear-gradient(135deg, var(--button-base-start) 0%, var(--button-base-end) 100%);
        border-color: var(--button-base-border);
        color: var(--button-base-text);
        padding: 0.9rem 1.55rem;
        border-radius: 999px;
        font-weight: 700;
        transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
      }

      .btn-brand:hover,
      .btn-brand:focus {
        background: linear-gradient(135deg, var(--button-hover-start) 0%, var(--button-hover-end) 100%);
        border-color: var(--button-hover-end);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 14px 26px var(--button-hover-shadow);
      }

      .btn-outline-brand {
        background-color: rgba(255, 209, 168, 0.28);
        border: 1px solid var(--button-base-border);
        color: var(--button-base-text);
        padding: 0.9rem 1.55rem;
        border-radius: 999px;
        font-weight: 700;
        transition: all var(--transition-base);
      }

      .btn-outline-brand:hover,
      .btn-outline-brand:focus {
        background: linear-gradient(135deg, var(--button-hover-start) 0%, var(--button-hover-end) 100%);
        border-color: var(--button-hover-end);
        color: #ffffff;
        box-shadow: 0 14px 26px var(--button-hover-shadow);
      }

      /* --------------------------------------------------
         About section
         The mix of a larger intro block and smaller detail
         panels makes the layout feel more curated.
      -------------------------------------------------- */
      .about-copy {
        color: var(--text-muted);
        font-size: 1.03rem;
        text-wrap: pretty;
      }

      .about-panel {
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: 2rem;
        box-shadow: var(--shadow-soft);
        height: 100%;
      }

      .about-panel h4 {
        margin-bottom: 0.5rem;
      }

      .about-panel p {
        color: var(--text-muted);
        margin-bottom: 0;
      }

      .about-stack {
        display: grid;
        gap: 1rem;
      }

      .about-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
      }

      .about-chip-list span {
        padding: 0.5rem 0.85rem;
        border-radius: 999px;
        background-color: var(--soft-warm);
        border: 1px solid var(--border-color);
        font-size: 0.82rem;
        font-weight: 600;
      }

      /* --------------------------------------------------
         Projects section
         The project cards are more gallery-like now, with one
         featured project and softer editorial surfaces.
      -------------------------------------------------- */
      .project-card {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        overflow: hidden;
        background-color: #ffffff;
        box-shadow: var(--shadow-soft);
        transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
      }

      .project-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: var(--shadow-hover);
        border-color: rgba(0, 115, 230, 0.18);
      }

      .project-card.featured-card {
        background: linear-gradient(180deg, #ffffff 0%, #fcfaf7 100%);
      }

      .project-image-wrap {
        overflow: hidden;
        background-color: var(--soft-warm);
      }

      .project-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform 0.45s ease;
      }

      .featured-card .project-image {
        aspect-ratio: 16 / 10;
      }

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

      .project-card .card-body {
        padding: 1.45rem;
      }

      .featured-card .card-body {
        padding: 1.75rem;
      }

      .project-label {
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .project-title {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        line-height: 1;
      }

      .project-card h3 {
        margin-bottom: 0.75rem;
      }

      .project-text {
        color: var(--text-muted);
        text-wrap: pretty;
      }

      .project-footnote {
        color: var(--accent-color);
        font-size: 0.85rem;
        font-weight: 700;
        margin-top: 1.1rem;
      }

      /* --------------------------------------------------
         Contact section
         Clean panels keep the form premium without making it
         feel too product-oriented.
      -------------------------------------------------- */
      .contact-panel,
      .contact-form-wrap {
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: 2rem;
        box-shadow: var(--shadow-soft);
        height: 100%;
      }

      .contact-panel p,
      .contact-form-wrap p,
      .contact-note {
        color: var(--text-muted);
        text-wrap: pretty;
      }

      .contact-detail {
        font-weight: 600;
        color: var(--text-color);
      }

      .form-label {
        font-weight: 600;
        color: var(--text-color);
      }

      .form-control {
        border-radius: 1rem;
        border-color: var(--border-color);
        padding: 0.9rem 1rem;
      }

      .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(0, 115, 230, 0.12);
      }

      /* --------------------------------------------------
         Footer
         Kept simple so the projects remain the focal point.
      -------------------------------------------------- */
      .site-footer {
        background-color: #ffffff;
        border-top: 1px solid var(--border-color);
      }

      .footer-copy {
        color: var(--text-muted);
      }

      /* --------------------------------------------------
         Responsive adjustments
         The layout stays image-forward while simplifying
         spacing on smaller screens.
      -------------------------------------------------- */
      @media (max-width: 991.98px) {
        .navbar-collapse {
          margin-top: 1rem;
          padding: 1rem 1.1rem;
          border: 1px solid var(--nav-border);
          border-radius: 1rem;
          background-color: rgba(252, 248, 242, 0.98);
          box-shadow: var(--shadow-soft);
        }

        .hero {
          padding-top: 7.5rem;
        }

        .hero-title {
          max-width: none;
          font-size: clamp(3rem, 8vw, 4.8rem);
        }

        .section-title {
          max-width: 12ch;
        }

        .hero-visual {
          padding-left: 0;
          padding-bottom: 2.5rem;
          max-width: 34rem;
          margin-inline: auto;
        }

        .hero-portrait-card {
          left: 0.75rem;
        }

        .hero-floating-note {
          right: 0.75rem;
        }
      }

      @media (max-width: 767.98px) {
        .section-padding {
          padding: 4.75rem 0;
        }

        .section-title {
          max-width: none;
        }

        .hero {
          padding-top: 6.8rem;
          padding-bottom: 5rem;
        }

        .hero-title {
          font-size: clamp(2.3rem, 10vw, 3.7rem);
          line-height: 0.96;
        }

        .hero-text {
          font-size: 0.98rem;
        }

        .about-panel,
        .contact-panel,
        .contact-form-wrap {
          padding: 1.5rem;
        }

        .hero-stat-strip {
          display: grid;
          gap: 0.9rem;
        }

        .hero-stat {
          min-width: 0;
        }

        .hero-visual {
          display: grid;
          gap: 1rem;
          padding: 0;
          max-width: none;
        }

        .hero-copy-wrap::after,
        .hero-visual::before {
          display: none;
        }

        .hero-visual-badge {
          left: 0.75rem;
          top: 0.75rem;
        }

        .hero-showcase-image {
          aspect-ratio: 4 / 4.4;
        }

        .hero-portrait-card {
          position: static;
          display: grid;
          grid-template-columns: 110px minmax(0, 1fr);
          width: 100%;
          max-width: none;
        }

        .hero-portrait-image {
          height: 100%;
          aspect-ratio: auto;
        }

        .hero-floating-note {
          position: static;
          max-width: none;
        }

        .project-card .card-body,
        .featured-card .card-body {
          padding: 1.2rem;
        }
      }

      @media (max-width: 575.98px) {
        .container {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        .section-title {
          font-size: clamp(2rem, 10vw, 2.8rem);
        }

        .hero-kicker,
        .section-tag {
          letter-spacing: 0.12em;
        }

        .hero-portrait-card {
          grid-template-columns: 88px minmax(0, 1fr);
        }

        .hero-portrait-body {
          padding: 0.85rem 0.9rem;
        }

        .hero-portrait-name {
          font-size: 1.35rem;
        }

        .hero-portrait-role {
          font-size: 0.7rem;
        }

        .hero-floating-note {
          padding: 0.8rem 0.9rem;
        }

        .contact-panel,
        .contact-form-wrap,
        .about-panel {
          padding: 1.25rem;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .fade-section,
        .hero-line > span,
        .hero-stagger,
        .accent-type .accent-letter,
        .accent-type .accent-space,
        .btn-brand,
        .btn-outline-brand,
        .project-card,
        .project-image {
          transition: none !important;
        }

        .hero.is-visible .hero-visual-main,
        .hero.is-visible .hero-portrait-card,
        .hero.is-visible .hero-floating-note {
          animation: none !important;
        }
      }