  <style>
    :root{
      --bg:#0b0f15;          /* page background */
      --surface:#0f1724;     /* cards/nav */
      --muted:#9aa4b2;       /* secondary text */
      --text:#e5e7eb;        /* primary text */
      --brand:#6ee7f5;       /* accent */
      --brand-2:#7c3aed;     /* accent 2 */
      --ring: color-mix(in oklab, var(--brand) 40%, white);
      --max-w: 1200px;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#ffffff; --surface:#f6f7fb; --text:#0b0f15; --muted:#596074; }
    }
    *{ box-sizing:border-box }
    html{ scroll-behavior:smooth }
    body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:radial-gradient(1000px 600px at 80% -10%, rgba(124,58,237,.25), transparent 50%), radial-gradient(800px 500px at 10% -10%, rgba(110,231,245,.15), transparent 50%), var(--bg); color:var(--text); line-height:1.6 }
    a{ color:inherit; text-decoration:none }
    img{ max-width:100%; display:block }
    .container{ width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:24px; margin-top: -145px;}

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background-color: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
    .nav{ display:flex; align-items:center; justify-content:space-between; padding-block:14px }
    
    .nav a{ opacity:.9 }
    .nav a:hover{ opacity:1 }

    /* Mobile nav (checkbox hack) */
    #nav-toggle{ display:none }
    .links{ display:flex; gap:24px; align-items:center }
    .cta{ padding:10px 16px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f15; font-weight:700; box-shadow:0 8px 20px rgba(124,58,237,.35) }
    .cta:hover{ transform:translateY(-1px) }
    @media (max-width: 860px){
      .links{ position:fixed; inset:60px 16px auto 16px; top:68px; background:var(--surface); border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); border-radius:20px; box-shadow:var(--shadow); padding:16px; display:none; flex-direction:column; align-items:stretch }
      #nav-toggle:checked ~ .links{ display:flex }
      .hamburger{ display:block }
    }
    .hamburger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); background:var(--surface); place-content:center; cursor:pointer }
    .hamburger span{ display:block; width:20px; height:2px; background:var(--text); position:relative }
    .hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:100%; height:2px; background:var(--text) }
    .hamburger span::before{ top:-6px } .hamburger span::after{ top:6px }

    /* Hero */
    .hero{ padding-block: clamp(64px, 8vw, 120px); }
    .hero-grid{ display:grid; grid-template-columns: 1.35fr 1fr; gap:40px; align-items:centerl;padding-top: 220px; }
    .eyebrow{ display:inline-grid; grid-auto-flow:column; place-items:center; gap:10px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--muted) 20%, transparent); background:color-mix(in oklab, var(--surface) 60%, transparent) }
    .eyebrow small{ color:var(--muted); font-weight:600 }
    h1{ font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: clamp(32px, 5vw, 62px); line-height:1.05; margin:14px 0 12px; letter-spacing:-.02em }
    .lead{ font-size: clamp(16px, 2.2vw, 18px); color:var(--muted); max-width:60ch }
    .hero-cta{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap }
    .btn{ padding:12px 18px; border-radius:12px; border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); background:var(--surface); font-weight:700 }
    .btn:hover{ border-color:var(--brand) }
    .btn.primary{ background:#d7deff; color:#0b0f15; border:none }
    .statbar{ margin-top:26px; display:flex; gap:20px; flex-wrap:wrap; color:var(--muted) }
    .statbar span{background-color: #e6e6e63d; padding:8px 12px; border-radius:10px; border:1px dashed color-mix(in oklab, var(--muted) 22%, transparent) }
    .portrait{ position:relative; isolation:isolate }
    .portrait .card{ aspect-ratio:4/5; border-radius:24px; background:radial-gradient(120% 120% at 80% 10%, rgba(110,231,245,.25), transparent 35%), linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 60%, transparent)); border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); box-shadow:var(--shadow); overflow:hidden; display:grid; place-items:center; padding:16px }
    .portrait img{ width:88%; border-radius:18px; border:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }
    .glow{ position:absolute; inset:auto 0 -10% 0; height:40%; filter:blur(40px); background:radial-gradient(60% 60% at 50% 0%, rgba(124,58,237,.5), transparent 60%) ; z-index:-1 }
    @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; margin-top:-115px; } .portrait{ order:-1 } }

    /* Section chrome */
    section{ padding-block: clamp(56px, 9vw, 110px) }
    .section-head{ display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px }
    .section-head h2{ font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: clamp(26px, 3.6vw, 40px); margin:0 }
    .section-head p{ color:var(--muted); max-width:60ch; margin:0 }
    .grid{ display:grid; gap:20px }

    /* Services */
    .services{ grid-template-columns: repeat(12, minmax(0, 1fr)) }
    .service{ grid-column: span 4; background:var(--surface); border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); border-radius:20px; padding:20px; box-shadow:var(--shadow); transition:transform .2s ease }
    .service:hover{ transform: translateY(-2px) }
    .service h3{ margin:0 0 10px; font-size:20px }
    .service p{ margin:0; color:var(--muted) }
    .badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f15; font-weight:800; font-size:12px; letter-spacing:.3px }
    @media (max-width: 1000px){ .service{ grid-column: span 6 } }
    @media (max-width: 640px){ .service{ grid-column: span 12 } }

    /* Projects */
    .projects{ grid-template-columns: repeat(12, minmax(0, 1fr)) }
    .project{ position:relative; grid-column: span 6; overflow:hidden; border-radius:20px; border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 60%, transparent)); box-shadow:var(--shadow) }
    .project-media{ aspect-ratio: 16/10; overflow:hidden; display:grid; place-items:center; background:#0a1018 }
    .project .body{ padding:18px 18px 20px }
    .project h3{ margin:0 0 8px; font-size:20px }
    .project p{ margin:0; color:var(--muted) }
    .tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px }
    .tag{ border:1px solid color-mix(in oklab, var(--muted) 22%, transparent); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--muted) }
    @media (max-width: 860px){ 
	.project{ grid-column: span 12 }}

    /* About + Skills */
    .about{ display:grid; grid-template-columns: 1fr 1fr; gap:24px }
    .card{ background:var(--surface); border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); border-radius:20px; padding:22px; box-shadow:var(--shadow) }
    .skills{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:12px }
    .pill{ padding:10px 12px; border-radius:12px; border:1px dashed color-mix(in oklab, var(--muted) 22%, transparent); text-align:center; font-weight:700; color:var(--muted) }
    @media (max-width: 900px){ .about{ grid-template-columns: 1fr } }

    /* Testimonials */
    .testimonials{ grid-template-columns: repeat(12, minmax(0, 1fr)) }
    .quote{ grid-column: span 4; background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 60%, transparent)); border:1px solid color-mix(in oklab, var(--muted) 18%, transparent); border-radius:20px; padding:20px; box-shadow:var(--shadow) }
    .quote p{ margin-top:10px; color:var(--muted) }
    .quote strong{ display:block; margin-top:10px }
    @media (max-width: 1000px){ .quote{ grid-column: span 6 } }
    @media (max-width: 640px){ .quote{ grid-column: span 12 } }

    /* Contact */
    .contact{ display:grid; grid-template-columns: 1fr 1fr; gap:24px }
    .list{ display:grid; gap:10px; color:var(--muted) }
    form{ display:grid; gap:12px }
    input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--muted) 22%, transparent); background:#ffffff; color:var(--text); font:inherit }
    textarea{ min-height:120px; resize:vertical }
    .note{ font-size:14px; color:var(--muted) }
    .footer{padding: 100px 30px 56px 30px; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid color-mix(in oklab, var(--muted) 20%, transparent) }

    /* Utility */
    .fade-border{ border-top:1px solid color-mix(in oklab, var(--muted) 18%, transparent); margin-top:24px; padding-top:24px }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
  /* ---------------- RESPONSIVENESS ---------------- */

