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

    :root {
      --card-radius: 20px;
      --ink-soft: rgba(245, 247, 249, 0.78);
      --ink-muted: rgba(235, 238, 242, 0.56);
      --glass-border: rgba(238, 246, 255, 0.28);
      --glass-backdrop: rgba(244, 248, 255, 0.14);
      --glass-frost-highlight: rgba(255, 255, 255, 0.36);
      --glass-frost-lowlight: rgba(12, 20, 28, 0.12);
      /* Safe-area insets for iOS full-bleed layout (viewport-fit=cover) */
      --sat: env(safe-area-inset-top, 0px);
      --sar: env(safe-area-inset-right, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
      --sal: env(safe-area-inset-left, 0px);
    }

    /* ========== CSS Reset ========== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      background-color: #563229;
    }
    html, body {
      height: 100%;
      height: 100dvh;
      height: -webkit-fill-available;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% -25%, rgba(233, 228, 217, 0.8), rgba(140, 130, 114, 0.2) 55%, rgba(70, 63, 53, 0.7) 100%),
        linear-gradient(165deg, #7e7567 0%, #5f584f 100%);
      background-color: #563229;
      font-family: 'Manrope', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ========== Three.js Canvas ========== */
    #three-canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* ========== Glassmorphism Cards ========== */
    .card {
      --theme-frost-a: rgba(214, 226, 238, 0.22);
      --theme-frost-b: rgba(194, 210, 226, 0.08);
      --theme-edge: rgba(224, 241, 255, 0.34);
      display: none; /* Hidden until expanded — rendered as Three.js mesh */
      width: 300px;
      height: 400px;
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(152deg, var(--theme-frost-a), var(--theme-frost-b));
      backdrop-filter: blur(28px) saturate(86%) contrast(108%);
      -webkit-backdrop-filter: blur(28px) saturate(86%) contrast(108%);
      border: 1px solid var(--theme-edge);
      border-radius: var(--card-radius);
      box-shadow:
        0 18px 30px rgba(6, 9, 14, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -6px 18px rgba(0, 0, 0, 0.24);
      overflow: hidden;
      cursor: default;
      opacity: 0;
      will-change: opacity;
      transition: opacity 0.3s ease;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 16% 14%, var(--glass-frost-highlight), rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 78% 88%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 44%),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 5px);
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
    }

    .card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        repeating-radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
        repeating-radial-gradient(circle at 76% 66%, var(--glass-frost-lowlight) 0 1px, rgba(12, 20, 28, 0) 1px 4px);
      mix-blend-mode: soft-light;
      opacity: 0.62;
      pointer-events: none;
      z-index: 1;
    }

    .card-content,
    .card-face {
      position: relative;
      z-index: 2;
    }

    /* Theme-specific tinted frosted backgrounds */
    .card[data-theme="blue"] {
      --theme-frost-a: rgba(84, 157, 229, 0.24);
      --theme-frost-b: rgba(198, 223, 252, 0.09);
      --theme-edge: rgba(188, 220, 251, 0.44);
    }
    .card[data-theme="green"] {
      --theme-frost-a: rgba(80, 180, 131, 0.24);
      --theme-frost-b: rgba(203, 236, 219, 0.09);
      --theme-edge: rgba(182, 232, 204, 0.44);
    }
    .card[data-theme="orange"] {
      --theme-frost-a: rgba(224, 148, 85, 0.25);
      --theme-frost-b: rgba(246, 221, 196, 0.09);
      --theme-edge: rgba(242, 202, 163, 0.44);
    }
    .card[data-theme="purple"] {
      --theme-frost-a: rgba(162, 108, 218, 0.24);
      --theme-frost-b: rgba(226, 208, 247, 0.09);
      --theme-edge: rgba(220, 191, 252, 0.44);
    }

    /* Theme-specific heading colors */
    .card[data-theme="blue"]   h2 { color: #8ebde7; }
    .card[data-theme="green"]  h2 { color: #8cd1aa; }
    .card[data-theme="orange"] h2 { color: #e4af83; }
    .card[data-theme="purple"] h2 { color: #c19ce6; }

    /* Expanded content — hidden by default */
    .card-content {
      display: none;
    }

    /* ========== Overlay ========== */
    #overlay {
      position: fixed;
      inset: 0;
      background: transparent;
      pointer-events: none;
      z-index: 100;
    }

    #overlay.active {
      pointer-events: auto;
    }

    /* ========== Expanded Card State ========== */
    .card.expanded {
      position: fixed !important;
      z-index: 200;
      opacity: 1 !important;
      cursor: default;
      border-radius: var(--card-radius);
      overflow: hidden;
      background:
        linear-gradient(152deg, var(--theme-frost-a), var(--theme-frost-b));
      border-color: transparent !important;
      backdrop-filter: blur(32px) saturate(86%) contrast(108%);
      -webkit-backdrop-filter: blur(32px) saturate(86%) contrast(108%);
      box-shadow: none !important;
    }

    .card.expanded::before,
    .card.expanded::after {
      opacity: 0.42;
    }

    .card.expanded::after {
      opacity: 0.32;
    }

    .card.expanded .card-face {
      display: none;
    }

    .card.expanded .card-content {
      display: block;
      padding: calc(3rem + var(--sat)) calc(2.5rem + var(--sar)) calc(2.5rem + var(--sab)) calc(2.5rem + var(--sal));
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: stable;
      border: none;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* Close button */
    .card-close {
      position: absolute;
      top: calc(12px + var(--sat));
      right: calc(12px + var(--sar));
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: rgba(244, 248, 255, 0.75);
      font-family: 'Sora', sans-serif;
      font-size: 1.05rem;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      z-index: 3;
      margin-bottom: 0;
    }

    .card-close:hover {
      background: rgba(255, 255, 255, 0.25);
      color: rgba(255, 255, 255, 0.9);
    }

    /* Transition for expanding/collapsing */
    .card.expanding {
      transition: left 0.52s cubic-bezier(0.25, 0.74, 0.28, 1), top 0.52s cubic-bezier(0.25, 0.74, 0.28, 1), width 0.52s cubic-bezier(0.25, 0.74, 0.28, 1), height 0.52s cubic-bezier(0.25, 0.74, 0.28, 1), border-radius 0.52s cubic-bezier(0.25, 0.74, 0.28, 1), opacity 0.32s ease;
    }

    /* ========== Card Content Shared Styles ========== */
    .card-content h2 {
      font-size: 1.6rem;
      font-weight: 600;
      font-family: 'Sora', sans-serif;
      letter-spacing: 0.02em;
      margin-bottom: 0.5rem;
    }
    .card-content h3 {
      font-size: 1.1rem;
      font-weight: 600;
      font-family: 'Sora', sans-serif;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .card-content p {
      color: var(--ink-soft);
      line-height: 1.6;
      font-size: 0.95rem;
      margin-bottom: 0.75rem;
    }

    /* Theme heading colors inside expanded content */
    .card[data-theme="blue"] .card-content h2,
    .card[data-theme="blue"] .card-content h3 { color: #93c4ef; }
    .card[data-theme="green"] .card-content h2,
    .card[data-theme="green"] .card-content h3 { color: #92d8b1; }
    .card[data-theme="orange"] .card-content h2,
    .card[data-theme="orange"] .card-content h3 { color: #e8b487; }
    .card[data-theme="purple"] .card-content h2,
    .card[data-theme="purple"] .card-content h3 { color: #c9a2f0; }

    /* ========== About Card ========== */
    .about-header { text-align: center; margin-bottom: 1.5rem; }
    .avatar { margin-bottom: 1rem; }
    .avatar-placeholder {
      width: 100px; height: 100px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(59,130,246,0.1));
      border: 2px solid rgba(59,130,246,0.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem; font-weight: 600; color: #7ba3cc;
      margin: 0 auto;
    }
    .subtitle { color: var(--ink-muted) !important; font-size: 0.9rem !important; }
    .skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .skill-tag {
      padding: 0.35rem 0.75rem;
      border: 1px solid rgba(59,130,246,0.3);
      border-radius: 999px;
      font-size: 0.8rem;
      color: #7ba3cc;
      background: rgba(59,130,246,0.08);
    }

    /* ========== Contact Card ========== */
    .contact-intro { margin-bottom: 1.5rem; }
    .contact-links { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
    .contact-link {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.75rem 1rem;
      background: rgba(34,197,94,0.06);
      border: 1px solid rgba(34,197,94,0.15);
      border-radius: 10px;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .contact-link:hover { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); }
    .contact-link-icon { font-size: 1.2rem; color: #7bb893; }
    .contact-form { margin-top: 1rem; }
    .form-input, .form-textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      color: rgba(249, 251, 255, 0.95);
      font-family: inherit;
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.85); }
    .form-input:focus, .form-textarea:focus {
      border-color: rgba(34,197,94,0.5);
      box-shadow: 0 0 0 2px rgba(34,197,94,0.1);
    }
    .form-textarea { resize: vertical; min-height: 80px; }
    .form-button {
      width: 100%;
      padding: 0.75rem;
      background: rgba(34,197,94,0.25);
      border: 1px solid rgba(34,197,94,0.3);
      border-radius: 10px;
      color: #7bb893;
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .form-button:hover { background: rgba(34,197,94,0.35); }
    .form-status {
      margin: 0.6rem 0 0;
      font-size: 0.82rem;
      color: rgba(198, 255, 221, 0.9);
      min-height: 1.2em;
    }

    /* ========== Support Card (FAQ Accordion) ========== */
    .support-intro { margin-bottom: 1.5rem; }
    .faq-section { margin-bottom: 1rem; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .faq-question {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.85rem 0; cursor: pointer;
      color: rgba(241,246,252,0.9);
      font-size: 0.95rem;
      user-select: none;
    }
    .faq-question:hover { color: rgba(255,255,255,1); }
    .faq-chevron {
      font-size: 1.3rem; color: #cc9b6b;
      transition: transform 0.3s ease;
      flex-shrink: 0;
      margin-left: 0.5rem;
    }
    .faq-item.open .faq-chevron { transform: rotate(90deg); }
    .faq-answer {
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .faq-item.open .faq-answer {
      max-height: 300px;
      padding-bottom: 0.75rem;
    }

    /* ========== Portfolio Card ========== */
    .portfolio-intro { margin-bottom: 1.5rem; }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .project-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 1rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .project-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .project-thumb {
      width: 100%; aspect-ratio: 16/9;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0.75rem;
    }
    .project-initials { font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,0.9); }
    .project-card h4 {
      color: #b08bcc; font-size: 0.95rem; font-weight: 600;
      margin-bottom: 0.35rem;
    }
    .project-card p { font-size: 0.82rem; line-height: 1.4; margin-bottom: 0.5rem; }
    .project-link {
      color: #b08bcc; text-decoration: none; font-size: 0.82rem; font-weight: 500;
      transition: opacity 0.2s ease;
    }
    .project-link:hover { opacity: 0.7; }

    .card-face {
      display: none;
    }

    /* ========== Backdrop-filter Fallback ========== */
    @supports not (backdrop-filter: blur(12px)) {
      .card {
        background: rgba(30, 30, 30, 0.85) !important;
      }
    }

    /* ========== Custom Scrollbar for Expanded Cards ========== */
    .card.expanded .card-content::-webkit-scrollbar {
      width: 6px;
    }
    .card.expanded .card-content::-webkit-scrollbar-track {
      background: transparent;
    }
    .card.expanded .card-content::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.15);
      border-radius: 3px;
    }
    .card.expanded .card-content::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,0.25);
    }

    /* ========== Responsive ========== */
    @media (max-width: 768px) {
      .card {
        --card-radius: 18px;
        width: 240px;
        height: 340px;
      }

      .card-content {
        padding: 1.5rem !important;
      }
      /* Expanded cards on mobile: fullscreen, so restore safe-area padding */
      .card.expanded .card-content {
        padding: calc(2rem + var(--sat)) calc(1.5rem + var(--sar)) calc(1.5rem + var(--sab)) calc(1.5rem + var(--sal)) !important;
      }

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

      .about-header .avatar-placeholder {
        width: 80px;
        height: 80px;
        font-size: 2rem;
      }

      .card-content h2 {
        font-size: 1.3rem;
      }
    }

    @media (max-width: 480px) {
      .card {
        --card-radius: 16px;
        width: 200px;
        height: 280px;
      }
    }