<style>
  :root{
    --bg: #f6f7f8;
    --card: rgba(255,255,255,0.8);
    --text: #0b0b0b;
    --muted: #6b6f76;
    --accent: #0071e3;
    --glass: rgba(255,255,255,0.6);
    --glass-border: rgba(15,15,15,0.04);
    --shadow: 0 10px 30px rgba(16,24,40,0.06);
    --radius: 14px;
    --maxw: 1100px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", "Helvetica Neue", monospace;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --bg: linear-gradient(180deg,#050507 0%, #0b0b0f 100%);
      --card: rgba(20,20,24,0.6);
      --text: #e6e7e9;
      --muted: #9aa0a6;
      --accent: #38a3ff;
      --glass: rgba(255,255,255,0.03);
      --glass-border: rgba(255,255,255,0.04);
      --shadow: 0 16px 40px rgba(0,0,0,0.6);
    }
  }

  /* Basic reset */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding:32px 20px;
    display:flex;
    justify-content:center;
  }

  .stage{
    width:100%;
    max-width:var(--maxw);
  }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:32px;
  }

  .brand{
    display:flex;
    gap:14px;
    align-items:center;
    text-decoration:none;
    color:inherit;
  }

  .logo{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--accent), #60b8ff);
    color:white;
    font-weight:700;
    border-radius:12px;
    box-shadow:var(--shadow);
    flex:0 0 52px;
  }

  .brand h1{
    font-size:18px;
    margin:0;
    letter-spacing:-0.02em;
  }
  .brand p{margin:0;font-size:12px;color:var(--muted)}

  .controls{display:flex;gap:12px;align-items:center}
  .theme-toggle{
    background:var(--glass);
    border:1px solid var(--glass-border);
    padding:8px;
    border-radius:10px;
    cursor:pointer;
    display:inline-grid;
    grid-auto-flow:column;
    gap:8px;
    align-items:center;
    font-size:13px;
    color:var(--text);
  }

  main{
    display:block;
  }

  .slide-title {
    margin-bottom: 24px;
  }

  .project-link {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .project-link a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
  }

  .project-link a:hover,
  .project-link a:focus {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
  }

  /* Hero */
  .hero{
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%);
    border-radius:18px;
    padding:48px;
    display:flex;
    gap:40px;
    align-items:center;
    margin-bottom:34px;
    box-shadow:var(--shadow);
    backdrop-filter: blur(8px) saturate(120%);
  }

  .hero-left{flex:1; min-width:280px}
  .hero-right{width:420px; max-width:46%; display:flex; justify-content:center}

  h2{
    margin:0 0 12px 0;
    font-size:34px;
    line-height:1.03;
    letter-spacing:-0.01em;
  }

  p.lead{
    margin:0 0 20px 0;
    color:var(--muted);
    font-size:16px;
  }

  .cta-row{display:flex;gap:12px;align-items:center}
  .cta{
    border:0;
    background:var(--accent);
    color:white;
    padding:12px 16px;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    box-shadow: 0 6px 20px rgba(0,113,227,0.18);
  }
  .ghost{
    background:transparent;
    border:1px solid var(--glass-border);
    color:var(--text);
    padding:10px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
  }

  /* Device mock */
  .device{
    width:340px;
    height:220px;
    border-radius:20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    border:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
  }

  .device .screen{
    width:90%;
    height:82%;
    border-radius:12px;
    background:linear-gradient(180deg,#ffffff, #f4f6f8);
    box-shadow: inset 0 -20px 60px rgba(0,0,0,0.03);
    display:flex;
    gap:10px;
    padding:16px;
    flex-direction:column;
  }

  .chip{font-family:var(--mono);font-size:12px;color:var(--muted);background:rgba(0,0,0,0.03);padding:6px 8px;border-radius:8px;align-self:flex-start}

  /* Story sections */
  section.story{
    margin:48px 0;
    display:grid;
    gap:18px;
  }

  .section-inner{
    background:var(--card);
    border-radius:14px;
    padding:28px;
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow);
    display:flex;
    gap:26px;
    align-items:stretch;
  }

  .story .side{
    width:46%;
    min-width:260px;
  }

  .story .content{flex:1}

  h3{margin:0 0 8px 0;font-size:22px}
  p{margin:0 0 12px 0;color:var(--muted)}

  /* Project grid */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin-top:16px;
  }

  .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:12px;
    padding:16px;
    border:1px solid var(--glass-border);
    box-shadow:0 8px 26px rgba(8,12,20,0.06);
    display:flex;
    gap:12px;
    flex-direction:column;
    min-height:140px;
  }

  .card .meta{display:flex;justify-content:space-between;align-items:center}
  .badge{font-size:12px;background:rgba(0,0,0,0.04);padding:6px 8px;border-radius:10px;color:var(--muted)}
  .kpi{font-weight:700;color:var(--accent)}

  .card p{color:var(--muted);font-size:14px}
  .card .tags{display:flex;gap:8px;flex-wrap:wrap}
  .tag{font-size:12px;color:var(--muted);border-radius:8px;padding:6px 8px;border:1px solid var(--glass-border)}

  footer{
    margin-top:48px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    padding-bottom:40px;
  }

  /* Reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(18px) scale(0.995);
    transition:opacity 700ms cubic-bezier(.2,.9,.25,1), transform 700ms cubic-bezier(.2,.9,.25,1);
    will-change:transform,opacity;
  }
  .reveal.visible{
    opacity:1;
    transform:none;
  }

  /* small screens */
  @media (max-width:880px){
    .hero{flex-direction:column; padding:28px}
    .hero-right{width:100%; order:2}
    .hero-left{order:1}
    .story .side{width:100%}
    .section-inner{flex-direction:column}
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    .reveal{transition:none;opacity:1;transform:none}
  }

  /* Tiny utility */
  .muted{color:var(--muted)}
  .small{font-size:13px}
</style>