:root {
      --bg-deep:      #030712;
      --bg:           #060f24;
      --bg-card:      #0d1b2e;
      --bg-card-hov:  #111f33;
      --border:       #1a2d4a;
      --border-lt:    #1e3a5f;
      --text:         #e2e8f0;
      --muted:        #7a8fa8;
      --dim:          #3e5570;
      --accent:       #38bdf8;
      --accent-dim:   rgba(56,189,248,0.10);
      --accent-glow:  rgba(56,189,248,0.22);
      --green:        #34d399;
      --grad:         linear-gradient(135deg,#38bdf8,#34d399);
      --grad-text:    linear-gradient(135deg,#38bdf8 0%,#34d399 100%);
      --r:            16px;
      --r-lg:         24px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-deep);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── scrollbar ── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg-deep); }
    ::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* ── ambient glow ── */
    body::before {
      content: '';
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 80% 55% at 15% -5%,  rgba(56,189,248,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 105%, rgba(52,211,153,0.05) 0%, transparent 60%);
    }

    .container { width: min(1160px, 92%); margin: 0 auto; position: relative; z-index: 1; }

    /* ─────────────────── NAV ─────────────────── */
    header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(3,7,18,0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(26,45,74,0.55);
    }
    .nav-inner {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 0;
    }
    .logo { font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -.4px; }
    .logo span { color: var(--accent); }

    nav { display: flex; align-items: center; gap: 4px; }
    nav a {
      color: var(--muted); text-decoration: none;
      font-size: 14px; font-weight: 500;
      padding: 7px 13px; border-radius: 8px;
      transition: color .2s, background .2s;
    }
    nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
    .nav-cta {
      color: var(--accent) !important;
      border: 1px solid rgba(56,189,248,0.28) !important;
      margin-left: 6px;
    }
    .nav-cta:hover { background: var(--accent-dim) !important; }

    /* ─────────────────── HERO ─────────────────── */
    .hero { padding: 108px 0 76px; }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 56px; align-items: center;
    }

    .hero-tag {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid rgba(56,189,248,0.2);
      padding: 6px 15px; border-radius: 999px;
      font-size: 13px; font-weight: 600; letter-spacing: .3px;
      margin-bottom: 26px;
    }
    .hero-tag::before {
      content: ''; width: 7px; height: 7px;
      background: var(--accent); border-radius: 50%;
      animation: blink 2.2s ease-in-out infinite;
    }
    @keyframes blink {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(.75); }
    }

    .hero-title {
      font-size: clamp(38px, 5.2vw, 66px);
      font-weight: 900; line-height: 1.06;
      letter-spacing: -2px; color: #fff;
      margin-bottom: 22px;
    }
    .grad-text {
      background: var(--grad-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-desc {
      color: var(--muted); font-size: 17px;
      line-height: 1.78; max-width: 560px;
      margin-bottom: 36px;
    }

    .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 13px 22px; border-radius: 12px;
      text-decoration: none; font-weight: 600; font-size: 14.5px;
      transition: all .2s ease;
    }
    .btn-primary {
      background: var(--grad); color: #020617;
      box-shadow: 0 4px 20px rgba(56,189,248,.28);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 28px rgba(56,189,248,.42); }
    .btn-secondary {
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border); color: var(--text);
    }
    .btn-secondary:hover { background: rgba(255,255,255,.08); border-color: var(--border-lt); transform: translateY(-2px); }

    /* profile card */
    .profile-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 30px;
      box-shadow: 0 4px 28px rgba(0,0,0,.35);
      position: relative; overflow: hidden;
    }
    .profile-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: var(--grad);
    }
    .pc-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .avatar {
      width: 50px; height: 50px; border-radius: 14px;
      background: var(--grad);
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: 18px; color: #020617; flex-shrink: 0;
    }
    .pc-info h3 { font-size: 16px; font-weight: 700; color: #fff; }
    .pc-info span { font-size: 13px; color: var(--accent); }
    .profile-card p { color: var(--muted); font-size: 14px; line-height: 1.72; margin-bottom: 14px; }
    .divider { height: 1px; background: var(--border); margin: 18px 0; }
    .highlights { display: flex; flex-direction: column; gap: 11px; }
    .hi { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
    .hi::before {
      content: ''; width: 7px; height: 7px;
      border-radius: 50%; background: var(--green); flex-shrink: 0;
    }

    /* ─────────────────── STATS ─────────────────── */
    .stats-wrap { padding: 0 0 76px; }
    .stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .stat-card {
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 26px 22px; border-radius: var(--r);
      transition: border-color .2s, box-shadow .2s;
    }
    .stat-card:hover {
      border-color: var(--border-lt);
      box-shadow: 0 0 0 1px rgba(56,189,248,.08), 0 8px 32px rgba(0,0,0,.3);
    }
    .stat-num {
      font-size: 34px; font-weight: 900; letter-spacing: -1px; line-height: 1;
      background: var(--grad-text); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 8px;
    }
    .stat-lbl { color: var(--muted); font-size: 13.5px; }

    /* ─────────────────── SECTIONS ─────────────────── */
    .sep { height: 1px; background: linear-gradient(90deg,transparent,var(--border),transparent); }

    section { padding: 78px 0; }

    .sec-label {
      display: inline-block; color: var(--accent);
      font-size: 11.5px; font-weight: 700;
      letter-spacing: 2.2px; text-transform: uppercase;
      margin-bottom: 10px;
    }
    section h2 {
      font-size: clamp(26px,3.8vw,38px); font-weight: 800;
      letter-spacing: -1px; color: #fff;
      line-height: 1.18; margin-bottom: 14px;
    }
    .sec-desc {
      color: var(--muted); font-size: 16px;
      max-width: 620px; margin-bottom: 42px; line-height: 1.72;
    }

    /* cards grid */
    .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .card {
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 26px; border-radius: var(--r);
      transition: all .25s ease;
    }
    .card:hover {
      border-color: rgba(56,189,248,.24);
      background: var(--bg-card-hov);
      box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.12);
      transform: translateY(-3px);
    }
    .card-ico {
      width: 42px; height: 42px; border-radius: 11px;
      background: var(--accent-dim);
      border: 1px solid rgba(56,189,248,.18);
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; margin-bottom: 16px;
    }
    .card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 11px; }
    .card p, .card li { color: var(--muted); font-size: 14px; line-height: 1.72; }
    .card ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .card ul li { display: flex; align-items: center; gap: 8px; }
    .card ul li::before {
      content: ''; width: 5px; height: 5px;
      border-radius: 50%; background: var(--accent); flex-shrink: 0;
    }

    /* tech tags */
    .tech-wrap { display: flex; flex-wrap: wrap; gap: 9px; }
    .tag {
      background: var(--bg-card); border: 1px solid var(--border);
      color: var(--muted); padding: 8px 15px;
      border-radius: 10px; font-size: 13px; font-weight: 500;
      cursor: default; transition: all .2s;
    }
    .tag:hover { color: var(--text); border-color: rgba(56,189,248,.28); background: var(--accent-dim); }

    /* ─────────────────── CONTACT ─────────────────── */
    .contact-box {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 28px; padding: 64px 36px; text-align: center;
      position: relative; overflow: hidden;
    }
    .contact-box::before {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 440px; height: 440px;
      background: radial-gradient(ellipse, rgba(56,189,248,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .contact-box h2 { font-size: clamp(26px,3.8vw,42px); margin-bottom: 14px; }
    .contact-box p { color: var(--muted); font-size: 16px; max-width: 480px; margin: 0 auto 34px; line-height: 1.72; }
    .contact-box .btn-row { justify-content: center; }

    /* ─────────────────── FOOTER ─────────────────── */
    footer { border-top: 1px solid var(--border); padding: 26px 0; }
    .foot-inner { display: flex; justify-content: space-between; align-items: center; }
    .foot-inner p { color: var(--dim); font-size: 13px; }
    .foot-links { display: flex; gap: 18px; }
    .foot-links a { color: var(--dim); text-decoration: none; font-size: 13px; transition: color .2s; }
    .foot-links a:hover { color: var(--muted); }

    /* ─────────────────── ANIMATION ─────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-content > * { animation: fadeUp .6s ease both; }
    .hero-content > *:nth-child(1) { animation-delay: .05s; }
    .hero-content > *:nth-child(2) { animation-delay: .15s; }
    .hero-content > *:nth-child(3) { animation-delay: .25s; }
    .hero-content > *:nth-child(4) { animation-delay: .35s; }

    /* ─────────────────── RESPONSIVE ─────────────────── */
    @media (max-width: 920px) {
      .hero-grid { grid-template-columns: 1fr; }
      .stats-grid, .cards { grid-template-columns: repeat(2,1fr); }
      .nav-inner { flex-direction: column; gap: 14px; padding: 14px 0; }
    }
    @media (max-width: 560px) {
      .stats-grid, .cards { grid-template-columns: 1fr; }
      .hero { padding: 68px 0 48px; }
      nav { flex-wrap: wrap; justify-content: center; }
      .foot-inner { flex-direction: column; gap: 10px; text-align: center; }
    }

    /* ─────────────────── PORTFOLIO ─────────────────── */
    .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

    .pcard {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--r); overflow: hidden; cursor: pointer;
      transition: all .25s ease;
    }
    .pcard:hover {
      border-color: rgba(56,189,248,.28);
      box-shadow: 0 10px 48px rgba(0,0,0,.55);
      transform: translateY(-4px);
    }

    .pcard-screen {
      position: relative; height: 188px; overflow: hidden;
      background: #020617;
    }
    .pcard-image {
      width: 100%; height: 100%; display: block;
      object-fit: cover; object-position: center top;
      transition: transform .45s ease;
    }
    .pcard:hover .pcard-image { transform: scale(1.06); }

    .pcard-overlay {
      position: absolute; inset: 0; z-index: 3;
      background: rgba(3,7,18,.72);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .22s;
    }
    .pcard:hover .pcard-overlay { opacity: 1; }
    .pcard-overlay-btn {
      color: #fff; font-size: 13px; font-weight: 600;
      border: 1px solid rgba(255,255,255,.3);
      padding: 9px 20px; border-radius: 9px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(6px);
    }

    .pcard-body { padding: 15px 18px 18px; }
    .pcard-name { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 6px; }
    .pcard-desc { color: var(--muted); font-size: 13px; line-height: 1.58; margin-bottom: 11px; }
    .pcard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .pcard-tag {
      font-size: 11px; font-weight: 600; letter-spacing: .2px;
      color: var(--accent); background: var(--accent-dim);
      border: 1px solid rgba(56,189,248,.14);
      padding: 3px 9px; border-radius: 999px;
    }

    /* ── Lightbox ── */
    .lb {
      position: fixed; inset: 0; z-index: 999;
      background: rgba(3,7,18,.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity .22s;
    }
    .lb.open { opacity: 1; pointer-events: all; }

    .lb-box {
      background: var(--bg-card); border: 1px solid var(--border-lt);
      border-radius: var(--r-lg); overflow: hidden;
      max-width: 800px; width: 100%; position: relative;
      transform: scale(.93) translateY(14px);
      transition: transform .26s cubic-bezier(.16,1,.3,1);
    }
    .lb.open .lb-box { transform: scale(1) translateY(0); }

    .lb-screen {
      height: 420px; position: relative; overflow: hidden;
      background: #020617;
      display: flex; align-items: center; justify-content: center;
    }
    .lb-image {
      width: 100%; height: 100%; display: block;
      object-fit: contain; object-position: center;
    }

    .lb-content { padding: 22px 26px 26px; }
    .lb-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 9px; }
    .lb-desc  { color: var(--muted); font-size: 14.5px; line-height: 1.74; margin-bottom: 16px; }
    .lb-tags  { display: flex; flex-wrap: wrap; gap: 7px; }

    .lb-close {
      position: absolute; top: 13px; right: 14px; z-index: 5;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
      color: var(--text); font-size: 18px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .18s; line-height: 1;
    }
    .lb-close:hover { background: rgba(255,255,255,.22); color: #fff; }

    .lb-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
      color: #fff; font-size: 20px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .18s; user-select: none; z-index: 5;
    }
    .lb-arrow:hover { background: rgba(255,255,255,.18); }
    .lb-prev { left: 12px; }
    .lb-next { right: 12px; }
    .lb-counter {
      position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
      color: var(--dim); font-size: 12px; font-weight: 600;
      letter-spacing: 1px; z-index: 5;
    }

    @media (max-width: 920px) {
      .portfolio-grid { grid-template-columns: repeat(2,1fr); }
      .lb-screen { height: 340px; }
    }
    @media (max-width: 560px)  {
      .portfolio-grid { grid-template-columns: 1fr; }
      .lb-screen { height: 260px; }
    }

    /* ─────────────────── DIFF SECTION ─────────────────── */
    .diff-section {
      padding: 0 0 80px;
      position: relative;
    }
    .diff-section::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(56,189,248,0.04) 0%, transparent 70%);
    }

    .diff-header { text-align: center; margin-bottom: 48px; }
    .diff-header h2 { margin-bottom: 14px; }

    .diff-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 44px;
    }

    .diff-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 30px 26px;
      position: relative; overflow: hidden;
      transition: all .25s ease;
    }
    .diff-card::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--grad);
      transform: scaleX(0); transform-origin: left;
      transition: transform .3s ease;
    }
    .diff-card:hover {
      border-color: rgba(56,189,248,.22);
      transform: translateY(-4px);
      box-shadow: 0 12px 44px rgba(0,0,0,.45);
    }
    .diff-card:hover::after { transform: scaleX(1); }

    .diff-ico {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: var(--accent-dim);
      border: 1px solid rgba(56,189,248,.18);
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      margin-bottom: 20px;
    }

    .diff-card h3 {
      font-size: 17px; font-weight: 700; color: #fff;
      margin-bottom: 12px;
    }
    .diff-card p {
      color: var(--muted); font-size: 14.5px; line-height: 1.76;
    }

    .diff-quote {
      text-align: center;
      font-size: 17px; font-style: italic;
      color: var(--muted); line-height: 1.7;
      max-width: 680px; margin: 0 auto;
      padding: 28px 32px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      background: rgba(56,189,248,.03);
      position: relative;
    }
    .diff-quote-mark {
      color: var(--accent); font-size: 26px;
      font-style: normal; line-height: 0;
      vertical-align: -8px; margin: 0 4px;
    }

    @media (max-width: 920px) { .diff-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 560px)  { .diff-grid { grid-template-columns: 1fr; } }

    /* ─────────────────── FLOATING BUTTONS ─────────────────── */
    .fab-wa {
      position: fixed; bottom: 28px; right: 28px; z-index: 200;
      display: flex; align-items: center; gap: 9px;
      background: #25d366; color: #fff;
      padding: 12px 18px 12px 14px;
      border-radius: 999px;
      text-decoration: none; font-weight: 700; font-size: 14px;
      box-shadow: 0 6px 28px rgba(37,211,102,.42);
      transition: transform .22s ease, box-shadow .22s ease, padding .22s ease;
      overflow: hidden; white-space: nowrap;
    }
    .fab-wa:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 10px 36px rgba(37,211,102,.58);
    }
    .fab-wa-label {
      max-width: 100px;
      opacity: 1;
      transition: max-width .3s ease, opacity .3s ease;
    }
    @media (max-width: 560px) {
      .fab-wa { padding: 12px; }
      .fab-wa-label { max-width: 0; opacity: 0; }
    }

    .fab-top {
      position: fixed; bottom: 88px; right: 28px; z-index: 200;
      width: 46px; height: 46px; border-radius: 50%;
      background: var(--bg-card); border: 1px solid var(--border-lt);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0; transform: translateY(16px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease, background .2s, box-shadow .2s;
      box-shadow: 0 4px 18px rgba(0,0,0,.35);
    }
    .fab-top.visible {
      opacity: 1; transform: translateY(0);
      pointer-events: all;
    }
    .fab-top:hover {
      background: var(--bg-card-hov);
      border-color: rgba(56,189,248,.35);
      box-shadow: 0 6px 24px rgba(56,189,248,.18);
      transform: translateY(-3px);
    }
    @media (max-width: 560px) {
      .fab-top { right: 28px; bottom: 84px; }
    }