/* Tablet */
  @media (max-width: 992px) {
  .about {
    grid-template-columns: 1fr; /* stack cards */
  }

  .skills {
    grid-template-columns: repeat(4, 1fr); /* 4 per row */
  }
}

  /* Mobile */
    @media (max-width: 600px) {
	.about {
		grid-template-columns: 1fr; /* single column */
		gap: 16px;
			}

	.skills {
		grid-template-columns: repeat(2, 1fr); /* 2 per row */
		gap: 8px;
	}

	.pill {
    font-size: 12px;
    padding: 8px 10px;
						}
	.section-head{ margin-top:45px;}
	.section-head p{ font-size: 13px;text-align: center;}
	.section-head h2{font-size:10;}
	 .section-head {display: flex; justify-content: center;flex-wrap: wrap;}
	 h1 {text-align: center; font-size:20px;}
	.eyebrow {margin-left: 40px;}
}

/* ---------------- RESPONSIVENESS ---------------- */

/* Tablet */
@media (max-width: 992px) {
  .contact {
    grid-template-columns: 1fr; /* 2 columns → single column */
    gap: 20px;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 60px 20px 40px 20px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .contact {
    grid-template-columns: 1fr; /* single column */
    gap: 16px;
  }

  input,
  textarea {
    font-size: 14px;
    padding: 10px 12px;
  }

  .note {
    font-size: 12px;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 100px 16px 32px 16px;
  }
}


/* --- Modal & Box (centered, small) --- */
	.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none;
    align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
	.modal.open { display: flex; }
	.modal-box { width: 100%; max-width: 480px; background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b); color: #fff;
		border-radius: 16px; padding: 20px 20px 22px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
		position: relative; animation: fadeIn .25s ease; }
	.close-btn { position: absolute; top: 10px; right: 12px; border: none; background: transparent;
		color: #fff; font-size: 20px; cursor: pointer }

	/* heading + game */
	#gameArea { height: 64px; position: relative; margin: 6px 0 14px; background: rgba(255, 255, 255, .06);
		border-radius: 10px; overflow: hidden }
	#ball { width: 24px; height: 24px; border-radius: 999px; background: #facc15; position: absolute; top: 20px; left: 20px }
		@keyframes fadeIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }

	/* form layout */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px }
.form-group label { display: block; margin: 6px 0 4px; font-size: 15px; color: #000 }
.form-group input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #1f2937;
					background: #ffffff; color: #e21e8a; outline: none ;}
.form-group input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25) }

.captcha-box { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #1f2937;
  border-radius: 10px; padding: 6px 8px; height: 40px }
#captchaText { font-weight: 700; font-size: 16px; letter-spacing: 2px; background: #ffffff; color: #111827;
  padding: 4px 8px; border-radius: 8px }
.refresh { border: none; background: #374151; color: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer }
.refresh:hover { background: #4b5563 }

.submit-btn { width: 100%; padding: 12px 14px; border: none; border-radius: 10px; background: #000;
  color: #fff; font-weight: 700; cursor: pointer }
.submit-btn:hover { background: #55b1d1}

/* badge button look */
.badge { border: none; padding: 6px 12px; border-radius: 8px; color: #fff; font-weight: 700 }

/* mobile: stack rows */
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr } }

  #ball {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #facc15;
    cursor: pointer;
    transition: background 0.3s;
  }
  /* Toast style */
  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4ade80;
    color: white;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 9999;
  }
  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }
  </style>