:root{
    --bg:#FBF8F3;
    --bg-tint:#F2EBF3;
    --surface:#FFFFFF;
    --ink:#17142E;
    --ink-soft:#403A5F;
    --muted:#6E678C;
    --violet:#6D28D9;
    --violet-2:#8B5CF6;
    --indigo:#15122B;
    --indigo-2:#221A47;
    --orange:#F2682A;
    --orange-2:#FB8B3D;
    --green:#1FAE6B;
    --line:#EBE4D9;
    --shadow-sm:0 1px 2px rgba(23,20,46,.06), 0 2px 8px rgba(23,20,46,.05);
    --shadow:0 12px 30px -12px rgba(23,20,46,.18), 0 4px 10px -4px rgba(23,20,46,.08);
    --shadow-lg:0 40px 80px -28px rgba(23,20,46,.30), 0 12px 24px -12px rgba(23,20,46,.12);
    --shadow-orange:0 16px 34px -12px rgba(242,104,42,.45);
    --r:18px; --r-lg:26px; --r-pill:999px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:clip;width:100%}
  body{
    font-family:"DM Sans",system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--ink-soft);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:48px 20px;
    position:relative;
    overflow-x:clip;
  }
  h1{color:var(--ink);line-height:1.05;letter-spacing:-.03em;font-weight:800}
  a{color:inherit;text-decoration:none}
  svg{display:block}

  /* decorative brand glows */
  body::before,body::after{content:"";position:fixed;width:540px;height:540px;border-radius:50%;filter:blur(18px);z-index:0;pointer-events:none}
  body::before{top:-12%;left:50%;transform:translateX(-62%);background:radial-gradient(circle,rgba(242,104,42,.20),transparent 70%)}
  body::after{bottom:-14%;right:50%;transform:translateX(62%);background:radial-gradient(circle,rgba(109,40,217,.18),transparent 70%)}

  .bio{width:100%;max-width:440px;text-align:center;position:relative;z-index:1}

  .logo-mark{width:80px;height:80px;margin:0 auto 22px;border-radius:23px;background:linear-gradient(140deg,var(--orange),var(--violet));display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-orange)}
  .logo-mark svg{width:40px;height:40px}

  .bio h1{font-size:33px}
  .vmtech{margin-top:10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
  .vmtech::before,.vmtech::after{content:"—";color:var(--line);margin:0 9px}
  .desc{margin:16px auto 0;font-size:15.5px;color:var(--ink-soft);max-width:384px}

  .socials{display:flex;justify-content:center;gap:12px;margin-top:24px}
  .socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
  .socials a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}
  .socials a svg{width:21px;height:21px}
  .socials .ig{color:#E1306C}
  .socials .fb{color:#1877F2}
  .socials .wa{color:#25D366}

  .links{display:flex;flex-direction:column;gap:13px;margin-top:30px}
  .link-btn{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 18px;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
  .link-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--orange)}
  .link-btn .ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--bg-tint);display:grid;place-items:center;color:var(--violet)}
  .link-btn .ic svg{width:19px;height:19px}
  .link-btn .lb{flex:1;text-align:left;font-weight:600;font-size:15.5px;color:var(--ink)}
  .link-btn .chev{width:18px;height:18px;flex:0 0 18px;color:var(--muted);transition:transform .16s}
  .link-btn:hover .chev{transform:translateX(3px)}

  .link-btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;box-shadow:var(--shadow-orange)}
  .link-btn.primary:hover{border-color:transparent}
  .link-btn.primary .ic{background:rgba(255,255,255,.22);color:#fff}
  .link-btn.primary .lb{color:#fff}
  .link-btn.primary .chev{color:#fff}

  .cancel{display:inline-block;margin-top:22px;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .15s}
  .cancel:hover{color:var(--ink-soft)}

  .bio-foot{margin-top:38px;font-size:12px;color:var(--muted);line-height:1.75}

  /* entrance */
  .bio>*{animation:rise .6s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .bio>*:nth-child(1){animation-delay:.04s}
  .bio>*:nth-child(2){animation-delay:.10s}
  .bio>*:nth-child(3){animation-delay:.16s}
  .bio>*:nth-child(4){animation-delay:.22s}
  .bio>*:nth-child(5){animation-delay:.28s}
  .bio>*:nth-child(6){animation-delay:.34s}
  .bio>*:nth-child(7){animation-delay:.40s}
  .bio>*:nth-child(8){animation-delay:.46s}
  @media (prefers-reduced-motion:reduce){.bio>*{animation:none}}

  @media(max-width:420px){
    .bio h1{font-size:29px}
    .logo-mark{width:72px;height:72px;border-radius:21px}
    .logo-mark svg{width:36px;height:36px}
  }