@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f3f2f5;background:#101013;font-synthesis:none;--accent:#b99aff;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 70% 12%,#7950bf16,transparent 45%)}
main{max-width:636px;padding:0 28px;margin:auto}header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;animation:enter .8s var(--ease) both}
.wordmark{font-family:Manrope,sans-serif;font-size:37px;font-weight:800;letter-spacing:-2px;text-decoration:none;color:#f2f0f5}.wordmark span{font-size:12px;vertical-align:top;display:inline-block;margin:7px 0 0 5px;letter-spacing:0}.header-note{text-align:right;font-size:12px;line-height:1.7;letter-spacing:1.2px;color:#96919f}
.intro{position:relative;isolation:isolate;padding:48px 0 36px;min-height:355px}.intro:before{content:'';position:absolute;z-index:-2;inset:4% -8% -5% 30%;background:radial-gradient(ellipse,#9470e021,transparent 67%);pointer-events:none}
.portrait{position:absolute;z-index:-1;right:-23px;top:8px;width:270px;height:348px;object-fit:cover;object-position:50% 26%;opacity:.87;/* The mask reaches zero on every edge, including the top. */-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0%,#000 37%,#000 77%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0%,#000 37%,#000 77%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;animation:portrait-in 1.5s var(--ease) both}
.eyebrow{font-size:12px;letter-spacing:2px;display:flex;align-items:center;gap:12px;color:#bfb8ca;animation:enter .85s .08s var(--ease) both}.line{height:1px;width:25px;background:var(--accent)}
h1{font-family:Manrope,sans-serif;font-size:56px;line-height:1.12;letter-spacing:-2.7px;font-weight:500;margin:25px 0 21px;max-width:410px;animation:enter .95s .15s var(--ease) both}h1 span{display:block;width:min-content;min-width:100%;color:var(--accent);background:linear-gradient(110deg,#dbcaff,#b392f5 60%,#9270d3);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.intro p{max-width:330px;font-size:16px;line-height:1.75;color:#b2acbc;margin:0;animation:enter .95s .23s var(--ease) both}.intro p br{display:none}
.tile{position:relative;display:block;text-decoration:none;color:inherit;border-radius:20px;transition:transform .45s var(--ease),border-color .3s,box-shadow .4s,background .3s;overflow:hidden;isolation:isolate}.tile:focus-visible,.wordmark:focus-visible{outline:3px solid #decfff;outline-offset:5px}.contact{padding:26px 28px 29px;background:linear-gradient(118deg,#dac8ff,#b496f1 65%,#a282df);color:#241538;border:1px solid #dfd0ff88;box-shadow:0 10px 40px #0003,inset 0 1px #fff5;animation:enter 1s .3s var(--ease) backwards}.contact:after{content:'';position:absolute;inset:-60% -35%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#fff4 49%,transparent 58%);transform:translateX(-80%);animation:sheen 1.5s .8s var(--ease) both}.contact-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.tag{font-size:12px;letter-spacing:1.3px;font-weight:600}.contact-top svg{width:25px;height:25px;flex-shrink:0}.contact-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:28px;gap:16px}.contact strong{display:block;font-family:Manrope,sans-serif;font-size:34px;font-weight:600;letter-spacing:-1.2px}.contact small{display:block;margin-top:7px;font-size:14px;color:#483365}.round-arrow{border:1px solid #5a3b7955;background:#ffffff12;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:28px;flex-shrink:0;transition:transform .4s var(--ease),background .3s}
.section-label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.2px;color:#98909f;margin:32px 0 16px;gap:16px;animation:enter 1s .38s var(--ease) both}.link-row{display:flex;align-items:center;gap:18px;padding:22px;background:linear-gradient(125deg,#211e28,#18171d);border:1px solid #ffffff12;margin-bottom:13px;box-shadow:inset 0 1px #ffffff03;animation:enter 1s .44s var(--ease) backwards}.link-row:nth-of-type(3){animation-delay:.52s}.link-row:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(240px circle at var(--pointer-x,50%) var(--pointer-y,50%),#b99aff16,transparent 80%);opacity:0;transition:opacity .4s}.icon{display:grid;place-items:center;background:#ffffff04;border:1px solid #b697e226;width:46px;height:46px;border-radius:13px;color:#c9b0f0;flex-shrink:0;transition:background .3s,transform .4s var(--ease)}.icon svg{width:23px;height:23px}.link-text{flex:1;min-width:0}.link-text strong{display:block;font-size:17px;font-weight:500}.link-text small{display:block;font-size:14px;color:#a9a2b2;margin-top:6px;line-height:1.4}.arrow{font-size:23px;color:#a69aaf;transition:transform .4s var(--ease),color .3s}
footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff10;margin-top:34px;padding:26px 0 35px;color:#92899d;letter-spacing:.8px;font-size:12px;gap:15px;animation:enter 1s .6s var(--ease) both}.asterisk{color:var(--accent);font-size:22px;vertical-align:middle;margin-left:6px;display:inline-block;transition:transform .8s var(--ease)}footer:hover .asterisk{transform:rotate(90deg)}.notice{font-size:14px;line-height:1.6;padding:16px;border:1px solid #584571;border-radius:12px;color:#d6c7ee}
@media(hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-4px)}.contact:hover{box-shadow:0 14px 45px #ab78ff24,inset 0 1px #fff7}.contact:hover .round-arrow{transform:rotate(45deg);background:#ffffff30}.link-row:hover{border-color:#aa83df60;box-shadow:0 8px 26px #0003}.link-row:hover:before{opacity:1}.link-row:hover .icon{background:#b99aff10;transform:rotate(-5deg)}.link-row:hover .arrow{transform:translate(3px,-3px);color:#dbcaff}}
.tile:active{transform:scale(.985)}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes portrait-in{from{opacity:0;transform:translateY(9px)}to{opacity:.87;transform:translateY(0)}}@keyframes sheen{to{transform:translateX(80%)}}
@media(max-width:480px){main{padding:0 22px}header{height:96px}.header-note{font-size:12px;letter-spacing:.5px}.intro{padding-top:38px;min-height:355px}.portrait{right:-16px;top:15px;width:225px;height:320px;opacity:.7;animation-name:enter}h1{font-size:48px;max-width:320px;letter-spacing:-2px}.intro p{max-width:260px}.eyebrow{font-size:12px;letter-spacing:1.4px}.contact{padding:23px}.contact strong{font-size:30px}.tag{font-size:12px;letter-spacing:.7px}.link-row{padding:20px 17px;gap:14px}.link-text small{font-size:13px}.section-label{letter-spacing:.65px}footer{font-size:12px;letter-spacing:0;flex-wrap:wrap}.contact-bottom{gap:12px}}
@media(max-width:350px){main{padding:0 16px}h1{font-size:43px}.header-note{max-width:175px}.portrait{width:190px}.contact{padding:20px}.contact small{max-width:180px;line-height:1.5}.tag{max-width:180px}.link-row{gap:11px}.icon{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.contact:after{display:none}.tile:hover,.icon,.arrow,.round-arrow{transform:none!important}}